Search completed in 1.14 seconds.
Performance fundamentals - Web Performance
per
formance means efficiency.
... in the context of open web apps, this document explains in general what per
formance is, how the browser plat
form helps improve it, and what tools and processes you can use to test and improve it.
... what is per
formance?
...And 34 more matches
Animation performance and frame rate - Web Performance
the per
formance cost of animating a css property can vary from one property to another, and animating expensive css properties can result in jank as the browser struggles to hit a smooth frame rate.
... for animated media, such as video and animated gifs, the main per
formance concern is file size - downloading the file size fast enough to not negatively impact per
formance is the greatest issue.
... code based animations, be it css, svg, <canvas>, webgl or other javascript animations, can cause per
formance issues even if the bandwidth footprint is small.
...And 15 more matches
Performance Monitoring: RUM vs synthetic monitoring - Web Performance
synthetic monitoring and real user monitoring (rum) are two approaches for monitoring and providing insight into web per
formance.
... rum and synthetic monitoring provide for different views of per
formance and have benefits, good use cases and shortfalls.
... rum is generally best suited for understanding long-term trends whereas synthetic monitoring is very well suited to regression testing and mitigating shorter-term per
formance issues during development.
...And 14 more matches
Troubleshooting XForms Forms - Archive of obsolete content
introduction the idea of this page is to collect some solutions to some of the common errors typically made when creating an x
forms
form.
... always run your
form through the x
forms validator.
... it checks your
form for a lot of errors.
...And 12 more matches
Intl.DateTimeFormat.prototype.formatToParts() - JavaScript
the intl.datetime
format.prototype.
formattoparts() method allows locale-aware
formatting of strings produced by datetime
format
formatters.
... syntax datetime
format.
formattoparts(date) parameters date optional the date to
format.
... return value an array of objects containing the
formatted date in parts.
...And 12 more matches
Intl.RelativeTimeFormat.prototype.format() - JavaScript
the intl.relativetime
format.prototype.
format() method
formats a value and unit according to the locale and
formatting options of this relativetime
format object.
... syntax relativetime
format.
format(value, unit) parameters value numeric value to use in the internationalized relative time message.
...plural
forms are also permitted.
...And 10 more matches
CSS and JavaScript animation performance - Web Performance
in this article, we analyse the per
formance differences between css- and javascript-based animation.
... in terms of per
formance, there is no difference between implementing an animation with css transitions or animations.
... per
formance comparison: transitions vs.
...And 9 more matches
Using the Mozilla JavaScript interface to XSL Transformations - XSLT: Extensible Stylesheet Language Transformations
this document describes the javascript interface in mozilla 1.2 and up to the xslt processing engine (trans
formiix).
...rather than modifying the dom it is recommended to use stylesheet parameters which are usually easier and can give better per
formance.
... var testtrans
form = document.implementation.createdocument("", "test", null); // just an example to get a trans
form into a script as a dom // xmldocument.load is asynchronous, so all processing happens in the // onload handler testtrans
form.addeventlistener("load", onload, false); testtrans
form.load("test-trans
form.xml"); function onload() { processor.importstylesheet(testtrans
form); } xsltprocessor.importstylesheet() requires one argument, a dom node.
...And 9 more matches
Performance budgets - Web Performance
a per
formance budget is a limit to prevent regressions.
... why do i need a per
formance budget?
...it's a tradeoff between user experience, against other per
formance indicators (e.g.
...And 8 more matches
Intl.NumberFormat.prototype.formatToParts() - JavaScript
the intl.number
format.prototype.
formattoparts() method allows locale-aware
formatting of strings produced by number
format
formatters.
... syntax intl.number
format.prototype.
formattoparts(number) parameters number optional a number or bigint to
format.
... return value an array of objects containing the
formatted number in parts.
...And 7 more matches
Intl.DateTimeFormat.prototype.format() - JavaScript
the intl.datetime
format.prototype.
format() method
formats a date according to the locale and
formatting options of this intl.datetime
format object.
... syntax datetime
format.
format(date) parameters date the date to
format.
... description the
format getter
formats a date into a string according to the locale and
formatting options of this intl.datetime
format object.
...And 6 more matches
Intl.RelativeTimeFormat.prototype.formatToParts() - JavaScript
the intl.relativetime
format.prototype.
formattoparts() method returns an array of objects representing the relative time
format in parts that can be used for custom locale-aware
formatting.
... syntax relativetime
format.
formattoparts(value, unit) parameters value numeric value to use in the internationalized relative time message.
...plural
forms are also permitted.
...And 5 more matches
Intl.ListFormat.prototype.formatToParts() - JavaScript
the intl.list
format.prototype.
formattoparts() method returns an array of objects representing the different components that can be used to
format a list of values in a locale-aware fashion.
... syntax intl.list
format.prototype.
formattoparts(list) parameters list an array of values to be
formatted according to a locale.
... return value an array of components which contains the
formatted parts from the list.
...And 3 more matches
Intl.NumberFormat.prototype.format() - JavaScript
the intl.number
format.prototype.
format() method
formats a number according to the locale and
formatting options of this number
format object.
... syntax number
format.
format(number) parameters number a number or bigint to
format.
... description the
format getter function
formats a number into a string according to the locale and
formatting options of this number
format object.
...And 3 more matches
<xsl:decimal-format> - XSLT: Extensible Stylesheet Language Transformations
xslt/xpath reference: xslt elements, exslt functions, xpath functions, xpath axes the <xsl:decimal-
format> element defines the characters and symbols that are to be used in converting numbers into strings using the
format-number( ) function.
... syntax <xsl:decimal-
format name=name decimal-separator=character grouping-separator=character infinity=string minus-sign=character nan=string percent=character per-mille=charater zero-digit=character digit=character pattern-separator=character /> required attributes none.
... optional attributes name specifies a name for this
format.
...And 3 more matches
Intl.ListFormat.prototype.format() - JavaScript
the
format() method returns a string with a language-specific representation of the list.
... syntax list
format.
format([list]); parameters list an iterable object, such as an array return value a language-specific
formatted string representing the elements of the list description the
format() method returns a string that has been
formatted based on parameters provided in the intl.list
format object.
... the locales and options parameters customize the behavior of
format() and let applications specify the language conventions that should be used to
format the list.
...And 2 more matches
FormDataEvent.formData - Web APIs
the
formdata read only property of the
formdataevent interface contains the
formdata object representing the data contained in the
form when the event was fired.
... syntax
formdata =
formdataevent.
formdata returns a
formdata object.
... examples // grab reference to
form const
formelem = document.queryselector('
form'); // submit handler
formelem.addeventlistener('submit', (e) => { // on
form submission, prevent default e.preventdefault(); // construct a
formdata object, which fires the
formdata event new
formdata(
formelem); }); //
formdata handler to retrieve data
formelem.addeventlistener('
formdata', (e) => { console.log('
formdata fired'); // get the
form data from the event object let data = e.
formdata; for (var value of data.values()) { console.log(value); } // submit the data via xhr var request = new xmlhttprequest(); request.open("post", "/
formhandler"); request.send(data); }); specifications specification status comment html living standardthe definitio...
...n of '
formdata' in that specification.
HTMLFormElement: formdata event - Web APIs
the
formdata event fires after the entry list representing the
form's data is constructed.
... this happens when the
form is submitted, but can also be triggered by the invocation of a
formdata() constructor.
... general info bubbles no cancelable no interface
formdataevent event handler property globaleventhandlers.on
formdata examples // grab reference to
form const
formelem = document.queryselector('
form'); // submit handler
formelem.addeventlistener('submit', (e) => { // on
form submission, prevent default e.preventdefault(); // construct a
formdata object, which fires the
formdata event new
formdata(
formelem); }); //
formdata handler to retrieve data
formelem.addeventlistener('
formdata', (e) => { console.log('
formdata fired'); // get the
form data from the event object let data = e.
formdata; for (var value of data.values()) { console.log(value); } // submit the data via xhr var request = new xmlhttprequest(...
...); request.open("post", "/
formhandler"); request.send(data); }); the on
formdata version would look like this:
formelem.on
formdata = (e) => { console.log('
formdata fired'); // get the
form data from the event object let data = e.
formdata; for (var value of data.values()) { console.log(value); } // submit the data via xhr var request = new xmlhttprequest(); request.open("post", "/
formhandler"); request.send(data); }; specifications specification status comment html living standardthe definition of '
formdata' in that specification.
SyntaxError: Malformed formal parameter - JavaScript
the javascript exception "mal
formed
formal parameter" occurs when the argument list of a function() constructor call is invalid somehow.
... message syntaxerror: expected {x} (edge) syntaxerror: mal
formed
formal parameter (firefox) error type syntaxerror what went wrong?
..."
formal parameter" is a fancy way of saying "function argument".
... and we use the word "mal
formed" because all firefox engineers are huge fans of 19th-century gothic horror novels.
Intl.DateTimeFormat.prototype.formatRange() - JavaScript
the intl.datetime
format.prototype.
formatrange()
formats a date range in the most concise way based on the locale and options provided when instantiating intl.datetime
format object.
... syntax intl.datetime
format.prototype.
formatrange(startdate, enddate) examples basic
formatrange usage this method receives two dates and
formats the date range in the most concise way based on the locale and options provided when instantiating intl.datetime
format.
... let date1 = new date(date.utc(2007, 0, 10, 10, 0, 0)); let date2 = new date(date.utc(2007, 0, 10, 11, 0, 0)); let date3 = new date(date.utc(2007, 0, 20, 10, 0, 0)); // > 'wed, 10 jan 2007 10:00:00 gmt' // > 'wed, 10 jan 2007 11:00:00 gmt' // > 'sat, 20 jan 2007 10:00:00 gmt' let fmt1 = new intl.datetime
format("en", { year: '2-digit', month: 'numeric', day: 'numeric', hour: 'numeric', minute: 'numeric' }); console.log(fmt1.
format(date1)); console.log(fmt1.
formatrange(date1, date2)); console.log(fmt1.
formatrange(date1, date3)); // > '1/10/07, 10:00 am' // > '1/10/07, 10:00 – 11:00 am' // > '1/10/07, 10:00 am – 1/20/07, 10:00 am' let fmt2 = new intl.datetime
format("en", { year: 'numeric', month: 'short', day: 'numeric' }); console.log(fmt2.
format(date1)); c...
...onsole.log(fmt2.
formatrange(date1, date2)); console.log(fmt2.
formatrange(date1, date3)); // > 'jan 10, 2007' // > 'jan 10, 2007' // > 'jan 10 – 20, 2007' specifications specification intl.datetime
format.
formatrangethe definition of '
formatrange()' in that specification.
Intl.DateTimeFormat.prototype.formatRangeToParts() - JavaScript
the intl.datetime
format.prototype.
formatrangetoparts() method allows locale-specific tokens representing each part of the
formatted date range produced by datetime
format
formatters.
... syntax intl.datetime
format.prototype.
formatrangetoparts(startdate, enddate) examples basic
formatrangetoparts usage this method receives two dates and returns an array of objects containing the locale-specific tokens representing each part of the
formatted date range.
... let date1 = new date(date.utc(2007, 0, 10, 10, 0, 0)); let date2 = new date(date.utc(2007, 0, 10, 11, 0, 0)); // > 'wed, 10 jan 2007 10:00:00 gmt' // > 'wed, 10 jan 2007 11:00:00 gmt' let fmt = new intl.datetime
format("en", { hour: 'numeric', minute: 'numeric' }); console.log(fmt.
formatrange(date1, date2)); // > '10:00 – 11:00 am' fmt.
formatrangetoparts(date1, date2); // return value: // [ // { type: 'hour', value: '10', source: "startrange" }, // { type: 'literal', value: ':', source: "startrange" }, // { type: 'minute', value: '00', source: "startrange" }, // { type: 'literal', value: ' – ', source: "shared" }, // { type: 'hour', value: '11', source: "endrange" }, // { type: 'literal', value: ':', source: "endrange" }, // { typ...
...e: 'minute', value: '00', source: "endrange" }, // { type: 'literal', value: ' ', source: "shared" }, // { type: 'dayperiod', value: 'am', source: "shared" } // ] specifications specification intl.datetime
format.
formatrangethe definition of '
formatrangetoparts()' in that specification.
Optimizing startup performance - Web Performance
an often overlooked aspect of app software development—even among those focusing on per
formance optimization—is startup per
formance.
...this article offers tips and suggestions to help you achieve that goal, both when writing a new app and when porting an app from another plat
form to the web.
... starting up nicely regardless of plat
form, it's always a good idea to start up as quickly as possible.
...all pure startup calculations should be per
formed in background threads, while you keep the run-time of main thread events as short as possible.
Recommended Web Performance Timings: How long is too long? - Web Performance
in optimizing for per
formance, do set an ambitious first load goal, such as 5 seconds over the mobile 3g network and 1.5 seconds on an office t1 line, with even more ambitious page load goals for subsequent page loads, leveraging service workers and caching.
... if a response takes longer than 100ms to complete, provide some
form of feedback to in
form the user the interaction has occurred.
<input>: The Input (Form Input) element - HTML: Hypertext Markup Language
the html <input> element is used to create interactive controls for web-based
forms in order to accept data from the user; a wide variety of types of input data and control widgets are available, depending on the device and user agent.
... <input type="range" name="range" min="0" max="25"/> html5 reset a button that resets the contents of the
form to default values.
... <input type="search" name="search"/> html5 submit a button that submits the
form.
...And 97 more matches
Client-side form validation - Learn web development
previous overview:
forms next before submitting data to the server, it is important to ensure all required
form controls are filled out, in the correct
format.
... this is called client-side
form validation, and helps ensure data submitted matches the requirements set forth in the various
form controls.
... this article leads you through basic concepts and examples of client-side
form validation.
...And 82 more matches
XForms Custom Controls - Archive of obsolete content
purpose you are in the right place if you would like to create your own custom renderings of the x
forms controls like input, output, trigger, etc.
... we will also show you how to create custom controls that work with the x
forms model and are automatically updated just like x
forms controls.
... the purpose of this article is to give you enough background in
formation so that you'll be able to get a good start.
...And 58 more matches
Web Performance
web per
formance is the objective measurements and the perceived user experience of load time and runtime.
... web per
formance is how long a site takes to load, become interactive and responsive, and how smooth the content is during user interactions - is the scrolling smooth?
...web per
formance includes both objective measurements like time to load, frames per second, and time to become interactive, and subjective experiences of how long it felt like it took the content to load.
...And 58 more matches
Your first form - Learn web development
overview:
forms next the first article in our series provides you with your very first experience of creating a web
form, including designing a simple
form, implementing it using the right html
form controls and other html elements, adding some very simple styling via css, and describing how data is sent to a server.
... objective: to gain familiarity with what web
forms are, what they are used for, how to think about designing them, and the basic html elements you'll need for simple cases.
... what are web
forms?
...And 54 more matches
Media container formats (file types) - Web media technologies
the
format of audio and video media files is defined in two parts (three if a file has both audio and video in it, of course): the audio and/or video codecs used and the media container
format (or file type) used.
... in this guide, we'll look at the container
formats used most commonly on the web, covering basics about their specifications as well as their benefits, limitations, and ideal use cases.
...see codecs used by webrtc for in
formation about codecs commonly used for making webrtc calls, as well as browser compatibility in
formation around codec support in webrtc.
...And 52 more matches
How to structure a web form - Learn web development
previous overview:
forms next with the basics out of the way, we'll now look in more detail at the elements used to provide structure and meaning to the different parts of a
form.
... objective: to understand how to structure html
forms and give them semantics so they are usable and accessible.
... the flexibility of
forms makes them one of the most complex structures in html; you can build any kind of basic
form using dedicated
form elements and attributes.
...And 45 more matches
HTMLFormElement - Web APIs
the html
formelement interface represents a <
form> element in the dom.
... it allows access to—and, in some cases, modification of—aspects of the
form, as well as access to its component elements.
...aco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">htmlelement</text></a><polyline points="491,25 501,20 501,30 491,25" stroke="#d4dde4" fill="none"/><line x1="501" y1="25" x2="509" y2="25" stroke="#d4dde4"/><line x1="509" y1="25" x2="509" y2="90" stroke="#d4dde4"/><line x1="509" y1="90" x2="492" y2="90" stroke="#d4dde4"/><a xlink:href="/docs/web/api/html
formelement" target="_top"><rect x="341" y="65" width="150" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="416" y="94" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">html
formelement</text></a></svg></div> a:hover text { fill: #0095dd; pointer-events: all;} properties this interf...
...And 44 more matches
Image file type and format guide - Web media technologies
in this guide, we'll cover the image file types generally supported by web browsers, and provide insights that will help you select the most appropriate
formats to use for your site's imagery.
... common image file types there are many image file
formats in the world.
... abbreviation file
format mime type file extension(s) browser compatibility apng animated portable network graphics image/apng .apng chrome, edge, firefox, opera, safari bmp bitmap file image/bmp .bmp chrome, edge, firefox, internet explorer, opera, safari gif graphics interchange
format image/gif .gif chrome, edge, firefox, internet explorer, opera, safari ico microsoft icon image/x-icon .ico, .cur chrome, edge, firefox, internet explorer, opera, safari jpeg joint ...
...And 44 more matches
Sending form data - Learn web development
previous overview:
forms once the
form data has been validated on the client-side, it is okay to submit the
form.
...this article looks at what happens when a user submits a
form — where does the data go, and how do we handle it when it gets there?
... we also look at some of the security concerns associated with sending
form data.
...And 42 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.
...And 42 more matches
Basic native form controls - Learn web development
previous overview:
forms next in the previous article, we marked up a functional web
form example, introducing some
form controls and common structural elements, and focusing on accessibility best practices.
... next we will look at the functionality of the different
form controls, or widgets, in detail — studying all the different options available to collect different types of data.
... in this particular article we will look at the original set of
form controls, available in all browsers since the early days of the web.
...And 38 more matches
Sending forms through JavaScript - Learn web development
html
forms can send an http request declaratively.
... but
forms can also prepare an http request to send via javascript, for example via xmlhttprequest.
... a
form is not always a
form with progressive web apps, single page apps, and framework based apps, it's common to use html
forms to send data without loading a new document when response data is received.
...And 37 more matches
Using microformats - Archive of obsolete content
micro
formats allow web sites to provide semantic data to the browser in order to make it possible to present summaries of the in
formation on a page without having to know how to parse the document itself.
... firefox 3 implements a global micro
formats object that provides access to micro
formats.
... this object and its api make finding and reading micro
formats easy to do.
...And 35 more matches
Mozilla XForms User Interface - Archive of obsolete content
introduction this article is a quick reference of the x
forms user interface elements.
... mainly this is aimed to document how x
forms elements will be presented in mozilla since the x
forms specifications give only a hint of how controls might be rendered.
... currently x
forms can be hosted by xhtml and xul in seamonkey and firefox.
...And 35 more matches
Performance API - Web APIs
the high resolution time standard defines a per
formance interface that supports client-side latency measurements within applications.
... the per
formance interfaces are considered high resolution because they are accurate to a thousandth of a millisecond (subject to hardware or software constraints).
... since a plat
form's system clock is subject to various skews (such as ntp adjustments), the interfaces support a monotonic clock i.e.
...And 33 more matches
Performance best practices for Firefox front-end engineers
this guide will help firefox developers working on front-end code produce code which is as per
formant as possible—not just on its own, but in terms of its impact on other parts of firefox.
...see detecting and avoiding synchronous reflow below for more in
formation.
... this also means that requestanimationframe() is not a good place to put queries for layout or style in
formation.
...And 32 more matches
The "why" of web performance - Learn web development
overview: per
formance next web per
formance is all about making websites fast, including making slow processes seem fast.
... this article provides an introduction into why web per
formance is important to site visitors and for your business goals.
... objective: to gain basic familiarity of why web per
formance is important for good user experience.
...And 31 more matches
XForms Accessibility
intoduction this article provides a quick guide to how accessibility is handled in gecko for x
forms..
... assistive technologies api for x
forms is supported starting from firefox 3 (gecko 1.9).
... implementation of accessible objects for x
forms elements is based on top of the existing object hierarchy introduced in the mozilla accessibility module.
...And 31 more matches
PerformanceTiming - Web APIs
please use the per
formancenavigationtiming interface instead.
... the per
formancetiming interface is a legacy interface kept for backwards compatibility and contains properties that offer per
formance timing in
formation for various events which occur during the loading and use of the current page.
... you get a per
formancetiming object describing your page using the window.per
formance.timing property.
...And 30 more matches
Advanced form styling - Learn web development
previous overview:
forms next in this article, we will see what can be done with css to style the types of
form control that are more difficult to style — the "bad" and "ugly" categories.
... objective: to understand what parts of
forms are hard to style, and why; to learn what can be done to customize them.
... 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.
...And 27 more matches
Measuring performance - Learn web development
previous overview: per
formance next meauring per
formance provides an important metric to help you asses the success of your app, site, or web service.
... for example, you can use per
formance metrics to determine how your app per
forms in comparison to a competitor or you can compare your app's per
formance across releases.
...they should be collected and measured in a consistent manner and analyzed in a
format that can be consumed and understood by non-technical stakeholders.
...And 27 more matches
<form> - HTML: Hypertext Markup Language
the html <
form> element represents a document section containing interactive controls for submitting in
formation.
... 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.
...And 27 more matches
PerformanceResourceTiming - Web APIs
the per
formanceresourcetiming interface enables retrieval and analysis of detailed network timing data regarding the loading of an application's resources.
...additionally, the interface extends per
formanceentry with other properties which provide data about the size of the fetched resource as well as the type of resource that initiated the fetch.
... <div id="interfacediagram" style="display: inline-block; position: relative; width: 100%; padding-bottom: 11.666666666666666%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 70" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/per
formanceentry" target="_top"><rect x="1" y="1" width="160" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="81" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">per
formanceentry</text></a><polyline points="161,25 171,20 171,30 161,25" stroke="#d4dde4" fill="none"/><line x1="171" y1="25" x2="201" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web...
...And 26 more matches
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 in
formation"> <!--
form content --> </div> this is a
form that collects and saves a user's contact in
formation.
... important: use an html <
form> element to contain your
form controls, rather than the aria
form role, unless you have a very good reason.
...And 26 more matches
Parsing microformats in JavaScript - Archive of obsolete content
firefox 3 introduces a new api for managing and parsing micro
formats.
... this article examines the generic micro
format parsing api, which handles the heavy lifting of pulling data out of a micro
format.
... this api is primarily intended to be used when implementing new micro
formats.
...And 25 more matches
Performance - Web APIs
the per
formance interface provides access to per
formance-related in
formation for the current page.
... it's part of the high resolution time api, but is enhanced by the per
formance timeline api, the navigation timing api, the user timing api, and the resource timing api.
... an object of this type can be obtained by calling the window.per
formance read-only attribute.
...And 25 more matches
WebGLRenderingContext.getUniformLocation() - Web APIs
part of the webgl api, the webglrenderingcontext method getuni
formlocation() returns the location of a specific uni
form variable which is part of a given webglprogram.
... the uni
form variable is returned as a webgluni
formlocation object, which is an opaque identifier used to specify where in the gpu's memory that uni
form variable is located.
... once you have the uni
form's location, you can access the uni
form itself using one of the other uni
form access methods, passing in the uni
form location as one of the inputs: getuni
form() returns the value of the uni
form at the given location.
...And 24 more matches
text-transform - CSS: Cascading Style Sheets
the text-trans
form css property specifies how to capitalize an element's text.
... the text-trans
form property takes into account language-specific case mapping rules such as the following: in turkic languages, like turkish (tr), azerbaijani (az), crimean tatar (crh), volga tatar (tt), and bashkir (ba), there are two kinds of i, with and without the dot, and two case pairings: i/İ and ı/i.
... in dutch (nl), the ij digraph becomes ij, even with text-trans
form: capitalize, which only puts the first letter of a word in uppercase.
...And 24 more matches
Performance Timeline - Web APIs
the per
formance timeline api defines extensions to the per
formance interface to support client-side latency measurements within applications.
... the extensions provide interfaces to retrieve per
formance entry metrics based on specific filter criteria.
... the standard also includes interfaces that allow an application to define per
formance observer callbacks that are notified when specific per
formance events are added to the browser's per
formance timeline.
...And 23 more matches
Microformats - HTML: Hypertext Markup Language
summary micro
formats (sometimes abbreviated μf) are standards used to embed semantics & structured data in html, and provide an api to be used by search engines, aggregators, and other tools.
... these minimal patterns of html are used for marking up entities that range from fundamental to domain-specific in
formation, such as people, organizations, events, and locations.
... micro
formats use supporting vocabularies to describe objects and name-value pairs to assign values to their properties.
...And 22 more matches
Intl.NumberFormat() constructor - JavaScript
the intl.number
format() constructor creates objects that enable language sensitive number
formatting.
... syntax new intl.number
format([locales[, options]]) parameters locales optional a string with a bcp 47 language tag, or an array of such strings.
... for the general
form and interpretation of the locales argument, see the intl page.
...And 22 more matches
Navigation and resource timings - Web Performance
the general per
formance timings below have been deprecated in favor of the per
formance entry api, which provides for marking and measuring times along the navigation and resource loading process.
... per
formance timings the per
formancetiming api, a javascript api for measuring the loading per
formance of the requested page, is deprecated but supported in all browsers.
... it has been replaced with the per
formancenavigationtiming api.
...And 22 more matches
Web performance - Learn web development
this is known as web per
formance, and in this module you'll focus on the fundamentals of how to create per
formant websites.
... the rest of our beginner's learning material tried to stick to web best practices such as per
formance and accessibility as much as possible, however, it is good to focus specifically on such topics too, and make sure you are familiar with them.
... learning pathway while knowing html, css, and javascript is needed for implementing many web per
formance improvement recommendations, knowing how to build applications is not a necessary pre-condition for understanding and measuring web per
formance.
...And 21 more matches
Web forms — Working with user data - Learn web development
this module provides a series of articles that will help you master the essentials of web
forms.
... web
forms are a very powerful tool for interacting with users — most commonly they are used for collecting data from users, or allowing them to control a user interface.
...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.
...And 20 more matches
Perceived performance - Learn web development
previous overview: per
formance next perceived per
formance is how fast a website seems to the user.
... how a user perceives your per
formance is as important, or perhaps more important, than any objective statistic, but it's subjective, and not as readily measurable.
... perceived per
formance is user perspective, not a metric.
...And 20 more matches
The business case for web performance - Learn web development
previous overview: per
formance we've discussed the importance of web per
formance.
... you've learned what you need to do to optimize for web per
formance.
... but how do you convince your clients and/or management to prioritize and invest in per
formance?
...And 20 more matches
HTML forms in legacy browsers - Learn web development
chrome plat
form status site is also important.
... make things simple because html
forms involves complex interaction, there is one rule of thumb: keep it simple, also known as the "kiss principal".
... there are so many cases where we want
forms that are "nicer" or "with advanced functionality", but building efficient html
forms is not a question of design or technology.
...And 19 more matches
What is web performance? - Learn web development
previous overview: per
formance next web per
formance is all about making web sites fast, including making slow processes seem fast.
...this article provides a brief introduction to objective, measureable web per
formance*, looking at what technologies, techniques, and tools are involved in web optimization.
... objective: to gain basic familiarity of what is involved with web per
formance.
...And 19 more matches
PerformanceNavigationTiming - Web APIs
the per
formancenavigationtiming interface provides methods and properties to store and retrieve metrics regarding the browser's document navigation events.
... <div id="interfacediagram" style="display: inline-block; position: relative; width: 100%; padding-bottom: 11.666666666666666%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 70" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/per
formanceentry" target="_top"><rect x="1" y="1" width="160" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="81" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">per
formanceentry</text></a><polyline points="161,25 171,20 171,30 161,25" stroke="#d4dde4" fill="none"/><line x1="171" y1="25"...
... x2="201" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/per
formancenavigationtiming" target="_top"><rect x="201" y="1" width="270" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="336" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">per
formancenavigationtiming</text></a></svg></div> a:hover text { fill: #0095dd; pointer-events: all;} properties this interface extends the following per
formanceentry properties for navigation per
formance entry types by qualifying and constraining them as follows: per
formanceentry.entrytype read only returns "navigation".
...And 19 more matches
Visual formatting model - CSS: Cascading Style Sheets
in css the visual
formatting model describes how user agents take the document tree, and process and display it for visual media.
...most of the in
formation applies equally to continuous and paged media.
... in the visual
formatting model, each element in the document tree generates zero or more boxes according to the box model.
...And 19 more matches
<transform-function> - CSS: Cascading Style Sheets
the <trans
form-function> css data type represents a trans
formation that affects an element's appearance.
... trans
formation functions can rotate, resize, distort, or move an element in 2d or 3d space.
... it is used in the trans
form property.
...And 19 more matches
XForms - Archive of obsolete content
note: support for x
forms was removed from firefox in firefox 19.
... see the html
forms guide for approaches to creating
forms in html5.
... x
forms essentials an online book giving you a guided tour of x
forms.
...And 18 more matches
SVGTransform - Web APIs
svg trans
form interface svgtrans
form is the interface for one of the component trans
formations within an svgtrans
formlist; thus, an svgtrans
form object corresponds to a single component (e.g., scale(…) or matrix(…)) within a trans
form attribute.
... an svgtrans
form object can be designated as read only, which means that attempts to modify the object will result in an exception being thrown.
...oid settranslate(in float tx, in float ty) void setscale(in float sx, in float sy) void setrotate(in float angle, in float cx, in float cy) void setskewx(in float angle) void setskewy(in float angle) properties readonly unsigned short type readonly float angle readonly svgmatrix matrix constants svg_trans
form_unknown = 0 svg_trans
form_matrix = 1 svg_trans
form_translate = 2 svg_trans
form_scale = 3 svg_trans
form_rotate = 4 svg_trans
form_skewx = 5 svg_trans
form_skewy = 6 normative document svg 1.1 (2nd edition) constants name value description svg_trans
form_unknown 0 the unit type is not one of predefined unit types.
...And 18 more matches
SVGTransformList - Web APIs
svg trans
form list interface the svgtrans
formlist defines a list of svgtrans
form objects.
... an svgtrans
formlist object can be designated as read only, which means that attempts to modify the object will result in an exception being thrown.
... note: starting in gecko 9.0,the svgtrans
formlist dom interface is now indexable and can be accessed like arrays interface overview also implement none methods void clear() svgtrans
form initialize(in svgtrans
form newitem) svgtrans
form getitem(in unsigned long index) svgtrans
form insertitembefore(in svgtrans
form newitem, in unsigned long index) svgtrans
form replaceitem(in svgtrans
form newitem, in unsigned long index) svgtrans
form removeitem(in unsigned long index) svgtrans
form appenditem(in svgtrans
form newitem) svgtrans
form createsvgtrans
formfrommatrix(in svgmatrix) svgtrans
form consolidate() properties readonly unsigned long numberofitems readonly unsigned long length ...
...And 18 more matches
Using FormData Objects - Web APIs
the
formdata object lets you compile a set of key/value pairs to send using xmlhttprequest.
... it is primarily intended for use in sending
form data, but can be used independently from
forms in order to transmit keyed data.
... the transmitted data 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.
...And 17 more matches
WebGLRenderingContext.getActiveUniform() - Web APIs
the webglrenderingcontext.getactiveuni
form() method of the webgl api returns a webglactiveinfo object containing size, type, and name of a uni
form attribute.
... it is generally used when querying unknown uni
forms either for debugging or generic library creation.
... syntax webglactiveinfo webglrenderingcontext.getactiveuni
form(program, index); parameters program a webglprogram specifying the webgl shader program from which to obtain the uni
form variable's in
formation.
...And 17 more matches
Understanding WebAssembly text format - WebAssembly
to enable webassembly to be read and edited by humans, there is a textual representation of the wasm binary
format.
... this is an intermediate
form designed to be exposed in text editors, browser developer tools, etc.
... this article explains how that text
format works, in terms of the raw syntax, and how it is related to the underlying bytecode it represents — and the wrapper objects representing wasm in javascript.
...And 17 more matches
Mozilla XForms Specials - Archive of obsolete content
introduction this article gives an overview of where the mozilla x
forms extension deviates from the official x
forms 1.0 specification .
...pseudo-class support we currently support all the css pseudo-classes in x
forms (:enabled, :disabled, etc.
...instead you will have to use the following normal classes instead: xf-value xf-repeat-item xf-repeat-index for example, to target the value element of an input control use: @namespace xf url("http://www.w3.org/2002/x
forms"); xf|input .xf-value { ...
...And 16 more matches
Images, media, and form elements - Learn web development
images, other media, and
form elements behave a little differently in terms of your ability to style them with css than regular boxes.
...
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.
... 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.
...And 16 more matches
Populating the page: how browsers work - Web Performance
to understand how to improve per
formance and perceived per
formance, it helps to understand how the browser works.
... two major issues in web per
formance are understanding issues having to do with latency and issues having to do with the fact that for the most part, browsers are single threaded.
...to be fast to load, the developers’ goals include sending requested in
formation as fast as possible, or at least seem super fast.
...And 16 more matches
CSS property compatibility table for form controls - Learn web development
the following compatibility tables try to summarize the state of css support for html
forms.
... due to the complexity of css and html
forms, these tables can't be considered a perfect reference.
... text-decoration this property is not supported by opera on
form widgets.
...And 15 more matches
Using Performance Timeline - Web APIs
the per
formance timeline standard defines extensions to the per
formance interface to support client-side latency measurements within applications.
... the standard also includes interfaces that allow an application to be notified when specific per
formance events occur.
... together, these interfaces can be used to help identify an application's per
formance bottlenecks.
...And 15 more matches
transform - SVG: Scalable Vector Graphics
the trans
form attribute defines a list of trans
form definitions that are applied to an element and the element's children.
... html,body,svg { height:100% } <svg viewbox="-40 0 150 100" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"> <g fill="grey" trans
form="rotate(-10 50 100) translate(-36 45.5) skewx(40) scale(1 0.5)"> <path id="heart" d="m 10,30 a 20,20 0,0,1 50,30 a 20,20 0,0,1 90,30 q 90,60 50,90 q 10,60 10,30 z" /> </g> <use xlink:href="#heart" fill="none" stroke="red"/> </svg> note: as of svg2, trans
form is a presentation attribute, meaning it can be used as a css property.
...see the documentation for the css property trans
form for the specific syntax to use in that case.
...And 15 more matches
Basic Transformations - SVG: Scalable Vector Graphics
but first, let's
formally introduce the <g> element.
...an example: <svg width="30" height="10"> <g fill="red"> <rect x="0" y="0" width="10" height="10" /> <rect x="20" y="0" width="10" height="10" /> </g> </svg> all following trans
formations are summed up in an element's trans
form attribute.
... trans
formations can be chained simply by concatenating them, separated by whitespace.
...And 15 more matches
PerformanceEntry - Web APIs
the per
formanceentry object encapsulates a single per
formance metric that is part of the per
formance timeline.
... a per
formance entry can be directly created by making a per
formance mark or measure (for example by calling the mark() method) at an explicit point in an application.
... per
formance entries are also created in indirect ways such as loading a resource (such as an image).
...And 14 more matches
Index - XSLT: Extensible Stylesheet Language Transformations
xslt/xpath reference: xslt elements, exslt functions, xpath functions, xpath axes found 54 pages: # page tags and summary 1 xslt: extensible stylesheet language trans
formations landing, web, xslt extensible stylesheet language trans
formations (xslt) is an xml-based language used, in conjunction with specialized processing software, for the trans
formation of xml documents.
... 7 basic example xslt the basic example will load an xml file and apply a xsl trans
formation on it.
...the xml file describes an article and the xsl file
formats the in
formation for display.
...And 14 more matches
Performance
the articles linked to from here will help you improve per
formance, whether you're developing core mozilla code or an add-on.
... documentation reporting a per
formance problem a user friendly guide to reporting a per
formance problem.
... benchmarking tips on generating valid per
formance metrics.
...And 13 more matches
FormData - Web APIs
the
formdata interface provides a way to easily construct a set of key/value pairs representing
form fields and their values, which can then be easily sent using the xmlhttprequest.send() method.
... it uses the same
format a
form would use if the encoding type were set to "multipart/
form-data".
... you can also pass it directly to the urlsearchparams constructor if you want to generate query parameters in the way a <
form> would do if it were using simple get submission.
...And 13 more matches
XRRigidTransform - Web APIs
the xrrigidtrans
form is a webxr api interface that represents the 3d geometric trans
form described by a position and orientation.
... xrrigidtrans
form is used to specify trans
forms throughout the webxr apis, including: the offset and orientation relative to the parent reference space to use when creating a new reference space with getoffsetreferencespace().
... the trans
form of an xrview.
...And 13 more matches
Using CSS transforms - CSS: Cascading Style Sheets
by modifying the coordinate space, css trans
forms change the shape and position of the affected content without disrupting the normal document flow.
... this guide provides an introduction to using trans
forms.
... css trans
forms are implemented using a set of css properties that let you apply affine linear trans
formations to html elements.
...And 13 more matches
transform-origin - CSS: Cascading Style Sheets
the trans
form-origin css property sets the origin for an element's trans
formations.
... the trans
formation origin is the point around which a trans
formation is applied.
... for example, the trans
formation origin of the rotate() function is the center of rotation.
...And 13 more matches
Intl.DateTimeFormat - JavaScript
the intl.datetime
format object is a constructor for objects that enable language-sensitive date and time
formatting.
... constructor intl.datetime
format() creates a new datetime
format object.
... static methods intl.datetime
format.supportedlocalesof() returns an array containing those of the provided locales that are supported without having to fall back to the runtime's default locale.
...And 13 more matches
How to build custom form controls - Learn web development
there are some cases where the available native html
form controls may seem like they are not enough.
... for example, if you need to per
form advanced styling on some controls such as the <select> element or if you want to provide custom behaviors, you may consider building your own controls.
...if you have doubts, ask for the opinions of others, and if you have the budget for it, do not hesitate to per
form user tests.
...And 12 more matches
JS_AddArgumentFormatter
add or remove a
format string handler for js_convertarguments, js_pusharguments, js_convertargumentsva, and js_pushargumentsva.
... syntax jsbool js_addargument
formatter(jscontext *cx, const char *
format, jsargument
formatter
formatter); void js_removeargument
formatter(jscontext *cx, const char *
format); name type description cx jscontext * the context in which to install the
formatter.
...
format const char * the
format string prefix that should be handled by
formatter, or whose handler should be removed.
...And 12 more matches
Introduction to formatting contexts - CSS: Cascading Style Sheets
this article introduces the concept of
formatting contexts, of which there are several types, including block
formatting contexts, inline
formatting contexts, and flex
formatting contexts.
... everything on a page is part of a
formatting context, or an area which has been defined to lay out content in a particular way.
... a block
formatting context (bfc) will lay child elements out according to block layout rules, a flex
formatting context will lay its children out as flex items, etc.
...And 12 more matches
Other form controls - Learn web development
previous overview:
forms next we now look at the functionality of non-<input>
form elements in detail, from other control types such as drop-down lists and multi-line text fields, to other useful
form features such as the <output> element (which we saw in action in the previous article), and progress bars.
... objective: to understand the non-<input>
form features, and how to implement them using html.
...(using contenteditable on non-
form controls provides an api for capturing html/"rich" content instead of plain text).
...And 11 more matches
Advanced text formatting - Learn web development
previous overview: introduction to html next there are many other elements in html for
formatting text, which we didn't get to in the html text fundamentals article.
...here you'll learn about marking up quotations, description lists, computer code and other related text, subscript and superscript, contact in
formation, and more.
...html text
formatting, as covered in html text fundamentals.
...And 11 more matches
JavaScript performance - Learn web development
previous overview: per
formance next while images and video account for over 70% of the bytes downloaded for the average website, byte per byte, javascript has a greater negative impact on per
formance.
... this article looks to introduce per
formance issues caused by scripts and introduces tips and tricks for optimizing javascript for web per
formance.
... objective: to learn about the effects of javascript on per
formance optimization, and how a javascript file size is not the only impact on web per
formance.
...And 11 more matches
Transformations - Web APIs
with trans
formations there are more powerful ways to translate the origin to a different position, rotate the grid and even scale it.
... saving and restoring state before we look at the trans
formation methods, let's look at two other methods which are indispensable once you start generating ever more complex drawings.
...a drawing state consists of the trans
formations that have been applied (i.e.
...And 11 more matches
WebGL2RenderingContext.getActiveUniforms() - Web APIs
the webgl2renderingcontext.getactiveuni
forms() method of the webgl 2 api retrieves in
formation about active uni
forms within a webglprogram.
... syntax any gl.getactiveuni
forms(program, uni
formindices, pname); parameters program a webglprogram containing the active uni
forms.
... uni
formindices an array of gluint specifying the indices of the active uni
forms to query.
...And 11 more matches
Intl.DateTimeFormat() constructor - JavaScript
the intl.datetime
format() constructor for objects that enable language-sensitive date and time
formatting.
... syntax new intl.datetime
format([locales[, options]]) parameters locales optional a string with a bcp 47 language tag, or an array of such strings.
...for the general
form and interpretation of the locales argument, see the intl page.
...And 11 more matches
Intl.RelativeTimeFormat() constructor - JavaScript
the intl.relativetime
format() constructor creates intl.relativetime
format objects.
... syntax new intl.relativetime
format([locales[, options]]) parameters locales optional.
...for the general
form and interpretation of the locales argument, see the intl page.
...And 11 more matches
HTMLFormElement.elements - Web APIs
the html
formelement property elements returns an html
formcontrolscollection 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.
...And 10 more matches
HTMLFormElement.requestSubmit() - Web APIs
the html
formelement method requestsubmit() requests that the
form be submitted using a specific submit button.
... syntax html
formelement.requestsubmit(submitter); parameters submitter optional the submit button whose attributes describe the method by which the
form is to be submitted.
... if you omit the submitter parameter, the
form element itself is used as the submitter.
...And 10 more matches
WebGL2RenderingContext.getActiveUniformBlockParameter() - Web APIs
the webgl2renderingcontext.getactiveuni
formblockparameter() method of the webgl 2 api retrieves in
formation about an active uni
form block within a webglprogram.
... syntax any gl.getactiveuni
formblockparameter(program, uni
formblockindex, pname); parameters program a webglprogram containing the active uni
form block.
... uni
formblockindex a gluint specifying the index of the active uni
form block within the program.
...And 10 more matches
Basic form hints - Accessibility
when implementing
forms using traditional html
form-related elements, it is important to provide labels for controls, and explicitly associate a label with its control.
... when a screen reader user navigates a page, the screen reader will describe
form controls.
... the example below shows a simple
form with labels.
...And 10 more matches
transform - CSS: Cascading Style Sheets
the trans
form css property lets you rotate, scale, skew, or translate an element.
... it modifies the coordinate space of the css visual
formatting model.
... only trans
formable elements can be trans
formed.
...And 10 more matches
Media type and format guide: image, audio, and video content - Web media technologies
since nearly its beginning, the web has included support for some
form of visual media presentation.
...generally, the media
formats supported by a browser are entirely up to the browser's creators, which can complicate the work of a web developer.
...it also provides browser support in
formation for various combinations of these, and suggestions for prioritization of
formats, as well as which
formats excel at specific types of content.
...And 10 more matches
Running Tamarin performance tests - Archive of obsolete content
the tamarin per
formance tests can be used to measure per
formance changes made to tamarin.
... to run per
formance tests on the android shell see 'testing the android shell' below.
... running the per
formance tests requires the following steps: set the avm environment variable to the path of the avmshell executable.
...And 9 more matches
Date.prototype.toLocaleFormat() - Archive of obsolete content
the non-standard tolocale
format() method converts a date to a string using the specified
formatting.
... intl.datetime
format is an alternative to
format dates in a standards-compliant way.
...see warning: date.prototype.tolocale
format is deprecated for more in
formation and migration help.
...And 9 more matches
Building Mozilla XForms - Archive of obsolete content
getting started things to know first: the x
forms extension has a dependency on the schema-validation extension, so you need to build both (that's done automatically) mozilla switched from cvs to mercurial starting with firefox 3.5.
... before you can start building the x
forms extension, you should check your mozilla build environment by doing a regular firefox build.
... have a look at the build instructions for detailed in
formation for your plat
form.
...And 9 more matches
RFE to the XForms API - Archive of obsolete content
introduction this page contains requests for enhancement to the x
forms api.
... the term x
forms api can fall into two categories.
... these are x
forms dom and x
forms interfaces that are exposed by x
forms dom.
...And 9 more matches
CSS performance optimization - Learn web development
previous overview: per
formance next painting an unstyled page, and then repainting it once styles are parsed would be bad user experience.
...to improve per
formance, the node being animated can be moved off the main thread and onto the gpu.
... properties that will lead to compositing include 3d trans
forms (trans
form: translatez(), rotate3d(), etc.), animating trans
form and opacity, position: fixed, will-change, and filter.
...And 9 more matches
Web performance resources - Learn web development
there are many reasons why your website should per
form as well as possible.
... below is a quick review of best practices, tools, apis with links to provide more in
formation about each topic.
...knowing this will help you understand how to improve the per
formance of the site.
...And 9 more matches
Displaying Places information using views
see querying places for in
formation about obtaining and using nsinavhistoryresult objects, which this page assumes you are familiar with.
...see querying places and places query uris for in
formation on query uris.
...see the tree reference and trees tutorial for general in
formation about trees.
...And 9 more matches
performance.measure() - Web APIs
the measure() method creates a named timestamp in the browser's per
formance entry buffer between marks, the navigation start time, or the current time.
... the measure can be retrieved by one of the per
formance interfaces: (getentries(), getentriesbyname() or getentriesbytype()).
... the measure's per
formance entry will have the following property values: entrytype - set to "measure".
...And 9 more matches
TransformStream - Web APIs
the trans
formstream interface of the streams api represents a set of trans
formable data.
... constructor trans
formstream() creates and returns a trans
form stream object from the given handlers.
... properties trans
formstream.readable read only the readable end of a trans
formstream.
...And 9 more matches
Compressed texture formats - Web APIs
the webgl api provides methods to use compressed texture
formats.
...by default, no compressed
formats are available: a corresponding compressed texture
format extension must first be enabled.
... if supported, textures can be stored in a compressed
format in video memory.
...And 9 more matches
XSL Transformations in Mozilla FAQ - Web APIs
the xslt namespace is http://www.w3.org/1999/xsl/trans
form.
...see the discussion on bug #338621 for more in
formation.
...most come from what we suspect ie to do after the trans
formation.
...And 9 more matches
Warning: Date.prototype.toLocaleFormat is deprecated - JavaScript
the javascript warning "date.prototype.tolocale
format is deprecated; consider using intl.datetime
format instead" occurs when the non-standard date.prototype.tolocale
format method is used.
... message warning: date.prototype.tolocale
format is deprecated; consider using intl.datetime
format instead error type warning.
... the non-standard date.prototype.tolocale
format method is deprecated and shouldn't be used anymore.
...And 9 more matches
Intl.RelativeTimeFormat - JavaScript
the intl.relativetime
format object enables language-sensitive relative time
formatting.
... constructor intl.relativetime
format.relativetime
format() creates a new intl.relativetime
format object.
... static methods intl.relativetime
format.supportedlocalesof() returns an array containing those of the provided locales that are supported without having to fall back to the runtime's default locale.
...And 9 more matches
Critical rendering path - Web Performance
optimizing the critical render path improves render per
formance.the critical rendering path includes the document object model (dom), css object model (cssom), render tree and layout.
...understanding and optimizing the critical rendering path is important to ensure reflows and repaints can happen at 60 frames per second, to ensure per
formant user interactions and avoid jank.
... understanding crp web per
formance includes the server requests and responses, loading, scripting, rendering, layout, and the painting of the pixels to the screen.
...And 9 more matches
Privacy, permissions, and information security
as users use the web for more and more of their daily tasks, more of their private or personally-identifying in
formation they share, ideally only with sites they trust.
... cooperation among web content, the web browser, and the web server is needed to achieve as much privacy and in
formation security as possible.
... in this article, we examine how to create web content that minimizes the risk of users' personal in
formation or imagery being obtained unexpectedly by third parties.
...And 9 more matches
<xsl:number> - XSLT: Extensible Stylesheet Language Transformations
it can also be used to quickly
format a number.
... syntax <xsl:number count=expression level="single" | "multiple" | "any" from=expression value=expression
format=
format-string lang=xml:lang-code letter-value="alphabetic" | "traditional" grouping-separator=character grouping-size=number /> required attributes none.
...(the nested
format can be specified with the
format attribute, e.g.
...And 9 more matches
An Overview - XSLT: Extensible Stylesheet Language Transformations
« trans
forming xml with xslt the extensible stylesheet language/trans
form is a very powerful language, and a complete discussion of it is well beyond the scope of this article, but a brief discussion of some basic concepts will be helpful in understanding the description of netscape's capabilities that follows.
... unlike css, which has its own specialized syntax, an xslt stylesheet is an xml document, which must con
form to all xml rules, including well-
formedness.
... so the model for trans
formation is that one xml document is used to trans
form another xml document.
...And 9 more matches
Describing microformats in JavaScript - Archive of obsolete content
micro
formats are described in javascript by using a standardized structure
format that has several standard members that describe the object.
... micro
format definition
format the micro
format definition must contain the following entries: mfversion specifies the version number of the micro
format api to which the definition was written.
... mfobject the javascript object that implements the micro
format.
...And 8 more matches
PerformanceEntry.duration - Web APIs
the duration property returns a timestamp that is the duration of the per
formance entry.
... the value returned by this property depends on the per
formance entry's type: "frame" - returns a timestamp indicating the difference between the starttimes of two successive frames.
... "navigation" - returns the timestamp that is the difference between the per
formancenavigationtiming.loadeventend and per
formanceentry.starttime properties, respectively.
...And 8 more matches
PerformanceEntry.name - Web APIs
the name property of the per
formanceentry interface returns a value that further specifies the value returned by the per
formanceentry.entrytype property.
... syntax var name = entry.name; return value the return value depends on the subtype of the per
formanceentry object and the value of per
formanceentry.entrytype, as shown by the table below.
... value subtype entrytype values description url per
formanceframetiming, per
formancenavigationtiming frame, navigation the document's address.
...And 8 more matches
PerformanceEntry.startTime - Web APIs
the starttime property returns the first recorded timestamp of the per
formance entry.
... the value returned by this property depends on the per
formance entry's type: "frame" - returns the timestamp when the frame was started.
... "mark" - returns the timestamp when the mark was created by a call to per
formance.mark().
...And 8 more matches
Using the Performance API - Web APIs
a fundamental requirement of web per
formance is a precise and consistent definition of time.
... the domhighrestimestamp type (a double) is used by all per
formance interfaces to hold such time values.
... web per
formance interfaces are defined in a suite of standards.
...And 8 more matches
XRView.transform - Web APIs
the read-only trans
form property of the xrview interface is an xrrigidtrans
form object which provides the position and orientation of the viewpoint relative to the xrreferencespace specified when the xrframe.getviewerpose() method was called to obtain the view object.
... with the trans
form, you can then position the view as a camera within the 3d scene.
... if you instead need the more traditional view matrix, you can get using view.trans
form.inverse.matrix; this gets the underlying matrix of the trans
form's inverse.
...And 8 more matches
Date and time formats used in HTML - HTML: Hypertext Markup Language
the
formats of the strings that specify these values are described in this article.
... elements that use such
formats include certain
forms of the <input> element that let the user choose or specify a date, time, or both, as well as the <ins> and <del> elements, whose datetime attribute specifies the date or date and time at which the insertion or deletion of content occurred.
... for <input>, the values of type that return a value which contains a string representing a date and/or time are: date datetime datetime-local month time week examples before getting into the intricacies of how date and time strings are written and parsed in html, here are some examples that should give you a good idea what the more commonly-used date and time string
formats look like.
...And 8 more matches
Intl.NumberFormat - JavaScript
the intl.number
format object is a constructor for objects that enable language sensitive number
formatting.
... constructor intl.number
format() creates a new number
format object.
... static methods intl.number
format.supportedlocalesof() returns an array containing those of the provided locales that are supported without having to fall back to the runtime's default locale.
...And 8 more matches
application/http-index-format specification - Archive of obsolete content
the application/http-index-
format file
format is an attempt to provide a generic, extensible file listing
format that is principly machine readable.
... syntax every line in the file must con
form to the following generic syntax: number: data where number is at least a three digit number (note that more digits are possible in the future) and data is separated from number by a colon and a space.
...this data is not intended for display to the end user and is only meant as a comment to make the file
format clear to a human interpreter.
...And 7 more matches
Perceived performance - MDN Web Docs Glossary: Definitions of Web-related terms
perceived per
formance is a subjective measure of how fast a website seems to a user based on load time and site responsiveness.
... in terms of web per
formance, perceived per
formance is how fast a user interaction feels rather than how fast an interaction actually is, be that a button press or a page load.
... perceived per
formance is not how fast your site is; it's how fast your users think it is.
...And 7 more matches
Reporting a Performance Problem
this article will guide you in reporting a per
formance problem using the built-in gecko profiler tool.
...make sure to choose an appropriate setting for the recording (if you're not sure, choose firefox plat
form), and then choosing "start recording".
...when it runs out of space in its buffer, it discards old entries so you may want to increase the buffer size if you find you are unable to capture the profile quickly enough after you notice a per
formance problem.
...And 7 more matches
Document.forms - Web APIs
the
forms read-only property of the document interface returns an htmlcollection listing all the <
form> elements contained in the document.
... note: similarly, you can access a list of a
form's component user input elements using the html
formelement.elements property.
... syntax collection = document.
forms; value an htmlcollection object listing all of the document's
forms.
...And 7 more matches
HTMLFormElement: submit event - Web APIs
the submit event fires when a <
form> is submitted.
... bubbles yes (although specified as a simple event that doesn't bubble) cancelable yes interface submitevent event handler property globaleventhandlers.onsubmit note that the submit event fires on the <
form> element itself, and not on any <button> or <input type="submit"> inside it.
... however, the submitevent which is sent to indicate the
form's submit action has been triggered includes a submitter property, which is the button that was invoked to trigger the submit request.
...And 7 more matches
NetworkInformation - Web APIs
the networkin
formation interface provides in
formation about the connection a device is using to communicate with the network and provides a means for scripts to be notified if the connection type changes.
... the networkin
formation interfaces cannot be instantiated.
... networkin
formation.downlink read only returns the effective bandwidth estimate in megabits per second, rounded to the nearest multiple of 25 kilobits per seconds.
...And 7 more matches
performance.mark() - Web APIs
the mark() method creates a timestamp in the browser's per
formance entry buffer with the given name.
... the application defined timestamp can be retrieved by one of the per
formance interface's getentries*() methods (getentries(), getentriesbyname() or getentriesbytype()).
... the mark()'s stores its data internally as per
formanceentry.
...And 7 more matches
performance.now() - Web APIs
the per
formance.now() method returns a domhighrestimestamp, measured in milliseconds.
... bear in mind the following points: in dedicated workers created from a window context, the value in the worker will be lower than per
formance.now() in the window who spawned that worker.
... syntax t = per
formance.now(); example const t0 = per
formance.now(); dosomething(); const t1 = per
formance.now(); console.log(`call to dosomething took ${t1 - t0} milliseconds.`); unlike other timing data available to javascript (for example date.now), the timestamps returned by per
formance.now() are not limited to one-millisecond resolution.
...And 7 more matches
PerformanceEntry.entryType - Web APIs
the entrytype property returns a domstring representing the type of per
formance metric such as, for example, "mark".
... syntax var type = entry.entrytype; return value the return value depends on the subtype of the per
formanceentry object and affects the value of the per
formanceentry.name property as shown by the table below.
... per
formance entry type names value subtype type of name property description of name property frame, navigation per
formanceframetiming, per
formancenavigationtiming url the document's address.
...And 7 more matches
PerformanceEventTiming - Web APIs
the per
formanceeventtiming interface of the event timing api provides timing in
formation for the event types listed below.
...ompositionstart compositionupdate contextmenu dblclick dragend dragenter dragleave dragover dragstart drop input keydown keypress keyup mousedown mouseenter mouseleave mouseout mouseover mouseup pointerover pointerenter pointerdown pointerup pointercancel pointerout pointerleave gotpointercapture lostpointercapture touchstart touchend touchcancel properties per
formanceeventtiming.processingstart returns the time at which event dispatch started.
... per
formanceeventtiming.processingend returns the time at which the event dispatch ended.
...And 7 more matches
PerformanceNavigation - Web APIs
please use the per
formancenavigationtiming interface instead.
... the legacy per
formancenavigation interface represents in
formation about how the navigation to the current document was done.
... an object of this type can be obtained by calling the per
formance.navigation read-only attribute.
...And 7 more matches
PerformancePaintTiming - Web APIs
the per
formancepainttiming interface of the paint timing provides timing in
formation about "paint" (also called "render") operations during web page construction.
... an application can register a per
formanceobserver for "paint" per
formance entry types and the observer can retrieve the times that paint events occur.
... use this in
formation to help identify areas that take too long to provide a good user experience.
...And 7 more matches
Web Video Text Tracks Format (WebVTT) - Web APIs
web video text tracks
format (webvtt) is a
format for displaying timed text tracks (such as subtitles or captions) using the <track> element.
...webvtt is a text based
format, which must be encoded using utf-8.
...there is also a small api available to represent and manage these tracks and the data needed to per
form the playback of the text at the correct times.
...And 7 more matches
XRRigidTransform.matrix - Web APIs
the read-only xrrigidtrans
form property matrix returns the trans
form matrix represented by the object.
... syntax let matrix = xrrigidtrans
form.matrix; value a float32array containing 16 entries which represents the 4x4 trans
form matrix which is described by the position and orientation properties.
... usage notes matrix
format all 4x4 trans
form matrices used in webgl are stored in 16-element float32arrays.
...And 7 more matches
Block formatting context - Developer guides
a block
formatting context is a part of a visual css rendering of a web page.
... a block
formatting context is created by at least one of the following: the root element of the document (<html>).
... column-span: all should always create a new
formatting context, even when the column-span: all element isn't contained by a multicol container (spec change, chrome bug).
...And 7 more matches
Text formatting - JavaScript
accessing the individual code units in such a string using brackets may have undesirable consequences such as the
formation of strings with unmatched surrogate code units, in violation of the unicode standard.
... normalize returns the unicode normalization
form of the calling string value.
...5; const ten = 10; console.log('fifteen is ' + (five + ten) + ' and not ' + (2 * five + ten) + '.'); // "fifteen is 15 and not 20." now, with template literals, you are able to make use of the syntactic sugar making substitutions like this more readable: const five = 5; const ten = 10; console.log(`fifteen is ${five + ten} and not ${2 * five + ten}.`); // "fifteen is 15 and not 20." for more in
formation, read about template literals in the javascript reference.
...And 7 more matches
gradientTransform - SVG: Scalable Vector Graphics
the gradienttrans
form attribute contains the definition of an optional additional trans
formation from the gradient coordinate system onto the target coordinate system (i.e., userspaceonuse or objectboundingbox).
...this additional trans
formation matrix is post-multiplied to (i.e., inserted to the right of) any previously defined trans
formations, including the implicit trans
formation necessary to convert from object bounding box units to user space.
...adient id="gradient1" gradientunits="userspaceonuse" cx="100" cy="100" r="100" fx="100" fy="100"> <stop offset="0%" stop-color="darkblue" /> <stop offset="50%" stop-color="skyblue" /> <stop offset="100%" stop-color="darkblue" /> </radialgradient> <radialgradient id="gradient2" gradientunits="userspaceonuse" cx="100" cy="100" r="100" fx="100" fy="100" gradienttrans
form="skewx(20) translate(-35, 0)"> <stop offset="0%" stop-color="darkblue" /> <stop offset="50%" stop-color="skyblue" /> <stop offset="100%" stop-color="darkblue" /> </radialgradient> <rect x="0" y="0" width="200" height="200" fill="url(#gradient1)" /> <rect x="0" y="0" width="200" height="200" fill="url(#gradient2)" style="trans
form: translatex(220px);" /> </svg> usage notes ...
...And 7 more matches
platform/xpcom - Archive of obsolete content
usage the xpcom module makes it simpler to per
form three main tasks: implement xpcom object interfaces implement and register xpcom factories implement and register xpcom services if all you need to do is use xpcom objects that someone else has implemented, then you don't need to use this module.
... for example, the add-on below implements the nsiobserver interface to listen for and log all topic notifications: var { class } = require('sdk/core/heritage'); var { unknown } = require('sdk/plat
form/xpcom'); var { cc, ci } = require('chrome') var observerservice = cc['@mozilla.org/observer-service;1'].
... var { class } = require('sdk/core/heritage'); var { unknown, factory } = require('sdk/plat
form/xpcom'); var { cc, ci } = require('chrome'); var contractid = '@me.org/helloworld'; // define a component var helloworld = class({ extends: unknown, get wrappedjsobject() this, hello: function() {return 'hello world';} }); // create and register the factory var factory = factory({ contract: contractid, component: helloworld }); // xpcom clients can retrieve and use this new // compo...
...And 6 more matches
XForms Input Element - Archive of obsolete content
introduction this element is an important and oft-used x
forms element to show and change the instance data to which this x
forms control is bound (see the spec).
... attributes ui common appearance - the value of this attribute gives a hint to the x
forms processor as to which type of widget(s) to use to represent this control accesskey - used to specify the keyboard shortcut for focusing this control single-node binding special inputmode - not supported for this control incremental - supported.
...representations the x
forms input element can be represented by the following widgets for the spcified data types (or types derived from these data types): text field - the default widget when no type is specified or the data is of type xsd:string (xhtml/xul) checkbox - used for xsd:boolean instance data.
...And 6 more matches
Test your skills: Form validation - Learn web development
this aim of this skill test is to assess whether you've understood our client-side
form validation article.
...
form validation 1 in this task, we are providing you with a simple support query
form, and we want you to add some validation features to it: make all of the input fields mandatory to complete before the
form can be submitted.
... try submitting your
form — it should refuse to submit until the above constaints are followed, and give suitable error messages.
...And 6 more matches
nsIFormHistory2
toolkit/components/satchel/public/nsi
formhistory.idlscriptable a service which holds a set of name/value pairs.
... the names correspond to
form field names, and the values correspond to values the user has submitted.
...stored values are used by the
formfillcontroller to generate autocomplete matches.
...And 6 more matches
CanvasRenderingContext2D.setTransform() - Web APIs
the canvasrenderingcontext2d.settrans
form() method of the canvas 2d api resets (overrides) the current trans
formation to the identity matrix, and then invokes a trans
formation described by the arguments of this method.
... note: see also the trans
form() method; instead of overriding the current trans
form matrix, it multiplies it with a given one.
... syntax ctx.settrans
form(a, b, c, d, e, f); ctx.settrans
form(matrix); the trans
formation matrix is described by: [acebdf001]\left[ \begin{array}{ccc} a & c & e \\ b & d & f \\ 0 & 0 & 1 \end{array} \right] parameters settrans
form() has two types of parameter that it can accept.
...And 6 more matches
performance.clearMarks() - Web APIs
the clearmarks() method removes the named mark from the browser's per
formance entry buffer.
... if the method is called with no arguments, all per
formance entries with an entry type of "mark" will be removed from the per
formance entry buffer.
... syntax per
formance.clearmarks(); per
formance.clearmarks(name); arguments name optional a domstring representing the name of the timestamp.
...And 6 more matches
performance.clearMeasures() - Web APIs
the clearmeasures() method removes the named measure from the browser's per
formance entry buffer.
... if the method is called with no arguments, all per
formance entries with an entry type of "measure" will be removed from the per
formance entry buffer.
... syntax per
formance.clearmeasures(); per
formance.clearmeasures(name); arguments name optional a domstring representing the name of the timestamp.
...And 6 more matches
performance.getEntriesByName() - Web APIs
the getentriesbyname() method returns a list of per
formanceentry objects for the given name and type.
... the list's members (entries) can be created by making per
formance marks or measures (for example by calling the mark() method) at explicit points in time.
... syntax entries = window.per
formance.getentriesbyname(name, type); arguments name the name of the entry to retrieve.
...And 6 more matches
performance.getEntriesByType() - Web APIs
the getentriesbytype() method returns a list of per
formanceentry objects for a given type.
... the list's members (entries) can be created by making per
formance marks or measures (for example by calling the mark() method) at explicit points in time.
... syntax entries = window.per
formance.getentriesbytype(type); arguments type the type of entry to retrieve such as "mark".
...And 6 more matches
PerformanceFrameTiming - Web APIs
per
formanceframetiming is an abstract interface that provides frame timing data about the browser's event loop.
... an application can register a per
formanceobserver for "frame" per
formance entry types and the observer can retrieve data about the duration of each frame event.
... this in
formation can be used to help identify areas that take too long to provide a good user experience.
...And 6 more matches
PerformanceMark - Web APIs
per
formancemark is an abstract interface for per
formanceentry objects with an entrytype of "mark".
... entries of this type are created by calling per
formance.mark() to add a named domhighrestimestamp (the mark) to the browser's per
formance timeline.
... <div id="interfacediagram" style="display: inline-block; position: relative; width: 100%; padding-bottom: 11.666666666666666%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 70" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/per
formanceentry" target="_top"><rect x="1" y="1" width="160" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="81" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">per
formanceentry</text></a><polyline points="161,25 171,20 171,30 161,25" stroke="#d4dde4" fill="none"/><line x1="171" y1="25" x2="201" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web...
...And 6 more matches
PerformanceMeasure - Web APIs
per
formancemeasure is an abstract interface for per
formanceentry objects with an entrytype of "measure".
... entries of this type are created by calling per
formance.measure() to add a named domhighrestimestamp (the measure) between two marks to the browser's per
formance timeline.
... <div id="interfacediagram" style="display: inline-block; position: relative; width: 100%; padding-bottom: 11.666666666666666%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 70" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/per
formanceentry" target="_top"><rect x="1" y="1" width="160" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="81" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">per
formanceentry</text></a><polyline points="161,25 171,20 171,30 161,25" stroke="#d4dde4" fill="none"/><line x1="171" y1="25" x2="201" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web...
...And 6 more matches
WebGL2RenderingContext.getInternalformatParameter() - Web APIs
the webgl2renderingcontext.getinternal
formatparameter() method of the webgl 2 api returns in
formation about implementation-dependent support for internal
formats.
... syntax any gl.getinternal
formatparameter(target, internal
format, pname); parameters target a glenum specifying the target renderbuffer object.
... possible values: gl.renderbuffer: buffer data storage for single images in a renderable internal
format.
...And 6 more matches
XRRigidTransform() - Web APIs
the xrrigidtrans
form() constructor creates and returns a new xrrigidtrans
form object, representing the position and orientation of a point or object.
... among other things, xrrigidtrans
form is used when providing a trans
form to translate between coordinate systems across spaces.
... syntax let xrrigidtrans
form = new xrrigidtrans
form(position, orientation); parameters position optional an object con
forming to dompointinit which specifies the coordinates at which the point or object is located.
...And 6 more matches
How to turn off form autocompletion - Web security
this article explains how a website can disable autocomplete for
form fields.
... by default, browsers remember in
formation that the user submits through <input> fields on websites.
...however, some data submitted in
forms either are not useful in the future (for example, a one-time pin) or contain sensitive in
formation (for example, a unique government identifier or credit card security code).
...And 6 more matches
JavaScript/XSLT Bindings - XSLT: Extensible Stylesheet Language Transformations
javascript/xslt bindings javascript can run xslt trans
formations through the xsltprocessor object.
... once instantiated, an xsltprocessor has an xsltprocessor.importstylesheet() method that takes as an argument the xslt stylesheet to be used in the trans
formation.
...var xsltprocessor = new xsltprocessor(); // load the xsl file using synchronous (third param is set to false) xmlhttprequest var myxmlhttprequest = new xmlhttprequest(); myxmlhttprequest.open("get", "example.xsl", false); myxmlhttprequest.send(null); var xslref = myxmlhttprequest.responsexml; // finally import the .xsl xsltprocessor.importstylesheet(xslref); for the actual trans
formation, xsltprocessor requires an xml document, which is used in conjunction with the imported xsl file to produce the final result.
...And 6 more matches
Offering a context menu for form controls - Archive of obsolete content
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.
... this article presents in
formation based on ehsan akhgari's
form control context menu extension, which was created specifically to demonstrate how to do this.
...And 5 more matches
Building TransforMiiX standalone - Archive of obsolete content
we support building a standalone version of trans
formiix on windows, unix and os x.
... read the build instructions for your plat
form to get the requirements, which are the same as for mozilla.
...add tx_exe=1 mk_add_options build_modules="xpcom trans
formiix" ac_add_options --enable-standalone-modules="xpcom trans
formiix" to your .mozconfig, and use client.mk to pull as usual.
...And 5 more matches
Porting NSPR to Unix Platforms - Archive of obsolete content
last modified 16 july 1998 <<< under construction >>> unix plat
forms are probably the easiest plat
forms to port netscape portable runtime (nspr) to.
...for certain more "standard" unix plat
forms, this may be all you have to do.
... on other plat
forms, you may need to do extra work to deal with their idiosyncrasies.
...And 5 more matches
XForms Label Element - Archive of obsolete content
introduction specifies the label (short description) for the x
forms control (see the spec).
... every
form control other than the output and choices elements must contain a label element.
... it is valid for a
form control to have an empty label element.
...And 5 more matches
XForms Repeat Element - Archive of obsolete content
for each node in the nodeset, the contents of the repeat element will be displayed in the
form.
... attributes ui common appearance - the value of this attribute gives a hint to the x
forms processor as to which type of widget(s) to use to represent this control.
... actions you can use x
forms action module elements to modify the nodeset that the repeat element is bound to.
...And 5 more matches
nsIXFormsModelElement
extensions/x
forms/nsix
formsmodelelement.idlscriptable defines scriptable methods for manipulating instance data and updating computed and displayed values.
... rebuild() signals the x
forms processor to rebuild any internal data structures used to track computational dependencies within the given x
forms model.
...recalculate() signals the x
forms processor to per
form a full recalculation of the given x
forms model.
...And 5 more matches
Performance
it has generally good per
formance for a small embedded database.
...therefore, if you are doing many transactions in a row, you will get significant per
formance improvements by surrounding them in a transaction.
...queries careful reordering of the sql statement, or creating the proper indices, can often improve per
formance.
...And 5 more matches
Performance - Firefox Developer Tools
the per
formance tool gives you insight into your site's general responsiveness, javascript and layout per
formance.
... with the per
formance tool you create a recording, or profile, of your site over a period of time.
... you get four sub-tools to examine aspects of the profile in more detail: the waterfall shows the different operations the browser was per
forming, such as executing layout, javascript, repaints, and garbage collection the call tree shows the javascript functions in which the browser spent most of its time the flame chart shows the javascript call stack over the course of the recording the allocations view shows the heap allocations made by your code over the course of the recording.
...And 5 more matches
performance.getEntries() - Web APIs
the getentries() method returns a list of all per
formanceentry objects for the page.
... the list's members (entries) can be created by making per
formance marks or measures (for example by calling the mark() method) at explicit points in time.
... if you are only interested in per
formance entries of certain types or that have certain names, see getentriesbytype() and getentriesbyname().
...And 5 more matches
PerformanceObserver.observe() - Web APIs
the observe() method of the per
formanceobserver interface is used to specify the set of per
formance entry types to observe.
... the per
formance entry types are specified as an array of domstring objects, each naming one entry type; the type names are documented in per
formance entry type names in per
formanceentry.entrytype.
... when a matching per
formance entry is recorded, the per
formance observer's callback function—set when creating the per
formanceobserver—is invoked.
...And 5 more matches
WebGLRenderingContext.getUniform() - Web APIs
the webglrenderingcontext.getuni
form() method of the webgl api returns the value of a uni
form variable at a given location.
... syntax any gl.getuni
form(program, location); parameters program a webglprogram containing the uni
form attribute.
... location a webgluni
formlocation object containing the location of the uni
form attribute to get.
...And 5 more matches
Keyframe Formats - Web APIs
element.animate(), keyframeeffect.keyframeeffect(), and keyframeeffect.setkeyframes() all accept objects
formatted to represent a set of keyframes.
... there are several options to this
format, which are explained below.
... syntax there are two different ways to
format keyframes: an array of objects (keyframes) consisting of properties and values to iterate over.
...And 5 more matches
XRRigidTransform.inverse - Web APIs
the read-only inverse property of the xrrigidtrans
form interface returns another xrrigidtrans
form object which is the inverse of its owning trans
form.
... that is, you can always get the inverse of any xrrigidtrans
form using its inverse property, instead of having to explicitly generate it.
... syntax let trans
forminverse = xrrigidtrans
form.inverse; value an xrrigidtrans
form which contains the inverse of the xrrigidtrans
form on which it's accessed.
...And 5 more matches
transform-box - CSS: Cascading Style Sheets
the trans
form-box css property defines the layout box to which the trans
form and trans
form-origin properties relate.
... /* keyword values */ trans
form-box: content-box; trans
form-box: border-box; trans
form-box: fill-box; trans
form-box: stroke-box; trans
form-box: view-box; /* global values */ trans
form-box: inherit; trans
form-box: initial; trans
form-box: unset; syntax the trans
form-box property is specified as one of the keyword values listed below.
...
formal definition initial valueview-boxapplies totrans
formable elementsinheritednocomputed valueas specifiedanimation typediscrete
formal syntax content-box | border-box | fill-box | stroke-box | view-box examples svg trans
form-origin scoping in this example we have an svg: <svg id="svg" xmlns="http://www.w3.org/2000/svg" viewbox="0 0 50 50"> <g> <circle id="center" fill="red" r="1" trans...
...And 5 more matches
transform-style - CSS: Cascading Style Sheets
the trans
form-style css property sets whether children of an element are positioned in the 3d space or are flattened in the plane of the element.
... syntax /* keyword values */ trans
form-style: flat; trans
form-style: preserve-3d; /* global values */ trans
form-style: inherit; trans
form-style: initial; trans
form-style: unset; values flat indicates that the children of the element are lying in the plane of the element itself.
...
formal definition initial valueflatapplies totrans
formable elementsinheritednocomputed valueas specifiedanimation typediscretecreates stacking contextyes
formal syntax flat | preserve-3d examples trans
form style demonstration in this example we have a 3d cube created using trans
forms.
...And 5 more matches
Intl.DateTimeFormat.supportedLocalesOf() - JavaScript
the intl.datetime
format.supportedlocalesof() method returns an array containing those of the provided locales that are supported in date and time
formatting without having to fall back to the runtime's default locale.
... syntax intl.datetime
format.supportedlocalesof(locales[, options]) parameters locales a string with a bcp 47 language tag, or an array of such strings.
... for the general
form of the locales argument, see the intl page.
...And 5 more matches
Intl.ListFormat() constructor - JavaScript
the intl.list
format() constructor creates objects that enable language-sensitive list
formatting.
... syntax new intl.list
format([locales[, options]]) parameters locales optional.
...for the general
form and interpretation of the locales argument, see the intl page.
...And 5 more matches
Intl.ListFormat.supportedLocalesOf() - JavaScript
the intl.list
format.supportedlocalesof() method returns an array containing those of the provided locales that are supported in date and time
formatting without having to fall back to the runtime's default locale.
... syntax intl.list
format.supportedlocalesof(locales[, options]) parameters locales a string with a bcp 47 language tag, or an array of such strings.
... for the general
form of the locales argument, see the intl page.
...And 5 more matches
Intl.ListFormat - JavaScript
the intl.list
format object is a constructor for objects that enable language-sensitive list
formatting.
... constructor intl.list
format() creates a new list
format object.
... static methods intl.list
format.supportedlocalesof() returns an array containing those of the provided locales that are supported without having to fall back to the runtime's default locale.
...And 5 more matches
Intl.NumberFormat.supportedLocalesOf() - JavaScript
the intl.number
format.supportedlocalesof() method returns an array containing those of the provided locales that are supported in number
formatting without having to fall back to the runtime's default locale.
... syntax intl.number
format.supportedlocalesof(locales[, options]) parameters locales a string with a bcp 47 language tag, or an array of such strings.
... for the general
form of the locales argument, see the intl page.
...And 5 more matches
Intl.RelativeTimeFormat.supportedLocalesOf() - JavaScript
the intl.relativetime
format.supportedlocalesof() method returns an array containing those of the provided locales that are supported in date and time
formatting without having to fall back to the runtime's default locale.
... syntax intl.relativetime
format.supportedlocalesof(locales[, options]) parameters locales a string with a bcp 47 language tag, or an array of such strings.
... for the general
form of the locales argument, see the intl page.
...And 5 more matches
OpenSearch description format
the opensearch description
format lets a website describe a search engine for itself, so that a browser or other client application can use that search engine.
...(see reference material for links to other browsers' documentation.) firefox also supports additional features not in the opensearch standard, such as search suggestions and the <search
form> element.
... <image width="16" height="16" type="image/x-icon">[https://example.com/favicon.ico]</image> <url type="text/html" template="[searchurl]"> <param name="[key name]" value="{searchterms}"/> <!-- other params if you need them… --> <param name="[other key name]" value="[parameter value]"/> </url> <url type="application/x-suggestions+json" template="[suggestionurl]"/> <moz:search
form>[https://example.com/search]</moz:search
form> </opensearchdescription> shortname a short name for the search engine.
...And 5 more matches
Performance best practices in extensions - Archive of obsolete content
there is a down side to this: poorly written extensions can have a severe impact on the browsing experience, including on the overall per
formance of firefox itself.
... this article offers some best practices and suggestions that can not only improve the per
formance and speed of your extension, but also of firefox itself.
... improving startup per
formance extensions are loaded and run whenever a new browser window opens.
...And 4 more matches
HTML performance features - Learn web development
previous overview: per
formance next html is by default fast and accessible.
...this module intends to walk you through the key html per
formance features that can drastically improve the quality of your webpage.
... objective: to learn about the impact of html elements and attributes on web per
formance optimization.
...And 4 more matches
nsIURLFormatter
toolkit/components/url
formatter/public/nsiurl
formatter.idlscriptable this interface exposes methods to substitute variables in url
formats.
...mozilla applications linking to mozilla websites are strongly encouraged to use urls of the following
format: http[s]://%service%.mozilla.[com|org]/%locale%/ method overview astring
formaturl(in astring a
format); astring
formaturlpref(in astring apref); methods
formaturl()
formats a string url.
...astring
formaturl( in astring a
format ); parameters a
format un
formatted url as a string.
...And 4 more matches
Toolkit version format
this document is a reference for the version
format, as used in firefox 1.5 (xulrunner 1.8) and later.
... this
format is used by the extension manager, software update, and other parts of the plat
form.
... versions in at least the following places must con
form to this
format: addon's and target application's version in install and update manifests.
...And 4 more matches
CanvasRenderingContext2D.resetTransform() - Web APIs
the canvasrenderingcontext2d.resettrans
form() method of the canvas 2d api resets the current trans
form to the identity matrix.
... syntax void ctx.resettrans
form(); examples resetting the matrix this example draws a rotated rectangle after modifying the matrix, and then resets the matrix using the resettrans
form() method.
... html <canvas id="canvas"></canvas> javascript the rotate() method rotates the trans
formation matrix by 45°.
...And 4 more matches
FormData.append() - Web APIs
the append() method of the
formdata interface appends a new value onto an existing key inside a
formdata object, or adds the key if it does not already exist.
... the difference between
formdata.set and append() is that if the specified key already exists,
formdata.set will overwrite all existing values with the new one, whereas append() will append the new value onto the end of the existing set of values.
... syntax there are two versions of this method: a two and a three parameter version:
formdata.append(name, value);
formdata.append(name, value, filename); parameters name the name of the field whose data is contained in value.
...And 4 more matches
FormDataEvent - Web APIs
the
formdataevent interface represents a
formdata event — such an event is fired on an html
formelement object after the entry list representing the
form's data is constructed.
... this happens when the
form is submitted, but can also be triggered by the invocation of a
formdata() constructor.
... this allows a
formdata object to be quickly obtained in response to a
formdata event firing, rather than needing to put it together yourself when you wish to submit
form data via a method like xmlhttprequest (see using
formdata objects).
...And 4 more matches
HTMLFormControlsCollection - Web APIs
the html
formcontrolscollection interface represents a collection of html
form control elements.
... it represents the lists returned by the html
formelement interface's elements property and the htmlfieldsetelement interface's elements property.
...fill="#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/html
formcontrolscollection" 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">html
formcontrolscollection</text></a></svg></div> a:hover text { fill: #0095dd; pointer-events: all;} pr...
...And 4 more matches
HTMLFormElement.length - Web APIs
the html
formelement.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.
...And 4 more matches
HTMLFormElement.submit() - Web APIs
the html
formelement.submit() method submits a given <
form>.
... this method is similar, but not identical to, activating a
form's submit <button>.
...in particular, the
form's onsubmit event handler is not run.
...And 4 more matches
Network Information API - Web APIs
the network in
formation api provides in
formation about the system's connection in terms of general connection type (e.g., 'wifi', 'cellular', etc.).
...the entire api consists of the addition of the networkin
formation interface and a single property to the navigator interface: navigator.connection.
...a real-world use case would likely use a switch statement or some other method to check all of the possible values of networkin
formation.type.
...And 4 more matches
PerformanceObserver() - Web APIs
the per
formanceobserver() constructor creates a new per
formanceobserver object with the given observer callback.
... the observer callback is invoked when per
formance entry events are recorded for the entry types that have been registered, via the observe() method.
... syntax var observer = new per
formanceobserver(callback); parameters callback a per
formanceobservercallback callback that will be invoked when observed per
formance events are recorded.
...And 4 more matches
PerformanceObserver - Web APIs
the per
formanceobserver interface is used to observe per
formance measurement events and be notified of new per
formance entries as they are recorded in the browser's per
formance timeline.
... constructor per
formanceobserver() creates and returns a new per
formanceobserver object.
... methods per
formanceobserver.observe() specifies the set of entry types to observe.
...And 4 more matches
PerformanceObserverEntryList.getEntries() - Web APIs
the getentries() method of the per
formanceobserverentrylist interface returns a list of explicitly observed per
formance entry objects for a given filter.
... syntax general syntax: entries = list.getentries(); entries = list.getentries(per
formanceentryfilteroptions); specific usage: entries = list.getentries({name: "entry_name", entrytype: "mark"}); parameters per
formanceentryfilteroptionsoptional is a per
formanceentryfilteroptions dictionary, having the following fields: "name", the name of a per
formance entry.
...the valid entry types are listed in the per
formanceentry.entrytype method.
...And 4 more matches
PerformanceServerTiming - Web APIs
the per
formanceservertiming interface surfaces server metrics that are sent with the response in the server-timing http header.
... properties per
formanceservertiming.descriptionread only a domstring value of the server-specified metric description, or an empty string.
... per
formanceservertiming.durationread only a double that contains the server-specified metric duration, or value 0.0.
...And 4 more matches
WebGL2RenderingContext.isTransformFeedback() - Web APIs
the webgl2renderingcontext.istrans
formfeedback() method of the webgl 2 api returns true if the passed object is a valid webgltrans
formfeedback object.
... syntax glboolean gl.istrans
formfeedback(trans
formfeedback); parameters trans
formfeedback a webgltrans
formfeedback object to test.
... return value a glboolean indicating whether the given object is a valid webgltrans
formfeedback object (true) or not (false).
...And 4 more matches
WebGL2RenderingContext.uniform[1234][uif][v]() - Web APIs
the webgl2renderingcontext.uni
form[1234][uif][v]() methods of the webgl api specify values of uni
form variables.
...equivalent regex: uni
form[1234](u?i|f)v?
... syntax void gl.uni
form1ui(location, v0); void gl.uni
form2ui(location, v0, v1); void gl.uni
form3ui(location, v0, v1, v2); void gl.uni
form4ui(location, v0, v1, v2, v3); void gl.uni
form1fv(location, data, optional srcoffset, optional srclength); void gl.uni
form2fv(location, data, optional srcoffset, optional srclength); void gl.uni
form3fv(location, data, optional srcoffset, optional srclength); void gl.uni
form4fv(location, data, optional srcoffset, optional srclength); void gl.uni
form1iv(location, data, optional srcoffset, optional srclength); void gl.uni
form2iv(location, data, optional srcoffset, optional srclength); void gl.uni
form3iv(location, data, optional srcoffset, optional srclength); void gl.uni
form4iv(location, data, optional srcoffset, optional srclength); void gl.uni
form1uiv(locat...
...And 4 more matches
WebGLRenderingContext.uniform[1234][fi][v]() - Web APIs
the webglrenderingcontext.uni
form[1234][fi][v]() methods of the webgl api specify values of uni
form variables.
... all active uni
form variables defined in a program object are initialized to 0 when the program object is linked successfully.
... many of the functions described here have expanded webgl 2 interfaces, which can be found under webgl2renderingcontext.uni
form[1234][uif][v]().
...And 4 more matches
WebGLShaderPrecisionFormat - Web APIs
the webglshaderprecision
format interface is part of the webgl api and represents the in
formation returned by calling the webglrenderingcontext.getshaderprecision
format() method.
... properties webglshaderprecision
format.rangemin read only the base 2 log of the absolute value of the minimum value that can be represented.
... webglshaderprecision
format.rangemax read only the base 2 log of the absolute value of the maximum value that can be represented.
...And 4 more matches
XRReferenceSpaceEvent.transform - Web APIs
the read-only xrreferencespaceevent property trans
form indicates the position and orientation of the affected referencespace's native origin after the changes the event represents are applied.
... the trans
form is defined using the old coordinate system, which allows it to be used to convert coordinates from the pre-event coordinate system to the post-event coordiante system.
... syntax let refspace = xrreferencespaceevent.trans
form; value an xrrigidtrans
form object providing a trans
form that can be used to convert coordinates from the pre-event coordinate system to the post-event coordinate system.
...And 4 more matches
The Web Open Font Format (WOFF) - Developer guides
woff (the web open font
format) is a web font
format developed by mozilla in concert with type supply, letterror, and other organizations.
... it uses a compressed version of the same table-based sfnt structure used by truetype, opentype, and open font
format, but adds metadata and private-use data structures, including predefined fields allowing foundries and vendors to provide license in
formation if desired.
... many font vendors that are unwilling to license their truetype or opentype
format fonts for use on the web will license woff
format fonts.
...And 4 more matches
CSP: form-action - HTTP
the http content-security-policy (csp)
form-action directive restricts the urls which can be used as the target of a
form submissions from a given context.
... whether
form-action should block redirects after a
form submission is debated and browser implementations of this aspect are inconsistent (e.g.
... syntax one or more sources can be set for the
form-action policy: content-security-policy:
form-action <source>; content-security-policy:
form-action <source> <source>; sources <source> can be one of the following: <host-source> internet hosts by name or ip address, as well as an optional url scheme and/or port number.
...And 4 more matches
patternTransform - SVG: Scalable Vector Graphics
the patterntrans
form attribute defines a list of trans
form definitions that are applied to a pattern tile.
... only one element is using this attribute: <pattern> html,body,svg { height:100% } <svg viewbox="0 0 100 100" xmlns="http://www.w3.org/2000/svg"> <!-- apply a trans
form on the tile --> <pattern id="p1" width=".25" height=".25" patterntrans
form="rotate(20) skewx(30) scale(1 0.5)"> <circle cx="10" cy="10" r="10" /> </pattern> <!-- apply the trans
formed pattern tile --> <rect x="10" y="10" width="80" height="80" fill="url(#p1)" /> </svg> pattern for <pattern>, patterntrans
form defines a list of trans
form definitions that are applied to a pattern tile.
... note: as of svg2, it is also allowed to use the css trans
form property.
...And 4 more matches
Special per-platform menu considerations - Archive of obsolete content
some menu items have specific common labels or locations where certain menu items would go that differ on each plat
form.
...on the mac, these menu items will be moved onto the application menu, but on other plat
forms, they will be left in their original locations.
... this makes it easier to write the same xul code for all plat
forms.
...And 3 more matches
XForms Styling - Archive of obsolete content
hopefully someone more proficient in mozilla x
forms and css can clean this up repeats see the mozilla x
forms specials page for some general points.
... triggers use appearance="minimal" to be able to style buttons portability the mozilla x
forms extension is one of the few x
forms processors which allow for styling of the x
forms elements directly, using mostly standard css.
... processors such as chiba create "old-style" html
forms from x
forms documents, and must be styled accordingly.
...And 3 more matches
XForms Alert Element - Archive of obsolete content
introduction this message will be shown when the
form control cannot properly bind to instance data or when the instance data value is invalid or out of the specified range of selectable values (see the spec).
... attributes single-node binding linking src - url of a document whose contents will be retrieved by the alert element and used to provide the alert message for the containing
form control.
... the alert element's message can also be displayed immediately after the containing
form control element in the x
forms document's layout.
...And 3 more matches
XForms Submit Element - Archive of obsolete content
introduction this
form control initiates a submission.
...upon receiving a domactivate event, this
form control dispatches a x
forms-submit event to the submission element (see the spec) specified in its submission attibute.
... attributes ui common appearance - the value of this attribute gives a hint to the x
forms processor as to which type of widget(s) to use to represent this control.
...And 3 more matches
Storing the information you need — Variables - Learn web development
if you are using a desktop browser, the best place to type your sample code is your browser's javascript console (see what are browser developer tools for more in
formation on how to access this tool).
...you can have a simple object that represents a box and contains in
formation about its width, length, and height, or you could have an object that represents a person, and contains data about their name, height, weight, what language they speak, how to say hello to them, and more.
... try entering the following line into your console: let dog = { name : 'spot', breed : 'dalmatian' }; to retrieve the in
formation stored in the object, you can use the following syntax: dog.name we won't be looking at objects any more for now — you can learn more about those in a future module.
...And 3 more matches
Version, UI, and Status Information - Plugins
« previousnext » this chapter describes the functions that allow a plug-in to display a message on the status line, get agent in
formation, and check on the current version of the plug-in api and the browser.
...you can also use the status line to notify the user of plug-in-related in
formation.
... getting agent in
formation a plug-in can check which browser is running on the user's current system.
...And 3 more matches
Body.formData() - Web APIs
the
formdata() method of the body mixin takes a response stream and reads it to completion.
... it returns a promise that resolves with a
formdata object.
...if a user submits a
form and a service worker intercepts the request, you could for example call
formdata() on it to obtain a key-value map, modify some fields, then send the
form onwards to the server (or use it locally).
...And 3 more matches
CanvasPattern.setTransform() - Web APIs
the canvaspattern.settrans
form() method uses an svgmatrix or dommatrix object as the pattern's trans
formation matrix and invokes it on the pattern.
... syntax void pattern.settrans
form(matrix); parameters matrix an svgmatrix or dommatrix to use as the pattern's trans
formation matrix.
... examples using the settrans
form method this is just a simple code snippet which uses the settrans
form method to create a canvaspattern with the specified pattern trans
formation from an svgmatrix.
...And 3 more matches
CanvasRenderingContext2D.getTransform() - Web APIs
the canvasrenderingcontext2d.gettrans
form() method of the canvas 2d api retrieves the current trans
formation matrix being applied to the context.
... syntax let storedtrans
form = ctx.gettrans
form(); parameters none.
... the trans
formation matrix is described by: [acebdf001]\left[ \begin{array}{ccc} a & c & e \\ b & d & f \\ 0 & 0 & 1 \end{array} \right] note: the returned object is not live, so updating it will not affect the current trans
formation matrix, and updating the current trans
formation matrix will not affect an already returned dommatrix.
...And 3 more matches
FormDataEvent() - Web APIs
the
formdataevent() constructor creates a new
formdataevent object instance.
... syntax new
formdataevent(type[,
formeventinit]); values type a domstring representing the name of the event.
...
formeventinit optional a
formeventinit dictionary, which can take the following optional fields: bubbles: a boolean indicating whether the event bubbles.
...And 3 more matches
GlobalEventHandlers.onformdata - Web APIs
the on
formdata property of the globaleventhandlers mixin is the eventhandler for processing
formdata events, fired after the entry list representing the
form's data is constructed.
... this happens when the
form is submitted, but can also be triggered by the invocation of a
formdata() constructor.
... on
formdata is available on html
formelement.
...And 3 more matches
performance.clearResourceTimings() - Web APIs
the clearresourcetimings() method removes all per
formance entries with an entrytype of "resource" from the browser's per
formance data buffer and sets the size of the per
formance data buffer to zero.
... to set the size of the browser's per
formance data buffer, use the per
formance.setresourcetimingbuffersize() method.
... syntax per
formance.clearresourcetimings(); arguments void return value none this method has no return value.
...And 3 more matches
performance.setResourceTimingBufferSize() - Web APIs
the setresourcetimingbuffersize() method sets the browser's resource timing buffer size to the specified number of "resource" per
formance entry type objects.
... a browser's recommended resource timing buffer size is at least 150 per
formance entry objects.
... syntax per
formance.setresourcetimingbuffersize(maxsize); arguments maxsize a number representing the maximum number of per
formance entry objects the browser should hold in its per
formance entry buffer.
...And 3 more matches
PublicKeyCredential.isUserVerifyingPlatformAuthenticatorAvailable() - Web APIs
isuserverifyingplat
formauthenticatoravailable() is a static method of the publickeycredential interface that returns a promise which resolves to true if a user-verifying plat
form authenticator is available.
... a user-verifying plat
form authenticator is a kind of multi-factor authenticator that is part of the client device (it is generally not removable) and that involves an action from the user in order to identify them.
... syntax publickeycredential.isuserverifyingplat
formauthenticatoravailable() parameters none.
...And 3 more matches
SVGAnimatedTransformList - Web APIs
svg animated trans
form list interface the svganimatedtrans
formlist interface is used for attributes which take a list of numbers and which can be animated.
... interface overview also implement none methods none properties readonly svgtrans
formlist baseval readonly svgtrans
formlist animval normative document svg 1.1 (2nd edition) properties name type description baseval svgtrans
formlist the base value of the given attribute before applying any animations.
... animval svgtrans
formlist a read only svgtrans
formlist representing the current animated value of the given attribute.
...And 3 more matches
WebGL2RenderingContext.bindTransformFeedback() - Web APIs
the webgl2renderingcontext.bindtrans
formfeedback() method of the webgl 2 api binds a passed webgltrans
formfeedback object to the current gl state.
... syntax void gl.bindtrans
formfeedback(target, trans
formfeedback); parameters target a glenum specifying the target (binding point).
... must be gl.trans
form_feedback.
...And 3 more matches
WebGL2RenderingContext.createTransformFeedback() - Web APIs
the webgl2renderingcontext.createtrans
formfeedback() method of the webgl 2 api creates and initializes webgltrans
formfeedback objects.
... syntax webgltrans
formfeedback gl.createtrans
formfeedback(); parameters none.
... return value a webgltrans
formfeedback object.
...And 3 more matches
WebGL2RenderingContext.deleteTransformFeedback() - Web APIs
the webgl2renderingcontext.deletetrans
formfeedback() method of the webgl 2 api deletes a given webgltrans
formfeedback object.
... syntax void gl.deletetrans
formfeedback(trans
formfeedback); parameters trans
formfeedback a webgltrans
formfeedback object to delete.
...webgltrans
formfeedback objects are not available in webgl 1.
...And 3 more matches
WebGL2RenderingContext.getActiveUniformBlockName() - Web APIs
the webgl2renderingcontext.getactiveuni
formblockname() method of the webgl 2 api retrieves the name of the active uni
form block at a given index within a webglprogram.
... syntax domstring gl.getactiveuni
formblockname(program, uni
formblockindex); parameters program a webglprogram containing the uni
form block.
... uni
formblockindex a gluint specifying the index of the uni
form block to whose name to retrieve.
...And 3 more matches
WebGL2RenderingContext.getUniformBlockIndex() - Web APIs
the webgl2renderingcontext.getuni
formblockindex() method of the webgl 2 api retrieves the index of a uni
form block within a webglprogram.
... syntax gluint gl.getuni
formblockindex(program, uni
formblockname); parameters program a webglprogram containing the uni
form block.
... uni
formname a domstring specifying the name of the uni
form block to whose index to retrieve.
...And 3 more matches
WebGL2RenderingContext.getUniformIndices() - Web APIs
the webgl2renderingcontext.getuni
formindices() method of the webgl 2 api retrieves the indices of a number of uni
forms within a webglprogram.
... syntax sequence<gluint> gl.getuni
formindices(program, uni
formnames); parameters program a webglprogram containing uni
forms whose indices to query.
... uni
formnames an array of domstring specifying the names of the uni
forms to query.
...And 3 more matches
WebGL2RenderingContext.uniformBlockBinding() - Web APIs
the webgl2renderingcontext.uni
formblockbinding() method of the webgl 2 api assigns binding points for active uni
form blocks.
... syntax void gl.uni
formblockbinding(program, uni
formblockindex, uni
formblockbinding); parameters program a webglprogram containing the active uni
form block whose binding to assign.
... uni
formblockindex a gluint specifying the index of the active uni
form block within the program.
...And 3 more matches
WebGLRenderingContext.getShaderPrecisionFormat() - Web APIs
the webglrenderingcontext.getshaderprecision
format() method of the webgl api returns a new webglshaderprecision
format object describing the range and precision for the specified shader numeric
format.
... syntax webglshaderprecision
format gl.getshaderprecision
format(shadertype, precisiontype); parameters shadertype either a gl.fragment_shader or a gl.vertex_shader.
... return value a webglshaderprecision
format object or null, if an error occurs.
...And 3 more matches
WebGLRenderingContext.uniformMatrix[234]fv() - Web APIs
the webglrenderingcontext.uni
formmatrix[234]fv() methods of the webgl api specify matrix values for uni
form variables.
... the three versions of this method (uni
formmatrix2fv(), uni
formmatrix3fv(), and uni
formmatrix4fv()) take as the input value 2-component, 3-component, and 4-component square matrices, respectively.
... syntax webglrenderingcontext.uni
formmatrix2fv(location, transpose, value); webglrenderingcontext.uni
formmatrix3fv(location, transpose, value); webglrenderingcontext.uni
formmatrix4fv(location, transpose, value); parameters location a webgluni
formlocation object containing the location of the uni
form attribute to modify.
...And 3 more matches
WebXR performance guide - Web APIs
webxr applications involve multiple technologies which can be highly sensitive to per
formance constraints.
... as such, you may find yourself needing to make adjustments or compromises to optimize the per
formance of your webxr application to be as usable as possible on the broadest assortment of target devices.
... in this guide, we'll examine a variety of suggestions and recommendations that will help you make your webxr app as per
formant as possible.
...And 3 more matches
WorkerGlobalScope.performance - Web APIs
the per
formance read-only property of the workerglobalscope interface returns a per
formance object to be used on the worker.
... not all per
formance properties and methods are available to web workers.
... syntax var perfobj = self.per
formance; return value a per
formance object.
...And 3 more matches
-webkit-transform-2d - CSS: Cascading Style Sheets
the -webkit-trans
form-2d boolean css media feature is a chrome extension whose value is true if vendor-prefixed css 2d trans
forms are supported.
... syntax -webkit-trans
form-2d is a boolean css media feature whose value is true if the browser supports -webkit prefixed css 2d trans
forms.
... values true the browser supports the 2d css trans
forms with the -webkit prefix.
...And 3 more matches
arabic-form - SVG: Scalable Vector Graphics
the arabic-
form attribute indicates which of the four possible
forms an arabic glyph represents.
... only one element is using this attribute: <glyph> context notes value initial | medial | terminal | isolated default value isolated animatable no initial this value indicates that the glyph represents the initial
form.
... medial this value indicates that the glyph represents the medial
form.
...And 3 more matches
transform-origin - SVG: Scalable Vector Graphics
the trans
form-origin svg attribute sets the origin for an item’s trans
formations.
... note: as a presentation attribute in svg, trans
form-origin corresponds in syntax and behavior to the trans
form-origin property in css, and can be used as css property to style svg.
... see the css trans
form-origin property for more in
formation.
...And 3 more matches
XSLT: Extensible Stylesheet Language Transformations
xslt/xpath reference: xslt elements, exslt functions, xpath functions, xpath axes extensible stylesheet language trans
formations (xslt) is an xml-based language used, in conjunction with specialized processing software, for the trans
formation of xml documents.
... although the process is referred to as "trans
formation," the original document is not changed; rather, a new xml document is created based on the content of an existing document.
... then, the new document may be serialized (output) by the processor in standard xml syntax or in another
format, such as html or plain text.
...And 3 more matches
Test your skills: Images and Form elements - Learn web development
the aim of this task is to help you check your understanding of some of the values and units that we looked at in the lesson on images, media and
form elements.
... task two in this task, you have a simple
form.
... your task is to make the following changes to the way this
form looks: use attribute selectors to target the search field and button inside .my
form.
...And 2 more matches
nsIAuthInformation
netwerk/base/public/nsiauthin
formation.idlscriptable a object that holds authentication in
formation.
...after the user entered the authentication in
formation, it should set the attributes of this object to indicate to the caller what was entered by the user.
... need_domain 4 this dialog needs domain in
formation.
...And 2 more matches
nsIXFormsNSInstanceElement
nsix
formsnsinstanceelement is implemented by all x
forms <instance/> elements, defining mozilla extensions.
... extensions/x
forms/nsix
formsnsinstanceelement.idlscriptable please add a summary to this article.
... last changed in gecko 1.8 (firefox 1.5 / thunderbird 1.5 / seamonkey 1.0) interface code [scriptable, uuid(80669b92-8331-4f92-aaf8-06e80e6827b3)] interface nsix
formsnsinstanceelement : nsisupports { nsidomdocument getinstancedocument(); }; methods getinstancedocument nsidomdocument getinstancedocument(); getinstancedocument returns a dom document that corresponds to the instance data associated with the instance element.
...And 2 more matches
nsIXFormsNSModelElement
nsix
formsnsmodelelement is implemented by all x
forms <model/> elements.
... it defines mozilla extensions to the nsix
formsmodelelement interface.
... extensions/x
forms/nsix
formsnsmodelelement.idlscriptable please add a summary to this article.
...And 2 more matches
CanvasRenderingContext2D.currentTransform - Web APIs
the canvasrenderingcontext2d.currenttrans
form property of the canvas 2d api returns or sets a dommatrix (current specification) or svgmatrix (old specification) object for the current trans
formation matrix.
... syntax ctx.currenttrans
form [= value]; value a dommatrix or svgmatrix object to use as the current trans
formation matrix.
... examples manually changing the matrix this example uses the currenttrans
form property to set a trans
formation matrix.
...And 2 more matches
FormData() - Web APIs
the
formdata() constructor creates a new
formdata object.
... syntax var
formdata = new
formdata(
form) parameters
form optional an html <
form> element — when specified, the
formdata object will be populated with the
form's current keys/values using the name property of each element for the keys and their submitted value for the values.
... example the following line creates an empty
formdata object: var
formdata = new
formdata(); // currently empty you could add a key/value pair to this using
formdata.append:
formdata.append('username', 'chris'); or you can specify the optional
form argument when creating the
formdata object, to prepopulate it with values from the specified
form: <
form id="my
form" name="my
form"> <div> <label for="username">enter name:</label> <input type="text" id="username" name="username"> </div> <div> <label for="useracc">enter account number:</label> <input type="text" id="useracc" name="useracc"> </div> <div> <label for="userfile">upload file:</label> <input type="file" id="userfile" name="userfile"> </div> <input type="...
...And 2 more matches
FormData.set() - Web APIs
the set() method of the
formdata interface sets a new value for an existing key inside a
formdata object, or adds the key/value if it does not already exist.
... the difference between set() and
formdata.append is that if the specified key does already exist, set() will overwrite all existing values with the new one, whereas
formdata.append will append the new value onto the end of the existing set of values.
... syntax there are two versions of this method: a two and a three parameter version:
formdata.set(name, value);
formdata.set(name, value, filename); parameters name the name of the field whose data is contained in value.
...And 2 more matches
HTMLFormElement.enctype - Web APIs
the html
formelement.enctype property is the mime type of content that is used to submit the
form to the server.
... possible values are: application/x-www-
form-urlencoded: the initial default type.
... multipart/
form-data: the type that allows file <input> element(s) to upload file data.
...And 2 more matches
HTMLLabelElement.form - Web APIs
the read-only htmllabelelement.
form property returns an html
formelement object which represents the
form of which the label's associated control is a part, or null if there is either no associated control, or if that control isn't in a
form.
... this property is just a shortcut for htmllabelelement.control.
form.
... syntax
form = htmllabelelement.
form value an html
formelement which represents the
form with which the label's control is associated.
...And 2 more matches
NavigatorID.platform - Web APIs
returns a string representing the plat
form of the browser.
... syntax plat
form = navigator.plat
form value a domstring identifying the plat
form on which the browser is running, or an empty string if the browser declines to (or is unable to) identify the plat
form.
... plat
form is a string that must be an empty string or a string representing the plat
form on which the browser is executing.
...And 2 more matches
PerformanceEntry.toJSON() - Web APIs
the tojson() method is a serializer; it returns a json representation of the per
formance entry object.
... syntax json = perfentry.tojson(); arguments none return value json a json object that is the serialization of the per
formanceentry object.
... function run_per
formanceentry() { log("per
formanceentry support ..."); if (per
formance.mark === undefined) { log("...
...And 2 more matches
PerformanceLongTaskTiming - Web APIs
the per
formancelongtasktiming interface of the the long tasks api reports instances of long tasks.
... <div id="interfacediagram" style="display: inline-block; position: relative; width: 100%; padding-bottom: 11.666666666666666%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 70" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/per
formanceentry" target="_top"><rect x="1" y="1" width="160" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="81" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">per
formanceentry</text></a><polyline points="161,25 171,20 171,30 161,25" stroke="#d4dde4" fill="none"/><line x1="171" y1="25" x2="201" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web...
.../api/per
formancelongtasktiming" target="_top"><rect x="201" y="1" width="250" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="326" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">per
formancelongtasktiming</text></a></svg></div> a:hover text { fill: #0095dd; pointer-events: all;} properties per
formancelongtasktiming.attribution read only returns a sequence of taskattributiontiming instances.
...And 2 more matches
PerformanceObserverEntryList.getEntriesByName() - Web APIs
the getentriesbyname() method of the per
formanceobserverentrylist interface returns a list of explicitly observed per
formance entry objects for a given name and entry type.
...the valid entry types are listed in per
formanceentry.entrytype.
... return value a list of explicitly observed per
formance entry objects that have the specified name and type.
...And 2 more matches
PerformanceObserverEntryList.getEntriesByType() - Web APIs
the getentriesbytype() method of the per
formanceobserverentrylist returns a list of explicitly observed per
formance entry objects for a given per
formance entry type.
...the valid entry types are listed in per
formanceentry.entrytype.
... return value a list of explicitly observed per
formanceentry objects that have the specified type.
...And 2 more matches
PerformanceObserverEntryList - Web APIs
the per
formanceobserverentrylist interface is a list of pe
formance events that were explicitly observed via the observe() method.
... methods per
formanceobserverentrylist.getentries() returns a list of explicitly observed per
formanceentry objects based on the given filter.
... per
formanceobserverentrylist.getentriesbytype() returns a list of explicitly observed per
formanceentry objects of the given entry type.
...And 2 more matches
format - Web APIs
the svgaltglyphelement.
format property is a domstring that defines the
format of the given font.
... it has the same meaning as the '
format' property of svgglyphrefelement property.
... if the font is in one of the
formats listed in css2([css2], section15.3.5), then its value is the corresponding <string> parameter of the font.
...And 2 more matches
WebGL2RenderingContext.getTransformFeedbackVarying() - Web APIs
the webgl2renderingcontext.gettrans
formfeedbackvarying() method of the webgl 2 api returns in
formation about varying variables from webgltrans
formfeedback buffers.
... syntax webglactiveinfo gl.gettrans
formfeedbackvarying(program, index); parameters program a webglprogram.
... index a gluint specifying the index of the varying variable whose in
formation to retrieve.
...And 2 more matches
WebGL2RenderingContext.pauseTransformFeedback() - Web APIs
the webgl2renderingcontext.pausetrans
formfeedback() method of the webgl 2 api pauses a trans
form feedback operation.
... syntax void gl.pausetrans
formfeedback(); parameters none.
... examples var trans
formfeedback = gl.createtrans
formfeedback(); gl.bindtrans
formfeedback(gl.trans
form_feedback, trans
formfeedback); gl.begintrans
formfeedback(gl.triangles); gl.pausetrans
formfeedback(); //...
...And 2 more matches
WebGL2RenderingContext.resumeTransformFeedback() - Web APIs
the webgl2renderingcontext.resumetrans
formfeedback() method of the webgl 2 api resumes a trans
form feedback operation.
... syntax void gl.resumetrans
formfeedback(); parameters none.
... examples var trans
formfeedback = gl.createtrans
formfeedback(); gl.bindtrans
formfeedback(gl.trans
form_feedback, trans
formfeedback); gl.begintrans
formfeedback(gl.triangles); gl.pausetrans
formfeedback(); //...
...And 2 more matches
WebGL2RenderingContext.uniformMatrix[234]x[234]fv() - Web APIs
the webgl2renderingcontext.uni
formmatrix[234]x[234]fv() methods of the webgl 2 api specify matrix values for uni
form variables.
... syntax void gl.uni
formmatrix2fv(location, transpose, data, optional srcoffset, optional srclength); void gl.uni
formmatrix3x2fv(location, transpose, data, optional srcoffset, optional srclength); void gl.uni
formmatrix4x2fv(location, transpose, data, optional srcoffset, optional srclength); void gl.uni
formmatrix2x3fv(location, transpose, data, optional srcoffset, optional srclength); void gl.uni
formmatrix3fv(location, transpose, data, optional srcoffset, optional srclength); void gl.uni
formmatrix4x3fv(location, transpose, data, optional srcoffset, optional srclength); void gl.uni
formmatrix2x4fv(location, transpose, data, optional srcoffset, optional srclength); v...
...oid gl.uni
formmatrix3x4fv(location, transpose, data, optional srcoffset, optional srclength); void gl.uni
formmatrix4fv(location, transpose, data, optional srcoffset, optional srclength); parameters location a webgluni
formlocation object containing the location of the uni
form attribute to modify.
...And 2 more matches
WebGLTransformFeedback - Web APIs
the webgltrans
formfeedback interface is part of the webgl 2 api and enables trans
form feedback, which is the process of capturing primitives generated by vertex processing.
... it allows to preserve the post-trans
form rendering state of an object and resubmit this data multiple times.
... when working with webgltrans
formfeedback objects, the following methods of the webgl2renderingcontext are useful: webgl2renderingcontext.createtrans
formfeedback() webgl2renderingcontext.deletetrans
formfeedback() webgl2renderingcontext.istrans
formfeedback() webgl2renderingcontext.bindtrans
formfeedback() webgl2renderingcontext.begintrans
formfeedback() webgl2renderingcontext.endtrans
formfeedback() webgl2renderingcontext.pausetrans
formfeedback() webgl2renderingcontext.resumetrans
formfeedback() webgl2renderingcontext.trans
formfeedbackvaryings() webgl2renderingcontext.gettrans
formfeedbackvarying() examples creating a webgltrans
formfeedback object in this example, gl must be a webgl2renderingcontext.
...And 2 more matches
Accessibility Information for Web Authors - Accessibility
it can per
form a "complete webpage quality check" for accessibility, privacy, searchability, metadata and even alt text attribute quality.
...rather than providing a complex technical report, wave 4.0 shows the original web page with embedded icons and indicators that reveal the accessibility in
formation within your page.
...a study has established that about 8 percent of all men have some
form of color deficiency.
...And 2 more matches
-webkit-transform-3d - CSS: Cascading Style Sheets
the -webkit-trans
form-3d boolean css media feature is a chrome extension whose value is true if vendor-prefixed css 3d trans
forms are supported.
... syntax -webkit-trans
form-3d is a boolean css media feature whose value is true if the browser supports -webkit prefixed css 3d trans
forms.
... values true the browser supports the 3d css trans
forms with the -webkit prefix.
...And 2 more matches
<pre>: The Preformatted Text element - HTML: Hypertext Markup Language
the html <pre> element represents pre
formatted text which is to be presented exactly as written in the html file.
... example html <p>using css to change the font color is easy.</p> <pre> body { color: red; } </pre> result accessibility concerns it is important to provide an alternate description for any images or diagrams created using pre
formatted text.
... people experiencing low vision conditions and browsing with the aid of assistive technology such as a screen reader may not understand what the pre
formatted text characters are representing when they are read out in sequence.
...And 2 more matches
Intl.DateTimeFormat.prototype.resolvedOptions() - JavaScript
the intl.datetime
format.prototype.resolvedoptions() method returns a new object with properties reflecting the locale and date and time
formatting options computed during initialization of this datetime
format object.
... syntax datetime
format.resolvedoptions() return value a new object with properties reflecting the locale and date and time
formatting options computed during the initialization of the given datetime
format object.
... weekday era year month day hour minute second timezonename the values resulting from
format matching between the corresponding properties in the options argument and the available combinations and representations for date-time
formatting in the selected locale.
...And 2 more matches
Understanding latency - Web Performance
in terms of per
formance optimization, it's important to optimize to reduce causes of lacency and to test site per
formance emulating high latency to optimizer for users with lousy connections.
... this article explains what latency is, how it impacts per
formance, how to measure latency, and how to reduce it.
...one of the main aims of improving per
formance is to reduce latency.
...And 2 more matches
<animateTransform> - SVG: Scalable Vector Graphics
the animatetrans
form element animates a trans
formation attribute on its target element, thereby allowing animations to control translation, scaling, rotation, and/or skewing.
... usage context categoriesanimation elementpermitted contentany number of the following elements, in any order:descriptive elements example <svg width="120" height="120" viewbox="0 0 120 120" xmlns="http://www.w3.org/2000/svg"> <polygon points="60,30 90,90 30,90"> <animatetrans
form attributename="trans
form" attributetype="xml" type="rotate" from="0 60 70" to="360 60 70" dur="10s" repeatcount="indefinite"/> </polygon> </svg> live sample attributes global attributes conditional processing attributes » core attributes » animation event attributes » xlink attributes » animation attribute target attribute...
...s » animation timing attributes » animation value attributes » animation addition attributes » externalresourcesrequired specific attributes by from to type dom interface this element implements the svganimatetrans
formelement interface.
...And 2 more matches
format-number - XPath
xslt/xpath reference: xslt elements, exslt functions, xpath functions, xpath axes the
format-number function evaluates a number and returns a string representing the number in a given
format.
... syntax
format-number(number ,pattern [,decimal-
format] ) arguments number the number to be
formatted pattern a string in the
format of the jdk 1.1 decimal
format class.
...here is the java se 6 decimal
format.) decimal-
format (optional) the name of an xsl:decimal-
format element that defines the number
format to be used.
...And 2 more matches
Basic Example - XSLT: Extensible Stylesheet Language Transformations
basic example the basic example will load an xml file and apply a xsl trans
formation on it.
...the xml file describes an article and the xsl file
formats the in
formation for display.
... </myns:body> </myns:article> figure 5 : xslt stylesheet <?xml version="1.0"?> <xsl:stylesheet version="1.0" xmlns:xsl="http://www.w3.org/1999/xsl/trans
form" xmlns:myns="http://devedge.netscape.com/2002/de"> <xsl:output method="html" /> <xsl:template match="/"> <html> <head> <title> <xsl:value-of select="/myns:article/myns:title"/> </title> <style type="text/css"> .mybox {margin:10px 155px 0 50px; border: 1px dotted #639ace; padding:0 5px 0 5px;} </style> ...
...And 2 more matches
Converting WebAssembly text format to wasm - WebAssembly
webassembly has an s-expression-based textual representation, an intermediate
form designed to be exposed in text editors, browser developer tools, etc.
... this article explains a little bit about how it works, and how to use available tools to convert text
format files to the .wasm assembly
format.
... note: text
format files are usually saved with a .wat extension.
...And 2 more matches
Forms related code snippets - Archive of obsolete content
here are some <
form> related code snippets.
... (before implementing it in a working environment, please read the note about the const statement compatibility) <!doctype html> <html> <head> <meta http-equiv="content-type" content="text/html; charset=utf-8" /> <title>datepicker example - mdn</title> <script type="text/javascript"> /*\ |*| |*| datepicker example mdndeveloper network |*| |*| https://developer.mozilla.org/docs/code_snippets/
forms |*| https://developer.mozilla.org/user:fusionchess |*| |*| this snippet is released under the gnu public license, version 3 or later.
...: left; margin-right: 2px; } span.zdp-increase-month, span.zdp-increase-year { float: right; margin-left: 2px; } td.zdp-active-cell { padding: 1px 3px; cursor: pointer; color: #000000; text-align: center; vertical-align: middle; } td.zdp-active-cell:hover { background-color: #999999; cursor: pointer; } td.zdp-empty-cell { cursor: not-allowed; } </style> </head> <body> <
form name="my
form"> <p> from: <input type="text" readonly class="date-picker" name="date-from" /> to: <input type="text" readonly class="date-picker" name="date-to" /> </p> </
form> </body> </html> note: the current implementation of const (constant statement) is not part of ecmascript 5.
... filter the digitation into a
form field this example shows the use of the onkeypress event during a digitation into a
form field in order to match some rules.
Appendix A: Add-on Performance - Archive of obsolete content
note: see the newer article per
formance best practices in extensions for more up-to-date in
formation about how to optimize the per
formance of your add-on.
... add-ons can have a noticeable per
formance impact on firefox.
...add-on developers need to make sure that they minimize their add-ons' per
formance impact, and here are a few simple guidelines that should be followed to achieve that.
... if your add-on needs to per
form a heavy operation like sorting or a complex mathematical calculation, you should use dom workers to offload the work to other threads.
List of Former Mozilla-Based Applications - Archive of obsolete content
applications that switched to another technology name description additional in
formation angelsoft tools for startups, vcs, and angel investors switched from xulrunner-based client to a web application autodesk maya 3d modeling tool switched off of gecko for help browser in version 8.5 blam feed reader switched to webkit in version 1.8.6 boxee media center software switched to webkit in version 1.0 epiphany browser switched from gecko to webkit flock social browsing ...
...erating system as of march 2010, rw/w reports jolicloud is on chrome/chrome os joost tv over internet switched from xulrunner-based client to a web application liferea news aggregator switched to webkit in version 1.6 manyone browser browser originally mozilla-based but now i believe the have a web-based tool (need reference for that) miro (
formerly democracy player) video switched from xulrunner to webkit in version 3.0.2 moblin browser browser when moblin became meego it switched from a custom gecko-based browser to chrome nautilus file manager hasn't used mozilla code since version 2.0 raptr client gaming client was a xulrunner app initially but now uses adobe air rift techno...
...logies software installation over internet no longer using mozilla technology -- need confirmation and details second life virtual world desktop client switched from embedded mozilla browser to a plugin architecture with a qtwebkit plugin applications that are no longer being developed name description additional in
formation aphrodite browser inactive aol client for mac internet software no longer available beonex communicator internet software last news item on site from 2004 chameleon theme builder inactive civil netizen p2p file delivery (email attachment replacement) site not updated since 2006 compuserve client internet software no longer available ...
... other places to find
former mozilla-based applications: archived mozilla hall of fame page siftery ...
Well-Formed Web - Archive of obsolete content
getting started a guided tutorial that will help you get started with the well-
formed web rss module.
... the well-
formed web rss module provides facilities for <item> level commenting: for linking to comments contained in an external rss feed, and for posting new comments.
... documentation selected articles why well-
formed web rss module is popular - syndicating your comments charles iliya krempeaux talks about the rss well-
formed web module, why it is popular among some, and how it is used to link to your comments (2005-08-22).
... references rss well-
formed web module element list examples none available at this time community none available at this time tools none available at this time other resources well-
formed web spec rss, rdf, xml ...
Developing Mozilla XForms - Archive of obsolete content
debugging always start with a debug build of the x
forms and the schema-validation extensions.
... see building mozilla x
forms for a .mozconfig for debug builds.
...then start firefox out of the build directory: cd obj-*/dist/firefox ./firefox -no-remote -jsconsole -p yourprofilename the x
forms extension that was built together with firefox should be already installed.
... then open your
form that causes problems and have a look on the console.
XForms Output Element - Archive of obsolete content
attributes ui common appearance - the value of this attribute gives a hint to the x
forms processor as to which type of widget(s) to use to represent this control accesskey - used to specify the keyboard shortcut for focusing this control single-node binding special value - xpath expression whose evaluation result is used as the output's value.
... representations the x
forms output element can be represented by the following widgets for the specified data types (or types derived from these data types): text - default representation for instance data of most types, especially static text (xhtml/xul).
...x
forms output is most often used when a
form author needs to render simple text of an instance node (xhtml/xul).
... analogous widgets are <xhtml:span/> and <xul:description/> calendar a
form author may notice a x
forms output element represented by a calendar widget in the mozilla x
forms processor if the control meets the following criteria (xhtml/xul).
XForms Select Element - Archive of obsolete content
attributes ui common appearance - the value of this attribute gives a hint to the x
forms processor as to which type of widget(s) to use to represent this control.
...the data binding restriction to simple content may be relaxed when an itemset element is used, which allows the available choices to be obtained from an x
forms model.
... representations the x
forms select element can be represented by the following widgets for the specified appearance attribute values: list - default representation (xhtml/xul) check group- used when appearance = 'full' (xhtml/xul) list displaying a listbox is the default representation (xhtml/xul).
... <xf:value>pg</xf:value> </xf:item> <xf:item> <xf:label>green</xf:label> <xf:value>g</xf:value> </xf:item> </xf:choices> <xf:choices> <xf:label>red colors</xf:label> <xf:item> <xf:label>red</xf:label> <xf:value>r</xf:value> </xf:item> <xf:item> <xf:label>magenta</xf:label> <xf:value>m</xf:value> </xf:item> </xf:choices> </x
forms:select> ...
XForms Trigger Element - Archive of obsolete content
actions are described by the x
forms action module (see the spec).
... attributes ui common appearance - the value of this attribute gives a hint to the x
forms processor as to which type of widget(s) to use to represent this control accesskey - used to specify the keyboard shortcut for focusing this control single-node binding type restrictions the trigger element can be bound to a node containing data of any type.
... representations the x
forms trigger element can be represented by the following widgets for the specified appearance attribute values: button - default representation (xhtml/xul) link/clickable text - used when appearance = 'minimal' (xhtml only) button displaying a button is the default presentation (xhtml/xul).
... characteristics analogous widgets are <html:input type="button"/> and <xul:button/> link/clickable text x
forms authors can use this representation if they want to have a widget like a xhtml anchor (xhtml only).
Using XForms and PHP - Archive of obsolete content
introduction a few tips on using x
forms and php together.
... returning xml data to either serve a page (with x
forms in it) or to generate data used as instance data for x
forms, the page needs to be served as xml, for example application/xhtml+xml.
... parsing submitted data depending on the submission type, you might get different data
formats on the server side.
... to really use the power of x
forms (/xml) you would probably submit xml.
Test your skills: Form structure - Learn web development
this aim of this skill test is to assess whether you've understood our how to structure a web
form article.
...
form structure 1 in this task we want you to structure the provided
form features: separate out the first two and second two
form fields into two distinct containers, each with a descriptive legend (use "personal details" for the first two, and "comment in
formation" for the second two).
... mark up each text label with an appropriate element so that it is semantically associated with its respective
form field.
...your post should include: a descriptive title such as "assessment wanted for
form structure 1 skill test".
Accessibility information for UI designers and developers
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.
... links vs buttons to keep your interface in line with user expectations, use links for interactions that go somewhere (on the current page or another page) and buttons for interactions that do something (like submit a
form or open an overlay).
JSErrorFormatString
syntax typedef struct jserror
formatstring { const char *
format; uint16_t argcount; int16_t exntype; } jserror
formatstring; name type description
format const char * the error
format string in ascii.
... argcount uint16_t the number of arguments to expand in the
formatted error message.
... description jserror
formatstring is a struct to represent error message and type, returned by js_reporterrornumber function.
... see also mxr id search for jserror
formatstring jsexntype js_reporterrornumber bug 684526 ...
TPS Formdata Lists
a
formdata asset list is an array of objects, each with the following properties: fieldname: required.
... date: the date the
form data was used, expressed in hours from the present, so 0 means now, and -24 means 24 hours ago.
... for example: var
formdata1 = [ { fieldname: "testing", value: "success", date: -1 }, { fieldname: "testing", value: "failure", date: -2 }, { fieldname: "username", value: "joe" } ];
formdata lists and phase actions you can use the following functions in phase actions for
formdata lists:
formdata.add
formdata.delete
formdata.verify
formdata.verifynot for an example, see the tps
formdata unittest: http://hg.mozilla.org/services/tps/f...st_
formdata.js notes note 1, tps supports the delete action for
formdata, but sync currently does not correctly sync deleted
form data, see bug 564296.
... note 2, sync currently does not sync
formdata dates, so the date field is ignored when per
forming verify and verify-not actions.
CanvasRenderingContext2D.transform() - Web APIs
the canvasrenderingcontext2d.trans
form() method of the canvas 2d api multiplies the current trans
formation with the matrix described by the arguments of this method.
... note: see also the settrans
form() method, which resets the current trans
form to the identity matrix and then invokes trans
form().
... syntax void ctx.trans
form(a, b, c, d, e, f); the trans
formation matrix is described by: [acebdf001]\left[ \begin{array}{ccc} a & c & e \\ b & d & f \\ 0 & 0 & 1 \end{array} \right] parameters a (m11) horizontal scaling.
... html <canvas id="canvas"></canvas> javascript const canvas = document.getelementbyid('canvas'); const ctx = canvas.getcontext('2d'); ctx.trans
form(1, .2, .8, 1, 0, 0); ctx.fillrect(0, 0, 100, 100); result specifications specification status comment html living standardthe definition of 'canvasrenderingcontext2d.trans
form' in that specification.
FormData.get() - Web APIs
the get() method of the
formdata interface returns the first value associated with a given key from within a
formdata object.
... syntax
formdata.get(name); parameters name a usvstring representing the name of the key you want to retrieve.
... return value a
formdataentryvalue containing the value.
... example the following line creates an empty
formdata object: var
formdata = new
formdata(); if we add two username values using
formdata.append:
formdata.append('username', 'chris');
formdata.append('username', 'bob'); the following get() function will only return the first username value appended:
formdata.get('username'); // returns "chris" specifications specification status comment xmlhttprequestthe definition of 'get()' in that specification.
FormData.getAll() - Web APIs
the getall() method of the
formdata interface returns all the values associated with a given key from within a
formdata object.
... syntax
formdata.getall(name); parameters name a usvstring representing the name of the key you want to retrieve.
... returns an array of
formdataentryvalues whose key matches the value passed in the name parameter.
... example the following line creates an empty
formdata object: var
formdata = new
formdata(); if we add two username values using
formdata.append:
formdata.append('username', 'chris');
formdata.append('username', 'bob'); the following getall() function will return both username values in an array:
formdata.getall('username'); // returns ["chris", "bob"] specifications specification status comment xmlhttprequestthe definition of 'getall()' in that specification.
FormDataEntryValue - Web APIs
a string or file that represents a single value from a set of
formdata key-value pairs.
... this type is returned by the
formdata.get() and
formdata.getall() methods.
... the
formdata.get() method returns a single value while
formdata.getall() returns an array of
formdataentryvalues.
... note that the
formdata.append() and
formdata.set() methods allow passing a blob value, which is converted to a file in the process.
HTMLFormControlsCollection.namedItem() - Web APIs
the html
formcontrolscollection.nameditem() method returns the radionodelist or the element in the collection whose name or id match the specified name, or null if no node matches.
... example html <
form> <input id="my-
form-control" type="textarea"> </
form> javascript // returns the htmlinputelement representing #my-
form-control elem1 = document.
forms[0]['my-
form-control']; specifications specification status comment html living standardthe definition of 'html
formcontrolscollection.nameditem()' in that specification.
... living standard html5the definition of 'html
formcontrolscollection' in that specification.
... recommendation in this snapshot of html living standard, the html
formcontrolscollections is defined for the first time.
HTMLFormElement.reset() - Web APIs
the html
formelement.reset() method restores a
form element's default values.
... this method does the same thing as clicking the
form's reset button.
... if a
form control (such as a reset button) has a name or id of reset it will mask the
form's reset method.
... syntax html
formelement.reset() example document.getelementbyid('my
form').reset(); specifications specification status comment html living standardthe definition of 'html
formelement: reset' in that specification.
HTMLFormElement: reset event - Web APIs
the reset event fires when a <
form> is reset.
... bubbles yes (although specified as a simple event that doesn't bubble) cancelable yes interface event event handler property globaleventhandlers.onreset examples this example uses eventtarget.addeventlistener() to listen for
form resets, and logs the current event.timestamp whenever that occurs.
... html <
form id="
form"> <label>test field: <input type="text"></label> <br><br> <button type="reset">reset
form</button> </
form> <p id="log"></p> javascript function logreset(event) { log.textcontent = `
form reset!
... time stamp: ${event.timestamp}`; } const
form = document.getelementbyid('
form'); const log = document.getelementbyid('log');
form.addeventlistener('reset', logreset); result specifications specification status comment html living standardthe definition of 'reset' in that specification.
HTMLSelectElement.form - Web APIs
the htmlselectelement.
form read-only property returns a html
formelement representing the
form that this element is associated with.
... if the element is not associated with of a <
form> element, then it returns null.
... syntax edit a
form = aselectelement.
form.selectname; example html <
form action="http://www.google.com/search" method="get"> <label>google: <input type="search" name="q"></label> <input type="submit" value="search..."> </
form> javascript a property available on all
form elements, "type" returns the type of the calling
form element.
...the below code gives all select elements in a particular
form a css class of "selectclass": <script type="text/javascript"> var
form_element = document.getelementbyid('subscribe_
form'); var vist =
form_element.style; if (vist.display=='' || vist.display=='none') { vist.display = 'block'; } else { vist.display = 'none'; } </script> specifications specification status comment html living standardthe definition of '
form' in that specification.
NetworkInformation.downlink - Web APIs
the downlink read-only property of the networkin
formation interface returns the effective bandwidth estimate in megabits per second, rounded to the nearest multiple of 25 kilobits per seconds.
... note that chrome-based browsers do not con
form to the specification, and arbitrarily cap the reported downlink at a maximum of 10 mbps as an anti-fingerprinting measure.
... syntax var downlink = networkin
formation.downlink value a double.
... specifications specification status comment network in
formation apithe definition of 'downlink' in that specification.
PerformanceNavigation.type - Web APIs
please use the per
formancenavigationtiming interface instead.
... the legacy per
formancenavigation.type read-only property returns an unsigned short containing a constant describing how the navigation to this page was done.
... possible values are: value constant name meaning 0 type_navigate the page was accessed by following a link, a bookmark, a
form submission, a script, or typing the url in the address bar.
... syntax type = per
formancenavigation.type; specifications specification status comment navigation timingthe definition of 'per
formancenavigation.type' in that specification.
PerformanceObserver.takeRecords() - Web APIs
the takerecords() method of the per
formanceobserver interface returns the current list of per
formance entries stored in the per
formance observer, emptying it out.
... syntax var per
formanceentry[] = per
formanceobserver.takerecords(); parameters none.
... return value a list of per
formanceentry objects.
... example var observer = new per
formanceobserver(function(list, obj) { var entries = list.getentries(); for (var i=0; i < entries.length; i++) { // process "mark" and "frame" events } }); observer.observe({entrytypes: ["mark", "frame"]}); var records = observer.takerecords(); console.log(records[0].name); console.log(records[0].starttime); console.log(records[0].duration); specifications specification status comment per
formance timeline level 2the definition of 'takerecords()' in that specification.
PerformanceResourceTiming.initiatorType - Web APIs
the initiatortype read-only property is a string that represents the type of resource that initiated the per
formance event.
... if the initiator is a per
formancenavigationtiming object, the property returns an empty string ("").
... syntax resource.initiatortype; return value a string representing the type of resource that initiated the per
formance event, as specified above.
... example function print_per
formanceentries() { // use getentriesbytype() to just get the "resource" events var p = per
formance.getentriesbytype("resource"); for (var i=0; i < p.length; i++) { print_initiatortype(p[i]); } } function print_initiatortype(perfentry) { // print this per
formance entry object's initiatortype value var value = "initiatortype" in perfentry; if (value) console.log("...
PerformanceTiming.connectEnd - Web APIs
please use the per
formancenavigationtiming interface instead.
... the legacy per
formancetiming.connectend read-only property returns an unsigned long long representing the moment, in miliseconds since the unix epoch, where the connection is opened network.
...if a persistent connection is used, the value will be the same as per
formancetiming.fetchstart.
... syntax time = per
formancetiming.connectend; specifications specification status comment navigation timingthe definition of 'per
formancetiming.connectend' in that specification.
PerformanceTiming.connectStart - Web APIs
please use the per
formancenavigationtiming interface instead.
... the legacy per
formancetiming.connectstart read-only property returns an unsigned long long representing the moment, in miliseconds since the unix epoch, where the request to open a connection is sent to the network.
...if a persistent connection is used, the value will be the same as per
formancetiming.fetchstart.
... syntax time = per
formancetiming.connectstart; specifications specification status comment navigation timingthe definition of 'per
formancetiming.connectstart' in that specification.
PerformanceTiming.domainLookupEnd - Web APIs
please use the per
formancenavigationtiming interface instead.
... the legacy per
formancetiming.domainlookupend read-only property returns an unsigned long long representing the moment, in miliseconds since the unix epoch, where the domain lookup is finished.
... if a persistent connection is used, or the in
formation is stored in a cache or a local resource, the value will be the same as per
formancetiming.fetchstart.
... syntax time = per
formancetiming.domainlookupend; specifications specification status comment navigation timingthe definition of 'per
formancetiming.domainlookupend' in that specification.
PerformanceTiming.domainLookupStart - Web APIs
please use the per
formancenavigationtiming interface instead.
... the legacy per
formancetiming.domainlookupstart read-only property returns an unsigned long long representing the moment, in miliseconds since the unix epoch, where the domain lookup starts.
... if a persistent connection is used, or the in
formation is stored in a cache or a local resource, the value will be the same as per
formancetiming.fetchstart.
... syntax time = per
formancetiming.domainlookupstart; specifications specification status comment navigation timingthe definition of 'per
formancetiming.domainlookupstart' in that specification.
PerformanceTiming.navigationStart - Web APIs
please use the per
formancenavigationtiming interface instead.
... the legacy per
formancetiming.navigationstart read-only property returns an unsigned long long representing the moment, in milliseconds since the unix epoch, right after the prompt for unload terminates on the previous document in the same browsing context.
... if there is no previous document, this value will be the same as per
formancetiming.fetchstart.
... syntax time = per
formancetiming.navigationstart; specifications specification status comment navigation timingthe definition of 'per
formancetiming.navigationstart' in that specification.
SVGAnimateTransformElement - Web APIs
the svganimatetrans
formelement interface corresponds to the <animatetrans
form> element.
...e="#d4dde4" stroke-width="2px" /><text x="386" y="94" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">svganimationelement</text></a><polyline points="291,89 281,84 281,94 291,89" stroke="#d4dde4" fill="none"/><line x1="281" y1="89" x2="251" y2="89" stroke="#d4dde4"/><a xlink:href="/docs/web/api/svganimatetrans
formelement" target="_top"><rect x="-9" y="65" width="260" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="121" y="94" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">svganimatetrans
formelement</text></a></svg></div> a:hover text { fill: #0095dd; pointer-events: all;} properties t...
... specifications specification status comment svg animations level 2the definition of 'svganimatetrans
formelement' in that specification.
... editor's draft no change scalable vector graphics (svg) 1.1 (second edition)the definition of 'svganimatetrans
formelement' in that specification.
SVGFontFaceFormatElement - Web APIs
the svgfontface
formatelement interface corresponds to the <font-face-
format> elements.
... object-oriented access to the attributes of the <font-face-
format> element via the svg dom is not possible.
... <div id="interfacediagram" style="display: inline-block; position: relative; width: 100%; padding-bottom: 23.333333333333332%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 140" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/svgfontface
formatelement" target="_top"><rect x="1" y="1" width="240" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="121" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">svgfontface
formatelement</text></a></svg></div> a:hover text { fill: #0095dd; pointer-events: all;} properties this interface has no properties but inherits properti...
... specifications specification status comment scalable vector graphics (svg) 1.1 (second edition)the definition of 'svgfontface
formatelement' in that specification.
SVGTransformable - Web APIs
svg trans
formable interface interface svgtrans
formable contains properties and methods that apply to all elements which have attribute trans
form.
... interface overview also implement none methods none properties readonly svganimatedtrans
formlist trans
form normative document svg 1.1 (2nd edition) properties name type description trans
form svganimatedtrans
formlist corresponds to attribute trans
form on the given element.
... methods the svgtrans
formable interface do not provide any specific methods.
... desktopmobilechromeedgefirefoxinternet exploreroperasafariandroid webviewchrome for androidfirefox for androidopera for androidsafari on iossamsung internetsvgtrans
formablechrome ?
WebGL2RenderingContext.beginTransformFeedback() - Web APIs
the webgl2renderingcontext.begintrans
formfeedback() method of the webgl 2 api starts a trans
form feedback operation.
... syntax void gl.begintrans
formfeedback(primitivemode); parameters primitivemode a glenum specifying the output type of the primitives that will be recorded into the buffer objects that are bound for trans
form feedback.
... examples var trans
formfeedback = gl.createtrans
formfeedback(); gl.bindtrans
formfeedback(gl.trans
form_feedback, trans
formfeedback); gl.begintrans
formfeedback(gl.triangles); gl.drawarrays(gl.triangles, 0, 3); specifications specification status comment webgl 2.0the definition of 'begintrans
formfeedback' in that specification.
... opengl es 3.0the definition of 'glbegintrans
formfeedback' in that specification.
WebGL2RenderingContext.endTransformFeedback() - Web APIs
the webgl2renderingcontext.endtrans
formfeedback() method of the webgl 2 api ends a trans
form feedback operation.
... syntax void gl.endtrans
formfeedback(); parameters none.
... examples var trans
formfeedback = gl.createtrans
formfeedback(); gl.bindtrans
formfeedback(gl.trans
form_feedback, trans
formfeedback); gl.begintrans
formfeedback(gl.triangles); gl.drawarrays(gl.triangles, 0, 3); gl.endtrans
formfeedback(); specifications specification status comment webgl 2.0the definition of 'endtrans
formfeedback' in that specification.
... opengl es 3.0the definition of 'glendtrans
formfeedback' in that specification.
WebGL2RenderingContext.transformFeedbackVaryings() - Web APIs
the webgl2renderingcontext.trans
formfeedbackvaryings() method of the webgl 2 api specifies values to record in webgltrans
formfeedback buffers.
... syntax void gl.trans
formfeedbackvaryings(program, varyings, buffermode); parameters program a webglprogram.
... examples var trans
formfeedback = gl.createtrans
formfeedback(); gl.bindtrans
formfeedback(gl.trans
form_feedback, trans
formfeedback); var trans
formfeedbackoutputs = ['gl_position', 'anotheroutput']; gl.trans
formfeedbackvaryings(shaderprog, trans
formfeedbackoutputs, gl.interleaved_attribs); gl.linkprogram(shaderprog); specifications specification status comment webgl 2.0the definition of 'trans
formfeedbackvaryings' in that specification.
... opengl es 3.0the definition of 'gltrans
formfeedbackvaryings' in that specification.
Window.performance - Web APIs
the window interface's per
formance property returns a per
formance object, which can be used to gather per
formance in
formation about the current document.
... it serves as the point of exposure for the per
formance timeline api, the high resolution time api, the navigation timing api, the user timing api, and the resource timing api.
... syntax per
formancedata = window.per
formance; value a per
formance object offering access to the per
formance and timing-related in
formation offered by the apis it exposes.
... specifications specification status comment high resolution timethe definition of 'window.per
formance' in that specification.
XRReferenceSpaceEventInit.transform - Web APIs
the xrreferencespaceeventinit property trans
form indicates the position and orientation of the affected reference space's native origin after the changes the event represents are applied.
... the trans
form is defined using the old coordinate system, which allows it to be used to convert coordinates from the pre-event coordinate system to the post-event coordiante system.
... syntax let eventinitdict = { referencespace: xrreferencespace, trans
form: xrrigidtrans
form }); value an xrrigidtrans
form object providing a trans
form that can be used to convert coordinates from the pre-event coordinate system to the post-event coordinate system.
... let refspaceevent = new xrreferencespaceevent("reset", { referencespace: myrefspace, trans
form: mytrans
form }); specifications specification status comment webxr device apithe definition of 'xrreferencespaceeventinit.trans
form' in that specification.
XRRigidTransform.orientation - Web APIs
the read-only xrrigidtrans
form property orientation is a dompointreadonly containing a normalized quaternion (also called a unit quaternion or versor) specifying the rotational component of the trans
form represented by the object.
... syntax let orientation = xrrigidtrans
form.orientation; value a dompointreadonly object which contains a unit quaternion providing the orientation component of the trans
form.
... examples to create a reference space which is oriented to look straight up, positioned 2 meters off of ground level: xrreferencespace = refspace.getoffsetreferencespace( new xrrigidtrans
form({y: -2}, {x: 0.0, y: 1.0, z: 0.0, w: 1.0}); ); the unit quaternion specified here is [0.0, 1.0, 0.0, 1.0] to indicate that the object should be facing directly along the y axis.
... specifications specification status comment webxr device apithe definition of 'xrrigidtrans
form.orientation' in that specification.
XRRigidTransform.position - Web APIs
the read-only xrrigidtrans
form property position is a dompointreadonly object which provides the 3d point, specified in meters, describing the translation component of the trans
form.
... syntax let pos = xrrigidtrans
form.position; value a read-only dompointreadonly indicating the 3d position component of the trans
form matrix.
...efspacecreated(refspace); }).catch(() => { session.requestreferencespace("local-floor").then(refspacecreated); }); } else { session.requestreferencespace("viewer").then(refspacecreated); } } function refspacecreated(refspace) { if (immersivesession) { xrreferencespace = refspace; } else { xrreferencespace = refspace.getoffsetreferencespace( new xrrigidtrans
form({y: -1.5}); ); } xrsession.requestanimationframe(onframe); } after setting up the graphics context for webxr use, this begins by looking to see if a variable immersivesession is true; if so, we first request a bounded-floor reference space.
... specifications specification status comment webxr device apithe definition of 'xrrigidtrans
form.position' in that specification.
CSS Transforms - CSS: Cascading Style Sheets
css trans
forms is a module of css that defines how elements styled with css can be trans
formed in two-dimensional or three-dimensional space.
... reference properties backface-visibility perspective perspective-origin rotate scale trans
form trans
form-box trans
form-origin trans
form-style translate data types <trans
form-function> guides using css trans
forms step-by-step tutorial about how to trans
form elements styled with css.
... specifications specification status comment css trans
forms level 1 working draft initial definition.
... css trans
forms level 2 editor's draft adds individual trans
forms.
Inline formatting context - CSS: Cascading Style Sheets
this article explains the inline
formatting context core concepts the inline
formatting context is part of the visual rendering of a web page.
... in the example below, the two (<div>) elements with the black borders
form a block
formatting context, inside which each word participates in an inline
formatting context.
... boxes
forming a line are contained by a rectangular area called a line box.
...if there is a float within the same block
formatting context however, the float will cause the line boxes that wrap the float to become shorter.
Using device orientation with 3D transforms - Developer guides
this article provides tips on how to use device orientation in
formation in tandem with css 3d trans
forms.
... using orientation to rotate an element the easiest way to convert orientation data to a 3d trans
form is basically to use the alpha, gamma, and beta values as rotatez, rotatex and rotatey values.
...here's a simple code snippet to sum it up: var elem = document.getelementbyid("view3d"); window.addeventlistener("deviceorientation", function(e) { // remember to use vendor-prefixed trans
form property elem.style.trans
form = "rotatez(" + ( e.alpha - 180 ) + "deg) " + "rotatex(" + e.beta + "deg) " + "rotatey(" + ( -e.gamma ) + "deg)"; }); orientation compensation compensating the orientation of the device can be useful to create parallax effects or augmented reality.
... this is achieved by inverting the previous order of rotations and negating the alpha value: var elem = document.getelementbyid("view3d"); window.addeventlistener("deviceorientation", function(e) { // again, use vendor-prefixed trans
form property elem.style.trans
form = "rotatey(" + ( -e.gamma ) + "deg)" + "rotatex(" + e.beta + "deg) " + "rotatez(" + - ( e.alpha - 180 ) + "deg) "; }); rotate3d to orientation should you ever need to convert a rotate3d axis-angle to orientation euler angles, you can use the following algorithm: // convert a rotate3d axis-angle to deviceorientation angles function orient( aa ) { var x = aa.x, y = aa.y, z = aa.z, a = aa.a, c = math.cos( aa.a ), s = math.sin( aa.a ), t = 1 - c, // axis-angle to rotation matri...
Optimization and performance - Developer guides
when building modern web apps and sites, it's important to make your content per
form well.
... there are several tools available to check the per
formance of a website or blog.
... google pagespeed insights lighthouse webpagetest browser developer tools the above resources also include web per
formance best practices.
... making web per
formance a priority by considering web per
formance throughout the development process is important in ensuring users get the best user experience possible.
x-ms-format-detection - HTML: Hypertext Markup Language
the x-ms-
format-detection attribute determines whether data
formats within the element’s text, like phone numbers, are automatically converted to followable links.
... links created through
format detection do not appear in the dom.
... syntax <html x-ms-
format-detection="none"> value all all supported data
formats are detected.
... none
format detection is turned off.
URIError: malformed URI sequence - JavaScript
the javascript exception "mal
formed uri sequence" occurs when uri encoding or decoding wasn't successful.
... message urierror: the uri to be encoded contains invalid character (edge) urierror: mal
formed uri sequence (firefox) urierror: uri mal
formed (chrome) error type urierror what went wrong?
...an urierror will be thrown if there is an attempt to encode a surrogate which is not part of a high-low pair, for example: encodeuri('\ud800'); // "urierror: mal
formed uri sequence" encodeuri('\udfff'); // "urierror: mal
formed uri sequence" a high-low pair is ok.
...if there isn't such a character, an error will be thrown: decodeuricomponent('%e0%a4%a'); // "urierror: mal
formed uri sequence" with proper input, this should usually look like something like this: decodeuricomponent('javascript_%d1%88%d0%b5%d0%bb%d0%bb%d1%8b'); // "javascript_шеллы" ...
SyntaxError: missing formal parameter - JavaScript
the javascript exception "missing
formal parameter" occurs when your function declaration is missing valid parameters.
... message syntaxerror: missing
formal parameter (firefox) error type syntaxerror what went wrong?
... "
formal parameter" is a fancy way of saying "function parameter".
...all these function declarations fail, as they are providing values for their parameters: function square(3) { return number * number; }; // syntaxerror: missing
formal parameter function greet("howdy") { return greeting; }; // syntaxerror: missing
formal parameter function log({ obj: "value"}) { console.log(arg) }; // syntaxerror: missing
formal parameter you will need to use identifiers in function declarations: function square(number) { return number * number; }; function greet(greeting) { return greeting; }; function log(arg) { console.log...
Intl.NumberFormat.prototype.resolvedOptions() - JavaScript
the intl.number
format.prototype.resolvedoptions() method returns a new object with properties reflecting the locale and number
formatting options computed during initialization of this number
format object.
... syntax number
format.resolvedoptions() return value a new object with properties reflecting the locale and number
formatting options computed during the initialization of the given number
format object.
... examples using the resolvedoptions method var de = new intl.number
format('de-de'); var usedoptions = de.resolvedoptions(); usedoptions.locale; // "de-de" usedoptions.numberingsystem; // "latn" usedoptions.notation; // "standard" usedoptions.signdisplay; // "auto" usedoption.style; // "decimal" usedoptions.minimumintegerdigits; // 1 usedoptions.minimumfractiondigits; // 0 usedoptions.maximumfractiondigits...
...; // 3 usedoptions.usegrouping; // true specifications specification ecmascript internationalization api (ecma-402)the definition of 'intl.number
format.prototype.resolvedoptions' in that specification.
Intl.RelativeTimeFormat.prototype.resolvedOptions() - JavaScript
the intl.relativetime
format.prototype.resolvedoptions() method returns a new object with properties reflecting the locale and relative time
formatting options computed during initialization of this relativetime
format object.
... syntax relativetime
format.resolvedoptions() return value a new object with properties reflecting the locale and number
formatting options computed during the initialization of the given relativetime
format object.
... numeric the
format of output message.
... examples using the resolvedoptions method var de = new intl.relativetime
format('de-de'); var usedoptions = de.resolvedoptions(); usedoptions.locale; // "de-de" usedoptions.style; // "long" usedoptions.numeric; // "always" usedoptions.numberingsystem; // "latn" specifications specification status comment ecmascript internationalization api (ecma-402)the definition of 'relativetime
format.resolvedoptions()' in that specification.
Using dns-prefetch - Web Performance
for websites that open connections to many third parties, this latency can significantly reduce loading per
formance.
...while dns-prefetch only per
forms a dns lookup, preconnect establishes a connection to a server.
... this process includes dns resolution, as well as establishing the tcp connection, and per
forming the tls handshake—if a site is served over https.
...if you omit it, the browser will only per
form the dns lookup.
format - SVG: Scalable Vector Graphics
the
format attribute indicates the
format of the given font.
... two elements are using this attribute: <altglyph> and <glyphref> context notes value <string> default value none animatable no <string> this value specifies the
format of the given font.
... here is a list of font
formats and their strings that can be used as values for this attribute:
format string
format truedoc-pfr truedoc™ portable font resource embedded-opentype embedded opentype type-1 postscript™ type 1 truetype truetype opentype opentype, including truetype open truetype-gx truetype with gx extensions speedo speedo intellifont intellifont specifications specification status comment scalable vector graphics (svg) 1.1 (second edition)the definition of '
format for <glyphref>' in that specification.
... recommendation initial definition for <glyphref> scalable vector graphics (svg) 1.1 (second edition)the definition of '
format for <altglyph>' in that specification.
performInstall - Archive of obsolete content
summary per
forms the actual installation of the software.
... method of install syntax int per
forminstall(); parameters none.
...err = getlasterror(); if (!err) per
forminstall(); else cancelinstall(err); ...
Getting File Information - Archive of obsolete content
file and stream guide: [ nsiscriptableio | accessing files | getting file in
formation | reading from files | writing to files | moving, copying and deleting files | uploading and downloading files | working with directories ] important note: the pages from the file and stream guide use the io object (nsiscriptableio), which was not available in any released version of the plat
form (pending some fixes).
... the nsifile object has a number of useful attributes which may be used to retrieve in
formation about a file.
... some of the permissions may not be supported on some plat
forms.
Why Well-Formed Web RSS Module is Popular - Syndicating Your Comments - Archive of obsolete content
the rss well-
formed web module exists to fill this gap.
... an example using the most popular element of the well-
formed web rss module is shown below: <?xml version="1.0"> <rss version="2.0" xmlns:wfw="http://well
formedweb.org/commentapi/" > <channel> <title>example</title> <description>an rss example with wfw</description> <lastbuilddate>sun, 15 may 2005 13:02:08 -0500</lastbuilddate> <link>http://www.example.com</link> <item> <title>i like root beer</title> <guid>d77d2e80-0487-4e8c-a35d-a93f12a0ff7d:article:54321</guid> <pubdate>sun, 15 may 2005 13:02:08 -0500</pubdate> <link>http://www.example.com/article/54321</link> <wfw:commentrss>http://www.example.com/feed/rss/54321/comments</wfw:commentrss> </item> <item> <title>rain is wet</title> <guid>d77d2e80-0487-4e8c-a35d-a93f12a0ff7d:article:54320</gui...
...ommentrss> </item> <item> <title>huh?!</title> <guid>d77d2e80-0487-4e8c-a35d-a93f12a0ff7d:article:54319</guid> <pubdate>sun, 15 may 2005 08:14:11 -0500</pubdate> <link>http://www.example.com/article/54319</link> <wfw:commentrss>http://www.example.com/feed/rss/54319/comments</wfw:commentrss> </item> </channel> </rss> the <wfw:commentrss> element is the reason that the well-
formed web rss module is popular.
XForms API Reference - Archive of obsolete content
this page is the beginning of the x
forms api reference.
... note the word beginning :-) naming convention the x
forms interfaces has the following naming convention: nsix
forms...element interfaces implemented by the c++ part of a control nsix
formsns...element interfaces extending x
forms specification interfaces nsix
forms...uielement interfaces implemented by the js part of a control nsix
forms...accessors interface exposing states about the bound instance node for a given control frozen interfaces nsix
formsmodelelement the model interface experimental interfaces nsix
formsdelegate the delegate interface for x
forms:custom_controls nsix
formsaccessors the accessors interface for x
forms:custom_controls nsix
formsnsmodelelement custom exten...
...sion(s) to the nsix
formsmodelelement interface nsix
formsnsinstanceelement custom extension(s) to the instance element ...
XForms Help Element - Archive of obsolete content
introduction specifies contextual help for the containing
form control (see the spec).
... the help message will be displayed if the f1 key is pressed while the containing
form control has focus or if the containing
form control recieves a x
forms-help event.
... attributes single-node binding linking src - url of a document whose contents will be retrieved by the help element and used to provide a help message for the containing
form control.
XForms Hint Element - Archive of obsolete content
the hint is displayed when the mouse moves and pauses over the containing
form control.
... the hint will also be displayed if the containing
form control recieves a x
forms-hint event.
... attributes single-node binding linking src - url of a document whose contents will be retrieved by the hint element and used to provide hint text for the containing
form control.
XForms Range Element - Archive of obsolete content
single-node binding special incremental - supported, default value is false start - lower bound of possible values end - upper bound of possible values step - is used for incrementing/decrementing values start/end/step attributes if the value of the bound instance node is outside the range of values specified by the start and end attributes, then the range element receives a x
forms-out-of-range event.
... if the bound value then becomes in range, the range element receives a x
forms-in-range event.
... representations the x
forms range element is represented by a slider widget (xhtml only).
XForms Select1 Element - Archive of obsolete content
attributes ui common appearance - the value of this attribute gives a hint to the x
forms processor as to which type of widget(s) to use to represent this control.
...the data binding restriction to simple content may be relaxed when an itemset element is used, which allows the available choices to be obtained from an x
forms model.
... representations the x
forms select1 element can be represented by the following widgets for the specified appearance attribute values: combobox - default representation (xhtml/xul) listbox - used when appearance = 'compact' (xhtml/xul) radio group - used when appearance = 'full' (xhtml/xul) combobox displaying a combobox is the default representation (xhtml/xul).
XForms Config Variables - Archive of obsolete content
a description of the about:config preferences that x
forms uses.
... preference default description x
forms.disablepopup false disables x
forms engine popup error messages x
forms.enableexperimentalfeatures false enable experimental features.
... for now it only enables the x
forms 1.1 soap action feature, and only on trunk.
Performance
this highlights some per
formance pitfalls related to frame scripts/message manager usage and alternative approaches to avoid them.
... per
formance best practices declaring stateless functions once per process bad: // addon.js services.mm.loadframescript("framescript.js", true) // framescript.js const precomputedconstants = // ...
... beam down in
formation in advance to avoid synchronous calls to the parent bad: // processscript.js function contentpolicy() { // ...
Firefox Operational Information Database: SQLite
a large amount of operational in
formation about websites visited and browser configuration is stored in relational databases in sqlite used by firefox.
... the sqlite manager add-on allows convenient browsing of this in
formation.
...e database you want to explore in the '(select profile database)' pulldown, click 'go', select one of the tables listed in the left column and see the current contents of the database in the 'browse & search' tab.) some databases are used by the browser itself, others are used by applications that you have installed or used; for example: content-prefs.sqlite cookies.sqlite download.sqlite
formhistory.sqlite persmissions.sqlite places.sqlite search.sqlite signons.sqlite webappstore.sqlite ...
Automated performance testing and sheriffing
we have several test harnesses that test firefox for various per
formance characteristics (page load time, startup time, etc.).
...currently we aggregate this in
formation in the perfherder web application where per
formance sheriffs watch for significant regressions, filing bugs as appropriate.
... current list of automated systems we are tracking (at least to some degree): talos: the main per
formance system, run on virtually every check-in to an integration branch build metrics: a grab bag of per
formance metrics generated by the build system arewefastyet: a generic javascript and web benchmarking system areweslimyet: a memory benchmarking tool ...
Using dynamic styling information - Web APIs
the css object model (cssom), part of the dom, exposes specific interfaces allowing manipulation of a wide amount of in
formation regarding css.
... initially defined in the dom level 2 style recommendation, these interfaces
forms now a specification, css object model (cssom) which aims at superseding it.
...see example 6: getcomputedstyle in the examples chapter for more in
formation on how to use this method.
FormData.delete() - Web APIs
the delete() method of the
formdata interface deletes a key and its value(s) from a
formdata object.
... syntax
formdata.delete(name); parameters name the name of the key you want to delete.
... example the following line creates an empty
formdata object and prepopulates it with key/value pairs from a
form: var
formdata = new
formdata(my
form); you can delete keys and their values using delete():
formdata.delete('username'); specifications specification status comment xmlhttprequestthe definition of 'delete()' in that specification.
FormData.entries() - Web APIs
the
formdata.entries() method returns an iterator allowing to go through all key/value pairs contained in this object.
... syntax
formdata.entries(); return value returns an iterator.
... example // create a test
formdata object var
formdata = new
formdata();
formdata.append('key1', 'value1');
formdata.append('key2', 'value2'); // display the key/value pairs for(var pair of
formdata.entries()) { console.log(pair[0]+ ', '+ pair[1]); } the result is: key1, value1 key2, value2 specifications specification status comment xmlhttprequestthe definition of 'entries() (as iterator<>)' in that specification.
FormData.has() - Web APIs
the has() method of the
formdata interface returns a boolean stating whether a
formdata object contains a certain key.
... syntax
formdata.has(name); parameters name a usvstring representing the name of the key you want to test for.
... example the following line creates an empty
formdata object: var
formdata = new
formdata(); the following snippet shows the results of testing for the existence of username in the
formdata object, before and after appending a username value to it with
formdata.append:
formdata.has('username'); // returns false
formdata.append('username', 'chris');
formdata.has('username'); // returns true specifications specification status comment xmlhttprequestthe definition of 'has()' in that specification.
FormData.keys() - Web APIs
the
formdata.keys() method returns an iterator allowing to go through all keys contained in this object.
... syntax
formdata.keys(); return value returns an iterator.
... example // create a test
formdata object var
formdata = new
formdata();
formdata.append('key1', 'value1');
formdata.append('key2', 'value2'); // display the keys for (var key of
formdata.keys()) { console.log(key); } the result is: key1 key2 specifications specification status comment xmlhttprequestthe definition of 'keys() (as iterator<>)' in that specification.
FormData.values() - Web APIs
the
formdata.values() method returns an iterator allowing to go through all values contained in this object.
... syntax
formdata.values(); return value returns an iterator.
... example // create a test
formdata object var
formdata = new
formdata();
formdata.append('key1', 'value1');
formdata.append('key2', 'value2'); // display the values for (var value of
formdata.values()) { console.log(value); } the result is: value1 value2 specifications specification status comment xmlhttprequestthe definition of 'values() (as iterator<>)' in that specification.
HTMLFormElement.action - Web APIs
the html
formelement.action property represents the action of the <
form> element.
... the action of a
form is the program that is executed on the server when the
form is submitted.
... syntax var string =
form.action;
form.action = string; example
form.action = '/cgi-bin/publish'; specifications specification status comment html living standardthe definition of 'html
formelement: action' in that specification.
HTMLFormElement.name - Web APIs
the html
formelement.name property represents the name of the current <
form> element as a string.
... if your <
form> element contains an element named name then that element overrides the
form.name property, so that you can't access it.
... syntax var string =
form.name;
form.name = string; example var
form1name = document.getelementbyid('
form1').name; if (
form1name != document.
form.
form1) { // browser doesn't support this
form of reference } specifications specification status comment html living standardthe definition of 'html
formelement: name' in that specification.
HTMLFormElement.reportValidity() - Web APIs
the html
formelement.reportvalidity() method returns true if the element's child controls satisfy their validation constraints.
... syntax html
formelement.reportvalidity() return value boolean example document.
forms['my
form'].addeventlistener('submit', function() { document.
forms['my
form'].reportvalidity(); }, false); specifications specification status comment html living standardthe definition of 'html
formelement.reportvalidity()' in that specification.
... living standard html 5.1the definition of 'html
formelement.reportvalidity()' in that specification.
HTMLObjectElement.form - Web APIs
the
form read-only property of the htmlobjectelement interface retuns a html
formelement representing the object element's
form owner, or null if there isn't one.
... syntax var html
formelement = htmlobjectelement.
form; value a html
formelement.
... specifications specification status comment html living standardthe definition of '
form' in that specification.
NetworkInformation.downlinkMax - Web APIs
the networkin
formation.downlinkmax read-only property returns the maximum downlink speed, in megabits per second (mbps), for the underlying connection technology.
... syntax var max = networkin
formation.downlinkmax return value an unrestricted double representing the maximum downlink speed, in megabits per second (mb/s), for the underlying connection technology.
...e; if ('downlinkmax' in navigator.connection) { downlinkmax = navigator.connection.downlinkmax; } } console.log('current connection type: ' + connectiontype + ' (downlink max: ' + downlinkmax + ')'); } logconnectiontype(); navigator.connection.addeventlistener('change', logconnectiontype); specifications specification status comment network in
formation apithe definition of 'downlinkmax' in that specification.
NetworkInformation.effectiveType - Web APIs
the effectivetype read-only property of the networkin
formation interface returns the effective type of the connection meaning one of 'slow-2g', '2g', '3g', or '4g'.
... syntax var effectivetype = networkin
formation.effectivetype value a string containing one of 'slow-2g', '2g', '3g', or '4g'.
... specifications specification status comment network in
formation apithe definition of 'effectivetype' in that specification.
NetworkInformation.rtt - Web APIs
the networkin
formation.rtt read-only property returns the estimated effective round-trip time of the current connection, rounded to the nearest multiple of 25 milliseconds.
... syntax rtt = networkin
formation.rtt return value a number.
... specifications specification status comment network in
formation apithe definition of 'rtt' in that specification.
Performance.onresourcetimingbufferfull - Web APIs
this event is fired when the browser's resource timing per
formance buffer is full.
... syntax callback = per
formance.onresourcetimingbufferfull = buffer_full_cb; return value callback an eventhandler that is invoked when the resourcetimingbufferfull event is fired.
... function buffer_full(event) { console.log("warning: resource timing buffer is full!"); per
formance.setresourcetimingbuffersize(200); } function init() { // set a callback if the resource buffer becomes filled per
formance.onresourcetimingbufferfull = buffer_full; } <body onload="init()"> specifications specification status comment resource timing level 1the definition of 'onresourcetimingbufferfull' in that specification.
Performance.timing - Web APIs
please use the per
formancenavigationtiming interface instead.
... the legacy per
formance.timing read-only property returns a per
formancetiming object containing latency-related per
formance in
formation.
... syntax timinginfo = per
formance.timing; specifications specification status comment navigation timing level 2 working draft initial definition.
performance.toJSON() - Web APIs
the tojson() method of the per
formance interface is a standard serializer: it returns a json representation of the per
formance object's properties.
... syntax myperf = per
formance.tojson() arguments none return value myperf a json object that is the serialization of the per
formance object.
... example var js; js = window.per
formance.tojson(); console.log("json = " + json.stringify(js)); specifications specification status comment high resolution time level 2the definition of 'tojson() serializer' in that specification.
PerformanceNavigation.redirectCount - Web APIs
please use the per
formancenavigationtiming interface instead.
... the legacy per
formancenavigation.redirectcount read-only property returns an unsigned short representing the number of redirects done before reaching the page.
... syntax amount = per
formancenavigation.redirectcount; specifications specification status comment navigation timingthe definition of 'per
formancenavigation.redirectcount' in that specification.
PerformanceNavigationTiming.toJSON() - Web APIs
the tojson() method is a serializer - it returns a json representation of the per
formancenavigationtiming object.
... syntax json = resourceperfentry.tojson(); arguments none return value json a json object that is the serialization of the per
formancenavigationtiming object as a map with entries from the closest inherited interface and with entries for each of the serializable attributes.
... example // get a resource per
formance entry var perfentries = per
formance.getentriesbytype("navigation"); var entry = perfentries[0]; // get the json and log it var json = entry.tojson(); var s = json.stringify(json); console.log("per
formancenavigationtiming.tojson() = " + s); specifications specification status comment navigation timing level 2the definition of 'tojson()' in that specification.
PeformanceObserver.disconnect() - Web APIs
the disconnect() method of the per
formanceobserver interface is used to stop the per
formance observer from receiving any per
formance entry events.
... syntax per
formanceobserver.disconnect(); example var observer = new per
formanceobserver(function(list, obj) { var entries = list.getentries(); for (var i=0; i < entries.length; i++) { // process "mark" and "frame" events } }); observer.observe({entrytypes: ["mark", "frame"]}); function perf_observer(list, observer) { // process the "measure" event // ...
... // disable additional per
formance events observer.disconnect(); } var observer2 = new per
formanceobserver(perf_observer); observer2.observe({entrytypes: ["measure"]}); specifications specification status comment per
formance timeline level 2the definition of 'disconnect()' in that specification.
PerformanceResourceTiming.toJSON() - Web APIs
the tojson() method is a serializer that returns a json representation of the per
formanceresourcetiming object.
... syntax json = resourceperfentry.tojson(); arguments none return value json a json object that is the serialization of the per
formanceresourcetiming object as a map with entries from the closest inherited interface and with entries for each of the serializable attributes.
... example // get a resource per
formance entry var perfentries = per
formance.getentriesbytype("resource"); var entry = perfentries[0]; // get the json and log it var json = entry.tojson(); var s = json.stringify(json); console.log("per
formanceentry.tojson = " + s); specifications specification status comment resource timing level 2the definition of 'tojson' in that specification.
PerformanceTiming.domComplete - Web APIs
please use the per
formancenavigationtiming interface instead.
... the legacy per
formancetiming.domcomplete read-only property returns an unsigned long long representing the moment, in miliseconds since the unix epoch, when the parser finished its work on the main document, that is when its document.readystate changes to 'complete' and the corresponding readystatechange event is thrown.
... syntax time = per
formancetiming.domcomplete; specifications specification status comment navigation timingthe definition of 'per
formancetiming.domcomplete' in that specification.
PerformanceTiming.domContentLoadedEventEnd - Web APIs
please use the per
formancenavigationtiming interface instead.
... the legacy per
formancetiming.domcontentloadedeventend read-only property returns an unsigned long long representing the moment, in milliseconds since the unix epoch, right after all the scripts that need to be executed as soon as possible, in order or not, has been executed.
... syntax time = per
formancetiming.domcontentloadedeventend; specifications specification status comment navigation timingthe definition of 'per
formancetiming.domcontentloadedeventend' in that specification.
PerformanceTiming.domContentLoadedEventStart - Web APIs
please use the per
formancenavigationtiming interface instead.
... the legacy per
formancetiming.domcontentloadedeventstart read-only property returns an unsigned long long representing the moment, in miliseconds since the unix epoch, right before the parser sent the domcontentloaded event, that is right after all the scripts that need to be executed right after parsing has been executed.
... syntax time = per
formancetiming.domcontentloadedeventstart; specifications specification status comment navigation timingthe definition of 'per
formancetiming.domcontentloadedeventstart' in that specification.
PerformanceTiming.domInteractive - Web APIs
please use the per
formancenavigationtiming interface instead.
... the legacy per
formancetiming.dominteractive read-only property returns an unsigned long long representing the moment, in miliseconds since the unix epoch, when the parser finished its work on the main document, that is when its document.readystate changes to 'interactive' and the corresponding readystatechange event is thrown.
... syntax time = per
formancetiming.dominteractive; specifications specification status comment navigation timingthe definition of 'per
formancetiming.dominteractive' in that specification.
PerformanceTiming.domLoading - Web APIs
please use the per
formancenavigationtiming interface instead.
... the legacy per
formancetiming.domloading read-only property returns an unsigned long long representing the moment, in miliseconds since the unix epoch, when the parser started its work, that is when its document.readystate changes to 'loading' and the corresponding readystatechange event is thrown.
... syntax time = per
formancetiming.domloading; specifications specification status comment navigation timingthe definition of 'per
formancetiming.domloading' in that specification.
PerformanceTiming.fetchStart - Web APIs
please use the per
formancenavigationtiming interface instead.
... the legacy per
formancetiming.fetchstart read-only property returns an unsigned long long representing the moment, in miliseconds since the unix epoch, the browser is ready to fetch the document using an http request.
... syntax time = per
formance.timing.fetchstart; specifications specification status comment navigation timingthe definition of 'per
formancetiming.fetchstart' in that specification.
PerformanceTiming.loadEventEnd - Web APIs
please use the per
formancenavigationtiming interface's per
formancenavigationtiming.loadeventend read-only property instead.
... the legacy per
formancetiming.loadeventend read-only property returns an unsigned long long representing the moment, in miliseconds since the unix epoch, when the load event handler terminated, that is when the load event is completed.
... syntax time = per
formancetiming.loadeventend; specifications specification status comment navigation timingthe definition of 'per
formancetiming.loadeventend' in that specification.
PerformanceTiming.loadEventStart - Web APIs
please use the per
formancenavigationtiming interface's per
formancenavigationtiming.loadeventstart read-only property instead..
... the legacy per
formancetiming.loadeventstart read-only property returns an unsigned long long representing the moment, in miliseconds since the unix epoch, when the load event was sent for the current document.
... syntax time = per
formancetiming.loadeventstart; specifications specification status comment navigation timingthe definition of 'per
formancetiming.loadeventstart' in that specification.
PerformanceTiming.redirectEnd - Web APIs
please use the per
formancenavigationtiming interface instead.
... the legacy per
formancetiming.redirectend read-only property returns an unsigned long long representing the moment, in miliseconds since the unix epoch, the last http redirect is completed, that is when the last byte of the http response has been received.
... syntax time = per
formancetiming.redirectend; specifications specification status comment navigation timingthe definition of 'per
formancetiming.redirectend' in that specification.
PerformanceTiming.redirectStart - Web APIs
please use the per
formancenavigationtiming interface instead.
... the legacy per
formancetiming.redirectstart read-only property returns an unsigned long long representing the moment, in miliseconds since the unix epoch, the first http redirect starts.
... syntax time = per
formancetiming.redirectstart; specifications specification status comment navigation timingthe definition of 'per
formancetiming.redirectstart' in that specification.
PerformanceTiming.requestStart - Web APIs
please use the per
formancenavigationtiming interface instead.
... the legacy per
formancetiming.requeststart read-only property returns an unsigned long long representing the moment, in miliseconds since the unix epoch, when the browser sent the request to obtain the actual document, from the server or from a cache.
... syntax time = per
formancetiming.requeststart; specifications specification status comment navigation timingthe definition of 'per
formancetiming.requeststart' in that specification.
PerformanceTiming.responseEnd - Web APIs
please use the per
formancenavigationtiming interface instead.
... the legacy per
formancetiming.responseend read-only property returns an unsigned long long representing the moment, in miliseconds since the unix epoch, when the browser received the last byte of the response, or when the connection is closed if this happened first, from the server from a cache or from a local resource.
... syntax time = per
formancetiming.responseend; specifications specification status comment navigation timingthe definition of 'per
formancetiming.responseend' in that specification.
PerformanceTiming.responseStart - Web APIs
please use the per
formancenavigationtiming interface instead.
... the legacy per
formancetiming.responsestart read-only property returns an unsigned long long representing the moment in time (in milliseconds since the unix epoch) when the browser received the first byte of the response from the server, cache, or local resource.
... syntax time = per
formancetiming.responsestart; specifications specification status comment navigation timingthe definition of 'per
formancetiming.responsestart' in that specification.
PerformanceTiming.secureConnectionStart - Web APIs
please use the per
formancenavigationtiming interface instead.
... the legacy per
formancetiming.secureconnectionstart read-only property returns an unsigned long long representing the moment, in miliseconds since the unix epoch, where the secure connection handshake starts.
... syntax time = per
formancetiming.secureconnectionstart; specifications specification status comment navigation timingthe definition of 'per
formancetiming.secureconnectionstart' in that specification.
PerformanceTiming.unloadEventEnd - Web APIs
please use the per
formancenavigationtiming interface instead.
... the legacy per
formancetiming.unloadeventend read-only property returns an unsigned long long representing the moment, in miliseconds since the unix epoch, the unload event handler finishes.
... syntax time = per
formancetiming.unloadeventend; specifications specification status comment navigation timingthe definition of 'per
formancetiming.unloadeventend' in that specification.
PerformanceTiming.unloadEventStart - Web APIs
please use the per
formancenavigationtiming interface instead.
... the legacy per
formancetiming.unloadeventstart read-only property returns an unsigned long long representing the moment, in miliseconds since the unix epoch, the unload event has been thrown.
... syntax time = per
formancetiming.unloadeventstart; specifications specification status comment navigation timingthe definition of 'per
formancetiming.unloadeventstart' in that specification.
WebGLShaderPrecisionFormat.precision - Web APIs
the read-only webglshaderprecision
format.precision property returns the number of bits of precision that can be represented.
... for integer
formats this value is always 0.
... examples var canvas = document.getelementbyid('canvas'); var gl = canvas.getcontext('webgl'); gl.getshaderprecision
format(gl.vertex_shader, gl.medium_float).precision; // 23 gl.getshaderprecision
format(gl.fragment_shader, gl.low_int).precision; // 0 specifications specification status comment webgl 1.0the definition of 'webglshaderprecision
format.precision' in that specification.
WebGLUniformLocation - Web APIs
the webgluni
formlocation interface is part of the webgl api and represents the location of a uni
form variable in a shader program.
... description the webgluni
formlocation object does not define any methods or properties of its own and its content is not directly accessible.
... when working with webgluni
formlocation objects, the following methods of the webglrenderingcontext are useful: webglrenderingcontext.getuni
formlocation() webglrenderingcontext.uni
form() examples getting an uni
form location var canvas = document.getelementbyid('canvas'); var gl = canvas.getcontext('webgl'); var location = gl.getuni
formlocation(webglprogram, 'uni
formname'); specifications specification status comment webgl 1.0the definition of 'webgluni
formlocation' in that specification.
XRPose.transform - Web APIs
the trans
form read-only attribute of the xrpose interface is a xrrigidtrans
form object providing the position and orientation of the pose relative to the base xrspace as specified when the pose was obtained by calling xrframe.getpose().
... syntax let posetrans
form = xrpose.trans
form; value an xrrigidtrans
form which provides the position and orientation of the xrpose relative to the xrframe to which this xrpose is aligned.
... xrsession.addeventlistener("select", event => { let source = event.inputsource; let frame = event.frame; let targetraypose = frame.getpose(source.targetrayspace, myrefspace); let targetobject = findtargetusingray(targetray.trans
form.matrix); if (source.targetraymode == "tracked-pointer") { if (source.handedness == user.handedness) { targetobject.primaryaction(); } else { targetobject.offhandaction(); } } }); specifications specification status comment webxr device apithe definition of 'xrpose.trans
form' in that specification.
203 Non-Authoritative Information - HTTP
the http 203 non-authoritative in
formation response status indicates that the request was successful but the enclosed payload has been modified by a trans
forming proxy from that of the origin server's 200 (ok) response .
... the 203 response is similar to the value 214, meaning trans
formation applied, of the warning header code, which has the additional advantage of being applicable to responses with any status code.
... status 203 non-authoritative in
formation specifications specification title rfc 7231, section 6.3.4: 203 non-authoritative in
formation hypertext transfer protocol (http/1.1): semantics and content ...
SyntaxError: redeclaration of formal parameter "x" - JavaScript
the javascript exception "redeclaration of
formal parameter" occurs when the same variable name occurs as a function parameter and is then redeclared using a let assignment in a function body again.
... message syntaxerror: let/const redeclaration (edge) syntaxerror: redeclaration of
formal parameter "x" (firefox) syntaxerror: identifier "x" has already been declared (chrome) error type syntaxerror what went wrong?
... function f(arg) { let arg = 'foo'; } // syntaxerror: redeclaration of
formal parameter "arg" if you want to change the value of "arg" in the function body, you can do so, but you do not need to declare the same variable again.
Intl.ListFormat.prototype.resolvedOptions() - JavaScript
the intl.list
format.prototype.resolvedoptions() method returns a new object with properties reflecting the locale and style
formatting options computed during the construction of the current list
format object.
... syntax list
format.resolvedoptions() return value an object with properties reflecting the locale and
formatting options computed during the construction of the given list
format object.
... examples using resolvedoptions const delist
formatter = new intl.list
format("de-de", { style: "short" }); const usedoptions = de.resolvedoptions(); console.log(usedoptions.locale); // "de-de" console.log(usedoptions.style); // "short" console.log(usedoptions.type); // "conjunction" (the default value) specifications specification intl.list
formatthe definition of 'resolvedoptions()' in that specification.
MathML: Deriving the Quadratic Formula - MathML
this page outlines the derivation of the quadratic
formula.
... we take a quadratic equation in its general
form, and solve for x: a x 2 + b x + c = 0 a x 2 + b x = - c x 2 + b a x = -c a divide out leading coefficient.
... ( x + b 2 a ) 2 = b 2 - 4 a c 4 a 2 x + b 2 a = b 2 - 4 a c 4 a 2 x = -b 2 a ±{c} b 2 - 4 a c 4 a 2 there's the vertex
formula.
<font-face-format> - SVG: Scalable Vector Graphics
the <font-face-
format> svg element describes the type of font referenced by its parent <font-face-uri>.
... usage context categoriesfont elementpermitted contentempty attributes global attributes core attributes specific attributes string dom interface this element implements the svgfontface
formatelement interface.
... specifications specification status comment scalable vector graphics (svg) 1.1 (second edition)the definition of '<font-face-
format>' in that specification.
<xsl:stylesheet> - XSLT: Extensible Stylesheet Language Transformations
xslt/xpath reference: xslt elements, exslt functions, xpath functions, xpath axes the <xsl:stylesheet> element (or the equivalent <xsl:trans
form> element) is the outermost element of a stylesheet.
...typically this is xmlns:xsl="http://www.w3.org/1999/xsl/trans
form".
... syntax <xsl:stylesheet version="number" xmlns:xsl="http://www.w3.org/1999/xsl/trans
form" id="name" extension-element-prefixes="list-of-names" exclude-result-prefixes="list-of-names"> entire stylesheet </xsl:stylesheet> required attributes version specifies the version of xslt required by this stylesheet.
XSLT elements reference - XSLT: Extensible Stylesheet Language Transformations
a top-level element must appear as the child of either <xsl:stylesheet> or <xsl:trans
form>.
...<xsl:apply-imports><xsl:apply-templates><xsl:attribute-set><xsl:attribute><xsl:call-template><xsl:choose><xsl:comment><xsl:copy-of><xsl:copy><xsl:decimal-
format><xsl:element><xsl:fallback><xsl:for-each><xsl:if><xsl:import><xsl:include><xsl:key><xsl:message><xsl:namespace-alias><xsl:number><xsl:otherwise><xsl:output><xsl:param><xsl:preserve-space><xsl:processing-instruction><xsl:sort><xsl:strip-space><xsl:stylesheet><xsl:template><xsl:text><xsl:trans
form><xsl:value-of><xsl:variable><xsl:when><xsl:with-param> <xsl:apply-imports> <xsl:apply-templates>...
... <xsl:attribute> <xsl:attribute-set> <xsl:call-template> <xsl:choose> <xsl:comment> <xsl:copy> <xsl:copy-of> <xsl:decimal-
format> <xsl:element> <xsl:fallback> (not supported) <xsl:for-each> <xsl:if> <xsl:import> (mostly supported) <xsl:include> <xsl:key> <xsl:message> <xsl:namespace-alias> (not supported) <xsl:number> (partially supported) <xsl:otherwise> <xsl:output> (partially supported) <xsl:param> <xsl:preserve-space> <xsl:processing-instruction> <xsl:sort> <xsl:strip-space> <xsl:stylesheet> (partially supported) <xsl:template> <xsl:text> (partially supported) <xsl:trans
form> <xsl:value-of> (partially supported) <xsl:variable> <xsl:when> <xsl:with-param> ...
Advanced Example - XSLT: Extensible Stylesheet Language Transformations
once the trans
formation is complete, the result is appended to the document, as shown in this example.
...tnode(mynode, true); // after cloning, we append xmlref.appendchild(clonednode); // set the sorting parameter in the xsl file var sortval = xsltprocessor.getparameter(null, "myorder"); if (sortval == "" || sortval == "descending") xsltprocessor.setparameter(null, "myorder", "ascending"); else xsltprocessor.setparameter(null, "myorder", "descending"); // initiate the trans
formation var fragment = xsltprocessor.trans
formtofragment(xmlref, document); // clear the contents document.getelementbyid("example").innerhtml = ""; mydom = fragment; // add the new content from the trans
formation document.getelementbyid("example").appendchild(fragment) } // xsl stylesheet: <?xml version="1.0" encoding="utf-8"?> <xsl:stylesheet version="1.0" xmlns="http://www.w3.org/...
...1999/xhtml" xmlns:html="http://www.w3.org/1999/xhtml" xmlns:xsl="http://www.w3.org/1999/xsl/trans
form"> <xsl:output method="html" indent="yes" /> <xsl:param name="myorder" /> <xsl:template match="/"> <xsl:apply-templates select="/div//div"> <xsl:sort select="." data-type="number" order="{$myorder}" /> </xsl:apply-templates> </xsl:template> <xsl:template match="div"> <xsl:copy-of select="." /> </xsl:template> </xsl:stylesheet> ...
getFormattedString - Archive of obsolete content
« xul reference home get
formattedstring( key, strarray ) return type: string looks up the
format string for the given key name in the string bundle and returns a
formatted copy where each occurrence of %s (uppercase) is replaced by each successive element in the supplied array.
... alternatively, numbered indices of the
format %n$s (e.g.
mozilla.dev.platform FAQ - Archive of obsolete content
faq for questions asked on mozilla.dev.plat
form xulrunner q: xulrunner on mac os x a: instead of using /path/to/xulrunner-bin.ini, applications on a mac must be in an application bundle (foo.app).
...0x00016b50 in xre_createappdata () a: when you <tt>--disable-libxul</tt>, the xpcom glue doesn't have in
formation about how to load all the dependent libraries like <tt>libgfx.dylib</tt>.
mozilla-dev-platform - Archive of obsolete content
about newsgroup summary for mozilla.dev.plat
form (google groups link) is for people working on the mozilla application framework ("mozilla-the-plat
form").
... summaries 2006-09-29 (sept 22 - sept 29) 2006-10-06 (sept 30 - oct 6) 2006-10-13 (oct 7 - oct 13) 2006-10-20 (oct 14 - oct 20) 2006-10-27 (oct 21 - oct 27) 2006-11-03 (oct 28 - nov 3) 2006-11-10 (nov 4 - nov 10) 2006-11-17 (nov 11 - nov 17) 2006-18-24 (nov 18 - nov 24) 2006-12-01 (nov 25 - dec 1) faq faq for mozilla.dev.plat
form ...
XForms Custom Controls Examples - Archive of obsolete content
a full example showing a complete
form can be found on x
forms:custom_controls.
... output showing images <binding id="output-image" extends="chrome://x
forms/content/x
forms.xml#x
formswidget-base"> <content> <html:div> <html:img anonid="content"/> </html:div> </content> <implementation implements="nsix
formsuiwidget"> <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://x
forms/content/x
forms-xhtml.xml#x
formswidget-output"> <content> <children includes="label"/> <xhtml:div class="xf-value" anonid="content"></xhtml:div> <children/> </content> <implementation implements="nsix
formsuiwid...
XForms Group Element - Archive of obsolete content
introduction the group element is used as a container for defining a hierarchy of
form controls.
...core
form controls, groups, switches, repeats and host language content) within a non-relevant group are handled as non-relevant.
XForms Switch Module - Archive of obsolete content
introduction x
forms switch module define a switch construct that allows the creation of user interfaces where the user interface can be varied based on user actions and events.
...
form controls, groups, switches, repeats and host language elements) within a non-selected case are not rendered.
XForms Upload Element - Archive of obsolete content
the x
forms author can set the filter by using the mediatype attribute directly on the upload element or by placing a mediatype element (see the spec) as a direct child of the upload element.
... representations the x
forms upload element is represented by visually combining three widgets: a text field that shows the uri of the selected file, a button to open the file picker dialog which allows the user to select a file, and a button to clear the text field and the reference to the file from the bound node (xhtml only).
Information architecture - MDN Web Docs Glossary: Definitions of Web-related terms
in
formation architecture, as applied to web design and development, is the practice of organizing the in
formation / content / functionality of a web site so that it presents the best user experience it can, with in
formation and services being easily usable and findable.
... learn more general knowledge in
formation architecture on wikipedia ...
Web performance - MDN Web Docs Glossary: Definitions of Web-related terms
web per
formance is the objective time from when a request for content is made until the requested content is displayed in the user's browser, objective render times, and the subjective user experience of load time and runtime.
... learn more learn about web per
formance perceived per
formance ...
Accessibility Information for Core Gecko Developers
this document shows several interactive desktop-style widgets that are accessible by keyboards and assistive technologies, and outlines a plan being developed by ibm, mozilla, and the wai protocols and
formats working group (pfwg) to address the issue of dhtml accessibility.
... mozilla accessibility architecture this document explains how we implement the cross-plat
form accessibility layer in mozilla.
Information for users
please check the accessibility help topic for more in
formation.
... assistive technology compatibility this is a wiki page which users can edit to provide up to date in
formation on any issues related to compatibility with assistive technologies such as screen readers, screen magnifiers, voice input software and on screen keyboards.
Localization formats
o, which many localizers who are familiar with linux and other projects understand mozilla has a basic tool called main.lang checker, which can show any untranslated files to the localizer no need to compile to .mo file so a localizer can see his/her changes more quickly creating simple diffs .lang files will be cached which will reduce any slowness effect disadvantage to .lang no plural
forms no context for localizers unless you provide good comments no styling by localizers if it is needed may be slower because file is not compiled into binaries not used as a standard by any other localization project no tools to validate syntax, so a localizer may cause accidental errors that can cause breakage (level of breakage depends on level of error) cannot use po editor, which most loc...
...alizers know and love gettext (.po) gettext is a widely-used localization
format that uses .po files.
GPU performance
doing per
formance work with gpus is harder than with cpus because of the asynchronous and massively parallel architecture.
...intel graphics per
formance analyzers - haven't tried.
NSS Key Log Format
secrets follow the
format <label> <space> <clientrandom> <space> <secret> where: <label> describes the following secret.
... exporter_secret: the hex-encoded exporter secret (for tls 1.3, used for 1-rtt keys in older quic drafts) the rsa
form allows ciphersuites using rsa key-agreement to be logged and was the first
form supported by wireshark 1.6.0.
Performance Analysis - Firefox Developer Tools
the network monitor includes a per
formance analysis tool, to help show you how long the browser takes to download the different parts of your site.
... using the per
formance analysis tool to run the per
formance analysis tool click the stopwatch icon in the toolbar.
HTMLFormElement.acceptCharset - Web APIs
the html
formelement.acceptcharset property represents a list of the supported character encodings for the given <
form> element.
... syntax var string =
form.acceptcharset;
form.acceptcharset = string; example inputs = document.
forms['my
form'].acceptcharset; specifications specification status comment html living standardthe definition of 'html
formelement: acceptcharset' in that specification.
HTMLFormElement.method - Web APIs
the html
formelement.method property represents the http method used to submit the <
form>.
... syntax var string =
form.method;
form.method = string; example document.
forms['my
form'].method = 'post'; const
formelement = document.createelement("
form"); // create a
form document.body.appendchild(
formelement); console.log(
formelement.method); // 'get' specifications specification status comment html living standardthe definition of 'html
formelement: method' in that specification.
HTMLFormElement.target - Web APIs
the target property of the html
formelement interface represents the target of the
form's action (i.e., the frame in which to render its output).
... syntax string = html
formelement.target html
formelement.target = string example my
form.target = document.frames[1].name; specifications specification status comment html living standardthe definition of 'html
formelement: target' in that specification.
onMSVideoFormatChanged - Web APIs
onmsvideo
formatchanged is an event which occurs when the video
format changes.
... syntax value description event property object.onmsvideo
formatchanged = handler; attachevent method object.attachevent("onmsvideo
formatchanged", handler) addeventlistener method object.addeventlistener("", handler, usecapture) event handler parameters val[in], type=function see also htmlvideoelement microsoft api extensions ...
NetworkInformation.onchange - Web APIs
the networkin
formation.onchange event handler contains the code that is fired when connection in
formation changes, and the change is received by the networkin
formation object.
...} // register for event changes: navigator.connection.onchange = changehandler; // another way: navigator.connection.addeventlistener('change', changehandler); specifications specification status comment network in
formation apithe definition of 'onchange' in that specification.
NetworkInformation.saveData - Web APIs
the networkin
formation.savedata read-only property of the networkin
formation interface returns true if the user has set a reduced data usage option on the user agent.
... syntax var savedata = networkin
formation.savedata; value a boolean.
NetworkInformation.type - Web APIs
the networkin
formation.type read-only property returns the type of connection a device is using to communicate with the network.
... syntax var type = netinfo.type return value an enumerated value that is one of the following values: "bluetooth" "cellular" "ethernet" "none" "wifi" "wimax" "other" "unknown" specifications specification status comment network in
formation apithe definition of 'type' in that specification.
Performance.navigation - Web APIs
the legacy per
formance.navigation read-only property returns a per
formancenavigation object representing the type of navigation that occurs in the given browsing context, such as the number of redirections needed to fetch the resource.
... syntax navobject = per
formance.navigation; specifications specification status comment navigation timingthe definition of 'per
formance.navigation' in that specification.
Performance.timeOrigin - Web APIs
the timeorigin read-only property of the per
formance interface returns the high resolution timestamp of the start time of the per
formance measurement.
... syntax var timeorigin = per
formance.timeorigin value a high resolution timestamp.
PerformanceLongTaskTiming.attribution - Web APIs
the attribution readonly property of the per
formancelongtasktiming interface returns a sequence of taskattributiontiming instances.
... syntax var taskattributetiming = per
formancelongtasktiming.attribution; value a sequence of taskattributiontiming instances.
PerformanceNavigationTiming.type - Web APIs
the value must be one of the following: navigate navigation started by clicking a link, entering the url in the browser's address bar,
form submission, or initializing through a script operation other than reload and back_forward as listed below.
... function print_nav_timing_data() { // use getentriesbytype() to just get the "navigation" events var perfentries = per
formance.getentriesbytype("navigation"); for (var i=0; i < perfentries.length; i++) { console.log("= navigation entry[" + i + "]"); var p = perfentries[i]; // dom properties console.log("dom content loaded = " + (p.domcontentloadedeventend - p.domcontentloadedeventstart)); console.log("dom complete = " + p.domcomplete); console.log("dom interactive = " + p.interactive); ...
PerformanceResourceTiming.domainLookupEnd - Web APIs
if the user agent has the domain in
formation in cache, domainlookupstart and domainlookupend represent the times when the user agent starts and ends the domain data retrieval from the cache.
... function print_per
formanceentries() { // use getentriesbytype() to just get the "resource" events var p = per
formance.getentriesbytype("resource"); for (var i=0; i < p.length; i++) { print_start_and_end_properties(p[i]); } } function print_start_and_end_properties(perfentry) { // print timestamps of the *start and *end properties properties = ["connectstart", "connectend", "domainlookupstart", "domainlookupend", ...
PerformanceResourceTiming.encodedBodySize - Web APIs
function log_sizes(perfentry){ // check for support of the per
formanceentry.*size properties and print their values // if supported.
...); else console.log("decodedbodysize = not supported"); if ("encodedbodysize" in perfentry) console.log("encodedbodysize = " + perfentry.encodedbodysize); else console.log("encodedbodysize = not supported"); if ("transfersize" in perfentry) console.log("transfersize = " + perfentry.transfersize); else console.log("transfersize = not supported"); } function check_per
formanceentries() { // use getentriesbytype() to just get the "resource" events var p = per
formance.getentriesbytype("resource"); for (var i=0; i < p.length; i++) { log_sizes(p[i]); } } specifications specification status comment resource timing level 2the definition of 'encodedbodysize' in that specification.
PerformanceResourceTiming.transferSize - Web APIs
function log_sizes(perfentry){ // check for support of the per
formanceentry.*size properties and print their values // if supported.
...); else console.log("decodedbodysize = not supported"); if ("encodedbodysize" in perfentry) console.log("encodedbodysize = " + perfentry.encodedbodysize); else console.log("encodedbodysize = not supported"); if ("transfersize" in perfentry) console.log("transfersize = " + perfentry.transfersize); else console.log("transfersize = not supported"); } function check_per
formanceentries() { // use getentriesbytype() to just get the "resource" events var p = per
formance.getentriesbytype("resource"); for (var i=0; i < p.length; i++) { log_sizes(p[i]); } } specifications specification status comment resource timing level 2the definition of 'transfersize' in that specification.
PerformanceResourceTiming.workerStart - Web APIs
the workerstart read-only property of the per
formanceresourcetiming interface returns a domhighrestimestamp immediately before dispatching the fetchevent if a service worker thread is already running, or immediately before starting the service worker thread if it is not already running.
... function print_per
formanceentries() { // use getentriesbytype() to just get the "resource" events var p = per
formance.getentriesbytype("resource"); for (var i=0; i < p.length; i++) { print_start_and_end_properties(p[i]); } } function print_start_and_end_properties(perfentry) { // print timestamps of the per
formanceentry *start and *end properties properties = ["connectstart", "connectend", "domainlookupstart", "domainlookupend", ...
PerformanceServerTiming.toJSON - Web APIs
the tojson() method of the per
formanceservertiming interface returns a domstring that is the json representation of the per
formanceservertiming object.
... syntax var json = per
formanceservertiming.tojson() parameters none.
WebGLShaderPrecisionFormat.rangeMax - Web APIs
the read-only webglshaderprecision
format.rangemax property returns the base 2 log of the absolute value of the maximum value that can be represented.
... examples var canvas = document.getelementbyid('canvas'); var gl = canvas.getcontext('webgl'); gl.getshaderprecision
format(gl.vertex_shader, gl.medium_float).rangemax; // 127 gl.getshaderprecision
format(gl.fragment_shader, gl.low_int).rangemax; // 24 specifications specification status comment webgl 1.0the definition of 'webglshaderprecision
format.rangemax' in that specification.
WebGLShaderPrecisionFormat.rangeMin - Web APIs
the read-only webglshaderprecision
format.rangemin property returns the base 2 log of the absolute value of the minimum value that can be represented.
... examples var canvas = document.getelementbyid('canvas'); var gl = canvas.getcontext('webgl'); gl.getshaderprecision
format(gl.vertex_shader, gl.medium_float).rangemin; // 127 gl.getshaderprecision
format(gl.fragment_shader, gl.low_int).rangemin; // 24 specifications specification status comment webgl 1.0the definition of 'webglshaderprecision
format.rangemin' in that specification.
Forms - Accessibility
the following pages provide various techniques for improving the accessibility of web
forms: basic
form hints: adding hints and descriptions for invalid or required fields alerts: using alerts to provide client-side validation error messages multi-part labels: enabling complex
form labels with a control inside each label see also the yahoo!
... article on
form validation and aria (retrieved on archive.org), covering much of the same content.
Feature-Policy: legacy-image-formats - HTTP
the http feature-policy header legacy-image-
formats directive controls whether the current document is allowed to display images in legacy
formats.
... 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.
Information Security Basics - Web security
a basic understanding of in
formation security can help you avoid unnecessarily leaving your software and sites insecure and vulnerable to weaknesses that can be exploited for financial gain or other malicious reasons.
...with this in
formation, you can be aware of the role and importance of security throughout the web development cycle and beyond into deployment of your content.
Performance.memory - Web APIs
syntax timinginfo = per
formance.memory attributes jsheapsizelimit the maximum size of the heap, in bytes, that is available to the context.
Performance: resourcetimingbufferfull event - Web APIs
function buffer_full(event) { console.log("warning: resource timing buffer is full!"); per
formance.setresourcetimingbuffersize(200); } function init() { // set a callback if the resource buffer becomes filled per
formance.onresourcetimingbufferfull = buffer_full; } <body onload="init()"> note that you could also set up the handler using the addeventlistener() function: per
formance.addeventlistener('resourcetimingbufferfull', buffer_full); specifications specification st...
PerformanceNavigationTiming.domComplete - Web APIs
function print_nav_timing_data() { // use getentriesbytype() to just get the "navigation" events var perfentries = per
formance.getentriesbytype("navigation"); for (var i=0; i < perfentries.length; i++) { console.log("= navigation entry[" + i + "]"); var p = perfentries[i]; // dom properties console.log("dom content loaded = " + (p.domcontentloadedeventend - p.domcontentloadedeventstart)); console.log("dom complete = " + p.domcomplete); console.log("dom interactive = " + p.interactive); ...
PerformanceNavigationTiming.domContentLoadedEventEnd - Web APIs
function print_nav_timing_data() { // use getentriesbytype() to just get the "navigation" events var perfentries = per
formance.getentriesbytype("navigation"); for (var i=0; i < perfentries.length; i++) { console.log("= navigation entry[" + i + "]"); var p = perfentries[i]; // dom properties console.log("dom content loaded = " + (p.domcontentloadedeventend - p.domcontentloadedeventstart)); console.log("dom complete = " + p.domcomplete); console.log("dom interactive = " + p.dominteractive); ...
PerformanceNavigationTiming.domContentLoadedEventStart - Web APIs
function print_nav_timing_data() { // use getentriesbytype() to just get the "navigation" events var perfentries = per
formance.getentriesbytype("navigation"); for (var i=0; i < perfentries.length; i++) { console.log("= navigation entry[" + i + "]"); var p = perfentries[i]; // dom properties console.log("dom content loaded = " + (p.domcontentloadedeventend - p.domcontentloadedeventstart)); console.log("dom complete = " + p.domcomplete); console.log("dom interactive = " + p.interactive); ...
PerformanceNavigationTiming.domInteractive - Web APIs
function print_nav_timing_data() { // use getentriesbytype() to just get the "navigation" events var perfentries = per
formance.getentriesbytype("navigation"); for (var i=0; i < perfentries.length; i++) { console.log("= navigation entry[" + i + "]"); var p = perfentries[i]; // dom properties console.log("dom content loaded = " + (p.domcontentloadedeventend - p.domcontentloadedeventstart)); console.log("dom complete = " + p.domcomplete); console.log("dom interactive = " + p.dominteractive); ...
PerformanceNavigationTiming.loadEventEnd - Web APIs
function print_nav_timing_data() { // use getentriesbytype() to just get the "navigation" events var perfentries = per
formance.getentriesbytype("navigation"); for (var i=0; i < perfentries.length; i++) { console.log("= navigation entry[" + i + "]"); var p = perfentries[i]; // dom properties console.log("dom content loaded = " + (p.domcontentloadedeventend - p.domcontentloadedeventstart)); console.log("dom complete = " + p.domcomplete); console.log("dom interactive = " + p.dominteractive); ...
PerformanceNavigationTiming.loadEventStart - Web APIs
function print_nav_timing_data() { // use getentriesbytype() to just get the "navigation" events var perfentries = per
formance.getentriesbytype("navigation"); for (var i=0; i < perfentries.length; i++) { console.log("= navigation entry[" + i + "]"); var p = perfentries[i]; // dom properties console.log("dom content loaded = " + (p.domcontentloadedeventend - p.domcontentloadedeventstart)); console.log("dom complete = " + p.domcomplete); console.log("dom interactive = " + p.interactive); ...
PerformanceNavigationTiming.redirectCount - Web APIs
function print_nav_timing_data() { // use getentriesbytype() to just get the "navigation" events var perfentries = per
formance.getentriesbytype("navigation"); for (var i=0; i < perfentries.length; i++) { console.log("= navigation entry[" + i + "]"); var p = perfentries[i]; // dom properties console.log("dom content loaded = " + (p.domcontentloadedeventend - p.domcontentloadedeventstart)); console.log("dom complete = " + p.domcomplete); console.log("dom interactive = " + p.interactive); ...
PerformanceNavigationTiming.unloadEventEnd - Web APIs
function print_nav_timing_data() { // use getentriesbytype() to just get the "navigation" events var perfentries = per
formance.getentriesbytype("navigation"); for (var i=0; i < perfentries.length; i++) { console.log("= navigation entry[" + i + "]"); var p = perfentries[i]; // dom properties console.log("dom content loaded = " + (p.domcontentloadedeventend - p.domcontentloadedeventstart)); console.log("dom complete = " + p.domcomplete); console.log("dom interactive = " + p.interactive); ...
PerformanceNavigationTiming.unloadEventStart - Web APIs
function print_nav_timing_data() { // use getentriesbytype() to just get the "navigation" events var perfentries = per
formance.getentriesbytype("navigation"); for (var i=0; i < perfentries.length; i++) { console.log("= navigation entry[" + i + "]"); var p = perfentries[i]; // dom properties console.log("dom content loaded = " + (p.domcontentloadedeventend - p.domcontentloadedeventstart)); console.log("dom complete = " + p.domcomplete); console.log("dom interactive = " + p.interactive); ...
PerformanceResourceTiming.connectEnd - Web APIs
function print_per
formanceentries() { // use getentriesbytype() to just get the "resource" events var p = per
formance.getentriesbytype("resource"); for (var i=0; i < p.length; i++) { print_start_and_end_properties(p[i]); } } function print_start_and_end_properties(perfentry) { // print timestamps of the *start and *end properties properties = ["connectstart", "connectend", "domainlookups...
PerformanceResourceTiming.connectStart - Web APIs
function print_per
formanceentries() { // use getentriesbytype() to just get the "resource" events var p = per
formance.getentriesbytype("resource"); for (var i=0; i < p.length; i++) { print_start_and_end_properties(p[i]); } } function print_start_and_end_properties(perfentry) { // print timestamps of the per
formanceentry *start and *end properties properties = ["connectstart", "connectend", ...
PerformanceResourceTiming.decodedBodySize - Web APIs
); else console.log("decodedbodysize = not supported"); if ("encodedbodysize" in perfentry) console.log("encodedbodysize = " + perfentry.encodedbodysize); else console.log("encodedbodysize = not supported"); if ("transfersize" in perfentry) console.log("transfersize = " + perfentry.transfersize); else console.log("transfersize = not supported"); } function check_per
formanceentries() { // use getentriesbytype() to just get the "resource" events var p = per
formance.getentriesbytype("resource"); for (var i=0; i < p.length; i++) { log_sizes(p[i]); } } specifications specification status comment resource timing level 2the definition of 'decodedbodysize' in that specification.
PerformanceResourceTiming.domainLookupStart - Web APIs
function print_per
formanceentries() { // use getentriesbytype() to just get the "resource" events var p = per
formance.getentriesbytype("resource"); for (var i=0; i < p.length; i++) { print_start_and_end_properties(p[i]); } } function print_start_and_end_properties(perfentry) { // print timestamps of the per
formanceentry *start and *end properties properties = ["connectstart", "connectend", ...
PerformanceResourceTiming.fetchStart - Web APIs
function print_per
formanceentries() { // use getentriesbytype() to just get the "resource" events var p = per
formance.getentriesbytype("resource"); for (var i=0; i < p.length; i++) { print_start_and_end_properties(p[i]); } } function print_start_and_end_properties(perfentry) { // print timestamps of the per
formanceentry *start and *end properties properties = ["connectstart", "connectend", ...
PerformanceResourceTiming.nextHopProtocol - Web APIs
function print_per
formanceentries() { // use getentriesbytype() to just get the "resource" events var p = per
formance.getentriesbytype("resource"); for (var i=0; i < p.length; i++) { print_nexthopprotocol(p[i]); } } function print_nexthopprotocol(perfentry) { var value = "nexthopprotocol" in perfentry; if (value) console.log("nexthopprotocol = " + perfentry.nexthopprotocol); else console.log("...
PerformanceResourceTiming.redirectEnd - Web APIs
function print_per
formanceentries() { // use getentriesbytype() to just get the "resource" events var p = per
formance.getentriesbytype("resource"); for (var i=0; i < p.length; i++) { print_start_and_end_properties(p[i]); } } function print_start_and_end_properties(perfentry) { // print timestamps of the per
formanceentry *start and *end properties properties = ["connectstart", "connectend", ...
PerformanceResourceTiming.redirectStart - Web APIs
function print_per
formanceentries() { // use getentriesbytype() to just get the "resource" events var p = per
formance.getentriesbytype("resource"); for (var i=0; i < p.length; i++) { print_start_and_end_properties(p[i]); } } function print_start_and_end_properties(perfentry) { // print timestamps of the per
formanceentry *start and *end properties properties = ["connectstart", "connectend", ...
PerformanceResourceTiming.requestStart - Web APIs
function print_per
formanceentries() { // use getentriesbytype() to just get the "resource" events var p = per
formance.getentriesbytype("resource"); for (var i=0; i < p.length; i++) { print_start_and_end_properties(p[i]); } } function print_start_and_end_properties(perfentry) { // print timestamps of the per
formanceentry *start and *end properties properties = ["connectstart", "connectend", ...
PerformanceResourceTiming.responseEnd - Web APIs
function print_per
formanceentries() { // use getentriesbytype() to just get the "resource" events var p = per
formance.getentriesbytype("resource"); for (var i=0; i < p.length; i++) { print_start_and_end_properties(p[i]); } } function print_start_and_end_properties(perfentry) { // print timestamps of the per
formanceentry *start and *end properties properties = ["connectstart", "connectend", ...
PerformanceResourceTiming.responseStart - Web APIs
function print_per
formanceentries() { // use getentriesbytype() to just get the "resource" events var p = per
formance.getentriesbytype("resource"); for (var i=0; i < p.length; i++) { print_start_and_end_properties(p[i]); } } function print_start_and_end_properties(perfentry) { // print timestamps of the per
formanceentry *start and *end properties properties = ["connectstart", "connectend", ...
PerformanceResourceTiming.secureConnectionStart - Web APIs
function print_per
formanceentries() { // use getentriesbytype() to just get the "resource" events var p = per
formance.getentriesbytype("resource"); for (var i=0; i < p.length; i++) { print_start_and_end_properties(p[i]); } } function print_start_and_end_properties(perfentry) { // print timestamps of the per
formanceentry *start and *end properties properties = ["connectstart", "connectend", ...
Lazy loading - Web Performance
<link href="style.css" rel="stylesheet" media="all"> <link href="portrait.css" rel="stylesheet" media="orientation:portrait"> <link href="print.css" rel="stylesheet" media="print"> it is possible to per
form some css optimizations to achieve that.
Index - Web APIs
51 analysernode api, analysernode, interface, reference, web audio api the analysernode interface represents a node able to provide real-time frequency and time-domain analysis in
formation.
... 53 analysernode.fftsize api, analysernode, property, reference, web audio api, fftsize the fftsize property of the analysernode interface is an unsigned long value and represents the window size in samples that is used when per
forming a fast fourier trans
form (fft) to get frequency domain data.
... 56 analysernode.getbytetimedomaindata() api, analysernode, method, reference, référence(2), web audio api the getbytetimedomaindata() method of the analysernode interface copies the current wave
form, or time-domain, data into a uint8array (unsigned byte array) passed into it.
...And 635 more matches
Index - Archive of obsolete content
found 3833 pages: # page tags and summary 1 archive of obsolete content archive, landing here at mdn, we try to avoid outright deleting content that might be useful to people targeting legacy plat
forms, operating systems, and browsers.
... 85 frame/utils provides helper functions for working with plat
form internals like frames and browsers.
... 99 plat
form/xpcom implement xpcom objects, factories, and services.
...And 246 more matches
Index
found 353 pages: # page tags and summary 1 network security services jss, nss, needsmigration network security services (nss) is a set of libraries designed to support cross-plat
form development of security-enabled client and server applications.
...in order to support multiple operating systems (os), it is based on a cross plat
form portability layer, called the netscape portable runtime (nspr), which provides cross plat
form application programming interfaces (apis) for os specific apis like file system access, memory management, network communication, and multithreaded programming.
... in order to allow interoperability between software and devices that per
form cryptographic operations, nss con
forms to a standard called pkcs#11.
...And 204 more matches
Index - MDN Web Docs Glossary: Definitions of Web-related terms
8 ascii glossary, infrastructure ascii (american standard code for in
formation interchange) is one of the most popular coding method used by computers for converting letters, numbers, punctuation and control codes into digital
form.
...web accessibility is
formally defined and discussed at the w3c through the web accessibility initiative (wai).
... 12 accessibility tree (aom) aom, accessibility, dom, glossary, reference the accessibility tree, or accessibility object model (aom), contains accessibility-related in
formation for most html elements.
...And 154 more matches
Bytecode Descriptions
format: jof_atom symbol operands: (uint8_t symbol (the js::symbolcode of the symbol to use)) stack: ⇒ symbol push a well-known symbol.
...
format: jof_ic pos stack: val ⇒ (+val) the unary + operator.
...(per spec, unary - supports bigints, but unary + does not.)
format: jof_ic neg stack: val ⇒ (-val) the unary - operator.
...And 126 more matches
Index
found 1275 pages: # page tags and summary 1 xpcom add-ons, extensions, landing, mozilla, xpcom xpcom is a cross plat
form component object model, similar to microsoft com.
... 2 accessing the windows registry using xpcom add-ons, code snippets, extensions, needsclassification, windows registry when implementing windows-specific functionality, it is often useful to access the windows registry for in
formation about the environment or other installed programs.
...effectively, it is a different plat
form.
...And 106 more matches
Index - Learn web development
7 html: a good basis for accessibility at, accessibility, article, beginner, buttons, codingscripting,
forms, html, learn, links, a11y, assistive technology, keyboard, screenreader, semantics you should now be well-versed in writing accessible html for most occasions.
... 10 wai-aria basics aria, accessibility, article, beginner, codingscripting, guide, html, javascript, learn, wai-aria, semantics this article has by no means covered all that's available in wai-aria, but it should have given you enough in
formation to understand how to use it, and know some of the most common patterns you will encounter that require it.
...this article provides some hints and tips in both of these areas that will help you get more out of learning web development, as well as further reading so you can find out more in
formation about each sub-topic should you wish..
...And 93 more matches
HTML documentation index - HTML: Hypertext Markup Language
6 date and time
formats used in html date, element,
format, html, iso 8601, input, reference, string, time, week, datetime, datetime-local, del, ins, month, month-year, week-year certain html elements use date and/or time values.
... the
formats of the strings that specify these values are described in this article.
... 13 data-* global attributes, html, reference the data-* global attributes
form a class of attributes called custom data attributes, that allow proprietary in
formation to be exchanged between the html and its dom representation by scripts.
...And 89 more matches
sslfnc.html
this page is part of the ssl reference that we are migrating into the
format described in the mdn style guide.
... nss_init nss_initreadwrite nss_nodb_init ssl_optionsetdefault ssl_optiongetdefault ssl_cipherprefsetdefault ssl_cipherprefgetdefault ssl_clearsessioncache ssl_configserversessionidcache ssl_configmpserversidcache ssl_inheritmpserversidcache nss_init sets up configuration files and per
forms other tasks required to run network security services.
...if you are per
forming operations that require write permission, for example s/mime operations such as adding a certificate, use nss_initreadwrite instead.
...And 78 more matches
Web audio codec guide - Web media technologies
additionally, webrtc implementations generally use a subset of these codecs for their encoding and decoding of media, and may support additional codecs as well, for optimal cross-plat
form support of video and audio conferencing, and to integrate better with legacy telecommunication solutions.
... for in
formation about the fundamental concepts behind how digital audio works, see the article digital audio concepts.
...oding within 64 kbps (for telephony/voip) rtp / webrtc mp3 mpeg-1 audio layer iii mp4, adts, mpeg1, 3gp opus opus webm, mp4, ogg vorbis vorbis webm, ogg [1] when mpeg-1 audio layer iii codec data is stored in an mpeg file, and there is no video track on the file, the file is typically referred to as an mp3 file, even though it's still an mpeg
format file.
...And 56 more matches
Web video codec guide - Web media technologies
just as audio codecs do for the sound data, video codecs compress the video data and encode it into a
format that can later be decoded and played back or edited.
... mpeg-2 mpeg-2 part 2 visual mp4, mpeg, quicktime theora theora ogg vp8 video processor 8 3gp, ogg, webm vp9 video processor 9 mp4, ogg, webm factors affecting the encoded video as is the case with any encoder, there are two basic groups of factors affecting the size and quality of the encoded video: specifics about the source video's
format and contents, and the characteristics and configuration of the codec used while encoding the video.
... effect of source video
format on encoded output the degree to which the
format of the source video will affect the output varies depending on the codec and how it works.
...And 53 more matches
Introduction to Public-Key Cryptography - Archive of obsolete content
for an overview of ssl, see "introduction to ssl." for an overview of encryption and decryption, see "encryption and decryption." in
formation on digital signatures is available from "digital signatures." public-key cryptography is a set of well-established techniques and standards for protecting communications from eavesdropping, tampering, and impersonation attacks.
... encryption and decryption allow two communicating parties to disguise in
formation they send to each other.
... the sender encrypts, or scrambles, in
formation before sending it.
...And 52 more matches
HTTP Index - HTTP
each resource is identified by a uni
form resource identifier (uri) used throughout http for identifying resources.
... 9 mime types (iana media types) content-type, guide, http, mime types, meta, request header, response header, application/javascript, application/json, application/xml a media type (also known as a multipurpose internet mail extensions or mime type) is a standard that indicates the nature and
format of a document, file, or assortment of bytes.
... 11 resource urls guide, http, intermediate, resource resource urls, urls prefixed with the resource: scheme, are used by firefox and firefox browser extensions to load resources internally, but some of the in
formation is available to sites the browser connects to as well.
...And 51 more matches
NSS tools : modutil
name modutil - manage pkcs #11 module in
formation within the security module database.
...please contribute to the initial review in mozilla nss bug 836477[1] description the security module database tool, modutil, is a command-line utility for managing pkcs #11 module in
formation both within secmod.db files and within hardware tokens.
...the jar file uses the nss pkcs #11 jar
format to identify all the files to be installed, the module's name, the mechanism flags, and the cipher flags, as well as any files to be installed on the target machine, including the pkcs #11 module library file and other files such as documentation.
...And 50 more matches
NSS tools : modutil
name modutil — manage pkcs #11 module in
formation within the security module database.
... synopsis modutil [options] arguments description the security module database tool, modutil, is a command-line utility for managing pkcs #11 module in
formation both within secmod.db files and within hardware tokens.
...the jar file uses the nss pkcs #11 jar
format to identify all the files to be installed, the module's name, the mechanism flags, and the cipher flags, as well as any files to be installed on the target machine, including the pkcs #11 module library file and other files such as documentation.
...And 50 more matches
Localization and Plurals
this page is to help explain how to localize these strings so that the correct plural
form is shown to the user.
... if you're here to make your code (e.g., extensions) localizable for plural
forms, you can jump straight to developing with plural
form.
... plural
form: for a particular plural rule, there can be multiple
forms of a word, such as "page" and "pages".
...And 46 more matches
UI pseudo-classes - Learn web development
previous overview:
forms next in the previous articles, we covered the styling of various
form controls, in a general manner.
...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.
... objective: to understand what parts of
forms are hard to style, and why; to learn what can be done to customize them.
...And 42 more matches
Using XMLHttpRequest - Web APIs
after the transaction completes, the object will contain useful in
formation such as the response body and the http status of the result.
...it starts with "xml" because when it was created the main
format that was originally used for asynchronous data exchange were xml handling responses there are several types of response attributes defined by the living standard specification for the xmlhttprequest() constructor.
... these tell the client making the xmlhttprequest important in
formation about the status of the response.
...And 42 more matches
WAI-ARIA basics - Learn web development
as an example, aria-required="true" specifies that a
form input needs to be filled in to be valid, whereas aria-labelledby="label" allows you to put an id on an element, then reference it as being the label for anything else on the page, including multiple elements, which is not possible using <label for="input">.
... as an example, you could use aria-labelledby to specify that a key description contained in a <div> is the label for multiple table cells, or you could use it as an alternative to image alt text — specify existing in
formation on the page as an image's alt text, rather than having to repeat it inside the alt attribute.
... states — special properties that define the current conditions of elements, such as aria-disabled="true", which specifies to a screenreader that a
form input is currently disabled.
...And 40 more matches
Mozilla Crypto FAQ - Archive of obsolete content
note that this document is for your in
formation only and is not intended as legal advice.
...in
formation in the faq also reflects the new u.s.
... the questions in this faq address mozilla's support for encryption and related security functionality, in
formation important to mozilla contributors relating to encryption functionality in mozilla, and general questions on u.s.
...And 39 more matches
<input type="image"> - HTML: Hypertext Markup Language
submit buttons that take the
form of an image rather than text.
... supported common attributes alt, src, width, height,
formaction,
formenctype,
formmethod,
formnovalidate,
formtarget idl attributes none.
... additional attributes in addition to the attributes shared by all <input> elements, image button inputs support the following attributes: attribute description alt alternate string to display when the image can't be shown
formaction the url to which to submit the data
formenctype the encoding method to use when submitting the
form data
formmethod the http method to use when submitting the
form formnovalidate a boolean which, if present, indicates that the
form shouldn't be validated before submission
formtarget a string indicating a browsing context from where to load ...
...And 39 more matches
NSS Tools modutil
using the security module database (modutil) newsgroup: mozilla.dev.tech.crypto the security module database tool is a command-line utility for managing pkcs #11 module in
formation within secmod.db files or within hardware tokens.
...for in
formation on certificate database and key database management, see using the certificate database tool.
... -list [modulename] display basic in
formation about the contents of the secmod.db file.
...And 38 more matches
Viewpoints and viewers: Simulating cameras in WebXR - Web APIs
note: most diagrams used in this article to show how the camera moves while per
forming standard movements was taken from an article on the filmmakeriq web site; namely, from this image which is found all over the web, however, and though we assume these are under a permissive license due to their frequent reuse, ownership is not certain.
... cameras and relative movement when a classic live-action movie is filmed, the actors are on a set and move about the set as they per
form, with one or more cameras watching their moves.
... the cameras may be fixed in place, but they may also be set up to move around as well, tracking the movement of the per
formers, dollying in and out to achieve emotional impact, and so forth.
...And 37 more matches
Editor Embedding Guide - Archive of obsolete content
this will not really give you any concrete in
formation on the state of the command.
...this will not really give you any concrete in
formation on the state of the command.
...this will not really give you any concrete in
formation on the state of the command.
...And 36 more matches
XUL accessibility guidelines - Archive of obsolete content
learn more accessibility plat
form features mozilla community software accessibility - where are we today?
...you should be able to per
form all functionality either directly in the application or through menu items or the context menu.
...the bookmark manager allows users to sort bookmarks by a particular column of in
formation and choose which columns to display.
...And 35 more matches
Index
at a high level, there are three issues to be aware of: 8 getting spidermonkey source code guide, spidermonkey you can get the spidermonkey source code in gzipped
form or directly from the mercurial repository.
... 11 index index, mdn meta, spidermonkey found 550 pages: 12 introduction to the javascript shell spidermonkey to get the spidermonkey javascript shell, see the spidermonkey build documentation or download a compiled binary for your plat
form from the nightly builds.
... 67 js::setlargeallocationfailurecallback jsapi reference, reference, référence(2), spidermonkey if a large allocation fails when calling pod_{calloc,realloc}cangc, the js engine may call the large-allocation- failure callback, if set, to allow the embedding to flush caches, possibly per
form shrinking gcs, etc.
...And 35 more matches
Inputs and input sources - Web APIs
these devices include but aren't limited to: screen taps (particularly but not necessarily only on phones or tablets) can be used to simultaneously per
form both targeting and selection.
...the in
formation for each input source includes which hand it's held in (if applicable), what 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.
...see facing and targeting for further in
formation.
...And 35 more matches
Client-Server Overview - Learn web development
objective: to understand client-server interactions in a dynamic website, and in particular what operations need to be per
formed by server-side code.
...when you click a link on a web page, submit a
form, or run a search, the browser sends an http request to the server.
...an html file containing in
formation about a product, or a list of products).
...And 34 more matches
Handling common accessibility problems - Learn web development
previous overview: cross browser testing next next we turn our attention to accessibility, providing in
formation on common problems, how to do simple testing, and how to make use of auditing/automation tools for finding accessibility issues.
...we've already talked about other spheres such as responsive design and per
formance in other places in the module.
...read accessibility guidelines and the law for more in
formation.
...And 34 more matches
Layout System Overview - Archive of obsolete content
this presentation is typically
formatted in accordance with the requirements of the css1 and css2 specifications from the w3c.
... presentation
formatting is also required to provide compatibility with legacy browsers (microsoft internet explorer and netscape navigator 4.x).
... the decision about when to apply css-specified
formatting and when to apply legacy
formatting is controlled by the document's doctype specification.
...And 33 more matches
Cognitive accessibility - Accessibility
another
form it can take is depression, such as when mourning the loss of a loved one, or being momentarily saddened by a tweet or video they just saw online.
...distractions, such as unnecessary content or advertisements; providing consistent web page layout and navigation; incorporating familiar elements, such as underlined links that are blue when not visited and purple when visited; dividing processes into logical, essential steps with progress indicators; making website authentication as easy as possible without compromising security; and making
forms easy to complete, such as with clear error messages and simple error recovery.
... adaptability guideline 1.3 states "content should be adaptable." create content that can be presented in different ways without losing in
formation or structure.
...And 33 more matches
<button>: The Button element - HTML: Hypertext Markup Language
the html <button> element represents a clickable button, used to submit
forms or anywhere in a document for accessible, standard button functionality.
... by default, html buttons are presented in a style resembling the plat
form the user agent runs on, but you can change buttons’ appearance with css.
... content categories flow content, phrasing content, interactive content, listed, labelable, and submittable
form-associated element, palpable content.
...And 33 more matches
Link types - HTML: Hypertext Markup Language
in html, link types indicate the relationship between two documents, in which one links to the other using an <a>, <area>, <
form>, or <link> element.
... otherwise, the link defines an alternative page, of one of these types: for another medium, like a handheld device (if the media attribute is set) in another language (if the hreflang attribute is set), in another
format, such as a pdf (if the type attribute is set) a combination of these <a>, <area>, <link> <
form> archives defines a hyperlink to a document that contains an archive link to this one.
... <a>, <area>, <link> <
form> author defines a hyperlink to a page describing the author or providing a way to contact the author.
...And 32 more matches
Index - Archive of obsolete content
i selected items for this group because they seemed to be either shrouded in mystery, misused as concepts or terms, or underestimated according to their role in xul and cross-plat
form development.
... 193 menuitem.type xul attributes, xul reference more in
formation on adding checkmarks to menus in the xul tutorial 194 min xul attributes, xul reference no summary!
...it explains the concept of dom documents, demonstrates a few simple examples of using dom calls to per
form basic manipulations on a document, and then demonstrates working with anonymous xbl content using mozilla-specific methods.
...And 30 more matches
Python binding for NSS
project in
formation python-nss is a python binding for nss (network security services) and nspr (netscape portable runtime).
... for in
formation on nss and nspr, see the following: network security services (nss).
...the exact error code, error description, and often contextual error in
formation will be present in the exception object.
...And 30 more matches
CSS and JavaScript accessibility best practices - Learn web development
see html text fundamentals and styling text for more in
formation.
...
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.
...And 29 more matches
Implementing a Microsoft Active Accessibility (MSAA) Server - Accessibility
using this in
formation, a screen reader will speak out loud important changes to the document or ui, and allow the user to track where they navigate.
...some screen readers can even show in
formation on a refreshable braille display.
... on microsoft windows, these kinds of assistive technology acquire this necessary in
formation via a combination of hacks, msaa and proprietary doms.
...And 29 more matches
The "codecs" parameter in common media types - Web media technologies
however, many media types—especially those that support video tracks—can benefit from the ability to more precisely describe the
format of the data within them.
... for instance, just describing a video in an mpeg-4 file with the mime type video/mp4 doesn't say anything about what
format the actual media within takes.
...with it, container-specific in
formation can be provided.
...And 29 more matches
SVG documentation index - SVG: Scalable Vector Graphics
25 arabic-
form deprecated, svg, svg attribute the arabic-
form attribute indicates which of the four possible
forms an arabic glyph represents.
... 46 color-interpolation-filters needsexample, svg, svg attribute the color-interpolation-filters attribute specifies the color space for imaging operations per
formed via filter effects.
...they let svg markup and its resulting dom share in
formation that standard attributes can't, usually for scripting purposes.
...And 29 more matches
Plug-in Development Overview - Gecko Plugin API Reference
also see making plug-ins scriptable for more in
formation about making plug-ins accessible from the browser.
...for in
formation about the html elements to use, see using html to display plug-ins.
... when it starts up, the browser checks for plug-in modules for the plat
form and registers them.
...And 28 more matches
Drawing and Event Handling - Plugins
a drawable can be defined in several ways, depending on the plat
form.
... for in
formation about the way html determines plug-in display mode, see using html to display plug-ins.
... note: windowless plug-ins were not supported on the x window system plat
form prior to gecko 1.9 alpha 7 (bug 137189).
...And 28 more matches
Plug-in Development Overview - Plugins
also see making plug-ins scriptable for more in
formation about making plug-ins accessible from the browser.
...for in
formation about the html elements to use, see using html to display plug-ins.
... when it starts up, the browser checks for plug-in modules for the plat
form and registers them.
...And 28 more matches
Using the User Timing API - Web APIs
the user timing interface allows the developer to create application specific timestamps that are part of the browser's per
formance timeline.
... this document shows how to create mark and measure per
formance entry types and how to use user timing methods (which are extensions of the per
formance interface) to retrieve and remove entries from the browser's per
formance timeline.
... per
formance marks a per
formance mark is a named per
formance entry that is created by the application at some location in an application.
...And 28 more matches
WebGL constants - Web APIs
var debuginfo = gl.getextension('webgl_debug_renderer_info'); var vendor = gl.getparameter(debuginfo.unmasked_vendor_webgl); the webgl tutorial has more in
formation, examples, and resources on how to get started with webgl.
... getting gl parameter in
formation constants passed to webglrenderingcontext.getparameter() to specify what in
formation to return.
... depth_bits 0x0d56 stencil_bits 0x0d57 polygon_offset_units 0x2a00 polygon_offset_factor 0x8038 texture_binding_2d 0x8069 sample_buffers 0x80a8 samples 0x80a9 sample_coverage_value 0x80aa sample_coverage_invert 0x80ab compressed_texture_
formats 0x86a3 vendor 0x1f00 renderer 0x1f01 version 0x1f02 implementation_color_read_type 0x8b9a implementation_color_read_
format 0x8b9b browser_default_webgl 0x9244 buffers constants passed to webglrenderingcontext.bufferdata(), webglrenderingcontext.buffersubdata(), webglrenderingco...
...And 28 more matches
<input type="time"> - HTML: Hypertext Markup Language
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.
...it also uses a 12- or 24-hour
format for inputting times, based on system locale.
...it, like chrome, uses a 12- or 24-hour
format for inputting times, based on system locale: 12-hour 24-hour value a domstring representing a time, or empty.
...And 28 more matches
Mozilla Application Framework in Detail - Archive of obsolete content
css is used to style these ui's and dtd's are used to localize the textual in
formation - making your application extremely flexible and able to be utilized across the globe.
...where speed is the foremost consideration, we provide c++ libraries with multi-language interfaces for comprehensive, per
formant access to networking, filesystem, content, rendering, and much more.
...another benefit of this standards-based approach to ui development is that your application is cross-plat
form "out of the box".
...And 27 more matches
OS.File for the main thread
optionsoptional plat
form-specific options for opening the file.
...to specify options, pass an object that may contain some of the following flags: unixflags (ignored under non-unix plat
forms) if specified, file opening flags, as per libc function open.
... unixmode (ignored under non-unix plat
forms) if specified, file creation mode, as per libc function open.
...And 27 more matches
WebGL model view projection - Web APIs
the model, view, and projection matrices individual trans
formations of points and polygons in space in webgl are handled by the basic trans
formation matrices like translation, scale, and rotation.
... clip space in a webgl program, data is typically uploaded to the gpu with its own coordinate system and then the vertex shader trans
forms those points into a special coordinate system known as clip space.
...normally model data is used that is in some arbitrary coordinate system, and is then trans
formed using a matrix, converting the model coordinates into the clip space coordinate system.
...And 27 more matches
Digital audio concepts - Web media technologies
representing audio in digital
form involves a number of steps and processes, with multiple
formats available both for the raw audio and the encoded or compressed audio which is actually used on the web.
...these molecules affect the ones adjacent to them, and so forth, propagating the vibration in the
form of a wave outward from the source until the amplitude of the wave (its volume) fades away with distance.
...in order to represent a sound wave in a way computers can manipulate and work with (let alone transmit over a network), the sound has to be converted into a digital
form.
...And 27 more matches
Back to the Server: Server-Side JavaScript On The Rise - Archive of obsolete content
regardless of how the back-ends of your web applications are implemented, client side you're using javascript for everything from same
form validations to full ajax applications.
...now more than 10 years later, with netscape's technology group having been trans
formed into the mozilla foundation, server-side javascript is seeing a strong resurgence because of the simplicity it provides to web developers reinvigorated by the fact that today's cpus can process javascript more than 10x faster than the cpus of the mid-90's ever could.
...in fact, the next javascript engine from mozilla, tracemonkey, is poised to boost javascript per
formance by factors of 20 to 40 times according to brendan eich, mozilla cto and the creator of javascript.
...And 26 more matches
Accessibility documentation index - Accessibility
8
forms aria, accessibility the following pages provide various techniques for improving the accessibility of web
forms: 9 alerts aria, accessibility,
forms, web you have a
form — a contact
form, for example — that you want to put some accessible error checking into.
... 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.
...addition of aria semantics only exposes extra in
formation to a browser's accessibility api, and does not affect a page's dom.
...And 26 more matches
The Joy of XUL - Archive of obsolete content
this guide is designed to introduce application developers and their managers to xul so they can not only understand why mozilla's plat
form is based on it, but how they might adopt it for their own use.
... xul (pronounced "zool") is mozilla's xml-based user interface language that lets you build feature rich cross-plat
form applications that can run connected to or disconnected from the internet.
... also described are some reasons application developers might choose to leverage xul and mozilla technology for building cross-plat
form applications.
...And 25 more matches
An overview of NSS Internals
in order to support multiple operating systems (os), it is based on a cross plat
form portability layer, called the netscape portable runtime (nspr), which provides cross plat
form application programming interfaces (apis) for os specific apis like file system access, memory management, network communication, and multithreaded programming.
... in order to allow interoperability between software and devices that per
form cryptographic operations, nss con
forms to a standard called pkcs#11.
... (note that it's important to look at the number 11, as there are other pkcs standards with different numbers that define quite different topics.) a software or hardware module con
forming to the pkcs#11 standard implements an interface of c calls, which allow querying the characteristics and offered services of the module.
...And 25 more matches
certutil
for in
formation security module database management, see the modutil manpages.
... -l list all the certificates, or display in
formation about a named certificate, in a certificate database.
... -a use ascii
format or allow the use of ascii
format for input or output.
...And 25 more matches
Mozilla
see the gecko overview for more in
formation about the style system.
...any per
formance metrics gathered by such builds are largely unrelated to what would be found in a release browser.
...this can be useful if you want to integrate a gecko application's password management with an existing password management system, or use your own password storage
format or database.
...And 25 more matches
Plug-in Basics - Plugins
plug-ins like these are now available: multimedia viewers such as adobe flash and adobe acrobat utilities that provide object embedding and compression/decompression services applications that range from personal in
formation managers to games the range of possibilities for using plug-in technology seems boundless, as shown by the growing numbers of independent software vendors who are creating new and innovative plug-ins.
...notice in view-source that this in
formation is simply gathered from the javascript.
... because plug-ins are plat
form-specific, you must port them to every operating system and processor plat
form upon which you want to deploy your plug-in.
...And 25 more matches
WebGL2RenderingContext - Web APIs
the webgl tutorial has more in
formation, examples, and resources on how to get started with webgl.
... state in
formation webgl2renderingcontext.getindexedparameter() returns the indexed value for the given target.
... renderbuffers webgl2renderingcontext.getinternal
formatparameter() returns in
formation about implementation-dependent support for internal
formats.
...And 25 more matches
<input type="email"> - HTML: Hypertext Markup Language
the input value is automatically validated to ensure that it's either empty or a properly-
formatted e-mail address (or list of addresses) before the
form can be submitted.
...n e-mail address, or empty events change and input supported common attributes autocomplete, list, maxlength, minlength, multiple, name,pattern, placeholder, readonly, required, size, and type idl attributes list and value methods select() value the <input> element's value attribute contains a domstring which is automatically validated as con
forming to e-mail syntax.
... more specifically, there are three possible value
formats that will pass validation: an empty string ("") indicating that the user did not enter a value or that the value was removed.
...And 25 more matches
MIME types (IANA media types) - HTTP
a media type (also known as a multipurpose internet mail extensions or mime type) is a standard that indicates the nature and
format of a document, file, or assortment of bytes.
... image list at iana image or graphical data including both bitmap and vector still images as well as animated versions of still image
formats such as animated gif or apng.
... text list at iana text-only data including any human-readable content, source code, or textual data such as comma-separated value (csv)
formatted data.
...And 25 more matches
Codecs used by WebRTC - Web media technologies
the webrtc api makes it possible to construct web sites and apps that let users communicate in real time, using audio and/or video as well as optional data and other in
formation.
...however, rfc 7742 specifies that all webrtc-compatible browsers must support vp8 and h.264's constrained baseline profile for video, and rfc 7874 specifies that browsers must support at least the opus codec as well as g.711's pcma and pcmu
formats.
...of secondary importance is the need to keep the video and audio synchronized, so that the movements and any ancillary in
formation (such as slides or a projection) are presented at the same time as the audio that corresponds.
...And 25 more matches
Implementation Status - Archive of obsolete content
mozilla x
forms is not actively maintained any more since about 2010!
... limitations and extensions the extension has some limitations and custom extension to the x
forms 1.1 specification.
... these can be found on the mozilla x
forms specials page.
...And 24 more matches
Gecko info for Windows accessibility vendors
anything that is focusable or conveys important in
formation about the structure of the document is exposed in the msaa tree of iaccessibles.
... k-meleon: a light, ultra-fast and more advanced (fully configurable) gecko-based web browser available on the windows plat
form 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).
...this is done to ensure a common look and feel across all supported plat
forms, and to allow for different skins (appearances).
...And 24 more matches
NSS tools : certutil
for in
formation on the security module database management, see the modutil manpage.
... -l list all the certificates, or display in
formation about a named certificate, in a certificate database.
... -a use ascii
format or allow the use of ascii
format for input or output.
...And 24 more matches
nsIFile
xpcom/io/nsifile.idlscriptable an instance of this interface is a cross-plat
form representation of a location in the filesystem.
... inherits from: nsisupports last changed in gecko 30.0 (firefox 30.0 / thunderbird 30.0 / seamonkey 2.27) nsifile is the correct plat
form-agnostic way to specify a file; you should always use this instead of a string to ensure compatibility.
... with an nsifile you can navigate to ancestors or descendants without having to deal with the different path separators used on different plat
forms, query the state of any file or directory at the position represented by the nsifile and create, move or copy items in the filesystem.
...And 24 more matches
Using the Frame Timing API - Web APIs
the per
formanceframetiming interface provides frame timing data about the browser's event loop.
... an application can register a per
formanceobserver for "frame" per
formance entry types and the observer will have data about the duration of each frame event.
... this document describes how to use the per
formanceframetiming interfaces including example code.
...And 24 more matches
Geometry and reference spaces in WebXR - Web APIs
at a fundamental level, rendering of scenes for webxr presentation in either augmented reality or virtual reality contexts is per
formed using webgl, so the two apis share much of the same design language.
... the article spatial tracking in webxr builds upon the in
formation provided here to cover how the physical position and orientation of the user's head, as well as potentially other parts of their body such as the hands, are mapped into the digital world, as well as how the relative positions of both physical and virtual objects are tracked as they move around, so that the scene can be properly rendered and composited.
...everything you draw must have its coordinates mapped to fit into this space, either explicitly within your code, or by using a trans
form to adjust the coordinates of all vertices.
...And 24 more matches
<input type="url"> - HTML: Hypertext Markup Language
the input value is automatically validated to ensure that it's either empty or a properly-
formatted url before the
form can be submitted.
... value the <input> element's value attribute contains a domstring which is automatically validated as con
forming to url syntax.
... more specifically, there are two possible value
formats that will pass validation: an empty string ("") indicating that the user did not enter a value or that the value was removed.
...And 24 more matches
Extension Versioning, Update and Compatibility - Archive of obsolete content
add-on versioning add-ons should specify their versions using the toolkit version
format.
... as a rough overview this is a version string split by periods, some examples: 2.0 1.0b1 3.0pre1 5.0.1.2 note: before firefox 1.5 the more basic firefox version
format was used: major.minor.release.build[+] where only digits were allowed.
... the toolkit version
format supports the firefox version
format but allows greater flexibility.
...And 23 more matches
Source code directories overview - Archive of obsolete content
see also similar in
formation in mozilla source code directory structure, and also see the more detailed overview of how the parts of gecko fit together.
... idl contains the xpidl (cross plat
form interface definition language) interface files.
... there are also plat
form dependent subdirectories which contain source code for specific plat
forms.
...And 23 more matches
Skinning XUL Files by Hand - Archive of obsolete content
to skin a xul file means to change the overall look of that file by changing its style in
formation.
... by the way, in contrast to the term skin, "chrome" refers to the skin and the content and whatever localization and plat
form-specific files are necessary for a particular part of the application or window.
...but you may also want to define new classes of buttons particular to your xul file, in which case the style in
formation will be wholly defined within your custom css file.
...And 23 more matches
Introduction to SSL - Archive of obsolete content
this document is primarily intended for administrators of red hat server products, but the in
formation it contains may also be useful for developers of applications that support ssl.
...this confirmation might be important if the server, for example, is a bank sending confidential financial in
formation to a customer and wants to check the recipient's identity.
... an encrypted ssl connection requires all in
formation sent between a client and a server to be encrypted by the sending software and decrypted by the receiving software, thus providing a high degree of confidentiality.
...And 23 more matches
IME handling guide
this is a technical term from windows but these days, this is used on other plat
forms as well.
...it handles native key events before or after focused application (depending on the plat
form) and creates a composition string (a.k.a.
...additionally, ime may be used for handwriting systems or speech input systems on some plat
forms.
...And 23 more matches
Profiling with the Firefox Profiler
it has tighter integration with firefox than external profilers, and has more of a plat
form focus than the devtools per
formance panel.
... it can be used in a variety of situations where external profilers are not available, and can provide more in
formation and insight into what the browser is doing.
...in addition to profiler.firefox.com, the firefox devtools have a simplified interface targeted towards web developers, but does not include as much in
formation as the firefox profiler web app.
...And 23 more matches
Accessibility Inspector - Firefox Developer Tools
the accessibility inspector provides a means to access important in
formation exposed to assistive technologies on the current page via the accessibility tree, allowing you to check what's missing or otherwise needs attention.
...this means trying your best to not lock anyone out of accessing in
formation because of any disability they may have, or any other personal circumstances such as the device they are using, the speed of their network connection, or their geographic location or locale.
... you can find more extensive in
formation in the accessibility section of mdn web docs.
...And 23 more matches
WebGL best practices - Web APIs
the only errors a well-
formed page generates are out_of_memory and context_lost.
...in practice, effectively all systems support at least the following: max_cube_map_texture_size: 4096 max_renderbuffer_size: 4096 max_texture_size: 4096 max_viewport_dims: [4096,4096] max_vertex_texture_image_units: 4 max_texture_image_units: 8 max_combined_texture_image_units: 8 max_vertex_attribs: 16 max_varying_vectors: 8 max_vertex_uni
form_vectors: 128 max_fragment_uni
form_vectors: 64 aliased_point_size_range: [1,100] your desktop may support 16k textures, or maybe 16 texture units in the vertex shader, but most other systems don't, and content that works for you will not work for them!
... in firefox, setting the pref webgl.perf.max-warnings to -1 in about:config will enable per
formance warnings that include warnings about fb completeness invalidations.
...And 23 more matches
filter - CSS: Cascading Style Sheets
blur(5px) <table class="standard-table"> <thead> <tr> <th style="text-align: left;" scope="col">original image</th> <th style="text-align: left;" scope="col">live example</th> <th style="text-align: left;" scope="col">svg equivalent</th> <th style="text-align: left;" scope="col">static example</th> </tr> </thead> <tbody> <tr> <td><img alt="test_
form.jpg" id="img1" class="internal default" src="/files/3710/test_
form_2.jpg" style="width: 100%;" /></td> <td><img alt="test_
form.jpg" id="img2" class="internal default" src="/files/3710/test_
form_2.jpg" style="width: 100%;" /></td> <td> <div class="svg-container"> <svg id="img3" overflow="visible" viewbox="0 0 212 161" color-interpolation-filters="srgb"> <f...
...ilter id="svgblur" x="-5%" y="-5%" width="110%" height="110%"> <fegaussianblur in="sourcegraphic" stddeviation="3.5"/> </filter> <image xlink:href="/files/3710/test_
form_2.jpeg" filter="url(#svgblur)" width="212px" height="161px"/> </svg> </div> </td> <td><img alt="test_
form_s.jpg" id="img4" class="internal default" src="/files/3711/test_
form_2_s.jpg" style="width: 100%;" /></td> </tr> </tbody> </table> html { height:100%; } body { font: 14px/1.286 "lucida grande", "lucida sans unicode", "dejavu sans", lucida, arial, helvetica, sans-serif; color: rgb(51, 51, 51); height:100%; overflow:hidden; } #img2 { width:100%; height:auto; -webkit-filter:blur(5px); -ms-filter:blur(5px); filter:blur(5px); } table.
...lter> </svg> <table class="standard-table"> <thead> <tr> <th style="text-align: left;" scope="col">original image</th> <th style="text-align: left;" scope="col">live example</th> <th style="text-align: left;" scope="col">svg equivalent</th> <th style="text-align: left;" scope="col">static example</th> </tr> </thead> <tbody> <tr> <td><img alt="test_
form.jpg" id="img1" class="internal default" src="/files/3708/test_
form.jpg" style="width: 100%;" /></td> <td><img alt="test_
form.jpg" id="img2" class="internal default" src="/files/3708/test_
form.jpg" style="width: 100%;" /></td> <td><div class="svg-container"><svg xmlns="http://www.w3.org/2000/svg" id="img3" viewbox="0 0 286 217" color-interpolation-filters="srgb"> <filter id="brightnes...
...And 23 more matches
<input type="datetime-local"> - HTML: Hypertext Markup Language
the
format of the date and time value used by this input type is described in local date and time strings in date and time
formats used in html.
... you can set a default value for the input by including a date and time inside the value attribute, like so: <label for="party">enter a date and time for your party booking:</label> <input id="party" type="datetime-local" name="partydate" value="2017-06-01t08:30"> one thing to note is that the displayed date and time
formats differ from the actual value; the displayed date and time are
formatted according to the user's locale as reported by their operating system, whereas the date/time value is always
formatted yyyy-mm-ddthh:mm.
... you can also get and set the date value in javascript using the htmlinputelement.value property, for example: var datecontrol = document.queryselector('input[type="datetime-local"]'); datecontrol.value = '2017-06-01t08:30'; there are several methods provided by javascript's date that can be used to convert numeric date in
formation into a properly-
formatted string, or you can do it manually.
...And 23 more matches
<input type="month"> - HTML: Hypertext Markup Language
the value is a string whose value is in the
format "yyyy-mm", where yyyy is the four-digit year and mm is the month number.
...in browsers that don't support month inputs, the control degrades gracefully to a simple <input type="text">, although there may be automatic validation of the entered text to ensure it's
formatted as expected.
... value a domstring representing the value of the month and year entered into the input, in the
form yyyy-mm (four or more digit year, then a hyphen ("-"), followed by the two-digit month).
...And 23 more matches
Video and audio content - Learn web development
the embedded video will look something like this: you can try the example live here (see also the source code.) using multiple source
formats to improve compatibility there's a problem with the above example, which you may have noticed already if you've tried to access the live link above with an older browser like internet explorer or even an older version of safari.
... the video won't play, because different browsers support different video (and audio)
formats.
...
formats like mp3, mp4 and webm are called container
formats.
...And 22 more matches
NSS tools : signtool
digital signatures allow ssl-enabled clients to per
form two important operations: * confirm the identity of the individual, company, or other entity whose digital signature is associated with the files * check whether the files have been tampered with since being signed if you have a signing certificate, you can use netscape signing tool to digitally sign files and package them as a jar file.
... options -b basename specifies the base filename for the .rsa and .sf files in the meta-inf directory to con
form with the jar
format.
... -f commandfile specifies a text file containing netscape signing tool options and arguments in keyword=value
format.
...And 22 more matches
Web Replay
default false architecture there are several main components to the project: the record/replay infrastructure records enough in
formation during recording so that the replayed process can run and produce the same observable behaviors.
... debugger integration allows the js debugger to read the in
formation it needs from a replaying process and control the process's execution (resume/rewind).
... inter-thread non-determinism is handled by first assuming the program is data race free: shared memory accesses which would otherwise race are either protected by locks or use apis that per
form atomic operations.
...And 22 more matches
ctypes
similar to errno in libc, available on all plat
forms.
... predefined data types primitive types these types behave the same on all plat
forms.
... types that act like specific c types these types are designed to work exactly like the corresponding type on the native plat
form.
...And 22 more matches
SubtleCrypto.importKey() - Web APIs
the importkey() method of the subtlecrypto interface imports a key: that is, it takes as input a key in an external, portable
format and gives you a cryptokey object that you can use in the web crypto api.
... the function accepts several import
formats: see supported
formats for details.
... syntax const result = crypto.subtle.importkey(
format, keydata, algorithm, extractable, usages ); parameters
format is a string describing the data
format of the key to import.
...And 22 more matches
HTML attribute reference - HTML: Hypertext Markup Language
attribute list attribute name elements description accept <
form>, <input> list of types the server accepts, typically a file type.
... accept-charset <
form> list of supported charsets.
... action <
form> the uri of a program that processes the in
formation submitted via the
form.
...And 22 more matches
<input type="submit"> - HTML: Hypertext Markup Language
when the click event occurs (typically because the user clicked the button), the user agent attempts to submit the
form to the server.
...this label is likely to be something along the lines of "submit" or "submit query." here's an example of a submit button with a default label in your browser: <input type="submit"> additional attributes in addition to the attributes shared by all <input> elements, submit button inputs support the following attributes: attribute description
formaction the url to which to submit the
form's data; overrides the
form's action attribute, if any
formenctype a string specifying the encoding type to use for the
form data
formmethod the http method (get or post) to use when submitting the
form.
...
formnovalidate a boolean which, if present, means the
form's fields will not be subjected to constraint validation before submitting the data to the server
formtarget the browsing context into which to load the response returned by the server after submitting the
form formaction a string indicating the url to which to submit the data.
...And 22 more matches
Tamarin build documentation - Archive of obsolete content
supported plat
forms tamarin currently supports the following operating systems and/or architectures.
... building tamarin building tamarin will create all the libraries for the avmplus and garbage collector (mmgc), and create a standalone executable (shell) for executing files in the abc file
format.
... the tamarin codebase contains a cross-plat
form build system for mozilla developers.
...And 21 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.
... objective: to understand the newer input type values available to create native
form controls, and how to implement them using html.
...And 21 more matches
Vue conditional rendering: editing existing todos - Learn web development
in your components directory, create a new file called todoitemedit
form.vue.
... copy the following code into that file: <template> <
form class="stack-small" @submit.prevent="onsubmit"> <div> <label class="edit-label">edit name for "{{label}}"</label> <input :id="id" type="text" autocomplete="off" v-model.lazy.trim="newlabel" /> </div> <div class="btn-group"> <button type="button" class="btn" @click="oncancel"> cancel <span class="visually-hidden">editing {{label}}</span> </button> <button type="submit" class="btn btn__primary"> save <span class="visually-hidden">edit for {{label}}</span> </button> </div> </
form> </template> <script> export default { props: { label: { type: string, required: true }, id: { type: string, required: true ...
...is.$emit("edit-cancelled"); } } }; </script> <style scoped> .edit-label { font-family: arial, sans-serif; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; color: #0b0c0c; display: block; margin-bottom: 5px; } input { display: inline-block; margin-top: 0.4rem; width: 100%; min-height: 4.4rem; padding: 0.4rem 0.8rem; border: 2px solid #565656; }
form { display: flex; flex-direction: row; flex-wrap: wrap; }
form > * { flex: 0 0 100%; } </style> note: walk through the above code then read the below description to make sure you understand everything the component is doing before moving on.
...And 21 more matches
Introducing a complete toolchain - Learn web development
we'll go all the way from setting up a sensible development environment and putting trans
formation tools in place to actually deploying your app on netlify.
... in this article we'll introduce the case study, set up our development environment, and set up our code trans
formation tools.
... useful development tools such as prettier for
formatting and eslint for linting.
...And 21 more matches
Index - Firefox Developer Tools
3 accessibility inspector accessibility, accessibility inspector, devtools, guide, tools the accessibility inspector provides a means to access important in
formation exposed to assistive technologies on the current page via the accessibility tree, allowing you to check what's missing or otherwise needs attention.
... 4 color vision simulation accessibility, accessibility inspector, color blindness, devtools, guide, simulation, tools the simulator in the accessibility inspector in firefox developer tools lets you see what a web page would look like to users with various
forms of color vision deficiency (better known as "color blindness"), as well as contrast sensitivity loss.
...for the
former, it is the debugger api’s presentation of a jsapi jsscript object.
...And 21 more matches
WebGLRenderingContext - Web APIs
the webgl tutorial has more in
formation, examples, and resources on how to get started with webgl.
... the webgl context the following properties and methods provide general in
formation and functionality to deal with the webgl context: webglrenderingcontext.canvas a read-only back-reference to the htmlcanvaselement.
... state in
formation webglrenderingcontext.activetexture() selects the active texture unit.
...And 21 more matches
Constraint validation - Developer guides
the creation of web
forms has always been a complex task.
... while marking up the
form itself is easy, checking whether each field has a valid and coherent value is more difficult, and in
forming the user about the problem may become a headache.
... html5 introduced new mechanisms for
forms: it added new semantic types for the <input> element and constraint validation to ease the work of checking the
form content on the client side.
...And 21 more matches
HTML attribute: rel - HTML: Hypertext Markup Language
valid on <link>, <a>, <area>, and <
form>, the supported values depend on the element on which the attribute is found.
... values for the rel attribute, and the elements for which each is relevant rel value description <link> <a> and <area> <
form> alternate alternate representations of the current document.
... link not allowed not allowed dns-prefetch tells the browser to preemptively per
form dns resolution for the target resource's origin external resource not allowed not allowed external referenced document is not part of the same site as the current document.
...And 21 more matches
<input type="search"> - HTML: Hypertext Markup Language
placeholder the placeholder attribute is a string that provides a brief hint to the user as to what kind of in
formation is expected in the field.
... if the control's content has one directionality (ltr or rtl) but needs to present the placeholder in the opposite directionality, you can use unicode bidirectional algorithm
formatting characters to override directionality within the placeholder; see overriding bidi using unicode control characters in the unicode bidirectional text algorithm for those characters.
...it is not as semantically useful as other ways to explain your
form, and can cause unexpected technical issues with your content.
...And 21 more matches
HTML elements reference - HTML: Hypertext Markup Language
for more in
formation about the basics of html elements and attributes, see the section on elements in the introduction to html article.
... document metadata metadata contains in
formation about the page.
... this includes in
formation about styles, scripts and data to help software (search engines, browsers, etc.) use and render the page.
...And 21 more matches
Install Manifests - Archive of obsolete content
firefox or thunderbird) uses to determine in
formation about an add-on as it is being installed.
... it contains metadata identifying the add-on, providing in
formation about who created it, where more in
formation can be found about it, which versions of what applications it is compatible with, how it should be updated, and so on.
... the
format of the install manifest is rdf/xml.
...And 20 more matches
Game distribution - Game development
benefits of html5 over native building games with html5 gives you extra advantages, such as: multiplat
form bliss the technology itself is multiplat
form, so you can write the code once and target multiple devices.
... you don't need to have separate teams to work on the same title targeting different plat
forms with only one code base to worry about.
...there's no flash, and html5 is fully multiplat
form.
...And 20 more matches
Introduction to the server side - Learn web development
it can also make sites easier to use by storing personal preferences and in
formation — for example reusing stored credit card details to streamline subsequent payments.
...when you click a link on a web page, submit a
form, or run a search, an http request is sent from your browser to the target server.
... the request includes a url identifying the affected resource, a method that defines the required action (for example to get, delete, or post the resource), and may include additional in
formation encoded in url parameters (the field-value pairs sent via a query string), as post data (data sent by the http post method), or in associated cookies.
...And 20 more matches
Handling common HTML and CSS problems - Learn web development
in the worst cases, javascript is used to generate the entire web page content and style, which makes your pages inaccessible, and less per
formant (generating dom elements is expensive).
... basically, it is a matter of checking whether your html and css code is well
formed and doesn't contain any syntax errors.
...these allows you to paste your code into a window, and it will flag up any errors with crosses, which can then be hovered to get an error message in
forming you what the problem is.
...And 20 more matches
Mozilla accessibility architecture
intro this document is for people who wish to understand the architecture of mozilla's accessibility api module, which provides support for plat
form accessibility apis.
... accessibility apis are used by 3rd party software like screen readers, screen magnifiers, and voice dictation software, which need in
formation about document content and ui controls, as well as important events like changes of focus.
...accessibility apis on each operating system have built-in assumptions about what is the most important in
formation, and how an accessibility server like mozilla should use the api's programmatic interfaces to expose this in
formation to an accessibility client (the assistive technology).
...And 20 more matches
Creating localizable web applications
cheatsheet don't hardcode english text,
formats (numbers, dates, addresses, etc.), word order or sentence structure.
...you could easily use list($category, $tab, $page) = explode('/', $path); to get this in
formation directly from the url.
...you probably don't want to localize the urls to keep them uni
form across locales as well as to avoid issues with non-latin and/or rtl characters.
...And 20 more matches
Drag Operations - Web APIs
the drag data contains two pieces of in
formation, the type (or
format) of the data, and the data's value.
... the
format is a type string (such as text/plain for text data), and the value is a string of text.
...for example: event.datatransfer.setdata("text/plain", "text to drag"); in this case, the data value is "text to drag" and is of the
format text/plain.
...And 20 more matches
User Timing API - Web APIs
the user timing interface allows the developer to create application specific timestamps that are part of the browser's per
formance timeline.
... this document provides an overview of the mark and measure per
formance event types including the four user timing methods that extend the per
formance interface.
... for more details and example code regarding these two per
formance event types and the methods, see using the user timing api.
...And 20 more matches
Signaling and video calling - Web APIs
a
form of discovery and media
format negotiation must take place, as discussed elsewhere, in order for two devices on different networks to locate one another.
...a signaling server's job is to serve as an intermediary to let two peers find and establish a connection while minimizing exposure of potentially private in
formation as much as possible.
...webrtc doesn't specify a transport mechanism for the signaling in
formation.
...And 20 more matches
Enhanced Extension Installation - Archive of obsolete content
aside from the work of locating the firefox executable in the first place (which varies from plat
form to plat
form), this is very limiting because: it forces the third party application to package its firefox integration hooks as a xpi.
... in the profile directory, the file compatibility.ini stores in
formation about the version of the application (build info) that last started this profile - during startup this file is checked and if the version info held by the running app disagrees with the info held by this file, a compatibility check is run on all installed items.
...the composite datasource handles all read-only in
formation requests, and when data must be written the extension manager determines the appropriate datasource to write and flush to.
...And 19 more matches
XUL controls - Archive of obsolete content
for more reference in
formation, see the xul reference.
... <button label="save" accesskey="s"/> more in
formation about the button element.
... <button type="menu" label="view"> <menupopup> <menuitem label="list"/> <menuitem label="details"/> </menupopup> </button> more in
formation about this type of menu button element.
...And 19 more matches
Archived Mozilla and build documentation - Archive of obsolete content
blackconnect blackwood bonsai it is a tool that lets you per
form queries on the contents of a cvs archive; you can: get a list of checkins, see what checkins have been made by a given person, or on a given cvs branch, or in a particular time period.
... building trans
formiix standalone calicalendarview an object implementing calicalendarview is generally intended to serve as a way of manipulating a set of dom nodes corresonding to a visual representation of calievent and calitodo objects.
...implementing a calicalendarviewcontroller allows for these actions to be per
formed in a manner consistent with the rest of the application in which the calicalendarview is included.
...And 19 more matches
Mozilla release FAQ - Archive of obsolete content
gecko (
formerly raptor) is the new html rendering engine in mozilla.
... it features speed improvements, a more modular nature, and significantly less plat
form-dependant code.
...here are a few that are specific to the mozilla newsgroups: fe = front end -- the part of mozilla that handles the interface be = back end -- the part of mozilla that does all the behind-the-scenes stuff nspr = netscape portable runtime -- an abstraction layer over the local os gtk = a free gui toolkit native to unix qt = another gui toolkit xp = cross plat
form xpfe = cross-plat
form frontend based on nglayout m[number] = milestone release [number] (no longer used) i'm wondering how to do xxx with navigator 3.x...
...And 19 more matches
NPAPI plugin reference - Archive of obsolete content
browser-side plug-in api this chapter describes methods in the plug-in api that are provided by the browser; these allow call back to the browser to request in
formation, tell the browser to repaint part of the window, and so forth.
... np_getvalue allows the browser to query the plug-in for in
formation.
... np_port contains in
formation required by the window field of an npwindow structure.
...And 19 more matches
Server-side web frameworks - Learn web development
they provide tools and libraries that simplify common web development tasks, including routing urls to appropriate handlers, interacting with databases, supporting sessions and user authorization,
formatting output (e.g.
... work directly with http requests and responses as we saw in the last article, web servers and browsers communicate via the http protocol — servers wait for http requests from the browser and then return in
formation in http responses.
...every "view" function (a request handler) receives an httprequest object containing request in
formation, and is required to return an httpresponse object with the
formatted output (in this case a string).
...And 19 more matches
React interactivity: Events and state - Learn web development
all browser events follow this
format in jsx – on, followed by the name of the event.
... let's apply this to our app, starting in the
form.js component.
... handling
form submission at the top of the
form() component function, create a function named handlesubmit().
...And 19 more matches
nsIZipWriter
modules/libjar/zipwriter/public/nsizipwriter.idlscriptable this interface provides an easy way for scripts to archive data in the zip file
format.
... operations on the archive can be per
formed one by one, or queued for later execution.
... 1.0 66 introduced gecko 1.9 inherits from: nsisupports last changed in gecko 1.9 (firefox 3) once all the operations you wish to per
form are added to the queue, a call to processqueue() will per
form the operations in the order they were added to the queue.
...And 19 more matches
<input type="date"> - HTML: Hypertext Markup Language
among browsers with custom interfaces for selecting dates are chrome and opera, whose data control looks like so: the edge date control looks like: and the firefox date control looks like this: value a domstring representing a date in yyyy-mm-dd
format, or empty events change and input supported common attributes autocomplete, list, readonly, and step idl attributes list, value, valueasdate, valueasnumber.
...the date is
formatted according to iso8601, described in
format of a valid date string in date and time
formats used in html.
... you can set a default value for the input with a date inside the value attribute, like so: <input type="date" value="2017-06-01"> the displayed date
format will differ from the actual value — the displayed date is
formatted based on the locale of the user's browser, but the parsed value is always
formatted yyyy-mm-dd.
...And 19 more matches
<textarea> - HTML: Hypertext Markup Language
the html <textarea> element represents a multi-line plain-text editing control, useful when you want to allow users to enter a sizeable amount of free-
form text, for example a comment on a review or feedback
form.
... the above example demonstrates a number of features of <textarea>: an id attribute to allow the <textarea> to be associated with a <label> element for accessibility purposes a name attribute to set the name of the associated data point submitted to the server when the
form is submitted.
... the <textarea> element also accepts several attributes common to
form <input>s, such as autocomplete, autofocus, disabled, placeholder, readonly, and required.
...And 19 more matches
Firefox user agent string reference - HTTP
general
form the ua string of firefox itself is broken down into four components: mozilla/5.0 (plat
form; rv:geckoversion) gecko/geckotrail firefox/firefoxversion mozilla/5.0 is the general token that says the browser is mozilla compatible, and is common to almost every browser today.
... plat
form describes the native plat
form the browser is running on (e.g.
...firefox os phones simply say "mobile"; the web is the plat
form.
...And 19 more matches
Index of archived content - Archive of obsolete content
ame frame/utils fs/path io/byte-streams io/file io/text-streams lang/functional lang/type loader/cuddlefish loader/sandbox net/url net/xhr places/bookmarks places/favicon places/history plat
form/xpcom preferences/event-target preferences/service remote/child remote/parent stylesheet/style stylesheet/utils system/child_process system/environment system/events system/runtime system/unload system/xul-app tabs/ut...
...e bookmarks boxes canvas code snippets cookies customizing the download progress bar delayed execution dialogs and prompts downloading files drag & drop embedding svg examples and demos from articles file i/o finding window handles
forms related code snippets html in xul for rich tooltips html to dom isdefaultnamespace js xpcom javascript debugger service javascript timers javascript daemons management label and description lookupnamespaceuri lookupprefix...
... 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 mor...
...And 18 more matches
The Implementation of the Application Object Model - Archive of obsolete content
in recent years, xul dropped the z from its name and replaced it with an x, and upon doing so, trans
formed into something far worse than a demon.
... the first reason to have local/remote merging is that a remote file must be able to reference local data and have it merged in with the in
formation that it specified.
...because rdf can express arbitrary relationships between nodes, the serialized
form of rdf in xml has to contain extra syntax.
...And 18 more matches
The Business Benefits of Web Standards - Archive of obsolete content
caught between a rock and a hard place, web designers face a
formidable challenge.
...the blogging community are particularly dynamic in this respect where on many plat
forms including wordpress, textpattern and habari, the site theme is a complete and discrete entity in its own right.
...according to various reports, case studies, and andy king, author of speed up your web site: web site optimization, css has made it possible to trans
form table-based layouts into css-based layouts.
...And 18 more matches
Client-side storage - Learn web development
see browser storage limits and eviction criteria for more in
formation.
...since the early days of the web, sites have used cookies to store in
formation to personalize user experience on websites.
... they're the earliest
form of client-side storage commonly used on the web.
...And 18 more matches
Setting up your own test automation environment - Learn web development
see plat
forms supported by selenium for more in
formation on where to get browser drivers from, etc.
... note: if you want to find out how to use webdriver with other server-side environments, also check out plat
forms supported by selenium for some useful links.
...we've created new browser instances for multiple browsers, then passed each one to the function so the test is per
formed on all three browsers!
...And 18 more matches
Chrome registration
locale localizable applications keep all their localized in
formation in locale providers.
... in order to in
form the chrome registry of the available chrome, a text manifest is used: this manifest is "chrome.manifest" in the root of an extension, or theme, or xulrunner application.
... the plaintext chrome manifests are in a simple line-based
format.
...And 18 more matches
Gecko Profiler FAQ
the gecko profiler currently doesn’t have the ability to show you in
formation about line numbers, neither for js code nor for native code.
... for js code, the profiler plat
form doesn’t capture any in
formation about lines.
... for native code, the profiler captures the necessary in
formation but doesn’t have a way to display it.
...And 18 more matches
nsILoginManager
.getservice(components.interfaces.nsiloginmanager); method overview void addlogin(in nsilogininfo alogin); nsiautocompleteresult autocompletesearch(in astring asearchstring, in nsiautocompleteresult apreviousresult, in nsidomhtmlinputelement aelement); unsigned long countlogins(in astring ahostname, in astring aactionurl, in astring ahttprealm); boolean fill
form(in nsidomhtml
formelement a
form); void findlogins(out unsigned long count, in astring ahostname, in astring aactionurl, in astring ahttprealm, [retval, array, size_is(count)] out nsilogininfo logins); void getalldisabledhosts([optional] out unsigned long count, [retval, array, size_is(count)] out wstring hostnames); void getalllogins([optional] out unsigned long count, ...
... exceptions thrown an exception is thrown if the login in
formation is already stored in the login manager.
... note: this method is provided for use only by the
formfillcontroller, which calls it directly.
...And 18 more matches
Movement, orientation, and motion: A WebXR example - Web APIs
in this article, we'll make use of in
formation introduced in the previous articles in our webxr tutorial series to construct an example which animates a rotating cube around which the user can move freely using a vr headset, keyboard, and/or mouse.
... setup and utility functions next, we declare the variables and constants used throughout the application, starting with those used to store webgl and webxr specific in
formation: let polyfill = null; let xrsession = null; let xrinputsources = null; let xrreferencespace = null; let xrbutton = null; let gl = null; let animationframerequestid = 0; let shaderprogram = null; let programinfo = null; let buffers = null; let texture = null; let mouseyaw = 0; let mousepitch = 0; this is followed by a set of constants, mostly to contain various vectors and matrices used wh...
... logging errors a function called logglerror() is implemented to provide an easily customized way to output logging in
formation for errors that occur while executing webgl functions.
...And 18 more matches
Understandable - Accessibility
this article provides practical advice on how to write your web content so that it con
forms to the success criteria outlined in the understandable principle of the web content accessibility guidelines (wcag) 2.0 and 2.1.
... understandable states that in
formation and the operation of user interface must be understandable.
... note: to read the w3c definitions for understandable and its guidelines and success criteria, see principle 3: understandable — in
formation and the operation of user interface must be understandable.
...And 18 more matches
<input type="number"> - HTML: Hypertext Markup Language
placeholder the placeholder attribute is a string that provides a brief hint to the user as to what kind of in
formation is expected in the field.
... if the control's content has one directionality (ltr or rtl) but needs to present the placeholder in the opposite directionality, you can use unicode bidirectional algorithm
formatting characters to override directionality within the placeholder; see overriding bidi using unicode control characters in the unicode bidirectional text algorithm for those characters.
...it is not as semantically useful as other ways to explain your
form, and can cause unexpected technical issues with your content.
...And 18 more matches
Index - HTTP
found 122 pages: # page tags and summary 1 http headers http, http header, networking, overview, reference http headers allow the client and the server to pass additional in
formation with the request or the response.
...using content negotiation, the server then selects one of the proposals, uses it and in
forms the client of its choice with the content-type response header.
...using content negotiation, the server then selects one of the proposals, uses it and in
forms the client of its choice within the content-type response header.
...And 18 more matches
JavaScript Daemons Management - Archive of obsolete content
a possible approach to solve this problem is to nest all the in
formation needed by each animation to start, stop, etc.
... **/ daemon.construct = function (aargs) { var odmn = new this.blank(); this.apply(odmn, aargs); return odmn; }; daemon.buildaround = function (octx, nrate, nlen) { if (!octx.per
form) { throw new typeerror("you cannot create a daemon around an object devoid of a \"per
form\" function"); } return new this(octx, octx.per
form, nrate || null, nlen || null, octx.create || null, octx.prepare || null); }; /* warning!
...ate) : vdate; if (isfinite(ntime) && ntime > date.now()) { this.length = math.floor((ntime - date.now()) / this.rate) + this.index; this.pause(); this.start(); } return this.length; }; manual the constructor syntax var mydaemon = new daemon(thisobject, callback[, rate[, length[, init[, onstart]]]]); description constructs a javascript object containing all in
formation needed by an animation (like the this object, the callback function, the length, the frame rate, the number of cycles, and the init and onstart functions).
...And 17 more matches
Migrate apps from Internet Explorer to Mozilla - Archive of obsolete content
html 4.01, xhtml 1.0 and xhtml 1.1 cascade style sheets (css): css level 1, css level 2.1 and parts of css level 3 document object model (dom): dom level 1, dom level 2 and parts of dom level 3 mathematical markup language: mathml version 2.0 extensible markup language (xml): xml 1.0, namespaces in xml, associating style sheets with xml documents 1.0, fragment identifier for xml xsl trans
formations: xslt 1.0 xml path language: xpath 1.0 resource description framework: rdf simple object access protocol: soap 1.1 ecma-262, revision 3 (javascript 1.5): ecma-262 general cross-browser coding tips even though web standards do exist, different browsers behave differently (in fact, the same browser may behave differently depending on the plat
form).
...browser sniffing is usually done through the useragent, such as: mozilla/5.0 (x11; u; linux i686; en-us; rv:1.5) gecko/20031016 while using the useragent to sniff the browser provides detailed in
formation on the browser in use, code that handles useragents often can make mistakes when new browser versions arrive, thus requiring code changes.
...always use the correct
form ( ) to avoid browser discrepancies.
...And 17 more matches
Requests For Enhancement - Archive of obsolete content
introduction the purpose of this page is to gather requests for enhancement to the mozilla x
forms implementation.
... if you have an idea that might improve mozilla's x
forms implementation then you should choose one of the following rfe categories and put your request there.
... you can also contact the x
forms team about your request.
...And 17 more matches
Gecko FAQ - Gecko Redirect 1
for more in
formation see the wikipedia article on gecko.
... basically, a layout engine takes content (such as html, xml, image files, applets, and so on) and
formatting in
formation (such as cascading style sheets, presentational html tags, etc.) and displays the
formatted content on the screen.
...
formally, a layout engine defines the placement policy for a document and places content on a page.
...And 17 more matches
Multimedia: Images - Learn web development
previous overview: per
formance next media, namely images and video, account for over 70% of the bytes downloaded for the average website.
... in terms of download per
formance, eliminating media, and reducing file size is the low-hanging fruit.
... this article looks at optimizing image and video to improve web per
formance.
...And 17 more matches
The Firefox codebase: CSS Guidelines
the overriding css section contains more in
formation about this.
...
formatting spacing & indentation 2 spaces indentation is preferred add a space after each comma, except within color functions: linear-gradient(to bottom, black 1px, rgba(255,255,255,0.2) 1px) always add a space before !important.
... using descendant selectors is good practice for per
formance when possible: for example: .autocomplete-item[selected] > .autocomplete-item-title would be more efficient than .autocomplete-item[selected] .autocomplete-item-title overriding css before overriding any css rules, check whether overriding is really needed.
...And 17 more matches
sslerr.html
this page is part of the ssl reference that we are migrating into the
format described in the mdn style guide.
... ssl_error_bad_block_padding -12264 "ssl received a record with bad block padding." ssl was using a block cipher, and the last block in an ssl record had incorrect padding in
formation in it.
... ssl_error_pub_key_size_limit_exceeded -12210 "ssl server attempted to use domestic-grade public key with export cipher suite." on a client socket, this error reports that the remote server has failed to per
form an "ssl step down" for an export cipher.
...And 17 more matches
BluetoothCharacteristicProperties - Web APIs
full support 56notes disabled notes linux and versions of windows earlier than 10.disabled from version 56: this feature is behind the #enable-experimental-web-plat
form-features preference (needs to be set to enabled).
... full support ≤79notes disabled notes linux and versions of windows earlier than 10.disabled from version ≤79: this feature is behind the #enable-experimental-web-plat
form-features preference (needs to be set to enabled).
... full support 56notes disabled notes linux and versions of windows earlier than 10.disabled from version 56: this feature is behind the #enable-experimental-web-plat
form-features preference (needs to be set to enabled).
...And 17 more matches
HTMLButtonElement - Web APIs
only one
form-associated element in a document can have this attribute specified.
... htmlbuttonelement.
form read only is a html
formelement reflecting the
form that this button is associated with.
... if the button is a descendant of a
form element, then this attribute is the id of that
form element.
...And 17 more matches
HTMLInputElement - Web APIs
ect x="331" y="65" width="160" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="411" y="94" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">htmlinputelement</text></a></svg></div> a:hover text { fill: #0095dd; pointer-events: all;} properties properties related to the parent
form form read only html
formelement object: returns a reference to the parent <
form> element.
...
formaction string: returns / sets the element's
formaction attribute, containing the uri of a program that processes in
formation submitted by the element.
... this overrides the action attribute of the parent
form.
...And 17 more matches
Matrix math for the web - Web APIs
matrices can be used to represent trans
formations of objects in space, and are used for per
forming many key types of computation when constructing images and visualizing data on the web.
... this article explores how to create matrices and how to use them with css trans
forms and the matrix3d trans
form type.
... trans
formation matrices there are many types of matrices, but the ones we are interested in are the 3d trans
formation matrices.
...And 17 more matches
Rendering and the WebXR frame animation callback - Web APIs
before you can render the virtual environment, you need to establish a webxr session by creating an xrsession using the navigator.xr.requestsession() method; you also need to associate the session with a framebuffer and per
form other setup tasks.
... kicking off the renderer thus looks like this: let worldrefspace; async function runxr(xrsession) { worldrefspace = await xrsession.requestreferencespace("immersive-vr"); if (worldrefspace) { viewerrefspace = worldrefspace.getoffsetreferencespace( new xrrigidtrans
form(viewerstartposition, viewerstartorientation)); animationframerequestid = xrsession.requestanimationframe(mydrawframe); } } after getting a reference space for the immersive world, this creates an offset reference space representing the position and orientation of the viewer by creating an xrrigidtrans
form representing that position and orientation, then calling the xrreferencespace method...
...this is due to early displays using the ac electrical grid's current flow wave
form, which cycles 60 times per second in the united states (50 in europe), for timing purposes.
...And 17 more matches
Operable - Accessibility
this article provides practical advice on how to write your web content so that it con
forms to the success criteria outlined in the operable principle of the web content accessibility guidelines (wcag) 2.0 and 2.1.
... success criteria how to con
form 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.
...tabbing through
form controls), and you should only build in custom functionality where needed.
...And 17 more matches
<input type="file"> - HTML: Hypertext Markup Language
once chosen, the files can be uploaded to a server using
form submission, or manipulated using javascript code and the file api.
...because a given file type may be identified in more than one manner, it's useful to provide a thorough set of type specifiers when you need files of a given
format.
... for instance, there are a number of ways microsoft word files can be identified, so a site that accepts word files might use an <input> like this: <input type="file" id="docpicker" accept=".doc,.docx,application/msword,application/vnd.openxml
formats-officedocument.wordprocessingml.document"> capture the capture attribute value is a string that specifies which camera to use for capture of image or video data, if the accept attribute indicates that the input should be of one of those types.
...And 17 more matches
passwords - Archive of obsolete content
usage a credential is the set of in
formation a user supplies to authenticate herself with a service.
... you can use the passwords api with three sorts of credentials: add-on credentials html
form credentials http authentication credentials add-on credential these are associated with your add-on rather than a particular web site.
... url for an add-on credential, this property is of the
form: addon:<addon-id>, where <addon-id> is the add-on's program id.
...And 16 more matches
Connecting to Remote Content - Archive of obsolete content
besides xml, it can be used to retrieve data in other
formats, for example json, html and plain text.
... request.open("post", url, true); request.setrequestheader("content-type", "application/x-www-
form-urlencoded"); request.send("data=hello&version=2"); the third parameter for the open method specifies whether the request should be handled asynchronously or not.
... json content json is a very lightweight and simple data representation
format, similar to the object representation used in javascript.
...And 16 more matches
List of Mozilla-Based Applications - Archive of obsolete content
if you have in
formation about a new project or extra in
formation about an existing project, please feel free to update this page.
... a list of
former mozilla-based applications is also available.
... name description additional in
formation 389 directory server ldap server uses nss a380 seatback entertainment system media software this blog post mentions a reference to mozilla being used but i couldn't find more in
formation about it.
...And 16 more matches
Learn XPI Installer Scripting by Example - Archive of obsolete content
in this article, we use the unix install file, but the installers for all the plat
forms are quite similar, and you can easily take what you learn here and apply it to installations on any plat
form that mozilla supports.
...mozilla cross-plat
form installations use the xpi
format as a way to organize, compress, and automate software installations and software updates.
... most installation scripts, including the one discussed here, take the following basic
form (in pseudo-code and with links to the sections in which these installation steps are documented): initinstall(); if (verify_space()) { err = add_dirs_and_files; register_files; if (err==success) { per
forminstall() }; else { cancelinstall() }; } as you can see in the code listing, the verification process at the top is on lines 1 to 18; the file addition process, here part of the m...
...And 16 more matches
Introduction to XUL - Archive of obsolete content
terms "xpfe" is the term mozilla-the-organization is using to describe mozilla-the-browser's cross plat
form front end, because x and c look similar if you beat them long and hard with a hammer.
... the intention is to build cross-plat
form applications like browsers and mail clients from a set of tools designed for that purpose.
... the intention is not to implement a generic cross-plat
form application framework.
...And 16 more matches
Handling common JavaScript problems - Learn web development
this includes in
formation on using browser dev tools to track down and fix problems, using polyfills and libraries to work around problems, getting modern javascript features working in older browsers, and more.
...at this point, the right-hand side will update to show some very useful in
formation.
... we can find out some very useful in
formation in here.
...And 16 more matches
Mozilla's Section 508 Compliance
the united states federal rehabilitation act's section 508 is a new standard for defining accessibility requirements for software and other electronic and in
formation technology.
... the following is provided for in
formational purposes only and is not a legally binding voluntary product accessibility template (vpat).
... is with each one: requirement windows linux/unix mac os requirement windows linux/unix mac os (a) when software is designed to run on a system that has a keyboard, product functions shall be executable from a keyboard where the function itself or the result of per
forming a function can be discerned textually.
...And 16 more matches
NSS API Guidelines
high cert lib/certhigh ocsp.h, ocspt.h crmf provides functions, and data types, to handle certificate management message
format (cmmf) and certificate request message
format (crmf, see rfc 2511) data.
... within pkcs #11, wraps crypto lib/freebl blapi.h, blapit.h jar provides support for reading and writing data in java archive (jar)
format, including zlib compression.
... pkcs #12 lib/pkcs12 pkcs12t.h, pkcs12.h, p12plcy.h, p12.h, p12t.h pkcs7 provides functions and types for encoding and decoding encrypted data in pkcs #7
format.
...And 16 more matches
Handling Mozilla Security Bugs
for more in
formation read the rest of this document.
... introduction in order to improve the mozilla project's approach to resolving mozilla security vulnerabilities, mozilla.org is creating more
formal arrangements for handling mozilla security-related bugs.
... background security vulnerabilities are different from other bugs, because their consequences are potentially so severe: users' private in
formation (including financial in
formation) could be exposed, users' data could be destroyed, and users' systems could be used as plat
forms for attacks on other systems.
...And 16 more matches
Gecko object attributes
this is useful for retrieving micro
format semantics for an element.
...this may provide more in
formation than the mapped role, which is best-fit.
...please see the aria states and properties module for more in
formation.
...And 16 more matches
An Overview of XPCOM
the xpcom solution the cross plat
form component object module (xpcom) is a framework which allows developers to break up monolithic software projects into smaller modularized pieces.
...but xpcom also provides several tools and libraries that enable the loading and manipulation of these components, services that help the developer write modular cross-plat
form code, and versioning support, so that components can be replaced or upgraded without breaking or having to recreate the application.
... xpcom not only supports component software development, it also provides much of the functionality that a development plat
form provides, such as: component management file abstraction object message passing memory management we will discuss the above items in detail in the coming chapters, but for now, it can be useful to think of xpcom as a plat
form for component development, in which features such as those listed above are provided.
...And 16 more matches
nsIAccessibleProvider
xultext 0x0000101a xultextbox 0x0000101b xulthumb 0x0000101c xultree 0x0000101d xultreecolumns 0x0000101e xultreecolumnitem 0x0000101f xultoolbar 0x00001020 xultoolbarseparator 0x00001021 xultooltip 0x00001022 xultoolbarbutton 0x00001023 x
forms elements constants constant value description x
formscontainer 0x00002000 used for x
forms elements that provide accessible object for itself as well for anonymous content.
... this property is used for upload, input[type="xsd:gday"] and input[type="xsd:gmonth"] x
formslabel 0x00002001 used for label element.
... x
formsouput 0x00002002 used for output element.
...And 16 more matches
Migrating from Firebug - Firefox Developer Tools
it shows log in
formation associated with a web page and allows you to execute javascript expressions via its command line.
... copy html and related in
formation firebug's html panel allows to copy the inner and outer html of an element as well as the css and xpath to it via the context menu of an element.
... per
formance tool firebug allows to profile javascript per
formance via the "profile" button within the console panel or the console.profile() and console.profileend() commands.
...And 16 more matches
BluetoothRemoteGATTDescriptor - Web APIs
the bluetoothremotegattdescriptor interface of the web bluetooth api provides a gatt descriptor, which provides further in
formation about a characteristic’s value.
... full support 57notes disabled notes linux and versions of windows earlier than 10.disabled from version 57: this feature is behind the #enable-experimental-web-plat
form-features preference (needs to be set to enabled).
... full support ≤79notes disabled notes linux and versions of windows earlier than 10.disabled from version ≤79: this feature is behind the #enable-experimental-web-plat
form-features preference (needs to be set to enabled).
...And 16 more matches
Using the Resource Timing API - Web APIs
resource timing properties an application developer can use the property values to calculate the length of time a phase takes and that in
formation can help diagnose per
formance issues.
...this timing data provides a detailed profile of the resource loading phases and this data can be used to help identify per
formance bottlenecks.
... function calculate_load_times() { // check per
formance support if (per
formance === undefined) { console.log("= calculate load times: per
formance not supported"); return; } // get a list of "resource" per
formance entries var resources = per
formance.getentriesbytype("resource"); if (resources === undefined || resources.length <= 0) { console.log("= calculate load times: there are no `resource` per
formance records"); return; } console.log("= calculate load times"); for (var i=0; i < resources.length; i++) { console.log("== resource[" + i + "] - " + resources[i].name); // redirect time var t = resources[i].redirectend - resources[i].redirectstart; console.log("...
...And 16 more matches
Spaces and reference spaces: Spatial tracking in WebXR - Web APIs
the hand and/or hand controller; each of these represents one of the user's hands, either in the
form of the hand itself or a controller (or both).
... because each of these is defined using a reference space as its foundation, the webxr device api can easily be used to convert among the coordinate systems, per
form operations affecting these spaces and their corresponding objects, and so forth.
... the first is described above: applying a reference space to an offset (or vice-versa, since the result is the same) to determine the trans
form matrix that represents the resulting location in the space's coordinate system.
...And 16 more matches
Audio and Video Delivery - Developer guides
currently, to support all browsers we need to specify two
formats, although with the adoption of mp3 and mp4
formats in firefox and opera, this is changing fast.
... you can find compatibility in
formation in the guide to media types and
formats on the web.
... to deliver video and audio, the general workflow is usually something like this: check what
format the browser supports via feature detection (usually a choice of two, as stated above).
...And 16 more matches
<input type="radio"> - HTML: Hypertext Markup Language
for example, if your
form needs to ask the user for their preferred contact method, you might create three radio buttons, each with the name property set to contact but one with the value email, one with the value phone, and one with the value mail.
... the resulting html looks like this: <
form> <p>please select your preferred contact method:</p> <div> <input type="radio" id="contactchoice1" name="contact" value="email"> <label for="contactchoice1">email</label> <input type="radio" id="contactchoice2" name="contact" value="phone"> <label for="contactchoice2">phone</label> <input type="radio" id="contactchoice3" name="contact" value="mail"> <label for="contactchoice3">mail</label> </div> <div> <button type="submit">submit</button> </div> </
form> here you see the three radio buttons, each with the name set to contact and each with a unique value that uniquely identifies that individual radio button ...
... you can try out this example here: data representation of a radio group when the above
form is submitted with a radio button selected, the
form's data includes an entry in the
form contact=value.
...And 16 more matches
HTTP Messages - HTTP
http messages are composed of textual in
formation encoded in ascii, and span over multiple lines.
...in http/2, the once human-readable message is now divided up into http frames, providing optimization and per
formance improvements.
... web developers, or webmasters, rarely craft these textual http messages themselves: software, a web browser, proxy, or web server, per
form this action.
...And 16 more matches
Inner-browsing extending the browser navigation paradigm - Archive of obsolete content
extending traditional hypertext navigation the hypertext approach to developing web pages, in which developers
format text layouts into pages and link those pages to related content, is analogous to a book or a magazine: readers view pages, go to other pages for more in
formation, and view resources listed as references on that page.
...without leaving the page, the user browses new in
formation and preserves the page's context.
...good candidates for inner-browsing include a spell check application, in which the text entered in a web page is checked as it is typed; a webmail application that uses the inner-browsing model to display the separate messages and message lists in an integrated way, much like a client mail app; and a stock ticker that spools the in
formation across the web page.
...And 15 more matches
Creating hyperlinks - Learn web development
html text
formatting, as covered in html text fundamentals.
... adding supporting in
formation with the title attribute another attribute you may want to add to your links is title.
... the title contains additional in
formation about the link, such as which kind of in
formation the page contains, or things to be aware of on the web site.
...And 15 more matches
Componentizing our Svelte app - Learn web development
the central objective of this article is to look at how to break our app into manageable components and share in
formation between them.
... objective: to learn how to break our app into components and share in
formation among them.
... moreactions.svelte: the check all and remove completed buttons at the bottom of the ui that allow you to per
form mass actions on the todo items.
...And 15 more matches
About NSPR
netscape portable runtime (nspr) provides plat
form independence for non-gui operating system facilities.
... history a good portion of the library's purpose, and perhaps the primary purpose in the gromit environment, was to provide the underpinnings of the java vm, more or less mapping the sys layer that sun defined for the porting of the java vm to various plat
forms.
... nspr went beyond that requirement in some areas and since it was also the plat
form independent layer for most of the servers produced by netscape.
...And 15 more matches
nsIDOMWindowUtils
when this is set, the aoffset and alength are offset and length in/of the content generated with xp line breaks (i.e., "\n" on all plat
forms).
... query_selected_text 3200 query_selected_text queries the first selection range's in
formation.
... query_character_at_point 3208 query_character_at_point queries the character in
formation at the specified point.
...And 15 more matches
Example and tutorial: Simple synth keyboard - Web APIs
the keyboard allows you to switch among the standard wave
forms as well as one custom wave
form, and you can control the master gain using a volume slider beneath the keyboard.
...for now, we will have two controls: one to set the master volume and another to select what periodic wave
form to use when generating notes.
... the wave
form picker on the right side of the settings bar, we place a label and a <select> element named "wave
form" whose options correspond to the available wave
forms.
...And 15 more matches
ARIA Test Cases - Accessibility
introduction the in
formation on this page is out of date: it was last updated november 2010.
... however, the in
formation might still be useful for some readers.
... there are several purposes for providing this in
formation: help browser vendors provide correct implementations help at vendors provide correct implementations in
form authors as to what actually works reliably in general we're testing with the latest public releases.
...And 15 more matches
Color picker tool - CSS: Cascading Style Sheets
in: 0; border: 1px solid #ddd; background-color: #fff; display: table; -moz-user-select: none; -webkit-user-select: none; -ms-user-select: none; user-select: none; } .ui-color-picker .picking-area { width: 198px; height: 198px; margin: 5px; border: 1px solid #ddd; position: relative; float: left; display: table; } .ui-color-picker .picking-area:hover { cursor: default; } /* hsv
format - hue-saturation-value(brightness) */ .ui-color-picker .picking-area { background: url('https://mdn.mozillademos.org/files/5707/picker_mask_200.png') center center; background: -moz-linear-gradient(bottom, #000 0%, rgba(0, 0, 0, 0) 100%), -moz-linear-gradient(left, #fff 0%, rgba(255, 255, 255, 0) 100%); background: -webkit-linear-gradient(bottom, #000 0%, rgba(0, 0, 0, 0) 100%), -we...
...bkit-linear-gradient(left, #fff 0%, rgba(255, 255, 255, 0) 100%); background: -ms-linear-gradient(bottom, #000 0%, rgba(0, 0, 0, 0) 100%), -ms-linear-gradient(left, #fff 0%, rgba(255, 255, 255, 0) 100%); background: -o-linear-gradient(bottom, #000 0%, rgba(0, 0, 0, 0) 100%), -o-linear-gradient(left, #fff 0%, rgba(255, 255, 255, 0) 100%); background-color: #f00; } /* hsl
format - hue-saturation-lightness */ .ui-color-picker[data-mode='hsl'] .picking-area { background: -moz-linear-gradient(top, hsl(0, 0%, 100%) 0%, hsla(0, 0%, 100%, 0) 50%, hsla(0, 0%, 0%, 0) 50%, hsl(0, 0%, 0%) 100%), -moz-linear-gradient(left, hsl(0, 0%, 50%) 0%, hsla(0, 0%, 50%, 0) 100%); background: -webkit-linear-gradient(top, hsl(0, 0%, 100%) 0%, hsla(0, 0%, 100%, 0) 50%, hsla(0, 0%, 0%...
...: none; user-select: none; } .ui-input-slider * { float: left; height: 100%; line-height: 100%; } /* input slider */ .ui-input-slider > input { margin: 0; padding: 0; width: 50px; text-align: center; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; } .ui-input-slider-info { width: 90px; padding: 0px 10px 0px 0px; text-align: right; text-trans
form: lowercase; } .ui-input-slider-left, .ui-input-slider-right { width: 16px; cursor: pointer; background: url("https://mdn.mozillademos.org/files/5679/arrows.png") center left no-repeat; } .ui-input-slider-right { background: url("https://mdn.mozillademos.org/files/5679/arrows.png") center right no-repeat; } .ui-input-slider-name { width: 90px; padding: 0 10px 0 0; text-align: right; tex...
...And 15 more matches
<input type="hidden"> - HTML: Hypertext Markup Language
<input> elements of type hidden let web developers include data that cannot be seen or modified by users when a
form is submitted.
... value the <input> element's value attribute holds a domstring that contains the hidden data you want to include when the
form is submitted to the server.
...do not rely on hidden inputs as a
form of security.
...And 15 more matches
places/bookmarks - Archive of obsolete content
the second query's properties // are and'd together, so results that are in the plat
form's unsorted // bookmarks folder, and are also tagged with 'mozilla', get returned // as well in this query }); globals constructors bookmark(options) creates an unsaved bookmark instance.
... all of the items passed in are pushed to the plat
form and are either created, updated or deleted.
... adding items: if passing in freshly instantiated bookmark items or a duck-typed object, the item is created on the plat
form.
...And 14 more matches
Working with JSON - Learn web development
previous overview: objects next javascript object notation (json) is a standard text-based
format for representing structured data based on javascript object syntax.
... json is a text-based data
format following javascript object syntax, which was popularized by douglas crockford.
... json structure as described above, a json is a string whose
format very much resembles javascript object literal
format.
...And 14 more matches
Command line crash course - Learn web development
the terminal originates from around the 1950s-60s and its original
form really doesn’t resemble what we use today (for that we should be thankful).
...it provides direct access to the computer’s underlying file system and low-level features, and is therefore incredibly useful for per
forming complex tasks rapidly, if you know what you are doing.
...ename and delete: move around your directory structure: cd create directories: mkdir create files (and modify their metadata): touch copy files: cp move files: mv delete files or directories: rm download files found at specific urls: curl search for fragments of text inside larger bodies of text: grep view a file's contents page by page: less, cat manipulate and trans
form streams of text (for example changing all the instances of <div>s in an html file to <article>): awk, tr, sed note: there are a number of good tutorials on the web that go much deeper into the command line on the web — this is only a brief introduction!
...And 14 more matches
Client-side tooling overview - Learn web development
trans
formation — tools that trans
form code in some way, e.g.
... also well-worth looking at is webhint, a configurable, open-source linter for the web that surfaces best practices including approaches to accessibility, per
formance, cross-browser compatibility via mdn's browser compatibility data, security, testing for pwas, and more.
...you can find more in
formation about it at git and github.
...And 14 more matches
Mozilla’s UAAG evaluation report
checkpoint in
formation (same scaled used on w3c's uaag implementation reports pages) rating scale c: complete implementation vg: very good implementation, almost all requirements satisfied g: good implementation, most important requirements satisfied p: poor implementation, some requirements satisfied and/or difficult for user to access feature ni: not implemented nr: n...
...(p1) vg renders html, css, and a number of graphic image
formats.
...(p2) c when focus and/or selection changes they are in the viewport 5.5 confirm
form submission.
...And 14 more matches
A guide to searching crash reports
specifically, crash-stats offers two basic functions: searching you can search the crash reports database by over 100 criteria: crash signature, date, plat
form, product, version, etc.
... searching the search
form you can get to the search page by clicking on the "super search" link near the toolbar at the top right of any page in crash-stats.
... this brings up a search
form like the one in the following screenshot.
...And 14 more matches
Shell global objects
getsharedarraybuffer per
forms an ordering memory barrier.
...setsharedarraybuffer per
forms an ordering memory barrier.
... enablesinglestepprofiling() this function will fail on plat
forms that don't support single-step profiling (currently everything but arm-simulator).
...And 14 more matches
Starting WebLock
the
format of the name-value pair is left up to you.
... the weblock user interface the weblock component in this tutorial uses xul to define the additional browser ui in a cross-plat
form way, and xul uses javascript to access and control xpcom components, but gecko's pluggable ui allows any user interface to call into gecko and the components you create as easily as you can from xul.
... instead of starting with the implementation, developers use xpidl (see xpidl and type libraries for more in
formation about xpidl) to define the interface to the component: how the functionality should be organized, expressed, and exposed to its clients.
...And 14 more matches
xptcall FAQ
it is implemented using plat
form specific c/c++ and assembly language code.
...porting this code is required in order to make mozilla run on any given plat
form.
...though the chosen approach requires some core plat
form specific code, it has minimal footprint and is extendable to work with any valid xpcom interface without requiring additional per plat
form compiled code to be distributed.
...And 14 more matches
Lighting a WebXR setting - Web APIs
because the webxr device api relies on other technologies—namely, webgl and frameworks based upon it—to per
form all rendering, texturing, and lighting of a scene, the same general lighting concepts apply to webxr settings or scenes as to any other webgl-generated display.
...while there may be more than one of these in a scene, you can probably slightly improve per
formance by combining them into one on your own, since each one will always affect every pixel evenly anyway.
...per
forming the shading for each of these light source types is more computationally demanding than the one before it; so ambient light is the least expensive to apply, followed by directional light sources, point lights, and finally spotlights.
...And 14 more matches
Web Authentication API - Web APIs
similar to the other
forms of the credential management api, the web authentication api has two basic methods that correspond to register and login: navigator.credentials.create() - when used with the publickey option, creates new credentials, either for registering a new account or for associating a new asymmetric key pair credentials with an existing account.
... navigator.credentials.get() - when used with the publickey option, uses an existing set of credentials to authenticate to a service, either logging a user in or as a
form of second-factor authentication.
... in their most basic
forms, both create() and get() receive a very large random number called a challenge from the server and they return the challenge signed by the private key back to the server.
...And 14 more matches
Perceivable - Accessibility
this article provides practical advice on how to write your web content so that it con
forms to the success criteria outlined in the perceivable principle of the web content accessibility guidelines (wcag) 2.0 and 2.1.
... note: to read the w3c definitions for perceivable and its guidelines and success criteria, see principle 1: perceivable - in
formation and user interface components must be presentable to users in ways they can perceive.
... guideline 1.1 — providing text alternatives for non-text content the key here is that text can be converted to other
forms that people with disabilities can use.
...And 14 more matches
Live streaming web audio and video - Developer guides
usually, we require different
formats and special server-side software to achieve this.
...in order to have this capability, we need to use
formats that facilitate this.
... live streaming
formats generally allow adaptive streaming by breaking streams into a series of small segments and making those segments available at different qualities and bit rates.
...And 14 more matches
Index - Developer guides
found 43 pages: # page tags and summary 1 developer guides api, guide, landing, web these articles provide how-to in
formation to help make use of specific web technologies and apis.
...currently, to support all browsers we need to specify two
formats, although with the adoption of mp3 and mp4
formats in firefox and opera, this is changing fast.
... you can find compatibility in
formation in the guide to media types and
formats on the web.
...And 14 more matches
HTML attribute: multiple - HTML: Hypertext Markup Language
the boolean multiple attribute, if set, means the
form control accepts one or more values.
... valid for the email and file input types and the <select>, the manner by which the user opts for multiple values depends on the
form control.
... depending on the type, the
form control may have a different appearance if the multiple attribute is set.
...And 14 more matches
<input type="tel"> - HTML: Hypertext Markup Language
unlike <input type="email"> and <input type="url"> , the input value is not automatically validated to a particular
format before the
form can be submitted, because
formats for telephone numbers vary so much around the world.
... placeholder the placeholder attribute is a string that provides a brief hint to the user as to what kind of in
formation is expected in the field.
... if the control's content has one directionality (ltr or rtl) but needs to present the placeholder in the opposite directionality, you can use unicode bidirectional algorithm
formatting characters to override directionality within the placeholder; see overriding bidi using unicode control characters in the unicode bidirectional text algorithm for those characters.
...And 14 more matches
<input type="text"> - HTML: Hypertext Markup Language
placeholder the placeholder attribute is a string that provides a brief hint to the user as to what kind of in
formation is expected in the field.
... if the control's content has one directionality (ltr or rtl) but needs to present the placeholder in the opposite directionality, you can use unicode bidirectional algorithm
formatting characters to override directionality within the placeholder; see overriding bidi using unicode control characters in the unicode bidirectional text algorithm for those characters.
...it is not as semantically useful as other ways to explain your
form, and can cause unexpected technical issues with your content.
...And 14 more matches
<input type="week"> - HTML: Hypertext Markup Language
the
format of the date and time value used by this input type is described in
format of a valid week string in date and time
formats used in html.
... you can set a default value for the input by including a value inside the value attribute, like so: <label for="week">what week would you like to start?</label> <input id="week" type="week" name="week" value="2017-w01"> one thing to note is that the displayed
format may differ from the actual value, which is always
formatted yyyy-www.
...cept as valid input min the earliest year and week to accept as valid input readonly a boolean which, if present, indicates that the user cannot edit the field's contents step the stepping interval (the distance between allowed values) to use for both user interface and constraint validation max the latest (time-wise) year and week number, in the string
format discussed in the value section above, to accept.
...And 14 more matches
<video>: The Video Embed element - HTML: Hypertext Markup Language
in a similar manner to the <img> element, we include a path to the media we want to display inside the src attribute; we can include other attributes to specify in
formation 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.
...see our autoplay guide for additional in
formation about how to properly use autoplay.
...in other words, it sends the origin: http header without a cookie, x.509 certificate, or per
forming http basic authentication.
...And 14 more matches
HTTP headers - HTTP
http headers let the client and the server pass additional in
formation with an http request or response.
... request headers contain more in
formation about the resource to be fetched, or about the client requesting the resource.
... response headers hold additional in
formation about the response, like its location or about the server providing it.
...And 14 more matches
Date.parse() - JavaScript
there are still many differences in how different hosts parse date strings, therefore date strings should be manually parsed (a library can help if many different
formats are to be accommodated).
... syntax direct call: date.parse(datestring) implicit call: new date(datestring) parameters datestring a string representing a simplification of the iso 8601 calendar date extended
format.
... (other
formats may be used, but results are implementation-dependent.) return value a number representing the milliseconds elapsed since january 1, 1970, 00:00:00 utc and the date obtained by parsing the given string representation of a date.
...And 14 more matches
preserveAspectRatio - SVG: Scalable Vector Graphics
h: 8px; stroke-linecap: round; stroke-linejoin: round; pointer-events: none; } rect:hover, rect:active { outline: 1px solid red; } syntax preserveaspectratio="<align> [<meetorslice>]" its value is made of one or two keywords: a required alignment value and an optional "meet or slice" reference as described below: alignment value the alignment value indicates whether to force uni
form scaling and, if so, the alignment method to use in case the aspect ratio of the viewbox doesn't match the aspect ratio of the viewport.
... the alignment value must be one of the following keywords: none do not force uni
form scaling.
... scale the graphic content of the given element non-uni
formly if necessary such that the element's bounding box exactly matches the viewport rectangle.
...And 14 more matches
WebAssembly Concepts - WebAssembly
webassembly is a new type of code that can be run in modern web browsers and provides new features and major gains in per
formance.
... this has huge implications for the web plat
form — it provides a way to run code written in multiple languages on the web at near-native speed, with client apps running on the web that previously couldn’t have done so.
...javascript frameworks could make use of webassembly to confer massive per
formance advantages and new features while still making functionality easily available to web developers.
...And 14 more matches
Adding preferences to an extension - Archive of obsolete content
its job is to start up the observer to watch for changes to our preferences, instantiate an object to use to manage our preferences, and install an interval routine to update the stock in
formation periodically.
...ion() { // register to receive notifications of preference changes this.prefs = components.classes["@mozilla.org/preferences-service;1"] .getservice(components.interfaces.nsiprefservice) .getbranch("extensions.stockwatcher2."); this.prefs.addobserver("", this, false); this.tickersymbol = this.prefs.getcharpref("symbol").touppercase(); this.refreshin
formation(); window.setinterval(this.refreshin
formation, 10*60*1000); } }, our object has two member variables.
... now that we're monitoring the preferences, we can set up to watch the stock in
formation and display it in the status bar panel.
...And 13 more matches
Creating a dynamic status bar extension - Archive of obsolete content
« previousnext » this article builds upon the article creating a status bar extension, which creates a static status bar panel in the firefox status bar, by dynamically updating its content with in
formation fetched from the web every few minutes.
... specifically, this sample displays a stock quote in the status bar, and, when you mouse over it, displays a tooltip containing more detailed in
formation about the stock.
...8"?> <!doctype overlay> <overlay id="stockwatcher-overlay" xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"> <script type="application/javascript" src="chrome://stockwatcher/content/stockwatcher.js"/> <!-- firefox --> <statusbar id="status-bar"> <statusbarpanel id="stockwatcher" label="loading..." tooltiptext="current value" onclick="stockwatcher.refreshin
formation()" /> </statusbar> </overlay> also, notice that the definition of the status bar panel now includes a new property, onclick, which references the javascript function that will be executed whenever the user clicks on the status bar panel.
...And 13 more matches
JXON - Archive of obsolete content
this is a good and standardized compromise for a javascript usage, since all of the in
formation of an xml document is contained in these node types.
... all other in
formation (like processing instructions, schemas, comments, etc.) will be lost.
... this type of algorithm is still considered lossless, since what is lost is meta-in
formation and not in
formation.
...And 13 more matches
Notes on HTML Reflow - Archive of obsolete content
overview reflow is the process by which the geometry of the layout engine's
formatting objects are computed.
... the html
formatting objects are called frames : a frame corresponds to the geometric in
formation for (roughly) a single element in the content model; the frames are arranged into a hierarchy that parallels the containment hierarchy in the content model.
...reflow proceeds recursively through some or all of the frame hierarchy, computing geometric in
formation for each frame object that requires it.
...And 13 more matches
Creating a Microsummary - Archive of obsolete content
we'll build the xslt trans
form sheet that converts that page into its microsummary, learn how to specify that the generator applies to that page, and find out how to make the generator available for download and installation.
... in each step of revising the trans
form sheet and other code in this tutorial, new material added will be shown in boldface so you can follow along more easily.
...names should be descriptive enough to give users a good idea what in
formation the microsummaries will provide.
...And 13 more matches
Creating a Help Content Pack - Archive of obsolete content
this is still very much a work in progress, tho, and i need to complete the rest of it soon (where "complete" means "use what's there that's good, build on the stuff that's not as good, and add other useful in
formation as necessary".
...this attribute marks the start point in the rdf graph described by the file, and the help viewer searches for this element in order to query for further in
formation (stored in child elements) about the content pack being parsed.
...(we're still not actually to the point where we're describing the actual data in each of these, so we'll just use some filler data for now.) add the following code inside the rdf:description element you just created: <nc:panellist> <rdf:seq> </rdf:seq> </nc:panellist> you'll create the relevant in
formation descriptions within the rdf:seq element.
...And 13 more matches
A XUL Bestiary - Archive of obsolete content
i selected items for this group because they seemed to be either shrouded in mystery, misused as concepts or terms, or underestimated according to their role in xul and cross-plat
form development.
...in general, chrome refers to a xul interface and all of its supporting files; chrome means the xul content and structure, plus the css skin, plus whatever localization and plat
form-specific files are part of that xul interface.
...this special option allows you to create and access chromes independent of the mozilla browser and begins to suggest some possibilities for xul-as-plat
form beyond the simple restyling of the browser.
...And 13 more matches
Using workers in extensions - Archive of obsolete content
« previous this article shows you how to use worker threads in extensions to per
form tasks in the background without blocking the user interface.
... how this differs from previous versions this version of the stock ticker extension moves the xmlhttprequest call that fetches updated stock in
formation into a worker thread, which then passes that in
formation back to the main body of the extension's code to update the display in the status bar.
... this demonstrates not only how to use workers in an extension, but also how to per
form xmlhttprequest in a worker, and how workers and main thread code can pass data back and forth.
...And 13 more matches
Browser Detection and Cross Browser Support - Archive of obsolete content
have a look to the more current article writing forward-compatible websites to find modern in
formations.
...unlike other browsers, gecko is truly cross plat
form and provides consistent behavior across all supported operating systems.
...mozilla/version followed by a comment token which gave additional in
formation regarding the operating system being used, etc.
...And 13 more matches
RDF in Mozilla FAQ - Archive of obsolete content
first, it is a simple, cross-plat
form database for small data stores.
... second, and more importantly, the rdf model is used along with xul templates as an abstract "api" for displaying in
formation.
... where do i find in
formation on open directory ("dmoz")?
...And 13 more matches
Visual typescript game engine - Game development
multiplat
form video chat (for all browsers) implemented.
...networking is based on websocket full-duplex communication only.you must be con
form with classic socket connection methodology.
...* - hackertimer is for better per
formace also based on webworkers.
...And 13 more matches
Fundamental text and font styling - Learn web development
but it was a rare occasion such as this that he did.</p> html { font-size: 10px; } h1 { font-size: 5rem; } p { font-size: 1.5rem; color: red; font-family: helvetica, arial, sans-serif; } font style, font weight, text trans
form, and text decoration css provides four common properties to alter the visual weight/emphasis of text: font-style: used to turn italic text on and off.
... text-trans
form: allows you to set your font to be trans
formed.
... values include: none: prevents any trans
formation.
...And 13 more matches
A first splash into JavaScript - Learn web development
we'll tell you if your guess was too high or too low.</p> <div class="
form"> <label for="guessfield">enter a guess: </label><input type="text" id="guessfield" class="guessfield"> <input type="submit" value="submit guess" class="guesssubmit"> </div> <div class="resultparas"> <p class="guesses"></p> <p class="lastresult"></p> <p class="loworhi"></p> </div> <script> // your javascript goes here let randomnumber = math.floor(math.rand...
...at the moment you'll see a simple heading, paragraph of instructions and
form for entering a guess, but the
form won't currently do anything.
...ts paragraphs in our html, and are used to insert values into the paragraphs later on in the code (note how they are inside a <div> element, which is itself used to select all three later on for resetting, when we restart the game): <div class="resultparas"> <p class="guesses"></p> <p class="lastresult"></p> <p class="loworhi"></p> </div> the next two constants store references to the
form text input and submit button and are used to control submitting the guess later on.
...And 13 more matches
Website security - Learn web development
with great regularity, we hear about websites becoming unavailable due to denial of service attacks, or displaying modified (and often damaging) in
formation on their homepages.
...the more
formal definition of website security is the act/practice of protecting websites from unauthorized access, use, modification, destruction, or disruption.
...as discussed earlier, this gives the attacker all the in
formation they need to enter the site as the target user, potentially making purchases as the user or sharing their contact in
formation.
...And 13 more matches
Introduction to automated testing - Learn web development
this is a great way to per
form tasks like linting and minifying code, adding in css prefixes or transpiling nascent javascript features for maximum cross-browser reach, and so on.
... a new directory somewhere sensible using your file manager ui, or, on a command line, by navigating to the location you want and running the following command: mkdir node-test to make this directory an npm project, you just need to go inside your test directory and initialize it, with the following: cd node-test npm init this second command will ask you many questions to find out the in
formation required to set up the project; you can just select the defaults for now.
... once all the questions have been asked, it will ask you if the in
formation entered is ok.
...And 13 more matches
Software accessibility: Where are we today?
select text, pictures, and other in
formation using a mouse react to sounds played.
...in answer to this problem, many small accessibility hardware and software vendors created products and software which helped people who could not per
form one of the four basic tasks to use common computer applications.
...finally, this technology could be useful to mainstream users, on portable in
formation appliances, or to access in
formation when the eyes are busy elsewhere.
...And 13 more matches
NSS Certificate Download Specification
this document describes the data
formats used by nss 3.x for installing certificates.
... data
formats nss can accept certificates in several
formats.
... binary
formats nss's certificate loader will recognize several binary
formats.
...And 13 more matches
64-bit Compatibility
the following types or typedefs are always 64-bit on 64-bit plat
forms, and 32-bit on 32-bit plat
forms: pointers uintptr_t, intptr_t, ptrdiff_t, (probably) size_t jsval jsuword, jsword length of a string, though the actual length cannot exceed 30 bits jsuintptr, jsintptr, jsptrdiff, jsuptrdiff, jssize, jsuword, jsword (let's not use these, kthx) the following types are 32-bit on 32-bit plat
forms.
... for all intents and purposes they are also 32-bit on 64-bit plat
forms: intn, uintn jsintn, jsuintn, jsbool general problems with pointers when per
forming bitwise operations on pointer values, make sure that both operands are 64-bit.
...for more in
formation and plat
form specific details on virtual address widths, see this article on wikipedia.
...And 13 more matches
JIT Optimization Strategies
this page contains only historic in
formation about this feature.
...provide a repository of jit optimization strategy in
formation which the jit coach tool can parse to display in its ui.
... optimization in
formation is currently collected for the following operations: getproperty (obj.prop) setproperty (obj.prop = val) getelement (obj[elemname]) setelement (obj[elemname] = val) call (func(...)) at each operation site, ionmonkey tries a battery of strategies, from the most optimized but most restrictive to the least optimized but least restrictive.
...And 13 more matches
JSAPI User Guide
see garbage collection below for crucial in
formation on how to use js::values safely.
...second, the application should take steps to reduce the per
formance impact of garbage collection.
... gc per
formance overly frequent garbage collection can be a per
formance issue.
...And 13 more matches
Parser API
visit estree spec for a community ast standard that includes latest ecmascript features and is backward-compatible with spidermonkey
format.
... additional options may be provided via the options object, which can include any of the following properties: loc boolean default: true when loc is true, the parser includes source location in
formation in the returned ast nodes.
...this string is not meaningful to the parsing process, but is produced as part of the source location in
formation in the returned ast nodes.
...And 13 more matches
Places utilities for JavaScript
description_anno - this annotation stores description in
formation about a bookmark.
... post_data_anno - i need to clarify here, but i think this is the name of the annotation that stores in
formation for keyword searches from a bookmark.
... placesutils method overview nsiuri createfixeduri(string aspec); string get
formattedstring(string key, string params); string getstring(string key); boolean nodeisfolder(nsinavhistoryresultnode anode); boolean nodeisbookmark(nsinavhistoryresultnode anode); boolean nodeisseparator(nsinavhistoryresultnode anode); boolean nodeisvisit(nsinavhistoryresultnode anode); boolean nodeisuri(nsinavhistoryresultnode anode); b...
...And 13 more matches
nsIAccessibleRole
accessible/public/nsiaccessiblerole.idlscriptable this interface defines cross plat
form (gecko) roles.
...the role is used by xul:browsermessage, role="alert", x
forms:message.
... role_menupopup 11 represents a menu, which presents a list of options from which the user can make a selection to per
form an action.
...And 13 more matches
Using the CSS Typed Object Model - Web APIs
the css typed object model api exposes css values as typed javascript objects to allow their per
formant manipulation.
... converting css object model value strings into meaningfully-typed javascript representations and back (via htmlelement.style) can incur a significant per
formance overhead.
... the css typed om makes css manipulation more logical and per
formant by providing object features (rather than cssom string manipulation), providing access to types, methods, and an object model for css values.
...And 13 more matches
The HTML autocomplete attribute - HTML: Hypertext Markup Language
the html autocomplete attribute is available on <input> elements that take a text or numeric value as input, <textarea> elements, <select> elements, and <
form> elements.
... autocomplete lets web developers specify what if any permission the user agent has to provide automated assistance in filling out
form field values, as well as guidance to the browser as to the type of in
formation expected in the field.
...perhaps the browser offers the ability to save encrypted credit card in
formation, for autocompletion following an authentication procedure.
...And 13 more matches
<input type="password"> - HTML: Hypertext Markup Language
note: any
forms involving sensitive in
formation like passwords (e.g.
... login
forms) should be served over https; many browsers now implement mechanisms to warn against insecure login
forms; see insecure passwords.
... if the pattern attribute is specified, the content of a password control is only considered valid if the value passes validation; see validation for more in
formation.
...And 13 more matches
A re-introduction to JavaScript (JS tutorial) - JavaScript
many parts of the fourth edition
formed the basis for ecmascript edition 5, published in december of 2009, and for the 6th major edition of the standard, published in june of 2015.
... numbers numbers in javascript are "double-precision 64-bit
format ieee 754 values", according to the spec — there's no such thing as an integer in javascript (except bigint), so you have to be a little careful.
... also, watch out for stuff like: 0.1 + 0.2 == 0.30000000000000004; in practice, integer values are treated as 32-bit ints, and some implementations even store it that way until they are asked to per
form an instruction that's valid on a number but not on a 32-bit integer.
...And 13 more matches
String.prototype.normalize() - JavaScript
the normalize() method returns the unicode normalization
form of the string.
... syntax str.normalize([
form]) parameters
form optional one of "nfc", "nfd", "nfkc", or "nfkd", specifying the unicode normalization
form.
... return value a string containing the unicode normalization
form of the given string.
...And 13 more matches
Authoring MathML - MathML
to use it, just insert one line in your document header: <script src="https://fred-wang.github.io/mathml.css/mspace.js"></script> if you need more complex constructions, you might instead consider using the heavier mathjax library as a mathml polyfill: <script src="https://fred-wang.github.io/mathjax.js/mpadded-min.js"></script> note that these two scripts per
form feature detection of the mspace or mpadded elements (see the browser compatibility table on these pages).
... mathml in xml documents (xhtml, epub, etc) if for some reason you need to use mathml in xml documents, be sure to satisfy the usual requirements: well-
formed document, use of correct mime type, mathml namespace "http://www.w3.org/1998/math/mathml" on <math> roots.
...http://www.w3.org/1999/xhtml"> <head> <title>xhtml+mathml example</title> </head> <body> <h1>xhtml+mathml example</h1> <p> square root of two: <math xmlns="http://www.w3.org/1998/math/mathml"> <msqrt> <mn>2</mn> </msqrt> </math> </p> </body> </html> mathml in email and instant messaging clients modern mail clients may send and receive emails in the html5
format and thus can use mathml expressions.
...And 13 more matches
Manifest Files - Archive of obsolete content
now, all you need to do is add some xul files into that new directory, and you will be able to load them by typing in a chrome url of the
form chrome://tests/content/<filename>.
...for more in
formation about this feature, see xpcnativewrapper.
...for more in
formation about themes, see themes.
...And 12 more matches
HTML: A good basis for accessibility - Learn web development
r="#ffffff"> <td width="200"> <a href="#" align="center">home</a> </td> <td width="200"> <a href="#" align="center">our team</a> </td> <td width="200"> <a href="#" align="center">projects</a> </td> <td width="200"> <a href="#" align="center">contact</a> </td> <td width="300"> <
form width="300"> <input type="search" name="q" placeholder="search query" width="300"> </
form> </td> <td width="100"> <button width="100">go!</button> </td> </tr> <!-- spacer row --> <tr id="spacer" height="10"> <td> </td> </tr> <!-- main content and aside row --> <tr id="main"> <td id...
... ui controls by ui controls, we mean the main parts of web documents that users interact with — most commonly buttons, links, and
form controls.
...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.
...And 12 more matches
HTML: A good basis for accessibility - Learn web development
r="#ffffff"> <td width="200"> <a href="#" align="center">home</a> </td> <td width="200"> <a href="#" align="center">our team</a> </td> <td width="200"> <a href="#" align="center">projects</a> </td> <td width="200"> <a href="#" align="center">contact</a> </td> <td width="300"> <
form width="300"> <input type="search" name="q" placeholder="search query" width="300"> </
form> </td> <td width="100"> <button width="100">go!</button> </td> </tr> <!-- spacer row --> <tr id="spacer" height="10"> <td> </td> </tr> <!-- main content and aside row --> <tr id="main"> <td id...
... ui controls by ui controls, we mean the main parts of web documents that users interact with — most commonly buttons, links, and
form controls.
...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.
...And 12 more matches
Localization content best practices
note: if you're a localizer and you want to contribute to the localization of mozilla products, you might want to read our localization quick start guide for in
formation on localizing mozilla code.
... localization files choose good key ids the ids (names) chosen for your keys, regardless of the file
format, should always be descriptive of the string, and its role in the interface (button label, title, etc.).
... there is an established
format for localization comments: it's important to follow the
format as closely as possible, since there are a number of automated tools that parse these comments for easier access and use by localizers.
...And 12 more matches
Introduction to NSPR
the netscape portable runtime (nspr) api allows compliant applications to use system facilities such as threads, thread synchronization, i/o, interval timing, atomic operations, and several other low-level services in a plat
form-independent manner.
... nspr does not provide a plat
form for porting existing code.
...for more in
formation, see thread scheduling.
...And 12 more matches
WebIDL bindings
the configuration file, dom/bindings/bindings.conf, is basically a python dict that maps interface names to in
formation about the interface, called a descriptor.
...(this allows the return value to be implicitly converted to a parentobject instance by the compiler via one of that class's non-explicit constructors.) if many instances of myinterface are expected to be created quicky, the return value of getparentobject should itself inherit from nswrappercache for optimal per
formance.
... add an entry to dom/bindings/bindings.conf that sets some basic in
formation about the implementation of the interface.
...And 12 more matches
Network request details - Firefox Developer Tools
this pane provides more detailed in
formation about the request.
... network request details clicking on a row displays a new pane in the right-hand side of the network monitor, which provides more detailed in
formation about the request.
... this includes: in
formation about the request status: the response status code for the request; click the "?" icon to go to the reference page for the status code.
...And 12 more matches
Frame Timing API - Web APIs
the per
formanceframetiming interface provides frame timing data about the browser's event loop.
... an application can register a per
formanceobserver for "frame" per
formance entry types.
... the observer (callback) will be notified when new "frame" events are added to the browser's per
formance timeline and the frame's duration (length of time) will be available.
...And 12 more matches
Using IndexedDB - Web APIs
(note that this will delete the in
formation in the object store!
... if you need to save that in
formation, you should read it out and save it somewhere else before upgrading the database.) trying to create an object store with a name that already exists (or trying to delete an object store with a name that does not already exist) will throw an error.
...for more in
formation on how to upgrade the version of the database in older webkit/blink, see the idbdatabase reference article.
...And 12 more matches
Key Values - Web APIs
corresponding virtual keycodes for common plat
forms are included where available.
... this can happen due to hardware or software constraints, or because of constraints around the plat
form on which the user agent is running.
... appcommand_undo gdk_key_undo (0xff65) [1] on keyboards without a dedicated del key, the mac generates the "delete" value when fn is pressed in tandem with delete (which is backspace on other plat
forms).
...And 12 more matches
A basic 2D WebGL animation example - Web APIs
<script id="vertex-shader" type="x-shader/x-vertex"> attribute vec2 avertexposition; uni
form vec2 uscalingfactor; uni
form vec2 urotationvector; void main() { vec2 rotatedposition = vec2( avertexposition.x * urotationvector.y + avertexposition.y * urotationvector.x, avertexposition.y * urotationvector.y - avertexposition.x * urotationvector.x ); gl_position = vec4(rotatedposition * uscalingfactor, 0.0, 1.0); } </script> the main pro...
... we're also rotating the shape, and we can do that here, by applying a trans
form.
...the rotated position of the vertex is computed by applying the rotation vector, found in the uni
form urotationvector, that's been computed by the javascript code.
...And 12 more matches
Rich-Text Editing in Mozilla - Developer guides
more in
formation can be found in the rich text editing section of migrate apps from internet explorer to mozilla.
...cument('editorwindow').execcommand(aname,false, aarg); document.getelementbyid('editorwindow').contentwindow.focus() } example: a simple but complete rich text editor <!doctype html> <html> <head> <title>rich text editor</title> <script type="text/javascript"> var odoc, sdeftxt; function initdoc() { odoc = document.getelementbyid("textbox"); sdeftxt = odoc.innerhtml; if (document.comp
form.switchmode.checked) { setdocmode(true); } } function
formatdoc(scmd, svalue) { if (validatemode()) { document.execcommand(scmd, false, svalue); odoc.focus(); } } function validatemode() { if (!document.comp
form.switchmode.checked) { return true ; } alert("uncheck \"show html\"."); odoc.focus(); return false; } function setdocmode(btosource) { var ocontent; if (btosource) { oc...
...e type="text/css"> .intlink { cursor: pointer; } img.intlink { border: 0; } #toolbar1 select { font-size:10px; } #textbox { width: 540px; height: 200px; border: 1px #000000 solid; padding: 12px; overflow: scroll; } #textbox #sourcetext { padding: 0; margin: 0; min-width: 498px; min-height: 200px; } #editmode label { cursor: pointer; } </style> </head> <body onload="initdoc();"> <
form name="comp
form" method="post" action="sample.php" onsubmit="if(validatemode()){this.mydoc.value=odoc.innerhtml;return true;}return false;"> <input type="hidden" name="mydoc"> <div id="toolbar1"> <select onchange="
formatdoc('
formatblock',this[this.selectedindex].value);this.selectedindex=0;"> <option selected>-
formatting -</option> <option value="h1">title 1 <h1></option> <option value="h2"...
...And 12 more matches
Making content editable - Developer guides
by using some javascript event handlers, you can trans
form your web page into a full and fast rich text editor.
... this article provides some in
formation about this functionality.
...lowclipboard.clipboard.cutcopy", "allaccess"); user_pref("capability.policy.allowclipboard.clipboard.paste", "allaccess"); example: a simple but complete rich text editor <!doctype html> <html> <head> <title>rich text editor</title> <script type="text/javascript"> var odoc, sdeftxt; function initdoc() { odoc = document.getelementbyid("textbox"); sdeftxt = odoc.innerhtml; if (document.comp
form.switchmode.checked) { setdocmode(true); } } function
formatdoc(scmd, svalue) { if (validatemode()) { document.execcommand(scmd, false, svalue); odoc.focus(); } } function validatemode() { if (!document.comp
form.switchmode.checked) { return true ; } alert("uncheck \"show html\"."); odoc.focus(); return false; } function setdocmode(btosource) { var ocontent; if (btosource) { oc...
...And 12 more matches
HTML5 - Developer guides
per
formance and integration: providing greater speed optimization and better usage of computer hardware.
...
forms improvements a look at the constraint validation api, several new attributes, new values for the <input> attribute type and the new <output> element.
... new semantic elements beside sections, media and
forms elements, there are numerous new elements, like <mark>, <figure>, <figcaption>, <data>, <time>, <output>, <progress>, or <meter> and <main>, increasing the number of valid html5 elements.
...And 12 more matches
Browser detection using the user agent - HTTP
var camelcaseexpression = new regexp("(?<=[a-z])"); var splitupstring = function(str) { return (""+str).split(camelcaseexpression); }; } else { /*this fallback code is much less per
formant, but works*/ var splitupstring = function(str){ return str.replace(/[a-z]/g,"z$1").split(/z(?=[a-z])/g); }; } console.log(splitupstring("foobare")); // ["foob", "are"] console.log(splitupstring("jqwhy")); // ["jq", "w", "hy"] the above code would have made several incorrect assumptions: it assumed that all user agent strings that include the substring "chrome" are chrome...
...using this in
formation of whether the device has a touchscreen, do not change the entire layout of the website just for touch devices: you will only create more work and maintenance for yourself.
...what you want to do for screen size is not slash off in
formation on smaller screens.
...And 12 more matches
An overview of HTTP - HTTP
due to its extensibility, it is used to not only fetch hypertext documents, but also images and videos or to post content to servers, like with html
form results.
...between the client and the server there are numerous entities, collectively called proxies, which per
form different operations and act as gateways or caches, for example.
...this role is primarily per
formed by the web browser; other possibilities are programs used by engineers and web developers to debug their applications.
...And 12 more matches
Functions - JavaScript
a function in javascript is similar to a procedure—a set of statements that per
forms a task or calculates a value, but for a procedure to qualify as a function, it should take some input and return an output where there is some obvious relationship between the input and the output.
... calling the function actually per
forms the specified actions with the indicated parameters.
... it also
forms a closure.
...And 12 more matches
Lexical grammar - JavaScript
unicode
format-control characters code point name abbreviation description u+200c zero width non-joiner <zwnj> placed between characters to prevent being connected into ligatures in certain languages (wikipedia).
... u+200d zero width joiner <zwj> placed between characters that would not normally be connected in order to cause the characters to be rendered using their connected
form in certain languages (wikipedia).
... white space characters code point name abbreviation description escape sequence u+0009 character tabulation <ht> horizontal tabulation \t u+000b line tabulation <vt> vertical tabulation \v u+000c
form feed <ff> page breaking control character (wikipedia).
...And 12 more matches
MMgc - Archive of obsolete content
see zeroing rcobjects for more in
formation.
...to allocate a managed (gc) object, you must use the parameterized
form of operator new, and pass it a reference to the mmgc::gc object.
...the reason is that our collector zeroes memory upon free and this was hurting per
formance.
...And 11 more matches
MCD, Mission Control Desktop, AKA AutoConfig - Archive of obsolete content
at/rpms/i386/thunderbird-1.0.2-1.3.3.i386.rpm after instillation, autoconfig is finally back here: $ rpm -ql thunderbird | grep autoconfig /usr/lib/thunderbird-1.0.2/chrome/locale/autoconfig /usr/lib/thunderbird-1.0.2/components/autoconfig.xpt /usr/lib/thunderbird-1.0.2/components/libautoconfig.so /usr/lib/thunderbird-1.0.2/defaults/autoconfig /usr/lib/thunderbird-1.0.2/defaults/autoconfig/plat
form.js /usr/lib/thunderbird-1.0.2/defaults/autoconfig/prefcalls.js bugs reports related for the record, for old 1.0.x releases...
...how as it been compiled?) about:buildconfig build plat
form target i686-pc-linux-gnu build tools compiler version compiler flags gcc gcc version 3.4.3 20050227 (red hat 3.4.3-22.fc3) -wall -w -wno-unused -wpointer-arith -wcast-align -wno-long-long -pedantic -pthread -pipe c++ gcc version 3.4.3 20050227 (red hat 3.4.3-22.fc3) -fno-rtti -fno-exceptions -wall -wconversion -wpointer-arith -wcast-align -woverloaded-virtual -wsynth -wno-ctor-dtor-privacy -wno-...
...non-virtual-dtor -wno-long-long -pedantic -fshort-wchar -pthread -pipe -i/usr/x11r6/include configure arguments --disable-mailnews --enable-extensions=cookie,xml-rpc,xmlextras,pref,trans
formiix,universalchardet,webservices,inspector,gnomevfs,negotiateauth --enable-crypto --disable-composer --enable-single-profile --disable-profilesharing --with-system-jpeg --with-system-zlib --with-system-png --with-pthreads --disable-tests --disable-jsd --disable-installer '--enable-optimize=-os -g -pipe -m32 -march=i386 -mtune=pentium4' --enable-xft --enable-xinerama --enable-default-toolkit=gtk2 --enable-official-branding --disable-xprint --disable-strip --enable-pango autoconf.js [root@b008-02 /usr/lib/firefox-1.5.0.2] $tail -4 greprefs/autoconf.js // autoconfig jehan pref('general.config.obscure_value...
...And 11 more matches
Using XPInstall to Install Plugins - Archive of obsolete content
xpinstall is a javascript-based installer technology that works across all the plat
forms that mozilla and netscape browsers based on mozilla (such as netscape 7) are deployed.
... a definition of terms xpinstall is an installer technology, and the name itself stands for "cross plat
form install" (hence "xp" -- an abbreviation for "cross plat
form").
...since the file
format that contains the software and the install.js javascript file is a cross-plat
form file (zip) and since javascript is understood by mozilla browsers on all plat
forms, often one single xpi package can be deployed on all plat
forms.
...And 11 more matches
Mobile accessibility - Learn web development
previous overview: accessibility next with web access on mobile devices being so popular and renowned plat
forms such as ios and android having full-fledged accessibility tools, it is important to consider the accessibility of your web content on these plat
forms.
... these days, mobile devices can usually handle fully-featured websites, and the main plat
forms even have screenreaders built in to enable visually impaired users to use them successfully.
... user input — make user input requirements as painless as possible on mobile (e.g., in
forms, keep typing to a minimum).
...And 11 more matches
What is JavaScript? - Learn web development
a high-level definition javascript is a scripting or programming language that allows you to implement complex features on web pages — every time a web page does more than just sit there and display static in
formation for you to look at — displaying timely content updates, interactive maps, animated 2d/3d graphics, scrolling video jukeboxes, etc.
...we can mark it up using html to give it structure and purpose: <p>player 1: chris</p> then we can add some css into the mix to get it looking nice: p { font-family: 'helvetica neue', helvetica, sans-serif; letter-spacing: 1px; text-trans
form: uppercase; text-align: center; border: 2px solid rgba(0,0,200,0.6); background: rgba(0,0,200,0.3); color: rgba(0,0,200,0.6); box-shadow: 1px 1px 2px rgba(0,0,200,0.4); border-radius: 10px; padding: 3px 10px; display: inline-block; cursor: pointer; } and finally, we can add some javascript to implement dynamic behaviour: const para = document.queryselector('p'); para.addeve...
... the geolocation api retrieves geographical in
formation.
...And 11 more matches
Strategies for carrying out testing - Learn web development
by coding defensively, we mean trying to build in intelligent fallbacks so that if a feature or style doesn't work in a browser, the site will be able to downgrade to something less exciting that still provides an acceptable user experience — the core in
formation is still accessible, for example, even if it doesn't look quite as nice.
...test, and provide a more basic experience that gives full access to core in
formation and services.
... throughout the following sections, we'll build up a support chart in this
format.
...And 11 more matches
Error codes returned by Mozilla APIs
ns_error_abort (0x80004004) this error indicates that an operation failed and the caller should abort whatever action is being per
formed.
...s (0xc1f30100) ns_error_factory_no_signature_support (0xc1f30101) ns_error_proxy_invalid_in_parameter (0x80010010) ns_error_proxy_invalid_out_parameter (0x80010011) ns_error_cannot_convert_data (0x80460001) ns_error_object_is_immutable (0x80460002) ns_error_loss_of_significant_data (0x80460003) ns_error_illegal_during_shutdown (0x8046001e) many operations cannot be per
formed once the application is being shutdown.
... ns_error_file_unrecognized_path (0x80520001) this error occurs when an attempt is made to set a path that isn't valid for the plat
form.
...And 11 more matches
Experimental features in Firefox
these nightly builds of firefox typically include experimental or partially-implemented features, including those for proposed or cutting-edge web plat
form standards.
... this page lists features that are in nightly versions of firefox along with in
formation on how to activate them, if necessary.
... nightly 75 yes developer edition 75 no beta 75 no release 75 no preference name dom.
forms.inputmode <link rel="preload"> the <link> element's rel attribute is intended to help provide per
formance gains by letting you download resources earlier in the page lifecycle, ensuring that they're available earlier and are less likely to block page rendering.
...And 11 more matches
Network Security Services
network security services (nss) is a set of libraries designed to support cross-plat
form development of security-enabled client and server applications.
... for detailed in
formation on standards supported, see overview of nss.
...for in
formation on downloading nss releases as tar files, see download pki source.
...And 11 more matches
JS_ConvertArguments
syntax bool js_convertarguments(jscontext *cx, const js::callargs &args, const char *
format, ...); // added in spidermonkey 31 bool js_convertarguments(jscontext *cx, unsigned argc, jsval *argv, const char *
format, ...); // obsolete since jsapi 30 name type description cx jscontext * the context in which to per
form any necessary conversions.
... cx also affects the interpretation of
format, if js_addargument
formatter has been called.
...(the purpose is to ensure gc safety.)
format const char * null-terminated string describing the types of the out parameters and how to convert the values in argv.
...And 11 more matches
AT APIs Support
we provide for them the support of these products on windows, linux/unix and os x plat
forms.
... on windows plat
form 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 browser available on the windows plat
form on linux/unix plat
form yelp help viewer - the help viewer in gnome evolution email - provides integrated mail, addressbook and calendaring functionality to users of the gnome desktop.
...And 11 more matches
Observer Notifications
see receiving startup notifications for more in
formation about how this works.
... topic description browser:purge-session-history sent when the sanitizer runs to purge all history and other in
formation.
... browser:purge-domain-data sent after domain-specific history and other in
formation have been purged.
...And 11 more matches
imgIEncoder
1.0 66 introduced gecko 1.8 inherits from: nsiasyncinputstream last changed in gecko 1.9 (firefox 3) method overview void addimageframe( [array, size_is(length), const] in pruint8 data, in unsigned long length, in pruint32 width, in pruint32 height, in pruint32 stride, in pruint32 frame
format, in astring frameoptions); void encodeclipboardimage(in nsiclipboardimage aclipboardimage, out nsifile aimagefile); obsolete since gecko 1.9 void endimageencode(); void initfromdata([array, size_is(length), const] in pruint8 data, in unsigned long length, in pruint32 width, in pruint32 height, in pruint32 stride, in pruint32 input
format, in astring outputoptions); void startimageenco...
...de(in pruint32 width, in pruint32 height, in pruint32 input
format, in astring outputoptions); constants possible values for input
format (note that not all image
formats support saving alpha channels): constant value description input_
format_rgb 0 input is rgb each pixel is represented by three bytes: r, g, and b (in that order, regardless of host endianness) input_
format_rgba 1 input is rgb each pixel is represented by four bytes: r, g, and b (in that order, regardless of host endianness).
... post-multiplied alpha us used (for example 50% transparent red is 0xff000080) input_
format_hostargb 2 input is host-endian argb: on big-endian machines each pixel is therefore argb, and for little-endian machiens (intel) each pixel is bgra (this is used by canvas to match it's internal representation) pre-multiplied alpha is used (that is, 50% transparent red is 0x80800000, not 0x80ff0000) possible values for outputoptions.
...And 11 more matches
nsIAnnotationService
use the
form "namespace/value", so your name would be like "bills_extension/page_state" or "history/thumbnail".
...use the
form "namespace/value", so your name would be like "bills_extension/page_state" or "history/thumbnail".
...use the
form "namespace/value", so your name would be like "bills_extension/page_state" or "history/thumbnail".
...And 11 more matches
Reference Manual
in debug builds, if you subvert this invariant with one of the assignment
forms that doesn't call queryinterface, nscomptr will assert at runtime in the bad assignment.
... to help prevent this, we are trying to make the first
form, above, illegal by making operator& private.
...unit tests the unit tests for nscomptr can be found in the file /xpcom/tests/testcomptr.cpp initialization and assignment built-in
forms assignment into, or initialization of an nscomptr is easy to understand.
...And 11 more matches
Xptcall Porting Guide
it does this using plat
form specific assembly language code.
... this code needs to be ported to all plat
forms that want to support xptcall (and thus mozilla).
... the tree mozilla/xpcom/reflect/xptcall +--public // exported headers +--src // core source | \--md // plat
form specific parts | +--mac // mac ppc | +--unix // all unix | \--win32 // win32 | +--test // simple tests to get started \--tests // full tests via api porters are free to create subdirectories under the base md directory for their given plat
forms and to integrate into the build system as appropriate for their plat
form.
...And 11 more matches
Index
address book examples show how to per
form various tasks and provide code snippets.
...pizzarro <rhp@netscape.com> 10 autoconfiguration in thunderbird administration, enterprise author: ben bucksch please do not change this document without consulting the author 11 autoconfig file
format no summary!
... 12 autoconfig file
format definition please see https://wiki.mozilla.org/thunderbird:autoconfiguration:configfile
format.
...And 11 more matches
Work with animations - Firefox Developer Tools
if you hover over the bar, a tooltip appears, giving you more detailed in
formation about the animation or transition, including: the type of animation: css transition, css animation, or web animations api the duration of the animation the animation's start and end delay the animation's easing (or timing function).
... the animation's fill the playback rate of the animation in
formation about the animated element to the left of each bar is a selector for the element that the animation applies to.
...for example, try clicking on the bar for img#icon's animation: this is telling us that two properties were modified: filter and trans
form.
...And 11 more matches
Animating CSS properties - Firefox Developer Tools
the per
formance cost of animating a css property can vary from one property to another, and animating expensive css properties can result in jank as the browser struggles to hit a smooth frame rate.
... the frame rate and waterfall can give you insight into the work the browser's doing in a css animation, to help diagnose per
formance problems.
...they can also give better per
formance, as they give the browser more control over when to render frames, and to drop frames if necessary.
...And 11 more matches
Using Navigation Timing - Web APIs
the navigation timing api lets you easily obtain detailed and highly accurate timing in
formation to help isolate per
formance problems with your site's code or resources.
... unlike other tools or libraries, the navigation timing api lets you gather in
formation that only the browser can provide at a level of accuracy much improved over other techniques.
... it also offers the advantage of being able to provide timing in
formation as perceived by the user rather than data that has no correlation to what the user experiences.
...And 11 more matches
SubtleCrypto.unwrapKey() - Web APIs
as with subtlecrypto.importkey(), you specify the key's import
format and other attributes of the key to import details such as whether it is extractable, and which operations it can be used for.
... syntax const result = crypto.subtle.unwrapkey(
format, wrappedkey, unwrappingkey, unwrapalgo, unwrappedkeyalgo, extractable, keyusages ); parameters
format is a string describing the data
format of the key to unwrap.
... it can be one of the following: raw: raw
format.
...And 11 more matches
Web audio spatialization basics - Web APIs
first, we'll get references to the elements we want to move, then we'll store references to the values we'll change when we set up css trans
forms to actually do the movement.
... finally, we'll set some bounds so our boombox doesn't move too far in any direction: const movecontrols = document.queryselector('#move-controls').queryselectorall('button'); const boombox = document.queryselector('.boombox-body'); // the values for our css trans
forms let trans
form = { xaxis: 0, yaxis: 0, zaxis: 0.8, rotatex: 0, rotatey: 0 } // set our bounds const topbound = -posy; const bottombound = posy; const rightbound = posx; const leftbound = -posx; const innerbound = 0.1; const outerbound = 1.5; let's create a function that takes the direction we want to move as a parameter, and both modifies the css trans
form and updates the position and orientation values of our panner node properties to change the sound as appropriate.
... function moveboombox(direction) { switch (direction) { case 'left': if (trans
form.xaxis > leftbound) { trans
form.xaxis -= 5; panner.positionx.value -= 0.1; } break; case 'up': if (trans
form.yaxis > topbound) { trans
form.yaxis -= 5; panner.positiony.value -= 0.3; } break; case 'right': if (trans
form.xaxis < rightbound) { trans
form.xaxis += 5; panner.positionx.value += 0.1; } break; case...
...And 11 more matches
Block and inline layout in normal flow - CSS: Cascading Style Sheets
normal flow is defined in the css 2.1 specification, which explains that any boxes in normal flow will be part of a
formatting context.
...we describe block-level boxes as participating in a block
formatting context, and inline-level boxes as participating in an inline
formatting context.
... the behaviour of elements which have a block or inline
formatting context is also defined in this specification.
...And 11 more matches
list-style-type - CSS: Cascading Style Sheets
syntax /* partial list of types */ list-style-type: disc; list-style-type: circle; list-style-type: square; list-style-type: decimal; list-style-type: georgian; list-style-type: trad-chinese-in
formal; list-style-type: kannada; /* <string> value */ list-style-type: '-'; /* identifier matching an @counter-style rule */ list-style-type: custom-counter-style; /* keyword value */ list-style-type: none; /* global values */ list-style-type: inherit; list-style-type: initial; list-style-type: unset; the list-style-type property may be defined as any one of: a <custom-ident> value a symbol...
... the cjk-ideographic is identical to trad-chinese-in
formal; it exists for legacy reasons.
...ndic -moz-arabic-indic example armenian traditional armenian numbering (ayb/ayp, ben/pen, gim/keem… bengali -moz-bengali example cambodian * example is a synonym for khmer cjk-earthly-branch -moz-cjk-earthly-branch example cjk-heavenly-stem -moz-cjk-heavenly-stem example cjk-ideographic identical to trad-chinese-in
formal e.g.
...And 11 more matches
<img>: The Image Embed element - HTML: Hypertext Markup Language
supported image
formats the html standard doesn't list what image
formats to support, so each user agent supports different
formats.
... a complete guide to image
formats supported by web browsers is available.
... below is a list of the image
formats that are most commonly used on the web, as well as some older
formats that should no longer be used, despite existing content possibly still using them.
...And 11 more matches
<input type="checkbox"> - HTML: Hypertext Markup Language
<input> elements of type checkbox are rendered by default as boxes that are checked (ticked) when activated, like you might see in an official government paper
form.
...a checkbox allows you to select single values for submission in a
form (or not).
...take the following example: <
form> <div> <input type="checkbox" id="subscribenews" name="subscribe" value="newsletter"> <label for="subscribenews">subscribe to newsletter?</label> </div> <div> <button type="submit">subscribe</button> </div> </
form> in this example, we've got a name of subscribe, and a value of newsletter.
...And 11 more matches
d - SVG: Scalable Vector Graphics
formula: pn = {x, y} m (dx, dy)+ move the current point by shifting the last known position of the path by dx along the x-axis and by dy along the y-axis.
...
formula: pn = {xo + dx, yo + dy} examples html,body,svg { height:100% } <svg viewbox="0 0 100 100" xmlns="http://www.w3.org/2000/svg"> <path fill="none" stroke="red" d="m 10,10 h 10 m 0,10 h 10 m 0,10 h 10 m 40,20 h 10 m 0,10 h 10 m 0,10 h 10 m 0,10 h 10 m 50,50 h 10 m-20,10 h 10 m-20,10 h 10 m-20,10 h 10" /> </svg> lineto path commands lineto instructions draw a straight line from the current point (po; {xo, yo}) to the end point (pn; {xn, yn}), based on the parameters specified.
...
formula: po′ = pn = {x, y} l (dx, dy)+ draw a line from the current point to the end point, which is the current point shifted by dx along the x-axis and dy along the y-axis.
...And 11 more matches
Structure of an installable bundle - Archive of obsolete content
basic structure of a bundle a bundle may include any of the following files: path from the root of the bundle description version in
formation /install.rdf extension/theme install manifest /application.ini application launch manifest /bootstrap.js the bootstrap script for extensions not requiring a restart (those with <em:bootstrap>true</em:bootstrap> in their install.rdf).
... plat
form-specific files gecko 2.0 (firefox 4 / thunderbird 3.3 / seamonkey 2.1) removed support for plat
form-specific subdirectories, described below.
... instead, you need to use manifest flags, such as the os and abi flags, in your chrome manifest to specify components that should be loaded for specific plat
forms.
...And 10 more matches
Modularization techniques - Archive of obsolete content
introduction the purpose of this document is provide all the in
formation you need to create a new mozilla module or break existing code into a module.
...interface interrogation is a simple, uni
form mechanism for determining which interfaces a object supports, and for hiding the the mechanics of how the object was implemented.
... interface interrogation is per
formed using the queryinterface() method.
...And 10 more matches
TCP/IP Security - Archive of obsolete content
when a user wants to transfer data across networks, the data is passed from the highest layer through intermediate layers to the lowest layer, with each layer adding in
formation.
... the payload consists of the in
formation passed down from the previous layer, while the header contains layer-specific in
formation such as addresses.
... as previously explained, data is passed from the highest to the lowest layer, with each layer adding more in
formation.
...And 10 more matches
Threats - Archive of obsolete content
a threat is any circumstance or event with the potential to adversely impact data or systems via unauthorized access, destruction, disclosure, or modification of in
formation, and/or denial of service.
... threats may involve intentional actors (e.g., attacker who wants to access in
formation on a server) or unintentional actors (e.g., administrator who forgets to disable user accounts of a
former employee.) threats can be local, such as a disgruntled employee, or remote, such as an attacker in another geographical area.
...in
formation remains intact, but its privacy is compromised.
...And 10 more matches
Anatomy of a video game - Game development
here is an example of a simple main loop: window.main = function () { window.requestanimationframe( main ); // whatever your main loop needs to do }; main(); // start the cycle note: in each of the main() methods discussed here, we schedule a new requestanimationframe before per
forming our loop contents.
...simple animations can be easily per
formed, even gpu-accelerated, with css animations and other tools included in the browser.
...the w3c spec for requestanimationframe does not really define exactly when the browsers must per
form the requestanimationframe callbacks.
...And 10 more matches
Componentizing our React app - Learn web development
to follow the same pattern we had initially, let's give each instance of the <todo /> component an id in the
format of todo-i, where i gets larger by one every time: <todo name="eat" completed={true} id="todo-0" /> <todo name="sleep" completed={false} id="todo-1" /> <todo name="repeat" completed={false} id="todo-2" /> now go back to todo.js and make use of the id prop.
... tasks as data each of our tasks currently contains three pieces of in
formation: its name, whether it has been checked, and its unique id.
...javascript gives us an array method for trans
forming data into something else: array.prototype.map().
...And 10 more matches
Focus management with Vue refs - Learn web development
to give users a better experience, we'll add code to control the focus so that it gets set to the edit field when the edit
form is shown.
...any updates are first per
formed on the in-memory nodes, and then all the changes that need to be made to the actual nodes on the page are synced in a batch.
... since reading and writing actual dom nodes is often more expensive than virtual nodes, this can result in better per
formance.
...And 10 more matches
Accessibility API cross-reference
an interesting problem is that mozilla, safari/khtml, opera, staroffice and other apps are cross-plat
form, but there is currently no cross-plat
form accessibility api.
... the ipc mechanisms used by current generation api's are also not cross-plat
form, although communication for some cross-plat
form accessibility api of the future could be done through sockets.
...the roles it specifies have already in
formed the 'semantic elements' of html5 (such as main and footer), but there is not a one-to-one mapping between the aria roles and the semantics of html5.
...And 10 more matches
How Mozilla's build system works
for example, it says i want these c++ files compiled or look for additional in
formation in these directories.
...for example, there is a tier for the netscape portable runtime (nspr), one for the javascript engine, one for the core gecko plat
form, one for the xul app being built, and so on.
...typically, the traversal order looks something like base, nspr, nss, js, plat
form, app.
...And 10 more matches
Eclipse CDT Manual Setup
there is valuable in
formation here that should be integrated back into that page, but a large amount of it is now taken care of by the mach project generation code.
... for now it's stored here until that integration happens in order that the eclipse cdt page isn't hugely cluttered with mostly redundant in
formation, make setting up eclipse look much more complicated than it is nowadays.
...some of it like the section on building the index and usage tips are still relevant, and other parts still may provide useful background in
formation to understand it in more detail on how eclipse works.
...And 10 more matches
Introduction to Network Security Services
network security services (nss) is a set of libraries designed to support cross-plat
form development of communications applications that support ssl, s/mime, and other internet security standards.
... for in
formation on which static libraries in nss 3.1.1 are replaced by each of the above shared libraries in nss 3.2 , see migration from nss 3.1.1.
... figure 1, below, shows a simplified view of the relationships among the three shared libraries listed above and nspr, which provides low-level cross plat
form support for operations such as threading and i/o.
...And 10 more matches
NSS tools : pk12util
if the prefix sql: is not used, then the tool assumes that the given databases are in the old
format.
... -r dumps all of the data in raw (binary)
form.
...the default is to return in
formation in a pretty-print ascii
format, which displays the in
formation about the certificates and public keys in the p12 file.
...And 10 more matches
NSS Tools crlutil
for in
formation on security module database management, see using the security module database tool.
... for in
formation on certificate and key database management, see using the certificate database tool.
... availability see the release notes for the plat
forms this tool is available on.
...And 10 more matches
NSS tools : pk12util
if the prefix sql: is not used, then the tool assumes that the given databases are in the old
format.
... -r dumps all of the data in raw (binary)
form.
...the default is to return in
formation in a pretty-print ascii
format, which displays the in
formation about the certificates and public keys in the p12 file.
...And 10 more matches
Mozilla Projects
jshydra jshydra is a static analysis tool that is capable of per
forming analysis of general javascript code.
...it's important that the update in
formation retrieved has not been tampered with since being written by the add-on author.
... mozinfo throughout mozmill and other mozilla python code, checking the underlying plat
form is done in many different ways.
...And 10 more matches
History Service Design
this system provides additional per
formance, flexibility, and querying capabilities over the old one, for both end users and extensions developers.
...this involves storing in
formations on all of the user's visits, including visit time, type of visit and meta data.
...this is possible through a relevance algorithm that assigns a param called frecency to every page in history, see the places frecency algorithm for major in
formations.
...And 10 more matches
nsILoginInfo
nsilogininfo is an object containing in
formation for a login stored by the login manager.
...to create an instance, use: var logininfo = components.classes["@mozilla.org/login-manager/logininfo;1"] .createinstance(components.interfaces.nsilogininfo); method overview nsilogininfo clone(); boolean equals(in nsilogininfo alogininfo); void init(in astring ahostname, in astring a
formsubmiturl, in astring ahttprealm, in astring ausername, in astring apassword, in astring ausernamefield, in astring apasswordfield); boolean matches(in nsilogininfo alogininfo, in boolean ignorepassword); attributes attribute type description
formsubmiturl astring the origin, not url, a
form-based login was submitted to.
... for logins obtained from html
forms, this field is the action attribute from the
form element, with the path removed (for example, "https://www.site.com").
...And 10 more matches
Waterfall - Firefox Developer Tools
so if you see a sign of a per
formance problem - a drop in the frame rate, for example - you can go to the waterfall to see what the browser was doing at that point in the recording.
... when a marker is selected you'll see more in
formation about it in a sidebar on the right.
... this includes the marker's duration and some more in
formation that's specific to the marker type.
...And 10 more matches
CanvasRenderingContext2D - Web APIs
trans
formations objects in the canvasrenderingcontext2d rendering context have a current trans
formation matrix and methods to manipulate it.
... the trans
formation matrix is applied when creating the current default path, painting text, shapes and path2d objects.
... canvasrenderingcontext2d.currenttrans
form current trans
formation matrix (svgmatrix object).
...And 10 more matches
The HTML DOM API - Web APIs
access to and manipulation of
form data.
...each node is based on the node interface, which provides properties for getting in
formation about the node as well as methods for creating, deleting, and organizing nodes within the dom.
... for example, consider a document with two elements, one of which has two more elements nested inside it: while the document interface is defined as part of the dom specification, the html specification significantly enhances it to add in
formation specific to using the dom in the context of a web browser, as well as to using it to represent html documents specifically.
...And 10 more matches
SubtleCrypto.wrapKey() - Web APIs
this means that it exports the key in an external, portable
format, then encrypts the exported key.
... as with subtlecrypto.exportkey(), you specify an export
format for the key.
... syntax const result = crypto.subtle.wrapkey(
format, key, wrappingkey, wrapalgo ); parameters
format is a string describing the data
format in which the key will be exported before it is encrypted.
...And 10 more matches
WebRTC connectivity - Web APIs
it’s any sort of channel of communication to exchange in
formation before setting up a connection, whether by email, post card or a carrier pigeon...
... the in
formation we need to exchange is the offer and answer which just contains the sdp mentioned below.
...the description includes in
formation about the kind of media being sent, its
format, the transfer protocol being used, the endpoint's ip address and port, and other in
formation needed to describe a media transfer endpoint.
...And 10 more matches
Basic concepts behind Web Audio API - Web APIs
this article explains some of the audio theory behind how the features of the web audio api work, to help you make in
formed decisions while designing how audio is routed through your app.
...basic audio operations are per
formed with audio nodes, which are linked together to
form an audio routing graph.
... audio nodes are linked via their inputs and outputs,
forming a chain that starts with one or more sources, goes through one or more nodes, then ends up at a destination.
...And 10 more matches
XRView - Web APIs
the webxr device api's xrview interface provides in
formation describing a single view into the xr scene for a specific frame, providing orientation and position in
formation for the viewpoint.
... projectionmatrix read only the projection matrix that will trans
form the scene to appear correctly given the point-of-view indicated by eye.
... trans
form read only an xrrigidtrans
form which describes the current position and orientation of the viewpoint in relation to the xrreferencespace specified when getviewerpose() was called on the xrframe being rendered.
...And 10 more matches
Text labels and names - Accessibility
select an area for more in
formation on that area." /> <map id="map1" name="map1"> <area shape="rect" coords="0,0,30,30" href="reference.html" alt="reference" /> <area shape="rect" coords="34,34,100,100" href="media.html" alt="audio visual lab" /> </map> see the <area> element reference page for a live interactive example.
... examples the title for the reference article about the <title> element is as follows: <title><title>: the document title element - html: hypertext markup language</title> another example might look like so: <title>fill in your details to register — mygov services</title> to help the user, you can update the page title value to reflect significant page state changes (such as
form validation problems): <title>2 errors — fill in your details to register — mygov services</title> see also <title> embedded content must be labeled make sure that elements that embed content have a title attribute that describes the embedded content.
... <figure> <img src="milkweed.jgp" alt="black and white close-up photo of milkweed flowers"> <figcaption>asclepias verticillata</figcaption> </figure> fieldset elements must be labeled fieldset elements must have a text description, similar to other
form elements.
...And 10 more matches
Variable fonts guide - CSS: Cascading Style Sheets
for comparison, it is typical in a typographic system for a magazine to use 10–15 or more different weight and width combinations throughout the publication — giving a much wider range of styles than currently typical on the web (or indeed practical for per
formance reasons alone).
... introducing the 'variation axis' the heart of the new variable fonts
format is the concept of an axis of variation describing the allowable range of that particular aspect of the typeface design.
... so the 'weight axis' describes how light or how bold the letter
forms can be; the 'width axis' describes how narrow or how wide they can be; the 'italic axis' describes if italic letter
forms are present and can be turned on or off accordingly, etc.
...And 10 more matches
Using CSS transitions - CSS: Cascading Style Sheets
transition-duration: 0.5s <div class="parent"> <div class="box">lorem</div> </div> .parent { width: 250px; height:125px;} .box { width: 100px; height: 100px; background-color: red; font-size: 20px; left: 0px; top: 0px; position:absolute; -webkit-transition-property: width height background-color font-size left top trans
form -webkit-trans
form color; -webkit-transition-duration: 0.5s; -webkit-transition-timing-function: ease-in-out; transition-property: width height background-color font-size left top trans
form -webkit-trans
form color; transition-duration: 0.5s; transition-timing-function: ease-in-out; } .box1{ trans
form: rotate(270deg); -webkit-trans
form: rotate(270deg); width: 50px; ...
... height: 50px; background-color: blue; color: yellow; font-size: 18px; left: 150px; top: 25px; position: absolute; -webkit-transition-property: width height background-color font-size left top trans
form -webkit-trans
form color; -webkit-transition-duration: 0.5s; -webkit-transition-timing-function: ease-in-out; transition-property: width height background-color font-size left top trans
form -webkit-trans
formv color; transition-duration: 0.5s; transition-timing-function: ease-in-out; } function updatetransition() { var el = document.queryselector("div.box"); if (el) { el.classname = "box1"; } else { el = document.queryselector("div.box1"); el.classname = "box"; } return el; } var intervalid = window.setinterval(updatetr...
...nsition, 7000); transition-duration: 1s <div class="parent"> <div class="box">lorem</div> </div> .parent { width: 250px; height:125px;} .box { width: 100px; height: 100px; background-color: red; font-size: 20px; left: 0px; top: 0px; position: absolute; -webkit-transition-property: width height background-color font-size left top -webkit-trans
form color; -webkit-transition-duration: 1s; -webkit-transition-timing-function: ease-in-out; transition-property: width height background-color font-size left top trans
form color; transition-duration: 1s; transition-timing-function: ease-in-out; } .box1{ trans
form: rotate(270deg); -webkit-trans
form: rotate(270deg); width: 50px; height: 50px; background-color: b...
...And 10 more matches
Cross-browser audio basics - Developer guides
here we define an <audio> element with multiple sources — we do this as not all browsers support the same audio
formats.
... to ensure reasonable coverage, we should specify at least two different
formats.
... the two
formats that will give maximum coverage are mp3 and ogg vorbis.
...And 10 more matches
Setting up adaptive streaming media sources - Developer guides
this article explains how, looking at two of the most common
formats: mpeg-dash and hls (http live streaming.) choosing
formats in terms of adaptive streaming
formats, there are many to choose from; we decided to choose the following two as between them we can support most modern browsers.
... the good news is that once we have encoded our media in the appropriate
format we are pretty good to go.
... both mpeg-dash and hls use a playlist
format to structure the component piece of media that make the possible streams.
...And 10 more matches
<body>: The Document Body element - HTML: Hypertext Markup Language
this method is non-con
forming, use css color property in conjunction with the :active pseudo-class instead.
...this method is non-con
forming, use css background property on the element instead.
...this method is non-con
forming, use css background-color property on the element instead.
...And 10 more matches
<fieldset>: The Field Set element - HTML: Hypertext Markup Language
the html <fieldset> element is used to group several controls as well as labels (<label>) within a web
form.
... 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>.
... it takes few 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.
...And 10 more matches
<keygen> - HTML: Hypertext Markup Language
the html <keygen> element exists to facilitate generation of key material, and submission of the public key as part of an html
form.
...it is expected that the <keygen> element will be used in an html
form along with other in
formation needed to construct a certificate request, and that the result of the process will be a signed certificate.
... content categories flow content, phrasing content, interactive content, listed, labelable, submittable, resettable
form-associated element, palpable content.
...And 10 more matches
<link>: The External Resource Link element - HTML: Hypertext Markup Language
for example, a link to the site's favicon: <link rel="icon" href="favicon.ico"> there are a number of other icon rel values, mainly used to indicate special icon types for use on various mobile plat
forms, e.g.: <link rel="apple-touch-icon-precomposed" sizes="114x114" href="apple-icon-114.png" type="image/png"> the sizes attribute indicates the icon size, while the type contains the mime type of the resource being linked.
...for example: <link href="print.css" rel="stylesheet" media="print"> <link href="mobile.css" rel="stylesheet" media="screen and (max-width: 600px)"> some interesting new per
formance and security features have been added to the <link> element too.
...with an origin http header) is per
formed, but no credential is sent (i.e.
...And 10 more matches
SVG and CSS - SVG: Scalable Vector Graphics
r over the flower.</text> <g id="flower"> <circle id="overlay" cx="0" cy="0" r="200" stroke="none" fill="url(#fade)"/> <g id="outer-petals"> <g class="quadrant"> <g class="segment"> <path class="segment-fill" d="m0,0 v-200 a40,40 0 0,0 -62,10 z"/> <path class="segment-edge" d="m0,-200 a40,40 0 0,0 -62,10"/> </g> <g class="segment" trans
form="rotate(18)"> <path class="segment-fill" d="m0,0 v-200 a40,40 0 0,0 -62,10 z"/> <path class="segment-edge" d="m0,-200 a40,40 0 0,0 -62,10"/> </g> <g class="segment" trans
form="rotate(36)"> <path class="segment-fill" d="m0,0 v-200 a40,40 0 0,0 -62,10 z"/> <path class="segment-edge" d="m0,-200 a40,40 0 0,0 -62,10"/> </g> <g cla...
...ss="segment" trans
form="rotate(54)"> <path class="segment-fill" d="m0,0 v-200 a40,40 0 0,0 -62,10 z"/> <path class="segment-edge" d="m0,-200 a40,40 0 0,0 -62,10"/> </g> <g class="segment" trans
form="rotate(72)"> <path class="segment-fill" d="m0,0 v-200 a40,40 0 0,0 -62,10 z"/> <path class="segment-edge" d="m0,-200 a40,40 0 0,0 -62,10"/> </g> </g> <g class="quadrant"> <g class="segment" trans
form="rotate(90)"> <path class="segment-fill" d="m0,0 v-200 a40,40 0 0,0 -62,10 z"/> <path class="segment-edge" d="m0,-200 a40,40 0 0,0 -62,10"/> </g> <g class="segment" trans
form="rotate(108)"> <path class="segment-fill" d="m0,0 v-200 a40,40 0 0,0 -62,10 z"/> <path cl...
...ass="segment-edge" d="m0,-200 a40,40 0 0,0 -62,10"/> </g> <g class="segment" trans
form="rotate(126)"> <path class="segment-fill" d="m0,0 v-200 a40,40 0 0,0 -62,10 z"/> <path class="segment-edge" d="m0,-200 a40,40 0 0,0 -62,10"/> </g> <g class="segment" trans
form="rotate(144)"> <path class="segment-fill" d="m0,0 v-200 a40,40 0 0,0 -62,10 z"/> <path class="segment-edge" d="m0,-200 a40,40 0 0,0 -62,10"/> </g> <g class="segment" trans
form="rotate(162)"> <path class="segment-fill" d="m0,0 v-200 a40,40 0 0,0 -62,10 z"/> <path class="segment-edge" d="m0,-200 a40,40 0 0,0 -62,10"/> </g> </g> <g class="quadrant"> <g class="segment" trans
form="rotate(180)"> <...
...And 10 more matches
2015 MDN Fellowship Program - Archive of obsolete content
more in
formation: mdn/developerfellowship wiki page.
... what seven weeks of partnering closely with mozilla to (1) build curriculum, code, or likely both; and (2) receive coaching, training and best practices for effectively communicating and educating with technical in
formation.
... mentor in
formation josh matthews, mozilla plat
form group.
...And 9 more matches
cfx - Archive of obsolete content
for in
formation on how to migrate from cfx to jpm see this guide.
... cfx xpi package your add-on as an xpi file, which is the install file
format for firefox add-ons.
...called with no options it looks for a file called package.json in the current directory, loads the corresponding add-on, and runs it under the version of firefox it finds in the plat
form's default install path.
...And 9 more matches
Localization - Archive of obsolete content
the files: use the .properties
format are named "xx-yy.properties", where "xx-yy" is the name of the locale in question contain one entry for each string you want to localize, consisting of an identifier for the string and its translation in that locale, in the
format identifier=translation need to use utf-8 without bom encoding lines starting with "#" (after optional whitespace) are comments suppose your add-on contains a si...
... plurals the l10n module supports plural
forms.
... different languages have different rules for the
formation of plurals.
...And 9 more matches
Creating custom Firefox extensions with the Mozilla build system - Archive of obsolete content
reasons why you might want to include c++ components in your extension include: need for high-per
formance beyond what can be delivered by javascript code.
... one final note: i've only tried these techniques inside firefox, but they'll probably work more or less unchanged on other gecko-based plat
forms like thunderbird or seamonkey.
... if someone can confirm this and/or provide guidelines for what's different, i'll update the article to incorporate this in
formation.
...And 9 more matches
Chapter 3: Introduction to XUL—How to build a more intuitive UI - Archive of obsolete content
like web pages, which display the same regardless of plat
form, applications marked up in xul will work the same in any environment where firefox runs.
... unlike languages with
formal specifications that have been standardized by bodies like the w3c, xul currently does not have an explicit specification.
...this element takes a number of attributes, and can easily be made to display controls (buttons, etc) using widgets and layouts native to whatever plat
form it is running on.
...And 9 more matches
Chapter 5: Let's build a Firefox extension - Archive of obsolete content
developing a simple extension: hello world in this section, we will write an extremely simple “hello world” extension that only displays the time.3 phase 1: test install our first step will be to per
form a test installation consisting of the minimum code needed to add a new menu item to the tools menu (figure 3).
...�──extensions └───helloworld │ chrome.manifest │ install.rdf │ └───content clock.js clock.xul overlay.xul table 2: how files are used in phase 1 fixme: make the table cleaner file name role install.rdf called the install manifest, this gives basic in
formation about the extension, and is required in order for the extension to be installed in firefox..
...can be in e-mail address
format or guid
format --> <em:id>helloworld@xuldev.org</em:id> <!-- indicates that this add-on is an extension --> <em:type>2</em:type> <!-- extension name displayed in add-on manager --> <em:name>hello, world!</em:name> <!-- extension version number.
...And 9 more matches
Appendix D: Loading Scripts - Archive of obsolete content
as this module only exists on firefox 4 and other gecko 2-based plat
forms, the services in question will have to be manually loaded on other plat
forms.
...this in
formation is invaluable for debugging, and the flexibility with which it can be specified makes this method useful for extracting javascript from a number of file
formats other than raw javascript scripts.
... disadvantages per
formance: there are several significant per
formance disadvantages inherent in this method: there is currently no way to load code into sandboxes from a cache.
...And 9 more matches
Local Storage - Archive of obsolete content
to read and write in
formation in files, you need to use stream objects.
...this is the default behavior when firefox is uninstalled: the profile in
formation remains intact and it will be there waiting for you if firefox is installed again.
... others feel concerned about privacy and storing private in
formation locally without deleting it.
...And 9 more matches
The Essentials of an Extension - Archive of obsolete content
the file is
formatted in a special flavor of xml called rdf.
...one is the email-like
format in the hello world example, which should be something like <project-name>@<yourdomain>.
...there are also downloadable tools for all plat
forms that generate them.
...And 9 more matches
Microsummary XML grammar reference - Archive of obsolete content
a microsummary generator is an xml document that describes how to pull specific in
formation from a web page to be presented in summary
form as a bookmark whose title changes based on the content of the page it targets.
... warning: microsummary support was removed in gecko 6.0 (firefox 6.0 / thunderbird 6.0 / seamonkey 2.3) this article provides detailed in
formation about the xml grammar used to build microsummary generators, describing each element and their attributes.
...example the microsummary generator created in the creating a microsummary tutorial: <?xml version="1.0" encoding="utf-8"?> <generator xmlns="http://www.mozilla.org/microsummaries/0.1" name="firefox download count"> <template> <trans
form xmlns="http://www.w3.org/1999/xsl/trans
form" version="1.0"> <output method="text"/> <template match="/"> <value-of select="id('download-count')"/> <text> fx downloads</text> </template> </trans
form> </template> <pages> <include>http://(www\.)?spreadfirefox\.com/(index\.php)?</include> </pages> </generator> namespace the namespace uri for microsummary generator xml documents is: http://www.mozilla.org/microsummari...
...And 9 more matches
Custom toolbar button - Archive of obsolete content
(for seamonkey 1.x, see the page custom toolbar button:seamonkey.) you do not need any special technical skills or tools, and almost all the in
formation you need is on this page.
... you can optionally use a jar tool or zip tool to package your button as a cross-plat
form installable (xpi) for other people to install and use.
... note: for in
formation about how to find the profile directory, see: profile folder explanation: the profile directory contains in
formation specific to a user, keeping it separate from the application.
...And 9 more matches
XML - Archive of obsolete content
all of the events and attributes -- even the javascript event listeners normally
formatted in the javascript world with uppercase verbs (e.g., onclick, onload) -- must be lowercase or they are invalid.
... every xul widget must use close tags to be well-
formed.
...in xul, elements must either be of the
form <tag></tag> or <tag/> to be valid.
...And 9 more matches
Tamarin Tracing Build Documentation - Archive of obsolete content
for instructions on tamarin central, please see tamarin build documentation supported plat
forms operating system processor status windows xp x86 supported, acceptance and per
formance tests automated in buildbot mac os x 10.4 x86 supported, acceptance and per
formance tests automated in buildbot linux - ubuntu 8.0.4 x86 supported, acceptance and per
formance tests automated in buildbot windows mobile (pocket pc 5.0) armv4t supported, acceptance and per
formance tests automated in buildbot raw image (no os) armv5 supported, acceptance and per
formance tests not done linux (nokia n810) armv5 supported, acceptance and per
formance tests not done current build stat...
...use the following command to create a copy of the tamarin repository: $ hg clone http://hg.mozilla.org/tamarin-tracing tamarin-tracing building tamarin building tamarin will create all the libraries for the avmplus and garbage collector (mmgc), and create a standalone executable, avmshell, for executing files in the abc file
format.
...the tamarin codebase contains a cross-plat
form build system for mozilla developers.
...And 9 more matches
What is accessibility? - Learn web development
note: the world health organization's disability and health fact sheet states that "over a billion people, about 15% of the world's population, have some
form of disability", and "between 110 million and 190 million adults have significant difficulties in functioning." people with visual impairments people with visual impairments include people with blindness, low-level vision, and color blindness.
...can you use the tab key to move between the different controls of a web
form, for example?
...ention on important content; minimizing distractions, such as unnecessary content or advertisements; consistent webpage layout and navigation; familiar elements, such as underlined links blue when not visited and purple when visited; dividing processes into logical, essential steps with progress indicators; website authentication as easy as possible without compromising security; and making
forms easy to complete, such as with clear error messages and simple error recovery.
...And 9 more matches
Getting started with HTML - Learn web development
doing this should give the line italic text
formatting!
...if we wanted to state that our cat is very grumpy, we could wrap the word very in a <strong> element, which means that the word is to have strong(er) text
formatting: <p>my cat is <strong>very</strong> grumpy.</p> there is a right and wrong way to do nesting.
... block-level elements
form a visible block on a page.
...And 9 more matches
Multimedia: video - Learn web development
previous overview: per
formance next as we learned in the previous section, media, namely images and video, account for over 70% of the bytes downloaded for the average website.
...this article looks at optimizing video to improve web per
formance.
... objective: to learn about the various video
formats, their impact on per
formance, and how to reduce video impact on overall page load time while serving the smallest video file size based on each browsers file type support.
...And 9 more matches
What to do and what not to do in Bugzilla
before you have canconfirm, you can still do good triaging by leaving comments with useful in
formation on the bug that will help to confirm it.
... the same is true for editbugs: leave comments with the in
formation you'd like to be able to edit into the bug, and that will help you get the editbugs permissions quickly.
...it also governs which bug entry
form you are presented with first (either the guided or advanced
forms).
...And 9 more matches
Mozilla Style System Documentation
style context management a style context (class nsstylecontext, currently also interface nsistylecontext although the interface should go away when all of the style systems can be moved back into the layout dll) represents the style data for a css
formatting object.
... in the layout system, these
formatting objects are described as frames (interface nsiframe), although a pair of frames represents table
formatting objects.
... the css specification describes
formatting objects that correspond to elements in the content model and
formatting objects that correspond to pseudo-elements.
...And 9 more matches
NSS FAQ
general questions what is network security services (nss) nss is set of libraries, apis, utilities, and documentation designed to support cross-plat
form development of security-enabled client and server applications.
...for detailed in
formation on the open-source nss project, see nss project page.
... what plat
forms and development environments are supported?
...And 9 more matches
NSS_3.12_release_notes.html
nss 3.12 release notes 17 june 2008 newsgroup: mozilla.dev.tech.crypto contents introduction distribution in
formation new in nss 3.12 bugs fixed documentation compatibility feedback introduction network security services (nss) 3.12 is a minor release with the following new features: sqlite-based shareable certificate and key databases libpkix: an rfc 3280 compliant certificate path validation library camellia cipher support tls session ticket extension (rfc 5077) nss 3.12 is tri-licensed under the mpl 1.1/gpl 2.0/lgpl 2.1.
... distribution in
formation the cvs tag for the nss 3.12 release is nss_3_12_rtm.
...go to the subdirectory for your plat
form, dbg (debug) or opt (optimized), to get the tar.gz or zip file.
...And 9 more matches
NSS 3.35 release notes
distribution in
formation the hg tag is nss_3_35_rtm.
... notable changes in nss 3.35 previously, nss used the dbm file
format by default.
... starting with version 3.35, nss uses the sql file
format by default.
...And 9 more matches
NSS environment variables
necessary on some plat
forms to get correct function names when using leak reporting software.
...see the source for more in
formation.
... the trace in
formation is written to the file pointed by nspr_log_file (default stderr).
...And 9 more matches
NSS tools : crlutil
for in
formation on security module database management, see using the security module database tool.
... for in
formation on certificate and key database management, see using the certificate database tool.
...if located in file it should be encoded in asn.1 encode
format.
...And 9 more matches
NSS tools : crlutil
for in
formation on security module database management, see using the security module database tool.
... for in
formation on certificate and key database management, see using the certificate database tool.
...if located in file it should be encoded in asn.1 encode
format.
...And 9 more matches
TPS Tests
the python test runner will read a test file (in javascript
format), setup one or more firefox profiles with the necessary extensions and preferences, then launch firefox and pass the test file to the extension.
... the extension will read the test file and per
form a series of actions specified therein, such as populating a set of bookmarks, syncing to the sync server, making bookmark modifications, etc.
...a phase runs in some firefox profile, and contains some set of actions to per
form or check on that profile.
...And 9 more matches
nsIWebBrowserPersist
encode_flags_
formatted 2 for plain text output.
...html output: always do prettyprinting, ignoring existing
formatting.
... encode_flags_raw 4 output without
formatting or wrapping the content.
...And 9 more matches
XPCOM
xpcom is a cross plat
form component object model, similar to microsoft com.
...the majority of xpcom components are not part of this core set and are provided by other parts of the plat
form (e.g.
... accessing the windows registry using xpcomwhen implementing windows-specific functionality, it is often useful to access the windows registry for in
formation about the environment or other installed programs.
...And 9 more matches
Adding 2D content to a WebGL context - Web APIs
this project uses the glmatrix library to per
form its matrix operations, so you will need to include that in your project.
... the shaders a shader is a program, written using the opengl es shading language (glsl), that takes in
formation about the vertices that make up a shape and generates the data needed to render the pixels onto the screen: namely, the positions of the pixels and their colors.
...its job is to trans
form the input vertex from its original coordinate system into the clip space coordinate system used by webgl, in which each axis has a range from -1.0 to 1.0, regardless of aspect ratio, actual size, or any other factors.
...And 9 more matches
Lifetime of a WebRTC session - Web APIs
this article doesn't get into details of the actual apis involved in establishing and handling a webrtc connection; it simply reviews the process in general with some in
formation about why each step is required.
... signaling signaling is the process of sending control in
formation between two devices to determine the communication protocols, channels, media codecs and
formats, and method of data transfer, as well as any required routing in
formation.
... in order to exchange signaling in
formation, you can choose to send json objects back and forth over a websocket connection, or you could use xmpp or sip over an appropriate channel, or you could use xmlhttprequest over https with polling, or any other combination of technologies you can come up with.
...And 9 more matches
Web Audio API - Web APIs
basic audio operations are per
formed with audio nodes, which are linked together to
form an audio routing graph.
... it can be used to simply incorporate audio into your website or application, by providing atmosphere like futurelibrary.no, or auditory feedback on
forms.
... oscillatornode the oscillatornode interface represents a periodic wave
form, such as a sine or triangle wave.
...And 9 more matches
Linear-gradient Generator - CSS: Cascading Style Sheets
in: 0; border: 1px solid #ddd; background-color: #fff; display: table; -moz-user-select: none; -webkit-user-select: none; -ms-user-select: none; user-select: none; } .ui-color-picker .picking-area { width: 198px; height: 198px; margin: 5px; border: 1px solid #ddd; position: relative; float: left; display: table; } .ui-color-picker .picking-area:hover { cursor: default; } /* hsv
format - hue-saturation-value(brightness) */ .ui-color-picker .picking-area { background: url("images/picker_mask.png"); background: -moz-linear-gradient(bottom, #000 0%, rgba(0, 0, 0, 0) 100%), -moz-linear-gradient(left, #fff 0%, rgba(255, 255, 255, 0) 100%); background: -webkit-linear-gradient(bottom, #000 0%, rgba(0, 0, 0, 0) 100%), -webkit-linear-gradient(left, #fff 0%, rgba(255, 255, ...
...255, 0) 100%); background: -ms-linear-gradient(bottom, #000 0%, rgba(0, 0, 0, 0) 100%), -ms-linear-gradient(left, #fff 0%, rgba(255, 255, 255, 0) 100%); background: -o-linear-gradient(bottom, #000 0%, rgba(0, 0, 0, 0) 100%), -o-linear-gradient(left, #fff 0%, rgba(255, 255, 255, 0) 100%); background-color: #f00; } /* hsl
format - hue-saturation-lightness */ .ui-color-picker[data-mode='hsl'] .picking-area { background: -moz-linear-gradient(top, hsl(0, 0%, 100%) 0%, hsla(0, 0%, 100%, 0) 50%, hsla(0, 0%, 0%, 0) 50%, hsl(0, 0%, 0%) 100%), -moz-linear-gradient(left, hsl(0, 0%, 50%) 0%, hsla(0, 0%, 50%, 0) 100%); background: -webkit-linear-gradient(top, hsl(0, 0%, 100%) 0%, hsla(0, 0%, 100%, 0) 50%, hsla(0, 0%, 0%, 0) 50%, hsl(0, 0%, 0%) 100%), -webkit-linear-...
...f; -moz-user-select: none; user-select: none; } .ui-input-slider * { float: left; height: 100%; } /* input slider */ .ui-input-slider > input { margin: 0; padding: 0; width: 50px; text-align: center; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; } .ui-input-slider-info { width: 90px; padding: 0px 10px 0px 0px; text-align: right; text-trans
form: lowercase; line-height: inherit; } .ui-input-slider-left, .ui-input-slider-right { width: 16px; cursor: pointer; background: url("arrows.png") center left no-repeat; } .ui-input-slider-right { background: url("arrows.png") center right no-repeat; } .ui-input-slider-name { width: 90px; padding: 0 10px 0 0; text-align: right; text-trans
form: lowercase; } .ui-input-slider-btn-set { wi...
...And 9 more matches
<audio>: The Embed Audio element - HTML: Hypertext Markup Language
in a similar manner to the <img> element, we include a path to the media we want to embed inside the src attribute; we can include other attributes to specify in
formation such as whether we want it to autoplay and loop, whether we want to show the browser's default audio controls, etc.
...see our autoplay guide for additional in
formation about how to properly use autoplay.
...in other words, it sends the origin: http header without a cookie, x.509 certificate, or per
forming http basic authentication.
...And 9 more matches
<select>: The HTML Select element - HTML: Hypertext Markup Language
it also accepts most of the general
form input attributes such as required, disabled, autofocus, etc.
... for further examples, see the native
form widgets: drop-down content.
... autofocus this boolean attribute lets you specify that a
form control should have input focus when the page loads.
...And 9 more matches
Connection management in HTTP/1.x - HTTP
connection management is a key topic in http: opening and maintaining connections largely impacts the per
formance of web sites and web applications.
... this simple model held an innate limitation on per
formance: opening each tcp connection is a resource-consuming operation.
...network latency and bandwidth affect per
formance when a request needs sending.
...And 9 more matches
HTTP Public Key Pinning (HPKP) - HTTP
if an attacker is able to compromise a single ca, they can per
form mitm attacks on various tls connections.
...the first time a web server tells a client via a special http header which public keys belong to it, the client stores this in
formation for a given period of time.
... enabling hpkp to enable this feature for your site, you need to return the public-key-pins http header when your site is accessed over https: public-key-pins: pin-sha256="base64=="; max-age=expiretime [; includesubdomains][; report-uri="reporturi"] pin-sha256 the quoted string is the base64 encoded subject public key in
formation (spki) fingerprint.
...And 9 more matches
Working with objects - JavaScript
= 'object'; myobj[''] = 'even an empty string'; console.log(myobj); please note that all keys in the square bracket notation are converted to string unless they're symbols, since javascript object property names (keys) can only be strings or symbols (at some point, private names will also be added as the class fields proposal progresses, but you won't use them with []
form).
...see inheritance and the prototype chain for more in
formation.
... the exception to this rule is array-like object reflected from html, such as the
forms array-like object.
...And 9 more matches
Inheritance and the prototype chain - JavaScript
inheriting "methods" javascript does not have "methods" in the
form that class-based languages define them.
... in javascript, any function can be added to an object in the
form of a property.
... an inherited function acts just as any other property, including property shadowing as shown above (in this case, a
form of method overriding).
...And 9 more matches
Introduction to progressive web apps - Progressive web apps (PWAs)
the term "progressive web app" isn't a
formal or official name.
... it's not a brand new concept—such ideas have been revisited many times on the web plat
form with various approaches in the past.
... a look and feel that is more integrated with the native plat
form—app icons on the home screen or app launcher, applications that automatically run in full screen mode, etc.
...And 9 more matches
CSS3 - Archive of obsolete content
formally, there is no css3 standard per se .
... media queries recommendation since june 19th, 2012 extends the
former media type ( print, screen, … ) to a full language allowing queries on the device media capabilities like only screen and (color) .
... css style attributes recommendation since november 7th, 2013
formally defines the syntax of the content of the html style global attribute.
...And 8 more matches
URIs and URLs - Archive of obsolete content
resources are identified by uri "uni
form resource identifier" (taken from rfc 2396): uni
form uni
formity provides several benefits: it allows different types of resource identifiers to be used in the same context, even when the mechanisms used to access those resources may differ; it allows uni
form semantic interpretation of common syntactic conventions across different types of resource identifiers; it allows introduction of new types of resource identifiers without interfering with the way that existing identifiers are used; and, it allows the identifiers to be reused in many different context...
...the term "uni
form resource locator" (url) refers to the subset of uri that identify resources via a representation of their primary access mechanism (e.g., their network "location"), rather than identifying the resource by name or by some other attribute(s) of that resource.
...the protocol handler provides scheme specific in
formation and methods to create new uris of the schemes it supports.
...And 8 more matches
XUL Structure - Archive of obsolete content
the mozilla rendering engine takes the content in the
form of html source and trans
forms it into a document tree.
...however, there are some features that are specific to html, such as
forms, and others which are specific to xul, such as overlays.
...http://localhost/~username/ ), regardless of whether they are html or xul or another document type, are limited in the type of operations they can per
form, for security reasons.
...And 8 more matches
Gecko Compatibility Handbook - Archive of obsolete content
- i'm also looking for a way to organize all that in
formation.
... gecko is a cross-plat
form browser engine, compatible with a number of windows versions including windows xp, as well as mac and linux.
... because of gecko's cross-plat
form nature, functionality is generally very much the same on different plat
forms unlike internet explorer for mac and ie for windows, which are very different programs and so may behave quite differently from each other.
...And 8 more matches
Choosing Standards Compliance Over Proprietary Practices - Archive of obsolete content
the purpose of this document is to discuss and emphasize the importance of con
forming to open technology standards that are external to the organization.
...if the project is accepted, the compiled in
formation, analysis and research is merged into a request for proposal (rfp).
...se organizations: ansi (american national standards institute ) atsc (advanced television systems committee ) ieee (institute of electrical and electronics engineers ) ietf (internet engineering task force ) irtf (internet research task force ) iso (international standards organization ) itu (international telecommunication union ) oasis (organization for the advancement of structured in
formation standards ) oma (open mobile alliance ), uni (unicode consortium ) w3c (world wide web consortium ) iana (internet assigned numbers authority ) ecma international like the processes and standards that accountants and project managers must follow, the above-mentioned standards organizations provide focus and direction for the development engineering community.
...And 8 more matches
Archive of obsolete content
here at mdn, we try to avoid outright deleting content that might be useful to people targeting legacy plat
forms, operating systems, and browsers.
...if anyone might realistically need the in
formation in a living product, it may not be appropriate to move it here.
...- i'm also looking for a way to organize all that in
formation.
...And 8 more matches
Tips for authoring fast-loading HTML pages - Learn web development
optimizing page load per
formance is not just for content which will be viewed by narrowband dial-up or mobile device visitors.
... tips reduce page weight page weight is by far the most important factor in page-load per
formance.
... reducing page weight through the elimination of unnecessary whitespace and comments, commonly known as minimization, and by moving inline script and css into external files, can improve download per
formance with minimal need for other changes in the page structure.
...And 8 more matches
Introduction to events - Learn web development
for example, if the user selects a button on a webpage, you might want to respond to that action by displaying an in
formation box.
... a
form is submitted.
...these are often used to display in
formation about filling in
form fields when they are focused, or displaying an error message if a
form field is filled with an incorrect value.
...And 8 more matches
Fetching data from the server - Learn web development
this seemingly small detail has had a huge impact on the per
formance and behavior of sites, so in this article, we'll explain the concept and look at technologies that make it possible, such as xmlhttprequest and the fetch api.
...these technologies allow web pages to directly handle making http requests for specific resources available on a server and
formatting the resulting data as needed before it is displayed.
...let's think about the significance of this: go to one of your favorite in
formation-rich sites, like amazon, youtube, cnn, etc., and load it.
...And 8 more matches
Third-party APIs - Learn web development
for example: let map = l.mapquest.map('map', { center: [53.480759, -2.242631], layers: l.mapquest.tilelayer('map'), zoom: 12 }); here we are creating a variable to store the map in
formation in, then creating a new map using the mapquest.map() method, which takes as its parameters the id of a <div> element you want to display the map in ('map'), and an options object containing the details of the particular map we want to display.
... this is all the in
formation the mapquest api needs to plot a simple map.
...the tilelayer reference page shows the different available options, plus a lot more in
formation.
...And 8 more matches
Ember resources and troubleshooting - Learn web development
previous overview: client-side javascript frameworks next our final ember article provides you with a list of resources that you can use to go further in your learning, plus some useful troubleshooting and other in
formation.
... objective: to provide further resource links and troubleshooting in
formation.
... for framework-specific things, there is the ember-inspector add-on, which allows inspection of: routes & controllers components services promises data (i.e: from a remote api — from ember-data, by default) deprecation in
formation render per
formance for general javascript debugging, check out our guides on javascript debugging as well as interacting with the browser's other debugging tools.
...And 8 more matches
Getting started with Svelte - Learn web development
the outcome of this approach is not only smaller application bundles and better per
formance, but also a developer experience that is more approachable for people that have limited experience of the modern tooling ecosystem.
... highly interactive pages or complex visualizations: if you are building data-visualizations that need to display a large number of dom elements, the per
formance gains that come from a framework with no runtime overhead will ensure that user interactions are snappy and responsive.
...see package management basics for more in
formation on npm and yarn.
...And 8 more matches
Advanced Svelte: Reactivity, lifecycle, accessibility - Learn web development
this allows it to be less conservative about checking whether values have changed and generate simpler and more per
formant code.
... for more in
formation on <svelte:options...>, check the svelte options documentation.
... creating a newtodo component let's begin by extracting our new todo
form out to its own component.
...And 8 more matches
Styling Vue components with CSS - Learn web development
adding global styles to single file components now that we've reset our css to be uni
form across browsers, we need to customize the styles a bit more.
... update your app.vue file’s <style> element so it looks like so: <style> /* global styles */ .btn { padding: 0.8rem 1rem 0.7rem; border: 0.2rem solid #4d4d4d; cursor: pointer; text-trans
form: capitalize; } .btn__danger { color: #fff; background-color: #ca3c3c; border-color: #bd2130; } .btn__filter { border-color: lightgrey; } .btn__danger:focus { outline-color: #c82333; } .btn__primary { color: #fff; background-color: #000; } .btn-group { display: flex; justify-content: space-between; } .btn-group > * { flex: 1 1 auto; } .btn-group > * + * { margin-left: 0.8rem;...
... margin-top: 2.8rem; } } /* end global styles */ #app { background: #fff; margin: 2rem 0 4rem 0; padding: 1rem; padding-top: 0; position: relative; box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.2), 0 2.5rem 5rem 0 rgba(0, 0, 0, 0.1); } @media screen and (min-width: 550px) { #app { padding: 4rem; } } #app > * { max-width: 50rem; margin-left: auto; margin-right: auto; } #app >
form { max-width: 100%; } #app h1 { display: block; min-width: 100%; width: 100%; text-align: center; margin: 0; margin-bottom: 1rem; } </style> if you check the app, you'll see that our todo list is now in a card, and we have some better
formatting of our to-do items.
...And 8 more matches
Getting Started with Chat
please see https://wiki.mozilla.org/matrix for up-to-date in
formation.
... when addressing someone directly, try to use name: message
format.
...you will need to use the following in
formation to configure the server connection: server: irc.mozilla.org port: 6667 (default) or 6697 (ssl) desktop clients desktop clients tens to allow the most detailed configuration.
...And 8 more matches
AddonManager
the addonmanager object is the global api used to access in
formation about add-ons installed in the application and to manipulate them.
... state_checking an install that is checking for updated in
formation.
... update check reasons constant description update_when_user_requested an update check per
formed at the explicit request of the user.
...And 8 more matches
Index
this page is to help explain how to localize these strings so that the correct plural
form is shown to the user.
...there is an established
format for those, which is described in this document.
... 12 localization quick start guide guide, translation this guide is filled with all of the basic, technical in
formation you need to get involved in the mozilla l10n program.
...And 8 more matches
Mozilla Content Localized in Your Language
formal and in
formal
forms, and separators (, or .) date
format what are the date
formats for weeks and months are expressed in the following
forms: 1)fully spelled out, 2).
... time
format how is time expressed in your language?
...what are
formality to avoid?
...And 8 more matches
gettext
plurals gettext lets you define and use singular and plural
forms of a string.
...a definition of a string with plurals takes three arguments: the singular
form of the english string, the plural
form of the english string, and the number basing on which the function will return the correct (singular or plural)
form of the string.
... consider the following code snippet: <?php $num = 1; printf(ngettext("%d user likes this.", "%d users like this.", $num), $num); ?> depending on the value of the $num variable, this code will either use the singular ("user likes) or the plural ("users like")
form of the string.
...And 8 more matches
Mozilla Web Developer FAQ
in the standards mode gecko aims to treat documents authored in compliance with the applicable web
format specifications.
... contrary to a popular belief stemming from the behavior of a couple browsers running on the windows plat
form, alt isn’t an abbreviation for ‘tooltip’ but for ‘alternative’.
... downloadable fonts in truetype and opentype
formats (.ttf and .otf) are supported since firefox 3.5.
...And 8 more matches
DMD
you can dump that in
formation to file, giving a profile of the live heap blocks at that point in time.
...you can dump that in
formation to file, giving a profile of the heap usage for the entire session.
...note that stack in
formation you get will likely be less detailed, due to being unable to symbolicate.
...And 8 more matches
Profiling with Xperf
xperf is part of the microsoft windows per
formance toolkit, and has functionality similar to that of shark, oprofile, and (for some things) dtrace/instruments.
...to see your xperf version, either run 'xperf' on a command line with no arguments, or start 'xperfview' and look at help -> about per
formance analyzer.
...once the sdk installs, execute either wpt_x86.msi or wpt_x64.msi in the redist/windows per
formance toolkit folder of the sdk's install location (typically program files/microsoft sdks/windows/v7.1/redist/windows per
formance toolkit) to actually install the windows per
formance toolkit tools.
...And 8 more matches
Optimizing Applications For NSPR
netscape portable runtime (nspr) tries to provide a consistent level of service across the plat
forms it supports.
... multiplat
form do not call any blocking system call from a local thread.
... nspr uses timer signals to implement thread preemption for local threads on some plat
forms.
...And 8 more matches
NSPR Error Handling
error type error functions error codes for in
formation on naming conventions for nspr types, functions, and macros, see nspr naming conventions.
... error type prerrorcode error functions pr_seterror pr_seterrortext pr_geterror pr_getoserror pr_geterrortextlength pr_geterrortext error codes error codes defined in prerror.h: pr_out_of_memory_error insufficient memory to per
form request.
... pr_not_tcp_socket_error attempt to per
form a tcp specific function on a non-tcp file descriptor.
...And 8 more matches
NSS Tools certutil
starting from nss 3.35, the database
format was upgraded to support sqlite as described in this document.
...for in
formation security module database management, see using the security module database tool.
... availability see the release notes for the plat
forms this tool is available on.
...And 8 more matches
NSS tools : signver
options -a displays all of the in
formation in the pkcs#7 signature.
...if the prefix sql: is not used, then the tool assumes that the given databases are in the old
format.
... -a sets that the given signature file is in ascii
format.
...And 8 more matches
Rhino overview
rhino contains all the features of javascript 1.7 allows direct scripting of java a javascript shell for executing javascript scripts a javascript compiler to trans
form javascript source files into java class files a javascript debugger for scripts executed with rhino language the javascript language itself is standardized by standard ecma-262 ecmascript: a general purpose, cross-plat
form programming language.
... rhino 1.3 and greater con
form to edition 3 of the standard.
...see the specification for more in
formation on the standard, and rhino version 1.6r1 release notes for details on the implementation in rhino.
...And 8 more matches
SpiderMonkey Internals
all state associated with an interpreter instance is passed through
formal parameters to the interpreter entry point; most implicit state is collected in a type named jscontext.
... the representation is 64 bits and uses nan-boxing on all plat
forms, although the exact nan-boxing
format depends on the plat
form.
...hence, we can encode any floating-point value as a c++ double (noting that javascript nan must be represented as one canonical nan
format).
...And 8 more matches
JS_PushArguments
syntax jsval * js_pusharguments(jscontext *cx, void **markp, const char *
format, ...); jsval * js_pushargumentsva(jscontext *cx, void **markp, const char *
format, va_list ap); name type description cx jscontext * the context in which to per
form any necessary conversions.
... cx also affects the interpretation of
format, if js_addargument
formatter has been called.
...
format const char * null-terminated string holding a list of
format types to convert the following arguments to.
...And 8 more matches
Mozilla internal string guide
in order to avoid unnecessary copying of string data (which can have significant per
formance cost), the string classes support different ownership models.
...the constructor takes parameters which allows it to construct a 8-bit string from a printf-style
format string and parameter list.
...remaining data over if (pos < len - 1) memmove(cur + 4, cur + 1, (len - 1 - pos) * sizeof(char16_t)); // fill the tab with spaces *cur = char16_t(' '); *(cur + 1) = char16_t(' '); *(cur + 2) = char16_t(' '); *(cur + 3) = char16_t(' '); pos += 4; cur += 4; } } } if a string buffer becomes smaller while writing it, use setlength to in
form the string class of the new size: /** * remove every tab character from `data` */ void removetabs(nsastring& data) { int len = data.length(); char16_t* cur = data.beginwriting(); char16_t* end = data.endwriting(); while (cur < end) { if (char16_t('\t') == *cur) { len -= 1; end -= 1; if (cur < end) memmove(cur, cur + 1, (end - cur) * sizeof(char16_t)); ...
...And 8 more matches
nsIAuthPrompt2
it can be used to prompt users for authentication in
formation, either synchronously or asynchronously.
...to create an instance, use: var authprompt2 = components.classes["@mozilla.org/login-manager/prompter;1"] .createinstance(components.interfaces.nsiauthprompt2); method overview nsicancelable asyncpromptauth(in nsichannel achannel, in nsiauthpromptcallback acallback, in nsisupports acontext, in pruint32 level, in nsiauthin
formation authinfo); boolean promptauth(in nsichannel achannel, in pruint32 level, in nsiauthin
formation authinfo); constants constant value description level_none 0 the password will be sent unencrypted.
...this means prompts that are guaranteed to want the same authentication in
formation from the user.
...And 8 more matches
nsIIDNService
faces.nsiidnservice); method overview autf8string convertacetoutf8(in acstring input); autf8string converttodisplayidn(in autf8string input, out boolean isascii); acstring convertutf8toace(in autf8string input); boolean isace(in acstring input); autf8string normalize(in autf8string input); methods convertacetoutf8() converts an ace (ascii compatible encoding) hostname into unicode
format, returning a utf-8
format string.
... this combines two operations: running the rfc 3490 "tounicode" operation on the original string, then converting the resulting unicode string into utf-8
format.
... autf8string convertacetoutf8( in acstring input ); parameters input the ace encoded hostname to convert into utf-8
format.
...And 8 more matches
nsIPermissionManager
methods add() add permission in
formation and permission type for a given uri.
... addfromprincipal() add permission in
formation and permission type for a given principal.
... remove() remove permission in
formation for a given host string and permission type.
...And 8 more matches
nsIStringBundle
intl/strres/nsistringbundle.idlscriptable this interface provides functions for retrieving both
formatted and un
formatted strings from a properties file.
... method overview wstring
formatstringfromid(in long aid, [array, size_is(length)] in wstring params, in unsigned long length); wstring
formatstringfromname(in wstring aname, [array, size_is(length)] in wstring params, in unsigned long length); nsisimpleenumerator getsimpleenumeration(); wstring getstringfromid(in long aid); wstring getstringfromname(in wstring aname); methods
formatstringfromid() returns a
forma...
...you may also use other
formatting codes.
...And 8 more matches
nsITreeView
layout/xul/base/src/tree/public/nsitreeview.idlscriptable this interface is used by the tree widget to get in
formation about what and how to display a tree widget.
... inherits from: nsisupports last changed in gecko 22 (firefox 22 / thunderbird 22 / seamonkey 2.19) implementing a nsitreeview in lieu of dom methods for tree creation can improve per
formance dramatically, and removes the need to make changes to the tree manually when changes to the database occur.
... further in
formation about creating treeviews is given in the xul tutorial.
...And 8 more matches
nsIXSLTProcessor
content/xslt/public/nsixsltprocessor.idlscriptable xslt processor inherits from: nsisupports last changed in gecko 1.7 implemented by: @mozilla.org/document-trans
former;1?type=xslt.
... to create an instance, use: var xsltprocessor = components.classes["@mozilla.org/document-trans
former;1?type=xslt"] .createinstance(components.interfaces.nsixsltprocessor); method overview void clearparameters(); nsivariant getparameter(in domstring namespaceuri, in domstring localname); void importstylesheet(in nsidomnode style); void removeparameter(in domstring namespaceuri, in domstring localname); void reset(); void setparameter(in domstring namespaceuri, in domstring localname, in nsivariant value); nsidomdocument trans
formtodocument(in nsidomnode source); nsidomdocumentfragment trans
formtofragment(in nsidomnode source, in nsidomdocument output); methods clearparameters() removes all set parameters from this nsixsltprocessor.
...importstylesheet() imports the specified stylesheet into this xsltprocessor for trans
formations.
...And 8 more matches
about:debugging - Firefox Developer Tools
when about:debugging opens, on the left-hand side, you'll see a sidebar with two options and in
formation about your remote debugging setup: setup use the setup tab to configure the connection to your remote device.
... this firefox provides in
formation about temporary extensions you have loaded for debugging, extensions that are installed in firefox, the tabs that you currently have open, and service workers running on firefox.
...if the connection was successful, you can now click the name of the device to switch to a tab with in
formation about the device.
...And 8 more matches
Background Tasks API - Web APIs
because event handling and screen updates are two of the most obvious ways users notice per
formance issues, it's important for your code to be a good citizen of the web and help to prevent stalls in the execution of the event loop.
... getting the most out of idle callbacks because idle callbacks are intended to give your code a way to cooperate with the event loop to ensure that the system is utilized to its full potential without over-tasking it, resulting in lag or other per
formance problems, you should be thoughtful about how you go about using them.
...using timeouts can ensure that your code runs in a timely manner, but it can also allow you to cause lag or animation stutters by mandating that the browser call you when there's not enough time left for you to run without disrupting per
formance.
...And 8 more matches
Constraint validation API - Web APIs
the constraint validation api enables checking values that users have entered into
form controls, before submitting the values to the server.
... concepts and usage certain html
form controls, such as <input>, <select> and <textarea>, can restrict the
format of allowable values, using attributes like required and pattern to set basic constraints.
... validation of constraints through the constraint validation api is done either on a single
form element or at the
form level, on the <
form> element itself.
...And 8 more matches
Using files from web applications - Web APIs
you need to use eventtarget.addeventlistener() to add the change event listener, like this: const inputelement = document.getelementbyid("input"); inputelement.addeventlistener("change", handlefiles, false); function handlefiles() { const filelist = this.files; /* now you can work with the file list */ } getting in
formation about selected file(s) the filelist object provided by the dom lists all of the files selected by the user, each specified as a file object.
... there are three attributes provided by the file object that contain useful in
formation about the file.
...this is just the file name, and does not include any path in
formation.
...And 8 more matches
SVGMatrix - Web APIs
many of svg's graphics operations utilize 2x3 matrices of the
form: [a c e] [b d f] which, when expanded into a 3x3 matrix for the purposes of matrix arithmetic, become: [a c e] [b d f] [0 0 1] an svgmatrix object can be designated as read only, which means that attempts to modify the object will result in an exception being thrown.
... methods svgmatrix.multiply() per
forms matrix multiplication.
... svgmatrix.translate() post-multiplies a translation trans
formation on the current matrix and returns the resulting matrix as svgmatrix.
...And 8 more matches
SubtleCrypto.exportKey() - Web APIs
the exportkey() method of the subtlecrypto interface exports a key: that is, it takes as input a cryptokey object and gives you the key in an external, portable
format.
... keys can be exported in several
formats: see supported
formats in the subtlecrypto.importkey() page for details.
... keys are not exported in an encrypted
format: to encrypt keys when exporting them use the subtlecrypto.wrapkey() api instead.
...And 8 more matches
WebGLRenderingContext.texImage2D() - Web APIs
syntax // webgl1: void gl.teximage2d(target, level, internal
format, width, height, border,
format, type, arraybufferview?
... pixels); void gl.teximage2d(target, level, internal
format,
format, type, imagedata?
... pixels); void gl.teximage2d(target, level, internal
format,
format, type, htmlimageelement?
...And 8 more matches
Lighting in WebGL - Web APIs
this example uses the glmatrix library to per
form its matrix and vertex math.
... once you drop out the concept of point sources and specular lighting, there are two pieces of in
formation we'll need in order to implement our directional lighting: we need to associate a surface normal with each vertex.
...st stride = 0; const offset = 0; gl.bindbuffer(gl.array_buffer, buffers.normal); gl.vertexattribpointer( programinfo.attriblocations.vertexnormal, numcomponents, type, normalize, stride, offset); gl.enablevertexattribarray( programinfo.attriblocations.vertexnormal); } finally, we need to update the code that builds the uni
form matrices to generate and deliver to the shader a normal matrix, which is used to trans
form the normals when dealing with the current orientation of the cube in relation to the light source: const normalmatrix = mat4.create(); mat4.invert(normalmatrix, modelviewmatrix); mat4.transpose(normalmatrix, normalmatrix); ...
...And 8 more matches
WebRTC API - Web APIs
the set of standards that comprise webrtc makes it possible to share data and per
form teleconferencing peer-to-peer, without requiring that the user installs plug-ins or any other third-party software.
... media streams can consist of any number of tracks of media in
formation; tracks, which are represented by objects based on the mediastreamtrack interface, may contain one of a number of types of media data, including audio, video, and text (such as subtitles or even chapter names).
... most streams consist of at least one audio track and likely also a video track, and can be used to send and receive both live media or stored media in
formation (such as a streamed movie).
...And 8 more matches
Web APIs
ent apiddomeencoding apiencrypted media extensionsffetch apifile system api frame timing apifullscreen apiggamepad api geolocation apihhtml drag and drop apihigh resolution timehistory apiiimage capture apiindexeddbintersection observer apillong tasks api mmedia capabilities api media capture and streamsmedia session apimedia source extensions mediastream recordingnnavigation timingnetwork in
formation api ppage visibility apipayment request apiper
formance apiper
formance timeline apipermissions apipointer eventspointer lock apiproximity events push api rresize observer apiresource timing apisserver sent eventsservice workers apistoragestorage access apistreams ttouch eventsuurl apivvibration apivisual viewport wweb animationsweb audio apiweb authentication apiweb crypto apiweb notific...
...vent extendablemessageevent f featurepolicy federatedcredential fetchevent file fileentrysync fileerror fileexception filelist filereader filereadersync filerequest filesystem filesystemdirectoryentry filesystemdirectoryreader filesystementry filesystementrysync filesystemfileentry filesystemflags filesystemsync focusevent fontface fontfaceset fontfacesetloadevent
formdata
formdataentryvalue
formdataevent fullscreenoptions g gainnode gamepad gamepadbutton gamepadevent gamepadhapticactuator geolocation geolocationcoordinates geolocationposition geolocationpositionerror geometryutils gestureevent globaleventhandlers gyroscope h htmlanchorelement htmlareaelement htmlaudioelement htmlbrelement htmlbaseelement htmlbasefontelement htmlbodyelement htmlbutt...
...onelement htmlcanvaselement htmlcollection htmlcontentelement htmldlistelement htmldataelement htmldatalistelement htmldetailselement htmldialogelement htmldivelement htmldocument htmlelement htmlembedelement htmlfieldsetelement htmlfontelement html
formcontrolscollection html
formelement htmlframesetelement htmlhrelement htmlheadelement htmlheadingelement htmlhtmlelement htmlhyperlinkelementutils htmliframeelement htmlimageelement htmlinputelement htmlisindexelement htmlkeygenelement htmllielement htmllabelelement htmllegendelement htmllinkelement htmlmapelement htmlmarqueeelement htmlmediaelement htmlmenuelement htmlmenuitemelement htmlmetaelement htmlmeterelement htmlmodelement htmlolistelement htmlobjectelement htmloptgroupelement htmloptionelement htmloptionscollection htm...
...And 8 more matches
An overview of accessible web applications and widgets - Accessibility
while this results in a widget that looks like its desktop counterpart, there usually isn't enough semantic in
formation in the markup to be usable by an assistive technology.
...there's no in
formation in the markup to describe the widget's
form and function.
...states describe the current interaction state of an element, in
forming the assistive technology if it is busy, disabled, selected, or hidden.
...And 8 more matches
will-change - CSS: Cascading Style Sheets
important: will-change is intended to be used as a last resort, in order to try to deal with existing per
formance problems.
... it should not be used to anticipate per
formance problems.
... /* keyword values */ will-change: auto; will-change: scroll-position; will-change: contents; will-change: trans
form; /* example of <custom-ident> */ will-change: opacity; /* example of <custom-ident> */ will-change: left, top; /* example of two <animateable-feature> */ /* global values */ will-change: inherit; will-change: initial; will-change: unset; proper usage of this property can be a bit tricky: don't apply will-change to too many elements.
...And 8 more matches
Developer guides
these articles provide how-to in
formation to help make use of specific web technologies and apis.
... audio and video manipulation the beauty of the web is that you can combine technologies to create new
forms.
... progressive web apps progressive web apps (pwas) use modern web apis along with traditional progressive enhancement strategy to create cross-plat
form web applications.
...And 8 more matches
<input type="color"> - HTML: Hypertext Markup Language
<input> elements of type color provide a user interface element that lets a user specify a color, either by using a visual color picker interface or by entering the color into a text field in #rrggbb hexadecimal
format.
... only simple colors (without alpha channel) are allowed though css colors has more
formats, e.g.
... color names, functional notations and a hexadecimal
format with an alpha channel.
...And 8 more matches
Regular expressions - JavaScript
if the regular expression remains constant, using this can improve per
formance.
... note: if you are already familiar with the
forms of a regular expression, you may also read the cheatsheet for a quick lookup for a specific pattern/construct.
... if escape strings are not already part of your pattern you can add them using string.replace: function escaperegexp(string) { return string.replace(/[.*+\-?^${}()|[\]\\]/g, '\\$&'); // $& means the whole matched string } the "g" after the regular expression is an option or flag that per
forms a global search, looking in the whole string and returning all matches.
...And 8 more matches
Intl - JavaScript
the intl object is the namespace for the ecmascript internationalization api, which provides language sensitive string comparison, number
formatting, and date and time
formatting.
... intl.datetime
format() constructor for objects that enable language-sensitive date and time
formatting.
... intl.list
format() constructor for objects that enable language-sensitive list
formatting.
...And 8 more matches
test/assert - Archive of obsolete content
message : string optional message to log, providing extra in
formation about the test.
... message : string optional message to log, providing extra in
formation about the test.
... message : string optional message to log, providing extra in
formation about the test.
...And 7 more matches
jpm - Archive of obsolete content
jpm xpi package your add-on as an xpi file, which is the install file
format for firefox add-ons.
... mkdir my-addon cd my-addon jpm init you'll then be asked to supply some in
formation about your add-on: this will be used to create your add-on's package.json file.
... see overloading the built-in modules for more in
formation.
...And 7 more matches
Promises - Archive of obsolete content
promise apis for common asynchronous operations due to the per
formance and stability costs of synchronous io, many apis which rely on it have been deprecated.
...these older interfaces should be avoided, even in their asynchronous
forms, due to their per
formance penalties and needless complexity.
... let resp = yield new promise((resolve, reject) => { let xhr = new xmlhttprequest; xhr.onload = resolve; xhr.onerror = reject; xhr.open("get", dataurl); xhr.responsetype = "json"; xhr.send(); }); let data = resp.target.response; // use the response to construct
form data object for the // second request.
...And 7 more matches
Creating a status bar extension - Archive of obsolete content
some of the samples in this series may be similar to samples you've seen elsewhere, but the goal of this series of articles is to help compile in
formation for new extension developers into one place to make it easy to jump in and get started.
...download the sample the install manifest the install manifest, install.rdf, is a text file containing in
formation that tells the host application important in
formation about the extension.
...extension identification in
formation certain in
formation is needed so firefox can uniquely identify your extension.
...And 7 more matches
Frequently Asked Questions - Archive of obsolete content
if there's a grey area at the top of the source with the text "this xml file does not appear to have any style in
formation associated with it" then the problem is with the svg file.
...for more in
formation see this link.
...for more in
formation on server configuration for svg see this link.
...And 7 more matches
Install Scripts - Archive of obsolete content
you will usually want some
form of control over your install process.
...the registry also stores the set of files and version in
formation about the installed components.
...what you do need to know for an installation is that the registry stores a set of in
formation about your application, such as the file list and versions.
...And 7 more matches
Keyboard Shortcuts - Archive of obsolete content
in the example below, the file menu can be selected by pressing alt + f together (or some other key combination for a specific plat
form).
...the key used for keyboard shortcuts on the user's plat
form.
...the key used for access keys on the user's plat
form.
...And 7 more matches
prefwindow - Archive of obsolete content
on plat
forms where the convention is to apply changes immediately, the preferences are adjusted as soon as the user interface element is changed.
... on other plat
forms, the preferences are not applied until the dialog is closed.
... more in
formation is available in the preferences system article.
...And 7 more matches
Adobe Flash - Archive of obsolete content
on mac os x, there is an additional caveat: netscape gecko browsers such as camino (
formerly chimera), the latest mozilla browsers, and future versions of netscape which are built using the mach-o binary
format won't be able to use flash's scriptability features.
...the flash plugin's description string uses a standard versioning nomenclature that can then be parsed for meaningful in
formation.
...fortunately, mach-o browsers based on netscape gecko expose this in
formation in their user-agent string.
...And 7 more matches
Confidentiality, Integrity, and Availability - Archive of obsolete content
the classic model for in
formation security defines three objectives of security: maintaining confidentiality, integrity, and availability.
... each objective addresses a different aspect of providing protection for in
formation.
... confidentiality confidentiality refers to protecting in
formation from being accessed by unauthorized parties.
...And 7 more matches
Accessible multimedia - Learn web development
multimedia and accessibility so far in this module we have looked at a variety of content and what needs to be done to ensure its accessibility, ranging from simple text content to data tables, images, native controls such as
form elements and buttons, and even more complex markup structures (with wai-aria attributes).
...for more in
formation on how to add more complex features to video/audio players, including flash fallbacks for older browsers, see: audio and video delivery video player styling basics creating a cross-browser video player we've also created an advanced example to show how you could create an object-oriented system that finds every video and audio player on the page (no matter how many there are) and adds...
...if the audio you are presenting is something like a face to face meeting or live spoken per
formance, it would be acceptable to take notes during the per
formance, publish them in full along with the audio, then seek help in cleaning up the notes afterwards.
...And 7 more matches
Web fonts - Learn web development
there are two important things to bear in mind about web fonts: browsers support different font
formats, so you'll need multiple font
formats for decent cross-browser support.
... for example, most modern browsers support woff/woff2 (web open font
format versions 1 and 2), the most efficient
format around, but older versions of ie only support eot (embedded open type) fonts, and you might need to include an svg version of the font to support older versions of iphone and android browsers.
...fonts are created by font foundries and are stored in different file
formats.
...And 7 more matches
What’s in the head? Metadata in HTML - Learn web development
it contains in
formation such as the page <title>, links to css (if you choose to style your html content with css), links to custom favicons, and other metadata (data about the html, such as the author, and important keywords that describe the document.) in this article we'll cover all of the above and more, in order to give you a good basis for working with markup.
...this is the code we used: <p>japanese example: ご飯が熱い。</p> adding an author and description many <meta> elements include name and content attributes: name specifies the type of meta element it is; what type of in
formation it contains.
...some content management systems have facilities to automatically extract page author in
formation and make it available for such purposes.
...And 7 more matches
Beginning our React todo list - Learn web development
the jsx copy the following snippet to your clipboard, then paste it into app.js so that it replaces the existing app() function: function app(props) { return ( <div classname="todoapp stack-large"> <h1>todomatic</h1> <
form> <h2 classname="label-wrapper"> <label htmlfor="new-todo-input" classname="label__lg"> what needs to be done?
... </label> </h2> <input type="text" id="new-todo-input" classname="input input__lg" name="text" autocomplete="off" /> <button type="submit" classname="btn btn__primary btn__lg"> add </button> </
form> <div classname="filters btn-group stack-exception"> <button type="button" classname="btn toggle-btn" aria-pressed="true"> <span classname="visually-hidden">show </span> <span>all</span> <span classname="visually-hidden"> tasks</span> </button> <button type="button" classname="btn toggle-btn" aria-pressed="false"> <span classname="visually-hidden">show </span> <span>active</span> <span classname="...
...first, consider the jsx we have, and how it corresponds to our user stories: we have a <
form> element, with an <input type="text"> for writing out a new task, and a button to submit the
form.
...And 7 more matches
Starting our Svelte Todo list app - Learn web development
copy and paste the following into our todos.svelte component file, replacing the existing content: <!-- todos.svelte --> <div class="todoapp stack-large"> <!-- newtodo --> <
form> <h2 class="label-wrapper"> <label for="todo-0" class="label__lg"> what needs to be done?
... </label> </h2> <input type="text" id="todo-0" autocomplete="off" class="input input__lg" /> <button type="submit" disabled="" class="btn btn__primary btn__lg"> add </button> </
form> <!-- filter --> <div class="filters btn-group stack-exception"> <button class="btn toggle-btn" aria-pressed="true"> <span class="visually-hidden">show</span> <span>all</span> <span class="visually-hidden">tasks</span> </button> <button class="btn toggle-btn" aria-pressed="false"> <span class="visually-hidden">show</span> <span>active</span> <span class="visually-hidden">tasks</span> </button> <button class="btn toggle-btn" aria-pressed="false"> <span class="visually-hidden">show</span> <span>completed</span...
...> <span class="visually-hidden">tasks</span> </button> </div> <!-- todosstatus --> <h2 id="list-heading">2 out of 3 items completed</h2> <!-- todos --> <ul role="list" class="todo-list stack-large" aria-labelledby="list-heading"> <!-- todo-1 (editing mode) --> <li class="todo"> <div class="stack-small"> <
form class="stack-small"> <div class="
form-group"> <label for="todo-1" class="todo-label"> new name for 'create a svelte starter app' </label> <input type="text" id="todo-1" autocomplete="off" class="todo-text" /> </div> <div class="btn-group"> <button class="btn todo-cancel" type="button"> cancel <span class="visually-hidden">rena...
...And 7 more matches
TypeScript support in Svelte - Learn web development
previous overview: client-side javascript frameworks next in the last article we learned about svelte stores and even implemented our own custom store to persist the app's in
formation to web storage.
... rich ide support: type in
formation allows code editors and ides to offer features like code navigation, autocompletion, and smarter hints.
... improved developer experience with typescript typescript provides code editors and ides with lots of in
formation to allow them to deliver a friendlier development experience.
...And 7 more matches
Dynamic behavior in Svelte: working with variables and props - Learn web development
we'll take the tasks in
formation from the markup and store it in a todos array.
...llows: <script> let todos = [ { id: 1, name: 'create a svelte starter app', completed: true }, { id: 2, name: 'create your first component', completed: true }, { id: 3, name: 'complete the rest of the tutorial', completed: false } ] let totaltodos = todos.length let completedtodos = todos.filter(todo => todo.completed).length </script> now let's do something with that in
formation.
...find the <h2> heading with an id of list-heading and replace the hardcoded number of active and completed tasks with dynamic expressions: <h2 id="list-heading">{completedtodos} out of {totaltodos} items completed</h2> go to the app, and you should see the "2 out of 3 items completed" message as before, but this time the in
formation is coming from the todos array.
...And 7 more matches
Getting started with Vue - Learn web development
this allows you to create markup managed entirely by vue, which can improve developer experience and per
formance when dealing with complex applications.
... as you work through this tutorial, you might want to keep the vue guide and api documentation open in other tabs, so you can refer to them if you want more in
formation on any sub topic.
...make sure that "babel" and "linter /
formatter" are selected.
...And 7 more matches
Developer guide
this guide provides in
formation that will not only help you get started as a mozilla contributor, but that you'll find useful to refer to even if you are already an experienced contributor.
... mozilla modules and module ownership this article provides in
formation about mozilla's modules, what the role of a module owner is, and how module owners are selected.
... per
formance per
formance guides and utilities to help you make your code per
form well (and to play nicely with others).
...And 7 more matches
Log.jsm
until stabilized, expect frequent updates, including different interfaces and behavior in different versions of the plat
form.
... the log.jsm javascript code module (
formerly named log4moz.js) provides a log4j style api for logging log messages to various endpoints, such as the browser console or a file on disk.
...log.addappender(new log.consoleappender(new log.basic
formatter())); // a dump appender logs to stdout.
...And 7 more matches
Mozilla DOM Hacking Guide
see section 1.5 for more in
formation about the init() method.
...please see the nsixpcscriptable interface for more in
formation.
...once called, init() sets sisinitialized to true, to remember that the initialization has been per
formed.
...And 7 more matches
Named Shared Memory
the nspr shared memory api provides a cross-plat
form named shared-memory interface that is modeled on similar constructs in the unix and windows operating systems.
... filenames the name passed to pr_opensharedmemory should be a valid filename for a unix plat
form.
...some plat
forms may mangle the name before creating the file and the shared memory.
...And 7 more matches
Overview of NSS
server products from oracle (
formerly sun java enterprise system), including oracle communications messaging server and oracle directory server enterprise edition.
... nss includes a framework to which developers and oems can contribute patches, such as assembler code, to optimize per
formance on their plat
forms.
... nss 3.x has been certified on 18 plat
forms.
...And 7 more matches
Build instructions
use the building nss page for more recent in
formation.
... ns_use_gcc: on plat
forms where gcc is not the native compiler, tells nss to build with gcc instead of the native compiler.
... use_64: on plat
forms that support both 32-bit and 64-bit abis, tells nss to build for the 64-bit abi.
...And 7 more matches
NSS tools : ssltab
this option uses the same output
format as the -h option.
...the following are well-known port numbers: * http 80 * https 443 * smtp 25 * ftp 21 * imap 143 * imaps 993 (imap over ssl) * nntp 119 * nntps 563 (nntp over ssl) usage and examples you can use the ssl debugging tool to intercept any connection in
formation.
... although you can run the tool at its most basic by issuing the ssltap command with no options other than hostname:port, the in
formation you get in this way is not very useful.
...And 7 more matches
NSS tools : ssltap
this option uses the same output
format as the -h option.
...the following are well-known port numbers: * http 80 * https 443 * smtp 25 * ftp 21 * imap 143 * imaps 993 (imap over ssl) * nntp 119 * nntps 563 (nntp over ssl) usage and examples you can use the ssl debugging tool to intercept any connection in
formation.
... although you can run the tool at its most basic by issuing the ssltap command with no options other than hostname:port, the in
formation you get in this way is not very useful.
...And 7 more matches
sslintro.html
this page is part of the ssl reference that we are migrating into the
format described in the mdn style guide.
...sets up configuration files and per
forms other tasks required to run network security services.
...one of these functions must be called before any cryptographic operations can be per
formed with nss.
...And 7 more matches
NSS Tools ssltap
this option uses the same output
format as the -h option.
...the following are well-known port numbers: http 80 https 443 smtp 25 ftp 21 imap 143 imaps 993 (imap over ssl) nntp 119 nntps 563 (nntp over ssl) examples you can use the ssl debugging tool to intercept any connection in
formation.
... although you can run the tool at its most basic by issuing the ssltap command with no options other than hostname:port, the in
formation you get in this way is not very useful.
...And 7 more matches
NSS tools : ssltap
this option uses the same output
format as the -h option.
... the following are well-known port numbers: * http 80 * https 443 * smtp 25 * ftp 21 * imap 143 * imaps 993 (imap over ssl) * nntp 119 * nntps 563 (nntp over ssl) usage and examples you can use the ssl debugging tool to intercept any connection in
formation.
... although you can run the tool at its most basic by issuing the ssltap command with no options other than hostname:port, the in
formation you get in this way is not very useful.
...And 7 more matches
Hacking Tips
these files contain all in
formation to create a tracelogger graph.
... using callgrind (js shell) as spidermonkey just-in-time compiler are rewriting the executed program, valgrind should be in
formed from the command line by adding --smc-check=all-non-file.
...to use the simulator, compile an x86 shell (32-bit, x64 doesn't work as we use a different value
format there), and pass --enable-arm-simulator to configure.
...And 7 more matches
Property cache
the jit reads the property cache too, as it needs the same in
formation when recording such an instruction.
... if there is a cache miss, the jit per
forms parts 1 and 2 of the property access and fills the cache to avoid redoing that work in the interpreter.
...(in
formally: objects with the same shape have the same prototype, class, and layout.) prototype chain shadowing guarantee — if at t0 the object x has shape s and a property x.p of x is found along the prototype chain on object x' of shape s', where x !== x', and the lookup called no resolve hooks or non-native lookup ops, and at t1 the object x has shape s, the object x' has shape s', and no shap...
...And 7 more matches
Querying Places
the results are of type result_type_full_visit and have additional in
formation about the visit, such as the referring visit, and how the transition happened (typed, redirect, link, etc).
...erializing and deserializing two queries and an options object: let querystring = placesutils.history.queriestoquerystring([query1, query2], 2, options); let queriesref = { }; let querycountref = { }; let optionsref = { }; placesutils.history.querystringtoqueries(querystring, queriesref, querycountref, optionsref); // now use queriesref.value, optionsref.value see places query uris for more in
formation about the terms available for "place:" uris.
...see displaying places in
formation using views for more on this.
...And 7 more matches
Using the Places history service
please see history service design for in
formation on the design of the history service, and the places database for a higher-level design overview of places.
...the main url table stores the in
formation about the page: url, host name, title, visit count, hidden, and typed.
... stored separately is the in
formation specific to each visit.
...And 7 more matches
imgIContainer
obsolete since gecko 2.0 void appendframe(in print32 ax, in print32 ay, in print32 awidth, in print32 aheight, in gfximage
format a
format, [array, size_is(imagelength)] out pruint8 imagedata, out unsigned long imagelength); native code only!
... obsolete since gecko 2.0 void appendpalettedframe(in print32 ax, in print32 ay, in print32 awidth, in print32 aheight, in gfximage
format a
format, in pruint8 apalettedepth, [array, size_is(imagelength)] out pruint8 imagedata, out unsigned long imagelength, [array, size_is(palettelength)] out pruint32 palettedata, out unsigned long palettelength); native code only!
... void endframedecode(in unsigned long framenumber); obsolete since gecko 2.0 void ensurecleanframe(in unsigned long aframenum, in print32 ax, in print32 ay, in print32 awidth, in print32 aheight, in gfximage
format a
format, [array, size_is(imagelength)] out pruint8 imagedata, out unsigned long imagelength); native code only!
...And 7 more matches
nsIAccessible
« gecko at interfaces page summary the nsiaccessible interface is a cross-plat
form interface that supports plat
form-specific accessibility apis like msaa and atk.
...can also be used by in-process accessibility clients to get in
formation about objects in the accessible tree.
...use nsiaccessible.groupposition() to get in
formation about this accessible in its group.
...And 7 more matches
nsIAppShell
inherits from: nsisupports last changed in gecko 2.0 (firefox 4 / thunderbird 3.3 / seamonkey 2.1) method overview void create(inout int argc, inout string argv); obsolete since gecko 1.9 void dispatchnativeevent(in prbool arealevent, in voidptr aevent); obsolete since gecko 1.9 void exit(); void favorper
formancehint(in boolean favorperfoverstarvation, in unsigned long starvationdelay); void getnativeevent(in prboolref arealevent, in voidptrref aevent); obsolete since gecko 1.9 void listentoeventqueue(in nsieventqueue aqueue, in prbool alisten); obsolete since gecko 1.9 void resumenative(); void run(); void runinstablestate(in nsirunnable arunnable); void spindown(); obsolete since geck...
...favorper
formancehint() give hint to native event queue notification mechanism.
... if the native plat
form needs to tradeoff per
formance vs.
...And 7 more matches
nsILoginManagerStorage
aactionurl the url of the
form to which the login will be submitted.
... to match any
form login, specify an empty string.
... to not match to any
form login, specify null.
...And 7 more matches
nsIXULAppInfo
xpcom/system/nsixulappinfo.idlscriptable this interface provides in
formation about the host application.
... 1.0 66 introduced gecko 1.8 inherits from: nsisupports last changed in gecko 1.8 (firefox 1.5 / thunderbird 1.5 / seamonkey 1.0) in xulrunner applications nsixulappinfo obtains app-specific in
formation from application.ini.
...it contains advanced in
formation on the xul runtime.
...And 7 more matches
Structures - Plugins
structure summary npanycallbackstruct contains in
formation required during embedded mode printing.
... npembedprint substructure of npprint that contains plat
form-specific in
formation used during embedded mode printing.
... npfullprint substructure of npprint that contains plat
form-specific in
formation used during full-page mode printing.
...And 7 more matches
Console messages - Firefox Developer Tools
the following icons may be used: in
formational message warning error blocked; for network messages in addition, a disclosure triangle indicates that further in
formation is available; clicking it displays or collapses that in
formation.
... if more in
formation is available, a disclosure triangle lets you display it, in an embedded panel that is identical to the network monitor request details.
... css note: css warnings and reflow messages are not shown by default, for per
formance reasons (see bug 1452143).
...And 7 more matches
Using the Gamepad API - Web APIs
per
forming such checks tends to involve using the gamepad object in conjunction with an animation loop (e.g., requestanimationframe), where developers want to make decisions for the current frame based on the state of the gamepad or gamepads.
... the navigator.getgamepads() method returns an array of all devices currently visible to the webpage, as gamepad objects (the first value is always null, so null will be returned if there are no gamepads connected.) this can then be used to get the same in
formation.
...%d buttons, %d axes.", gp.index, gp.id, gp.buttons.length, gp.axes.length); }); the gamepad object's properties are as follows: id: a string containing some in
formation about the controller.
...And 7 more matches
HTMLTextAreaElement - Web APIs
form read only object: returns a reference to the parent
form element.
... if this element is not contained in a
form element, it can be the id attribute of any <
form> element in the same document or the value null.
... required boolean: returns / sets the element's required attribute, indicating that the user must specify a value before submitting the
form.
...And 7 more matches
HTML Drag and Drop API - Web APIs
(see per
forming a drop.) note: neither dragstart nor dragend events are fired when dragging a file into the browser from the os.
... a key difference between the datatransfer and datatransferitem interfaces is that the
former uses the synchronous getdata() method to access a drag item's data, but the latter instead uses the asynchronous getasstring() method.
...see interoperability for more in
formation about drag-and-drop interoperability.
...And 7 more matches
Navigation Timing API - Web APIs
the navigation timing api provides data that can be used to measure the per
formance of a web site.
... unlike javascript-based libraries that have historically been used to collect similar in
formation, the navigation timing api can be much more accurate and reliable.
... concepts and usage you can use the navigation timing api to gather per
formance data on the client side, which you can then transmit to a server using xmlhttprequest or other techniques.
...And 7 more matches
Resource Timing API - Web APIs
the per
formanceresourcetiming interface extends the per
formanceentry for per
formance entries which have an entrytype of "resource".
... the per
formanceresourcetiming interface also includes several network timing properties.
... resource size the per
formanceresourcetiming interface has three properties that can be used to obtain size data about a resource.
...And 7 more matches
WebGL2RenderingContext.getIndexedParameter() - Web APIs
the webgl2renderingcontext.getindexedparameter() method of the webgl 2 api returns indexed in
formation about a given target.
... syntax any gl.getindexedparameter(target, index); parameters target a glenum specifying the target for which to return in
formation.
... possible values: gl.trans
form_feedback_buffer_binding: returns a webglbuffer.
...And 7 more matches
WebGLRenderingContext.getParameter() - Web APIs
equation glenum gl.blend_equation_alpha glenum gl.blend_equation_rgb glenum gl.blend_src_alpha glenum gl.blend_src_rgb glenum gl.blue_bits glint gl.color_clear_value float32array (with 4 values) gl.color_writemask sequence<glboolean> (with 4 values) gl.compressed_texture_
formats uint32array returns the compressed texture
formats.
... gl.green_bits glint gl.implementation_color_read_
format glenum gl.implementation_color_read_type glenum gl.line_width glfloat gl.max_combined_texture_image_units glint gl.max_cube_map_texture_size glint gl.max_fragment_uni
form_vectors glint gl.max_renderbuffer_size glint gl.max_texture_image_units glint gl.max_texture_size ...
... glint gl.max_varying_vectors glint gl.max_vertex_attribs glint gl.max_vertex_texture_image_units glint gl.max_vertex_uni
form_vectors glint gl.max_viewport_dims int32array (with 2 elements) gl.pack_alignment glint gl.polygon_offset_factor glfloat gl.polygon_offset_fill glboolean gl.polygon_offset_units glfloat gl.red_bits glint gl.renderbuffer_binding webglrenderbuffer or null see bindrenderbuffer.
...And 7 more matches
Introduction to the Real-time Transport Protocol (RTP) - Web APIs
keeping latency to a minimum is especially important for webrtc, since face-to-face communication needs to be per
formed with as little latency as possible.
... the more time lag there is between one user saying something and another hearing it, the more likely there is to be episodes of cross-talking and other
forms of confusion.
...those conditions may be affected by everything from the underlying layers of the network stack to the physical network connection, the intervening networks, the per
formance of the remote endpoint, noise levels, traffic levels, and so forth.
...And 7 more matches
Starting up and shutting down a WebXR session - Web APIs
it also lets you per
form some basic testing before taking your code to a real device.
...either way, you need to be prepared for the lack of an xr property and either gracefully handle the error or provide some
form of fallback.
... per
form calculations for the initial position and scale of your objects as needed.
...And 7 more matches
WebXR Device API - Web APIs
events which communicate tracking states will also use xrframe to contain that in
formation.
...once an xrsession is obtained from navigator.xr.requestsession(), the session can be used to check the position and orientation of the viewer, query the device for environment in
formation, and present the virtual or augmented world to the user.
... xrrigidtrans
form a trans
form defined using a position and orientation in the virtual space's coordinate system as described by the xrspace.
...And 7 more matches
Using the Web Speech API - Web APIs
]; var grammar = '#jsgf v1.0; grammar colors; public <color> = ' + colors.join(' | ') + ' ;' the grammar
format used is jspeech grammar
format (jsgf) — you can find a lot more about it at the previous link to its spec.
... the first line — #jsgf v1.0; — states the
format and version used.
...try ' + colorhtml + '.'; document.body.onclick = function() { recognition.start(); console.log('ready to receive a color command.'); } receiving and handling results once the speech recognition is started, there are many event handlers that can be used to retrieve results, and other pieces of surrounding in
formation (see the speechrecognition event handlers list.) the most common one you'll probably use is speechrecognition.onresult, which is fired once a successful result is received: recognition.onresult = function(event) { var color = event.results[0][0].transcript; diagnostic.textcontent = 'result received: ' + color + '.'; bg.style.backgroundcolor = color; console.log('confidence: ' + even...
...And 7 more matches
src - CSS: Cascading Style Sheets
syntax /* <url> values */ src: url(https://somewebsite.com/path/to/font.woff); /* absolute url */ src: url(path/to/font.woff); /* relative url */ src: url(path/to/font.woff)
format("woff"); /* explicit
format */ src: url('path/to/font.woff'); /* quoted url */ src: url(path/to/svgfont.svg#example); /* fragment identifying font */ /* <font-face-name> values */ src: local(font); /* unquoted name */ src: local(some font); /* name containing space */ src: local("font"); /* quoted name */ /* multiple items */ src: local(font), url(path/to/font.svg)
format("svg"), url(path/t...
...o/font.woff)
format("woff"), url(path/to/font.otf)
format("opentype"); values <url> [
format( <string># ) ]?
... specifies an external reference consisting of a <url>, followed by an optional hint using the
format() function to describe the
format of the font resource referenced by that url.
...And 7 more matches
display - CSS: Cascading Style Sheets
formally, the display property sets an element's inner and outer display types.
... inside <display-inside> these keywords specify the element’s inner display type, which defines the type of
formatting context that its contents are laid out in (assuming it is a non-replaced element).
... if its outer display type is inline or run-in, and it is participating in a block or inline
formatting context, then it generates an inline box.
...And 7 more matches
matrix3d() - CSS: Cascading Style Sheets
the matrix3d() css function defines a 3d trans
formation as a 4x4 homogeneous matrix.
... its result is a <trans
form-function> data type.
... matrix3d(a1, b1, c1, d1, a2, b2, c2, d2, a3, b3, c3, d3, a4, b4, c4, d4) values a1 b1 c1 d1 a2 b2 c2 d2 a3 b3 c3 d3 are <number>s describing the linear trans
formation.
...And 7 more matches
translateZ() - CSS: Cascading Style Sheets
its result is a <trans
form-function> data type.
... this trans
formation is defined by a <length> which specifies how far inward or outward the element or elements move.
... in the above interactive examples, perspective: 550px; (to create a 3d space) and trans
form-style: preserve-3d; (so the children, the 6 sides of the cube, are also positioned in the 3d space), have been set on the cube.
...And 7 more matches
User input and controls - Developer guides
this article provides recommendations for managing user input and implementing controls in open web apps, along with faqs, real-world examples, and links to further in
formation for anyone needing more detailed in
formation on the underlying technologies.
...once you decided the input mechanisms, you can control them using tools offered by the web plat
form or javascript libraries.
... recommendations available input mechanisms depend on the capabilities of the device running the application: some devices provide touchscreen displays: the web plat
form offers touch events to interpret finger activity on touch-based user interfaces.
...And 7 more matches
Applying color to HTML elements using CSS - HTML: Hypertext Markup Language
the use of color is a fundamental
form of human expression.
...svg commands are
formatted as xml, and can be embedded directly into a web page or can be placed in he page using the <img> element, just like any other type of image.
... webgl the web graphics library is an opengl es-based api for drawing high-per
formance 2d and 3d graphics on the web.
...And 7 more matches
HTML attribute: accept - HTML: Hypertext Markup Language
it was supported on the <
form> element, but was removed in favor of file in html5.
... because a given file type may be identified in more than one manner, it's useful to provide a thorough set of type specifiers when you need files of specific type, or use the wild card to denote a type of any
format is acceptable.
... for instance, there are a number of ways microsoft word files can be identified, so a site that accepts word files might use an <input> like this: <input type="file" id="docpicker" accept=".doc,.docx,application/msword,application/vnd.openxml
formats-officedocument.wordprocessingml.document"> whereas if you're accepting a media file, you may want to be include any
format of that media type: <input type="file" id="soundfile" accept="audio/*"> <input type="file" id="videofile" accept="video/*"> <input type="file" id="imagefile" accept="image/*"> the accept attribute doesn't validate the types of the selected files; it simply provides hints for browsers to guide users towards selecting the correct file types.
...And 7 more matches
Compression in HTTP - HTTP
compression is an important way to increase the per
formance of a web site.
...compression happens at three different levels: first some file
formats are compressed with specific optimized methods, then general encryption can happen at the http level (the resource is transmitted compressed from end to end), and finally compression can be defined at the connection level, between two nodes of an http connection.
... file
format compression each data type has some redundancy, that is wasted space, in it.
...And 7 more matches
Content-Disposition - HTTP
in a multipart/
form-data body, the http content-disposition general header is a header that can be used on the subpart of a multipart body to give in
formation about the field it applies to.
... the content-disposition header is defined in the larger context of mime messages for e-mail, but only a subset of the possible parameters apply to http
forms and post requests.
... only the value
form-data, as well as the optional directive name and filename, can be used in the http context.
...And 7 more matches
Introduction - JavaScript
where to find javascript in
formation the javascript documentation on mdn includes the following: learn web development provides in
formation for beginners and introduces basic concepts of programming and the internet.
... javascript is a cross-plat
form, object-oriented scripting language used to make webpages interactive (e.g., having complex animations, clickable buttons, popup menus, etc.).
...for example, client-side extensions allow an application to place elements on an html
form and respond to user events such as mouse clicks,
form input, and page navigation.
...And 7 more matches
Functions - JavaScript
see function for in
formation on properties and methods of function objects.
...argn zero or more names to be used by the function as
formal parameters.
...argn zero or more names to be used by the function as
formal argument names.
...And 7 more matches
Date.prototype.toLocaleString() - JavaScript
the new locales and options arguments let applications specify the language whose
formatting conventions should be used and customize the behavior of the function.
... in older implementations, which ignore the locales and options arguments, the locale used and the
form of the string returned are entirely implementation-dependent.
... syntax dateobj.tolocalestring([locales[, options]]) parameters the locales and options arguments customize the behavior of the function and let applications specify the language whose
formatting conventions should be used.
...And 7 more matches
Number.prototype.toLocaleString() - JavaScript
syntax numobj.tolocalestring([locales [, options]]) parameters the locales and options arguments customize the behavior of the function and let applications specify the language whose
formatting conventions should be used.
... in implementations, which ignore the locales and options arguments, the locale used and the
form of the string returned are entirely implementation dependent.
... see the intl.number
format() constructor for details on these parameters and how to use them.
...And 7 more matches
Content type - SVG: Scalable Vector Graphics
the
format of an rgb value in hexadecimal notation is a "#" immediately followed by either three or six hexadecimal characters.
... the three-digit rgb notation (#rgb) is converted into six-digit
form (#rrggbb) by replicating digits, not by adding zeros.
...the
format of an rgb value in the functional notation is an rgb start-function, followed by a comma-separated list of three numerical values (either three integer values or three percentage values) followed by ")".
...And 7 more matches
<metadata> - SVG: Scalable Vector Graphics
metadata is structured in
formation about data.
...used by hub symbol --> <symbol id="hubplug"> <desc>a 10baset/100basetx socket</desc> <path d="m0,10 h5 v-9 h12 v9 h5 v16 h-22 z"/> </symbol> <!-- hub symbol --> <symbol id="hub"> <desc>a typical 10baset/100basetx network hub</desc> <text x="0" y="15">hub</text> <g trans
form="translate(0 20)"> <rect width="253" height="84"/> <rect width="229" height="44" x="12" y="10"/> <circle fill="red" cx="227" cy="71" r="7" /> <!-- five groups each using the defined socket --> <g id="sock1et" trans
form="translate(25 20)"> <title>socket 1</title> <use xlink:href="#hubplug"/> </g> <g id="socket2" trans
form=...
..."translate(70 20)"> <title>socket 2</title> <use xlink:href="#hubplug"/> </g> <g id="socket3" trans
form="translate(115 20)"> <title>socket 3</title> <use xlink:href="#hubplug"/> </g> <g id="socket4" trans
form="translate(160 20)"> <title>socket 4</title> <use xlink:href="#hubplug"/> </g> <g id="socket5" trans
form="translate(205 20)"> <title>socket 5</title> <use xlink:href="#hubplug"/> </g> </g> </symbol> <!-- computer symbol --> <symbol id="computer"> <desc>a common desktop pc</desc> <g id="monitorstand" trans
form="translate(40 121)"> <title>monitor stand</title> <desc>one of those cool swivelling monitor stands t...
...And 7 more matches
Referer header: privacy and security concerns - Web security
however, there are more problematic uses such as tracking or stealing in
formation, or even just side effects such as inadvertently leaking sensitive in
formation.
...if the link was followed, depending on how in
formation was shared the social media site may receive the reset password url and may still be able to use the shared in
formation, potentially compromising a user's security.
... by the same logic, an image hosted on a third party side but embedded in your page could result in sensitive in
formation being leaked to the third party.
...And 7 more matches
File I/O - Archive of obsolete content
createinstance(components.interfaces.nsilocalfile); file.initwithpath("/home"); note: the path should be in the "native"
form (for example"c:\\windows").
...you can also create a directory explicitly; for more in
formation refer to nsifile.create().
... nsifile and path strings you can use nsifile.path to get a plat
form-specific path string, for example "c:\windows\system32" or "/usr/share".
...And 6 more matches
Introduction - Archive of obsolete content
xul school was created by appcoast (
formerly glaxstar), one of the few companies dedicated to building high-quality firefox extensions.
... a team of over a dozen xul developers con
formed glaxstar at the time this tutorial was created, and the combined experiences of years creating firefox extensions are reflected here.
...the tutorial aims to be as brief as possible, often falling back on mozilla documentation for more detailed in
formation.
...And 6 more matches
Setting Up a Development Environment - Archive of obsolete content
it's free, open source, and cross-plat
form.
... it's based on the mozilla xulrunner plat
form, so it has support for some of the particularities in firefox extension development.
...we use this in
formation to locate the installation path of the extension and overwrite the installed files.
...And 6 more matches
Installing plugins to Gecko embedding browsers on Windows - Archive of obsolete content
this in
formation applies to mozilla based browsers that pull the mozilla codebase after the mozilla 0.9.1 milestone release.
...netscape 6.1 and onwards, however, will write these keys, and so creating a plugin installer that puts the shared object (dll) in the right place becomes much easier, since the relevant meta-in
formation is present in the win32 system registry.
...some gecko-based browsers provide additional in
formation via the registry, and where appropriate, these registry keys are also mentioned, with the necessary version caveats.
...And 6 more matches
Mozilla Application Framework - Archive of obsolete content
related: xulrunner:what xulrunner provides, xulrunner hall of fame the mozilla application framework: for powerful, easy to develop cross-plat
form applications want to build applications?
... framework xul a comprehensive, cross-plat
form ui toolkit with an easy-to-learn xml language for defining ui structure, a schema for localization, and support for both native and cross-plat
form (using css) look and feel to make writing uis quick and painless.
... gecko a per
formant web content rendering/editing engine with world-leading support for standards that you can drop into your application with a single line of xul.
...And 6 more matches
Venkman Introduction - Archive of obsolete content
on other plat
forms, including mac os and unix, it is alone in offering this degree of flexibility, depth, and power in a visual debugging environment.
...for more in
formation about the latest improvements and versions, see the venkman development page.
...for more in
formation about this counter and the data, see item 2.2 in the venkman faq.) when you first start venkman, the basic views are arranged as in the screenshot above—though you can customize the layout and presence of the different views however you want, as we describe in the view customization section below.
...And 6 more matches
Introduction - Archive of obsolete content
next » this tutorial is a guide to learning xul (xml user interface language) which is a cross-plat
form language for describing applications' user interfaces.
... most applications need to be developed using features of a specific plat
form making building cross-plat
form software time-consuming and costly.
... a number of cross-plat
form solutions have been developed in the past.
...And 6 more matches
Property Files - Archive of obsolete content
the element has a number of functions which can be used to get strings from the property file and get other locale in
formation.
... text
formatting the next method is get
formattedstring().
...in addition, each occurrence of
formatting code (e.g.
...And 6 more matches
Encryption and Decryption - Archive of obsolete content
encryption is the process of trans
forming in
formation so it is unintelligible to anyone but the intended recipient.
... decryption is the process of trans
forming encrypted in
formation so that it is intelligible again.
... with most modern cryptography, the ability to keep encrypted in
formation secret is based not on the cryptographic algorithm, which is widely known, but on a number called a key that must be used with the algorithm to produce an encrypted result or to decrypt previously encrypted in
formation.
...And 6 more matches
LiveConnect Overview - Archive of obsolete content
see data type conversion for complete in
formation.
...} catch (e) { if (e instanceof java.io.filenotfound) { // handling for filenotfound } else { throw e; } } see exception handling statements for more in
formation about javascript exceptions.
... see the javascript reference for more in
formation about these classes.
...And 6 more matches
Introduction to game development for the Web - Game development
the modern web has quickly become a viable plat
form not only for creating stunning, high quality games, but also for distributing those games.
...thanks to massive per
formance improvements in javascript just-in-time compiler technology and new apis, you can build games that run in the browser (or on html5-powered devices) without making compromises.
... the html5 game plat
form you can truly think of the web as a better target plat
form for your game.
...And 6 more matches
Explaining basic 3D theory - Game development
a vertex is a point in space having its own 3d position in the coordinate system and usually some additional in
formation that defines it.
... you can build geometry using this in
formation — here is an example of a cube: a face of the given shape is a plane between vertices.
... vertex processing vertex processing is about combining the in
formation about individual vertices into primitives and setting their coordinates in the 3d space for the viewer to see.
...And 6 more matches
Audio for Web games - Game development
this article provides a detailed guide to implementing audio for web games, looking at what works currently across as wide a range of plat
forms as possible.
... mobile audio caveats by far the most difficult plat
forms to provide web audio support for are mobile plat
forms.
... unfortunately these are also the plat
forms that people often use to play games.
...And 6 more matches
Desktop gamepad controls - Game development
an api exposes all the in
formation you need to hook up your game's logic and successfully control the user interface and gameplay.
...h contains useful variables and functions: var gamepadapi = { active: false, controller: {}, connect: function(event) {}, disconnect: function(event) {}, update: function() {}, buttons: { layout: [], cache: [], status: [], pressed: function(button, state) {} } axes: { status: [] } }; the controller variable stores the in
formation about the connected gamepad, and there's an active boolean variable we can use to know if the controller is connected or not.
...the next function is update(), which updates the in
formation about the pressed buttons and axes.
...And 6 more matches
Efficient animation for web games - Game development
there are several techniques worth knowing that will improve the per
formance of your game or application whilst also using less battery life, especially on low-end devices.
...there are signals at the beginning and end of animations that allow you to attach javascript callbacks and
form a rudimentary
form of synchronisation (though there are no guarantees on how promptly these callbacks will happen).
...in this vein, it is worth trying to stick to animating only trans
form and opacity properties.
...And 6 more matches
Tiles and tilemaps overview - Game development
this results in per
formance and memory usage gains — big image files containing entire level maps are not needed, as they are constructed by small images or image fragments multiple times.
... this set of articles covers the basics of creating tile maps using javascript and canvas (although the same high level techniques could be used in any programming language.) besides the per
formance gains, tilemaps can also be mapped to a logical grid, which can be used in other ways inside the game logic (for example creating a path-finding graph, or handling collisions) or to create a level editor.
... the tilemap data structure it is common to group all the in
formation needed to handle tilemaps into the same data structure or object.
...And 6 more matches
Practical positioning examples - Learn web development
prerequisites: html basics (study introduction to html), and an idea of how css works (study introduction to css.) objective: to get an idea of the practicalities of positioning a tabbed info-box the first example we'll look at is a classic tabbed info box — a very common feature used when you want to pack a lot of in
formation into a small area.
... this includes in
formation-heavy apps like strategy/war games, mobile versions of websites where the screen is narrow and space is limited, and compact in
formation boxes where you might want to make lots of in
formation available without having it fill the whole ui.
... you might be thinking "why not just create the separate tabs as separate webpages, and just have the tabs clicking through to the separate pages to create the effect?" this code would be simpler, yes, but then each separate "page" view would actually be a newly-loaded webpage, which would make it harder to save in
formation across views, and integrate this feature into a larger ui design.
...And 6 more matches
CSS FAQ - Learn web development
it is generally recommended to use classes as much as possible, and to use ids only when absolutely necessary for specific uses (like to connect label and
form elements or for styling elements that must be semantically unique): using classes makes your styling extensible — even if you only have one element to style with a particular ruleset now, you might want to add more later.
... classes allow you to style multiple elements, therefore they can lead to shorter stylesheets, rather than having to write out the same styling in
formation in multiple rules that use id selectors.
... shorter stylesheets are more per
formant.
...And 6 more matches
Debugging HTML - Learn web development
html is not compiled into a different
form before the browser parses it and shows the result (it is interpreted, not compiled).
...this demo is deliberately written with some built-in errors for us to explore (the html markup is said to be badly-
formed, as opposed to well-
formed).
... let's look at an example: </strong> </li> html validation so you can see from the above example that you really want to make sure your html is well-
formed!
...And 6 more matches
HTML text fundamentals - Learn web development
without headings, your page will per
form poorly in terms of seo (search engine optimization).
...among the various techniques used, they provide an outline of the document by reading out the headings, allowing their users to find the in
formation they need quickly.
...nction(){ // we only want to save the state when the user code is being shown, // not the solution, so that solution is not saved over the user code if(solution.value === 'show solution') { userentry = textarea.value; } else { solutionentry = textarea.value; } updatecode(); }; active learning: marking up our recipe page so at this point in the article, you have all the in
formation you need to mark up our recipe page example.
...And 6 more matches
HTML table basics - Learn web development
in
formation is easily interpreted by making visual associations between row and column headers.
... be under no illusion; for tables to be effective on the web, you need to provide some styling in
formation with css, as well as good solid structure with html.
...html has a method of defining styling in
formation for an entire column of data all in one place — the <col> and <colgroup> elements.
...And 6 more matches
Choosing the right approach - Learn web development
further in
formation introducing asynchronous javascript, in particular async callbacks settimeout() settimeout() is a method that allows you to run a function after an arbitrary amount of time has passed.
... further in
formation cooperative asynchronous javascript: timeouts and intervals, in particular settimeout() settimeout() reference setinterval() setinterval() is a method that allows you to run a function repeatedly with a set interval of time between each execution.
... further in
formation cooperative asynchronous javascript: timeouts and intervals, in particular setinterval() setinterval() reference requestanimationframe() requestanimationframe() is a method that allows you to run a function repeatedly, and efficiently, at the best framerate available given the current browser/system.
...And 6 more matches
Introduction to cross browser testing - Learn web development
on modern browsers you might get something animated, 3d and shiny, whereas on older browsers you might just get a flat graphic representing the same in
formation.
... on the other hand, it is not ok for a site to work fine for sighted users, but be completely inaccessible for visually impaired users because their screen reader application can't read any of the in
formation stored on it.
...you can make some in
formed calls as to what browsers and devices your users will be using (as we'll discuss in the second article in the series — see gotta test 'em all?), but you can't guarantee everything.
...And 6 more matches
Deploying our app - Learn web development
running tests: these can range from "is this code
formatted properly?" to "does this thing do what i expect?", and ensuring failing tests prevent deployment.
... netlify, amongst other things, also allows you to run pre-deployment tasks, which in our case means that all the production code build processes can be per
formed inside of netlify and if the build is successful, the website changes will be deployed.
...the only action we need to per
form is that initial "push".
...And 6 more matches
Package management basics - Learn web development
package registries for a package manager to work, it needs to know where to install packages from, and this comes in the
form of a package registry.
...the date-fns package’s
formatdistancetonow() method is useful for this (there's other packages that do the same thing too).
... in the index.js file, add the following code and save it: import {
formatdistancetonow } from 'date-fns' const date = '1996-09-13 10:00:00'; document.body.textcontent =
formatdistancetonow(new date(date)) + ' ago'; go back to http://localhost:1234 and you'll see how long ago it is since the author turned 18.
...And 6 more matches
SVG Guidelines
pros and cons of svg for images when used as a document
format there is usually a compelling reason that makes svg the only solution.
... when used as an image
format, it is sometimes less obvious whether it would be best to use svg or a raster image
format for any given image.
... the vector
format svg and raster
formats like png both have their place.
...And 6 more matches
Addon
overview of required methods void iscompatiblewith(in string appversion, in string plat
formversion) void findupdates(in updatelistener listener, in integer reason, in string appversion, in string plat
formversion) overview of optional methods void uninstall() void canceluninstall() boolean hasresource(in string path) nsiuri getresourceuri(in string path) void getdatadirectory(in datadirectorycallback callback) required...
... iscompatible read only boolean true or false depending on whether the add-on is compatible with the current application version and plat
form version.
... isplat
formcompatible read only boolean true or false depending on whether the add-on is compatible with the current operating system.
...And 6 more matches
CustomizableUI.jsm
reaid); string getareatype(aareaid); domelement getcustomizetargetforarea(aareaid, awindow); void reset(); void undoreset(); void removeextratoolbar(); object getplacementofwidget(awidgetid); bool iswidgetremovable(awidgetnodeorwidgetid); bool canwidgetmovetoarea(awidgetid); void getlocalizedproperty(awidget, aprop, a
formatargs, adef); void hidepanelfornode(anode); bool isspecialwidget(awidgetid); void addpanelcloselisteners(apanel); void removepanelcloselisteners(apanel); void onwidgetdrag(awidgetid, aarea); void notifystartcustomizing(awindow); void notifyendcustomizing(awindow); void dispatchtoolboxevent(aevent, adetails, awindow); ...
... you can override this last behavior (and destroy the placements in
formation in the saved state) by passing true for adestroyplacements.
... adestroyplacements whether to destroy the placements in
formation for the area, too.
...And 6 more matches
Leak-hunting strategies and tips
this document is old and some of the in
formation is out-of-date.
... tool finds plat
forms requires leak tools for large object graphs leak gauge windows, documents, and docshells only all plat
forms any build gc and cc logs js objects, dom objects, many other kinds of objects all plat
forms any build leak tools for medium-size object graphs bloatview, refcount tracing and balancing objects that implement nsisupports o...
...r use moz_count_{ctor,dtor} all tier 1 plat
forms debug build (or build opt with --enable-logrefcnt) leaksoup (part of tracemalloc) all objects?
...And 6 more matches
NSS functions
other sources of in
formation: the nss_reference documents the functions most commonly used by applications to support ssl.
...mxr 3.4 and later cert_findsmimeprofile mxr 3.2 and later cert_findsubjectkeyidextension mxr 3.7 and later cert_findusercertbyusage mxr 3.4 and later cert_findusercertsbyusage mxr 3.4 and later cert_finishcertificaterequestattributes mxr 3.10 and later cert_finishextensions mxr 3.5 and later cert_
formatname mxr 3.2 and later cert_freedistnames mxr 3.2 and later cert_freenicknames mxr 3.2 and later cert_getavatag mxr 3.2 and later cert_getcertchainfromcert mxr 3.4 and later cert_getcertemailaddress mxr 3.2 and later cert_getcertificatenames mxr 3.10 and later cert_getcertificaterequestextens...
...eralname mxr 3.10 and later cert_getprevnameconstraint mxr 3.10 and later cert_getsloptime mxr 3.2 and later cert_getsslcacerts mxr 3.2 and later cert_getstatename mxr 3.2 and later cert_getusepkixforvalidation mxr 3.12 and later cert_getvaliddnspatternsfromcert mxr 3.12 and later cert_gentime2
formattedascii mxr 3.2 and later cert_hexify mxr 3.2 and later cert_importcachain mxr 3.2 and later cert_importcerts mxr 3.2 and later cert_isrootdercert mxr 3.8 and later cert_isusercert mxr 3.6 and later cert_keyfromdercrl mxr 3.4 and later cert_makecanickname mxr 3.4 and later cer...
...And 6 more matches
NSS Tools
the tools in
formation table below describes both the tools that are currently working and those that are still under development.
...the links will become active when in
formation is available.
...for in
formation about downloading the nss source, see https://developer.mozilla.org/nss/building.
...And 6 more matches
NSS_3.12.3_release_notes.html
nss 3.12.3 release notes 2009-04-01 newsgroup: mozilla.dev.tech.crypto contents introduction distribution in
formation new in nss 3.12.3 bugs fixed documentation compatibility feedback introduction network security services (nss) 3.12.3 is a patch release for nss 3.12.
... distribution in
formation the cvs tag for the nss 3.12.3 release is nss_3_12_3_rtm.
...go to the subdirectory for your plat
form, dbg (debug) or opt (optimized), to get the tar.gz or zip file.
...And 6 more matches
SpiderMonkey 31
it continues to improve per
formance over previous spidermonkey releases, with a significantly improved garbage collector and other features.
...get it here mozilla-esr31 you will find it in "firefox extended support release 31" package on hg release plat
form support spidermonkey 31 is supported on all the plat
forms where firefox 31 runs.
...on some other plat
forms (sparc, mips), the jit is provided but not supported.
...And 6 more matches
WebReplayRoadmap
the low level, yet flexible architecture (described here) provides an extremely powerful plat
form for implementing debugging and analysis features.
... this section describes some analyses that could be per
formed and be helpful for developers who are either debugging a problem, or trying to understand or improve a complex code base.
... if the debugger could per
form this analysis then it could show this in
formation to developers and help them understand the app even when they are not actively debugging a particular recording.
...And 6 more matches
Secure Development Guidelines
introduction provide developers with in
formation on specific security issues cover common coding mistakes and how they affect a product how to avoid making them how to mitigate them everything is oriented toward c/c++ introduction: gaining control specifics about the underlying architecture, using x86 as an example 6 basic registers (eax, ebx, ecx, edx, edi, esi) 2 stack-related registers (esp, ebp) mark top and bottom of current stack frame status register (eflags) contains various state in
formation instruction pointer (eip) points to register being executed; can’t be modifi...
... using call or jump instructions attacks usually rely on obtaining control over the eip otherwise the attacker can try to control memory pointed to by an existing function pointer a vulnerability is required to modify the eip or sensitive memory saved return addr or function pointer get altered introduction: gaining control (3) common issues used to gain control buffer overflows
format string bugs integer overflows/underflows writing secure code: input validation input validation most vulnerabilities are a result of un-validated input always per
form input validation could save you without knowing it examples: if it doesn’t have to be negative, store it in an unsigned int if the input doesn’t have to be > 512, cut it off there if the input shou...
...a/b : 0; } writing secure code: memory management string handling c-style strings are byte arrays that end with a \0 byte some string handling functions won’t per
form any kind of length checking, so don’t use them ensure your string is always \0 terminated!
...And 6 more matches
XPCOM changes in Gecko 2.0
xpt files the path of any xpt files must be listed explicitly in a manifest using an interfaces directive: interfaces components/mycomponent.xpt javascript components the registration in
formation for javascript components is no longer located in the component itself; instead, it's located in the manifest.
...for more in
formation about the mozilla::module structure, see the module.h header file.
...plat
form-specific directories the component/chrome system used to look in plat
form-specific subdirectories of an extension, such as plat
form/winnt_x86-msvc/chrome.manifest on windows.
...And 6 more matches
Packaging WebLock
for more detailed in
formation on packaging and installation of components into gecko-based applications, see http://www.mozilla.org/projects/xpinstall.
...the installation script for the weblock component can also be used to register the component with the browser into which it is installed (see registration methods in xpcom for more in
formation on registration).
... like the windows registry, the chrome registry is a database of in
formation about applications, skins, and other extensions that have been installed in a gecko application.
...And 6 more matches
nsIHTMLEditor
in nsidomnode adestinationnode, in long adestinationoffset, in boolean adeleteselection); void insertlinkaroundselection(in nsidomelement aanchorelement); boolean isanonymouselement(in nsidomelement aelement); void makeorchangelist(in astring alisttype, in boolean entirelist, in astring abullettype); boolean nodeisblock(in nsidomnode node); void pasteno
formatting(in long aselectiontype); void rebuilddocumentfromsource(in astring asourcestring); void removealldefaultproperties(); void removeallinlineproperties(); void removedefaultproperty(in nsiatom aproperty, in astring aattribute, in astring avalue); void removeinlineproperty(in nsiatom aproperty, in astring aattribute); void removeinsertionlis...
... void setbodyattribute(in astring aattr, in astring avalue); void setcaretafterelement(in nsidomelement aelement); void setcssinlineproperty(in nsiatom aproperty, in astring aattribute, in astring avalue); void setdocumenttitle(in astring atitle); void setinlineproperty(in nsiatom aproperty, in astring aattribute, in astring avalue); void setparagraph
format(in astring aparagraph
format); void updatebaseurl(); attributes attribute type description iscssenabled boolean a boolean which is true is the htmleditor has been instantiated with css knowledge and if the css pref is currently checked.
... getheadcontentsashtml() output the contents of the <head> section as text/html
format.
...And 6 more matches
nsINavHistoryResultViewObserver
: nsisupports last changed in gecko 1.9.0 method overview boolean candrop(in long index, in long orientation); void ondrop(in long row, in long orientation); void ontoggleopenstate(in long index); void oncycleheader(in nsitreecolumn column); void oncyclecell(in long row, in nsitreecolumn column); void onselectionchanged(); void onper
formaction(in wstring action); void onper
formactiononrow(in wstring action, in long row); void onper
formactiononcell(in wstring action, in long row, in nsitreecolumn column); constants constant value description drop_before -1 the drag operation wishes to insert the dragged item before the indicated row.
...onper
formaction() this method provides a command api that can be used to invoke commands on the selection.
... void onper
formaction( in wstring action ); parameters action a string identifying the action to be per
formed.
...And 6 more matches
Mozilla technologies
accessibility api implementation detailsthese pages contain documentation on mozilla specific implementation details of assistive technology apis.animated png graphicsapng is an extension of the portable network graphics (png)
format, adding support for animated images.
...r entirely to docshell.embedded dialog apifeed content access apifirefox 2 and thunderbird 2 introduce a series of interfaces that make it easy for extension authors to access rss and atom feeds.life after xul: building firefox interfaces with htmlthis page gathers technical solutions to common problems encountered by teams shipping html-based interfaces inside firefox.morkmork is a database file
format invented by david mccusker for the mozilla code since the original netscape database in
formation was proprietary and could not be released open source.
... starting with mozilla 1.9, it was phased out in favor of sqlite, a more widely-supported file
format.placesplaces is the bookmarks and history management system introduced in firefox 3.
...And 6 more matches
Gecko Plugin API Reference - Plugins
plug-in basics how plug-ins are used plug-ins and helper applications how plug-ins work understanding the runtime model plug-in detection how gecko finds plug-ins checking plug-ins by mime type overview of plug-in structure understanding the plug-in api plug-ins and plat
form independence windowed and windowless plug-ins the default plug-in using html to display plug-ins plug-in display modes using the object element for plug-in display nesting rules for html elements using the appropriate attributes using the embed element for plug-in display using custom embed attributes plug-in references plug-in development overview writing plug-ins registering plug-ins ms windows unix mac os x drawi...
...ng a plug-in instance handling memory sending and receiving streams working with urls getting version and ui in
formation displaying messages on the status line making plug-ins scriptable building plug-ins building, plat
forms, and compilers building carbonized plug-ins for mac os x type libraries installing plug-ins native installers xpi plug-ins installations plug-in installation and the windows registry initialization and destruction initialization instance creation instance destruction shutdown initialize and shutdown example drawing and event handling the npwindow structure drawing plug-ins printing the plug-in setting the window getting in
formation windowed plug-ins mac os windows unix event handling fo...
...reating a stream pushing data into the stream deleting the stream example of sending a stream urls getting urls getting the url and displaying the page posting urls posting data to an http server uploading files to an ftp server sending mail memory allocating and freeing memory mac os flushing memory (mac os only) version, ui, and status in
formation displaying a status line message getting agent in
formation getting the current version finding out if a feature exists reloading a plug-in plug-in side plug-in api this chapter describes methods in the plug-in api that are available from the plug-in object.
...And 6 more matches
Introduction to DOM Inspector - Firefox Developer Tools
by clicking around in the document pane, you'll see that the viewers are linked; whenever you select a new node from the dom nodes viewer, the dom node viewer is automatically updated to reflect the in
formation for that node.
...(note that there are bugs which prevent the flasher from dom inspector apis from working correctly on certain plat
forms.) if you inspect the main browser window, for example, and select nodes in the dom nodes viewer (other than the elements which have no visible ui as is the case with the endless list of script elements that are loaded into browser.xul), you will see the various parts of the browser interface being highlighted with a blinking red border.
... you can traverse the structure and go from the topmost parts parts of the dom tree to lower level nodes, such as the "search-go-button" icon that lets users per
form a query using the selected search engine.
...And 6 more matches
Debugger.Script - Firefox Developer Tools
for the
former, it is the debugger api’s presentation of a jsapi jsscript object.
... the two cases are distinguished by their
format property being "js" or "wasm".
... debugger.script for jsscripts for debugger.script instances referring to a jsscript, they are distinguished by their
format property being "js".
...And 6 more matches
Call Tree - Firefox Developer Tools
you can find the specific profile we discuss here - just import it to the per
formance tool to follow along.
...he whole call graph, with associated sample count: sortall() // 8 -> sort() // 37 -> bubblesort() // 1345 -> swap() // 252 -> selectionsort() // 190 -> swap() // 1 -> quicksort() // 103 -> partition() // 12 plat
form data you'll also see some rows labeled gecko, input & events, and so on.
... this can be useful in
formation too.
...And 6 more matches
How whitespace is handled by HTML, CSS, and in the DOM - Web APIs
these characters allow you to
format your code in a way that will make it easily readable by yourself and other people.
...this is needed internally so that the editor can preserve
formatting of documents.
... because of this, it establishes what is called an inline
formatting context.
...And 6 more matches
Using Fetch - Web APIs
mode: 'cors', // no-cors, *cors, same-origin cache: 'no-cache', // *default, no-cache, reload, force-cache, only-if-cached credentials: 'same-origin', // include, *same-origin, omit headers: { 'content-type': 'application/json' // 'content-type': 'application/x-www-
form-urlencoded', }, redirect: 'follow', // manual, *follow, error referrerpolicy: 'no-referrer', // no-referrer, *no-referrer-when-downgrade, origin, origin-when-cross-origin, same-origin, strict-origin, strict-origin-when-cross-origin, unsafe-url body: json.stringify(data) // body data type must match "content-type" header }); return response.json(); // parses json response into ...
...native javascript objects } postdata('https://example.com/answer', { answer: 42 }) .then(data => { console.log(data); // json data parsed by `data.json()` call }); note that mode: "no-cors" only allows a limited set of headers in the request: accept accept-language content-language content-type with a value of application/x-www-
form-urlencoded, multipart/
form-data, or text/plain sending a request with credentials included to cause browsers to send a request with credentials included, even for a cross-origin call, add credentials: 'include' to the init object you pass to the fetch() method.
... fetch('https://example.com/profile', { method: 'post', // or 'put' headers: { 'content-type': 'application/json', }, body: json.stringify(data), }) .then(response => response.json()) .then(data => { console.log('success:', data); }) .catch((error) => { console.error('error:', error); }); uploading a file files can be uploaded using an html <input type="file" /> input element,
formdata() and fetch().
...And 6 more matches
Checking when a deadline is due - Web APIs
the basic problem in the to-do app, we wanted to first record time and date in
formation in a
format that is both machine readable and human understandable when displayed, and then check whether each time and date is occurring at the current moment.
... this would be easy if we were just comparing two date objects, but of course humans don't want to enter deadline in
formation in the same
format javascript understands.
... recording the date in
formation to provide a reasonable user experience on mobile devices, and to cut down on ambiguities, i decided to create an html
form with: a text input for entering a title for your to-do list.
...And 6 more matches
Using the Payment Request API - Web APIs
the payment request api provides a browser-based method of connecting users and their preferred payment systems and plat
forms to merchants that they want to pay for goods and services.
...this takes two mandatory parameters and one option parameter: methoddata — an object containing in
formation concerning the payment provider, such as what payment methods are supported, etc.
... details — an object containing in
formation concerning the specific payment, such as the total payment amount, tax, shipping cost, etc.
...And 6 more matches
Payment Request API - Web APIs
it is not a new way for paying for things; rather, it's a way for users to select their preferred way of paying for things, and make that in
formation available to a merchant.
... payment request concepts and usage many problems related to online shopping-cart abandonment can be traced to checkout
forms, which can be difficult and time consuming to fill out and often require multiple steps to complete.
... the payment request api is meant to reduce the number of steps needed to complete a payment online, potentially doing away with checkout
forms.
...And 6 more matches
SVGSVGElement - Web APIs
when the browser actually knows the physical size of a "screen unit", this float attribute will express that in
formation; otherwise, user agents will provide a suitable default value (such as .28mm).
...the meaning depends on the situation: if the initial view was a "standard" view, then: the values for viewbox, preserveaspectratio and zoomandpan within currentview will match the values for the corresponding dom attributes that are on svgsvgelement directly the values for trans
form and viewtarget within currentview will be null if the initial view was a link into a <view> element, then: the values for viewbox, preserveaspectratio and zoomandpan within currentview will correspond to the corresponding attributes for the given <view> element the values for trans
form and viewtarget within currentview will be null if the initial view was a link into another element ...
...(i.e., other than a <view>), then: the values for viewbox, preserveaspectratio and zoomandpan within currentview will match the values for the corresponding dom attributes that are on svgsvgelement directly for the closest ancestor <svg> element the values for trans
form within currentview will be null the viewtarget within currentview will represent the target of the link if the initial view was a link into the svg document fragment using an svg view specification fragment identifier (i.e., #svgview(…)), then: the values for viewbox, preserveaspectratio, zoomandpan, trans
form and viewtarget within currentview will correspond to the values from the svg view specification fragment identifier svgsvgelement.currentscale on an outermost <svg> element, this float attribute i...
...And 6 more matches
WebGLRenderingContext.getProgramParameter() - Web APIs
the webglrenderingcontext.getprogramparameter() method of the webgl api returns in
formation about the given program.
... syntax any gl.getprogramparameter(program, pname); parameters program a webglprogram to get parameter in
formation from.
... pname a glenum specifying the in
formation to query.
...And 6 more matches
WebGL: 2D and 3D graphics for the web - Web APIs
webgl (web graphics library) is a javascript api for rendering high-per
formance interactive 3d and 2d graphics within any compatible web browser without the use of plug-ins.
... webgl does so by introducing an api that closely con
forms to opengl es 2.0 that can be used in html5 <canvas> elements.
... this con
formance makes it possible for the api to take advantage of hardware graphics acceleration provided by the user's device.
...And 6 more matches
XRReferenceSpace.getOffsetReferenceSpace() - Web APIs
then, when drawing the scene, you can use the offset reference space to not only position objects relative to one another, but to apply the needed trans
forms to render objects properly based upon the viewer's position.
... syntax offsetreferencespace = xrreferencespace.getoffsetreferencespace(originoffset); parameters originoffset an xrrigidtrans
form specifying the offset to the origin of the new reference space.
... xrsession.requestreferencespace("local") .then((refspace) => { xrreferencespace = refspace; xrreferencespace = xrreferencespace.getoffsetreferencespace( new xrrigidtrans
form(startposition, {x:0, y:0, z:1.0, w: 1.0})); xrsession.requestanimationframe(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.
...And 6 more matches
Using the aria-invalid attribute - Accessibility
the aria-invalid attribute is used to indicate that the value entered into an input field does not con
form to the
format expected by the application.this may include
formats such as email addresses or telephone numbers.
... this attribute can be used with any typical html
form element; it is not limited to elements that have an aria role assigned.
... possible effects on user agents and assistive technology user agents should in
form the user when a field is invalid.
...And 6 more matches
ARIA: gridcell role - Accessibility
it is intended to mimic the functionality of the html td element for table-style grouping of in
formation.
... this sample code demonstrates a table-style grouping of in
formation where the third and fourth columns have been removed.
...gridcell" aria-colindex="1">debra</div> <div role="gridcell" aria-colindex="2">burks</div> <div role="gridcell" aria-colindex="5">new york</div> <div role="gridcell" aria-colindex="6">14127</div> </div> </div> … </div> describing the position of gridcells when the overall structure is unknown in situations where the table-style grouping of content does not provide in
formation about the columns and rows, gridcells must have their positions programatically described by using aria-describedby.
...And 6 more matches
ARIA: textbox role - Accessibility
the textbox role is used to identify an element that allows the input of free-
form text.
... the default is a single line input, in which return or enter submits the
form; in this case, it is preferable to use an html <input> with type="text".
... aria-multiline attribute if aria-multiline="true" is set, the at in
forms the user that the textbox supports multi-line input, with the expectation that enter or return will create a line break rather than submitting the
form.
...And 6 more matches
:is() (:matches(), :any()) - CSS: Cascading Style Sheets
this is useful for writing large selectors in a more compact
form.
...dfirefox for androidopera for androidsafari on iossamsung internet:is()chrome full support 68notes disabled full support 68notes disabled notes combinators in the selector list argument may not match correctly (see bug 842157).disabled from version 68: this feature is behind the #enable-experimental-web-plat
form-features preference (needs to be set to enabled).
... no support 66 — 71notes alternate name disabled notes combinators in the selector list argument may not match correctly (see bug 842157).alternate name uses the non-standard name: :matches()disabled from version 66 until version 71 (exclusive): this feature is behind the #enable-experimental-web-plat
form-features preference (needs to be set to enabled).
...And 6 more matches
Adapting to the new two-value syntax of display - CSS: Cascading Style Sheets
changing an element's display value changes the
formatting context of its direct children.
...the children are described as participating in a flex
formatting context.
...using display: grid will give you a block-level box, which creates a grid
formatting context for the direct children.
...And 6 more matches
perspective() - CSS: Cascading Style Sheets
the perspective() css function defines a trans
formation that sets the distance between the user and the z=0 plane, the perspective from which the viewer would be if the 2-dimensional interface were 3-dimensional.
... its result is a <trans
form-function> data type.
... the perspective() trans
form function is part of the trans
form value applied on the element being trans
formed.
...And 6 more matches
transition-duration - CSS: Cascading Style Sheets
formal definition initial value0sapplies toall elements, ::before and ::after pseudo-elementsinheritednocomputed valueas specifiedanimation typediscrete
formal syntax <time># examples transition-duration: 0.5s <div class="parent"> <div class="box">lorem</div> </div> .parent { width: 250px; height:125px;} .box { width: 100px; height: 100px; background-color: red; font-si...
...ze: 20px; left: 0px; top: 0px; position:absolute; -webkit-transition-property: width height background-color font-size left top trans
form -webkit-trans
form color; -webkit-transition-duration:0.5s; -webkit-transition-timing-function: ease-in-out; transition-property: width height background-color font-size left top trans
form -webkit-trans
form color; transition-duration:0.5s; transition-timing-function: ease-in-out; } .box1{ trans
form: rotate(270deg); -webkit-trans
form: rotate(270deg); width: 50px; height: 50px; background-color: blue; color: yellow; font-size: 18px; left: 150px; top:25px; position:absolute; -webkit-transition-property: width height background-color font-size left top trans
form -webkit-trans
form colo...
...r; -webkit-transition-duration:0.5s; -webkit-transition-timing-function: ease-in-out; transition-property: width height background-color font-size left top trans
form -webkit-trans
formv color; transition-duration:0.5s; transition-timing-function: ease-in-out; } function updatetransition() { var el = document.queryselector("div.box"); if (el) { el.classname = "box1"; } else { el = document.queryselector("div.box1"); el.classname = "box"; } return el; } var intervalid = window.setinterval(updatetransition, 7000); transition-duration: 1s <div class="parent"> <div class="box">lorem</div> </div> .parent { width: 250px; height:125px;} .box { width: 100px; height: 100px; background-color: red; font-size: 20px; left: 0px...
...And 6 more matches
WAI ARIA Live Regions/API Support - Developer guides
these features will help screen reader developers improve the quality and per
formance of live region support, both for pages that are marked up with aria live region markup, and for pages where the author did not add any additional markup.
...this means that the at does not need to traverse up the parent chain to get this in
formation.
...determining if event was from user input all events will now provide in
formation about whether the event was caused by user input, or was something that the web page caused.
...And 6 more matches
Adding captions and subtitles to HTML5 video - Developer guides
this article will take the same player and show how to add captions and subtitles to it, using the webvtt
format and the <track> element.
... captions versus subtitles captions and subtitles are not the same thing: they have significantly different audiences, and convey different in
formation, and it is recommended that you read up on the differences if you are not sure what they are.
...the various attributes of this element allow us to specify such things as the type of content that we're adding, the language it's in, and of course a reference to the text file that contains the actual subtitle in
formation.
...And 6 more matches
<output>: The Output element - HTML: Hypertext Markup Language
content categories flow content, phrasing content, listed, labelable, resettable
form-associated element, palpable content.
...
form the <
form> element to associate the output with (its
form owner).
... the value of this attribute must be the id of a <
form> in the same document.
...And 6 more matches
Content negotiation - HTTP
in http, content negotiation is the mechanism that is used for serving different representations of a resource at the same uri, so that the user agent can specify which is best suited for the user (for example, which language of a document, which image
format, or which content encoding).
... the in
formation by the client is quite verbose (http/2 header compression mitigates this problem) and a privacy risk (http fingerprinting) as several representations of a given resource are sent, shared caches are less efficient and server implementations are more complex.
... compressing http messages is one of the most important ways to improve the per
formance of a web site, it shrinks the size of the data transmitted and makes better use of the available bandwidth; browsers always send this header and the server should be configured to abide to it and to use compression.
...And 6 more matches
A typical HTTP session - HTTP
as of http/1.1, the connection is no longer closed after completing the third phase, and the client is now granted a further request: this means the second and third phases can now be per
formed any number of times.
...an absolute url without the protocol or domain name the http protocol version subsequent lines represent an http header, giving the server in
formation about what type of data is appropriate (e.g., what language, what mime types), or other data altering its behavior (e.g., not sending an answer if it is already cached).
... these http headers
form a block which ends with an empty line.
...And 6 more matches
HTTP response status codes - HTTP
responses are grouped in five classes: in
formational responses (100–199), successful responses (200–299), redirects (300–399), client errors (400–499), and server errors (500–599).
... in
formation responses 100 continue this interim response indicates that everything so far is ok and that the client should continue the request, or ignore the response if the request is already finished.
... 203 non-authoritative in
formation this response code means the returned meta-in
formation is not exactly the same as is available from the origin server, but is collected from a local or a third-party copy.
...And 6 more matches
Details of the object model - JavaScript
a constructor method can specify initial values for the instance's properties and per
form other processing appropriate at creation time.
... in a real application, you would probably define constructors that allow you to provide property values at object creation time (see more flexible constructors for in
formation).
...however, in talking about javascript, "instance" can be used in
formally to mean an object created using a particular constructor function.
...And 6 more matches
Grammar and types - JavaScript
(for more in
formation, see the detailed reference about javascript's lexical grammar.) it is considered best practice, however, to always write a semicolon after a statement, even when it is not strictly needed.
...the names of variables, called identifiers, con
form to certain rules.
...this
form creates an undeclared global variable.
...And 6 more matches
JavaScript modules - JavaScript
r more details.disabled from version 12.0.0: this feature is behind the --experimental-modules runtime flag.available in workerschrome full support 80 full support 80 full support 67disabled disabled from version 67: this feature is behind the experimental web plat
form features preference.
... to change preferences in chrome, visit chrome://flags.edge full support 80 full support 80 full support 79disabled disabled from version 79: this feature is behind the experimental web plat
form features preference.firefox no support noie no support noopera no support nosafari no support nowebview android full support 80chrome android full support 80 full support ...
... 80 full support 67disabled disabled from version 67: this feature is behind the experimental web plat
form features preference.
...And 6 more matches
Date.prototype.toLocaleDateString() - JavaScript
the new locales and options arguments let applications specify the language whose
formatting conventions should be used and allow to customize the behavior of the function.
... in older implementations, which ignore the locales and options arguments, the locale used and the
form of the string returned are entirely implementation dependent.
... syntax dateobj.tolocaledatestring([locales [, options]]) parameters the locales and options arguments customize the behavior of the function and let applications specify the language whose
formatting conventions should be used.
...And 6 more matches
Date.prototype.toLocaleTimeString() - JavaScript
the new locales and options arguments let applications specify the language whose
formatting conventions should be used and customize the behavior of the function.
... in older implementations, which ignore the locales and options arguments, the locale used and the
form of the string returned are entirely implementation dependent.
... syntax dateobj.tolocaletimestring([locales[, options]]) parameters the locales and options arguments customize the behavior of the function and let applications specify the language whose
formatting conventions should be used.
...And 6 more matches
Web media technologies
today, there are a large number of apis available, as well as html elements, dom interfaces, and other features that make it possible to not only per
form these tasks, but use media in tandem with other technologies to do truly remarkable things.
... <track> the html <track> element can be placed within an <audio> or <video> element to provide a reference to a webvtt
format subtitle or caption track to be used when playing the media.
...multiple sources can be used to provide the media in different
formats, sizes, or resolutions.
...And 6 more matches
How to make PWAs installable - Progressive web apps (PWAs)
the manifest file the key element is a web manifest file, which lists all the in
formation about the website in a json
format.
...it contains useful in
formation, such as the app’s title, paths to different-sized icons that can be used to represent the app on an os (such as an icon on the home screen, an entry in the start menu, or an icon on the desktop), and a background color to use in loading or splash screens.
... this in
formation is needed for the browser to present the web app properly during the installation process, as well as within the device's app-launching interface, such as the home screen of a mobile device.
...And 6 more matches
The building blocks of responsive design - Progressive web apps (PWAs)
in this article we will discuss the main essential components of responsive design, with some links to further in
formation where necessary.
...one approach to this is to create different versions of your site/app for different plat
forms or browsers and serve them appropriately after detecting which browser or plat
form is looking at your site.
... it is usually much better to create a single version of your code which doesn't care about what browser or plat
form is accessing the site, but instead uses feature tests to find out what code features the browser supports or what the values of certain browser features are, and then adjusts the code appropriately.
...And 6 more matches
Web security
even simple bugs in your code can result in private in
formation being leaked, and bad people are out there trying to find ways to steal data.
... the web security-oriented articles listed here provide in
formation that may help you secure your site and its code from attacks and data theft.
... connection security transport security layer (tls) the transport layer security (tls) protocol is the standard for enabling two networked applications or devices to exchange in
formation privately and robustly.
...And 6 more matches
system - Archive of obsolete content
usage querying your environment using the system module you can access environment variables (such as path), find out which operating system your add-on is running on and get in
formation about the host application (for example, firefox or fennec), such as its version.
... var system = require("sdk/system"); // path environment variable console.log(system.env.path); // operating system console.log("plat
form = " + system.plat
form); // processor architecture console.log("architecture = " + system.architecture); // compiler used to build host application console.log("compiler = " + system.compiler); // host application build identifier console.log("build = " + system.build); // host application uuid console.log("id = " + system.id); // host application name console.log("name = " + system.name); // host application version console.log("version = " + system.version); // host application vendor console.log("vendor = " + system.vendor); // host application profile directory console.log("profile directory = " + system.pathfor("profd")); quit the host application to ...
... plat
form the type of operating system you're running on.
...And 5 more matches
Setting up an extension development environment - Archive of obsolete content
development profile the use of a separate user profile for development can be advantageous, averting per
formance degradation from development related settings, and further isolating personal data (such as bookmarks, extensions, and settings) from your testing environment.
...see this bug for more in
formation.
... development preferences there is a set of development preferences that, when enabled, allows you to view more in
formation about application activity, thus making debugging easier.
...And 5 more matches
Signing an XPI - Archive of obsolete content
introduction this article describes how to sign your own firefox extensions with a code-signing certificate on a windows plat
form.
... this article is a mirror of the original, with minor re
formatting, some new info and all links updated in march 2010.
... warning: per
forming this operation while the browser is running could cause corruption of your security databases.
...And 5 more matches
No Proxy For configuration - Archive of obsolete content
initially, proxy servers were used for access control and per
formance.
...because the public network was small in scope and connections were slow, a caching proxy could often improve the overall per
formance.
... note for
former-ie users: "*" is supported only at the beginning of domain filters (*.mozilla.org).
...And 5 more matches
JavaScript Client API - Archive of obsolete content
further, you agree (a) to maintain and link to (including on websites from which your third party client may be downloaded) a separate, conspicuous, and reasonably detailed privacy policy detailing how data collected or transmitted by your third party client is managed and protected; (b) that your third party client will only store data in encrypted
form on the firefox sync servers operated by mozilla; (c) that you and your third party client will use the firefox sync apis solely for their intended purpose; (d) that your third party client will not hide or mask its identity as it uses the services and/or firefox sync apis, including by failing to follow required identification conventions; and (e) that you and your third party client will not use...
... the firefox sync apis for any application or service that replicates or attempts to replicate the services or firefox sync experience unless such use is non-confusing (by non-confusing, we mean that people should always know with whom they are dealing and where the in
formation or software they are downloading came from).
... engine governs the synchronizing of a specific set of in
formation.
...And 5 more matches
Space Manager High Level Design - Archive of obsolete content
this in
formation is used by block layout to correctly compute where other floated elements should be placed, and how much space is available to normal in-flow elements that flow around the floated bits.
...during reflow, the space manager stores the space taken up by floats (updatespacemanager in nsblockframe) and provides in
formation about the space available for other elements (getavailablespace in nsblockreflowstate).
... data model class/component diagram nsspacemanager: the central point of management of the space taken up by floats in a block nsbanddata: provides in
formation about the frames occupying a band of occupied or available space nsblockbanddata: a specialization of nsbanddata that is used by nsblockreflowstate to determine the available space, float impacts, and where floats are cleared.
...And 5 more matches
Menus - Archive of obsolete content
see menu buttons for more in
formation.
...see menu buttons for more in
formation.
...the first menubar encountered when parsing the xul window will be used as the main menu bar for the window, and on the macintosh, will be hidden from the main window and trans
formed into a native menu bar at the top of the screen.
...And 5 more matches
SeaMonkey - making custom toolbar (SM ver. 1.x) - Archive of obsolete content
(for seamonkey 2, firefox, thunderbird and sunbird, see the page: custom toolbar button) you do not need any special technical skills or tools, and almost all the in
formation you need is on this page.
...you can optionally use a jar tool or zip tool to package your button as a cross-plat
form installable (xpi) for other people to install and use.
... note: for in
formation about how to find the directory where you installed seamonkey, see: installation directory if you cannot easily find the directory, you can use the following method to find it.
...And 5 more matches
XPCOM Interfaces - Archive of obsolete content
« previousnext » in this section, we'll take a brief look at xpcom (cross-plat
form component object model), which is the object system that mozilla uses.
...we can attach scripts which modify the interface and per
form tasks.
... however, there are quite a number of things that cannot be per
formed directly with javascript.
...And 5 more matches
Writing Skinnable XUL and CSS - Archive of obsolete content
if you wish for your package to blend in with the other packages, then the skin for your package should inherit in
formation from the global skin in order to reduce the amount of duplication across packages and in order to make the ui as a whole easier to skin.
...skin files that don't import any other skin files, but that are only intended to be used in the context of another component's skin are also considered derived skin files, since they are implicitly importing in
formation from the other component's skin.
...they should instead rely on the context in which they will appear for color, font, and border in
formation.
...And 5 more matches
Getting started with XULRunner - Archive of obsolete content
next » this article explores the mozilla plat
form by building a basic desktop application using xulrunner.
... given that firefox, thunderbird, and multiple other applications are written using the plat
form, it's a safe bet that it can be used to build a basic application.
...one way to achieve this is to run the following script everytime you want to install a new version: firefox_version=`grep -po "\d{2}\.\d+" /usr/lib/firefox/plat
form.ini` arch=`uname -p` xurl=https://ftp.mozilla.org/pub/mozilla.org/xulrunner/releases/$firefox_version/runtimes/xulrunner-$firefox_version.en-us.linux-$arch.tar.bz2 cd /opt sudo sh -c "wget -o- $xurl | tar -xj" sudo ln -s /opt/xulrunner/xulrunner /usr/bin/xulrunner sudo ln -s /opt/xulrunner/xpcshell /usr/bin/xpcshell you could also save this script to a file for convenience.
...And 5 more matches
2006-10-20 - Archive of obsolete content
summary: mozilla.dev.builds - october 14th to october 20th 2006 linux reference plat
form 1.8.1 october 18th: marcus is wondering about the linux plat
form that is currently used to compile both public releases of firefox and xulrunner.
... he also points out that when he per
forms a local build any of those plat
forms (gentoo, suse and fedora) he doesn't encounter any problems on the same machine.
...paul reed announced that: sparky, the linux per
formance test machine for the 1.8 branchs, is being decommissioned.
...And 5 more matches
Shipping a plugin as a Toolkit bundle - Archive of obsolete content
plat
form-specific files gecko 1.9.2 (firefox 3.6) and earlier prior to gecko 2.0 (firefox 4 / thunderbird 3.3 / seamonkey 2.1), it was possible to package multiple plugin libraries for different operating systems into a single xpi bundle.
... in the xpi you can use the following structure: plat
form/ linux_x86-gcc3/ plugins/ libplugin.so darwin_ppc-gcc3/ plugins/ libplugin.dylib more specific in
formation can be found in the plat
form-specific subdirectories documentation.
... gecko 2.0 (firefox 4) and later gecko 2.0 (firefox 4 / thunderbird 3.3 / seamonkey 2.1) removed support for plat
form-specific subdirectories.
...And 5 more matches
Pseudo-classes and pseudo-elements - Learn web development
it acts as if a <span> was magically wrapped around that first
formatted line, and updated each time the line length changed.
... :nth-child matches elements from a list of siblings — the siblings are matched by a
formula of the
form an+b (e.g.
...<p> elements) — the siblings are matched by a
formula of the
form an+b (e.g.
...And 5 more matches
How CSS is structured - Learn web development
to apply uni
form css styling to multiple pages using internal stylesheets, you must have an internal stylesheet in every web page that will use the styling.
... functions while most values are relatively simple keywords or numeric values, there are some values which take the
form of a function.
... another example would be the various values for trans
form, such as rotate().
...And 5 more matches
What is a Domain Name? - Learn web development
deeper dive structure of domain names a domain name has a simple structure made of several parts (it might be one part only, two, three...), separated by dots and read from right to left: each of those parts provides specific in
formation about the whole domain name.
...it is not mandatory nor necessary to have 3 labels to
form a domain name.
... companies called registrars use domain name registries to keep track of technical and administrative in
formation connecting you to your domain name.
...And 5 more matches
Document and website structure - Learn web development
html text
formatting, as covered in html text fundamentals.
...it's a place to put common in
formation (like the header) but usually, that in
formation is not critical or secondary to the website itself.
...script> <![endif]--> </head> <body> <!-- here is our main header that is used across all the pages of our website --> <header> <h1>header</h1> </header> <nav> <ul> <li><a href="#">home</a></li> <li><a href="#">our team</a></li> <li><a href="#">projects</a></li> <li><a href="#">contact</a></li> </ul> <!-- a search
form is another commmon non-linear way to navigate through a website.
...And 5 more matches
Images in HTML - Learn web development
if your image provides significant in
formation, provide the same in
formation in a brief alt text – or even better, in the main text which everybody can see.
... note: for more in
formation, see our guide to text alternatives.
... image titles as with links, you can also add title attributes to images, to provide further supporting in
formation if needed.
...And 5 more matches
Manipulating documents - Learn web development
this is usually done by using the document object model (dom), a set of apis for controlling html and styling in
formation that makes heavy use of the document object.
...imagine if a web site could get access to your stored passwords or other sensitive in
formation, and log into websites as if it were you?
...you can use this object to return and manipulate in
formation on the html and css that comprises the document, for example get a reference to an element in the dom, change its text content, apply new styles to it, create new elements and add them to the current element as children, or even delete it altogether.
...And 5 more matches
HTTP logging
this saves a log of http-related in
formation from your browser run into a file that you can examine (or upload to bugzilla if a developer has asked you for a log).
... go to the "logging section" adjust the location of the log file if you don't like the default adjust the list of modules that you want to log: this list has the exact same
format as the moz_log environment variable (see below).
... linux this section offers in
formation on how to capture http logs for firefox running on linux.
...And 5 more matches
Gecko Logging
some other mostly-useless in
formation on logging can be found on the nspr logging page.
... #include "mozilla/logging.h" static mozilla::lazylogmodule sfoolog("foo"); logging interface a basic interface is provided in the
form of 2 macros and an enum class.
... info 3 an in
formational message, often indicates the current program state.
...And 5 more matches
Commenting IDL for better documentation
the documentation team has tools that convert comments from the doxygen
format into the standard reference article
format we use here on mdn, with certain limitations.
... this article will help you understand how you can
format your comments to help ensure that the conversion process can be automated as much as possible in order to ensure that your interface gets properly documented.
...comment
format doxygen supports several comment
formats; for style and consistency reasons, we use the following: /** * */ note the two asterisks ("**") on the first line of the comment.
...And 5 more matches
mach
mach (german for to make) is a program via the "command-line interface" to help developers per
form installation tasks such as installing firefox from its c++ source code.
...ilable (mach exposes everything through mach help while inside "mozilla-central" , else you'll just get a cryptic error message) making more sense out of command output (mach offers terminal colorization and structured logging) getting productive tools in the hands of others (mach "advertises" tools to people through mach help (unless it actually just gives you a cryptic error message) - in the
former case, people don't need to discover your tool from a blog post, wiki page, or word of mouth).
...there are no differences in terms of how the build is per
formed (well, at least there should not be any ideally).
...And 5 more matches
Overview of Mozilla embedding APIs
see the nscomptr user's manual for more in
formation.
...see the nsiweakreference document for more in
formation.
... do_queryinterface this is a helper class which works in conjunction with nscomptr to per
form a simplified call to nsisupports::queryinterface(...) with a typesafe assignment.
...And 5 more matches
HTML parser threading
additionally, each nshtml5parser has an associated nshtml5treeopexecutor that turns the output (tree operations; discussed later) of the portable parser core into actions per
formed on the gecko dom.
...normal (non-speculative) parsing initially, dodataavailable per
forms character encoding sniffing on the data if an encoding wasn't declared on the enclosing protocol (http) level.
...each tree op represents a small operation, such as element creation or appending a node into another, that can later be per
formed on the main thread.
...And 5 more matches
IPDL Tutorial
it is the responsibility of the implementor to create subclasses to per
form the actual work involved in each message.
... when creating a plugin instance, the browser should block until instance creation is finished, and needs some in
formation returned from the plugin: sync protocol pplugininstance { child: sync init() returns (bool windowless, bool ok); }; we added two new keywords to the plugin protocol, sync and returns.
...it is possible to get into trouble with careless uses of synchronous messages; while ipdl can check and/or guarantee that your code does not deadlock, it is easy to cause nasty per
formance problems by blocking.
...And 5 more matches
AddonUpdateChecker
the addonupdatechecker is used to download and parse update in
formation for an add-on's update manifest.
... to import the addonupdatechecker, use: components.utils.import("resource://gre/modules/addonupdatechecker.jsm"); method overview updateinfo getcompatibilityupdate(in updateinfo updates[], in string version, in boolean ignorecompatibility, in string appversion, in string plat
formversion) updateinfo getnewestcompatibleupdate(in updateinfo updates[], in string appversion, in string plat
formversion) void checkforupdates(in string id, in string type, in string updatekey, string url, in updatechecklistener listener) constants constant description error_timeout the update check timed out.
... error_download_error there was an error while downloading the update in
formation.
...And 5 more matches
Release phase
here, we'll continue to stay true to the original intent of this guide and only present you with the technical in
formation you need to become an official release.
...for more in
formation on the release part of the l10n process, visit the mozilla wiki here.
... if you don't see this message, try running the same command in a more verbose mode (with the debugging in
formation): $ ssh -vvv hg.mozilla.org this should tell you why your connection is not succeeding.
...And 5 more matches
Localization technical reviews
we use this review process to per
form quality assurance (qa) testing on your l10n efforts.
... allows us to understand how each l10n team is per
forming their localization work.
...here is a detailed overview of what a technical review is and who it's meant for: a technical review: is per
formed as a qa measure on a revision pushed to a new locale's l10n aurora repo in mercurial.
...And 5 more matches
Activity Monitor, Battery Status Menu and top
task_power_info::task_plat
form_idle_wakeups obtained from the task_info function.) in mac os 10.10 it appears to have been changed to measure interrupt-level wakeups (a superset of idle wakeups), which are less interesting.
...task_power_info::task_interrupt_wakeups obtained from the task_info function.) requires high perf gpu: many macs have two gpus: a low-power, low-per
formance integrated gpu, and a high-power, high-per
formance external gpu.
... using the high-per
formance gpu can greatly increase power consumption, and should be avoided whenever possible.
...And 5 more matches
PR_GetFileInfo
gets in
formation about a file with a specified pathname.
... syntax #include <prio.h> prstatus pr_getfileinfo( const char *fn, prfileinfo *info); parameters the function has the following parameters: fn the pathname of the file to get in
formation about.
... info a pointer to a file in
formation object (see prfileinfo).
...And 5 more matches
PR_GetFileInfo64
gets in
formation about a file with a specified pathname.
... syntax #include <prio.h> prstatus pr_getfileinfo64( const char *fn, prfileinfo64 *info); parameters the function has the following parameters: fn the pathname of the file to get in
formation about.
... info a pointer to a 64-bit file in
formation object (see prfileinfo64).
...And 5 more matches
FIPS Mode - an explanation
(note: mozilla does not distribute a "fips mode"-ready nss with firefox.) this page attempts to provide an in
formal explanation of what it is, who would use it, and why.
... the united states government defines many (several hundred) "federal in
formation processing standard" (fips) documents.
... (fips sounds plural, but is singular; one fips document is a fips, not a fip.) fips documents define rules, regulations, and standards for many aspects of handling of in
formation by computers and by people.
...And 5 more matches
PKCS11 FAQ
for in
formation on how to do this, see using the jar installation manager to install a pkcs #11 cryptographic module.
... which function does nss use to get login state in
formation?
...nss never attempts to cache this in
formation, because login state can change instantly without nss knowing about it (for example, when the user removes the card).
...And 5 more matches
NSS PKCS11 Functions
more in
formation about module spec is available at pkcs11_module_specs.
...the caller should ask for one new database per call if the caller wants to get meaningful in
formation about the new database.
... pk11_setpasswordfunc defines a callback function used by the nss libraries whenever in
formation protected by a password needs to be retrieved from the key or certificate databases.
...And 5 more matches
PKCS11 Implement
this document supplements the in
formation in pkcs #11: cryptographic token interface standard, version 2.0 with guidelines for implementors of cryptographic modules who want their products to work with mozilla client software: how nss calls pkcs #11 functions.
... function-specific in
formation organized in the same categories as the pkcs #11 specification.
...installing modules and in
forming the user of changes in the cryptographic modules settings.
...And 5 more matches
The JavaScript Runtime
when scripts are compiled in interpretive mode, an internal representation of the compiled
form is created and stored rather than generating a java class.
... execution proceeds by evaluating this compiled
form using support routines in rhino.
... compilation to java bytecodes for improved per
formance, rhino may compile javascript scripts to java bytecodes.
...And 5 more matches
Shumway
this article will help you understand shumway — mozilla's open standards-based flash renderer — and what it means for the community of developers currently creating the adobe flash plat
form.
... the project is not exactly a developer tool but it is something that content creators should test against (and report bugs or per
formance issues to).
... for even more in
formation, please refer to the external links.
...And 5 more matches
Garbage collection
much of the gc work is per
formed on helper threads.
... an arena is one page (4096 bytes on almost all plat
forms) and contains an arenaheader, a few pad bytes, and then an array of aligned elements.
...mark bits are allocated based on the minimum cell size, thus an object comprised of larger cells consumes multiple bits in the bitmap (but only uses two of them.) exact stack rooting api note: the in
formation here is about the implementation of gc roots and their use within spidermonkey.
...And 5 more matches
Introduction to the JavaScript shell
to get the spidermonkey javascript shell, see the spidermonkey build documentation or download a compiled binary for your plat
form from the nightly builds.
...for more in
formation, see the c/c++ version of this function, js_dumpheap.
... for more in
formation, see the c/c++ functions js_getgcparameter and js_setgcparameter.
...And 5 more matches
SpiderMonkey 1.8.8
these release notes are an incomplete draft and were initially seeded from the 1.8.5 release notes, so lots of the in
formation here isn't actually new to spidermonkey 1.8.8 (nor is it even the case that the version number will be 1.8.8!).
...it continues to improve per
formance over previous spidermonkey releases, with ongoing jit compilation work and with the introduction of type inference to enable faster jitted code.
... —insert-actual-release-date-here plat
form support spidermonkey 1.8.8 is supported on all the plat
forms where firefox insert-actual-firefox-version-number-here runs.
...And 5 more matches
SpiderMonkey 17
these release notes are an incomplete draft and were initially seeded from the (now-defunct) 1.8.8 release notes, which were themselves seeded from the 1.8.5 release notes, so lots of the in
formation here isn't actually new to spidermonkey 17.
...it continues to improve per
formance over previous spidermonkey releases, with ongoing jit compilation work and with the introduction of type inference to enable faster jitted code.
... — 25 march 2013 plat
form support spidermonkey 17 is supported on all the plat
forms where firefox 17 runs.
...And 5 more matches
Gecko Roles
role_menubar represents the menu bar (positioned beneath the title bar of a window on most plat
forms or at the top of the screen on mac os x) from which menus are selected by the user.
... role_menupopup represents a menu, which presents a list of options from which the user can make a selection to per
form an action.
... role_statusbar represents a status bar, which is an area at the bottom of a window that displays in
formation about the current operation, state of the application, or selected object.
...And 5 more matches
Places Developer Guide
bmsvc.removeobserver(observer); html import/export the nsiplacesimportexportservice service is used for import and export of bookmarks in the netscape bookmarks html
format.
... backup/restore the new bookmarks system uses the json
format for storing backups of users' bookmarks.
...rfaces; var cc = components.classes; var cu = components.utils; // import placesutils cu.import("resource://gre/modules/placesutils.jsm"); cu.import("resource://gre/modules/services.jsm"); // create the backup file var jsonfile = services.dirsvc.get("profd", ci.nsilocalfile); jsonfile.append("bookmarks.json"); jsonfile.create(ci.nsilocalfile.normal_file_type, 0600); // export bookmarks in json
format to file placesutils.backupbookmarkstofile(jsonfile); // restore bookmarks from the json file // note: this *overwrites* all pre-existing bookmarks placesutils.restorebookmarksfromjsonfile(jsonfile); history the toolkit history service is nsinavhistoryservice: var history = cc["@mozilla.org/browser/nav-history-service;1"] .getservice(ci.nsinavhistoryservice); the history servic...
...And 5 more matches
Generating GUIDs
add-ons can (and should) be identified with ids of the
form extensionname@organization.tld since firefox 1.5.
...using the extensionname@organization.tld
form is approximately one thousand times easier for everyone involved.
... canonical
form the common
form of a guid is xxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxxxx, where each x stands for a hexadecimal digit.
...And 5 more matches
Finishing the Component
see the following sidebar for in
formation about how frozen and unfrozen interfaces can affect your component development, and for technical details about how interface changes beneath your code can cause havoc.
...but unfrozen interfaces are not supported in any
formal way, and relying upon a different iid for any change in the interface is not a good idea either.
...in the weblock component, the shouldload method looks like this: ns_imethodimp weblock::shouldload(print32 contenttype, nsiuri *contentlocation, nsisupports *ctxt, nsidomwindow *window, prbool *_retval) uni
form resource locators the method passes in an interface pointer of type nsiuri, which is based on the uni
form resource identifier, or uri.
...And 5 more matches
mozIRegistry
it happens that this objective requires storing in
formation about which implementation to use in a place distinct from your source code.
... and it happens that we've chosen, up till now, to store that in
formation in the "netscape registry" file.
... which explains how this in
formation came to be associated with the notion of a "registry." someday (i hope) this page will be properly titled so that everybody knows it is the place to come to in order to find out how they are supposed to link together the various xpcom components that together
form the mozilla browser.
...And 5 more matches
nsIMsgHeaderParser
ddr); obsolete since gecko 1.9 void parseheaderaddresses(in string line, out string names, out string addresses, out pruint32 numaddresses); void parseheaderswitharray(in wstring aline, [array, size_is(count)] out wstring aemailaddresses, [array, size_is(count)] out wstring anames, [array, size_is(count)] out wstring afullnames, [retval] out unsigned long count); void re
formatheaderaddresses(in string line, out string re
formattedaddress); wstring re
formatunquotedaddresses(in wstring line); void removeduplicateaddresses(in string addrs, in string other_addrs, in prbool removealiasestome, out string newaddress); string unquotephraseoraddr(in string line, in boolean preserveintegrity); wstring unquotephraseoraddrwstring(in wstring lin...
... return value a string of the
form name <address>.
... return value a string of the
form name <address>.
...And 5 more matches
nsITransferable
widget/nsitransferable.idlscriptable a container for typed data that can be transferred from one place or owner to another, possibly involving
format conversion.
...to create an instance, use: var transferable = components.classes["@mozilla.org/widget/transferable;1"] .createinstance(components.interfaces.nsitransferable); it's important to note that a flavor, which specifies a type of data the transferable supports, is represented by a null-terminated string indicating the mime type of the
format supported by the flavor.
...n string aflavor, out nsisupports adata, out unsigned long adatalen ); void init(in nsiloadcontext acontext); boolean islargedataset( ); void removedataflavor( in string adataflavor ); void settransferdata( in string aflavor, in nsisupports adata, in unsigned long adatalen ); attributes attribute type description converter nsi
formatconverter an nsi
formatconverter instance which implements the code needed to convert data into and out of the transferable given the supported flavors.
...And 5 more matches
Storage
for storage api help, you can post to mozilla.dev.apps.plat
form on the news server news.mozilla.org.
... closing a connection to close a connection on which only synchronous transactions were per
formed, use the mozistorageconnection.close() method.
... if you per
formed any asynchronous transactions, you should instead use the mozistorageconnection.asyncclose() method.
...And 5 more matches
Mail composition back end
(for detailed in
formation on the listener interfaces, see the listener interfaces section of this document) nsimsgsend the following describes the methods of the nsimsgsend interface.
...this will contain all of the relevant header in
formation for message creation prbool digest_p, - this is a flag that says that most of the documents we are attaching are themselves messages, and so we should generate a multipart/digest container instead of multipart/mixed.
...this will contain all of the relevant header in
formation for message delivery nsfilespec *sendfilespec, - the file spec for the message being sent prbool deletesendfileoncompletion, - tell the back end if it should delete the file upon successful completion prbool digest_p, - this is a fla...
...And 5 more matches
Working with windows in chrome code
the second parameter is the window's name; the name can be used in links or
forms as the target attribute.
...the
former has been deprecated for a while, and you should use content in the new code.
... finding already opened windows the window mediator xpcom component (nsiwindowmediator interface) provides in
formation about existing windows.
...And 5 more matches
Initialization and Destruction - Plugins
for more in
formation, see registering plug-ins.
... the function tables also contain version in
formation that the plug-in checks to verify that it is compatible with the api capabilities provided by the application.
... to check this in
formation, use npn_version.
...And 5 more matches
Intensive JavaScript - Firefox Developer Tools
by default the browser uses a single thread to run all the javascript in your page as well as to per
form layout, reflows, and garbage collection.
... you can use the frame rate and waterfall tools to see when javascript is causing per
formance problems, and to single out the particular functions that need attention.
...this just gives the browser some background tasks to per
form.
...And 5 more matches
Applying styles and colors - Web APIs
while slightly painful when initially working with scalable 2d graphics, paying attention to the pixel grid and the position of paths ensures that your drawings will look correct regardless of scaling or any other trans
formations involved.
...note that the maximum miter length is the product of the line width measured in the current coordinate system, by the value of this miterlimit property (whose default value is 10.0 in the html <canvas>), so the miterlimit can be set independently from the current display scale or any affine trans
forms of paths: it only influences the effectively rendered shape of line edges.
...25 : -25; ctx.lineto(math.pow(i, 1.5) * 2, 75 + dy); } ctx.stroke(); return false; } <table> <tr> <td><canvas id="canvas" width="150" height="150"></canvas></td> <td>change the <code>miterlimit</code> by entering a new value below and clicking the redraw button.<br><br> <
form onsubmit="return draw();"> <label>miter limit</label> <input type="number" size="3" id="miterlimit"/> <input type="submit" value="redraw"/> </
form> </td> </tr> </table> document.getelementbyid('miterlimit').value = document.getelementbyid('canvas').getcontext('2d').miterlimit; draw(); screenshotlive sample using line dashes the setlinedash method and the l...
...And 5 more matches
console - Web APIs
console.info() in
formative logging of in
formation.
... console.log() for general output of logging in
formation.
... console.profile() starts the browser's built-in profiler (for example, the firefox per
formance tool).
...And 5 more matches
Document - Web APIs
document.
formsread only returns a list of the <
form> elements within the current document.
... globaleventhandlers.on
formdata is an eventhandler for processing
formdata events, fired after the entry list representing the
form's data is constructed.
... document.execcommand() on an editable document, executes a
formating command.
...And 5 more matches
Introduction to the DOM - Web APIs
though we focus exclusively on javascript in this reference documentation, implementations of the dom can be built for any language, as this python example demonstrates: # python dom example import xml.dom.minidom as m doc = m.parse(r"c:\projects\py\chap1.xml") doc.nodename # dom property of document object p_list = doc.getelementsbytagname("para") for more in
formation on what technologies are involved in writing javascript on the web, see javascript technologies overview.
...different browsers have different implementations of the dom, and these implementations exhibit varying degrees of con
formance to the actual dom standard (a subject we try to avoid in this documentation), but every web browser uses some document object model to make web pages accessible via javascript.
...for example, the object representing the html
form element gets its name property from the html
formelement interface but its classname property from the htmlelement interface.
...And 5 more matches
EXT_texture_compression_bptc - Web APIs
the ext_texture_compression_bptc extension is part of the webgl api and exposes 4 bptc compressed texture
formats.
... these compression
formats are called bc7 and bc6h in microsoft's directx api.
...for more in
formation, see also using extensions in the webgl tutorial.
...And 5 more matches
EffectTiming.fill - Web APIs
see the alternatives to fill modes section below for approaches that are simpler and more per
formant.
...that css looks like this: #box { width: 200px; height: 200px; left: 50px; top: 50px; border: 1px solid #7788ff; margin: 0; position: relative; background-color: #2233ff; display: flex; justify-content: center; } all this does is specify the size, border, and color in
formation, as well as indicate that the box should be centered both vertically and horizontally inside its container.
... var boxrotationkeyframes = [ { trans
form: "rotate(-90deg)" }, { trans
form: "rotate(90deg)" } ]; the boxrotationkeyframes object is an array of keyframes, each describing the state of the affected element at a point in the animation process.
...And 5 more matches
HTMLSelectElement - Web APIs
only one
form-associated element in a document can have this attribute specified.
... htmlselectelement.
formread only an html
formelement referencing the
form that this element is associated with.
... if the element is not associated with of a <
form> element, then it returns null.
...And 5 more matches
MediaSessionActionDetails - Web APIs
it specifies the type of action which needs to be per
formed as well as the data needed to per
form the action.
... properties action a media session action type string taken from the mediasessionaction enumerated type, indicating which type of action needs to be per
formed.
... fastseek optional an seekto action may optionally include this property, which is a boolean value indicating whether or not to per
form a "fast" seek.
...And 5 more matches
Media Capabilities API - Web APIs
the media capabilities api allows developers to determine decoding and encoding abilities of the device, exposing in
formation such as whether media is supported and whether playback should be smooth and power efficient, with real time feedback about playback to better enable adaptive streaming, and access to display property in
formation.
... examples detect audio file support and expected per
formance this example defines a audio configuration then checks to see if the user agent supports decoding that media configuration, and whether it will per
form well in terms of smoothness and power efficiency.
...the media capabilities api enables determining which codecs are supported and how per
formant a media file will be both in terms of smoothness and power efficiency.
...And 5 more matches
Navigator - Web APIs
navigator.battery read only returns a batterymanager object you can use to get in
formation about the battery charging status.
... navigator.connection read only provides a networkin
formation object containing in
formation about the network connection of a device.
... navigator.locks read only returns a lockmanager object which provides methods for requesting a new lock object and querying for an existing lock object navigator.mediacapabilities read only returns a mediacapabilities object that can expose in
formation about the decoding and encoding capabilities for a given
format and output capabilities.
...And 5 more matches
Streams API concepts - Web APIs
the streams api adds a very useful set of tools to the web plat
form, providing objects allowing javascript to programmatically access streams of data received over the network and process them as desired by the developer.
...a chunk can take a multitude of
forms, just like the chunks in a reader.
...there are two methods available in the spec to facilitate this: readablestream.pipethrough() — pipes the stream through a trans
form stream, which is a pair comprised of a writable stream that has data written to it, and a readable stream that then has the data read out of it — this acts as a kind of treadmill that constantly takes data in and trans
forms it to a new state.
...And 5 more matches
SubtleCrypto - Web APIs
subtlecrypto.importkey() returns a promise that fulfills with a cryptokey corresponding to the
format, the algorithm, raw key data, usages, and extractability given as parameters.
... subtlecrypto.exportkey() returns a promise that fulfills with a buffer containing the key in the requested
format.
...the wrapped key matches the
format specified in the given parameters, and wrapping is done by the given wrapping key, using the specified algorithm.
...And 5 more matches
WebGL2RenderingContext.texSubImage3D() - Web APIs
syntax void gl.texsubimage3d(target, level, xoffset, yoffset, zoffset, width, height, depth,
format, type, arraybufferview?
... srcdata, optional srcoffset); void gl.texsubimage3d(target, level, xoffset, yoffset, zoffset, width, height, depth,
format, type, imagebitmap?
... pixels); void gl.texsubimage3d(target, level, xoffset, yoffset, zoffset, width, height, depth,
format, type, imagedata?
...And 5 more matches
WebGLRenderingContext.texSubImage2D() - Web APIs
syntax // webgl 1: void gl.texsubimage2d(target, level, xoffset, yoffset, width, height,
format, type, arraybufferview?
... pixels); void gl.texsubimage2d(target, level, xoffset, yoffset,
format, type, imagedata?
... pixels); void gl.texsubimage2d(target, level, xoffset, yoffset,
format, type, htmlimageelement?
...And 5 more matches
WebGLRenderingContext.vertexAttribPointer() - Web APIs
usually, your 3d geometry is already in a certain binary
format, so you need to read the specification of that specific
format to figure out the memory layout.
... however, if you are designing the
format yourself, or your geometry is in text files (like wavefront .obj files) and must be converted into an arraybuffer at runtime, you have free choice on how to structure the memory.
... for highest per
formance, interleave the attributes and use the smallest data type that still accurately represents your geometry.
...And 5 more matches
Using textures in WebGL - Web APIs
this example uses the glmatrix library to per
form its matrix and vertex math.
... const level = 0; const internal
format = gl.rgba; const width = 1; const height = 1; const border = 0; const src
format = gl.rgba; const srctype = gl.unsigned_byte; const pixel = new uint8array([0, 0, 255, 255]); // opaque blue gl.teximage2d(gl.texture_2d, level, internal
format, width, height, border, src
format, srctype, pixel); const image = new image(); image.onload = function() {...
... gl.bindtexture(gl.texture_2d, texture); gl.teximage2d(gl.texture_2d, level, internal
format, src
format, srctype, image); // webgl1 has different requirements for power of 2 images // vs non power of 2 images so check if the image is a // power of 2 in both dimensions.
...And 5 more matches
Writing WebSocket servers - Web APIs
the task of creating a custom server tends to scare people; however, it can be straightforward to implement a simple websocket server on your plat
form of choice.
...depending on your plat
form, this may be handled for you automatically.
...however, extracting in
formation from these so-called "frames" of data is a not-so-magical experience.
...And 5 more matches
Using bounded reference spaces - Web APIs
there are many uses for bounded reference spaces, including projects such as virtual paint studios or 3d construction, modeling, or sculpting systems; training simulations or lesson scenarios; dance or other per
formance-based games; or the preview of 3d objects in the real world using augmented reality.
... note that if the underlying plat
form defines a fixed room-scale origin and boundary, it may initialize any uninitialized values to match that predefined in
formation; this is not unexpected behavior for users of these plat
forms.
... this way, our session will start up regardless of whether or not the user's plat
form is able to provide bounded reference spaces.
...And 5 more matches
Using the Web Animations API - Web APIs
it is one of the most per
formant ways to animate on the web, letting the browser make its own internal optimizations without hacks, coercion, or window.requestanimationframe().
...here’s the simplified css that controls alice’s animation: #alice { animation: alicetumbling infinite 3s linear; } @keyframes alicetumbling { 0% { color: #000; trans
form: rotate(0) translate3d(-50%, -50%, 0); } 30% { color: #431236; } 100% { color: #000; trans
form: rotate(360deg) translate3d(-50%, -50%, 0); } } this changes alice’s color and her trans
form’s rotation over 3 seconds at a constant (linear) rate and loops infinitely.
... representing keyframes the first thing we need is to create a keyframe object corresponding to our css @keyframes block: var alicetumbling = [ { trans
form: 'rotate(0) translate3d(-50%, -50%, 0)', color: '#000' }, { color: '#431236', offset: 0.3}, { trans
form: 'rotate(360deg) translate3d(-50%, -50%, 0)', color: '#000' } ]; here we’re using an array containing multiple objects.
...And 5 more matches
Migrating from webkitAudioContext - Web APIs
oscillator(); osc.start(1); osc.stop(1.5); var src = context.createbuffersource(); src.start(1, 0.25); src.stop(2); remove synchronous buffer creation in the old webkit implementation of web audio, there were two versions of createbuffer(), one which created an initially empty buffer, and one which took an existing arraybuffer containing encoded audio, decoded it and returned the result in the
form of an audiobuffer.
... old code using webkitaudiocontext can be ported to standards based audiocontext like below: // old webkitaudiocontext code: var osc = context.createoscillator(); osc.type = osc.sine; // sine wave
form osc.type = osc.square; // square wave
form osc.type = osc.sawtooth; // sawtooth wave
form osc.type = osc.triangle; // triangle wave
form osc.setwavetable(table); var iscustom = (osc.type == osc.custom); // iscustom will be true // new standard audiocontext code: var osc = context.createoscillator(); osc.type = "sine"; // sine wave
form osc.type = "square"; // square wave
form osc.type = "...
...sawtooth"; // sawtooth wave
form osc.type = "triangle"; // triangle wave
form osc.setperiodicwave(table); // note: setwavetable has been renamed to setperiodicwave!
...And 5 more matches
Background audio processing using AudioWorklet - Web APIs
when the web audio api was first introduced to browsers, it included the ability to use javascript code to create custom audio processors that would be invoked to per
form real-time audio manipulations.
... it's worth noting that because audio processing can often involve substantial computation, your processor may benefit greatly from being built using webassembly, which brings near-native or fully native per
formance to web apps.
... implementing your audio processing algorithm using webassembly can make it per
form markedly better.
...And 5 more matches
Attestation and Assertion - Web APIs
the attestation
format contains two basic arraybuffers: clientdatajson - an arraybuffer that contains a json representation of what the browser saw when being asked to authenticate.
...it is not included when used in the authenticatorassertionresponse.) different devices have different attestation
formats.
... the pre-defined attestation
formats in webauthn are: packed - a generic attestation
format that is commonly used by devices whose sole function is as a webauthn authenticator, such as security keys.
...And 5 more matches
Using Web Workers - Web APIs
the worker thread can per
form tasks without interfering with the user interface.
... in addition, they can per
form i/o using xmlhttprequest (although the responsexml and channel attributes are always null).
... passing data by transferring ownership (transferable objects) google chrome 17+ and firefox 18+ contain an additional way to pass certain types of objects (transferable objects, that is objects implementing the transferable interface) to or from a worker with high per
formance.
...And 5 more matches
Using the alert role - Accessibility
the alert role is most useful for in
formation that requires the user's immediate attention, for example: an invalid value was entered into a
form field the user's login session is about to expire the connection to the server was lost, local changes will not be saved because of its intrusive nature, the alert role must be used sparingly and only in situations where the user's immediate attention is required.
...the in
formation provided above is one of those opinions and therefore not normative.
... <h2 role="alert">your
form could not be submitted because of 3 validation errors.</h2> example 2: dynamically adding an element with the alert role this snippet dynamically creates an element with an alert role and adds it to the document structure.
...And 5 more matches
ARIA: search role - Accessibility
<
form role="search"> <!-- search input --> </
form> description the search role is a landmark.
...when a <
form> is a search
form, use the search role instead of
form.
... examples <
form id="search" role="search"> <label for="search-input">search this site</label> <input type="search" id="search-input" name="search" spellcheck="false"> <input value="submit" type="submit"> </
form> accessibility concerns landmark roles are intended to be used sparingly, to identify larger overall sections of the document.
...And 5 more matches
ARIA: dialog role - Accessibility
the label given to the dialog will provide contextual in
formation for the interactive controls inside the dialog.
...the combination of the aria dialog role and labeling techniques should make the screen reader announce the dialog's in
formation when focus is moved into it.
...in addition to the needed control, dialogs can contain any number of focusable elements, even entire
forms or other container widgets like tabs.
...And 5 more matches
WAI-ARIA Roles - Accessibility
it is usually set on related content items such as comments, forum posts, newspaper articles or other items grouped together on one page.aria: banner rolea banner role represents general and in
formative content frequently placed at the beginning of the page.
...this role can be 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 in
formation.
...if possible, use the html <aside> element instead.aria: contentinfo rolethe contentinfo landmark role is used to identify in
formation repeated at the end of every page of a website, including copyright in
formation, navigation links, and privacy statements.
...And 5 more matches
Web Accessibility: Understanding Colors and Luminance - Accessibility
when speaking of color contrast, w3c
formulas are actually incorporating luminance, not just the colors ("hues") themselves.
...webgl is usually in the rgba
format; see an example of how it is used in "clearing with colors".
... see the stack exchange article, "
formula to determine the brightness of rgb color".
...And 5 more matches
CSS Containment - CSS: Cascading Style Sheets
the aim of the css containment specification is to improve per
formance of web pages by allowing developers to isolate a subtree of the page from the rest of the page.
... if the browser knows that a part of the page is independent, rendering can be optimized and per
formance improved.
...the browser can then use this in
formation to make decisions about how to render the content.
...And 5 more matches
position - CSS: Cascading Style Sheets
it is positioned relative to the initial containing block established by the viewport, except when one of its ancestors has a trans
form, perspective, or filter property set to something other than none (see the css trans
forms spec), in which case that ancestor behaves as the containing block.
... (note that there are browser inconsistencies with perspective and filter contributing to containing block
formation.) its final position is determined by the values of top, right, bottom, and left.
...the element establishes a new block
formatting context (bfc) for its contents.
...And 5 more matches
translate() - CSS: Cascading Style Sheets
its result is a <trans
form-function> data type.
... this trans
formation is characterized by a two-dimensional vector.
... syntax /* single <length-percentage> values */ trans
form: translate(200px); trans
form: translate(50%); /* double <length-percentage> values */ trans
form: translate(100px, 200px); trans
form: translate(100px, 50%); trans
form: translate(30%, 200px); trans
form: translate(30%, 50%); values single <length-percentage> values this value is a <length> or <percentage> representing the abscissa (horizontal, x-coordinate) of the translating vector.
...And 5 more matches
Content categories - Developer guides
form-related content categories, which describe rules common to
form-related elements.
... main content categories metadata content elements belonging to the metadata content category modify the presentation or the behavior of the rest of the document, set up links to other documents, or convey other out of band in
formation.
...they are: <a>, <abbr>, <address>, <article>, <aside>, <audio>, <b>,<bdo>, <bdi>, <blockquote>, <br>, <button>, <canvas>, <cite>, <code>, <command>, <data>, <datalist>, <del>, <details>, <dfn>, <div>, <dl>, <em>, <embed>, <fieldset>, <figure>, <footer>, <
form>, <h1>, <h2>, <h3>, <h4>, <h5>, <h6>, <header>, <hgroup>, <hr>, <i>, <iframe>, <img>, <input>, <ins>, <kbd>, <keygen>, <label>, <main>, <map>, <mark>, <math>, <menu>, <meter>, <nav>, <noscript>, <object>, <ol>, <output>, <p>, <picture>, <pre>, <progress>, <q>, <ruby>, <s>, <samp>, <script>, <section>, <select>, <small>, <span>, <strong>, <sub>, <sup>, <svg>, <table>, <template>, <textarea>, <tim...
...And 5 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.
...And 5 more matches
HTML attribute: required - HTML: Hypertext Markup Language
the boolean required attribute which, if present, indicates that the user must specify a value for the input before the owning
form can be submitted.
... the required attribute is supported by text, search, url, tel, email, password, date, month, week, time, datetime-local, number, checkbox, radio, file, <input> types along with the <select> and <textarea>
form control elements.
...it is also not supported on hidden as it can not be expected that a user to fill out a
form that is hidden.
...And 5 more matches
<address>: The Contact Address element - HTML: Hypertext Markup Language
the html <address> element indicates that the enclosed html provides contact in
formation for a person or people, or for an organization.
... the contact in
formation provided by an <address> element's contents can take whatever
form is appropriate for the context, and may include any type of contact in
formation that is needed, such as a physical address, url, email address, phone number, social media handle, geographic coordinates, and so forth.
... the <address> element should include the name of the person, people, or organization to which the contact in
formation refers.
...And 5 more matches
<iframe>: The Inline Frame element - HTML: Hypertext Markup Language
while theoretically you can use as many <iframe>s as you like, check for per
formance problems.
...see the article privacy, permissions, and in
formation security for details on security issues and how <iframe> works with feature policy to keep systems safe.
...this can be used in the target attribute of the <a>, <
form>, or <base> elements; the
formtarget attribute of the <input> or <button> elements; or the windowname parameter in the window.open() method.
...And 5 more matches
<input type="range"> - HTML: Hypertext Markup Language
events change and input supported common attributes autocomplete, list, max, min, and step idl attributes list, value, and valueasnumber methods stepdown() and stepup() validation there is no pattern validation available; however, the following
forms of automatic validation are per
formed: if the value is set to something which can't be converted into a valid floating-point number, validation fails because the input is suffering from a bad input.
... note: the following input attributes do not apply to the input range: accept, alt, checked, dirname,
formaction,
formenctype,
formmethod,
formnovalidate,
formtarget, height, maxlength, minlength, multiple, pattern, placeholder, readonly, required, size, src, and width.
... in the meantime, we can make the range vertical by rotating it using using css trans
forms, or, by targeting each browser engine with their own method, which includes setting the appearance to slider-vertical, by using a non-standard orient attribute in firefox, or by changing the text direction for internet explorer and edge.
...And 5 more matches
HTTP conditional requests - HTTP
strong validation is very strict and may be difficult to guarantee at the server level, but it does guarantee no data loss at any time, sometimes at the expense of per
formance.
...building a system of etags that creates weak validation may be complex, as it involves knowing the importance of the different elements of a page, but is very useful towards optimizing cache per
formance.
...by default, unless the etag is prefixed with 'w/', it per
forms a strong validation.
...And 5 more matches
Using HTTP cookies - HTTP
it remembers stateful in
formation for the stateless http protocol.
...cookies are sent with every request, so they can worsen per
formance (especially for mobile data connections).
...however, do not assume that secure prevents all access to sensitive in
formation in cookies; for example, it can be read by someone with access to the client's hard disk.
...And 5 more matches
Equality comparisons and sameness - JavaScript
which operation you choose depends on what sort of comparison you are looking to per
form.
... briefly: double equals (==) will per
form a type conversion when comparing two things, and will handle nan, -0, and +0 specially to con
form to ieee 754 (so nan != nan, and -0 == +0); triple equals (===) will do the same comparison as double equals (including the special handling for nan, -0, and +0) but without type conversion; if the types differ, false is returned.
...for any non-primitive objects x and y which have the same structure but are distinct objects themselves, all of the above
forms will evaluate to false.
...And 5 more matches
Indexed collections - JavaScript
the bracket syntax is called an "array literal" or "array initializer." it's shorter than other
forms of array creation, and so is generally preferred.
...) { a[i] = new array(4) for (let j = 0; j < 4; j++) { a[i][j] = '[' + i + ', ' + j + ']' } } this example creates an array with the following rows: row 0: [0, 0] [0, 1] [0, 2] [0, 3] row 1: [1, 0] [1, 1] [1, 2] [1, 3] row 2: [2, 0] [2, 1] [2, 2] [2, 3] row 3: [3, 0] [3, 1] [3, 2] [3, 3] using arrays to store other properties arrays can also be used like objects, to store related in
formation.
... const arr = [1, 2, 3]; arr.property = "value"; console.log(arr.property); // logs "value" arrays and regular expressions when an array is the result of a match between a regular expression and a string, the array returns properties and elements that provide in
formation about the match.
...And 5 more matches
BigInt.prototype.toLocaleString() - JavaScript
syntax bigintobj.tolocalestring([locales [, options]]) parameters the locales and options arguments customize the behavior of the function and let applications specify the language whose
formatting conventions should be used.
... in implementations that ignore the locales and options arguments, the locale used and the
form of the string returned are entirely implementation-dependent.
... see the intl.number
format() constructor for details on these parameters and how to use them.
...And 5 more matches
String - JavaScript
description strings are useful for holding data that can be represented in text
form.
...this last
form specifies a template literal: with this
form you can interpolate expressions.
...(see object.defineproperty() for more in
formation.) comparing strings in c, the strcmp() function is used for comparing strings.
...And 5 more matches
JavaScript typed arrays - JavaScript
javascript engines per
form optimizations so that these arrays are fast.
...each entry in a javascript typed array is a raw binary value in one of a number of supported
formats, from 8-bit integers to 64-bit floating-point numbers.
...a buffer (implemented by the arraybuffer object) is an object representing a chunk of data; it has no
format to speak of and offers no mechanism for accessing its contents.
...And 5 more matches
Structural overview of progressive web apps - Progressive web apps (PWAs)
it works great across browsers, but it suffers in terms of time navigating between pages and therefore general perceived per
formance — loading a page requires a new round trip to the server.
... benefits of the app shell pattern this architecture allows a web site to benefit the most from all the pwa features — it caches the app shell and manages the dynamic content in a way that greatly improves the per
formance.
... the website feels like a native app with instant interaction and solid per
formance while keeping all the benefits of the web.
...And 5 more matches
gradientUnits - SVG: Scalable Vector Graphics
ox animatable yes userspaceonuse this value indicates that the attributes represent values in the coordinate system that results from taking the current user coordinate system in place at the time when the gradient element is referenced (i.e., the user coordinate system for the element referencing the gradient element via a fill or stroke property) and then applying the trans
form specified by attribute gradienttrans
form.
... objectboundingbox this value indicates that the user coordinate system for the attributes is established using the bounding box of the element to which the gradient is applied and then applying the trans
form specified by attribute gradienttrans
form.
... with this value and gradienttrans
form being the identity matrix, the normal of the linear gradient is perpendicular to the gradient vector in object bounding box space (i.e., the abstract coordinate system where (0,0) is at the top/left of the object bounding box and (1,1) is at the bottom/right of the object bounding box).
...And 5 more matches
<feComposite> - SVG: Scalable Vector Graphics
the <fecomposite> svg filter primitive per
forms the combination of two input images pixel-wise in image space using one of the porter-duff compositing operations: over, in, atop, out, xor, and lighter.
...if the arithmetic operation is chosen, each result pixel is computed using the following
formula: result = k1*i1*i2 + k2*i1 + k3*i2 + k4 where: i1 and i2 indicate the corresponding pixel channel values of the input image, which map to in and in2 respectively k1, k2, k3 and k4 indicate the values of the attributes with the same name usage context categoriesfilter primitive elementpermitted contentany number of the following elements, in any order:<animate>, <set> attributes global attributes core attributes » presentation attribut...
... <path id="red100" d="m 0 0 l 0 100 l 100 0 z" fill="#ff00ff" /> <path id="blue50" d="m 0 125 l 100 125 l 100 225 z" fill="#00ffff" fill-opacity=".5" /> <path id="red50" d="m 0 125 l 0 225 l 100 125 z" fill="#ff00ff" fill-opacity=".5" /> <g id="twobluetriangles"> <use xlink:href="#blue100"/> <use xlink:href="#blue50"/> </g> <g id="bluetriangles"> <use trans
form="translate(275,25)" xlink:href="#twobluetriangles"/> <use trans
form="translate(400,25)" xlink:href="#twobluetriangles"/> <use trans
form="translate(525,25)" xlink:href="#twobluetriangles"/> <use trans
form="translate(650,25)" xlink:href="#twobluetriangles"/> <use trans
form="translate(775,25)" xlink:href="#twobluetriangles"/> <use trans
form="translate(900,25)" xlink:hre...
...And 5 more matches
SVG 2 support in Mozilla - SVG: Scalable Vector Graphics
tead of svgmatrix implementation status unknown domrect or domrectreadonly instead of svgrect implementation status unknown dompoint or dompointreadonly instead of svgpoint implementation status unknown members of svgstylable and svglangspace available in svgelement implementation status unknown svggraphicselement instead of svglocatable and svgtrans
formable implementation status unknown svggeometryelement with svggeometryelement.ispointinfill() and svggeometryelement.ispointinstroke() methods partially implemented (bug 1239100).
... implementation status unknown globaleventhandlers on svgelement implementation status unknown options dictionary attribute for svggraphicselement.getbbox() implemented behind the preference svg.new-getbbox.enabled (bug 999964, bug 1019326) allow leading and trailing whitespace in <length>, <angle>, <number> and <integer> implementation status unknown
form feed (u+000c) in whitespace implementation status unknown svgelement.xmlbase, svgelement.xmllang and svgelement.xmlspace removed implementation status unknown svgviewspec removed implementation status unknown svgelement.style removed implementation status unknown svggraphicselement.gettrans
formtoelement() removed not removed yet svggraph...
...drawall() deprecated turned into no-ops (bug 734079) externalresourcesrequired attribute removed implementation status unknown auto value for width and height in <image> implementation status unknown referencing entire document with <use> implementation status unknown lang attribute on <desc> and <title> implemented (bug 721920) css trans
forms on outermost <svg> not affecting svgsvgelement.currentscale or svgsvgelement.currenttranslate implementation status unknown rootelement attribute deprecated implementation status unknown svgelementinstance and svgelementinstancelist and corresponding attributes on svguseelement removed implementation status unknown <use> event flow following shadow dom spec.
...And 5 more matches
Transport Layer Security - Web security
the transport layer security (tls) protocol is the standard for enabling two networked applications or devices to exchange in
formation privately and robustly.
... integrity tls ensures that between encrypting, transmitting, and decrypting the data, no in
formation is lost, damaged, tampered with, or falsified.
...the cipher names correspondence table on the mozilla opsec team's article on tls configurations lists these names as well as in
formation about compatibility and security levels.
...And 5 more matches
XML introduction - XML: Extensible Markup Language
this is a powerful way to store data in a
format that can be stored, searched, and shared.
... most importantly, since the fundamental
format of xml is standardized, if you share or transmit xml across systems or plat
forms, either locally or over the internet, the recipient can still parse the data due to the standardized xml syntax.
... comments <!-- comment --> "correct" xml (valid and well-
formed) Сorrect design rules for an xml document to be correct, the following conditions must be fulfilled: document must be well-
formed.
...And 5 more matches
Developing add-ons - Archive of obsolete content
this page will help guide you to the in
formation you need in order to create add-ons for firefox, thunderbird, or other software based on the mozilla plat
form, as well as how to distribute your add-ons.
... add-ons topics submitting an add-on to amo provides helpful in
formation for add-on developers to help them properly package and deliver their add-ons.
... this includes in
formation about addons.mozilla.org, mozilla's add-on distribution web site.
...And 4 more matches
Appendix B: Install and Uninstall Scripts - Archive of obsolete content
uninstall scripts there are two common cases for needing these: cleaning up local data and presenting an uninstall feedback
form.
...on the other hand, local data that is no longer needed takes unnecessary disk space and can contain private in
formation that users forget is there.
...the data parameter explains the action being per
formed.
...And 4 more matches
Mozilla Documentation Roadmap - Archive of obsolete content
there's a great deal of free online documentation available on xul and extension development, but finding it and turning it into useful in
formation can be a daunting task.
...secondly, there are several important articles that are very lacking in in
formation, like the preferences system page.
...if you find it lacking or missing some piece of in
formation, please consider adding it once you've found it.
...And 4 more matches
XPCOM Objects - Archive of obsolete content
« previousnext » xpcom xpcom is a cross plat
form component object model, similar to microsoft com.
...the largest of the two is a compiled plat
form, mostly written in c++.
...well, those are applications that, simply put, take the underlying plat
form with perhaps a few changes and additions, and then write their own chrome layer.
...And 4 more matches
An Interview With Douglas Bowman of Wired News - Archive of obsolete content
the breakdown: 1 master screen media file which imports 4 files: a base file (bulk of
formatting) a file for finance/table
formatting color file (override colors and background images for specific color scheme) temp file (used for styles associated with temporary features and ad-related pages) 1 print media file 1 aural media file 3 master alternate style sheets which import 1 file each the 3 imported files set alternate font sizes (small, large, larger) h...
... how does the new design per
form when the pages are printed?
...this allows us to temporarily display on screen the same
formatting to be used for printing that page.
...And 4 more matches
Supporting private browsing mode - Archive of obsolete content
firefox 3.5 introduced private browsing mode, in which potentially private in
formation is not recorded.
... this includes cookies, history in
formation, download in
formation, and so forth.
...extensions that may record potentially private in
formation may wish to hook into the private browsing service so that they can avoid saving personal in
formation when private browsing mode is enabled.
...And 4 more matches
Tamarin Build System Documentation - Archive of obsolete content
the smoke phase runs a set of tests on each plat
form until 2 minute is exceeded.
... the set of smoke tests can contain any shell build and any test suite (including per
formance).
...the per
formance and deep phases do not run synchronously.
...And 4 more matches
Creating XPI Installer Modules - Archive of obsolete content
jar is a file
format based on the zip file
format and is used for aggregating multiple files into a single file.
...though the chrome directory still includes subdirectories of uncompressed files by default, a new way to aggregate and distribute the files has improved per
formance, made the ui components more portable and easier to install, and made the installation process a much easier one.
...in red are particular to the barley package and can be edited for your own distribution: <?xml version="1.0"?> <rdf:rdf xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#" xmlns:chrome="http://www.mozilla.org/rdf/chrome#"> <!-- list all the packages being supplied --> <rdf:seq about="urn:mozilla:package:root"> <rdf:li resource="urn:mozilla:package:barley"/> </rdf:seq> <!-- package in
formation --> <rdf:description about="urn:mozilla:package:barley" chrome:displayname="barley grain" chrome:author="ian oeschger" chrome:name="barley"> </rdf:description> </rdf:rdf> create a contents.rdf file like the one in the listing above and put it in the content/ subdirectory with the other package resources.
...And 4 more matches
getFolder - Archive of obsolete content
the first set contains plat
form-independent locations; the second set contains plat
form-specific locations.
... you are encouraged to use the plat
form-independent locations.
... "windows" "win appdata" "win common files" "win desktop" "win desktop common" "win program files" "win programs" "win programs common" "win startmenu" "win startmenu common" "win startup" "win startup common" "win system" the "file:///"
form is only valid when the subdirectory parameter is used.
...And 4 more matches
Uploading and Downloading Files - Archive of obsolete content
file and stream guide: [ nsiscriptableio | accessing files | getting file in
formation | reading from files | writing to files | moving, copying and deleting files | uploading and downloading files | working with directories ] important note: the pages from the file and stream guide use the io object (nsiscriptableio), which was not available in any released version of the plat
form (pending some fixes).
...the exact method depends on the type of upload that you wish to per
form.
...this is done by using an html <input> element using the file type from within a
form.
...And 4 more matches
IO - Archive of obsolete content
file and stream guide: [ nsiscriptableio | accessing files | getting file in
formation | reading from files | writing to files | moving, copying and deleting files | uploading and downloading files | working with directories ] important note: the pages from the file and stream guide use the io object (nsiscriptableio), which was not available in any released version of the plat
form (pending some fixes).
...files and streams this section describes how to access and get in
formation about files, read from files and create and write files.
... retrieve a file object for in
formation about getting a file object, see accessing files get in
formation about a file available in
formation about a file include the permissions, size, and last modified date of a file.
...And 4 more matches
Trees - Archive of obsolete content
the tree is smart enough to only ask for in
formation from the view for those rows that need to be displayed.
...this means that the tree is scalable to any number of rows without any per
formance problems.
... of course, this is independant of the per
formance of the view object itself.
...And 4 more matches
Using Remote XUL - Archive of obsolete content
it is difficult to discern the site's basic structure and available resources, which makes it hard to locate a particular page or find the one with the in
formation you want.
...html-based navigation bars take up too much space, dhtml menus are slow and buggy, and site maps make you go to an intermediate page to find the in
formation you want.
...this isn't a problem inside an organization that uses mozilla-based browsers exclusively, but for other sites you may need to provide another
form of navigation as well.
...And 4 more matches
Using nsIXULAppInfo - Archive of obsolete content
getting nsixulappinfo to get a component implementing nsixulappinfo use this code: var appinfo = components.classes["@mozilla.org/xre/app-info;1"] .getservice(components.interfaces.nsixulappinfo); (for explanation see this creating xpcom article.) getting application in
formation after you obtained the app info component, you can read its properties to get the application's id, human-readable name, version, plat
form version, etc.
... note: nsixulappinfo provides in
formation about the application and the plat
form, be careful to use the right one, especially when dealing with xulrunner-based applications.
...the latter is useful if you're trying to support nightly development builds of the application, and the
former can be useful if you only support official releases, and to distinguish between branch and trunk builds.
...And 4 more matches
XUL Questions and Answers - Archive of obsolete content
return to mozilla-dev-tech-xul summaries the frequently asked questions should be moved to xul faq (make sure they have a clear answer.) where can i get more in
formation about creating mozsearch plugins?
... creating mozsearch plugins contains more help in
formation about creating mozsearch plugin on firefox 2.
...some plat
forms display these buttons with a small icon indicating their usage.
...And 4 more matches
button - Archive of obsolete content
more in
formation is available in the xul tutorial.
... depending on the plat
form and theme being used, some elements will have set a maximum width so they will always appear cropped.
...in the case of
form elements, it will not be submitted.
...And 4 more matches
tree - Archive of obsolete content
more in
formation is available in the xul tutorial.
...in the case of
form elements, it will not be submitted.
... the disabled attribute is allowed only for
form controls.
...And 4 more matches
XULRunner Hall of Fame - Archive of obsolete content
ieditweb users can add pages, images,
forms, ecommerce many special effects and much more using the xulrunner based client.
...one example of this tight integration is that the
form in a web site can collect payment and set up a login for a members only section.
... xulrunner is embedded to provide automatic search against journal archives, automatic acquisition of bibtex in
formation, and automatic downloading of pdfs.
...And 4 more matches
NPEvent - Archive of obsolete content
d; xwindows typedef xevent npevent; fields npevent on microsoft windows the data structure has the following fields: event one of the following event types: wm_paint wm_lbuttondown wm_lbuttonup wm_lbuttondblclk wm_rbuttondown wm_rbuttonup wm_rbuttondblclk wm_mbuttondown wm_mbuttonup wm_mbuttondblclk wm_mousemove wm_keyup wm_keydown wm_setcursor wm_setfocus wm_killfocus for in
formation about these events, see the microsoft windows developer documentation.
...values: 0 nullevent 1 mousedown 2 mouseup 3 keydown 4 keyup 5 autokey 6 updateevt 7 diskevt 8 activateevt 15 osevt 23 khighlevelevent getfocusevent 0, 1 (true, false) losefocusevent adjustcursorevent 0, 1 (true, false) for in
formation about these events, see the mac os developer documentation.
...additional in
formation about the event.
...And 4 more matches
NPN_GetValue - Archive of obsolete content
« gecko plugin api reference « browser side plug-in api summary allows the plug-in to query the browser for in
formation.
... variable in
formation the call gets.
...capewindow: ms windows and unix/x11 only: ms windows: gets the native window on which plug-in drawing occurs; returns hwnd unix/x11: gets the browser toplevel window in which the plug-in is displayed; returns window npnvjavascriptenabledbool: tells whether javascript is enabled; true=javascript enabled, false=not enabled npnvasdenabledbool: tells whether smartupdate (
former name: asd) is enabled; true=smartupdate enabled, false=not enabled npnvisofflinebool: tells whether offline mode is enabled; true=offline mode enabled, false=not enabled npnvtoolkit: npnvsupportsxembedbool: npnvwindownpobject: returns the npobject * pointer for the dom window object; see getting the page url in npapi plugin for a rough example npnvpluginelementnpobject: npnvs...
...And 4 more matches
NPWindow - Archive of obsolete content
« gecko plugin api reference « plug-in side plug-in api summary contains in
formation about the target into which the plug-in instance can draw.
... syntax typedef struct _npwindow { void* window; /* plat
form specific handle */ uint32_t x; /* coordinates of top left corner */ uint32_t y; /* relative to a netscape page */ uint32_t width; /* maximum window size */ uint32_t height; nprect cliprect; /* clipping rectangle coordinates */ #ifdef xp_unix void * ws_info; /* plat
form-dependent additional data */ #endif /* xp_unix */ npwindowtype type; /* window or drawable target */ } npwindow; fields the data structure has the following fields: window plat
form-specific handle to a native window element in the netscape window hierarchy on windows (hwnd) and unix (x window id).
... ws_info unix: contains in
formation about the plug-in's unix window environment; points to an npsetwindowcallbackstruct.
...And 4 more matches
The First Install Problem - Archive of obsolete content
this is an old working document; see en/gecko_plugin_api_reference/plug-in_development_overview for current in
formation.
...the solution suggests that plugin vendors ought to leave dlls on a windows desktop whether or not a netscape gecko browser is detected, and then write keys in the windows registry giving future netscape gecko browsers the path where the plugin resides and meta-in
formation about how to load the plugin.
...this document proposes a meta-in
formation model in the win32 registry similar to the one used by microsoft's hkey_classes_root\clsid\ where a new activex control (ocx) on the system presents its uuid as a registry key (identifying the activex control) as well as in
formation about where to find the ocx (e.g.
...And 4 more matches
Building a Theme - Archive of obsolete content
this is a value you come up with to identify your extension in email address
format (note that it should not be your email).
...note: this parameter must be in the
format of an email address, although it does not have to be a valid email address.
... if you get a message that the install.rdf is mal
formed, it is helpful to load it into firefox using the file->open file command and it will report xml errors to you.
...And 4 more matches
Browser Feature Detection - Archive of obsolete content
this article has generally never been more than a way to show off firefox web compatibility, rather than something truly in
formative in a broader sense.
...you should not rely on any in
formation here.
... document.title true true true document.referrer true true true document.domain true true true document.url true true true document.body true true true document.images true true true document.applets true true true document.links true true true document.
forms true true true document.anchors true true true document.cookie true true true document.open() true true true document.close() true true true document.write() true true true document.writeln() true true true document.getelementbyid() true true true docume...
...And 4 more matches
-ms-filter - Archive of obsolete content
syntax the -ms-filter property is specified as a string that contains a list of one or more items, separated by spaces, of the following types: filters transitions procedural surfaces
formal syntax filter: <-ms-filter-function>+ -ms-filter: [ "'" <-ms-filter-function># "'" ] | [ '"' <-ms-filter-function># '"' ] where <-ms-filter-function> = <-ms-filter-function-progid> | <-ms-filter-function-legacy> where <-ms-filter-function-progid> = 'progid:' [ <ident-token> '.' ]* [ <ident-token> | <function-token> <any-value> ')' ] <-ms-filter-function-legacy> = <ident-token> | <function-to...
... code example: http://samples.msdn.microsoft.com/workshop/samples/author/dhtml/refs/filter_8.htm -ms-filter: 'progid:dximagetrans
form.microsoft.motionblur(strength=50), progid:dximagetrans
form.microsoft.basicimage(mirror=1)'; the following example shows how to use an inline style sheet to set the filter on an image.
... code example: http://samples.msdn.microsoft.com/workshop/samples/author/dhtml/refs/filter_h.htm <img style="filter:progid:dximagetrans
form.microsoft.motionblur(strength=50) progid:dximagetrans
form.microsoft.basicimage(mirror=1)" src="/workshop/samples/author/dhtml/graphics/cone.jpg" height="80px" width="80px" alt="cone"> the following example shows how to use scripting to set the filter on an image.
...And 4 more matches
display-outside - Archive of obsolete content
the display-outside css property specifies the outer display type of the box generated by an element, dictating how the element participates in its parent
formatting context.
... values block-level the element generates a block-level box, and participates in a block
formatting context.
... other
formatting contexts, such as flex
formatting contexts, may also work with block-level elements.
...And 4 more matches
Windows Media in Netscape - Archive of obsolete content
for example on windows xp, netscape 7.1's user agent string may be: mozilla/5.0 (windows; u; windows nt 5.1; en-us; rv:1.4) gecko/20030624 netscape/7.1 (ax) if the client was customized by a third party, additional in
formation may be present in the "vendor comment" area of the user agent string.
...accessing properties and controls from the document object works well with ie also, and thus, in order to deploy cross-plat
form code, avoiding syntax that makes use of global namespace is important.
...no netscape browser prior to netscape 7.1 has supported this non-standard way of writing scripts that handle in
formation sent by a plugin or control.
...And 4 more matches
Bounding volume collision detection with THREE.js - Game development
so any trans
formations such as scale, position, etc.
... a more simple alternative that fixes the previous issue is to set those boundaries later on with box3.setfromobject, which will compute the dimensions taking into account a 3d entity's trans
formations and any child meshes as well.
...so if we apply trans
formations or change the position of the mesh, we need to manually update the bounding sphere.
...And 4 more matches
Styling tables - Learn web development
the markup looks like so: <table> <caption>a summary of the uk's most famous punk bands</caption> <thead> <tr> <th scope="col">band</th> <th scope="col">year
formed</th> <th scope="col">no.
...it can also be given a
formula as a parameter, so it will select a sequence of elements.
... the
formula 2n-1 would select all the odd numbered children (1, 3, 5, etc.) and the
formula 2n would select all the even numbered children (2, 4, 6, etc.) we've used the odd and even keywords in our code, which do exactly the same things as the aforementioned
formulae.
...And 4 more matches
Introduction to CSS layout - Learn web development
the methods that can change how elements are laid out in css are as follows: the display property — standard values such as block, inline or inline-block can change how elements behave in normal flow, for example making a block-level element behave like an inline element (see types of css boxes for more in
formation).
...this is useful for creating complex layout effects such as tabbed boxes where different content panels sit on top of one another and are shown and hidden as desired, or in
formation panels that sit off screen by default, but can be made to slide on screen using a control button.
...first, some simple markup that creates an html
form.
...And 4 more matches
Styling links - Learn web development
now let's add some more in
formation to get this styled properly: body { width: 300px; margin: 0 auto; font-size: 1.2rem; font-family: sans-serif; } p { line-height: 1.4; } a { outline: none; text-decoration: none; padding: 2px 1px 0; } a:link { color: #265301; } a:visited { color: #437a16; } a:focus { border-bottom: 1px solid; background: #bae498; } a:hover { border-bottom: 1px solid; backgro...
...two points to note here are: the underline has been created using border-bottom, not text-decoration — some people prefer this because the
former has better styling options than the latter, and is drawn a bit lower, so doesn't cut across the descenders of the word being underlined (e.g.
...first, some simple html to style: <p>for more in
formation on the weather, visit our <a href="#">weather page</a>, look at <a href="http://#">weather on wikipedia</a>, or check out <a href="http://#">weather on extreme science</a>.</p> next, the css: body { width: 300px; margin: 0 auto; font-family: sans-serif; } p { line-height: 1.4; } a { outline: none; text-decoration: none; padding: 2px 1px 0; } a:link { color: blue; } a:vi...
...And 4 more matches
How can we design for all types of users? - Learn web development
images images can be either decorative or in
formative, but there's no guarantee that your users can see them.
... decorative images they're just for decoration and don't convey any real in
formation.
... in
formative images they are used to convey in
formation, hence their name.
...And 4 more matches
Cooperative asynchronous JavaScript: Timeouts and intervals - Learn web development
introduction for a long time, the web plat
form has offered javascript programmers a number of functions that allow them to asynchronously execute code after a certain time interval has elapsed, and to repeatedly execute a block of code asynchronously until you tell it to stop.
...so to cancel our above timeout, you'd do this: cleartimeout(mygreeting); note: see greeter-app.html for a slightly more involved demo that allows you to set the name of the person to say hello to in a
form, and cancel the greeting using a separate button (see the source code also).
... note: if you want to per
form some kind of simple constant dom animation, css animations are probably faster.
...And 4 more matches
Introduction to web APIs - Learn web development
third-party apis are not built into the browser by default, and you generally have to retrieve their code and in
formation from somewhere on the web.
...it provides a special set of constructs you can use to query the twitter service and return specific in
formation.
... third-party apis — constructs built into third-party plat
forms (e.g.
...And 4 more matches
Basic math in JavaScript — numbers and operators - Learn web development
type the following lines into your browser's console: let lotsofdecimal = 1.766584958675746364; lotsofdecimal; let twodecimalplaces = lotsofdecimal.tofixed(2); twodecimalplaces; converting to number data types sometimes you might end up with a number that is stored as a string type, which makes it difficult to per
form calculations with it.
... this most commonly happens when data is entered into a
form input, and the input type is text.
...the
former versions test whether the values are the same but not whether the values' datatypes are the same.
...And 4 more matches
Useful string methods - Learn web development
this is useful for many reasons; for example, you might want to find the lengths of a series of names so you can display them in order of length, or let a user know that a username they have entered into a
form field is too long if it is over a certain length.
...all you need to do in each case is write the code that will output the strings in the
format that we want them in.
... you'll then need to write a conditional test of the
form operand1 operator operand2.
...And 4 more matches
Framework main features - Learn web development
dsls can't be read by the browser directly; they must be trans
formed into javascript or html first.
... trans
formation is an extra step in the development process, but framework tooling generally includes the required tools to handle this step, or can be adjusted to include this step.
...it's also excessive: home and article don’t actually make use of the author's portrait or byline, but if we want to get that in
formation into the authorcredit, we will need to change home and author to accommodate it.
...And 4 more matches
React interactivity: Editing, filtering, conditional rendering - Learn web development
copy this block of code into the todo() function, beneath your usestate() hook but above the return statement: const editingtemplate = ( <
form classname="stack-small"> <div classname="
form-group"> <label classname="todo-label" htmlfor={props.id}> new name for {props.name} </label> <input id={props.id} classname="todo-text" type="text" /> </div> <div classname="btn-group"> <button type="button" classname="btn todo-cancel"> cancel <span classname="visually-hidden">renaming {props...
....name}</span> </button> <button type="submit" classname="btn btn__primary todo-edit"> save <span classname="visually-hidden">new name for {props.name}</span> </button> </div> </
form> ); const viewtemplate = ( <div classname="stack-small"> <div classname="c-cb"> <input id={props.id} type="checkbox" defaultchecked={props.completed} onchange={() => props.toggletaskcompleted(props.id)} /> <label classname="todo-label" htmlfor={props.id}> {props.name} </label> </div> <div classname="btn-group"> <button type="button" classname="btn"> edit <span classname="visually-hidden">{props.name}</span> </button> <button type="but...
... editing from the ui much of what we're about to do will mirror the work we did in
form.js: as the user types in our new input field, we need to track the text they enter; once they submit the
form, we need to use a callback prop to update our state with the new name of the task.
...And 4 more matches
Benchmarking
any per
formance metrics gathered by such builds are largely unrelated to what would be found in a release browser.
...this setting reduces build times significantly but comes with a serious hit to runtime per
formance for any rust code (for example stylo and webrender).
... add the following to your mozconfig in order to build with level 2: ac_add_options rustc_opt_level=2 gc poisoning many firefox builds have a diagnostic tool that causes crashes to happen sooner and produce much more actionable in
formation, but also slow down regular usage substantially.
...And 4 more matches
Continuous Integration
after the builds are completed, they are used to run a series of correctness and per
formance tests.
... builds b - normal build jobs; these jobs per
form compilation and some compiled-code tests (e.g., 'make check').
... talos per
formance tests all per
formance tests displayed in treeherder are run using the talos framework, and denoted by the letter t.
...And 4 more matches
Debugging on Mac OS X
for specific in
formation on a way to debug hangs, see debugging a hang on os x.
...select the "cross-plat
form" tab then under the "other" template group select the "empty" project type.
... the .lldbinit file in the source tree imports many useful mozilla specific lldb settings, commands and
formatters into lldb, but you may need to take one of the following steps to make sure this file is used.
...And 4 more matches
Debugging
documentation topics debugging on top of the mozilla plat
form debugging javascript code how to debug javascript code, with a focus on debugging code in the mozilla project itself.
... debugging the mozilla plat
form using debuggers with mozilla debugging mozilla on windows faq questions (and answers) about debugging mozilla on windows.
... advanced debugging techniques understanding crash reports how to read crash reports, which are full of in
formation yet often not easy to interpret and act on.
...And 4 more matches
Eclipse CDT
manual setup, and more more in
formation can be found on the eclipse cdt manual setup page.
... much of that page is redundant (taken care of by the mach setup), but there is still some in
formation there that is relevant that should make its way back here at some point.
...for example, if you are using a mac and you search for callers of nsdisplaylistbuilder::isintrans
form, the results will not include the caller in nsobjectframe.cpp because that caller is wrapped in "#ifndef xp_macosx".
...And 4 more matches
Firefox and the "about" protocol
there is a lot of useful in
formation about firefox hidden away behind the about: url protocol.
...here is a complete list of urls in the about: pseudo protocol: about: page description about:about provides an overview of all about: pages available for your current firefox version about:addons add-ons manager about:buildconfig displays the configuration and plat
form used to build firefox about:cache displays in
formation about the memory, disk, and appcache about:checkerboard switches to the checkerboarding measurement page, which allows to detect checkerboarding issues about:config provides a way to inspect and change firefox preferences and settings about:compat lists overriding site compatability fixes, linke...
...hes to the developer tools debugging page, which allows you to debug add-ons, tabs and service workers about:devtools summarizes the developer tools and provides links to documentation for each tool about:downloads displays all downloads done within firefox about:home start page of firefox when opening a new window about:license displays licensing in
formation about:logo firefox logo about:memory provides a way to display memory usage, save it as report and run the gc and cc about:mozilla special page showing a message from "the book of mozilla" about:networking displays networking in
formation about:newtab start page when opening a new tab about:per
formance displays memory and...
...And 4 more matches
SourceMap.jsm
get a reference to the module: let sourcemap = {}; components.utils.import('resource:///modules/devtools/sourcemap.jsm', sourcemap); sourcemapconsumer a sourcemapconsumer instance represents a parsed source map which we can query for in
formation about the original file positions by giving it a file position in the generated source.
... sourcemapconsumer.prototype.originalpositionfor(generatedposition) returns the original source, line, and column in
formation for the generated source's line and column positions provided.
... and an object is returned with the following properties: source: the original source file, or null if this in
formation is not available.
...And 4 more matches
JavaScript code modules
assert.jsm implements the commonjs unit testing specification version 1.1, which provides a basic standardized interface for per
forming in-code logical assertions with optional, customizable error reporting.
... downloads.jsm provides a single entry point to interact with the downloading capabilities of the plat
form.
... geometry.jsm provides routines for per
forming basic geometric operations on points and rectangles.
...And 4 more matches
Power profiling overview
this article covers important background in
formation about power profiling, with an emphasis on intel processors used in desktop and laptop machines.
... intel processors have model-specific registers (msrs) containing measurements of how much time is spent in different c-states, and tools such as powermetrics (mac), powertop and turbostat (linux) can expose this in
formation.
... standard per
formance profiling tools that measure cpu usage or proxies of cpu usage (such as instruction counts) typically provide high-context measurements.
...And 4 more matches
Localization Use Cases
in polish, the grammatical
form of crashed depends on the gender of brandshortname.
...ounding like a robot: <crashbanneros2[brandshortname::_gender] { masculine: "{{ brandshortname }} uległ awarii", feminine: "{{ brandshortname }} uległa awarii", neutral: "{{ brandshortname }} uległo awarii" }> this will give us, depending on the current branding, the following messages: firefox os uległ awarii boot2gecko uległo awarii isolation let's look at how the settings app
formats sizes.
... first, there is devicestoragehelper.show
formatedsize (sic): function show
formatedsize(element, l10nid, size) { if (size === undefined || isnan(size)) { element.textcontent = ''; return; } // kb - 3 kb (nearest ones), mb, gb - 1.2 mb (nearest tenth) var fixeddigits = (size < 1024 * 1024) ?
...And 4 more matches
JSS
git clone git@github.com:dogtagpki/jss.git -- or -- git clone https://github.com/dogtagpki/jss.git all future upstream enquiries to jss should now use the pagure issue tracker system: https://pagure.io/jss/issues documentation regarding the jss project should now be viewed at: http://www.dogtagpki.org/wiki/jss note: as much of the jss documentation is sorely out-of-date, updated in
formation will be a work in progress, and many portions of any legacy documentation will be re-written over the course of time.
... legacy jss in
formation can still be found at: source: https://hg.mozilla.org/projects/jss issues: https://bugzilla.mozilla.org/buglist.cgi?product=jss wiki: /docs/mozilla/projects/nss/jss network security services for java (jss) is a java interface to nss.
... nss is the cryptographic module where all cryptographic operations are per
formed.
...And 4 more matches
NSS 3.24 release notes
distribution in
formation the hg tag is nss_3_24_rtm.
...these checks have been disabled by default, as they can cause a per
formance regression.
... for functions that use temporary arenas, allocating a portcheaparena on the stack is more per
formant than allocating a plarenapool on the heap.
...And 4 more matches
pkfnc.html
this page is part of the ssl reference that we are migrating into the
format described in the mdn style guide.
... pk11_setpasswordfunc defines a callback function used by the nss libraries whenever in
formation protected by a password needs to be retrieved from the key or certificate databases.
... description during the course of an ssl operation, it may be necessary for the user to log in to a pkcs #11 token (either a smart card or soft token) to access protected in
formation, such as a private key.
...And 4 more matches
sslcrt.html
this page is part of the ssl reference that we are migrating into the
format described in the mdn style guide.
... validating certificates manipulating certificates getting certificate in
formation comparing secitem objects validating certificates cert_verifycertnow cert_verifycertname cert_checkcertvalidtimes nss_cmpcertchainwcanames cert_verifycertnow checks that the current date is within the certificate's validity period and that the ca signature on the certificate is valid.
...see description below for more in
formation.
...And 4 more matches
SpiderMonkey Build Documentation
non-developer (optimized) build use these steps if you want to install spidermonkey for production use or run per
formance benchmarks.
...see the build prerequisites page for your plat
form.
... developer (debug) build for developing and debugging spidermonkey itself, it is best to have both a debug build (for everyday debugging) and an optimized build (for per
formance testing), in separate build directories.
...And 4 more matches
Creating JavaScript jstest reftests
this directory contains tests of spidermonkey con
formance to ecmascript as well as spidermonkey non-standard extenstions to ecmascript.
... per
formance tests or stress tests tests of spidermonkey's com
formance to the ecmascript standard a brief history: in 2017, spidermonkey started comsuming test262, a comprehensive tests suite for ecmascript implementations.
... before using test262, spidermonkey had a fair number of internal tests of con
formance to ecmascript, and many of those tests remain in the js/src/non262 directory as regressions.
...And 4 more matches
JS_MaybeGC
offer the javascript engine an opportunity to per
form garbage collection if needed.
... syntax void js_maybegc(jscontext *cx); name type description cx jscontext * the context in which to per
form garbage collection, if needed.
...if so, it per
forms some garbage collection.
...And 4 more matches
SpiderMonkey 1.8.7
—22 march 2011 plat
form support spidermonkey 1.8.7 is supported on all the plat
forms where firefox 10 runs.
...on other plat
forms, the jit is simply disabled; javascript code runs in an interpreter, as in previous versions.
...see the 1.8.5 release notes for in
formation on migrating from earlier versions.
...And 4 more matches
SpiderMonkey 24
it continues to improve per
formance over previous spidermonkey releases, with a significantly improved garbage collector, a new jit compilation mode, and other features.
...get it here mozilla-esr24 if the download url is outdate you will find it in "firefox extended support release 24" package on hg release plat
form support spidermonkey 24 is supported on all the plat
forms where firefox 24 runs.
...on some other plat
forms (sparc, mips), the jit is provided but not supported.
...And 4 more matches
SpiderMonkey 45
it continues to improve per
formance over previous spidermonkey releases.
... — apr 14, 2016 plat
form support spidermonkey 45 is supported on all plat
forms able to run firefox 45.
...on several other plat
forms (sparc, mips), the jit is provided but not supported.
...And 4 more matches
Animated PNG graphics
authors the apng specification was authored by: stuart parmenter <pavlov@pavlov.net> vladimir vukicevic <vladimir@pobox.com> andrew smith <asmith15@littlesvr.ca> overview apng is an extension of the portable network graphics (png)
format, adding support for animated images.
... it is intended to be a replacement for simple animated images that have traditionally used the gif
format, while adding support for 24-bit images and 8-bit transparency.
...in
formation for each frame about placement and rendering is stored in 'fctl' chunks.
...And 4 more matches
Mork
mork is a database file
format invented by david mccusker for the mozilla code since the original netscape database in
formation was proprietary and could not be released open source.
... starting with mozilla 1.9, it was phased out in favor of sqlite, a more widely-supported file
format.
... the in
formation on this page was constructed by reading the source code of the mork database in mozilla and attempting to codify what it parses as faithfully as possible.
...And 4 more matches
Creating the Component Code
registration provides the in
formation that applications need in order to use components properly.
...xpinstall, the cross-plat
form installation technology that mozilla uses to install the browser and other components, is one such alternative.
...this is very useful if the caller is required to know in
formation about the component like its threading module, whether or not it's a singleton, its implementation language, and so forth.
...And 4 more matches
Using XPCOM Components
cookie manager cookie management is one of the many sets of functionality that is made available to the browser in the
form of an xpcom component and that can be reused by developers who want similar functionality in their applications.
... see http://www.mozilla.org/scriptable/ for more in
formation about xpconnect and javascript.
...it's divided into three subsections: one about actually finding all these binary components in mozilla and two others corresponding to the two main ways that clients typically access xpcom components: finding mozilla components this book attempts to provide reference in
formation for xpcom components and their interfaces that are frozen as of the time of this writing.
...And 4 more matches
Introduction to XPCOM for the DOM
for more in
formation about nscomptr's, please read the user's guide.
...if both the caller and the callee per
form the addref, the object will be leaked, because one of the two references will never be released!
...for those you have to use raw interface pointers, and you don't have to per
form any manual refcounting.
...And 4 more matches
nsIAccessibleStates
because objects with this state are not available to users, client applications should not communicate in
formation about the object to users.
...if this second state is defined, then clients can communicate the in
formation about the object to users.
...a speech-based accessibility aid does not announce in
formation when an object with this state has the focus because the object automatically announces in
formation.
...And 4 more matches
nsITextInputProcessor
for solving that issue, methods of this interface have been designed for per
forming a key operation or representing a change of composition state.
... for example, the implementation of this interface manages modifier state and composition state, initializes dom events from minimum in
formation, and doesn't dispatch some events if they are not necessary.
...var enterkeyevent = new keyboardevent("", { key: "enter", code: "enter" }); tip.commitcomposition(enterkeyevent); note that specifying keyboard event may not be dispatched during composition due to con
forming to the specification of dom level 3 events.
...And 4 more matches
Using the clipboard
this section provides in
formation about cutting, copying, and pasting to and from the clipboard.
...the clipboard model in mozilla requires you to per
form the following steps to copy data: create an xpcom wrapper for the data which you want to put on the clipboard.
...for example, a piece of html can be represented in both its original html
form and in plain text.
...And 4 more matches
XPCOM ABI
while xpcom components written in a scripting language (such as javascript) can be moved across plat
forms (such as windows and os x) without adaptation, those written in a compiled language (such as c++) require recompilation when moving to a different plat
form.
... a binary xpcom component consists of an .xpt file which fits all plat
forms and a dll (.dll on windows, .so on unix) which is plat
form-specific and has a certain abi.
... abi naming each abi is named with a string [target_xpcom_abi] of the following
format: {cpu_arch}-{target_compiler_abi} {cpu_arch} [plat
forms] represents the cpu architecture and may be either: x86 - i386 and higher series (including x86-64 cpus in 32-bit mode) ppc - powerpc series alpha - alpha series x86_64 - amd64/emt64 series in 64-bit mode (32-bit mode is still considered x86) sparc - sparc series ia64 - itanium series {target_compiler_abi}[plat
forms] represents the compiler abi and may be either: msvc - microsoft visual c++ n32 - irix ...
...And 4 more matches
LDAP Support
it should be noted that all of this in
formation applies to both thunderbird and the seamonkey application suite.
...this can be accomplished by setting the following preferences: user_pref("mail.autocomplete.commentcolumn", 2); user_pref("ldap_2.servers.directoryname.autocomplete.comment
format", "[ou]"); the first preference tells us to use a comment column in the type down (the default value is 0 for no comment), and that the value for the comment is a custom string unique to each directory.
... the comment
format preference is set on each directory.
...And 4 more matches
Using the Multiple Accounts API
it holds all the in
formation necessary to retrieve mail from the remote server, such as hostname, user login name, and biff settings.
... identities (nsimsgidentity): an identity contains all the in
formation necessary to compose and outgoing mail message.
...user_pref("mail.server.server2.hostname", "pop.myisp.com"); user_pref("mail.server.server3.hostname", "news.myisp.com"); user_pref("mail.server.server4.hostname", "news.mozilla.org"); user_pref("mail.identity.id1.useremail", "alecf@mywork.com"); user_pref("mail.identity.id2.useremail", "alecf@myisp.com"); user_pref("mail.identity.id3.useremail", "alecfnospam@myisp.com"); there is a lot of in
formation missing here of course.
...And 4 more matches
URLs - Plugins
uni
form resource locator (url) protocols provide a means for locating and accessing resources that are available on the internet and on intranets.
... url scheme description about locates browser in
formation or "fun" pages.
... wais (wide area in
formation servers) locates wais databases and their documents.
...And 4 more matches
DevTools API - Firefox Developer Tools
a definition is a js light object that exposes different in
formation about the tool (like its name and its icon), and a build method that will be used later-on to start an instance of this tool.
... parameters: tooldefinition {tooldefinition} - an object that contains in
formation about the tool.
... parameters: themedefinition {themedefinition} - an object that contains in
formation about the theme.
...And 4 more matches
Network request list - Firefox Developer Tools
you can also change the width of the columns to help make the in
formation you are looking for easier to view.
... there's an icon next to the domain that gives you extra in
formation about the security status of that request.
... image thumbnails if the request is for an image, hovering over its filename shows a preview of the image in a tooltip: security icons the network monitor displays an icon in the domain column: this gives you extra in
formation about the security status of the request: icon meaning https weak https (for example, a weak cipher was used) failed https (for example, a certificate was invalid) http localhost indicates that the url belongs to a known tracker that would be blocked with content blocking enabled.
...And 4 more matches
Allocations - Firefox Developer Tools
the allocations view in the per
formance tool shows you which functions in your page are allocating the most memory over the course of the profile.
... for per
formance this is important mostly because allocating a lot of memory, or making a lot of allocations, can trigger garbage collection.
... to enable the allocations view, you must check "record allocations" in the per
formance tool settings, before recording a profile.
...And 4 more matches
Frame rate - Firefox Developer Tools
a frame rate of 60fps is the target for smooth per
formance, giving you a time budget of 16.7ms for all the updates needed in response to some event.
... the frame rate graph in the per
formance tool shows you the frame rate over the course of a recording.
...it's most familiar from film and gaming, but is now widely used as a per
formance measure for websites and web apps.
...And 4 more matches
DOMMatrixReadOnly.scale() - Web APIs
the scale() method of the dommatrixreadonly interface creates a new matrix being the result of the original matrix with a scale trans
form applied.
... originx optional an x-coordinate for the origin of the trans
formation.
... originy optional a y-coordinate for the origin of the trans
formation.
...And 4 more matches
DOMMatrixReadOnly - Web APIs
a, b, c, d, e, f double-precision floating-point values representing the components of a 4×4 matrix which are required in order to per
form 2d rotations and translations.
... dommatrixreadonly.scalenonuni
form() returns a new dommatrix created by applying the specified scaling on the x, y, and z axes, centered at the given origin.
... dommatrixreadonly.skewx() returns a new dommatrix created by applying the specified skew trans
formation to the source matrix along its x-axis.
...And 4 more matches
Geolocation API - Web APIs
for privacy reasons, the user is asked for permission to report location in
formation.
... concepts and usage you will often want to retrieve a user's location in
formation in your web app, for example to plot their location on a map, or display personalized in
formation relevant to their location.
...if they accept, then the browser will use the best available functionality on the device to access this in
formation (for example, gps).
...And 4 more matches
Dragging and Dropping Multiple Items - Web APIs
event.datatransfer.mozcleardataat("text/plain", 1); caution: removing the last
format for a particular index will remove that item entirely, shifting the remaining items down, so the later items will have different indices.
...etdataat("text/uri-list", "url1", 0); dt.mozsetdataat("text/plain", "url1", 0); dt.mozsetdataat("text/uri-list", "url2", 1); dt.mozsetdataat("text/plain", "url2", 1); dt.mozsetdataat("text/uri-list", "url3", 2); dt.mozsetdataat("text/plain", "url3", 2); // [item1] data=url1, index=0 // [item2] data=url2, index=1 // [item3] data=url3, index=2 after you added three items in two different
formats, dt.mozcleardataat("text/uri-list", 1); dt.mozcleardataat("text/plain", 1); you've removed the second item clearing all types, then the old third item becomes new second item, and its index decreases.
...in this case, add the appropriate
formats for each item.
...And 4 more matches
Timing element visibility with the Intersection Observer API - Web APIs
using this api lets everything get streamlined by the browser to reduce the impact on per
formance substantially.
...ction handlevisibilitychange() { if (document.hidden) { if (!previouslyvisibleads) { previouslyvisibleads = visibleads; visibleads = []; previouslyvisibleads.foreach(function(adbox) { updateadtimer(adbox); adbox.dataset.lastviewstarted = 0; }); } } else { previouslyvisibleads.foreach(function(adbox) { adbox.dataset.lastviewstarted = per
formance.now(); }); visibleads = previouslyvisibleads; previouslyvisibleads = null; } } since the event itself doesn't state whether the document has switched from visible to invisible or vice-versa, the document.hidden property is checked to see if the document is not currently visible.
... if the document has just become visible, we reverse this process: first we go through previouslyvisibleads and set each one's dataset.lastviewstarted to the current document's time (in milliseconds since the document was created) using the per
formance.now() method.
...And 4 more matches
Intersection Observer API - Web APIs
as the web has matured, the need for this kind of in
formation has grown.
... intersection in
formation is needed for many reasons, such as: lazy-loading of images or other content as a page is scrolled.
... deciding whether or not to per
form tasks or animation processes based on whether or not the user will see the result.
...And 4 more matches
Using the Media Capabilities API - Web APIs
with the media capabilities api, you can determine not just if the browser can support a given
format, but whether or not it can do so efficiently and smoothly.
... more and more finely-detailed in
formation about the display's properties, so that in
formed decisions can be made when choosing the best
format to play on the user's device.
... support for getting real-time feedback about the playback of media, so your code can make in
formed decisions about adapting the stream's quality or other settings to manage the user's perceived media per
formance and quality.
...And 4 more matches
Media Source API - Web APIs
the media source api,
formally known as media source extensions (mse), provides functionality enabling plugin-free web-based streaming media.
...mse allows us to replace the usual single track src value fed to media elements with a reference to a mediasource object, which is a container for in
formation like the ready state of the media for being played, and references to multiple sourcebuffer objects that represent the different chunks of media that make up the entire stream.
...the usage of external utilities to massage the content into a suitable
format is required.
...And 4 more matches
Page Visibility API - Web APIs
notes: the page visibility api is especially useful for saving resources and improving per
formance by letting a page avoid per
forming unnecessary tasks when the document isn't visible.
...you can detect the event and per
form some actions or behave differently.
... a site has an image carousel that shouldn't advance to the next slide unless the user is viewing the page an application showing a dashboard of in
formation doesn't want to poll the server for updates when the page isn't visible a page wants to detect when it is being prerendered so it can keep accurate count of page views a site wants to switch off sounds when a device is in standby mode (user pushes power button to turn screen off) developers have historically used imperfect proxies to detect this.
...And 4 more matches
PasswordCredential - Web APIs
syntax var mycredential = new passwordcredential(passwordcredentialdata) var mycredential = new passwordcredential(html
formelement) parameters either of the following: passwordcredentialdata a passwordcredentialdata dictionary containing the following fields: iconurl: (optional) the url of a user's avatar image.
... html
formelement a reference to an html
formelement with appropriate input fields.
... the
form should, at the very least, contain an id and password.
...And 4 more matches
PaymentRequest.show() - Web APIs
the promise should resolve with a paymentdetailsupdate object containing the updated in
formation.
... function validateresponse(response) { checkallvalues(response) .then(response => response.complete("success")) .catch(response => response.complete("fail")); } you could even have checkallvalues() be a synchronous function, although that may have per
formance implications you don't want to deal with: function validateresponse(response) { if (checkallvalues(response) { response.complete("success"); } else { response.complete("fail"); } } see the article using promises for more in
formation if you need more in
formation about working with promises.
...this method triggers the user agent's built-in process for retrieving payment in
formation from the user.
...And 4 more matches
RTCStatsReport - Web APIs
the statistics objects for each category of statistic in
formation, there is a dictionary whose properties provide the relevant in
formation.
... properties common to all statistic categories all webrtc statistics objects are fundamentally based on the rtcstats dictionary, which provides the most fundamental in
formation: the timestamp, the statistic type string, and an id uniquely identifying the source of the data: id a domstring which uniquely identifies the object which was inspected to produce this object based on rtcstats.
...this in
formation considers only the outbound rtp stream, so any data which requires in
formation about the state of the remote peers (such as round-trip time) is unavailable, since those values can't be computed without knowing about the other peers' states.
...And 4 more matches
ReadableStream.pipeThrough() - Web APIs
the pipethrough() method of the readablestream interface provides a chainable way of piping the current stream through a trans
form stream or any other writable/readable pair.
... syntax var trans
formedstream = readablestream.pipethrough(trans
formstream[, options]); parameters trans
formstream a trans
formstream (or an object with the structure {writable, readable}) consisting of a readable stream and a writable stream working together to trans
form some data from one
form to another.
... data writen to the writable stream can be read in some trans
formed state by the readable stream.
...And 4 more matches
Using the Screen Capture API - Web APIs
while display capture is in effect, the machine which is sharing screen contents will display some
form of indicator so the user is aware that sharing is taking place.
...this could be refined further by specifying additional in
formation for each of audio and video: const gdmoptions = { video: { cursor: "always" }, audio: { echocancellation: true, noisesuppression: true, samplerate: 44100 } } in this example the cursor will always be visible in the capture, and the audio track should ideally have noise suppression and echo cancellation features enabled, as well as an ideal audio sample rate of 44.1...
... for example, privacy and/or security violations can easily occur if the user is sharing their screen and a visible background window happens to contain personal in
formation, or if their password manager is visible in the shared stream.
...And 4 more matches
WEBGL_compressed_texture_etc - Web APIs
the webgl_compressed_texture_etc extension is part of the webgl api and exposes 10 etc/eac compressed texture
formats.
...for more in
formation, see also using extensions in the webgl tutorial.
... constants the compressed texture
formats are exposed by 10 constants and can be used in two functions: compressedteximage2d() and compressedtexsubimage2d().
...And 4 more matches
WEBGL_compressed_texture_s3tc - Web APIs
the webgl_compressed_texture_s3tc extension is part of the webgl api and exposes four s3tc compressed texture
formats.
...for more in
formation, see also using extensions in the webgl tutorial.
... constants the compressed texture
formats are exposed by four constants and can be used in two functions: compressedteximage2d() and compressedtexsubimage2d().
...And 4 more matches
WEBGL_compressed_texture_s3tc_srgb - Web APIs
the webgl_compressed_texture_s3tc_srgb extension is part of the webgl api and exposes four s3tc compressed texture
formats for the srgb colorspace.
...for more in
formation, see also using extensions in the webgl tutorial.
... constants the compressed texture
formats are exposed by four constants and can be used in two functions: compressedteximage2d() and compressedtexsubimage2d().
...And 4 more matches
WebGL2RenderingContext.texImage3D() - Web APIs
syntax void gl.teximage3d(target, level, internal
format, width, height, depth, border,
format, type, glintptr offset); void gl.teximage3d(target, level, internal
format, width, height, depth, border,
format, type, htmlcanvaselement source); void gl.teximage3d(target, level, internal
format, width, height, depth, border,
format, type, htmlimageelement source); void gl.teximage3d(target, level, internal
format, width, height, depth, border,
format, type, htmlvideoelement source); void gl.teximage3d(target, level, internal
format, width, height, depth, border,
format, type, imagebitmap source); void gl.teximage3d(target, level, internal
format, width, height, depth, border,
format,...
... type, imagedata source); void gl.teximage3d(target, level, internal
format, width, height, depth, border,
format, type, arraybufferview?
... srcdata); void gl.teximage3d(target, level, internal
format, width, height, depth, border,
format, type, arraybufferview srcdata, srcoffset); parameters target a glenum specifying the binding point (target) of the active texture.
...And 4 more matches
WebGLRenderingContext.compressedTexImage[23]D() - Web APIs
the webglrenderingcontext.compressedteximage2d() and webgl2renderingcontext.compressedteximage3d() methods of the webgl api specify a two- or three-dimensional texture image in a compressed
format.
... compressed image
formats must be enabled by webgl extensions before using these methods.
... syntax // webgl 1: void gl.compressedteximage2d(target, level, internal
format, width, height, border, arraybufferview?
...And 4 more matches
Visualizations with Web Audio API - Web APIs
one of the most interesting features of the web audio api is the ability to extract frequency, wave
form, and other data from your audio source, which can then be used to create visualizations.
... the analyser node will then capture audio data using a fast fourier trans
form (fft) in a certain frequency domain, depending on what you specify as the analysernode.fftsize property value (if no value is specified, the default is 2048.) note: you can also specify a minimum and maximum power value for the fft data scaling range, using analysernode.mindecibels and analysernode.maxdecibels, and different data averaging constants using analysernode.smoothingtimeconstant.
... read those pages to get more in
formation on how to use them.
...And 4 more matches
Window - Web APIs
window.customelements read only returns a reference to the customelementregistry object, which can be used to register new custom elements and get in
formation about previously registered custom elements.
... window.per
formance read only returns a per
formance object, which includes the timing and navigation attributes, each of which is an object providing per
formance-related data.
... see also using navigation timing for additional in
formation and examples.
...And 4 more matches
ARIA live regions - Accessibility
dropdown box updates useful onscreen in
formation a website specializing in providing in
formation about planets provides a dropdown box.
... when a planet is selected from the dropdown, a region on the page is updated with in
formation about the selected planet.
... html <fieldset> <legend>planet in
formation</legend> <label for="planetsselect">planet:</label> <select id="planetsselect" aria-controls="planetinfo"> <option value="">select a planet…</option> <option value="mercury">mercury</option> <option value="venus">venus</option> <option value="earth">earth</option> <option value="mars">mars</option> </select> <button id="renderplanetinfobutton">go</button> </fieldset> <div role="region" id="planetinfo" aria-live="polite"> <h2 id="planettitle">no planet selected</h2> <p id="planetdescription">select a planet to view its description</p> </div> <p><small>in
formation courtesy <a href="https://en.wikipedia.org/wiki/solar_system#inner_solar_system">wikipedia</a></small></p> javascript const planets_info = { ...
...And 4 more matches
Using the aria-describedby attribute - Accessibility
this is very similar to aria-labelledby: a label describes the essence of an object, while a description provides more in
formation that the user might need.
... the aria-describedby attribute is not used only for
form elements; it is also used to associate static text with widgets, groups of elements, panes, regions that have a heading, definitions, and more.
... the examples section below provides more in
formation about how to use the attribute in these cases.
...And 4 more matches
Alerts - Accessibility
the problem you have a
form — a contact
form, for example — that you want to put some accessible error checking into.
... the
form first, please read about the aria-required technique if you have not done so, as this technique expands upon that.
... here is a simple
form: <
form method="post" action="post.php"> <fieldset> <legend>please enter your contact details</legend> <label for="name">your name (required):</label> <input name="name" id="name" aria-required="true"/> <br /> <label for="email">e-mail address (required):</label> <input name="email" id="email" aria-required="true"/> <br /> <label for="website">website (optional):</label> <input name="website" id="website"/> </fieldset> <label for="message">please enter your message (required):</label> <br /> <textarea name="message" id="message" rows="5" cols="80" aria-required="true"></textarea> <br /> <input type="submit" name="submit" value="send message"/> <input type="reset" name="reset" value="reset...
...And 4 more matches
Architecture - Accessibility
one reason for this is that there are fewer nodes to pass across process, and that improves per
formance.
...see the atk uses of isembeddedobject() for more in
formation on how we do this.
...text and whitespace leaf nodes are exposed, but are redundant with the in
formation in the parent object's nsiaccessibletext.
...And 4 more matches
Keyboard-navigable JavaScript widgets - Accessibility
using tabindex by default, when people use the tab key to browse a webpage, only interactive elements (like links,
form controls) get focused.
... the following table describes tabindex behavior in modern browsers: tabindex attribute focusable with mouse or javascript via element.focus() tab navigable not present follows the plat
form convention of the element (yes for
form controls, links, etc.).
... follows the plat
form convention of the element.
...And 4 more matches
@font-face - CSS: Cascading Style Sheets
syntax @font-face { font-family: "open sans"; src: url("/fonts/opensans-regular-webfont.woff2")
format("woff2"), url("/fonts/opensans-regular-webfont.woff")
format("woff"); } descriptors font-display determines how a font face is displayed based on whether and when it is downloaded and ready to use.
... to provide the browser with a hint as to what
format a font resource is — so it can select a suitable one — it is possible to include a
format type inside a
format() function: src: url(ideal-sans-serif.woff)
format("woff"), url(basic-sans-serif.ttf)
format("truetype"); the available types are: "woff", "woff2", "truetype", "opentype", "embedded-opentype", and "svg".
... 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.
...And 4 more matches
@supports - CSS: Cascading Style Sheets
the following example returns true if the browser's trans
form-origin property considers 5% 5% valid: @supports (trans
form-origin: 5% 5%) {} function syntax the second basic supports condition is a supports function, the syntax for these is supported by all browsers, but the functions themselves are still being standardized.
...the following example returns true if the browser's trans
form-origin property doesn't consider 10em 10em 10em valid: @supports not (trans
form-origin: 10em 10em 10em) {} as with any operator, the not operator can be applied to a declaration of any complexity.
... the following examples are both valid: @supports not (not (trans
form-origin: 2px)) {} @supports (display: grid) and (not (display: inline-grid)) {} note: there is no need to enclose the not operator between two parentheses at the top level.
...And 4 more matches
Box-shadow generator - CSS: Cascading Style Sheets
iv> <div class="ui-slider" data-topic="left" data-min="-300" data-max="700" data-step="1"> </div> <div class="ui-slider-btn-set" data-topic="left" data-type="add"></div> <div class="ui-slider-input" data-topic="left" data-unit="px"></div> </div> <div id="trans
form_rotate" class="slidergroup"> <div class="ui-slider-name"> rotate </div> <div class="ui-slider-btn-set" data-topic="rotate" data-type="sub"></div> <div class="ui-slider" data-topic="rotate" data-min="-360" data-max="360" data-step="1" data-value="0"> </div> ...
...tput" data-topic="element" data-name="element" data-prop="width height background-color position=[relative] box-shadow"> </div> <div class="output" data-topic="before" data-name="element:before" data-prop="content=[""] position=[absolute] width height top left z-index background-color box-shadow trans
form -webkit-trans
form -ms-trans
form"> </div> <div class="output" data-topic="after" data-name="element:after" data-prop="content=[""] position=[absolute] width height top left z-index background-color box-shadow trans
form -webkit-trans
form -ms-trans
form"> </div> </div> </div> ...
...oz-user-select: none; user-select: none; } .slidergroup * { float: left; height: 100%; line-height: 100%; } /* slider */ .ui-slider { height: 10px; width: 200px; margin: 4px 10px; display: block; border: 1px solid #999; border-radius: 3px; background: #eee; } .ui-slider:hover { cursor: pointer; } .ui-slider-name { width: 90px; padding: 0 10px 0 0; text-align: right; text-trans
form: lowercase; } .ui-slider-pointer { width: 13px; height: 13px; background-color: #eee; border: 1px solid #2c9fc9; border-radius: 3px; position: relative; top: -3px; left: 0%; } .ui-slider-btn-set { width: 25px; background-color: #2c9fc9; border-radius: 3px; color: #fff; font-weight: bold; text-align: center; } .ui-slider-btn-set:hover { background-color: #379b4a; cursor: pointer...
...And 4 more matches
Typical use cases of Flexbox - CSS: Cascading Style Sheets
it
forms the most simple of flexbox examples, and could be considered the ideal flexbox use case.
...with flexbox we can allow the part of the media object containing the image to take its sizing in
formation from the image, and then the body of the media object flexes to take up the remaining space.
...
form controls flexbox is particularly useful when it comes to styling
form controls.
...And 4 more matches
appearance (-moz-appearance, -webkit-appearance) - CSS: Cascading Style Sheets
the appearance css property is used to display an element using plat
form-native styling, based on the operating system's theme.
... the -moz-appearance property was used in xul stylesheets to design custom widgets with plat
form-appropriate styling.
... it was also used in the xbl implementations of the widgets that ship with the mozilla plat
form.
...And 4 more matches
font-variant-ligatures - CSS: Cascading Style Sheets
the font-variant-ligatures css property controls which ligatures and contextual
forms are used in textual content of the elements it applies to.
... this leads to more harmonized
forms in the resulting text.
... values normal this keyword leads to the activation of the usual ligatures and contextual
forms needed for correct rendering.
...And 4 more matches
overflow - CSS: Cascading Style Sheets
when an element's content is too big to fit in its block
formatting context — in both directions.
...the box is not a scroll container, and does not start a new
formatting context.
... if you wish to start a new
formatting context, you can use display: flow-root to do so.
...And 4 more matches
scale() - CSS: Cascading Style Sheets
the scale() css function defines a trans
formation that resizes an element on the 2d plane.
...its result is a <trans
form-function> data type.
... this scaling trans
formation is characterized by a two-dimensional vector.
...And 4 more matches
scaleZ() - CSS: Cascading Style Sheets
the scalez() css function defines a trans
formation that resizes an element along the z-axis.
... its result is a <trans
form-function> data type.
... this scaling trans
formation modifies the z-coordinate of each element point by a constant factor, except when the scale factor is 1, in which case the function is the identity trans
form.
...And 4 more matches
Event reference
each event is represented by an object which is based on the event interface, and may have additional custom fields and/or functions used to get additional in
formation about what happened.
...
form events event name fired when reset the reset button is pressed submit the submit button is pressed printing events event name fired when beforeprint the print dialog is opened afterprint the print dialog is closed text composition events event name fired when compositi...
...each event is listed along with the interface representing the object sent to recipients of the event (so you can find in
formation about what data is provided with each event) as well as a link to the specification or specifications that define the event.
...And 4 more matches
<label> - HTML: Hypertext Markup Language
this means that, for example, a screenreader will read out the label when the user is focused on the
form input, making it easier for an assistive technology user to understand what data should be entered.
... <input type="checkbox" name="peas"> </label> other usage notes: the
form control that the label is labeling is called the labeled control of the label element.
... when a <label> is clicked or tapped and it is associated with a
form control, the resulting click event is also raised for the associated control.
...And 4 more matches
<source>: The Media or Image Source element - HTML: Hypertext Markup Language
it is commonly used to offer the same media content in multiple file
formats in order to provide compatibility with a broad range of browsers given their differing support for image file
formats and media file
formats.
...this in
formation is used by the browser to determine, before laying the page out, which image defined in srcset to use.
... for in
formation about image
formats supported by web browsers and guidance on selecting appropriate
formats to use, see our image file type and
format guide on the web.
...And 4 more matches
HTML: Hypertext Markup Language
we have put together a course that includes all the essential in
formation you need to work towards your goal.
... html
forms
forms are a very important part of the web — these provide much of the functionality you need for interacting with websites, e.g.
...this module gets you started with creating the client-side/front-end parts of
forms.
...And 4 more matches
Evolution of HTTP - HTTP
built over the existing tcp and ip protocols, it consisted of 4 building blocks: a textual
format to represent hypertext documents, the hypertext markup language (html).
... http/1.0 – building extensibility http/0.9 was very limited and both browsers and servers quickly extended it to be more versatile: versioning in
formation is now sent within each request (http/1.0 is appended to the get line) a status code line is also sent at the beginning of the response, allowing the browser itself to understand the success or failure of the request and to adapt its behavior in consequence (like in updating or using its local cache in a specific way) the notion of http headers has been introduced, both for the requests an...
...in november 1996, in order to solve these annoyances, an in
formational document describing the common practices has been published, rfc 1945.
...And 4 more matches
Identifying resources on the Web - HTTP
each resource is identified by a uni
form resource identifier (uri) used throughout http for identifying resources.
... the identity and the location of resources on the web are mostly given by a single url (uni
form resource locator, a kind of uri).
... urls and urns urls the most common
form of uri is the uni
form resource locator (url), which is known as the web address.
...And 4 more matches
Cross-Origin Resource Sharing (CORS) - HTTP
functional overview the cross-origin resource sharing standard works by adding new http headers that let servers describe which origins are permitted to read that in
formation from a web browser.
...servers can also in
form clients whether "credentials" (such as cookies and http authentication) should be sent with requests.
...e”), the only headers which are allowed to be manually set are those which the fetch spec defines as a “cors-safelisted request-header”, which are: accept accept-language content-language content-type (but note the additional requirements below) dpr downlink save-data viewport-width width the only allowed values for the content-type header are: application/x-www-
form-urlencoded multipart/
form-data text/plain no event listeners are registered on any xmlhttprequestupload object used in the request; these are accessed using the xmlhttprequest.upload property.
...And 4 more matches
HTTP caching - HTTP
the per
formance of web sites and applications can be significantly improved by reusing previously fetched resources.
...this achieves several goals: it eases the load of the server that doesn’t need to serve all clients itself, and it improves per
formance by being closer to the client, i.e., it takes less time to transmit the resource back.
... for a web site, it is a major component in achieving high per
formance.
...And 4 more matches
Configuring servers for Ogg media - HTTP
this in
formation may also be useful if you encounter other media types your server isn't already configured to recognize.
... for apache, you can add the following to your configuration: addtype audio/ogg .oga addtype video/ogg .ogv addtype application/ogg .ogg you can find specific in
formation about possible media file types and the codecs used within them in our comprehensive guide to media types and
formats on the web.
... in particular, the article on media container
formats will be especially helpful when configuring serers to host media properly.
...And 4 more matches
Referrer-Policy - HTTP
the referrer-policy http header controls how much referrer in
formation (sent via the referer header) should be included with requests.
...no referrer in
formation is sent along with requests.
... origin-when-cross-origin send the origin, path, and query string when per
forming a same-origin request, but only send the origin of the document for other cases.
...And 4 more matches
Proxy Auto-Configuration (PAC) file - HTTP
the
format of this string is defined in return value
format below.
... return value
format the javascript function returns a single string if the string is null, no proxies should be used the string can contain any number of the following building blocks, separated by a semicolon: direct connections should be made directly, without any proxies proxy host:port the specified proxy should be used socks host:port the specified socks server should be used recent versions of firefox support as well: http host:port the specified proxy should be used https host:port the specified https proxy should be used socks4 host:port socks5 host:port the specified socks server (with the specified sock version) should be used if there are multiple semicolon-separated settings, the left-most setting will be used, until firefox fails to establish the conne...
... pattern an ip address pattern in the dot-separated
format.
...And 4 more matches
Redirections in HTTP - HTTP
url redirection, also known as url forwarding, is a technique to give more than one url address to a page, a
form, or a whole web site/application.
...besides the small per
formance hit of an additional round-trip, users rarely notice the redirection.
... javascript redirections redirections in javascript are per
formed by setting a url string to the window.location property, loading the new page: window.location = "https://example.com/"; like html redirections, this can't work on all resources, and obviously, this will only work on clients that execute javascript.
...And 4 more matches
Control flow and error handling - JavaScript
see expressions and operators for complete in
formation about expressions.
...see the let and const reference pages for more in
formation.
... function checkdata() { if (document.
form1.threechar.value.length == 3) { return true; } else { alert( 'enter exactly three characters.
...And 4 more matches
Date() constructor - JavaScript
creates a javascript date instance that represents a single moment in time in a plat
form-independent
format.
... parameters there are four basic
forms for the date() constructor: no parameters when no parameters are provided, the newly-created date object represents the current date and time as of the time of instantiation.
... timestamp string datestring a string value representing a date, specified in a
format recognized by the date.parse() method.
...And 4 more matches
Progressive web app structure - Progressive web apps (PWAs)
it works great across browsers, but it suffers in terms of time navigating between pages and therefore general perceived per
formance — loading a page requires a new round trip to the server.
... this architecture allows a website to benefit the most from all the pwa features — it caches the app shell and manages the dynamic content in a way that greatly improves the per
formance.
... the website feels like a native app with instant interaction and solid per
formance while keeping all the benefits of the web.
...And 4 more matches
Mobile first - Progressive web apps (PWAs)
then at implementation stage, we present the mobile layout and functionality as the default configuration provided, before additional in
formation is loaded on top of that, whenever appropriate.
... this means that mobiles (often the target devices with the least available memory, bandwidth or processing power available) can be given an experience suitable for them as quickly as possible, and as free as possible of extraneous in
formation.
... for example: if you are serving different styling and layout in
formation for different viewport sizes, etc., it makes more sense to include the narrow screen/mobile styling as the default styling before any media queries are encountered, rather than having desktop/wider screen styling first.
...And 4 more matches
Paths - SVG: Scalable Vector Graphics
later, we will learn how paths can be trans
formed to suit other needs.
... l x y (or) l dx dy there are two abbreviated
forms for drawing horizontal and vertical lines.
... z (or) z so our path above could be shortened to: <path d="m 10 10 h 90 v 90 h 10 z" fill="transparent" stroke="black"/> the relative
forms of these commands can also be used to draw the same picture.
...And 4 more matches
Types of attacks - Web security
the user's browser cannot detect the malicious script is untrustworthy, and so gives it access to any cookies, session tokens, or other sensitive site-specific in
formation, or lets the malicious script rewrite the html content.
...the variety of attacks based on xss is almost limitless, but they commonly include transmitting private data like cookies or other session in
formation to the attacker, redirecting the victim to a webpage controlled by the attacker, or per
forming other malicious operations on the user's machine under the guise of the vulnerable site.
... reflected xss attacks when a user is tricked into clicking a malicious link, submitting a specially crafted
form, or browsing to a malicious site, the injected code travels to the vulnerable website.
...And 4 more matches
Compiling from Rust to WebAssembly - WebAssembly
for the
former case, check out projects like yew.
... let's write some rust let's put this code into src/lib.rs instead: use wasm_bindgen::prelude::*; #[wasm_bindgen] extern { pub fn alert(s: &str); } #[wasm_bindgen] pub fn greet(name: &str) { alert(&
format!("hello, {}!", name)); } this is the contents of our rust project.
... producing rust functions that javascript can call the final part is this one: #[wasm_bindgen] pub fn greet(name: &str) { alert(&
format!("hello, {}!", name)); } once again, we see the #[wasm_bindgen] attribute.
...And 4 more matches
SDK API Lifecycle - Archive of obsolete content
at the same time, developers maintaining and extending the sdk's apis need to be able to introduce new apis that aren't yet fully proven, and to retire old apis when they're no longer optimal or supported by the underlying plat
form.
...you can try it out and provide feedback, but we may change or remove it in future versions without having to pass through a
formal deprecation process.
...if we do have to make backwards-incompatible changes, we will not guarantee the module will go through the
formal deprecation process.
...And 3 more matches
context-menu - Archive of obsolete content
"my menu", contentscript: 'self.on("click", function (node, data) {' + ' console.log("you clicked " + data);' + '});', items: [ cm.item({ label: "item 1", data: "item1" }), cm.item({ label: "item 2", data: "item2" }), cm.item({ label: "item 3", data: "item3" }) ] }); communicating with the add-on often you will need to collect some kind of in
formation in the click listener and per
form an action unrelated to content.
...for instance, if your item per
forms a search with the user's selected text, it would be nice to display the text in the item to provide feedback to the user.
...see working with content scripts for more in
formation.
...And 3 more matches
Deploying a Plugin as an Extension - Archive of obsolete content
this contains in
formation about our extension; all extensions have one.
...com</em:id> <em:name>rhapsody player engine</em:name> <em:version>1.0.0.487</em:version> <em:targetapplication> <description> <em:id>{ec8030f7-c20a-464f-9b0e-13a3a9e97384}</em:id> <em:minversion>1.5</em:minversion> <em:maxversion>1.5.0.*</em:maxversion> </description> </em:targetapplication> </description> </rdf> you can get more detailed in
formation about this file at install.rdf.
...the id specifies a unique id that uniquely identifes this extension of the
form.
...And 3 more matches
Adding Events and Commands - Archive of obsolete content
please read appendix a for recommendations on how to use the load event to initialize your add-on without having a negative per
formance impact on firefox.
... event handlers can take an event argument, which is an event object that holds in
formation on the event.
... you can get in
formation on key modifiers (in case the user was holding a modifier key like alt while per
forming the event), screen coordinates for mouse events, and most importantly, the target element for the event.
...And 3 more matches
Appendix F: Monitoring DOM changes - Archive of obsolete content
unfortunately, adding listeners for any of these events to a document has a highly deleterious effect on per
formance, an effect which is not mitigated in the slightest by later removing those listeners.
...this document lays out some alternatives which do not have such severe per
formance impacts.
...their major advantage is in their per
formance and their ease of use, especially when combined with simple libraries.
...And 3 more matches
Handling Preferences - Archive of obsolete content
preferences are used to store settings and in
formation to change their default behavior.
... to open the preferences window in firefox, select the following from the main menu: on windows, tools > options on mac, firefox > preferences on linux, edit > preferences note: keep in mind the usage of the terms "preferences" and "options" in different plat
forms.
...tip: you can use window.navigator.plat
form in your chrome code to figure out the operating system firefox is running on.
...And 3 more matches
The Box Model - Archive of obsolete content
using the
former allows the ui to scale proportionately depending on font size settings, which are often changed by users with accessibility limitations.
... the label element should be used mainly for text in xul
forms, such as the ones you see in the firefox options / preferences window.
... the description element is used for the rest of the cases, where the text is only meant as additional in
formation and is not related to input elements.
...And 3 more matches
Add-ons - Archive of obsolete content
extension packaging extensions are packaged in a
form of installable bundle which can be downloaded and installed by a user, or provided pre-packaged with an application or by an external program.
...firefox or thunderbird) uses to determine in
formation about an add-on as it is being installed.
... it contains metadata identifying the add-on, providing in
formation about who created it, where more in
formation can be found about it, which versions of what applications it is compatible with, how it should be updated, and so on.
...And 3 more matches
Defining Cross-Browser Tooltips - Archive of obsolete content
the problem according to the html 4.01 definition of the alt attribute: alt = text cs for user agents that cannot display images,
forms, or applets, this attribute specifies alternate text.
...this assumes that the browser can find the image and that it supports the image
format used; if either of these is not true, and the image cannot be displayed, then the alt text should be displayed in place of the missing image.
... on the other hand, the html 4.01 definition of the title attribute states: title = text cs this attribute offers advisory in
formation about the element for which it is set.
...And 3 more matches
Creating a Firefox sidebar extension - Archive of obsolete content
see the references section for in
formation on creating extension in earlier browsers.
...see building an extension for more detailed in
formation about structuring, packaging, and deploying extensions.
...other elements can be included, please read the xul tutorials for more in
formation.
...And 3 more matches
Making a Mozilla installation modifiable - Archive of obsolete content
xul, xbl, javascript, and css files are all in text
format and can be edited in a standard text editor, while image files are in binary gif, jpg, or png
format and must be edited with an image editing program.
... the files are then collected into a series of jar archives, which are just zip files that contain a specially
formatted "manifest" file which describes the contents of the archive so mozilla knows what to do with them.
...although mozilla stores the ui files in jar archives, it can also access them in their original, unarchived
form, which is useful for the extensions developer because it makes it unnecessary to extract the files from the archive before changing the code and then re-add them to the archive afterwards.
...And 3 more matches
Documentation for BiDi Mozilla - Archive of obsolete content
note that we are not affected by buggy bidi implementations on specific plat
forms, since the plat
form never sees a text fragment with mixed directionality, and is not expected to do anything more complicated than displaying left-to-right text from left to right or right-to-left text from right to left.
... in some circumstances, even on a plat
form with bidi capability, the layout code has to reverse text fragments or to allow for the fact that they are displayed in reverse.
... text in visual mode must also be reversed before display on a bidi plat
form.
...And 3 more matches
JavaScript crypto - Archive of obsolete content
this object can be passed to a ca using a web
form.
... overview of the new cert issuing process user fills out enrollment
form user action initiates script script calls key generation method (generatecrmfrequest) signing and encryption keys are generated encryption private key is wrapped with public key of key recovery authority (kra) (passed in in the
form of a certificate as part of the script, and checked against a pre-installed certificate copy in the local certificate database) the public keys, wrapped encryption private key, and text string from the script (possibly containing naming or enrollment info) are signed by the user signed blob is re...
...info to the ca/ra ca/ra verifies signature on signed blob ca/ra validates identity of user ca/ra sends wrapped encryption private key to kra kra sends escrow verification back to ca ca creates and signs certificates ca sends certificates back to the user (importusercertificates) typical use the ca's enrollment page could look something like this: <!doctype html> <h2>request a cert</h2> <
form name="req
form" method="post" action="http://your.ra.site.org"> <p><input type=hidden name=cert_request value=""> <p>name: <input type=text name=name value=""> <p>password: <input type=password name="password" value=""> <p><input type=submit name="send" value="submit"> </
form> <script> /* the following values could be filled in by the server cgi */ var authenticator = "server_magic"; var keytransp...
...And 3 more matches
Menu - Archive of obsolete content
please see the wiki page and online documentation for more in
formation on how to use the add-on sdk.
... due to a plat
form bug in firefox, on os x only, for menus in the menu bar only, command functions defined on menuitems with submenus are not called when descendant menuitems are clicked.
...on some plat
forms this character is underlined in the label.
...And 3 more matches
Message Summary Database - Archive of obsolete content
the mail summary files (.msf) are used to store summary in
formation about messages and threads in a folder, and some meta in
formation about the folder.
... nsimsgdatabase the main access point to the summary in
formation is nsimsgdatabase.
...there are a set of generic property methods so that core code and extensions can set attributes on msg headers without changing nsimsghdr.idl.msg threads we store thread in
formation persistently in the database and expose these object through the [nsimsgthread interface.
...And 3 more matches
Nanojit - Archive of obsolete content
overview nanojit is a small, cross-plat
form c++ library that emits machine code.
...the term lir is compiler jargon for a language used internally in a compiler that is usually cross-plat
form but very close to machine language.
...this chain of lirwriter objects
forms a pipeline for the instructions to pass through.
...And 3 more matches
Space Manager Detailed Design - Archive of obsolete content
the primary goal of the space manager is to provide in
formation about those bands of space to support the css notion of floated elements.
...alend + my); } prbool intersectsdamage(nscoord aintervalbegin, nscoord aintervalend) { return mfloatdamage.intersects(aintervalbegin + my, aintervalend + my); } #ifdef debug /** * dump the state of the spacemanager out to a file */ nsresult list(file* out); void sizeof(nsisizeofhandler* ahandler, pruint32* aresult) const; #endif private: // structure that maintains in
formation about the region associated // with a particular frame struct frameinfo { nsiframe* const mframe; nsrect mrect; // rectangular region frameinfo* mnext; frameinfo(nsiframe* aframe, const nsrect& arect); #ifdef ns_build_refcnt_logging ~frameinfo(); #endif }; // doubly linked list of band rects struct bandrect : prcliststr { nscoord mlef...
...space manager instances come and go pretty frequently, and this recycler prevents excessive heap allocations and the per
formance penalties associated with it.
...And 3 more matches
Elements - Archive of obsolete content
see bug 83830 for more in
formation and for workarounds.
... note: prior to firefox 3, the constructor could be called at a time when reflow of the document layout was locked down, so that attempting to get layout in
formation from within the constructor could return out of date in
formation.
... in firefox 3 and later, the constructor is called when reflow can take place, which results in up-to-date in
formation being returned.
...And 3 more matches
Install Wizards (aka: Stub Installers) - Archive of obsolete content
an installer package is an archive file (called xpi--pronounced "zippies"--because of its .xpi extensions) in phil katz zip
format.
...the same xpinstall engine is used by the browser and the stub installers on all plat
forms.
...install wizard widgets and dialogs the code that reads in the configuration file (config.ini) and dynamically installs from the net or from local xpi modules found next to the installer binary the code that processes user selections the code that calls the xpinstall engine through xpistub the libxpnet code that is statically linked in the stub installers are written in code native to the plat
form using native widget toolkits including the windows api for windows, the mac toolbox for the mac, and gtk for the unix version.
...And 3 more matches
gestalt - Archive of obsolete content
gestalt (macintosh only) retrieves in
formation about the operating environment.
... method of install object syntax int gestalt ( string selector ); parameters the gestalt method takes the following parameters: selector the selector code for the in
formation you want.
... returns returns the requested in
formation.
...And 3 more matches
Reading from Files - Archive of obsolete content
file and stream guide: [ nsiscriptableio | accessing files | getting file in
formation | reading from files | writing to files | moving, copying and deleting files | uploading and downloading files | working with directories ] important note: the pages from the file and stream guide use the io object (nsiscriptableio), which was not available in any released version of the plat
form (pending some fixes).
...while there is only one method to create an input stream, it provides a number of options to control exactly how reading is per
formed.
...using the
former will cause characters in the stream to be interpreted with a particular character encoding.
...And 3 more matches
Popup Guide - Archive of obsolete content
working with popups the following additional in
formation is available about manipulating menus and popups.
...for detailed in
formation about how to open a popup see opening a popup or opening a menu.
... closing a menu or popup for in
formation about closing a popup, see closing a popup or closing a menu.
...And 3 more matches
Textbox (XPFE autocomplete) - Archive of obsolete content
form-history requires seamonkey 2.0 search the values that the user has entered into
form fields.
...in the case of
form elements, it will not be submitted.
... the disabled attribute is allowed only for
form controls.
...And 3 more matches
Creating toolbar buttons (Customize Toolbar Window) - Archive of obsolete content
onclick="check
formiddleclick(this, event)" you can also handle middle-click and right-click using onclick handler and check event.button in it like this: <toolbarpalette id="browsertoolbarpalette"> <toolbarbutton id="myextension-button" class="toolbarbutton-1" label="&toolbarbutton.label;" tooltiptext="&toolbarbutton.tooltip;" onclick="myextension.onclick(event);"/> </toolbarpalette> onclick: functi...
...the dimensions of the icons in various applications for both modes are summarized in the following table (feel free to add in
formation about other applications): application (theme name) big icon size small icon size firefox 1.0 (winstripe) 24x24 16x16 thunderbird 1.0 (qute) 24x24 16x16 the stylesheet to set the image for your toolbar button, use the following css rules: /* skin/toolbar-button.css */ #myextension-button { list-style-image: url("chrome://myextension/...
... caused by: mal
formed or not applied stylesheet.
...And 3 more matches
Creating a Wizard - Archive of obsolete content
the wizards are often used to help the user per
form a complex task.
...the exact layout will vary according to the os for the plat
form.
...the wizard will be
formatted automatically, with a title across the top and a set of buttons along the bottom.
...And 3 more matches
More Event Handlers - Archive of obsolete content
in the attribute
form of the event handler, the event object is an implied argument to the script code which can be referred to using the name 'event'.
... in the addeventlistener
form, the first argument passed to the listener function will be the event object.
...the event may be called many times as the user moves the mouse so you should avoid per
forming lengthy tasks from this handler.
...And 3 more matches
datepicker - Archive of obsolete content
in xul, the value attribute may be set to a value of the
form yyyy-mm-dd to initialize the datepicker to a certain date.
... to change the selected date, the value property may be used to set a new value in the
form yyyy-mm-dd.
...in the case of
form elements, it will not be submitted.
...And 3 more matches
dialog - Archive of obsolete content
these buttons will be placed in the correct locations for the user's plat
form.
... more in
formation is available in the xul tutorial and dialogs and prompts (code snippets).
...the buttons will be placed in suitable locations for the user's plat
form and basic event handling will be per
formed automatically.
...And 3 more matches
timepicker - Archive of obsolete content
to specify the initial, use the value attribute set to a value of either the
form hh:mm:ss or hh:mm.
...the
former specifies the time as a string of the
form hh:mm:ss whereas the latter specifies the time as a date object.
...in the case of
form elements, it will not be submitted.
...And 3 more matches
window - Archive of obsolete content
by default, the window will have a plat
form-specific frame around it.
... to set an icon for the window, create a plat
form-specific icon file <windowid>.ico and/or <windowid>.xpm and place or install these files into the <mozilla-directory>/chrome/icons/default/ directory.
... more in
formation is available in the xul tutorial.
...And 3 more matches
Application Update - Archive of obsolete content
application settings you will need to configure the following settings in your application: branding the update process uses branding in
formation, setup branding for your application as described here: xulrunner tips icons the updater process for linux systems requires updater.png to be in your <application folder>/icons/, see https://bugzilla.mozilla.org/show_bug.cgi?id=706846 preferences // whether or not app updates are enabled pref("app.update.enabled", true); // this preference turns on app.update.mode and allows automatic d...
...pref("app.update.url.manual", "http://yourserver.net/yourpage"); // a default value for the "more in
formation about this update" link // supplied in the "an update is available" page of the update wizard.
...("app.update.nagtimer.download", 86400); // interval: time before prompting the user to restart to install the latest // download (in seconds) default=30 minutes pref("app.update.nagtimer.restart", 1800); // interval: when all registered timers should be checked (in milliseconds) // default=5 seconds pref("app.update.timer", 600000); // whether or not we show a dialog box in
forming the user that the update was // successfully applied.
...And 3 more matches
External resources for plugin creation - Archive of obsolete content
framework: firebreath project home page project history description (from the project creators): firebreath is a cross-plat
form browser plugin framework written in c++.
... plat
forms supported include windows, linux, and mac os x (intel).
... all plat
forms rely on cmake for easy cross-plat
form builds.
...And 3 more matches
NPP_Destroy - Archive of obsolete content
**save state or other in
formation to save for reuse by a new instance of this plug-in at the same url.
...you should delete any private instance-specific in
formation stored in the plug-in's instance->pdata at this time.
... use the optional save parameter if you want to save and reuse some state or other in
formation.
...And 3 more matches
XUL Parser in Python - Archive of obsolete content
it only runs as a hard-coded script right now, so if you want to use it you have to go in and changes some of the stuff like chrome_dir and which in
formation you want out.
... it also, i'm afraid, only works on the win32 plat
form, where the <tt>dir</tt> command it depends on gets you your xul files.
...but mozilla's upcoming support for languages like perl and python will really open up the mozilla plat
form to tools and approaches of this kind--and make now a good time to start thinking about how these various technologies will be put together.
...And 3 more matches
Desktop mouse and keyboard controls - Game development
that way we can broaden the list of supported plat
forms.
...to do that we'll hold the in
formation on whether the keys we are interested in are pressed or not: var rightpressed = false; var leftpressed = false; var uppressed = false; var downpressed = false; then we will listen for the keydown and keyup events and act accordingly in both handler functions.
...if the left arrow is pressed (⬅︎; key code 37), we can set the leftpressed variable to true and in the draw function per
form the action assigned to it — move the ship left: function draw() { ctx.clearrect(0, 0, canvas.width, canvas.height); if(rightpressed) { playerx += 5; } else if(leftpressed) { playerx -= 5; } if(downpressed) { playery += 5; } else if(uppressed) { playery -= 5; } ctx.drawimage(img, playerx, playery); requestanimationframe...
...And 3 more matches
Mobile touch controls - Game development
note: the touch events reference article provides more examples and in
formation.
...phaser starts two pointers by default, so two fingers can per
form an action at once.
...the pointer variable will contain the in
formation about the pointer that activated the event.
...And 3 more matches
Debugging CSS - Learn web development
how to access browser devtools the article what are browser developer tools is an up-to-date guide explaining how to access the tools in various browsers and plat
forms.
...devtools can help you find such issues, especially if the in
formation is buried somewhere in a huge stylesheet.
... find out more about the firefox devtools there is a lot of in
formation about the firefox devtools here on mdn.
...And 3 more matches
Responsive design - Learn web development
as mobile devices became more powerful and able to display full websites, this was frustrating to mobile users who found themselves trapped in the site's mobile version and unable to access in
formation they knew was on the full-featured desktop version of the site.
... zoe mickley gillenwater was instrumental in her work to describe and
formalize the different ways in which flexible sites could be created, attempting to find a happy medium between filling the screen or being completely fixed in size.
...modern css layout methods are inherently responsive, and we have new things built into the web plat
form to make designing responsive sites easier.
...And 3 more matches
Supporting older browsers - Learn web development
we are trying to make this easy for you at mdn, by providing browser compatibility in
formation on each page detailing a css property.
...this site lists the majority of web plat
form features with in
formation about their browser support status.
... creating fallbacks in css css specifications contain in
formation that explains what the browser does when two layout methods are applied to the same item.
...And 3 more matches
Test your skills: Advanced styling - Learn web development
this aim of this skill test is to assess whether you've understood our advanced
form styling and ui pseudo-classes articles.
... advanced
form styling 1 in our first advanced styling tasks, we want you to handle making a search input as consistent as possible across browsers — a trickier task than with standard text inputs, even on modern browsers.
... you'll find that some browsers will not behave in terms of the
form element's height.
...And 3 more matches
Marking up a letter - Learn web development
previous overview: introduction to html next we all learn to write a letter sooner or later; it is also a useful example to test our text
formatting skills.
... in this assignment, you'll have a letter to mark up as a test for your html text
formatting skills, as well as hyperlinks and proper use of the html <head> element.
...metadata in html, html text fundamentals, creating hyperlinks, and advanced text
formatting.
...And 3 more matches
Adding vector graphics to the Web - Learn web development
on the web, you'll work with two types of image — raster images, and vector images: raster images are defined using a grid of pixels — a raster image file contains in
formation showing exactly where each pixel is to be placed, and exactly what color it should be.
... popular web raster
formats include bitmap (.bmp), png (.png), jpeg (.jpg), and gif (.gif.) vector images are defined using algorithms — a vector image file contains shape and path definitions that the computer can use to work out what the image should look like when rendered on the screen.
... the svg
format allows us to create powerful vector graphics for use on the web.
...And 3 more matches
From object to iframe — other embedding technologies - Learn web development
browser makers and web developers have learned the hard way that iframes are a common target (official term: attack vector) for bad people on the web (often termed hackers, or more accurately, crackers) to attack if they are trying to maliciously modify your webpage, or trick people into doing something they don't want to do, such as reveal sensitive in
formation like usernames and passwords.
... unsandboxed content can do way too much (executing javascript, submitting
forms, popup windows, etc.) by default, you should impose all available restrictions by using the sandbox attribute with no parameters, as shown in our previous example.
... note: you can read frederik braun's post on the x-frame-options security header for more background in
formation on this topic.
...And 3 more matches
Responsive images - Learn web development
this helps to improve per
formance across different devices.
...raster image
formats such as jpegs are more suited to the kind of images we see in the above example.
...you can see an example of this in our responsive.html example on github (see also the source code): <img srcset="elva-fairy-480w.jpg 480w, elva-fairy-800w.jpg 800w" sizes="(max-width: 600px) 480px, 800px" src="elva-fairy-800w.jpg" alt="elva dressed as a fairy"> the srcset and sizes attributes look complicated, but they're not too hard to understand if you
format them as shown above, with a different part of the attribute value on each line.
...And 3 more matches
Drawing graphics - Learn web development
as you'll see below, canvas provides many useful tools for creating 2d animations, games, data visualizations, and other types of app, especially when combined with some of the other apis the web plat
form provides.
...this raises an important point: graphics operations like drawing rectangles, lines, and so forth are per
formed in the order in which they occur.
... one of the basic trigonometric
formulae states that the length of the adjacent multiplied by the tangent of the angle is equal to the opposite, hence we come up with 50 * math.tan(degtorad(60)).
...And 3 more matches
Arrays - Learn web development
converting between strings and arrays often you'll be presented with some raw data contained in a big long string, and you might want to separate the useful items out into a more useful
form and then do things to them, like display them in a data table.
...in its simplest
form, this takes a single parameter, the character you want to separate the string at, and returns the substrings between the separator as items in an array.
... we want you to change the line just below // number 5 so that the itemtext variable is made equal to "current item name — $current item price", for example "shoes — $23.99" in each case, so the correct in
formation for each item is printed on the invoice.
...And 3 more matches
Handling text — strings in JavaScript - Learn web development
since the web is a largely text-based medium designed to allow humans to communicate and share in
formation, it is useful for us to have control over the words that appear on it.
...for example, if a user enters a number into a
form's text field, it's a string.
... you've reached the end of this article, but can you remember the most important in
formation?
...And 3 more matches
Inheritance in JavaScript - Learn web development
an updated greeting() method, which sounds a bit more
formal than the standard greeting() method — more suitable for a teacher addressing some students at school.
... a further exercise in our oop theory section, we also included a student class as a concept, which inherits all the features of person, and also has a different greeting() method from person that is much more in
formal than the teacher's greeting.
... ultimately, objects are just another
form of code reuse, like functions or loops, with their own specific roles and advantages.
...And 3 more matches
Object-oriented JavaScript for beginners - Learn web development
objects can contain related data and code, which represent in
formation about the thing you are trying to model, and functionality or behavior that you want it to have.
... defining an object template let's consider a simple program that displays in
formation about the students and teachers at a school.
...for example, a student's greeting might be of the
form "yo, i'm [firstname]" (e.g yo, i'm sam), whereas a teacher might use something more
formal, such as "hello, my name is [prefix] [lastname], and i teach [subject]." (e.g hello, my name is mr griffiths, and i teach chemistry).
...And 3 more matches
Getting started with React - Learn web development
see package management basics for more in
formation on npm and yarn.
...see command line crash course for more in
formation on these, and on terminal commands in general.
... also, see the following for more in
formation: "what is npm" on nodejs.org "introducing npx" on the npm blog the create-react-app documentation initializing your app create-react-app takes one argument: the name you'd like to give your app.
...And 3 more matches
Vue resources - Learn web development
objective: to learn where to go to find further in
formation on vue, to continue your learning.
...this contains in
formation on customizing and extending the output you are generating via the cli.
... vue mastery — a paid education plat
form that specializes in vue, including some free lessons.
...And 3 more matches
Understanding client-side JavaScript frameworks - Learn web development
we want you to go forward and learn about frameworks in a pragmatic way that doesn't forget about web plat
form fundamental best practices such as accessibility.
... your code will be richer and more professional as a result, and you'll be able to troubleshoot problems with more confidence if you understand the fundamental web plat
form features that the frameworks are building on top of.
... we have put together a course that includes all the essential in
formation you need to work towards your goal.
...And 3 more matches
Accessible Toolkit Checklist
the work when implementing a new toolkit it's important to: implement standard keyboard behavior, which can vary from plat
form to plat
form.
...implement true usability for everyone, and make your toolkit follow the guidelines for each plat
form.
...these toolkits wrap the widgets implemented by the os with a consistent api for each plat
form.
...And 3 more matches
Accessibility and Mozilla
in fact, the same keyboard commands are still available, so users can become comfortable and productive right away.accessibility in
formation for core gecko developersboth end users and developers are invited for discussion on the live irc channel at irc.mozilla.org/#accessibility.
... since this is a worldwide effort, there is always a good chance to find someone to chat with there, day or night.accessibility in
formation for ui designers and developerswhen you design user interfaces with accessibility in mind, they will work for more people.
... gecko info for windows accessibility vendorsplease contact the mozilla accessibility community.in
formation for assistive technology vendorsboth end users and developers are invited for discussion on the live irc channel at irc.mozilla.org/#accessibility.
...And 3 more matches
Command line options
firefox -no-remote -p "another profile" note: since firefox 9, this does really mean what its name implies on all plat
forms, i.e.
...short
form: -p without a profile name.
...other plat
forms accept both upper and lower case.
...And 3 more matches
Debugging on Windows
for more in
formation, see attach to running processes with the visual studio debugger.
...you can change this behaviour, and make visual c++ display whatever data member you want in whatever order,
formatter however you like instead of just "{...}".
...by default it will be: vc++ 6.0: c:\program files\microsoft visual studio\common\msdev98\bin\autoexp.dat vc++ 7.0: c:\program files\microsoft visual studio .net 2003\common7\packages\debugger\autoexp.dat the file has in
formation about the
format in the beginning, and after a little practice you should be well on your way.
...And 3 more matches
Contributing to the Mozilla code base
you might receive some extra in
formation, perhaps also made the assignee.
... when you commit your code, please use the following
format for your commit message: `bug number - what your patch does; r?reviewer` for example, a commit message may look like `bug 1234567 - remove reflow by caching element size.
...if you don't hear back within this time, naturally reach out to them: add a comment to the bug saying 'review ping?', check the "need more in
formation from" box, and add the reviewer's name.
...And 3 more matches
Firefox
firefox is mozilla's popular web browser, available for multiple plat
forms including windows, macos, and linux on the desktop and all android and ios mobile devices.
...here you can learn about how to contribute to the firefox project and you will also find links to in
formation about the construction of firefox add-ons, using the developer tools in firefox, and other topics.
... project documentation get detailed in
formation about the internals of firefox and its build system, so you can find your way around in the code.
...And 3 more matches
Using the Browser API
aside from the iframe, there are some basic controls: <button> elements, a simple <
form> to implement the browser controls, and a search bar.
... the search bar also contains buttons, as well as a
form to type search requests into.
...or example: function canmovebwd() { browser.getcangoback().then(function(result) { if (result) { back.disabled = false; console.log("it's possible to navigate the history backward."); } else { back.disabled = true; console.log("it's not possible to navigate the history backward."); } }); } implementing the url bar the url bar for our simple browser is a <
form> containing a single text <input>.
...And 3 more matches
How to get a stacktrace with WinDbg
after the crash or hang you need to capture the debug in
formation to include in a bug comment or support request.
...to provide the in
formation to the development community, submit this file with a support request or attach it to a related bug on bugzilla.
... producing a minidump sometimes the stacktrace alone is not enough in
formation for a developer to figure out what went wrong.
...And 3 more matches
Internationalized Domain Names (IDN) Support in Mozilla Browsers
if end users input non-ascii characters as part of a domain name or if a web page contains a link using a non-ascii domain name, the application must convert such input into a special encoded
format using only the usual ascii subset characters.
...it also defines how an application should process non-ascii characters in such a way to con
form to existing host name character restrictions.
... how mozilla browsers handle non-ascii domain names unicode and nameprep when mozilla receives idn input from the user via the location bar or a request to process non-ascii host name links, it first turns them into unicode, then normalizes the input string to make it con
form to general uri requirement.
...And 3 more matches
ISO8601DateUtils.jsm
the iso8601dateutils.jsm javascript code module provides methods that make it easy to convert javascript date objects into iso 8601
format date strings and back.
...using the iso 8601 date utilities to convert a date string into a date object, simply use: dateobj = iso8601dateutils.parse(datestring); to convert a date object into a date string: datestring = iso8601dateutils.create(dateobj); method overview string create(adate); date parse(adatestring); methods create creates an iso 8601
format date string, e.g.
...string create( adate ); parameters adate a javascript date object to translate into an iso 8601
format string.
...And 3 more matches
OS.File.Info
due to differences between operating systems, the in
formation available depends on the plat
form.
...n) { if (reason instanceof os.file.error && reason.becausenosuchfile) { // |somepath| does not represent anything } else { // some other error } } ) example: determining the owner of a file let promise = os.file.stat() promise.then( function onsuccess(info) { if ("unixowner" in info) { // info.unixowner holds the owner of the file } else { // in
formation is not available on this plat
form } } ); evolution of this example bug 802534 will introduce the ability to check whether field unixowner appears in os.file.info.prototype, which will make it possible to write faster code.
... global object os.file.info methods object tomsg(in os.file.info value) os.file.tomsg convert an instance of os.file.info to a
form that can be serialized and transmitted between threads or processes.
...And 3 more matches
PerfMeasurement.jsm
the perfmeasurement.jsm javascript code module lets you take detailed per
formance measurements of your code.
...before you can use this module, you need to import it into your scope: components.utils.import("resource://gre/modules/perfmeasurement.jsm") see measuring per
formance using the perfmeasurement.jsm code module for details on how to use this api.
... variable type description eventsmeasured eventmask a bit mask of the event types recorded; this can differ from the events requested if the plat
form doesn't support all of the event types you specified when creating the perfmeasurement object.
...And 3 more matches
Application Translation with Mercurial
so let's go to c:\mozilla by typing cd /c/mozilla/ create a new directory for the source code: mkdir mozilla-aurora initialize the new directory as new repository: hg init mozilla-aurora go into the new directory: cd mozilla-aurora unpack the source code: hg unbundle /path/to/the/downloaded/mozilla-aurora.hg this can take some time, mostly depending on the per
formance of the hard drive.
...the page which opens has a bar holding in
formation about how many texts (strings) have already been translated, how many there are in english and your locale and have the same text, and how many are missing in your local.
... below the license header which should never changed, the texts are organized in the following
format: <!entity stringid "text which will be shown in firefox"> as you can see there is a bigger block of text not recognized.
...And 3 more matches
Fonts for Mozilla 2.0's MathML engine
on most linux distributions and similar open source plat
forms, you can install math fonts (stix, asana or mathjax fonts) from your package manager or get them from this zip archive.
... on android, firefox os and other plat
forms where the instructions above do not work: install the mathml-fonts add-on.
... overview mathematical
formulas make use of various symbols represented by specific unicode characters.
...And 3 more matches
TimerFirings logging
r -991946880[7f46c365ba00]: [6775] fn timer (one_shot 250 ms): presshell::spaintsuppressioncallback -991946880[7f46c365ba00]: [6775] fn timer (one_shot 160 ms): nsbrowserstatusfilter::timeouthandler -991946880[7f46c365ba00]: [6775] iface timer (one_shot 200 ms): 7f46964d7f80 -1340643584[7f46c365ec00]: [6775] obs timer (slack 1000 ms): 7f46a95a0200 each line has the following in
formation.
... finally there is the identifying in
formation for the timer.
... function timers have an in
formative label.
...And 3 more matches
NSPR Contributor Guide
abstract: nspr accepts contributions in the
form of bugfixes, new features, libraries, plat
form ports, documentation, test cases and other items from many sources.
...your new feature must be implemented on all plat
forms supported by nspr.
... when you consider a new api for nspr ask yourself if your proposed feature can implement it across all plat
forms supported by nspr.
...And 3 more matches
4.3.1 Release Notes
ssl3 & tls renegotiation vulnerability see cve-2009-3555 and us-cert vu#120541 for more in
formation about this security vulnerability.
...this will cause programs that attempt to per
form renegotiation to experience failures where they
formerly experienced successes, and is necessary for them to not be vulnerable, until such time as a new safe renegotiation scheme is standardized by the ietf.
...sslsocket.ssl_renegotiate_requires_xtn - not yet implemented explicitly set the key usage for the generated private key in pkcs #11, each keypair can be marked with the operations it will be used to per
form.
...And 3 more matches
Using JSS
the exact library names vary according to the convention for each plat
form.
...the following table gives the core names of the libraries, omitting the plat
form-specific prefix and suffix.
...not present on all plat
forms.
...And 3 more matches
NSS 3.14 release notes
for more in
formation about mpl 2.0, please see http://www.mozilla.org/mpl/2.0/faq.html.
...applications may use this callback to in
form libpkix whether or not candidate certificate chains meet application-specific security policies, allowing libpkix to continue discovering certificate paths until it can find a chain that satisfies the policies.
....h) new for pkcs #11 pkcs #11 mechanisms: ckm_aes_cts ckm_aes_ctr ckm_aes_gcm (see warnings against using c_encryptupdate/c_decryptupdate above) ckm_sha224_key_derivation ckm_sha256_key_derivation ckm_sha384_key_derivation ckm_sha512_key_derivation changes in nss 3.14 bug 333601 - per
formance enhancements for intel macs when building for intel macs, nss will now take advantage of optimized assembly code for common operations.
...And 3 more matches
NSS 3.21 release notes
2016-01-07, this page has been updated to include additional in
formation about the release.
... distribution in
formation the hg tag is nss_3_21_rtm.
... in ssl.h ssl_getpreliminarychannelinfo - obtains in
formation about a tls channel prior to the handshake being completed, for use with the callbacks that are invoked during the handshake ssl_signatureprefset - configures the enabled signature and hash algorithms for tls ssl_signatureprefget - retrieves the currently configured signature and hash algorithms ssl_signaturemaxcount - obtains the maximum number signature algorithms that can be conf...
...And 3 more matches
nss tech note2
to enable this mode, set: nspr_log_modules=nss_mod_log:1 nspr_log_file=<logfile> the output
format is: osthreadid[nsprthreadid]: c_xxx osthreadid[nsprthreadid]: rv = 0xyyyyyyyy for example, 1024[805ef10]: c_initialize 1024[805ef10]: rv = 0x0 1024[805ef10]: c_getinfo 1024[805ef10]: rv = 0x0 1024[805ef10]: c_getslotlist 1024[805ef10]: rv = 0x0 2.
...to enable this mode, set: nspr_log_modules=nss_mod_log:3 nspr_log_file=<logfile> the output
format is: osthreadid[nsprthreadid]: c_xxx osthreadid[nsprthreadid]: arg1 = 0xaaaaaaaa ...
...display verbose in
formation, including template values, array values, etc.
...And 3 more matches
Notes on TLS - SSL 3.0 Intolerant Servers
technical in
formation the ssl 3.0 and tls (aka ssl 3.1) specs both contain a provision -- the same provision -- for detecting "version rollback attacks".
... for up-to-date in
formation, you can read a bugzilla bug report which keeps track of this problem with mozilla-based browsers.
...for up-to-date in
formation, you can read this bug 59321 which keeps a list of tls/ssl 3.0 intolerant servers.
...And 3 more matches
FC_GetTokenInfo
name fc_gettokeninfo - obtain in
formation about a particular token in the system.
... syntax ck_rv fc_gettokeninfo(ck_slot_id slotid, ck_token_info_ptr pinfo); parameters fc_gettokeninfo has two parameters: slotid the id of the token's slot pinfo points to a ck_token_info structure description fc_gettokeninfo returns in
formation about the token in the specified slot.
... on return, the ck_token_info structure that pinfo points to has the following in
formation: label: the label of the token, assigned during token initialization, padded with spaces to 32 bytes and not null-terminated.
...And 3 more matches
gtstd.html
this page is part of the ssl reference that we are migrating into the
format described in the mdn style guide.
... a pkcs #11 module always has one or more slots, which may be implemented as physical hardware slots in some
form of physical reader (for example, for smart cards) or as conceptual slots in software.
... netscape provides three built-in modules with nss and with server and client products: the default netscape internal pkcs #11 module comes with two built-in tokens: the generic crypto services token per
forms all cryptographic operations, such as encryption, decryption, and hashing.
...And 3 more matches
TLS Cipher Suite Discovery
libssl provides enough in
formation about each of the supported cipher suites that the application can construct a display of that in
formation from which the user can choose which cipher suites his application will attempt to use.
... here are the details of how an nss-based application learns what cipher suites are supported and obtains the in
formation to display to the user.
...*/ ssl_import const pruint16 ssl_numimplementedciphers; of course, the raw integer numbers of the cipher suites are not likely to be known to most users, so libssl provides a function by which the application can obtain a wealth of in
formation about any supported cipher suite, by its number.
...And 3 more matches
Rhino optimization
the compilation time is minimized at the expense of runtime per
formance.
...another benefit of the interpreted mode is that the interpreter per
forms tail-call elimination of recursive functions.
... 0 no optimizations are per
formed.
...And 3 more matches
Scripting Java
if we just view the method object by itself we can see the various overloaded
forms of the method: js> f.listfiles function listfiles() {/* java.io.file[] listfiles() java.io.file[] listfiles(java.io.filenamefilter) java.io.file[] listfiles(java.io.filefilter) */} this output shows that the file class defines three overloaded methods listfiles: one that takes no arguments, another with a filenamefilter argument, and a third with a filefilter argument.
...in java, overload resolution is per
formed at compile time, while in rhino it occurs at runtime.
... although this has the benefit of selecting a method that may be a better match for each call, it does have an impact on per
formance since more work is done at each call.
...And 3 more matches
Rebranding SpiderMonkey (1.8.5)
we need to per
form a recursive find and replace text operation on all files in the current directory.
... in the unix world we would issue the following command: find ./ -type f -exec sed -i "s/mozjs185/$brand/" {} \; windows users: notepad++ can be used to per
form the recursive find and replace text operation.
...the above command has actually changed some in
formation we need changed back so we will re-issue the recursive find and replace text in files command with some modifications.
...And 3 more matches
SpiderMonkey 1.8.5
—22 march 2011 plat
form support spidermonkey 1.8.5 is supported on all the plat
forms where firefox 4 runs.
...on other plat
forms, the jit is simply disabled; javascript code runs in an interpreter, as in previous versions.
...the new garbage collector can per
form per-container garbage collection, which can be a significant per
formance improvement for certain workloads.
...And 3 more matches
Thread Sanitizer
more in
formation on how tsan works can be found on the thread sanitizer wiki.
...furthermore, additional debug in
formation is included in traces when llvm-symbolizer is used.
... ignoring known races in some cases, races can be confirmed to be benign and fixing them would cause possible per
formance issues.
...And 3 more matches
The Places database
it contains the date, referrer, and other in
formation specific to that visit.
... see history service design for more in
formation.
... see manipulating bookmarks using places for more in
formation.
...And 3 more matches
How to build an XPCOM component in JavaScript
if you are looking for add-on sdk solution for xpcom javascript components then check out plat
form/xpcom module first.
...see generating guids for more in
formation.
... compiling the typelib your interface definition must be compiled into a binary
format (xpt) in order to be registered and used within mozilla applications.
...And 3 more matches
Component Internals
a set of default libraries stored in this components directory makes up a typical gecko installation, providing functionality that consists of networking, layout, composition, a cross-plat
form user interface, and others.
... xpcom registry manifests xpcom uses special files called manifests to track and persist in
formation about the components to the local system.
...it specifies the following in
formation: location on disk of registered components with file size class id to location mapping contract id to class id mapping the component manifest maps component files to unique identifiers for the specific implementations (class ids), which in turn are mapped to more general component identifiers (contract ids).
...And 3 more matches
Setting up the Gecko SDK
« previousnext » this chapter provides basic setup in
formation for the gecko software development kit (sdk) used to build the weblock component in this tutorial.
...the sdk is available for windows, linux, and mac operating systems, and versions for other operating systems are being developed, and can be retrieved from as a single archive from the following plat
form-specific locations (need correction for last version (now 1.9.2.8).
... application name description of functionality regxpcom.exe registers or unregisters components with xpcom xpidl.exe generates typelib and c++ headers from xpidl xpt_dump.exe prints out in
formation about a given typelib xpt_link.exe combines multiple typelibs into a single typelib library name description of functionality xpcomglue.lib xpcom glue library to be used by xpcom components.
...And 3 more matches
Using XPCOM Utilities to Make Things Easier
the four required parts[other-parts] of the structure contain the following in
formation: a human readable class name the class id (cid) the contract id (an optional but recommended argument) a constructor for the given object static const nsmodulecomponentinfo components[] = { { "pretty class name", cid, contract_id, constructor }, // ...
...many cids take the following
form: #define ns_ioservice_cid \ { /* 9ac9e770-18bc-11d3-9337-00104ba0fd40 */ \ 0x9ac9e770, \ 0x18bc, \ 0x11d3, \ {0x93, 0x37, 0x00, 0x10, 0x4b, 0xa0, 0xfd, 0x40} \ } the next entry is the contract id string, which is also usually...
...the
former handles double byte characters, and the latter tends to be used in more general circumstances, but both of these classes define the functionality of a string.
...And 3 more matches
IAccessibleAction
unknown last changed in gecko 1.9 (firefox 3) every accessible object that can be manipulated via the native gui beyond the methods available either in the msaa iaccessible interface or in the set of iaccessible2 interfaces (other than this iaccessibleaction interface) should support the iaccessibleaction interface in order to provide assistive technology access to all the actions that can be per
formed by the object.
... each action can be per
formed or queried for a name, description or associated key bindings.
...by providing actions directly, the at can present them to the user without the user having to per
form the extra steps to navigate a context menu.
...And 3 more matches
nsIApplicationUpdateService
toolkit/mozapps/update/nsiupdateservice.idlscriptable this interface describes a global application service that handles per
forming background update checks.
...application updates might be disabled by the application and the plat
form the application is running on.
... methods adddownloadlistener() adds a listener that receives progress and state in
formation about the update that is currently being downloaded.
...And 3 more matches
nsICommandLine
in normalized
form, these are preceded by a single dash.
... preventdefault boolean there may be a command-line handler which per
forms a default action if there was no explicit action on the command line (open a default browser window, for example).
...on windows, flags of the
form /flag are normalized to -flag.
...And 3 more matches
nsICompositionStringSynthesizer
indowutils = window.windowutils; var compositionstringsynthesizer = domwindowutils.createcompositionstringsynthesizer(); for example, when you create a composition whose composing string is "foo-bar-buzz" and "bar" is selected to convert, then, first, you need to start composition: domwindowutils.sendcompositionevent("compositionstart", "", ""); next, dispatch composition string with crause in
formation and caret in
formation (optional): // set new composition string with .setstring().
... compositionstringsynthesizer.setstring("foo-bar-buzz"); // set clause in
formation with .appendclause().
...the composing string in
formation is cleared by a call of .dispatchevent().
...And 3 more matches
nsICookie
constants constant value description status_unknown 0 the cookie collected in a previous session, and its in
formation no longer exists.
... policy_unknown 0 the cookie collected in a previous session, and its in
formation no longer available.
... policy_no_consent 2 the site collects identifiable in
formation without user involvement.
...And 3 more matches
nsIIOService
these are provided as a convenience to the programmer and in some cases to improve per
formance by eliminating intermediate data structures and interfaces.
... exceptions thrown ns_error_mal
formed_uri if url string is not of the right
form.
...if possible, pass in the element which is per
forming the load.
...And 3 more matches
nsILocalFile
persistentdescriptor acstring on some plat
forms, the value of nsifile.path may be insufficient to uniquely identify the file on the local file system.
... getrelativedescriptor() returns a relative file path in an opaque, cross plat
form format.
... void initwithnativepath( in acstring filepath ); parameters filepath a string that specifies a plat
form-specific, full path to a file or directory.
...And 3 more matches
nsIMemoryReporterManager
inherits from: nsisupports last changed in gecko 1.9 (firefox 3) implemented by @mozilla.org/memory-reporter-manager;1 as a service: var reportermanager = components.classes["@mozilla.org/memory-reporter-manager;1"] .getservice(components.interfaces.nsimemoryreportermanager); each memory reporter object, which implements nsimemoryreporter interface, provides in
formation for a given code area.
... this reporter is special-cased because it is interesting, is available on all plat
forms, and returns a meaningful result on all common plat
forms.
...void registermultireporter( in nsimemorymultireporter reporter ); parameters reporter an object implementing the nsimemorymultireporter interface which provides memory usage in
formation for a given code area.
...And 3 more matches
nsIMessenger
undo() per
forms the next undo transaction.
... void undo(in nsimsgwindow msgwindow); parameters msgwindow the nsimsgwindow to per
form the undo transaction on.
... redo() per
forms the next redo transaction.
...And 3 more matches
nsIMsgDBView
docommand() per
form a command on the currently loaded messages.
... void docommand(in nsmsgviewcommandtypevalue command); parameters command the nsmsgviewcommandtypevalue to per
form.
... docommandwithfolder() per
form a command that requires a folder.
...And 3 more matches
nsIMsgFolder
flag(in unsigned long flag); void onflagchange(in unsigned long flag); void setprefflag(); nsimsgfolder getfolderswithflag(in unsigned long flags, in unsigned long resultsize, out unsigned long numfolders); nsisupportsarray getallfolderswithflag(in unsigned long aflag); void getexpansionarray(in nsisupportsarray expansionarray); acstring geturi
formsg(in nsimsgdbhdr msghdr); void deletemessages(in nsisupportsarray messages,in nsimsgwindow msgwindow, in boolean deletestorage, in boolean ismove, in nsimsgcopyservicelistener listener, in boolean allowundo); void copymessages(in nsimsgfolder srcfolder, in nsisupportsarray messages,in boolean ismove, in nsimsgwindow msgwindow,in nsimsgcopyservicelistener listener, in boolean isf...
...key); void addmessagedispositionstate(in nsimsgdbhdr amessage,in nsmsgdispositionstate adispositionflag); void markmessagesread(in nsisupportsarray messages, in boolean markread); void markallmessagesread(); void markmessagesflagged(in nsisupportsarray messages, in boolean markflagged); void markthreadread(in nsimsgthread thread); void setlabel
formessages(in nsisupportsarray messages, in nsmsglabelvalue label); nsimsgdatabase getmsgdatabase(in nsimsgwindow msgwindow); void setmsgdatabase(in nsimsgdatabase msgdatabase); nsimsgdatabase getdbfolderinfoanddb(out nsidbfolderinfo folderinfo); nsimsgdbhdr getmessageheader(in nsmsgkey msgkey); boolean shouldstoremsgoffline(in nsmsgkey msgkey); b...
...nt); void listdescendents(in nsisupportsarray descendents); void shutdown(in boolean shutdownchildren); void setinvfeditsearchscope(in boolean asearchthisfolder, in boolean asetonsubfolders); void copydatatooutputstreamforappend(in nsiinputstream aistream, in long alength, in nsioutputstream outputstream); void copydatadone(); void setjunkscore
formessages(in nsisupportsarray amessages, in acstring ajunkscore); void applyretentionsettings(); boolean fetchmsgpreviewtext([array, size_is (anumkeys)] in nsmsgkey akeystofetch, in unsigned long anumkeys, in boolean alocalonly, in nsiurllistener aurllistener); void addkeywordstomessages(in nsisupportsarray amessages, in acstring akeywords); void removekeywordsfro...
...And 3 more matches
nsIParserUtils
sanitizerdrop
forms (1 << 4) flag for sanitizer: drops
forms and
form controls (excluding <fieldset> and <legend>.
... by default, the sanitizer doesn't try to avoid leaking in
formation that the content was viewed to third parties.
...to avoid ambient in
formation leakage upon loading the sanitized content, use the sanitizerinternalembedsonly flag.
...And 3 more matches
nsIPrintingPrompt
each plat
form has a "base" or "backstop" implementation of the service.
... historically, plat
form toolkits with native dialogs have implemented them in the gfx layer usually they were displayed when a new devicecontextspec specific to that plat
form was created.
... defaults for plat
form service: showprintdialog - displays a native dialog showpagesetup() - displays a xul dialog showprogress() - displays a xul dialog summary for windows embedders: stated once again: there is no "fallback" native plat
form support in gfx for the displaying of the native print dialog.
...And 3 more matches
nsIPrivateBrowsingService
netwerk/base/public/nsiprivatebrowsingservice.idlscriptable provides access to in
formation about the state of the private browsing service.
... the nsiprivatebrowsingservice interface provides access to in
formation about the state of the private browsing feature offered in firefox 3.5 and later.
... when firefox is in private browsing mode, firefox shouldn't save any potentially private in
formation.
...And 3 more matches
nsIScriptError
errormessage astring the error message in a string
format without any context/line number in
formation.
... note: nsiconsolemessage.message will return the error
formatted with file/line in
formation.
... timestamp long long elapsed time, in milliseconds, from a plat
form-specific zero time to the time the message was created.
...And 3 more matches
nsIStringBundleService
ccess this service, use: var stringbundleservice = components.classes["@mozilla.org/intl/stringbundle;1"] .getservice(components.interfaces.nsistringbundleservice); method overview nsistringbundle createbundle(in string aurlspec); nsistringbundle createextensiblebundle(in string aregistrykey); void flushbundles(); wstring
formatstatusmessage(in nsresult astatus, in wstring astatusarg); methods createbundle() nsistringbundle createbundle( in string aurlspec ); parameters aurlspec the url of the properties file to load.
... on the return value object on you can call functions like getstringfromname and
formatstringfromname see nsistringbundle.
...
formatstatusmessage()
formats a message string from a status code and status arguments.
...And 3 more matches
nsIURIFixup
the fixup object implementer should honour this flag and only per
form any lengthy keyword (or search) operation if it is set.
... fixup_flag_use_utf8 4 use utf-8 to encode the uri instead of the plat
form character set.
... ns_error_mal
formed_uri when the exposable portion of auri is mal
formed.
...And 3 more matches
nsIZipReader
the entry must be stored in the zip in either uncompressed or deflate-compressed
format for the extraction to be successful.
...(in the
former case, the behavior specified for '[^az]' will happen.) [a-z] matches any character between a and z.
...this may be used to per
form filtering upon the results of one pattern to remove all matches which also match another pattern.
...And 3 more matches
XPCOM Interface Reference
this is a reference to the xpcom interfaces provided by the mozilla plat
form.
...siblewin32objectnsialertsservicensiannotationobservernsiannotationservicensiappshellnsiappshellservicensiappstartupnsiappstartup_mozilla_2_0nsiapplicationcachensiapplicationcachechannelnsiapplicationcachecontainernsiapplicationcachenamespacensiapplicationcacheservicensiapplicationupdateservicensiarraynsiasyncinputstreamnsiasyncoutputstreamnsiasyncstreamcopiernsiasyncverifyredirectcallbacknsiauthin
formationnsiauthmodulensiauthpromptnsiauthprompt2nsiauthpromptadapterfactorynsiauthpromptcallbacknsiauthpromptprovidernsiauthpromptwrappernsiautocompletecontrollernsiautocompleteinputnsiautocompleteitemnsiautocompletelistenernsiautocompleteobservernsiautocompleteresultnsiautocompletesearchnsibadcertlistener2nsibidikeyboardnsibinaryinputstreamnsibinaryoutputstreamnsiblocklistpromptnsiblocklistservicens...
...eventgroupnsidomeventlistenernsidomeventtargetnsidomfilensidomfileerrornsidomfileexceptionnsidomfilelistnsidomfilereadernsidomfontfacensidomfontfacelistnsidomgeogeolocationnsidomgeopositionnsidomgeopositionaddressnsidomgeopositioncallbacknsidomgeopositioncoordsnsidomgeopositionerrornsidomgeopositionerrorcallbacknsidomgeopositionoptionsnsidomglobalpropertyinitializernsidomhtmlaudioelementnsidomhtml
formelementnsidomhtmlmediaelementnsidomhtmlsourceelementnsidomhtmltimerangesnsidomjswindownsidommousescrolleventnsidommoznetworkstatsnsidommoznetworkstatsdatansidommoznetworkstatsmanagernsidommoztoucheventnsidomnshtmldocumentnsidomnavigatordesktopnotificationnsidomnodensidomofflineresourcelistnsidomorientationeventnsidomparsernsidomprogresseventnsidomserializernsidomsimplegestureeventnsidomstoragensid...
...And 3 more matches
Filelink Providers
a provider implementation can choose what in
formation it gets from the user from the setup dialog by pointing the settingsurl attribute of their nsimsgcloudfileprovider implementation to a chrome url for an xhtml page that contains a
form with the extra in
formation.
... custom settings fields to handle custom settings, the settings xhtml page should contain a
form with the id "provider-
form", with its onsubmit attribute set to "return false;".
... example: <
form id="provider-
form" onsubmit="return false;"> <label for="username">username:</label> <input id="username" type="text" required="true" /> <label for="server">server:</label> <input id="server" type="text" required="true" /> <label for="port">port:</label> <input id="port" pattern="[0-9]+" required="true" /> </
form> the
form is expected to use html5
form validation.
...And 3 more matches
Using Mozilla code in other projects
mozilla provides a development plat
form for desktop applications, called xul, atop which you can build applications.
... various components of the plat
form, such as the spidermonkey javascript engine, can be used in your own projects without the rest of the plat
form.
... mozilla toolkit in
formation about the mozilla toolkit api.
...And 3 more matches
Add to iPhoto
i debated including this in the corefoundation object, and probably would have if i were being more
formal, but opted against it for clarity's sake.
...these are core system data
formats that are used by other frameworks, and we'll be making use of them.
...the string can be stored in any of a number of encodings, so you use assorted functions that know how to cope with different encodings to set and get values of cfstrings, as well as to per
form typical string operations.
...And 3 more matches
Streams - Plugins
each stream has an associated mime type identifying the
format of the data in the stream.
... receiving a stream sending a stream receiving a stream when the browser sends a data stream to the plug-in, it has several tasks to per
form: telling the plug-in when a stream is created telling the plug-in when a stream is deleted finding out how much data the plug-in can accept writing the stream to the plug-in sending the stream in random-access mode sending the stream in file mode telling the plug-in when a stream is created to tell the plug-in instance when a new stream is created, the browser calls the npp_newstream m...
... np_asfileonly: this plug-in gets full random access to the data using plat
form-specific file operations.
...And 3 more matches
Plugins
important: plugins are a legacy technology that are a security and per
formance problem for firefox (and other browser) users.
... roadmap plugin roadmap in
formation about the roadmap for adobe flash and other plugin support in firefox.
...see also flash can now be loaded only from http/https for more useful in
formation.
...And 3 more matches
Debugger.Memory - Firefox Developer Tools
the statistics parameter is an object containing in
formation about the gc cycle.
...for each collection slice that occurred, there is an entry in the collections array with the following
form: { "starttimestamp":timestamp, "endtimestamp":timestamp, } here the timestamp values are timestamps of the gc slice’s start and end events.
... this section covers some areas where firefox’s actual behavior deviates from what one might expect from the specified behavior of the web plat
form.
...And 3 more matches
Paint Flashing Tool - Firefox Developer Tools
because repaints can be per
formance-intensive operations, eliminating unnecessary repaints can improve your website's responsiveness.
...the first way applies the transition to the element's margin-left, while the second way moves the element using the trans
form property.
... <body> <div id="container"> <div class="moving-box" id="moving-box-left-margin">transition using margin-left</div> <div class="moving-box" id="moving-box-trans
form">transition using trans
form</div> </div> </body> #container { border: 1px solid; } .moving-box { height: 20%; width:20%; margin: 2%; padding: 2%; background-color: blue; color: white; font-size: 24px; } #moving-box-left-margin { transition: margin-left 4s; } #moving-box-trans
form { transition: trans
form 4s; } body:hover #moving-box-left-margin{ margin-left: 74%; } body:hover #moving-box-trans
form { trans
form: translate(300%); } to see the transition, move the mouse into the space below: now switch paint flashing on, and try it again.
...And 3 more matches
AnalyserNode - Web APIs
the analysernode interface represents a node able to provide real-time frequency and time-domain analysis in
formation.
... analysernode.fftsize is an unsigned long value representing the size of the fft (fast fourier trans
form) to be used to determine the frequency domain.
... analysernode.getfloattimedomaindata() copies the current wave
form, or time-domain, data into a float32array array passed into it.
...And 3 more matches
Optimizing canvas - Web APIs
however, when websites and apps push the canvas api to its limits, per
formance begins to suffer.
... this article provides suggestions for optimizing your use of the canvas element to ensure that your graphics per
form well.
... per
formance tips the following is a collection of tips to improve canvas per
formance.
...And 3 more matches
DOMMatrix - Web APIs
a, b, c, d, e, f double-precision floating-point values representing the components of a 4×4 matrix which are required in order to per
form 2d rotations and translations.
... dommatrix.scalenonuni
formself() modifies the matrix by applying the specified scaling on the x, y, and z axes, centered at the given origin.
... dommatrix.setmatrixvalue() replaces the contents of the matrix with the matrix described by the specified trans
form or trans
forms.
...And 3 more matches
DataTransfer.types - Web APIs
the datatransfer.types read-only property returns an array of the drag data
formats (as strings) that were set in the dragstart event.
... the order of the
formats is the same order as the data included in the drag operation.
... the
formats are unicode strings giving the type or
format of the data, generally given by a mime type.
...And 3 more matches
DataTransfer - Web APIs
for more in
formation about drag and drop, see html drag and drop api.
... datatransfer.types read only an array of strings giving the
formats that were set in the dragstart event.
...if data for the type does not exist, it is added at the end, such that the last item in the types list will be the new
format.
...And 3 more matches
FileHandle API - Web APIs
per
form read and write operations to read or write within a handled file, it is required to get a lockedfile.
...any attempt to per
form a write action on a readonly lockedfile object will fail.
...this in
formation (as well as the date of its last modification) can be retrieved through the lockedfile.getmetadata() method.
...And 3 more matches
HTMLCanvasElement.getContext() - Web APIs
these implementations have either not reached test suite con
formance, or the graphics drivers on the plat
form are not yet stable.
... the khronos group certifies webgl implementations under certain con
formance rules.
... desynchronized: boolean that hints the user agent to reduce the latency by desynchronizing the canvas paint cycle from the event loop antialias: boolean that indicates whether or not to per
form anti-aliasing.
...And 3 more matches
HTMLImageElement.alt - Web APIs
decorative images images with no semantic meaning—such as those which are solely decorative—or of limited in
formational value, should have their alt attributes set to the empty string ("").
...l" aria-role="button"><img src="songicon.svg" alt="songs"</a> <a href="albums.html" aria-role="button"><img src="albumicon.svg" alt="albums"</a> <a href="artists.html" aria-role="button"><img src="artisticon.svg" alt="artists"</a> <a href="playlists.html" aria-role="button"><img src="playlisticon.svg" alt="playlists"</a> </li> images containining diagrams or maps when an image contains in
formation presented as a diagram, chart, graph, or map, the alt text should provide the same in
formation, at least in summary
form.
... this is true whether the /me image is in a bitmapped
format such as png or jpeg or in a vector
format like svg.
...And 3 more matches
In depth: Microtasks and the JavaScript runtime environment - Web APIs
this in
formation is provided as a basis for why microtasks are useful and how they function; if you don't care, you can skip this and come back later if you find that you need to.
...each context additionally tracks the next line in the program that should be run and other in
formation critical to that context's operation.
...it then runs any pending javascript tasks, then any pending microtasks, then per
forms any needed rendering and painting before looping again to check for pending tasks.
...And 3 more matches
KeyframeEffect.setKeyframes() - Web APIs
there are two different ways to
format keyframes: an array of objects (keyframes) consisting of properties and values to iterate over.
... this is the canonical
format returned by the getkeyframes() method.
... element.animate({ opacity: [ 0, 1 ], // [ from, to ] color: [ "#fff", "#000" ] // [ from, to ] }, 2000); using this
format, the number of elements in each array does not need to be equal.
...And 3 more matches
Media Session API - Web APIs
media session concepts and usage the mediametadata interface lets a web site provide rich metadata to the plat
form ui for media that is playing.
...the plat
form can show this metadata in media centers, notifications, device lockscreens, etc.
...for example, to set the current state of the media session to playing: navigator.mediasession.playbackstate = "playing"; interfaces mediametadata allows a web page to provide rich media metadata, for display in a plat
form ui.
...And 3 more matches
OscillatorNode.type - Web APIs
the type property of the oscillatornode interface specifies what shape of wave
form the oscillator will output.
... there are several common wave
forms available, as well as an option to specify a custom wave
form shape.
... the shape of the wave
form will affect the tone that is produced.
...And 3 more matches
PaymentRequest.PaymentRequest() - Web APIs
data a json-serializable object that provides optional in
formation that might be needed by the supported payment methods.
... this has to con
form to the type expected by the payment handler indicated by supportedmethods.
... details provides in
formation about the requested transaction.
...And 3 more matches
Payment processing concepts - Web APIs
some payment handlers use merchant validation, which is the process of validating the identity of a merchant in some way, usually using some
form of cryptographic response such as a public key.
... verify that the in
formation provided by the user results in a valid transaction.
... this results in the creation and returning of a payment method-specific object that contains the in
formation needed to handle the transaction.
...And 3 more matches
RTCDataChannel: error event - Web APIs
code); } else { console.error(" unknown sctp error"); } break; case "dtls-failure": if (err.receivedalert) { console.error(" received dlts failure alert: ", err.receivedalert); } if (err.sentalert) { console.error(" sent dlts failure alert: ", err.receivedalert); } break; } // add source file name and line in
formation console.error(" error in file ", err.filename, " at line ", err.linenumber, ", column ", err.columnnumber); }, false); the received event provides details in an rtcerror object called error; rtcerror is an extension of the domexception interface.
... error in
formation is output to the console using console.error().
... the message string is always output, as is in
formation about the source file's name, line number, and column number at which the error occurred.
...And 3 more matches
RTCIceCandidatePairStats - Web APIs
the webrtc rtcicecandidatepairstats dictionary reports statistics which provide insight into the quality and per
formance of an rtcpeerconnection while connected and configured as described by the specified pair of ice candidates.
...in addition, it adds the following new properties: availableincomingbitrate optional provides an in
formative value representing the available inbound capacity of the network by reporting the total number of bits per second available for all of the candidate pair's incoming rtp streams.
... availableoutgoingbitrate optional provides an in
formative value representing the available outbound capacity of the network by reporting the total number of bits per second available for all of the candidate pair's outoing rtp streams.
...And 3 more matches
RTCPeerConnection - Web APIs
for details on the difference, see pending and current descriptions in webrtc connectivity.remotedescription read only the read-only property rtcpeerconnection.remotedescription returns a rtcsessiondescription describing the session (which includes configuration and media in
formation) for the remote end of the connection.
...the answer contains in
formation about any media already attached to the session, codecs and options supported by the browser, and any ice candidates already gathered.
...this description specifies the properties of the local end of the connection, including the media
format.setremotedescription()the rtcpeerconnection method setremotedescription() sets the specified session description as the remote peer's current offer or answer.
...And 3 more matches
Screen Wake Lock API - Web APIs
it allows for a simple plat
form based solution which up until now could only be achieved via workarounds which were potentially power hungry.
... you acquire a wakelocksentinel object by calling the navigator.wakelock.request() promise based method that resolves if the plat
form allows it.
... wakelocksentinel provides a handle to the underlying plat
form wake lock and if referenced can be manually released and reacquired.
...And 3 more matches
Using Service Workers - Web APIs
this article provides in
formation on getting started with service workers, including basic architecture, registering a service worker, the install and activation process for a new service worker, updating your service worker, cache control and custom responses, all in the context of a simple app with offline functionality.
... chrome canary: go to chrome://flags and turn on experimental-web-plat
form-features; restart browser (note that some features are now enabled by default in chrome.) opera: go to opera://flags and enable support for serviceworker; restart browser.
...scope is ' + reg.scope); }).catch((error) => { // registration failed console.log('registration failed with ' + error); }); } the outer block per
forms a feature detection test to make sure service workers are supported before trying to register one.
...And 3 more matches
Using readable streams - Web APIs
note: if you are looking for in
formation on writable streams try using writable streams instead.
...in the pump() function seen above we first invoke read(), which returns a promise containing a results object — this has the results of our read in it, in the
form { done, value }: return reader.read().then(({ done, value }) => { the results can be one of three different types: if a chunk is available to read, the promise will be fulfilled with an object of the
form { value: thechunk, done: false }.
... if the stream becomes closed, the promise will be fulfilled with an object of the
form { value: undefined, done: true }.
...And 3 more matches
SubtleCrypto.sign() - Web APIs
syntax const signature = crypto.subtle.sign(algorithm, key, data); parameters algorithm is a string or object that specifies the signature algorithm to use and its parameters: to use rsassa-pkcs1-v1_5, pass the string "rsassa-pkcs1-v1_5" or an object of the
form { "name": "rsassa-pkcs1-v1_5" }.
... to use hmac, pass the string "hmac" or an object of the
form { "name": "hmac" }.
... /* fetch the contents of the "message" textbox, and encode it in a
form we can use for the sign operation.
...And 3 more matches
SubtleCrypto.verify() - Web APIs
to use rsassa-pkcs1-v1_5, pass the string "rsassa-pkcs1-v1_5" or an object of the
form { "name": "rsassa-pkcs1-v1_5" }.
... to use hmac, pass the string "hmac" or an object of the
form { "name": "hmac" }.
... /* fetch the contents of the "message" textbox, and encode it in a
form we can use for sign operation.
...And 3 more matches
WebGLRenderingContext.compressedTexSubImage2D() - Web APIs
the webglrenderingcontext.compressedtexsubimage2d() method of the webgl api specifies a two-dimensional sub-rectangle for a texture image in a compressed
format.
... compressed image
formats must be enabled by webgl extensions before using this method or a webgl2renderingcontext must be used.
... syntax // webgl 1: void gl.compressedtexsubimage2d(target, level, xoffset, yoffset, width, height,
format, arraybufferview?
...And 3 more matches
WebGLRenderingContext.getBufferParameter() - Web APIs
the webglrenderingcontext.getbufferparameter() method of the webgl api returns in
formation about the buffer.
... gl.trans
form_feedback_buffer: buffer for trans
form feedback operations.
... gl.uni
form_buffer: buffer used for storing uni
form blocks.
...And 3 more matches
Using DTMF with WebRTC - Web APIs
webrtc currently ignores these payloads; this is because webrtc's dtmf support is primarily intended for use with legacy telephone services that rely on dtmf tones to per
form tasks such as: teleconferencing systems menu systems voicemail systems entry of credit card or other payment in
formation passcode entry note: while the dtmf is not sent to the remote peer as audio, browsers may choose to play the corresponding tone to the local user as part of their user experience, since users are typically used to hearing their phone play the tones audibly.
... a <div> to receive and display log text to show status in
formation.
... mediaconstraints an object con
forming to the mediaconstraints dictionary specifying the constraints to use when starting the connection.
...And 3 more matches
Web Speech API - Web APIs
grammar is defined using jspeech grammar
format (jsgf.) speech synthesis is accessed via the speechsynthesis interface, a text-to-speech component that allows programs to read out their text content (normally via the device's default speech synthesiser.) different voice types are represented by speechsynthesisvoice objects, and different parts of text that you want to be spoken are represented by speechsynthesisutterance objects.
... speech synthesis speechsynthesis the controller interface for the speech service; this can be used to retrieve in
formation about the synthesis voices available on the device, start and pause speech, and other commands besides.
... speechsynthesiserrorevent contains in
formation about any errors that occur while processing speechsynthesisutterance objects in the speech service.
...And 3 more matches
Window.open() - Web APIs
this name can be used as the target for the target attribute of <a> or <
form> elements.
... windowfeatures optional a domstring containing a comma-separated list of window features given with their corresponding values in the
form "name=value".
...see rel="noopener" for more in
formation and for browser compatibility details, including in
formation about ancillary effects.
...And 3 more matches
Window: popstate event - Web APIs
it happens after the new location has loaded (if needed), displayed, made visible, and so on, after the pageshow event is sent, but before the persisted user state in
formation is restored and the hashchange event is sent.
... if the browser has state in
formation it wishes to store with the current-entry before navigating away from it, it then does so.
... the entry is now said to have "persisted user state." this in
formation the browser might add to the history session entry may include, for instance, the document's scroll position, the values of
form inputs, and other such data.
...And 3 more matches
XRReferenceSpace - Web APIs
it expands upon the base class, xrspace, by adding support for several different tracking behaviors as well as to request a new reference space which describes the offset trans
form between the tracked object and another location in the world.
...the new reference space can be used to trans
form a coordinate from the reference space of the object on which the method is called into a different coordinate space.
... this is useful for positioning objects while rendering, and to per
form the needed trans
forms when changing the viewer's position and/or orientation in 3d space.
...And 3 more matches
XSLTProcessor - Web APIs
an xsltprocessor applies an xslt stylesheet trans
formation to an xml document to produce a new xml document as output.
... it has methods to load the xslt stylesheet, to manipulate <xsl:param> parameter values, and to apply the trans
formation to documents.
...if the given node is a document node, you can pass in a full xsl trans
form or a literal result element trans
form; otherwise, it must be an <xsl:stylesheet> or <xsl:trans
form> element.
...And 3 more matches
Using the aria-labelledby attribute - Accessibility
aria-labelledby is very similar to aria-describedby: a label provides essential in
formation about an object, while a description provides extended in
formation that the user might need.
... in addition to
form elements, you can use the aria-labelledby attribute to associate static text with widgets, groups of elements, panes, regions that have a heading, definitions, and other types of objects.
... the examples section below provides more in
formation on how to use the attribute this way.
...And 3 more matches
ARIA: application role - Accessibility
description the application role indicates to assistive technologies that this part of the web content contains elements that do not con
form to any other known html element or wai-aria widget.
...the at will read any semantics like links, headings,
form controls, tables, lists, or images.
...such elements usually include headings,
form fields, lists, tables, links, graphics, or landmark regions.
...And 3 more matches
ARIA: button role - Accessibility
a button is a widget used to per
form actions such as submitting a
form, opening a dialog, cancelling an action, or per
forming a command such as inserting a new record or displaying in
formation.
... a common convention to in
form users a button will launch a dialog is to append "…" (ellipsis) to the button's label, e.g., "save as…".
... space activates the button following button activation, focus is set depending on the type of action the button per
forms.
...And 3 more matches
Web applications and ARIA FAQ - Accessibility
it also provides additional structural in
formation, helping authors identify landmarks, regions, and grids on their pages.
... for more in
formation about how to create accessible widgets with aria, see the overview of accessible web applications and widgets.
...user interface library (yui) for more in
formation about javascript toolkit accessibility: steve faulkner's wai-aria implementation in javascript ui libraries can you show me an example of aria in action?
...And 3 more matches
::placeholder - CSS: Cascading Style Sheets
both of these circumstances can interfere with successful
form completion, especially for people with cognitive concerns.
... an alternate approach to providing placeholder in
formation is to include it outside of the input in close visual proximity, then use aria-describedby to programmatically associate the <input> with its hint.
... with this implementation, the hint content is available even if in
formation is entered into the input field, and the input appears free of preexisting input when the page is loaded.
...And 3 more matches
Using CSS animations - CSS: Cascading Style Sheets
simple animations can often per
form poorly in javascript (unless they’re well made).
... the rendering engine can use frame-skipping and other techniques to keep the per
formance as smooth as possible.
... letting the browser control the animation sequence lets the browser optimize per
formance and efficiency by, for example, reducing the update frequency of animations running in tabs that aren't currently visible.
...And 3 more matches
Layout and the containing block - CSS: Cascading Style Sheets
identifying the containing block the process for identifying the containing block depends entirely on the value of the element's position property: if the position property is static, relative, or sticky, the containing block is
formed by the edge of the content box of the nearest ancestor element that is either a block container (such as an inline-block, block, or list-item element) or establishes a
formatting context (such as a table container, flex container, grid container, or the block container itself).
... if the position property is absolute, the containing block is
formed by the edge of the padding box of the nearest ancestor element that has a position value other than static (fixed, absolute, relative, or sticky).
... if the position property is absolute or fixed, the containing block may also be
formed by the edge of the padding box of the nearest ancestor element that has the following: a trans
form or perspective value other than none a will-change value of trans
form or perspective a filter value other than none or a will-change value of filter (only works on firefox).
...And 3 more matches
WebKit CSS extensions - CSS: Cascading Style Sheets
ive-origin-x -webkit-perspective-origin-y -webkit-print-color-adjust r-s -webkit-rtl-ordering -webkit-svg-shadow t -webkit-tap-highlight-color -webkit-text-combine -webkit-text-decoration-skip -webkit-text-decorations-in-effect -webkit-text-fill-color -webkit-text-security -webkit-text-stroke-color -webkit-text-stroke-width -webkit-text-stroke -webkit-text-zoom -webkit-trans
form-origin-x -webkit-trans
form-origin-y -webkit-trans
form-origin-z u -webkit-user-drag -webkit-user-modify * a few are on the standards, unprefixed track ** new syntax has been standardized.
... webkit-prefixed properties on the standards track -webkit-appearance -webkit-font-size-delta -webkit-mask-composite -webkit-mask-position-x -webkit-mask-position-y -webkit-mask-repeat-x -webkit-mask-repeat-y
formerly proprietary properties that are now standard note: to maximize the compatibility of your css, you should use the unprefixed standard properties instead of the prefixed ones listed below.
...-webkit-text-color-decoration -webkit-text-decoration-line -webkit-text-decoration-style -epub-text-emphasis -webkit-text-emphasis -epub-text-emphasis-color -webkit-text-emphasis-color -webkit-text-emphasis-position -epub-text-emphasis-style -webkit-text-emphasis-style -webkit-text-justify -webkit-text-orientation -webkit-text-size-adjust -webkit-text-underline-position -webkit-trans
form -webkit-trans
form-origin -webkit-trans
form-style -webkit-transition -webkit-transition-delay -webkit-transition-duration -webkit-transition-property -webkit-transition-timing-function u-w -webkit-user-select -epub-word-break -epub-writing-mode supported in non-webkit browsers without a prefix, but not standard the following properties are supported in at least one browser withou...
...And 3 more matches
content - CSS: Cascading Style Sheets
the counter() function has two
forms: 'counter(name)' or 'counter(name, style)'.
...it is
formatted in the specified style (decimal by default).
... the counters() function also has two
forms: 'counters(name, string)' or 'counters(name, string, style)'.
...And 3 more matches
font-kerning - CSS: Cascading Style Sheets
the font-kerning css property sets the use of the kerning in
formation stored in a font.
...in well-kerned fonts, this feature makes character spacing more uni
form and pleasant to read than it would otherwise be.
... normal font kerning in
formation stored in the font must be applied.
...And 3 more matches
font-size-adjust - CSS: Cascading Style Sheets
formal definition initial valuenoneapplies toall elements.
... it also applies to ::first-letter and ::first-line.inheritedyescomputed valueas specifiedanimation typea number
formal syntax none | <number> examples adjusting lower-case letter sizes html <p class="times">this text uses the times font (10px), which is hard to read in small sizes.</p> <p class="verdana">this text uses the verdana font (10px), which has relatively large lowercase letters.</p> <p class="adjtimes">this is the 10px times, but now adjusted to the same aspect ratio as the verdana.</p> css .times { font-family: times, serif; font-size: 10px; } .verdana { font-family: verdana, sans-serif; font-size: 10px; } .adjtimes { font-family: times, serif; font-size-adjust: 0.58; font-size: 10px; } results specifications specification status comment...
... desktopmobilechromeedgefirefoxinternet exploreroperasafariandroid webviewchrome for androidfirefox for androidopera for androidsafari on iossamsung internetfont-size-adjustchrome full support 43disabled full support 43disabled disabled from version 43: this feature is behind the enable experimental web plat
form features preference.
...And 3 more matches
font - CSS: Cascading Style Sheets
formal definition initial valueas each of the properties of the shorthand:font-style: normalfont-variant: normalfont-weight: normalfont-stretch: normalfont-size: mediumline-height: normalfont-family: depends on user agentapplies toall elements.
...irst-letter and ::first-line.inheritedyespercentagesas each of the properties of the shorthand:font-size: refer to the parent element's font sizeline-height: refer to the font size of the element itselfcomputed valueas each of the properties of the shorthand:font-style: as specifiedfont-variant: as specifiedfont-weight: the keyword or the numerical value as specified, with bolder and lighter trans
formed to the real valuefont-stretch: as specifiedfont-size: as specified, but with relative lengths converted into absolute lengthsline-height: for percentage and length values, the absolute length, otherwise as specifiedfont-family: as specifiedanimation typeas each of the properties of the shorthand:font-style: discretefont-variant: discretefont-weight: a font weightfont-stretch: a font stretchfont...
...-size: a lengthline-height: either number or lengthfont-family: discrete
formal syntax [ [ <'font-style'> | <font-variant-css21> | <'font-weight'> | <'font-stretch'> ]?
...And 3 more matches
<image> - CSS: Cascading Style Sheets
description css can handle the following kinds of images: images with intrinsic dimensions (a natural size), like a jpeg, png, or other raster
format.
... images with multiple intrinsic dimensions, existing in multiple versions inside a single file, like some .ico
formats.
... (in this case, the intrinsic dimensions will be those of the image largest in area and the aspect ratio most similar to the containing box.) images with no intrinsic dimensions but with an intrinsic aspect ratio between its width and height, like an svg or other vector
format.
...And 3 more matches
min() - CSS: Cascading Style Sheets
formal syntax min( <calc-sum># )where <calc-sum> = <calc-product> [ [ '+' | '-' ] <calc-product> ]*where <calc-product> = <calc-value> [ '*' <calc-value> | '/' <number> ]*where <calc-value> = <number> | <dimension> | <percentage> | ( <calc-sum> ) accessibility concerns when using min() to set a maximum font size, ensure that the font can still be scaled at least 200% for readability (without assi...
... 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 its parent's width.
...And 3 more matches
perspective - CSS: Cascading Style Sheets
syntax /* keyword value */ perspective: none; /* <length> values */ perspective: 20px; perspective: 3.5em; /* global values */ perspective: inherit; perspective: initial; perspective: unset; values none indicates that no perspective trans
form is to be applied.
...it is used to apply a perspective trans
form to the element and its content.
... if the value is 0 or a negative number, no perspective trans
form is applied.
...And 3 more matches
text-underline-position - CSS: Cascading Style Sheets
from-font if the font file includes in
formation about a preferred position, use that value.
... if the font file doesn't include this in
formation, behave as if auto was set, with the browser choosing an appropriate position.
...this is useful for ensuring legibility with chemical and mathematical
formulas, which make a large use of subscripts.
...And 3 more matches
rotate() - CSS: Cascading Style Sheets
the rotate() css function defines a trans
formation that rotates an element around a fixed point on the 2d plane, without de
forming it.
... its result is a <trans
form-function> data type.
... the fixed point that the element rotates around — mentioned above — is also known as the trans
form origin.
...And 3 more matches
rotate3d() - CSS: Cascading Style Sheets
the rotate3d() css function defines a trans
formation that rotates an element around a fixed axis in 3d space, without de
forming it.
... its result is a <trans
form-function> data type.
...the axis of rotation is defined by an [x, y, z] vector and pass by the origin (as defined by the trans
form-origin property).
...And 3 more matches
scale3d() - CSS: Cascading Style Sheets
the scale3d() css function defines a trans
formation that resizes an element in 3d space.
...its result is a <trans
form-function> data type.
... this scaling trans
formation is characterized by a three-dimensional vector.
...And 3 more matches
scaleY() - CSS: Cascading Style Sheets
the scaley() css function defines a trans
formation that resizes an element along the y-axis (vertically).
... its result is a <trans
form-function> data type.
... it modifies the ordinate of each element point by a constant factor, except when the scale factor is 1, in which case the function is the identity trans
form.
...And 3 more matches
translate3d() - CSS: Cascading Style Sheets
its result is a <trans
form-function> data type.
... this trans
formation is characterized by a three-dimensional vector.
...it can't be a <percentage> value; in that case the property containing the trans
form is considered invalid.
...And 3 more matches
Mouse gesture events - Developer guides
these are special movements that can be made with a mouse or trackpad and can be interpreted to per
form specific tasks.
...mozmagnifygesturestart the mozmagnifygesturestart event is sent when the user begins per
forming a "pinch" gesture, by using two fingers as the corners of a rectangle and moving them either closer together or farther apart.
...mozmagnifygestureupdate the mozmagnifygestureupdate event is sent periodically while processing a magnify gesture, to provide updated status in
formation.
...And 3 more matches
A hybrid approach - Developer guides
we can also address some of the per
formance problems with responsive design by incorporating server-side techniques.
...but even if it does not work, it is no worse with respect to per
formance than only using fluid images.
... by combining the techniques listed above, we can get a mobile web development strategy that is both more flexible than pure separate sites and has better per
formance than pure responsive design.
...And 3 more matches
<details>: The Details disclosure element - HTML: Hypertext Markup Language
the html details element (<details>) creates a disclosure widget in which in
formation is visible only when the widget is toggled into an "open" state.
... an input device as well as some
form of output device is recommended.</p> </details> in this situation, the browser will use a default summary string (usually "details").
... an input device as well as some
form of output device is recommended.</p> </details> the result from this html is this: creating an open disclosure box to start the <details> box in its open state, add the boolean open attribute: <details open> <summary>system requirements</summary> <p>requires a computer running an operating system.
...And 3 more matches
<input type="reset"> - HTML: Hypertext Markup Language
<input> elements of type "reset" are rendered as buttons, with a default click event handler that resets all of the inputs in the
form to their initial values.
... you should usually avoid including reset buttons in your
forms.
... <input type="reset" value="reset the
form"> if you don't specify a value, you get an button with the default label (typically "reset," but this will vary depending on the user agent): <input type="reset"> using reset buttons <input type="reset"> buttons are used to reset
forms.
...And 3 more matches
Common MIME types - HTTP
this table lists some important mime types for the web: extension kind of document mime type .aac aac audio audio/aac .abw abiword document application/x-abiword .arc archive document (multiple files embedded) application/x-freearc .avi avi: audio video interleave video/x-msvideo .azw amazon kindle ebook
format application/vnd.amazon.ebook .bin any kind of binary data application/octet-stream .bmp windows os/2 bitmap graphics image/bmp .bz bzip archive application/x-bzip .bz2 bzip2 archive application/x-bzip2 .csh c-shell script application/x-csh .css cascading style sheets (css) text/css .csv comm...
...a-separated values (csv) text/csv .doc microsoft word application/msword .docx microsoft word (openxml) application/vnd.openxml
formats-officedocument.wordprocessingml.document .eot ms embedded opentype fonts application/vnd.ms-fontobject .epub electronic publication (epub) application/epub+zip .gz gzip compressed archive application/gzip .gif graphics interchange
format (gif) image/gif .htm .html hypertext markup language (html) text/html .ico icon
format image/vnd.microsoft.icon .ics icalendar
format text/calendar .jar java archive (jar) application/java-archive .jpeg .jpg jpeg images image/jpeg .js javascri...
...pt text/javascript, per the following specifications: https://html.spec.whatwg.org/multipage/#scriptinglanguages https://html.spec.whatwg.org/multipage/#dependencies:willful-violation https://datatracker.ietf.org/doc/draft-ietf-dispatch-javascript-mjs/ .json json
format application/json .jsonld json-ld
format application/ld+json .mid .midi musical instrument digital interface (midi) audio/midi audio/x-midi .mjs javascript module text/javascript .mp3 mp3 audio audio/mpeg .mpeg mpeg video video/mpeg .mpkg apple installer package application/vnd.apple.installer+xml .odp opendocument presentation document application/vnd.oasis.opendocumen...
...And 3 more matches
Accept-Encoding - HTTP
using content negotiation, the server selects one of the proposals, uses it and in
forms the client of its choice with the content-encoding response header.
...this may be the case with some image
formats; the server is overloaded and cannot afford the computational overhead induced by the compression requirement.
... header type request header forbidden header name yes syntax accept-encoding: gzip accept-encoding: compress accept-encoding: deflate accept-encoding: br accept-encoding: identity accept-encoding: * // multiple algorithms, weighted with the quality value syntax: accept-encoding: deflate, gzip;q=1.0, *;q=0.5 directives gzip a compression
format using the lempel-ziv coding (lz77), with a 32-bit crc.
...And 3 more matches
Content-Security-Policy - HTTP
for more in
formation, see the introductory article on content security policy (csp).
... navigation directives navigation directives govern to which locations a user can navigate or submit a
form, for example.
...
form-action restricts the urls which can be used as the target of a
form submissions from a given context.
...And 3 more matches
Feature-Policy - HTTP
for more in
formation, see the main feature policy article.
... directives accelerometer controls whether the current document is allowed to gather in
formation about the acceleration of the device through the accelerometer interface.
... ambient-light-sensor controls whether the current document is allowed to gather in
formation about the amount of light in the environment around the device through the ambientlightsensor interface.
...And 3 more matches
Strict-Transport-Security - HTTP
the http strict transport security header in
forms the browser that it should never load a site using http and should automatically convert all attempts to access the site using http to https requests instead.
... strict transport security resolves this problem; as long as you've accessed your bank's web site once using https, and the bank's web site uses strict transport security, your browser will know to automatically use only https, which prevents hackers from per
forming this sort of man-in-the-middle attack.
... how the browser handles it the first time your site is accessed using https and it returns the strict-transport-security header, the browser records this in
formation, so that future attempts to load the site using http will automatically use https instead.
...And 3 more matches
User-Agent - HTTP
header type request header forbidden header name no syntax user-agent: <product> / <product-version> <comment> common
format for web browsers: user-agent: mozilla/5.0 (<system-in
formation>) <plat
form> (<plat
form-details>) <extensions> directives <product> a product identifier — its name or development codename.
... <comment> zero or more comments containing more details; sub-product in
formation, for example.
...the ua string of firefox is broken down into 4 components: mozilla/5.0 (plat
form; rv:geckoversion) gecko/geckotrail firefox/firefoxversion mozilla/5.0 is the general token that says the browser is mozilla-compatible.
...And 3 more matches
POST - HTTP
a post request is typically sent via an html
form and results in a change on the server.
... in this case, the content type is selected by putting the adequate string in the enctype attribute of the <
form> element or the
formenctype attribute of the <input> or <button> elements: application/x-www-
form-urlencoded: the keys and values are encoded in key-value tuples separated by '&', with a '=' between the key and the value.
... non-alphanumeric characters in both keys and values are percent encoded: this is the reason why this type is not suitable to use with binary data (use multipart/
form-data instead) multipart/
form-data: each value is sent as a block of data ("body part"), with a user agent-defined delimiter ("boundary") separating each part.
...And 3 more matches
JavaScript data types and data structures - JavaScript
the number type is a double-precision 64-bit binary
format ieee 754 value (numbers between -(253 − 1) and 253 − 1).
...tes a key with one of two accessor functions (get and set) to retrieve or store a value, and has the following attributes: attributes of an accessor property attribute type description default value [[get]] function object or undefined the function is called with an empty argument list and retrieves the property value whenever a get access to the value is per
formed.
... the difference between maps and weakmaps is that in the
former, object keys can be enumerated over.
...And 3 more matches
Numbers and dates - JavaScript
« previousnext » this chapter introduces the concepts, objects and functions used to work with and per
form calculations using numbers and dates in javascript.
... this includes using numbers written in various bases including decimal, binary, and hexadecimal, as well as the use of the global math object to per
form a wide variety of mathematical operations on numbers.
... numbers in javascript, numbers are implemented in double-precision 64-bit binary
format ieee 754 (i.e., a number between ±2−1022 and ±2+1023, or about ±10−308 to ±10+308, with a numeric precision of 53 bits).
...And 3 more matches
Date - JavaScript
javascript date objects represent a single moment in time in a plat
form-independent
format.
... date
format and time zone conversions there are a number of methods available to obtain a date in various
formats, as well as to per
form time zone conversions.
... date.utc() accepts the same parameters as the longest
form of the constructor (i.e.
...And 3 more matches
Error.prototype.stack - JavaScript
(note that the error object also possesses the filename, linenumber and columnnumber properties for retrieving these from the error thrown (but only the error, and not its trace).) note that this is the
format used by firefox.
... there is no standard
formatting.
... however, safari 6+ and opera 12- use a very similar
format.
...And 3 more matches
Intl.DisplayNames.supportedLocalesOf() - JavaScript
the intl.displaynames.supportedlocalesof() method returns an array containing those of the provided locales that are supported in date and time
formatting without having to fall back to the runtime's default locale.
...for the general
form of the locales argument, see the intl page.
...for in
formation about this option, see the intl page.
...And 3 more matches
Intl.PluralRules() constructor - JavaScript
for the general
form and interpretation of the locales argument, see the intl page.
...for in
formation about this option, see the intl page.
...possible values are from 0 to 20; the default for plain number and percent
formatting is 0; the default for currency
formatting is the number of minor unit digits provided by the iso 4217 currency code list (2 if the list doesn't provide that in
formation).
...And 3 more matches
Intl.PluralRules.supportedLocalesOf() - JavaScript
the intl.pluralrules.supportedlocalesof() method returns an array containing those of the provided locales that are supported in plural
formatting without having to fall back to the runtime's default locale.
...for the general
form of the locales argument, see the intl page.
...for in
formation about this option, see the intl page.
...And 3 more matches
JSON.parse() - JavaScript
an optional reviver function can be provided to per
form a trans
formation on the resulting object before it is returned.
... reviver optional if a function, this prescribes how the value originally produced by parsing is trans
formed, before being returned.
... // but just to be safe, we want to reject all unexpected
forms.
...And 3 more matches
String.prototype.replace() - JavaScript
to per
form a global search and replace, include the g switch in the regular expression.
...in this case, the function will be invoked after the match has been per
formed.
... the replacement function accepts the matched snippet as its parameter, and uses it to trans
form the case and concatenate the hyphen before returning.
...And 3 more matches
Strict mode - JavaScript
fixes mistakes that make it difficult for javascript engines to per
form optimizations: strict mode code can sometimes be made to run faster than identical code that's not strict mode.
...javascript sometimes makes this basic mapping of name to variable definition in the code impossible to per
form until runtime.
...in strict mode eval creates variables only for the code being evaluated, so eval can't affect whether a name refers to an outer variable or some local variable: var x = 17; var evalx = eval("'use strict'; var x = 42; x;"); console.assert(x === 17); console.assert(evalx === 42); if the function eval is invoked by an expression of the
form eval(...) in strict mode code, the code will be evaluated as strict mode code.
...And 3 more matches
Guide to streaming audio and video - Web media technologies
in this guide, we'll examine the techniques used to stream audio and/or video media on the web, and how you can optimize your code, your media, your server, and the options you use while per
forming the streaming to bring out the best quality and per
formance possible.
... <<<...xxxxxx...>>> protocols in addition to the configuration of the server and the streaming code, there are sometimes special protocols which can be used to optimize per
formance.
... https live streaming https live streaming (hls) is a protocol developed by apple and supported by safari on all of their plat
forms.
...And 3 more matches
Progressive loading - Progressive web apps (PWAs)
in this article we will go even further and improve the per
formance of the app by progressively loading its resources.
... it is faster to load all that in
formation as one file rather than many small ones, but if the user doesn't need everything at the very beginning, we could load only what's crucial and then manage other resources when needed.
...we could go even further and move everything from style.css to the <style> tag in the <head> of index.html — this would improve per
formance even more, but for the readability of the example we will skip that approach too.
...And 3 more matches
vector-effect - SVG: Scalable Vector Graphics
the resulting visual effect of this value is that the stroke width is not dependant on the trans
formations of the element (including non-uni
form scaling and shear trans
formations) and zoom level.
...the scale of that user coordinate system does not change in spite of any trans
formation changes from a host coordinate space.
...the rotation and skew of that user coordinate system is suppressed in spite of any trans
formation changes from a host coordinate space.
...And 3 more matches
Using custom elements - Web Components
high-level view the controller of custom elements on a web document is the customelementregistry object — this object allows you to register a custom element on the page, return in
formation on what custom elements are registered, etc.
...when the icon is focused, it displays the text in a pop up in
formation box to provide further in-context in
formation.
...with this optimization the per
formance of external and internal styles should be similar.
...And 3 more matches
Index - WebAssembly
found 12 pages: # page tags and summary 1 webassembly landing, webassembly, wasm webassembly is a new type of code that can be run in modern web browsers — it is a low-level assembly-like language with a compact binary
format that runs with near-native per
formance and provides languages such as c/c++ with a compilation target so that they can run on the web.
... 2 caching compiled webassembly modules caching, indexeddb, javascript, module, webassembly, compile, wasm caching is useful for improving the per
formance of an app — we can store compiled webassembly modules on the client so they don't have to be downloaded and compiled every time.
... 6 converting webassembly text
format to wasm webassembly, assembly, conversion, text
format, wabt, wasm, wast2wasm, wat2wasm webassembly has an s-expression-based textual representation, an intermediate
form designed to be exposed in text editors, browser developer tools, etc.
...And 3 more matches
WebAssembly
webassembly is a new type of code that can be run in modern web browsers — it is a low-level assembly-like language with a compact binary
format that runs with near-native per
formance and provides languages such as c/c++, c# and rust with a compilation target so that they can run on the web.
... in a nutshell webassembly has huge implications for the web plat
form — it provides a way to run code written in multiple languages on the web at near native speed, with client apps running on the web that previously couldn’t have done so.
...this allows you to take advantage of webassembly's per
formance and power and javascript's expressiveness and flexibility in the same apps, even if you don't know how to write webassembly code.
...And 3 more matches
Modules - Archive of obsolete content
this object
forms the central access point for all functionality provided by the host application.
...compartments with chrome privileges have access to the components object, giving them full access to the host plat
form.
...a wrapper behaves exactly like the wrapped object, with one difference: for each property access/function it per
forms an access check to make sure that the calling script is actually allowed to access/call that property/function.
...And 2 more matches
Low-Level APIs - Archive of obsolete content
frame/utils provides helper functions for working with plat
form internals like frames and browsers.
... plat
form/xpcom implement xpcom objects, factories, and services.
... system/runtime access to in
formation about firefox's runtime environment.
...And 2 more matches
package.json - Archive of obsolete content
the package.json file contains manifest data for your add-on, providing not only descriptive in
formation about the add-on for presentation in the add-ons manager, but other metadata required of add-ons.
... some of its entries, such as icon, name, and description, have direct analogues in the install manifest
format, and entries from package.json are written into the install manifest when the add-on is built using jpm xpi.
... string in the guid
format.
...And 2 more matches
Multiple item extension packaging - Archive of obsolete content
multiple item package file layout the multiple item package file layout is a simplified
form of an installable bundle and requires a file extension of xpi.
...if this is not done, any items that are not compatible will not be installed unless a compatibility check discovers updated compatibility in
formation.
... installation installation can be per
formed using any of the existing methods used for installing extensions / themes.
...And 2 more matches
Appendix: What you should know about open-source software licenses - Archive of obsolete content
range of uses restricted to author unrestricted book print, publish, revise read music record, per
form, revise listen movie distribute, screen, revise watch software copy, distribute, modify execute licenses are a use permit in order to use (in the authorial sense) a copyrighted work, the user must either receive a use permit from the copyright holder, or must be assigned partial rights by the author.
...redistribution and use in source and binary
forms, with or without modification, are permitted provided that the following conditions are met: 1.
...redistributions in binary
form must reproduce the above copyright notice, this list of conditions and the following disclaimer in the documentation and/or other materials provided with the distribution.
...And 2 more matches
Chapter 2: Technologies used in developing extensions - Archive of obsolete content
for more in
formation on these technologies, please refer to other sources.
...it has a number of useful qualities: it is generic, extensible, and easy to validate as well-
formed.
... some examples of xml-based markup languages include xhtml, which is html redefined on an xml base; svg, for expressing vector images; and mathml, for expressing mathematical
formulas.
...And 2 more matches
Intercepting Page Loads - Archive of obsolete content
note: per
formance is very important when it comes to add-ons and page loads.
... read the recommendations in appendix a regarding per
formance if you're planning on implementing any of these.
... asubject.cancel(components.results.ns_binding_aborted); } } } this example shows how you can obtain the url for the request, analyze it using regular expressions, and per
form actions on it such as modifying http headers, or even canceling the request.
...And 2 more matches
In-Depth - Archive of obsolete content
check out the section on organizing images for more in
formation.
... on the right hand side of the dom inspector, what will be listed is the dom node in
formation.
...click the icon located above the dom in
formation and choose css style rules.
...And 2 more matches
Repackaging Firefox - Archive of obsolete content
install.rdf meta-in
formation about your extension, such as the creator (your organization), a unique id, and which versions of firefox are supported.
... if the value is the same for *all* locales, it can be set in the partner.js file itself, see the section "preferences" for more in
formation.
...see the mdc documentation for more in
formation on them.
...And 2 more matches
GRE Registration - Archive of obsolete content
successfully embedding the gre requires that in
formation about installed gres be stored on the system.
... this in
formation is stored differently on each operating system.
... windows on windows, gre registration in
formation is kept in the win32 registry under the hkey_local_machine/software/mozilla.org/gre and hkey_current_user/software/mozilla.org/gre keys.
...And 2 more matches
Hidden prefs - Archive of obsolete content
until it is fully reviewed, it may contain inaccurate or incorrect in
formation.
... address book "get map" button pref ("mail.addr_book.mapit_url.
format" ) the
format for this pref is: @a1 == address, part 1 @a2 == address, part 2 @ci == city @st == state @zi == zip code @co == country if the pref is set to "", no "get map" button will appear in the addressbook card preview pane.
... the default (defined in mailnews.js) is: pref("mail.addr_book.mapit_url.
format", "http://www.mapquest.com/maps/map.adp...st&zipcode=@zi"); addressbook quick search query pref ("mail.addr_book.quicksearchquery.
format" ) the
format for this pref is: @v == the escaped value typed in the quick search bar in the addressbook every occurance of @v will be replaced.
...And 2 more matches
New Skin Notes - Archive of obsolete content
when the skin is updated on test/docs, edit
form textarea should be resizeable in all browsers.
...--dria wordpress skins need footer in
formation.
...--nickolay 04:52, 25 aug 2005 (pdt) the clear/boths aren't in the content, they're embedded style in
formation in the .php files in the /includes directory.
...And 2 more matches
Table Layout Strategy - Archive of obsolete content
this in
formation is hold in the adjusted width's.
... due to this there are 10 width in
formations for every column.
... 9 // width after the table has been balanced, considering all of the others the priority of allocations for columns is as follows: max(min_con, min_adj) max (pct, pct_adj) fix fix_adj max(des_con, des_adj), but use min_pro if present for a fixed width table, the column may get more space if the sum of the col allocations is insufficient column width info columns get their width in
formation from style info <col width="200px"> and from the cells that belong into this column.
...And 2 more matches
XML in Mozilla - Archive of obsolete content
please help updating it with current in
formation.
...mozilla will read internal (dtd) subsets, and in special circumstances external dtds as explained above and will use this in
formation to recognize id type attributes, default attribute values, and general entities.
...files that go through the html code path are not checked for well-
formedness.
...And 2 more matches
addFile - Archive of obsolete content
this parameter can also be null, in which case the xpisourcepath parameter is used as a relative pathname.note that the registry pathname is not the location of the software on the machine; it is the location of in
formation about the software inside the client version registry.
...to move this and all other files to their final location, call the per
forminstall method after you've successfully added all files.
... note: if you are installing binary files on a macintosh, be aware that the binary
format for those files must be applesingle if the resource in
formation is to be installed properly.
...And 2 more matches
Accessing Files - Archive of obsolete content
file and stream guide: [ nsiscriptableio | accessing files | getting file in
formation | reading from files | writing to files | moving, copying and deleting files | uploading and downloading files | working with directories ] important note: the pages from the file and stream guide use the io object (nsiscriptableio), which was not available in any released version of the plat
form (pending some fixes).
...var file = io.getfile("profile", "sample.txt"); if (file.exists()) alert("the file is there!"); else alert("file not found!"); here, the same file is retrieved and a further check is per
formed to see whether the file is present or not.
...for more in
formation about this, see working with directories.
...And 2 more matches
OpenClose - Archive of obsolete content
when an menu item is selected, it fires a command event so that code may be used to per
form an action.
...if you need to per
form uninitialization that would be done during these events, this could be done during an unload event.
... popups attached using the context attribute are opened when the user per
forms an action that attempts to open a context menu.
...And 2 more matches
RDF Modifications - Archive of obsolete content
the template builder uses these notifcations to update the template as necessary based on the new or removed in
formation.
...these are called when per
forming a lot of operations on a datasource.
...now, the potential result so far is: (?photo = http://www.xulplanet.com/ndeakin/images/t/obelisk.jpg, ?description = 'one of the thirty or so egyptian obelisks', ?start = http://www.xulplanet.com/rdf/myphotos, ?title = 'obelisk') as you can see, the result looks to have all the in
formation necessary to create a new item in the output.
...And 2 more matches
Complete - Archive of obsolete content
for more in
formation about developing extensions, see the main extensions page here.
...the xpi contains: install.rdf in
formation about the extension chrome.manifest registration data for firefox etc.
...for more in
formation about version checks, see: extension versioning, update and compatibility the installed jar to use disk space efficiently on the end user's computer, the three directories (content, locale, skin) are packed in a jar file.
...And 2 more matches
Adding Event Handlers - Archive of obsolete content
for example, you may use urls of the following
form: <script src="findfile.js"/> <script src="chrome://findfiles/content/help.js"/> <script src="http://www.example.com/js/items.js"/> this tutorial does not attempt to describe how to use javascript (except as related to event handling) as this is a fairly large topic and there are plenty of other resources that are available for this.
...the
former may only handle bubbling events but tends to be simpler to write.
...using the attribute
form is more common for most events.
...And 2 more matches
Custom Tree Views - Archive of obsolete content
you might also implement a custom view when you want to per
form computations on the data to be displayed.
...the following example shows this: <tree id="my-tree" flex="1"> <treecols> <treecol id="namecol" label="name" flex="1"/> <treecol id="datecol" label="date" flex="1"/> </treecols> <treechildren/> </tree> to assign data to be displayed in the tree, the view object needs to be created which is used to indicate the value of each cell, the total number of rows plus other optional in
formation.
... the tree will call methods of the view to get the in
formation that it needs to display.
...And 2 more matches
Document Object Model - Archive of obsolete content
« previousnext » the document object model (dom) can be used with xul elements to get in
formation about them or modify them.
...once we have an indication of whether it is checked or not, we can use the state to per
form the search.
...while we're at it, let's also hide the splitter and results tree as we only need to show them after a search is per
formed.
...And 2 more matches
Input Controls - Archive of obsolete content
« previousnext » xul has elements that are similar to the html
form controls.
... looking for a guide to using input controls and
forms on the web?
... see
forms in html.
...And 2 more matches
Tree View Details - Archive of obsolete content
the tree will use this in
formation to determine the hierarchical structure of the rows.
...the view should then per
form any necessary operations to retrieve the child rows and then update the tree with the new rows.
...in this case, we use the rowcountchanged function to in
form the tree that some rows were added to the underlying data.
...And 2 more matches
checkbox - Archive of obsolete content
more in
formation is available in the xul tutorial.
... depending on the plat
form and theme being used, some elements will have set a maximum width so they will always appear cropped.
...in the case of
form elements, it will not be submitted.
...And 2 more matches
colorpicker - Archive of obsolete content
in the case of
form elements, it will not be submitted.
... the disabled attribute is allowed only for
form controls.
...you can assign a string of the
form #rrggbb to this property to change the selected color.
...And 2 more matches
key - Archive of obsolete content
more in
formation is available in the xul tutorial.
...in the case of
form elements, it will not be submitted.
... the disabled attribute is allowed only for
form controls.
...And 2 more matches
listbox - Archive of obsolete content
see list controls for more in
formation.
...in the case of
form elements, it will not be submitted.
... the disabled attribute is allowed only for
form controls.
...And 2 more matches
listitem - Archive of obsolete content
more in
formation is available in the xul tutorial.
... depending on the plat
form and theme being used, some elements will have set a maximum width so they will always appear cropped.
...in the case of
form elements, it will not be submitted.
...And 2 more matches
menuitem - Archive of obsolete content
more in
formation is available in the xul tutorial.
... depending on the plat
form and theme being used, some elements will have set a maximum width so they will always appear cropped.
...in the case of
form elements, it will not be submitted.
...And 2 more matches
menulist - Archive of obsolete content
more in
formation is available in the xul tutorial.
... depending on the plat
form and theme being used, some elements will have set a maximum width so they will always appear cropped.
...in the case of
form elements, it will not be submitted.
...And 2 more matches
stringbundle - Archive of obsolete content
more in
formation is available in the xul tutorial.
... the "src" attribute accepts only absolute chrome:// urls (see bugs 133698, 26291) attributes src properties applocale , src, stringbundle, strings methods get
formattedstring, getstring examples (example needed) attributes src type: uri the uri of the property file that contains the localized strings.
...eight, minwidth, mousethrough, observes, ordinal, orient, pack, persist, popup, position, preference-editable, querytype, ref, removeelement, sortdirection, sortresource, sortresource2, statustext, style, template, tooltip, tooltiptext, top, uri, wait-cursor, width properties applocale obsolete since gecko 1.9.1 type: nsilocale returns the xpcom object which holds in
formation about the user's locale.
...And 2 more matches
textbox - Archive of obsolete content
more in
formation is available in the xul tutorial.
...in the case of
form elements, it will not be submitted.
... the disabled attribute is allowed only for
form controls.
...And 2 more matches
toolbarbutton - Archive of obsolete content
more in
formation is available in the xul tutorial.
... depending on the plat
form and theme being used, some elements will have set a maximum width so they will always appear cropped.
...in the case of
form elements, it will not be submitted.
...And 2 more matches
Debugging a XULRunner Application - Archive of obsolete content
there are two different consoles available and various preferences which will ensure that the in
formation you need to know is displayed on them.
.../* debugging prefs */ pref("browser.dom.window.dump.enabled", true); pref("javascript.options.showinconsole", true); pref("javascript.options.strict", true); pref("nglayout.debug.disable_xul_cache", true); pref("nglayout.debug.disable_xul_fastload", true); don't forget to change these preferences back to their defaults when you've finished debugging; leaving them as-is can significantly harm per
formance and usability.
... see: preference reference for more in
formation about these preferences.
...And 2 more matches
NPAPI plugin developer guide - Archive of obsolete content
for example, the adobe flash plug-in is used to access flash content (including videos and certain interactive applications), and the quicktime and realplayer plugins are used to play special
format videos in a web page.
...if there are plugin features which are not available in the web plat
form, we encourage developers to post their use cases to mozilla.dev.plat
form project list, so that mozilla can prioritize web plat
form work to make those use cases possible.
... plug-in basics how plug-ins are used plug-ins and helper applications how plug-ins work understanding the runtime model plug-in detection how gecko finds plug-ins checking plug-ins by mime type overview of plug-in structure understanding the plug-in api plug-ins and plat
form independence windowed and windowless plug-ins the default plug-in using html to display plug-ins plug-in display modes using the object element for plug-in display nesting rules for html elements using the appropriate attributes using the embed element for plug-in display using custom embed attributes plug-in references plug-in development overview writing ...
...And 2 more matches
NPAnyCallbackStruct - Archive of obsolete content
« gecko plugin api reference « plug-in side plug-in api summary note: this structure is only used on unix plat
forms.
... contains in
formation required during embedded mode printing.
... description callback structures are used to pass plat
form-specific in
formation.
...And 2 more matches
NPN_GetValueForURL - Archive of obsolete content
« gecko plugin api reference « browser side plug-in api summary provides in
formation to a plugin which is associated with a given url, for example the cookies or preferred proxy.
... variable selects the type of in
formation to be retrieved (npnurlvcookie or npnurlvproxy) url the url for which to fetch in
formation.
...the browser passes back the requested in
formation.
...And 2 more matches
Plugins - Archive of obsolete content
if there are plugin features which are not available in the web plat
form, we encourage developers to post their use cases to mozilla.dev.plat
form project list, so that mozilla can prioritize web plat
form work to make those use cases possible.
... for more in
formation about plugin roadmap, see non-archived plugin in
formation.
...for example, the adobe reader plugin lets the user open pdf files directly inside the browser, and the quicktime and realplayer plugins are used to play special
format videos in a web page.
...And 2 more matches
Getting Started - Archive of obsolete content
however, those experienced with rss may also find this useful as an aid in filling in any missing in
formation about rss that they were not aware of, or as a refresher guide.
...if a word processor is used, you must make sure to save your rss files in a (pure and plain) text
format.
...you'll retain the in
formation more and absorb it better if you create the rss files yourself.
...And 2 more matches
0.90 - Archive of obsolete content
it was created by netscape to be a metadata
format providing a summary of a website.
... (and not only a syndication
format, as it is today.) rss 0.90 is an rdf-based
format.
...producers of rssshould not be creating rss 0.90 feeds, andshould instead use a newer non-deprecated rss
format.
...And 2 more matches
Create Your Own Firefox Background Theme - Archive of obsolete content
image requirements dimensions should be 3000px wide × 200px high png or jpg file
format image must be no larger than 300 kb in file size tips subtle, soft contrast images and gradients work best; highly detailed images will compete with the browser ui.
... the upper right-hand side of the image should have the most important in
formation—as a user increases the width of the browser window, the browser reveals more of the left-hand side of the image.
... image requirements dimensions should be 3000px wide × 100px high png or jpg file
format image must be no larger than 300 kb in file size tips subtle, soft contrast images and gradients work best; highly detailed images will compete with the browser ui.
...And 2 more matches
Theme changes in Firefox 3 - Archive of obsolete content
filename css file details changes to the default theme the table below lists changes made in the default theme for firefox 3; you can use this in
formation as a starting point for figuring out the changes you need to make.
... all file list all plat
forms file description of change browser/themes/*/browser/browser.css the width of the drag and drop indicator is no longer calculated during the drag (tabbrowser.xml).
...instead .tabs-left now displayed and given the same width as the
former margin-left.
...And 2 more matches
Using the W3C DOM - Archive of obsolete content
« previousnext » the document object has properties for accessing collections of elements, such as document.images and document.
forms.
... unsupported dom-related properties the following ie proprietary document object properties are not supported in the w3c document object model: document.layers[] id_attribute_value document.all document.all.id_attribute_value document.all[id_attribute_value] the following
form related properties (originally from internet explorer) are not supported in the w3c document object model:
formname.inputname.value inputname.value
formctrlname document.
forms(0) (note: document.
forms[0] (using square brackets) uses the dom standard
forms collection) scripts that use these properties will throw errors in most standards-compliant browsers.
... ie-specific ways to access elements w3c web standards replacements id_attribute_value document.getelementbyid() document.all.id_attribute_value document.getelementbyid() document.all[id_attribute_value] document.getelementbyid()
formname.inputname.value document.
forms["
formname"].inputname.value or document.
forms["
formname"].elements["inputname"].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"] docum...
...And 2 more matches
Properly Using CSS and JavaScript in XHTML Documents - Archive of obsolete content
xhtml™ 1.0 the extensible hypertext markup language (second edition) defines xhtml to be a re
formulation of html 4 as an xml 1.0 application.
...however when an xhtml page is served with mime type text/xml or application/xhtml+xml, then it should be treated as an xml document which must con
form to the strict rules for authoring and displaying xml.
... } </script> note that this example is not well
formed xhtml since the use of raw < is only allowed as a part of markup in xhtml or xml.
...And 2 more matches
Archived open Web documentation - Archive of obsolete content
it does this by providing access to the xml document in a
form that feels natural for ecmascript programmers.
... properly using css and javascript in xhtml documents xhtml™ 1.0 the extensible hypertext markup language (second edition) defines xhtml to be a re
formulation of html 4 as an xml 1.0 application.
... x
forms x
forms were envisioned as the future of online
forms as envisioned by the w3c.
...And 2 more matches
Index - Game development
12 2d collision detection 2d, games, javascript, collision detection one of the simpler
forms of collision detection is between two rectangles that are axis aligned — meaning no rotation.
...vertex shaders trans
form shape positions into 3d drawing coordinates.
...this article provides a detailed guide to implementing audio for web games, looking at what works currently across as wide a range of plat
forms as possible.
...And 2 more matches
Game promotion - Game development
website and blog you should definitely create your own website containing all the in
formation about your games, so people can see what you've worked on.
... the more in
formation you can include the better — you should include screenshots, description, trailer, press kit, requirements, available plat
forms, support details and more.
... you'll get bonus points for allowing your users to directly play your games online — at least in demo
form.
...And 2 more matches
3D games on the Web - Game development
the main browsers are all supporting webgl and all you need to focus on is optimizing the per
formance on the devices you use.
...see our explaining basic 3d theory article for all the in
formation you need.
...they can be split into vertex shaders and fragment shaders (or pixel shaders) — the
former trans
forms shape positions to real 3d drawing coordinates, while the latter computes rendering colors and other attributes.
...And 2 more matches
Control flow - MDN Web Docs Glossary: Definitions of Web-related terms
for example, imagine a script used to validate user data from a webpage
form.
...to do this, the script uses a conditional structure or if...else, so that different code executes depending on whether the
form is complete or not: if (field==empty) { promptuser(); } else { submit
form(); } a typical script in javascript or php (and the like) includes many control structures, including conditionals, loops and functions.
... for example, the above excerpt might be inside a function that runs when the user clicks the submit button for the
form.
...And 2 more matches
Packet - MDN Web Docs Glossary: Definitions of Web-related terms
a packet, or network packet, is a
formatted chunk of data sent over a network.
... the maincomponents of a network packet are the user data and control in
formation.
...the control in
formation is the in
formation for delivering the payload.
...And 2 more matches
Synthetic monitoring - MDN Web Docs Glossary: Definitions of Web-related terms
synthetic monitoring involves monitoring the per
formance of a page in a 'laboratory' environment, typically with automation tooling in an environment that is as consistent as possible.
... with a consistent baseline, synthetic monitoring is good for measuring the effects of code changes on per
formance.
... synthetic monitoring involves deploying scripts to simulate the path an end-user might take through a web application, reporting back the per
formance of the simulator experiences.
...And 2 more matches
WCAG - MDN Web Docs Glossary: Definitions of Web-related terms
wcag uses three levels of con
formance: priority 1: web developers must satisfy these requirements, otherwise it will be impossible for one or more groups to access the web content.
... con
formance to this level is described as a.
...con
formance to this level is described as aa or double-a.
...And 2 more matches
Test your skills: HTML accessibility - Learn web development
the given text is a simple in
formation panel with action buttons, but the html is really bad.
... html accessibility 2 in the second task, you have a
form containing three input fields.
... assume that these inputs will be part of a larger
form, and wrap them in an element that associates them all together as a single related group.
...And 2 more matches
Cascade and inheritance - Learn web development
note: on mdn css property reference pages you can find a technical in
formation box, usually at the bottom of the specifications section, which lists a number of data points about that property, including whether it is inherited or not.
... note: see origin of css declarations in introducing the css cascade for more in
formation on each of these and how they work.
... we have covered a lot in this article, but can you remember the most important in
formation?
...And 2 more matches
Organizing your CSS - Learn web development
consistency can be applied in all sorts of ways, such as using the same naming conventions for classes, choosing one method of describing color, or maintaining consistent
formatting (for example will you use tabs or spaces to indent your code?
...
formatting readable css there are a couple of ways you will see css
formatted.
... for example, we might have an online store as part of the site, with a lot of css used only for styling the product listings and
forms needed for the store.
...And 2 more matches
The box model - Learn web development
for further in
formation see the detailed page on mastering margin collapsing.
...the mdn pages for the border properties give you in
formation about the different styles of border you can choose from.
... we have covered a lot in this article, but can you remember the most important in
formation?
...And 2 more matches
Floats - Learn web development
floats have commonly been used to create entire web site layouts featuring multiple columns of in
formation floated so they sit alongside one another (the default behavior would be for the columns to sit below one another, in the same order as they appear in the source).
... max-width: 900px; margin: 0 auto; font: .9em/1.2 arial, helvetica, sans-serif } .wrapper { background-color: rgb(79,185,227); padding: 10px; color: #fff; overflow: auto; } .box { float: left; margin: 15px; width: 150px; height: 150px; border-radius: 5px; background-color: rgb(207,232,220); padding: 1em; } this example works by creating what is known as a block
formatting context (bfc).
... you've reached the end of this article, but can you remember the most important in
formation?
...And 2 more matches
Beginner's guide to media queries - Learn web development
each feature is documented on mdn along with browser support in
formation, and you can find a full list at using media queries: media features.
... @media screen and (min-width: 40em) { article { display: grid; grid-template-columns: 3fr 1fr; column-gap: 20px; } nav ul { display: flex; } nav li { flex: 1; } } this css gives us a two-column layout inside the article, of the article content and related in
formation in the aside element.
... lets continue to expand the width until we feel there is enough room for the sidebar to also
form a new column.
...And 2 more matches
Positioning - Learn web development
for example, popup in
formation boxes and control menus; rollover panels; ui features that can be dragged and dropped anywhere on the page; and so on...
...see the section below for more in
formation) note: you can use top, bottom, left, and right to resize elements if you need to.
...n exactly the same way as absolute positioning, with one key difference: whereas absolute positioning fixes an element in place relative to its nearest positioned ancestor (the initial containing block if there isn't one), fixed positioning usually fixes an element in place relative to the visible portion of the viewport, except if one of its ascendants is a fixed containing block due to its trans
form property being different from none.
...And 2 more matches
What is CSS? - Learn web development
presenting a document to a user means converting it into a
form usable by your audience.
...it can be used to create layout — for example turning a single column of text into a layout with a main content area and a sidebar for related in
formation.
...inside those will be one or more declarations, which take the
form of property and value pairs.
...And 2 more matches
create fancy boxes - Learn web development
its pseudo-element: ::before and ::after and some aside properties like: box-shadow, trans
form, outline, etc.
...just remember that such use of gradient is quite expensive, per
formance wise.
...*/ border-bottom-left-radius: 0; } blockquote a more practical example of using pseudo-elements is to build a nice
formatting for html <blockquote> elements.
...And 2 more matches
What do common web layouts contain? - Learn web development
contains in
formation relevant to all pages (like site name or logo) and an easy-to-use navigation system.
... stuff on the side 1) in
formation complementing the main content; 2) in
formation shared among a subset of pages; 3) alternative navigation system.
...like the header, contains less prominent global in
formation like legal notices or contact info.
...And 2 more matches
How do you host your website on Google App Engine? - Learn web development
google app engine is a powerful plat
form that lets you build and run applications on google’s infrastructure — whether you need to build a multi-tiered web application from scratch or host a static website.
... creating a google cloud plat
form project to use google's tools for your own site or app, you need to create a new project on google cloud plat
form.
... go to the app engine dashboard on the google cloud plat
form console and press the create button.
...And 2 more matches
HTML basics - Learn web development
elements can also have attributes that look like the following: attributes contain extra in
formation about the element that you don't want to appear in the actual content.
...the class attribute allows you to give the element a non-unique identifier that can be used to target it (and any other elements with the same class value) with style in
formation and other things.
...now we'll look at how individual elements are combined to
form an entire html page.
...And 2 more matches
The web and web standards - Learn web development
these two technologies
form the basis of the infrastructure that the internet is built on.
... fast forward to 1989, and timbl wrote in
formation management: a proposal and hypertext at cern; these two publications together provided the background for how the web would work.
...it'll take you a few months to really start to get into it, and then you'll need to keep learning so that your knowledge stays up-to-date with all the new tools and features that appear on the web plat
form, and keep practicing and refining your craft.
...And 2 more matches
HTML Cheatsheet - Learn web development
a line break line 1<br>line 2 line 1 line 2 suggesting a line break it is used to suggest the browser to cut the text on this site if </wbr>there is not enough space to display it on the same line it is used to suggest the browser to cut the text on this site if there is not enough space to display it on the same line date in readable
form it is used to
format the date legibly for the user, such as: <time datetime="2020-05-24" pubdate>published on 23-05-2020</time> it is used to
format the 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.</pr...
...e> this text is in normal
format.
... this text is in code
format.
...And 2 more matches
Define terms with HTML - Learn web development
dictionaries and glossaries
formally associate keywords with one or more descriptions, as in this case: blue (adjective) of a color like the sky in a sunny day.
... i'm feeling blue but we're constantly defining keywords in
formally, as here: firefox is the web browser created by the mozilla foundation.
... how to mark in
formal description in textbooks, the first time a keyword occurs, it's common to put the keyword in bold and define it right away.
...And 2 more matches
Using data attributes - Learn web development
data-* attributes allow us to store extra in
formation on standard, semantic html elements without other hacks such as non-standard attributes, extra properties on dom, or node.setuserdata().
...say you have an article and you want to store some extra in
formation that doesn’t have any visual representation.
... data attributes can also be stored to contain in
formation that is constantly changing, like scores in a game.
...And 2 more matches
Introduction to HTML - Learn web development
we have put together a course that includes all the essential in
formation you need to work towards your goal.
...it contains in
formation such as the page <title>, links to css (if you want to style your html content with css), links to custom favicons, and metadata (data about the html, such as who wrote it, and important keywords that describe the document).
... advanced text
formatting there are many other elements in html for
formatting text that we didn't get to in the html text fundamentals article.
...And 2 more matches
Multimedia and Embedding - Learn web development
we have put together a course that includes all the essential in
formation you need to work towards your goal.
... video and audio content next, we'll look at how to use the html5 <video> and <audio> elements to embed video and audio on our pages, including basics, providing access to different file
formats to different browsers, adding captions and subtitles, and how to add fallbacks for older browsers.
...unlike regular
formats like png/jpg, they don't distort/pixelate when zoomed in — they can remain smooth when scaled.
...And 2 more matches
Graceful asynchronous programming with Promises - Learn web development
explaining basic promise syntax: a real example promises are important to understand because most modern web apis use them for functions that per
form potentially lengthy tasks.
... in the first example, we'll use the fetch() method to fetch an image from the web, the blob() method to trans
form the fetch response's raw body contents into a blob object, and then display that blob inside an <img> element.
... we immediately run the blob() method on this response to ensure that the response body is fully downloaded, and when it is available trans
form it into a blob object that we can do something with.
...And 2 more matches
Functions — reusable blocks of code - Learn web development
every time we manipulated a text string, for example: let mytext = 'i am a string'; let newstring = mytext.replace('string', 'sausage'); console.log(newstring); // the replace() string function takes a source string, // and a target string and replaces the source string, // with the target string, and returns the newly
formed string or every time we manipulated an array: let myarray = ['i', 'love', 'chocolate', 'frogs']; let madeastring = myarray.join(' '); console.log(madeastring); // the join() function takes an array, joins // all the array items together into a single // string, and returns this new string or every time we generated a random number: let mynumber = math.random(); // the random() function gene...
... the built-in code we've made use of so far come in both
forms: functions and methods.
...when creating functions, it is better to just stick to this
form: function mygreeting() { alert('hello'); } you will mainly use anonymous functions to just run a load of code in response to an event firing — like a button being clicked — using an event handler.
...And 2 more matches
Looping code - Learn web development
one small problem we are left with is that the final output sentence isn't very well-
formed: my cats are called bill, jeff, pete, biggles, jasmin, ideally, we want to change the concatenation on the final loop iteration so that we haven't got a comma on the end of the sentence.
... if (splitcontact[0].tolowercase() === searchname) { para.textcontent = splitcontact[0] + '\'s number is ' + splitcontact[1] + '.'; break; } else if (i === contacts.length-1) para.textcontent = 'contact not found.'; } }); </script> </body> </html> first of all we have some variable definitions — we have an array of contact in
formation, with each item being a string containing a name and phone number separated by a colon.
... next, we attach an event listener to the button (btn), so that when it is pressed, some code is run to per
form the search and return the results.
...And 2 more matches
Aprender y obtener ayuda - Learn web development
this article provides some hints and tips in both of these areas that will help you get more out of learning web development, as well as further reading so you can find out more in
formation about each sub-topic should you wish..
... focused thinking is great for concentrating hard on specific subjects, getting into deep problem solving, and improving your mastery of the techniques required — strengthening the neural pathways in your brain where that in
formation is stored.
... i want to start my own company and build a social network that will out-per
form facebook, in two years.
...And 2 more matches
Learn web development
we have put together a course that includes all the essential in
formation you need to work towards your goal.
... web
forms — working with user data web
forms are a potent tool for interacting with users — most commonly, they are used for collecting data from users, or allowing them to control a user interface.
... in the articles listed below, we'll cover all the essential aspects of structuring, styling, and interacting with web
forms.
...And 2 more matches
Theme concepts
if you have a lightweight theme it will be converted to this new theme
format automatically before lightweight themes are deprecated.
...for more in
formation on self-distribution, visit signing and distributing your add-on.
... static animated themes it is possible to create an animated theme using an apng
format image, as in the themes example animated.
...And 2 more matches
Adding a new CSS property
see the gecko overview for more in
formation about the style system.
... (again, see the gecko overview for more in
formation.) it should generally be grouped with related properties.
... (which set the property is in is given in the specification, which says "inherited: yes" or "inherited: no" in the property's definition.) also note that some of the style structs intentionally contain only properties set/reset by a particular common shorthand property; this improves the effectiveness of some of the per
formance and memory optimizations done with the rule tree, and thus we should avoid adding a property not reset by that shorthand to such a struct.
...And 2 more matches
A bird's-eye view of the Mozilla framework
it examines what happens when the user per
forms a simple user interface (ui) action such as clicking a link in the contents panel of the help viewer window shown below.
...the mozilla xptoolkit module provides a similar set of facilities for building cross-plat
form ui controls implemented as xml user interface language (xul) packages.
... 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-plat
form com) objects.
...And 2 more matches
Creating MozSearch plugins
firefox 2 uses a simplified
form of the opensearch
format for storing search plugins.
...for creating search plugins for installation from the web, see creating opensearch plugins for firefox the plugin file the mozsearch
format is similar to the opensearch
format.
...um/ft+uwaaow==</image> <url type="application/x-suggestions+json" method="get" template="http://ff.search.yahoo.com/gossip?output=fxjson&command={searchterms}" /> <url type="text/html" method="get" template="http://search.yahoo.com/search"> <param name="p" value="{searchterms}"/> <param name="ei" value="utf-8"/> <mozparam name="fr" condition="pref" pref="yahoo-fr" /> </url> <search
form>http://search.yahoo.com/</search
form> </searchplugin> let's say the user chooses to use the yahoo!
...And 2 more matches
Debugging Frame Reflow
it provides the following in
formation for each frame at the start of its reflow reflow reason available width, available height computed width, computed height the previous and the next frame in flow and a count number.
... when the frame's reflow is finished the following in
formation is displayed : reflow metric (desired) width, height max.
... on mac this is accomplished with: $ env dyld_library_path="`pwd`/obj-ff-dbg/dist/nightlydebug.app/contents/macos" \ ./obj-ff-dbg/dist/nightlydebug.app/contents/macos/firefox-bin > logfile.txt after loading your testcase, the log file will contain the promised in
formation.
...And 2 more matches
Index
found 172 pages: # page tags and summary 1 firefox firefox, landing, mozilla here you can learn about how to contribute to the firefox project and you will also find links to in
formation about the construction of firefox add-ons, using the developer tools in firefox, and other topics.
... 8 experimental features in firefox experimental, firefox, preferences, features this page lists features that are in nightly versions of firefox along with in
formation on how to activate them, if necessary.
... 11 firefox and the "about" protocol firefox, guide, mozilla, protocols there is a lot of useful in
formation about firefox hidden away behind the about: url protocol.
...And 2 more matches
Cross Process Object Wrappers
however, if an add-on passes a cpow into a plat
form api, and that plat
form api then attempts an unsafe operation on it, this will throw an exception.
... cpows and plat
form apis you can't pass cpows into plat
form apis that expect to receive dom objects.
... also, from firefox 47 onwards, browser code can no longer per
form unsafe cpow operations.
...And 2 more matches
Gecko SDK
furthermore, since a component contains basic functionality, it is intended to run with every product of the mozilla plat
form.
...the gecko sdk is a collection of header files and tools used to develop general xpcom components which add functionality to the existing plat
form, whereas xulrunner is a framework which can be used to run standalone or embedded applications based on the mozilla framework.
... mac x86_64 download n/a n/a n/a n/a mac i386 download download download download n/a mac ppc n/a download download download download linux x86_64 download n/a n/a n/a n/a linux i686 download download download download download the sdk is not officially released for other plat
forms; if you need it, you will probably need to build it yourself.
...And 2 more matches
AsyncShutdown.jsm
consequently, if any service has requested i/o to the profile directory before or during phase profilebeforechange, the system must be in
formed that these requests need to be completed before the end of phase profilebeforechange.
... failing to in
form the system of this requirement can (and has been known to) cause data loss.
...// collect any in
formation that may be useful for debugging shutdown issues with this blocker return status; } }); in this example, at some point during phase profilebeforechange, function condition will be called.
...And 2 more matches
JavaScript OS.Constants
useful, for instance, to access the plat
form code from javascript in conjunction with js-ctypes.
...useful mostly for using js-ctypes to interact with the following plat
forms: macos x; android; linux; other variants of unix.
... os.constants.libc is available on all plat
forms, although some constants are not defined everywhere.
...And 2 more matches
WebRequest.jsm
the event listener receives detailed in
formation about the request, and can modify or cancel the request.
... to per
form one of these operations, include a property with the appropriate name in the object returned from the listener, and assign it the desired value, as detailed in the table below: operation available in return property cancel onbeforerequest cancel boolean value set to true.
...note that you can't pass "blocking" for this event, so you can't modify or cancel the request from this event: it's in
formational only.
...And 2 more matches
Localizing with Mozilla Translator
since it is written in java, any plat
form that supports java 1.7 or above supports mozillatranslator also.
...files hanging directly from the plat
form neutral plat
form can't be part of a partial glossary (because they are not components), and plat
form neutral itself can't be selected either, since it is not a component, but a plat
form.
... from cvs to mercurial in mt so, you have a firefox product in mt with a plat
form neutral and, inside it, several directories (''components'' in mt terminology) more or less like the second sample above, checked out from cvs.
...And 2 more matches
Translation phase
seamonkey seamonkey® is the all-in-one application
formerly known as the "mozilla application suite", containing a web browser, a mail and newsgroups client, an html editor, web development tools, and an irc chat client.
... in-product pages a set of pages used to interact with and give in
formation to the end-user as part of their first experience with their mozilla applications.
... you should also read more in
formation on localizing mozilla web projects.
...And 2 more matches
Localization sign-off reviews
we use this review process to per
form quality assurance (qa) testing on your l10n efforts.
... allows us to understand how each l10n team is per
forming their localization work.
...here is a detailed overview of what a sign-off review is and who it's meant for: a sign-off review: is per
formed as a qa measure for maintaining a localization from release-to-release.
...And 2 more matches
Mozilla Quirks Mode Behavior
give
form a margin-bottom:1em (bug 41806).
... obsolete since gecko 35 (firefox 35.0 / thunderbird 35.0 / seamonkey 2.32) (bug 95530) this quirk is now html5 con
form and has been adopted in standards mode.
... 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).
...And 2 more matches
BloatView
bloatview is a tool that shows in
formation about cumulative memory usage and leaks.
...otal total 1754408 432556 179828 404184 2770976 nsstr 20 6261600 3781900 1120920 1791340 12955760 222760 48760 13280 76160 360960 nshashkey 8 610568 1842400 2457872 1134592 6045432 32000 536 568 1216 34320 nstexttrans
former 548 8220 469088 1414936 1532756 3425000 0 0 0 0 0 nsstylecontextdata 736 259808 325312 489440 338560 1413120 141312 220800 -11040 94944 446016 nslinelayout 1100 2200 225500 402600 562100 1192400 0 0 0 0 0 nslocalfile 424 558832 199...
... perl tools/bloatview/bloatdiff.pl <previous-log> <current-log> this will give you output of the
form: bloat/leak delta report current file: dist/win32_d.obj/bin/bloatlogs/all-1999-10-22-133450.txt previous file: dist/win32_d.obj/bin/bloatlogs/all-1999-10-16-010302.txt -------------------------------------------------------------------------- class leaks delta bloat delta -------------------------------------------------------------------------- total ...
...And 2 more matches
Memory reporting
they provide more in
formation to dmd, which is a tool that helps keep about:memory's "heap-unclassified" number low.
... on plat
forms that allow it, they count the actual memory in use, including "slop" bytes caused by the heap allocator rounding up request sizes (a.k.a.
...if you have both, sizeofexcludingthis is the interesting one; sizeofincludingthis always has the same basic
form.
...And 2 more matches
Refcount tracing and balancing
refcount tracing logs calls to addref and release, preferably for a particular set of classes, including call-stacks in symbolic
form (on plat
forms that support this).
...this requires c++ dynamic casts, so it is not supported on all plat
forms.
... xpcom_mem_alloc_log for plat
forms that don't have stack-crawl support, xpcom supports logging at the call site to addref/release using the usual cpp __file__ and __line__ number macro expansion hackery.
...And 2 more matches
TraceMalloc
the built mozilla application will support the following additional command-line options: --trace-malloc filename the application will log allocation and deallocation events with stack traces in a binary
format to the given file.
...try running with the unified output
format option, -u.
... see nstracemalloc.h for detailed comments on the log file
format.
...And 2 more matches
Leak And Bloat Tests
this page describes how to per
form tests that measure memory leaks and bloat for mailnews and its sub-components.
...provide reasonable coverage for the normal activities that a user per
forms.
...see debugging memory leaks for more in
formation on what to do with this data.
...And 2 more matches
McCoy
it's important that the update in
formation retrieved has not been tampered with since being written by the add-on author.
... https://fireclipse.svn.sourceforge.net/svnroot/fireclipse/trunk/fireclipseextensions/chromebug/mccoy/signontheline/ bug 396525 - patch to mccoy https://bugzilla.mozilla.org/show_bug.cgi?id=396525 signing update manifests before you release your add-on in order to verify the update manifests applications need to already have in
formation from you for how to verify it.
... this is in the
form of the public part of a cryptographic key included in the original add-on you release.
...And 2 more matches
Midas
examples this example shows the basic structure described in the notes section : <html> <head> <title>simple edit box</title> </head> <body> <iframe id="midas
form" src="about:blank" onload="this.contentdocument.designmode='on';" ></iframe> </body> </html> methods document.execcommand executes the given command.
...
formatblock h1, h2, h3, h4, h5, h6, p, div, address, blockquote (more?) the selection surrounded by the given block element.
... heading h1, h2, h3, h4, h5, h6 selected block will be
formatted as the given type of heading.
...And 2 more matches
Nonblocking IO In NSPR
fundamentally, this constraint is due to the fact that nonblocking i/o and <tt>select()</tt> are only available to sockets on some plat
forms (e.g., winsock).
...because these constraints only apply to nt, it is advised that you test your cross-plat
form code that uses nonblocking io on nt early in the development cycle.
...the current implementation of <tt>pr_select()</tt> simply calls <tt>pr_poll()</tt>, so it is sure to have worse per
formance.
...And 2 more matches
Process Forking in NSPR
the threads provided in netscape portable runtime (nspr) are implemented using different mechanisms on the various plat
forms.
... on some plat
forms, nspr threads directly map one-to-one to the threads provided by the plat
form vendor, on other plat
forms nspr threads are basically user-level threads within a single process (with no kernel threads) and on still others nspr threads are user-level threads implemented on top of one or more kernel threads within single address space.
... nspr does not override the fork function and so, when fork is called from the nspr thread the results are different on the various plat
forms.
...And 2 more matches
Atomic Operations
this chapter describes the global functions you use to per
form atomic operations.
...since not all operating environments provide access to such functions, their per
formance may vary considerably.
... atomic operations functions the api defined for the atomic functions is consistent across all supported plat
forms.
...And 2 more matches
Date and Time
in this
form, time is just a point on the time line.
...in this
form, the time zone in
formation is important.
...the nspr data type for clock/calendar time, called an exploded time, has the time zone in
formation in it, so that its corresponding point in absolute time is uniquely specified.
...And 2 more matches
Dynamic Library Linking
plat
form notes to use the dynamic library loading functions on some plat
forms, certain environment variables must be set at run time, and you may need to link your executable programs using special linker options.
... this section summarizes these plat
form idiosyncrasies.
... for more in
formation, consult the man pages for ld and dlopen (or shl_load on hp-ux) for unix, and the loadlibrary documentation for win32.
...And 2 more matches
Long Long (64-bit) Integers
« previousnext » this chapter describes the global functions you use to per
form 64-bit integer operations.
...where 64-bit integers are desired, use of nspr's implementation is recommended to ensure cross-plat
form compatibility.
...the specific implementation of each macro depends on whether the compiler for the target plat
form supports 64-bit integers.
...And 2 more matches
PR_GetOpenFileInfo
gets an open file's in
formation.
...on output, in
formation about the given file is written into the file in
formation object.
... returns the function returns one of the following values: if file in
formation is successfully obtained, pr_success.
...And 2 more matches
PR_GetOpenFileInfo64
gets an open file's in
formation.
...on output, in
formation about the given file is written into the file in
formation object.
... returns the function returns one of the following values: if file in
formation is successfully obtained, pr_success.
...And 2 more matches
NSS_3.12.1_release_notes.html
nss 3.12.1 release notes 2008-09-05 newsgroup: mozilla.dev.tech.crypto contents introduction distribution in
formation new in nss 3.12.1 bugs fixed documentation compatibility feedback introduction network security services (nss) 3.12.1 is a patch release for nss 3.12.
... distribution in
formation the cvs tag for the nss 3.12.1 release is nss_3_12_1_rtm.
...go to the subdirectory for your plat
form, dbg (debug) or opt (optimized), to get the tar.gz or zip file.
...And 2 more matches
NSS 3.12.4 release notes
distribution in
formation this release is built from the source, at the cvs repository rooted at cvs.mozilla.org:/cvsroot, with the cvs tag nss_3_12_4_rtm.
...these
forms cannot be combined, e.g [a-gp-z] does not work.
... bug 321755: implement crldistributionpoint extension in libpkix bug 391434: avoid multiple encoding/decoding of pkix_pl_oid to and from ascii string bug 405297: problems building nss/lib/ckfw/capi/ with mingw gcc bug 420991: libpkix returns wrong nss error code bug 427135: add super-h (sh3,4) architecture support bug 431958: improve des and sha512 for x86_64 plat
form bug 433791: win16 support should be deleted from nss bug 449332: secu_parsecommandline does not validate its inputs bug 453735: when using cert9 (sqlite3) db, set or change master password fails bug 463544: warning: passing enum* for an int* argument in pkix_validate.c bug 469588: coverity errors reported for softoken bug 470055: pkix_httpcertstore_findsocketconnection reuses closed socket bug 47...
...And 2 more matches
NSS 3.31 release notes
distribution in
formation the hg tag is nss_3_31_rtm.
... pk11_gettokenuri - retrieve the uri of a token based on the given slot in
formation.
... pk11uri_
formaturi -
format a pk11uri object to a string.
...And 2 more matches
NSS 3.37 release notes
distribution in
formation the hg tag is nss_3_37_rtm.
... starting with nss version 3.31, an alternative implementation for rng seeding on the linux/unix plat
form was available (bug 1346735), which per
formed seeding exclusively based on /dev/urandom.
... (the classic implementation for rng seeding on the linux/unix plat
form, which may use additional sources for the default seeding, is still available and will be used if seed_only_dev_urandom is undefined.) with nss 3.37, this alternative implementation for linux/unix can be selected in "make" builds by defining the environment variable nss_seed_only_dev_urandom.
...And 2 more matches
NSS 3.50 release notes
distribution in
formation the hg tag is nss_3_50_rtm.
... notable changes in nss 3.50 verified primitives from hacl* were updated, bringing per
formance improvements for several plat
forms.
... note that intel processors with sse4 but without avx are currently unable to use the improved chacha20/poly1305 due to a build issue; such plat
forms will fall-back to less optimized algorithms.
...And 2 more matches
NSS 3.55 release notes
the nss team would like to recognize first-time contributors: danh distribution in
formation the hg tag is nss_3_55_rtm.
...special thanks to the network and in
formation security group (nisec) at tampere university.
...with this function, a given slot can be queried with a der-encoded certificate, providing per
formance and usability improvements over other mechanisms.
...And 2 more matches
NSS Developer Tutorial
nss coding style
formatting line length should not exceed 80 characters.
... curly braces: both of the following styles are allowed: if (condition) { action1(); } else { action2(); } or: if (condition) { action1(); } else { action2(); } the
former style is more common.
...in new code, prefer the
former style, as it conserves vertical space.
...And 2 more matches
nss tech note1
this decoder was written when per
formance issues were discovered with the classic decoder.
...quickder was written to be as compatible as possible with the classic decoder, in order to ease migration to it in areas of critical per
formance bottlenecks.
...this in
formation is stored in the next lowest tag bit (number 5).
...And 2 more matches
PKCS #11 Module Specs
the file
format consists of name/value pairs of the
form name=value.
...if the value is quoted, then the value is terminated with and ending quote of the
form ', ", ), ], }, or > matching the respective starting quote.
... trustorder - integer value specifying the order in which the trust in
formation for certificates specified by tokens on this pkcs #11 library should be rolled up.
...And 2 more matches
FC_GetInfo
name fc_getinfo - return general in
formation about the pkcs #11 library.
... syntax ck_rv fc_getinfo(ck_info_ptr pinfo); parameters fc_getinfo has one parameter: pinfo points to a ck_info structure description fc_getinfo returns general in
formation about the pkcs #11 library.
... on return, the ck_info structure that pinfo points to has the following in
formation: cryptokiversion: pkcs #11 interface version number implemented by the pkcs #11 library.
...And 2 more matches
Necko Architecture
these locations are represented in the
form we have all grown to know and love as uris.
...urls are the most commonly used
form of a uri.
...for more in
formation see uris and urls.
...And 2 more matches
Multithreading in Necko
http, ftp) operate partially on the background threads to improve per
formance.
... dns thread (0-1) on most plat
forms dns requests a processed on a background thread.
... however, the details of the implementation are heavily plat
form dependent.
...And 2 more matches
Creating JavaScript tests
per
formance testing and general advice do not attempt to test the per
formance of engine features in the test suite.
... please keep in mind that the javascript test suite is run on a wide variety of wildly varying hardware pla
forms, from phones all the way up to servers.
... even tests that check for polynomial time complexity will start to fail in a few years when they have sped up enough to run faster than the granularity of the os scheduler or when run on plat
forms with higher latencies than your development workstation.
...And 2 more matches
Invariants
(the jsval encoding depends on this.) the jsstackframe::down chain never
forms a cycle.
... but note that a stack frame is not necessarily newer than the next stack frame down, thanks to generators!) an object's scope chain (found by chasing jsobject::fslots[jsslot_parent]) never
forms a cycle.
...even if the function is native, there is serious trouble: js_newobject with null parent argument calculates the parent from cx->fp->scopechain, which can be stale if we're on trace.) the chain of properties starting at any jsshape and chasing jsshape::parent never
forms a cycle and does not contain any duplicate jsscopeproperty::slot values other than -1.
...And 2 more matches
Tracing JIT
the recorder in jstracer inserts lins values into a lir buffer held in a page, itself contained within a logical fragment, and the nanojit compilation pipeline and assembler trans
form the lins values into nins values.
... nanojit/assembler.* the nanojit/assembler.cpp and nanojit/assembler.h files define the class assembler, which trans
forms lins values into nins values.
... in other words, an assembler trans
forms lir code into native code.
...And 2 more matches
JIT Optimization Outcomes
notypeinfo optimization failed because there was no type in
formation associated with an object containing the property.
... noanalysisinfo todo noshapeinfo the baseline compiler recorded no usable shape in
formation for this operation.
... notunboxed the object whose property is being accessed is not
formatted as an unboxed object.
...And 2 more matches
JS_GC
per
forms garbage collection in the js memory pool.
... syntax void js_gc(jscontext *cx); // added in spidermonkey 52 void js_gc(jsruntime *rt); // obsolete since jsapi 50 void js_gc(jscontext *cx); // obsolete since jsapi 14 name type description cx jscontext * the context to for which to per
form garbage collection.
... added in spidermonkey 52 rt jsruntime * the runtime to for which to per
form garbage collection.
...And 2 more matches
JS_ReportError
create a
formatted error or warning message to pass to a user-defined error reporting function.
... syntax void js_reporterror(jscontext *cx, const char *
format, ...); bool js_reportwarning(jscontext *cx, const char *
format, ...); name type description cx jscontext * pointer to a js context from which to derive runtime in
formation.
...
format const char *
format string to convert into an error message using js_vsmprintf.
...And 2 more matches
SpiderMonkey 38
it continues to improve per
formance over previous spidermonkey releases, with xxx blah blah blah.
...get it here mozilla-esr38 you will find it in "firefox extended support release 38" package on hg release plat
form support spidermonkey 38 is supported on all the plat
forms where firefox 38 runs.
...on some other plat
forms (sparc, mips), the jit is provided but not supported.
...And 2 more matches
Implementation Details
supported features interfaces refer to specific pages to get in
formation of supported interfaces for interested at api: core: gecko interfaces windows: msaa, ia2, ienumvariant and isimpledom* interfaces linux: at-spi roles refer to specific pages to get in
formation of supported roles for interested at api: gecko msaa ia2 at-spi states refer to specific pages to get in
formation of supported states for interested at api: gecko msaa ia2 at-spi relations refer to specific pages to get in
formation of supported relations for interested at api: gecko msaa ia2 at-spi attributes object attributes refer to specific pages to get in
formation of supported object attributes for interested at api: gecko msaa ia2 at-spi text att...
...ributes refer to specific pages to get in
formation of supported text attributes for interested at api: gecko msaa - doesn't have a way to expose text attributes, use ia2 ia2 at-spi document attributes refer to specific pages to get in
formation of supported document attributes for interested at api: gecko/msaa/ia2 - document attributes are not exposed.
... instead, the same in
formation is available via theisimpledomdocument interface.
...And 2 more matches
Using the Places annotation service
naming your annotations for your annotation name, you should use the
format <namespace>/<name>.
...the annotation service does not currently enforce the annotation name
format, but this may change in the future.
...nstring(aitemid, aname, avalue, aflags, aexpiration); setitemannotationint32(aitemid, aname, avalue, aflags, aexpiration); setitemannotationint64(aitemid, aname, avalue, aflags, aexpiration); setitemannotationdouble(aitemid, aname, avalue, aflags, aexpiration); setitemannotationbinary(aitemid, aname, avalue, adatalen, aflags, aexpiration); from javascript there are two simple function to per
form all of these operations: setpageannotation(auri, aname, avalue, aflags, aexpiration); setitemannotation(aitemid, aname, avalue, aflags, aexpiration); these annotations all take similar parameters: uri or itemid: this is the nsiuri of the page to annotate, or for items in the places database, the id of the item.
...And 2 more matches
Bundling multiple binary components
actually, nspr has portable versions of those features that work across plat
forms.
... this approach uses only one binary for each plat
form (win/mac/linux) but creates complexity in the binaries - loading the methods and creating the wrappers.
...one for each version of gecko and os plat
form.
...And 2 more matches
Preface
xpcom stands for the cross plat
form component object model.
... conventions the
formatting conventions listed below are used to designate specific types of in
formation in the book and make things easier to scan.
... the goal is to use as few
formats as possible, but to distinguish the various different types of in
formation clearly.
...And 2 more matches
Language bindings
these exception objects may be thrown when implementing xpcom interfaces in javascript, and they can provide better diagnostics in the error console if not caught than simply throwing an nsresult's value will.components.idcomponents.id is a constructor that creates native objects that con
form to the nsijsid interface.components.interfacescomponents.interfaces is a read-only object whose properties are interfaces indexed by their names.components.interfacesbyidcomponents.interfacesbyid is a read-only array of classes indexed by iid.components.issuccesscodedetermines whether a given xpcom return code (that is, an nsresult value) indicates the success or failure of an operation, returnin...
...the mozilla javascript engine will per
form garbage collection automatically when the javascript heap grows beyond a certain size.
...the resources here provide in
formation about this language binding and how to use it.pyxpcompyxpcom allows for communication between python and xpcom, such that a python application can access xpcom objects, and xpcom can access any python class that implements an xpcom interface.
...And 2 more matches
nsIAbCard
m: nsisupports method overview astring getcardvalue(in string name) void setcardvalue(in string attrname, in astring value) void copy(in nsiabcard srccard) boolean equals(in nsiabcard card) string converttobase64encodedxml() astring converttoxmlprintdata() string converttoescapedvcard() astring generatename(in long agenerate
format,[optional] in nsistringbundle abundle) astring generatephoneticname(in boolean alastnamefirst) attributes attribute type description firstname astring lastname astring phoneticfirstname astring phoneticlastname astring displayname astring nickname astring ...
... prefermail
format unsigned long allowed values are stored in nsiabprefermail
format.
... astring generatename(in long agenerate
format,[optional] in nsistringbundle abundle) parameters agenerate
format the
format to present the name in: 0 generated name is displayname 1 lastfirst,
formatted following lastfirst
format property in addressbook.properties.
...And 2 more matches
nsIAccessNode
accessible/public/nsiaccessnode.idlscriptable an interface used by in-process accessibility clients to get style, window, markup and other in
formation about a dom node.
...therefore, for bounds in
formation, it is better to use nsiaccessible.getbounds().
... nsidomcssprimitivevalue getcomputedstylecssvalue( in domstring pseudoelt, in domstring propertyname ); parameters pseudoelt the pseudo element to retrieve style for, or empty string for general computed style in
formation for the node.
...And 2 more matches
nsIAccessibleRelation
if the accessible has an nsiaccessible.name() , you can get the nsiaccessible that it was labelled by in order to get more
formatting in
formation.
... note: the label and description (see relation_described_by) relations may be used to prevent redundant in
formation from being presented by the screen reader, since the label and description can occur both on their own, and in the name or description fields of an nsiaccessible.
...if the accessible has an nsiaccessible.description() , you can get the nsiaccessible that it was described by in order to get more
formatting in
formation.
...And 2 more matches
nsIAlertsService
the specific appearance varies from plat
form to plat
form.
... note: since gecko 22, the notifications are provided by firefox and have become plat
form-independent.
...the text must not be too long, otherwise it might be truncated to a plat
form-specific length.
...And 2 more matches
nsICacheVisitor
netwerk/cache/nsicachevisitor.idlscriptable this interface provides in
formation about cache devices and entries.
... inherits from: nsisupports last changed in gecko 1.7 method overview boolean visitdevice(in string deviceid, in nsicachedeviceinfo deviceinfo); boolean visitentry(in string deviceid, in nsicacheentryinfo entryinfo); methods visitdevice() this method is called to provide in
formation about a cache device.
...deviceinfo specifies in
formation about this device.
...And 2 more matches
nsIDownloadManager
toolkit/components/downloads/public/nsidownloadmanager.idlscriptable this interface lets applications and extensions communicate with the download manager, adding and removing files to be downloaded, fetching in
formation about downloads, and being notified when downloads are completed.
... defaultdownloadsdirectory nsilocalfile returns the plat
form default downloads directory.
... amimeinfo the mime in
formation associated with the target; this may include mime type and helper application when appropriate.
...And 2 more matches
nsILocale
intl/locale/idl/nsilocale.idlscriptable represents one locale, which can be used for things like sorting text strings and
formatting numbers, dates and times.
...nsilocale_monetary - monetary
formatting.
... nsilocale_numeric - numeric, non-monetary
formatting.
...And 2 more matches
Using nsILoginManager
to do so securely, they can use nsiloginmanager, which provides for secure storage of sensitive password in
formation and nsilogininfo, which provides a way of storing login in
formation.
...an nsilogininfo object contains the following attributes: hostname,
form submit url, http realm, username, username field, password, and password field.
... the hostname, username and password attributes are mandatory, while the other fields are set based on whether the login is for a web page
form or an http/ftp authentication site login.
...And 2 more matches
nsIMsgIncomingServer
filter(); void closecachedconnections(); void configuretemporaryfilters(in nsimsgfilterlist filterlist); void configuretemporaryreturnreceiptsfilter(in nsimsgfilterlist filterlist); obsolete since gecko 1.8 void displayofflinemsg(in nsimsgwindow awindow); boolean equals(in nsimsgincomingserver server); void forgetpassword(); void forgetsessionpassword(); astring generateprettyname
formigration(); boolean getboolattribute(in string name); boolean getboolvalue(in string attr); acstring getcharattribute(in string name); acstring getcharvalue(in string attr); nsilocalfile getfilevalue(in string relpref, in string abspref); nsimsgfilterlist getfilterlist(in nsimsgwindow amsgwindow); long getintattribute(in string name); long getintvalue(in string attr); nsimsgfolde...
...ndow, in nsiurllistener aurllistener); acstring getpasswordwithui(in astring apromptstring, in astring aprompttitle, in nsimsgwindow amsgwindow, out boolean okayvalue); astring getunicharattribute(in string name); astring getunicharvalue(in string attr); boolean isnewhdrduplicate(in nsimsgdbhdr anewhdr); void onuserorhostnamechanged(in acstring oldname, in acstring newname); void per
formbiff(in nsimsgwindow amsgwindow); void per
formexpand(in nsimsgwindow amsgwindow); void removefiles(); void setboolattribute(in string name, in boolean value); void setboolvalue(in string attr, in boolean value); void setcharattribute(in string name, in acstring value); void setcharvalue(in string attr, in acstring value); void setdefaultlocalpath(in nsilocalfile adefaultlocalpath); ...
... per
formingbiff boolean port long prettyname astring pretty name - should be "userid on hostname" if the pref is not set.
...And 2 more matches
nsIWindowsRegKey
constants root key constants the values for these keys correspond to the values from winreg.h in the ms plat
form sdk.
... the root_key_ prefix corresponds to the hkey_ prefix in the ms plat
form sdk.
...the values defined here correspond to the regsam values defined in winnt.h in the ms plat
form sdk, where access_ is replaced with key_.
...And 2 more matches
nsIXULTemplateBuilder
see the template guide for more in
formation about templates.
...addresult() in
forms the template builder that a new result is available.
... removeresult() in
forms the template builder that a result no longer applies.
...And 2 more matches
XPCOM tasks
and if so, can we narrow it to only those plat
forms that need it?
...see bug 16763 p3 improve the per
formance of the registry.
...it could avoid implementing its own file
format and io; and in many cases, possibly avoid calling into components for registration.
...And 2 more matches
Xptcall Porting Status
this is a status page for the multiplat
form porting of xptcall.
...feel free to email me with questions or to volunteer to contribute xptcall code for any plat
form.
...status status plat
form contributors and <font color="red">?</font> possible contributors notes <font color="white">done</font> win32 x86 john bandhauer <jband@netscape.com> win32 <font color="white">done</font> linux x86 john bandhauer <jband@netscape.com> ulrich drepper <drepper@cygnus.com> unix <font color="white">done</font> freebsd and netbsd x86 christoph toshok <toshok@hungry.com>, john bandhauer <jband@netscape.com> unix (same as linux 86 code) <font color="white">done</font> bsd/os x86 bert driehuis <bert_driehuis@nl.compuware.com> unix (same as linux 86 code) bert contributed patches that *should* do the right thing for all the unixish-x86 versions of this...
...And 2 more matches
XUL Overlays
though there is no
formal restriction on what kind of xul content is located in "base" xul files and what kind should be put in overlays, xul overlays generally define items that are not present in the basic versions of the ui, such as additional components.
...the layout engine loads any overlay files and then flows the resulting xul document, so problems associated with incremental insertion in menus, boxes, tables, and
forms are avoided.
...the chrome registry, which is a special rdf datasource into which user-specific in
formation is persisted, or stored, contains in
formation about the components or additional packages that have been installed with the browser.
...And 2 more matches
Address Book examples
formulate a boolean search string (see nsiabcard for built-in property names): var searchquery = "(or(primaryemail,bw,@v)(nickname,bw,@v)(and(ismaillist,=,true)(notes,bw,@v)))"; searchquery = searchquery.replace(/@v/g, encodeuricomponent("mystr") the search queries use lisp syntax with operators enumerated in nsabquerystringtoexpression.cpp.
...database specific in
formation, that is used on edits.
...if you have it in its nsiabcard
form, then you can delete it in the same way as per deleting a contact.
...And 2 more matches
Autoconfiguration in Thunderbird
configuration server at isp isps have the option to provide their configuration in
formation themselves directly to users, by setting up a web server at autoconfig.<domain>, which simply returns a static xml file with the configuration, as described below.
... manual configuration if guessing fails, the user must manually enter the configuration in
formation.
... users may also choose to manually modify the account settings, even if configuration in
formation is successfully obtained by the methods described above.
...And 2 more matches
Mail and RDF
answering queries: when rdf asks for in
formation about a resource, datasources answer with the results of the query.
... the details answering queries mail uses rdf resource factories to attach mail-specific in
formation to rdf resources.
... (the details of rdf resource factories will be left to rdf documentation for now.) from an rdf resource, it is possible to queryinterface() to the appropriate mail/news object, and then access in
formation from there.
...And 2 more matches
Building a Thunderbird extension 3: install manifest
see developer.thunderbird.net for newer in
formation.
... the install.rdf file is an xml file that provides general in
formation about the extension.
...while this value is in email address
format, it is not an email address.
...And 2 more matches
Zombie compartments
multiple compartments can share a zone, where a zone keeps track of things that can easily and securely be shared between related compartments such as string data and type in
formation.
... any compartments with the following
forms are created by firefox for its own internal use, and can usually be ignored when looking for zombie compartments.
... compartment(http://techcrunch.com/) compartment(http://www.facebook.com/plugins/like.php?...) compartment(https://plusone.google.com/_/+1/fastbutton?...) compartment(http://plat
form.twitter.com/widgets/...utton.html?...) compartment(http://cdn.at.atwola.com/_media/uac/tcode3.html) compartment(https://s-static.ak.fbcdn.net/connec..._proxy.php?...) compartment(http://ads.tw.adsonar.com/adserving/getads.jsp?...) (some of those compartment urls are long and have been truncated.) another thing to beware is each compartment is created for an origin (e.g.
...And 2 more matches
Browser Side Plug-in API - Plugins
npn_getauthenticationinfo this function is called by plug-ins to get http authentication in
formation from the browser.
... npn_getvalue allows the plug-in to query the browser for in
formation.
... npn_getvalueforurl provides in
formation to a plug-in which is associated with a given url, for example the cookies or preferred proxy.
...And 2 more matches
Plug-in Side Plug-in API - Plugins
npp_getvalue allows the browser to query the plug-in for in
formation.
... np_getvalue allows the browser to query the plug-in for in
formation.
... npp_handleevent delivers a plat
form-specific window event to the instance.
...And 2 more matches
CSS Typed Object Model API - Web APIs
this not only simplifies css manipulation, but also lessens the negative impact on per
formance as compared to htmlelement.style.
... css typed om both allows for the per
formant manipulation of values assigned to css properties while enabling maintainable code that is both more understand and easier to write.
... cssnumericvalue an interface representing operations that all numeric values can per
form, including: cssnumericvalue.add - adds supplied numbers to the cssnumericvalue.
...And 2 more matches
CanvasRenderingContext2D.scale() - Web APIs
the canvasrenderingcontext2d.scale() method of the canvas 2d api adds a scaling trans
formation to the canvas units horizontally and/or vertically.
...a scaling trans
formation modifies this behavior.
...the trans
formation matrix scales it by 9x horizontally and by 3x vertically.
...And 2 more matches
Manipulating video using canvas - Web APIs
this tutorial demonstrates how to per
form chroma-keying (also known as the "green screen effect") using javascript code.
... canvas c1 is used to display the current frame of the original video, while c2 is used to display the video after per
forming the chroma-keying effect; c2 is preloaded with the still image that will be used to replace the green background in the video.
... in response to the user beginning playback, this code fetches the width and height of the video, halving each (we will be halving the size of the video when we per
form the chroma-keying effect), then calls the timercallback() method to start watching the video and computing the visual effect.
...And 2 more matches
DataTransfer.mozClearDataAt() - Web APIs
the datatransfer.mozcleardataat() method removes the data associated with the given
format for an item at the specified index.
... if the
format argument is not provided, then the data associated with all
formats is removed.
... if the
format is not found, then this method has no effect.
...And 2 more matches
Detecting device orientation - Web APIs
in particular, hand-held devices such as mobile phones can use this in
formation to automatically rotate the display to remain upright, presenting a wide-screen view of the web content when the device is rotated so that its width is greater than its height.
... there are two javascript events that handle orientation in
formation.
... processing motion events motion events are handled the same way as the orientation events except that they have their own event's name: devicemotion window.addeventlistener("devicemotion", handlemotion, true); what's really changed are the in
formation provided within the devicemotionevent object passed as a parameter of the handlemotion function.
...And 2 more matches
EXT_color_buffer_float - Web APIs
the ext_color_buffer_float extension is part of webgl and adds the ability to render a variety of floating point
formats.
...for more in
formation, see also using extensions in the webgl tutorial.
... extended methods the following sized
formats become color-renderable: gl.r16f, gl.rg16f, gl.rgba16f, gl.r32f, gl.rg32f, gl.rgba32f, gl.r11f_g11f_b10f.
...And 2 more matches
File - Web APIs
the file interface provides in
formation about files and allows javascript in a web page to access their content.
... see using files from web applications for more in
formation and examples.
... blob.prototype.stream() trans
forms the file into a readablestream that can be used to read the file contents.
...And 2 more matches
HTMLCanvasElement.toBlob() - Web APIs
mimetype optional a domstring indicating the image
format.
... exceptions securityerror the canvas's bitmap is not origin clean; at least some of its contents come from secure examples getting a file representing the canvas once you have drawn content into a canvas, you can convert it into a file of any supported image
format.
...for example, to get the image in jpeg
format: canvas.toblob(function(blob){...}, 'image/jpeg', 0.95); // jpeg at 95% quality a way to convert a canvas to an ico (mozilla only) this uses -moz-parse to convert the canvas to ico.
...And 2 more matches
HTMLIFrameElement.referrerPolicy - Web APIs
no referrer in
formation is sent along with requests.
... origin-when-cross-origin send a full url when per
forming a same-origin request, but only send the origin of the document for other cases.
... same-origin a referrer will be sent for same-site origins, but cross-origin requests will contain no referrer in
formation.
...And 2 more matches
HTMLInputElement: invalid event - Web APIs
bubbles no cancelable yes interface event event handler property globaleventhandlers.oninvalid this event can be useful for displaying a summary of the problems with a
form on submission.
... when a
form is submitted, invalid events are fired at each
form control that is invalid.
... the validity of submittable elements is checked before submitting their owner <
form>, or after the checkvalidity() method of the element or its owner <
form> is called.
...And 2 more matches
HTMLScriptElement.referrerPolicy - Web APIs
no referrer in
formation is sent along with requests.
... origin-when-cross-origin send a full url when per
forming a same-origin request, but only send the origin of the document for other cases.
... same-origin a referrer will be sent for same-site origins, but cross-origin requests will contain no referrer in
formation.
...And 2 more matches
MediaCapabilities - Web APIs
the mediacapabilities interface of the media capabilities api provides in
formation about the decoding abilities of the device, system and browser.
...the in
formation can be used to serve optimal media streams to the user and determine if playback should be smooth and power efficient.
... the in
formation is accessed through the mediacapabilities property of the navigator interface.
...And 2 more matches
MediaPositionState.duration - Web APIs
the mediapositionstate dictionary's duration property is used when calling the mediasession method setpositionstate() to provide the user agent with the overall total duration in seconds of the media currently being per
formed.
... this in
formation can then, in turn, be used by the user agent to provide a user interface which displays media playback in
formation to the viewer.
... for example, a browser might use this in
formation 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.
...And 2 more matches
Transcoding assets for Media Source Extensions - Web APIs
[0] (c) copyright 2008, blender foundation / www.bigbuckbunny.org / https://peach.blender.org/about/ tools required when working with mse, the following tools are a must have: ffmpeg — a command-line utility for transcoding your media into the required
formats.
... container and codec support as specified in section 1.1 of the mse spec: goals, mse is designed not to require support for any particular media
format or codec.
... because the audio codec in the mov container is already aac and the video codec is h.264, we can instruct ffmpeg not to per
form transcoding.
...And 2 more matches
Capabilities, constraints, and settings - Web APIs
the twin concepts of constraints and capabilities let the browser and web site or app exchange in
formation about what constrainable properties the browser's implementation supports and what values it supports for each one.
...this may not represent the actual current state of the track, due to properties whose requested values had to be adjusted and because plat
form default values aren't represented.
... checking capabilities you can call mediastreamtrack.getcapabilities() to get a list of all of the supported capabilities and the values or ranges of values which each one accepts on the current plat
form and user agent.
...And 2 more matches
Using the Notifications API - Web APIs
the notifications api lets a web page or app send notifications that are displayed outside the page at the system level; this lets web apps send in
formation to a user even if the application is idle or in the background.
... the system notification system will vary of course by plat
form and browser, but this is ok, and the notifications api is written to be general enough for compatibility with most system notification systems.
...in its simplest
form, we just include the following: notification.requestpermission().then(function(result) { console.log(result); }); this uses the promise-based version of the method.
...And 2 more matches
PasswordCredential.additionalData - Web APIs
the additionaldata property of the passwordcredential interface takes one of a
formdata instance, a urlsearchparams instance, or null.
... syntax passwordcredential.additionaldata =
formdata
formdata = passwordcredential.additionaldata passwordcredential.additionaldata = urlsearchparams ulrsearchparams = passwordcredential.additionaldata value one of a
formdata instance, a urlsearchparams instance, or null.
... example the following example creates a
formdata object with an appended csrf token.
...And 2 more matches
PaymentAddress - Web APIs
the paymentaddress interface of the payment request api is used to store shipping or payment address in
formation.
... it may be useful to refer to the universal postal union web site's addressing s42 standard materials, which provide in
formation about international standards for postal addresses.
...the string is always given in its canonical upper-case
form.
...And 2 more matches
PaymentCurrencyAmount.value - Web APIs
you must convert the entered text to this
form or it will not be valid.
... for uni
formity and consistency, the value is always given using the period (".") as the decimal character, regardless of the user's locale.
... you need to convert the value to this
format before submitting the payment.
...And 2 more matches
PublicKeyCredentialCreationOptions.authenticatorSelection - Web APIs
syntax authenticatorselection = publickeycredentialcreationoptions.authenticatorselection value an object with the following properties: authenticatorattachmentoptional a string which is either "plat
form" or "cross-plat
form".
... the
former describes an authenticator which is bound to the client and which is generally not removable.
... the latter describes a device which may be used across different plat
form (such as a usb or nfc device).
...And 2 more matches
RTCDtlsTransport - Web APIs
the rtcdtlstransport interface provides access to in
formation about the datagram transport layer security (dtls) transport over which a rtcpeerconnection's rtp and rtcp packets are sent and received by its rtcrtpsender and rtcrtpreceiver objects.
... a dtls transport is also used to provide in
formation about sctp packets transmitted and received by an connection's data channels.
... features of the dtls transport include the addition of security to the underlying transport; the rtcdtlstransport interface can be used to obtain in
formation about the underlying transport and the security added to it by the dtls layer.
...And 2 more matches
RTCRtpCapabilities - Web APIs
an rtcrtpcapabilities object contains an array of objects con
forming to rtcrtpcodeccapability (each describing the capabilities of one codec) and an array of the supported rtp header extensions for that codec.
... headerextensions an array of objects con
forming to the rtcrtpheaderextensioncapability dictionary.
... description the codecs array the codecs array is an array of objects con
forming to the dictionary rtcrtpcodeccapability.
...And 2 more matches
RTCStatsType - Web APIs
this in
formation considers only the outbound rtp stream, so any data which requires in
formation about the state of the remote peers (such as round-trip time) is unavailable, since those values can't be computed without knowing about the other peers' states.
...this may include in
formation such as the type of network, the protocol, the url, the type of relay being used, and so forth.
...that is, this in
formation is about your outbound-rtp stream, but as seen by the remote device that's handling the stream.
...And 2 more matches
Resize Observer API - Web APIs
the resize observer api provides a per
formant mechanism by which code can monitor an element for changes to its size, with notifications being delivered to the observer each time the size changes.
... such a solution tends to only work for limited use cases, be bad for per
formance (continually calling the above methods would result in a big per
formance hit), and often won't work when the browser window size is not changed.
... the resize observer api provides a solution to exactly these kinds of problems, and more besides, allowing you to easily observe and respond to changes in the size of an element’s content or border box in a per
formant way.
...And 2 more matches
Sensor APIs - Web APIs
the sensor apis are a set of interfaces built to a common design that expose device sensors in a consistent way to the web plat
form.
...alternatively, the absoluteorientationsensor interface provides in
formation that is algorithmically agregated from two or more device sensors.
...making all this in
formation consistently available is costly to per
formance and battery life.
...And 2 more matches
SubmitEvent - Web APIs
the submitevent interface defines the object used to represent an html
form's submit event.
... this event is fired at the <
form> when the
form's submit action is invoked.
... submitter read only an htmlelement object which identifies the button or other element which was invoked to trigger the
form being submitted.
...And 2 more matches
Touch events - Web APIs
the touch interface, which represents a single touchpoint, includes in
formation such as the position of the touch point relative to the browser viewport.
...its responsibility in this example is to update the cached touch in
formation and to draw a line from the previous position to the current position of each touch.
...hes[i].pagex, touches[i].pagey); ctx.linewidth = 4; ctx.strokestyle = color; ctx.stroke(); ongoingtouches.splice(idx, 1, copytouch(touches[i])); // swap in the new touch record console.log("."); } else { console.log("can't figure out which touch to continue"); } } } this iterates over the changed touches as well, but it looks in our cached touch in
formation array for the previous in
formation about each touch to determine the starting point for each touch's new line segment to be drawn.
...And 2 more matches
WEBGL_debug_renderer_info - Web APIs
the webgl_debug_renderer_info extension is part of the webgl api and exposes two constants with in
formation about the graphics driver for debugging purposes.
...generally, the graphics driver in
formation should only be used in edge cases to optimize your webgl content or to debug gpu problems.
... the webglrenderingcontext.getparameter() method can help you to detect which features are supported and the failifmajorper
formancecaveat context attribute lets you control if a context should be returned at all, if the per
formance would be dramatically slow.
...And 2 more matches
WebGLRenderingContext.getRenderbufferParameter() - Web APIs
the webglrenderingcontext.getrenderbufferparameter() method of the webgl api returns in
formation about the renderbuffer.
...possible values: gl.renderbuffer: buffer data storage for single images in a renderable internal
format.
... pname a glenum specifying the in
formation to query.
...And 2 more matches
WebGLRenderingContext.readPixels() - Web APIs
syntax // webgl1: void gl.readpixels(x, y, width, height,
format, type, pixels); // webgl2: void gl.readpixels(x, y, width, height,
format, type, glintptr offset); void gl.readpixels(x, y, width, height,
format, type, arraybufferview pixels, gluint dstoffset); parameters x a glint specifying the first horizontal pixel that is read from the lower left corner of a rectangular block of pixels.
...
format a glenum specifying the
format of the pixel data.
... exceptions a gl.invalid_enum error is thrown if
format or type is not an accepted value.
...And 2 more matches
Data in WebGL - Web APIs
glsl data types <<document the basic types, vectors, etc; see data type (glsl) on the khronos webgl wiki>> glsl variables there are three kinds of "variable" or data storage available in glsl, each of which with its own purpose and use cases: attributes, varyings, and uni
forms.
...attributes are typically used to store color in
formation, texture coordinates, and any other data calculated or retrieved that needs to be shared between the javascript code and the vertex shader.
... <<how to use>> uni
forms uni
forms are set by the javascript code and are available to both the vertex and fragment shaders.
...And 2 more matches
Introduction to WebRTC protocols - Web APIs
traversal using relays around nat (turn) is meant to bypass the symmetric nat restriction by opening a connection with a turn server and relaying all in
formation through that server.
... sdp session description protocol (sdp) is a standard for describing the multimedia content of the connection such as resolution,
formats, codecs, encryption, etc.
... technically, then, sdp is not truly a protocol, but a data
format used to describe connection that shares media between devices.
...And 2 more matches
Functions and classes available to Web Workers - Web APIs
8 (8) no support no support no support
formdata
formdata objects provide a way to easily construct a set of key/value pairs representing
form fields and their values, which can then be easily sent using the xmlhttprequest send() method.
... 10.0 (yes) 10.1 network in
formation api provides in
formation about the system's connection in terms of general connection type (e.g., 'wifi', 'cellular', etc.).
... per
formance the per
formance interface represents timing-related per
formance in
formation for the given page.
...And 2 more matches
Window.requestAnimationFrame() - Web APIs
the window.requestanimationframe() method tells the browser that you wish to per
form an animation and requests that the browser calls a specified function to update an animation before the next repaint.
...this will request that your animation function be called before the browser per
forms the next repaint.
...requestanimationframe() calls are paused in most browsers when running in background tabs or hidden <iframe>s in order to improve per
formance and battery life.
...And 2 more matches
WindowOrWorkerGlobalScope.setInterval() - Web APIs
nam turpis nunc, suscipit a hendrerit vitae, volutpat non ipsum.</p> <
form> <p>phasellus ac nisl lorem: <input type="text" /><br /> <textarea style="width: 400px; height: 200px;">nullam commodo suscipit lacus non aliquet.
...cras sodales eleifend interdum.</textarea></p> <input type="submit" value="send" /> </
form> <p>duis lobortis sapien quis nisl luctus porttitor.
...one approach to solving this problem is to store in
formation about the state of a timer in an object.
...And 2 more matches
XRWebGLLayer.getNativeFramebufferScaleFactor() static method - Web APIs
this in
formation can be used when creating a new xrwebgllayer to configure the xrwebgllayerinit property framebufferscalefactor in the options specified when calling the xrwebgllayer() constructor.
... the recommended webgl frame buffer resolution is the best possible estimate of the resolution necessary to contain all of fthe xrviews needed by the device while at the same time providing typical applications an acceptable balance of image quality and per
formance.
...consider a frame buffer which at full size looks like this: if, on this device, it's determined that due to gpu limitations the browser needs to reduce image quality in order to improve per
formance to an acceptable level, it might choose to halve the resolution.
...And 2 more matches
Generating HTML - Web APIs
generating html one common application of xslt in the browser is to trans
form xml into html on the client.
... the second example will trans
form the input document (example2.xml), which again contains in
formation about an article, into an html document.
... figure 3 : xsl stylesheet with 2 namespaces (example2.xsl) xsl stylesheet (example2.xsl): <?xml version="1.0"?> <xsl:stylesheet version="1.0" xmlns:xsl="http://www.w3.org/1999/xsl/trans
form" xmlns:myns="http://devedge.netscape.com/2002/de"> <xsl:output method="html"/> ...
...And 2 more matches
Using the aria-required attribute - Accessibility
description the aria-required attribute is used to indicate that user input is required on an element before a
form can be submitted.
... this attribute can be used with any typical html
form element; it is not limited to elements that have an aria role assigned.
...the in
formation provided above is one of those opinions and therefore not normative.
...And 2 more matches
Using URL values for the cursor property - CSS: Cascading Style Sheets
this allows specifying arbitrary images as mouse cursors — any image
format supported by gecko can be used.
... limitations all image
formats supported by gecko can be used.
... note: starting with gecko 2.0, gecko also supports the svg image
format for cursors.
...And 2 more matches
OpenType font features guide - CSS: Cascading Style Sheets
these include things like ligatures (special glyphs that combine characters like 'fi' or 'ffl'), kerning (adjustments to the spacing between specific letter
form pairings), fractions, numeral styles, and a number of others.
...'lining' figures on the other hand sit more uni
formly on their own or in front of capitalized words.
... sometimes it's substance, not just style there are some cases — like with font-variant-east-asian — that opentype features are directly tied to using different
forms of certain glyphs, which can impact meaning and readability.
...And 2 more matches
animation - CSS: Cascading Style Sheets
direction | fill-mode | play-state | name */ animation: 3s ease-in 1s 2 reverse both paused slidein; /* @keyframes name | duration | timing-function | delay */ animation: 3s linear 1s slidein; /* @keyframes name | duration */ animation: slidein 3s; <div class="grid"> <div class="col"> <div class="note"> given the following animation: <pre>@keyframes slidein { from { trans
form: scalex(0); } to { trans
form: scalex(1); } }</pre> </div> <div class="row"> <div class="cell"> <button class="play" title="play"></button> </div> <div class="cell flx"> <div class="overlay">animation: 3s ease-in 1s 2 reverse both paused slidein;</div> <div class="animation a1"></div> </div> </div> <div class="row"> <div cla...
...ay: flex; flex: 1 auto; flex-direction: column; } .cell { box-sizing: border-box; margin: .5em; padding: 0; background-color: #fff; overflow: hidden; text-align: left; } .flx { flex: 1 0; } .note { background: #fff3d4; padding: 1em; margin: .5em; font: .8em sans-serif; text-align: left; flex: none; } .overlay { padding: .5em; } @keyframes slidein { from { trans
form: scalex(0); } to { trans
form: scalex(1); } } .a1 { animation: 3s ease-in 1s 2 reverse both paused slidein; } .a2 { animation: 3s linear 1s slidein; } .a3 { animation: 3s slidein; } .animation { background: #3f87a6; width: 100%; height: calc(100% - 1.5em); trans
form-origin: left center; } window.addeventlistener('load', function () { var animation = array.from(document.queryselector...
... designing safer web animation for motion sensitivity · an a list apart article an introduction to the reduced motion media query | css-tricks responsive design for motion | webkit mdn understanding wcag, guideline 2.2 explanations understanding success criterion 2.2.2 | w3c understanding wcag 2.0
formal definition initial valueas each of the properties of the shorthand:animation-name: noneanimation-duration: 0sanimation-timing-function: easeanimation-delay: 0sanimation-iteration-count: 1animation-direction: normalanimation-fill-mode: noneanimation-play-state: runningapplies toall elements, ::before and ::after pseudo-elementsinheritednocomputed valueas each of the properties of the shorthand:...
...And 2 more matches
backface-visibility - CSS: Cascading Style Sheets
though invisible in 2d, the back face can become visible when a trans
formation causes the element to be rotated in 3d space.
... (this property has no effect on 2d trans
forms, which have no perspective.) syntax /* keyword values */ backface-visibility: visible; backface-visibility: hidden; /* global values */ backface-visibility: inherit; backface-visibility: initial; backface-visibility: unset; the backface-visibility property is specified as one of the keywords listed below.
...
formal definition initial valuevisibleapplies totrans
formable elementsinheritednocomputed valueas specifiedanimation typediscrete
formal syntax visible | hidden examples cube with transparent and opaque faces this example shows a cube with transparent faces, and one with opaque faces.
...And 2 more matches
border-image-slice - CSS: Cascading Style Sheets
these regions
form the components of an element's border image.
...each one is used a single time to
form the corners of the final border image.
... the border-image-repeat, border-image-width, and border-image-outset properties determine how these regions are used to
form the final border image.
...And 2 more matches
calc() - CSS: Cascading Style Sheets
the calc() css function lets you per
form calculations when specifying css property values.
...
formal syntax calc( <calc-sum> )where <calc-sum> = <calc-product> [ [ '+' | '-' ] <calc-product> ]*where <calc-product> = <calc-value> [ '*' <calc-value> | '/' <number> ]*where <calc-value> = <number> | <dimension> | <percentage> | ( <calc-sum> ) accessibility concerns when calc() is used for controlling text size, be sure that one of the values includes a relative length unit, for example: h1 { ...
...stretches across the window, with a 40-pixel gap between both sides of the banner and the edges of the window: .banner { position: absolute; left: 40px; width: calc(100% - 80px); border: solid black 1px; box-shadow: 1px 2px; background-color: yellow; padding: 6px; text-align: center; box-sizing: border-box; } <div class="banner">this is a banner!</div> automatically sizing
form fields to fit their container another use case for calc() is to help ensure that
form fields fit in the available space, without extruding past the edge of their container, while maintaining an appropriate margin.
...And 2 more matches
<color> - CSS: Cascading Style Sheets
although various colors not in the specification (mostly adapted from the x11 colors list) were supported by early browsers, it wasn't until svg 1.0 and css colors level 3 that they were
formally defined.
...the three-digit notation (#rgb) is a shorter version of the six-digit
form (#rrggbb).
...likewise, the four-digit rgb notation (#rgba) is a shorter version of the eight-digit
form (#rrggbbaa).
...And 2 more matches
<display-inside> - CSS: Cascading Style Sheets
these keywords specify the element’s inner display type, which defines the type of
formatting context that lays out its contents (assuming it is a non-replaced element).
... if its outer display type is inline or run-in, and it is participating in a block or inline
formatting context, then it generates an inline box.
... depending on the value of other properties (such as position, float, or overflow) and whether it is itself participating in a block or inline
formatting context, it either establishes a new block
formatting context (bfc) for its contents or integrates its contents into its parent
formatting context.
...And 2 more matches
font-family - CSS: Cascading Style Sheets
system-ui glyphs are taken from the default user interface font on a given plat
form.
... fangsong a particular style of chinese characters that are between serif-style song and cursive-style kai
forms.
...this is some example fangsong text with the chinese characters for "fangsong" in traditional and simple
forms, respectively: 仿宋體 仿宋体.
...And 2 more matches
font-variant-alternates - CSS: Cascading Style Sheets
/* keyword values */ font-variant-alternates: normal; font-variant-alternates: historical-
forms; /* functional notation values */ font-variant-alternates: stylistic(user-defined-ident); font-variant-alternates: styleset(user-defined-ident); font-variant-alternates: character-variant(user-defined-ident); font-variant-alternates: swash(user-defined-ident); font-variant-alternates: ornaments(user-defined-ident); font-variant-alternates: annotation(user-defined-ident); font-variant-alternates: swash(ident1) annotation(ident2); /* global values */ font-variant-alternates: initial; font-variant-alternates: inherit; font-va...
... syntax this property may take one of two
forms: either the keyword normal or one or more of the other keywords and functions listed below, space-separated, in any order.
... historical-
forms this keyword enables historical
forms — glyphs that were common in the past but not today.
...And 2 more matches
image-orientation - CSS: Cascading Style Sheets
it should not be used for any other orientation adjustments; instead, the trans
form property should be used with the rotate <trans
form-function>.
... from-image the exif in
formation contained in the image will be used to rotate the image appropriately.
...for any purpose other than correcting an image's orientation due to how it was shot or scanned, use a trans
form property with the rotate keyword to specify rotation.
...And 2 more matches
rotateX() - CSS: Cascading Style Sheets
the rotatex() css function defines a trans
formation that rotates an element around the abscissa (horizontal axis) without de
forming it.
... its result is a <trans
form-function> data type.
... the axis of rotation passes through an origin, defined by the trans
form-origin css property.
...And 2 more matches
rotateY() - CSS: Cascading Style Sheets
the rotatey() css function defines a trans
formation that rotates an element around the ordinate (vertical axis) without de
forming it.
... its result is a <trans
form-function> data type.
... the axis of rotation passes through an origin, defined by the trans
form-origin css property.
...And 2 more matches
rotateZ() - CSS: Cascading Style Sheets
the rotatez() css function defines a trans
formation that rotates an element around the z-axis without de
forming it.
... its result is a <trans
form-function> data type.
... the axis of rotation passes through an origin, defined by the trans
form-origin css property.
...And 2 more matches
scaleX() - CSS: Cascading Style Sheets
the scalex() css function defines a trans
formation that resizes an element along the x-axis (horizontally).
... its result is a <trans
form-function> data type.
... it modifies the abscissa of each element point by a constant factor, except when the scale factor is 1, in which case the function is the identity trans
form.
...And 2 more matches
translateX() - CSS: Cascading Style Sheets
its result is a <trans
form-function> data type.
... syntax /* <length-percentage> values */ trans
form: translatex(200px); trans
form: translatex(50%); values <length-percentage> is a <length> or <percentage> representing the abscissa of the translating vector.
... a percentage value refers to the width of the reference box defined by the trans
form-box property.
...And 2 more matches
translateY() - CSS: Cascading Style Sheets
its result is a <trans
form-function> data type.
... syntax /* <length-percentage> values */ trans
form: translatey(200px); trans
form: translatey(50%); values <length-percentage> the value is a <length> or <percentage> representing the ordinate of the translating vector.
... a percentage value refers to the height of the reference box defined by the trans
form-box property.
...And 2 more matches
translate - CSS: Cascading Style Sheets
the translate css property allows you to specify translation trans
forms individually and independently of the trans
form property.
... this maps better to typical user interface usage, and saves having to remember the exact order of trans
form functions to specify in the trans
form value.
...
formal definition initial valuenoneapplies totrans
formable elementsinheritednopercentagesrefer to the size of bounding boxcomputed valueas specified, but with relative lengths converted into absolute lengthsanimation typea trans
formcreates stacking contextyes
formal syntax none | <length-percentage> [ <length-percentage> <length>?
...And 2 more matches
Getting Started - Developer guides
it can send and receive in
formation in various
formats, including json, xml, html, and text files.
...for more in
formation on the possible http request methods, check the w3c specs.
...
form data should be sent in a
format that the server can parse, like a query string: "name=value&anothername="+encodeuricomponent(myvar)+"&so=on" or other
formats, like multipart/
form-data, json, xml, and so on.
...And 2 more matches
Creating a cross-browser video player - Developer guides
a poster image is defined for the video, and the preload attribute is set to metadata, which in
forms the browser that it should initially only attempt to load the metadata from the video file rather than the entire video file.
... this provides the player with data such as video duration and
format.
...using these different source
formats gives the best chance of being supported across all browsers that support html5 video.
...And 2 more matches
Media events - Developer guides
various events are sent when handling media that are embedded in html documents using the <audio> and <video> elements; this section lists them and provides some helpful in
formation about using them.
... the element's error attribute contains more in
formation.
... loadedmetadata the media's metadata has finished loading; all attributes now contain as much useful in
formation as they're going to.
...And 2 more matches
Event developer guide - Developer guides
the device on which the web browser is running can trigger events, for example due to a change in its position and orientation in the real world, as discussed partially by the page on orientation coordinate systems and the page on the use of 3d trans
forms.
...such events are commonly called synthetic events, as opposed to the events fired by the browser itself.dom on-event handlersthe web plat
form provides several ways to get notified of dom events.
... two common styles are: the generalized addeventlistener() and a set of specific on-event handlers.media eventsvarious events are sent when handling media that are embedded in html documents using the <audio> and <video> elements; this section lists them and provides some helpful in
formation about using them.mouse gesture eventsgecko 1.9.1 added support for several mozilla-specific dom events used to handle mouse gestures.
...And 2 more matches
Mobile-friendliness - Developer guides
it can be helpful to think of it in terms of three goals for improving your site’s user experience: presentation, content, and per
formance.
... goal #1 (presentation) “make websites that work well on a variety of screen sizes.” these days, users can access the web on devices in a wide range of
form factors, including phones, tablets, and ereaders.
...goal #3 (per
formance) “give your users a smooth experience, even on a slow connection.” though things have been getting better in recent years, browsing the internet over a wireless data connection can still be pretty painful.
...And 2 more matches
Separate sites for mobile and desktop - Developer guides
in a nutshell, this technique uses server-side logic to solve all three goals of mobile web development at once — if the user’s browser looks like it’s on a phone, you serve them mobile content,
formatted for their phone and optimized for speed.
...since only the mobile-specific content, styles, and scripts are sent to mobile users, this method also provides for the best per
formance out of any of the other options presented here.
...this is because the default browsers on some feature-phones do not support the same markup that you would use to code a website targeted at the desktop, but instead understand
formats like xhtml-mp or the older wml.
...And 2 more matches
HTML attribute: pattern - HTML: Hypertext Markup Language
the pattern attribute specifies a regular expression the
form control's value should match.
... if a non-null value doesn't con
form to the constraints set by the pattern value, the validitystate object's read-only patternmismatch property will be true.
... examples given the following: <p> <label>enter your phone number in the
format (123)456-7890 (<input name="tel1" type="tel" pattern="[0-9]{3}" placeholder="###" aria-label="3-digit area code" size="2"/>)- <input name="tel2" type="tel" pattern="[0-9]{3}" placeholder="###" aria-label="3-digit prefix" size="2"/> - <input name="tel3" type="tel" pattern="[0-9]{4}" placeholder="####" aria-label="4-digit number" size="3"/> </label> </p> here we have 3 sections for a no...
...And 2 more matches
<dialog>: The Dialog element - HTML: Hypertext Markup Language
usage notes <
form> elements can close a dialog if they have the attribute method="dialog".
... when such a
form is submitted, the dialog closes with its returnvalue property set to the value of the button that was used to submit the
form.
... examples simple example <dialog open> <p>greetings, one and all!</p> </dialog> advanced example this example opens a pop-up dialog box that contains a
form, when the "update details" button is clicked.
...And 2 more matches
<isindex> - HTML: Hypertext Markup Language
the same behaviour can be achieved with an html
form.
... example <head> <isindex prompt="search document..." action="/search"> </head> in past browsers, this would generate, at parse time, a dom tree equivalent to the following html: <
form action="/search"> <hr> <label> search document...
... <input name="isindex"> </label> <hr> </
form> history on june 1992, dan connolly would prefer a different anchor type instead of isindex.
...And 2 more matches
<script>: The Script element - HTML: Hypertext Markup Language
crossorigin normal script elements pass minimal in
formation to the window.onerror for scripts which do not pass the standard cors checks.
... same-origin: a referrer will be sent for same origin, but cross-origin requests will contain no referrer in
formation.
... strict-origin-when-cross-origin: send a full url when per
forming a same-origin request, but only send the origin when the protocol security level stays the same (e.g.https→https), and send no header to a less secure destination (e.g.
...And 2 more matches
<tbody>: The Table Body element - HTML: Hypertext Markup Language
the <tbody> element, along with its cousins <thead> and <tfoot>, provide useful semantic in
formation that can be used when rendering for either screen or printer as well as for accessibility purposes.
... when printing a document, the <thead> and <tfoot> elements specify in
formation that may be the same—or at least very similar—on every page of a multi-page table, while the <tbody> element's contents generally will differ from page to page.
...this lets you divide the rows in large tables into sections, each of which may be separately
formatted if so desired.
...And 2 more matches
<time> - HTML: Hypertext Markup Language
it may include the datetime attribute to translate dates into machine-readable
format, allowing for better search engine results or custom features such as reminders.
... a precise date in the gregorian calendar (with optional time and timezone in
formation).
... datetime this attribute indicates the time and/or date of the element and must be in one of the
formats described below.
...And 2 more matches
Global attributes - HTML: Hypertext Markup Language
data-*
forms a class of attributes, called custom data attributes, that allow proprietary in
formation to be exchanged between the html and its dom representation that may be used by scripts.
...the attribute contains one “language tag” (made of hyphen-separated “language subtags”) in the
format defined in tags for identifying languages (bcp47).
...it can take several values: a negative value means that the element should be focusable, but should not be reachable via sequential keyboard navigation; 0 means that the element should be focusable and reachable via sequential keyboard navigation, but its relative order is defined by the plat
form convention; a positive value means that the element should be focusable and reachable via sequential keyboard navigation; the order in which the elements are focused is the increasing value of the tabindex.
...And 2 more matches
Microdata - HTML: Hypertext Markup Language
search engines benefit greatly from direct access to this structured data because it allows search engines to understand the in
formation on web pages and provide more relevant results to users.
...microdata is an attempt to provide a simpler way of annotating html elements with machine-readable tags than the similar approaches of using rdfa and classic micro
formats.
...this vocabulary defines a standard set of type names and property names, for example, schema.org music event indicates a concert per
formance, with startdate and location properties to specify the concert's key details.
...And 2 more matches
Using the application cache - HTML: Hypertext Markup Language
using this application cache feature is highly discouraged; it’s in the process of being removed from the web plat
form.
...this is done in the background and does not affect per
formance significantly.
... important: do not specify the manifest itself in the cache manifest file, otherwise it will be nearly impossible to in
form the browser a new manifest is available.
...And 2 more matches
Data URLs - HTTP
they were
formerly known as "data uris" until that name was retired by the whatwg.
... encoding data into base64
format base64 is a group of binary-to-text encoding schemes that represent binary data in an ascii string
format by translating it into a radix-64 representation.
... data:text/html,lots of text...<p><a name%3d"bottom">bottom</a>?arg=val this represents an html resource whose contents are: lots of text...<p><a name="bottom">bottom</a>?arg=val syntax the
format for data urls is very simple, but it's easy to forget to put a comma before the "data" segment, or to incorrectly encode the data into base64
format.
...And 2 more matches
Cache-Control - HTTP
cache-control: max-age=<seconds> cache-control: max-stale[=<seconds>] cache-control: min-fresh=<seconds> cache-control: no-cache cache-control: no-store cache-control: no-trans
form cache-control: only-if-cached cache response directives standard cache-control directives that can be used by the server in an http response.
... cache-control: must-revalidate cache-control: no-cache cache-control: no-store cache-control: no-trans
form cache-control: public cache-control: private cache-control: proxy-revalidate cache-control: max-age=<seconds> cache-control: s-maxage=<seconds> extension cache-control directives extension cache-control directives are not part of the core http caching standards document.
...see "keeping things fresh with stale-while-revalidate" for more in
formation.
...And 2 more matches
Content-Encoding - HTTP
header type entity header forbidden header name no syntax content-encoding: gzip content-encoding: compress content-encoding: deflate content-encoding: identity content-encoding: br // multiple, in the order in which they were applied content-encoding: gzip, identity content-encoding: deflate, gzip directives gzip a
format using the lempel-ziv coding (lz77), with a 32-bit crc.
... this is the original
format of the unix gzip program.
... compress a
format using the lempel-ziv-welch (lzw) algorithm.
...And 2 more matches
Content-Location - HTTP
examples requesting data from a server in different
formats let's say a site's api can return data in json, xml, or csv
formats.
... accept: application/json, text/json content-location: /documents/foo.json accept: application/xml, text/xml content-location: /documents/foo.xml accept: text/plain, text/* content-location: /documents/foo.txt these urls are examples — the site could serve the different filetypes with any url patterns it wishes, such as a query string parameter: /documents/foo?
format=json, /documents/foo?
format=xml, and so on.
... indicating the url of a transaction's result say you have a <
form> for sending money to another user of a site.
...And 2 more matches
Large-Allocation - HTTP
the non-standard large-allocation response header tells the browser that the page being loaded is going to want to per
form a large allocation.
...the large-allocation tells the browser that the web content in the to-be-loaded page is going to want to per
form a large contiguous memory allocation and the browser can react to this header by starting a dedicated process for the to-be-loaded document, for example.
... <megabytes> the expected size of the allocation to be per
formed, in megabytes.
...And 2 more matches
Transfer-Encoding - HTTP
the transfer-encoding header specifies the
form of encoding used to safely transfer the payload body to the user.
...the content-length header is omitted in this case and at the beginning of each chunk you need to add the length of the current chunk in hexadecimal
format, followed by '\r\n' and then the chunk itself, followed by another '\r\n'.
... compress a
format using the lempel-ziv-welch (lzw) algorithm.
...And 2 more matches
X-DNS-Prefetch-Control - HTTP
the x-dns-prefetch-control http response header controls dns prefetching, a feature by which browsers proactively per
form domain name resolution on both links that the user may choose to follow as well as urls for items referenced by the document, including images, css, javascript, and so forth.
... this prefetching is per
formed in the background, so that the dns is likely to have been resolved by the time the referenced items are needed.
...this is useful if you don't control the link on the pages, or know that you don't want to leak in
formation to these domains.
...And 2 more matches
Proxy servers and tunneling - HTTP
forwarding client in
formation through proxies proxies can make requests appear as if they originated from the proxy's ip address.
... this can be useful if a proxy is used to provide client anonymity, but in other cases in
formation from the original request is lost.
...a common way to disclose this in
formation is by using the following http headers: the standardized header: forwarded contains in
formation from the client-facing side of proxy servers that is altered or lost when a proxy is involved in the path of the request.
...And 2 more matches
About JavaScript - JavaScript
the first ever javascript was created by brendan eich at netscape, and has since been updated to con
form to ecma-262 edition 5 and later versions.
...work is always ongoing to improve javascript execution per
formance.
... the chakra engine used in internet explorer (although the language it implements is
formally called "jscript" in order to avoid trademark issues).
...And 2 more matches
Expressions and operators - JavaScript
this section describes the operators and contains in
formation about operator precedence.
...the sole exceptions to type conversion within comparisons involve the === and !== operators, which per
form strict equality and inequality comparisons.
...bitwise operators per
form their operations on such binary representations, but they return standard javascript numerical values.
...And 2 more matches
Loops and iteration - JavaScript
it checks that i is less than the number of options in the <select> element, per
forms the succeeding if statement, and increments i by after each pass through the loop.
... <
form name="select
form"> <p> <label for="musictypes">choose some music types, then click the button below:</label> <select id="musictypes" name="musictypes" multiple="multiple"> <option selected="selected">r&b</option> <option>jazz</option> <option>blues</option> <option>new age</option> <option>classical</option> <option>opera</option> </select> </p> <p><input id="btn" type="button" value="how many are selected?" /></p> </
form> <script> function howmany(selectobject) { let numberselected = 0; for (let i = 0; i < selectobject.options.length; i++) { if (selectobject.options[i].selected) { numberselected++; } } return numberselected; } let btn = document.getelementbyid('btn'); btn.addeventlistener('click', function()...
... { alert('number of options selected: ' + howmany(document.select
form.musictypes)); }); </script> do...while statement the do...while statement repeats until a specified condition evaluates to false.
...And 2 more matches
JavaScript error reference - JavaScript
for more in
formation, follow the links below!
...are deprecatedsyntaxerror: "use strict" not allowed in function with non-simple parameterssyntaxerror: "x" is a reserved identifiersyntaxerror: json.parse: bad parsingsyntaxerror: mal
formed
formal parametersyntaxerror: unexpected tokensyntaxerror: using //@ to indicate sourceurl pragmas is deprecated.
...error: identifier starts immediately after numeric literalsyntaxerror: illegal charactersyntaxerror: invalid regular expression flag "x"syntaxerror: missing ) after argument listsyntaxerror: missing ) after conditionsyntaxerror: missing : after property idsyntaxerror: missing ; before statementsyntaxerror: missing = in const declarationsyntaxerror: missing ] after element listsyntaxerror: missing
formal parametersyntaxerror: missing name after .
...And 2 more matches
RegExp - JavaScript
regexp.prototype[@@match]() per
forms match to given string and returns match result.
... examples using a regular expression to change data
format the following script uses the replace() method of the string instance to match a name in the
format first last and output it in the
format last, first.
... using regular expression to split lines with different line endings/ends of line/line breaks the default line ending varies depending on the plat
form (unix, windows, etc.).
...And 2 more matches
String.raw() - JavaScript
(but it is not identical; see explanations in this issue.) it's used to get the raw string
form of template strings, that is, substitutions (e.g.
... syntax string.raw(callsite, ...substitutions) string.raw`templatestring` parameters callsite well-
formed template call site object, like { raw: ['foo', 'bar', 'baz'] }.
... return value the raw string
form of a given template string.
...And 2 more matches
decodeURI() - JavaScript
the decodeuri() function decodes a uni
form resource identifier (uri) previously created by encodeuri() or by a similar routine.
... syntax decodeuri(encodeduri) parameters encodeduri a complete, encoded uni
form resource identifier.
... return value a new string representing the unencoded version of the given encoded uni
form resource identifier (uri).
...And 2 more matches
decodeURIComponent() - JavaScript
the decodeuricomponent() function decodes a uni
form resource identifier (uri) component previously created by encodeuricomponent or by a similar routine.
... syntax decodeuricomponent(encodeduri) parameters encodeduri an encoded component of a uni
form resource identifier.
... return value a new string representing the decoded version of the given encoded uni
form resource identifier (uri) component.
...And 2 more matches
escape() - JavaScript
note: this function was used mostly for url queries (the part of a url following ?)—not for escaping ordinary string literals, which use the
format "\xhh".
... (hh are two hexadecimal digits, and the
form \xhh\xhh is used for higher-plane unicode characters.) escaped characters in string literals can be expanded by replacing the \x with %, then using the decodeuricomponent() function.
...special characters are encoded with the exception of: @*_+-./ the hexadecimal
form for characters, whose code unit value is 0xff or less, is a two-digit escape sequence: %xx.
...And 2 more matches
<semantics> - MathML
the mathml elements <semantics>, <annotation> and <annotation-xml> are used to combine presentation and content markup and to provide both, layout in
formation and semantic meaning of mathematical expressions.
...the <annotation> element is the container element containing semantic in
formation in a non-xml
format, whereas the <annotation-xml> element contains content in an xml
format, e.g.
... encoding the encoding of the semantic in
formation in the annotation (e.g.
...And 2 more matches
Handling media support issues in web content - Web media technologies
one of the realities of working with audio and video presentation and manipulation on the web is that there are a number of media
formats available, of varying degrees of popularity and with a variety of capabilities.
... the availability of choices is good for the user, in that they can choose the
format that suits their needs best.
...topics we will examine fallbacks, baseline media
formats, and error handling practices that will let your content work in as many situations as possible.
...And 2 more matches
Digital video concepts - Web media technologies
what those values are depends on how you "split up" the color when converting it to numeric
form.
...in bt.709 (used for hdtv), for example, the luma value is the weighted sum of the gamma-corrected red, green, and blue components of the pixel, using the
formula y' = 0.2126r' + 0.7152g' + 0.0722b'.
... this weighting is per
formed because of the previously-mentioned ratio of green, red, and blue cones in the eye.
...And 2 more matches
Add to Home screen - Progressive web apps (PWAs)
manifest the web manifest is written in standard json
format and should be placed somewhere inside your app directory (in the root is probably best) with the name somefilename.webmanifest (we've chosen manifest.webmanifest).
... it contains multiple fields that define certain in
formation about the web app and how it should behave.
...you could also decide to include different types of icons so devices can use the best one they are able to (e.g., chrome already supports the webp
format).
...And 2 more matches
How to make PWAs re-engageable using Notifications and Push - Progressive web apps (PWAs)
notifications can be used by the service worker to show new in
formation to the user, or at least alert them when something has been updated.
... the technology is still at a very early stage — some working examples use the google cloud messaging plat
form, but are being rewritten to support vapid (voluntary application identification), which offers an extra layer of security for your app.
...see the web push data encryption test page for detailed in
formation about securing the server.
...And 2 more matches
Media - Progressive web apps (PWAs)
in
formation: media the purpose of css is to specify how content is presented to the user.
... this presentation can take more than one
form.
...keep in mind that you can't completely control the printed
format.
...And 2 more matches
SVG Presentation Attributes - SVG: Scalable Vector Graphics
ion-vertical image-rendering kerning letter-spacing lighting-color marker-end marker-mid marker-start mask opacity overflow pointer-events shape-rendering solid-color solid-opacity stop-color stop-opacity stroke stroke-dasharray stroke-dashoffset stroke-linecap stroke-linejoin stroke-miterlimit stroke-opacity stroke-width text-anchor text-decoration text-rendering trans
form unicode-bidi vector-effect visibility word-spacing writing-mode attributes alignment-baseline it specifies how an object is aligned along the font baseline with respect to its parent.
... value: auto|srgb|linearrgb|inherit; animatable: yes color-interpolation-filters it specifies the color space for imaging operations per
formed via filter effects.
...quality tradeoffs as it per
forms image processing.
...And 2 more matches
type - SVG: Scalable Vector Graphics
for the <animatetrans
form> element, it defines the type of trans
formation, whose values change over time.
...the other keywords represent convenience shortcuts to allow commonly used color operations to be per
formed without specifying a complete matrix.
... for the <feturbulence> element, it indicates whether the filter primitive should per
form a noise or turbulence function.
...And 2 more matches
values - SVG: Scalable Vector Graphics
the values attribute has different meanings, depending upon the context where itʼs used, either it defines a sequence of values used over the course of an animation, or itʼs a list of numbers for a color matrix, which is interpreted differently depending on the type of color change to be per
formed.
... five elements are using this attribute: <animate>, <animatecolor>, <animatemotion>, <animatetrans
form>, and <fecolormatrix> animate, animatecolor, animatemotion, animatetrans
form for <animate>, <animatecolor>, <animatemotion>, and <animatetrans
form>, values is a list of values defining the sequence of values over the course of the animation.
... working draft no change svg animations level 2the definition of 'values for <animate>, <animatecolor>, <animatemotion>, and <animatetrans
form>' in that specification.
...And 2 more matches
SVG Attribute reference - SVG: Scalable Vector Graphics
svg attributes a to z a accent-height accumulate additive alignment-baseline allowreorder alphabetic amplitude arabic-
form ascent attributename attributetype autoreverse azimuth b basefrequency baseline-shift baseprofile bbox begin bias by c calcmode cap-height class clip clippathunits clip-path clip-rule color color-interpolation color-interpolation-filters color-profile color-rendering contentscripttype contentstyletype cursor cx cy d d decelerate descent diffuseconstant...
... direction display divisor dominant-baseline dur dx dy e edgemode elevation enable-background end exponent externalresourcesrequired f fill fill-opacity fill-rule filter filterres filterunits flood-color flood-opacity font-family font-size font-size-adjust font-stretch font-style font-variant font-weight
format from fr fx fy g g1 g2 glyph-name glyph-orientation-horizontal glyph-orientation-vertical glyphref gradienttrans
form gradientunits h hanging height href hreflang horiz-adv-x horiz-origin-x i id ideographic image-rendering in in2 intercept k k k1 k2 k3 k4 kernelmatrix kernelunitlength kerning keypoints keysplines keytimes l lang lengthadjust letter-spacing lighting-color limitingconeangle loc...
...al m marker-end marker-mid marker-start markerheight markerunits markerwidth mask maskcontentunits maskunits mathematical max media method min mode n name numoctaves o offset opacity operator order orient orientation origin overflow overline-position overline-thickness p panose-1 paint-order path pathlength patterncontentunits patterntrans
form patternunits ping pointer-events points pointsatx pointsaty pointsatz preservealpha preserveaspectratio primitiveunits r r radius referrerpolicy refx refy rel rendering-intent repeatcount repeatdur requiredextensions requiredfeatures restart result rotate rx ry s scale seed shape-rendering slope spacing specularconstant specularexponent speed spreadmethod startof...
...And 2 more matches
<cursor> - SVG: Scalable Vector Graphics
the <cursor> svg element can be used to define a plat
form-independent custom cursor.
... a recommended approach for defining a plat
form-independent custom cursor is to create a png image and define a cursor element that references the png image and identifies the exact position within the image which is the pointer position (i.e., the hot spot).
... the png
format is recommended because it supports the ability to define a transparency mask via an alpha channel.
...And 2 more matches
SVG element reference - SVG: Scalable Vector Graphics
svg elements a to z a <a> <animate> <animatemotion> <animatetrans
form> c <circle> <clippath> <color-profile> d <defs> <desc> <discard> e <ellipse> f <feblend> <fecolormatrix> <fecomponenttransfer> <fecomposite> <feconvolvematrix> <fediffuselighting> <fedisplacementmap> <fedistantlight> <fedropshadow> <feflood> <fefunca> <fefuncb> <fefuncg> <fefuncr> <fegaussianblur> <feimage> <femerge> <femergenode> <femorphology> <feoffset> <fepointlight> <fespecularlighting> <fespotli...
...ient> <meshpatch> <meshrow> <metadata> <mpath> p <path> <pattern> <polygon> <polyline> r <radialgradient> <rect> s <script> <set> <solidcolor> <stop> <style> <svg> <switch> <symbol> t <text> <textpath> <title> <tspan> u <unknown> <use> v <view> svg elements by category animation elements <animate>, <animatecolor>, <animatemotion>, <animatetrans
form>, <discard>, <mpath>, <set> basic shapes <circle>, <ellipse>, <line>, <polygon>, <polyline>, <rect> container elements <a>, <defs>, <g>, <marker>, <mask>, <missing-glyph>, <pattern>, <svg>, <switch>, <symbol>, <unknown> descriptive elements <desc>, <metadata>, <title> filter primitive elements <feblend>, <fecolormatrix>, <fecomponenttransfer>, <fecomposite>, <feconvolvematrix>, <fediffuse...
...lighting>, <fedisplacementmap>, <fedropshadow>, <feflood>,<fefunca>, <fefuncb>, <fefuncg>, <fefuncr>,<fegaussianblur>, <feimage>, <femerge>, <femergenode>, <femorphology>, <feoffset>, <fespecularlighting>, <fetile>, <feturbulence> font elements <font>, <font-face>, <font-face-
format>, <font-face-name>, <font-face-src>, <font-face-uri>, <hkern>, <vkern> gradient elements <lineargradient>, <meshgradient>, <radialgradient>, <stop> graphics elements <circle>, <ellipse>, <image>, <line>, <mesh>, <path>, <polygon>, <polyline>, <rect>, <text>, <use> graphics referencing elements <mesh>, <use> light source elements <fedistantlight>, <fepointlight>, <fespotlight> never-rendered elements <clippath>, <defs>, <hatch>, <lineargradient>, <marker>, <mask>, <meshgradient>, <metadata>, <pattern>, <...
...And 2 more matches
SVG In HTML Introduction - SVG: Scalable Vector Graphics
overview this article and its associated example shows how to use inline svg to provide a background picture for a
form.
... stop.end { stop-color:green; } body.invalid stop.end { stop-color:red; } #err { display:none; } body.invalid #err { display:inline; } </style> <script> function signalerror() { document.getelementbyid('body').setattribute("class", "invalid"); } </script> </head> <body id="body" style="position:absolute; z-index:0; border:1px solid black; left:5%; top:5%; width:90%; height:90%;"> <
form> <fieldset> <legend>html
form</legend> <p><label>enter something:</label> <input type="text"> <span id="err">incorrect value!</span></p> <p><input type="button" value="activate!" onclick="signalerror();"></p> </fieldset> </
form> <svg viewbox="0 0 100 100" preserveaspectratio="xmidymid slice" style="width:100%; height:100%; position:absolute; top:0; left:0; z-index:-1;...
...when the user enters something incorrect into the
form, the script sets the invalid attribute on the <body>, and a style rule changes the gradient end-stop color to red.
...And 2 more matches
Tools for SVG - SVG: Scalable Vector Graphics
inkscape url: www.inkscape.org one of the most important tools for a graphics
format is a decent drawing program.
... moreover, it uses svg as its native file
format.
... batik offers a viewer (squiggle), a rasterizer for png output, an svg pretty printer to
format svg files, and a truetype-to-svg-font converter.
...And 2 more matches
Same-origin policy - Web security
(a "tuple" is a set of items that together comprise a whole — a generic
form for double/triple/quadruple/quintuple/etc.) the following table gives examples of origin comparisons with the url http://store.company.com/dir/page.html: url outcome reason http://store.company.com/dir2/other.html same origin only the path differs http://store.company.com/dir/inner/another.html same origin only the path differs https://store...
... different protocol http://store.company.com:81/dir/page.html failure different port (http:// is port 80 by default) http://news.company.com/dir/page.html failure different host inherited origins scripts executed from pages with an about:blank or javascript: url inherit the origin of the document containing that url, since these types of urls do not contain in
formation about an origin server.
...examples are links, redirects, and
form submissions.
...And 2 more matches
l10n - Archive of obsolete content
if you're supplying different localizations for a string depending on the number of items (that is, whether to use a singular or plural
form) then get() takes a second integer parameter which indicates the number of items there are.
...if you're supplying different localizations for a string for singular or plural
forms, this parameter is the number of items there are in this case.
... var _ = require("sdk/l10n").get; console.log(_("child_id", 1)); console.log(_("child_id", 2)); see the tutorial on plural support for more in
formation.
... var _ = require("sdk/l10n").get; console.log(_("home_town", "alan", "norwich")); see the tutorial on placeholder support for more in
formation.
io/file - Archive of obsolete content
usage paths path specifications in this api are plat
form-specific.
... returns string : a single string
formed by joining the strings on the file system's path separator.
...see text-streams for in
formation on these text stream objects.
...see byte-streams for more in
formation on these byte stream objects.
console - Archive of obsolete content
enables your add-on to log error, warning or in
formational messages.
... console.error(object[, object, ...]) logs the arguments to the console, preceded by "error:" and the name of your add-on: console.error("this is an error message"); error: my-addon: this is an error message console.exception(exception) logs the given exception instance as an error, outputting in
formation about the exception's stack traceback if one is available.
... console.log(object[, object, ...]) logs the arguments to the console, preceded by "info:" and the name of your add-on: console.log("this is an in
formational message"); info: my-addon: this is an in
formational message console.time(name) starts a timer with a name specified as an input parameter.
...the console defines a number of logging levels, from "more verbose" to "less verbose", and a number of different logging functions that correspond to these levels, which are arranged in order of "severity" from in
formational messages, through warnings, to errors.
Getting Started (jpm) - Archive of obsolete content
navigate to it, type jpm init, and hit enter: mkdir my-addon cd my-addon jpm init you'll then be asked to supply some in
formation about your add-on: this will be used to create your add-on's package.json file.
...for more in
formation on jpm init, see the jpm command reference.
...it uses two sdk modules: the action button module, which enables you to add buttons to the browser, and the tabs module, which enables you to per
form basic operations with tabs.
...this is the installable file
format for firefox add-ons.
Developing for Firefox Mobile - Archive of obsolete content
enable usb debugging on the device (step 2 of this link only) on the development machine: install version 1.5 or higher of the add-on sdk install the correct version of the android sdk for your device using the android sdk, install the android plat
form tools next, attach the device to the development machine via usb.
...android plat
form tools will have installed adb in the "plat
form-tools" directory under the directory in which you installed the android sdk.
... make sure the "plat
form-tools" directory is in your path.
...ile supported io/text-streams supported lang/functional supported lang/type supported loader/cuddlefish supported loader/sandbox supported net/url supported net/xhr supported places/bookmarks not supported places/favicon not supported places/history not supported plat
form/xpcom supported preferences/service supported stylesheet/style supported stylesheet/utils supported system/environment supported system/events supported system/runtime supported system/unload supported system/xul-app supported tabs/utils supported test/assert supported ...
Examples and demos from articles - Archive of obsolete content
a possible approach to solve this problem is to nest all the in
formations needed by each animation to start, stop, etc.
...a possible approach to solve this problem is to nest all the in
formations needed by each animation to start, stop, etc.
... filter the digitation into a
form field, capture the digitation of a hidden word this example shows the use of the onkeypress event during a digitation into a
form field.
... ajax – submitting
forms and uploading files this paragraph shows how to submit
forms in pure-ajax.
Label and description - Archive of obsolete content
<description>i am your father's brother's nephew's cousin's
former roommate.
... <description style="white-space: pre-wrap;">i am your father's brother's nephew's cousin's
former roommate.
... <description style="white-space: pre;">i am your father's brother's nephew's cousin's
former roommate.
... <description>i am your father's brother's nephew's cousin's
former roommate.<html:br/> what's that make us?<html:br/> absolutely nothing!</description> using labels as anchors its possible to make a label look and act like an html <a> tag: <label class="text-link" href="http://whatever.com" value="click here to go to whatever"/> "text-link" is a built-in, predefined class.
Running applications - Archive of obsolete content
using nsiprocess the recommended way is to use the nsiprocess interface because it is crossplat
form.
... using nsilocalfile.launch() this method is not implemented on all plat
forms, especially not on unix/linux!
... see nsilocalfile.launch() for details and make sure that all your target plat
forms support this method!
... for more in
formation on nsifile/nsilocalfile, see file i/o.
JavaScript timers - Archive of obsolete content
the requestanimationframe() function tells the browser that you wish to per
form an animation and requests that the browser schedule a repaint of the window for the next animation frame.
... requestanimationframe() requestanimationframe() tells the browser that you wish to per
form an animation and requests that the browser schedule a repaint of the window for the next animation frame.
... per
formance.now() per
formance.now() returns a timestamp, measured in milliseconds, accurate to one thousandth of a millisecond.
... this timestamp is equal to the number of milliseconds since the navigationstart attribute of the per
formance.timing interface.
Code snippets - Archive of obsolete content
window code opening and manipulating windows toolbar toolbar related code sidebar sidebar related code
forms
forms related code xml code used to parse, write, manipulate, etc.
...nd process dialog boxes alerts and notifications modal and non-modal ways to notify users preferences code used to read, write, and modify preferences js xpcom code used to define and call xpcom components in javascript running applications code used to run other applications <canvas> related what wg canvas-related code signing a xpi how to sign an xpi with pki delayed execution per
forming background operations.
... downloading files code to download files, images, and to monitor download progress password manager code used to read and write passwords to/from the integrated password manager bookmarks code used to read and write bookmarks javascript debugger service code used to interact with the javascript debugger service svg general general in
formation and utilities svg animation animate svg using javascript and smil svg interacting with script using javascript and dom events to create interactive svg embedding svg in html and xul using svg to enhance html or xul based markup xul widgets html in xul for rich tooltips dynamically embed html into a xul element to attain markup in a tooltip label and description special uses and...
... autocomplete code used to enable
form autocomplete in a browser boxes tips and tricks when using boxes as containers tabbox removing and manipulating tabs in a tabbox windows-specific finding window handles (hwnd) (firefox) how to use windows api calls to find various kinds of mozilla window handles.
Communication between HTML and your extension - Archive of obsolete content
what i wanted to do was have an extension "look" for something on an html page and if it found that something per
form some operation on the found thing and then update the status bar with the results of the operation.
...in my html i have an input element in a
form.
... i set the onblur action to a little javascript function that per
formed a standard ajax request to get a result.
...what i ended up with some helpful in
formation on the irc channel led me to believe that a custom event might help.
Listening to events in Firefox extensions - Archive of obsolete content
gecko uses events to pass in
formation about interesting things that have occurred along to the parties that may wish to know about them.
... web progress listeners for more in
formation about web loads a web progress listener can be used; these provide more details about the progress of loading data from the web.
...more in
formation about listening to events from all tabs is available.
...the filter acts to reduce the number of status and progress events to improve per
formance.
Adding windows and dialogs - Archive of obsolete content
alert the alert is the simplest
form of dialog.
...luckily, you still get a great deal of help from the plat
form if you use the dialog element as the document root instead of the more generic window element.
... 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.
Appendix E: DOM Building and Insertion (HTML & XUL) - Archive of obsolete content
nt = jsontodom(jsontemplatebtn, document, capturednodes); palette.appendchild(domfragment); alert("capturednodes contains any created nodes that have optionally been captured (for later convenient javascript access) by giving them a 'key' attribute; for example: " + capturednodes.mytestbutton123); another example this here is another example of using jsontodom but in the html scope, a complex
form is created with ease.
... the demo of this is seen at jsfiddle :: jsontodom example var json = ['html:div', {style:'background-color:springgreen'}, ['html:
form', {id:'myfirst
form'}, ['html:input', {type:'text', value:'my field'}], ['html:button', {id:'mybtn'}, 'button text content'] ], ['html:
form', {id:'mysecond
form'}, ['html:input', {type:'text', value:'my field for second
form'}], ['html:div', {}, 'sub div with textcontent and siblings', ['html:br', {}], ['html:input', {type:'checkbox', id:'mycheck'}], ['html:label', {for:'mycheck'}, 'here is text of label, click this text will check the box' ] ] ] ]; document.body.appendchild(jsontodom(jso...
...there are cases, however, where we need to safely display
formatted html sent by a remote server.
... document.body.appendchild(parsehtml(document, xhr.responsetext, true, xhr.channel.uri)); see also displaying web content in an extension without security issues how to create a dom tree node.textcontent node.appendchild() element.setattribute() document.createelement() document.createtextnode() original document in
formation author(s): kris maglione last updated date: 2011-08-08 ...
Security best practices in extensions - Archive of obsolete content
for more in
formation, refer to the evalinsandbox section.
... the sidebar: a use case the sidebar in firefox is designed to hold both chrome (privileged) content and web (nonprivileged) content, the latter being in the
form of web pages.
... json has become a popular data
format for return
formats for web services.
...for more in
formation, refer to the evalinsandbox() section.
Tabbed browser - Archive of obsolete content
you can find more in
formation on getting access to the browser window in working with windows in chrome code.
... xul: <menuitem oncommand="myextension.foo(event)" onclick="check
formiddleclick(this, event)" label="click me"/> js: var myextension = { foo: function(event) { openuilink("http://www.example.com", event, false, true); } } opening a url in an on demand tab cu.import("resource://gre/modules/xpcomutils.jsm"); xpcomutils.definelazyservicegetter(this, "gsessionstore", "@mozilla.org/browser/sessionstore;1", ...
... reusing by url/uri a common feature found in many extensions is to point the user to chrome:// uris in a browser window (for example, help or about in
formation) or external (on-line http(s)://) html documents when the user clicks an extension's button or link.
... getting the browser that fires the http-on-modify-request notification see the observer notifications page for in
formation on http-on-* notifications.
Firefox addons developer guide - Archive of obsolete content
if you use the interface template when mentioning interfaces by name, mdc will automatically
format them and generate links to their documentation, like this: nsiconsoleservice.
... todo: all fixme notes inside the documents; add abbreviation definition to acronyms; add some link to the internal mdc documentation when it makes sense; indent source code; make sure documentation is relevant for all plat
forms: gnu/linux, macos, windows; add anchor links to figures & listings; add credits to original authors and license; completed sometimes, interfaces names are misspelled: s/nsl/nsi; talk about fuel; titles of chapters and sub-headings should have caps for first letter of each word; we should add a part about bad and good practices (leaks, global scopes, ...); add external resources (mozdev.or...
...g/community/books.html); add to chapter 3 or 5 more in
formations about overlay (how to overlay some interesting part of firefox like status bar, menus or toolbar) add previous/next at the end of each chapter questions: opensource appendix.
... gen's opinion: yes, because it is important for developers to make in
formed decisions regarding oss licenses and it was a part of the original guide.
Underscores in class and ID Names - Archive of obsolete content
the css1 specification, published in its final
form in 1996, did not allow for the use of underscores in class and id names unless they were "escaped." an escaped underscore would look something like this: p.urgent\_note {color: maroon;} this was not well supported by browsers at the time, however, and the practice has never caught on.
... internet explorer 4.x and 5.x for windows erroneously allowed underscores, and so were both non-con
formant on this point until the errata was published.
... original document in
formation author(s): eric a.
... meyer, netscape communications last updated date: published 05 mar 2001 copyright in
formation: copyright © 2001-2003 netscape.
XML data - Archive of obsolete content
previous section: svg next section: xbl binding in
formation: xml data xml (extensible markup language) is a general-purpose language for any kind of structured data.
... by default, your mozilla browser displays xml in a
format very similar to the original data in the xml file.
... for more in
formation about xml in mozilla, see the xml page in this wiki.
...for more in
formation about css in mozilla, see the main css page in this wiki.
Localizing an extension - Archive of obsolete content
per
forming a few simple steps makes your extension much easier to localize into various languages without having to edit the xul or javascript files themselves.
...for example, in stockwatcher2.xul, we change this line: <menuitem label="refresh now" oncommand="stockwatcher.refreshin
formation()"/> to <menuitem label="&menu_refresh_now.label;" oncommand="stockwatcher.refreshin
formation()"/> do this for every string used in each xul file.
...this involves rewriting the refreshin
formation() function to load the strings, and its enclosed inforeceived() function to use the loaded, localized, strings instead of string literals.
... we add to refreshin
formation() the following code: var stringsbundle = document.getelementbyid("string-bundle"); var changestring = stringsbundle.getstring('changestring') + " "; var openstring = stringsbundle.getstring('openstring') + " "; var lowstring = stringsbundle.getstring('lowstring') + " "; var highstring = stringsbundle.getstring('highstring') + " "; var volumestring = stringsbundle.getstring('volumestring') + " "; this code gets a reference to the string bundle element we added to stockwatcher2.xul by calling document.getelementbyid(), specifying the id "string-bundle".
Bonsai - Archive of obsolete content
bonsai is tree control it is a tool that lets you per
form queries on the contents of a cvs archive; you can: get a list of checkins, see what checkins have been made by a given person, or on a given cvs branch, or in a particular time period.
... checkins to any branch of xfe by ramiro between 26-feb-1998 and 12-may-1998 differences between revisions 3.1 and 3.3 of the file mozilla/cmd/xfe/
forms.c that's a small sample, but it should be enough to get you started.
... bonsai source code the source code to the bonsai tool itself is also available, check out the in
formation available at the bonsai project page.
... original document in
formation author(s): jamie zawinski last updated date: september 8, 2004 copyright in
formation: portions of this content are © 1998–2007 by individual mozilla.org contributors; content available under a creative commons license | details.
Bookmark Keywords - Archive of obsolete content
that's pretty interesting on its own, but mozilla takes it a step further by allowing the user to define an "entry point" for added in
formation.
... setting up a google keymark to set up a keymark that will search google directly
form the address bar, go to google and run a search for any word.
... original document in
formation author(s): eric a.
... meyer, netscape communications last updated date: published 15 mar 2002 copyright in
formation: copyright © 2001-2003 netscape.
Downloading Nightly or Trunk Builds - Archive of obsolete content
so to figure out how to download a cutting edge or bleeding edge or 'beta' version of firefox, you need to look for a "build" (which is developer-speak for the packaged files you can download) of 1.9.1 (the number of the underlying 'plat
form' called 'gecko' or 'mozilla' that firefox uses).
... as it turns out there is a plat
form number for every firefox number, but they are not the same number.
... note that nightly builds may not be created for every plat
form for every night.
... if one has questions about the way a particular nightly was built, the best way to get that in
formation is to download the executable, launch it, and then go to the "about:buildconfig" page, by typing this into the location bar.
Style System Overview - Archive of obsolete content
the data
format of the structs and selectors is mostly clear from the code and not worth going into (although the implementation of :not() is confusing).
... this style struct is always const, and should always be declared as such (evil old-style casts often used with the non-typesafe
forms sometimes hide this error), since the struct may be shared with other elements.
...the cssruleprocessor implementation does a slightly modified
form of selector matching to implement it (includes matching on the middle of selectors to catch p:hover a).
...(but beware didsetstylecontext) the style system style sheets & rules ↓ rule tree ↓ style context interface original document in
formation author(s): david baron last updated date: june 6, 2003 copyright in
formation: portions of this content are © 1998–2007 by individual mozilla.org contributors; content available under a creative commons license | details.
jspage - Archive of obsolete content
gth=="number"){if(a.callee){return"arguments"; }else{if(a.item){return"collection";}}}}return typeof a;}function $unlink(c){var b;switch($type(c)){case"object":b={};for(var e in c){b[e]=$unlink(c[e]); }break;case"hash":b=new hash(c);break;case"array":b=[];for(var d=0,a=c.length;d<a;d++){b[d]=$unlink(c[d]);}break;default:return c;}return b;}var browser=$merge({engine:{name:"unknown",version:0},plat
form:{name:(window.orientation!=undefined)?"ipod":(navigator.plat
form.match(/mac|win|linux/i)||["other"])[0].tolowercase()},features:{xpath:!!(document.evaluate),air:!!(window.runtime),query:!!(document.queryselector)},plugins:{},engines:{presto:function(){return(!window.opera)?false:((arguments.callee.caller)?960:((document.getelementsbyclassname)?950:925)); },trident:function(){return(!window.active...
...xobject)?false:((window.xmlhttprequest)?((document.queryselectorall)?6:5):4);},webkit:function(){return(navigator.taintenabled)?false:((browser.features.xpath)?((browser.features.query)?525:420):419); },gecko:function(){return(!document.getboxobjectfor&&window.mozinnerscreenx==null)?false:((document.getelementsbyclassname)?19:18);}}},browser||{});browser.plat
form[browser.plat
form.name]=true; browser.detect=function(){for(var b in this.engines){var a=this.engines[b]();if(a){this.engine={name:b,version:a};this.engine[b]=this.engine[b+a]=true; break;}}return{name:b,version:a};};browser.detect();browser.request=function(){return $try(function(){return new xmlhttprequest();},function(){return new activexobject("msxml2.xmlhttp"); },function(){return new activexobject("microsoft.xmlhttp");});};browse...
...urn math.pow(2,10*--b)*math.cos(20*b*math.pi*(a[0]||1)/3);}});["quad","cubic","quart","quint"].each(function(b,a){fx.transitions[b]=new fx.transition(function(c){return math.pow(c,[a+2]); });});var request=new class({implements:[chain,events,options],options:{url:"",data:"",headers:{"x-requested-with":"xmlhttprequest",accept:"text/javascript, text/html, application/xml, text/xml, */*"},async:true,
format:false,method:"post",link:"ignore",issuccess:null,emulation:true,urlencoded:true,encoding:"utf-8",evalscripts:false,evalresponse:false,nocache:false},initialize:function(a){this.xhr=new browser.request(); this.setoptions(a);this.options.issuccess=this.options.issuccess||this.issuccess;this.headers=new hash(this.options.headers);},onstatechange:function(){if(this.xhr.readystate!=4||!this.running)...
...turn false;},send:function(k){if(!this.check(k)){return this; }this.running=true;var i=$type(k);if(i=="string"||i=="element"){k={data:k};}var d=this.options;k=$extend({data:d.data,url:d.url,method:d.method},k);var g=k.data,b=string(k.url),a=k.method.tolowercase(); switch($type(g)){case"element":g=document.id(g).toquerystring();break;case"object":case"hash":g=hash.toquerystring(g);}if(this.options.
format){var j="
format="+this.options.
format; g=(g)?j+"&"+g:j;}if(this.options.emulation&&!["get","post"].contains(a)){var h="_method="+a;g=(g)?h+"&"+g:h;a="post";}if(this.options.urlencoded&&a=="post"){var c=(this.options.encoding)?"; charset="+this.options.encoding:""; this.headers.set("content-type","application/x-www-
form-urlencoded"+c);}if(this.options.nocache){var f="nocache="+new date().gettime(...
Monitoring downloads - Archive of obsolete content
the remaining rows are set to zeroes since that's not in
formation we have at the moment.
...ate); statement.bindstringparameter(4, adownload.source.spec); statement.bindint64parameter(5, adownload.starttime); statement.execute(); statement.reset(); dbconn.close(); }, this simply opens the database and builds and executes a update sqlite command that finds the download item whose source uri and start time match the download that has completed and updates its in
formation.
...it starts by opening the sqlite database containing the log in
formation, then creates a select sql statement to pull all entries from the database.
...what times of day do you get the best download per
formance?
New Security Model for Web Services - Archive of obsolete content
empty the cache by passing in a empty string nswebscriptsaccess(implements nsiwebscriptsaccessservice) maintains access in
formation, for servers, in an access-info-cache ( hashtable ).
... if an entry was not found in the cache creates one by loading the declaration file (web-scripts-access.xml) and extracting in
formation from it (declaration file); requested type and subject princple's prefix are compared to the allowed type and prefix in order to determine access.
...denies script access in the event of an xml-well
formedness error, or validation error, or if the declaration file does not grant access.
... reports errors (validation, well
formedness, file not found, etc.) to the console via nsiconsoleservice.
Scripting - Archive of obsolete content
prism exposes desktop integration features through an property of the window object called plat
form.
... the plat
form property implements the nsiplat
formglue interface, whose methods are described in the following section.
... methods of the window.plat
form object can be called from webapp.js or from web content.
... the following code can be used by web content to determine whether it is running in prism: if ("plat
form" in window) { // prism-specific code goes here } see the nsiplat
formglue idl definition file for details of the methods available to prism apps.
Styling - Archive of obsolete content
simply add the webapp.css to the bundle and it will be injected into the web application, regardless of the plat
form or os.
... it is also possible to create plat
form-specific styles.
...to use plat
form-specific styles, create a folder in the bundle archive for each supported os and place a webapp.css file in the folder.
...note: you can also include a root level webapp.css which will be used if a plat
form-specific version is not found.
RDF Datasource How-To - Archive of obsolete content
more concretely, a datasource is a translator that can present in
formation as a collection of rdf statements.
...when flush() is called, or the last reference to the datasource is released, a routine walks the in-memory datasource and re-serializes the graph back to the original file
format.
... ns_release(mydatasource); } nsservicemanager::releaseservice(krdfservicecid, rdf); } displaying rdf as content now that you've gone through all this pain to expose your in
formation as a datasource, you probably want to see it.
... contact: chris waterson (waterson@netscape.com) original document in
formation author(s): chris waterson last updated date: june 19, 2000 copyright in
formation: copyright (c) chris waterson ...
Same origin policy for XBL - Archive of obsolete content
checks per
formed once the originating principal is determined, checks are done to make sure the load should be allowed.
... the checks per
formed are: if the principal originating the load is the system principal, the load is allowed.
...a content policy check is per
formed.
...a checkmayload() check is per
formed on the originating principal for the given uri.
Merging TraceMonkey Repo - Archive of obsolete content
let the mozilla-central sheriff know that you intend to per
form a tracemonkey merge to mozilla-central.
...exercise caution, because leaving off the -l will re-merge and lose all of the resolutions you've already per
formed.
... inspecting the files at those two changesets can be helpful: hg cat -c changeset filename once all the conflict markers are removed, you've per
formed the manual resolution, which you tell to mercurial by running hg resolve -m filename.
... per
form a build.
Table Cellmap - Archive of obsolete content
introduction the table layout use the cellmap for two purposes: quick lookup of table structural data store of the border collapse data the cellmap code is contained in nscellmap.cpp and nscellmap.h this document does currently describe only the quick lookup part of the game, border collapse is still far away cellmap data - overview the entries in the cellmap contain in
formation about the table cell frame corresponding to a given row and column number (celldata.h).
...4 ***** start table cell map dump ***** 023566b0 cols array orig/span-> 023566b00=2/0 1=2/0 ***** start group cell map dump ***** 023565b0 maprowcount=2 tablerowcount=2 row 0 : c0,0 c0,1 row 1 : c1,0 c1,1 c0,0=02763528(0) c0,1=0276381c(1) c1,0=02763990(0) c1,1=02763ab4(1) ***** end group cell map dump ***** ***** end table cell map dump ***** ***end table dump*** structural in
formation one can imagine the cellmap as grid with equally wide rows and columns where the table cells are drawn.
...the following routines seem to be hot spots per
formance wise: nscellmap::colhasspanningcells nscellmap::rowhasspanningcells nscellmap::rowisspannedinto users of nscellmap::getdataat outside nscellmap.cpp the border collapse code relies on the cellmap.
... original document in
formation author(s): bernd mielke last updated date: september 27, 2003 copyright in
formation: portions of this content are © 1998–2007 by individual mozilla.org contributors; content available under a creative commons license | details.
Tamarin-central rev 703:2cee46be9ce0 - Archive of obsolete content
testing summary acceptance tests have passed on the following supported plat
forms: * windows, 32 & 64 bit * mac ox x ppc & intel, 32 bit * linux, 32 bit * windows mobile arm version asc-4200 of the actionscript compiler was used for all tests.
... per
formance testsuite time metric the following is a comparison of the current tamarin-central (tc-703) versus the prior build (tc-700) as well as current against the vm in flash player 10.
... flash10: 0.8% fastertc-703 vs tc-700: 16.4% fastertc-703 vs flash10: 148.7% fastertc-703 vs tc-700: 0.1% slowertc-703 vs flash10: 5.2% faster linux (ubuntu linux, 2.13 ghz dual core)tc-703 vs tc-700: 6.0% fastertc-703 vs flash10: 1.7% fastertc-703 vs tc-700: 89.5% fastertc-703 vs flash10: 182.0% fastertc-703 vs tc-700: 6.1% fastertc-703 vs flash10: 1.4% faster per
formance testuite memory metric the following is a comparison of the current tamarin-central (tc-703) versus the prior build (tc-700).
... buildsize flash10576k tc-700740k tc-703655k known issues known failures in the acceptance testsuite include: number failures in testsuite when running on linux windows mobile system.privatebytes and -memstats privatebytes always returns 0 amd64 longjmp hack needs reengineering on non-windows plat
forms different runtime errors when -dforcemir set in acceptance test run arm: math failures running with thumb or arm jit and interp.
The new nsString class implementation (1999) - Archive of obsolete content
res of the new nsstrimpl implementation are: intrinsic support for 1 and 2 byte character widths provides automatic conversion between strings with different character sizes inviolate base structure eliminates class fragility problem; safe across dll boundaries offers c-style function api to manipulate nsstrimpl offers simple memory allocator api for specialized memory policy shares binary
format with bstring coming soon: a new xpcom (nsistring) interface non-templatized; this is a requirement for gecko very efficient buffer manipulation architecture the fundamental data type in the new architecture is struct nsstrimpl, given below: struct nsstrimpl { print32 mlength; void* mbuffer; print32 mcapacity; char mcharsize; char munused; // and now for the nsstrimpl ap...
...the i18n folks will tell you it's better to use a wide string and convert to 1-byte
forms for this purpose even though there is a per
formance penalty for doing so.
...to wit: they want to ensure that the underlying buffers cannot be corrupted or altered erroneously they want to ensure that the appropriate set of conversion functions get applied they want some control over the usage pattern of strings, such that the 2-byte (ucs2)
form is used whenever possible, and some restrictions are applied to the use of 1-byte (ascii) nscstrings.
... original document in
formation author: rick gessner last updated date: january 20, 1999 copyright in
formation: portions of this content are © 1998–2007 by individual mozilla.org contributors; content available under a creative commons license | details.
TraceVis - Archive of obsolete content
tracevis is a per
formance visualization system for tracemonkey.
...the log can be postprocessed into a visualization that can be used to rapidly diagnose many tracing-related per
formance issues.
...these directions create an optimized build, because optimized builds are usually better for per
formance analysis.
...visualization python vis.py /tmp/tracevis.log /tmp/tracevis.png this creates a png
format visualization of tracemonkey activities.
Using Breakpoints in Venkman - Archive of obsolete content
using breakpoints to debug when you set a breakpoint, you give venkman (or whatever debugger you're using) the opportunity to display in
formation about the execution environment.
... for more in
formation about the sorts of actions you can take in venkman when you're at a breakpoint, see the debugging basics section of the introductory venkman article.
...meta comments are specially
formatted comments that pull in the script named after the comment and specify how to treat the output of that script.
... original document in
formation authors: robert ginda, ian oeschger published 02 may 2003 ...
Venkman - Archive of obsolete content
venkman has been provided as part of the mozilla install distribution since october 2001, as well as an extension package in xpi
format.
... bandhauer then went on to reflect that api into java, and create his cross plat
form front end, eventually producing netscape javascript debugger 1.0 and 1.1.
...this allows the user interface be written in javascript and xul, which allows venkman to be fully cross-plat
form.
... related topics javascript, web development, developing mozilla original document in
formation author(s): robert ginda other contributors: doctor unclear last updated date: july 13, 2007 copyright in
formation: portions of this content are © 1998–2007 by individual mozilla.org contributors; content available under a creative commons license | details.
addDirectory - Archive of obsolete content
a relative pathname is appended to the registry name of the package as specified by the package parameter to the initinstall method.this parameter can also be null, in which case the xpisourcepath parameter is used as a relative pathname.note that the registry pathname is not the location of the software on the computer; it is the location of in
formation about the software inside the client version registry.
... subdir the name of a directory to append to localdirspec, using '/' as the path separator regardless of the plat
form.if subdir is missing, null, or "", the filenames are appended directly to the folder name specified by localdirspec.
...to move the files and all other subcomponents to their final location, call the per
forminstall method after you've successfully added all subcomponents.
... also see the note about binaries on the macintosh plat
form in addfile.
initInstall - Archive of obsolete content
the registry name provided here is not the location of the software on the machine, it is the location of in
formation about the software inside the registry.
...after calling initinstall, your script must call per
forminstall or cancelinstall before it finishes.
... if your script does not call per
forminstall or cancelinstall, netscape 6 will not be able to clean up properly after your script finishes.
...err = getlasterror(); if (!err) per
forminstall(); else cancelinstall(err); ...
Properties - Archive of obsolete content
properties archive full local path of the archive after it is downloaded to the plat
form specific temp folder.
... buildid the application build id in the
form 20041231.
... jarfile alias for archive plat
form contains in
formation about the plat
form xpinstall was compiled for/runs on.
...for more details, see the corresponding code living in the getinstallplat
form method of class nsinstall.
How to implement a custom XUL query processor component - Archive of obsolete content
the xul template guide has lots of detailed in
formation on using xul templates.
...the contract id of our xpcom component should be of the
form "@mozilla.org/xul/xul-query-processor;1?name=xxx", where the xxx is the querytype used in the xul template block.
..., contractid: "@mozilla.org/xul/xul-query-processor;1?name=simpledata", getdatasource: function(adatasources, arootnode, aistrusted, abuilder, ashoulddelaybuilding) { // todo: parse the adatasources variable // for now, ignore everything and let's just signal that we have data return this._data; }, initializeforbuilding: function(adatasource, abuilder, arootnode) { // per
form any initialization that can be delayed until the content builder // is ready for us to start }, done: function() { // called when the builder is destroyed to clean up state }, compilequery: function(abuilder, aquery, arefvariable, amembervariable) { // outputs a query object.
... // eventually we should read the <query> to create filters return this._data; }, generateresults: function(adatasource, aref, aquery) { // pre
form any query and pass the data to the result set return new templateresultset(this._data); }, addbinding: function(arulenode, avar, aref, aexpr) { // add a variable binding for a particular rule, which we aren't using yet }, translateref: function(adatasource, arefstring) { // if we return null, everything stops return new templateresult(null); }, compareresults: function(aleft, aright, avar) { // -1 less, 0 ==, +1 greater var leftvalue = aleft.getbindingfor(avar); var rightvalue = aright.getbindingfor(avar); if (leftvalue < rightvalue) { return -1; } else if (leftvalue > ri...
ContextMenus - Archive of obsolete content
for example, the following will attach a context menu with the id 'contentareacontextmenu' to a browser element: <browser context="contentareacontextmenu"> indicating the default item on some plat
forms, one of the items in a context menu is marked as being a default operation.
...on plat
forms that support it, it will be marked as a default item.
... on other plat
forms, the attribute will just be ignored and the menuitem will be displayed normally.
... note that the default attribute just affects how the item is displayed, it per
forms no other function itself.
Result Generation - Archive of obsolete content
during query processing, the template builder builds up a network of in
formation such as: possible results that are available where content should be generated in
formation that indicates what to do when the rdf datasource changes this network of in
formation remains for the lifetime of the template, or until it is rebuilt.
...rather than rebuild the entire template, the algorithm allows only specific parts of the network of in
formation to be re-examined.
...while the in
formation network created by the template builder contains a number of different pieces of necessary in
formation, for the purposes of this discussion, we will only be interested in the list of possible results.
...at each step, new possible results may be added, or more in
formation pertaining to an existing result may be added to the network.
Simple Query Syntax - Archive of obsolete content
for example: <label value="rdf:http://purl.org/dc/elements/1.1/title http://www.xulplanet.com/rdf/country"/> the 'rdf:'
form is really equivalent to the <binding> tag in the full syntax.
...the namespace of the attribute and the attribute name combine to
form the predicate you wish to filter by and the value of the attribute will be the value to filter by.
...this
form of attribute syntax on a rule is equivalent to a <triple> in the extended syntax.
... in fact, the builder will internally convert the attribute into the same compiled
form that would be used for a <triple>.
Template Logging - Archive of obsolete content
each result is logged in a
form much like the following: in template with id root using ref http://www.some-fictitious-zoo.com/birds new active result for query 2 matching rule 1: http://www.some-fictitious-zoo.com/birds/emperorpenguin in the example above, a new result has been added.
...this in
formation may be used to determine if results are not matching the correct rules.
...the final piece of in
formation is the phrase 'new active result'.
...to summarize, the following
forms of message may be logged: new active result for query 1 matching rule 2 a new data result has been added.
textbox (Toolkit autocomplete) - Archive of obsolete content
form-history requires seamonkey 2.0 search the values that the user has entered into
form fields.
...in the case of
form elements, it will not be submitted.
... the disabled attribute is allowed only for
form controls.
...for more in
formation about autocomplete textboxes, see the autocomplete documentation (xpfe [thunderbird/seamonkey]) (firefox) number a textbox that only allows the user to enter numbers.
Box Objects - Archive of obsolete content
« previousnext » this section describes the box object, which holds display and layout related in
formation about a xul box as well as some details about xul layout.
...the dom is generally used only to get and modify in
formation pertaining to the content or structure of the document.
...various pieces of in
formation are used such as the tag name, the attributes on an element, various css properties, the elements and layout objects around the element, and the xbl associated with an element (xbl is described in a later section).
...however, xul provides some helper objects, called box objects, which can provide some layout related in
formation.
Creating Dialogs - Archive of obsolete content
these differences will vary depending on the plat
form the application is running on.
...you do not need to include the xul for each button; however, you do need to supply code to per
form the appropriate tasks when the user presses each button.
... this mechanism is necessary because different plat
forms have a specific order in which the buttons appear.
...the following values may be used, seperated by commas: accept - an ok button cancel - a cancel button help - a help button disclosure - a disclosure button, which is used for showing more in
formation you can set code to execute when the buttons are pressed using the ondialogaccept, ondialogcancel, ondialoghelp and ondialogdisclosure attributes.
Using Spacers - Archive of obsolete content
in addition, different plat
forms may have special requirements on the user interface.
...applications that need to support multiple plat
forms and languages usually have their windows laid out with lots of space to allow for this.
... some plat
forms and user interface toolkits provide components that are smart enough to resize and re-position themselves to fit the needs of the user.
...unless you specify in
formation about the width and height of an element, the default size of an element is determined by its contents.
description - Archive of obsolete content
more in
formation is available in the xul tutorial.
... depending on the plat
form and theme being used, some elements will have set a maximum width so they will always appear cropped.
...in the case of
form elements, it will not be submitted.
... the disabled attribute is allowed only for
form controls.
label - Archive of obsolete content
more in
formation is available in the xul tutorial.
... depending on the plat
form and theme being used, some elements will have set a maximum width so they will always appear cropped.
...in the case of
form elements, it will not be submitted.
... the disabled attribute is allowed only for
form controls.
menu - Archive of obsolete content
more in
formation is available in the xul tutorial.
... depending on the plat
form and theme being used, some elements will have set a maximum width so they will always appear cropped.
...in the case of
form elements, it will not be submitted.
... the disabled attribute is allowed only for
form controls.
menuseparator - Archive of obsolete content
more in
formation is available in the xul tutorial.
... depending on the plat
form and theme being used, some elements will have set a maximum width so they will always appear cropped.
...in the case of
form elements, it will not be submitted.
... the disabled attribute is allowed only for
form controls.
radio - Archive of obsolete content
more in
formation is available in the xul tutorial.
... depending on the plat
form and theme being used, some elements will have set a maximum width so they will always appear cropped.
...in the case of
form elements, it will not be submitted.
... the disabled attribute is allowed only for
form controls.
radiogroup - Archive of obsolete content
more in
formation is available in the xul tutorial.
...in the case of
form elements, it will not be submitted.
... the disabled attribute is allowed only for
form controls.
...more in
formation is available in the preferences system article.
richlistbox - Archive of obsolete content
in the case of
form elements, it will not be submitted.
... the disabled attribute is allowed only for
form controls.
...more in
formation is available in the preferences system article.
...(or, on some plat
forms, typeof(listboxcurrentindex) will be undefined) in a single selection list, the current index will always be the same as the selected index.
tab - Archive of obsolete content
more in
formation is available in the xul tutorial.
... depending on the plat
form and theme being used, some elements will have set a maximum width so they will always appear cropped.
...in the case of
form elements, it will not be submitted.
... the disabled attribute is allowed only for
form controls.
treecol - Archive of obsolete content
it displays the column header and holds the size and other in
formation about the column.
... more in
formation is available in the xul tutorial.
... <treecol label="name" flex="1" /> </treecols> <treechildren> <treeitem> <treerow> <treecell value="true"/> <treecell label="alice"/> </treerow> </treeitem> <treeitem> <treerow> <treecell value="false"/> <treecell label="bob"/> </treerow> </treeitem> </treechildren> </tree> to make the checkbox visible on some plat
forms, the following styles need to be added to the stylesheet (see treecol.type).
... depending on the plat
form and theme being used, some elements will have set a maximum width so they will always appear cropped.
XUL Application Packaging - Archive of obsolete content
required see toolkit version
format for version numbering details example: version=0.1 buildid specifies a unique build identifier.
... required example: buildid=20060201 id specifies the unique application id required the application id, like extension ids, can be
formatted either like an email applicationname@vendor.tld or a uuid {12345678-1234-1234-1234-123456789abc}.
... the email
format is recommended for newly developed applications.
... optional - default is 0 note: the application author is responsible for implementing the nsiprofilemigrator interface; if an implementation is not found no migration will be per
formed.
2006-11-17 - Archive of obsolete content
what file
format is tb's address book using?
... tb's address book uses mork (file
format).
... answer: cc whoever you need review from, but don't post a
formal review.
... steps for posting a
formal review is provided also.
NPN_SetValueForURL - Archive of obsolete content
« gecko plugin api reference « browser side plug-in api summary allows a plugin to change the stored in
formation associated with a url, in particular its cookies.
... variable selects the type of in
formation to be changed.
... url the url for which to change in
formation.
... value the new associated in
formation for the url.
NPN_Version - Archive of obsolete content
« gecko plugin api reference « browser side plug-in api summary lets plugins obtain version in
formation, both of the plug-in api and of the browser itself.
...for more in
formation and an example, see getting the current version.
...for more in
formation and an example, see finding out if a feature exists.
... note: plat
form-specific code in the plug-in api files npwin.cpp, npmac.cpp, or npunix.c checks version numbers automatically.
NPP_HandleEvent - Archive of obsolete content
« gecko plugin api reference « plug-in side plug-in api summary delivers a plat
form-specific window event to the instance.
... for windowless plug-ins: all plat
forms.
... event plat
form-specific value representing the event handled by the function.
... mac os the browser does not give a windowed plug-in a native window, because the mac os plat
form does not support child windows.
NPP_Print - Archive of obsolete content
« gecko plugin api reference « plug-in side plug-in api summary requests a plat
form-specific print operation for an embedded or full-screen plug-in.
... for in
formation about printing on your plat
form, see your plat
form documentation.
... ms windows on ms windows printinfo->print.embedprint.plat
formprint is the device context (dc) handle.
... the coordinates for the window rectangle are in twips
format.
NPP_SetWindow - Archive of obsolete content
in this case, the plug-in must not per
form any additional graphics operations on the window and should free any associated resources.
... the data structure passed in npp_setwindow is an npwindow object, which contains the coordinates of the instance's area and various plat
form-specific data.
...for windowless plug-ins, it is a plat
form-specific handle to a drawable.
... before setting the window parameter to point to a new window, it is a good idea to compare the in
formation about the new window to the previous window (if one existed) to account for any changes.
NPSetWindowCallbackStruct - Archive of obsolete content
« gecko plugin api reference « plug-in side plug-in api summary note: this structure is only used on unix plat
forms.
... contains in
formation about the plug-in's unix window environment.
... description callback structures are used to pass plat
form-specific in
formation.
... the npsetwindowcallbackstruct object, allocated by the browser, contains in
formation required for the ws_info field of an npwindow.
RSS - Archive of obsolete content
really simple syndication (rss) is a popular html-like xml-based data
format used for syndication.
...(some being based on rdf, but most only being based on xml.) nonetheless, rss is an extremely popular
format that is used for syndicating news, blog posts, ipradio, and iptv, with an amazing amount of momentum.
... why well-
formed web rss module is popular - syndicating your comments charles iliya krempeaux talks about the rss well-
formed web module, why it is popular among some, and how it is used to link to your comments.
... atomic rss tim bray talks about using atom 1.0 as a micro
format and extension module for rss 2.0; keeping rss 2.0 as your sydication
format but bringing in and using selected atom 1.0 elements.
Security Controls - Archive of obsolete content
there are three types of security controls, as follows: management controls: the security controls that focus on the management of risk and the management of in
formation system security.
... original document in
formation author(s): u.s.
... department of commerce title: federal in
formation processing standard publication 200, minimum security requirements for federal in
formation and in
formation systems last updated date: march 2006 copyright in
formation: this document is not subject to copyright.
... original document in
formation author(s): karen scarfone, wayne jansen, and miles tracy title: nist special publication 800-123, guide to general server security last updated date: july 2008 copyright in
formation: this document is not subject to copyright.
NSPR Release Engineering Guide - Archive of obsolete content
this paper is for engineers per
forming
formal release for the netscape portable runtime (nspr) across all plat
forms.
... feature complete update ...pr/include/prinit.h with release numbers build all targets, debug and optimized on all plat
forms using local directories run the test suite on all targets verify release numbers show up in binaries resolve testing anomalies tag the tree with nsprpub_release_x_y_z_beta beta release checkout a whole new tree using the tag from above build all targets, debug and optimized on all plat
forms using the command: gmake release mdist=<dir>/mdist build_number=vx.y.z [build_opt=1 | use_debug_rtl=1] copy the bits from mdist to /share/builds/components/nspr20/.vx.y.z 1 run explode.pl run the test suite on all targets, using binaries & headers from shipped bits resolve testing anomalies tag ...
...the tree with nsprpub_release_x_y[_z] release candidate checkout a whole new tree using tag (including fixes) tag the treey with nsprpub_release_x_y_z build all targets, debug and optimized on all plat
forms using the command: gmake release mdist=<dir>/mdist build_number=vx.y.z [build_opt=1 | use_debug_rtl=1] copy the bits from mdist to /share/builds/components/nspr20/.vx.y.z in /share/builds/components/nspr20/ run the following scripts: explode.pl rename.sh symlink.sh rtm bits rename the .vx.y.z directory to vx.y.z (remove the hidden directory 'dot').
... copy /share/builds/components/nspr20/vx.y.z/* to /share/systems/mozilla/pub/nspr/vx.y.z/ original document in
formation author: larryh@netscape.com last updated date: september 20, 2000 1 copying files to /share/builds/components requires that one be logged on to a machine named "smithers" as user "svbld".
SSL and TLS - Archive of obsolete content
bits of security rsa key length ecc key length table 1: comparison of rsa and ecc cipher strength 80 1024 160-223 112 2048 224-255 128 3072 256-383 192 7860 384-511 256 15360 512+ the in
formation in this table is from the national institute of standards and technology (nist).
... for more in
formation, see http://csrc.nist.gov/publications/nistpubs/800-57/sp800-57-part1.pdf.
... for more in
formation on ecc, see rfc 4492, section 5.6.1, table 2.
... original document in
formation author(s): ella deon lackey last updated date: 2012 copyright in
formation: © 2012 red hat, inc.
Security - Archive of obsolete content
but encryption and decryption, by themselves, do not address another problem: tampering.encryption and decryptionencryption is the process of trans
forming in
formation so it is unintelligible to anyone but the intended recipient.
... decryption is the process of trans
forming encrypted in
formation so that it is intelligible again.introduction to public-key cryptographypublic-key cryptography and related standards and techniques underlie the security features of many products such as signed and encrypted email, single sign-on, and secure sockets layer (ssl) communications.
...for an overview of ssl, see "introduction to ssl." for an overview of encryption and decryption, see "encryption and decryption." in
formation on digital signatures is available from "digital signatures." introduction to sslthis document introduces the secure sockets layer (ssl) protocol.
... ssl has been universally accepted on the world wide web for authenticated and encrypted communication between clients and servers.nspr release engineering guidethis paper is for engineers per
forming
formal release for the netscape portable runtime (nspr) across all plat
forms.ssl and tlsthe secure sockets layer (ssl) and transport layer security (tls) protocols are universally accepted standards for authenticated and encrypted communication between clients and servers.
Sunbird Theme Tutorial - Archive of obsolete content
making a theme a theme consists of: a unique identifier a file containing in
formation about the theme a file that registers the theme with sunbird some files containing the theme itself set up your theme in sunbird's profile directory.
... for in
formation on how to find the profile directory, see the mozillazine article: profile folder inside the profile directory, go to the <tt>extensions</tt> directory.
... creating a unique identifier create an identifier that is likely to be unique, in the
form: <tt>something@domain-name</tt> it must contain an at-sign (<tt>@</tt>), making it look something like an e-mail address, but it does not need to be a real e-mail address.
... creating in
formation about your theme in your theme directory, create a plain text file named <tt>install.rdf</tt>.
Theme changes in Firefox 2 - Archive of obsolete content
changes to the default theme the table below lists all the changes made in the default theme for firefox 2; you can use this in
formation as a starting point for figuring out the changes you need to make.
... changes in browser bookmarks/addbookmark.css the addbookmarks.css file should have the following lines added to the top: @namespace url("http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"); @namespace html url("http://www.w3.org/1999/xhtml"); some microsummary-related css also needs to be added, to provide
formatting for the microsummary picker.
... #content style in
formation for the content area of the window.
... #sitelabel style in
formation for the site label.
Reference - Archive of obsolete content
--maian 23:43, 21 september 2005 (pdt) i think we need a new section in the reference that specifies the differences between versions, collecting this in
formation into a single location rather than leaving it scattered haphazardly throughout the reference as it currently is.
...sevenspade 13:19, 2 july 2006 (pdt) after some thought, i removed the references to using language="javascript1.2", and all references are merely presented as in
formation detailing past behavior.
...; //function note that math is not a constructor function, but merely a global object with methods and properties useful to per
form various mathematical operations.
...in the meantime, newer features from js 1.6 (and hopefully someone will add js 1.7 features too) are being added to the reference with appropriate version in
formation on the page itself.
RDF in Fifty Words or Less - Archive of obsolete content
each bookmark is apointer to a web page called a uri (uni
form resource identifier).
...fundamentally, it means that parts of the rdf data model can be communicated across network boundaries, and the contents of the graph can dynamically change as in
formation arrives from a remote service.
...the cgi script actually generatesserialized rdf, which is basically just a way of
formatting a graph into xml: <rdf:rdf xmlns:rdf="http://www.w3.org/tr/wd-rdf-syntax#" xmlns:sm="http://www.mozilla.org/smart-mail/schema#"> <rdf:description about="http://www.mozilla.org/smart-mail/get-mail.cgi?user=waterson&folder=inbox"> <sm:message id="4025293"> <sm:recipient> chris waterson "waterson@netscape.com" </sm:recipient> <sm:sende...
... contact: chris waterson (waterson@netscape.com) original document in
formation author(s): chris waterson last updated date: november 19, 1998 copyright in
formation: copyright (c) chris waterson interwiki language link ...
Styling Abbreviations and Acronyms - Archive of obsolete content
the underline tells readers that the word in question has extra in
formation associated with it.
...removing the underline from these elements will rob readers of an indication that there is extra in
formation available.
... related links web content accessibility guidelines 1.0 original document in
formation author(s): eric a.
... meyer, netscape communications last updated date: published 09 aug 2002 copyright in
formation: copyright © 2001-2003 netscape.
Examples - Game development
free/demo games beloola webvr plat
form to connect passionate people.
... nutmeg cute retro scrolling plat
forming action.
... biolab disaster side-scrolling plat
form shooter.
... classic plat
former canvas 2d game based on `visual-ts game engine` - physics based on matter.js commercial games oort online a mmo exploration, building, and battle game (currently in development.) a wizard's lizard top down zelda-esque exploration/rpg.
2D collision detection - Game development
generally you will have a simple generic shape that covers the entity known as a "hitbox" so even though collision may not be pixel perfect, it will look good enough and be per
formant across multiple entities.
... axis-aligned bounding box one of the simpler
forms of collision detection is between two rectangles that are axis aligned — meaning no rotation.
...the complexity of an algorithm like this means we will need to consider per
formance optimization, covered in the next section.
... implementing sat is out of scope for this page so see the recommended tutorials below: separating axis theorem (sat) explanation collision detection and response collision detection using the separating axis theorem sat (separating axis theorem) separating axis theorem collision per
formance while some of these algorithms for collision detection are simple enough to calculate, it can be a waste of cycles to test *every* entity with every other entity.
3D collision detection - Game development
the axis-aligned constraint is there because of per
formance reasons.
...if we assume that px, py and pz are the point's coordinates, and bminx–bmaxx, bminy–bmaxy, and bminz–bmaxz are the ranges of each axis of the aabb, we can calculate whether a collision has occurred between the two using the following
formula: f(p,b)=(px>=bminx∧px<=bmaxx)∧(py>=bminy∧py<=bmaxy)∧(pz>=bminz∧pz<=bmaxz)f(p,b)= (p_x >= b_{minx} \wedge p_x <= b_{maxx}) \wedge (p_y >= b_{miny} \wedge p_y <= b_{maxy}) \wedge (p_z >= b_{minz} \wedge p_z <= b_{maxz}) or in javascript: function ispointinsideaabb(point, box) { return (point.x >= box.minx && point.x <= box.maxx) && (point.y >= box.miny && point.y <= box.m...
...the diagram below shows the test we'd per
form over the x-axis — basically, do the ranges aminx–amaxx and bminx–bmaxx overlap?
... taking into account that the euclidean distance between two points a and b is (ax-bx)2)+(ay-by)2+(az-bz)\sqrt{(a_x - b_x) ^ 2) + (a_y - b_y)^2 + (a_z - b_z)} , our
formula for point vs.
GLSL Shaders - Game development
vertex shaders trans
form shape positions into 3d drawing coordinates.
... the calculations result in a variable containing the in
formation about the rgba color.
...anvas { width: 100%; height: 100%; } </style> <script src="three.min.js"></script> </head> <body> <script id="vertexshader" type="x-shader/x-vertex"> // vertex shader's code goes here </script> <script id="fragmentshader" type="x-shader/x-fragment"> // fragment shader's code goes here </script> <script> // scene setup goes here </script> </body> </html> it contains some basic in
formation like the document <title>, and some css to set the width and height of the <canvas> element that three.js will insert on the page to be the full size of the viewport.
... note: you can learn more about model, view, and projection trans
formations from the vertex processing paragraph, and you can also check out the links at the end of this article to learn more about it.
WebVR — Virtual Reality for the Web - Game development
note: for more in
formation, read our webvr concepts article.
... the webvr api the webvr api is the central api for capturing in
formation on vr devices connected to a computer and headset position/orientation/velocity/acceleration in
formation, and converting that into useful data you can use in your games and other applications.
... get the devices to get in
formation about devices connected to your computer, you can use the navigator.getvrdevices method: navigator.getvrdevices().then(function(devices) { for (var i = 0; i < devices.length; ++i) { if (devices[i] instanceof hmdvrdevice) { ghmd = devices[i]; break; } } if (ghmd) { for (var i = 0; i < devices.length; ++i) { if (devices[i] instanceof positionsensorvrdevice ...
...for example, the below code outputs position in
formation on the screen: function setview() { var posstate = gpositionsensor.getstate(); if(posstate.hasposition) { pospara.textcontent = 'position: x' + roundtotwo(posstate.position.x) + " y" + roundtotwo(posstate.position.y) + " z" + roundtotwo(posstate.position.z); xpos = -posstate.position.x * width * 2; ypos = posst...
asm.js - Game development
however, by defining an explicit standard we can work on optimizing this kind of code even more and getting as much per
formance as we can out of it.
... it also makes it easy for people writing compilers that want to generate high-per
formant code on the web.
...emscripten, a c/c++ to javascript compiler, emits asm.js code to make it run with near native per
formance on several browsers.
... the per
formance characteristics are closer to native code than that of standard javascript.
Tools for game development - Game development
asm.js asm.js is a very limited subset of the javascript language, which can be greatly optimized and run in an ahead-of-time (aot) compiling engine for much faster per
formance than your typical javascript per
formance.
... emscripten an llvm to javascript compiler; with emscripten, you can compile c++ and other languages that can compile to llvm bytecode into high-per
formance javascript.
... gecko profiler the gecko profiler extension lets you profile your code to help figure out where your per
formance issues are so that you can make your game run at top speed.
...a lot of this is going to be covered by will in tools, but here we should provide a kind of practical toolchain tutorial for debugging games, with links to will's stuff: basic tools overview shader editor per
formance tools (still in production, estimated early 2014) ...
2D maze game with device orientation - Game development
when the start button is pressed, instead of jumping directly into the action the game will show the screen with the in
formation on how to play the game.
... to hold the block in
formation we'll use a level data array: for each block we'll store the top and left absolute positions in pixels (x and y) and the type of the block — horizontal or vertical (t with the 'w' value meaning width and 'h' meaning height).
... adding the sound among the preloaded assets there was an audio track (in various
formats for browser compatibility), which we can use now.
...let’s define the variables in the create function first: this.timer = 0; // time elapsed in the current level this.totaltimer = 0; // time elapsed in the whole game then, right after that, we can initialize the necessary text objects to display this in
formation to the user: this.timertext = this.game.add.text(15, 15, "time: "+this.timer, this.fontbig); this.totaltimetext = this.game.add.text(120, 30, "total time: "+this.totaltimer, this.fontsmall); we’re defining the top and left positions of the text, the content that will be shown and the styling applied to the text.
Compile - MDN Web Docs Glossary: Definitions of Web-related terms
compiling is the process of trans
forming a computer program written in a given language into an equivalent program of another language.
...packaging it in a binary
format.
... usually, a compiler trans
forms a higher-level language such as c or java, which humans understand, into a machine language, such as assembly, that the cpu can understand.
... jit compilers are usually transparent to you, used for per
formance.
HTTP header - MDN Web Docs Glossary: Definitions of Web-related terms
an http header is a field of an http request or response that passes additional in
formation, altering or precising the semantics of the message or of the body.
... request header: headers containing more in
formation about the resource to be fetched or about the client itself.
... response header: headers with additional in
formation about the response, like its location or about the server itself (name, version, …).
... entity header: headers containing more in
formation about the body of the entity, like its content length or its mime-type.
JSON - MDN Web Docs Glossary: Definitions of Web-related terms
javascript object notation (json) is a data-interchange
format.
... (date objects by default serialize to a string containing the date in iso
format, so the in
formation isn't completely lost.) if you need json to represent additional data types, trans
form values as they are serialized or before they are deserialized.
... much like xml, json has the ability to store hierarchical data unlike the more traditional csv
format.
... many tools provide translation between these
formats such as this online json to csv converter or this alternative json to csv converter.
beacon - MDN Web Docs Glossary: Definitions of Web-related terms
a web beacon is a small object, such as a 1 pixel gif, embedded in markup, used to communicate in
formation back to the web server or to 3rd party servers.
... beacons are generally included to provide in
formation about the user for statistical purposes.
... beacons are often included within third party scripts for collecting user data, per
formance metrics and error reporting.
... there is a w3c draft beacon specification to standardize the beacon as an interface to asynchronously transfer http data from user agent to a web server prior to page load without negative per
formance impact.
Overflowing content - Learn web development
if the submit button on a
form disappears and no one can complete the
form, this could be a big problem!
... overflow establishes a block
formatting context when you use a value of overflow such as scroll or auto, you create a block
formatting context (bfc).
...can you remember the most important in
formation?
... previous overview: building blocks next in this module cascade and inheritance css selectors type, class, and id selectors attribute selectors pseudo-classes and pseudo-elements combinators the box model backgrounds and borders handling different text directions overflowing content values and units sizing items in css images, media, and
form elements styling tables debugging css organizing your css ...
CSS values and units - Learn web development
the page on mdn for each value will give you in
formation about browser support.
... we have covered a lot in this article, but can you remember the most important in
formation?
... you can find some further tests to verify that you've retained this in
formation before you move on — see test your skills: values and units.
... previous overview: building blocks next in this module cascade and inheritance css selectors type, class, and id selectors attribute selectors pseudo-classes and pseudo-elements combinators the box model backgrounds and borders handling different text directions overflowing content values and units sizing items in css images, media, and
form elements styling tables debugging css organizing your css ...
What is a URL? - Learn web development
this article discusses uni
form resource locators (urls), explaining what they are and how they're structured.
... url stands for uni
form resource locator.
... you might think of a url like a regular postal mail address: the protocol represents the postal service you want to use, the domain name is the city or town, and the port is like the zip code; the path represents the building where your mail should be delivered; the parameters represent extra in
formation such as the number of the apartment in the building; and, finally, the anchor represents the actual person to whom you've addressed your mail.
...because the browser already has the document's own url, it can use this in
formation to fill in the missing parts of any url available inside that document.
Example 2 - Learn web development
this is the second example that explain how to build custom
form widgets.
... js html content <
form class="no-widget"> <select name="myfruit"> <option>cherry</option> <option>lemon</option> <option>banana</option> <option>strawberry</option> <option>apple</option> </select> <div class="select"> <span class="value">cherry</span> <ul class="optlist hidden"> <li class="option">cherry</li> <li class="option">lemon</li> <li class="option">banana</li> <li class="option">strawberry</li> <li class="option">apple</li> </ul> </div> <
form> css content .widget select, .no-widget .select { position : absolute; left : -5000em; height : 0; overflow : hidden; } /* --------------- */ /* required styles */ /* --------------- */ .select { position: relative; display : inline-block; } .s...
...-radius: 0 0 .4em .4em; box-shadow: 0 .2em .4em rgba(0,0,0,.4); -moz-box-sizing : border-box; box-sizing : border-box; min-width : 100%; max-height: 10em; /* 100px */ overflow-y: auto; overflow-x: hidden; } .select .option { padding: .2em .3em; } .select .highlight { background: #000; color: #ffffff; } javascript content window.addeventlistener("load", function () { var
form = document.queryselector('
form');
form.classlist.remove("no-widget");
form.classlist.add("widget"); }); result for js no js html content <
form class="no-widget"> <select name="myfruit"> <option>cherry</option> <option>lemon</option> <option>banana</option> <option>strawberry</option> <option>apple</option> </select> <div class="select"> <span class="...
...value">cherry</span> <ul class="optlist hidden"> <li class="option">cherry</li> <li class="option">lemon</li> <li class="option">banana</li> <li class="option">strawberry</li> <li class="option">apple</li> </ul> </div> <
form> css content .widget select, .no-widget .select { position : absolute; left : -5000em; height : 0; overflow : hidden; } result for no js ...
Example - Learn web development
this the example for a basic payment
form for the article how to structure an html
form.
... a payment
form html content <
form method="post"> <h1>payment
form</h1> <p>required fields are followed by <strong><abbr title="required">*</abbr></strong>.</p> <section> <h2>contact in
formation</h2> <fieldset> <legend>title</legend> <ul> <li> <label for="title_1"> <input type="radio" id="title_1" name="title" value="a"> ace </label> </li> <li> <label for="title_2"> <input type="radio" id="title_2" name="title" value="k" > king </label> </li> <li> <label for="title_3"> <input type="radio" id="title_3" name="title" value="q"> queen </label> </li> </ul> </fieldset> <p> <...
... <span>e-mail: </span> <strong><abbr title="required">*</abbr></strong> </label> <input type="email" id="mail" name="usermail"> </p> <p> <label for="pwd"> <span>password: </span> <strong><abbr title="required">*</abbr></strong> </label> <input type="password" id="pwd" name="password"> </p> </section> <section> <h2>payment in
formation</h2> <p> <label for="card"> <span>card type:</span> </label> <select id="card" name="usercard"> <option value="visa">visa</option> <option value="mc">mastercard</option> <option value="amex">american express</option> </select> </p> <p> <label for="number"> <span>card number:</span> <strong><abbr title="...
...required">*</abbr></strong> </label> <input type="tel" id="number" name="cardnumber"> </p> <p> <label for="date"> <span>expiration date:</span> <strong><abbr title="required">*</abbr></strong> <em>
formatted as mm/dd/yyyy</em> </label> <input type="date" id="date" name="expiration"> </p> </section> <section> <p> <button type="submit">validate the payment</button> </p> </section> </
form> css content h1 { margin-top: 0; } ul { margin: 0; padding: 0; list-style: none; }
form { margin: 0 auto; width: 400px; padding: 1em; border: 1px solid #ccc; border-radius: 1em; } div+div { margin-top: 1em; } label span { display: inline-block; width: 120px; text-align: right; } i...
Front-end web developer - Learn web development
the learning and getting help article provides you with a series of tips for looking up in
formation and helping yourself.
... modules javascript first steps (30–40 hour read/exercises) javascript building blocks (25–35 hour read/exercises) introducing javascript objects (25–35 hour read/exercises) client-side web apis (30–40 hour read/exercises) asynchronous javascript (25–35 hour read/exercises) web
forms — working with user data time to complete: 40–50 hours prerequisites
forms require html, css, and javascript knowledge.
... given the complexity of working with
forms, it is a dedicated topic.
... modules web
forms (40–50 hours) making the web work for everyone time to complete: 60–75 hours prerequisites it is a good idea to know html, css, and javascript before working through this section.
JavaScript basics - Learn web development
this happens in games, in the behavior of responses when buttons are pressed or with data entry on
forms; with dynamic styling; with animation, etc.
... = let myvariable = 'bob'; equality this per
forms a test to see if two values are equal.
... note: mixing data types can lead to some strange results when per
forming calculations.
...a very common
form of conditionals is the if ...
Use HTML to solve common problems - Learn web development
how to create a basic html document how to divide a webpage into logical sections how to set up a proper structure of headings and paragraphs basic text-level semantics html specializes in providing semantic in
formation for a document, so html answers many questions you might have about how to get your message across best in your document.
...these articles help you tackle the less common use cases you may face:
forms
forms are a complex html structure made to send data from a webpage to a web server.
...here is where you should start: how to create a simple web
form how to structure a web
form tabular in
formation some in
formation, called tabular data, needs to be organized into tables with columns and rows.
... how to add multiple languages into a single webpage how to display time and date with html per
formance how to author fast-loading html pages ...
Function return values - Learn web development
it is very useful to know and understand what values are returned by functions, so we try to include this in
formation wherever possible.
... next, we're going to include a way to print out in
formation about the number entered into the text input.
... you've reached the end of this article, but can you remember the most important in
formation?
... you can find some further tests to verify that you've retained this in
formation before you move on — see test your skills: functions.
JavaScript object basics - Learn web development
note: it is useful to think about the way objects communicate as message passing — when an object needs another object to per
form some kind of action often it sends a message to another object via one of its methods, and waits for a response, which we know as a return value.
... you've reached the end of this article, but can you remember the most important in
formation?
... you can find some further tests to verify that you've retained this in
formation before you move on — see test your skills: object basics.
...objects let us keep the in
formation safely locked away in their own package, out of harm's way.
Learning area release notes - Learn web development
also see our hacks post — introducing the mdn web docs front-end developer learning pathway — for more in
formation about the rationale behind it.
... our web
forms learning module now has "test your skills" assessments accompanying the articles.
... march 2020 you'll now find "test your skills" assessments accompanying the articles in the following modules: css building blocks javascript first steps javascript building blocks introducing javascript objects january 2020 the html
forms module has been significantly updated: it has been retitled web
forms, and moved out of the html topic area to recognise that it covers more than just html
form elements — it also covers styling, validation, the basics of how to send data and process it on the server, and more besides.
...you can see these on: html text fundamentals creating hyperlinks advanced text
formatting images in html video and audio content from object to iframe — other embedding technologies ...
Getting started with Ember - Learn web development
fastboot: server-side rendering, including improving search-engine optimization (seo), or improving initial render per
formance of complex, highly interactive web pages.
... for more in
formation on the technical aspects of the glimmer vm, the github repository has some documentation — specifically, references and validators may be of interest.
... in ember-cli-build.js, find the following code: let app = new emberapp(defaults, { // add options here }); add the following lines underneath it before saving the file: app.import('node_modules/todomvc-common/base.css'); app.import('node_modules/todomvc-app-css/index.css'); for more in
formation on what ember-cli-build.js does, and for other ways in which you can customize your build / pipeline, the ember guides have a page on addons and dependencies.
... ember getting started with ember ember app structure and componentization ember interactivity: events, classes and state ember interactivity: footer functionality, conditional rendering routing in ember ember resources and troubleshooting vue getting started with vue creating our first vue component rendering a list of vue components adding a new todo
form: vue events, methods, and models styling vue components with css using vue computed properties vue conditional rendering: editing existing todos focus management with vue refs vue resources svelte getting started with svelte starting our svelte todo list app dynamic behavior in svelte: working with variables and props componentizing our svelte app advanced s...
Introduction to client-side frameworks - Learn web development
some extra code is inevitable, and a framework that supports tree-shaking (removal of any code that isn't actually used in the app during the build process) will allow you to keep your applications small, but this is still a factor you need to keep in mind when considering your app's per
formance, especially on more network/storage-constrained devices, like mobile phones.
...however, if your priorities don't carefully guard per
formance and accessibility, frameworks will amplify your fragility, your bloat, and your inaccessibility.
...there are a number of advantages of this approach, mostly around per
formance (your user's device isn’t building the page with javascript; it's already complete) and security (static pages have fewer attack vectors).
... ember getting started with ember ember app structure and componentization ember interactivity: events, classes and state ember interactivity: footer functionality, conditional rendering routing in ember ember resources and troubleshooting vue getting started with vue creating our first vue component rendering a list of vue components adding a new todo
form: vue events, methods, and models styling vue components with css using vue computed properties vue conditional rendering: editing existing todos focus management with vue refs vue resources svelte getting started with svelte starting our svelte todo list app dynamic behavior in svelte: working with variables and props componentizing our svelte app advanced s...
React resources - Learn web development
for this app, we could have for example written a dedicated
form.css file to house the styles of those respective components, then imported the styles into their respective modules like this: import
form from './
form'; import './
form.css' this approach makes it easy to identify and manage the css that belongs to a specific component.
...notice, too, that the
form, filterbutton, and todo components are indented to the right – this indicates that app is their parent.
... react devtools is available in a number of
forms: a chrome browser extension.
... ember getting started with ember ember app structure and componentization ember interactivity: events, classes and state ember interactivity: footer functionality, conditional rendering routing in ember ember resources and troubleshooting vue getting started with vue creating our first vue component rendering a list of vue components adding a new todo
form: vue events, methods, and models styling vue components with css using vue computed properties vue conditional rendering: editing existing todos focus management with vue refs vue resources svelte getting started with svelte starting our svelte todo list app dynamic behavior in svelte: working with variables and props componentizing our svelte app advanced s...
Deployment and next steps - Learn web development
if we have a look at the rollup.config.js file, we can see that the svelte compiler is just a rollup plugin: import svelte from 'rollup-plugin-svelte'; [...] import { terser } from 'rollup-plugin-terser'; const production = !process.env.rollup_watch; export default { input: 'src/main.js', output: { sourcemap: true,
format: 'iife', name: 'app', file: 'public/build/bundle.js' }, plugins: [ svelte({ // enable run-time checks when not in production dev: !production, // we'll extract any component css out into // a separate file - better for per
formance css: css => { css.write('public/build/bundle.css'); } }), later on in the same file you'll also see...
...vercel is a cloud plat
form specifically tailored for static sites, which has out-of-the-box support for most common front-end tools, svelte being one of them.
... we saw how to add dynamic behavior to our web site, how to organize our app in components and different ways to share in
formation among them.
... ember getting started with ember ember app structure and componentization ember interactivity: events, classes and state ember interactivity: footer functionality, conditional rendering routing in ember ember resources and troubleshooting vue getting started with vue creating our first vue component rendering a list of vue components adding a new todo
form: vue events, methods, and models styling vue components with css using vue computed properties vue conditional rendering: editing existing todos focus management with vue refs vue resources svelte getting started with svelte starting our svelte todo list app dynamic behavior in svelte: working with variables and props componentizing our svelte app advanced s...
Working with Svelte stores - Learn web development
we will also see how to develop our own custom store to persist the todo in
formation to web storage, allowing our todos to persist over page reloads.
...for example, in
formation about the logged in user, or whether the dark theme is selected or not.
... we use the localstorage.getitem(key) and localstorage.setitem(key, value) methods to read and write in
formation to web storage, and the tostring() and toobj() (which uses json.parse()) helper functions to convert the values.
... ember getting started with ember ember app structure and componentization ember interactivity: events, classes and state ember interactivity: footer functionality, conditional rendering routing in ember ember resources and troubleshooting vue getting started with vue creating our first vue component rendering a list of vue components adding a new todo
form: vue events, methods, and models styling vue components with css using vue computed properties vue conditional rendering: editing existing todos focus management with vue refs vue resources svelte getting started with svelte starting our svelte todo list app dynamic behavior in svelte: working with variables and props componentizing our svelte app advanced s...
Accessibility Features in Firefox
for more detailed in
formation, please check the assistive technology compatibility guide is kept on an editable wiki.
... here are some examples of accessible extensions, although there are hundreds more to try (thank you to the gw micro knowledge base for some of this in
formation): adblock plus removes ads (and other objects, like banners) from web pages greasemonkey lets you add bits of javascript ("user scripts") to any web page to change its behavior.
...contributions come in many
forms.
... downloads, support and more in
formation firefox in
formation and downloads general online support and community forums accessibility newsgroup for users.
Accessibility/LiveRegionDevGuide
for more in
formation about live regions, please read the aria properties spec or the live region report to learn about aria live region markup and the live region api support document for the latest firefox api with regards to live regions.
... filtering for per
formance the most significant difference between at-spi and iaccessible2 is that at-spi is an inter-process communication service while iaccessible2 runs in process.
... as a result, care must be taken in an at-spi based application to minimize per
formance degradation by only acting on events that are truly live regions.
...the event should be filtered out as early as possible to prevent per
formance degradation.
Links and Resources
guidelines & standards in
formation and resources on section 508 - legal policy for us government purchases requiring software accessibility.
... accessibility in
formation resource center for developers at adobe - flash mx accessibility, pdf document accessibility and actionscript accessibility.
...the accessibility report will contain errors and warnings for "automatic checkpoints" and "manual checkpoints"; detailed and useful in
formation (line numbers, instances/occurences, textual references to guidelines) will be included for web authors.
...just like webxact, it can also per
form a "complete webpage quality check" for accessibility, privacy, searchability, metadata and even alt text attribute quality.
Multiprocess on Windows
from a per
formance standpoint, this is less than ideal.
... ensuring that the interceptor supports your interfaces this in
formation is current, but is likely to change when bug 1346957 is landed.
... com metadata midl outputs two different types of metadata: "fast
format strings" (also known as oicf) and (optionally, if a library statement is included in the idl) type libraries (also known as typelib).
... given those two options, it may seem that oicf is the preferred
format.
Lightweight themes
image requirements dimensions should be 3000px wide × 200px high png or jpg file
format image must be no larger than 300 kb in file size tips subtle, soft contrast images and gradients work best; highly detailed images will compete with the browser ui.
... the upper right-hand side of the image should have the most important in
formation - as a user increases the width of the browser window, the browser reveals more of the left-hand side of the image.
... upload your image — make sure it is under 300 kb in size and jpg or png
format!
... submit your theme now frequently asked questions for more in
formation about lightweight themes, including content guidelines, please see these frequently asked questions.
Android-specific test suites
contact in
formation android-test is currently owned by :sebastian and :nalexander.
... contact in
formation android-checkstyle is currently owned by :mcomella and :nalexander.
... contact in
formation android-checkstyle is currently owned by :mcomella and :nalexander.
... contact in
formation android-lint is currently owned by :sebastian and :nalexander.
Choosing the right memory allocator
see the xpcom string guide for additional in
formation.
... ns_alloc() == nsimemory::alloc() ns_realloc() == nsimemory::realloc() ns_free() == nsimemory::free() nsmemory::clone() (note: not part of nsimemory) see infallible memory allocation for in
formation about how to allocate memory infallibly; that is, how to use memory allocators that will only return valid memory buffers, and never return null.
...see jsapi reference for further in
formation.
... js_malloc() js_realloc() js_free() js_strdup() arena allocators nspr exposes arena allocators that can be used to efficiently allocate lots of small, uni
formly sized objects.
Creating a spell check dictionary add-on
parts needed to create a dictionary add-on, you first need two things: a spell check dictionary in hunspell or myspell
format, with a license which allows you to use it.
...this file contains in
formation about your add-on such as name and version number (see below).
...type = 64 indicates that the add-on is in the restartless
format, and unpack is required for hunspell to read the dictionary.
... although the restartless
format for dictionary add-ons were introduced in gecko 10, dictionary updates only works starting from gecko 18.
Debugging a hang on OS X (Archived)
this article contains historical in
formation about older versions of os x.
... creating the sample on mac os x 10.5 (xcode < 4.2) when the application is still hung, open up spin control.app (it’s in your <tt>/developer/applications/per
formance tools/</tt> folder; if it is missing, install the latest computer hardware understanding development (chud) tools from apple).
... creating the sample on mac os x 10.4 when the application is still hung, open up sampler.app (it’s in your <tt>/developer/applications/per
formance tools/</tt> folder; if it is missing, install the latest computer hardware understanding development (chud) tools from apple.).
... when you have the raw sample data, you can't just save that and attach it to a bug, because the
format is not very usable (unless the developer is a mac hacker).
Makefiles - Best practices and suggestions
plat
form specific - avoid this logic whenever possible.
... code as little plat
form specific logic within a makefile as possible, a conditional and compiler flags at most should be needed.
... for ex use defines within sources to shift plat
form logic into your source code.
... if a unit test is plat
form specific write your makefile so it can be used on all plat
forms but only do work on the specific hardware or class of hardware.
Obsolete Build Caveats and Tips
therefore, instead of deleting all these nuggets of in
formation, it's best to collect them all here and remove them from the majority happy path documentation.
... each piece of in
formation should mention the page and the section it originally came from.
... windows server 2003 r2 plat
form sdk obsolete since gecko 12.0 (firefox 12.0 / thunderbird 12.0 / seamonkey 2.9)this feature is obsolete.
... sdks older than the server 2003 r2 plat
form sdk aren't supported either.
Listening to events on all tabs
optional from gecko 10 onprogresschange called when updated progress in
formation for the download of a document is available.
... void onprogresschange( nsidomxulelement abrowser, nsiwebprogress awebprogress, nsirequest arequest, print32 acurselfprogress, print32 amaxselfprogress, print32 acurtotalprogress, print32 amaxtotalprogress ); parameters abrowser the browser representing the tab for which updated progress in
formation is being provided.
...need more in
formation on what null means.
...in such cases, the request itself should be queried for extended error in
formation (e.g., for http requests see nsihttpchannel).
Reviewer Checklist
make sure the patch doesn't create any unused code (e.g., remove strings when removing a feature) all caught exceptions should be logged at the appropriate level, bearing in mind personally identifiable in
formation, but also considering the expense of computing and recording log output.
... follow local style for the surrounding code, even if that local style isn't
formally documented.
...assume that inputs will be too big, too short, empty, mal
formed, or malicious.
... [fennec: when writing tests that use paintedsurface, ensure the paintedsurface is closed when you're done with it.] per
formance impact check for main-thread io [fennec: android may warn about this with strictmode].
mozbrowsercontextmenu
for example, if the user clicked on an image nested in an <a> tag, two menus are available — one with in
formation related to the image, and one for the link.
... action a domstring representing the action of a
form, in the case of a
form context menu.
... method a domstring representing the method of a
form, in the case of a
form context menu.
... name a domstring representing the name of a
form, in the case of a
form context menu.
Roll your own browser: An embedding how-to
contained within this directory are a couple of makefiles: basebrowser-unix basebrowser-win the xpinstall packager follows the same
format.
...more in
formation at 1 and 2.
... camino: a project aimed at delivering a best-of-breed browser on the mac os x plat
form.
... original document in
formation author(s): doug turner original document: , , and last updated date: december 8, 2004 copyright in
formation: copyright (c) doug turner ...
Gecko Keypress Event
the accel key depends on the plat
form.
...there are also some differences between the plat
forms, as described in the following sections.
... (bug 359638 partially addressed this issue by trying both characters on the key, but bug 303192 would provide a complete solution.) solution the following rules apply: key handlers should be provided with in
formation about all the possible meanings of the event.
...there should be no chrome access keys with punctuation characters or other characters that would normally require depressing the shift key.) during accel key handling, if the event includes the shift modifier, but an alternative charcode is not a bicameral letter (i.e., it does not have upper and lower case
forms), then the shift modifier state should be ignored if there is no exactly matching handler (requiring shift to be down).
Hacking with Bonsai
the original navigator code base had large sections that were shared across multiple plat
forms.
... many times, code checked in would compile or run on a handful of plat
forms.
...the build team will then pull the 8:00 am tree, and build it on a subset of the plat
forms, linux, win32 & macppc.
...read the introduction to bonsai for more in
formation about queries.
How to Report a Hung Firefox
what in
formation to include in a bug report as usual, following bug writing guidelines will make your report much more likely to lead to a fix in firefox.
... (if you're experiencing high cpu usage and firefox eventually recovers from a hang, you should try the instructions at reporting a per
formance problem instead.) is the rest of your system busy (high cpu or memory usage, or high disk activity)?
...if you suspect a hang (as opposed to slow per
formance), wait one minute on an idle system before getting the stack trace.
...the steps to induce a crash are slightly different on each plat
form: windows on windows, the stability team has written a utility which will inject a crash into firefox which will trigger the crash reporter: download crashfirefox.exe here (source code).
Introduction to Layout in Mozilla
ata flow source document arrives via network apis incrementally “pumped” through the single-threaded layout engine parse, compute style, render; repeat css used for rendering all content content theoretically separate from “presentation” key data structures content node elements, attributes, leaves dom frame rectangular
formatting primitive geometric in
formation [0..n] per content node 2nd thru nth are “continuations” style context non-geometric in
formation may be shared by adjacent frames reference counted, owned by frame view clipping, z-order, transparency [0..1] per frame, owned by frame widget native window [0..1]...
...ions passes these to the style set object, who in turn passes to the frame constructor frame constructor creates frames constructframeinternal recursively walks content tree, resolves style and creates frames either created by tag (<select>) or by display type (<p>) frame manager maintains mapping from content to frame style resolution compute stylistic in
formation based on the style rules that apply for the frame’s content node style data broken into different structures display, visibility, font, color, background, … inherit vs.
...invalid content) - harishd events - saari, joki block-and-line reflow - waterson, dbaron table reflow - karnaze
form controls - rods, bryner style resolution and rule tree - dbaron views, widgets, and painting - roc, kmcclusk editor - kin, jfrancis xul and box layout - hewitt, ben xbl - hewitt, ben conclusion data flow key data structures detailed walk-through incrementalism q & a?
... original document in
formation author(s): chris waterson last updated date: june 10, 2002 copyright in
formation: portions of this content are © 1998–2007 by individual mozilla.org contributors; content available under a creative commons license | details.
Following the Android Toasts Tutorial from a JNI Perspective
avascript strings in jni.jsm, and the sig's of the types are as follows: java type signature boolean z byte b char c class/object lclass name in slash notation here; double d float f int i long j short s void v array of type [sig here method
format (sig of type of each argument here)sig of the return type here declaring a class/object is done in a special way.
...we want to wrap this in a try-catch statement so if any errors occur we make sure to unload the classes and the java environment, this is good for per
formance.
... var toast = jni.loadclass(my_jenv, sig.toast.substr(1, sig.toast.length - 2), { static_methods: [ { name: 'maketext', sig: '()' } ], methods: [ { name: 'show', sig: '()' } ] }); the sig of methods is always in the
format of "method
format" from our types table above.
...fields do not accept arguments, so the "method
format" is not used, we simply tell the sig the type of the field, which we find out from the android documentation website.
OSFile.jsm
this is critical because some plat
forms have extremely slow storage (e.g.
... smartphones, tablets) and because, regardless of the plat
forms, doing too much i/o penalizes not just your application but potentially all the applications running on the system, which is quite bad for the user experience.
... consequently, one of the key design choices of os.file is to provide operations that are low-level enough that they do not hide any i/o from the developer (which could cause the developer to per
form more i/o than they think) and, since not all plat
forms have the same features, offer system-specific in
formation that the developer can use to optimize his algorithms for a plat
form.
...shared components os.path and os.constants.path manipulation of paths os.file.error representation of file-related errors os.file.info representation of file in
formation (size, creation date, etc.) os.file.directoryiterator.entry file in
formation obtained while visiting a directory ...
source-editor.jsm
this component has been removed from the plat
form in firefox 28.
... lastfind object an object describing the result of the last find operation per
formed using the find(), findnext(), or findprevious() method.
...this in
formation is simply recorded as part of the breakpoint annotation.
... ignorecase boolean if true, the search is per
formed in a case-insensitive manner; otherwise case is considered.
Localizing XLIFF files for iOS
firefox for ios uses the xliff xml-based file
format to hold and transfer localization data.
... xliff (extensible localisation interchange file
format) is a localization standard governed by the oasis standards body.
... the goal of the standard is to have an xml-based
format to use when exchanging localization data between tools without the potential of data loss or corruption.
...keep in mind the following sets of characters that need to remain untranslated: $(some_text_here) is a variable
format, %1$@ is another variable
format.
QA phase
now we'll walk you through per
forming some quality assurance testing on your work to make sure you're on the right track.
... enter the following command to per
form the configuration: $ ./mach configure once your command-line finishes spitting out the config command's output, navigate to the newly created directory: $ cd ../firefox-build/browser/locales now you're ready to build!
...enter the following command: hg push http://hg.mozilla.org/l10n-central/x-testing mercurial will connect to your repo and ask you to provide your account in
formation (i.e., the username and the password).
... real url is http://hg.mozilla.org/l10n-central/x-testing pushing to http://hg.mozilla.org/l10n-central/x-testing searching for changes http authorization required realm: hg.mozilla.org http user: your_id password: after you enter your account in
formation, the changeset will be pushed.
Localization quick start guide
this guide is filled with all of the basic, technical in
formation you need to get involved in the mozilla l10n program.
...it is important to know which in
formation applies to which type of contributor.
... to help you filter through to the most applicable in
formation, note that all in
formation that is unique to those starting a new localization will be in orange font.
... all in
formation that is unique to those joining an existing localization will be in blue font.
SVN for Localizers
if you're already familiar with this in
formation, skip ahead to mozilla's svn repositories.
...in each of those locale directories are other directories with files to be localized in .lang
format.
... note: sometimes you'll find references to commands in abbreviated
form (svn ci = svn commit, svn up = svn update, svn co = svn checkout, etc.) commit doesn't work, what's wrong?
...if you forget any of the in
formation on this page, don't worry, you can always come back and review.
Basics
with mathml, one can build sets such as (go on, right-click any of these equations to experiment the zoom) { 0 , 1 , 2 , 3 , 4 } or { ⌊ a b ⌋ | a 2 + b 2 ≤ 3 } , write calculus d y d x = 1 y 2 ,
form rather complicated expressions lim n → n ( 1 + 1 n ) n − e n , k = ∂ 2 z ∂ x 2 ∂ 2 z ∂ y 2 - ( ∂ 2 z ∂ x ∂ y ) 2 ( 1 + ( ∂ z ∂ x ) 2 + ( ∂ z ∂ y ) 2 ) 2 , write vector equations y = a x + b , etc.
...when you left-click any individual entry, it should toggle between its expanded and unexpanded
forms.
...<mstyle scriptlevel="0"> <mrow> <mn>2</mn> <mo>+</mo> <mfrac numalign="left"> <mstyle scriptlevel="0"> <msup><mn>7</mn><mn>2</mn></msup> </mstyle> <mstyle scriptlevel="0"> <mn>2</mn><mo>+</mo><mo mathvariant="bold">...</mo> </mstyle> </mfrac> </mrow> </mstyle> </mfrac> </mrow> </mstyle> </mfrac> </mrow> </mstyle> </mfrac> </mrow> </mstyle> </mfrac> </mrow> </math> </button> </div> for more in
formation about mathml in mozilla, see the mathml project page.
... there are links to more samples, screenshots and instructions on how to download fonts for various plat
forms.
Mozilla Web Services Security Model
overview (this document is being compiled from scattered documentation and source code and most of the in
formation in it has not been verified.
... web-scripts-access.xml file
format the web-scripts-access.xml file is an xml document.
... any errors in xml syntax, as well as many failures to follow the
format, will cause the document to be ignored.
...lns="http://www.mozilla.org/2002/soap/security"> <delegate/> <allow type="none"/> </webscriptaccess> and in the services directory: <webscriptaccess xmlns="http://www.mozilla.org/2002/soap/security"> <allow type="soapv"/> <allow type="soap"/> </webscriptaccess> good examples (needed.) references new security model for web services, the original proposal for the web-scripts-access.xml file
format web services roadmap, documenting when web services features, including the security model, were first supported additional reading documentation of crossdomain.xml, a similar
format used by macromedia flash player ...
Mozilla Development Tools
the tools needed to build mozilla are described on the build page for your plat
form.
...it is our home-grown web-based tool for watching the progress of the continuous builds that we run on multiple plat
forms.
... it is how we are able to tell when a checkin has broken the build on some plat
form, and how we know which person needs to be viciously flogged.
... original document in
formation author(s): myk melez last updated date: november 8, 2005 copyright in
formation: portions of this content are © 1998–2007 by individual mozilla.org contributors; content available under a creative commons license | details.
about:memory
if you do not wish to share this in
formation, you can select the "anonymize" checkbox before clicking on "measure and save..." or "measure...".
...it only really matters on 32-bit plat
forms such as win32.
... there is also "vsize-max-contiguous" (not measured on all plat
forms, and not shown in this example), which indicates the largest single chunk of available virtual address space.
...the measurements taken vary between plat
forms.
Preferences system
using this system it is possible to create preferences windows that display and operate appropriately on various plat
forms (windows, macos x and gnome).
...reference in
formation about them is available below: preferences system documentation: introduction: getting started | examples | troubleshooting reference: prefwindow | prefpane | preferences | preference | xul attributes use code for a typical preferences window may look like this: <prefwindow id="apppreferences" xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"> <prefpane id="pane1" label="&pane1.title;"> <preferences> <preference id="pref1" name="pref.name" type="bool"/> </preferences> ..
...you should be careful to read the higs for the plat
forms you are targeting and use the xul preprocessor if necessary to set different window titles as appropriate.
... you should also be careful to specify the width of the window (in em) as appropriate using the preprocessor for each targeted plat
form, as well as the height (in em) for plat
forms where the window size does not change as the selected panel is changed (e.g.
I/O Functions
this chapter describes the nspr functions used to per
form operations such as system access, normal file i/o, and socket (network) i/o.
...for in
formation about the types most commonly used with the functions described in this chapter, see i/o types.
... two new functions, pr_transmitfile and pr_acceptread, can exploit the new system calls of some operating systems for higher per
formance.
...the only i/o operation you can per
form on a pollable event is to poll it with the pr_poll_read flag.
NSPR Types
for in
formation on naming conventions for nspr types, functions, and macros, see nspr naming conventions.
... calling convention types these types are used to support cross-plat
form declarations of prototypes and implementations: pr_extern is used for declarations of external functions or variables.
... in dowhim.c: pr_implement( void ) dowhatimean( void ) { return; }; prthread *thread = pr_createthread(..., rootfunction, ...); algebraic types nspr provides the following type definitions with unambiguous bit widths for algebraic operations: 8-, 16-, and 32-bit integer types 64-bit integer types floating-point number type for convenience, nspr also provides type definitions with plat
form-dependent bit widths: native os integer types 8-, 16-, and 32-bit integer types signed integers print8 print16 print32 unsigned integers pruint8 pruint16 pruint32 64-bit integer types different plat
forms treat 64-bit numeric fields in different ways.
...conscientious use of these macros ensures portability of code to all the plat
forms supported by nspr and still provides optimal behavior on those systems that treat long long values directly.
JSS Provider Notes
keyfactory supported algorithms notes dsa rsa the following trans
formations are supported for generatepublic() and generateprivate(): from to rsapublickeyspec rsapublickey dsapublickeyspec dsapublickey x509encodedkeyspec rsapublickey ...
... translatekey() simply gets the encoded
form of the given key and then tries to import it by calling generatepublic() or generateprivate().
... secretkeyfactory supported algorithms notes aes des desede (des3 ) pbahmacsha1 pbewithmd5anddes pbewithsha1anddes pbewithsha1anddesede (pbewithsha1anddes3 ) pbewithsha1and128rc4 rc4 generatesecret supports the following trans
formations: keyspec class key algorithm pbekeyspec org.mozilla.jss.crypto.pbekeygenparams using the appropriate pbe algorithm: des desede rc4 desedekeyspec desede ...
... deskeyspec des secretkeyspec aes des desede rc4 getkeyspec supports the following trans
formations: key algorithm keyspec class desede desedekeyspec des deskeyspec desede des aes rc4 secretkeyspec for increased security, some secretkeys may not be extractable from their pkcs #...
Mozilla-JSS JCA Provider notes
keyfactory supported algorithms notes dsa rsa the following trans
formations are supported for generatepublic() and generateprivate(): from to rsapublickeyspec rsapublickey dsapublickeyspec dsapublickey x509encodedkeyspec rsapublickey dsapublickey rsaprivatecrtkeyspec rsaprivatekey dsaprivatekeyspec dsaprivatekey pkcs8encoded...
... translatekey() simply gets the encoded
form of the given key and then tries to import it by calling generatepublic() or generateprivate().
... secretkeyfactory supported algorithms notes aes des desede (des3) pbahmacsha1 pbewithmd5anddes pbewithsha1anddes pbewithsha1anddesede (pbewithsha1anddes3) pbewithsha1and128rc4 rc4 generatesecret supports the following trans
formations: keyspec class key algorithm pbekeyspec org.mozilla.jss.crypto.pbekeygenparams using the appropriate pbe algorithm: des desede rc4 desedekeyspec desede deskeyspec des secretkeyspec aes des desede rc4 getkeyspec supports the following ...
...trans
formations: key algorithm keyspec class desede desedekeyspec des deskeyspec desede des aes rc4 secretkeyspec for increased security, some secretkeys may not be extractable from their pkcs #11 token.
NSS_3.12.2_release_notes.html
nss 3.12.2 release notes 2008-10-20 newsgroup: mozilla.dev.tech.crypto contents introduction distribution in
formation new in nss 3.12.2 bugs fixed documentation compatibility feedback introduction network security services (nss) 3.12.2 is a patch release for nss 3.12.
... distribution in
formation the cvs tag for the nss 3.12.2 release is nss_3_12_2_rtm.
...go to the subdirectory for your plat
form, dbg (debug) or opt (optimized), to get the tar.gz or zip file.
... use the installed libz.so where available bug 305693: shlibsign generates pqg for every run bug 311483: exposing includecertchain as a parameter to sec_pkcs12addcertandkey bug 390527: get rid of pkixerrormsg variable in pkix_error bug 391560: libpkix does not consistently return pkix_validatenode tree that truly represent failure reasons bug 408260: certutil usage doesn't give enough in
formation about trust arguments bug 412311: replace pr_interval_no_wait with pr_interval_no_timeout in client initialization calls bug 423839: add multiple pkcs#11 token password command line option to nss tools.
NSS 3.14.2 release notes
the documentation is in the docbook
format and can be rendered as html and unix-style manual pages using an optional build target.
...if compiled on linux systems in 64-bit mode, nss will include runtime detection to check if the plat
form supports aes-ni and pclmulqdq.
...support for other plat
forms, such as windows, will follow in a future nss release.
... bugs fixed in nss 3.14.2 https://bugzilla.mozilla.org/buglist.cgi?list_id=5502456;resolution=fixed;classification=components;query_
format=advanced;target_milestone=3.14.2;product=nss compatibility nss 3.14.2 shared libraries are backward compatible with all older nss 3.x shared libraries.
NSS 3.14.3 release notes
distribution in
formation the cvs tag is nss_3_14_3_rtm.
... new functions in pk11pub.h pk11_signwithsymkey - similar to pk11_sign, per
forms a signing operation in a single operation.
... however, unlike pk11_sign, which uses a seckeyprivatekey, pk11_signwithsymkey per
forms the signature using a symmetric key, such as commonly used for generating macs.
...bugs fixed in nss 3.14.3 https://bugzilla.mozilla.org/buglist.cgi?list_id=5689256;resolution=fixed;classification=components;query_
format=advanced;target_milestone=3.14.3;product=nss compatibility nss 3.14.3 shared libraries are backward compatible with all older nss 3.x shared libraries.
NSS 3.15 release notes
distribution in
formation the hg tag is nss_3_15_rtm.
... in pk11pub.h pk11_decrypt - per
forms decryption as a single pkcs#11 operation (eg: not multi-part).
... pk11_encrypt - per
forms encryption as a single pkcs#11 operation (eg: not multi-part).
... bugs fixed in nss 3.15 this bugzilla query returns all the bugs fixed in nss 3.15: https://bugzilla.mozilla.org/buglist.cgi?list_id=6278317&resolution=fixed&classification=components&query_
format=advanced&product=nss&target_milestone=3.15 ...
NSS 3.28 release notes
distribution in
formation the hg tag is nss_3_28_rtm.
...note that this detection has a one-off per
formance cost, which can be avoided by using the ssl_namedgroupconfig function, to limit supported groups to those that nss provides.
...background in
formation can be found in mozilla's blog post.
... bugs fixed in nss 3.28 this bugzilla query returns all the bugs fixed in nss 3.28: https://bugzilla.mozilla.org/buglist.cgi?resolution=fixed&classification=components&query_
format=advanced&product=nss&target_milestone=3.28 compatibility nss 3.28 shared libraries are backward compatible with all older nss 3.x shared libraries.
NSS 3.33 release notes
distribution in
formation the hg tag is nss_3_33_rtm.
... this version of nss uses a
formally verified implementation of curve25519 on 64-bit systems.
... when nss is compiled without nss_force_fips=1 startup checks are no longer per
formed.
... bugs fixed in nss 3.33 this bugzilla query returns all the bugs fixed in nss 3.33: https://bugzilla.mozilla.org/buglist.cgi?resolution=fixed&classification=components&query_
format=advanced&product=nss&target_milestone=3.33 compatibility nss 3.33 shared libraries are backward compatible with all older nss 3.x shared libraries.
NSS 3.46 release notes
the nss team would like to recognize first-time contributors: giulio benetti louis dassy mike kaganski xhimanshuz distribution in
formation the hg tag is nss_3_46_rtm.
... new in nss 3.46 this release contains no significant new functionality, but concentrates on providing improved per
formance, stability, and security.
... of particular note are significant improvements to aes-gcm per
formance on arm.
... times out while fetching gpg key bug 1563786 - update hacl-star docker image to pull specific commit bug 1559012 - improve gcm perfomance using pmull2 bug 1528666 - correct resumption validation checks bug 1568803 - more tests for client certificate authentication bug 1564284 - support profile mobility across windows and linux bug 1573942 - gtest for pkcs11.txt with different breaking line
formats bug 1575968 - add strsclnt option to enforce the use of either ipv4 or ipv6 bug 1549847 - fix nss builds on ios bug 1485533 - enable nss_ssl_tests on taskcluster this bugzilla query returns all the bugs fixed in nss 3.46: https://bugzilla.mozilla.org/buglist.cgi?resolution=fixed&classification=components&query_
format=advanced&product=nss&target_milestone=3.46 compatibility nss 3.46 sha...
NSS Sample Code Sample1
(the admin should verify this.) // // in this example, the server must be started to per
form // this function (see start()) int exportkeys(secitem *pubkey, secitem **wrappedenckey, secitem **wrappedmackey); // import the keys received from another server in the // cluster.
...if (prvkey) seckey_destroyprivatekey(prvkey); return rv; } int server::shutdown() { if (menckey) pk11_freesymkey(menckey); if (mmackey) pk11_freesymkey(mmackey); menckey = 0; mmackey = 0; return 0; } int server::comparekeys(server *peer) { int rv; secitem *mackey1 = 0; secitem *mackey2 = 0; secitem *enckey1 = 0; secitem *enckey2 = 0; // export each of the keys in raw
form rv = rawexportkey(mmackey, &mackey1); if (rv) goto done; rv = rawexportkey(peer->mmackey, &mackey2); if (rv) goto done; rv = rawexportkey(menckey, &enckey1); if (rv) goto done; rv = rawexportkey(peer->menckey, &enckey2); if (rv) goto done; if (!secitem_itemsareequal(mackey1, mackey2)) { rv = 1; goto done; } if (!secitem_itemsareequal(enckey1, enckey2)) { rv = 1; goto done;...
... // be sent to server 1 rv = server2->exportpublickey(&pubkeydata); if (rv) { cout << "exportpublickey failed" << endl; goto trans_done; } // send the public key to server 1 and get back the // wrapped key values rv = server1->exportkeys(pubkeydata, &wrappedenckey, &wrappedmackey); if (rv) { cout << "exportkeys failed" << endl; goto trans_done; } // print - for in
formation cout << "wrapped encryption key" << endl; printbuffer(wrappedenckey->data, wrappedenckey->len); cout << "wrapped mac key" << endl; printbuffer(wrappedmackey->data, wrappedmackey->len); // import the keys into server 2 - this just puts the wrapped // values into the "files" rv = server2->importkeys(wrappedenckey, wrappedmackey); if (rv) { cout << "importkeys f...
...reeitem(wrappedenckey, pr_true); if (wrappedmackey) secitem_freeitem(wrappedmackey, pr_true); if (pubkeydata) secitem_freeitem(pubkeydata, pr_true); } if (rv) goto done; // start server 2 - this unwraps the encryption and mac keys // so that they can be used rv = server2->start(); if (rv) { cout << "cannot start server 2" << endl; goto done; } // list keys in the token - in
formational { pk11slotinfo *slot = 0; seckeyprivatekeylist *list = 0; seckeyprivatekeylistnode *n; slot = pk11_getinternalkeyslot(); if (!slot) goto list_done; cout << "list private keys" << endl; list = pk11_listprivkeysinslot(slot, 0, 0); if (!list) goto list_done; for(n = privkey_list_head(list); !privkey_list_end(n, list); n = privkey_list_...
Utilities for nss samples
util.h /* this source code
form is subject to the terms of the mozilla public * license, v.
...in the single password * case a line would just have the passord whereas in the multi- * password variant they could be of the
form * * token_1_name:its_password * token_2_name:its_password * */ extern char * filepasswd(pk11slotinfo * slot, prbool retry, void *arg); /* * getmodulepassword */ extern char * getmodulepassword(pk11slotinfo *slot, int retry, void *pwdata); /* * generaterandom */ extern secstatus generaterandom(unsigned char *rbuf, ...
...m */ extern secstatus filetoitem(secitem *dst, prfiledesc *src); /* * seedfromnoisefile */ extern secstatus seedfromnoisefile(const char *noisefilename); /* * filesize */ extern long filesize(const char* filename); /* * readderfromfile */ extern secstatus readderfromfile(secitem *der, const char *infilename, prbool ascii); #endif /* _util_h */ util.c /* this source code
form is subject to the terms of the mozilla public * license, v.
...in the single password * case a line would just have the passord whereas in the multi- * password variant they could be of the
form * * token_1_name:its_password * token_2_name:its_password * */ char * filepasswd(pk11slotinfo *slot, prbool retry, void *arg) { char* phrases, *phrase; prfiledesc *fd; print32 nb; char *pwfile = arg; int i; const long maxpwdfilesize = 4096; char* tokenname = null; int tokenlen = 0; if (!pwfile) return 0; if (retry) { return 0; /* no ...
nss tech note7
rsa signing and encryption with nss nss technical note: 7 this technical note explains how to use nss to per
form rsa signing and encryption.
... key pairs may be generated elsewhere, exported in encrypted
form, and imported into a crypto module.
...pkcs #1 v1.5 block
formatting question: in pkcs #1 v1.5 (section 8.1 encryption-block
formatting) and v2.1 (section 7.2.1 encryption operation), pkcs1 v1.5 padding is described like this: 00 || 02 || ps || 00 || m but in pkcs #1 v2.0 (section 9.1.2.1 encoding operation, step 3) and on the w3c web site (http://www.w3.org/tr/xmlenc-core/#rsa-1_5), pkcs1 v1.5 padding is described like this: 02 || ps || 00 || m ...
... "the same length as the rsa modulus with an initial octet of 0" and "one octet shorter without that initial octet" are exactly the same thing because the
formatted block is treated as a big-endian big integer by the rsa algorithm.
NSS Tech Notes
nss technical notes newsgroup: mozilla.dev.tech.crypto nss technical notes provide latest in
formation about new nss features and supplementary documentation for advanced topics in programming with nss.
... tn4: pulling certificate extension in
formation out of ssl certificates.
... tn5: using nss to per
form miscellaneous cryptographic operations.
... tn8: background in
formation on libssl's cache functions and sids.
Rhino documentation
in
formation on rhino for script writers and embedders.
... license rhino license in
formation.
... per
formance hints some tips on writing faster javascript code.
... scopes and contexts describes how to use scopes and contexts for the best per
formance and flexibility, with an eye toward multithreaded environments.
Rhino scopes and contexts
simple embeddings of rhino probably won't need any of the in
formation here, but more complicated embeddings can gain per
formance and flexibility from the techniques described below.
... contexts the rhino context object is used to store thread-specific in
formation about the execution environment.
... so to share in
formation across multiple scopes, we first create the object we wish to share.
...so we can store in
formation that varies across scopes in the instance scope yet still share functions that manipulate that in
formation reside in the shared scope.
FOSS
wrappers / bindings c++ cocos2d-js - cocos2d-js is a cross-plat
form game engine which embeds spidermonkey, providing the same api for both web and native plat
forms.
... python http://pypi.python.org/pypi/python-spidermonkey wxwidgets gluescript (
formerly wxjavascript) code generators jsapigen - generates bindings for embedding spidermonkey in c applications extensions http://code.google.com/p/jslibs/ - zlib, sqlite, nspr, ode, libpng, libjpeg, libffi, (...) libraries for spidermonkey http://www.jsdb.org/ - a js shell with native objects for files, networks, databases, compression, email, etc.
... http://code.google.com/p/gpsee/ - commonjs plat
form, native-language module interoperability methods, modules, etc.
... http://javalikescript.free.fr/ - a general-purpose javascript plat
form that aims to provide an extensible tooling framework http://www.synchro.net/ - a telnet/ssh bulletin board system (bbs) and internet server (http/smtp/ftp) with extra internet services written in javascript (irc, imap, gopher, and many more) https://github.com/mindbit/libjssql/wiki - a library that aims to provide a generic sql api for javascript that is as similar as possible to jdbc miscellaneous serverjs, a standardization effort for...
Exact Stack Rooting
the method you should use to keep the gc up-to-date with this in
formation will vary depending on where the gcpointer is being stored.
... per
formance tweaking in aggregate, exact and conservate stack rooting should have similar per
formance.
... the per
formance tradeoffs that these techniques make, however, are quite different.
... if the extra overhead of exact rooting does end up adding an unacceptable cost to a specific code path that is not mitigated by a faster gc, there are some tricks you can use to get better per
formance at the cost of more complex code.
JS_SuspendRequest
suspends the calling thread's current request, if any, to allow the thread to block or per
form time-consuming calculations.
... description in js_threadsafe builds, when a multi-threaded application is in a request but needs to block or per
form lengthy computation that can race safely with the garbage collector, it should call js_suspendrequest before the time-consuming operation and js_resumerequest after.
... for more in
formation about thread safety and requests, see js_threadsafe.
...this allows the runtime to per
form garbage collection if needed and allows other threads to access objects that the calling thread had locked.
Setting up CDT to work on SpiderMonkey
eclipse's cdt has some pretty decent features that make it an attractive environment to work in when you are interested in getting code hints, autocompletion, function, and field usage in
formation and general ide goodness for c/c++.
... step 1 - preparing a spidermonkey build for cdt to index all code, spidermonkey has to be built with debug in
formation.
... choose the correct toolchain for your plat
form (i.e.
... instead, change "build command" to read make -w (this is required because cdt needs detailed in
formation about which directories make operates on, which using -w causes make to provide).
Mozinfo
throughout mozmill and other mozilla python code, checking the underlying plat
form is done in many different ways.
...because in
formation is not consolidated, checks are not done consistently, nor is it defined what we are checking for.
...mozinfo is a bridge interface, making the underlying (complex) plethora of os and architecture combinations con
form to a subset of values of relevance to mozilla software.
...additionally, the service pack in use is available on the windows plat
form.
A Web PKI x509 certificate primer
extensions can be marked as critical or non-critical, con
forming certificate verification libraries should stop processing verification when encountering a critical extension that they do not understand ( and should continue processing if the extension is marked as non-critical) mozila::pkix has this behavior.
... authority in
formation access this extension is primarily used to to describe the ocsp location for revocation checking.
...the root certificates included by default have their "trust bits" set to indicate if the ca's root certificates may be used to verify certificates for ssl servers, s/mime email users, and/or digitally-signed code objects without having to ask users for further permission or in
formation.
...ot properly encoded according to asn.1 (der) encoding re-generate the improperly-encoded certificate sec_error_ca_cert_invalid an end-entity certificate is being used to issue another certificate ensure that any certificate intended to issue certificates has a basic constraints extension with ca: true sec_error_bad_signature a signature on a certificate is improperly
formatted or the certificate has been tampered with re-issue the certificate with the bad signature sec_error_cert_bad_access_location the ocsp uri in the authorityin
formationaccess extension is improperly
formed re-generate the certificate with a well-
formed ocsp uri sec_error_cert_not_in_name_space a certificate has a common name or subject alternative name that is not ...
Setting up an update server
see building firefox for more in
formation on building firefox locally.
... <?xml version="1.0" encoding="utf-8"?> <updates> <update type="minor" displayversion="2000.0a1" appversion="2000.0a1" plat
formversion="2000.0a1" buildid="21181002100236"> <patch type="complete" url="http://127.0.0.1:8000/<mar name>" hashfunction="sha512" hashvalue="<hash>" size="<size>"/> </update> </updates> if you've downloaded the mar you're using, you'll find the sha512 value in a file called sha512sums in the root of the release directory on archive.mozilla.org for a release or beta build (you'll have t...
...o search it for the file name of your mar, since it includes the sha512 for every file that's part of that release), and for a nightly build you'll find a file with a .checksums extension adjacent to your mar that contains that in
formation (for instance, for the mar file at https://archive.mozilla.org/pub/firefox/nightly/2019/09/2019-09-17-09-36-29-mozilla-central/firefox-71.0a1.en-us.win64.complete.mar, the file https://archive.mozilla.org/pub/firefox/nightly/2019/09/2019-09-17-09-36-29-mozilla-central/firefox-71.0a1.en-us.win64.checksums contains the sha512 for that file as well as for all the other win64 files that are part of that nightly release).
... on macos, you can get the exact size of your mar by running the command: stat -f%z <filename> or on linux, the same command would be: stat --
format "%s" <filename> starting your update server now, start an update server to serve the update files on port 8000.
Gecko states
because objects with this state are not available to users, client applications should not communicate in
formation about the object to users.
...if this second state is defined, then clients can communicate the in
formation about the object to users.
...a speech-based accessibility aid does not announce in
formation when an object with this state has the focus because the object automatically announces in
formation.
... applied to: events: concomitant state: state_selected state_linked indicates that the object is
formatted as a hyperlink.
Places
it also includes new features including favicon storage and the ability to annotate pages with arbitrary in
formation.
... it also introduces new user interfaces for managing all this in
formation; see places on the mozilla wiki.
... using the places history service how to access history in
formation using the places api.
... displaying places in
formation using views how to use places views to display places data in your own applications or extensions.
mozIAsyncHistory
if there's no in
formation available for a given place, acallback is called with a stub place info object, containing just the provided data (guid or uri).
...void isurivisited( in nsiuri auri, in mozivisitedstatuscallback acallback ); parameters auri the places for which to retrieve in
formation, identified by either a single place guid, a single uri, or a js array of uris and/or guids.
...void updateplaces( in moziplaceinfo aplaceinfo, in mozivisitinfocallback acallback optional ); parameters aplaceinfo the moziplaceinfo object[s] containing the in
formation to store or update.
...if more than one operation is per
formed for a given visit, only one callback will be given (i.e.
getFile
the individual plat
form implementation of nsidirectoryserviceprovider maps the symbolic path location passed to this function and returns the appropriate nsifile.
...if true, this lets the directory service cache results to improve the per
formance of directory lookups.
...available on all plat
forms these symbolic names are available on all plat
forms (although, of course, they may refer to different physical paths on the storage device).
... ns_gre_component_dir "grecomsd" plat
form-specific locations some symbolic names represent plat
form-specific locations.
nsIEditor
node existingrightnode, in long offset, out nsidomnode newleftnode); void joinnodes(in nsidomnode leftnode, in nsidomnode rightnode, in nsidomnode parent); void deletenode(in nsidomnode child); void marknodedirty(in nsidomnode node); direction controller void switchtextdirection(); output methods astring outputtostring(in astring
formattype, in unsigned long flags); example: // flags are declared in base/public/nsidocumentencoder.idl // outputselectiononly = 1, output
formatted = 2, // outputraw = 4, outputbodyonly = 8, // outputpre
formatted = 16, outputwrap = 32, // output
formatflowed = 64, outputabsolutelinks = 258, // outputencodew3centities = 256, outputcrlinebreak = 512, //...
... outputlflinebreak = 1024, outputnoscriptcontent = 2048, // outputnoframescontent = 4096, outputno
formattinginpre = 8192, // outputencodebasicentities=16384, outputencodelatin1entities=32768, // outputencodehtmlentities=65536, outputpersistnbsp=131072 editorapi.outputtostring('text/html', 2); editorapi.outputtostring('text/plain', 4); // output the body tag, body children and the html end tag (</html>).
...editorapi.outputtostring('text/html', 8); // xml: all in xml with _moz_dirty="" in new tags, html tags are in upper case // application/xhtml+xml
format do the same editorapi.outputtostring('text/xml', 2); // the body is not recognized, everything is printed void outputtostream(in nsioutputstream astream, in astring
formattype, in acstring charsetoverride, in unsigned long flags); listener methods void addeditorobserver(in nsieditorobserver observer);obsolete since gecko 18 void seteditorobserver(in editactionlistener observer); void removeeditorobserver(in nsieditorobserver observer obsolete since gecko 18); void addeditactionlistener(in nsieditactionlistener listener); void removee...
... aselcon the nsiselectioncontroller object used to get selection location in
formation.
nsIFilePicker
void open(in nsifilepickershowncallback afilepickershowncallback); short show(); obsolete since gecko 57.0 attributes attribute type description addtorecentdocs boolean if true, the file is added to the operating system's "recent documents" list (if the operating system has one; nothing happens if there is no such concept on the user's plat
form).
...on some plat
forms, this is automatically appended to filenames the user enters, if required.
... filterapps 0x040 corresponds to the plat
form specific application filter for file extensions.
... application files for the user's plat
form will pass through the filter.
nsIHapticFeedback
fox 4 / thunderbird 3.3 / seamonkey 2.1) implemented by: @mozilla.org/widget/hapticfeedback;1 as a service: var hapticfeedback = components.classes["@mozilla.org/widget/hapticfeedback;1"] .getservice(components.interfaces.nsihapticfeedback); once you have the service, you can initiate haptic feedback (that is, cause the device to vibrate, if it's supported) by calling per
formsimpleaction(): hapticfeedback.per
formsimpleaction(components.interfaces.nsihapticfeedback.longpress); method overview void per
formsimpleaction(in long islongpress); constants press length constants constant value description shortpress 0 specify as the action type to per
form a short vibration.
... longpress 1 specify as the action type to per
form a long vibration.
... methods per
formsimpleaction() per
form haptic feedback.
... void per
formsimpleaction( in long islongpress ); parameters islongpress the press length; this will determine how long the vibration should last.
nsIMimeConverter
the nsimimeconverter service allows you to convert headers into and out of mime
format.
... encodemimepartiistr_utf8() encodes a string into a mime-encoded
form according to rfc 2047.
... string encodemimepartiistr_utf8(in autf8string header, in boolean structured, in string mailcharset, in long fieldnamelen, in long encodedwordsize); parameters header the string to encode into the mime-encoded
form.
...thunderbird provides a utility function which per
forms this for the currently selected message: markcurrentmessageasread().
nsIPlacesView
the nsiplacesview interface provides a view-agnostic way to access in
formation about a places view.
...rather, each view is responsible for translating its own selection
format into one the controller can understand.
...see displaying places in
formation using views for examples.
... see also displaying places in
formation using views ...
nsIProgressEventSink
netwerk/base/public/nsiprogresseventsink.idlscriptable this interface is used to asynchronously convey channel status and progress in
formation that is generally not critical to the processing of the channel.
... the in
formation is intended to be displayed to the user in some meaningful way.
... inherits from: nsisupports last changed in gecko 1.7 this interface is used to asynchronously convey channel status and progress in
formation that is generally not critical to the processing of the channel.
... the in
formation is intended to be displayed to the user in some meaningful way.
nsIURI
netwerk/base/public/nsiuri.idlscriptable this is an interface for an uni
form resource identifier with internationalization support, offering attributes that allow setting and querying the basic components of a uri, and methods for per
forming basic operations on uris.
... inherits from: nsisupports last changed in gecko 6.0 (firefox 6.0 / thunderbird 6.0 / seamonkey 2.3) see the following rfcs for details: rfc3490: internationalizing domain names in applications (idna) rfc3986: uni
form resource identifier (uri): generic syntax rfc3987: internationalized resource identifiers subclasses of nsiuri, such as nsiurl, impose further structure on the uri.
...if the string cannot be parsed as a uri, ns_error_mal
formed_uri thrown.
... if the uri stores in
formation from the nsiioservice interface's nsiioservice.newuri() call that created it, other than just the parsed string, the behavior of this in
formation when setting the spec attribute is undefined.
nsIUpdate
this object also contains in
formation about the update that the front end and other application services can use to learn more about what is going on.
... errorcode long a numeric error code that conveys additional in
formation about the state of a failed update or failed certificate attribute check during an update check.
... name astring the name of the update, in the
form "application_name update_version" patchcount unsigned long the number of patches supplied by this update.
... plat
formversion astring the toolkit version of this update.
nsIUpdateItem
maxappversion astring the maximum version of the application that this item works with, in fvf
format.
... minappversion astring the minimum version of the application that this item works with, in fvf
format.
... version astring the version of the item, in fvf
format.
...can be null and if supplied must be in the
format of "type:hash" (see the types in nsicryptohash and nsixpinstallmanager.initmanagerwithhashes().
nsIXULRuntime
xpcom/system/nsixulruntime.idlscriptable provides in
formation about the xul runtime to allow extensions and xul applications to determine in
formation about the xul runtime.
...it may not be available on all plat
forms, especially unusual processor or compiler combinations.
... the result takes the
form <processor>-<compilerabi>, for example: x86-msvc ppc-gcc3.
... example display the user's operating system in an alert box: var xulruntime = components.classes["@mozilla.org/xre/app-info;1"] .getservice(components.interfaces.nsixulruntime); alert(xulruntime.os); see also nsixulappinfo - a related interface providing in
formation about the host application, it's also implemented by xre/app-info.
Getting Started Guide
nscomptr does not queryinterface on assignment without your explicit permission in the
form of the do_queryinterface directive.
... nscomptrs for non-interface classes appropriately
formatted answer to come, in the meanwhile, the full details are available in this news posting (via google groups).
...returning an addrefed pointer in almost any
form as a function result leads to several potential errors, some of which are leaks, some of which are dangling pointers.
... // preferred
form: if you must return a pointer, use |already_addrefed|...
Using nsIDirectoryService
content
formerly at http://www.mozilla.org/projects/xpcom/nsdirectoryservice.html general nsdirectoryservice in
formation: nsdirectoryservice implements the nsiproperties interface.
...known locations the nsiproperties strings for currently defined locations can be found in: nsdirectoryservicedefs.h nsappdirectoryservicedefs.h nsxulappapi.h content
formerly at http://www.mozilla.org/projects/xpco...locations.html background the way in which mozilla components locate special files and directories has changed.
...on plat
forms which use path environment variables, you will need to set one of these paths to the /bin directory.
...related pages code_snippets:file_i/o original document in
formation authors: conrad carlen, doug turner last updated date: september 26, 2000 copyright in
formation: portions of this content are © 1998–2007 by individual mozilla.org contributors; content available under a creative commons license | details.
Using the Gecko SDK
(more in
formation on xpcom is available at the xpcom project page.) the intent of this guide is to help you build your components "the right way" such that they will remain compatible with future versions of mozilla.
... for in
formation on how to retrieve and install the gecko sdk, see here.
...the abi of the component interfaces depends on the c++ abi of the host compiler (i.e., the vtable
format and calling conventions of the virtual methods may vary from compiler to compiler).
...(ports of this guide are welcome.) a "frozen" interface or function is guaranteed to be supported by future versions of same major version of the plat
form.
MailNews fakeserver
it utilizes utf-8 as its transport mechanism and is capable of per
forming proper pipelining of commands.
...a daemon is in
formation about the server that can be manipulated.
... server.start(port); // set up a nsimsgincomingserver locally localserver.someactionrequiringconnection(); server.per
formtest(); // nothing will be executed until the connection is closed // localserver.closecachedconnections() is generally a good way to do so server.resettest(); // set up second test server.per
formtest(); transaction = server.playtransaction(); // finished with tests server.stop(); } currently, fakeserver provides no means to keep a persistent connection past a test, requiring co...
...the server provides the following api to xpcshell tests: <caption> nsmailserver xpcshell api </caption> name arguments returns description per
formtest none nothing runs until the test is forcibly aborted or stopped normally isstopped none if the server is stopped helper for per
formtest istestfinished none if the test is finished helper for per
formtest playtransaction none the transaction the transaction is an object with two properties: us, and them; us is an array of responses we sent, them an array of commands received resettest none nothing prepares the server for the next test without closing...
Thunderbird
thunderbird is built on the same technical plat
form as the firefox web browser.
...(from early 2007 to early 2011 thunderbird was developed by mozilla messaging, a subsidiary owned by mozilla.) documentation building thunderbird in
formation about building thunderbird with the comm-central repository.
... there's also in
formation about how the review process works and how to use the mozilla symbol server to help with debugging.
... database views backend in
formation about nsimsgdbview and related interfaces.
Using the Mozilla symbol server
the output of this command should be similar to: symchk: fullsoft.dll failed - image is split correctly, but fullsoft.dbg is missing symchk: qfaservices.dll failed - qfaservices.pdb mismatched or not found symchk: talkback.exe failed - built without debugging in
formation.
... symchk: helper.exe failed - built without debugging in
formation.
... symbol indices are named like so: symbols.mozilla.org/{lowercased:name}/{lowercased:name}-{version}-{plat
form}-{buildid}-symbols.txt.
... the plat
form is either 'darwin' (for mac) or 'linux'.
Debugging Tips
printing cdata and ctype currently console.log doesn't show type in
formation of cdata.
... running the following code shows only partial value in
formation.
...ents.utils.import("resource://gre/modules/ctypes.jsm", {}); let i = ctypes.int32_t(10); console.log(i); let point = ctypes.structtype("point", [{ x: ctypes.int32_t }, { y: ctypes.int32_t }]) let p = point(10, 20); console.log(p); let pp = p.address(); console.log(pp); the result will be as following: cdata { value: 10 } cdata { x: 10, y: 20 } cdata { contents: cdata } to see more descriptive in
formation, you can use .tosource().
...://gre/modules/ctypes.jsm", {}); let i = ctypes.int32_t(10); console.log(i.tosource()); let point = ctypes.structtype("point", [{ x: ctypes.int32_t }, { y: ctypes.int32_t }]) let p = point(10, 20); console.log(p.tosource()); let pp = p.address(); console.log(pp.tosource()); the result will be : ctypes.int32_t(10) point(10, 20) point.ptr(ctypes.uint64("0x15fdafb08")) to see the complete type in
formation, you can use .constructor.tosource(), to print the source of ctype.
Standard OS Libraries
for finding out the values and types of arguments and returns of the functions you want to use from this api, you must visit the functions page on this linked msdn site; it will give you all that in
formation.
... // placeholder - example soon to come x11 x11 runs primarily on unix® and unix-like operating systems like linux, all of the bsd variants, sun solaris both native 32 and 64 bit support, solaris x86, mac os x (via darwin) as well as other plat
forms like os/2 and cygwin.
...in
formation on all releases can be found on its official page x11 resources.
... example: xquerypointer get mouse cursor position and some extra in
formation.
CData
readstringreplacemal
formed() converts a character array to a javascript string.
... string readstringreplacemal
formed(); parameters none.
... here is a method to read "mal
formed", it attempts to do readstring on it, if it errors then it tries to read it in another way, so this is an alternative to readstringreplacemal
formed, it is an attempt at readingmal
formed function readaschar8thenaschar16(stringptr, known_len, jschar) { // when reading as jschar it assumes max length of 500 // stringptr is either char or jschar, if you know its jschar for sure, pass 2nd arg as true // if known_len is passed, then assumption is not made, at the known_len position in array we will see a null char // i tried getting known_len from stringptr but its not possible, it has be known, i tried...
...onsole.info('fromcharcode:', fromcharcode); var char16_val = fromcharcode.join(''); console.info('char16_val:', char16_val); return char16_val; } if (!jschar) { try { var char8_val = stringptr.readstring(); console.info('stringptr.readstring():', char8_val); return char8_val; } catch (ex if ex.message.indexof('mal
formed utf-8 character sequence at offset ') == 0) { console.warn('ex of offset utf8 read error when trying to do readstring so using alternative method, ex:', ex); return readjscharstring(); } } else { return readjscharstring(); } } ...
Blocking By Domain - Plugins
plugins such as flash are a per
formance and security problem for firefox users.
...these blocks improve firefox security and per
formance and also make the click-to-activate feature more valuable to users by reducing unnecessary prompts.
... criteria in order to improve firefox security and per
formance, there are two major categories of sites mozilla may choose to add to plugin domain blocking: sites commonly embedded in a 3rd-party context web sites which are commonly embedded into other sites using iframes can have a large impact on browser security and also cause many sites to show plugin activation prompts.
...in order to improve site per
formance and reduce the number of plugin prompts that users see, popular sites that show unnecessary plugin prompts or slow the browser down with unnecessary plugins will be added to the plugin block list.
Preferences System
using this system it is possible to create preferences windows that display and operate appropriately on various plat
forms (windows, macos x and gnome).
...reference in
formation about them is available below: preferences system documentation: introduction: getting started | examples | troubleshooting reference: prefwindow | prefpane | preferences | preference | xul attributes use code for a typical preferences window may look like this: <prefwindow id="apppreferences" xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"> <prefpane id="pane1" label="&pane1.title;"> <preferences> <preference id="pref1" name="pref.name" type="bool"/> </preferences> ..
...you should be careful to read the higs for the plat
forms you are targeting and use the xul preprocessor if necessary to set different window titles as appropriate.
... you should also be careful to specify the width of the window (in em) as appropriate using the preprocessor for each targeted plat
form, as well as the height (in em) for plat
forms where the window size does not change as the selected panel is changed (e.g.
Use a source map - Firefox Developer Tools
the javascript sources executed by the browser are often trans
formed in some way from the original sources created by a developer.
... in these situations, it's much easier to debug the original source, rather than the source in the trans
formed state that the browser has downloaded.
... a source map is a file that maps from the trans
formed source to the original source, enabling the browser to reconstruct the original source and present the reconstructed original in the debugger.
... to enable the debugger to work with a source map, you must: generate the source map include a comment in the trans
formed file, that points to the source map.
Debugger.Source - Firefox Developer Tools
the two cases are distinguished by the latter having its introductiontype property always being "wasm" and the
former having its introductiontype property never being "wasm".
...the
format is yet to be specified in the webassembly standard.
...for scripts created by eval or the function constructor, this may be a synthesized filename, starting with a valid url and followed by in
formation tracking how the code was introduced into the system; the entire string is not a valid url.
... (on the web, the translator may provide the source map url in a specially
formatted comment in the javascript source code, or via a header in the http reply that carried the generated javascript.) this property is writable, so you can change the source map url by setting it.
Examine and edit CSS - Firefox Developer Tools
inactive rules (not shown): if a rule is inactive (e.g., padding on a :visited pseudo-element), it is colored gray, with an info icon that gives more in
formation when clicked.
...in addition, the in
formation that appears on the page itself show you what pseudo-class you are examining.
...(this calculated value is exactly the same as what getcomputedstyle would return.) you can tab through the styles to select them, and you can find more in
formation about each property — pressing f1 on a selected property will open up its mdn reference page.
... typing in the search box per
forms a live filtering of the list, so, for example, if you just want to see font-related settings, you can type "font" in the search box, and only properties with "font" in the name will be listed.
Examine and edit HTML - Firefox Developer Tools
there are three types of searches that are per
formed automatically depending on what you enter, a full text search, a css selector search, and an xpath search.
...now children are indicated in the tree with this icon: at the right side of some nodes there are markers shown indicating different pieces of in
formation related to it: event the element has one or several event listeners attached to it.
... element popup context menu you can per
form certain common tasks on a specific node using a popup context menu.
... pressing ctrl + c (or cmd + c on a mac) also per
forms this action.
AddressErrors - Web APIs
in the example, we're handling a donation to an organization that will be sending a "thank you" gift to the donor, so it requests shipping in
formation along with allowing the donation payment itself.
... } } this code creates a new paymentrequest, providing the supported handlers and payment options we set up above, as well as additional options (in this case, that we want to ask for shipping in
formation).
... after that, we set up the handler for the shippingaddresschange event so we can validate address in
formation and call the request's show() method to start running the payment ui.
... window.addeventlistener("load", function(ev) { document.getelementbyid("pay").addeventlistener("click", process, false); }, false); see addeventlistener() for in
formation about event handlers and how they work.
AuthenticatorAttestationResponse.attestationObject - Web APIs
fmt a text string that indicates the
format of the attstmt.
... the webauthn specification defines a number of
formats; however,
formats may also be defined in other specifications and registered in an iana registry.
...
formats defined by webauthn are: "packed" "tpm" "android-key" "android-safetynet" "fido-u2f" "none" attstmt a an attestation statement that is of the
format defined by "fmt".
... for now, see the webauthn specification for details on each
format.
BaseAudioContext.createPeriodicWave() - Web APIs
the createperiodicwave() method of the baseaudiocontext interface is used to create a periodicwave, which is used to define a periodic wave
form that can be used to shape the output of an oscillatornode.
...you can think of it as the result of a fourier trans
form, where you get frequency domain values from time domain value.
... here, with createperiodicwave(), you specify the frequencies, and the browser per
forms an inverse fourier trans
form to get a time domain buffer for the frequency of the oscillator.
... the coefficients of the fourier trans
form should be given in ascending order (i.e.
Beacon API - Web APIs
there is nothing the next page can do to avoid this perception of poor page load per
formance.
... not only do these techniques represent poor coding patterns, some of them are unreliable and result in the perception of poor page load per
formance for the next navigation.
...the data argument is optional and its type may be an arraybufferview, blob, domstring, or
formdata.
...the data argument is optional and its type may be an arraybufferview, blob, domstring, or
formdata.
BluetoothDevice - Web APIs
bluetoothdevice.vendoridsource read only the vendor id source field in the pnp_id characteristic in the device_in
formation service.
... bluetoothdevice.vendorid read only the 16-bit vendor id field in the pnp_id characteristic in the device_in
formation service.
... bluetoothdevice.productid read only the 16-bit product id field in the pnp_id characteristic in the device_in
formation service.
... bluetoothdevice.productversion read only the 16-bit product version field in the pnp_id characteristic in the device_in
formation service.
Basic animations - Web APIs
it takes a lot of time to redraw complex frames and the per
formance depends highly on the speed of the computer it's running on.
... save the canvas state if you're changing any setting (such as styles, trans
formations, etc.) which affect the canvas state and you want to make sure the original state is used each time a frame is drawn, you need to save that original state.
... requestanimationframe(callback) tells the browser that you wish to per
form an animation and requests that the browser call a specified function to update an animation before the next repaint.
...for more in
formation about the animation loop, especially for games, see the article anatomy of a video game in our game development zone.
Drawing shapes with canvas - Web APIs
here are the functions used to per
form these steps: beginpath() creates a new path.
...internally, paths are stored as a list of sub-paths (lines, arcs, etc) which together
form a shape.
...to simplify the code and to improve per
formance, the path2d object, available in recent versions of browsers, lets you cache or record these drawing commands.
... path2d.addpath(path [, trans
form]) adds a path to the current path with an optional trans
formation matrix.
Pixel manipulation with canvas - Web APIs
the data property returns a uint8clampedarray which can be accessed to look at the raw pixel data; each pixel is represented by four one-byte values (red, green, blue, and alpha, in that order; that is, "rgba"
format).
...you can also use a weighted average, given by the
formula x = 0.299r + 0.587g + 0.114b, for example.
... see grayscale on wikipedia for more in
formation.
...it returns a data uri containing a representation of the image in the
format specified by the type parameter (defaults to png).
Credential Management API - Web APIs
credential management concepts and usage this api lets websites interact with a user agent’s password system so that websites can deal in a uni
form way with site credentials and user agents can provide better assistance with the management of their credentials.
... interfaces credential provides in
formation about an entity as a prerequisite to a trust decision.
... federatedcredential provides in
formation about credentials from a federated identity provider, which is an entity that a website trusts to correctly authenticate a user, and which provides an api for that purpose.
... passwordcredential provides in
formation about a username/password pair.
DataTransfer.clearData() - Web APIs
if this method is called with no arguments or the
format is an empty string, the data of all types will be removed.
... syntax datatransfer.cleardata([
format]); parameters
format optional a string which specifies the type of data to remove.
... event.datatransfer.cleardata(); // set the drag's
format and data (use event target's id for data) event.datatransfer.setdata('text/plain', event.target.id); data.innerhtml = event.datatransfer.getdata('text/plain'); } function dragendhandler (event) { if (!dropped) { status.innerhtml = 'drag canceled'; } data.innerhtml = event.datatransfer.getdata('text/plain') || 'empty'; // change border to signify drag is no ...
... function dragoverhandler (event) { status.innerhtml = 'drop available'; event.preventdefault(); } function dragleavehandler (event) { status.innerhtml = 'drag in process (drop was available)'; event.preventdefault(); } function drophandler (event) { dropped = true; status.innerhtml = 'drop done'; event.preventdefault(); // get data linked to event
format « text » var _data = event.datatransfer.getdata('text/plain'); var element = document.getelementbyid(_data); // append drag source element to event's target element event.target.appendchild(element); // change css styles and displayed text element.style.csstext = 'border: 1px solid black;display: block; color: red'; element.innerhtml = "i'm in the drop zone!"; ...
Document.execCommand() - Web APIs
when an html document has been switched to designmode, its document object exposes an execcommand method to run commands that manipulate the current editable region, such as
form inputs or contenteditable elements.
... avalueargument for commands which require an input argument, is a domstring providing that in
formation.
...
formatblock adds an html block-level element around the line containing the current selection, replacing the block element containing the line if one exists (in firefox, <blockquote> is the exception — it will wrap any containing block element).
... remove
format removes all
formatting from the current selection.
Document Object Model (DOM) - Web APIs
svg interfaces svg element interfaces svgaelement svgaltglyphelement svgaltglyphdefelement svgaltglyphitemelement svganimationelement svganimateelement svganimatecolorelement svganimatemotionelement svganimatetrans
formelement svgcircleelement svgclippathelement svgcolorprofileelement svgcomponenttransferfunctionelement svgcursorelement svgdefselement svgdescelement svgelement svgellipseelement svgfeblendelement svgfecolormatrixelement svgfecomponenttransferelement svgfecompositeelement svgfeconvolvematrixelement svgfediffuselightingelement svgfedisplacementmapelement svgfedistantlightelement ...
...ent svgfefuncgelement svgfefuncrelement svgfegaussianblurelement svgfeimageelement svgfemergeelement svgfemergenodeelement svgfemorphologyelement svgfeoffsetelement svgfepointlightelement svgfespecularlightingelement svgfespotlightelement svgfetileelement svgfeturbulenceelement svgfilterelement svgfilterprimitivestandardattributes svgfontelement svgfontfaceelement svgfontface
formatelement svgfontfacenameelement svgfontfacesrcelement svgfontfaceurielement svgforeignobjectelement svggelement svggeometryelement svgglyphelement svgglyphrefelement svggradientelement svggraphicselement svghatchelement svghatchpathelement svghkernelement svgimageelement svglineargradientelement svglineelement svgmarkerelement svgmaskelement svgmeshelement ...
...svgpathsegarcrel svgpathseglinetohorizontalabs svgpathseglinetohorizontalrel svgpathseglinetoverticalabs svgpathseglinetoverticalrel svgpathsegcurvetocubicsmoothabs svgpathsegcurvetocubicsmoothrel svgpathsegcurvetoquadraticsmoothabs svgpathsegcurvetoquadraticsmoothrel svgpathseglist svgpoint svgpointlist svgpreserveaspectratio svgrect svgstringlist svgtrans
form svgtrans
formlist animated type svganimatedangle svganimatedboolean svganimatedenumeration svganimatedinteger svganimatedlength svganimatedlengthlist svganimatednumber svganimatednumberlist svganimatedpathdata svganimatedpoints svganimatedpreserveaspectratio svganimatedrect svganimatedstring svganimatedtrans
formlist smil-related interfaces elementtimecontrol timeeven...
...t other svg interfaces getsvgdocument shadowanimation svgcolorprofilerule svgcssrule svgdocument svgexception svgexternalresourcesrequired svgfittoviewbox svglangspace svglocatable svgrenderingintent svgstylable svgtests svgtrans
formable svgunittypes svguseelementshadowroot svgurireference svgviewspec svgzoomandpan svgzoomevent specifications specification status comment dom living standard ...
EXT_color_buffer_half_float - Web APIs
for more in
formation, see also using extensions in the webgl tutorial.
... constants ext.rgba16f_ext rgba 16-bit floating-point color-renderable
format.
... ext.rgb16f_ext rgb 16-bit floating-point color-renderable
format.
... extended methods this extension extends webglrenderingcontext.renderbufferstorage(): the internal
format parameter now accepts ext.rgba16f_ext and ext.rgba16f_ext.
EXT_sRGB - Web APIs
for more in
formation, see also using extensions in the webgl tutorial.
... ext.srgb_ext unsized srgb
format that leaves the precision up to the driver.
... ext.srgb_alpha_ext unsized srgb
format with unsized alpha component.
... ext.srgb8_alpha8_ext sized (8-bit) srgb and alpha
formats.
EXT_texture_compression_rgtc - Web APIs
the ext_texture_compression_rgtc extension is part of the webgl api and exposes 4 rgtc compressed texture
formats.
... rgtc is a block-based texture compression
format suited for unsigned and signed red and red-green textures (red-green texture compression).
...for more in
formation, see also using extensions in the webgl tutorial.
... constants the compressed texture
formats are exposed by 4 constants and can be used in two functions: compressedteximage2d() and compressedtexsubimage2d().
Element.animate() - Web APIs
see keyframe
formats for more details.
...for instance with trans
form, a translatex(-200px) would not override an earlier rotate(20deg) value but result in translatex(-200px) rotate(20deg).
... document.getelementbyid("tunnel").animate([ // keyframes { trans
form: 'translatey(0px)' }, { trans
form: 'translatey(-300px)' } ], { // timing options duration: 1000, iterations: infinity }); implicit to/from keyframes in newer browser versions, you are able to set a beginning or end state for an animation only (i.e.
...for example, consider this simple animation — the keyframe object looks like so: let rotate360 = [ { trans
form: 'rotate(360deg)' } ]; we have only specified the end state of the animation, and the beginning state is implied.
Element.innerHTML - Web APIs
exceptions syntaxerror an attempt was made to set the value of innerhtml using a string which is not properly-
formed html.
... note: the returned html or xml fragment is generated based on the current contents of the element, so the markup and
formatting of the returned fragment is likely not to match the original page markup.
... warning: if your project is one that will undergo any
form of security review, using innerhtml most likely will result in your code being rejected.
... we add a second method that logs in
formation about mouseevent based events (such as mousedown, click, and mouseenter): function logevent(event) { var msg = "event <strong>" + event.type + "</strong> at <em>" + event.clientx + ", " + event.clienty + "</em>"; log(msg); } then we use this as the event handler for a number of mouse events on the box that contains our log: var boxelem = document.queryselector(".box"); bo...
Element.name - Web APIs
it only applies to the following elements: <a>, <applet>, <button>, <
form>, <frame>, <iframe>, <img>, <input>, <map>, <meta>, <object>, <param>, <select>, and <textarea>.
... name can be used in the document.getelementsbyname() method, a
form and with the
form elements collection.
... when used with a
form or elements collection, it may return a single element or a collection.
... syntax htmlelement.name = string let elname = htmlelement.name let fcontrol = html
formelement.elementname let controlcollection = html
formelement.elements.elementname example <
form action="" name="
forma"> <input type="text" value="foo"> </
form> <script type="text/javascript"> // get a reference to the first element in the
form let
formelement = document.
forms['
forma'].elements[0] // give it a name
formelement.name = 'inputa' // show the value of the input alert(document.
forms['
forma'].elements['inputa'].value) </script> notes in internet explorer (ie), the name property of dom objects created using document.createelement() can't be set or modified.
EventTarget.addEventListener() - Web APIs
see improving scrolling per
formance with passive listeners to learn more.
... getting data into an event listener using the outer scope property when an outer scope contains a variable declaration (with const, let), all the inner functions declared in that scope have access to that variable (look here for in
formation on outer/inner functions, and here for in
formation on variable scope).
... same element // case 3 for(let i=0, j=0 ; i<els.length ; i++){ /* do lots of stuff with j */ els[j].addeventlistener("click", processevent = function(e){/*do something*/}, false); } // case 4 for(let i=0, j=0 ; i<els.length ; i++){ /* do lots of stuff with j */ function processevent(e){/*do something*/}; els[j].addeventlistener("click", processevent, false); } improving scrolling per
formance with passive listeners according to the specification, the default value for the passive option is always false.
... however, this introduces the potential for event listeners handling certain touch events (among others) to block the browser's main thread while it is attempting to handle scrolling, resulting in possibly enormous reduction in per
formance during scroll handling.
GlobalEventHandlers.onanimationcancel - Web APIs
javascript before we get to the animation code, we define a function which logs in
formation to a box on the user's screen.
... we'll use this to show in
formation about the events we receive.
... note the use of animationevent.animationname and animationevent.elapsedtime to get in
formation about the event which occurred.
...all we do here is log in
formation to the console, but you might find other use cases, such as starting a new animation or effect, or terminating some dependent operation.
GlobalEventHandlers.onanimationend - Web APIs
javascript content before we get to the animation code, we define a function which logs in
formation to a box on the user's screen.
... we'll use this to show in
formation about the events we receive.
... note the use of animationevent.animationname and animationevent.elapsedtime to get in
formation about the event which occurred.
...for in
formation about why, and how to support running an animation more than once, see run an animation again in css animations tips and tricks.
GlobalEventHandlers.onanimationstart - Web APIs
javascript content before we get to the animation code, we define a function which logs in
formation to a box on the user's screen.
... we'll use this to show in
formation about the events we receive.
... note the use of animationevent.animationname and animationevent.elapsedtime to get in
formation about the event which occurred.
...for in
formation about why, and how to support running an animation more than once, see run an animation again in css animations tips and tricks.
GlobalEventHandlers.oninvalid - Web APIs
the validity of submittable elements is checked before submitting their owner
form, or after the checkvalidity() method of the element or its owner
form is called.
... example this example demonstrates oninvalid and onsubmit event handlers on a
form.
... html <
form id="
form"> <p id="error" hidden>please fill out all fields.</p> <label for="city">city</label> <input type="text" id="city" required> <button type="submit">submit</button> </
form> <p id="thanks" hidden>your data has been received.
... thanks!</p> javascript const
form = document.getelementbyid('
form'); const error = document.getelementbyid('error'); const city = document.getelementbyid('city'); const thanks = document.getelementbyid('thanks'); city.oninvalid = invalid;
form.onsubmit = submit; function invalid(event) { error.removeattribute('hidden'); } function submit(event) {
form.setattribute('hidden', ''); thanks.removeattribute('hidden'); // for this example, don't actually submit the
form event.preventdefault(); } result specification specification status comment html living standardthe definition of 'oninvalid' in that specification.
GlobalEventHandlers.onreset - Web APIs
the reset event fires when the user clicks a reset button in a
form (<input type="reset">).
... example this example logs the current event.timestamp whenever you reset the
form.
... html <
form id="
form"> <label>test field: <input type="text"></label> <br><br> <button type="reset">reset
form</button> </
form> <p id="log"></p> javascript function logreset(event) { log.textcontent = `
form reset!
... time stamp: ${event.timestamp}`; } const
form = document.getelementbyid('
form'); const log = document.getelementbyid('log');
form.onreset = logreset; result specification specification status comment html living standardthe definition of 'onreset' in that specification.
GlobalEventHandlers.onsubmit - Web APIs
the submit event fires when the user submits a
form.
... example this example demonstrates oninvalid and onsubmit event handlers on a
form.
... html <
form id="
form"> <p id="error" hidden>please fill out all fields.</p> <label for="city">city</label> <input type="text" id="city" required> <button type="submit">submit</button> </
form> <p id="thanks" hidden>your data has been received.
... thanks!</p> javascript const
form = document.getelementbyid('
form'); const error = document.getelementbyid('error'); const city = document.getelementbyid('city'); const thanks = document.getelementbyid('thanks'); city.oninvalid = invalid;
form.onsubmit = submit; function invalid(event) { error.removeattribute('hidden'); } function submit(event) {
form.setattribute('hidden', ''); thanks.removeattribute('hidden'); // for this example, don't actually submit the
form event.preventdefault(); } result specifications specification status comment html living standardthe definition of 'onsubmit' in that specification.
HTMLCanvasElement.toDataURL() - Web APIs
the htmlcanvaselement.todataurl() method returns a data uri containing a representation of the image in the
format specified by the type parameter (defaults to png).
... syntax canvas.todataurl(type, encoderoptions); parameters type optional a domstring indicating the image
format.
... the default
format type is image/png.
... encoderoptions optional a number between 0 and 1 indicating the image quality to use for image
formats that use lossy compression such as image/jpeg and image/webp.
HTMLDialogElement.close() - Web APIs
examples the following example shows a simple button that, when clicked, opens a <dialog> containing a
form via the showmodal() method.
... from there you can click the cancel button to close the dialog (via the htmldialogelement.close() method), or submit the
form via the submit button.
... <!-- simple pop-up dialog box, containing a
form --> <dialog id="favdialog"> <
form method="dialog"> <section> <p><label for="favanimal">favorite animal:</label> <select id="favanimal" name="favanimal"> <option></option> <option>brine shrimp</option> <option>red panda</option> <option>spider monkey</option> </select></p> </section> <menu> <button id="cancel" type="reset">cancel</button> <button type="submit">confirm</button> </menu> </
form> </dialog> <menu> <button id="updatedetails">update details</button> </menu> <script> (function() { var updatebutton = document.getelementbyid('updatedetails'); var cancelbutton = document.getelementbyid('cancel')...
...log'); dialog.returnvalue = 'favanimal'; function opencheck(dialog) { if(dialog.open) { console.log('dialog open'); } else { console.log('dialog closed'); } } // update button opens a modal dialog updatebutton.addeventlistener('click', function() { dialog.showmodal(); opencheck(dialog); }); //
form cancel button closes the dialog box cancelbutton.addeventlistener('click', function() { dialog.close('animalnotchosen'); opencheck(dialog); }); })(); </script> note: you can find this example on github as htmldialogelement-basic (see it live also).
HTMLDialogElement.open - Web APIs
examples the following example shows a simple button that, when clicked, opens a <dialog> containing a
form via the showmodal() method.
... from there you can click the cancel button to close the dialog (via the htmldialogelement.close() method), or submit the
form via the submit button.
... <!-- simple pop-up dialog box, containing a
form --> <dialog id="favdialog"> <
form method="dialog"> <section> <p><label for="favanimal">favorite animal:</label> <select id="favanimal" name="favanimal"> <option></option> <option>brine shrimp</option> <option>red panda</option> <option>spider monkey</option> </select></p> </section> <menu> <button id="cancel" type="reset">cancel</button> <button type="submit">confirm</button> </menu> </
form> </dialog> <menu> <button id="updatedetails">update details</button> </menu> <script> (function() { var updatebutton = document.getelementbyid('updatedetails'); var cancelbutton = document.getelementbyid('cancel')...
...log'); dialog.returnvalue = 'favanimal'; function opencheck(dialog) { if(dialog.open) { console.log('dialog open'); } else { console.log('dialog closed'); } } // update button opens a modal dialog updatebutton.addeventlistener('click', function() { dialog.showmodal(); opencheck(dialog); }); //
form cancel button closes the dialog box cancelbutton.addeventlistener('click', function() { dialog.close('animalnotchosen'); opencheck(dialog); }); })(); </script> note: you can find this example on github as htmldialogelement-basic (see it live also).
HTMLDialogElement.show() - Web APIs
examples the following example shows a simple button that, when clicked, opens a <dialog> containing a
form via the show() method.
... from there you can click the cancel button to close the dialog (via the htmldialogelement.close() method), or submit the
form via the submit button.
... <!-- simple pop-up dialog box, containing a
form --> <dialog id="favdialog"> <
form method="dialog"> <section> <p><label for="favanimal">favorite animal:</label> <select id="favanimal" name="favanimal"> <option></option> <option>brine shrimp</option> <option>red panda</option> <option>spider monkey</option> </select></p> </section> <menu> <button id="cancel" type="reset">cancel</button> <button type="submit">confirm</button> </menu> </
form> </dialog> <menu> <button id="updatedetails">update details</button> </menu> <script> (function() { var updatebutton = document.getelementbyid('updatedetails'); var cancelbutton = document.getelementbyid('cancel')...
...log'); dialog.returnvalue = 'favanimal'; function opencheck(dialog) { if(dialog.open) { console.log('dialog open'); } else { console.log('dialog closed'); } } // update button opens a modal dialog updatebutton.addeventlistener('click', function() { dialog.showmodal(); opencheck(dialog); }); //
form cancel button closes the dialog box cancelbutton.addeventlistener('click', function() { dialog.close('animalnotchosen'); opencheck(dialog); }); })(); </script> specifications specification status comment html living standardthe definition of 'show()' in that specification.
HTMLDialogElement.showModal() - Web APIs
examples the following example shows a simple button that, when clicked, opens a <dialog> containing a
form via the showmodal() method.
... from there you can click the cancel button to close the dialog (via the htmldialogelement.close() method), or submit the
form via the submit button.
... <!-- simple pop-up dialog box, containing a
form --> <dialog id="favdialog"> <
form method="dialog"> <section> <p><label for="favanimal">favorite animal:</label> <select id="favanimal" name="favanimal"> <option></option> <option>brine shrimp</option> <option>red panda</option> <option>spider monkey</option> </select></p> </section> <menu> <button id="cancel" type="reset">cancel</button> <button type="submit">confirm</button> </menu> </
form> </dialog> <menu> <button id="updatedetails">update details</button> </menu> <script> (function() { var updatebutton = document.getelementbyid('updatedetails'); var cancelbutton = document.getelementbyid('cancel')...
...log'); dialog.returnvalue = 'favanimal'; function opencheck(dialog) { if(dialog.open) { console.log('dialog open'); } else { console.log('dialog closed'); } } // update button opens a modal dialog updatebutton.addeventlistener('click', function() { dialog.showmodal(); opencheck(dialog); }); //
form cancel button closes the dialog box cancelbutton.addeventlistener('click', function() { dialog.close('animalnotchosen'); opencheck(dialog); }); })(); </script> note: you can find this example on github as htmldialogelement-basic (see it live also).
HTMLDialogElement - Web APIs
examples the following example shows a simple button that, when clicked, opens a <dialog> containing a
form via the htmldialogelement.showmodal() function.
... from there you can click the cancel button to close the dialog (via the htmldialogelement.close() function), or submit the
form via the submit button.
... <!-- simple pop-up dialog box, containing a
form --> <dialog id="favdialog"> <
form method="dialog"> <section> <p><label for="favanimal">favorite animal:</label> <select id="favanimal" name="favanimal"> <option></option> <option>brine shrimp</option> <option>red panda</option> <option>spider monkey</option> </select></p> </section> <menu> <button id="cancel" type="reset">cancel</button> <button type="submit">confirm</button> </menu> </
form> </dialog> <menu> <button id="updatedetails">update details</button> </menu> <script> (function() { var updatebutton = document.getelementbyid('updatedetails'); var cancelbutton = document.getelementbyid('cancel')...
...log'); dialog.returnvalue = 'favanimal'; function opencheck(dialog) { if(dialog.open) { console.log('dialog open'); } else { console.log('dialog closed'); } } // update button opens a modal dialog updatebutton.addeventlistener('click', function() { dialog.showmodal(); opencheck(dialog); }); //
form cancel button closes the dialog box cancelbutton.addeventlistener('click', function() { dialog.close('animalnotchosen'); opencheck(dialog); }); })(); </script> note: you can find this example on github as htmldialogelement-basic (see it live also).
HTMLImageElement - Web APIs
read the documentation on the sizes page for details on the
format of this string.
...each candidate image is a url followed by a space, followed by a specially-
formatted string indicating the size of the image.
...read the srcset page for specifics on the
format of the size substring.
... the specified image is in a
format not supported by the user agent.
HTMLOrForeignElement.dataset - Web APIs
in addition to the in
formation below, you'll find a how-to guide for using html data attributes in our article using data attributes.
... name conversion dash-style to camelcase conversion a custom data attribute name is trans
formed to a key for the domstringmap entry with the following rules the prefix data- is removed (including the dash); for any dash (u+002d) followed by an ascii lowercase letter a to z, the dash is removed, and the letter is trans
formed into its uppercase counterpart; other characters (including other dashes) are left unchanged.
... camelcase to dash-style conversion the opposite trans
formation, which maps a key to an attribute name, uses the following rules: restriction: before the trans
formation, a dash must not be immediately followed by an ascii lowercase letter a to z; the prefix data- is added; any ascii uppercase letter a to z is trans
formed into a dash, followed by its lowercase counterpart; other characters are left unchanged.
... the restriction in the rules above ensures that the two trans
formations are the inverse one of the other.
HTMLOutputElement - Web APIs
htmloutputelement.
formread only an html
formelement indicating the
form associated with the control, reflecting the
form html attribute if it is defined.
... htmloutputelement.name a domstring reflecting the name html attribute, containing the name for the control that is submitted with
form data.
... when the problem is reported, the user agent may focus the element and change the scrolling position of the document or per
form some other action that brings the element to the user's attention.
... resetting the
form puts the element into default mode, and sets the textcontent property to the value of the defaultvalue property.
Ajax navigation example - Web APIs
to see how it works, please create the following files (or git clone https://github.com/giabao/mdn-ajax-nav-example.git ): note: for fully integrating the <
form> elements within this mechanism, please take a look at the paragraph submitting
forms and uploading files.
...rl) { history.pushstate(opageinfo, opageinfo.title, opageinfo.url); bupdateurl = false; } break; default: vmsg = nstatus + ": " + (ohttpstatus[nstatus] || "unknown"); switch (math.floor(nstatus / 100)) { /* case 1: // in
formational 1xx console.log("in
formation code " + vmsg); break; case 2: // successful 2xx console.log("successful code " + vmsg); break; case 3: // redirection 3xx console.log("redirection code " ...
... opageinfo = { title: null, url: location.href }, ohttpstatus = /* http://www.iana.org/assignments/http-status-codes/http-status-codes.xml */ { 100: "continue", 101: "switching protocols", 102: "processing", 200: "ok", 201: "created", 202: "accepted", 203: "non-authoritative in
formation", 204: "no content", 205: "reset content", 206: "partial content", 207: "multi-status", 208: "already reported", 226: "im used", 300: "multiple choices", 301: "moved permanently", 302: "found", 303: "see other", 304: "not modified", 305: "use proxy",...
...attachevent("onload", init) : (onload = init); // public methods this.open = requestpage; this.stop = abortreq; this.rebuildlinks = init; })(); for more in
formation, please see: working with the history api.
Long Tasks API - Web APIs
for tasks that don't occur within the top level page, the containerid, containername and containersrc fields may provide in
formation as to the source of the task.
... usage var observer = new per
formanceobserver(function(list) { var perfentries = list.getentries(); for (var i = 0; i < perfentries.length; i++) { // process long task notifications: // report back for analytics and monitoring // ...
... interfaces per
formancelongtasktiming reports instances of long tasks.
... taskattributiontiming returns in
formation about the work involved in a long task and its associate frame context.
MediaPositionState.position - Web APIs
this in
formation is then, in turn, used by the user agent to provide a user interface which displays media playback in
formation to the viewer.
... for example, a browser might use this in
formation 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 per
formed, in seconds.
... example in this example, a player for a non-standard media file
format, written in javascript, uses setinterval() to establish a callback which fires once per second to refresh the position in
formation by calling setpositionstate().
Media Session action types - Web APIs
implement support for each of these in order to allow that type of action to be per
formed.
...if you intend to per
form multiple seekto operations in rapid succession, you can also specify the mediasessionactiondetails property fastseek property with a value of true.
... this lets the browser know it can take steps to optimize repeated operations, and is likely to result in improved per
formance.
...this action may or may not be available, depending on the plat
form and user agent, or may be disabled due to subscription level or other circumstances.
Using the MediaStream Recording API - Web APIs
in web dictaphone this powers the in
formation screen, which is shown/hidden by clicking the question mark icon in the top right hand corner.
...lways sit above the other elements and therefore be focusable/clickable: label { font-family: 'notocoloremoji'; font-size: 3rem; position: absolute; top: 2px; right: 3px; z-index: 5; cursor: pointer; } then we hide the actual checkbox, because we don't want it cluttering up our ui: input[type=checkbox] { position: absolute; top: -100px; } next, we style the in
formation screen (wrapped in an <aside> element) how we want it, give it fixed position so that it doesn't appear in the layout flow and affect the main ui, trans
form it to the position we want it to sit in by default, and give it a transition for smooth showing/hiding: aside { position: fixed; top: 0; left: 0; text-shadow: 1px 1px 1px black; width: 100%; height: 100%; trans
form:...
...; transition: 0.6s all; background-color: #999; background-image: linear-gradient(to top right, rgba(0,0,0,0), rgba(0,0,0,0.5)); } last, we write a rule to say that when the checkbox is checked (when we click/focus the label), the adjacent <aside> element will have its horizontal translation value changed and transition smoothly into view: input[type=checkbox]:checked ~ aside { trans
form: translatex(0); } basic app setup to grab the media stream we want to capture, we use getusermedia().
...this is your entry point into using the mediarecorder api — the stream is now ready to be captured into a blob, in the default encoding
format of your browser.
MediaStream Recording API - Web APIs
the data is delivered by a series of dataavailable events, already in the
format you specify when creating the mediarecorder.
... overview of the recording process the process of recording a stream is simple: set up a mediastream or htmlmediaelement (in the
form of an <audio> or <video> element) to serve as the source of the media data.
... for more in
formation to learn more about using the mediastream recording api, see using the mediastream recording api, which shows how to use the api to record audio clips.
... reference blobevent each time a chunk of media data is finished being recorded, it's delivered to consumers in blob
form using a blobevent of type dataavailable.
MediaTrackSettings.groupId - Web APIs
because rtp doesn't include this in
formation, tracks associated with a webrtc rtcpeerconnection will never include this property.
...however, it can be used to ensure that audio input and output are both being per
formed on the same headset, for example, or to ensure that the built-in camera and microphone on a phone are being used for video conferencing purposes.
... the actual value of the string, however, is determined by the source of the track, and there is no guarantee what
form it will take, although the specification does recommend it be a guid.
... since this property isn't stable across browsing sessions, its usefulness when calling getusermedia() is generally limited to ensuring that tasks per
formed during the same browsing session use devices from the same group (or that they don't use devices from the same group).
Media Capture and Streams API (Media Stream) - Web APIs
it provides the interfaces and methods for working with the streams and their constituent tracks, the constraints associated with data
formats, the success and error callbacks when using the data asynchronously, and the events that are fired during the process.
... interfaces in these reference articles, you'll find the fundamental in
formation you'll need to know about each of the interfaces that make up the media capture and streams api.
... events addtrack ended muted overconstrained removetrack started unmuted guides and tutorials the articles below provide additional guidance and how-to in
formation that will help you learn to use the api, and how to per
form specific tasks that you may wish to handle.
... capabilities, constraints, and settingsthe twin concepts of constraints and capabilities let the browser and web site or app exchange in
formation about what constrainable properties the browser's implementation supports and what values it supports for each one.
Navigator.mediaSession - Web APIs
the read-only navigator property mediasession returns a mediasession object that can be used to share with the browser metadata and other in
formation about the current playback state of media being handled by a document.
... this in
formation 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.
... syntax let mediasession = navigator.mediasession; value a mediasession object the current document can use to share in
formation about media it's playing and its current playback status.
... this in
formation can include typical metadata such as the title, artist, and album name of the song being played as well as potentially one or more images containing things like album art, artist photos, and so forth.
NavigatorID.userAgent - Web APIs
the specification asks browsers to provide as little in
formation via this field as possible.
...some firefox extensions do that; however, this only changes the http header that gets sent, and doesn't affect browser detection per
formed by javascript code.
... the user agent string is built on a
formal structure which can be decomposed into several pieces of info.
...gecko-based browsers comply with the following general structure: useragent = appcodename/appversion number (plat
form; security; os-or-cpu; localization; rv: revision-version-number) product/productsub application-name application-name-version example alert(window.navigator.useragent) // alerts "mozilla/5.0 (windows; u; win98; en-us; rv:0.9.2) gecko/20010725 netscape6/6.1" specifications specification status comment html living standardthe definition of 'navigatorid.useragent' in that specification.
OffscreenCanvas.getContext() - Web APIs
these implementations have not reached test suite con
formance, or the graphic drivers situation on the plat
form is not yet stable.
... the khronos group certifies webgl implementations under certain con
formance rules.
... antialias: boolean that indicates whether or not to per
form anti-aliasing.
... failifmajorper
formancecaveat: boolean that indicates if a context will be created if the system per
formance is low.
OscillatorNode.setPeriodicWave() - Web APIs
the setperiodicwave() method of the oscillatornode interface is used to point to a periodicwave defining a periodic wave
form that can be used to shape the oscillator's output, when type is custom.
... syntax oscillatornode.setperiodicwave(wave); parameters wave a periodicwave object representing the wave
form to use as the shape of the oscillator's output.
...you can think of it as the result of a fourier trans
form, where you get frequency domain values from time domain value.
... here, with createperiodicwave(), you specify the frequencies, and the browser per
forms a an inverse fourier trans
form to get a time domain buffer for the frequency of the oscillator.
PaymentResponse.retry() - Web APIs
syntax retrypromise = paymentrequest.retry(errorfields); parameters errorfields a paymentvalidationerrors object, with the following properties: error optional a general description of a payment error from which the user may attempt to recover by retrying the payment, possibly after correcting mistakes in the payment in
formation.
... error can be provided all by itself to provide only a generic error message, or in concert with the other properties to serve as an overview while other properties' values gude the user to errors in specific fields in the payment
form.
... see the example below for a thorough example, but the basic concept, in outline
form, is: create a new paymentrequest (new paymentrequest()) display the payment request (paymentrequest.show() if show() resolves, the returned paymentresponse describes the requested payment and the options chosen by the user.
... async function handlepayment() { const payrequest = new paymentrequest(methoddata, details, options); try { let payresponse = await payrequest.show(); while (payresponse has errors) { /* let the user edit the payment in
formation, wait until they submit */ await response.retry(); } await payresponse.complete("success"); } catch(err) { /* handle the exception */ } } examples try { await paymentrequest.retry(errorfields); } catch (domexception err) { ...
PeriodicWave - Web APIs
the periodicwave interface defines a periodic wave
form that can be used to shape the output of an oscillatornode.
...you can think of it as the result of a fourier trans
form, where you get frequency domain values from time domain value.
... here, with createperiodicwave(), you specify the frequencies, and the browser per
forms an inverse fourier trans
form to get a time domain buffer for the frequency of the oscillator.
... the coefficients of the fourier trans
form should be given in ascending order (i.e.
Using Pointer Events - Web APIs
its responsibility in this example is to update the cached touch in
formation and to draw a line from the previous position to the current position of each touch.
...og("ctx.lineto(" + evt.clientx + ", " + evt.clienty + ");"); ctx.lineto(evt.clientx, evt.clienty); ctx.linewidth = 4; ctx.strokestyle = color; ctx.stroke(); ongoingtouches.splice(idx, 1, copytouch(evt)); // swap in the new touch record log("."); } else { log("can't figure out which touch to continue: idx = " + idx); } } this function looks in our cached touch in
formation array for the previous in
formation about each touch to determine the starting point for each touch's new line segment to be drawn.
... after drawing the line, we call array.splice() to replace the previous in
formation about the touch point with the current in
formation in the ongoingtouches array.
... a square at the end ongoingtouches.splice(idx, 1); // remove it; we're done } else { log("can't figure out which touch to end"); } } this is very similar to the previous function; the only real differences are that we draw a small square to mark the end and that when we call array.splice(), we simply remove the old entry from the ongoing touch list, without adding in the updated in
formation.
RTCIceCandidate - Web APIs
note: for backward compatibility, the constructor also accepts as input a string containing the value of the candidate property instead of a rtcicecandidateinit object, since the candidate includes all of the in
formation that rtcicecandidateinit does and more.
...the
format of this address is a candidate-attribute as defined in rfc 5245.
...this is used to help optimize ice per
formance while prioritizing and correlating candidates that appear on multiple rtcicetransport objects.
... methods tojson() given the rtcicecandidate's current configuration, tojson() returns a domstring containing a json representation of that configuration in the
form of a rtcicecandidateinit object.
RTCPeerConnection.createOffer() - Web APIs
the sdp offer includes in
formation about any mediastreamtracks already attached to the webrtc session, codec, and options supported by the browser, and any candidates already gathered by the ice agent, for the purpose of being sent over the signaling channel to a potential peer to request a connection or to update the configuration of an existing connection.
...the parameters for this
form of createoffer() are described below, to aid in updating existing code.
... return value a promise whose fulfillment handler will receive an object con
forming to the rtcsessiondescriptioninit dictionary which contains the sdp describing the generated offer.
...username, target: targetusername, type: "video-offer", sdp: mypeerconnection.localdescription }); }) .catch(function(reason) { // an error occurred, so handle the failure to connect }); in this code, the offer is created, and once successful, the local end of the rtcpeerconnection is configured to match by passing the offer (which is represented using an object con
forming to rtcsessiondescriptioninit) into setlocaldescription().
RTCPeerConnection.setLocalDescription() - Web APIs
this description specifies the properties of the local end of the connection, including the media
format.
...the parameters for the older
form of setlocaldescription() are described below, to aid in updating existing code.
... this deprecated
form of the method returns instantaneously without waiting for the actual setting to be done: in case of success, the successcallback will be called; in case of failure, the errorcallback will be called.
... examples implicit descriptions one of the advantages of the parameter-free
form of setlocaldescription() is that it lets you simplify your negotiation code substantially.
RTCRtpCodecParameters - Web APIs
mimetype optional the codec's mime media type and subtype specified as a domstring of the
form "type/subtype".
...most codecs have specific values or ranges of values they permit; see the iana payload
format media type registry for details.
... sdpfmtpline optional a domstring containing the
format-specific parameters field from the "a=fmtp" line in the codec's sdp, if one is present; see section 5.8 of the ietf specification for jsep.
... note: on an rtcrtpreceiver, the
format-specific parameters come from the sdp sent by the remote peer, while for rtcrtpsender, they're provided by the local description.
RTCStatsIceCandidatePairState - Web APIs
see ice check lists in rtcicecandidatepairstats.state for further in
formation about how ice check lsits work.
... values failed a check for this pair has been per
formed but failed.
... frozen no check has been per
formed yet for this candidate pair, and per
forming the check is blocked until another check is successful.
... waiting this pair has not yet been checked, but the check can be per
formed as soon as this pair is the highest priority pair remaining in the waiting state.
Reporting API - Web APIs
the reporting api provides a generic reporting mechanism for web applications to use to make reports available based on various plat
form features (for example content security policy, feature-policy, or feature deprecation reports) in a consistent manner.
... concepts and usage there are a number of different features and problems on the web plat
form that generate in
formation useful to web developers when they are trying to fix bugs or improve their websites in other ways.
... such in
formation can include: content security policy violations.
... the reporting api's purpose is to provide a consistent reporting mechanism that can be used to make such in
formation available to developers in the
form of reports represented by javascript objects.
SVGAnimatedPathData - Web APIs
name type description animatednormalizedpathseglist svgpathseglist provides access to the current animated contents of the 'd' attribute in a
form where all path data commands are expressed in terms of the following subset of svgpathseg types: svg_pathseg_moveto_abs (m), svg_pathseg_lineto_abs (l), svg_pathseg_curveto_cubic_abs (c) and svg_pathseg_closepath (z).
... animatedpathseglist svgpathseglist provides access to the current animated contents of the 'd' attribute in a
form which matches one-for-one with svg's syntax.
... normalizedpathseglist svgpathseglist provides access to the base (i.e., static) contents of the 'd' attribute in a
form where all path data commands are expressed in terms of the following subset of svgpathseg types: svg_pathseg_moveto_abs (m), svg_pathseg_lineto_abs (l), svg_pathseg_curveto_cubic_abs (c) and svg_pathseg_closepath (z).
... pathseglist svgpathseglist provides access to the base (i.e., static) contents of the 'd' attribute in a
form which matches one-for-one with svg's syntax.
SVGGraphicsElement - Web APIs
fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="391" y="94" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">svggraphicselement</text></a></svg></div> a:hover text { fill: #0095dd; pointer-events: all;} note: this interface was introduced in svg 2 and replaces the svglocatable and svgtrans
formable interfaces from svg 1.1.
... svggraphicselement.trans
form read only an svganimatedtrans
formlist reflecting the computed value of the trans
form property and its corresponding trans
form attribute of the given element.
... svggraphicselement.getctm() returns a dommatrix representing the matrix that trans
forms the current element's coordinate system to its svg viewport's coordinate system.
... svggraphicselement.getscreenctm() returns a dommatrix representing the matrix that trans
forms the current element's coordinate system to the coordinate system of the svg viewport for the svg document fragment.
Service Worker API - Web APIs
it takes the
form of a javascript file that can control the web-page/site that it is associated with, intercepting and modifying navigation and resource requests, and caching resources in a very granular fashion to give you complete control over how your app behaves in certain situations (the most obvious one being when the network is not available).
... per
formance enhancements, for example pre-fetching resources that the user is likely to need in the near future, such as the next few pictures in a photo album.
... in the future, service workers will be able to do a number of other useful things for the web plat
form that will bring it closer towards native app viability.
...it contains in
formation about the request and resulting response, and provides the fetchevent.respondwith() method, which allows us to provide an arbitrary response back to the controlled page.
SpeechSynthesis - Web APIs
the speechsynthesis interface of the web speech api is the controller interface for the speech service; this can be used to retrieve in
formation about the synthesis voices available on the device, start and pause speech, and other commands besides.
... inside the input
form.onsubmit handler, we stop the
form submitting with preventdefault(), create a new speechsynthesisutterance instance containing the text from the text <input>, set the utterance's voice to the voice selected in the <select> element, and start the utterance speaking via the speechsynthesis.speak() method.
... var synth = window.speechsynthesis; var input
form = document.queryselector('
form'); var inputtxt = document.queryselector('.txt'); var voiceselect = document.queryselector('select'); var pitch = document.queryselector('#pitch'); var pitchvalue = document.queryselector('.pitch-value'); var rate = document.queryselector('#rate'); var ratevalue = document.queryselector('.rate-value'); var voices = []; function populatevoicelist() { voices = synth.getvoices(); for(i = 0; i < voices.length ; i++) { var option = document.createelement('option'); option.textcontent = voices[i].name + ' (' + voices[i].lang + ')'; if(voices[i].default) { option.textcontent += ' -- default'; } option.setattribute('data-lang', voices[i].lang); option.setattribute('data-name', vo...
...ices[i].name); voiceselect.appendchild(option); } } populatevoicelist(); if (speechsynthesis.onvoiceschanged !== undefined) { speechsynthesis.onvoiceschanged = populatevoicelist; } input
form.onsubmit = function(event) { event.preventdefault(); var utterthis = new speechsynthesisutterance(inputtxt.value); var selectedoption = voiceselect.selectedoptions[0].getattribute('data-name'); for(i = 0; i < voices.length ; i++) { if(voices[i].name === selectedoption) { utterthis.voice = voices[i]; } } utterthis.pitch = pitch.value; utterthis.rate = rate.value; synth.speak(utterthis); inputtxt.blur(); } specifications specification status comment web speech apithe definition of 'speechsynthesis' in that specification.
Using writable streams - Web APIs
note: if you are looking for in
formation about readable streams, try using readable streams instead.
...the second object is optional, and allows you to specify a custom queueing strategy to use for your stream, which takes the
form of an instance of bytelengthqueuingstrategy or countqueuingstrategy.
...hild(listitem); result += decoded; resolve(); }); }, close() { var listitem = document.createelement('li'); listitem.textcontent = "[message received] " + result; list.appendchild(listitem); }, abort(err) { console.log("sink error:", err); } }, queuingstrategy); the write() method contains a promise including code that decodes each written chunk into a
format that can be written to the ui.
... after the chunks have all been written, we then per
form the ready check once more, to check that the last chunk has finished being written and all the work is done.
SubmitEvent() - Web APIs
the submitevent() constructor creates and returns a new submitevent object, which is used to represent a submit event fired at an html
form.
... examples this code snippet locates a
form in the current document, and then an html <button> within the
form with the class submit on it.
...then the event is sent to the
form, telling the
form that it's been submitted by the button.
... const
form = document.queryselector("
form"); const
formtrigger =
form.queryselector("button.submit"); const submitevent = new submitevent("submit", { submitter:
formtrigger });
form.dispatchevent(submitevent); this is a somewhat contrived example, as you can do nearly all of this much more easily, but this gives you deep control over the process that can be useful.
SubmitEvent.submitter - Web APIs
the read-only submitter property found on the submitevent interface specifies the submit button or other element that was invoked to cause the
form to be submitted.
... syntax let submitter = submitevent.submitter; value an element, indicating the element that sent the submit event to the
form.
... let
form = document.queryselector("
form");
form.addeventlistener("submit", (event) => { let submitter = event.submitter; let handler = submitter.id; if (handler) { processorder(
form, handler); } else { showalertmessage("an unknown or unaccepted payment type was selected.
...with that in hand, we can call a processorder() function to handle the order, passing along the
form and the handler id.
TextEncoder.prototype.encodeInto() - Web APIs
this is potentially more per
formant than the older encode() method especially when the target buffer is a view into a wasm heap.
...the bytes written are guaranteed to
form complete utf-8 byte sequences.
...thus, a more optimistic approach might be to allocate s.length * 2 + 5 bytes, and per
form reallocation in the rare circumstance that the optimistic prediction was wrong.
...xtcontent += 'bytes read: ' + encodedresults.read + ' | bytes written: ' + encodedresults.written + ' | encoded result: ' + utf8; polyfill the polyfill below may be a bit long because of the switch cases and utilization of native textencoder.prototype.encode in safari when available, but it is well worth the length because of the gains in per
formance.
TextTrack.mode - Web APIs
however, that means that if you wish to per
form any actions involving the track's cues while handling, for example, the load event—in order to process some aspect of the cues upon page load—and the track mode was initially disabled, you'll have to change the mode to either hidden or showing in order to trigger loading of the cues.
... when the mode is showing, text tracks are per
formed.
... the exact appearance and manner of that per
formance varies depending on each text track's kind.
... tracks whose kind is "descriptions" are presented in a non-visual
form (for example, the text might be spoken to describe the action in the video).
TrackDefault - Web APIs
the trackdefault interface provides a sourcebuffer with kind, label, and language in
formation for tracks that do not contain this in
formation in the initialization segments of a media chunk.
... trackdefault.language read only returns the default language to use when an initialization segment does not contain language in
formation for a new track.
... trackdefault.label read only returns the default label to use when an initialization segment does not contain label in
formation for a new track.
... trackdefault.kinds read only returns the default kinds used when an initialization segment does not contain kind in
formation for a new track.
WEBGL_color_buffer_float - Web APIs
for more in
formation, see also using extensions in the webgl tutorial.
... constants ext.rgba32f_ext rgba 32-bit floating-point color-renderable
format.
... ext.rgb32f_ext ( ) rgb 32-bit floating-point color-renderable
format.
... extended methods this extension extends webglrenderingcontext.renderbufferstorage(): the internal
format parameter now accepts ext.rgba32f_ext and ext.rgb32f_ext ( ).
WEBGL_compressed_texture_astc - Web APIs
the webgl_compressed_texture_astc extension is part of the webgl api and exposes adaptive scalable texture compression (astc) compressed texture
formats to webgl.
... for more in
formation, see the article using astc texture compression for game assets by nvidia.
...for more in
formation, see also using extensions in the webgl tutorial.
... constants the compressed texture
formats are exposed by 28 constants and can be used in two functions: compressedteximage2d() and compressedtexsubimage2d().
WebGLActiveInfo - Web APIs
the webglactiveinfo interface is part of the webgl api and represents the in
formation returned by calling the webglrenderingcontext.getactiveattrib() and webglrenderingcontext.getactiveuni
form() methods.
... examples a webglactiveinfo object is returned by: webglrenderingcontext.getactiveattrib() webglrenderingcontext.getactiveuni
form() or webgl2renderingcontext.gettrans
formfeedbackvarying() webglactiveinfo?
...getactiveuni
form(webglprogram?
...gettrans
formfeedbackvarying(webglprogram?
WebGLRenderingContext.bufferData() - Web APIs
gl.trans
form_feedback_buffer: buffer for trans
form feedback operations.
... gl.uni
form_buffer: buffer used for storing uni
form blocks.
... examples using bufferdata var canvas = document.getelementbyid('canvas'); var gl = canvas.getcontext('webgl'); var buffer = gl.createbuffer(); gl.bindbuffer(gl.array_buffer, buffer); gl.bufferdata(gl.array_buffer, 1024, gl.static_draw); getting buffer in
formation to check the current buffer usage and buffer size, use the webglrenderingcontext.getbufferparameter() method.
... adds new target buffers: gl.copy_read_buffer, gl.copy_write_buffer, gl.trans
form_feedback_buffer, gl.uni
form_buffer, gl.pixel_pack_buffer, gl.pixel_unpack_buffer adds new usage hints: gl.static_read, gl.dynamic_read, gl.stream_read, gl.static_copy, gl.dynamic_copy, gl.stream_copy.
WebGLRenderingContext.getFramebufferAttachmentParameter() - Web APIs
the webglrenderingcontext.getframebufferattachmentparameter() method of the webgl api returns in
formation about a framebuffer's attachment.
...olor_attachment5_webgl ext.color_attachment6_webgl ext.color_attachment7_webgl ext.color_attachment8_webgl ext.color_attachment9_webgl ext.color_attachment10_webgl ext.color_attachment11_webgl ext.color_attachment12_webgl ext.color_attachment13_webgl ext.color_attachment14_webgl ext.color_attachment15_webgl pname a glenum specifying in
formation to query.
... return value depends on the requested in
formation (as specified with pname).
... gl.framebuffer_attachment_component_type a glenum indicating the
format of the components of the specified attachment.
WebGLRenderingContext.getShaderInfoLog() - Web APIs
the webglrenderingcontext.getshaderinfolog returns the in
formation log for the specified webglshader object.
... it contains warnings, debugging and compile in
formation.
... return value a domstring that contains diagnostic messages, warning messages, and other in
formation about the last compile operation.
... when a webglshader object is initially created, its in
formation log will be a string of length 0.
WebGLRenderingContext.getShaderParameter() - Web APIs
the webglrenderingcontext.getshaderparameter() method of the webgl api returns in
formation about the given shader.
... syntax any gl.getshaderparameter(shader, pname); parameters shader a webglshader to get parameter in
formation from.
... pname a glenum specifying the in
formation to query.
... return value returns the requested shader in
formation (as specified with pname).
WebGLRenderingContext.getTexParameter() - Web APIs
the webglrenderingcontext.gettexparameter() method of the webgl api returns in
formation about the given texture.
... pname a glenum specifying the in
formation to query.
... gl.texture_immutable_
format glboolean immutability of the texture
format and size true or false.
... return value returns the requested texture in
formation (as specified with pname).
WebGLRenderingContext.renderbufferStorage() - Web APIs
syntax void gl.renderbufferstorage(target, internal
format, width, height); parameters target a glenum specifying the target renderbuffer object.
... possible values: gl.renderbuffer: buffer data storage for single images in a renderable internal
format.
... internal
format a glenum specifying the internal
format of the renderbuffer.
... adds many new internal
formats.
Establishing a connection: The WebRTC perfect negotiation pattern - Web APIs
the
former is either the video track or the audio track being received.
...doing so avoids error noise since we never in
formed our side about this offer.
... since there isn't a single "roll back and use this offer instead", per
forming this change on the polite peer requires two steps, executed in the context of promise.all(), which is used to ensure that both statements execute completely before continuing to handle the received offer.
...this works regardless of whether we're handling an offer or an answer since rollback will be per
formed automaticaly as needed.
Using WebRTC data channels - Web APIs
in this guide, we'll examine how to add a data channel to a peer connection, which can then be used to securely exchange arbitrary data; that is, any kind of data we wish, in any
format we choose.
...see security below for more in
formation.
...this proposal is still in ietf draft
form, but once implemented, it will make it possible to send messages with essentially no size limitations, since the sctp layer will automatically interleave the underlying sub-messages to ensure that every channel's data has the opportunity to get through.
... much of the in
formation in this section is based in part on the blog post demystifyijng webrtc's data channel message size limitations, written by lennart grahl.
Web Animations API Concepts - Web APIs
animation objects accept media in the
form of animation effects, specifically keyframe effects (we’ll get to those in a moment).
...keyframe effects are a bundle of in
formation including at the bare minimum a set of keys and the duration they need to be animated over.
... the animation object takes this in
formation and, using the timeline object, assembles a playable animation we can view and reference.
...it is also a per
formant base on which to build a custom or commercial animation library.
Using the Web Storage API - Web APIs
we have also provided an event output page — if you load this page in another tab, then make changes to your choices in the landing page, you'll see the updated storage in
formation outputted as a storageevent is fired.
...next, we set the values displayed in the
form elements to those values, so that they keep in sync when you reload the page.
... we've also included an onchange handler on each
form element so that the data and styling are updated whenever a
form value is changed: bgcolor
form.onchange = populatestorage; font
form.onchange = populatestorage; image
form.onchange = populatestorage; responding to storage changes with the storageevent the storageevent is fired whenever a change is made to the storage object (note that this event is not fired for sessionstorage changes).
...as you can see above, the event object associated with this event has a number of properties containing useful in
formation — the key of the data that changed, the old value before the change, the new value after that change, the url of the document that changed the storage, and the storage object itself (which we've stringified so you can see its content).
XRPose.emulatedPosition - Web APIs
the emulatedposition read-only attribute of the xrpose interface is a boolean value indicating whether or not both the the position component of the pose's trans
form is directly taken from the xr device, or it's simulated or computed based on other sources.
...no in
formation is available about movement forward, backward, or to the sides.
... contrariwise, xr devices which can also track movement forward and backward as well as laterally—six degree of freedom (6dof) devices—don't require any in
formation from other sources to determine the user's position, so the value of emulatedposition is false.
... this in
formation is important because devices whose position is emulated are prone to their offset drifting relative to the real world space over time.
XRSession: selectend event - Web APIs
primary actions include things like users pressing triggers or buttons, tapping a touchpad, speaking a command, or per
forming a recognizable gesture when using a video tracking system or handheld controller with an accelerometer.
...the mybegintracking() function would presumably start the presentation of the object-dragging process, using the trans
form to per
form a hit test, determining which object to pick up.
... upon receiving a select event, the mydropobject() function is called with the target object and the current target ray pose trans
form as inputs.
... the selectend event results in a mystoptracking() function being called with the object being dragged and the final target ray pose's trans
form.
XRSession: selectstart event - Web APIs
primary actions include things like users pressing triggers or buttons, tapping a touchpad, speaking a command, or per
forming a recognizable gesture when using a video tracking system or handheld controller with an accelerometer.
...the mybegintracking() function would presumably start the presentation of the object-dragging process, using the trans
form to per
form a hit test, determining which object to pick up.
... upon receiving a select event, the mydropobject() function is called with the target object and the current target ray pose trans
form as inputs.
... the selectend event results in a mystoptracking() function being called with the object being dragged and the final target ray pose's trans
form.
XRSession: squeeze event - Web APIs
examples of comon kinds of primary action are users pressing triggers or buttons, tapping a touchpad, speaking a command, or per
forming a recognizable gesture when using a video tracking system or handheld controller with an accelerometer.
...the handler fetches the pose representing the target ray for tracked-pointer inputs and sends the pose's trans
form to a function called myhandlesqueezewithray().
... xrsession.addeventlistener("squeeze", event => { if (event.inputsource.targetraymode == "tracked-pointer") { let targetraypose = event.frame.getpose(event.inputsource.targetrayspace, myrefspace); if (targetraypose) { myhandlesqueezewithray(targetraypose.trans
form); } } }); you can of course also set up a handler for squeeze events by setting the xrsession object's onsqueeze event handler property to a function that handles the event: xrsession.onsqueeze = event => { if (event.inputsource.targetraymode == "tracked-pointer") { let targetraypose = event.frame.getpose(event.inputsource.targetrayspace, myrefspace); ...
... if (targetraypose) { myhandlesqueezewithray(targetraypose.trans
form); } } }; specifications specification status comment webxr device apithe definition of 'squeeze event' in that specification.
XRSession: squeezeend event - Web APIs
primary squeeze actions include things like users pressing triggers or buttons, tapping a touchpad, speaking a command, or per
forming a recognizable gesture when using a video tracking system or handheld controller with an accelerometer.
...the mybegintracking() function would presumably start the presentation of the object-dragging process, using the trans
form to per
form a hit test, determining which object to pick up.
... upon receiving a squeeze event, the mydropobject() function is called with the target object and the current target ray pose trans
form as inputs.
... the squeezeend event results in a mystoptracking() function being called with the object being dragged and the final target ray pose's trans
form.
XSLT Basic Example - Web APIs
basic example this first example demonstrates the basics of setting up an xslt trans
formation in a browser.
... the example will take an xml document that contains in
formation (title, list of authors and body text) about an article and present it in an human readable
form.
...the xml document (example.xml) contains the in
formation about the article.
...bar</author> </authors> <body>this is my article text.</body> </article> xsl stylesheet (example.xsl) : <?xml version="1.0"?> <xsl:stylesheet version="1.0" xmlns:xsl="http://www.w3.org/1999/xsl/trans
form"> <xsl:output method="text"/> <xsl:template match="/"> article - <xsl:value-of select="/article/title"/> authors: <xsl:apply-templates select="/article/authors/author"/> </xsl:template> <xsl:template match="author"> - <xsl:value-of select="." /> </xsl:template> </xsl:stylesheet> browser output : article - my article authors: - mr.
Using the alertdialog role - Accessibility
the alertdialog role is used to notify the user of urgent in
formation that demands the user's immediate attention.
...in other words, when a dialog's in
formation and controls require the user's immediate attention alertdialog should be used instead of dialog.
...the in
formation provided above is one of those opinions and therefore not normative.
..."> <h2 id="dialog1title">your login session is about to expire</h2> <p id="dialog1desc">to extend your session, click the ok button</p> <button>ok</button> </div> </div> working examples: tbd notes aria attributes used alertdialog aria-labelledby aria-describedby related aria techniques using the dialog role using the alert role compatibility tbd: add support in
formation for common ua and at product combinations additional resources ...
Using the log role - Accessibility
the log role is used to identify an element that creates a live region where new in
formation is added in a meaningful order and old in
formation may disappear.
...in contrast to other types of live region, this role is sequentially ordered and new in
formation is only added to the end of the log.
...the in
formation provided above is one of those opinions and therefore not normative.
... aria attributes used log related aria techniques marquee role compatibility tbd: add support in
formation for common ua and at product combinations additional resources aria best practices – mplementing live regions: http://www.w3.org/tr/wai-aria-practices/#liveregions ...
Using the status role - Accessibility
the status role is a type of live region and a container whose content is advisory in
formation for the user that is not important enough to justify an alert, and is often presented as a status bar.
... status in
formation content must be provided within a status object, and it should be ensured that this object does not receive focus.
...the in
formation provided above is one of those opinions and therefore not normative.
... <p role="status">your changes were automatically saved.</p> working examples: notes aria attributes used status related aria techniques alert role live region roles live region attributes compatibility the paciello group published some data on compatibility via their 2014 blog post: screen reader support for aria live regions tbd: add updated support in
formation for common ua and at product combinations additional resources previous recommendations from wai-aria 1.0 (2014) for the status role ...
ARIA annotations - Accessibility
for example: <p id="description-id">an extended text description of some kind...</p> <div aria-describedby="description-id"> <!-- some kind of ui feature that needs an accessible description --> </div> aria-details is appropriate when linking to descriptions or annotations that are a bit more complex — rather than a simple text string, it might contain multiple bits of semantic in
formation: <div id="detail-id"> <h2>a heading</h2> <p>an extended text description of some kind…</p> <p><time datetime="...">a timestamp</time></p> </div> <div aria-details="detail-id"> <!-- some kind of ui feature that needs an accessible description --> </div> this difference really becomes apparent when you get to how the content is actually interpreted in the accessibility layer, and...
...as an example, let’s say you have a poll/voting ui widget that shows numbers of votes, but you want to summarize the purpose of the widget in a clear description because the ui does not make it clear: <section aria-description="choose your favourite fruit — the fruit with the highest number of votes will be added to the lunch options next week."> <p>pick your favourite fruit:</p> <
form> <ul> <li><label>apple: <input type="radio" name="fruit" value="apple"></label></li> <li><label>orange: <input type="radio" name="fruit" value="orange"></label></li> <li><label>banana: <input type="radio" name="fruit" value="banana"></label></li> </ul> </
form> </section> if the descriptive text does appear in the ui, you can link the description to the widget using ar...
...ia-describedby, like so: <p id="fruit-desc">choose your favourite fruit — the fruit with the highest number of votes will be added to the lunch options next week.</p> <section aria-describedby="fruit-desc"> <
form> <ul> <li><label>apple: <input type="radio" name="fruit" value="apple"></label></li> <li><label>orange: <input type="radio" name="fruit" value="orange"></label></li> <li><label>banana: <input type="radio" name="fruit" value="banana"></label></li> </ul> </
form> </section> insertions and deletions a common wish in online document systems like google docs is to be able to track changes, to see what reviewers or editors have suggested as changes to the text, before the managing editor or author accepts or rejects those changes.
...</p> we could even provide an in
formation box saying who made the suggestion and when, and associate it with the suggestion via aria-details: <p>freida’s pet is a <span role="suggestion" aria-details="comment-source"><span role="deletion">black cat called luna</span><span role="insertion">purple tyrannosaurus rex called tiny</span></span>.
Multipart labels: Using ARIA for labels with embedded fields inside them - Accessibility
problem you have a
form where you ask your user a question, but the answer is mentioned in the question itself.
...“delete history after” is to the left of the textbox, x is the number, for example 21, and the word “days” follows the textbox,
forming a sentence that is easy to understand.
... both aria-labelledby and aria-describedby are specified on the
form element that is to be labelled, for example an <input> in both cases, the label for/label control bindings that may also exist are overridden by aria-labelledby.
...for labels with embedded
form controls, using aria-labelledby is still the best approach.
ARIA - Accessibility
for example, aria enables accessible navigation landmarks in html4, javascript widgets,
form hints and error messages, live content updates, and more.
...in this example, the role="progressbar" attribute in
forms the browser that this element is actually a javascript-powered progress bar widget.
... improving
form accessibility aria is not just for dynamic content!
... learn how to improve accessibility of html
forms using additional aria attributes.
Understanding the Web Content Accessibility Guidelines - Accessibility
this set of articles provides quick explanations to help you understand the steps that need to be taken to con
form to the recommendations outlined in the w3c web content accessibility guidelines 2.0 or 2.1 (or just wcag, for the purposes of this writing).
... each of the links below will take you to pages that further expand on these areas, giving you practical advice on how to write your web content so it con
forms to the success criteria outlined in each of the wcag 2.0 and 2.1 guidelines that further sub-divides each principle.
...atim, word-for-word) 17 new success criteria at the a / aa / aaa levels primarily addressing user needs in these areas: mobile accessibility low vision cognitive read more about wcag 2.1: deque: wcag 2.1: what is next for accessibility guidelines tpg: web content accessibility guidelines (wcag) 2.1 legal standing this guide is intended to provide practical in
formation to help you build better, more accessible websites.
...and particularity the accessibility guidelines and the law section provide more related in
formation.
:optional - CSS: Cascading Style Sheets
/* selects any optional <input> */ input:optional { border: 1px dashed black; } this pseudo-class is useful for styling fields that are not required to submit a
form.
... note: the :required pseudo-class selects required
form fields.
... accessibility concerns if a
form contains optional <input>s, required inputs should be indicated using the required attribute.
... this will ensure that people navigating with the aid of assistive technology such as a screen reader will be able to understand which inputs need valid content to ensure a successful
form submission.
:valid - CSS: Cascading Style Sheets
the :valid css pseudo-class represents any <input> or other <
form> element whose contents validate successfully.
... this allows to easily make valid fields adopt an appearance that helps the user confirm that their data is
formatted properly.
... syntax :valid examples indicating valid and invalid
form fields in this example, we use structures like this, which include extra <span>s to generate content on; we'll use these to provide indicators of valid/invalid data: <div> <label for="fname">first name *: </label> <input id="fname" name="fname" type="text" required> <span></span> </div> to provide these indicators, we use the following css: input + span { position: relative; } input + span::before { position: absolute; right: -20px; top: 5px; } input:invalid { border: 2px solid red; } input:invalid + span::before { content: '✖'; color: red; } input:v...
...we then absolutely position different generated content depending on whether the
form's data is valid or invalid — a green check or a red cross, respectively.
speak-as - CSS: Cascading Style Sheets
the speak-as descriptor specifies how a counter symbol constructed with a given @counter-style will be represented in the spoken
form.
...if included, the counter will be spoken out in the
form specified in that counter style, kind of like specifying the fallback descriptor.
...do not rely on it to convey in
formation critical to understanding the page's purpose.
... let's talk about speech css | css tricks
formal definition related at-rule@counter-styleinitial valueautocomputed valueas specified
formal syntax auto | bullets | numbers | words | spell-out | <counter-style-name>where <counter-style-name> = <custom-ident> examples setting the spoken
form for a counter html <ul class="list"> <li>one</li> <li>two</li> <li>three</li> <li>four</li> <li>five</li> </ul> css @counter-style speak-as-example { system: fixed; symbols: ; suffix: " "; speak-as: numbers; } .list { list-style: speak-as-example; } result specifications specification status comment css counter styles level 3the definition of 'speak-as' in that specification.
CSS values and units - CSS: Cascading Style Sheets
refer to the page for each value type for more detailed in
formation.
... when viewing css property value syntax in a css specification or the mdn property page, allowable keywords will be listed in the following
form.
...see <url> for more in
formation.
...functions can take multiple arguments, which are
formatted similarly to a css property value.
Shorthand properties - CSS: Cascading Style Sheets
can be shortened to just one declaration: background: #000 url(images/bg.gif) no-repeat left top; (the shorthand
form is actually the equivalent of the longhand properties above plus background-attachment: scroll and, in css3, some additional properties.) see background for more detailed in
formation, including css3 properties.
... note: see origin of css declarations in introducing the css cascade for more in
formation on each of these and how they work.
... see cascade and inheritance or introducing the css cascade for more in
formation about how inheritance works in css.
... see also css key concepts: css syntax, at-rule, comments, specificity and inheritance, the box, layout modes and visual
formatting models, and margin collapsing, or the initial, computed, resolved, specified, used, and actual values.
Specificity - CSS: Cascading Style Sheets
(the selectors declared inside :not() do, however.) for more in
formation, visit: "specificity" in "cascade and inheritance", you can also visit: https://specifishity.com inline styles added to an element (e.g., style="font-weight: bold;") always overwrite any styles in external stylesheets, and thus can be thought of as having the highest specificity.
...both inline styles and !important are considered very bad practice, but sometimes you need the latter to override the
former.
... for more in
formation, visit: https://stackoverflow.com/questions/3706819/what-are-the-implications-of-using-important-in-css https://stackoverflow.com/questions/9245353/what-does-important-in-css-mean https://stackoverflow.com/questions/5701149/when-to-use-important-property-in-css https://stackoverflow.com/questions/11178673/how-to-override-important https://stackoverflow.com/questions/2042497/when-to-us...
...appears on the screen like this:
form-based specificity specificity is based on the
form of a selector.
animation-delay - CSS: Cascading Style Sheets
the animation-delay css property specifies the amount of time to wait from applying the animation to an element before beginning to per
form the animation.
...for more in
formation, see setting multiple animation property values.
...
formal definition initial value0sapplies toall elements, ::before and ::after pseudo-elementsinheritednocomputed valueas specifiedanimation typediscrete
formal syntax <time># examples see css animations for examples.
...this bug affects only some plat
forms, such as windows.
background-image - CSS: Cascading Style Sheets
accessibility concerns browsers do not provide any special in
formation on background images to assistive technology.
...if the image contains in
formation critical to understanding the page's overall purpose, it is better to describe it semantically in the document.
... mdn understanding wcag, guideline 1.1 explanations understanding success criterion 1.1.1 | w3c understanding wcag 2.0
formal definition initial valuenoneapplies toall elements.
... it also applies to ::first-letter and ::first-line.inheritednocomputed valueas specified, but with <url> values made absoluteanimation typediscrete
formal syntax <bg-image>#where <bg-image> = none | <image>where <image> = <url> | <image()> | <image-set()> | <element()> | <paint()> | <cross-fade()> | <gradient>where <image()> = image( <image-tags>?
background-size - CSS: Cascading Style Sheets
formal definition initial valueauto autoapplies toall elements.
... it also applies to ::first-letter and ::first-line.inheritednopercentagesrelative to the background positioning areacomputed valueas specified, but with relative lengths converted into absolute lengthsanimation typerepeatable list of simple list of length, percentage, or calc
formal syntax <bg-size>#where <bg-size> = [ <length-percentage> | auto ]{1,2} | cover | containwhere <length-percentage> = <length> | <percentage> examples please see scaling background images for examples.
...opera 9.5 also interprets the two-value
form as a horizontal scaling factor and, from appearances, a vertical clipping dimension.
...opera 9.5 also interprets the two-value
form as a horizontal scaling factor and, from appearances, a vertical clipping dimension.
background - CSS: Cascading Style Sheets
accessibility concerns browsers do not provide any special in
formation on background images to assistive technology.
...if the image contains in
formation critical to understanding the page's overall purpose, it is better to describe it semantically in the document.
... mdn understanding wcag, guideline 1.1 explanations understanding success criterion 1.1.1 | w3c understanding wcag 2.0
formal definition initial valueas each of the properties of the shorthand:background-image: nonebackground-position: 0% 0%background-size: auto autobackground-repeat: repeatbackground-origin: padding-boxbackground-clip: border-boxbackground-attachment: scrollbackground-color: transparentapplies toall elements.
...t: as specifiedbackground-color: computed coloranimation typeas each of the properties of the shorthand:background-color: a colorbackground-image: discretebackground-clip: discretebackground-position: repeatable list of simple list of length, percentage, or calcbackground-size: repeatable list of simple list of length, percentage, or calcbackground-repeat: discretebackground-attachment: discrete
formal syntax [ <bg-layer> , ]* <final-bg-layer>where <bg-layer> = <bg-image> | <bg-position> [ / <bg-size> ]?
font-variant-numeric - CSS: Cascading Style Sheets
ar-nums; /* <numeric-spacing-values> */ font-variant-numeric: diagonal-fractions; /* <numeric-fraction-values> */ font-variant-numeric: stacked-fractions; /* <numeric-fraction-values> */ font-variant-numeric: oldstyle-nums stacked-fractions; /* global values */ font-variant-numeric: inherit; font-variant-numeric: initial; font-variant-numeric: unset; this property can take one of two
forms: either the keyword value normal or one or more of the other values listed below, space-separated, in any order.
...
formal definition initial valuenormalapplies toall elements.
... it also applies to ::first-letter and ::first-line.inheritedyescomputed valueas specifiedanimation typediscrete
formal syntax normal | [ <numeric-figure-values> | <numeric-spacing-values> | <numeric-fraction-values> | ordinal | slashed-zero ]where <numeric-figure-values> = [ lining-nums | oldstyle-nums ]<numeric-spacing-values> = [ proportional-nums | tabular-nums ]<numeric-fraction-values> = [ diagonal-fractions | stacked-fractions ] examples setting ordinal numeric
forms html <p class="ordinal">1st, 2nd, 3rd, 4th, 5th</p> css /* this example uses the source sans pro opentype font, developed by adobe and used here under the terms of the sil open font license, version 1.1: http://scripts.sil.org/cms/scripts/page.php?item_id=ofl_web */ @font-face { font-family: "source sans pro"; ...
...font-style: normal; font-weight: 400; src: url("https://mdn.mozillademos.org/files/15757/sourcesanspro-regular.otf")
format("opentype"); } .ordinal { font-variant-numeric: ordinal; font-family: "source sans pro"; } result specifications specification status comment css fonts module level 3the definition of 'font-variant-numeric' in that specification.
ime-mode - CSS: Cascading Style Sheets
active the input method editor is initially active; text entry is per
formed through it unless the user specifically dismisses it.
...
formal definition initial valueautoapplies totext fieldsinheritednocomputed valueas specifiedanimation typediscrete
formal syntax auto | normal | active | inactive | disabled examples disabling input method support this example disables input method support for a
form field.
... <input type="text" name="name" value="initial value" style="ime-mode: disabled"> note: you shouldn't rely on disabling ime to prevent extended characters from passing through your
form.
... even with ime disabled, users can still paste extended characters into your
form's fields.
mask-border-slice - CSS: Cascading Style Sheets
these regions are used to
form the components of an element's mask border.
...each one is used a single time to
form the corners of the final border image.
... the mask-border-repeat, mask-border-width, and mask-border-outset properties determine how these regions are used to
form the final mask border.
...
formal definition initial value0applies toall elements; in svg, it applies to container elements excluding the defs element and all graphics elementsinheritednopercentagesrefer to size of the mask border imagecomputed valueas specifiedanimation typediscrete
formal syntax <number-percentage>{1,4} fill?where <number-percentage> = <number> | <percentage> examples basic usage this property doesn't appear to be supported anywhere yet.
overflow-x - CSS: Cascading Style Sheets
the box is not a scroll container, and does not start a new
formatting context.
... if you wish to start a new
formatting context, you can use display: flow-root to do so.
...if content fits inside the padding box, it looks the same as visible, but still establishes a new block-
formatting context.
...
formal definition initial valuevisibleapplies toblock-containers, flex containers, and grid containersinheritednocomputed valueas specified, except with visible/clip computing to auto/hidden respectively if one of overflow-x or overflow-y is neither visible nor clipanimation typediscrete
formal syntax visible | hidden | clip | scroll | auto examples html <ul> <li><code>overflow-x:hidden</code> — hides the text outside the box <div id="div1"> abcdefghijklmopqrstuvwxyzabcdefghijklmopqrstuvwxyz </div> </li> <li><code>overflow-x:scroll</code> — always adds a scrollbar <div id="div2"> abcdefghijklmopqrstuvwxyzabcdefghijklmopqrstuvwxyz </div> </li> <li><code>overflow-x:visible</code> — di...
overflow-y - CSS: Cascading Style Sheets
the box is not a scroll container, and does not start a new
formatting context.
... if you wish to start a new
formatting context, you can use display: flow-root to do so.
...if content fits inside the padding box, it looks the same as visible, but still establishes a new block-
formatting context.
...
formal definition initial valuevisibleapplies toblock-containers, flex containers, and grid containersinheritednocomputed valueas specified, except with visible/clip computing to auto/hidden respectively if one of overflow-x or overflow-y is neither visible nor clipanimation typediscrete
formal syntax visible | hidden | clip | scroll | auto examples setting overflow-y behavior html <ul> <li><code>overflow-y:hidden</code> — hides the text outside the box <div id="div1"> lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
page-break-after - CSS: Cascading Style Sheets
left force page breaks after the element so that the next page is
formatted as a left page.
... right force page breaks after the element so that the next page is
formatted as a right page.
...a subset of values should be aliased as follows: page-break-after break-after auto auto left left right right avoid avoid always page
formal definition initial valueautoapplies toblock-level elements in the normal flow of the root element.
... user agents may also apply it to other elements like table-row elements.inheritednocomputed valueas specifiedanimation typediscrete
formal syntax auto | always | avoid | left | right | recto | verso examples setting a page break after footnotes /* move to a new page after footnotes */ div.footnotes { page-break-after: always; } specifications specification status comment css logical properties and values level 1the definition of 'recto and verso' in that specification.
page-break-before - CSS: Cascading Style Sheets
left force page breaks before the element so that the next page is
formatted as a left page.
... right force page breaks before the element so that the next page is
formatted as a right page.
...a subset of values should be aliased as follows: page-break-before break-before auto auto left left right right avoid avoid always page
formal definition initial valueautoapplies toblock-level elements in the normal flow of the root element.
... user agents may also apply it to other elements like table-row elements.inheritednocomputed valueas specifiedanimation typediscrete
formal syntax auto | always | avoid | left | right | recto | verso examples avoid a page break before the dic /* avoid page break before the div */ div.note { page-break-before: avoid; } specifications specification status comment css logical properties and values level 1the definition of 'recto and verso' in that specification.
perspective-origin - CSS: Cascading Style Sheets
the perspective-origin and perspective properties are attached to the parent of a child trans
formed in 3-dimensional space, unlike the perspective() trans
form function which is placed on the element being trans
formed.
...
formal definition initial value50% 50%applies totrans
formable elementsinheritednopercentagesrefer to the size of bounding boxcomputed valuefor <length> the absolute value, otherwise a percentageanimation typesimple list of length, percentage, or calc
formal syntax <position>where <position> = [ [ left | center | right ] | [ top | center | bottom ] | [ left | center | right | <length-percentage> ] [...
... } .po200200neg { perspective-origin: -200% -200%; } .po200200pos { perspective-origin: 200% 200%; } .po200200 { perspective-origin: 200% -200%; } /* define the container div, the cube div, and a generic face */ .container { width: 100px; height: 100px; margin: 24px; border: none; } .cube { width: 100%; height: 100%; backface-visibility: visible; perspective: 300px; trans
form-style: preserve-3d; } .face { display: block; position: absolute; width: 100px; height: 100px; border: none; line-height: 100px; font-family: sans-serif; font-size: 60px; color: white; text-align: center; } /* define each face based on direction */ .front { background: rgba(0, 0, 0, 0.3); trans
form: translatez(50px); } .back { background: rgba(0, 255, 0, 1); color: b...
...lack; trans
form: rotatey(180deg) translatez(50px); } .right { background: rgba(196, 0, 0, 0.7); trans
form: rotatey(90deg) translatez(50px); } .left { background: rgba(0, 0, 196, 0.7); trans
form: rotatey(-90deg) translatez(50px); } .top { background: rgba(196, 196, 0, 0.7); trans
form: rotatex(90deg) translatez(50px); } .bottom { background: rgba(196, 0, 196, 0.7); trans
form: rotatex(-90deg) translatez(50px); } /* make the layout a little nicer */ section { background-color: #eee; padding: 10px; font-family: sans-serif; text-align: left; display: grid; grid-template-columns: repeat(3, 1fr); } result specifications specification status comment css trans
forms level 2the definition of 'perspective-origin' in that specification.
<ratio> - CSS: Cascading Style Sheets
} common aspect ratios ratio usage 4/3 traditional tv
format in the 20th century.
... 16/9 modern "widescreen" tv
format.
... 185/100 = 91/50 the most common movie
format since the 1960s.
... 239/100 "widescreen," anamorphic movie
format.
rotate - CSS: Cascading Style Sheets
the rotate css property allows you to specify rotation trans
forms individually and independently of the trans
form property.
... this maps better to typical user interface usage, and saves having to remember the exact order of trans
form functions to specify in the trans
form property.
...
formal definition initial valuenoneapplies totrans
formable elementsinheritednocomputed valueas specifiedanimation typea trans
formcreates stacking contextyes
formal syntax none | <angle> | [ x | y | z | <number>{3} ] && <angle> examples rotate an element on hover html <div> <p class="rotate">rotation</p> </div> css * { box-sizing: border-box; } html { font-family: sans-serif; } div { ...
... width: 150px; margin: 0 auto; } p { padding: 10px 5px; border: 3px solid black; border-radius: 20px; width: 150px; font-size: 1.2rem; text-align: center; } .rotate { transition: rotate 1s; } div:hover .rotate { rotate: 1 -0.5 1 180deg; } result specifications specification status comment css trans
forms level 2the definition of 'individual trans
forms' in that specification.
scale - CSS: Cascading Style Sheets
the scale css property allows you to specify scale trans
forms individually and independently of the trans
form property.
... this maps better to typical user interface usage, and saves having to remember the exact order of trans
form functions to specify in the trans
form value.
...
formal definition initial valuenoneapplies totrans
formable elementsinheritednocomputed valueas specifiedanimation typea trans
formcreates stacking contextyes
formal syntax none | <number>{1,3} examples scaling an element on hover html <div> <p class="scale">scaling</p> </div> css * { box-sizing: border-box; } html { font-family: sans-serif; } div { width: 150px; margin: 0 auto; } ...
...p { padding: 10px 5px; border: 3px solid black; border-radius: 20px; width: 150px; font-size: 1.2rem; text-align: center; } .scale { transition: scale 1s; } div:hover .scale { scale: 2 0.7; } result specifications specification status comment css trans
forms level 2the definition of 'individual trans
forms' in that specification.
scrollbar-color - CSS: Cascading Style Sheets
auto default plat
form rendering for the track portion of the scrollbar, in the absence of any other related scrollbar color properties.
... dark show a dark scrollbar, which can be either a dark variant of scrollbar provided by the plat
form, or a custom scrollbar with dark colors.
... light show a light scrollbar, which can be either a light variant of scrollbar provided by the plat
form, or a custom scrollbar with light colors.
...
formal definition initial valueautoapplies toscrolling boxesinheritedyescomputed valueas specifiedanimation typea color
formal syntax auto | dark | light | <color>{2}where <color> = <rgb()> | <rgba()> | <hsl()> | <hsla()> | <hex-color> | <named-color> | currentcolor | <deprecated-system-color>where <rgb()> = rgb( <percentage>{3} [ / <alpha-value> ]?
text-decoration-thickness - CSS: Cascading Style Sheets
from-font if the font file includes in
formation about a preferred thickness, use that value.
... if the font file doesn't include this in
formation, behave as if auto was set, with the browser choosing an appropriate thickness.
...
formal definition initial valueautoapplies toall elements.
... it also applies to ::first-letter and ::first-line.inheritednopercentagesrefer to the font size of the element itselfcomputed valueas specifiedanimation typeby computed value type
formal syntax auto | from-font | <length> | <percentage> examples varying thickness html <p class="thin">here's some text with a 1px red underline.</p> <p class="thick">this one has a 5px red underline.</p> <p class="shorthand">this uses the equivalent shorthand.</p> css .thin { text-decoration-line: underline; text-decoration-style: solid; text-decoration-color: red; text-decoration-thickness: 1px; } .thick { text-decoration-line: underline; text-decoration-style: solid; text-decoration-color: red; text-decoration-thickness: 5px; } .shorthand { text-decoration: underline solid red 5px; }...
matrix() - CSS: Cascading Style Sheets
the matrix() css function defines a homogeneous 2d trans
formation matrix.
... its result is a <trans
form-function> data type.
... matrix(a, b, c, d, tx, ty) values a b c d are <number>s describing the linear trans
formation.
... ac bd actxbdty001 actxbdty001 ac0txbd0ty00100001 [a b c d tx ty] the values represent the following functions: matrix( scalex(), skewy(), skewx(), scaley(), translatex(), translatey() ) examples html <div>normal</div> <div class="changed">changed</div> css div { width: 80px; height: 80px; background-color: skyblue; } .changed { trans
form: matrix(1, 2, -1, 1, 80, 80); background-color: pink; } result specifications specification status comment css trans
forms level 1the definition of 'matrix()' in that specification.
skew() - CSS: Cascading Style Sheets
the skew() css function defines a trans
formation that skews an element on the 2d plane.
... its result is a <trans
form-function> data type.
... this trans
formation is a shear mapping (transvection) that distorts each point within an element by a certain angle in the horizontal and vertical directions.
...ates on ℝ3 homogeneous coordinates on ℝℙ3 1tan(ax)tan(ay)1 1tan(ax)0tan(ay)10001 1tan(ax)0tan(ay)10001 1tan(ax)00tan(ay)10000100001 [1 tan(ay) tan(ax) 1 0 0] examples using a single x-angle html <div>normal</div> <div class="skewed">skewed</div> css div { width: 80px; height: 80px; background-color: skyblue; } .skewed { trans
form: skew(10deg); /* equal to skewx(10deg) */ background-color: pink; } result using two angles html <div>normal</div> <div class="skewed">skewed</div> css div { width: 80px; height: 80px; background-color: skyblue; } .skewed { trans
form: skew(10deg, 10deg); background-color: pink; } result specifications specification status comment css transfo...
skewX() - CSS: Cascading Style Sheets
the skewx() css function defines a trans
formation that skews an element in the horizontal direction on the 2d plane.
... its result is a <trans
form-function> data type.
... this trans
formation is a shear mapping (transvection) that distorts each point within an element by a certain angle in the horizontal direction.
... homogeneous coordinates on ℝℙ2 cartesian coordinates on ℝ3 homogeneous coordinates on ℝℙ3 1tan(a)01 1tan(a)0010001 1tan(a)0010001 1tan(a)00010000100001 [1 0 tan(a) 1 0 0] examples html <div>normal</div> <div class="skewed">skewed</div> css div { width: 80px; height: 80px; background-color: skyblue; } .skewed { trans
form: skewx(10deg); /* equal to skew(10deg) */ background-color: pink; } result specifications specification status comment css trans
forms level 1the definition of 'skewx()' in that specification.
skewY() - CSS: Cascading Style Sheets
the skewy() css function defines a trans
formation that skews an element in the vertical direction on the 2d plane.
... its result is a <trans
form-function> data type.
... this trans
formation is a shear mapping (transvection) that distorts each point within an element by a certain angle in the vertical direction.
... homogeneous coordinates on ℝℙ2 cartesian coordinates on ℝ3 homogeneous coordinates on ℝℙ3 10tan(a)1 100tan(a)10001 100tan(a)10001 1000tan(a)10000100001 [1 tan(a) 0 1 0 0] examples html <div>normal</div> <div class="skewed">skewed</div> css div { width: 80px; height: 80px; background-color: skyblue; } .skewed { trans
form: skewy(40deg); background-color: pink; } result specifications specification status comment css trans
forms level 1the definition of 'skewy()' in that specification.
Audio and video manipulation - Developer guides
the beauty of the web is that you can combine technologies to create new
forms.
... use this web audio node type an audio track from an html <audio> or <video> element mediaelementaudiosourcenode a plain raw audio data buffer in memory audiobuffersourcenode an oscillator generating a sine wave or other computed wave
form oscillatornode an audio track from webrtc (such as the microphone input you can get using getusermedia().
... note: see biquadfilternode for more in
formation.
... libraries currently exist for the following
formats : aac: aac.js alac: alac.js flac: flac.js mp3: mp3.js opus: opus.js vorbis: vorbis.js note: at audiocogs, you can try out a few demos; audiocogs also provides a framework, aurora.js, which is intended to help you author your own codecs in javascript.
<b>: The Bring Attention To element - HTML: Hypertext Markup Language
this was
formerly known as the boldface element, and most browsers still draw the text in boldface.
...the <b> element doesn't convey such special semantic in
formation; use it only when no others fit.
... it is a good practice to use the class attribute on the <b> element in order to convey additional semantic in
formation as needed (for example <b class="lead"> for the first sentence in a paragraph).
...styling in
formation has been deprecated since html4, so the meaning of the <b> element has been changed.
<head>: The Document Metadata (Header) element - HTML: Hypertext Markup Language
the html <head> element contains machine-readable in
formation (metadata) about the document, like its title, scripts, and style sheets.
... note: <head> primarily holds in
formation for machine processing, not human-readability.
... for human-visible in
formation, like top-level headings and listed authors, see the <header> element.
... permitted content if the document is an <iframe> srcdoc document, or if title in
formation is available from a higher level protocol (like the subject line in html email), zero or more elements of metadata content.
<input type="button"> - HTML: Hypertext Markup Language
<input type="button" value="click me"> if you don't specify a value, you get an empty button: <input type="button"> using buttons <input type="button"> elements have no default behavior (their cousins, <input type="submit"> and <input type="reset"> are used to submit and reset
forms, respectively).
... a simple button we'll begin by creating a simple button with a click event handler that starts our machine (well, it toggles the value of the button and the text content of the following paragraph): <
form> <input type="button" value="start machine"> </
form> <p>the machine is stopped.</p> const button = document.queryselector('input'); const paragraph = document.queryselector('p'); button.addeventlistener('click', updatebutton); function updatebutton() { if (button.value === 'start machine') { button.value = 'stop machine'; paragraph.textcontent = 'the machine has started!'; } else { button.value = 'start machine'; paragraph.textcontent = 'the machine is stopped.'; } } the script gets ...
... <
form> <input type="button" value="start machine" accesskey="s"> </
form> <p>the machine is stopped.</p> const button = document.queryselector('input'); const paragraph = document.queryselector('p'); button.addeventlistener('click', updatebutton); function updatebutton() { if (button.value === 'start machine') { button.value = 'stop machine'; paragraph.textcontent = 'the machine has st...
...in a real site, you'd have to provide this in
formation in a way that doesn't intefere with the site design (for example by providing an easily accessible link that points to in
formation on what the site accesskeys are).
<nextid>: The NeXT ID element (Obsolete) - HTML: Hypertext Markup Language
html "0.c" - from january 23, 1991 though november 23, 1992 this early version of html introduced <nextid> in a non-sgml compliant
form that simply used the numeric value alone as an "attribute." html "0.d" - from november 26, 1992 through may 24, 1993 during this span, next and the oldest surviving dtd's show <nextid> to take only a number for a value of its newly-introduced attribute n.
... html version 2 level 1 this is like the level 2 default but it excludes all the
forms elements, i.
...<
form>, <input>, <textarea>, <select>, and <option> html version 2 strict level 1 this is like regular level 1 but it also excludes these depreciated elements, along with such constructs as nesting a header (<h*> element) within a link (<a> element) html version 2 level 2 this is the default and includes and permits all html level 2 functions and elements and attributes html version 2 strict level 2 this excludes these depreciated elements and also forbids such constructs as nesting a header (<h*> element) within a link (<a> element), or having a
forms <input> element which is not within a block level element such as <p> html version 3.2 <nextid> has vanished altogether, never to be heard from again.
...next would then add, within the header of the html document, a special tag, <nextid n="z8">, to in
form where to continue its naming convention.
<sub>: The Subscript element - HTML: Hypertext Markup Language
marking up the subscript in mathematical variable numbers (although you may also consider using a mathml
formula for this).
... denoting the number of atoms of a given element within a chemical
formula (such as every developer's best friend, c8h10n4o2, otherwise known as "caffeine").
... see chemical
formulas.
...<var>x<sub>n</sub></var>.</p> the resulting output: chemical
formulas when writing a chemical
formula, such as h20, the number of atoms of a given element within the described molecule is represented using a subscripted number; in the case of water, the subscripted "2" indicates that there are two atoms of hydrogen in the molecule.
HTTP authentication - HTTP
the general http authentication framework rfc 7235 defines the http authentication framework, which can be used by a server to challenge a client request, and by a client to provide authentication in
formation.
... the challenge and response flow works like this: the server responds to a client with a 401 (unauthorized) response status and provides in
formation on how to authorize with a www-authenticate response header containing at least one challenge.
...more in
formation below.
...without these additional security enhancements, basic authentication should not be used to protect sensitive or valuable in
formation.
CSP: navigate-to - HTTP
the http content-security-policy (csp) navigate-to directive restricts the urls to which a document can initiate navigations by any means including <
form> (if
form-action is not specified), <a>, window.location, window.open, etc.
... note: if the
form-action directive is present, the navigate-to directive will not act on navigations that are
form submissions.
... examples meta tag configuration <meta http-equiv="content-security-policy" content="navigate-to 'none'"> violation case using a <
form> element with an action set to inline javascript will result in a csp violation.
... <meta http-equiv="content-security-policy" content="navigate-to 'none'"> <
form action="javascript:alert('foo')" id="
form1" method="post"> <input type="text" name="fieldname" value="fieldvalue"> <input type="submit" id="submit" value="submit"> </
form> specifications specification status comment content security policy level 3the definition of 'navigate-to' in that specification.
CSP: referrer - HTTP
the http content-security-policy (csp) referrer directive used to specify in
formation in the referer header (with a single r as this was a typo in the original spec) for links away from a page.
...no referrer in
formation is sent along with requests.
... "origin-when-cross-origin" / "origin-when-crossorigin" send a full url when per
forming a same-origin request, but only send the origin of the document for other cases.
... "unsafe-url" send a full url (stripped from parameters) when per
forming a same-origin or cross-origin request.
Content-Type - HTTP
it also needs to have a mime type of its parsed value (ignoring parameters) of either application/x-www-
form-urlencoded, multipart/
form-data, or text/plain.
... syntax content-type: text/html; charset=utf-8 content-type: multipart/
form-data; boundary=something directives media-type the mime type of the resource or the data.
... examples content-type in html
forms in a post request, resulting from an html
form submission, the content-type of the request is specified by the enctype attribute on the <
form> element.
... <
form action="/" method="post" enctype="multipart/
form-data"> <input type="text" name="description" value="some text"> <input type="file" name="myfile"> <button type="submit">submit</button> </
form> the request looks something like this (less interesting headers are omitted here): post /foo http/1.1 content-length: 68137 content-type: multipart/
form-data; boundary=---------------------------974767299852498929531610575 -----------------------------974767299852498929531610575 content-disposition:
form-data; name="description" some text -----------------------------974767299852498929531610575 content-disposition:
form-data; name="myfile"; filename="foo.txt" content-type: text/plain (content of the uploaded file foo.txt) -----------------------------974767299852498929531610575-- sp...
Set-Cookie - HTTP
for more in
formation, see the guide on http cookies.
...encoding: many implementations per
form url encoding on cookie values, however it is not required per the rfc specification.
...see date for the required
formatting.
...(however, confidential in
formation should never be stored in http cookies, as the entire mechanism is inherently insecure and doesn't encrypt any in
formation.) note: insecure sites (http:) can't set cookies with the secure attribute (since chrome 52 and firefox 52).
HTTP resources and specifications - HTTP
cs and content proposed standard rfc 7232 hypertext transfer protocol (http/1.1): conditional requests proposed standard rfc 7233 hypertext transfer protocol (http/1.1): range requests proposed standard rfc 7234 hypertext transfer protocol (http/1.1): caching proposed standard rfc 5861 http cache-control extensions for stale content in
formational rfc 8246 http immutable responses proposed standard rfc 7235 hypertext transfer protocol (http/1.1): authentication proposed standard rfc 6265 http state management mechanism defines cookies proposed standard draft spec cookie prefixes ietf draft draft spec same-site cookies ietf draft draft spec dep...
...recate modification of 'secure' cookies from non-secure origins ietf draft rfc 2145 use and interpretation of http version numbers in
formational rfc 6585 additional http status codes proposed standard rfc 7538 the hypertext transfer protocol status code 308 (permanent redirect) proposed standard rfc 7725 an http status code to report legal obstacles on the standard track rfc 2397 the "data" url scheme proposed standard rfc 3986 uni
form resource identifier (uri): generic syntax internet standard rfc 5988 web linking defines the link header proposed standard experimental spec hypertext transfer protocol (http) keep-alive header in
formational (expired) draft spec...
... http client hints ietf draft rfc 7578 returning values from
forms: multipart/
form-data proposed standard rfc 6266 use of the content-disposition header field in the hypertext transfer protocol (http) proposed standard rfc 2183 communicating presentation in
formation in internet messages: the content-disposition header field only a subset of syntax of the content-disposition header can be used in the context of http messages.
... cross-origin resource sharing living standard rfc 7034 http header field x-frame-options in
formational rfc 6797 http strict transport security (hsts) proposed standard upgrade insecure requests upgrade insecure requests candidate recommendation content security policy 1.0 content security policy 1.0 csp 1.1 and csp 3.0 doesn't extend the http standard obsolete microsoft document specifying legacy document modes* defines x-ua-c...
Regular expression syntax cheatsheet - JavaScript
if you need more in
formation on a specific topic, please follow the link on the corresponding heading to access the full article or head to the guide.
... \s matches a single white space character, including space, tab,
form feed, line feed, and other unicode spaces.
... \f matches a
form-feed.
... capturing groups have a per
formance penalty.
Unicode property escapes - JavaScript
note: as there are many properties and values available, we will not describe them exhaustively here but rather provide various examples rationale before es2018 there was no per
formance-efficient way to match characters from different sets based on scripts (like macedonian, greek, georgian etc.) or propertyname (like emoji etc) in javascript.
...it is possible to use both short or long
forms in unicode property escapes.
... // finding all the letters of a text let story = "it’s the cheshire cat: now i shall have somebody to talk to."; // most explicit
form story.match(/\p{general_category=letter}/gu); // it is not mandatory to use the property name for general categories story.match(/\p{letter}/gu); // this is equivalent (short alias): story.match(/\p{l}/gu); // this is also equivalent (conjunction of all the subcategories using short aliases) story.match(/\p{lu}|\p{ll}|\p{lt}|\p{lm}|\p{lo}/gu); scripts and script extensions some languages use different scripts for their writing system.
...however, such
forms only match characters from the latin script (in other words, a to z and a to z for \w and 0 to 9 for \d).
Deprecated and obsolete features - JavaScript
tolocale
format is deprecated.
... function property description arity number of
formal arguments.
... e4x see e4x for more in
formation.
... sharp variables see sharp variables in javascript for more in
formation.
Date.prototype.toDateString() - JavaScript
the todatestring() method returns the date portion of a date object in english in the following
format separated by spaces: first three letters of the week day name first three letters of the month name two digit day of the month, padded on the left a zero if necessary four digit year (at least), padded on the left with zeros if necessary e.g.
... syntax dateobj.todatestring() return value a string representing the date portion of the given date object in human readable
form in english.
...calling tostring() will return the date
formatted in a human readable
form in english.
... the todatestring() method is especially useful because compliant engines implementing ecma-262 may differ in the string obtained from tostring() for date objects, as the
format is implementation-dependent and simple string slicing approaches may not produce consistent results across multiple engines.
Date.prototype.toString() - JavaScript
date.prototype.tostring() returns a string representation of the date in the
format specified in ecma-262 which can be summarised as: week day: 3 letter english week day name, e.g.
..."sat sep 01 2018 14:53:26 gmt+1400 (lint)" until ecmascript 2018 (edition 9), the
format of the string returned by date.prototype.tostring was implementation dependent.
... therefore it should not be relied upon to be in the specified
format.
... examples using tostring() the following assigns the tostring() value of a date object to myvar: var x = new date(); var myvar = x.tostring(); // assigns a string value to myvar in the same
format as: // mon sep 08 1998 14:36:22 gmt-0700 (pdt) specifications specification ecmascript (ecma-262)the definition of 'date.prototype.tostring' in that specification.
Date.prototype.toTimeString() - JavaScript
the totimestring() method returns the time portion of a date object in human readable
form in american english.
... syntax dateobj.totimestring() return value a string representing the time portion of the given date in human readable
form in american english.
...calling tostring() will return the date
formatted in a human readable
form in american english.
... the totimestring() method is especially useful because compliant engines implementing ecma-262 may differ in the string obtained from tostring() for date objects, as the
format is implementation-dependent; simple string slicing approaches may not produce consistent results across multiple engines.
Function.prototype.bind() - JavaScript
polyfill because older browsers are generally also slower browsers, it is far more critical than most people recognize to create per
formance polyfills to make the browsing experience in outdated browsers slightly less horrible.
... thus, presented below are two options for function.prototype.bind() polyfills: the first one is much smaller and more per
formant, but does not work when using the new operator.
... the second one is bigger and less per
formant, but it permits some usage of the new operator on bound functions.
... if it's absolutely necessary and per
formance is not a concern, a far slower (but more specification-compliant solution) can be found at https://github.com/raynos/function-bind.
Intl.DisplayNames() constructor - JavaScript
for the general
form and interpretation of the locales argument, see the intl page.
...for in
formation about this option, see the intl page.
... style the
formatting style to use, the default is "long".
... "code" "none" examples basic usage in basic use without specifying a locale, a
formatted string in the default locale and with default options is returned.
Intl.Locale - JavaScript
additional in
formation about the locale is stored in the optional extension tags.
... extension tags hold in
formation about locale aspects such as calendar type, clock type, and numbering system type.
... instance properties intl.locale.prototype.basename returns basic, core in
formation about the locale in the
form of a substring of the complete data string.
... intl.locale.prototype.hourcycle returns the time keeping
format convention used by the locale.
Object.setPrototypeOf() - JavaScript
because this feature is a part of the language, it is still the burden on engine developers to implement that feature per
formantly (ideally).
... until engine developers address this issue, if you are concerned about per
formance, you should avoid setting the [[prototype]] of an object.
...* returns @object (if it was a primitive value it will trans
formed into an object).
...function mammalspecies(smammalspecies) { this.species = smammalspecies; } mammalspecies.prototype = new mammal(); mammalspecies.prototype.constructor = mammalspecies; var ocat = new mammalspecies('felis'); console.log(ocat.ismammal); // 'yes' function animal() { this.breathing = 'yes'; } object.appendchain(ocat, new animal()); console.log(ocat.breathing); // 'yes' second example: trans
forming a primitive value into an instance of its constructor and append its chain to a prototype function mysymbol() { this.issymbol = 'yes'; } var nprime = 17; console.log(typeof nprime); // 'number' var oprime = object.appendchain(nprime, new mysymbol()); console.log(oprime); // '17' console.log(oprime.issymbol); // 'yes' console.log(typeof oprime); // 'object' third example: appending a c...
Iteration protocols - JavaScript
in order to be iterable, an object must implement the @@iterator method, meaning that the object (or one of the objects up its prototype chain) must have a property with a @@iterator key which is available via constant symbol.iterator: property value [symbol.iterator] a zero-argument function that returns an object, con
forming to the iterator protocol.
... for...of loops, the spread operator), yield*, and destructuring assignment: for (let value of ['a', 'b', 'c']) { console.log(value); } // "a" // "b" // "c" console.log([...'abc']); // ["a", "b", "c"] function* gen() { yield* ['a', 'b', 'c']; } console.log(gen().next()); // { value: "a", done: false } [a, b, c] = new set(['a', 'b', 'c']); console.log(a); // "a" non-well-
formed iterables if an iterable's @@iterator method doesn't return an iterator object, then it's considered a non-well-
formed iterable.
... using one is likely to result in runtime errors or buggy behavior: let nonwell
formediterable = {}; nonwell
formediterable[symbol.iterator] = () => 1; [...nonwell
formediterable]; // typeerror: [] is not a function iterator examples simple iterator function makeiterator(array) { let nextindex = 0 return { next: function() { return nextindex < array.length ?
... }(); console.log(typeof ageneratorobject.next); // "function", because it has a next method, so it's an iterator console.log(typeof ageneratorobject[symbol.iterator]); // "function", because it has an @@iterator method, so it's an iterable console.log(ageneratorobject[symbol.iterator]() === ageneratorobject); // true, because its @@iterator method returns itself (an iterator), so it's an well-
formed iterable console.log([...ageneratorobject]); // [1, 2, 3] console.log(symbol.iterator in ageneratorobject) // true, because @@iterator method is a property of ageneratorobject specifications specification ecmascript (ecma-262)the definition of 'iteration' in that specification.
import.meta - JavaScript
it contains in
formation about the module, like the module's url.
...normally the left-hand side of the dot is the object on which property access is per
formed, but here import is not really an object.
... examples using import.meta given a module my-module.js <script type="module" src="my-module.js"></script> you can access meta in
formation about the module using the import.meta object.
...port.meta.url).searchparams.get('someurlinfo'); // 5 the same applies when a file imports another: // index.mjs import './index2.mjs?someurlinfo=5'; // index2.mjs new url(import.meta.url).searchparams.get('someurlinfo'); // 5 note that while node.js will pass on query parameters (or the hash) as in the latter example, as of node 14.1.0, a url with query parameters will err when loading in the
form node --experimental-modules index.mjs?someurlinfo=5 (it is treated as a file rather than a url in this context).
throw - JavaScript
if the zip code uses an invalid
format, the throw statement throws an exception by creating an object of type zipcode
formatexception.
... * * accepted
formats for a zip code are: * 12345 * 12345-6789 * 123456789 * 12345 6789 * * if the argument passed to the zipcode constructor does not * con
form to one of these patterns, an exception is thrown.
...n zipcode(zip) { zip = new string(zip); pattern = /[0-9]{5}([- ]?[0-9]{4})?/; if (pattern.test(zip)) { // zip code value will be the first match in the string this.value = zip.match(pattern)[0]; this.valueof = function() { return this.value }; this.tostring = function() { return string(this.value) }; } else { throw new zipcode
formatexception(zip); } } function zipcode
formatexception(value) { this.value = value; this.message = 'does not con
form to the expected
format for a zip code'; this.tostring = function() { return this.value + this.message; }; } /* * this could be in a script that validates address data * for us addresses.
... */ const zipcode_invalid = -1; const zipcode_unknown_error = -2; function verifyzipcode(z) { try { z = new zipcode(z); } catch (e) { if (e instanceof zipcode
formatexception) { return zipcode_invalid; } else { return zipcode_unknown_error; } } return z; } a = verifyzipcode(95060); // returns 95060 b = verifyzipcode(9560); // returns -1 c = verifyzipcode('a'); // returns -1 d = verifyzipcode('95060'); // returns 95060 e = verifyzipcode('95060 1234'); // returns 95060 1234 rethrow an exception you can use throw to rethrow an exception after you catch it.
Template literals (Template strings) - JavaScript
'expander' : 'collapser'}` }`; tagged templates a more advanced
form of template literals are tagged templates.
... the tag function can then per
form whatever operations on these arguments you wish, and return the manipulated string.
... let str = string.raw`hi\n${2+3}!`; // "hi\n5!" str.length; // 6 array.from(str).join(','); // "h,i,\,n,5,!" tagged templates and escape sequences es2016 behavior as of ecmascript 2016, tagged templates con
form to the rules of the following escape sequences: unicode escapes started by "\u", for example \u00a9 unicode code point escapes indicated by "\u{}", for example \u{2f804} hexadecimal escapes started by "\x", for example \xa9 octal literal escapes started by "\0o" and followed by one or more digits, for example \0o251 this means that a tagged template like the following is problematic, beca...
...use, per ecmascript grammar, a parser looks for valid unicode escape sequences, but finds mal
formed syntax: latex`\unicode` // throws in older ecmascript versions (es2016 and earlier) // syntaxerror: mal
formed unicode character escape sequence es2018 revision of illegal escape sequences tagged templates should allow the embedding of languages (for example dsls, or latex), where other escapes sequences are common.
Web app manifests
the web app manifest provides in
formation about a web application in a json text file, necessary for the web app to be downloaded and be presented to the user similarly to a native app (e.g., be installed on the homescreen of a device, providing users with quicker access and a richer experience).
...it is a json-
formatted file, with one exception: it is allowed to contain "//"-style comments.
...click each one for more in
formation about it: background_colorcategoriesdescriptiondirdisplayiarc_rating_idiconslangnameorientationprefer_related_applicationsrelated_applicationsscopescreenshotsserviceworkershort_nameshortcutsstart_urltheme_color example manifest { "name": "hackerweb", "short_name": "hackerweb", "start_url": ".", "display": "standalone", "background_color": "#fff", "description": "a simply readable hacker news app.", "icons": [{ "src": "images/touch/homescreen48.png", "sizes": "48x48", "type": "image/png" }, { "src": "images/touch/homescreen72.png", "sizes": "72x72", "type": "image/png" }, { "src": "images/touch/homescreen96.png", "sizes": "96x96", "type": "image/...
...png" }, { "src": "images/touch/homescreen144.png", "sizes": "144x144", "type": "image/png" }, { "src": "images/touch/homescreen168.png", "sizes": "168x168", "type": "image/png" }, { "src": "images/touch/homescreen192.png", "sizes": "192x192", "type": "image/png" }], "related_applications": [{ "plat
form": "play", "url": "https://play.google.com/store/apps/details?id=cheeaun.hackerweb" }] } deploying a manifest web app manifests are deployed in your html pages using a <link> element in the <head> of a document: <link rel="manifest" href="/manifest.webmanifest"> note: the .webmanifest extension is specified in the media type registration section of the specification (the response of the manifest file should return content-type: applicat...
Progressive web apps (PWAs)
progressive web apps are web apps that use emerging web browser apis and features along with traditional progressive enhancement strategy to bring a native app-like user experience to cross-plat
form web applications.
... progressive web apps are a useful design pattern, though they aren't a
formalized standard.
...it describes the name of the app, the start url, icons, and all of the other details necessary to trans
form the website into an app-like
format.
...in this article we will go even further and improve the per
formance of the app by progressively loading its resources.progressive web app structurenow that we know the theory behind pwas, let's look at the recommended structure of an actual app.
fill - SVG: Scalable Vector Graphics
for animation five elements are using this attribute: <animate>, <animatecolor>, <animatemotion>, <animatetrans
form>, and <set>.
... value freeze (keep the state of the last animation frame) | remove (keep the state of the first animation frame) default value remove animatable no animatetrans
form for <animatetrans
form>, fill defines the final state of the animation.
... specifications specification status comment svg animations level 2the definition of 'trans
form' in that specification.
... legend compatibility unknown compatibility unknown note: for in
formation on using the context-fill (and context-stroke) values from html documents, see the documentation for the non-standard -moz-context-properties property.
href - SVG: Scalable Vector Graphics
fifteen elements are using this attribute: <a>, <animate>, <animatemotion>, <animatetrans
form>, <discard>, <feimage>, <image>, <lineargradient>, <mpath>, <pattern>, <radialgradient>, <script>, <set>, <textpath>, and <use> html, body, svg { height: 100%; } <svg viewbox="0 0 160 40" xmlns="http://www.w3.org/2000/svg"> <a href="https://developer.mozilla.org/"><text x="10" y="25">mdn web docs</text></a> </svg> in svg a for <a>, href defines the location of the referenced object, expressed as a url reference.
... value <url> default value none animatable yes animate, animatemotion, animatetrans
form, set for the <animate>, <animatemotion>, <animatetrans
form>, and <set>, href defines a url referring to the element which is the target of this animation element and which therefore will be modified over time.
...if both, the xlink:href and the href attribute are specified, the latter overrides the
former.
... svg animations level 2the definition of 'href for <animate>, <animatemotion>, <animatetrans
form>, and <set>' in that specification.
to - SVG: Scalable Vector Graphics
five elements are using this attribute: <animate>, <animatecolor>, <animatemotion>, <animatetrans
form>, and <set> html, body, svg { height: 100%; } <svg viewbox="0 0 200 200" xmlns="http://www.w3.org/2000/svg"> <rect x="10" y="10" width="100" height="100"> <animate attributetype="xml" attributename="width" fill="freeze" from="100" to="150" dur="3s"/> </rect> </svg> animate, animatecolor, animatemotion, animatetrans
form for <animate>, <animatecolor>, <animatemotion>, and <animatetrans
form>, to specifies the ending value of the animation.
... editor's draft no change svg animations level 2the definition of 'to for <animate>, <animatecolor>, <animatemotion>, and <animatetrans
form>' in that specification.
... recommendation initial definition for <set> scalable vector graphics (svg) 1.1 (second edition)the definition of 'to for <animate>, <animatecolor>, <animatemotion>, and <animatetrans
form>' in that specification.
... recommendation initial definition for <animate>, <animatecolor>, <animatemotion>, and <animatetrans
form> ...
<feColorMatrix> - SVG: Scalable Vector Graphics
the <fecolormatrix> svg filter element changes colors based on a trans
formation matrix.
... the prime symbol ' is used in mathematics indicate the result of a trans
formation.
...cy="50" r="20" fill="red" fill-opacity="0.5" /> </g> </defs> <use href="#circles" /> <text x="70" y="50">reference</text> <!-- identity matrix --> <filter id="colormethesame"> <fecolormatrix in="sourcegraphic" type="matrix" values="1 0 0 0 0 0 1 0 0 0 0 0 1 0 0 0 0 0 1 0" /> </filter> <use href="#circles" trans
form="translate(0 70)" filter="url(#colormethesame)" /> <text x="70" y="120">identity matrix</text> <!-- combine rgb into green matrix --> <filter id="colormegreen"> <fecolormatrix in="sourcegraphic" type="matrix" values="0 0 0 0 0 1 1 1 1 0 0 0 0 0 0 0 0 0 1 0" /> </filter> <use href="#circles" trans
form="translate(0 140)"...
... filter="url(#colormegreen)" /> <text x="70" y="190">rgbtogreen</text> <!-- saturate --> <filter id="colormesaturate"> <fecolormatrix in="sourcegraphic" type="saturate" values="0.2" /> </filter> <use href="#circles" trans
form="translate(0 210)" filter="url(#colormesaturate)" /> <text x="70" y="260">saturate</text> <!-- huerotate --> <filter id="colormehuerotate"> <fecolormatrix in="sourcegraphic" type="huerotate" values="180" /> </filter> <use href="#circles" trans
form="translate(0 280)" filter="url(#colormehuerotate)" /> <text x="70" y="330">huerotate</text> <!-- luminancetoalpha --> <filter id="colormelta"> <fecolormatrix in="sourcegraphic" type="luminancetoalpha" /> </filter> <use href="#circles" trans
form=...
<linearGradient> - SVG: Scalable Vector Graphics
html,body,svg { height:100% } <svg viewbox="0 0 10 10" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"> <defs> <lineargradient id="mygradient" gradienttrans
form="rotate(90)"> <stop offset="5%" stop-color="gold" /> <stop offset="95%" stop-color="red" /> </lineargradient> </defs> <!-- using my linear gradient --> <circle cx="5" cy="5" r="4" fill="url('#mygradient')" /> </svg> attributes gradientunits this attribute defines the coordinate system for attributes x1, x2, y1, y2 value type: userspaceonuse|objectboundingbox ; def...
...ault value: objectboundingbox; animatable: yes gradienttrans
form this attribute provides additional trans
formation to the gradient coordinate system.
... value type: <trans
form-list> ; default value: identity trans
form; animatable: yes href this attribute defines a reference to another <lineargradient> element that will be used as a template.
...obal event attributes, document element event attributes presentation attributes most notably: clip-path, clip-rule, color, color-interpolation, color-rendering, cursor, display, fill, fill-opacity, fill-rule, filter, mask, opacity, pointer-events, shape-rendering, stroke, stroke-dasharray, stroke-dashoffset, stroke-linecap, stroke-linejoin, stroke-miterlimit, stroke-opacity, stroke-width, trans
form, vector-effect, visibility xlink attributes xlink:href, xlink:title usage notes categoriesgradient elementpermitted contentany number of the following elements, in any order:descriptive elements<animate>, <animatetrans
form>, <set>, <stop> specifications specification status comment scalable vector graphics (svg) 2the definition of '<lineargradient>' in that spec...
<pattern> - SVG: Scalable Vector Graphics
patterntrans
form this attribute contains the definition of an optional additional trans
formation from the pattern coordinate system onto the target coordinate system.
... value type: <trans
form-list>; default value: none; animatable: yes patternunits this attribute defines the coordinate system for attributes x, y, width , and height.
... value type: userspaceonuse|objectboundingbox; default value: objectboundingbox; animatable: yes preserveaspectratio this attribute defines how the svg fragment must be de
formed if it is embedded in a container with a different aspect ratio.
...ibutes most notably: requiredextensions, systemlanguage presentation attributes most notably: clip-path, clip-rule, color, color-interpolation, color-rendering, cursor, display, fill, fill-opacity, fill-rule, filter, mask, opacity, pointer-events, shape-rendering, stroke, stroke-dasharray, stroke-dashoffset, stroke-linecap, stroke-linejoin, stroke-miterlimit, stroke-opacity, stroke-width, trans
form, vector-effect, visibility xlink attributes most notably: xlink:title usage notes categoriescontainer elementpermitted contentany number of the following elements, in any order:animation elementsdescriptive elementsshape elementsstructural elementsgradient elements<a>, <altglyphdef>, <clippath>, <color-profile>, <cursor>, <filter>, <font>, <font-face>, <foreignobject>, <image>, <marker>, <ma...
Other content in SVG - SVG: Scalable Vector Graphics
the specification requests applications to support at least png, jpeg and svg
format files.
...this means, that you can use clips, masks, filters, rotations and all other tools of svg on the content: <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200"> <image x="90" y="-65" width="128" height="146" trans
form="rotate(45)" xlink:href="https://developer.mozilla.org/static/img/favicon144.png"/> </svg> screenshotlive sample embedding arbitrary xml since svg is an xml application, you can of course always embed arbitrary xml anywhere in an svg document.
...actually, in a con
forming viewer it will react in no way at all, the data will simply be omitted.
...another often cited use case is the embedding of
formulas with mathml.
Tutorials
advanced level html
forms
forms are a very important part of the web — these provide much of the functionality you need for interacting with websites, e.g.
...this module gets you started with creating the client-side parts of
forms.
... advanced level using css trans
forms apply rotation, skewing, scaling, and translation using css.
... exploring es6 reliable and in-depth in
formation on ecmascript 2015.
Index - XPath
2 axes trans
forming_xml_with_xslt, xpath, xpath_reference, xslt, xslt_reference for further in
formation on using xpath expressions, please see the for further reading section at the end of trans
forming xml with xslt document.
... 17 functions trans
forming_xml_with_xslt, xpath, xpath_reference, xslt, xslt_reference no summary!
... 29
format-number xslt, xslt_reference the
format-number function evaluates a number and returns a string representing the number in a given
format.
... 55 index index, reference, xpath, xslt found 57 pages: 56 introduction to using xpath in javascript add-ons, dom, extensions, javascript, trans
forming_xml_with_xslt, web development, xml, xpath, xslt this document describes the interface for using xpath in javascript internally, in extensions, and from websites.
Introduction to using XPath in JavaScript - XPath
to match default elements in a non-null namespace, you either have to refer to a particular element using a
form such as ['namespace-uri()='http://www.w3.org/1999/xhtml' and name()='p' and @id='_myid'] (this approach works well for dynamic xpath's where the namespaces might not be known) or use prefixed name tests, and create a namespace resolver mapping the prefix to the namespace.
...this adapter works like the dom level 3 method lookupnamespaceuri on nodes in resolving the namespaceuri from a given prefix using the current in
formation available in the node's hierarchy at the time lookupnamespaceuri is called.
... using xpath functions to reference elements with a default namespace another approach to match default elements in a non-null namespace (and one which works well for dynamic xpath expressions where the namespaces might not be known), involves referring to a particular element using a
form such as [namespace-uri()='http://www.w3.org/1999/xhtml' and name()='p' and @id='_myid'].
...ken holman original document in
formation based upon original document mozilla xpath tutorial original source author: james graham.
Loading and running WebAssembly code - WebAssembly
the newer webassembly.compilestreaming/webassembly.instantiatestreaming methods are a lot more efficient — they per
form their actions directly on the raw stream of bytes coming from the network, cutting out the need for the arraybuffer step.
...}); aside on instantiate() overloads the webassembly.instantiate() function has two overload
forms — the one shown above takes the byte code to compile as an argument and returns a promise that resolves to an object containing both the compiled module object, and an instantiated instance of it.
... note: the second overload
form takes a webassembly.module object as an argument, and returns a promise directly containing the instance object as the result.
...ming(fetch('mymodule.wasm'), importobject) .then(obj => { // call an exported function: obj.instance.exports.exported_func(); // or access the buffer contents of an exported memory: var i32 = new uint32array(obj.instance.exports.memory.buffer); // or access the elements of an exported table: var table = obj.instance.exports.table; console.log(table.get(0)()); }) note: for more in
formation on how exporting from a webassembly module works, have a read of using the webassembly javascript api, and understanding webassembly text
format.
Classes and Inheritance - Archive of obsolete content
to illustrate this, let's define a simple constructor for a class shape: function shape(x, y) { this.x = x; this.y = y; } we can now use this constructor to create instances of shape: let shape = new shape(2, 3); shape instanceof shape; // => true shape.x; // => 2 shape.y; // => 3 the keyword new tells javascript that we are per
forming a constructor call.
...constructors are just ordinary functions, however, so it is perfectly legal to per
form ordinary function calls on them.
...class uses this in
formation to automatically set up the prototype chain of the constructor.
hotkeys - Archive of obsolete content
the following commonly used hotkey combinations will not pass amo review: accel-z, accel-c, accel-x, accel-v or accel-q if you choose to use a key combination that's already defined, choose one which makes sense for the operation it will per
form.
... parameters options : object required options: name type combo string any function key: "f1, f2, ..., f24" or key combination in the
format of 'modifier-key': "accel-s" "meta-shift-i" "control-alt-d" all hotkeys require at least one modifier as well as the key.
... accel: the key used for keyboard shortcuts on the user's plat
form, which is control on windows and linux, and command on mac.
console/traceback - Archive of obsolete content
usage tracebacks are stored in json
format.
... see nsiexception for more in
formation.
...
format(tborexception) given a json representation of the stack or an exception instance, returns a
formatted plain text representation of it, similar to python's
formatted stack tracebacks.
system/runtime - Archive of obsolete content
access to in
formation about firefox's runtime environment.
... for more in
formation, see nsixulruntime.
...this string takes the
form <processor>-<compilerabi>, for example: "x86-msvc" or "ppc-gcc3".
system/xul-app - Archive of obsolete content
experimental in
formation about the application on which your add-on is running.
...for more in
formation, see the mdn documentation.
... plat
formversion the gecko/xulrunner plat
form version.
Chrome Authority - Archive of obsolete content
a future manifest
format may move the declaration portion out to a separate file, to allow for more fine-grained expression of authority.
... commands that build a manifest, like "jpm xpi" or "jpm run", will scan all included modules for use of cc/ci aliases (or the expanded components.classes
forms).
... it will emit a warning if it sees the expanded
forms, or if it sees a use of e.g.
Logging - Archive of obsolete content
because dom objects aren't available to the main add-on code, the sdk provides its own global console object with most of the same methods as the dom console, including methods to log error, warning, or in
formational messages.
... the console.log() method prints an in
formational message: console.log("hello world"); try it out: create a new directory, and navigate to it execute jpm init, accepting all the defaults open "index.js" and add the line above execute jpm run firefox will start, and the following line will appear in the command window you used to execute jpm run: info: hello world!
... see "logging levels" in the console reference documentation for more in
formation on this.
Unit Testing - Archive of obsolete content
a simple base64 module in a web page, you can per
form base64 encoding and decoding using the btoa() and atob() functions.
...so we'll create a base64 module to expose these functions from the plat
form (see creating reusable modules).
...now create a new file called "base64.js", and give it the following contents: const { atob, btoa } = require("resource://gre/modules/services.jsm"); exports.atob = a => atob(a); exports.btoa = b => btoa(b); this code exports two functions, which just call the plat
form's btoa() and atob() functions.
Canvas code snippets - Archive of obsolete content
for general in
formation about using <canvas> see the canvas topic page.
...anvas.getcontext('2d'); if (!canvas2dcontext.prototype.arc) { canvas2dcontext.setup.call(this, this.ctx); } } canvas2dcontext.setup = function() { var methods = ['arc', 'arcto', 'beginpath', 'beziercurveto', 'clearrect', 'clip', 'closepath', 'drawimage', 'fill', 'fillrect', 'filltext', 'lineto', 'moveto', 'quadraticcurveto', 'rect', 'restore', 'rotate', 'save', 'scale', 'settrans
form', 'stroke', 'strokerect', 'stroketext', 'trans
form', 'translate']; var gettermethods = ['createpattern', 'drawfocusring', 'ispointinpath', 'measuretext', // drawfocusring not currently supported // the following might instead be wrapped to be able to chain their child objects 'createimagedata', 'createlineargradient', 'createradialgradient', 'getimagedata', 'putimagedata' ]; ...
...or (let p of props) { let prop = p; canvas2dcontext.prototype[prop] = function(value) { if (value === undefined) return this.ctx[prop]; this.ctx[prop] = value; return this; }; } }; var canvas = document.getelementbyid('canvas'); // use context to get access to underlying context var ctx = canvas2dcontext(canvas) .strokestyle('rgb(30, 110, 210)') .trans
form(10, 3, 4, 5, 1, 0) .strokerect(2, 10, 15, 20) .context; // use property name as a function (but without arguments) to get the value var strokestyle = canvas2dcontext(canvas) .strokestyle('rgb(50, 110, 210)') .strokestyle(); code usable only from privileged code these snippets are only useful from privileged code, such as extensions or privileged apps.
Finding window handles - Archive of obsolete content
note: starting in gecko 17.0, nsibasewindow.nativehandle provides the handle (hwnd [widows], gdkwindow* [linux], nswindow* [macosx],...) of a top-level window, for all plate
forms, as a string.
... when working on windows plat
forms, many apis and frameworks require a window handle (hwnd type).
... since mozilla tries to be as cross-plat
form as possible, it can be difficult to get the handle you need.
Post data to window - Archive of obsolete content
preprocessing post data the apostdata argument of the (global) loaduri(), opendialog(), and (tab)browser.loaduriwithflags() methods expects the post data in the
form of an nsiinputstream (because they eventually call nsiwebnavigation.loaduri()) while post data can be created using nsimimeinputstream.
... most of the time, post data starts as a data string in the
form of "name1=data1&name2=data2&...", so you must convert it before passing the data to one of the methods.
... createinstance(ci.nsimimeinputstream); postdata.addheader("content-type", "application/x-www-
form-urlencoded"); postdata.addcontentlength = true; postdata.setdata(stringstream); // postdata is ready to be used as apostdata argument ...
Common Pitfalls - Archive of obsolete content
t in almost all cases, when creating a uri object you want to use the newuri method on the nsiioservice interface, like so: javascript: try { var ioserv = components.classes["@mozilla.org/network/io-service;1"] .getservice(components.interfaces.nsiioservice); var uriobj = ioserv.newuri(uristring, uricharset, baseuri); } catch (e) { // may want to catch ns_error_mal
formed_uri for some applications } c++: nsresult rv; nscomptr<nsiioservice> ioserv = do_getservice("@mozilla.org/network/io-service;1"); ns_ensure_success(rv, rv); nscomptr<nsiuri> uriobj; rv = ioserv->newuri(uristring, uricharset, baseuri, getter_addrefs(uriobj)); if (ns_failed(rv)) { // may want to handle ns_error_mal
formed_uri for // some applications return rv; } or,...
... how to do security checks for uri loads before loading a uri, one of two security checks needs to be per
formed: if the uri is a string that will be loaded via passing the string to nsiwebnavigation::loaduri, the one must call checkloaduristrwithprincipal and pass the principal that the uri originates from as the first argument and the uri string as the second argument.
...if there is no nsiuri object on hand, it is secure to call checkloaduristrwithprincipal, but this will per
form a more stringent security check than is strictly necessary.
Extension Packaging - Archive of obsolete content
extensions are packaged in a
form of installable bundle which can be downloaded and installed by a user, or provided pre-packaged with an application or by an external program.
... every extension must provide an install.rdf file, which contains metadata about the extension, such as its unique id, version, author, and compatibility in
formation.
... official references for toolkit api structure of an installable bundle: describes the common structure of installable bundles, including extensions, themes, and xulrunner applications extension packaging: specific in
formation about how to package extensions theme packaging: specific in
formation about how to package themes multiple-item extension packaging: specific in
formation about multiple-item extension xpis xul application packaging: specific in
formation about how to package xulrunner applications chrome registration printing in xul apps ...
Interaction between privileged and non-privileged pages - Archive of obsolete content
the in
formation we need for that is contained in evt.target.ownerdocument.
...e("attribute2", "hello world"); document.documentelement.appendchild(element); var evt = document.createevent("events"); evt.initevent("myextensionevent", true, false); element.dispatchevent(evt); } function extensionanswer(evtanswer) { alert(element.getattribute("attribute3") + " " + evtanswer.target.getattribute("part1")); } basic example of similar idea, extension passes in
formation via attributes and fires event on div in page, here.
... var targetdoc = null; function onload() { var iframe = document.getelementbyid("contentiframe"); targetdoc = iframe.contentdocument; iframe.contentwindow.addeventlistener("newstuff", receivestufffrompage, false); } function receivestufffrompage(event) { var uc = geteventdata(event); // uc = unchecked data in
form of e4x xml var stuff = {}; stuff.id = sanitize.integer(uc.@id); stuff.name = sanitize.label(uc.@name); } function sendsomethingtopage (something) { var somethingxml = <something/>; // |something| object as e4x xml somethingxml.@id = something.id; somethingxml.@weight = something.weight; sendmsg("sendsomething", somethingxml); } /** * send msgs from chrome to the page * @param ty...
User Notifications and Alerts - Archive of obsolete content
the main disadvantage of using alerts is that support for the alerts service is not guaranteed for all plat
forms and firefox versions.
... because of the inconsistent support and temporary nature of these alerts, we don't recommend using this service to show in
formation the user needs to know and can't get in any other way.
...notification boxes are a good guideline to what you should aim for: thin, in
formative and easy to dismiss.
Search Extension Tutorial (Draft) - Archive of obsolete content
function setpref(name, value, localized) { // if this is a localized preference, trans
form the value into an // appropriate data: url.
...while the
former is the simpler method, it does not support complex descriptions containing suggestion urls or separate keyword search urls.
...e="text/html" method="get" template="https://www.example.com/search"> <param name="q" value="{searchterms}"/> <param name="source" value="search-box"/> </url> <url type="application/x-moz-keywordsearch" method="get" template="https://www.example.com/search"> <param name="q" value="{searchterms}"/> <param name="source" value="keyword"/> </url> <search
form>https://www.example.com/search</search
form> </searchplugin> bootstrap.js const { classes: cc, interfaces: ci, utils: cu, results: cr } = components; // import the services module.
Making it into a dynamic overlay and packaging it up for distribution - Archive of obsolete content
after that we'll create a contents.rdf file describing the tinderstatus component for the chrome registry and an install.js script to per
form the installation.
...me://tinderstatus/content/tb-success.png"); } statusbarpanel#tinderbox-status[status="testfailed"] { list-style-image: url("chrome://tinderstatus/content/tb-testfailed.png"); } statusbarpanel#tinderbox-status[status="busted"] { list-style-image: url("chrome://tinderstatus/content/tb-busted.png"); } then we need to create two files in the directory, one called contents.rdf which contains in
formation for the chrome registry about the component being installed and one called install.js that contains the code to install the component.
...> install.js, on the other hand, goes into the tinderstatus-installer directory: initinstall( "mozilla tinderstatus extension", "/mozdev/tinderstatus", "0.1"); var installdir = getfolder("chrome","tinderstatus"); setpackagefolder(installdir); adddirectory("tinderstatus"); registerchrome( content | delayed_chrome, getfolder(installdir, "content")); var result = per
forminstall(); if ( result != success ) cancelinstall(result); once all the files are in place, use your zip utility from within the tinderstatus-installer directory to create a zip archive called tinderstatus.xpi with install.js and the entire contents of the tinderstatus/ directory.
Making it into a static overlay - Archive of obsolete content
integrating extensions into the mozilla codebase is beyond the scope of this tutorial, but for more in
formation see mozilla.org's hacking documentation.
... mozilla installer packages are called xpis (pronounced "zippies"), which stands for cross-plat
form installer.
... the packages are just standard zip archives of the files to be installed along with a javascript script that per
forms the installation and some rdf files that describe the components being installed for the chrome registry.
Getting Started - Archive of obsolete content
once you've done this, insert the in
formation as above, and scroll down.
...see install manifests for the reference in
formation about the install.rdf file.
...<a href='javascript:installtrigger.installchrome(installtrigger.skin, "myskin.jar", "my skin theme")'>install my skin</a> if you have jar files on your hard drive and would like to install them, then download/use this
form.
Creating a hybrid CD - Archive of obsolete content
as a cross plat
form product, releases of mozilla on cd should also work on any plat
form.
...css ascii 'r*ch' 'text' "css file" .dtd ascii 'r*ch' 'text' "dtd file" .js ascii 'r*ch' 'text' "javascript file" .mp3 raw 'tvod' 'mpg3' "mpeg file" .mpg raw 'tvod' 'mpeg' "mpeg file" .mpeg raw 'tvod' 'mpeg' "mpeg file" .au raw 'tvod' 'ulaw' "audio file" * ascii 'ttxt' 'text' "text file" for more in
formation about recording cds, see the cd-recordable faq.
... original document in
formation author(s): dawn endico last updated date: may 1, 2001 copyright in
formation: portions of this content are © 1998–2007 by individual mozilla.org contributors; content available under a creative commons license | details.
Creating a Release Tag - Archive of obsolete content
remember to also check out extra mac and win32 files that aren't normally checked out on linux or the tag won't build on those plat
forms.
... cvs co -r netscape_6_2_release mozilla/client.mk cd mozilla gmake -f client.mk checkout create a mini branch for the pull scripts on all three plat
forms so we can change them without changing anything on the original branch.
...-name cvs | xargs -l -p10 cvs tag -l mozilla_0_9_4_1_release >& ../taglog original document in
formation author(s): dawn endico last updated date: november 1, 2005 copyright in
formation: portions of this content are © 1998–2007 by individual mozilla.org contributors; content available under a creative commons license | details.
Getting Started - Archive of obsolete content
directories in \mozilla\chrome\classic\skin\classic there are a number of different directories which contain the skin in
formation for the default packages that come with mozilla.
...skin info when switching skins in mozilla, it displays a preview image and some in
formation about the theme.
...<a href="javascript:installtrigger.installchrome(installtrigger.skin, 'myskin.jar', 'my skin theme')">install my skin</a> if you have jar files on your hard drive and would like to install them, then download/use this
form.
Creating a Skin for Firefox/Getting Started - Archive of obsolete content
once you've done this, insert the in
formation as above, and scroll down.
... see install manifests for the reference in
formation about the install.rdf file.
... <a href='javascript:installtrigger.installchrome(installtrigger.skin, "myskin.jar", "my skin theme")'>install my skin</a> if you have jar files on your hard drive and would like to install them, then download/use this
form.
Developing New Mozilla Features - Archive of obsolete content
our cross-plat
form component model (“xpcom”) is similar to com, but you’ll want to make sure you use it well before going too far with your project.
...help them to realize you’re an in
formed developer who is interested and able to contribute.
... original document in
formation author(s): mitchell baker last updated date: october 30, 2004 copyright in
formation: portions of this content are © 1998–2007 by individual mozilla.org contributors; content available under a creative commons license | details.
Drag and Drop JavaScript Wrapper - Archive of obsolete content
a flavor object has a name, which is a
formatted like a mime type, such as 'text/unicode'.
...var textobserver = { ondrop : function (event, transferdata, session) { event.target.setattribute("value",transferdata.data); } } the flavour system used allows multiple objects of various types to be dragged at once and also allows alternative
forms of the data to be dragged.
... « previousnext » original document in
formation author(s): neil deakin original document: http://xulplanet.com/tutorials/mozsdk/dragwrap.php copyright in
formation: copyright (c) neil deakin ...
Block and Line Layout Cheat Sheet - Archive of obsolete content
nshtmlreflowmetrics the structure that is "filled in" by a frame during reflow, and is used to communicate the frame's desired size in
formation back to its container.
... nsblockreflowstate additional reflow state in
formation that the block frame uses along with nshtmlreflowstate.
... original document in
formation author(s): chris waterson last updated date: december 4, 2004 copyright in
formation: portions of this content are © 1998–2007 by individual mozilla.org contributors; content available under a creative commons license | details.
Document Loading - From Load Start to Finding a Handler - Archive of obsolete content
nsdocumentopeninfo this class encapsulates all the in
formation related to a particular load.
...these api calls will typically pass in a uri string or object to load, and may include in
formation like the name of the target frame (for <a target="something">, e.g.).
... original document in
formation author(s): boris zbarsky last updated date: october 24, 2003 copyright in
formation: portions of this content are © 1998–2007 by individual mozilla.org contributors; content available under a creative commons license | details.
Basics - Archive of obsolete content
class console writes some in
formation to the error console.
...class notifications the notification box appears at the bottom right corner of the browser and displays important in
formation to the user.
... titlethe head of the notification message.string bodythe messagestringfalse iconthe url of an .ico file.string jetpack.notifications.show("hello world");var mybody = " my first message body on jetpack";var myicon = "http://www.mozilla.com/favicon.ico";jetpack.notifications.show({title: "my first message on jetpack", body: mybody, icon: myicon}); class tabs in this class you can find in
formation about the tabs in your firefox window.
Clipboard - Archive of obsolete content
jetpack.import.future("clipboard");// in text
formatjetpack.clipboard.set("hello world");// in other clipboard get(flavor string)returns data to jetpack from the clipboard.
... if flavor is provided, the data is returned in that
format.
...if flavor is provided, the data is returned in that
format.
Clipboard Test - Archive of obsolete content
jetpack.import.future("clipboard");// in text
formatjetpack.clipboard.set("hello world");// in other clipboard get(flavor string)returns data to jetpack from the clipboard.
... if flavor is provided, the data is returned in that
format.
...if flavor is provided, the data is returned in that
format.
Clipboard - Archive of obsolete content
jetpack.import.future("clipboard"); // in text
format jetpack.clipboard.set("hello world"); // in other clipboard get(flavor string)returns data to jetpack from the clipboard.
... if flavor is provided, the data is returned in that
format.
...if flavor is provided, the data is returned in that
format.
Clipboard - Archive of obsolete content
jetpack.import.future("clipboard"); // in text
format jetpack.clipboard.set("hello world"); // in other clipboard get(flavor string)returns data to jetpack from the clipboard.
... if flavor is provided, the data is returned in that
format.
...if flavor is provided, the data is returned in that
format.
Microsummary topics - Archive of obsolete content
for example, the following code snippet installs the microsummary generator from the creating a microsummary tutorial: var generatortext = ' \ <?xml version="1.0" encoding="utf-8"?> \ <generator xmlns="http://www.mozilla.org/microsummaries/0.1" \ name="firefox download count" \ uri="urn:{835daeb3-6760-47fa-8f4f-8e4fdea1fb16}"> \ <template> \ <trans
form xmlns="http://www.w3.org/1999/xsl/trans
form" version="1.0"> \ <output method="text"/> \ <template match="/"> \ <value-of select="id(\'download-count\')"/> \ <text> fx downloads</text> \ </template> \ </trans
form> \ </template> \ <pages> <include>http://(www\.)?spreadfirefox\.com/(index\.php)?</include> </pages> </generator> \ '...
...you may also use another
form appropriate to your extension.
...in the future, firefox may access source urls to download updated versions of generators, so unless you are installing generators which are available from urls, you should not use this
form for your programmatically-installed generators.
FAQ - Archive of obsolete content
is prism a plat
form?
... no, prism is not a plat
form.
... prism is built on top of the mozilla plat
form and its gecko rendering engine, just like mozilla firefox, so it provides the same capabilities to web applications that firefox provides, including support for html, javascript, css, and <canvas>.
Priority Content - Archive of obsolete content
note: use example at sample:original document in
formation to credit original authors.
... book length works in progress: netscape gecko plugin api reference 1.0 original: netscape gecko plugin api reference 1.0 wiki location: gecko plugin api reference migrators: started: core javascript reference 1.5 original: core javascript reference 1.5 wiki location: core javascript 1.5 reference migrators: deb richardson in progress: trans
forming xml: netscape and xslt 1.0 original: trans
forming xml: netscape and xslt 1.0 wiki location: trans
forming xml with xslt migrators: serge k.
...keller mostly completed*: rich-text editing in mozilla 1.3 "mostly completed" means i'm waiting for a location to store example and source files which are required for demoing the in
formation in the articles.
Running Tamarin acceptance tests - Archive of obsolete content
you should set environment variables as described above except for avm, which should be: $ export avm=$tamarin_build_top/plat
form/android/android_shell.py where $tamarin_build_top is your main tamarin repo folder.
...if you've correctly edited and run the android-vars.sh script mentioned on the tamarin build documentation page you should already be pathed to the adb executable in the public sdk/ndk, but if not it exists at /android-public/android-sdk-mac_86/plat
form-tools.
...the shell can be named variously in the build but on the phone the executable must be 'avmshell' $ adb shell 'mkdir /data/local/tamarin' $ adb push avmshell /data/local/tamarin/avmshell $ adb shell 'chmod 777 /data/local/tamarin/avmshell' copy android_runner.sh, if it doesn't already exist on the phone in /data/local/tamarin $ adb push tamarin-redux/plat
form/android/android_runner.sh /data/local/tamarin/android_runner.sh $ adb shell 'chmod 777 /data/loca/android_runner.sh' test it out with a simple .abc or no args for usage (should return exitcode=0) $ tamarin-redux/plat
form/android/android_shell.py hello.abc hello exitcode=0 test it out by retrieving the version in
formation of the shell on the android device $ $avm -dversion shell 1.4 debug build 62...
Treehydra Manual - Archive of obsolete content
instead of representing code in "easy"
form like dehydra, treehydra relies on gimple, the gcc internals "middle-end" intermediate representation.
...in this example, we show how to access the gimple just after function inlining is per
formed.
...thus, top means the analysis has no in
formation about that value or state.
Using addresses of stack variables with NSPR threads on win16 - Archive of obsolete content
this is a cautionary note that may be old in
formation for some of you.
...0 : 1; } this is a completely correct (albeit trivial) program that will run predictably on all nspr plat
forms other than win-16.
... original document in
formation author: larryh@netscape.com, wan teh chang last updated date: december 1, 2004 this note is about writing win16-portable code that uses nspr threads, probably not interesting to today's developers ...
When To Use ifdefs - Archive of obsolete content
there are three major kinds of ifdefs in use in the mozilla tree: plat
form/widget ifdefs, feature ifdefs, and application-specific ifdefs: plat
form/widget ifdefs the mozilla code will frequently need to differentiate between code for different plat
forms or widget sets.
...the only time when they might be a problem is in cross-plat
form extension code and locales: since this code is downloaded on multiple plat
forms, plat
form-specific ifdefs are generally out of the question.
... for an example of plat
form-specfic ifdefs, see nscrt.h.
Anonymous Content - Archive of obsolete content
see section 3 for more in
formation.
... events flow through the final trans
formed content model after all elements have been repositioned through the usage of children tags.
...see insertion points for more in
formation.
Windows Install - Archive of obsolete content
windows install example this example shows the installation of a xpi in which user profile in
formation is contained.
... note the disk space verification, the editing of the windows registry, the writing to the installation log, and the error checking before either per
forminstall or cancelinstall is called.
...t)) { setpackagefolder(fprogram); err = adddirectory("", "6.0.0.2000110801", "bin", // dir name in jar to extract fprogram, // where to put this file // (returned from getfolder) "", // subdir name to create relative to fprogram true); // force flag logcomment("adddirectory() returned: " + err); // check return value if(err == success) { err = per
forminstall(); logcomment("per
forminstall() returned: " + err); } else cancelinstall(err); } else cancelinstall(insufficient_disk_space); // end main ...
execute - Archive of obsolete content
your code must call the per
forminstall method to actually execute the file.
...the following line, for example, passes the "-c" command-line parameter to the executable: err = file.execute(myfile, "-c", true); when you want to pass more than one parameter to the executable itself, however, you must
format the args string in a particular way so that the parameters can be broken up and passed separately as required.
... this means that in order to pass three command-line arguments (-c, -d, and -s) to the executable, you should
format the args string as follows: err = file.execute(myfile, '"-c""-d""-s"', true); //technically, given the rules above, you could also pass the same //arguments with the following line, but the result is much less //readable: err = file.execute(myfile, "\"-c\"\"-d\"\"-s\"", true); also see the note about binaries on the macintosh plat
form in addfile.
patch - Archive of obsolete content
note that the registry pathname is not the location of the software on the computer; it is the location of in
formation about the software inside the client version registry.
...the set of differences is in gdiff
format and is created by the nsdiff utility.
...if per
forminstall indicates that a reboot is necessary to complete the installation, patch may not work in subsequent xpinstall processes until the reboot is per
formed.
Return Codes - Archive of obsolete content
in mozilla/seamonkey, these constants are defined as part of the xpinstall object (
formerly the softwareupdate object in netscape communicator 4.5).
... apple_single_err -218 an error occurred when unpacking a file in applesingle
format.
... -234 expected source directory and got file insufficient_disk_space -235 not enough disk space for install filename_too_long -236 unable_to_locate_lib_function -237 unable_to_load_library -238 chrome_registry_error -239 mal
formed_install -240 key_access_denied -241 access to the registry key has been denied key_does_not_exist -242 registry key does not exist value_does_not_exist -243 registry value does not exist invalid_signature -260 the signature used in the xpi is not valid in...
statedatasource - Archive of obsolete content
« xul reference home statedatasource type: uri chrome xul may specify an rdf datasource to use to store tree state in
formation.
...this in
formation will be remembered for the next time the xul file is opened.
... if you do not specify this attribute, state in
formation will be stored in the local store (rdf:local-store).
Deprecated and defunct markup - Archive of obsolete content
even some of the in
formation on the tags below may be out of date, but is provided here for historical reference and to help anyone who comes across them in old code or documentation.
... (made to support left/top styles, but <stack> can now do as well) <gripper> (inside of <scrollbar><thumb>; not to be used by itself) <listboxbody> (internal use only; part of xbl for <listbox>) <menubutton> (experiment in combining buttons and menus; use <button type> instead) <nativescrollbar> (displayed a native scrollbar; had been for mac only with native themes on) <outliner> (
former name for <tree>; <listbox> had been "<tree>") <popup> (use menupopup) <package> (no longer present but in older documentation) <scrollbarbutton> (button at end of scrollbar; had been only within larger <scrollbar>) so, not deprecated, but internal use only?
... <titledbutton> (attempt to combine text and images before <button>) <toolbarpaletteitem> required to embed non-buttons in customisable toolbars --neil 03 march 2011 <treebody> (old/experimental and unsupported xul tags) lives on as the internal name for the ancestor <treechildren> element --neil 03 march 2011 <treecaption> (old/experimental and unsupported xul tags) <treecolgroup> (
former name for <treecols> <treecolpicker> (internal use only; part of xbl for <tree>) <treefoot> (old/experimental and unsupported xul tags) <treeindentation> (old/experimental and unsupported xul tags) was a part of the old <tree> that predated <outliner> that was not converted to <listbox>--neil 03 march 2011 <treeicon> (old/experimental and unsupported xul tags) <treerows> (internal...
Dynamically modifying XUL-based user interface - Archive of obsolete content
it explains the concept of dom documents, demonstrates a few simple examples of using dom calls to per
form basic manipulations on a document, and then demonstrates working with anonymous xbl content using mozilla-specific methods.
...todo: simple example of a xul document and a tree you can think of a document as an in-memory representation of valid html or well-
formed xml such as xhtml or xul.
...for example: // gets the first anonymous child of the given node document.getanonymousnodes(node)[0]; // returns a nodelist of anonymous elements with anonid attribute equals el1 document.getanonymouselementbyattribute(node, "anonid", "el1"); see getanonymousnodes and getanonymouselementbyattribute in the xbl reference for more in
formation.
Writing to Files - Archive of obsolete content
file and stream guide: [ nsiscriptableio | accessing files | getting file in
formation | reading from files | writing to files | moving, copying and deleting files | uploading and downloading files | working with directories ] important note: the pages from the file and stream guide use the io object (nsiscriptableio), which was not available in any released version of the plat
form (pending some fixes).
...the write32 method per
forms a similar operation except that the value 1000 is written using four bytes, padding the unused bits with zeroes.
... stream.write16(1000); stream.write32(1000); all values are read in big endian
form, which means that integers are stored in the file with their higher bits first.
Moving, Copying and Deleting Files - Archive of obsolete content
file and stream guide: [ nsiscriptableio | accessing files | getting file in
formation | reading from files | writing to files | moving, copying and deleting files | uploading and downloading files | working with directories ] important note: the pages from the file and stream guide use the io object (nsiscriptableio), which was not available in any released version of the plat
form (pending some fixes).
...nsifile.copyto() of the
former is called, passing the latter as the first argument to nsifile.copyto().
...for more in
formation about nsifile.append(), see working with directories.
MenuButtons - Archive of obsolete content
in this situation, this menuitem per
forms the same operation as pressing the regular part of the button.
... the effect is a button that per
forms one command with a menu for other commands.
... <menuitem label="save this document" default="true"/> see indicating_the_default_item for more in
formation about the default attribute.
Panels - Archive of obsolete content
for more in
formation about positioning the popup, see positioning popups.
...for more in
formation about this attribute and other possible values that can be used, see positioning popups.
... for more in
formation about these types of panels, see floating panels.
Building Menus With Templates - Archive of obsolete content
this allows for better per
formance as the entire content of a complex menu does not need to be created until the user needs to use the menu.
...note that the generated content does not get removed again when the menu is closed again; this extra feature of menus is only intended to be a per
formance enhancement to speed up the time it takes to display a window by avoiding extra generation that can be put off until later.
...you can actually do this, however, you no longer receive the per
formance benefit as the entire content will be generated right away.
Building Trees - Archive of obsolete content
the per
formance advantage is possible since trees only display text.
... as a result, the builder only has a few pieces of in
formation to keep track of.
...however, the tree builder requires a very specific
form to the action body.
Introduction - Archive of obsolete content
the template builder loads the datasource, per
forms a query on the datasource and generates content based on the results in combination with the template.
...once some data starts arriving, the template builder scans its in
formation to see if some results can be created.
...the local store is a datasource which is usually used to hold state in
formation such as window sizes, which columns in a tree are showing, and which tree items are open.
Template and Tree Listeners - Archive of obsolete content
the tree widget in
forms the view when certain operations are per
formed that might affect the data.
...the tree builder will handle the adding or removing of rows, but will call the observer so that it can per
form some task.
...the observer is always invoked before the appropriate operation is per
formed.
Adding Style Sheets - Archive of obsolete content
style sheets a style sheet is a file which contains style in
formation for elements.
...the style sheet contains in
formation such as the fonts, colors, borders, and size of elements.
...in mozilla, this will be translated as the file global.css, which contains default style in
formation for xul elements.
Additional Install Features - Archive of obsolete content
you may wish to per
form some more elaborate processing during the installation.
...for example, you might put the following as the last section of your script: if (getlasterror() == success) { per
forminstall(); } else { cancelinstall(); } error codes that could be returned by getlasterror() are listed in the mozilla source file nsinstall.h.
... during installation, a log file is created that contains the operations that are per
formed.
Introduction to RDF - Archive of obsolete content
rdf (resource description framework) is a
format that can be used to store resources such as bookmarks or mail.
... alternatively, data in other
formats can be used and code written that will read the file and create rdf data from it.
... for more in
formation about rdf, see the rdf specification.
Localization - Archive of obsolete content
that is, you should save them in utf-8
format (without bom).
... for more in
formation, see mozilla language packs.
...to do this, add a line of the following
form somewhere near the top of the xul file: <!doctype window system "chrome://findfile/locale/findfile.dtd"> this line specifies that the url indicated is to be used as a dtd for the file.
Manipulating Lists - Archive of obsolete content
the
former returns the index of the selected item while the latter returns the selected element.
...typically, you will use these properties to iterate over the list and per
form some operation for each item.
...thus, the
former function is used to scroll to a specific row while the latter is used just to make sure that a row is visible.
Open and Save Dialogs - Archive of obsolete content
the appearance of the dialog will be different for each type and will vary on each plat
form.
...the manner in which this is done is plat
form specific.
... on some plat
forms, each filter will be separate and the user can choose between html files and image files.
Persistent Data - Archive of obsolete content
one possibility would be to write a script to collect in
formation about what you would like to save and then save it to a file.
...the in
formation is collected and stored in a rdf file (localstore.rdf) in the same directory as other user preferences.
... it holds state in
formation about each window.
XUL element attributes - Archive of obsolete content
a context-click varies on each plat
form.
...this results in a per
formance enhancement, but you will not be able to use the dom functions to retrieve the tree rows.
... see the pref system documentation for more in
formation.
XUL Template Primer - Bindings - Archive of obsolete content
see the rdf/xml file friends.rdf, below, a simple database with name and address in
formation for some of my good friends.
...unlike the <conditions>, bindings do not affect whether or not a rule matches: they just "pull through" additional in
formation if it is available.
... original document in
formation author: chris waterson ...
XUL Coding Style Guidelines - Archive of obsolete content
introduction xul, pronounced as "zool", stands for "xml-based user interface language", is a cross plat
form way of describing user interface.
...they are placed above the actual entity string in the
format: <!-- localization note (entity.name): content --> where the <var>entity.name</var> is the entity name (id) for the string (entity value) to be localized, and the content provides helpful hints to the localizers.
... author: tao cheng newsgroup discussion mailing list original document in
formation author(s): tao cheng last updated date: december 10, 2004 copyright in
formation: copyright (c) tao cheng ...
command - Archive of obsolete content
more in
formation is available in the xul tutorial.
...in the case of
form elements, it will not be submitted.
... the disabled attribute is allowed only for
form controls.
keyset - Archive of obsolete content
more in
formation is available in the xul tutorial.
...in the case of
form elements, it will not be submitted.
... the disabled attribute is allowed only for
form controls.
listcell - Archive of obsolete content
depending on the plat
form and theme being used, some elements will have set a maximum width so they will always appear cropped.
...in the case of
form elements, it will not be submitted.
... the disabled attribute is allowed only for
form controls.
panel - Archive of obsolete content
some features may work, but only on some plat
forms.
...if it is not set, it defaults to the plat
form behavior.
...if this attribute is not set, the popup window level depends on the plat
form.
preference - Archive of obsolete content
more in
formation is available in the preferences system article.
...in the case of
form elements, it will not be submitted.
... the disabled attribute is allowed only for
form controls.
scale - Archive of obsolete content
in the case of
form elements, it will not be submitted.
... the disabled attribute is allowed only for
form controls.
...if not specified, the default value is used, which varies for each plat
form.
tabs - Archive of obsolete content
more in
formation is available in the xul tutorial.
...in the case of
form elements, it will not be submitted.
... the disabled attribute is allowed only for
form controls.
tooltip - Archive of obsolete content
more in
formation is available in the xul tutorial.
...crop, default, label, noautohide, onpopuphidden, onpopuphiding, onpopupshowing, onpopupshown, page, position properties accessibletype, label, popupboxobject, position, state methods hidepopup, moveto, openpopup, openpopupatscreen, showpopup, sizeto examples <tooltip id="moretip" orient="vertical" style="background-color: #33dd00;"> <label value="click here to see more in
formation"/> <label value="really!" style="color: red;"/> </tooltip> <vbox> <button label="simple" tooltiptext="a simple popup"/> <button label="more" tooltip="moretip"/> </vbox> attributes crop type: one of the values below if the label of the element is too big to fit in its given space, the text will be cropped on the side specified by the crop attribute.
... depending on the plat
form and theme being used, some elements will have set a maximum width so they will always appear cropped.
XUL - Archive of obsolete content
the term xul is sometimes used to refer to the whole mozilla plat
form (e.g.
... xul applications are applications using xul and other components of the plat
form).
... drag and drop how to per
form drag and drop operations.
Building XULRunner with Python - Archive of obsolete content
you should also read the the developer documentation on source code and building as wells as pyxpcom xulrunner with python promises to be a good plat
form for accessibility projects and both jambu alternative input and the iaccessible2 test tool are using it.
...the matching plat
form sdk is also needed and for msvc71 that is .net framework sdk 1.1.
... pause exit /b 1 ) start "xulrunner with python" "%moz_bin%\xulrunner.exe" -app application.ini %opts% exit /b 0 see xulrunner:deploying_xulrunner_1.8 for general in
formation.
Deploying XULRunner - Archive of obsolete content
if your installer is capable of determining whether or not xulrunner has been registered on the system you could per
form the check and register the appropriate version if necessary.
...registration and app installation are per
formed with command line switches as outlined in the xulrunner section of article command line options.
...the responsibility still lies with the developer to provide the correct version of xulrunner per plat
form.
nsIContentPolicy - Archive of obsolete content
type_xslt 18 indicates a style sheet trans
formation.
...a guess for the requested content's mime type, based on in
formation available to the request initiator (e.g., an object's type attribute); does not reliably reflect the actual mime type of the requested content.
...shouldprocess() will be called once all the in
formation passed to it has been determined about the resource, typically after part of the resource has been loaded.
2006-11-03 - Archive of obsolete content
originally posted on november 1st: dale dale has set up a windows machine in order to per
form mozilla builds but has been unsuccessful to do so.
... fix host_libidl_libs originally posted on october 29th: gery gery claims to have discovered a problem when he compiles mozilla across different plat
forms when pkg_config is used.
...paul explains that his goal is to do only singular sets of builds where the coverage of all the plat
forms is constant.
2006-11-24 - Archive of obsolete content
if you build dependencies with non-default toolkit or on a non tier-1 plat
form you'll need to disable svg in your mozconfig.
... gecko 1.9 intl rendering pe
formance november 20th: boris zbarskyannounced that: we need to create an intl per
formance page set or multiple intl per
formance page sets and run at least the pageload tests for all of these pagesets, and preferably also some sort of dhtml tests using pages of the different types.
... he stated that the goal here is that once the tests are set up we can do a gecko 1.8 baseline so that we know what our per
formance goals for gecko 1.9 are.
Extentsions FAQ - Archive of obsolete content
it might be an option to stick with it and per
form stuff when it comes to application shutdown.
... how to attach in
formation using the stringproperties of an imap message with out changing the properties?
... why there are some rss feeds that do not appear as livemarks when bookmarked even though the necessary tags for the feed to appear as a livemark are seemingly present and properly
formatted in the feeds source?
Monitoring plugins - Archive of obsolete content
runtime data the runtime in
formation reported is always in fractions of a second.
...you can find more in
formation on the observer service here and here.
... unregister: function() { if (this.registered == true) { var observerservice = components.classes["@mozilla.org/observer-service;1"] .getservice(components.interfaces.nsiobserverservice); observerservice.removeobserver(this, "experimental-notify-plugin-call"); this.registered = false; } } } additional resources more in
formation on the observer service: nsiobserverservice nsiobserver ...
NPEmbedPrint - Archive of obsolete content
« gecko plugin api reference « plug-in side plug-in api summary substructure of npprint that contains plat
form-specific in
formation used during embedded mode printing.
... syntax typedef struct _npembedprint { npwindow window; void* plat
formprint; /* plat
form-specific */ } npembedprint; fields the data structure has the following fields: window the npwindow the plug-in should use for printing.
... plat
formprint additional plat
form-specific printing in
formation.
NPFullPrint - Archive of obsolete content
« gecko plugin api reference « plug-in side plug-in api summary substructure of npprint that contains plat
form-specific in
formation used during full-page mode printing.
... syntax typedef struct _npfullprint { npbool pluginprinted; /* true: print fullscreen */ npbool printone; /* true: print one copy */ /* to default printer */ void* plat
formprint; /* plat
form-specific */ } npfullprint; fields the data structure has the following fields: pluginprinted determines whether the plug-in prints in full-page mode.
... plat
formprint plat
form-specific printing in
formation.
NPPrintCallbackStruct - Archive of obsolete content
« gecko plugin api reference « plug-in side plug-in api summary contains in
formation required by the plat
formprint field of the npembedprint structure during embedded mode printing on unix systems.
... description callback structures are used to pass plat
form-specific in
formation.
...this in
formation is required by the plat
formprint field of the npembedprint structure during embedded mode printing.
NPSavedData - Archive of obsolete content
« gecko plugin api reference « plug-in side plug-in api summary block of instance in
formation saved after the plug-in instance is deleted; can be returned to the plug-in to restore the data in future instances of the plug-in.
... description the npsaveddata object contains a block of per-instance in
formation that the browser saves after the instance is deleted.
... this in
formation can be returned to another instance of the same plug-in if the user returns to the web page that contains it.
Supporting private browsing in plugins - Archive of obsolete content
firefox 3.5 introduced private browsing, a mode in which potentially private in
formation is not recorded in any way.
... plugins should be updated to monitor the state of private browsing mode and only save private in
formation when private browsing is disabled.
... potentially private in
formation may include (but is not necessarily limited to) history in
formation for downloaded data.
Writing a plugin for Mac OS X - Archive of obsolete content
notes and tips this section provides some additional in
formation that may be helpful if you're trying to get a plugin building on your own.
... info.plist the plugin communicates its mime and filename extension in
formation using the info.plist file, which is packaged in the plugin bundle.
... if you want to implement your plugin in c++ or objective-c++, you need to tell the compiler to export them in c
format by using extern "c" in the header, like this: #pragma gcc visibility push(default) extern "c" { nperror np_initialize(npnetscapefuncs *browserfuncs); nperror np_getentrypoints(nppluginfuncs *pluginfuncs); void np_shutdown(void); } #pragma gcc visibility pop you can check to be sure your symbols are visible and in standard c
format by using the nm utility provided among the mac os x d...
Syndicating content with RSS - Archive of obsolete content
rss is a tool which helps to syndicate your content by organizing it into a
form that's easy for machines to parse and reuse.
...(other sizes and colors, along with their source files, are available too.) advanced syndication techniques although this advanced technique for syndication is not required, support of this is recommended, especially for web sites and applications with high per
formance needs.
...this technique takes advantage by having the client prefer rss (over html or other
formats).
What is RSS - Archive of obsolete content
(although rdf-based rss
formats exist, namely the deprecated rss 0.90 and rss 1.0.) common uses of rss syndication are for the syndication of news web sites, of blogs, of internet radio, and of internet television.
...it wasn't really a
format for syndication, but was a
format for providing a summary of a website.
...like rss 0.90, netscape's rss 0.91 was also a
format for providing a summary of a website, and not really a syndication
format (as it is today).
Proposal - Archive of obsolete content
name description status easy news topics easy news topics (ent) is intended to be a very simple standard for describing how topic in
formation can be introduced into an rss2.0 news feed.
...and lets you specifies a specific rendering trans
form (xslt) to be used when rendering the feed in newsgator for outlook.
... the trans
form must already exist on the machine running newsgator; stylesheets will not be downloaded or installed automatically.
Digital Signatures - Archive of obsolete content
the keys are related mathematically, but the parameters are chosen so that calculating the private key from the public key is either impossible or prohibitively expensive.the encrypted hash, along with other in
formation, such as the hashing algorithm, is known as a digital signature.
...(in
formation about the hashing algorithm used is sent with the digital signature, although this isn't shown in the figure.) finally, the receiving software compares the new hash against the original hash.
... original document in
formation author(s): ella deon lackey last updated date: 2012 copyright in
formation: © 2012 red hat, inc.
Vulnerabilities - Archive of obsolete content
another example is a race condition error that allows the attacker to per
form a specific action with elevated privileges.
...the arp cache uses that in
formation to provide a useful service—to enable sending data between devices within a local network.
...setting this to 1 would be the most secure setting against password guessing attacks, but it would also cause legitimate users to be locked out after mistyping a password once, and it would also permit attackers to per
form denial-of-service attacks against users more easily by generating a single failed login attempt for each user account.
The Basics of Web Services - Archive of obsolete content
web services exchange data from a server to a client, using an xml
format to send requests, so both the server and the client can understand each other.
... a better way to understand a web service is to compare it to a html
form communication with a server side script (such as php or asp) to post and send data.
... both web services and
forms send and receive requests.
New in JavaScript 1.8.5 - Archive of obsolete content
bug 510537 date.prototype.tojson() returns a json
format string for a date object.
... changed functionality in javascript 1.8.5 iso 8601 support in date: the date object's parse() method now supports simple iso 8601
format date strings.
...some in
formation about why: spidermonkey change du jour: the special __parent__ property has been removed bug 551529 & bug 552560.
Archived JavaScript Reference - Archive of obsolete content
this operation leaves oldbuffer in a detached state.date.prototype.tolocale
format()the non-standard tolocale
format() method converts a date to a string using the specified
formatting.
... intl.datetime
format is an alternative to
format dates in a standards-compliant way.
...to make the function a legacy generator, the function body should contain at least one yield expression.microsoft javascript extensionsmicrosoft browsers (internet explorer, and in a few cases, microsoft edge) support a number of special microsoft extensions to the otherwise standard javascript apis.new in javascriptthis chapter contains in
formation about javascript's version history and implementation status for mozilla/spidermonkey-based javascript applications, such as firefox.number.tointeger()the number.tointeger() method used to evaluate the passed value and convert it to an integer, but its implementation has been removed.object.getnotifier()the object.getnotifer() method was used to create an object that allows to synthetically ...
MSX Emulator (jsMSX) - Archive of obsolete content
in its present
form, it should be able to run any program or game developed for msx 1.0.
...as you may have realized, many challenges on per
formance are faced when developing in javascript.
...how to help lots of work to optimize the per
formance and add msx 2.0, 2.0+ and turbor features are still necessary.
Writing JavaScript for XHTML - Archive of obsolete content
for example: var string = '<div xmlns="http://www.w3.org/999/xhtml"><h1>hello world!</h1></div>'; var parser = new domparser(); var documentfragment = parser.parsefromstring(string, "text/xml"); body.appendchild(documentfragment); // assuming 'body' is the body element but be aware that if your string is not well-
formed xml (e.g., you have an & where it should not be), then this method will crash, leaving you with a parser error.
... given the direction away from
formatting attributes and the possibility of xhtml becoming eventually more prominent (or at least the document author having the possibility of later wanting to make documents available in xhtml for browsers that support it), one may wish to avoid features which are not likely to stay compatible into the future.
... solution: avoid html-specific dom the html dom , even though it is compatible with xhtml 1.0, is not guaranteed to work with future versions of xhtml (perhaps especially the
formatting properties which have been deprecated as element attributes).
RFE to the Custom Controls - Archive of obsolete content
introduction if you have a custom control that you believe will help fulfill the needs of
form authors or other custom controls authors, please file it here.
...note: xul is a feature of mozilla only and custom control authors should be aware their controls won't work on other browser plat
forms.
... output should show data in current locale
format the bug 331585 address the issue.
Fixing Incorrectly Sized List Item Markers - Archive of obsolete content
in fact, the markers were set to be a uni
form size that did not change to match the content of the list items, so in rare cases the marker might actually appear to be smaller.
... related links bug 110360 bug 97351 original document in
formation author(s): eric a.
... meyer, netscape communications last updated date: published 04 oct 2002; revised 07 mar 2003 copyright in
formation: copyright © 2001-2003 netscape.
Obsolete: XPCOM-based scripting for NPAPI plugins - Archive of obsolete content
the old plugin api call npp_getvalue is used to retrieve this in
formation from the plugin.
...e == nppvpluginscriptableiid) { nsiid* ptr = (nsiid *)npn_memalloc(sizeof(nsiid)); *ptr = scriptableiid; *(nsiid **)value = ptr; } return rv; } nperror npp_destroy (npp instance, npsaveddata** save) { if(instance == null) return nperr_invalid_instance_error; // release the scriptable object ns_if_release(instance->pdata); } original document in
formation author(s): arun k.
... ranganathan last updated date: october 26, 2001 copyright in
formation: portions of this content are © 1998–2007 by individual mozilla.org contributors; content available under a creative commons license | details.
Game monetization - Game development
video ads are getting more and more popular, especially in the
form of a pre-roll — they are shown at the beginning of your game while it's still loading.
...some publisher websites have that in
formation easily available, while some others are harder to find.
...you can't sell it again in any
form while that publisher has the rights— that's why exclusive deals are worth quite a lot of money.
Unconventional controls - Game development
modern smart tvs can handle html5 games, because they have a built-in browser that can be used as a gaming plat
form.
...first, we add a <script> tag with the url pointing at this file, and add <div id="output"></div> just before the closing </body> tag for outputting diagnostic in
formation.
...we next add these lines after all the event listeners for keyboard and mouse, but before the draw method: var todegrees = 1 / (math.pi / 180); var horizontaldegree = 0; var verticaldegree = 0; var degreethreshold = 30; var grabstrength = 0; right after that we use the leap's loop method to get the in
formation held in the hand variable on every frame: leap.loop({ hand: function(hand) { horizontaldegree = math.round(hand.roll() * todegrees); verticaldegree = math.round(hand.pitch() * todegrees); grabstrength = hand.grabstrength; output.innerhtml = 'leap motion: <br />' + ' roll: ' + horizontaldegree + '° <br />' + ' pitch: ' + verticalde...
Implementing game control mechanisms - Game development
one of html5's main advantages as a game development plat
form is the ability to run on various plat
forms and devices.
... in the following articles we will show how to implement various different control mechanisms for captain rogers to support different plat
forms — from touch on mobile, through keyboard/mouse/gamepad on desktop, to more unconventional ones like tv remote, shouting to or waving your hand in front of the laptop, or squeezing bananas.
... the articles javascript is the perfect choice for mobile gaming because of html5 being truly multiplat
form; all of the following articles focus on the apis provided for interfacing with different control mechanisms: mobile touch controls — the first article will kick off with touch, as the mobile first approach is very popular.
Implementing controls using the Gamepad API - Game development
the second, hidden "change" implementation is the ability to trans
form the static fridge into a full-blown moving, shooting and eating machine.
... gamepad object there's lots of useful in
formation contained in the gamepad object, with the states of buttons and axes being the most important: id: a string containing in
formation about the controller.
...the discussion is still ongoing as to whether they should be put back, and in what
form.
Square tilemaps implementation: Scrolling maps - Game development
note: when writing this article, we assumed previous reader knowledge of canvas basics such as how get a 2d canvas context, load images, etc., which is all explained in the canvas api tutorial, as well as the basic in
formation included in our tilemaps introduction article.
... the camera the camera is an object that holds in
formation about which section of the game world or level is currently being shown.
... cameras can either be free-
form, controlled by the player (such as in strategy games) or follow an object (such as the main character in plat
form games.) regardless of the type of camera, we would always need in
formation regarding its current position, viewport size, etc.
Techniques for game development - Game development
using async scripts for asm.js especially when creating medium to large-sized games, async scripts are an essential technique to take advantage of, so that your game's javascript can be compiled off the main thread and be cached for future game running, resulting in a significant per
formance improvement for your users.
... optimizing startup per
formance how to make sure your game starts up quickly, smoothly, and without appearing to lock up the user's browser or device.
...this article provides a detailed guide to implementing audio for web games, looking at what works currently across as wide a range of plat
forms as possible.
Paddle and keyboard controls - Game development
we will need the following: two variables for storing in
formation on whether the left or right control button is pressed.
...ht" || e.key == "arrowright") { rightpressed = true; } else if(e.key == "left" || e.key == "arrowleft") { leftpressed = true; } } function keyuphandler(e) { if(e.key == "right" || e.key == "arrowright") { rightpressed = false; } else if(e.key == "left" || e.key == "arrowleft") { leftpressed = false; } } when we press a key down, this in
formation is stored in a variable.
...from that you can get useful in
formation: the key holds the in
formation about the key that was pressed.
Visual-js game engine - Game development
full name : visual-js gui for windows multiplat
form 2d game engine creator : nikola lukic 2017 2018 open source visual-js project parts : -2d part : this is javascript game engine (server part node.js / client part js) js framework with windows gui editor and game instance creator.
... add->new game object (
form dialog for define type of new game object ) add->quick code (make your work faster - add usually code blocks) resources - explorer view for images and audios , you can drag or edit also need to execute node build_resources for creating resources object for engine.
... npm install typescript npm i clean-webpack-plugin --save-dev npm i html-webpack-plugin --save-dev possible fix : npm i webpack --save-dev npm i extract-text-webpack-plugin --save-dev fix code
format : tslint -c tslint.json 'src/**/*.ts' --fix download project link : download link from bitbucket.
Accessibility tree (AOM) - MDN Web Docs Glossary: Definitions of Web-related terms
the accessibility tree, or accessibility object model (aom), contains accessibility-related in
formation for most html elements.
...browsers then create an accessibility tree based on the dom tree, which is used by plat
form-specific accessibility apis for assistive technologies, such as screen readers.
... additionally, the accessibility tree often contains in
formation on what can be done with an element: a link can be followed, a text input can be typed into, etc.
Decryption - MDN Web Docs Glossary: Definitions of Web-related terms
decryption is a cryptographic primitive: it trans
forms a ciphertext message into plaintext using a cryptographic algorithm called a cipher.
... like encryption, decryption in modern ciphers is per
formed using a specific algorithm and a secret, called the key.
... decryption is the reverse of encryption and if the key stays secret, decryption without knowing the specific secret, decryption is mathematically hard to per
form.
Effective connection type - MDN Web Docs Glossary: Definitions of Web-related terms
effective connection type (ect) refers to the measured network per
formance, returning a cellular connection type, like 3g, even if the actual connection is tethered broadband or wifi, based on the time between the browser requesting a page and effective type of the connection.
... effectivetype is a property of the network in
formation api, exposed to javascript via the navigator.connection object.
... to see your effective connection type, open the console of the developer tools of a supporting browser and enter the following: navigator.connection.effectivetype; see also: network in
formation api networkin
formation networkin
formation.effectivetype ...
Encryption - MDN Web Docs Glossary: Definitions of Web-related terms
encryption is a cryptographic primitive: it trans
forms a plaintext message into a ciphertext using a cryptographic algorithm called a cipher.
... encryption in modern ciphers is per
formed using a specific algorithm and a secret, called the key.
... without knowing the secret, the reverse operation, decryption, is mathematically hard to per
form.
HTML - MDN Web Docs Glossary: Definitions of Web-related terms
brief history in 1990, as part of his vision of the web, tim berners-lee defined the concept of hypertext, which berners-lee
formalized the following year through a markup mainly based on sgml.
... the ietf began
formally specifying html in 1993, and after several drafts released version 2.0 in 1995.
... you can extend html tags with attributes, which provide additional in
formation affecting how the browser interprets the element: an html file is normally saved with an .htm or .html extension, served by a web server, and can be rendered by any web browser.
MVC - MDN Web Docs Glossary: Definitions of Web-related terms
so for example, our shopping list could have input
forms and buttons that allow us to add or delete items.
... you might however also want to just update the view to display the data in a different
format, e.g., change the item order to alphabetical, or lowest to highest price.
... in the early days of the web, mvc architecture was mostly implemented on the server-side, with the client requesting updates via
forms or links, and receiving updated views back to display in the browser.
Navigation directive - MDN Web Docs Glossary: Definitions of Web-related terms
csp navigation directives are used in a content-security-policy header and govern to which location a user can navigate to or submit a
form to, for example.
... list of csp navigation directives
form-action restricts the urls which can be used as the target of a
form submissions from a given context.
... navigate-to restricts the urls to which a document can initiate navigation by any means, including <
form> (if
form-action is not specified), <a>, window.location, window.open, etc.
Page load time - MDN Web Docs Glossary: Definitions of Web-related terms
let time = per
formance.timing; let pageloadtime = time.loadeventstart - time.navigationstart; while page load time 'sounds' like the perfect web per
formance metric, it isn't.
...in addition, web per
formance isn't just about when the load event happens.
... it's also about perceived per
formance, responsiveness, jank and jitter.
RTF - MDN Web Docs Glossary: Definitions of Web-related terms
rtf (rich text
format) is a plain-text-based file
format with support for
formatting instructions (like bold or italic).
... three programmers in the microsoft word team created rtf in the 1980s, and microsoft continued to develop the
format until 2008.
... learn more general knowledge rich text
format on wikipedia technical reference final specification from microsoft ...
SVG - MDN Web Docs Glossary: Definitions of Web-related terms
scalable vector graphics (svg) is a 2d vector image
format based on an xml syntax.
... as a vector image
format, svg graphics can scale infinitely, making them invaluable in responsive design, since you can create interface elements and graphics that scale to any screen size.
... learn more general knowledge svg on wikipedia learning svg w3.org's svg primer technical in
formation svg documentation on mdn latest svg specification ...
Search engine - MDN Web Docs Glossary: Definitions of Web-related terms
a search engine is a software system that collects in
formation from the world wide web and presents it to users who are looking for specific in
formation.
...a web site owner can exclude areas of the site from being accessed by a search engine's web crawler (or spider), by defining "robot exclusion" in
formation in a file named robots.txt.
... indexing: associating keywords and other in
formation with specific web pages that have been crawled.
Time to interactive - MDN Web Docs Glossary: Definitions of Web-related terms
time to interactive (tti) is a non-standardized web per
formance 'progress' metric defined as the point in time when the last long task finished and was followed by 5 seconds of network and main thread inactivity.
... caveat: tti is derived by leveraging in
formation from the long tasks api.
... although available in some per
formance monitoring tools, tti is not a part of any official web specification at the time of writing.
JPEG - MDN Web Docs Glossary: Definitions of Web-related terms
jpeg compression is composed of three compression techniques applied in successive layers, including chrominance subsampling, discrete cosine trans
formation and quantization, and run-length delta & huffman encoding.
... chroma subsampling involves implementing less resolution for chroma in
formation than for luma in
formation, taking advantage of the human visual system's lower acuity for color differences than for luminance.
... a discrete cosine trans
form expresses a finite sequence of data points in terms of a sum of cosine functions oscillating at different frequencies.
MDN Web Docs Glossary: Definitions of Web-related terms
hsts html html5 http http header http/2 http/3 https hyperlink hypertext i i18n iana icann ice ide idempotent identifier idl ietf iife imap immutable index indexeddb in
formation architecture inheritance input method editor instance internationalization internet intrinsic size ip address ipv4 ipv6 irc iso isp itu j jank java javascript jpeg jquery json k key ...
... object object reference oop opengl openssl opera browser operand operator origin ota owasp p p2p pac packet page load time page prediction parameter parent object parse parser pdf perceived per
formance percent-encoding php pixel placeholder names plaintext png polyfill polymorphism pop3 port prefetch preflight request prerender presto primitive privileged privileged code progressive enhancement progressive web apps ...
... (user datagram protocol) ui undefined unicode uri url urn usenet user agent utf-8 ux v validator value variable vendor prefix viewport visual viewport voip w w3c wai wcag web per
formance web server web standards webassembly webdav webextensions webgl webidl webkit webm webp webrtc websockets webvtt whatwg whitespace world wide web wrapper x x
forms xhr (xmlhttprequest) xhtml ...
Backgrounds and borders - Learn web development
we have covered a lot in this article, but can you remember the most important in
formation?
... you can find some further tests to verify that you've retained this in
formation before you move on — see test your skills: backgrounds and borders.
... previous overview: building blocks next in this module cascade and inheritance css selectors type, class, and id selectors attribute selectors pseudo-classes and pseudo-elements combinators the box model backgrounds and borders handling different text directions overflowing content values and units sizing items in css images, media, and
form elements styling tables debugging css organizing your css ...
Handling different text directions - Learn web development
we have covered a lot in this article, but can you remember the most important in
formation?
... you can find some further tests to verify that you've retained this in
formation before you move on — see test your skills: writing modes.
... previous overview: building blocks next in this module cascade and inheritance css selectors type, class, and id selectors attribute selectors pseudo-classes and pseudo-elements combinators the box model backgrounds and borders handling different text directions overflowing content values and units sizing items in css images, media, and
form elements styling tables debugging css organizing your css ...
Combinators - Learn web development
we have covered a lot in this article, but can you remember the most important in
formation?
... you can find some further tests to verify that you've retained this in
formation before you move on — see test your skills: selectors.
... previous overview: building blocks next in this module cascade and inheritance css selectors type, class, and id selectors attribute selectors pseudo-classes and pseudo-elements combinators the box model backgrounds and borders handling different text directions overflowing content values and units sizing items in css images, media, and
form elements styling tables debugging css organizing your css ...
CSS selectors - Learn web development
for example, ::first-line always selects the first line of text inside an element (a <p> in the below case), acting as if a <span> was wrapped around the first
formatted line and then selected.
...i have also included a link to the mdn page for each selector where you can check browser support in
formation.
... general sibling combinator h1 ~ p general sibling in this module cascade and inheritance css selectors type, class, and id selectors attribute selectors pseudo-classes and pseudo-elements combinators the box model backgrounds and borders handling different text directions overflowing content values and units sizing items in css images, media, and
form elements styling tables debugging css organizing your css ...
Sizing items in CSS - Learn web development
we have covered a lot in this article, but can you remember the most important in
formation?
... you can find some further tests to verify that you've retained this in
formation before you move on — see test your skills: sizing.
... previous overview: building blocks next in this module cascade and inheritance css selectors type, class, and id selectors attribute selectors pseudo-classes and pseudo-elements combinators the box model backgrounds and borders handling different text directions overflowing content values and units sizing items in css images, media, and
form elements styling tables debugging css organizing your css ...
CSS building blocks - Learn web development
we have put together a course that includes all the essential in
formation you need to work towards your goal.
... images, media, and
form elements in this lesson we will take a look at how certain special elements are treated in css.
... images, other media, and
form elements behave a little differently in terms of your ability to style them with css than regular boxes.
Legacy layout methods - Learn web development
for new projects, in most cases css grid layout will be used in combination with one or more other modern layout methods to
form the basis for any layout.
... our next step is to create a rule for the class .col, floating it left, giving it a margin-left of 20 pixels to
form the gutter, and a width of 60 pixels.
...you could instead decide on your grid and then add the sizing in
formation to the rules for existing semantic classes.
What text editors are available? - Learn web development
any text editor can get the job done, if it runs on your system, but a cross-plat
form editor eases migration from os to os.
...these functionalities are often helpful: search-and-replace, in one or multiple documents, based on regular expressions or other patterns as needed quickly jump to a given line view two parts of a large document separately view html as it will look in the browser select text in multiple places at once view your project's files and directories
format your code automatically with code beautifier check spelling auto-indent code based on indentation settings do i want to add extra features to my text editor?
...the method varies based on your plat
form but it shouldn't be too hard: windows.
What is the difference between webpage, website, web server, and search engine? - Learn web development
you can per
form search engine searches directly in the address bar of firefox, chrome, etc.) or through a web page (e.g.
...a web page can embed a variety of different types of resources such as: style in
formation — controlling a page's look-and-feel scripts — which add interactivity to the page media — images, sounds, and videos.
...each web page of a given website provides explicit links—most of the time in the
form of clickable portion of text—that allow the user to move from one page of the website to another.
Example 3 - Learn web development
this is the third example that explain how to build custom
form widgets.
... change states html content <
form class="no-widget"> <select name="myfruit" tabindex="-1"> <option>cherry</option> <option>lemon</option> <option>banana</option> <option>strawberry</option> <option>apple</option> </select> <div class="select" tabindex="0"> <span class="value">cherry</span> <ul class="optlist hidden"> <li class="option">cherry</li> <li class="option">lemon</li> <li class="option">banana</li> <li class="option">strawberry</li> <li class="option">apple</li> </ul> </div> </
form> css content .widget select, .no-widget .select { position : absolute; left : -5000em; height : 0; overflow : hidden; } /* --------------- */ /* required styles */ /* --------------- */ .select { position...
...tor('.optlist'); optlist.classlist.toggle('hidden'); } function highlightoption(select, option) { var optionlist = select.queryselectorall('.option'); optionlist.foreach(function (other) { other.classlist.remove('highlight'); }); option.classlist.add('highlight'); }; // ------------- // // event binding // // ------------- // window.addeventlistener("load", function () { var
form = document.queryselector('
form');
form.classlist.remove("no-widget");
form.classlist.add("widget"); }); window.addeventlistener('load', function () { var selectlist = document.queryselectorall('.select'); selectlist.foreach(function (select) { var optionlist = select.queryselectorall('.option'); optionlist.foreach(function (option) { option.addeventlistener('mouseover', ...
Example 4 - Learn web development
this is the fourth example that explain how to build custom
form widgets.
... change states html content <
form class="no-widget"> <select name="myfruit"> <option>cherry</option> <option>lemon</option> <option>banana</option> <option>strawberry</option> <option>apple</option> </select> <div class="select"> <span class="value">cherry</span> <ul class="optlist hidden"> <li class="option">cherry</li> <li class="option">lemon</li> <li class="option">banana</li> <li class="option">strawberry</li> <li class="option">apple</li> </ul> </div> </
form> css content .widget select, .no-widget .select { position : absolute; left : -5000em; height : 0; overflow : hidden; } /* --------------- */ /* required styles */ /* --------------- */ .select { position: relative; display : inline-block;...
...eryselectorall('.option'); nativewidget.selectedindex = index; value.innerhtml = optionlist[index].innerhtml; highlightoption(select, optionlist[index]); }; function getindex(select) { var nativewidget = select.previouselementsibling; return nativewidget.selectedindex; }; // ------------- // // event binding // // ------------- // window.addeventlistener("load", function () { var
form = document.queryselector('
form');
form.classlist.remove("no-widget");
form.classlist.add("widget"); }); window.addeventlistener('load', function () { var selectlist = document.queryselectorall('.select'); selectlist.foreach(function (select) { var optionlist = select.queryselectorall('.option'); optionlist.foreach(function (option) { option.addeventlistener('mouseover', ...
Example 5 - Learn web development
this is the last example that explain how to build custom
form widgets.
... change states html content <
form class="no-widget"> <select name="myfruit"> <option>cherry</option> <option>lemon</option> <option>banana</option> <option>strawberry</option> <option>apple</option> </select> <div class="select" role="listbox"> <span class="value">cherry</span> <ul class="optlist hidden" role="presentation"> <li class="option" role="option" aria-selected="true">cherry</li> <li class="option" role="option">lemon</li> <li class="option" role="option">banana</li> <li class="option" role="option">strawberry</li> <li class="option" role="option">apple</li> </ul> </div> </
form> css content .widget select, .no-widget .select { position : absolute; left : -5000em; height : 0; overflow : hidden; }...
...('aria-selected', 'true'); nativewidget.selectedindex = index; value.innerhtml = optionlist[index].innerhtml; highlightoption(select, optionlist[index]); }; function getindex(select) { var nativewidget = select.previouselementsibling; return nativewidget.selectedindex; }; // ------------- // // event binding // // ------------- // window.addeventlistener("load", function () { var
form = document.queryselector('
form');
form.classlist.remove("no-widget");
form.classlist.add("widget"); }); window.addeventlistener('load', function () { var selectlist = document.queryselectorall('.select'); selectlist.foreach(function (select) { var optionlist = select.queryselectorall('.option'), selectedindex = getindex(select); select.tabindex = 0; select.previous...
What will your website look like? - Learn web development
discusses the planning and design work you have to do for your website before writing code, including "what in
formation does my website offer?", "what fonts and colors do i want?", and "what does my site do?" first things first: planning before doing anything, you need some ideas.
... what in
formation are you presenting on the subject?
...what kind of font is appropriate:
formal, cartoony, bold and loud, subtle?
Getting started with the Web - Learn web development
what in
formation are you showcasing?
...without overwhelming you, html basics provides enough in
formation to make you familiar with html.
...some examples could be games, things that happen when buttons are pressed or data is entered in
forms, dynamic styling effects, animation, and much more.
Structuring the web with HTML - Learn web development
html is used to specify whether your web content should be recognized as a paragraph, list, heading, link, image, multimedia player,
form, or one of many other available elements or even a new element that you define.
... we have put together a course that includes all the essential in
formation you need to work towards your goal.
... solving common html problems use html to solve common problems provides links to sections of content explaining how to use html to solve very common problems when creating a webpage: dealing with titles, adding images or videos, emphasizing content, creating a basic
form, etc.
Introducing asynchronous JavaScript - Learn web development
this section recaps some of the in
formation we saw in the previous article.
...you can also find a lot more in
formation on promises in our graceful asynchronous programming with promises guide, later on in the module.
... conclusion in its most basic
form, javascript is a synchronous, blocking, single-threaded language, in which only one operation can be in progress at a time.
JavaScript building blocks - Learn web development
we have put together a course that includes all the essential in
formation you need to work towards your goal.
...in programming, loops per
form this job very well.
...for example if the user clicks a button on a webpage, you might want to respond to that action by displaying an in
formation box.
Video and Audio APIs - Learn web development
the <video> element contains two <source> elements so that different
formats can be loaded depending on the browser viewing the site.
... next, let's look at our button icons: @font-face { font-family: 'heydingscontrolsregular'; src: url('fonts/heydings_controls-webfont.eot'); src: url('fonts/heydings_controls-webfont.eot?#iefix')
format('embedded-opentype'), url('fonts/heydings_controls-webfont.woff')
format('woff'), url('fonts/heydings_controls-webfont.ttf')
format('truetype'); font-weight: normal; font-style: normal; } button:before { font-family: heydingscontrolsregular; font-size: 20px; position: relative; content: attr(data-icon); color: #aaa; text-shadow: 1px 1px 0px black; } first of ...
...this way, we make sure we can see all the in
formation — one box is not obscuring another.
Client-side web APIs - Learn web development
we have put together a course that includes all the essential in
formation you need to work towards your goal.
...this is usually done by using the document object model (dom), a set of apis for controlling html and styling in
formation that makes heavy use of the document object.
...this seemingly small detail has had a huge impact on the per
formance and behavior of sites.
Object prototypes - Learn web development
the
former is the property on each instance, and the latter is the property on the constructor.
... you've reached the end of this article, but can you remember the most important in
formation?
... you can find some further tests to verify that you've retained this in
formation before you move on — see test your skills: object-oriented javascript.
Properly configuring server MIME types - Learn web development
this article may contain out of date in
formation, as it has not been significantly updated in many years.
... gecko 1.9.1.11 (firefox 3.5.11) and gecko 1.9.2.5 (firefox 3.6.5) also implement this security fix, but to improve compatibility, there was a temporary heuristic that allows the load if the first line in the style sheet appears to be a well-
formed css construct; the heuristic has been removed in firefox 4, and you have to properly set the text/css mime types to have your css pages recognized.
... related links incorrect mime type for css files iana | mime media types hypertext transfer protocol — http/1.1 microsoft - 293336 - info: webcast: mime type handling in microsoft internet explorer microsoft - appendix a: mime type detection in internet explorer microsoft - security update, march 29, 2001 microsoft - security update, december 13, 2001 original document in
formation author: bob clary, date: 20 feb 2003 ...
Server-side website programming - Learn web development
the dynamic websites – server-side programming topic is a series of modules that show how to create dynamic websites; websites that deliver customised in
formation in response to http requests.
... learning pathway getting started with server-side programming is usually easier than client-side development, because dynamic websites tend to per
form a lot of very similar operations (retrieving data from a database and displaying it in a page, validating user-entered data and saving it in a database, checking user permissions and logging users in, etc.), and are constructed using web frameworks that make these and other common web server operations easy.
... server-side website programming first steps this module provides technology-agnostic in
formation about server-side website programming such as "what is it?", "how does it differ from client-side programming?", and "why is it useful?".
Ember Interactivity: Footer functionality, conditional rendering - Learn web development
in ember, you can conditionally render parts of the template using conditional content; a simple block example looks something like this: {{#if this.thingistrue}} content for the block
form of "if" {{/if}} so let's try replacing this part of footer.hbs: <strong>{{this.todos.incomplete.length}}</strong> todos left with the following: <strong>{{this.todos.incomplete.length}}</strong> {{#if this.todos.incomplete.length === 1}} todo {{else}} todos {{/if}} left this will give us an error, however — in ember, these simple if statements can currently only test for ...
... note that this is the block
form of if in ember; you could also use the the inline
form: {{if this.todos.todocountisone "todo" "todos"}} completing todos as with the other components, we need a class to access the service.
... ember getting started with ember ember app structure and componentization ember interactivity: events, classes and state ember interactivity: footer functionality, conditional rendering routing in ember ember resources and troubleshooting vue getting started with vue creating our first vue component rendering a list of vue components adding a new todo
form: vue events, methods, and models styling vue components with css using vue computed properties vue conditional rendering: editing existing todos focus management with vue refs vue resources svelte getting started with svelte starting our svelte todo list app dynamic behavior in svelte: working with variables and props componentizing our svelte app advanced s...
Ember interactivity: Events, classes and state - Learn web development
read javascript decorators: what they are and when to use them for more general in
formation on decorators.
...more in
formation on tracked can be found here.
... ember getting started with ember ember app structure and componentization ember interactivity: events, classes and state ember interactivity: footer functionality, conditional rendering routing in ember ember resources and troubleshooting vue getting started with vue creating our first vue component rendering a list of vue components adding a new todo
form: vue events, methods, and models styling vue components with css using vue computed properties vue conditional rendering: editing existing todos focus management with vue refs vue resources svelte getting started with svelte starting our svelte todo list app dynamic behavior in svelte: working with variables and props componentizing our svelte app advanced s...
Using Vue computed properties - Learn web development
for bigger apps, or when the expression is more complicated, that could cause a serious per
formance problem.
...we do however have bigger fish to fry — in the next article we will look at conditional rendering, and how we can use it to show an edit
form when we want to edit existing todo items.
... ember getting started with ember ember app structure and componentization ember interactivity: events, classes and state ember interactivity: footer functionality, conditional rendering routing in ember ember resources and troubleshooting vue getting started with vue creating our first vue component rendering a list of vue components adding a new todo
form: vue events, methods, and models styling vue components with css using vue computed properties vue conditional rendering: editing existing todos focus management with vue refs vue resources svelte getting started with svelte starting our svelte todo list app dynamic behavior in svelte: working with variables and props componentizing our svelte app advanced s...
Cross browser testing - Learn web development
we have put together a course that includes all the essential in
formation you need to work towards your goal.
...this includes in
formation on using browser dev tools to track down and fix problems, using polyfills and libraries to work around problems, getting modern javascript features working in older browsers, and more.
... handling common accessibility problems next we turn our attention to accessibility, providing in
formation on common problems, how to do simple testing, and how to make use of auditing/automation tools for finding accessibility issues.
Understanding client-side web development tools - Learn web development
we have put together a course that includes all the essential in
formation you need to work towards your goal.
...we'll go all the way from setting up a sensible development environment and putting trans
formation tools in place to actually deploying your app on netlify.
... in this article we'll introduce the case study, set up our development environment, and set up our code trans
formation tools.
CSUN Firefox Materials
here are some examples of accessible extensions, although there are hundreds more to try (thank you to the gw micro knowledge base for some of this in
formation): adblock plus removes ads (and other objects, like banners) from web pages greasemonkey lets you add bits of javascript ("user scripts") to any web page to change its behavior.
...contributions come in many
forms.
...for more in
formation general in
formation: http://www.mozilla.com/firefox/ online support and community forums are located: http://forums.mozillazine.org/ accessibility compliance statement (section 508): http://www.mozilla.com/firefox/vpat.html ...
Application cache implementation overview
when load of the resource fails fallback steps are per
formed (see “falling back on a resource load failure” chapter).
... associating the top level document with offline cache this happens between document load start and the first sub-resource download start and is not about associating nsiapplicationcache object with the channel, but with the document object the load is per
formed for.
...falling back on a resource load failure when a resource previously matching a fallback namespace failed to load from the network, we per
form fallback to the previously remembered fallback entry.
Creating a Language Pack
$ make wget-en-us en_us_binary_url=http://ftp.mozilla.org/pub/mozilla.org/firefox/nightly/latest-mozilla-aurora if you're building on mac 64 bit, you'll need to change the command slightly: $ make wget-en-us en_us_binary_url=http://ftp.mozilla.org/pub/mozilla.org/firefox/nightly/latest-mozilla-aurora moz_pkg_plat
form=mac at some point, you should see the following success message: downloaded http://ftp.mozilla.org/pub/mozilla.o....en-us.mac.dmg to /users/your_id/mozilla/vc/firefox/browser/locales/../../dist/firefox-3.6b5pre.en-us.mac.dmg the en-us binary has been downloaded.
... let's unpack it $ make unpack again, for 64-bit mac, append moz_pkg_plat
form=mac to this command.
...it's now time to repackage the en-us binary with $ make installers-x-testing locale_mergedir=$(pwd)/mergedir again, for 64-bit mac, append moz_pkg_plat
form=mac to this command.
Debugging Table Reflow
the first line of the data dump shows that no width has yet been assigned to the columns mcolwidths=-1 -1 -1 -1, -1 stands for: #define width_not_set -1 this is followed by a reference to the column frame pointers: col frame cache -> 0=00b93138 1=00b931f0 2=024dd728 3=024dd780 this is followed by the in
formation which width has been set for each column.
...cols attribute assigns 1* e0proportionconstraint = 4 // 0*, means to force to min width after this follows the width in
formation for each column: widths=-1 -1 -1 -1 -1 -1 -1 -1 -1 -1 the table code knows ten different width's: #define num_widths 10 #define num_major_widths 3 // min, des, fix #define min_con 0 // minimum width required of the content + padding #define des_con 1 // desired width of the content + padding #define fix 2 // fixed width either from the content or cell,...
... debug_table_reflow_timing needs to be written original document in
formation author(s): bernd mielke other contributors: bernd mielke, josh soref last updated date: november 20, 2005 ...
Building Firefox with Debug Symbols
by default, a release build of firefox will not generate debug symbols suitable for debugging or post-processing into the breakpad symbol
format.
... use the following mozconfig settings to do a build with symbols: building firefox with symbols there is a single configure option to enable building with symbols on all plat
forms.
...see https://dxr.mozilla.org/mozilla/source/toolkit/crashreporter/tools/upload_symbols.sh for more in
formation about the environment variables used by this target.
Configuring Build Options
if you want to use the build regularly, you will want a release build without extra debugging in
formation; if you are a developer who wants to hack the source code, you probably want a non-optimized build with extra debugging macros.
...this will help catch any errors introduced into the js code, with less of a per
formance impact compared to the --enable-debug option.
...for in
formation on installing and configuring mozconfigwrapper, see https://github.com/ahal/mozconfigwrapper.
Makefile - variables
os_ variable description os_arch plat
form type os_target target binary type if building on an intermediate plat
form(building mobile binaries on gnu/linux).
... host_ variable description host_cmsrcs a list of .m sources to compile host_cmmsrcs a list of .mm sources to compile host_objs host_os_arch arch of real plat
form a target plat
form is being built on(building mobile binaries on gnu/linux).
... l10nbasedir moz_chrome_multilocale a list of locale names to process moz_chrome_file_
format both, file, jar, omni, symlink packager_no_libs hack to allow one makefile to include another without pulling in libs:: target definitions.
Simple Thunderbird build
for additional, more detailed in
formation, see the build documentation.
... 18/10/2010 16:11 7,334 mapiaux.h 02/06/2009 17:02 7,938 mapicode.h 02/06/2009 17:02 22,960 mapidbg.h 02/06/2009 17:02 84,644 mapidefs.h 02/06/2009 17:02 27,840 mapi
form.h 02/06/2009 17:02 11,880 mapiguid.h 02/06/2009 17:02 2,648 mapihook.h 02/06/2009 17:02 5,359 mapinls.h 02/06/2009 17:02 2,743 mapioid.h 02/06/2009 17:02 32,978 mapispi.h 02/06/2009 17:02 54,395 mapitags.h 02/06/2009 17:02 26,467 mapiutil.h 02/06/2009 17:02 97,301 mapival.h 02/06/2009 17:02 ...
... searched the bug database for issues relating to your problem (e.g., plat
form-specific issues).
Interface Compatibility
the mozilla plat
form is constantly evolving.
...javascript/xul interfaces traditional extensions written using xul overlays and xpcom have access to the full power of the mozilla plat
form.
... with the power, however, comes the understanding that the mozilla plat
form is constantly changing and many apis may change in future versions of firefox.
MozBeforePaint
gecko 2.0 adds a new method for per
forming javascript controlled animations that synchronize not only with one another, but also with css transitions and smil animations being per
formed within the same window.
...limiting the frame rate avoids wasting work, thereby saving cpu usage and power and improving overall system per
formance.
... example this example per
forms a simple animation, moving a box a short distance after a short period of time.
Embedding Tips
for example, the default prompt service uses xul to render prompt dialogs and embedders may wish to render them in a way more appropriate for their application and plat
form..
... you may also use the progress listener to query the request supplied in onstatechange for more in
formation.
... for example, if you wanted to check the server response headers, you might check onstatechange for state_start | state_is_request flags, and from the nsirequest argument qi fornsihttpchanne and call methods on that to determine response codes and other in
formation from the server.
HTTP Cache
implementation only should need to enhance the context key generation and parsing code and enhance current - or create new when needed - nsicachestorage implementations to carry any additional in
formation down to the cache service.
... see context keying details for more in
formation.
...the
form is following (currently pending in bug 968593): a,b,i1009,p, regular expression: (.([^,]+)?,)* the first letter is an identifier, identifiers are to be alphabetically sorted and always terminate with ',' a - when present the scope is belonging to an anonymous load b - when present the scope is in browser element load i - when present must have a decimal integer value that represents an ap...
How to get a stacktrace for a bug report
mozilla's crash report server currently only has debug in
formation for mozilla builds and thus the crash reporter cannot work if you use a build from a linux distribution or if you compile from source code.
...if you have any additional in
formation about the crash, such as additional detail on what you were doing at the time that may have triggered the crash, please enter it into the comments box.
... alternative ways to get a stacktrace if the mozilla crash reporter doesn't come up or isn't available you will need to obtain a stacktrace manually: windows see the article create a stacktrace with windbg for in
formation on how to do this.
How to implement a custom autocomplete search component
the toolkit mechanism has built-in support for several autocomplete sources, including: history: search the browser's url history (firefox: 1.0+; seamonkey: 1.1+)
form-history: search the values that the user has entered into
form fields.
... make sure the contract id of your xpcom component follows the following
form: "@mozilla.org/autocomplete/search;1?name=xxx", where "xxx" is the name of your autocomplete source.
...note the
format of the json.
Integrated Authentication
the preferences are: pref("network.negotiate-auth.trusted-uris", site-list); pref("network.negotiate-auth.delegation-uris", site-list); pref("network.automatic-ntlm-auth.trusted-uris", site-list); where, site-list is a comma-separated list of url prefixes or domains of the
form: site-list = "mydomain.com, https://myotherdomain.com" network.negotiate-auth.trusted-uris lists the sites that are permitted to engage in spnego authentication with the browser, and network.negotiate-auth.delegation-uris lists the sites for which the browser may delegate user authorization to the server.
... if you wish to use non-fully-qualified entries of the
form mydomain.com in the above preferences for ntlm and spnego authentication, you will also need to set the preferences network.automatic-ntlm-auth.allow-non-fqdn and network.negotiate-auth.allow-non-fqdn (respectively) to true.
... original document in
formation author(s): darin fisher last updated date: december 27, 2005 copyright in
formation: portions of this content are © 1998–2007 by individual mozilla.org contributors; content available under a creative commons license | details.
UpdateListener
for each individual update check, the following methods will be called on the listener: either oncompatibilityupdateavailable() or onnocompatibilityupdateavailable(), depending on whether compatibility in
formation for the requested application version was seen.
... oncompatibilityupdateavailable(in addon addon) void onnocompatibilityupdateavailable(in addon addon) void onupdateavailable(in addon addon, in addoninstall install) void onnoupdateavailable(in addon addon) void onupdatefinished(in addon addon, in integer error) methods oncompatibilityupdateavailable() called when the update check found compatibility in
formation for the application and plat
form version that the update check was being per
formed for.
... void oncompatibilityupdateavailable( in addon addon ) parameters addon the addon that was being checked for updates onnocompatibilityupdateavailable() called when the update check found no new compatibility in
formation for the application and plat
form version that the update check was being per
formed for.
Add-on Manager
through its apis in
formation about all installed add-ons can be retrieved and new add-ons can be installed.
... accessing installed add-ons in
formation about installed add-ons can be retrieved through the main addonmanager api.
...it must be passed an updatelistener to receive in
formation about compatibility in
formation and new update in
formation.
OS.File.Error
} catch (ex) { if (ex instanceof os.file.error && ex.becausenosuchfile) { // the file does not exist } } global object os.file.error methods overview the following functions are utility functions that may be used to construct instances of os.file.error, setting the plat
form-specific error number.
...cross-plat
form attributes operation the human-readable name of the failed operation.
... plat
form-specific attributes unixerrno (defined under unix only) the system error number (errno) for the error.
Sqlite.jsm
since sqlite.jsm manages statements for you, it can per
form intelligent actions like purging all cached statements not in use, freeing memory in the process.
... type the type of transaction to per
form.
... conn.executetransaction(async function complextransaction() { await conn.execute("insert into mytable values (?, ?)", ["foo", "bar"]); let data = await conn.execute("select * from mytable"); if (data.length < 5) { throw new error("we don't have the expected 5 rows to per
form the next operation!"); } // ...
Bootstrapping a new locale
this document will give you the basic in
formation on how to do that.
... first, you should specify your locale's language identifier in ab-cd
format, where "ab" is the iso 639 language code, and cd is the iso 3166 country code.
... it will be just like working on hg with mozilla, yet you will use the bit bucket plat
form to start.
Localization notes
there is an established
format for those, which is described in this document.
... it's important to follow the
format as closely as possible.
...dtd files <!-- localization note (entity name): comment --> properties files # localization note (key): comment file-wide comments should use the same
format, be at the top of the file (after the license header, though) and just drop the (entity name/key) reference.
Extras
depth="15px" voffset="-15px"> <mtext> <svg width="30px" height="30px"> <defs> <radialgradient id="radgrad1" cx="50%" cy="50%" r="50%" fx="50%" fy="50%"> <stop offset="0%" style="stop-color:rgb(255,255,255); stop-opacity:1;"/> <stop offset="100%" style="stop-color:rgb(255,0,0); stop-opacity:.8;"/> </radialgradient> </defs> <g trans
form="translate(15,15)"> <g> <animatetrans
form attributename="trans
form" attributetype="xml" type="rotate" from="360" to="0" dur="15s" repeatcount="indefinite"/> <g trans
form="translate(-15, -15)"> <path fill="url(#radgrad1)" d="m 15 0 l 20 10 l 30 15 l 20 20 l 15 30 ...
...y:1"/> <stop offset="100%" style="stop-color:rgb(255,255,0);stop-opacity:1"/> </lineargradient> <radialgradient id="grad3" cx="50%" cy="50%" r="50%" fx="50%" fy="50%"> <stop offset="0%" style="stop-color:rgb(0,255,255);stop-opacity:1"/> <stop offset="100%" style="stop-color:rgb(255,255,255);stop-opacity:.8"/> </radialgradient> </defs> <rect width="300" height="250" fill="url(#grad1)"/> <g trans
form="translate(150,125)"> <g> <animatetrans
form attributename="trans
form" attributetype="xml" type="rotate" from="0" to="360" dur="6s" repeatcount="indefinite"/> <g trans
form="translate(-50,-35)"> <rect width="100" height="70" fill="url(#grad2)"/> <switch> <foreignobject width="100" height="70" requiredextensions="http://...
...mtr> <mtr> <mtd><mi>sin</mi><mi>θ</mi></mtd> <mtd><mi>cos</mi><mi>θ</mi></mtd> </mtr> </mtable> <mo>)</mo> </mrow> </math> </foreignobject> <text>rotation matrix</text> </switch> </g></g></g> <g> <animatemotion path="m 32,69 c 64,121 100,27 152,42 203,56 239,257 275,161 295,109 144,221 88,214 -2,202 11,35 32,69 z" begin="0s" dur="20s" repeatcount="indefinite"/> <animatetrans
form attributename="trans
form" attributetype="xml" type="scale" values="1;2;.5;1" keytimes="0;.25;.75;1" dur="20s" repeatcount="indefinite"/> <circle fill="url(#grad3)" r="30"/> <g trans
form="translate(-30,-30)"> <switch> <foreignobject width="60" height="60" requiredextensions="http://www.w3.org/1998/math/mathml"> <math display="block"> <mrow> <munderov...
Mozilla Development Strategies
it's better to fix one data loss bug, crasher, or per
formance bug that really affects the user than edge case bugs that are rarely seen or minor bugs.
...but those might be difficult bugs (hard to reproduce crashers, big rewrites for per
formance, etc.) which can take several days or weeks to complete, plus the time for reviews.
...cvs commit client.mak nmake -f client.mak original document in
formation author(s): seth spitzer and alec flett last updated date: september 3, 2006 copyright in
formation: portions of this content are © 1998–2007 by individual mozilla.org contributors; content available under a creative commons license | details.
Build Metrics
"build metrics" is a catch-all term for per
formance measures that are generated by the firefox build system and tracked by perfherder.
...lower is better here, especially on space-restricted plat
forms like android.
... build times amount of time it takes to build firefox in automation on a specific plat
form / configuration.
Investigating leaks using DMD heap scan mode
after that is done, we can finally find out which objects (possibly) point to other objects, using the block_analyzer script: python $srcdir/memory/replace/dmd/block_analyzer.py dmd-$pid.log.gz $leakaddr this will look through every block of memory in the log, and give some basic in
formation about any block of memory that (possibly) contains a pointer to that object.
...this is mostly useful for larger objects, and you can potentially combine this with debugging in
formation to figure out exactly what field this is.
... the rest of the entry is the stack trace for the allocation of the block, which is the most useful piece of in
formation.
Intel Power Gadget
the main strengths of this tool are (a) it works on windows, unlike most other power-related tools, and (b) it shows this data in graph
form, which is occasionally useful.
... the three panes display the following in
formation: power: shows power estimates for the package and the cores ("ia").
... these are reasonably useful for power profiling purposes, but mozilla's rapl utility provides these along with gpu and ram estimates, and in a command-line
format that is often easier to use.
Profiling with Instruments
official apple documentation instruments user guide instruments user reference instruments help articles instruments help per
formance overview basic usage select "time profiler" from the "choose a profiling template for:" dialog.
... how do we monitor per
formance counters (cache miss etc.)?
...you also need the fix to bug 719427 the dtper
formancesession api can be used to control profiling from applications like the old chud api we use in shark builds.
Phishing: a short definition
in 2014, the msci estimated an annual global impact of phishing, and various
forms of identity theft, to be as high as $5 billion usd.
... phishing is an attempt to collect sensitive in
formation, such as usernames, passwords, and financial details by disguising as a trustworthy entity online.
...earlier responses by affected banks, and payment providers, was to attempt educating users to not click links in emails, along with requesting to verify email legitimacy through checking for relevant personal in
formation.
Emscripten
emscripten makes native code immediately available on the web: a plat
form that is standards-based, has numerous independent compatible implementations, and runs everywhere from pcs to ipads.
... practically any portable c or c++ codebase can be compiled into javascript using emscripten, ranging from high per
formance games that need to render graphics, play sounds, and load and process files, through to application frameworks like qt.
... emscripten generates fast code — its default output
format is asm.js , a highly optimizable subset of javascript that can execute at close to native speed in many cases.
Firefox Sync
the exact types of in
formation synced is user-configurable in the browser's preferences or options page.
... servers documentation for the various servers, including in
formation on how to host your own.
...there are also some notes in a google document (that we really must move to its own wiki page) there's also in
formation available to help debug and diagnose android sync issues.
JSHydra
jshydra is a static analysis tool that is capable of per
forming analysis of general javascript code.
... it is inspired by the dehydra and treehydra tools, which can per
form similar tasks in c++ code.
...all analysis is per
formed by running javascripts.
L20n HTML Bindings
when all dom nodes are localized, the document element will fire a documentlocalized event, which you can listen to: document.addeventlistener('documentlocalized', function() { // the dom has been localized and the user sees it in their language yourapp.init(); }); exposing context data you can expose important bits of data to the localization context in
form of context data.
...for instance, a string could use the in
formation about the user's gender to provide two variants of the translation, like in the example below.
...with no in
formation about the available and the default locales, l20n will switch to the monolingual mode.
AsyncTestUtils extended framework
in the mozilla plat
form, the "top level" of a program is the event loop.
... thanks to javascript enhancements available on the mozilla plat
form, it is possible for a function to yield control in such a way that the function stops running at the line where you use a yield statement and resumes execution on the next line when resumed.
...there are more attributes you can specify; consult the documentation for more in
formation.
MailNews automated testing
this page and its sub-pages describe (and link to) the available test mechanisms within mailnews, and provide supporting in
formation for developers and testers.
... per
formance testing mail leak and bloat tests these tests start up thunderbird or seamonkey and record any leaks found, as well as the total memory requirement.
... for more in
formation, see leak and bloat tests.
Anonymous Shared Memory
depending on the underlying plat
form, the file-mapped shared memory may be backed by a file.
...on some plat
forms, no real file backs the shared memory.
... on plat
forms where the shared memory is backed by a file, the file's name in the filesystem is visible to other processes for only the duration of the creation of the file, hopefully a very short time.
Interval Timing
nspr defines a plat
form-dependent type, printervaltime, for timing intervals of fewer than approximately 6 hours.
... nspr 2.0 provides interval times that are efficient in terms of per
formance and storage requirements.
... printervaltime interval functions interval timing functions are divided into three groups: getting the current interval and ticks per second converting standard clock units to plat
form-dependent intervals converting plat
form-dependent intervals to standard clock units getting the current interval and ticks per second pr_intervalnow pr_tickspersecond converting standard clock units to plat
form-dependent intervals pr_secondstointerval pr_millisecondstointerval pr_microsecondstointerval converting plat
form-dependent intervals to standard clock units pr_intervalt...
Logging
this chapter describes the global functions you use to per
form logging.
...these controls are plat
form dependent.
... logging is not compiled in for the win16 plat
form.
PRFileType
syntax #include <prio.h> typedef enum prfiletype{ pr_file_file = 1, pr_file_directory = 2, pr_file_other = 3 } prfiletype; enumerators the enumeration has the following enumerators: pr_file_file the in
formation in the structure describes a file.
... pr_file_directory the in
formation in the structure describes a directory.
... pr_file_other the in
formation in the structure describes some other kind of file system object.
PRInt32
guaranteed to be a signed 32-bit integer on all plat
forms.
... syntax #include <prtypes.h> typedefdefinition print32; description may be defined as an int or a long, depending on the plat
form.
... for syntax details for each plat
form, see prtypes.h.
PRInt64
guaranteed to be a signed 64-bit integer on all plat
forms.
... syntax #include <prtypes.h> typedef definition print64; description may be defined in several different ways, depending on the plat
form.
... for syntax details for each plat
form, see prtypes.h.
PRThreadPriority
this priority is appropriate for threads that are expected to per
form intensive computation.
...this priority is for threads per
forming work of high urgency but short duration.
...however, because of the multiple strategies nspr uses to implement threading on various host plat
forms, nspr priorities are not precisely defined.
PRUint32
guaranteed to be an unsigned 32-bit integer on all plat
forms.
... syntax #include <prtypes.h> typedefdefinition pruint32; description may be defined as an unsigned int or an unsigned long, depending on the plat
form.
... for syntax details for each plat
form, see prtypes.h.
PRUint64
guaranteed to be an unsigned 64-bit integer on all plat
forms.
... syntax #include <prtypes.h> typedef definition pruint64; description may be defined in several different ways, depending on the plat
form.
... for syntax details for each plat
form, see prtypes.h.
PR_GetRandomNoise
a return value of zero means that pr_getrandomnoise is not implemented on this plat
form, or there is no available noise to be returned at the time of the call.
... description pr_getrandomnoise provides a random value, depending on plat
form.
... the length of the random value is dependent on the plat
form and its ability to provide a random value at that moment.
PR_Initialize
provides an alternate
form of explicit initialization.
...this approach con
forms to standard c programming practice.
...this approach con
forms to standard c programming practice.
PR_LogPrint
syntax #include <prlog.h> void pr_logprint(const char *fmt, ...); parameters the function has this parameter: fmt the string that is used as the
formatting specification.
... returns nothing description this function unconditionally writes a message to the log using the specified
format string.
... for a description of
formatting and
format strings, see "
formatted printing".
PR_MicrosecondsToInterval
converts standard clock microseconds to plat
form-dependent intervals.
... syntax #include <prinrval.h> printervaltime pr_microsecondstointerval(pruint32 milli); parameter the function has the following parameter: micro the number of microseconds to convert to interval
form.
... returns plat
form-dependent equivalent of the value passed in the micro parameter.
PR_MillisecondsToInterval
converts standard clock milliseconds to plat
form-dependent intervals.
... syntax #include <prinrval.h> printervaltime pr_millisecondstointerval(pruint32 milli); parameter the function has the following parameter: milli the number of milliseconds to convert to interval
form.
... returns plat
form-dependent equivalent of the value passed in the milli parameter.
PR_SecondsToInterval
converts standard clock seconds to plat
form-dependent intervals.
... syntax #include <prinrval.h> printervaltime pr_secondstointerval(pruint32 seconds); parameter the function has the following parameter: seconds the number of seconds to convert to interval
form.
... returns plat
form-dependent equivalent of the value passed in the seconds parameter.
PR_SetError
sets error in
formation within a thread context.
... syntax #include <prerror.h> void pr_seterror(prerrorcode errorcode, print32 oserr) parameters the function has these parameters: errorcode the nspr (plat
form-independent) translation of the error.
... oserr the plat
form-specific error.
PR_TicksPerSecond
syntax #include <prinrval.h> pruint32 pr_tickspersecond(void); returns an integer between 1000 and 100000 indicating the number of ticks per second counted by printervaltime on the current plat
form.
... this value is plat
form-dependent and does not change after nspr is initialized.
... the relationship between a printervaltime tick and standard clock units is plat
form-dependent.
NSPR
netscape portable runtime (nspr) provides a plat
form-neutral api for system level and libc-like functions.
... legacy nspr content older nspr content is available in svn for browsing and/or migration to this site getting nspr nspr is available in various source and binary packages, depending on your plat
form: windows: build the source package, using the nspr build instructions.
... opensuse linux: install one or more of the following via yast or zypper : mozilla-nspr : binary libraries for your plat
form mozilla-nspr-32bit : binary libraries needed to run 32-bit programs on a 64-bit os mozilla-nspr-devel : files needed (in addition to the above libraries) to compile programs using nspr mozilla-nspr-debuginfo : debug in
formation (including build symbols) for package mozilla-nspr mozilla-nspr-debuginfo-32bit : debug in
formation (including build symbols) for package mozilla-nspr-32bit mozilla-nspr-debugsource : debug sources for all of the above community view mozi...
NSS_3.11.10_release_notes.html
nss 3.11.10 release notes 2008-12-10 newsgroup: <ahref="news: mozilla.dev.tech.crypto"="" news.mozilla.org="">mozilla.dev.tech.crypto</ahref="news:> contents introduction distribution in
formation bugs fixed documentation compatibility feedback introduction network security services (nss) 3.11.10 is a patch release for nss 3.11.
... distribution in
formation the cvs tag for the nss 3.11.10 release is nss_3_11_10_rtm.
...go to the subdirectory for your plat
form, dbg (debug) or opt (optimized), to get the tar.gz or zip file.
NSS 3.12.5 release_notes
distribution in
formation the cvs tag for the nss 3.12.5 release is nss_3_12_5_rtm.
... new in nss 3.12.5 ssl3 & tls renegotiation vulnerability see cve-2009-3555 and us-cert vu#120541 for more in
formation about this security vulnerability.
...this will cause programs that attempt to per
form renegotiation to experience failures where they
formerly experienced successes, and is necessary for them to not be vulnerable, until such time as a new safe renegotiation scheme is standardized by the ietf.
NSS 3.16 release notes
distribution in
formation the hg tag is nss_3_16_rtm.
... the atob utility has been improved to automatically ignore lines of text that aren't in base64
format.
... bugs fixed in nss 3.16 this bugzilla query returns all the bugs fixed in nss 3.16: https://bugzilla.mozilla.org/buglist.cgi?resolution=fixed&classification=components&query_
format=advanced&product=nss&target_milestone=3.16 ...
NSS 3.17.2 release notes
distribution in
formation the hg tag is nss_3_17_2_rtm.
...previously nss would only validate the peer's public key before per
forming ecdh key agreement.
... bugs fixed in nss 3.17.2 this bugzilla query returns all the bugs fixed in nss 3.17.2: https://bugzilla.mozilla.org/buglist.cgi?resolution=fixed&classification=components&query_
format=advanced&product=nss&target_milestone=3.17.2 compatibility nss 3.17.2 shared libraries are backward compatible with all older nss 3.x shared libraries.
NSS 3.18 release notes
distribution in
formation the hg tag is nss_3_18_rtm.
... use -c one, two or three times to print in
formation about the certificates received from a server, and in
formation about the locally found and trusted issuer certificates, to diagnose server side configuration issues.
...a:f7:59:8a:eb:14:b5:47 cn = cfca ev root sha1 fingerprint: e2:b8:29:4b:55:84:ab:6b:58:c2:90:46:6c:ac:3f:b8:39:8f:84:83 the version number of the updated root ca list has been set to 2.3 bugs fixed in nss 3.18 this bugzilla query returns all the bugs fixed in nss 3.18: https://bugzilla.mozilla.org/buglist.cgi?resolution=fixed&classification=components&query_
format=advanced&product=nss&target_milestone=3.18 compatibility nss 3.18 shared libraries are backward compatible with all older nss 3.x shared libraries.
NSS 3.19 release notes
distribution in
formation the hg tag is nss_3_19_rtm.
... nss now more strictly validates tls extensions and will fail a handshake that contains mal
formed extensions (bug 753136).
... bugs fixed in nss 3.19 this bugzilla query returns all the bugs fixed in nss 3.19: https://bugzilla.mozilla.org/buglist.cgi?resolution=fixed&classification=components&query_
format=advanced&product=nss&target_milestone=3.19 acknowledgements the nss development team would like to thank karthikeyan bhargavan from inria for responsibly disclosing the issue in bug 1086145.
NSS 3.23 release notes
distribution in
formation the hg tag is nss_3_23_rtm.
...clients that per
form a version downgrade (which is a dangerous practice) call this with the highest version number that they possibly support.
... bugs fixed in nss 3.23 this bugzilla query returns all the bugs fixed in nss 3.23: https://bugzilla.mozilla.org/buglist.cgi?resolution=fixed&classification=components&query_
format=advanced&product=nss&target_milestone=3.23 acknowledgements the nss development team would like to thank security researcher francis gabriel for responsibly disclosing the issue in bug 1245528.
NSS 3.30 release notes
distribution in
formation the hg tag is nss_3_30_rtm.
... new functions in cert.h cert_compareava - per
forms a comparison of two certava structures, and returns a seccomparison result.
... bugs fixed in nss 3.30 this bugzilla query returns all the bugs fixed in nss 3.30: https://bugzilla.mozilla.org/buglist.cgi?resolution=fixed&classification=components&query_
format=advanced&product=nss&target_milestone=3.30 compatibility nss 3.30 shared libraries are backward compatible with all older nss 3.x shared libraries.
NSS 3.32 release notes
distribution in
formation the hg tag is nss_3_32_rtm.
...rtificates were removed: cn = addtrust public ca root sha-256 fingerprint: 07:91:ca:07:49:b2:07:82:aa:d3:c7:d7:bd:0c:df:c9:48:58:35:84:3e:b2:d7:99:60:09:ce:43:ab:6c:69:27 cn = addtrust qualified ca root sha-256 fingerprint: 80:95:21:08:05:db:4b:bc:35:5e:44:28:d8:fd:6e:c2:cd:e3:ab:5f:b9:7a:99:42:98:8e:b8:f4:dc:d0:60:16 cn = china internet network in
formation center ev certificates root sha-256 fingerprint: 1c:01:c6:f4:db:b2:fe:fc:22:55:8b:2b:ca:32:56:3f:49:84:4a:cf:c3:2b:7b:e4:b0:ff:59:9f:9e:8c:7a:f7 cn = cnnic root sha-256 fingerprint: e2:83:93:77:3d:a8:45:a6:79:f2:08:0c:c7:fb:44:a3:b7:a1:c3:79:2c:b7:eb:77:29:fd:cb:6a:8d:99:ae:a7 cn = comsign secured ca sha-256 fingerprint: 50:79:41:c7:44:60...
...(cve-2018-5149, bug 1361197) this bugzilla query returns all the bugs fixed in nss 3.32: https://bugzilla.mozilla.org/buglist.cgi?resolution=fixed&classification=components&query_
format=advanced&product=nss&target_milestone=3.32 compatibility nss 3.32 shared libraries are backward compatible with all older nss 3.x shared libraries.
NSS 3.36.2 release notes
distribution in
formation the hg tag is nss_3_36_2_rtm.
... bugs fixed in nss 3.36.2 bug 1462303 - connecting to a server that was recently upgraded to tls 1.3 would result in a ssl_rx_mal
formed_server_hello error.
... this bugzilla query returns all the bugs fixed in nss 3.36.2: https://bugzilla.mozilla.org/buglist.cgi?resolution=fixed&classification=components&query_
format=advanced&product=nss&target_milestone=3.36.2 compatibility nss 3.36.2 shared libraries are backward compatible with all older nss 3.x shared libraries.
NSS 3.37.1 release notes
distribution in
formation the hg tag is nss_3_37_1_rtm.
... bugs fixed in nss 3.37.1 bug 1462303 - connecting to a server that was recently upgraded to tls 1.3 would result in a ssl_rx_mal
formed_server_hello error.
... this bugzilla query returns all the bugs fixed in nss 3.37.1: https://bugzilla.mozilla.org/buglist.cgi?resolution=fixed&classification=components&query_
format=advanced&product=nss&target_milestone=3.37.1 compatibility nss 3.37.1 shared libraries are backward compatible with all older nss 3.x shared libraries.
NSS 3.43 release notes
distribution in
formation the hg tag is nss_3_43_rtm.
...ot ca 3 sha-256 fingerprint: 5a2fc03f0c83b090bbfa40604b0988446c7636183df9846e17101a447fb8efd6 the following ca certificates were removed: none bugs fixed in nss 3.43 bug 1528669 and bug 1529308 - improve gyp build system handling bug 1529950 and bug 1521174 - improve nss s/mime tests for thunderbird bug 1530134 - if docker isn't installed, try running a local clang-
format as a fallback bug 1531267 - enable fips mode automatically if the system fips mode flag is set bug 1528262 - add a -j option to the strsclnt command to specify sigschemes bug 1513909 - add manual for nss-policy-check bug 1531074 - fix a deref after a null check in seckey_setpublicvalue bug 1517714 - properly handle esni with hrr bug 1529813 - expose hkdf-expand-label with mechanism bug 1...
... this bugzilla query returns all the bugs fixed in nss 3.43: https://bugzilla.mozilla.org/buglist.cgi?resolution=fixed&classification=components&query_
format=advanced&product=nss&target_milestone=3.43 compatibility nss 3.43 shared libraries are backward compatible with all older nss 3.x shared libraries.
NSS 3.44 release notes
distribution in
formation the hg tag is nss_3_44_rtm.
... new in nss 3.44 new functionality new functions in lib/certdb/cert.h cert_getcertificateder - access the der-encoded
form of a certcertificate.
...9608 - signature fails with dbm disabled 1549848 - allow building nss for ios using gyp 1549847 - nss's sqlite compilation warnings make the build fail on ios 1550041 - freebl not building on ios simulator 1542950 - macos cipher test timeouts this bugzilla query returns all the bugs fixed in nss 3.44: https://bugzilla.mozilla.org/buglist.cgi?resolution=fixed&classification=components&query_
format=advanced&product=nss&target_milestone=3.44 compatibility nss 3.44 shared libraries are backward compatible with all older nss 3.x shared libraries.
NSS 3.48 release notes
the nss team would like to recognize first-time contributors: craig disselkoen giulio benetti lauri kasanen tom prince distribution in
formation the hg tag is nss_3_48_rtm.
... add test for early key update bug 1597799 - fix a crash in nssckfwobject_getattributesize bug 1591178 - add entrust root certification authority - g4 certificate to nss bug 1590001 - prevent negotiation of versions lower than 1.3 after helloretryrequest bug 1596450 - added a simplified and unified mac implementation for hmac and cmac behind pkcs#11 bug 1522203 - remove an old pentium pro per
formance workaround bug 1592557 - fix prng known-answer-test scripts bug 1586176 - encryptupdate should use maxout not block size (cve-2019-11745) bug 1593141 - add `notbefore` or similar "beginning-of-validity-period" parameter to mozilla::pkix::trustdomain::checkrevocation bug 1591363 - fix a pbkdf2 memory leak in nsc_generatekey if key length > max_key_len (256) bug 1592869 - use arm neon for ...
...al key strength checks bug 1459141 - add more cbc padding tests that missed nss 3.47 bug 1590339 - fix a memory leak in btoa.c bug 1589810 - fix uninitialized variable warnings from certdata.perl bug 1573118 - enable tls 1.3 by default in nss this bugzilla query returns all the bugs fixed in nss 3.48: https://bugzilla.mozilla.org/buglist.cgi?resolution=fixed&classification=components&query_
format=advanced&product=nss&target_milestone=3.48 compatibility nss 3.48 shared libraries are backward compatible with all older nss 3.x shared libraries.
NSS 3.49 release notes
the nss team would like to recognize first-time contributors: alex henrie distribution in
formation the hg tag is nss_3_49_rtm.
... bug 1606025 - remove -wmaybe-uninitialized warning in sslsnce.c bug 1606119 - fix ppc hw crypto build failure bug 1605545 - memory leak in pk11install_plat
form_generate bug 1602288 - fix build failure due to missing posix signal.h bug 1588714 - implement checkarmsupport for win64/aarch64 bug 1585189 - nss database uses 3des instead of aes to encrypt db entries bug 1603257 - fix ubsan issue in softoken ckm_nss_chacha20_ctr initialization bug 1590001 - additional hrr tests (cve-2019-17023) bug 1600144 - treat clienthello with message_seq of 1 as a s...
...167 - intermittent mis-reporting potential security risk sec_error_unknown_issuer bug 1535787 - fix automation/release/nss-release-helper.py on macos bug 1594933 - disable building dbm by default bug 1562548 - improve gcm perfomance on aarch32 this bugzilla query returns all the bugs fixed in nss 3.49: https://bugzilla.mozilla.org/buglist.cgi?resolution=fixed&classification=components&query_
format=advanced&product=nss&target_milestone=3.49 compatibility nss 3.49 shared libraries are backward compatible with all older nss 3.x shared libraries.
NSS 3.52 release notes
the nss team would like to recognize first-time contributors: zhujianwei7 hans petter jansson distribution in
formation the hg tag is nss_3_52_rtm.
...see the bug for more in
formation.
... bug 1630925 - guard all instances of nsscmssigneddata.signerinfo to avoid a cms crash bug 1571677 - name constraints validation: cn treated as dns name even when syntactically invalid as dns name this bugzilla query returns all the bugs fixed in nss 3.52: https://bugzilla.mozilla.org/buglist.cgi?resolution=fixed&classification=components&query_
format=advanced&product=nss&target_milestone=3.52 compatibility nss 3.52 shared libraries are backward compatible with all older nss 3.x shared libraries.
NSS 3.53 release notes
the nss team would like to recognize first-time contributors: jan-marek glogowski jeff walden distribution in
formation the hg tag is nss_3_53_rtm.
... notable changes in nss 3.53 when using the makefiles, nss can be built in parallel, speeding up those builds to more similar per
formance as the build.sh/ninja/gyp system.
... 290526 - support parallel building of nss when using the makefiles bug 1636206 - hacl* update after changes in libintvector.h bug 1636058 - fix building nss on debian s390x, mips64el, and riscv64 bug 1622033 - add option to build without seed this bugzilla query returns all the bugs fixed in nss 3.53: https://bugzilla.mozilla.org/buglist.cgi?resolution=fixed&classification=components&query_
format=advanced&product=nss&target_milestone=3.53 compatibility nss 3.53 shared libraries are backward compatible with all older nss 3.x shared libraries.
Enc Dec MAC Using Key Wrap CertReq PKCS10 CSR
generates encryption/mac keys and outputs public key as pkcs11 certificate signing request /* this source code
form is subject to the terms of the mozilla public * license, v.
...nd */ static void validategeneratecsrcommand(const char *progname, const char *dbdir, certname *subject, const char *subjectstr, const char *certreqfilename) { prbool validationfailed = pr_false; if (!subject) { pr_fprintf(pr_stderr, "%s -g -d %s -s: improperly
formatted name: \"%s\"\n", progname, dbdir, subjectstr); validationfailed = pr_true; } if (!certreqfilename) { pr_fprintf(pr_stderr, "%s -g -d %s -s %s -r: certificate request file name not found\n", progname, dbdir, subjectstr); validationfailed = pr_true; } if (validationfailed) { fprintf(stderr, "\nusage...
... pr_fprintf(pr_stderr, "unknown key or hash type\n"); rv = secfailure; goto cleanup; } rv = sec_dersigndata(arena, &result, encoding->data, encoding->len, privk, signalgtag); if (rv) { pr_fprintf(pr_stderr, "signing of data failed\n"); rv = secfailure; goto cleanup; } /* encode request in specified
format */ if (ascii) { char *obuf; char *name, *email, *org, *state, *country; secitem *it; int total; it = &result; obuf = btoa_convertitemtoascii(it); total = pl_strlen(obuf); name = cert_getcommonname(subject); if (!name) { name = strdup("(not specified)"); } email = cert_getcertemai...
sample2
/* this source code
form is subject to the terms of the mozilla public * license, v.
...e certificate to header file as sig verification [optional]\n\n", "-v"); exit(-1); } /* * validate the options used for generate csr command */ static void validategeneratecsrcommand(const char *progname, const char *dbdir, certname *subject, const char *subjectstr, const char *certreqfilename) { prbool validationfailed = pr_false; if (!subject) { pr_fprintf(pr_stderr, "%s -g -d %s -s: improperly
formatted name: \"%s\"\n", progname, dbdir, subjectstr); validationfailed = pr_true; } if (!certreqfilename) { pr_fprintf(pr_stderr, "%s -g -d %s -s %s -r: certificate request file name not found\n", progname, dbdir, subjectstr); validationfailed = pr_true; } if (validationfailed) { fprintf(stderr, "\nusage: %s %s \n\n", progname, "-g -d <dbdirpath> -s <subject> -r <csr> \n"); exit(-1); } } /* * valid...
...nalgtag = sec_getsignaturealgorithmoidtag(keytype, hashalgtag); if (signalgtag == sec_oid_unknown) { pr_fprintf(pr_stderr, "unknown key or hash type\n"); rv = secfailure; goto cleanup; } rv = sec_dersigndata(arena, &result, encoding->data, encoding->len, privk, signalgtag); if (rv) { pr_fprintf(pr_stderr, "signing of data failed\n"); rv = secfailure; goto cleanup; } /* encode request in specified
format */ if (ascii) { char *obuf; char *name, *email, *org, *state, *country; secitem *it; int total; it = &result; obuf = btoa_convertitemtoascii(it); total = pl_strlen(obuf); name = cert_getcommonname(subject); if (!name) { name = strdup("(not specified)"); } email = cert_getcertemailaddress(subject); if (!email) email = strdup("(not specified)"); org = cert_getorgname(subject); if (!org) org = str...
NSS sources building testing
(historical in
formation: nspr and nss source code have recently been re-organized into a new directory structure.
...the subdirectories dbm, security/dbm, security/coreconf, security/nss were part of the nss sources.) the nss directory contains the following important subdirectories: nss/coreconf contains knowledge for cross plat
form building.
...the complete build instructions include more in
formation.
nss tech note4
pulling certificate extension in
formation out of ssl certificates nss technical note: 4 note: this document contains code snippets that focus on essential aspects of the task and often do not illustrate all the cleanup that needs to be done.
... background on cert extensions an extension has the following attributes object id (oid) : a unique oid represents an algorithm, a mechanism, a piece of in
formation, etc.
... secstatus cert_findsubjectkeyidexten (certcertificate *cert, secitem *retitem); for more in
formation browse through the nss source code online at http://lxr.mozilla.org/mozilla/source/security/nss/ and http://lxr.mozilla.org/security/ documentation on some cert funcs http://www.mozilla.org/projects/security/pki/nss/ref/ssl/sslcrt.html ...
FC_GetSessionInfo
name fc_getsessioninfo - obtain in
formation about a session.
... description fc_getsessioninfo obtains in
formation about a session.
...otherwise, it fills in the ck_session_info structure with the following in
formation: state: the state of the session, i.e., no role is assumed, the user role is assumed, or the crypto officer role is assumed flags: bit flags that define the type of session ckf_rw_session (0x00000002): true if the session is read/write; false if the session is read-only.
FC_GetSlotInfo
name fc_getslotinfo - get in
formation about a particular slot in the system.
... description fc_getslotinfo stores the in
formation about the slot in the ck_slot_info structure that pinfo points to.
... return value ckr_ok slot in
formation was successfully copied.
NSS tools : cmsutil
name cmsutil — per
forms basic cryptograpic operations, such as encryption and decryption, on cryptographic message syntax (cms) messages.
... synopsis cmsutil [options] arguments description the cmsutil command-line uses the s/mime toolkit to per
form basic operations, such as encryption and decryption, on cryptographic message syntax (cms) messages.
...for in
formation specifically about nss, the nss project wiki is located at [2]http://www.mozilla.org/projects/security/pki/nss/.
NSS tools : cmsutil
name cmsutil — per
forms basic cryptograpic operations, such as encryption and decryption, on cryptographic message syntax (cms) messages.
... synopsis cmsutil [options] arguments description the cmsutil command-line uses the s/mime toolkit to per
form basic operations, such as encryption and decryption, on cryptographic message syntax (cms) messages.
... for in
formation specifically about nss, the nss project wiki is located at [2]http://www.mozilla.org/projects/security/pki/nss/.
Small Footprint
on a recent build, the length of js.jar was 603,127 bytes corresponding to 1,171,708 bytes of all uncompressed rhino classes with debug in
formation included.
... debug in
formation debug in
formation in rhino classes consumes about 25% of code size and if you can live without that, you can recompile rhino to remove it.
...to build such minimalist jar without debug in
formation, run the following command from the top directory of rhino distribution: ant clean ant -ddebug=off -dno-regexp=true -dno-e4x=true smalljar if you omit -dno-regexp=true, then the resulting smalljs.jar will include regular expression support.
JS_CheckAccess
syntax jsbool js_checkaccess(jscontext *cx, jsobject *obj, jsid id, jsaccessmode mode, jsval *vp, unsigned int *attrsp); name type description cx jscontext * the context in which to per
form the access check.
...otherwise, if obj's class has a non-null jsclass.checkaccess callback, then it is called to per
form the check.
... otherwise, if a runtime-wide check-object-access callback has been installed by calling js_setcheckobjectaccesscallback, then that is called to per
form the check.
JS_CompileFunctionForPrincipals
principals jsprincipals * pointer to the structure holding the security in
formation for this function.
... principals is a pointer to the jsprincipals structure that contains the security in
formation to associate with this function.
...this in
formation is passed in messages if an error occurs during compilation.
JS_CompileScriptForPrincipals
principals jsprincipals * pointer to the structure holding the security in
formation for this script.
... principals is a pointer to the jsprincipals structure that contains the security in
formation to associate with this script.
...this in
formation is included in error messages if an error occurs during compilation.
JS_ConvertArgumentsVA
syntax bool js_convertargumentsva(jscontext *cx, const js::callargs &args, const char *
format, va_list ap); bool js_convertargumentsva(jscontext *cx, unsigned argc, jsval *argv, const char *
format, va_list ap); name type description cx jscontext * pointer to a js context from which to derive runtime in
formation.
...obsolete since jsapi 30
format const char * character array containing the recognized
format to which to convert.
...see js_convertarguments for further in
formation.
JS_DestroyContext
js_destroycontext additionally per
forms garbage collection to reclaim any memory that was being used by cx's global object.
... js_destroycontextnogc does not per
form garbage collection.
... js_destroycontextmaybegc may or may not per
form garbage collection; the engine makes an educated guess as to whether enough memory would be reclaimed to justify the work.
JS_EvaluateScriptForPrincipals
principals jsprincipals * pointer to the structure holding the security in
formation for this script.
... principals is a pointer to the jsprincipals structure that contains the security in
formation to associate with this script.
...this in
formation is used in messages if an error occurs during compilation.
JS_SetGCZeal
description js_setgczeal sets the level of additional garbage collection to per
form for a runtime, for the purpose of finding or reproducing bugs.
... the default: no additional collections are per
formed.
... 14 per
form a shrinking collection every frequency allocations.
JS_SetProperty
context *cx, js::handleobject obj, const char16_t *name, size_t namelen, js::handlevalue v); bool js_setpropertybyid(jscontext *cx, js::handleobject obj, js::handleid id, js::handlevalue v); // added in spidermonkey 1.8.1 name type description cx jscontext * pointer to a js context from which to derive runtime in
formation.
... if obj is a proxy, the js_setproperty [[set]] internal method defined in es2015 (rev 29 9.5.9) is per
formed.
... otherwise, [[set]] internal method defined in es2015 (rev 29 9.1.9) is per
formed.
JS_THREADSAFE
requests in a js_threadsafe build, the application must separate code that uses the jsapi from code that per
forms blocking i/o or time-consuming calculations.
...use js_writestructuredclone to trans
form data into a flat array of bytes that can be safely written to disk, sent to another process or even another machine, or just passed to another thread.
...for example: many worker threads need to share a "pool" of reusable contexts, to avoid the per
formance cost of constantly creating and destroying contexts.
JSAPI reference
compile javascript code into a function: struct jsfunction js::compilefunction added in spidermonkey 17 js_decompilefunction js_decompilefunctionbody js_compilefunction obsolete since jsapi 36 js_compilefunctionforprincipals obsolete since jsapi 28 js_compileucfunction obsolete since jsapi 36 js_compileucfunctionforprincipals obsolete since jsapi 28 error handling struct jserror
formatstring added in spidermonkey 17 class jserrorreport class js::autosaveexceptionstate added in spidermonkey 31 enum jsexntype added in spidermonkey 17 js_reporterror js_reportwarning js_reporterrornumber js_reporterrornumberuc js_reporterrorflagsandnumber js_reporterrorflagsandnumberuc js_reporterrornumberucarray added in spidermonkey 24 js_reportoutofmemory js_reportallocationoverflo...
... js_convertarguments obsolete since jsapi 38 js_convertargumentsva obsolete since jsapi 38 js_pusharguments obsolete since javascript 1.8.5 js_pushargumentsva obsolete since javascript 1.8.5 js_poparguments obsolete since javascript 1.8.5 js_addargument
formatter obsolete since jsapi 18 js_removeargument
formatter obsolete since jsapi 18 the following functions convert js values to various types.
...ack - used by js_setgccallback jsfinalizecallback added in spidermonkey 17 - used by js_addfinalizecallback added in spidermonkey 38 and js_setfinalizecallback added in spidermonkey 17 obsolete since jsapi 32 jsiteratecompartmentcallback - used by js_iteratecompartments added in spidermonkey 17 jsbranchcallback - used by js_setbranchcallback obsolete since javascript 1.8.1 jsargument
formatter - used by js_addargument
formatter obsolete since jsapi 18 jsfunctioncallback - used by js_setfunctioncallback obsolete since jsapi 37 jsgcrootmapfun - used by js_mapgcroots obsolete since jsapi 19 jsobjectprincipalsfinder - used by js_setobjectprincipalsfinder obsolete since javascript 1.8 jsprincipalstranscoder - used by js_setprincipalstranscoder obsolete since javascript 1.8...
Split object
for per
formance, access to global properties must be fast.
...circa firefox 1.5, the decision was made to cache layout in
formation and javascript state across navigation.
...inner objects are dangerous because they have fast property accessors that do not per
form security checks.
TPS Password Lists
used for passwords in
form fields.
...usernamefield: the username field for a
form password.
...passwordfield: the password field for a
form password.
compare-locales
options to get a brief list of available options, use the --help flag: $ compare-locales --help the output the output of compare-locales shows the missing and obsolete strings in a pseudo-diff
format.
...the file names will be shown in a hierarchical
form, so in the example above, your files are browser.dtd in ab-cd/browser/chrome/browser and migration.dtd in another directory level deeper.
... pass --json to get just the summary in json
format.
Embedded Dialog API
the precise appearance and contents of the new window are defined by the application, though the app should con
form to the chromeflags parameter of nsiwindowcreator::createchromewindow.
...the print dialogs should be available soon.) dialogs posed by the embedding app ("down calls") some components will not pose dialogs directly, but maintain a database of in
formation an embedding app may wish to display as a dialog.
... the dialog component's contract id should have the
form "@mozilla.org/embedui/unique-component-name;1" original document in
formation author: danm@netscape.com last updated date: 15 dec 2001 ...
Creating a Python XPCOM component
pay special attention to types here - python and javascript are both loosely-typed, so it's fairly easy to pass in
formation from one to the other.
... note: there are exceptions; see this discussion for in
formation on the use of string and wstring for unicode transfer.
...generating implementation templates the module xpcom.xpt is used internally to process type in
formation, but it has a nice feature - it can spit out a template for a python implementation of any interface.
XPCOM glue
linking strategy: dependent glue standalone glue compiler flags: cross-plat
form #include "xpcom-config.h" #include "xpcom-config.h" #define xpcom_glue windows /fi "xpcom-config.h" linux -include "xpcom-config.h" linker flags: windows for older versions of the firefox sdk: -libpath:c:/path/to/sdk/lib xpcomglue_s.lib xpcom.lib nspr4.lib for recent versions of the firefox sdk (at least version 42, but possibl...
...to/sdk/lib -l/path/to/sdk/bin -wl,-executable-path,/path/to/sdk/bin -lxpcomglue_s -lxpcom -lnspr4 when building against a xulrunner derived sdk, use: -l/path/to/sdk/lib -l/path/to/xulrunner-bin -wl,-executable_path,/path/to/xulrunner-bin -lxpcomglue_s -lxpcom -lnspr4 where 'xulrunner-bin' is either /library/frameworks/xul.framework/versions/current/ or /path/to/xulrunner-build/[plat
form]/dist/bin -l/path/to/sdk/lib -lxpcomglue linux -l/path/to/sdk/lib -l/path/to/sdk/bin -wl,-rpath-link,/path/to/sdk/bin -lxpcomglue_s -lxpcom -lnspr4 write it exactly as stated, see notes.
...when using a sdk from mozilla 1.7 or earlier, you must define mozilla_strict_api when using any
form of the glue.
Building the WebLock UI
the xpcom interfaces and tools you've used have been general, cross-plat
form, and available in the gecko runtime environment or in any gecko-based application after mozilla 1.2 (when the gre began to be used).
...nlock methods of the weblock component must also adjust this variable accordingly: function wlock() { // check to see if locking is on or off weblock.lock(); wlocked = 1; } function wunlock() { // check to see if locking is on or off weblock.unlock(); wlocked = 0; } an important preliminary of these functions is that the weblock component be made available to the javascript in the
form of the weblock object being used in the snippets above.
...distribution of the work or derivative of the work in any standard (paper) book
form is prohibited unless prior permission is obtained from the copyright holder.
Detailed XPCOM hashtable guide
the in
formation you're looking for is probably there.
... to use nsthashtable, you must declare an entry-class in a pre-defined
format.
... original document in
formation author(s): benjamin smedberg <benjamin@smedbergs.us> ...
XPCOM guide
help them do so, first by explaining the underlying concepts, and second by describing a number of common javascript patterns that cause leaks.creating xpcom componentsthis guide is about gecko, and about creating xpcom components for gecko-based applications.how to build an xpcom component in javascriptif you are looking for add-on sdk solution for xpcom javascript components then check out plat
form/xpcom module first.inheriting from implementation classesgiven that idl interfaces map to abstract classes in c++, a common problem when dealing with idl is when you have an idl inheritance hierarchy, and a corresponding c++ implementation hierarchy, you run into multiple inheritance.
...the problem would not exist with java's interfaces).making cross-thread calls using runnablesin the mozilla plat
form, most activities such as layout, dom operations, content javascript, and chrome javascript run on the main thread.
... however, it may be useful for c++ code in the mozilla plat
form to run tasks on another thread.mozilla internal string guidemost of the mozilla code uses a c++ class hierarchy to pass string data, rather than using raw pointers.
How to build a binary XPCOM component using Visual Studio
xpcom is mozilla’s cross plat
form component object model, similar to microsoft’s com technology.
...for more in
formation on the workings of xpcom look elsewhere.
...check out the resources at the end of the tutorial for more in
formation on the world of xpcom.
Components.utils.Sandbox
see security checks for more in
formation on security principals.
...window objects and nsiprincipal carry additional in
formation such as origin attributes and same-origin privilege changes caused by setting document.domain.
... debug() for more in
formation on the built-in sandbox functions, please consult the source code.
XPCShell Reference
see the documentation on debugdump() for the nsixpconnect interface for more in
formation.
...see the above documentation on the -v command-line argument for more in
formation.
... original document in
formation author: david bradley <dbradley@netscape.com> last updated date: 17 march 2003 copyright in
formation: portions of this content are © 1998–2008 by individual mozilla.org contributors; content available under a creative commons license.
IAccessibleApplication
other-licenses/ia2/accessibleapplication.idlnot scriptable this interface gives access to the application's name and version in
formation.
... 1.0 66 introduced gecko 1.9 inherits from: iunknown last changed in gecko 1.9 (firefox 3) this interface provides the at with the in
formation it needs to differentiate this application from other applications, from other versions of this application, or from other versions of this application running on different versions of an accessibility bridge or accessibility toolkit.
... servers implementing iaccessible2 should provide access to the iaccessibleapplication interface via queryservice from any object so that ats can easily determine specific in
formation about the application such as its name or version.
mozITXTToHTMLConv
the mozitxttohtmlconv interface is used to convert text into html
format.
... its primary use is in converting user-entered text into properly-
formatted html.
... scanhtml() scans the specified user-edited html, adding additional
formatting that the user may not have known to do.
mozIVisitInfoCallback
aplaceinfo the in
formation that was unable to be processed.
...void handleresult( in moziplaceinfo aplaceinfo ); parameters aplaceinfo the in
formation that was entered into the database.
... aplaceinfo the in
formation that was being entered into the database.
GroupPosition
« nsiaccessible page summary this method returns grouping in
formation.
... remark alternatively this in
formation is exposed by nsiaccessible.attribute attribute, also see group attributes page.
... refer to accessible web specifications to get an idea what elements expose group in
formation.
nsIAppShellService
this will usually be false on all non-mac plat
forms.
...(and at application startup, on plat
forms that do not normally quit when the last window has closed, call enter once, but not exit) void enterlastwindowclosingsurvivalarea(); parameters none.
... toplevelwindowismodal() obsolete since gecko 1.9.1 (firefox 3.5 / thunderbird 3.0 / seamonkey 2.0) the appshell service needs to be in
formed of modal xul windows currently open.
nsIAuthPromptCallback
method overview void onauthavailable(in nsisupports acontext, in nsiauthin
formation aauthinfo); void onauthcancelled(in nsisupports acontext, in boolean usercancel); methods onauthavailable() authentication in
formation is available.
...void onauthavailable( in nsisupports acontext, in nsiauthin
formation aauthinfo ); parameters acontext the context as passed to nsiauthprompt2.asyncpromptauth().
... aauthinfo authentication in
formation.
nsIBrowserHistory
for per
formance reasons this does not return the real number of entries.
... this method adds a page to the history with specific time stamp in
formation.
...you can also pass in the localized "(local files)" title given to you by a history query to remove all history in
formation for local files.
nsICRLInfo
security/manager/ssl/public/nsicrlinfo.idlscriptable in
formation on a certificate revocation list (crl) issued by a certificate authority (ca).
... lastupdatelocale astring lastupdate
formatted as a human readable string
formatted according to the environment locale.
... nextupdatelocale astring nextupdate
formatted as a human readable string
formatted according to the environment locale.
nsIContentSecurityPolicy
void refinepolicy( in astring policystring, in nsiuri selfuri ); parameters policystring selfuri scanrequestdata() called after the content security policy object is created to fill in the appropriate request and request header in
formation needed in case a report needs to be sent.
...given a bit of in
formation about the request, decides whether or not the policy is satisfied.
...given a bit of in
formation about the request, decides whether or not the policy is satisfied.
nsIDOMGeoGeolocation
summary the nsidomgeogeolocation interface provides access to geolocation in
formation.
... watchposition() similar to getcurrentposition(), except it continues to call the callback with updated position in
formation periodically until clearwatch() is called.
... unsigned short watchposition( in nsidomgeopositioncallback successcallback, [optional] in nsidomgeopositionerrorcallback errorcallback, [optional] in nsidomgeopositionoptions options ); parameters successcallback an nsidomgeopositioncallback that is to be called whenever new position in
formation is available.
nsIDOMGeoPositionCallback
the nsidomgeopositioncallback interface is called when updated position in
formation is available.
... last changed in gecko 1.9.1 (firefox 3.5 / thunderbird 3.0 / seamonkey 2.0) method overview void handleevent(in nsidomgeoposition position); methods handleevent() called when new position in
formation is available.
... void handleevent( in nsidomgeoposition position ); parameters position an nsidomgeoposition object indicating the updated location in
formation.
nsIDirIndexListener
they can then be trans
formed into an output
format (such as rdf, html and so on) inherits from: nsisupports last changed in gecko 1.8 (firefox 1.5 / thunderbird 1.5 / seamonkey 1.0) method overview void onindexavailable(in nsirequest arequest, in nsisupports actxt, in nsidirindex aindex); void onin
formationavailable(in nsirequest arequest, in nsisupports actxt, in astring ainfo); methods onindexavailable() called for each directory entry.
... onin
formationavailable() called for each in
formation line.
... void onin
formationavailable( in nsirequest arequest, in nsisupports actxt, in astring ainfo ); parameters arequest the request.
nsIFaviconDataCallback
1.0 66 introduced gecko 2.0 inherits from: nsisupports last changed in gecko 2.0 (firefox 4 / thunderbird 3.3 / seamonkey 2.1) method overview void oncomplete(in nsiuri auri, in unsigned long adatalen, [const,array,size_is(adatalen)] in octet adata, in autf8string amimetype); methods oncomplete() called when the required favicon's in
formation is available.
...the caller will receive the most in
formation we can gather on the icon, but it's not guaranteed that all of them will be set.
...it's up to the caller to check adatalen > 0 before using any data-related in
formation like mime-type or data itself.
nsIFeedContainer
see nsifeedresult.registerextensionprefix() for more in
formation about prefixes.
...not all feeds have these, but all major feed
formats have ids for each entry.
... updated astring a string containing the date the feed or entry was last updated, in rfc822
form.
nsIHttpChannel
referrerpolicy read only unsigned long the referrer policy in use for this channel, indicated by one of the constants listed above methods getoriginalresponseheader() get the value of a particular original response header, that is, in the same
form as it came from the network.
...this method allows, for example, the html content sink to in
form the http channel about http-equiv headers found in html <meta> tags.
... visitoriginalresponseheaders() call this method to visit all original response headers, that is, in the same
form as they came from the network.
nsIHttpChannelInternal
localaddress autf8string the local ip address to which the channel is bound, in the same
format produced by pr_netaddrtostring().
... obsolete since gecko 1.9 remoteaddress autf8string the ip address of the remote host to which this channel is bound, in the same
format produced by pr_netaddrtostring().
...setcookie() helper method to set a cookie with a consumer-provided cookie header, but using the channel's other in
formation (uri's, prompters, date headers and so on.).
nsILoginMetaInfo
this can be any arbitrary string, but a
format as created by nsiuuidgenerator is recommended.
... timelastused unsigned long long the time, in unix epoch milliseconds, when the login was last submitted in a
form or used to begin an http auth session.
... timesused unsigned long the number of times the login was submitted in a
form or used to begin an http auth session.
nsINavHistoryResultNode
toolkit/components/places/public/nsinavhistoryservice.idlscriptable this is the base class for all places history result nodes, containing the uri, title, and other general in
formation.
...for hosts, this is the total number of the children under it, rather than the total number of times the host has been accessed (getting that in
formation would require an additional query, so for per
formance reasons that in
formation isn't given by default).
... propertybag nsiwritablepropertybag you can use this to associate temporary in
formation with the result node.
nsIPrincipal
note that this may be empty; prefer to get the certificate itself and get this in
formation from it, since that may provide more in
formation.
...it may have a number of different names all concatenated together with some in
formation on what they mean in between).
...the order is significant; if an operation is per
formed on a set of capabilities, the minimum is computed.
nsIPropertyBag
examples get user agent in
formation (operating system specifics.
...cation:geolocation language:"en-us" mimetypes:mimetypearray mozalarms:null mozapps:xpcwrappednative_nohelper mozcameras:cameramanager mozconnection:mozconnection mozcontacts:contactmanager mozid:null mozkeyboard:xpcwrappednative_nohelper mozpay:null mozpermissionsettings:null mozphonenumberservice:phonenumberservice mozpower:mozpowermanager moztcpsocket:null online:true oscpu:"windows nt 5.1" plat
form:"win32" plugins:pluginarray product:"gecko" productsub:"20100101" useragent:"mozilla/5.0 (windows nt 5.1; rv:30.0) gecko/20100101 firefox/30.0" vendor:"" vendorsub:"" __proto__:navigatorprototype from here we can easily see the operating system version.
...also pay attention to their plat
form-specific meaning (e.g.
nsIScriptableIO
file and stream guide: [ nsiscriptableio | accessing files | getting file in
formation | reading from files | writing to files | moving, copying and deleting files | uploading and downloading files | working with directories ] important note: the pages from the file and stream guide use the io object (nsiscriptableio), which was not available in any released version of the plat
form (pending some fixes).
...this properly allows plat
form-independent path construction.
...note: you should avoid using this method, since file paths are plat
form-dependent and non-portable.
nsISelectionPrivate
see the idl file linked above for up-to-date in
formation.
... void startbatchchanges(); wstring tostringwith
format(in string
formattype, in unsigned long flags, in print32 wrapcolumn); attributes attribute type description cancacheframeoffset boolean frame offset cache can be used just during calling nseditor::endplaceholdertransaction.
... tostringwith
format() wstring tostringwith
format( in string
formattype, in unsigned long flags, in print32 wrapcolumn ); parameters
formattype flags wrapcolumn return value ...
nsIStandardURL
netwerk/base/public/nsistandardurl.idlscriptable this interface defines the interface to an url with the standard file path
format common to protocols like http, ftp, and file.
...adefaultport if the port parsed from the url string matches this port, then the port will be removed from the canonical
form of the url.
...if null, then provide abaseuri implements this interface, the origin charset of abaseuri will be assumed, otherwise defaulting to utf-8 (that is, no charset trans
formation from aspec).
nsIStructuredCloneContainer
method overview nsivariant deserializetovariant(); astring getdataasbase64(); void initfrombase64(in astring adata,in unsigned long a
formatversion); void initfromvariant(in nsivariant adata); attributes attribute type description
formatversion unsigned long get the version of the structured clone algorithm which was used to generate this container's serialized buffer.
...void initfrombase64( in astring adata, in unsigned long a
formatversion ); parameters adata a base-64-encoded byte stream.
... a
formatversion the version of the structured clone algorithm which was used to generate adata.
nsISupports proxies
for more in
formation about alternatives, see making cross-thread calls using runnables.
...calls on object created with this flag will return immediately and you will lose all return in
formation.
...ns_release(ptestobj); pproxy->bar(); ns_release(pproxy); original document in
formation author: doug turner last updated date: january 27, 2007 copyright in
formation: portions of this content are © 1998–2007 by individual mozilla.org contributors; content available under a creative commons license | details.
nsISyncJPAKE
ahmac256key); void round1(in acstring asignerid, out acstring agx1, out acstring agv1, out acstring ar1, out acstring agx2, out acstring agv2, out acstring ar2); void round2(in acstring apeerid, in acstring apin, in acstring agx3, in acstring agv3, in acstring ar3, in acstring agx4, in acstring agv4, in acstring ar4, out acstring aa, out acstring agva, out acstring ara); methods final() per
form the final step of the jpake exchange.
... round1() per
form first round of the jpake exchange.
... round2() per
form second round of the jpake exchange.
nsITXTToHTMLConv
method overview void pre
formathtml(in boolean value); void settitle(in wstring text); prior versions of the interface named the methods using the initialcaps style instead of the intercaps style.
... methods pre
formathtml() specifies whether or not to wrap the resulting html in an <pre> block.
... void pre
formathtml( in boolean value ); parameters value true to wrap the resulting html in a <pre> block.
nsITaskbarPreviewController
see drawpreview() for more in
formation.
...see drawthumbnail() for more in
formation.
...see drawpreview() for more in
formation.
nsITreeBoxObject
the nsitreeboxobject interface contains in
formation about the size and layout of a tree.
... further in
formation about trees is given in the xul tutorial.
...in
form the tree about this change by calling rowcountchanged(rowindex+1, -1); beginupdatebatch() notify the tree that the view is about to per
form a batch update, that is, add, remove or invalidate several rows at once.
nsIWebNavigation
when a page is loaded from session history, all content is loaded from the cache (if available) and page state (such as
form values and scroll position) is restored.
...when a page is loaded from session history, all content is loaded from the cache (if available) and page state (such as
form values and scroll position) is restored.
...the http header stream is
formatted as: ( header \r\n )* this parameter may be null.
nsIWindowMediator
more in
formation can be found by searching mxr for broken_wm_z_order) getzorderxulwindowenumerator() identical to getzorderdomwindowenumerator() except returns an enumerator of nsixulwindow.
...the implementation will assume a window's z level to be nsixulwindow.normalz until it has been in
formed of a different level.
...in
form windowmediator.
nsIXPConnect
per
forms an operation over all of |object|'s xows such as clearing their scopes or updating their concept of the current principal.
... void updatexows( in jscontextptr ajscontext, in nsixpconnectwrappednative aobject, in pruint32 away ); parameters ajscontext a context to use to per
form js operations.
... away what operation to per
form.
nsIAbCard/Thunderbird3
axnumbertype pagernumber, pagernumbertype cellularnumber, cellularnumbertype jobtitle, department, company _aimscreenname dates: anniversaryyear, anniversarymonth, anniversaryday birthyear, birthmonth, birthday webpage1 (work), webpage2 (home) custom1, custom2, custom3, custom4 notes integral properties: lastmodifieddate popularityindex prefermail
format (see nsiabprefermail
format) boolean properties: allowremotecontent inherits from: nsiabitem method overview nsivariant getproperty(in autf8string name, in nsivariant defaultvalue); [noscript] astring getpropertyasastring(in string name); [noscript] autf8string getpropertyasautf8string(in string name); [noscript] pruint32 getpropertyasuint...
... these functions are marked <code>[noscript] since xpcconnect per
forms automatic type conversion on nsivariant such that they are not needed for scripts, only for c++ callers.
... translateto() translates a card into a specific
format.
xpidl
xpidl is a tool for generating xpcom interface in
formation, based on xpidl interface description files.
... it generates: c++ header files (.h), with a commented template for full c++ implementation of the interface xpconnect typelib files (.xpt), with runtime type in
formation to dynamically call xpcom objects through xpconnect note: starting in gecko 9.0, xpidl has been replaced with pyxpidl in the gecko sdk.
...please check the build documentation for further in
formation on where to get libidl and glib.
XPIDL
note: starting in gecko 9.0, the older xpidl utility, which was previously used to generate c++ header files, typelib in
formation, and so forth has been replaced with pyxpidl in the gecko sdk.
... xpidl:syntax (now up to date again) xpidl syntax (out of date) xpidl author's guide (not as out of date) explanation of idl semantics a full guide to the syntax can be found at xpidl:syntax, which is written in an abnf
form.
... the equivalent representations of all idl types in native code is given in the earlier tables; parameters of type inout follow their out
form.
XSLT 2.0
although xslt 2.0 is not natively supported in firefox, it is possible via saxon-b (java) or, more recently, saxon-ce (javascript) to per
form xslt 2.0.
... saxon-b the xsl results extension uses the new incarnation of liveconnect (handled by java 1.6v12+ instead of mozilla-specific code) to connect with the java-based saxon-b library, and adds support for having xslt per
formed automatically when visiting a page with the appropriate xslt processing instruction (and which isn't processed by firefox's own xslt 1.0 processor).
... for developers saxon-ce a javascript api is provided for initiating an xslt 2.0 trans
form from a web page.
Address book sync client design
pizzarro <rhp@netscape.com> contents overview client side sync logic public interfaces overview there is an component available in the mozilla tree for per
forming synchronization operations against a server based address book.
... ab sync logic mork ab database sync protocol encoding sync protocol decoding http "post" api mozilla networking client side sync logic the client synchronization logic defers to the server pe
forming some intelligence in handling duplicate entries for the sync process.
... the static in
formation that is held on the client for address book sync operations is stored in a file called absync.dat which is located in the root directory of the users profile in
formation.
Mail client architecture overview
messages - messages are always stored and streamed in rfc822
format.
... whenever multiple messages are stored in one file, the berkeley mailbox
format is used.
... url display and dispatching - in order to per
form network operations such as downloading new mail, copying and moving messages, and displaying messages from a remote server, the url system interacts with necko and reflects it's state to the mail window.
Building a Thunderbird extension 1: introduction
it shares many of the technologies used by mozilla firefox, including javascript, the gecko layout engine, the xul xml user interface language and the xpcom cross-plat
form component object model.
...see developer.thunderbird.net for newer in
formation.
...the tutorial has the following pages: introduction (this page) the extension filesystem (setting up your local system) install manifest (the install.rdf file that contains meta-in
formation about the extension) chrome manifest (list of packages and overlays) xul (the xml user interface language that is used to modify the thunderbird user interface) adding javascript (explains how to add some simple javascript to your thunderbird extension) installing locally (enabling the extension on your local thunderbird instance) packaging (making a distribution package that contains the extension) distributing (from your own site or from http://addons.mozilla.org/) this tut...
Building a Thunderbird extension 6: Adding JavaScript
see developer.thunderbird.net for newer in
formation.
...it then uses javascript's date class to get the current date, which it converts into a string that has the
format of yyyy.mm.dd.
...finally the label of our panel is set to "date: " and concatenated with the date string that contains the
formatted date.
Demo Addon
see developer.thunderbird.net for newer in
formation.
...it lets you iterate over any collection and trans
forms your collection elements in the given objects, to use fixiterator, you have to import it with cu.import("resource:///modules/iteratorutils.jsm");.
... demo 2 - find the inbox this demo shows various in
formation: it lists all folders of an account (in this case the first one) and marks the inbox folder with a *.
Working with data
creating uninitialized cdata objects there are three
forms of the syntax for creating cdata objects without immediately assigning them a value: var mycdataobj = new type; var mycdataobj = new type(); var mycdataobj = type(); these all do the same thing: they return a new cdata object of the specified type, whose data buffer has been populated entirely with zeroes.
... for example: var jsstring = timestr.readstring(); converting javascript strings to c happily, converting javascript strings to c
formatted strings is easy; just create a character array containing the javascript string: var myutf8string = ctypes.char.array()("original string."); this creates a utf-8
format null-terminated string in the character array named myutf8string.
...for example: var num = ctypes.int64.join(-0x12345678, 0x90abcdef); per
forming arithmetic with 64-bit values the int64 and uint64 objects don't provide any methods for per
forming arithmetic, which means you'll have to do it yourself by pulling out the high and low 32-bit portions and doing math on them, then joining them back together if necessary to get the complete result.
Inspecting web app manifests - Firefox Developer Tools
you also need to make sure the json inside the file is of the correct
format.
... inspecting your manifest if your manifest is deployed successfully, you should end up with a display like the following on the manifest view: from here, you can inspect all the in
formation in the manifest in an easy-to-digest way, making sure that it is all correct.
... it also loads all the icon files into the view, so you can see the relative size of them all, and any other in
formation associated with them.
Debugging service workers - Firefox Developer Tools
debugging your service worker in any case, when the service worker is successfully registered, you'll see in
formation about it displayed in the application > service workers view (along with any other service workers registered on the same domain): this gives you a variety of in
formation about your service worker: the url that the service worker is registered on.
... when your service worker is running, a debug button is available next to the source in
formation (it is disabled when the service worker is stopped).
...if you want to see a list of in
formation concerning all the service workers registered on your browser, you can visit about:debugging#/runtime/this-firefox.
Debugger - Firefox Developer Tools
allowwasmbinarysource a boolean value indicating whether webassembly sources will be available in binary
form.
...in some cases, the code coverage might expose in
formation which pre-date the modification of this flag.
... onerror(frame,report) spidermonkey is about to report an error inframe.report is an object describing the error, with the following properties: message the fully
formatted error message.
Network monitor toolbar - Firefox Developer Tools
copy all as har copies the current contents of the network log to the clipboard in har
format.
... a second toolbar area at the bottom of the network monitor provides: an icon to launch per
formance analysis.
... network monitor features the following articles cover different aspects of using the network monitor: network request list network request details network traffic recording per
formance analysis throttling ...
CSS Flexbox Inspector: Examine Flexbox layouts - Firefox Developer Tools
in the infobar when you hover over an element in the html pane, you will see a tooltip that gives you more in
formation about the element.
... when you hover over a flex container or flex item, the tooltip includes the appropriate in
formation.
... if you click on the item, the display shifts to show details about that element: this view shows in
formation about the calculations for the size of the selected flex item: a diagram visualizing the sizing of the flex item content size - the size of the component without any restraints imposed on it by its parent flexibility - how much a flex item grew or shrunk based on its flex-grow value when there is extra free space or its flex-shrink value when there is not enough space minimum size (onl...
Sorting algorithms comparison - Firefox Developer Tools
this article describes a simple example program that we use in two of the per
formance guides: the guide to the call tree and the guide to the flame chart.
... this program compares the per
formance of three different sorting algorithms: bubble sort selection sort quicksort it consists of the following functions: sortall() top-level function.
...you can also download the specific profile we discuss - just import it to the per
formance tool if you want to follow along.
UI Tour - Firefox Developer Tools
the per
formance tool's ui consists of 4 main pieces: toolbar recordings pane recording overview details pane, which may contain any one of: waterfall call tree flame chart toolbar the toolbar contains buttons to: start and stop a recording import a recording you previously saved clear the recordings pane.
... waterfall the waterfall presents a view of the work the browser is doing during the recording: executing javascript, updating the css, updating the page layout, and per
forming repaints.
... the allocations view only appears if you checked "record allocations" in the per
formance tool settings, before recording a profile: to learn much more about the allocations view, see the separate allocations page.
Responsive Design Mode - Firefox Developer Tools
in
formation for the selected device is centered over the display.
... now when you change such settings for the first time, you are given a warning message that tells you these reloads are no longer automatic, and in
formed about how you can make them automatic.
... the characteristics emulated are: download speed upload speed minimum latency the table below lists the numbers associated with each network type, but please do not rely on this feature for exact per
formance measurements; it's intended to give an approximate idea of the user experience in different conditions.
Settings - Firefox Developer Tools
indent using spaces when checked, indentation will be per
formed using spaces, when off, the editor will use tabs instead.
... keybindings choose the default codemirror keybindings or keybindings from one of several popular editors: vim emacs sublime text advanced settings show gecko plat
form data a setting to control whether or not profiles should include gecko plat
form symbols.
... disable http cache disable the browser http cache to simulate first-load per
formance in all tabs that have the toolbox open.
Web Console Helpers - Firefox Developer Tools
pprint() obsolete since gecko 74
formats the specified value in a readable way; this is useful for dumping the contents of objects and arrays.
...if you don't supply a filename, the image file will be named with the following
format: screen shot yyy-mm-dd at hh.mm.ss.png the command has the following optional parameters: command type description --clipboard boolean when present, this parameter will cause the screenshot to be copied to the clipboard.
... please refer to the console api for more in
formation about logging from content.
Rich output - Firefox Developer Tools
when the web console prints objects, it includes a richer set of in
formation than just the object's name.
... in particular, it: provides extra in
formation for certain types enables detailed examination of the object's properties provides richer in
formation for dom elements, and enables you to select them in the inspector type-specific rich output the web console provides rich output for many object types, including the following: object array date promise regexp window document element event examining object properties when an object is logged to the console it has a right-pointing triangle next to it, indicating that it can be expanded.
...for example, by expanding the array in the above list, i get the following: console.log(todolist) (4) […] 0: object { status: "done", description: "morning pages", datecreated: 1552404478137 } 1: object { status: "in progress", description: "refactor styles", datecreated: 1552404493169 } 2: object { status: "to do", description: "create feedback
form", datecreated: 1552404512630 } 3: object { status: "to do", description: "normalize table", datecreated: 1552404533790 } length: 4 <prototype>: array [] debugger eval code:1:9 undefined highlighting and inspecting dom nodes if you hover the mouse over any dom element in the console output, it's highlighted on the page: in the screenshot above you'll also see a blue "target" icon ne...
Web Console remoting - Firefox Developer Tools
see evalinglobalwithbindings() for in
formation about bindings.
...cket whenever a new network request starts being logged the networkevent packet is sent: { "from": "conn0.console10", "type": "networkevent", "eventactor": { "actor": "conn0.netevent14", "starteddatetime": "2012-09-17t19:50:03.699z", "url": "http://localhost/~mihai/mozilla/test2.css", "method": "get" "isxhr": false, "private": false } } this packet is used to in
form the web console of a new network event.
... the networkeventactor the new network event actor stores further request and response in
formation.
Firefox Developer Tools
this section contains detailed guides to all of the tools as well as in
formation on how to debug firefox for android, how to extend devtools, and how to debug the browser as a whole.
... the ellipsis menu on the right-hand side of developer tools contains several commands that let you per
form actions or change tool settings.
... per
formance tools analyze your site's general responsiveness, javascript, and layout per
formance.
AbstractRange - Web APIs
there are two such interfaces: range the range interface has been around for a long time and has only recently been redefined to be based upon abstractrange as the need arose to define other
forms of range data.
...this is useful when you need to specify a range that will only be used once, since it avoids the per
formance and resource impact of the more complex range interface.
... third, using node-relative positions to define the start and end positions will generally be easier to make per
form well.
AudioContext.getOutputTimestamp() - Web APIs
audiotimestamp.per
formancetime: an estimation of the moment when the sample frame corresponding to the stored contexttime value was rendered by the audio output device, in the same units and origin as per
formance.now().
... per
formancetime: a point in the time coordinate system of a per
formance interface; the time after the document containing the audio context was first rendered examples in the following code we start to play an audio file after a play button is clicked, and start off a requestanimationframe loop running, which constantly outputs the contexttime and per
formancetime.
....start(0); play.setattribute('disabled', 'disabled'); raf = requestanimationframe(outputtimestamps); }); stop.addeventlistener('click', () => { source.stop(0); play.removeattribute('disabled'); cancelanimationframe(raf); }); // function to output timestamps function outputtimestamps() { let ts = audioctx.getoutputtimestamp() console.log('context time: ' + ts.contexttime + ' | per
formance time: ' + ts.per
formancetime); raf = requestanimationframe(outputtimestamps); } specifications specification status comment web audio apithe definition of 'getoutputtimestamp()' in that specification.
AudioNodeOptions - Web APIs
(see audionode.channelcount for more in
formation.) its usage and precise definition depend on the value of audionodeoptions.channelcountmode.
...(see audionode.channelcountmode for more in
formation including default values.) channelinterpretation optional represents an enumerated value describing the meaning of the channels.
...(see audionode.channelcountmode for more in
formation including default values.) specifications specification status comment web audio apithe definition of 'audionodeoptions' in that specification.
BasicCardRequest - Web APIs
instead of using this property, it is up to the server to check support for the card given the in
formation coded into the account number.
... the first of these three (supportedinstruments in the example below) contains a data property that has to con
form to the structure defined by the basiccardrequest dictionary.
...this has to con
form to the structure defined by the basiccardresponse dictionary, and may look something like this: { "cardnumber' : '9999999999999999", "cardholdername' : 'mr dick straw", "cardsecuritycode" : "999", "expirymonth" : "07", "expiryyear" : "2021", "billingaddress" : { "country" : "gb", // etc.
characteristic - Web APIs
full support 57notes disabled notes linux and versions of windows earlier than 10.disabled from version 57: this feature is behind the #enable-experimental-web-plat
form-features preference (needs to be set to enabled).
... full support ≤79notes disabled notes linux and versions of windows earlier than 10.disabled from version ≤79: this feature is behind the #enable-experimental-web-plat
form-features preference (needs to be set to enabled).
... full support 44notes disabled notes linux and versions of windows earlier than 10.disabled from version 44: this feature is behind the #enable-experimental-web-plat
form-features preference (needs to be set to enabled).
readValue() - Web APIs
full support 57notes disabled notes linux and versions of windows earlier than 10.disabled from version 57: this feature is behind the #enable-experimental-web-plat
form-features preference (needs to be set to enabled).
... full support ≤79notes disabled notes linux and versions of windows earlier than 10.disabled from version ≤79: this feature is behind the #enable-experimental-web-plat
form-features preference (needs to be set to enabled).
... full support 44notes disabled notes linux and versions of windows earlier than 10.disabled from version 44: this feature is behind the #enable-experimental-web-plat
form-features preference (needs to be set to enabled).
uuid - Web APIs
full support 57notes disabled notes linux and versions of windows earlier than 10.disabled from version 57: this feature is behind the #enable-experimental-web-plat
form-features preference (needs to be set to enabled).
... full support ≤79notes disabled notes linux and versions of windows earlier than 10.disabled from version ≤79: this feature is behind the #enable-experimental-web-plat
form-features preference (needs to be set to enabled).
... full support 44notes disabled notes linux and versions of windows earlier than 10.disabled from version 44: this feature is behind the #enable-experimental-web-plat
form-features preference (needs to be set to enabled).
value - Web APIs
full support 57notes disabled notes linux and versions of windows earlier than 10.disabled from version 57: this feature is behind the #enable-experimental-web-plat
form-features preference (needs to be set to enabled).
... full support ≤79notes disabled notes linux and versions of windows earlier than 10.disabled from version ≤79: this feature is behind the #enable-experimental-web-plat
form-features preference (needs to be set to enabled).
... full support 44notes disabled notes linux and versions of windows earlier than 10.disabled from version 44: this feature is behind the #enable-experimental-web-plat
form-features preference (needs to be set to enabled).
writeValue() - Web APIs
full support 57notes disabled notes linux and versions of windows earlier than 10.disabled from version 57: this feature is behind the #enable-experimental-web-plat
form-features preference (needs to be set to enabled).
... full support ≤79notes disabled notes linux and versions of windows earlier than 10.disabled from version ≤79: this feature is behind the #enable-experimental-web-plat
form-features preference (needs to be set to enabled).
... full support 44notes disabled notes linux and versions of windows earlier than 10.disabled from version 44: this feature is behind the #enable-experimental-web-plat
form-features preference (needs to be set to enabled).
Determining the dimensions of elements - Web APIs
most of the time these are the same as width and height of element.getboundingclientrect(), when there aren't any trans
forms applied to the element.
... in case of trans
forms, the offsetwidth and offsetheight returns the element's layout width and height, while getboundingclientrect() returns the rendering width and height.
... as an example, if the element has width: 100px; and trans
form: scale(0.5); the getboundingclientrect() will return 50 as the width, while offsetwidth will return 100.
Cache.matchAll() - Web APIs
options optional an options object allowing you to set specific control options for the matching per
formed.
... if set to true, the ?value=bar part of http://foo.com/?value=bar would be ignored when per
forming a match.
... ignorevary: a boolean that when set to true tells the matching operation not to per
form vary header matching — i.e.
CanvasRenderingContext2D.rotate() - Web APIs
the canvasrenderingcontext2d.rotate() method of the canvas 2d api adds a rotation to the trans
formation matrix.
... html <canvas id="canvas"></canvas> javascript const canvas = document.getelementbyid('canvas'); const ctx = canvas.getcontext('2d'); // point of trans
form origin ctx.arc(0, 0, 5, 0, 2 * math.pi); ctx.fillstyle = 'blue'; ctx.fill(); // non-rotated rectangle ctx.fillstyle = 'gray'; ctx.fillrect(100, 0, 80, 20); // rotated rectangle ctx.rotate(45 * math.pi / 180); ctx.fillstyle = 'red'; ctx.fillrect(100, 0, 80, 20); // reset trans
formation matrix to the identity matrix ctx.settrans
form(1, 0, 0, 1, 0, 0); result the center of rotation is blue.
... const canvas = document.getelementbyid('canvas'); const ctx = canvas.getcontext('2d'); // non-rotated rectangle ctx.fillstyle = 'gray'; ctx.fillrect(80, 60, 140, 30); // matrix trans
formation ctx.translate(150, 75); ctx.rotate(math.pi / 2); ctx.translate(-150, -75); // rotated rectangle ctx.fillstyle = 'red'; ctx.fillrect(80, 60, 140, 30); result the non-rotated rectangle is gray, and the rotated rectangle is red.
CanvasRenderingContext2D.translate() - Web APIs
the canvasrenderingcontext2d.translate() method of the canvas 2d api adds a translation trans
formation to the current matrix.
... syntax void ctx.translate(x, y); the translate() method adds a translation trans
formation to the current matrix by moving the canvas and its origin x units horizontally and y units vertically on the grid.
... const canvas = document.getelementbyid('canvas'); const ctx = canvas.getcontext('2d'); // moved square ctx.translate(110, 30); ctx.fillstyle = 'red'; ctx.fillrect(0, 0, 80, 80); // reset current trans
formation matrix to the identity matrix ctx.settrans
form(1, 0, 0, 1, 0, 0); // unmoved square ctx.fillstyle = 'gray'; ctx.fillrect(0, 0, 80, 80); result the moved square is red, and the unmoved square is gray.
Using images - Web APIs
external images can be used in any
format supported by the browser, such as png, gif, or jpeg.
...in its most basic
form it looks like this: drawimage(image, x, y) draws the canvasimagesource specified by the image parameter at the coordinates (x, y).
...another advantage is that you don't need to load every image individually, which can improve load per
formance.
Using channel messaging - Web APIs
note: for more in
formation and ideas, the ports as the basis of an object-capability model on the web section of the spec is a useful read.
...it looks like so: creating the channel in the main page of the demo, we have a simple
form with a text input for entering messages to be sent to an <iframe>.
... when our button is clicked, we prevent the
form from submitting as normal and then send the value entered in our text input to the iframe via the messagechannel.
DOMHighResTimeStamp - Web APIs
usage notes you can get the current timestamp value—the time that has elapsed since the context was created—by calling the per
formance method now().
... example to determine how much time has elapsed since a particular point in your code, you can do something like this: let starttime = per
formance.now(); /* ...
...*/ let elapsedtime = per
formance.now() - starttime; upon completion, the value of elapsedtime is the number of milliseconds that have elapsed since you recorded the starting time in line 1.
DOMMatrix() - Web APIs
syntax var dommatrix = new dommatrix([init]) parameters init optional a string containing a sequence of numbers or an array of numbers specifying the matrix you want to create, or a css trans
form string.
... example this example creates a dommatrix to use as an argument for calling point.matrixtrans
form().
... var point = new dompoint(5, 4); var scalex = 2; var scaley = 3; var translatex = 12; var translatey = 8; var angle = math.pi / 2; var matrix = new dommatrix([ math.sin(angle) * scalex, math.cos(angle) * scalex, -math.sin(angle) * scaley, math.cos(angle) * scaley, translatex, translatey ]); var trans
formedpoint = point.matrixtrans
form(matrix); specifications specification status comment geometry interfaces module level 1the definition of 'dommatrix' in that specification.
DataTransfer.getData() - Web APIs
syntax datatransfer.getdata(
format); arguments
format a domstring representing the type of data to retrieve.
... return value domstring a domstring representing the drag data for the specified
format.
... if the drag operation has no data or the operation has no data for the specified
format, this method returns an empty string.
DataTransfer.setData() - Web APIs
syntax void datatransfer.setdata(
format, data); arguments
format a domstring representing the type of the drag data to add to the drag object.
...width=device-width"> <style> div { margin: 0em; padding: 2em; } #source { color: blue; border: 1px solid black; } #target { border: 1px solid black; } </style> <script> function dragstart_handler(ev) { console.log("dragstart"); // change the source element's background color to signify drag has started ev.currenttarget.style.border = "dashed"; // set the drag's
format and data.
...datatransfer.setdata("text/plain", ev.target.id); } function dragover_handler(ev) { console.log("dragover"); ev.preventdefault(); } function drop_handler(ev) { console.log("drop"); ev.preventdefault(); // get the data, which is the id of the drop target var data = ev.datatransfer.getdata("text"); ev.target.appendchild(document.getelementbyid(data)); // clear the drag data cache (for all
formats/types) ev.datatransfer.cleardata(); } </script> <body> <h1>examples of <code>datatransfer</code>: <code>setdata()</code>, <code>getdata()</code>, <code>cleardata()</code></h1> <div> <p id="source" ondragstart="dragstart_handler(event);" draggable="true"> select this element, drag it to the drop zone and then release the selection to move the element.</p> </div> <div id="target" ond...
Document.cookie - Web APIs
write a new cookie document.cookie = newcookie; in the code above, newcookie is a string of
form key=value.
... ;max-age=max-age-in-seconds (e.g., 60*60*24*365 or 31536000 for a year) ;expires=date-in-gmtstring-
format if neither expires nor max-age specified it will expire at the end of session.
... see date.toutcstring() for help
formatting this value.
Document.querySelectorAll() - Web APIs
see locating dom elements using selectors for more in
formation about using selectors to identify elements.
...see escaping special characters for more in
formation.
... in this example, when selecting .outer .inner in the context the <div> with the class select, the element with the class .inner is still found, even though .outer is not a descendant of the base element on which the search is per
formed (.select).
DocumentOrShadowRoot.activeElement - Web APIs
which elements are focusable varies depending on the plat
form and the browser's current configuration.
... example html <p>select some text from one of the text areas below:</p> <
form> <textarea name="ta-example-one" id="ta-example-one" rows="7" cols="40">this is text area one.
...morbi sed euismod diam.</textarea> </
form> <p>active element id: <b id="output-element"></b></p> <p>selected text: <b id="output-text"></b></p> javascript function onmouseup(e) { const activetextarea = document.activeelement; const selection = activetextarea.value.substring( activetextarea.selectionstart, activetextarea.selectionend ); const outputelement = document.getelementbyid('output-element'); const outputtext = d...
Examples of web and XML development using the DOM - Web APIs
html> example 2: image attributes <!doctype html> <html lang="en"> <head> <title>modifying an image border</title> <script> function setborderwidth(width) { document.getelementbyid("img1").style.borderwidth = width + "px"; } </script> </head> <body> <p> <img id="img1" src="image1.gif" style="border: 5px solid green;" width="100" height="100" alt="border test"> </p> <
form name="
formname"> <input type="button" value="make border 20px-wide" onclick="setborderwidth(20);" /> <input type="button" value="make border 5px-wide" onclick="setborderwidth(5);" /> </
form> </body> </html> example 3: manipulating styles in this simple example, some basic style properties of an html paragraph element are accessed using the style object on the element and that object's cs...
... <!doctype html> <html lang="en"> <head> <title>changing color and font-size example</title> <script> function changetext() { var p = document.getelementbyid("pid"); p.style.color = "blue" p.style.fontsize = "18pt" } </script> </head> <body> <p id="pid" onclick="window.location.href = 'http://www.cnn.com/';">linker</p> <
form> <p><input value="rec" type="button" onclick="changetext();" /></p> </
form> </body> </html> example 4: using stylesheets the stylesheets property on the document object returns a list of the stylesheets that have been loaded on that document.
...alue = w_style; var txtbackgroundcolor = document.getelementbyid("t3"); var b_style = document.defaultview.getcomputedstyle(refdiv, null).getpropertyvalue("background-color"); txtbackgroundcolor.value = b_style; } </script> <style> #d1 { margin-left: 10px; background-color: rgb(173, 216, 230); height: 20px; max-width: 20px; } </style> </head> <body> <div id="d1"> </div> <
form action=""> <p> <button type="button" onclick="cstyles();">getcomputedstyle</button> height<input id="t1" type="text" value="1" /> max-width<input id="t2" type="text" value="2" /> bg-color<input id="t3" type="text" value="3" /> </p> </
form> </body> </html> example 7: displaying event object properties this example uses dom methods to display all the properties of the window...
Using the W3C DOM Level 1 Core - Web APIs
it's a reasonably clear spec, although it is
formal.
... original document in
formation author(s): l.
... david baron <dbaron at dbaron dot org> copyright in
formation: © 1998-2005 by individual mozilla.org contributors; content available under a creative commons license ...
EXT_disjoint_timer_query - Web APIs
for more in
formation, see also using extensions in the webgl tutorial.
... ext.gpu_disjoint_ext a glboolean indicating whether or not the gpu per
formed any disjoint operation.
... ext.getqueryext() returns in
formation about a query target.
Element.classList - Web APIs
fineproperty(window.element.prototype, "classlist", { enumerable: 1, get: function(val){ if (!hasownprop.call(this, "classlist")) polyfillclasslist(this); return this.classlist; }, configurable: 0, set: function(val){this.classname = val} }); } catch(e) { // less per
formant fallback for older browsers (ie 6-8): window[" ucl"] = polyfillclasslist; // the below code ensures polyfillclasslist is applied to all current and future elements in the doc.
...however, such actions would not work in ie6-ie8 and, in ie9, slow the per
formance of the entire webpage to a snail's crawl, making these modifications completely impractical for this polyfill.
... a minor note is that in ie6-7, this polyfill uses the window[" ucl"] property on the window object for communicating with the css expressions, the x-uclp css property on all elements, and the element[" ucl"] property on all elements to allow garbage collection and boost per
formance.
Element: click event - Web APIs
this counter resets after a short interval without any clicks occurring; the specifics of how long that interval is may vary from browser to browser and across plat
forms.
... the interval is also likely to be affected by user preferences; for example, accessibility options may extend this interval to make it easier to per
form multiple clicks with adaptive interfaces.
... safari mobile considers the following elements to be typically interactive (and thus they aren't affected by this bug): <a> (but it must have an href) <area> (but it must have an href) <button> <img> <input> <label> (but it must be associated with a
form control) <textarea> this list is incomplete; you can help mdn by doing further testing/research and expanding it.
Element.querySelectorAll() - Web APIs
see locating dom elements using selectors for more in
formation about using selectors to identify elements.
...see escaping special characters for more in
formation.
... in this example, when selecting ".outer .inner" in the context the <div> with the class "select", the element with the class ".inner" is still found, even though .outer is not a descendant of the base element on which the search is per
formed (".select").
Event.preventDefault() - Web APIs
<code>preventdefault()</code> won't let you check this!<br>"; event.preventdefault(); }, false); html <p>please click on the checkbox control.</p> <
form> <label for="id-checkbox">checkbox:</label> <input type="checkbox" id="id-checkbox"/> </
form> <div id="output-box"></div> result stopping keystrokes from reaching an edit field the following example demonstrates how invalid text input can be stopped from reaching the input field with preventdefault().
... nowadays, you should usually use native html
form validation instead.
... html here's the
form: <div class="container"> <p>please enter your name using lowercase letters only.</p> <
form> <input type="text" id="my-textbox"> </
form> </div> css we use a little bit of css for the warning box we'll draw when the user presses an invalid key: .warning { border: 2px solid #f39389; border-radius: 2px; padding: 10px; position: absolute; background-color: #fbd8d4; color: #3b3c40; } javascript and here's the javascript code that does the job.
EventSource - Web APIs
an eventsource instance opens a persistent connection to an http server, which sends events in text/event-stream
format.
... once the connection is opened, incoming messages from the server are delivered to your code in the
form of events.
...that makes them an excellent choice when there's no need to send data from the client to the server in message
form.
Introduction to the File and Directory Entries API - Web APIs
it can improve per
formance by letting an app pre-fetch assets in the background and cache locally.
... audio or photo editor with offline access or local cache (great for per
formance and speed) the app can write to files in place (for example, overwriting just the id3/exif tags and not the entire file).
... the file and directory entries api interacts with other apis the file and directory entries api is designed to be used with other apis and elements on the web plat
form.
Gamepad.id - Web APIs
the gamepad.id property of the gamepad interface returns a string containing some in
formation about the controller.
... the exact syntax is not strictly specified, but in firefox it will contain three pieces of in
formation 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.
... this in
formation is intended to allow you to find a mapping for the controls on the device as well as display useful feedback to the user.
Gamepad - Web APIs
the gamepad interface of the gamepad api defines an individual gamepad or other controller, allowing access to in
formation such as button presses, axis positions, and id.
... gamepad.id read only a domstring containing identifying in
formation about the controller.
... 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 in
formation.
Using the Geolocation API - Web APIs
this initiates an asynchronous request to detect the user's position, and queries the positioning hardware to get up-to-date in
formation.
... watching the current position if the position data changes (either by device movement or if more accurate geo in
formation arrives), you can set up a callback function that is called with that updated position in
formation.
...hence many geolocation success callbacks look fairly simple: function success(position) { const latitude = position.coords.latitude; const longitude = position.coords.longitude; // do something with your latitude and longitude } you can however get a number of other bits of in
formation from a geolocationcoordinates object, including altitude, speed, what direction the device is facing, and an accuracy measure of the altitude, longitude, and latitude data.
HTMLImageElement.sizes - Web APIs
each condition is specified using the same conditional
format used by media queries.
...because a source size descriptor is used to specify the width to use for the image during layout of the page, the media condition is typically (but not necessarily) based entirely on width in
formation.
...the browser takes all of this in
formation and selects an image and width that best meets the specified values.
HTMLInputElement.stepDown() - Web APIs
<!-- decrements by intervals of 900 seconds (15 minute) --> <input type="time" max="17:00" step="900"> <!-- decrements by intervals of 7 days (one week) --> <input type="date" max="2019-12-25" step="7"> <!-- decrements by intervals of 12 months (one year) --> <input type="month" max="2019-12" step="12"> the method, when invoked, changes the
form control's value by the value given in the step attribute, multiplied by the parameter, within the constraints set within the
form control.
... 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.stepUp() - Web APIs
<input type="time" min="09:00" step="900"> datetime-local 1 (day) same day of the week: <input type="datetime-local" min="019-12-25t19:30" step="7"> number 1 0.1 increments <input type="number" min="0" step="0.1" max="10"> range 1 increments by 2: <input type="range" min="0" step="2" max="10"> the method, when invoked, changes the
form control's value by the value given in the step attribute, multiplied by the parameter, within the constraints set on the
form control.
... 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.
HTMLKeygenElement - Web APIs
properties autofocus is a boolean that reflects the autofocus html attribute, indicating that the
form control should have input focus when the page loads.
...
form read only is a html
formelement that indicates the control's
form owner, reflecting the
form html attribute if it is defined.
... name is a domstring that reflects the name html attribute, containing the name for the control that is submitted with
form data.
HTMLLegendElement - Web APIs
htmllegendelement.
form read only is a html
formelement representing the
form that this legend belongs to.
... if the legend has a fieldset element as its parent, then this attribute returns the same value as the
form attribute on the parent fieldset element.
... htmllegendelement.align is a domstring representing the alignment relative to the
form set methods no specific method; inherits methods from its parent, htmlelement.
HTMLMediaElement.play() - Web APIs
notsupportederror the media source (which may be specified as a mediastream, mediasource, blob, or file, for example) doesn't represent a supported media
format.
...see the example below for more in
formation.
... for even more in-depth in
formation about autoplay and autoplay blocking, see our article autoplay guide for media and web audio apis.
HTMLMediaElement - Web APIs
see the autoplay guide for media and web audio apis for more in
formation.
... htmlmediaelement.canplaytype() given a string specifying a mime media type (potentially with the codecs parameter included), canplaytype() returns the string probably if the media should be playable, maybe if there's not enough in
formation to determine whether the media will play or not, or an empty string if the media cannot be played.
...this non-standard, experimental method makes it possible to manually drive reading and rendering of media at a custom speed, or to move through the media frame-by-frame to per
form filtering or other operations.
HTMLVideoElement.videoHeight - Web APIs
if the element's readystate is htmlmediaelement.have_nothing, then the value of this property is 0, because neither video nor poster frame size in
formation is yet available.
... any other factors required by the media
format.
...this avoids applying invalid changes when there's no true in
formation available yet for dimensions.
HTMLVideoElement.videoWidth - Web APIs
if the element's readystate is htmlmediaelement.have_nothing, then the value of this property is 0, because neither video nor poster frame size in
formation is yet available.
... any other factors required by the media
format.
...this avoids applying invalid changes when there's no true in
formation available yet for dimensions.
HTMLVideoElement - Web APIs
the list of supported media
formats varies from one browser to the other.
... you should either provide your video in a single
format that all the relevant browsers supports, or provide multiple video sources in enough different
formats that all the browsers you need to support are covered.
...this in
formation includes things like the number of dropped or corrupted frames, as well as the total number of frames.
Using microtasks in JavaScript with queueMicrotask() - Web APIs
this is a quick, simplified explanation, but if you would like more details, you can read the in
formation in the article in depth: microtasks and the javascript runtime environment.
...abusing this capability will lead to per
formance problems.
...generally, it's about capturing or checking results, or per
forming cleanup, after the main body of a javascript execution context exits, but before any event handlers, timeouts and intervals, or other callbacks are processed.
IDBTransactionSync - Web APIs
methods abort() call this method to signal a need to cancel the effects of the operations per
formed by this transaction.
... when this method is called, the browser ignores all the changes per
formed to the objects of this database since this transaction was created.
...when this method is called, the browser durably stores all the changes per
formed to the objects of the database since this transaction was created.
Basic concepts - Web APIs
for more in
formation on how the browser handles storing your data in the background, read browser storage limits and eviction criteria.
... database database a repository of in
formation, typically comprising one or more object stores.
... as of firefox 40, indexeddb transactions have relaxed durability guarantees to increase per
formance (see bug 1112702), which is the same behaviour as other indexeddb-supporting browsers.
IndexedDB API - Web APIs
this api uses indexes to enable high-per
formance searches of this data.
... synchronous and asynchronous operations per
formed using indexeddb are done asynchronously, so as not to block applications.
... idbdatabaseexception represents exception conditions that can be encountered while per
forming database operations.
KeyboardEvent.getModifierState() - Web APIs
ock" during led for num lock turned on a key on numpad pressed not supported while numlock is locked "os" ⊞ windows logo key pressed super key or hyper key pressed (typically, mapped to ⊞ windows logo key) not supported "scrolllock" during led for scroll lock turned on during led for scroll lock turned on, but typically this isn't supported by plat
form not supported while scrolllock is locked "shift" ⇧ shift key pressed "super" not supported "symbol" not supported "symbollock" not supported on the other plat
forms, "alt", "control" and "shift" may be supported.
...this doesn't depend on the plat
form.
...note that which modifier key makes it return true depends on plat
forms, browsers, and user settings.
KeyboardEvent - Web APIs
on those plat
forms, then, an auto-repeat key will generate the following sequence of events: keydown keypress keyup keydown keypress keyup <<repeating until the user releases the key>> keyup in these environments, unfortunately, there's no way for web content to tell the difference between auto-repeating keys and keys that are just being pressed repeatedly.
... auto-repeat handling prior to gecko 5.0 before gecko 5.0 (firefox 5.0 / thunderbird 5.0 / seamonkey 2.2), keyboard handling was less consistent across plat
forms.
... linux the event behavior depends on the specific plat
form.
MediaPositionState.playbackRate - Web APIs
this in
formation can then, in turn, be used by the user agent to provide a user interface which displays media playback in
formation to the viewer.
... for example, a browser might use this in
formation 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 per
formed is playing.
MediaRecorder.mimeType - Web APIs
this is the file
format of the file that would result from writing all of the recorded data to disk.
...see our media type and
format guide for in
formation about container and codec support across browsers.
... syntax var mimetype = mediarecorder.mimetype value the mime media type which describes the
format of the recorded media, as a domstring.
MediaSession.setActionHandler() - Web APIs
the action handler receives as input a single parameter: an object con
forming to the mediasessionactiondetails dictionary, which provides both the action type (so the same function can handle multiple action types), as well as data needed in order to per
form the action.
...implement support for each of these in order to allow that type of action to be per
formed.
...this action may or may not be available, depending on the plat
form and user agent, or may be disabled due to subscription level or other circumstances.
MediaSession.setPositionState() - Web APIs
syntax navigator.mediasession.setpositionstate(statedict); parameters statedict optional an object con
forming to the mediapositionstate dictionary, providing updated in
formation about the playback position and speed of the document's ongoing media.
... if the object is empty, the existing playback state in
formation is cleared.
... example in this example, a player for a non-standard media file
format, written in javascript, uses setinterval() to establish a callback which fires once per second to refresh the position in
formation by calling setpositionstate().
MediaStream - Web APIs
some user agents subclass this interface to provide more precise in
formation or functionality, like in canvascapturemediastream.
... event handlers mediastream.onaddtrack an eventhandler containing the action to per
form when an addtrack event is fired when a new mediastreamtrack object is added.
... mediastream.onremovetrack an eventhandler containing the action to per
form when a removetrack event is fired when a mediastreamtrack object is removed from it.
Recording a media element - Web APIs
the "download" button will download the received data (although it's in a raw, unwrapped
form that isn't very useful).
...there's a little more than this, but it's just in
formational rather than being part of the core operation of the app.
... function log(msg) { logelement.innerhtml += msg + "\n"; } the log() function is used to output text strings to a <div> so we can share in
formation with the user.
MerchantValidationEvent() - Web APIs
validationurl optional the url from which to retrieve payment handler specific verification in
formation used to validate the merchant.
... return value a newly-created merchantvalidationevent providing the in
formation that needs to be delivered to the client-side code to present to the user agent by calling complete().
... rangeerror the specified methodname does not correspond to a known and supported merchant or is not a well-
formed standard payment method identifier.
msIsBoxed - Web APIs
letterbox
format displays black bars on the top and bottom of a video to fill in between the wide screen
format of a video, and the aspect ratio of the screen.
...pillarbox
format displays black bars on the left and right of a video to fill in the difference between a video and a wider screen.
... with pillarbox
format, the top and bottom edges of the video go to the full height of the screen.
MutationEvent - Web APIs
the practical reasons to avoid the mutation events are per
formance issues and cross-browser support.
... per
formance adding dom mutation listeners to a document profoundly degrades the per
formance of further dom modifications to that document (making them 1.5 - 7 times slower!).
... the per
formance effect is limited to the documents that have the mutation event listeners.
Navigator.connection - Web APIs
the navigator.connection read-only property returns a networkin
formation object containing in
formation about the system's connection, such as the current bandwidth of the user's device or whether the connection is metered.
... syntax networkin
formation = navigator.connection value a networkin
formation object.
... specifications specification status comment network in
formation apithe definition of 'navigator.connection' in that specification.
Navigator.getBattery() - Web APIs
the getbattery() method provides in
formation about the system's battery.
... syntax var batterypromise = navigator.getbattery(); return value a promise which, when resolved, calls its fulfillment handler with a single parameter: a batterymanager object which you can use to get in
formation about the battery's state.
... exceptions this method doesn't throw true exceptions; instead, it rejects the returned promise, passing into it a domexception whose name is one of the following: securityerror the user agent does not expose battery in
formation to insecure contexts and this method was called from insecure context.
Web-based protocol handlers - Web APIs
firefox displays a prompt in the notification bar area: note:the url template supplied when registering must be of the same domain as the webpage attempting to per
form the registration or the registration will fail.
...the browser extracts the href from the activated link, combines it with the url template supplied during handler registration and per
forms an http get on the url.
... so, using the above examples, the browser would per
form a get on this url: http://www.google.co.uk/?uri=web+burger:cheeseburger server side code can extract the query string parameters and per
form the desired action.
NavigatorID.appVersion - Web APIs
returns either "4.0" or a string representing version in
formation about the browser.
... syntax window.navigator.appversion value either "4.0" or a string representing version in
formation about the browser.
... example alert('your browser version is reported as ' + navigator.appversion); notes the window.navigator.useragent property may also contain the version number (for example "mozilla/5.0 (windows; u; win98; en-us; rv:0.9.2) gecko/20010725 netscape 6/6.1"), but you should be aware of how easy it is to change the user agent string and "spoof" other browsers, plat
forms, or user agents, and also how cavalier the browser vendor themselves are with these properties.
OES_texture_half_float - Web APIs
the oes_texture_half_float extension is part of the webgl api and adds texture
formats with 16- (aka half float) and 32-bit floating-point components.
...for more in
formation, see also using extensions in the webgl tutorial.
... half floating-point color buffers this extension implicitly enables the ext_color_buffer_half_float extension (if supported), which allows rendering to 16-bit floating point
formats.
OVR_multiview2 - Web APIs
for more in
formation, see also: multiview on webxr three.js multiview demo multiview in babylon.js optimizing virtual reality: understanding multiview multiview webgl rendering for oculus browser 6.0+ webgl extensions are available using the webglrenderingcontext.getextension() method.
... for more in
formation, see also using extensions in the webgl tutorial.
... shader code #version 300 es #extension gl_ovr_multiview2 : require precision mediump float; layout (num_views = 2) in; in vec4 inpos; uni
form mat4 u_viewmatrices[2]; void main() { gl_position = u_viewmatrices[gl_viewid_ovr] * inpos; } specifications specification status ovr_multiview2 community approved ...
OscillatorNode.OscillatorNode() - Web APIs
the oscillatornode() constructor of the web audio api creates a new oscillatornode object which is an audionode that represents a periodic wave
form, like a sine wave, optionally setting the node's properties' values to match values in a specified object.
... frequency the frequency (in hertz) of the periodic wave
form.
... periodicwave an arbitrary period wave
form described by a periodicwave object.
OscillatorNode - Web APIs
the oscillatornode interface represents a periodic wave
form, such as a sine wave.
... oscillatornode.type a string which specifies the shape of wave
form to play; this can be one of a number of standard values, or custom to use a periodicwave to describe a custom wave
form.
... methods inherits methods from its parent, audioscheduledsourcenode, and adds the following: oscillatornode.setperiodicwave() sets a periodicwave which describes a periodic wave
form to be used instead of one of the standard wave
forms; calling this sets the type to custom.
ParentNode.querySelectorAll() - Web APIs
see locating dom elements using selectors for more in
formation about using selectors to identify elements.
...see escaping special characters for more in
formation.
... in this example, when selecting .outer .inner in the context the <div> with the class select, the element with the class .inner is still found, even though .outer is not a descendant of the base element on which the search is per
formed (.select).
Path2D.addPath() - Web APIs
syntax void path.addpath(path [, trans
form]); parameters path a path2d path to add.
... trans
form optional a dommatrix to be used as the trans
formation matrix for the path that is added.
... const canvas = document.getelementbyid('canvas'); const ctx = canvas.getcontext('2d'); // create first path and add a rectangle let p1 = new path2d(); p1.rect(0, 0, 100, 150); // create second path and add a rectangle let p2 = new path2d(); p2.rect(0, 0, 100, 75); // create trans
formation matrix that moves 200 points to the right let m = document.createelementns('http://www.w3.org/2000/svg', 'svg').createsvgmatrix(); m.a = 1; m.b = 0; m.c = 0; m.d = 1; m.e = 200; m.f = 0; // add second path to the first path p1.addpath(p2, m); // draw the first path ctx.fill(p1); result specifications specification status comment html living standardthe definit...
PaymentDetailsUpdate.error - Web APIs
the paymentdetailsupdate dictionary's error property is a human-readable domstring which provides an error message to be displayed if the specified in
formation doesn't offer any valid shipping options.
... syntax errorstring = paymentdetailsupdate.error; paymentdetailsupdate.error = errorstring; value a domstring specifying the string to display to the user if the in
formation specified in the paymentdetailsupdate doesn't provide any valid shipping options.
... this happens if both of the following are true: the paymentrequest specifies using its requestshipping property that shipping in
formation is required.
PaymentRequest: paymentmethodchange event - Web APIs
the code assumes the existence of a method detailsforshipping(), which returns a paymentdetailsupdate object containing the shipping options for the ground shipping method, in the
form found in the paymentshippingoption dictionary.
... by doing so, the payment
form defaults to the ground shipping method.
... const servicefeeinfo = calculateservicefee(event.methoddetails); object.assign(detailsupdate, servicefeeinfo); } event.updatewith(detailsupdate); }, false); this begins by looking at the event's methodname property; if that indicates that the user is trying to use apple pay, we pass the methoddetails into a function called calculateservicefee(), which we might create to take the in
formation about the transaction, such as the underlying credit card being used to service the apple pay request, and compute and return an paymentdetailsupdate object that specifies changes to be applied to the paymentrequest in order to add any service fees that the payment method might require.
PaymentResponse.onpayerdetailchange - Web APIs
the paymentresponse object's onpayerdetailchange property is an event handler which is called to handle the payerdetailchange event, which is sent to the paymentresponse when the user makes changes to their personal in
formation while filling out a payment request
form.
... syntax paymentresponse.onpayerdetailchange = eventhandlerfunction; value an event handler function which is called to handle the payerdetailchange event when the user makes changes to their personal in
formation while editing a payment request
form.
... examples in the example below, onpayerdetailchange is used to set up a listener for the payerdetailchange event in order to validate the in
formation entered by the user, requesting that any mistakes be corrected // options for paymentrequest(), indicating that shipping address, // payer email address, name, and phone number all be collected.
PaymentResponse: payerdetailchange event - Web APIs
payerdetailchange events are delivered by the payment request api to a paymentresponse object when the user makes changes to their personal in
formation while filling out a payment request
form.
... the event handler for payerdetailchange should check each value in the
form that has changed and ensure that the values are valid.
... bubbles no cancelable no interface paymentrequestupdateevent event handler property onpayerdetailchange examples in the example below, onpayerdetailchange is used to set up a listener for the payerdetailchange event in order to validate the in
formation entered by the user, requesting that any mistakes be corrected // options for paymentrequest(), indicating that shipping address, // payer email address, name, and phone number all be collected.
PaymentValidationErrors - Web APIs
the paymentvalidationerrors dictionary represents objects providing in
formation about any and all errors that occurred while processing a payment request.
... properties error optional a general description of a payment error from which the user may attempt to recover by retrying the payment, possibly after correcting mistakes in the payment in
formation.
... error can be provided all by itself to provide only a generic error message, or in concert with the other properties to serve as an overview while other properties' values gude the user to errors in specific fields in the payment
form.
Point - Web APIs
point is an interface, which existed only briefly in the css trans
forms level 1 specification, which represents a point in 2-dimensional space.
... specifications this class was specified in the defunct 20 march 2009 working draft of css 2d trans
forms module level 3.
... it is not present in the current working draft of the css trans
forms level 1 specification.
Pointer events - Web APIs
additionally, a pointer event contains the usual properties present in mouse events (client coordinates, target element, button states, etc.) in addition to new properties for other
forms of input: pressure, contact geometry, tilt, etc.
...this section contains in
formation about pointer event and mouse event interaction and the ramifications for application developers.
... best practices here are some best practices to consider when using pointer events: minimize the amount of work per
formed in event handlers.
Push API - Web APIs
see the following articles for more in
formation: cross-site request forgery (csrf) prevention cheat sheet preventing csrf and xsrf attacks for an app to receive push messages, it has to have an active service worker.
... the resulting pushsubscription includes all the in
formation that the application needs to send a push message: an endpoint and the encryption key needed for sending data.
...it contains in
formation sent from an application to a pushsubscription.
RTCConfiguration - Web APIs
the options include ice server and transport settings and identity in
formation.
...see using certificates below for additional in
formation.
... <<<--- add link to in
formation about identity --->>> example the configuration below establishes two ice servers.
RTCErrorEvent - Web APIs
it's based on the standard event interface, but adds rtc-specific in
formation describing the error, as shown below.
... properties in addition to the standard properties available on the event interface, rtcerrorevent also includes the following: error read only an rtcerror object specifying the error which occurred; this object includes the type of error that occurred, in
formation about where the error occurred (such as which line number in the sdp or what sctp cause code was at issue).
... description there are other data types used for error events in webrtc, as needed for errors with special in
formation sharing requirements.
RTCIceCandidate.address - Web APIs
you can't specify the address in the options object, but the address is automatically extracted from the candidate a-line, if it's
formatted properly.
... security notes it's important to note here that although webrtc does not require the two peers on an rtcpeerconnection to know one another's true ip addresses, the address property on rtcicecandidate can expose more in
formation about the source of the remote peer than the user expects.
... the ip address can be used to derive in
formation about the remote device's location, network topology, and so forth.
RTCIceCandidate.protocol - Web APIs
the value is automatically extracted from the candidate a-line, if it's
formatted properly.
...the tcptype property provides additional in
formation about the kind of tcp candidate represented by the object.
...this is the preferred protocol for media interactions because of its better per
formance profile.
RTCInboundRtpStreamStats.fecPacketsReceived - Web APIs
an fec packet provides parity in
formation which can be used to attempt to reconstruct rtp data packets which have been corrupted in transit.
...forward error correction uses an exclusive-or method to per
form parity checks on the received data.
... by using the fec parity in
formation to attempt to reconstruct damaged packets, it is possible to avoid the need to retransmit damaged packets, which in turn helps to reduce lag, or the need to skip damaged frames entirely.
RTCPeerConnection.addIceCandidate() - Web APIs
syntax apromise = pc.addicecandidate(candidate); addicecandidate(candidate, successcallback, failurecallback); parameters candidate optional an object con
forming to the rtcicecandidateinit dictionary, or an rtcicecandidate object; the contents of the object should be constructed from a message received over the signaling channel, describing a newly received ice candidate that's ready to be delivered to the local ice agent.
... if no candidate object is specified, or its value is null, an end-of-candidates signal is sent to the remote peer using the end-of-candidates a-line,
formatted simply like this: a=end-of-candidates deprecated parameters in older code and documentation, you may see a callback-based version of this function.
...the parameters for this
form of addicecandidate() are described below, to aid in updating existing code.
RTCPeerConnection.createAnswer() - Web APIs
the answer contains in
formation about any media already attached to the session, codecs and options supported by the browser, and any ice candidates already gathered.
...the parameters for this
form of createanswer() are described below, to aid in updating existing code.
... return value a promise whose fulfillment handler is called with an object con
forming to the rtcsessiondescriptioninit dictionary which contains the sdp answer to be delivered to the other peer.
RTCPeerConnection.getStats() - Web APIs
this version of getstats() is obsolete; in addition, the data it returns is entirely different from the current specification, and the
form of that data was never documented.
... this
form of getstats() has been or will soon be removed from most browsers; you should not use it, and should update existing code to use the new promise-based version.
... example this example creates a periodic function using setinterval() that collects statistics for an rtcpeerconnection every second, generating an html-
formatted report and inserting it into a specific element in the dom.
RTCPeerConnection.setConfiguration() - Web APIs
you cannot change the identity in
formation for a connection once it's already been set.
... exceptions invalidaccesserror one or more of the urls specified in configuration.iceservers is a turn server, but complete login in
formation is not provided (that is, either the rtciceserver.username or rtciceserver.credentials is missing).
... invalidmodificationerror the configuration includes changed identity in
formation, but the connection already has identity in
formation specified.
RTCPeerConnection.setRemoteDescription() - Web APIs
the description specifies the properties of the remote end of the connection, including the media
format.
...the parameters for the older
form of setremotedescription() are described below, to aid in updating existing code.
... this deprecated
form of the method returns instantaneously without waiting for the actual setting to be done: in case of success, the successcallback will be called; in case of failure, the errorcallback will be called.
RTCRemoteOutboundRtpStreamStats.localId - Web APIs
both of these provide in
formation about the same batch of packets being transmitted from the remote peer to the local device.
... example in this example, we have a pair of functions: the first, networkteststart(), captures an initial report, and the second, networkteststop(), captures a second report, then uses the two reports to output some in
formation about the network conditions...
... now we have all the raw statistics needed to calculate the in
formation we want to display, so we do so: we calculate the amount of time—elapsedtime—that elapsed between the two reports being sent by subtracting the timestamp startreport from that of endreport.
RTCSessionDescription() - Web APIs
this constructor has been deprecated because rtcpeerconnection.setlocaldescription() and other methods which take sdp as input now directly accept an object con
forming to the rtcsessiondescriptioninit dictionary, so you don't have to instantiate an rtcsessiondescription yourself.
... syntax sessiondescription = new rtcsessiondescription(rtcsessiondescriptioninit); values rtcsessiondescriptioninit optional an object providing the default values for the session description; the object con
forms to the rtcsessiondescriptioninit dictionary.
... this is no longer necessary, however; rtcpeerconnection.setlocaldescription() and other methods which take sdp as input now directly accept an object con
forming to the rtcsessiondescriptioninit dictionary, so you don't have to instantiate an rtcsessiondescription yourself.
Report.body - Web APIs
the body read-only property of the report interface returns the body of the report, which is a reportbody object containing the detailed report in
formation.
... syntax let reportbody = reportinstance.body returns a reportbody object containing the detailed report in
formation.
...these all inherit from the base reportbody class — study their reference pages for more in
formation on what the particular report body types contain.
SVGAltGlyphElement - Web APIs
it defines the glyph identifier, whose
format is dependent on the ‘
format’ of the given font.
... svgaltglyphelement.
format it corresponds to the attribute
format on the given element.
...this property specifies the
format of the given font.
getBBox() - Web APIs
it also does not account for any trans
formation applied to the element or its parents.
...this value is irrespective of any trans
formation attribute applied to it or the parent elements.
... example html <svg viewbox="0 0 200 200" xmlns="http://www.w3.org/2000/svg"> <g id="group_text_1"> <text x="5" y="16" trans
form="scale(2, 2)">hello world!</text> <text x="8" y="32" trans
form="translate(0 20) scale(1.25 1)">hello world again!</text> </g> <!-- shows bbox in green --> <rect id="rect_1" stroke="#00ff00" stroke-width="3" fill="none"> </rect> <!-- shows boundingclientrect in red --> <rect id="rect_2" stroke="#ff0000" stroke-width="3" fill="none"></rect> </svg> javascript var rectbbox = document.queryselector('#rect_1'); var rectboundingclientrect = document.queryselector('#rect_2'); var groupelement = document.queryselector('#group_text_1'); var bboxgroup = groupelement.getbbox(); rectbbox.setattribute('x', bboxgroup.x); rectbbox.setatt...
SVGTextContentElement - Web APIs
svgtextcontentelement.getsubstringlength() returns a float representing the computed length of the
formatted text advance distance for a substring of text within the element.
... svgtextcontentelement.getstartpositionofchar() returns a dompoint representing the position of a typographic character after text layout has been per
formed.
... svgtextcontentelement.getendpositionofchar() returns a dompoint representing the trailing position of a typographic character after text layout has been per
formed.
Using server-sent events - Web APIs
function(event) { const newelement = document.createelement("li"); const time = json.parse(event.data).time; newelement.innerhtml = "ping at " + time; eventlist.appendchild(newelement); }); this code is similar, except that it will be called automatically whenever the server sends a message with the event field set to "ping"; it then parses the json in the data field and outputs that in
formation.
...for details on the
format of the event stream, see event stream
format.
... evtsource.close(); event stream
format the event stream is a simple stream of text data which must be encoded using utf-8.
ServiceWorkerGlobalScope: pushsubscriptionchange event - Web APIs
bubbles no cancelable no interface pushsubscriptionchangeevent event handler property onpushsubscriptionchange usage notes although examples demonstrating how to share subscription related in
formation with the application server tend to use fetch(), this is not necessarily the best choice for real-world use, since it will not work if the app is offline, for example.
... consider using another method to synchronize subscription in
formation between your service worker and the app server, or make sure your code using fetch() is robust enough to handle cases where attempts to exchange data fail.
...this is delivered to the app server using a fetch() call to post a json
formatted rendition of the subscription's endpoint to the app server.
SpeechSynthesisErrorEvent - Web APIs
the speechsynthesiserrorevent interface of the web speech api contains in
formation about any errors that occur while processing speechsynthesisutterance objects in the speech service.
... examples var synth = window.speechsynthesis; var input
form = document.queryselector('
form'); var inputtxt = document.queryselector('input'); var voiceselect = document.queryselector('select'); var voices = synth.getvoices(); ...
... input
form.onsubmit = function(event) { event.preventdefault(); var utterthis = new speechsynthesisutterance(inputtxt.value); var selectedoption = voiceselect.selectedoptions[0].getattribute('data-name'); for(i = 0; i < voices.length ; i++) { if(voices[i].name === selectedoption) { utterthis.voice = voices[i]; } } synth.speak(utterthis); utterthis.onerror = function(event) { console.log('an error has occurred with the speech synthesis: ' + event.error); } inputtxt.blur(); } specifications specification status comment web speech apithe definition of 'speechsynthesiserrorevent' in that specification.
SpeechSynthesisUtterance.pitch - Web APIs
it can range between 0 (lowest) and 2 (highest), with 1 being the default pitch for the current plat
form or voice.
... examples var synth = window.speechsynthesis; var input
form = document.queryselector('
form'); var inputtxt = document.queryselector('input'); var voiceselect = document.queryselector('select'); var voices = synth.getvoices(); ...
... input
form.onsubmit = function(event) { event.preventdefault(); var utterthis = new speechsynthesisutterance(inputtxt.value); var selectedoption = voiceselect.selectedoptions[0].getattribute('data-name'); for(i = 0; i < voices.length ; i++) { if(voices[i].name === selectedoption) { utterthis.voice = voices[i]; } } utterthis.pitch = 1.5; synth.speak(utterthis); inputtxt.blur(); } specifications specification status comment web speech apithe definition of 'pitch' in that specification.
SpeechSynthesisUtterance.rate - Web APIs
it can range between 0.1 (lowest) and 10 (highest), with 1 being the default pitch for the current plat
form or voice, which should correspond to a normal speaking rate.
... examples var synth = window.speechsynthesis; var input
form = document.queryselector('
form'); var inputtxt = document.queryselector('input'); var voiceselect = document.queryselector('select'); var voices = synth.getvoices(); ...
... input
form.onsubmit = function(event) { event.preventdefault(); var utterthis = new speechsynthesisutterance(inputtxt.value); var selectedoption = voiceselect.selectedoptions[0].getattribute('data-name'); for(i = 0; i < voices.length ; i++) { if(voices[i].name === selectedoption) { utterthis.voice = voices[i]; } } utterthis.rate = 1.5; synth.speak(utterthis); inputtxt.blur(); } specifications specification status comment web speech apithe definition of 'rate' in that specification.
SpeechSynthesisUtterance.text - Web APIs
the text may be provided as plain text, or a well-
formed ssml document.
... examples var synth = window.speechsynthesis; var input
form = document.queryselector('
form'); var inputtxt = document.queryselector('input'); var voiceselect = document.queryselector('select'); var voices = synth.getvoices(); ...
... input
form.onsubmit = function(event) { event.preventdefault(); var utterthis = new speechsynthesisutterance(inputtxt.value); var selectedoption = voiceselect.selectedoptions[0].getattribute('data-name'); for(i = 0; i < voices.length ; i++) { if(voices[i].name === selectedoption) { utterthis.voice = voices[i]; } } console.log(utterthis.text); synth.speak(utterthis); inputtxt.blur(); } specifications specification status comment web speech apithe definition of 'text' in that specification.
SpeechSynthesisUtterance - Web APIs
it contains the content the speech service should read and in
formation about how to read it (e.g.
... inside the input
form.onsubmit handler, we stop the
form submitting with preventdefault(), use the constructor to create a new utterance instance containing the text from the text <input>, set the utterance's voice to the voice selected in the <select> element, and start the utterance speaking via the speechsynthesis.speak() method.
... var synth = window.speechsynthesis; var voices = synth.getvoices(); var input
form = document.queryselector('
form'); var inputtxt = document.queryselector('input'); var voiceselect = document.queryselector('select'); for(var i = 0; i < voices.length; i++) { var option = document.createelement('option'); option.textcontent = voices[i].name + ' (' + voices[i].lang + ')'; option.value = i; voiceselect.appendchild(option); } input
form.onsubmit = function(event) { event.preventdefault(); var utterthis = new speechsynthesisutterance(inputtxt.value); utterthis.voice = voices[voiceselect.value]; synth.speak(utterthis); inputtxt.blur(); } specifications specification status comment web speech apithe definition of 'speechsynthesisutterance' in that specif...
TrackDefault.TrackDefault() - Web APIs
language a domstring specifying a default language for the sourcebuffer to use when an initialization segment does not contain language in
formation for a new track.
... label a domstring specifying a default label for the sourcebuffer to use when an initialization segment does not contain label in
formation for a new track.
... kinds an array (sequence) of domstrings specifying default kinds for the sourcebuffer to use when an initialization segment does not contain kind in
formation for a new track.
sourceCapabilities - Web APIs
the uievent.sourcecapabilities read-only property returns an instance of the inputdevicecapabilities interface which provides in
formation about the physical device responsible for generating a touch event.
... a device is considered "responsible" for an event only when that interaction is part of the abstraction provided by the web plat
form.
... for example, many user agents allow a window to be resized with a mouse or a keyboard, but this detail is not exposed to the web plat
form in any way, and so the sourcecapabilities of a resize event will typically be null.
ValidityState.patternMismatch - Web APIs
the read-only patternmismatch property of a validitystate object indicates if the value of an <input>, after having been edited by the user, does not con
form to the constraints set by the element's pattern attribute.
... if the field supports the pattern attribute -- which means the <input> is of type text, tel, email, url, password, or search -- and the pattern value is set to a valid regular expression, if the value don't doesn't con
form to the constraints set by the pattern value, the patternmismatch property will be true.
... examples given the following: <p> <label>enter your phone number in the
format (123)456-7890 (<input name="tel1" type="tel" pattern="[0-9]{3}" placeholder="###" aria-label="3-digit area code" size="2"/>)- <input name="tel2" type="tel" pattern="[0-9]{3}" placeholder="###" aria-label="3-digit prefix" size="2"/> - <input name="tel3" type="tel" pattern="[0-9]{4}" placeholder="####" aria-label="4-digit number" size="3"/> </label> </p> here we have 3 sections for a north american phone number with an implicit label encompassing all three components of the phone number, expecting 3-digits, 3-digits and 4-digits respectively, as defined by the pattern attribute set on each.
ValidityState.stepMismatch - Web APIs
the read-only stepmismatch property of a validitystate object indicates if the value of an <input>, after having been edited by the user, does not con
form to the constraints set by the element's step attribute.
... if the field is numeric in nature, including the date, month, week, time, datetime-local, number and range types and the step value is not any, if the value don't doesn't con
form to the constraints set by the step and min values, then stepmismatch will be true.
... if the remainder of the
form control's value less the min value, divided by the step value (which defaults to 1 if ommitted) is not zero, there is a mismatch.
ValidityState.typeMismatch - Web APIs
the read-only typemismatch property of a validitystate object indicates if the value of an <input>, after having been edited by the user, does not con
form to the constraints set by the element's type attribute.
... if the type attribute expects specific strings, such as the email and url types and the value don't doesn't con
form to the constraints set by the type, the typemismatch property will be true.
... type attribute con
formance input type value expected value email x@y or x@y.z email address, with or without tld url x: or x://y.z protocol or full url with protocol examples given the following: <p> <label> enter an email address: <input type="email" value="example.com"/> </label> </p> <p> <label> enter a url: <input type="url" value="exampl...
Visual Viewport API - Web APIs
a window's visualviewport object provides in
formation about the viewport's position and size, and receives the resize and event:visualviewport:scroll events you can onitor to know when chances occur to the window's viewport.
...using requestanimationframe() ensures that the trans
form ocurrs before the next render.
... bottombar.style.trans
form = 'translate(' + offsetleft + 'px,' + offsettop + 'px) ' + 'scale(' + 1/viewport.scale + ')' }) } window.visualviewport.addeventlistener('scroll', viewporthandler); window.visualviewport.addeventlistener('resize', viewporthandler); specifications specification status comment ...
WEBGL_compressed_texture_atc - Web APIs
the webgl_compressed_texture_atc extension is part of the webgl api and exposes 3 atc compressed texture
formats.
...for more in
formation, see also using extensions in the webgl tutorial.
... constants the compressed texture
formats are exposed by 3 constants and can be used in two functions: compressedteximage2d() and compressedtexsubimage2d().
WEBGL_compressed_texture_etc1 - Web APIs
the webgl_compressed_texture_etc1 extension is part of the webgl api and exposes the etc1 compressed texture
format.
...for more in
formation, see also using extensions in the webgl tutorial.
... constants the compressed texture
format is exposed by a constant and can be used with the compressedteximage2d() method (note that etc1 is not supported with the compressedtexsubimage2d() method).
WEBGL_compressed_texture_pvrtc - Web APIs
the webgl_compressed_texture_pvrtc extension is part of the webgl api and exposes four pvrtc compressed texture
formats.
...for more in
formation, see also using extensions in the webgl tutorial.
... constants the compressed texture
formats are exposed by four constants and can be used in two functions: compressedteximage2d() (where the height and width parameters must be powers of 2) and compressedtexsubimage2d() (where the the height and width parameters must equal the current values of the existing texture and the xoffset and yoffset parameters must be 0).
WakeLockSentinel - Web APIs
the wakelocksentinel interface of the screen wake lock api provides a handle to the underlying plat
form wake lock and can be manually released and reacquired.
... an acquired wakelocksentinel can be released manually via the release() method, or automatically via the plat
form wake lock.
...releasing all wakelocksentinel instances of a given wake lock type will cause the underlying plat
form wake lock to be released.
WebGL2RenderingContext.compressedTexSubImage3D() - Web APIs
the webgl2renderingcontext.compressedtexsubimage3d() method of the webgl api specifies a three-dimensional sub-rectangle for a texture image in a compressed
format.
... syntax // read from the buffer bound to gl.pixel_unpack_buffer void gl.compressedtexsubimage3d(target, level, xoffset, yoffset, zoffset, width, height, depth,
format, imagesize, offset); void gl.compressedtexsubimage3d(target, level, xoffset, yoffset, zoffset, width, height, depth,
format, arraybufferview srcdata, optional srcoffset, optional srclengthoverride); parameters target a glenum specifying the binding point (target) of the active texture.
...
format a glenum specifying the compressed image
format.
WebGL2RenderingContext.getBufferSubData() - Web APIs
gl.trans
form_feedback_buffer: buffer for trans
form feedback operations.
... gl.uni
form_buffer: buffer used for storing uni
form blocks.
... an invalid_operation error is generated if: zero is bound to target target is trans
form_feedback_buffer, and any trans
form feedback object is currently active.
WebGL2RenderingContext.renderbufferStorageMultisample() - Web APIs
syntax void gl.renderbufferstoragemultisample(target, samples, internal
format, width, height); parameters target a glenum specifying the target renderbuffer object.
... possible values: gl.renderbuffer: buffer data storage for single images in a renderable internal
format.
... internal
format a glenum specifying the internal
format of the renderbuffer.
WebGL2RenderingContext.texStorage2D() - Web APIs
syntax void gl.texstorage2d(target, levels, internal
format, width, height); parameters target a glenum specifying the binding point (target) of the active texture.
... internal
format a glenum specifying the texture store
format.
... possible values: gl.r8 gl.r16f gl.r32f gl.r8ui gl.rg8 gl.rg16f gl.rg32f gl.rg8ui gl.rgb8 gl.srgb8 gl.rgb565 gl.r11f_g11f_b10f gl.rgb9_e5 gl.rgb16f gl.rgb32f gl.rgb8ui gl.rgba8 gl.srgb8_aplha8 gl.rgb5_a1 gl.rgba4 gl.rgba16f gl.rgba32f gl.rgba8ui unlike opengl 3.0, webgl 2 doesn't support the following etc2 and eac compressed texture
formats (see section 5.37 in the webgl 2 spec).
WebGLRenderingContext.bindBuffer() - Web APIs
gl.trans
form_feedback_buffer: buffer for trans
form feedback operations.
... gl.uni
form_buffer: buffer used for storing uni
form blocks.
... adds new target buffers: gl.copy_read_buffer, gl.copy_write_buffer, gl.trans
form_feedback_buffer, gl.uni
form_buffer, gl.pixel_pack_buffer, gl.pixel_unpack_buffer opengl es 3.0the definition of 'glbindbuffer' in that specification.
WebGLRenderingContext.bufferSubData() - Web APIs
gl.trans
form_feedback_buffer: buffer for trans
form feedback operations.
... gl.uni
form_buffer: buffer used for storing uni
form blocks.
... adds new target buffers: gl.copy_read_buffer, gl.copy_write_buffer, gl.trans
form_feedback_buffer, gl.uni
form_buffer, gl.pixel_pack_buffer, gl.pixel_unpack_buffer.
WebGLRenderingContext.getProgramInfoLog() - Web APIs
the webglrenderingcontext.getprograminfolog returns the in
formation log for the specified webglprogram object.
... return value a domstring that contains diagnostic messages, warning messages, and other in
formation about the last linking or validation operation.
... when a webglprogram object is initially created, its in
formation log will be a string of length 0.
WebGLRenderingContext.getVertexAttrib() - Web APIs
the webglrenderingcontext.getvertexattrib() method of the webgl api returns in
formation about a vertex attribute at a given position.
... pname a glenum specifying the in
formation to query.
... return value returns the requested vertex attribute in
formation (as specified with pname).
Animating textures in WebGL - Web APIs
this example uses the glmatrix library to per
form its matrix and vertex math.
... const level = 0; const internal
format = gl.rgba; const width = 1; const height = 1; const border = 0; const src
format = gl.rgba; const srctype = gl.unsigned_byte; const pixel = new uint8array([0, 0, 255, 255]); // opaque blue gl.teximage2d(gl.texture_2d, level, internal
format, width, height, border, src
format, srctype, pixel); // turn off mips and set wrapping to clamp to edge so i...
...xparameteri(gl.texture_2d, gl.texture_wrap_s, gl.clamp_to_edge); gl.texparameteri(gl.texture_2d, gl.texture_wrap_t, gl.clamp_to_edge); gl.texparameteri(gl.texture_2d, gl.texture_min_filter, gl.linear); return texture; } here's what the updatetexture() function looks like; this is where the real work is done: function updatetexture(gl, texture, video) { const level = 0; const internal
format = gl.rgba; const src
format = gl.rgba; const srctype = gl.unsigned_byte; gl.bindtexture(gl.texture_2d, texture); gl.teximage2d(gl.texture_2d, level, internal
format, src
format, srctype, video); } you've seen this code before.
Taking still photos with WebRTC - Web APIs
at that point, all the properties in the video object have been configured based on the stream's
format.
... clearing the photo box clearing the photo box involves creating an image, then converting it into a
format usable by the <img> element that displays the most recently captured frame.
... once the canvas contains the captured image, we convert it to png
format by calling htmlcanvaselement.todataurl() on it; finally, we call photo.setattribute() to make our captured still box display the image.
Fundamentals of WebXR - Web APIs
some plat
forms may provide previously-cleared frames to you, while others may optimize per
formance by not erasing the framebuffers in order to avoid having to touch each pixel twice per frame.
...the
former, specified by the session mode string inline, presents the rendered scene within the context of a document in a web browser, and doesn't require special xr hardware to view.
... for more in
formation about using webxr to create augmented reality experiences, see augmented reality with webxr.
WebXR application life cycle - Web APIs
if your scene is complex, you should consider creating a worker—or using one that you've previously created for this purpose—to per
form the computations needed for each frame to be rendered.
... each requestanimationframe() callback should use the in
formation provided about the objects located in the 3d world to render the frame using webgl.
... include a handler for the xrsession event end event to be in
formed when the session is ending, regardless of whether your code, the user, or the browser initiated the termination of the session.
Targeting and hit detection - Web APIs
for instance, if you have a more-or-less rectangular object, use a rectangle as a surrogate for the object when per
forming hit testing.
... the details of how to work with an individual plat
form's ranging system is beyond the scope of this article.
... however, there's hope: a proposal has been floated for a webxr hit test module that would layer atop webxr to provide an api for per
forming hit testing and collision detection.
Advanced techniques: Creating and sequencing audio - Web APIs
the oscillatornode comes with basic wave
forms out of the box — sine, square, triangle or sawtooth.
...if you're looking to do something more bespoke, however, the iir filter might be a good option — see using iir filters for more in
formation.
... let's create another async function to set up the sample — we can combine the two async functions in a nice promise pattern to per
form further actions when this file is loaded and buffered: async function setupsample() { const filepath = 'dtmf.mp3'; const sample = await getfile(audioctx, filepath); return sample; } note: you can easily modify the above function to take an array of files and loop over them to load more than one sample.
Web Audio API best practices - Web APIs
as long as you consider security, per
formance, and accessibility, you can adapt to your own style.
...both are legitimate ways of working, however, it's more common to use the
former when you are working with full-length tracks, and the latter when working with shorter, more sample-like tracks.
...check out the tutorial here for creating your own instrument for in
formation on creating sounds with oscillators and buffers.
Using the Web Audio API - Web APIs
there are a lot of features of the api, so for more exact in
formation, you'll have to check the browser compatibility tables at the bottom of each reference page.
...basic audio operations are per
formed with audio nodes, which are linked together to
form an audio routing graph.
... <audio src="mycooltrack.mp3"></audio> note: if the sound file you're loading is held on a different domain you will need to use the crossorigin attribute; see cross origin resource sharing (cors) for more in
formation.
Window: unhandledrejection event - Web APIs
the event includes two useful pieces of in
formation: promise the actual promise which was rejected with no handler available to deal with the rejection.
... basic error logging this example simply logs in
formation about the unhandled promise rejection to the console.
...you can prevent that from happening by adding a handler for unhandledrejection events that—in addition to any other tasks you wish to per
form—calls preventdefault() to cancel the event, preventing it from bubbling up to be handled by the runtime's logging code.
WorkerGlobalScope - Web APIs
workers have no browsing context; this scope contains the in
formation usually conveyed by window objects — in this case event handlers, the console or the associated workernavigator object.
... non-standard properties workerglobalscope.per
formance read only returns the per
formance associated with the worker.
... it is a regular per
formance object, except that only a subset of its property and methods are available to workers.
Sending and Receiving Binary Data - Web APIs
add in
formation about other browsers' support here.
... submitting
forms and uploading files please, read this paragraph.
...in that case, you don't have to set the content-length header yourself, as the in
formation is fetched from the stream automatically: // make a stream from a file.
XRHandedness - Web APIs
ace) { for (let source of session.inputsources) { if (source.gripspace) { let grippose = frame.getpose(source.gripspace, refspace); if (grippose) { myrenderhandobject(grippose, inputsource.handedness); } } } } this function, which would be called every animation frame (or possibly just periodically, depending on the degree of smoothness required and any per
formance constraints), scans the list of input sources looking for any which have a gripspace which isn't null.
... if gripspace is non-null, the function proceeds to get the pose for the gripspace trans
formed into the current reference space.
...with these values in hand (no pun intended), myrenderhandobject() can draw the appropriate model positioned and
formed for the correct hand.
XRInputSource.handedness - Web APIs
ace) { for (let source of session.inputsources) { if (source.gripspace) { let grippose = frame.getpose(source.gripspace, refspace); if (grippose) { myrenderhandobject(grippose, inputsource.handedness); } } } } this function, which would be called every animation frame (or possibly just periodically, depending on the degree of smoothness required and any per
formance constraints), scans the list of input sources looking for any which have a gripspace which isn't null.
... if gripspace is non-null, the function proceeds to get the pose for the gripspace trans
formed into the current reference space.
...with these values in hand (no pun intended), myrenderhandobject() can draw the appropriate model positioned and
formed for the correct hand.
XRInputSource.targetRayMode - Web APIs
tracked-pointer targeting is being per
formed using a handheld device or hand-tracking system which the user points in the direction of the target.
...the direction is determined using plat
form-specific rules, though if no such rules exist, the direction is chosen by assuming the user is pointing their index finger straight out from their hand.
... the code should continue to per
form tasks such as drawing controllers or any objects representative of the user's hands' positions in the virtual space, as well as any other input-related tasks.
XRPermissionDescriptor.requiredFeatures - Web APIs
the permissions check will be per
formed in such a manner as to verify that all features in the list are available for use with the user's permission.
... the permitted values are: the types of reference space are listed in the table below, with brief in
formation about their use cases and which interface is used to implement them.
...the exact position depends on the underlying plat
form and implementation.
XRPose - Web APIs
properties xrpose.trans
form read only a xrrigidtrans
form which provides the position and orientation of the pose relative to the base xrspace.
... xrpose.emulatedposition read only a boolean value which is false if the position and orientation given by trans
form 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 trans
form 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 trans
form is in part emulated in software.
XRReferenceSpace: reset event - Web APIs
bubbles yes cancelable no interface xrreferencespaceevent event handler property onreset usage notes the reset event indicates that the coordinate system has been reset or reconfigured by changing the reference space's origin, moving and rotating it as indicated by the event's trans
form property.
... the user is in an unbounded reference space and has moved far enough from the starting position (the reference space's origin) that floating-point or other
forms of error or drift are problematic.
...first, you can use the addeventlistener() method: viewerrefspace.addeventlistener("reset", (event) => { /* per
form reset related tasks */ }); the second option is to set the xrreferencespace object's onreset event handler property: viewerrefspace.onreset = (event) => { /* per
form reset related tasks */ }; specifications specification status comment webxr device apithe definition of 'reset event' in that specification.
XRSession: select event - Web APIs
examples of comon kinds of primary action are users pressing triggers or buttons, tapping a touchpad, speaking a command, or per
forming a recognizable gesture when using a video tracking system or handheld controller with an accelerometer.
...the handler fetches the pose representing the target ray for tracked-pointer inputs and sends the pose's trans
form to a function called myhandleselectwithray().
... xrsession.addeventlistener("select", event => { if (event.inputsource.targetraymode == "tracked-pointer") { let targetraypose = event.frame.getpose(event.inputsource.targetrayspace, myrefspace); if (targetraypose) { myhandleselectwithray(targetraypose.trans
form); } } }); you can of course also set up a handler for select events by setting the xrsession object's onselect event handler property to a function that handles the event: xrsession.onselect = event => { if (event.inputsource.targetraymode == "tracked-pointer") { let targetraypose = event.frame.getpose(event.inputsource.targetrayspace, myrefspace); if (targetraypose) { myhandleselectwithray(targetraypose.trans
form); } } }; speci...
XRSession: squeezestart event - Web APIs
the mybegintracking() function would presumably start the presentation of the object-dragging process, using the trans
form to per
form a hit test, determining which object to pick up.
... upon receiving a squeeze event, the mydropobject() function is called with the target object and the current target ray pose trans
form as inputs.
... the squeezeend event results in a mystoptracking() function being called with the object being dragged and the final target ray pose's trans
form.
XRSession - Web APIs
with xrsession methods, you can poll the viewer's position and orientation (the xrviewerpose), gather in
formation about the user's environment, and present imagery to the user.
...this includes things such as the near and far clipping planes (distances defining how close and how far away objects can be and still get rendered), as well as field of view in
formation.
...this generally corresponds to the user pressing a trigger, touchpad, or button, speaks a command, or per
forms a recognizable gesture.
XRTargetRayMode - Web APIs
tracked-pointer targeting is being per
formed using a handheld device or hand-tracking system which the user points in the direction of the target.
...the direction is determined using plat
form-specific rules, though if no such rules exist, the direction is chosen by assuming the user is pointing their index finger straight out from their hand.
... the code should continue to per
form tasks such as drawing controllers or any objects representative of the user's hands' positions in the virtual space, as well as any other input-related tasks.
XRWebGLLayerInit.antialias - Web APIs
there is no way to request a specific anti-aliasing
format or level; this decision is left up to the user agent.
... let options = { antialias: getpreferencevalue("antialiasing") }; let gllayer = new xrwebgllayer(xrsession, gl, options); if (gllayer) { xrsession.updaterenderstate({ baselayer: gllayer }); } offering the user features such as the ability to enable or disable things like anti-aliasing can provide them with optiions to try when your app isn't per
forming as well as they'd like.
... disabling anti-aliasing may improve per
formance to some extent.
Using the aria-activedescendant attribute - Accessibility
possible effects on user agents and assistive technology the user agent, which is any software that retrieves, renders and facilitates end user interaction with web content, uses the aria-activedescendant property to in
form the assistive technology about the active child which has focus.
...the in
formation provided below is one of those opinions and therefore not normative.
... examples example 1: code working examples: notes aria attributes used related aria techniques compatibility tbd: add support in
formation for common ua and at product combinations additional resources ...
Using the article role - Accessibility
the article role is used to identify a section of a page that
forms an independent part of a document, page or site.
...the in
formation provided above is one of those opinions and therefore not normative.
...ontent"> <p>a very interesting post</p> </section> <section class="comments"> <div class="comment" role="article"> <p>meaningful comment</p> </div> <div class="comment" role="article"> <p>positive comment</p> </div> </section> </article> notes aria attributes used related aria techniques aria techniques - list of roles compatibility tbd: add support in
formation for common ua and at product combinations additional resources wai-aria specification for the article role ...
Using the group role - Accessibility
a group should be used to
form a logical collection of items with related functionality, such as children in a tree widget
forming a collection of siblings in a hierarchy, or a collection of items having the same container in a directory.
...the in
formation provided above is one of those opinions and therefore not normative.
... aria attributes used group related aria techniques region role compatibility tbd: add support in
formation for common ua and at product combinations additional resources aria authoring practices – accessible name guidance by role – group ...
Using the link role - Accessibility
aria links should be included in the screen reader's “list links” function just like ordinary links, and actions in this dialogue list, such as “activate link” or “move to link”, should per
form the same as they do with ordinary links.
...the in
formation provided above is one of those opinions and therefore not normative.
... opening a page using the open() method counts as being a popup, and certain browsers may issue a warning when you try to activate it, or make you explicitly agree to allowing popups
form the domain it exists on.
Using the radio role - Accessibility
the in
formation provided above is one of those opinions and therefore not normative.
... examples example 1: example from the basic
form hints mdn page.
... </li> <li id="r2" tabindex="-1" role="radio" aria-checked="false"> <img role="presentation" src="radio-unchecked.gif" /> subway </li> <li id="r3" tabindex="0" role="radio" aria-checked="true"> <img role="presentation" src="radio-checked.gif" /> radio maria </li> </ul> working examples: notes aria attributes used related aria techniques compatibility tbd: add support in
formation for common ua and at product combinations additional resources ...
Using the slider role - Accessibility
see the examples section below for more in
formation.
...the in
formation provided above is one of those opinions and therefore not normative.
... var handle = document.getelementbyid("day-handle"); handle.setattribute("aria-valuenow", newvalue.tostring()); handle.setattribute("aria-valuetext", daynames[newvalue]); }; working examples: slider example notes aria attributes used aria-valuemin aria-valuemax aria-valuenow aria-valuetext aria-orientation related aria techniques compatibility tbd: add support in
formation for common ua and at product combinations additional resources wai-aria specification for the slider role ...
ARIA: alert role - Accessibility
description one of the five live region roles, the alert role is used to provide the user with important, and usually time-sensitive, in
formation, and often to tell the user an element has been dynamically updated.
...it is perfect for situations such as when a user fills out a
form and javascript is used to add an error message - the alert would immediately read out the message.
... <p role="alert" style="display: none;">the alert will trigger when the element becomes visible.</p> while triggering an alert via css alone is possible, it is better to rely on javascript because it has more browser/screen reader support and is often more appropriate as part of a larger user interaction such as inside an event handler or
form validation.
ARIA: cell role - Accessibility
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 in
formation.
...if a cell contains column or row header in
formation, use the colheader or rowheader roles, respecitively.
... if the cell does not contain header in
formation and is nested in a grid or treegrid, the role of gridcell may be more appropriate.
ARIA: document role - Accessibility
generally used in complex composite widgets or applications, the document role can in
form assistive technologies 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 id="infotext" role="document" tabindex="0"> <p>some in
formational text goes here.</p> </div> ...
... <button>close</button> </div> this example shows a dialog widget with some controls and a section with some in
formational text that the assistive technology user can read when tabbing to it.
ARIA: checkbox role - Accessibility
instead use the native html checkbox of <input type="checkbox">, which natively provides all the functionality required: <input type="checkbox" id="chk1-label"> <label for="chk1-label">remember my preferences</label> description the native html checkbox
form control can only have two checked states ("checked" or "not checked"), with an indeterminate state settable via javascript.
...the in
formation provided above is one of those opinions and therefore not normative.
...as such, it is recommended to use the native html checkbox using
form control instead of recreating a checkbox's functionality with javascript and aria.
Mobile accessibility checklist - Accessibility
colour colour contrast must comply with wcag 2.1 aa level requirements: contrast ratio of 4.5:1 for normal text (less than 18 point or 14 point bold.) contrast ratio of 3:1 for large text (at least 18 point or 14 point bold.) in
formation conveyed via colour must be also available by other means too (underlined text for links, etc.) visibility content hiding techniques such as zero opacity, z-index order and off-screen placement must not be used exclusively to handle visibility.
... focus all activatable elements must be focusable: standard controls such as links, buttons, and
form fields are focusable by default.
... all
form controls must have labels (<label> elements) for the benefit of screen reader users.
Web accessibility for seizures and physical reactions - Accessibility
see the mdn document, mediaquerylist for more in
formation.
... see also mdn accessibility: what users can to to browse more safely accessibility: understanding color and luminance applying svg effects to html content basic animations (canvas tutorial) canvas api canvasrenderingcontext2d.drawimage() <color> document object model mediaquerylist using dynamic styling in
formation webgl: 2d and 3d graphics for the web color color tutorial: describing color tom jewett.
...
formula to determine brightness of rgb color stack exchange discussion thread how the color red influences our behavior scientific american by susana martinez-conde, stephen l.
Robust - Accessibility
this article provides practical advice on how to write your web content so that it con
forms to the success criteria outlined in the robust principle of the web content accessibility guidelines (wcag) 2.0 and 2.1.
... success criteria how to con
form to the criteria practical resource 4.1.1 parsing (a) content should be well-
formed so it can be parsed successfully by browsers and other user agents such as screenreaders.
...
form inputs, buttons, links, etc.) should be programmatically determinable.
-moz-image-region - CSS: Cascading Style Sheets
this allows elements to use different pieces of the same image to improve per
formance.
...
formal definition initial valueautoapplies toxul <image> elements and :-moz-tree-image, :-moz-tree-twisty, and :-moz-tree-checkbox pseudo-elements.
...it will not work with xul <image src="url" />.inheritedyescomputed valueas specifiedanimation typediscrete
formal syntax <shape> | autowhere <shape> = rect(<top>, <right>, <bottom>, <left>) examples clipping an image #example-button { /* display only the 4x4 area from the top left of this image */ list-style-image: url("chrome://example/skin/example.png"); -moz-image-region: rect(0px, 4px, 4px, 0px); } #example-button:hover { /* use the 4x4 area to the right of the first for the hovered button */ -moz-image-region: rect(0px, 8px, 4px, 4px); } specifications not part of any standard.
-webkit-text-security - CSS: Cascading Style Sheets
-webkit-text-security is a non-standard css property that obfuscates characters in a <
form> field (such as <input> or <textarea>) by replacing them with a shape.
... syntax -webkit-text-security: circle; -webkit-text-security: disc; -webkit-text-security: square; -webkit-text-security: none;
formal definition value not found in db!
...
formal syntax syntax not found in db!
:default - CSS: Cascading Style Sheets
the :default css pseudo-class selects
form elements that are the default in a group of related elements.
... <button> matches if it is a <
form>’s default submission button: the first <button> in dom order that belongs to the
form.
... this also applies to <input> types that submit
forms, like image or submit.
:disabled - CSS: Cascading Style Sheets
/* selects any disabled <input> */ input:disabled { background: #ccc; } syntax :disabled examples this example shows a basic shipping
form.
... html <
form action="#"> <fieldset id="shipping"> <legend>shipping address</legend> <input type="text" placeholder="name"> <input type="text" placeholder="address"> <input type="text" placeholder="zip code"> </fieldset> <br> <fieldset id="billing"> <legend>billing address</legend> <label for="billing-checkbox">same as shipping address:</label> <input type="checkbox" id="billing-checkbox" checked> <br> <input type="text" placeholder="name" disabled> <input type="text" placeholder="address" disabled> <input type="text" placeholder="zip code" disabled> </fieldset> </
form> css input[type="text"]:disabled { background: #ccc; } javascript // wait for t...
... recommendation defines the semantics of html and
forms.
:focus-within - CSS: Cascading Style Sheets
(this includes descendants in shadow trees.) /* selects a <div> when one of its descendants is focused */ div:focus-within { background: cyan; } this selector is useful, to take a common example, for highlighting an entire <
form> container when the user focuses on one of its <input> fields.
... syntax :focus-within examples in this example, the
form will receive special coloring styles when either text input receives focus.
... html <p>try typing into this
form.</p> <
form> <label for="given_name">given name:</label> <input id="given_name" type="text"> <br> <label for="family_name">family name:</label> <input id="family_name" type="text"> </
form> css
form { border: 1px solid; color: gray; padding: 4px; }
form:focus-within { background: #ff8; color: black; } input { margin: 4px; } result specifications specification status comment selectors level 4the definition of ':focus-within' in that specification.
:invalid - CSS: Cascading Style Sheets
the :invalid css pseudo-class represents any <input> or other <
form> element whose contents fail to validate.
... syntax :invalid examples this example presents a simple
form that colors elements green when they validate and red when they don't.
... html <
form> <div class="field"> <label for="url_input">enter a url:</label> <input type="url" id="url_input"> </div> <div class="field"> <label for="email_input">enter an email address:</label> <input type="email" id="email_input" required> </div> </
form> css label { display: block; margin: 1px; padding: 1px; } .field { margin: 1px; padding: 1px; } input:invalid { background-color: #ffdddd; }
form:invalid { border: 5px solid #ffdddd; } input:valid { background-color: #ddffdd; }
form:valid { border: 5px solid #ddffdd; } input:required { border-color: #800000; border-width: 3px; } input:required:invalid { border-color: #c00000; } result accessibility concerns the color red is commonly used to indicate invalid input.
:nth-child() - CSS: Cascading Style Sheets
formal syntax :nth-child( <nth> [ of <complex-selector-list> ]?
...the first one to be returned as a result of the
formula is 0 [=5x0], resulting in a no-match, since the elements are indexed from 1, whereas n starts from 0.
... this may seem weird at first, but it makes more sense when the b part of the
formula is >0, like in the next example.
:placeholder-shown - CSS: Cascading Style Sheets
html <input placeholder="type something here!"> css input { border: 1px solid black; padding: 3px; } input:placeholder-shown { border-color: teal; color: purple; font-style: italic; } result overflowing text when
form fields are too small, placeholder text can get cropped in an undesirable way.
... html <
form id="test"> <p> <label for="name">enter student name:</label> <input id="name" placeholder="student name"/> </p> <p> <label for="branch">enter student branch:</label> <input id="branch" placeholder="student branch"/> </p> <p> <label for="sid">enter student id:</label> <input type="number" pattern="[0-9]{8}" title="8 digit id" id="sid" class="studentid" placeholder...
...="8 digit id"/> </p> <input type="submit"/> </
form> css input { background-color: #e8e8e8; color: black; } input.studentid:placeholder-shown { background-color: yellow; color: red; font-style: italic; } result specifications specification status comment selectors level 4the definition of ':placeholder-shown' in that specification.
:required - CSS: Cascading Style Sheets
/* selects any required <input> */ input:required { border: 1px dashed red; } this pseudo-class is useful for highlighting fields that must have valid data before a
form can be submitted.
... note: the :optional pseudo-class selects optional
form fields.
... if the
form also contains optional inputs, required inputs should be indicated visually using a treatment that does not rely solely on color to convey meaning.
system - CSS: Cascading Style Sheets
syntax /* keyword values */ system: cyclic; system: numeric; system: alphabetic; system: symbolic; system: additive; system: fixed; /* combined values */ system: fixed 3; system: extends decimal; this may take one of three
forms: one of the keyword values cyclic, numeric, alphabetic, symbolic, additive, or fixed.
...if one more more counter styles defenitions
form a cycle with their extends values, the browser will treat all the participating counter styles as extending from the decimal style.
...
formal definition related at-rule@counter-styleinitial valuesymboliccomputed valueas specified
formal syntax cyclic | numeric | alphabetic | symbolic | additive | [ fixed <integer>?
Coordinate systems - CSS: Cascading Style Sheets
it's actually possible to change the definitions and orientations of these coordinate systems using css properties such as trans
form.
...whenever the mouse enters, moves around inside, or exits the inner box, the corresponding event is handled by updating a set of in
formational messages within the box, listing out the current mouse coordinates in each of the four available coordinate systems.
... let inner = document.queryselector(".inner"); let log = document.queryselector(".log"); function setcoords(e, type) { let idx = type + "x"; let idy = type + "y"; document.getelementbyid(idx).innertext = e[idx]; document.getelementbyid(idy).innertext = e[idy]; } a reference to the <div> inside the inner box which contains the paragraphs that will show the coordinate in
formation is fetched into log.
Backwards Compatibility of Flexbox - CSS: Cascading Style Sheets
if you find something referring to display: box or display: flexbox this is outdated in
formation.
...you can also check can i use for in
formation about when prefixes were removed in browsers to make your decision.
...the following feature query would include uc browser, which supports feature queries and old flexbox syntax, prefixed: @supports (display: flex) or (display: -webkit-box) { // code for supporting browsers } for more in
formation about using feature queries see using feature queries in css on the mozilla hacks blog.
Relationship of flexbox to other layout methods - CSS: Cascading Style Sheets
the writing modes the writing modes specification defines the following values of the writing-mode property, which serve to change the direction that blocks are laid out on the page, to match the direction that blocks lay out when content is
formatted in that particular writing mode.
...you can see more in
formation on browser support in the mdn documentation for writing-mode.
...this is because the items no longer have a float applied, as they have been trans
formed into flex items.
Flow Layout and Overflow - CSS: Cascading Style Sheets
as we have already learned, using any of these values, other than the default of visible, will create a new block
formatting context.
...in addition it does not create a block
formatting context.
... summary whether you are in continuous media on the web or in a paged media
format such as print or epub, understanding how content overflows is useful when dealing with any layout method.
In Flow and Out of Flow - CSS: Cascading Style Sheets
taking an item out of flow all elements are in-flow apart from: floated items items with position: absolute (including position: fixed which acts in the same way) the root element (html) out of flow items create a new block
formatting context (bfc) and therefore everything inside them can be seen as a mini layout, separate from the rest of the page.
... the root element therefore is out of flow, as the container for everything in our document, and establishes the block
formatting context for the document.
...in the next guide we will look at a related issue, that of creating a block
formatting context, in
formatting contexts explained.
Box alignment in CSS Grid Layout - CSS: Cascading Style Sheets
layout methods will con
form to the specification where possible and implement individual behavior based on their differences (features and constraints).
...once again, this operates on the block and inline axes, with align-content aligning tracks on the block axis, and justify-content per
forming alignment on the inline axis.
...you can see how items 1 and 2, which span two row tracks have taken on extra height as they gain the additional space added to the gap between those two tracks: justifying the grid tracks on the row axis on the inline axis, we can use justify-content to per
form the same type of alignment that we used align-content for in the block axis.
CSS Grid Layout and Accessibility - CSS: Cascading Style Sheets
style sheets that use these features to per
form logical reordering are non-con
forming.
... visual not logical re-ordering any time you reorder things with grid layout – or with flexbox – you only per
form visual reordering.
...for more in
formation about this interaction see the guide on the relationship of grid layout to other layout methods and the section on display: contents.
The stacking context - CSS: Cascading Style Sheets
this occurs because these elements have special properties which cause them to
form a stacking context.
... a stacking context is
formed, anywhere in the document, by any element in the following scenarios: root element of the document (<html>).
... element with any of the following properties with value other than none: trans
form filter perspective clip-path mask / mask-image / mask-border element with a isolation value isolate.
Mozilla CSS extensions - CSS: Cascading Style Sheets
ollbar-end-backward) :-moz-system-metric(scrollbar-end-forward) :-moz-system-metric(scrollbar-start-backward) :-moz-system-metric(scrollbar-start-forward) :-moz-system-metric(scrollbar-thumb-proportional) :-moz-system-metric(touch-enabled) :-moz-system-metric(windows-default-theme) -moz-user-focus -moz-user-input -moz-user-modify -moz-window-dragging -moz-window-shadow
formerly proprietary properties that are now standard note: to maximize the compatibility of your css, you should use the unprefixed standard properties instead of the prefixed ones listed below.
...efixed version still accepted] -moz-perspective-origin [prefixed version still accepted] pointer-events [applying to more than svg] t–u -moz-tab-size -moz-text-align-lastobsolete since gecko 53 -moz-text-decoration-colorobsolete since gecko 39 -moz-text-decoration-lineobsolete since gecko 39 -moz-text-decoration-styleobsolete since gecko 39 -moz-text-size-adjust -moz-trans
form [prefixed version still accepted] -moz-trans
form-origin [prefixed version still accepted] -moz-trans
form-style [prefixed version still accepted] -moz-transition [prefixed version still accepted] -moz-transition-delay [prefixed version still accepted] -moz-transition-duration [prefixed version still accepted] -moz-transition-property [prefixed version still accepted] -moz-tran...
... image-rendering -moz-crisp-edges <length> -moz-calc list-style-type -moz-arabic-indic -moz-bengali -moz-cjk-earthly-branch -moz-cjk-heavenly-stem -moz-devanagari -moz-ethiopic-halehame -moz-ethiopic-halehame-am -moz-ethiopic-halehame-ti-er -moz-ethiopic-halehame-ti-et -moz-ethiopic-numeric -moz-gujarati -moz-gurmukhi -moz-hangul -moz-hangul-consonant -moz-japanese-
formal -moz-japanese-in
formal -moz-kannada -moz-khmer -moz-lao -moz-malayalam -moz-myanmar -moz-oriya -moz-persian -moz-simp-chinese-
formal -moz-simp-chinese-in
formal -moz-tamil -moz-telugu -moz-thai -moz-trad-chinese-
formal -moz-trad-chinese-in
formal -moz-urdu overflow -moz-scrollbars-none -moz-scrollbars-horizontal -moz-scrollbars-vertical -moz-hidden-unscrollable ...
CSS reference - CSS: Cascading Style Sheets
nguage-overridefont-optical-sizingfont-sizefont-size-adjustfont-stretchfont-stretch (@font-face)font-stylefont-style (@font-face)font-synthesisfont-variantfont-variant (@font-face)font-variant-alternatesfont-variant-capsfont-variant-east-asianfont-variant-ligaturesfont-variant-numericfont-variant-positionfont-variation-settingsfont-variation-settings (@font-face)font-weightfont-weight (@font-face)
format()fr<frequency><frequency-percentage>:fullscreenggapgrad<gradient>grayscale()gridgrid-areagrid-auto-columnsgrid-auto-flowgrid-auto-rowsgrid-columngrid-column-endgrid-column-startgrid-rowgrid-row-endgrid-row-startgrid-templategrid-template-areasgrid-template-columnsgrid-template-rowshhzhanging-punctuationheightheight (@viewport)@historical-
forms:hoverhsl()hsla()hue-rotate()hyphensi<ident><image>i...
...sizetable-layout:targettarget-counter()target-counters()target-text()text-aligntext-align-lasttext-combine-uprighttext-decorationtext-decoration-colortext-decoration-linetext-decoration-skip-inktext-decoration-styletext-decoration-thicknesstext-emphasistext-emphasis-colortext-emphasis-positiontext-emphasis-styletext-indenttext-justifytext-orientationtext-overflowtext-renderingtext-shadowtext-trans
formtext-underline-offsettext-underline-position<time><time-percentage><timing-function>top@top-centertouch-actiontrans
formtrans
form-box<trans
form-function>trans
form-origintrans
form-styletransitiontransition-delaytransition-durationtransition-propertytransition-timing-functiontranslatetranslate()translate3d()translatex()translatey()translatez()turnuunicode-bidiunicode-range (@font-face)unset<url>url()...
... concepts syntax and semantics css syntax at-rules cascade comments descriptor inheritance shorthand properties specificity value definition syntax css unit and value types values actual value computed value initial value resolved value specified value used value layout block
formatting context box model containing block layout mode margin collapsing replaced elements stacking context visual
formatting model dom-css / cssom major object types documentorshadowroot.stylesheets stylesheets[i].cssrules cssrules[i].csstext (selector & style) cssrules[i].selectortext htmlelement.style htmlelement.style.csstext (just style) element.classname element.classlist ...
Replaced elements - CSS: Cascading Style Sheets
in css, a replaced element is an element whose representation is outside the scope of css; they're external objects whose representation is independent of the css
formatting model.
...see controlling object position within the content box for further in
formation.
...however, other
form controls, including other types of <input> elements, are explicitly listed as non-replaced elements (the spec describes their default plat
form-specific rendering with the term "widgets").
Syntax - CSS: Cascading Style Sheets
each property has a set of valid values, defined by a
formal grammar, as well as a semantic meaning, implemented by the browser engine.
...but there is other in
formation that a web author wants to convey in the style sheet, like the character set, other external style sheets to import, font face or list counter descriptions and many more.
...they are used to convey meta-data in
formation (like @charset or @import), conditional in
formation (like @media or @document), or descriptive in
formation (like @font-face).
animation-direction - CSS: Cascading Style Sheets
animation steps are per
formed backwards, and timing functions are also reversed.
...for more in
formation, see setting multiple animation property values.
...
formal definition initial valuenormalapplies toall elements, ::before and ::after pseudo-elementsinheritednocomputed valueas specifiedanimation typediscrete
formal syntax <single-animation-direction>#where <single-animation-direction> = normal | reverse | alternate | alternate-reverse examples see css animations for examples.
background-color - CSS: Cascading Style Sheets
values <color> the uni
form color of the background.
... webaim: color contrast checker mdn understanding wcag, guideline 1.4 explanations understanding success criterion 1.4.3 | w3c understanding wcag 2.0
formal definition initial valuetransparentapplies toall elements.
... it also applies to ::first-letter and ::first-line.inheritednocomputed valuecomputed coloranimation typea color
formal syntax <color>where <color> = <rgb()> | <rgba()> | <hsl()> | <hsla()> | <hex-color> | <named-color> | currentcolor | <deprecated-system-color>where <rgb()> = rgb( <percentage>{3} [ / <alpha-value> ]?
background-position - CSS: Cascading Style Sheets
formal definition initial value0% 0%applies toall elements.
...g area minus size of background image; size refers to the width for horizontal offsets and to the height for vertical offsetscomputed valuea list, each item consisting of two keywords representing the origin and two offsets from that origin, each given as an absolute length (if given a <length>), otherwise as a percentageanimation typerepeatable list of simple list of length, percentage, or calc
formal syntax <bg-position>#where <bg-position> = [ [ left | center | right | top | bottom | <length-percentage> ] | [ left | center | right | <length-percentage> ] [ top | center | bottom | <length-percentage> ] | [ center | [ left | right ] <length-percentage>?
... see also background-position-x background-position-y background-position-inline background-position-block using multiple backgrounds trans
form-origin ...
border-bottom-color - CSS: Cascading Style Sheets
formal definition initial valuecurrentcolorapplies toall elements.
... it also applies to ::first-letter.inheritednocomputed valuecomputed coloranimation typea color
formal syntax <'border-top-color'> examples a simple div with a border html <div class="mybox"> <p>this is a box with a border around it.
... candidate recommendation no significant changes, though the transparent keyword, now included in <color> which has been extended, has been
formally removed.
border-color - CSS: Cascading Style Sheets
you can find more in
formation about border colors in borders in applying color to html elements using css.
...
formal definition initial valueas each of the properties of the shorthand:border-top-color: currentcolorborder-right-color: currentcolorborder-bottom-color: currentcolorborder-left-color: currentcolorapplies toall elements.
...t also applies to ::first-letter.inheritednocomputed valueas each of the properties of the shorthand:border-bottom-color: computed colorborder-left-color: computed colorborder-right-color: computed colorborder-top-color: computed coloranimation typeas each of the properties of the shorthand:border-bottom-color: a colorborder-left-color: a colorborder-right-color: a colorborder-top-color: a color
formal syntax <color>{1,4}where <color> = <rgb()> | <rgba()> | <hsl()> | <hsla()> | <hex-color> | <named-color> | currentcolor | <deprecated-system-color>where <rgb()> = rgb( <percentage>{3} [ / <alpha-value> ]?
border-image - CSS: Cascading Style Sheets
if the image contains in
formation critical to understanding the page's overall purpose, it is better to describe it semantically in the document.
... mdn understanding wcag, guideline 1.1 explanations understanding success criterion 1.1.1 | understanding wcag 2.0
formal definition initial valueas each of the properties of the shorthand:border-image-source: noneborder-image-slice: 100%border-image-width: 1border-image-outset: 0border-image-repeat: stretchapplies toall elements, except internal table elements when border-collapse is collapse.
... specified, but with relative lengths converted into absolute lengthsborder-image-repeat: as specifiedborder-image-slice: one to four percentage(s) (as specified) or absolute length(s), plus the keyword fill if specifiedborder-image-source: none or the image with its uri made absoluteborder-image-width: as specified, but with relative lengths converted into absolute lengthsanimation typediscrete
formal syntax <'border-image-source'> | <'border-image-slice'> [ / <'border-image-width'> | / <'border-image-width'>?
border-left-color - CSS: Cascading Style Sheets
formal definition initial valuecurrentcolorapplies toall elements.
... it also applies to ::first-letter.inheritednocomputed valuecomputed coloranimation typea color
formal syntax <color>where <color> = <rgb()> | <rgba()> | <hsl()> | <hsla()> | <hex-color> | <named-color> | currentcolor | <deprecated-system-color>where <rgb()> = rgb( <percentage>{3} [ / <alpha-value> ]?
... candidate recommendation no significant changes, though the transparent keyword, now included in <color> which has been extended, has been
formally removed.
border-right-color - CSS: Cascading Style Sheets
formal definition initial valuecurrentcolorapplies toall elements.
... it also applies to ::first-letter.inheritednocomputed valuecomputed coloranimation typea color
formal syntax <color>where <color> = <rgb()> | <rgba()> | <hsl()> | <hsla()> | <hex-color> | <named-color> | currentcolor | <deprecated-system-color>where <rgb()> = rgb( <percentage>{3} [ / <alpha-value> ]?
... candidate recommendation no significant changes, though the transparent keyword, now included in <color> which has been extended, has been
formally removed.
border-top-color - CSS: Cascading Style Sheets
formal definition initial valuecurrentcolorapplies toall elements.
... it also applies to ::first-letter.inheritednocomputed valuecomputed coloranimation typea color
formal syntax <color>where <color> = <rgb()> | <rgba()> | <hsl()> | <hsla()> | <hex-color> | <named-color> | currentcolor | <deprecated-system-color>where <rgb()> = rgb( <percentage>{3} [ / <alpha-value> ]?
... candidate recommendation no significant changes, though the transparent keyword, now included in <color> which has been extended, has been
formally removed.
color - CSS: Cascading Style Sheets
note that the value must be a uni
form color.
... webaim: color contrast checker mdn understanding wcag, guideline 1.4 explanations understanding success criterion 1.4.3 | w3c understanding wcag 2.0
formal definition initial valuevaries from one browser to anotherapplies toall elements.
...the transparent keyword maps to rgba(0,0,0,0).animation typea color
formal syntax <color>where <color> = <rgb()> | <rgba()> | <hsl()> | <hsla()> | <hex-color> | <named-color> | currentcolor | <deprecated-system-color>where <rgb()> = rgb( <percentage>{3} [ / <alpha-value> ]?
contain - CSS: Cascading Style Sheets
this allows the browser to recalculate layout, style, paint, size, or any combination of them for a limited area of the dom and not the entire page, leading to obvious per
formance benefits.
... a new block
formatting context.
...
formal definition initial valuenoneapplies toall elementsinheritednocomputed valueas specifiedanimation typediscrete
formal syntax none | strict | content | [ size | layout | style | paint ] examples simple layout the markup below consists of a number of articles, each with content: <h1>my blog</h1> <article> <h2>heading of a nice article</h2> <p>content here.</p> </article> <article> <h2...
cross-fade() - CSS: Cascading Style Sheets
accessibility concerns browsers do not provide any special in
formation on background images to assistive technology.
...if the image contains in
formation critical to understanding the page's overall purpose, it is better to describe it semantically in the document.
... mdn understanding wcag, guideline 1.1 explanations understanding success criterion 1.1.1 | w3c understanding wcag 2.0
formal syntax cross-fade( <cf-mixing-image> , <cf-final-image>?
cursor - CSS: Cascading Style Sheets
default the plat
form-dependent default cursor.
... help help in
formation is available.
...
formal definition initial valueautoapplies toall elementsinheritedyescomputed valueas specified, but with <url> values made absoluteanimation typediscrete
formal syntax [ [ <url> [ <x> <y> ]?
font-feature-settings - CSS: Cascading Style Sheets
formal definition initial valuenormalapplies toall elements.
... it also applies to ::first-letter and ::first-line.inheritedyescomputed valueas specifiedanimation typediscrete
formal syntax normal | <feature-tag-value>#where <feature-tag-value> = <string> [ <integer> | on | off ]?
...mples enabling various font features /* use small-cap alternate glyphs */ .smallcaps { font-feature-settings: "smcp" on; } /* convert both upper and lowercase to small caps (affects punctuation also) */ .allsmallcaps { font-feature-settings: "c2sc", "smcp"; } /* use zeros with a slash through them to differentiate from "o" */ .nicezero { font-feature-settings: "zero"; } /* enable historical
forms */ .hist { font-feature-settings: "hist"; } /* disable common ligatures, usually on by default */ .noligs { font-feature-settings: "liga" 0; } /* enable tabular (monospaced) figures */ td.tabular { font-feature-settings: "tnum"; } /* enable automatic fractions */ .fractions { font-feature-settings: "frac"; } /* use the second available swash character */ .swash { font-feature-settings: "swsh...
font-language-override - CSS: Cascading Style Sheets
for example, a lot of fonts have a special character for the digraph fi that merge the dot on the "i" with the "f." however, if the language is set to turkish the typeface will likely know not to use the merged glyph; turkish has two versions of the "i," one with a dot (i) and one without (ı), and using the ligature would incorrectly trans
form a dotted "i" into a dotless "i." the font-language-override property lets you override the typeface behavior for a specific language.
...
formal definition initial valuenormalapplies toall elements.
... it also applies to ::first-letter and ::first-line.inheritedyescomputed valueas specifiedanimation typediscrete
formal syntax normal | <string> examples using danish glyphs html <p class="para1">default language setting.</p> <p class="para2">this is a string with the <code>font-language-override</code> set to danish.</p> css p.para1 { font-language-override: normal; } p.para2 { font-language-override: "dan"; } result specifications specification status comment css fonts module level 4the definition of 'font-language-override' in that specification.
font-size - CSS: Cascading Style Sheets
in order to calculate the em equivalent for any pixel value required, you can use this
formula: em = desired element pixel value / parent element font-size in pixels for example, suppose the font-size of the body of the page is set to 16px.
...
formal definition initial valuemediumapplies toall elements.
... it also applies to ::first-letter and ::first-line.inheritedyespercentagesrefer to the parent element's font sizecomputed valueas specified, but with relative lengths converted into absolute lengthsanimation typea length
formal syntax <absolute-size> | <relative-size> | <length-percentage>where <absolute-size> = xx-small | x-small | small | medium | large | x-large | xx-large | xxx-large<relative-size> = larger | smaller<length-percentage> = <length> | <percentage> examples setting font sizes css .small { font-size: xx-small; } .larger { font-size: larger; } .point { font-size: 24pt; } .percent { font-size: 200%; } html <h1 class="small">small h1</h1> <h1 class="larger">larger h1</h1> <h1 class="point">24 point h1</h1> <h1 class="percent">200% h1</h1> result specification...
font-synthesis - CSS: Cascading Style Sheets
syntax this property can take any one of the following
forms: the keyword value none.
...
formal definition initial valueweight styleapplies toall elements.
... it also applies to ::first-letter and ::first-line.inheritedyescomputed valueas specifiedanimation typediscrete
formal syntax none | [ weight | style ] examples disabling font synthesis html <em class="syn">synthesize me!
font-variant-caps - CSS: Cascading Style Sheets
small-caps glyphs typically use the
form of uppercase letters but are reduced to the size of lowercase letters.
... mdn understanding wcag, guideline 1.4 explanations w3c understanding wcag 2.1
formal definition initial valuenormalapplies toall elements.
... it also applies to ::first-letter and ::first-line.inheritedyescomputed valueas specifiedanimation typediscrete
formal syntax normal | small-caps | all-small-caps | petite-caps | all-petite-caps | unicase | titling-caps examples setting the small-caps font variant html <p class="small-caps">firefox rocks, small caps!</p> <p class="normal">firefox rocks, normal caps!</p> css .small-caps { font-variant-caps: small-caps; font-style: italic; } .normal { font-variant-caps: normal; font-style: italic; } result specifications specification status comment css fonts module level 3the definition of 'font-variant-caps' in that specification.
font-variant-east-asian - CSS: Cascading Style Sheets
as these are usually smaller, font creators often designs specific
forms, usually slightly bolder to improve the contrast.
...
formal definition initial valuenormalapplies toall elements.
... it also applies to ::first-letter and ::first-line.inheritedyescomputed valueas specifiedanimation typediscrete
formal syntax normal | [ <east-asian-variant-values> || <east-asian-width-values> || ruby ]where <east-asian-variant-values> = [ jis78 | jis83 | jis90 | jis04 | simplified | traditional ]<east-asian-width-values> = [ full-width | proportional-width ] examples setting east asian glyph variants this example require font "yu gothic" installed in your os, other fonts may not support opentype features.
font-variant - CSS: Cascading Style Sheets
stylistic(), historical-
forms, styleset(), character-variant(), swash(), ornaments(), annotation() specifies the keywords and functions related to the font-variant-alternates longhand property.
...
formal definition initial valuenormalapplies toall elements.
... it also applies to ::first-letter and ::first-line.inheritedyescomputed valueas specifiedanimation typediscrete
formal syntax normal | none | [ <common-lig-values> | <discretionary-lig-values> | <historical-lig-values> | <contextual-alt-values> | stylistic( <feature-value-name> ) | historical-
forms | styleset( <feature-value-name># ) | character-variant( <feature-value-name># ) | swash( <feature-value-name> ) | ornaments( <feature-value-name> ) | annotation( <feature-value-name> ) | [ small-caps | all-small-caps | petite-caps | all-petite-caps | unicase | titling-caps ] | <numeric-figure-values> | <numeric-spacing-values> | <numeric-fraction-values> | ordinal | slashed-zero | <east-asian-variant-values> | <east-asian-width-values> | ruby ]where <common-lig-values> = [ common-ligatures | no-...
font-variation-settings - CSS: Cascading Style Sheets
syntax /* use the default settings */ font-variation-settings: normal; /* set values for variable font axis names */ font-variation-settings: "xhgt" 0.7; /* global values */ font-variation-settings: inherit; font-variation-settings: initial; font-variation-settings: unset; values this property's value can take one of two
forms: normal text is laid out using default settings.
...
formal definition initial valuenormalapplies toall elements.
... it also applies to ::first-letter and ::first-line.inheritedyescomputed valueas specifiedanimation typea trans
form formal syntax normal | [ <string> <number> ]# examples you can find a number of other variable fonts examples at our variable fonts guide, v-fonts.com, and axis-praxis.org.
font-weight - CSS: Cascading Style Sheets
atorsans) and is used here under the terms of its license: https://github.com/letterror/mutatorsans/blob/master/license */ @font-face { src: url('https://mdn.mozillademos.org/files/16011/mutatorsans.ttf'); font-family:'mutatorsans'; font-style: normal; } label { font: 1rem monospace; white-space: nowrap; } .container { max-height: 150px; overflow-y: auto; } .sample { text-trans
form: uppercase; font: 1.5rem 'mutatorsans', sans-serif; } html, body { max-height: 100vh; max-width: 100vw; overflow: hidden; } body { display: flex; flex-direction: column; } header { margin-bottom: 1.5rem; } .container { flex-grow: 1; } .container > p { margin-top: 0; margin-bottom: 0; } javascript let weightlabel = document.queryselector('label[for="weight"]'); let w...
... mdn understanding wcag, guideline 1.4 explanations understanding success criterion 1.4.8 | w3c understanding wcag 2.0
formal definition initial valuenormalapplies toall elements.
... it also applies to ::first-letter and ::first-line.inheritedyescomputed valuethe keyword or the numerical value as specified, with bolder and lighter trans
formed to the real valueanimation typea font weight
formal syntax <font-weight-absolute> | bolder | lighterwhere <font-weight-absolute> = normal | bold | <number <a href="/docs/css/value_definition_syntax#brackets" title="brackets: enclose several entities, combinators, and multipliers to trans
form them as a single component">[1,1000]> examples setting font weights html <p> alice was beginning to get very tired of sitting by her sister on the bank, and of having nothing to do: once or twice she had peeped into the book her sister was reading, but it had no pictures or conversations in it, "and what is the use of a book," thoug...
grid-area - CSS: Cascading Style Sheets
note: named grid areas automatically generate implicit named lines of this
form, so specifying grid-area: foo; will choose the start/end edge of that named grid area (unless another line named foo-start/foo-end was explicitly specified before it).
...
formal definition initial valueas each of the properties of the shorthand:grid-row-start: autogrid-column-start: autogrid-row-end: autogrid-column-end: autoapplies togrid items and absolutely-positioned boxes whose containing block is a grid containerinheritednocomputed valueas each of the properties of the shorthand:grid-row-start: as specifiedgrid-column-start: as specifiedgrid-row-end: as specifie...
...dgrid-column-end: as specifiedanimation typediscrete
formal syntax <grid-line> [ / <grid-line> ]{0,3}where <grid-line> = auto | <custom-ident> | [ <integer> && <custom-ident>?
grid-template-columns - CSS: Cascading Style Sheets
fit-content( [ <length> | <percentage> ] ) represents the
formula min(max-content, max(auto, argument)), which is calculated similar to auto (i.e.
... repeat( [ <positive-integer> | auto-fill | auto-fit ] , <track-list> ) represents a repeated fragment of the track list, allowing a large number of columns that exhibit a recurring pattern to be written in a more compact
form.
...
formal definition initial valuenoneapplies togrid containersinheritednopercentagesrefer to corresponding dimension of the content areacomputed valueas specified, but with relative lengths converted into absolute lengthsanimation typesimple list of length, percentage, or calc, provided the only differences are in the values of the length, percentage, or calc components in the list
formal syntax none | <track-list> | <auto-trac...
grid-template-rows - CSS: Cascading Style Sheets
fit-content( [ <length> | <percentage> ] ) represents the
formula min(max-content, max(auto, argument)), which is calculated similar to auto (i.e.
... repeat( [ <positive-integer> | auto-fill | auto-fit ] , <track-list> ) represents a repeated fragment of the track list, allowing a large number of rows that exhibit a recurring pattern to be written in a more compact
form.
...
formal definition initial valuenoneapplies togrid containersinheritednopercentagesrefer to corresponding dimension of the content areacomputed valueas specified, but with relative lengths converted into absolute lengthsanimation typesimple list of length, percentage, or calc, provided the only differences are in the values of the length, percentage, or calc components in the list
formal syntax none | <track-list> | <auto-tra...
hanging-punctuation - CSS: Cascading Style Sheets
first an opening bracket or quote at the start of the first
formatted line of an element hangs.
... last a closing bracket or quote at the end of the last
formatted line of an element hangs.
...
formal definition initial valuenoneapplies toall elementsinheritedyescomputed valueas specifiedanimation typediscrete
formal syntax none | [ first | [ force-end | allow-end ] | last ] examples setting opening and closing quotes to hang html <p>“lorem ipsum dolor sit amet, consectetur adipiscing elit.
height - CSS: Cascading Style Sheets
fit-content(<length-percentage>) uses the fit-content
formula with the available space replaced by the specified argument, i.e.
... mdn understanding wcag, guideline 1.4 explanations understanding success criterion 1.4.4 | w3c understanding wcag 2.0
formal definition initial valueautoapplies toall elements but non-replaced inline elements, table columns, and column groupsinheritednopercentagesthe percentage is calculated with respect to the height of the generated box's containing block.
...a percentage height on the root element is relative to the initial containing block.computed valuea percentage or auto or the absolute lengthanimation typea length, percentage or calc();
formal syntax auto | <length> | <percentage> | min-content | max-content | fit-content(<length-percentage>)where <length-percentage> = <length> | <percentage> examples setting height using pixels and percentages html <div id="taller">i'm 50 pixels tall.</div> <div id="shorter">i'm 25 pixels tall.</div> <div id="parent"> <div id="child"> i'm half the height of my parent.
image() - CSS: Cascading Style Sheets
accessibility concerns browsers do not provide any special in
formation on background images to assistive technology.
...if the image contains in
formation critical to understanding the page's overall purpose, it is better to describe it semantically in the document.
...list items with dir="rtl" set on the <li> or inheriting the right-to-left directionality from an ancestor, such as documents set to arabic or hebrew, will have the bullet display on the right, horizontally flippled, as if trans
form: scalex(-1) had been set.
max-height - CSS: Cascading Style Sheets
fit-content(<length-percentage>) uses the fit-content
formula with the available space replaced by the specified argument, i.e.
... mdn understanding wcag, guideline 1.4 explanations understanding success criterion 1.4.4 | w3c understanding wcag 2.0
formal definition initial valuenoneapplies toall elements but non-replaced inline elements, table columns, and column groupsinheritednopercentagesthe percentage is calculated with respect to the height of the generated box's containing block.
... if the height of the containing block is not specified explicitly (i.e., it depends on content height), and this element is not absolutely positioned, the percentage value is treated as none.computed valuethe percentage as specified or the absolute length or noneanimation typea length, percentage or calc();
formal syntax auto | <length> | <percentage> | min-content | max-content | fit-content(<length-percentage>)where <length-percentage> = <length> | <percentage> examples setting max-height using percentage and keyword values table { max-height: 75%; }
form { max-height: none; } specifications specification status comment css box sizing module level 4the definition of 'max-height' in that specification.
min-height - CSS: Cascading Style Sheets
fit-content(<length-percentage>) uses the fit-content
formula with the available space replaced by the specified argument, i.e.
...
formal definition initial valueautoapplies toall elements but non-replaced inline elements, table columns, and column groupsinheritednopercentagesthe percentage is calculated with respect to the height of the generated box's containing block.
... if the height of the containing block is not specified explicitly (i.e., it depends on content height), and this element is not absolutely positioned, the percentage value is treated as 0.computed valuethe percentage as specified or the absolute lengthanimation typea length, percentage or calc();
formal syntax auto | <length> | <percentage> | min-content | max-content | fit-content(<length-percentage>)where <length-percentage> = <length> | <percentage> examples setting min-height table { min-height: 75%; }
form { min-height: 0; } specifications specification status comment css box sizing module level 4the definition of 'min-height' in that specification.
outline-color - CSS: Cascading Style Sheets
invert to ensure the outline is visible, per
forms a color inversion of the background.
... webaim: color contrast checker mdn understanding wcag, guideline 1.4 explanations understanding success criterion 1.4.3 | w3c understanding wcag 2.0
formal definition initial valueinvert, for browsers supporting it, currentcolor for the otherapplies toall elementsinheritednocomputed valuefor the keyword invert, the computed value is invert.
...the transparent keyword maps to rgba(0,0,0,0).animation typea color
formal syntax <color> | invertwhere <color> = <rgb()> | <rgba()> | <hsl()> | <hsla()> | <hex-color> | <named-color> | currentcolor | <deprecated-system-color>where <rgb()> = rgb( <percentage>{3} [ / <alpha-value> ]?
scroll-behavior - CSS: Cascading Style Sheets
note that any other scrolls, such as those per
formed by the user, are not affected by this property.
...user agents should follow plat
form conventions, if any.
...
formal definition initial valueautoapplies toscrolling boxesinheritednocomputed valueas specifiedanimation typediscrete
formal syntax auto | smooth examples setting smooth scroll behavior html <nav> <a href="#page-1">1</a> <a href="#page-2">2</a> <a href="#page-3">3</a> </nav> <scroll-container> <scroll-page id="page-1">1</scroll-page> <scroll-page id="page-2">2</scroll-page> <scroll-page id="page-3">3</scroll-page> </scroll-container> css a { display: inline-block; width: 50px; text-decoration: none; } nav, scroll-container { display: block; margin: 0 auto; text-align: center; } nav { width: 339px; padding: 5px; border: 1px solid black; } scroll-container { display: block; width: 350px; height: 200px; overflow-y: scroll; scroll-behavior: smo...
scrollbar-width - CSS: Cascading Style Sheets
it must be one of the following values: auto the default scrollbar width for the plat
form.
... thin a thin scrollbar width variant on plat
forms that provide that option, or a thinner scrollbar than the default plat
form scrollbar width.
... mdn understanding wcag, guideline 2.1 explanations mdn understanding wcag, guideline 2.5 explanations understanding success criterion 2.1.1 | w3c understanding wcag 2.1 understanding success criterion 2.5.5 | w3c understanding wcag 2.1
formal definition initial valueautoapplies toscrolling boxesinheritednocomputed valueas specifiedanimation typediscrete
formal syntax auto | thin | none examples sizing overflow scrollbars css .scroller { width: 300px; height: 100px; overflow-y: scroll; scrollbar-width: thin; } html <div class="scroller">veggies es bonus vobis, proinde vos postulo essum magis kohlrabi welsh onion daik...
text-decoration-line - CSS: Cascading Style Sheets
con
forming user agents may simply not blink the text.
...
formal definition initial valuenoneapplies toall elements.
... it also applies to ::first-letter and ::first-line.inheritednocomputed valueas specifiedanimation typediscrete
formal syntax none | [ underline | overline | line-through | blink ] | spelling-error | grammar-error examples <p class="wavy">here's some text with wavy red underline!</p> <p class="both">this text has lines both above and below it.</p> .wavy { text-decoration-line: underline; text-decoration-style: wavy; text-decoration-color: red; } .both { text-decoration-line: underline overline; } specifications specification status comment css text decoration module level 3the definition of 'text-decoration-line' in that specification.
text-decoration - CSS: Cascading Style Sheets
formal definition initial valueas each of the properties of the shorthand:text-decoration-color: currentcolortext-decoration-style: solidtext-decoration-line: noneapplies toall elements.
...omputed valueas each of the properties of the shorthand:text-decoration-line: as specifiedtext-decoration-style: as specifiedtext-decoration-color: computed colortext-decoration-thickness: as specifiedanimation typeas each of the properties of the shorthand:text-decoration-color: a colortext-decoration-style: discretetext-decoration-line: discretetext-decoration-thickness: by computed value type
formal syntax <'text-decoration-line'> | <'text-decoration-style'> | <'text-decoration-color'> | <'text-decoration-thickness'> examples .under { text-decoration: underline red; } .over { text-decoration: wavy overline lime; } .line { text-decoration: line-through; } .plain { text-decoration: none; } .underover { text-decoration: dashed underline overline; } .thick { text-decoration...
... candidate recommendation trans
formed into a shorthand property.
text-rendering - CSS: Cascading Style Sheets
the text-rendering css property provides in
formation to the rendering engine about what to optimize for when rendering text.
... in svg, when text is scaled up or down, browsers calculate the final size of the text (which is determined by the specified font size and the applied scale) and request a font of that computed size from the plat
form's font system.
...
formal definition initial valueautoapplies totext elementsinheritedyescomputed valueas specifiedanimation typediscrete
formal syntax auto | optimizespeed | optimizelegibility | geometricprecision examples automatic application of optimizelegibility this demonstrates how optimizelegibility is used by browsers automatically when the font-size is smaller than 20px.
transition-timing-function - CSS: Cascading Style Sheets
step-start equal to steps(1, jump-start) step-end equal to steps(1, jump-end) accessibility concerns some animations can be helpful such as to guide users to understand what actions are expected, to show relationships within the user interface, and to in
form users as to what actions have occurred.
...
formal definition initial valueeaseapplies toall elements, ::before and ::after pseudo-elementsinheritednocomputed valueas specifiedanimation typediscrete
formal syntax <timing-function>#where <timing-function> = linear | <cubic-bezier-timing-function> | <step-timing-function>where <cubic-bezier-timing-function> = ease | ease-in | ease-out | ease-in-out | cubic-bezier(<number <a href="/docs/css/val...
...ue_definition_syntax#brackets" title="brackets: enclose several entities, combinators, and multipliers to trans
form them as a single component">[0,1]>, <number>, <number <a href="/docs/css/value_definition_syntax#brackets" title="brackets: enclose several entities, combinators, and multipliers to trans
form them as a single component">[0,1]>, <number>)<step-timing-function> = step-start | step-end | steps(<integer>[, <step-position>]?)where <step-position> = jump-start | jump-end | jump-none | jump-both | start | end examples cubic-bezier examples <div class="parent"> <div class="ease">ease</div> <div class="easein">ease-in</div> <div class="easeout">ease-out</div> <div class="easeinout">ease-in-out</div> <div class="linear">linear</div> <div class="cb">cubic-bezier(0.2,-2,0.8,2...
user-modify - CSS: Cascading Style Sheets
read-write-plaintext-only same as read-write, but rich text
formatting will be lost.
...
formal definition value not found in db!
...
formal syntax syntax not found in db!
zoom - CSS: Cascading Style Sheets
trans
form: scale() should be used instead of this property, if possible.
... however, unlike css trans
forms, zoom affects the layout size of the element.
...
formal definition initial valuenormalapplies toall elementsinheritednocomputed valueas specifiedanimation typean integer
formal syntax normal | reset | <number> | <percentage> examples first example html <p class="small">small</p> <p class="normal">normal</p> <p class="big">big</p> css p.small { zoom: 75%; } p.normal { zoom: normal; } p.big { zoom: 2.5; } p { display: inline-block; } ...
regexp:match() - EXSLT
xslt/xpath reference: xslt elements, exslt functions, xpath functions, xpath axes regexp:match() per
forms regular expression matching on a string, returning the submatches found as a result.
... syntax regexp:match(targetstring, regexpstring[, flagsstring]) parameters targetstring the string to per
form regular expression matching upon.
... i case insensitive match if this flag is specified, the match is per
formed in a case insensitive fashion.
EXSLT
functions that expand upon the capabilities of xslt.math (math)the exslt math package provides functions for working with numeric values and comparing nodes.regular expressions (regexp)the exslt regular expressions package provides functions that allow testing, matching, and replacing text using javascript style regular expressions.sets (set)the exslt sets package offers functions that let you per
form set manipulation.strings (str)the exslt strings package provides functions that allow the manipulation of strings.
...for example, to use the regular expressions package: <xsl:stylesheet version="1.0" xmlns:xsl="http://www.w3.org/1999/xsl/trans
form" xmlns:regexp="http://exslt.org/regular-expressions"> <xsl:template match="/"> ...
... functions regexp:match() regexp:replace() regexp:test() sets the exslt sets package offers functions that let you per
form set manipulation.
Mutation events - Developer guides
the practical reasons to avoid the mutation events are per
formance issues and cross-browser support.
... per
formance adding dom mutation listeners to a document profoundly degrades the per
formance of further dom modifications to that document (making them 1.5 - 7 times slower!).
... the per
formance effect is limited to the documents that have the mutation event listeners.
HTML5 Parser - Developer guides
per
formance improvement with speculative parsing unrelated to the requirements of html5 specification, the gecko 2 parser uses speculative parsing, in which it continues parsing a document while scripts are being downloaded and executed.
... this results in improved per
formance compared to older parsers, because most of the time, gecko can complete these tasks in parallel.
... <script>document.write("<div>");</script> <p>some content goes here.</p> <script>document.write("</div>");</script> for more in
formation, see optimizing your pages for speculative parsing.
Using HTML sections and outlines - Developer guides
in the context of a section, a footer might contain the sectioned content's publication date, license in
formation, etc.
...each of these articles could contain sections of related in
formation.
...the <aside> element is often used for sidebars containing extra, but relevant, in
formation.
HTML attribute: max - HTML: Hypertext Markup Language
if the max attribute is valid and a non-empty value is greater than the maximum allowed by the max attribute, constraint validation will prevent
form submission.
... valid for the numeric input types, including the date, month, week, time, datetime-local, number and range types, and both the <progress> and <meter> elements, the max attribute is a number that specifies the most positive value a
form control to be considered valid.
...mber> <input type="number" min="0" step="5" max="100"> range <number> <input type="range" min="60" step="5" max="100"> note: when the data entered by the user doesn't adhere to the maximum value set, the value is considered invalid in contraint validation and will match the :invalid and :out-of-range pseudoclasses see client-side validation and rangeoverflow for more in
formation.
HTML attribute: readonly - HTML: Hypertext Markup Language
the readonly attribute is supported by text, search, url, tel, email, password, date, month, week, time, datetime-local, and number<input> types and the <textarea>
form control elements.
...it is also not supported on hidden as it can not be expected that a user to fill out a
form that is hidden.
... 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.
HTML attribute: step - HTML: Hypertext Markup Language
the number spinner, if present, will only show valid float values of 1.2 and greater note: when the data entered by the user doesn't adhere to the stepping configuration, the value is considered invalid in contraint validation and will match the :invalid and :out-of-range pseudoclasses see client-side validation and stepmismatch for more in
formation.
... 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 in
formation.
<basefont> - HTML: Hypertext Markup Language
color this attribute sets the text color using either a named color or a color specified in the hexadecimal #rrggbb
format.
...starting with html 4, html does not convey styling in
formation anymore (outside the <style> element or the style attribute of each element).
... the
former behavior of the <font> element can be achieved, and even better controlled using the css fonts properties.
<del>: The Deleted Text element - HTML: Hypertext Markup Language
this can be used when rendering "track changes" or source code diff in
formation, for example.
...for the
format of the string without a time, see date strings.
... the
format of the string if it includes both date and time is covered in local date and time strings.
<dl>: The Description List element - HTML: Hypertext Markup Language
examples single term and description <dl> <dt>firefox</dt> <dd> a free, open source, cross-plat
form, graphical web browser developed by the mozilla corporation and hundreds of volunteers.
... </dd> <!-- other terms and descriptions --> </dl> multiple terms, single description <dl> <dt>firefox</dt> <dt>mozilla firefox</dt> <dt>fx</dt> <dd> a free, open source, cross-plat
form, graphical web browser developed by the mozilla corporation and hundreds of volunteers.
... </dd> <!-- other terms and descriptions --> </dl> single term, multiple descriptions <dl> <dt>firefox</dt> <dd> a free, open source, cross-plat
form, graphical web browser developed by the mozilla corporation and hundreds of volunteers.
<font> - HTML: Hypertext Markup Language
starting with html 4, html does not convey styling in
formation anymore (outside the <style> element or the style attribute of each element).
... the
former behavior of the <font> element can be achieved, and even better controlled using the css fonts css properties.
... color this attribute sets the text color using either a named color or a color specified in the hexadecimal #rrggbb
format.
Standard metadata names - HTML: Hypertext Markup Language
it is different from the <title> element, which usually contain the application name, but may also contain in
formation like the document name or a status.
... the browser will use this in
formation 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.
... other metadata names the whatwg wiki metaextensions page contains a large set of non-standard metadata names that have not been
formally accepted yet; however, some of the names included there are already used quite commonly in practice — including the following: creator: the name of the creator of the document, such as an organization or institution.
<object> - HTML: Hypertext Markup Language
content categories flow content; phrasing content; embedded content, palpable content; if the element has a usemap attribute, interactive content; listed, submittable
form-associated element.
...
formhtml5 the
form element, if any, that the object element is associated with (its
form owner).
... the value of the attribute must be an id of a <
form> element in the same document.
<tr>: The Table Row element - HTML: Hypertext Markup Language
we have some examples below, but for more examples and an in-depth tutorial, see the html tables series in our learn web development area, where you'll learn how to use the table elements and their attributes to get just the right layout and
formatting for your tabular data.
... basic example this simple example shows a table listing people's names along with various in
formation about membership in a club or service.
... table { border: 1px solid black; } th, td { border: 1px solid black; } result the output is entirely unchanged, despite the addition of useful contextual in
formation under the hood: basic styling as is the case with all parts of a table, you can change the appearance of a table row and its contents using css.
itemscope - HTML: Hypertext Markup Language
the itemtypes, recipe, aggregaterating, and nutritionin
formation in the following example are part of the schema.org structured data for a recipe, as specified by the first itemtype, http://schema.org/recipe.
...s </span> <br> prep time: <time datetime="pt30m" itemprop="preptime">30 min</time><br> cook time: <time datetime="pt1h" itemprop="cooktime">1 hou</time>r<br> total time: <time datetime="pt1h30m" itemprop="totaltime">1 hour 30 min</time><br> yield: <span itemprop="recipeyield">1 9" pie (8 servings)</span><br> <span itemprop="nutrition" itemscope itemtype="http://schema.org/nutritionin
formation"> serving size: <span itemprop="servingsize">1 medium slice</span><br> calories per serving: <span itemprop="calories">250 cal</span><br> fat per serving: <span itemprop="fatcontent">12 g</span><br> </span> <p> ingredients:<br> <span itemprop="recipeingredient">thinly-sliced apples: 6 cups<br></span> <span itemprop="recipeingredient">white sugar: 3/4 cup<br></span...
... itemprop author [person] itemprop name carol smith itemscope itemprop[itemtype] aggregaterating [aggregaterating] itemprop ratingvalue 4.0 itemprop reviewcount 35 itemscope itemprop[itemtype] nutrition [nutritionin
formation] itemprop servingsize 1 medium slice itemprop calories 250 cal itemprop fatcontent 12 g note: a handy tool for extracting microdata structures from html is google's structured data testing tool.
Resource URLs - HTTP
resource urls, urls prefixed with the resource: scheme, are used by firefox and firefox browser extensions to load resources internally, but some of the in
formation is available to sites the browser connects to as well.
... threats because some of the in
formation shared by resource: urls is available to websites, a web page could run internal scripts and inspect internal resources of firefox, including the default preferences, which could be a serious security and privacy issue.
... furthermore, some default values of preferences differ between build configurations, such as plat
form and locale, which means web sites could identify individual users using this in
formation.
Basics of HTTP - HTTP
http is an extensible protocol that relies on concepts like resources and uni
form resource identifiers (uris), simple message structure, and client-server communication flow.
...this article explains how http frames allow multiplexing and solve the 'head-of-line' blocking problem of
former http versions.
... content negotiation http introduces a set of headers, starting with accept as a way for a browser to announce the
format, language, or encoding it prefers.
Content Security Policy (CSP) - HTTP
as an ultimate
form of protection, sites that want to never allow scripts to be executed can opt to globally disallow script execution.
...for example, a page that uploads and displays images could allow images from anywhere, but restrict a
form action to a specific endpoint.
...in summary, this is done to prevent leaking sensitive in
formation about cross-origin resources.
Feature Policy - HTTP
inferring the policy scripts can programatically query in
formation about the feature policy via the featurepolicy object located at either document.featurepolicy or htmliframeelement.featurepolicy.
... best practices for good user experiences there are several policy-controlled features to help enforce best practices for providing good per
formance and user experiences.
... the features include: layout-inducing animations legacy image
formats oversized images synchronous scripts synchronous xmlhttprequest unoptimized images unsized media granular control over certain features the web provides functionality and apis that may have privacy or security risks if abused.
Forwarded - HTTP
the forwarded header contains in
formation from the reverse proxy servers that is altered or lost when a proxy is involved in the path of the request.
... this header is used for debugging, statistics, and generating location-dependent content and by design it exposes privacy sensitive in
formation, such as the ip address of the client.
... header type request header forbidden header name no syntax forwarded: by=<identifier>;for=<identifier>;host=<host>;proto=<http|https> directives <identifier> an identifier disclosing the in
formation that is altered or lost when using a proxy.
Public-Key-Pins - HTTP
for more in
formation, see the http public key pinning article.
... header type response header forbidden header name no syntax public-key-pins: pin-sha256="<pin-value>"; max-age=<expire-time>; includesubdomains; report-uri="<uri>" directives pin-sha256="<pin-value>" the quoted string is the base64 encoded subject public key in
formation (spki) fingerprint.
...max-age=5184000 tells the client to store this in
formation for two months, which is a reasonable time limit according to the ietf rfc.
Server-Timing - HTTP
database read/write, cpu time, file system access, etc.) in the developer tools in the user's browser or in the per
formanceservertiming interface.
...-timing: cpu;dur=2.4 // single metric with description and value server-timing: cache;desc="cache read";dur=23.2 // two metrics with value server-timing: db;dur=53, app;dur=47.2 // server-timing as trailer trailer: server-timing --- response body --- server-timing: total;dur=123.4 privacy and security the server-timing header may expose potentially sensitive application and infrastructure in
formation.
... per
formanceservertiming interface in addition to having server-timing header metrics appear in the developer tools of the browser, the per
formanceservertiming interface enables tools to automatically collect and process metrics from javascript.
TE - HTTP
(you could in
formally call it accept-transfer-encoding, which would be more intuitive).
... header type request header forbidden header name yes syntax te: compress te: deflate te: gzip te: trailers // multiple directives, weighted with the quality value syntax: te: trailers, deflate;q=0.5 directives compress a
format using the lempel-ziv-welch (lzw) algorithm is accepted as a transfer coding name.
... gzip a
format using the lempel-ziv coding (lz77), with a 32-bit crc is accepted as a transfer coding name.
Link prefetching FAQ - HTTP
an example using the link tag follows: <link rel="prefetch" href="/images/big.jpeg"> the same prefetching hint using an http link: header: link: </images/big.jpeg>; rel=prefetch the
format for the link: header is described in rfc 5988 section 5.
...the <link> tag gives the browser the ability to know what sites are up to, and we can use this in
formation to better prioritize document prefetching.
... prefetching hints original document in
formation author(s): darin fisher (darin at meer dot net) last updated date: updated: march 3, 2003 ...
CSS Houdini
the css working group does a lot of work to ensure every feature is per
formant, handles all edge cases, and considers security, privacy, and accessibility.
... css properties and values api reference css properties and values api guide css typed om converting cssom value strings into meaningfully typed javascript representations and back can incur a significant per
formance overhead.
... the css typed om exposes css values as typed javascript objects to allow their per
formant manipulation.
Concurrency model and the event loop - JavaScript
visual representation stack function calls
form a stack of frames.
... event loop the event loop got its name because of how it's usually implemented, which usually resembles: while (queue.wait
formessage()) { queue.processnextmessage() } queue.wait
formessage() waits synchronously for a message to arrive (if one is not already available and waiting to be handled).
...handling i/o is typically per
formed via events and callbacks, so when the application is waiting for an indexeddb query to return or an xhr request to return, it can still process other things like user input.
Character classes - JavaScript
\s matches a single white space character, including space, tab,
form feed, line feed, and other unicode spaces.
... \f matches a
form-feed.
...� в Стране чудес"; var regexpbmpword = /([\u0000-\u0019\u0021-\uffff])+/gu; // bmp goes through u+0000 to u+ffff but space is u+0020 console.table(nonenglishtext.match(regexpbmpword)); [ 'Приключения', 'Алисы', 'в', 'Стране', 'чудес' ] note for mdn editors: please do not try to add funny examples with emoji as those characters are not handled by the plat
form (kuma).
JavaScript technologies overview - JavaScript
introduction whereas html defines a webpage's structure and content and css sets the
formatting and appearance, javascript adds interactivity to a webpage and creates rich web applications.
...the internationalization api provides collation (string comparison), number
formatting, and date-and-time
formatting for javascript applications, letting the applications choose the language and tailor the functionality to their needs.
... the core of the dom the document object model (dom) is a cross-plat
form, language-independent convention for representing and interacting with objects in html, xhtml and xml documents.
JavaScript language resources - JavaScript
ecmascript is the scripting language that
forms the basis of javascript.
...guage specification ecma-262 9th edition pdf, html, working draft, repository 2018 ecmascript 2018 language specification ecma-402 5th edition working draft, repository 2018 ecmascript 2018 internationalization api specification obsolete/historical editions ecma-262 pdf june 1997 ecmascript: a general purpose, cross-plat
form programming language.
... see wikipedia ecmascript entry for more in
formation on ecmascript history.
Memory Management - JavaScript
some high-level languages, such as javascript, utilize a
form of automatic memory management known as garbage collection (gc).
...within the context of memory management, an object is said to reference another object if the
former has access to the latter (either implicitly or explicitly).
...unt of available heap memory can be increased with a flag: node --max-old-space-size=6000 index.js we can also expose the garbage collector for debugging memory issues using a flag and the chrome debugger: node --expose-gc --inspect index.js see also ibm article on "memory leak patterns in javascript" (2007) kangax article on how to register event handler and avoid memory leaks (2010) per
formance ...
Classes - JavaScript
strict mode the body of a class is executed in strict mode, i.e., code written here is subject to stricter syntax for increased per
formance, some otherwise silent errors will be thrown, and certain keywords are reserved for future versions of ecmascript.
... see public class fields for more in
formation.
... for more in
formation, see private class fields.
ReferenceError: deprecated caller or arguments usage - JavaScript
they are deprecated, because they leak the function caller, are non-standard, hard to optimize and potentially a per
formance-harmful feature.
... examples deprecated function.caller or arguments.callee.caller function.caller and arguments.callee.caller are deprecated (see the reference articles for more in
formation).
... 'use strict'; function myfunc() { if (myfunc.caller == null) { return 'the function was called from the top!'; } else { return 'this function\'s caller was ' + myfunc.caller; } } myfunc(); // warning: referenceerror: deprecated caller usage // "the function was called from the top!" function.arguments function.arguments is deprecated (see the reference article for more in
formation).
The arguments object - JavaScript
n array literal is shorter than above but allocates an empty array var args = [].slice.call(arguments); as you can do with any array-like object, you can use es2015's array.from() method or spread syntax to convert arguments to a real array: let args = array.from(arguments); // or let args = [...arguments]; the arguments object is useful for functions called with more arguments than they are
formally declared to accept.
...the function's only
formal argument is a string containing the characters that separate the items to concatenate.
...the only
formal argument for the function is a string that is "u" if the list is to be unordered (bulleted), or "o" if the list is to be ordered (numbered).
DataView - JavaScript
the dataview view provides a low-level interface for reading and writing multiple number types in a binary arraybuffer, without having to care about the plat
form's endianness.
... description endianness multi-byte number
formats are represented in memory differently depending on machine architecture — see endianness for an explanation.
... var littleendian = (function() { var buffer = new arraybuffer(2); new dataview(buffer).setint16(0, 256, true /* littleendian */); // int16array uses the plat
form's endianness.
Date.prototype.toGMTString() - JavaScript
the exact
format of the value returned by togmtstring() varies according to the plat
form and browser, in general it should represent a human readable date string.
... examples simple example in this example, the togmtstring() method converts the date to gmt (utc) using the operating system's time-zone offset and returns a string value that is similar to the following
form.
... the exact
format depends on the plat
form.
Date.prototype.toUTCString() - JavaScript
description the value returned by toutcstring() is a string in the
form www, dd mmm yyyy hh:mm:ss gmt, where:
format sring description www day of week, as three letters (e.g.
...jan, feb, ...) yyyy year, as four or more digits with leading zeroes if required hh hour, as two digits with leading zero if required mm minute, as two digits with leading zero if required ss seconds, as two digits with leading zero if required prior to ecmascript 2018, the
format of the return value varied according to the plat
form.
... the most common return value was an rfc-1123
formatted date stamp, which is a slightly updated version of rfc-822 date stamps.
Function() constructor - JavaScript
calling the constructor directly can create functions dynamically, but suffers from security and similar (but far less significant) per
formance issues to eval.
...argn names to be used by the function as
formal argument names.
... // example can be run directly in your javascript console // create a function that takes two arguments, and returns the sum of those arguments const adder = new function('a', 'b', 'return a + b'); // call the function adder(2, 6); // 8 the arguments "a" and "b" are
formal argument names that are used in the function body, "return a + b".
Intl.Collator() constructor - JavaScript
for the general
form and interpretation of the locales argument, see the intl page.
...possible values include: "big5han", "dict", "direct", "ducet", "gb2312", "phonebk", "phonetic", "pinyin", "re
formed", "searchjl", "stroke", "trad", "unihan".
...for in
formation about this option, see the intl page.
Intl.PluralRules - JavaScript
the intl.pluralrules object enables plural-sensitive
formatting and plural-related language rules.
... intl.pluralrules.prototype.select() returns a string indicating which plural rule to use for locale-aware
formatting.
...in order to get the
format of the language used in the user interface of your application, make sure to specify that language (and possibly some fallback languages) using the locales argument: // arabic has different plural rules new intl.pluralrules('ar-eg').select(0); // → 'zero' new intl.pluralrules('ar-eg').select(1); // → 'one' new intl.pluralrules('ar-eg').select(2); // → 'two' new intl.pluralrules('ar-eg').select(6); // → 'few' new intl.pluralrules('ar-eg').select(18); // → 'many' specifications specification ecmascript internationalization api (ecma-402)the definition of 'intl.pluralrules' in that specification.
Math.imul() - JavaScript
if you use normal javascript floating point numbers in imul, you will experience a degrade in per
formance.
...multiplying two numbers stored internally as integers (which is only possible with asmjs) with imul is the only potential circumstance where math.imul may prove per
formant in current browsers.
...ion: if (!math.imul) math.imul = function(a, b) { var ahi = (a >>> 16) & 0xffff; var alo = a & 0xffff; var bhi = (b >>> 16) & 0xffff; var blo = b & 0xffff; // the shift by 0 fixes the sign on the high part // the final |0 converts the unsigned value into a signed value return ((alo * blo) + (((ahi * blo + alo * bhi) << 16) >>> 0) | 0); }; however, the following function is more per
formant because it is likely that browsers in which this polyfill would be used do not optimize with an internal integer type in javascript, instead using floating points for all numbers.
NaN - JavaScript
7 ** nan) indeterminate
form (e.g.
...or per
form a self-comparison: nan, and only nan, will compare unequal to itself.
... nan === nan; // false number.nan === nan; // false isnan(nan); // true isnan(number.nan); // true number.isnan(nan); // true function valueisnan(v) { return v !== v; } valueisnan(1); // false valueisnan(nan); // true valueisnan(number.nan); // true however, do note the difference between isnan() and number.isnan(): the
former will return true if the value is currently nan, or if it is going to be nan after it is coerced to a number, while the latter will return true only if the value is currently nan: isnan('hello world'); // true number.isnan('hello world'); // false additionally, some array methods cannot find nan, while others can.
Object.fromEntries() - JavaScript
the object.fromentries() method trans
forms a list of key-value pairs into an object.
... object.fromentries() per
forms the reverse of object.entries().
... to object: const map = new map([ ['foo', 'bar'], ['baz', 42] ]); const obj = object.fromentries(map); console.log(obj); // { foo: "bar", baz: 42 } converting an array to an object with object.fromentries, you can convert from array to object: const arr = [ ['0', 'a'], ['1', 'b'], ['2', 'c'] ]; const obj = object.fromentries(arr); console.log(obj); // { 0: "a", 1: "b", 2: "c" } object trans
formations with object.fromentries, its reverse method object.entries(), and array manipulation methods, you are able to trans
form objects like this: const object1 = { a: 1, b: 2, c: 3 }; const object2 = object.fromentries( object.entries(object1) .map(([ key, val ]) => [ key, val * 2 ]) ); console.log(object2); // { a: 2, b: 4, c: 6 } please do not add polyfills on mdn pages.
Object.prototype.__proto__ - JavaScript
the effects on the per
formance of altering inheritance are subtle and far-flung, and are not limited to simply the time spent in obj.__proto__ = ...
...if you care about per
formance you should avoid setting the [[prototype]] of an object.
...it is deprecated in favor of object.getprototypeof/reflect.getprototypeof and object.setprototypeof/reflect.setprototypeof (though still, setting the [[prototype]] of an object is a slow operation that should be avoided if per
formance is a concern).
String.prototype.localeCompare() - JavaScript
locales and options these arguments customize the behavior of the function and let applications specify the language whose
formatting conventions should be used.
... in implementations which ignore the locales and options arguments, the locale used and the
form of the string returned are entirely implementation-dependent.
... per
formance when comparing large numbers of strings, such as in sorting large arrays, it is better to create an intl.collator object and use the function provided by its compare property.
Symbol.iterator - JavaScript
the built-in types with a @@iterator method are: array.prototype[@@iterator]() typedarray.prototype[@@iterator]() string.prototype[@@iterator]() map.prototype[@@iterator]() set.prototype[@@iterator]() see also iteration protocols for more in
formation.
...) { yield 1; yield 2; yield 3; }; [...myiterable] // [1, 2, 3] or iterables can be defined directly inside a class or object using a computed property: class foo { *[symbol.iterator] () { yield 1; yield 2; yield 3; } } const someobj = { *[symbol.iterator] () { yield 'a'; yield 'b'; } } [...new foo] // [ 1, 2, 3 ] [...someobj] // [ 'a', 'b' ] non-well-
formed iterables if an iterable's @@iterator method does not return an iterator object, then it is a non-well-
formed iterable.
... using it as such is likely to result in runtime exceptions or buggy behavior: var nonwell
formediterable = {} nonwell
formediterable[symbol.iterator] = () => 1 [...nonwell
formediterable] // typeerror: [] is not a function specifications specification ecmascript (ecma-262)the definition of 'symbol.iterator' in that specification.
TypedArray.prototype.toLocaleString() - JavaScript
syntax typedarray.tolocalestring([locales [, options]]); parameters the locales and options arguments customize the behavior of the function and let applications specify the language whose
formatting conventions should be used.
... in implementations, which ignore the locales and options arguments, the locale used and the
form of the string returned are entirely implementation dependent.
... see the intl.number
format() constructor for details on these parameters and how to use them.
encodeURI() - JavaScript
note how certain characters are used to signify special meaning: http://username:password@www.example.com:80/path/to/file.php?foo=316&bar=this+has+spaces#anchor hence encodeuri() does not encode characters that are necessary to
formulate a complete uri.
... // ;,/?:@&=+$# console.log(encodeuri(set2)); // -_.!~*'() console.log(encodeuri(set3)); // abc%20abc%20123 (the space gets encoded as %20) console.log(encodeuricomponent(set1)); // %3b%2c%2f%3f%3a%40%26%3d%2b%24%23 console.log(encodeuricomponent(set2)); // -_.!~*'() console.log(encodeuricomponent(set3)); // abc%20abc%20123 (the space gets encoded as %20) note that encodeuri() by itself cannot
form proper http get and post requests, such as for xmlhttprequest, because "&", "+", and "=" are not encoded, which are treated as special characters in get and post requests.
... encoding a lone high surrogate throws an urierror will be thrown if one attempts to encode a surrogate which is not part of a high-low pair, e.g., // high-low pair ok console.log(encodeuri('\ud800\udfff')); // lone high surrogate throws "urierror: mal
formed uri sequence" console.log(encodeuri('\ud800')); // lone low surrogate throws "urierror: mal
formed uri sequence" console.log(encodeuri('\udfff')); encoding for ipv6 if one wishes to follow the more recent rfc3986 for urls, which makes square brackets reserved (for ipv6) and thus not encoded when
forming something which could be part of a url (such as a host), the following code snippet may help: function fixedencodeuri(str) { return encodeuri(str).replace(/%5b/g, '[').
encodeURIComponent() - JavaScript
ponent(set2)); // -_.!~*'() console.log(encodeuricomponent(set3)); // %23 console.log(encodeuricomponent(set4)); // abc%20abc%20123 (the space gets encoded as %20) note that a urierror will be thrown if one attempts to encode a surrogate which is not part of a high-low pair, e.g., // high-low pair ok console.log(encodeuricomponent('\ud800\udfff')); // lone high surrogate throws "urierror: mal
formed uri sequence" console.log(encodeuricomponent('\ud800')); // lone low surrogate throws "urierror: mal
formed uri sequence" console.log(encodeuricomponent('\udfff')); use encodeuricomponent() on user-entered fields from
forms post'd to the server.
... for application/x-www-
form-urlencoded, spaces are to be replaced by "+", so one may wish to follow a encodeuricomponent() replacement with an additional replacement of "%20" with "+".
... to be more stringent in adhering to rfc 3986 (which reserves !, ', (, ), and *), even though these characters have no
formalized uri delimiting uses, the following can be safely used: function fixedencodeuricomponent(str) { return encodeuricomponent(str).replace(/[!'()*]/g, function(c) { return '%' + c.charcodeat(0).tostring(16); }); } examples encoding for content-disposition and link headers the following example provides the special encoding required within utf-8 content-disposition and link server response header parameters (e.g., utf-8 filenames): var filename = 'my file(2).txt'; var header = "content-disposition: attachment; filename*=utf-8''" + encoderfc5987valuechars(filename); console.log(header); // logs "content-disposition: attachment; filename*=utf-8'...
Object initializer - JavaScript
(see property accessors for detailed in
formation.) object.foo // "bar" object['age'] // 42 object.foo = 'baz' property definitions we have already learned how to notate properties using the initializer syntax.
... } }; for more in
formation and examples about methods, see method definitions.
... prototype mutation a property definition of the
form __proto__: value or "__proto__": value does not create a property with the name __proto__.
Property accessors - JavaScript
x = eval('document.
forms.
form_name.elements.' + str
formcontrol + '.value') eval() is slow and should be avoided whenever possible.
... also, str
formcontrol would have to hold an identifier, which is not required for names and ids of
form controls.
... it is better to use bracket notation instead: x = document.
forms['
form_name'].elements[str
formcontrol].value specifications specification ecmascript (ecma-262)the definition of 'property accessors' in that specification.
typeof - JavaScript
for more in
formation about types and primitives, see also the javascript data structure page.
...null was represented as the null pointer (0x00 in most plat
forms).
... typeof /s/ === 'function'; // chrome 1-12 non-con
form to ecmascript 5.1 typeof /s/ === 'object'; // firefox 5+ con
form to ecmascript 5.1 errors before ecmascript 2015, typeof was always guaranteed to return a string for any operand it was supplied with.
try...catch - JavaScript
this gives us three
forms for the try statement: try...catch try...finally try...catch...finally a catch-block contains statements that specify what to do if an exception is thrown in the try-block.
...see the javascript guide for more in
formation on javascript exceptions.
...you can use this identifier to get in
formation about the exception that was thrown.
var - JavaScript
duplicate variable declarations using var will not trigger an error, even in strict mode, and the variable will not lose its value, unless another assignment is per
formed.
...the corresponding name is also added to a list on the internal [[varnames]] slot on the global environment record (which
forms part of the global lexical environment).
... note that the implication of the above, is that, contrary to popular misin
formation, javascript does not have implicit or undeclared variables, it merely has a syntax that looks like it does.
with - JavaScript
per
formance pro & contra pro: the with statement can help reduce file size by reducing the need to repeat a lengthy object reference without per
formance penalty.
...where per
formance is important, 'with' should only be used to encompass code blocks that access members of the specified object.
...so given this example: function f(x, o) { with (o) { console.log(x); } } only when f is called is x either found or not, and if found, either in o or (if no such property exists) in f's activation object, where x names the first
formal argument.
JavaScript shells - JavaScript
node.js - node.js is a plat
form for easily building fast, scalable network applications.
... gluescript - a standalone javascript shell for writing cross-plat
form javascript applications.
... it can use wxwidgets for gui apps and was
formerly called wxjavascript.
JavaScript
for in
formation about api specifics to web pages, please see web apis and dom.
... we have put together a course that includes all the essential in
formation you need to work towards your goal.
...it is a restricted variant of ecmascript 5, for faster per
formance and easier debugging.
related_applications - Web app manifests
type array mandatory no the related_applications field is an array of objects specifying native applications that are installable by, or accessible to, the underlying plat
form — for example, a native android application obtainable through the google play store.
... examples "related_applications": [ { "plat
form": "play", "url": "https://play.google.com/store/apps/details?id=com.example.app1", "id": "com.example.app1" }, { "plat
form": "itunes", "url": "https://itunes.apple.com/app/example-app1/id123456789" } ] related application values application objects may contain the following values: member description plat
form the plat
form on which the application can be found.
... id the id used to represent the application on the specified plat
form.
<mstyle> - MathML
attributes dir overall directionality of
formulas.
... displaystyle a boolean value specifying whether more vertical space is used for displayed equations or, if set to false, a more compact layout is used to display
formulas.
... <math> <mstyle displaystyle="true" mathcolor="teal"> <mrow> <munderover> <mo stretchy="true"
form="prefix">∑</mo> <mrow> <mi>i</mi> <mo
form="infix">=</mo> <mn>1</mn> </mrow> <mi>n</mi> </munderover> <mstyle displaystyle="true"> <mfrac> <mn>1</mn> <mi>n</mi> </mfrac> </mstyle> </mrow> </mstyle> </math> specifications specification status comment ...
MathML documentation index - MathML
4 mathml: deriving the quadratic
formula beginner, education, example, guide, html5, mathml, needsbeginnerupdate this page outlines the derivation of the quadratic
formula.
...note that this error is not thrown when your mathml markup is wrong or not well-
formed xml.
...the mathml elements <semantics>, <annotation> and <annotation-xml> are used to combine presentation and content markup and to provide both, layout in
formation and semantic meaning of mathematical expressions.
Mapping the width and height attributes of media container elements to their aspect-ratio - Web media technologies
this wasn't an attractive thing for your users to see, and could also result in per
formance issues due to the repainting required after each image loads, hence adding the attributes being a good idea.
...to keep images from breaking out of their containers when the container becomes narrower than the image, developers started using css like the following: img { max-width: 100%; height: auto; } this is really useful for responsive layouts, but unfortunately it causes the jank problem to return — the above css overrides the width and height attribute in
formation, meaning that if the image has not loaded for some reason, its height will be set to 0.
... a new way of sizing images before loading completes recognizing the problem, a wicg community group
formed to propose an intrinsicsize attribute.
color-rendering - SVG: Scalable Vector Graphics
in this case, the svg user agent should per
form color operations in a way that optimizes per
formance, which might mean sacrificing the color interpolation precision as specified by through the linearrgb value for color-interpolation-filters.
...="0%" stop-color="white"/> <stop offset="100%" stop-color="darkseagreen"/> </radialgradient> </defs> <circle cx="100" cy="100" r="100" fill="url(#gradient)" color-rendering="optimizequality" /> <text x="45" y="50%" color-rendering="optimizequality">quality-optimized</text> <circle cx="100" cy="100" r="100" color-rendering="optimizespeed" fill="url(#gradient)" style="trans
form: translatex(240px);" /> <text x="290" y="50%" color-rendering="optimizespeed">speed-optimized</text> </svg> usage notes value auto | optimizespeed | optimizequality default value auto animatable yes auto indicates that the user agent shall make appropriate tradeoffs to balance speed and quality, but quality shall be given more importance than s...
...for rgb display devices, this option will sometimes cause the user agent to per
form color interpolation and compositing in the device rgb color space.
operator - SVG: Scalable Vector Graphics
either it defines the compositing or morphing operation to be per
formed.
...hology operator="erode" radius="0.4"/> </filter> <filter id="dilate"> <femorphology operator="dilate" radius="0.8"/> </filter> <text x="0" y="15">normal text</text> <text x="0" y="40" filter="url(#erode)">thin text</text> <text x="0" y="65" filter="url(#dilate)">fat text</text> </svg> fecomposite for <fecomposite>, operator defines the compositing operation that is to be per
formed.
... arithmetic this value indicates that the source graphic defined in the in attribute and the destination graphic defined in the in2 attribute are combined using the following
formula: result = k1*i1*i2 + k2*i1 + k3*i2 + k4 where: i1 and i2 indicate the corresponding pixel channel values of the input image, which map to in and in2 respectively, and k1,k2,k3,and k4 indicate the values of the attributes with the same name.
path - SVG: Scalable Vector Graphics
</textpath> </text> </svg> animatemotion for <animatemotion>, path defines the motion path, expressed in the same
format and interpreted the same way as the d geometric property for the <path> element.
...for detailed in
formation about the commands that can be used, see the explanation for the d attribute.
...for detailed in
formation about the commands that can be used, see the explanation for the d attribute.
requiredFeatures - SVG: Scalable Vector Graphics
twentynine elements are using this attribute: <a>, <altglyph>, <animate>, <animatecolor>, <animatemotion>, <animatetrans
form>, <circle>, <clippath>, <cursor>, <defs>, <ellipse>, <foreignobject>, <g>, <image>, <line>, <mask>, <path>, <pattern>, <polygon>, <polyline>, <rect>, <set>, <svg>, <switch>, <text>, <textpath>, <tref>, <tspan>, <use> html, body, svg { height: 100%; } text { fill: white; } <svg viewbox="0 0 250 45" xmlns="http://www.w3.org/2000/svg"> <g> <rect fill="forestgreen" x="10" y="10" heig...
...note that the
format and naming for feature strings changed from svg 1.0 to svg 1.1.
...1/feature#externalresourcesrequired the browser supports the externalresourcesrequired attribute http://www.w3.org/tr/svg11/feature#view the browser supports the <view> element http://www.w3.org/tr/svg11/feature#script the browser supports the <script> element http://www.w3.org/tr/svg11/feature#animation the browser supports the <animate>, <set>, <animatemotion>, <animatetrans
form>, <animatecolor> and <mpath> elements http://www.w3.org/tr/svg11/feature#font the browser supports the <font>, <font-face>, <glyph>, <missing-glyph>, <hkern>, <vkern>, <font-face-src>, <font-face-uri>, <font-face-
format> and <font-face-name> elements http://www.w3.org/tr/svg11/feature#basicfont the browser supports the <font>, <font-face>, <glyph>, <missing-glyph>, <hkern>, <font-face...
string - SVG: Scalable Vector Graphics
the string attribute is a hint to the user agent, and specifies a list of
formats that the font referenced by the parent <font-face-uri> element supports.
... only one element is using this attribute: <font-face-
format> usage notes value <anything> default value none animatable no <anything> this value specifies a list of
formats that are supported by the font referenced by the parent <font-face-uri> element.
...see the src descriptor of the @font-face at-rule for more in
formation.
stroke-linejoin - SVG: Scalable Vector Graphics
the arcs shape is
formed by extending the outer edges of the stroke at the join point with arcs that have the same curvature as the outer edges at the join point.
...the corner is
formed by extending the outer edges of the stroke at the tangents of the path segments until they intersect.
...the corner is
formed by extending the outer edges of the stroke at the tangents of the path segments until they intersect.
xlink:href - SVG: Scalable Vector Graphics
22 elements are using this attribute: <a>, <altglyph>, <animate>, <animatecolor>, <animatemotion>, <animatetrans
form>, <color-profile>, <cursor>, <feimage>, <filter>, <font-face-uri>, <glyphref>, <image>, <lineargradient>, <mpath>, <pattern>, <radialgradient>, <script>, <set>, <textpath>, <tref>, and <use>} html, body, svg { height: 100%; } <svg viewbox="0 0 160 40" xmlns="http://www.w3.org/2000/svg"> <a xlink:href="https://developer.mozilla.org/"><text x="10" y="25">mdn web docs</text></a> </svg> a for <a>, xlink:href ...
... value <iri> default value none animatable no animate, animatecolor, animatemotion, animatetrans
form, set for <animate>, <animatecolor>, <animatemotion>, <animatetrans
form>, and <set>, xlink:href defines the reference to the element which is the target of this animation and which therefore will be modified over time.
... scalable vector graphics (svg) 1.1 (second edition)the definition of 'href for <animate>, <animatecolor>, <animatemotion>, <animatetrans
form>, and <set>' in that specification.
<altGlyph> - SVG: Scalable Vector Graphics
value type: <list-of-numbers> ; default value: none; animatable: yes (non-additive) glyphref the glyph identifier, the
format of which is dependent on the
format defined by the
format attribute of the given font.
... value type: <string> ; default value: none; animatable: no
format the
format of the given font.
...aphical event attributes presentation attributes most notably: clip-path, clip-rule, color, color-interpolation, color-rendering, cursor, display, dominant-baseline, fill, fill-opacity, fill-rule, filter, mask, opacity, pointer-events, shape-rendering, stroke, stroke-dasharray, stroke-dashoffset, stroke-linecap, stroke-linejoin, stroke-miterlimit, stroke-opacity, stroke-width, text-anchor, trans
form, vector-effect, visibility xlink attributes xlink:href, xlink:type, xlink:role, xlink:arcrole, xlink:title, xlink:show, xlink:actuate dom interface this element implements the svgaltglyphelement interface.
<radialGradient> - SVG: Scalable Vector Graphics
value type: <length> ; default value: same as cy; animatable: yes gradientunits this attribute defines the coordinate system for attributes x1, x2, y1, y2 value type: userspaceonuse|objectboundingbox ; default value: objectboundingbox; animatable: yes gradienttrans
form this attribute provides additional trans
formation to the gradient coordinate system.
... value type: <trans
form-list> ; default value: identity trans
form; animatable: yes href this attribute defines a reference to another <lineargradient> element that will be used as a template.
...obal event attributes, document element event attributes presentation attributes most notably: clip-path, clip-rule, color, color-interpolation, color-rendering, cursor, display, fill, fill-opacity, fill-rule, filter, mask, opacity, pointer-events, shape-rendering, stroke, stroke-dasharray, stroke-dashoffset, stroke-linecap, stroke-linejoin, stroke-miterlimit, stroke-opacity, stroke-width, trans
form, vector-effect, visibility xlink attributes xlink:href, xlink:title usage notes categoriesgradient elementpermitted contentany number of the following elements, in any order:descriptive elements<animate>, <animatetrans
form>, <set>, <stop> specifications specification status comment scalable vector graphics (svg) 2the definition of '<radialgradient>' in that spec...
SVG animation with SMIL - SVG: Scalable Vector Graphics
smil allows you to: animate the numeric attributes of an element (x, y, ...) animate trans
form attributes (translation or rotation) animate color attributes follow a motion path this is done adding an svg element like <animate> inside the svg element to animate.
... <svg width="300" height="100"> <title>attribute animation with smil</title> <rect x="0" y="0" width="300" height="100" stroke="black" stroke-width="1" /> <circle cx="0" cy="50" r="15" fill="blue" stroke="black" stroke-width="1"> <animate attributename="cx" from="0" to="500" dur="5s" repeatcount="indefinite" /> </circle> </svg> animating the trans
form attributes the <animatetrans
form> element let you animate trans
form attributes.
... <svg width="300" height="100"> <title>svg smil animate with trans
form</title> <rect x="0" y="0" width="300" height="100" stroke="black" stroke-width="1" /> <rect x="0" y="50" width="15" height="34" fill="blue" stroke="black" stroke-width="1"> <animatetrans
form attributename="trans
form" begin="0s" dur="20s" type="rotate" from="0 60 60" to="360 100 60" repeatcount="indefinite" /> </rect> </svg> animation following a ...
Basic shapes - SVG: Scalable Vector Graphics
ellipse an <ellipse> is a more general
form of the <circle> element, where you can scale the x and y radius (commonly refferred to as the semimajor and semiminor axes in maths) of the circle separately.
... <path d="m20,230 q40,205 50,230 t90,230" fill="none" stroke="blue" stroke-width="5"/> d a list of points and other in
formation about how to draw the path.
... see the paths section for more in
formation.
Introduction - SVG: Scalable Vector Graphics
the image and its components can also be trans
formed, composited together, or filtered to change their appearance completely.
... svg came about in 1999 after several competing
formats had been submitted to the w3c and failed to be fully ratified.
... before you start there are a number of drawing applications available such as inkscape which are free and use svg as their native file
format.
Insecure passwords - Web security
serving login
forms over http is especially dangerous because of the wide variety of attacks that can be used against them to extract a user’s password.
...if a website uses http instead of https, it is trivial to steal user in
formation (such as their login credentials).
...if you are using a cloud plat
form, it may have its own ways of enabling https.
Subdomain takeovers - Web security
if an attacker can do this, they can potentially read cookies set from the main domain, per
form cross-site scripting, or circumvent content security policies, thereby enabling them to capture protected in
formation (including logins) or send malicious content to unsuspecting users.
...you want to add a blog at blog.example.com, and you decide to use a hosting provider who maintains a blogging plat
form.
... (for "blog", you can substitute "e-commerce plat
form", "customer service plat
form", or any other "cloud-based" virtual hosting scenario.) the process you go through might look like this: you register the name "blog.example.com" with a domain registrar.
Using the WebAssembly JavaScript API - WebAssembly
now, to help us understand what is going on here, let’s look at the text representation of our wasm module (which we also meet in converting webassembly
format to wasm): (module (func $i (import "imports" "imported_func") (param i32)) (func (export "exported_func") i32.const 42 call $i)) in the second line, you will see that the import has a two-level namespace — the internal function $i is imported from imports.imported_func.
... starting soon in firefox, in addition to viewing webassembly as text, developers will be able to debug (place breakpoints, inspect the callstack, single-step, etc.) webassembly using the text
format.
... you can see multiplicity in action in our understanding text
format article — see the mutating tables and dynamic linking section.
Porting the Library Detector - Archive of obsolete content
); widgetview.width = tab.libraries.length * icon_width; } main.js will use the tabs module to update the widget's content when necessary (for example, when the user switches between tabs): tabs.on('activate', function(tab) { updatewidgetview(tab); }); tabs.on('ready', function(tab) { tab.libraries = []; }); showing the library detail the xul library detector displayed the detailed in
formation about each library on mouseover in a tooltip: we can't do this using a widget, so instead will use a panel.
...in.js containing the name of the corresponding library: function setlibraryinfo(element) { self.port.emit('setlibraryinfo', element.target.title); } var elements = document.getelementsbytagname('img'); for (var i = 0; i < elements.length; i++) { elements[i].addeventlistener('mouseover', setlibraryinfo, false); } one in the panel, which updates the panel's content with the library in
formation: self.on("message", function(libraryinfo) { window.document.body.innerhtml = libraryinfo; }); finally main.js relays the library in
formation from the widget to the panel: widget.port.on('setlibraryinfo', function(libraryinfo) { widget.panel.postmessage(libraryinfo); }); ...
panel - Archive of obsolete content
you can load remote html into the panel: var mypanel = require("sdk/panel").panel({ width: 180, height: 180, contenturl: "https://en.wikipedia.org/w/index.php?title=jetpack&use
format=mobile" }); mypanel.show(); you can also load html that's been packaged with your add-on, and this is most probably how you will create dialogs.
...you can use these options even if the panel content is not packaged along with the add-on: var mypanel = require("sdk/panel").panel({ contenturl: "https://en.wikipedia.org/w/index.php?title=jetpack&use
format=mobile", contentstyle: "body { border: 3px solid blue; }" }); mypanel.show(); var self = require("sdk/self"); var mypanel = require("sdk/panel").panel({ contenturl: "https://en.wikipedia.org/w/index.php?title=jetpack&use
format=mobile", contentstylefile: self.data.url("panel-style.css") }); mypanel.show(); private browsing if your add-on has not opted into private browsing, and it ca...
simple-prefs - Archive of obsolete content
{ "type": "string", "name": "monstername", "value": "kraken", "title": "monster name" } color displayed as a colorpicker and stores a string in the #123456
format.
... in "package.json": { "type": "control", "label": "click me!", "name": "sayhello", "title": "say hello" } in "main.js": var sp = require("sdk/simple-prefs"); sp.on("sayhello", function() { console.log("hello"); }); localization using the sdk's localization system, you can provide translated
forms of the title and description attributes.
tabs - Archive of obsolete content
see the private-browsing documentation for more in
formation.
...this may come from http headers or other sources of mime in
formation, and might be affected by automatic type conversions per
formed by either the browser or extensions.
widget - Archive of obsolete content
you can attach panels to them that open when they're clicked, or you can define a custom click handler to per
form some other action, like opening a web page in a tab.
...see working with content scripts for more in
formation.
/loader - Archive of obsolete content
this feature may be used in a few different ways: to expose an api that doesn't have a js file with an implementation or is written in an incompatible
format such as jsm: let { loader } = require('toolkit/loader'); let loader = loader({ modules: { // require('net/utils') will get netutil.jsm 'net/utils': cu.import('resource:///modules/netutil.jsm', {}) } }); each loader instance comes with a set of built-in pseudo modules that are described in detail in the built-in modules section.
...the sdk builds a higher level api on top of this for handling unloads and per
forming cleanup: let unloadsubject = require('@loader/unload'); let observerservice = cc['@mozilla.org/observer-service;1'].
lang/functional - Archive of obsolete content
let { partial } = require("sdk/lang/functional"); let add = function add (x, y) { return x + y; } let addone = partial(add, 1); addone(5); // 6 addone(10); // 11 partial(add, addone(20))(2); // 23 parameters fn : function function on which partial application is to be per
formed.
...function hasher (input) { return input.split(" ")[1]; } getlineage("homer simpson"); // computes and returns in
formation for "simpson" getlineage("lisa simpson"); // returns cached for "simpson" parameters fn : function the function that becomes memoized.
net/xhr - Archive of obsolete content
finally, we need to also consider attenuating http/https requests such that they're "sandboxed" and don't communicate potentially sensitive cookie in
formation.
...for more in
formation about xmlhttprequest objects, see the mdn page on using xmlhttprequest and the security concerns section in this page.
places/history - Archive of obsolete content
usage this module exports a single function, search(), which synchronously returns a placesemitter object which then asynchronously emits data and end or error events that contain in
formation about the state of the operation.
... we want to order chronologically by visit date { sort: "date" } ).on("end", function (results) { // results is an array of objects containing visit data, // sorted by visit date, with all entries from more than a week ago // that contain 'ruby', *in addition to* entries from this last week // that contain 'javascript' }); globals functions search(queries, options) queries can be per
formed on history entries by passing in one or more query options.
test/httpd - Archive of obsolete content
an http server for the mozilla plat
form, which can be used in unit tests.
... you can also use nshttpserver to start the server manually: var { nshttpserver } = require("sdk/test/httpd"); var srv = new nshttpserver(); // further documentation on developer.mozilla.org see http server for unit tests for general in
formation.
ui/button/action - Archive of obsolete content
you can specify this in one of three ways: as a resource:// url pointing at an icon file in your add-on's "data" directory, typically constructed using self.data.url(iconfile) as a relative path: a string in the
form "./iconfile", where "iconfile" is a relative path to the icon file beginning in your add-on's "data" directory as an object, or dictionary of key-value pairs.
... "my button1", icon: self.data.url("firefox-16.png") }); var button2 = actionbutton({ id: "my-button2", label: "my button2", icon: "./firefox-16.png" }); var button3 = actionbutton({ id: "my-button3", label: "my button3", icon: { "16" : "./firefox-16.png", "32" : "./firefox-32.png", "64" : "./firefox-64.png" } }); if you use the final
form, firefox will automatically choose the best-fit icon for your button, depending on the device screen resolution and where the button is in the ui.
ui/button/toggle - Archive of obsolete content
you can specify this in one of three ways: as a resource:// url pointing at an icon file in your add-on's "data" directory, typically constructed using self.data.url(iconfile) as a relative path: a string in the
form "./iconfile", where "iconfile" is a relative path to the icon file beginning in your add-on's "data" directory as an object, or dictionary of key-value pairs.
... "my button1", icon: self.data.url("firefox-16.png") }); var button2 = togglebutton({ id: "my-button2", label: "my button2", icon: "./firefox-16.png" }); var button3 = togglebutton({ id: "my-button3", label: "my button3", icon: { "16" : "./firefox-16.png", "32" : "./firefox-32.png", "64" : "./firefox-64.png" } }); if you use the final
form, firefox will automatically choose the best-fit icon for your button, depending on the device screen resolution and where the button is in the ui.
cfx to jpm - Archive of obsolete content
the sdk expects the latter
format, and if the id in package.json doesn't contain "@", then cfx xpi will append "@jetpack" to the package.json field, and make that the add-on id.
... this second
form will not work with jpm.
Tools - Archive of obsolete content
console enables your add-on to log error, warning or in
formational messages.
... package.json the package.json file contains manifest data for your add-on, providing not only descriptive in
formation about the add-on for presentation in the add-ons manager, but other metadata required of add-ons.
Getting started (cfx) - Archive of obsolete content
it uses two sdk modules: the action button module, which enables you to add buttons to the browser, and the tabs module, which enables you to per
form basic operations with tabs.
...this is the installable file
format for firefox add-ons.
Using XPCOM without chrome - Archive of obsolete content
using sdk xpcom with the low-level module sdk/plat
form/xpcom , it's possible to exclude chrome and xpcomutils in some cases.
... // this removes the need to import ci and the xpcomutils const { class } = require("sdk/core/heritage"); const { unknown } = require('sdk/plat
form/xpcom'); const { placesutils } = require("resource://gre/modules/placesutils.jsm"); let bmlistener = class({ extends: unknown, interfaces: [ "nsinavbookmarkobserver" ], //this event most often handles all events onitemchanged: function(bid, prop, an, nv, lm, type, parentid, aguid, aparentguid) { console.log("onitemchanged", "bid: "+bid, "property: "+prop, "isanno: "+an, "new value: "+nv, "...
Bootstrapped extensions - Archive of obsolete content
bootstrap data each of the entry points is passed a simple data structure containing some useful in
formation about the add-on being bootstrapped.
... more in
formation about the add-on can be obtained by calling addonmanager.getaddonbyid().
Autocomplete - Archive of obsolete content
turning autocomplete on for a xul widget this article is about xul widgets and not about html
form inputs.
...autocompletepopup="popup_autocomplete" /> finally, make sure that the value of the browser.
formfill.enable pref is set to true.
Miscellaneous - Archive of obsolete content
getbrowserselection() is not implemented on some plat
forms, such as thunderbird and songbird.
....org/intl/stringbundle;1"] .getservice(components.interfaces.nsistringbundleservice) .createbundle("chrome://myext/locale/myext.properties"), getlocalizedmessage: function(msg) { return this._bundle.getstringfromname(msg); } }; alert(common.getlocalizedmessage("invalid.url")) another similar alternative (using both getstringfromname and
formatstringfromname), is: var fcbundle = components.classes["@mozilla.org/intl/stringbundle;1"] .getservice(components.interfaces.nsistringbundleservice) .createbundle("chrome://myext/locale/myext.properties"); function getstr(msg, args){ //get localised message if (args){ args = array.prototype.slice.call(arguments, 1); return fcbundle.
formatstringfromname(m...
Preferences - Archive of obsolete content
in
formation here applies to the mozilla suite, firefox, thunderbird, and possibly other mozilla-based applications.
... using preferences in extensions if you're writing your extension for one of the toolkit applications (firefox, thunderbird, nvu), you should provide default values for your extension's preferences (see above for in
formation on how to do it).
StringView - Archive of obsolete content
however, this is slow and error-prone, due to the need for multiple conversions (especially if the binary data is not actually byte-
format data, but, for example, 32-bit integers or floats).
... per
formance note: each invocation of stringview.makeindex() runs a cycle for all characters contained in the stringview object between startfrom and startfrom + characterslength.
Migrating from Internal Linkage to Frozen Linkage - Archive of obsolete content
const prunichar str[] = {'f','o','o','\0'}; - pruint32 len = nscrt::strlen(str); + pruint32 len = ns_strlen(str); - #include "nscrt.h" + #include "nsmemory.h" + #include "nscrtglue.h" prunichar* anotherstr = (prunichar*) ns_alloc(100 * sizeof(prunichar)); - prunichar *str = nscrt::strdup(anotherstr); - nscrt::free(str); + prunichar *str = ns_strdup(anotherstr); + ns_free(str); linking for in
formation about the correct libraries to link to when using frozen linkage, see xpcom glue.
...support for the other
forms of nsescapehtml is not provided.
Appendix C: Avoiding using eval in Add-ons - Archive of obsolete content
settimeout("alert('" + xhr.responsetext + "');", 100); // attacker manipulated responsetext to contain "attack!');
format_computer(); alert('done" settimeout("alert('attack!');
format_computer(); alert('done');", 100); as a general rule of thumb, just don't pass code around as strings and execute it by calling eval, settimeout and friends.
...also, calling .bind() in a tight (inner) loop should be avoided for per
formance reasons, as calling .bind() does require some work and memory.
Custom XUL Elements with XBL - Archive of obsolete content
when you add a node to a xul document using an xbl binding, all normal dom operations can be per
formed on it.
...if you need to per
form an operation to a node right after insertion, we recommend using a timeout to delay the operation (a timeout set to 0 works well).
Getting Started with Firefox Extensions - Archive of obsolete content
extensions now exist in 3 different
forms: add-ons sdk extensions (also known as jetpacks), bootstrapped extensions and traditional extensions.
...xpi (pronounced "zippy") stands for cross-plat
form installer, because the same installer file can work on all plat
forms firefox supports.
Useful Mozilla Community Sites - Archive of obsolete content
it's a very powerful tool you have when developing on top of the mozilla plat
form, and you should take advantage of it in order to create a truly successful add-on .
...all you need is your xpi, a few screenshots (good ones will make your extension much more appealing), and a few minutes to fill a couple of
forms.
XUL user interfaces - Archive of obsolete content
in
formation: user interfaces although html has some support for user interfaces, it does not support all the features that you need to make a standalone application.
... more details for more in
formation about xul user interfaces, see the xul page in this wiki.
Install.js - Archive of obsolete content
pros: this version consolidates all the changable in
formation at the top of the file.
... regpath = 'locale/' + this.extlocalenames[locale] + '/' + this.extshortname + '/'; install.registerchrome(install.locale | installtype, jarpath, regpath); } // register skins for (var skin in this.extskinnames) { var regpath = 'skin/' + this.extskinnames[skin] + '/' + this.extshortname + '/'; install.registerchrome(install.skin | installtype, jarpath, regpath); } // per
form install var err = install.per
forminstall(); if (err == install.success || err == install.reboot_needed) { if (!this.silentinstall && this.extpostinstallmessage) { install.alert(this.extpostinstallmessage); } } else { this.handleerror(err); return; } }, parsearguments: function() { // can't use string handling in install, so use if statement instead var ar...
Visualizing an audio spectrum - Archive of obsolete content
this example calculates and displays fast fourier trans
form (fft) spectrum data for the playing audio.
... note: you can use the audionode called analysernode to per
form real-time fft analysis on an audio stream, rather than the code shown below.
How Thunderbird and Firefox find their configuration files - Archive of obsolete content
how thunderbird and firefox find their configuration files thunderbird looks into the binary %appdata%\thunderbird\profiles.ini file for its "registry", which contains, amongst other in
formation, a pointer to the directory where the profile is stored (usually located in %appdata%\thunderbird\profiles\profilename).
...here is an example of what this may look like: [general] startwithlastprofile=1 [profile0] name=default isrelative=1 path=profiles/default.uda if you want to point this to a location of your choice (for example h:\thunderbird), you need to per
form to changes: set isrelative to be 0 update the path to point to the desired place.
Adding the structure - Archive of obsolete content
e="0"/> </statusbarpanel> <statusbarpanel class="statusbarpanel-iconic" id="tinderbox-status" status="none"/> <statusbarpanel class="statusbarpanel-iconic" id="offline-status"/> <statusbarpanel class="statusbarpanel-iconic" id="security-button" onclick="browserpageinfo(null, 'securitytab')"/> </statusbar> the statusbar xul element defines a horizontal status bar where in
formative messages about an application's state can be displayed.
...each status bar panel displays a different kind of status in
formation.
Tinderbox - Archive of obsolete content
the tool enables mozilla.org to be immediately notified of changes to the code that prevent mozilla from compiling and running (or compromise per
formance and footprint) so they can get someone to fix the problem or reverse the changes.
...different plat
forms), most people only care about the overall situation, i.e.
Using Dehydra - Archive of obsolete content
as gcc compiles file, dehydra calls functions in the user analysis script with in
formation about the code being compiled.
... for more in
formation, see the function reference and the object reference.
Download Manager improvements in Firefox 3 - Archive of obsolete content
download manager interfaces nsidownloadmanager gives applications and extensions access to the download manager, allowing them to add and remove files to the download list, retrieve in
formation about past and present downloads, and request notifications as to the progress of downloads.
... the download manager schema this article describes the database
format used to store and track in
formation about each download.
Drag and Drop - Archive of obsolete content
dragaction set to the current action to be per
formed, which should be one or more of the constants described earlier.
... next » original document in
formation author(s): neil deakin original document: copyright in
formation: copyright (c) neil deakin ...
Embedding FAQ - Archive of obsolete content
you can get more detailed in
formation on what interfaces are required and which are optional to impelement here.
...you can find more in
formation on adding new protocols here how to embedding mozilla inside of java there hasn't been any good code examples found.
Error Console - Archive of obsolete content
for in
formation about what javascript exceptions get logged into the error console, and how to make all exceptions get logged, read the article exception logging in javascript.
... manipulating data displayed in error console in
formation displayed in error console can be accessed and manipulated through the console service.
Code snippets - Archive of obsolete content
this page documents how to per
form custom actions with firefox sync via javascript.
...let collection = "
forms"; components.utils.import("resource://services-sync/main.js"); components.utils.import("resource://services-sync/record.js"); let recordtype = weave.engines.get(collection)._recordobj; let coll = new collection(weave.service.storageurl + collection, recordtype); coll.full = true; coll.recordhandler = function(item) { item.collection = collection; item.decrypt(); console.log(item.cleartex...
Firefox Sync - Archive of obsolete content
these include: an http api for client-server interaction storage
formats used by the the clients cryptographic model for encrypting client data the definitive source for these specifications is http://docs.services.mozilla.com/.
...getting involved and status for in
formation on the current development status of sync including how to get involved, see https://wiki.mozilla.org/services/sync.
GRE - Archive of obsolete content
mozilla suite: the old gre there are two different
forms for the gre: the "old" gre was part of the mozilla application suite.
...xulrunner supports or is planned to support embedding on all three major plat
forms (windows, mac, and linux).
Gecko Coding Help Wanted - Archive of obsolete content
it's really improved code readability, reduced code size, and sped up per
formance.
... original document in
formation author(s): fantasai last updated date: may 4, 2004 copyright in
formation: portions of this content are © 1998–2007 by individual mozilla.org contributors; content available under a creative commons license | details.
HTTP Class Overview - Archive of obsolete content
tioninfo identifies a connection nshttptransaction implements nsirequest encapsulates a http request and response parses incoming data nshttpchunkeddecoder owned by a transaction strips chunked transfer encoding nshttprequesthead owns a nshttpheaderarray knows how to fill a request buffer nshttpresponsehead owns a nshttpheaderarray knows how to parse response lines per
forms common header manipulations/calculations nshttpheaderarray stores http "<header>:<value>" pairs nshttpauthcache stores authentication credentials for http auth domains nshttpbasicauth implements nsihttpauthenticator generates basic auth credentials from user:pass nshttpdigestauth implements nsihttpauthenticator generates digest auth credentials from user:pass original do...
...cument in
formation author(s): darin fisher last updated date: august 5, 2002 copyright in
formation: portions of this content are © 1998–2007 by individual mozilla.org contributors; content available under a creative commons license | details.
Help Viewer - Archive of obsolete content
help viewer: allows in
formation to be shown to the user inside mozilla.
...consequently, the mozilla plat
form provides a cross-plat
form help viewer along with a framework for providing built-in help documentation.
Introducing the Audio API extension - Archive of obsolete content
this event has the following attributes: mozchannels: number of channels mozsamplerate: sample rate per second mozframebufferlength: number of samples collected in all channels this in
formation is needed later to decode the audio data stream.
...those samples have the same
format as the ones in the mozaudioavailable event.
LIR - Archive of obsolete content
nanojit lir instruction cheat sheet.also in pdf
format see attachment.
...64 bit subtract quad and branch on overflow softfloat 124 dlo2i integer softfloat get the low 32 bits of a double as an int 125 dhi2i integer softfloat get the high 32 bits of a double as an int 126 ii2d double softfloat join two ints (1st arg is low bits, 2nd is high) 127 hcalli integer lir_hcalli is a hack that's only used on 32-bit plat
forms that use softfloat.
How to Write and Land Nanojit Patches - Archive of obsolete content
nanojit was removed during the development of (firefox 11 / thunderbird 11 / seamonkey 2.8), so this in
formation is relevant to earlier versions of the codebase.
...(note that nanojit-central revision urls have the
form http://hg.mozilla.org/projects/nanojit-central/<revid>, ie.
Plug-n-Hack - Archive of obsolete content
security researchers commonly use security tools in conjunction with browsers, but until now direct integration has required writing plat
form and browser specific extensions.
...without integration between security tools and browsers, a user must often switch between the tool and their browser several times to per
form a simple task, such as intercepting an http(s) request.
Remote debugging - Archive of obsolete content
there give more in
formation about the stack than a breakpad crash report: not only the names of the functions on the stack, but also the values they were passed.
...transferring a core dump is tricky, because it is large and can contain private in
formation.
File object - Archive of obsolete content
if you are building a standalone version of spidermonkey (see: spidermonkey build documentation), this variable can be added on the make command line, like so: cd mozilla/js/src make -f makefile.ref js_has_file_object=1 alternatively, if you are building a larger product (such as a browser) and want to include the file object, you may need to per
form minor makefile surgery.
... description filenames are specified as strings that have an implementation defined
format.
Table Cellmap - Border Collapse - Archive of obsolete content
introduction this document describes the additional in
formation that is stored for border collapse tables in the cellmap.
... in
formation storage each cellmap entry stores for tables in the border collapse mode additional in
formation about its top and left edge and its top left corner.
Table Layout Regression Tests - Archive of obsolete content
while the in
formation on the layout debugger is still useful, the testing in
formation is much less relevant now than it has been, as the "rtest" testing framework described here has been superseded by the reftest framework.
... original document in
formation author(s): bernd mielke other contributors: boris zbarsky last updated date: february 5, 2007 copyright in
formation: portions of this content are © 1998–2007 by individual mozilla.org contributors; content available under a creative commons license | details.
Tamarin Acceptance Testing - Archive of obsolete content
successfully build release and debug versions of the shell with the debugger enabled [info] successfully run the following test suites: acceptance test suite [info] self tests [info] submit a sandbox build request to test against plat
forms that you may not have locally [info] available tamarin acceptance test suites actionscript acceptance tests: actionscript acceptance tests running tamarin acceptance tests abc assembler tests cmdline tests per
formance tests actionscript per
formance tests running tamarin per
formance tests built-in self tests see instructions...
... misc the acceptance and per
formance tests can be run on windows mobile devices connected to windows desktop machine with activesync.
Tamarin - Archive of obsolete content
releases release tracking in
formation on current, past, and upcoming releases of tamarin.
... documentation adobe actionscript virtual machine 2 (avm2) overview (pdf, 400k) the instructions, architecture, and file
format supported by the avm2.
The Download Manager schema - Archive of obsolete content
this in
formation is available using nsidownloadmanager methods to retrieve nsidownload objects for each download entry; however, if you feel like poking directly into the table, you can do so using the storage api.
...this in
formation is used to resume the download after it's been paused.
XBL 1.0 Reference - Archive of obsolete content
the documentation process is still in progress: please keep it in your mind while using the provided in
formation.
... notes.html notes.xml notes.css view this example download all files (.zip archive) need to ask to adjust the server - it gives "access denied" for zip files (?) references initial xbl 1.0 proposal submitted as a note to w3c (does not reflect mozilla implementation, nor future plans) xbl 2.0 project original document in
formation last updated date: april 24, 2006 ...
Mac stub installer - Archive of obsolete content
this, in addition to the above steps to set up the mac installer to debug you will need to do the following: create a file named xpcom.xpi with the shared libraries in the structure described under the [xpcom] section in: <http://lxr.mozilla.org/seamonkey/sou...ackages-mac#33> note that if you are using the debug target of the installer binary all shared libraries are expected to have the name
format <libname>debug.shlb now set a break point at xpi_init() in the mac installer code and step into xpistub and eventually the xpinstall engine will load including symbols so you can set a break point in the xpinstall engine itself.
... original document in
formation author(s): samir gehani other contributors: curt patrick last updated date: march 12, 2003 copyright in
formation: copyright (c) samir gehani, curt patrick ...
Install script template - Archive of obsolete content
) { logcomment("could not add " + component_file + " to " + pluginsfolder + ":" + errblock1); cancelinstall(errblock1); } } else { logcomment("cancelling current browser install due to lack of space..."); cancellinstall(); } // secondary install block, which sets up plugins and xpt in another location in addition to the current browser errblock2 = createsecondaryinstall(); // per
forminstall block, in which error conditions from previous blocks are checked.
... if(errblock2 == success) { // now take care of writing plids to the win32 registry err = writeplidsolution(); if(err!=success) { logcomment("could not write win32 keys as specified: " + err); } else { logcomment("plid entries are present in the win32 registry"); } } reseterror(); err = per
forminstall(); if (err == success) refreshplugins(true); // call refreshplugins(true) if you'd like the web page which invoked the plugin to // reload.
Install.addDirectory - Archive of obsolete content
install.adddirectory the install object's adddirectory method queues an entire directory for installation once per
forminstall is called.
... var vi = "10.10.10.10"; var xpisrc = "adddir1"; initinstall("addfilenovers1", "adddir_1", vi, 1); f = getfolder("program"); setpackagefolder(f); err = adddirectory(xpisrc); logcomment("the error = " + err); if (0 == getlasterror()) per
forminstall(); else cancelinstall(); ...
Trigger Scripts and Install Scripts - Archive of obsolete content
triggers use the installtrigger object methods to compare software versions, install chrome, and per
form simple software installations.
... install scripts use the install, file, installversion and plat
form-specific installation object methods to initialize, queue, manage, and per
form the installation of one or more software packages.
execute - Archive of obsolete content
description the specified file is not actually executed until the per
forminstall method is called.
... see per
forminstall for more in
formation about queued commands during the installation process.
compareTo - Archive of obsolete content
compareto compares the version in
formation specified in this object to the version in
formation specified in the version parameter.
... version an installversion object or a string representing version in
formation in the
format "4.1.2.1234".
InstallVersion Object - Archive of obsolete content
installversion you use installversion objects to contain version in
formation for software.
...the init() method associates a particular version with an installversion object, the tostring() method converts versions in various
formats to a string, and the compareto() method compares these string and indicates the relationship between the two versions.
confirm - Archive of obsolete content
previous gecko versions only support the first, one-parameter method and will throw an error on occuring the extended
form.
...this string is typically in the
form of a prompt for the user (e.g., "are you sure you want to delete the selected file(s)?").
refreshPlugins - Archive of obsolete content
note that refreshplugins must be called after the per
forminstall method that initiates the actual installation.
... dll into plugins // install xpt into components var xpisrc = "npmcult3dp.dll"; var xpisrc2 = "nsic3dpscriptablepeer.xpt"; initinstall( "cult3d plugin file", "@cycore.com/cult3d;version=1.0.0", "1.0.0"); setpackagefolder(getfolder("plugins")); addfile(xpisrc); addfile("",xpisrc2,getfolder("components"),""); var err = getlasterror(); if (err == success) { err = per
forminstall(); if (err == success) refreshplugins(); } else cancelinstall(err); ...
registerChrome - Archive of obsolete content
in this case, registerchrome is supporting the old
format of installation archives, in which the manifest.rdf file was always located at the highest level of the installation archive.
... in this case, registerchrome does not require a path inside the archive, as it does now in order to locate the more flexible contents.rdf
format of installation archives.
Install Object - Archive of obsolete content
the following two lines, for example, are equivalent: f = getfolder("program"); f = install.getfolder("program"); an installation script is composed of calls to the install object, and generally takes the following
form: initialize the installation call initinstall with the name of the installation and the necessary registry and version in
formation.
... per
form installation check that the files have been added successfully (e.g., by checking the error return codes from many of the main installation methods, and go ahead with the install if everything is in order: per
formorcancel(); function per
formorcancel() { if (0 == getlasterror()) per
forminstall(); else cancelinstall(); } for complete script examples, see script examples.
XPInstall API reference - Archive of obsolete content
objects install properties methods adddirectory addfile alert cancelinstall confirm deleteregisteredfile execute gestalt getcomponentfolder getfolder getlasterror getwinprofile getwinregistry initinstall loadresources logcomment patch per
forminstall refreshplugins registerchrome reseterror setpackagefolder installtrigger no properties methods compareversion enabled getversion install installchrome startsoftwareupdate installversion properties methods compareto init tostring fil...
... winreg no properties methods createkey deletekey deletevalue enumkeys enumvaluenames getvalue getvaluenumber getvaluestring iskeywritable keyexists setrootkey setvalue setvaluenumber setvaluestring valueexists winregvalue constructor other in
formation return codes see complete list examples trigger scripts and install scripts code samples file.macalias file.windowsshortcut install.adddirectory install.addfile installtrigger.installchrome installtrigger.startsoftwareupdate windows install ...
XPJS Components Proposal - Archive of obsolete content
that native nsgetfactory function will check the in
formation it stored in the registry to see that the js factory for the given clsid is in a given .js file.
... original document in
formation author: john bandhauer last updated date: 1 july 1999 ...
XTech 2005 Presentations - Archive of obsolete content
directions of the mozilla rdf engine: website scripting, standards con
formance and perfomance - axel hecht this presentation showed new developments in the mozilla rdf engine.
... these include plans to expose the rdf api to public web content, as well as per
formance and correctness improvements.
XTech 2006 Presentations - Archive of obsolete content
microsummaries in firefox and on the web - myk melez microsummaries are regularly-updated compilations of the most important and timely in
formation on web pages.
... converging rich-client and web application development with mozilla xulrunner (open office
format) - benjamin smedberg this presentation demonstrates the convergence of rich-client and web application development and discuss application deployment using mozilla xulrunner.
accesskey - Archive of obsolete content
on non-macintosh plat
forms, the character on the element's label matching the accesskey is underlined.
...when the user presses a modifier key specific to the plat
form (eg, control* on windows, command* on macintosh) and the access key, the element will be focused and/or activated from anywhere in the window.
buttons - Archive of obsolete content
the buttons will be placed in suitable locations for the user's plat
form and basic event handling will be per
formed automatically.
... disclosure: a button to show more in
formation.
icon - Archive of obsolete content
some plat
forms display these buttons with a small icon indicating their usage.
...see the appearance of the different icons on some available plat
forms.
modifiers - Archive of obsolete content
keys will map to other keys on plat
forms that do not have them.
... accel: the key used for keyboard shortcuts on the user's plat
form, which is control on windows and linux, and command on mac.
XUL Events - Archive of obsolete content
if you capture this event at the document level, you can be notified of document changes warning: it should be noted that the addition of any mutation event listeners to a document degrades the per
formance of subsequent dom operations in that document, and that removing the listeners later does not mitigate or reverse the effect.
...the action to do this varies by plat
form, but it will typically be a right click.
Working With Directories - Archive of obsolete content
file and stream guide: [ nsiscriptableio | accessing files | getting file in
formation | reading from files | writing to files | moving, copying and deleting files | uploading and downloading files | working with directories ] important note: the pages from the file and stream guide use the io object (nsiscriptableio), which was not available in any released version of the plat
form (pending some fixes).
...see creating directories below for in
formation about this.
Extensions - Archive of obsolete content
for instance, if an image was context clicked, you may wish to hide the menu item you have added if the operation it per
formed wouldn't apply to images.
... determining what element was context clicked for general in
formation about how to determine which element was the target of the context menu, that is, the element that was context clicked, see determining what was context clicked firefox uses its own popupshowing event listener to adjust the items on the context menu.
MenuItems - Archive of obsolete content
the "accel" modifier key varies on each plat
form, but is the key typically used for shortcut keys.
...for more in
formation about the popupshowing event, see the popupshowing event.
PopupEvents - Archive of obsolete content
for more in
formation about how to use this event, see context menu events.
...<panel id="time-panel" onpopupshowing="this.lastchild.value = (new date()).tolocale
format('%t')"> <label value="time:"/> <label id="time"/> </panel> <toolbarbutton label="show time" popup="time-panel"/> you can prevent a menu or popup from appearing by calling the preventdefault method of the event from within a popupshowing listener.
PopupKeys - Archive of obsolete content
for more in
formation about focus handling within panels, see focus in panels.
... <panel ignorekeys="true"> in this case, none of the key handling described above is per
formed.
Tooltips - Archive of obsolete content
note that tooltips can only be activated using the mouse, so they should never contain important in
formation that isn't available elsewhere.
...it conveys no additional in
formation to the user, so it shouldn't be used as in this example.
buttons - Archive of obsolete content
the buttons will be placed in suitable locations for the user's plat
form and basic event handling will be per
formed automatically.
... disclosure: a button to show more in
formation.
Filtering - Archive of obsolete content
this method will remove all of the existing generated content, delete all of the internal in
formation pertaining to the results, and start again as if the template were just being examined for the first time.
...we will need to add some in
formation to the datasource in order to specify the list of countries that are available.
SQLite Templates - Archive of obsolete content
this allows in
formation from the database to be used to generate xul content.
...the second method involves using a special url
form: profile:filename.sqlite this
form with the 'profile' prefix is used to refer to files in the profile directory.
Sorting Results - Archive of obsolete content
when using a tree, sorting may be per
formed on each column of the tree.
...this also has the advantage that the dates will be displayed according to the user's current locale (meaning that the date is
formatted so as to be suitable for the user's language).
Tree Widget Changes - Archive of obsolete content
this object implements the nsitreecolumn interface and holds in
formation about a single column in the tree.
...example: treechildren::-moz-tree-separator { margin-top: 1px; border-top: 1px solid threedshadow; border-left: 1px solid threedshadow; border-right: 1px solid threedhighlight; border-bottom: 1px solid threedhighlight; height: 2px; } original document in
formation author: neil deakin source: here ...
Accesskey display rules - Archive of obsolete content
basic accesskey display rules on non-mac plat
forms, a character which is same as its accesskey is underlined.
...for this issue, we recommend the following
format if you use .properties: <command-name>.label=cancel <command-name>.accesskey=c note that apis of nsipromptservice are using the bad way.
Adding Buttons - Archive of obsolete content
if the button is disabled, the function of the button cannot be per
formed.
...when the user presses alt (or a similar key that varies on each plat
form) and the access key, the button will be focused from anywhere in the window.
Adding Labels and Images - Archive of obsolete content
this element is useful for in
formative text at the top of a dialog or a group of controls for example.
...the description element is intended for other descriptive text such as in
formative text at the top of a dialog box.
Broadcasters and Observers - Archive of obsolete content
they work the same as commands except that a command is used for actions, while a broadcaster is instead used for holding state in
formation.
...in the
former case, menu items and toolbar buttons would need to be disabled when there was no page to go back to, or no text to cut or delete.
Cross Package Overlays - Archive of obsolete content
<rdf:seq about="chrome://navigator/content/navigator.xul"> <rdf:li>chrome://findfile/content/foverlay.xul</rdf:li> </rdf:seq> mozilla reads this in
formation and builds a list of overlays that are applied to other windows.
... it stores this in
formation in the chrome/overlayinfo directory.
List Controls - Archive of obsolete content
they work similar to the html select element, which per
forms both functions, but the xul elements have additional features.
...the listcols element is used to hold the column in
formation, each of which is specified using a listcol element.
Popup Menus - Archive of obsolete content
the exact way that a context menu is opened varies on each plat
form.
... example 2 : source view <button label="save" tooltiptext="click here to save your stuff"/> <popupset> <tooltip id="moretip" orient="vertical" style="background-color: #33dd00;"> <description value="click here to see more in
formation"/> <description value="really!" style="color: red;"/> </tooltip> </popupset> <button label="more" tooltip="moretip"/> these two buttons each have a tooltip.
Progress Meters - Archive of obsolete content
you typically see it when downloading files or when per
forming a lengthy operation.
...the progress meter will have an animation such as a spinning barber pole or a sliding box, depending on the plat
form and theme used.
Stacks and Decks - Archive of obsolete content
shadowing is very useful for creating the disabled appearance of buttons: example 2 : source view <stack style="background-color: #c0c0c0"> <description value="disabled" style="color: white; padding-left: 1px; padding-top: 1px;"/> <description value="disabled" style="color: grey;"/> </stack> this arrangement of text and shadow colors creates the disabled look under some plat
forms.
... like stacks, the direct children of the deck element
form the pages of the deck.
Toolbars - Archive of obsolete content
« previousnext » a toolbar is usually placed along the top of a window and contains a number of buttons that per
form common functions.
...for more in
formation about customizable toolbars, see creating toolbar buttons.
Using the Editor from XUL - Archive of obsolete content
now, we initialize a nstextrulesinfo with the in
formation about the string being inserted, and call willdoaction() on the current editing rules.
... original document in
formation author(s): editor team last updated date: july 25, 2000 copyright in
formation: copyright (c) editor team ...
XUL accessibility tool - Archive of obsolete content
general in
formation the xul accessibility tool is a firefox extension designed by aaron andersen of webaim as part of a mozilla foundation accessibility minigrant in the spring of 2007.
... future work the following things have been suggested or are planned for a future version of the tool: new tests: (aaronlev) warning: hardcoded color and pixel sizings (aaronlev) error: duplicate accesskey in a dialog (already have this for menus) (aaronlev) error:
form control without accesskey (aaronlev) warning: accesskey as lowercase letter with descender (underlined g,j,y,q,p are hard to read, not recommended) (aaronandy) list of things to check manually, such as a list oftrees in the document (make sure they have accessible column picker equivs) or a list of toolbarbuttons (make sure they have accessible alternatives).
XUL Event Propagation - Archive of obsolete content
events are used for different purposes, but they play a particularly important role in creating interactive xul-based user interfaces, since it is events that bring the in
formation about user actions to the code behind the interface.
... original author: ian oeschger other documents: w3c dom events, mozilla xul events original document in
formation author(s): ian oeschger last updated date: january 18, 2002 copyright in
formation: copyright (c) ian oeschger ...
browser - Archive of obsolete content
are you here looking for in
formation about the firefox web browser, or because you'd like to download the latest version of firefox?
... contentprincipal type: nsiprincipal this read-only property contains the principal for the content loaded in the browser, which provides security context in
formation.
caption - Archive of obsolete content
more in
formation is available in the xul tutorial.
... depending on the plat
form and theme being used, some elements will have set a maximum width so they will always appear cropped.
editor - Archive of obsolete content
see the rich text editing and midas pages for more in
formation about gecko's built-in rich text editor.
...esignmode property of the loaded html document: <script language="javascript"> function initeditor(){ // this function is called to set up the editor var editor = document.getelementbyid("myeditor"); editor.contentdocument.designmode = 'on'; } </script> <editor id="myeditor" editortype="html" src="about:blank" flex="1" type="content-primary"/> once editable, the document can have special
formatting and other html pieces added to it using the document.execcommand method: var editor = document.getelementbyid("myeditor"); // toggle bold for the current selection editor.contentdocument.execcommand("bold", false, null); see the midas overview for more command strings.
grid - Archive of obsolete content
if you are looking for in
formation on css grids, you should go to our css grid layout page instead.
... more in
formation is available in the xul tutorial.
groupbox - Archive of obsolete content
typically, the groupbox will be drawn with a border around it and the caption either above or over the top border, however the actual appearance will be plat
form specific.
... more in
formation is available in the xul tutorial.
prefpane - Archive of obsolete content
the
former is specified using a preferences element while the latter may be specified using other xul elements.
...more in
formation is available in the preferences system article.
tabbrowser - Archive of obsolete content
firefox 3.6 note the second
form of this method was added in firefox 3.6; it allows you to specify the parameters by name, in any order.
... firefox 3.6 note the second
form of this method was added in firefox 3.6; it adds the relatedtocurrent parameter, and allows the parameters to be specified by name, in any order.
wizard - Archive of obsolete content
the wizard will rendered in a manner suitable for the user's selected theme and plat
form.
... more in
formation is available in the xul tutorial.
CommandLine - Archive of obsolete content
mmandline object is passed as the first argument of the launched window: example var cmdline = window.arguments[0]; cmdline = cmdline.queryinterface(components.interfaces.nsicommandline); alert(cmdline.handleflagwithparam("test", false)); see also: chrome: command line for single instance applications of course, for a single instance application (see toolkit.singletonwindowtype for more in
formation), the last example still applies the first time your application is launched.
...</window> original document in
formation author: georges-etienne legendre last updated date: august 21st, 2007 ...
Dialogs in XULRunner - Archive of obsolete content
this is also nice for cross-plat
form applications, as each os has its own convention for where buttons should be placed on a dialog.
... see also dialog xul tutorial:creating dialogs nsifilepicker xul tutorial:open and save dialogs « previous original document in
formation author: mark finkle last updated date: october 2, 2006 ...
XULRunner FAQ - Archive of obsolete content
you can write your application in any language supported by the mozilla web plat
form, including html, xhtml, svg, or xul.
...see deploying xulrunner 1.8 for more in
formation.
What XULRunner Provides - Archive of obsolete content
extension manager file picker (uses native os filepicker as appropriate) find toolbar helper app dialog/ui security ui (maintenance of ssl keychains, etc) embedding apis the following embedding apis are provided by xulrunner: cross-plat
form embedding (xre_initembedding) javaxpcom embedding gtkmozembed (linux only) activex control (windows only) (not yet complete) obsolete since gecko 7.0 nsview-based-widget (mac os x only) (not yet complete) the "maybe" list the following features have been discussed and may be included if developer time permits and code size is controlled: ldap support spellchecking support (with or w...
... what's out xulrunner will not supply: bookmarks or history ui (must be managed by the application/embedder) x
forms (x
forms will be available as an extension) ...
Windows and menus in XULRunner - Archive of obsolete content
the css is used to apply
formatting to elements, just as it would in html.
... see also xul:windows xul tutorial:creating a window commandset command xul tutorial:commands xul tutorial:simple menu bars xul tutorial:toolbars « previousnext » original document in
formation author: mark finkle last updated date: october 2, 2006 ...
XUL Explorer - Archive of obsolete content
the help menu provides access to xul in
formation on mdc.
...t mode venkman support dom inspector support future: support more “best practice” checks such as: more a11y checks, strings in dtds and so on - xul checker allow users to add snippets on the fly add sidebars for more functionality - property sidebar and project sidebar support wizards to generate common projects - xul files, js xpcom, and xulrunner applications for more detailed in
formation, see the xul_explorer:planning#feature_planning_for_xul_explorer.
Mozprocess - Archive of obsolete content
for more in
formation about mozprocess as part of the mozbase project, please see the mozbase project page.
... mozprocess provides python process management via an operating system and plat
form transparent interface to mozilla plat
forms of interest.
Mozrunner - Archive of obsolete content
for more in
formation about mozrunner as part of the mozbase project, please see the mozbase project page.
...run mozrunner --help for detailed in
formation on the command line program.
reftest opportunities files - Archive of obsolete content
tests from dbaron http://dbaron.org/css/test/cachetest http://dbaron.org/css/test/lenunit http://dbaron.org/css/test/implied http://dbaron.org/css/test/
formelem http://dbaron.org/css/test/sec010303 http://dbaron.org/css/test/sec0302 http://dbaron.org/css/test/sec0302_xml http://dbaron.org/css/test/parsing http://dbaron.org/css/test/parsing2 http://dbaron.org/css/test/parsing4 http://dbaron.org/css/test/parsing5 http://dbaron.org/css/test/parsing6 http://dbaron.org/css/test/sec040102 http://dbaron.org/css/test/casesens http://dbaron.org/css/test/xmlty...
...rser/htmlparser/tests/html/ins003.html parser/htmlparser/tests/html/ins002.html parser/htmlparser/tests/html/ins001.html parser/htmlparser/tests/html/imgmap001.html parser/htmlparser/tests/html/html001.html parser/htmlparser/tests/html/home01.html parser/htmlparser/tests/html/head03.html parser/htmlparser/tests/html/head02.html parser/htmlparser/tests/html/head01.html parser/htmlparser/tests/html/
form002.html parser/htmlparser/tests/html/
form001.html parser/htmlparser/tests/html/fieldset003.html parser/htmlparser/tests/html/fieldset002.html parser/htmlparser/tests/html/fieldset001.html parser/htmlparser/tests/html/entity_list.html parser/htmlparser/tests/html/entity_attrlist.html parser/htmlparser/tests/html/entity001.html parser/htmlparser/tests/html/endswithcr.html parser/htmlparser/tests/ht...
2006-10-06 - Archive of obsolete content
q & a q: walt experienced an unusual behaviour in his build and wanted to per
form an experiment to figure out the problem, but he couldn't find the mozilla.org's config file.
... discussion highlights: ziga sancin suggests writing an introductory article for potential developers containing basic project in
formation (history, list of main developers, project goals, roadmap and available communication channels, etc), tools needed to start developing and building tb, documentation on source structure as well as links to help one get started on the project.
2006-10-06 - Archive of obsolete content
summary: mozilla.dev.plat
form - september 30th to october 6th 2006 announcements mike schroepfer is attending a vista compatibility lab with some other people this week.
... other traffic there was no traffic on mozilla.dev.plat
form this week.
2006-10-20 - Archive of obsolete content
summary: mozilla.dev.plat
form - october 14th to october 20th 2006 announcements no announcements this week.
...nickolay ponomarev, benjamin smedberg, axel hecht clarify some misconceptions about front-end and back-end programming with xulrunner, including the difficulty of writing the backends in c++ (since that would require a recompilation on every plat
form frank wanted to support).
2006-11-10 - Archive of obsolete content
summary: mozilla.dev.plat
form - november 4th - november 10th, 2006 announcements no announcements this week traffic beaufour moves the discussion about xulrunner unit-tests like xpcshell from mozilla.dev.plat
form to mozilla.dev.quality.
...matthew gertner wants to know if anyone has written code to paste images from the clipboard on plat
forms other than windows?
2006-11-17 - Archive of obsolete content
summary: mozilla.dev.plat
form - november 11th - november 17th, 2006 announcements no announcements this week traffic xulrunner: <browser> not allowing javascript popup windows b notes that when using xul elements <browser/> and <tabbrowser/> the javascript popup windows don't work out of the box and asks what needs to be implement.
...please see mozilla.dev.plat
form faq for solution.
2006-18-24 - Archive of obsolete content
summary: mozilla.dev.plat
form - november 18th - november 24th, 2006 announcements no announcements this week traffic xulrunner: <browser> not allowing javascript popup windows b notes that when using xul elements <browser/> and <tabbrowser/> the javascript popup windows don't work out of the box and asks what needs to be implement.
... please see mozilla.dev.plat
form faq for solution.
2006-11-03 - Archive of obsolete content
a decision has to be made as to the usefulness of extended validation certificates and weather or not they will make a difference to the reliability of in
formation in certificates.
...more in
formation about ca can be found at http://www.cabforum.org/ meetings none during this week.
NPN_GetAuthenticationInfo - Archive of obsolete content
« gecko plugin api reference « browser side plug-in api summary the function is called by plugins to get http authentication in
formation from the browser.
...this function allows the plugin to ask the browser for http authentication in
formation for a domain.
NPN_PluginThreadAsyncCall - Archive of obsolete content
it is the application's responsibility to per
form any synchronization between the thread calling npn_pluginthreadasynccall() and the thread on which the call is eventually executed.
...plug-ins should per
form appropriate synchronization with the code in their npp_destroy() routine to ensure correct execution and avoid memory leaks.
NPN_PostURL - Archive of obsolete content
possible url types include http (similar to an html
form submission), mail (sending mail), news (posting a news article), and ftp (upload a file).
... plug-ins can use this function to post
form data to cgi scripts using http or upload files to a remote server using ftp.
NPN_SetValue - Archive of obsolete content
this call is used to in
form the browser of variable in
formation controlled by the plugin.
..., false=opaque nppvjavaclass nppvpluginwindowsize nppvplugintimerinterval nppvpluginscriptableinstance nppvpluginscriptableiid nppvjavascriptpushcallerbool: specifies whether you are pushing or popping the jscontext off the stack nppvpluginkeeplibraryinmemory: tells browser that the plugin dll should live longer than usual nppvpluginneedsxembed nppvpluginscriptablenpobject nppv
formvalue nppvplugindrawingmodel value the value of the specified variable to be set.
NPP_New - Archive of obsolete content
it is called after np_initialize and is passed the mime type, embedded or full-screen display mode, and, for embedded plug-ins, in
formation about html embed arguments.
...this gives developers a chance to use private attributes to communicate instance-specific options or other in
formation to the plug-in.
NPP_NewStream - Archive of obsolete content
for more in
formation about each of these values, see directions in this section.
...this mode allows the plug-in full random access to the data using plat
form-specific file operations.
NPRegion - Archive of obsolete content
« gecko plugin api reference « browser side plug-in api summary represents a plat
form-defined region of a page.
...for in
formation about the region type definition used by your plat
form, see your plat
form documentation.
NP_GetValue - Archive of obsolete content
« gecko plugin api reference « plug-in side plug-in api summary allows the browser to query the plug-in for in
formation.
... variable plug-in in
formation the call gets.
XEmbed Extension for Mozilla Plugins - Archive of obsolete content
it's recommended that you have a look at the gecko plugin api reference since this document will include in
formation that assumes that you are already familiar with the way that plugins are currently hosted as well as the apis.
...more in
formation is included on this below.
Element - Archive of obsolete content
rss well-
formed web module elements note: in the list of elements below the wfw xml namespace prefix is used (since it is a popular choice).
... a b c <wfw:comment> (rss well-
formed web module comment element) <wfw:commentrss> (rss well-
formed web module comment rss element) d e f g h i j k l m n o p q r s t u v w x y z ...
Module - Archive of obsolete content
rss module list rss modules are micro
formats injected into an rss document through the use of xml namespaces.
..., 2005 tim bray blogchannel september 17, 2002 dave winer content content creativecommons cc december 16, 2002 dave winer dublin core dc slash slash well-
formed web wfw joe gregorio and chris sells ...
SAX - Archive of obsolete content
for more in
formation, please see sax homepage.
... set the handlers handlers are user-defined objects implementing sax handler interfaces, depending on what kind of in
formation they need to get from the parser.
.htaccess ( hypertext access ) - Archive of obsolete content
errordocument 404 /notfound.html # redirects traffic to notfound.html in case of a 404 error errordocument 500 /serverr.html # redirects traffic to serverr.html in case of a 500 internal server error for further in
formation see this external article: redirect your traffic for error handling.
... mime types : see correct mime types for further in
formation.
Common Firefox theme issues and solutions - Archive of obsolete content
@media all and (-moz-windows-compositor) { /* make transition to fullscreen mode seamlessly in firefox 10+ */ #main-window[infullscreen="true"] { -moz-appearance: none; background-color: -moz-dialog!important; } } for more in
formation about this issue please see bug 732757 and bug 732757 and this mozillazine thread.
...e-proxy-favicon { -moz-image-region: rect(0, 32px, 16px, 16px); } #identity-box:hover:active > #identity-box-inner > #page-proxy-stack > #page-proxy-favicon, #identity-box[open=true] > #identity-box-inner > #page-proxy-stack > #page-proxy-favicon { -moz-image-region: rect(0, 48px, 16px, 32px); } #page-proxy-favicon[pageproxystate="invalid"] { opacity: 0.5; } for more in
formation about identity boxes please see the identity box section of the amo editors theme review guidelines no visual clue for disabled url bars there needs to be a visual clue when url bar is disabled.
Theme changes in Firefox 4 - Archive of obsolete content
omni.jar firefox 4 achieves per
formance improvements by moving many of its internal parts from being standalone files or sets of jar files into just one jar file; this reduces the amount of i/o needed to load firefox.
... classic/1.0 chrome/communicator/ skin global classic/1.0 chrome/global/ skin mozapps classic/1.0 chrome/mozapps/ this results in the following structure : /my_theme/chrome/browser/* /my_theme/chrome/communicator/* /my_theme/chrome/global/* /my_theme/chrome/mozapps/* /my_theme/chrome.manifest /my_theme/icon.png /my_theme/install.rdf /my_theme/preview.png note: for more in
formation (and how to package into a jar) consult creating a skin for firefox which still mostly applies.
Scratchpad - Archive of obsolete content
code completion scratchpad integrates the tern code analysis engine, and uses that to provide autocomplete suggestions and popups containing in
formation on the current symbol.
...you'll see the autocomplete box, as shown below: the icon next to each suggestion indicates the type, and the currently highlighted suggestion gets a popup with more in
formation.
Using Web Standards in your Web Pages - Archive of obsolete content
the problem lies with designers and developers chained to the browser-quirk-oriented markup of the 1990s-often because they don't realize it is possible to support current standards while accommodating old browsers." -web standards project this article provides an overview of the process for upgrading the content of your web pages to con
form to the world wide web consortium (w3c) web standards.
... contents benefits of using web standards making your page using web standards - how to using the w3c dom developing cross browser and cross plat
form pages using xmlhttprequest summary of changes references original document in
formation author(s): mike cowperthwaite, marcio galli, jim ley, ian oeschger, simon paquet, gérard talbot last updated date: may 29, 2008 copyright in
formation: portions of this content are © 1998–2008 by individual mozilla.org contributors; content available under a creative commons license | details.
-ms-scroll-chaining - Archive of obsolete content
formal syntax chained | none examples the following example illustrates the -ms-scroll-chaining property in use.
...for more in
formation, see html scrolling, panning and zooming sample or internet explorer 10 scrolling, panning, and zooming with touch.
-ms-wrap-flow - Archive of obsolete content
formal syntax auto | both | start | end | maximum | clear specifications not part of any specification.
...for more in
formation about the impact of an exclusion element on content flow, see the terminology section of the css exclusions module level 1 specification.
-ms-wrap-through - Archive of obsolete content
formal syntax wrap | none specifications not part of any specification.
...for more in
formation about exclusion elements' impact on content flow, see the terminology section of the css exclusions module level 1 specification.
E4X for templating - Archive of obsolete content
createbundle('chrome://myeext/locale/myext.properties'); if (args){ args = array.prototype.slice.call(arguments, 1); return strs.
formatstringfromname(msg,args,args.length); } return strs.getstringfromname(msg); } for example, <toolbarbutton label={$s('mytoolbar.label')}/> conditionals function _if (cond, h, _else) { if (cond && cond != undefined) { // we need undefined condition for e4x return h(cond); } else if (_else) { return _else(cond); } return ''; // empty string allows condi...
...although a big advantage of e4x is being able to separate presentation from business logic, and the above-mentioned technique may fly in the face of this, if
formatted well, it can also allow inline shaping of xml somewhat akin to the w3c standard xquery language, allowing the scripting to mix in context with the surrounding declarative xml: var a = <a><b/><c/><d/></a>; var b = <bar>{function () { var content = <></>; for each (var el in a) { el.@att = 'val'; content += el; } return content; }()}</bar>; giving: <bar> <b a...
E4X - Archive of obsolete content
it does this by providing access to the xml document in a
form that feels natural for ecmascript programmers.
...to fully enable e4x, the <script> element needs to have the mime type "text/javascript;e4x=1" (i.e., have an attribute of the
form type="text/javascript;e4x=1").
Date.getVarDate() - Archive of obsolete content
remarks the getvardate() method is used when javascript code interacts with com objects, activex objects, or other objects that accept and return date values in vt_date
format.
...the actual
format of the returned value depends on regional settings.
Debug.msUpdateAsyncCallbackRelation - Archive of obsolete content
the possible values for relationtype include: debug.ms_async_callback_status_assign_delegate debug.ms_async_callback_status_join debug.ms_async_callback_status_chooseany debug.ms_async_callback_status_cancel debug.ms_async_callback_status_error for more in
formation, see debug constants.
... note: some debugging tools do not display the in
formation sent to the debugger by this function.
New in JavaScript 1.1 - Archive of obsolete content
math.random() now works on every plat
form.
... isnan() now works on every plat
form (not only unix anymore) parsefloat() and parseint() now return nan on all plat
forms, if the first character of the specified string cannot be converted to a number; in previous releases, it returned nan on solaris and irix and zero on all other plat
forms.
Object.prototype.__noSuchMethod__ - Archive of obsolete content
syntax obj.__nosuchmethod__ = fun parameters fun a function that takes the
form function (id, args) { .
... examples simple test of __nosuchmethod__ var o = { __nosuchmethod__: function(id, args) { console.log(id, '(' + args.join(', ') + ')'); } }; o.foo(1, 2, 3); o.bar(4, 5); o.baz(); // output // foo (1, 2, 3) // bar (4, 5) // baz () using __nosuchmethod__ to simulate multiple inheritance an example of code that implements a primitive
form of multiple inheritance is shown below.
JSException - Archive of obsolete content
constructor summary the netscape.javascript.jsexception class has the following constructors: jsexception deprecated constructors optionally let you specify a detail message and other in
formation.
... backward compatibility javascript 1.1 through 1.3 jsexception had three public constructors which optionally took a string argument, specifying the detail message or other in
formation for the exception.
Examples - Archive of obsolete content
} </script> </head> <body> <h1>problem 1 - < in xhtml</h1> <p> this document is not well
formed due to the use of a raw <.
...org/1999/xhtml" lang="en-us" xml:lang="en-us"> <head> <title>problem 3 - comments in xml</title> <meta http-equiv="content-type" content="application/xhtml+xml; charset=utf-8" /> <script type="text/javascript"> var i; var sum = 0; for (i = 10; i > 0; --i) { sum += i; } </script> </head> <body> <h1>problem 3 - comments in xhtml</h1> <p> this document is not well
formed xhtml due to the double dash contained in the comment.
Server-Side JavaScript - Archive of obsolete content
today with computing cycles having increased more than 10-fold and mozilla's work on rhino (javascript interpreter in java) and spidermonkey (javascript interpreter in c) and javascript itself, we have very solid foundations for javascript to be extraordinarily useful and applicable on the server-side again -- with per
formance in the same range as popular server-side environments like php and ruby on rails.
...server-side javascript is another way in which, as this article quotes eich, "mozilla wants to 'get people thinking about javascript as a more general-purpose language' and show them that 'it really is a plat
form for writing full applications.'" many vendors today are embedding mozilla rhino or mozilla spidermonkey into web server environments.
Standards-Compliant Authoring Tools - Archive of obsolete content
html-kit is a full-featured, low priced editor designed to help html, xhtml and xml authors to edit,
format, lookup help, validate, preview and publish web pages.
... original document in
formation last updated date: january 30th, 2003 copyright © 2001-2003 netscape.
Community - Archive of obsolete content
if you know of useful mailing lists, newsgroups, forums, or other communities related to x
forms, please link to them here.
... mailing list newsgroup rss feed irc channel w3c
forms mailinglist x
forms development blog ...
Issues Arising From Arbitrary-Element hover - Archive of obsolete content
thus, a:hover should always be used instead of just :hover, and a:link:hover (and a:visited:hover) are preferred to the simpler a:hover related links the dynamic pseudo-classes: :hover, :active, and :focus :hover pseudo-class (msdn) original document in
formation author(s): eric a.
... meyer, netscape communications last updated date: published 07 mar 2003; revised 21 mar 2003 copyright in
formation: copyright © 2001-2003 netscape.
Popup Window Controls - Archive of obsolete content
replacements for popup windows if your popup was created during the time the web page was loading, you may consider using document.write() to emit appropriate html which will contain the same in
formation as the popup window.
... original document in
formation author(s): bob clary last updated date: december 5th, 2002 copyright © 2001-2003 netscape.
XQuery - Archive of obsolete content
xquseme is a working proof-of-concept (so far tested on windows and linux with java installed; mac does not work) extension which allows one to per
form xqueries on external urls, the currently loaded webpage (even if originally from poorly
formed html), and/or xml (including well-
formed xhtml) documents stored locally.
... the extension now includes and interfaces with the open-source version of saxonica's saxon b (though this extension currently only per
forms the xqueries).
Common causes of memory leaks in extensions - Extensions
components.utils.unload("chrome://myaddon/content/mymodule.jsm"); } note: modules not belonging to your add-on — such as services.jsm — should not be unloaded by your add-on, as this might cause errors and/or per
formance regressions and will actually increase the memory usage.
... other in
formation also see using xpcom in javascript without leaking (though that page could use some updating).
Using the DOM File API in chrome code - Extensions
in bootstrap scope, this must be imported in like so: cu.importglobalproperties( [ "file" ] ) accessing a file by hard-coded pathname to reference a file by its path, you can simply use a string literal: var file = file.createfromfilename("path/to/some/file"); cross plat
form note: however using hard-coded paths raises cross plat
form issues since it uses a plat
form-dependent path separator (here "/").
... in the xul/mozilla plat
form there isn't sadly an equivalent to java file.pathseparator (the system-dependent path-separator character).
bootstrap.js - Extensions
for more in
formation, see bootstrapped extensions.
... the example below contains the required methods in vsdoc
format.
Building up a basic demo with Three.js - Game development
html> <html> <head> <meta charset="utf-8"> <title>mdn games: three.js demo</title> <style> body { margin: 0; padding: 0; } canvas { width: 100%; height: 100%; } </style> </head> <body> <script src="three.min.js"></script> <script> var width = window.innerwidth; var height = window.innerheight; /* all our javascript code goes here */ </script> </body> </html> it contains some basic in
formation like the document <title>, and some css to set the width and height of the <canvas> element, that three.js will insert on the page to 100% to fill the entire available viewport space.
...to initialize it, we have to set its field of view and aspect ratio: the
former is used to set how much is seen, and the latter is important for the objects on the screen to have the right proportions when rendered, and not look stretched.
WebRTC data channels - Game development
in the context of a game, this lets players send data to each other, whether text chat or game status in
formation.
... original document in
formation author(s): alan kligman source article: webrtc data channels for great multiplayer other contributors: robert nyman copyright in
formation: alan kligman, 2013 ...
Asynchronous - MDN Web Docs Glossary: Definitions of Web-related terms
when software communicates asynchronously, a program may make a request for in
formation from another piece of software (such as a server), and continue to do other things while waiting for a reply.
... software design asynchronous software design expands upon the concept by building code that allows a program to ask that a task be per
formed alongside the original task (or tasks), without stopping to wait for the task to complete.
Attribute - MDN Web Docs Glossary: Definitions of Web-related terms
an attribute always has the
form name="value" (the attribute's identifier followed by its associated value).
... <input required> <!-- is the same as… --> <input required=""> <!-- or --> <input required="required"> learn more technical reference html attribute reference in
formation about html's global attributes ...
Ciphertext - MDN Web Docs Glossary: Definitions of Web-related terms
in cryptography, a ciphertext is a scrambled message that conveys in
formation but is not legible unless decrypted with the right cipher and the right secret (usually a key), reproducing the original cleartext.
... a ciphertext's security, and therefore the secrecy of the contained in
formation, depends on using a secure cipher and keeping the key secret.
Client hints - MDN Web Docs Glossary: Definitions of Web-related terms
basically, with the client hints header, the developer or application can tell the browser to advertise in
formation about itself to the server, such as the device pixel ratio, the viewport width, and the display width.
... the client can then give the server in
formation about the client's environment, and the server can determine which resources to send based on that in
formation.
Developer Tools - MDN Web Docs Glossary: Definitions of Web-related terms
they let users inspect and debug the page's html, css, and javascript, allow to inspect the network traffic it causes, make it possible to measure it's per
formance, and much more.
... learn more general knowledge web development tools on wikipedia technical reference firefox developer tools on mdn firebug (
former developer tool for firefox) chrome devtools on chrome.com safari web inspector on apple.com edge dev tools on microsoft.com ...
First interactive - MDN Web Docs Glossary: Definitions of Web-related terms
first interactive, also known as first cpu idle, is a non-standard web per
formance metric that measures when the user's window is quiet enough to handle user input, or what is termed as minimally interactive.
... more in
formation first interactive is a variation of time to interactive, which is split into first interactive and consistently interactive.
ITU - MDN Web Docs Glossary: Definitions of Web-related terms
from defining rules for ensuring transmissions get to where they need to go to and creating the "sos" alert signal used in morse code, the itu has long played a key role in how we use technology to exchange in
formation and ideas.
... in the internet age, the itu's role of establishing standards for video and audio data
formats used for streaming, teleconferencing, and other purposes.
Java - MDN Web Docs Glossary: Definitions of Web-related terms
programs are compiled only once ahead of time into a proprietary byte code and package
format that runs inside the java virtual machine (jvm).
... the jvm is available across many plat
forms, which allows java programs to run almost everywhere without the need to be compiled or packaged again.
JavaScript - MDN Web Docs Glossary: Definitions of Web-related terms
javascript is one of the world's most commonly-used languages, owing to the recent growth and per
formance improvement of apis available in browsers.
... recently, javascript's popularity has expanded even further through the successful node.js plat
form—the most popular cross-plat
form javascript runtime environment outside the browser.
Localization - MDN Web Docs Glossary: Definitions of Web-related terms
pe, miles in u.s.) text direction (e.g., european languages are left-to-right, arabic right-to-left) capitalization in latin script (e.g., english uses capitals for weekdays, spanish uses lowercase) adaptation of idioms (e.g., "raining cats and dogs" makes no sense when translated literally) use of register (e.g., in japanese respectful speech differs exceptionally from casual speech) number
format (e.g., 10 000,00 in germany vs.
... 10,000.00 in the u.s.) date
format currency cultural references paper size color psychology compliance with local laws local holidays personal names learn more general knowledge localization at mozilla on mdn localization on wikipedia ...
MIME type - MDN Web Docs Glossary: Definitions of Web-related terms
a mime type (now properly called "media type", but also sometimes "content type") is a string sent along with a file indicating the type of the file (describing the content
format, for example, a sound file might be labeled audio/ogg, or an image file image/png).
... learn more general knowledge internet media type on wikipedia technical reference list of mime types properly configuring server mime types details in
formation about the usage of mime types in a web context.
Node.js - MDN Web Docs Glossary: Definitions of Web-related terms
node.js is a cross-plat
form javascript runtime environment that allows developers to build server-side and network applications with javascript.
... learn more general knowledge node.js on wikipedia node.js website technical in
formation api reference documentation tutorials ...
Normative - MDN Web Docs Glossary: Definitions of Web-related terms
specifications might also contain sections that are marked as non-normative or in
formative, which means those are provided there for the purpose of helping the reader understand the specifications better or to showcase an example or best practice, which need not be followed as a rule.
... learn more description of normative and in
formative content in whatwg wiki ...
Plaintext - MDN Web Docs Glossary: Definitions of Web-related terms
plaintext refers to in
formation that is being used as an input to an encryption algorithm, or to ciphertext that has been decrypted.
... it is frequently used interchangeably with the term cleartext, which more loosely refers to any in
formation, such as a text document, image, etc., that has not been encrypted and can be read by a human or computer without additional processing.
RAIL - MDN Web Docs Glossary: Definitions of Web-related terms
rail, an acronym for response, animation, idle, and load, is a per
formance model originated by the google chrome team in 2015, focused on user experience and per
formance within the browser.
... the per
formance mantra of rail is "focus on the user; the end goal isn't to make your site per
form fast on any specific device, it's to make users happy." there are 4 stages of interaction: page load, idle, response to input, and scrolling and animation.
RDF - MDN Web Docs Glossary: Definitions of Web-related terms
rdf (resource description framework) is a language developed by w3c for representing in
formation on the world wide web, such as webpages.
... rdf provides a standard way of encoding resource in
formation so that it can be exchanged in a fully automated way between applications.
RSS - MDN Web Docs Glossary: Definitions of Web-related terms
rss (really simple syndication) refers to several xml document
formats designed for publishing site updates.
... when you subscribe to a website's rss feed, the website sends in
formation and updates to your rss reader in an rss document called a feed, so you don't need to check all your favorite websites manually.
Request header - MDN Web Docs Glossary: Definitions of Web-related terms
request headers, like accept, accept-*, or if-* allow to per
form conditional requests; others like cookie, user-agent, or referer precise the context so that the server can tailor the answer.
...-encoding: gzip, deflate, br referer: https://developer.mozilla.org/testpage.html connection: keep-alive upgrade-insecure-requests: 1 if-modified-since: mon, 18 jul 2016 02:36:04 gmt if-none-match: "c561c68d0ba92bbeb8b0fff2a9199f722e3a621a" cache-control: max-age=0 strictly speaking, the content-length header in this example is not a request header like the others, but an entity header: post /my
form.html http/1.1 host: developer.mozilla.org user-agent: mozilla/5.0 (macintosh; intel mac os x 10.9; rv:50.0) gecko/20100101 firefox/50.0 content-length: 128 learn more technical knowledge list of all http headers ...
Signature (functions) - MDN Web Docs Glossary: Definitions of Web-related terms
a signature can include: parameters and their types a return value and type exceptions that might be thrown or passed back in
formation about the availability of the method in an object-oriented program (such as the keywords public, static, or prototype).
...a signature in javascript can still give you some in
formation about the method: myobject.prototype.myfunction(value) the method is installed on an object called myobject.
Symmetric-key cryptography - MDN Web Docs Glossary: Definitions of Web-related terms
this is usually contrasted with public-key cryptography, in which keys are generated in pairs and the trans
formation made by one key can only be reversed using the other key.
... symmetric-key algorithms should be secure when used properly and are highly efficient, so they can be used to encrypt large amounts of data without having a negative effect on per
formance.
Whitespace - MDN Web Docs Glossary: Definitions of Web-related terms
in the
form of text, they are treated as normal space characters and sequential whitespaces are collapsed as a single space in many cases (this behavior can be changed by the white-space css property.
... in javascript ecmascript® 2015 language specification specifies several unicode codepoints as white space: u+0009 character tabulation <tab>, u+000b line tabulation <vt>, u+000c
form feed <ff>, u+0020 space <sp>, u+00a0 no-break space <nbsp>, u+feff zero width no-break space <zwnbsp> and other category “zs” any other unicode “separator, space” code point <usp>.
World Wide Web - MDN Web Docs Glossary: Definitions of Web-related terms
to access a web component, a client supplies a unique universal identifier, called a url (uni
form resource location) or uri (uni
form resource identifier) (
formally called universal document identifier (udi)).
... html (hypertext markup language) is the most common
format for publishing web documents.
XInclude - MDN Web Docs Glossary: Definitions of Web-related terms
var acceptlanguage = xinclude.getattribute('accept-language'); // "accept-language: "+x var xifallback = xinclude.getelementsbytagnamens('http://www.w3.org/2001/xinclude', 'fallback')[0]; // only one such child is allowed if (href === '' || href === null) { // points to same document if empty (null is equivalent to empty string) href = null; // set for uni
formity in testing below if (parse === 'xml' && xpointer === null) { alert('there must be an xpointer attribute present if "href" is empty an parse is "xml"'); return false; } } else if (href.match(/#$/, '') || href.match(/^#/, '')) { alert('fragment identifiers are disallowed in an xinclude...
...); var a = []; for(var k = 0; k < xpathresult.snapshotlength; k++) { a[k] = xpathresult.snapshotitem(k); } responsenodes = a; } else { // otherwise, the response must be a single well-
formed document response responsenodes = [response.documentelement]; // put in array so can be treated the same way as the above } // prepend any node(s) (as xml) then remove xinclude for (j=0; j < responsenodes.length ; j++) { xincludeparent.insertbefore(...
XSLT - MDN Web Docs Glossary: Definitions of Web-related terms
extensible stylesheet language trans
formations (xslt) is a declarative language used to convert xml documents into other xml documents, html, pdf, plain text, and so on.
... xslt has its own processor that accepts xml input, or any
format convertible to an xquery and xpath data model.
jQuery - MDN Web Docs Glossary: Definitions of Web-related terms
jquery uses a
format, $(selector).action() to assign an element(s) to an event.
...ries out the same function as the following code: window.onload = function() { alert("hello world!"); document.getelementbyid("blackbox").style.display = "none"; }; or: window.addeventlistener("load", () => { alert("hello world!"); document.getelementbyid("blackbox").style.display = "none"; }); learn more general knowledge jquery on wikipedia jquery official website technical in
formation offical api reference documentation ...
non-normative - MDN Web Docs Glossary: Definitions of Web-related terms
software specifications often contains in
formation marked as non-normative or in
formative, which means that those are provided there for the purpose of helping the readers to understand the specification better or to show an example or a best practice, and not needed to be followed as a rule.
... learn more description of normative and in
formative content in whatwg wiki ...
Time to first byte - MDN Web Docs Glossary: Definitions of Web-related terms
time to first byte (ttfb) refers to the time between the browser requesting a page and when it receives the first byte of in
formation from the server.
... ttfb is the time it takes between the start of the request and the start of the response, in milliseconds: ttfb = responsestart - requeststart see also: a typical http session per
formanceresourcetiming per
formancetiming ...
Assessment: Accessibility troubleshooting - Learn web development
the
forms the <input> element in the search
form at the top could do with a label, but we don't want to add a visible text label that would potentially spoil the design and isn't really needed by sighted users.
... the two <input> elements in the comment
form have visible text labels, but they are not unambiguously associated with their labels — how do you achieve this?
Accessibility - Learn web development
we have put together a course that includes all the essential in
formation you need to work towards your goal.
... mobile accessibility with web access on mobile devices being so popular, and popular plat
forms such as ios and android having fully-fledged accessibility tools, it is important to consider the accessibility of your web content on these plat
forms.
Flexbox - Learn web development
we have covered a lot in this article, but can you remember the most important in
formation?
... you can find some further tests to verify that you've retained this in
formation before you move on — see test your skills: flexbox.
Grids - Learn web development
you've reached the end of this article, but can you remember the most important in
formation?
... you can find some further tests to verify that you've retained this in
formation before you move on — see test your skills: grids.
Multiple-column layout - Learn web development
you've reached the end of this article, but can you remember the most important in
formation?
... you can find some further tests to verify that you've retained this in
formation before you move on — see test your skills: multiple-column layout.
Getting started with CSS - Learn web development
prerequisites: basic computer literacy, basic software installed, basic knowledge of working with files, and html basics (study introduction to html.) objective: to understand the basics of linking a css document to an html file, and be able to do simple text
formatting with css.
...to select only an <em> that is nested inside an <li> element i can use a selector called the descendant combinator, which simply takes the
form of a space between two other selectors.
CSS first steps - Learn web development
we have put together a course that includes all the essential in
formation you need to work towards your goal.
... using your new knowledge with the things you have learned in the last few lessons you should find that you can
format simple text documents using css, to add your own style to them.
How much does it cost to do something on the Web? - Learn web development
editors can all export finished projects to standard file
formats, but each editor saves ongoing projects in its own specialized
format.
... if you want to install an (s)ftp client, there are several reliable and free options: for example, filezilla for all plat
forms, winscp for windows, cyberduck for mac or windows, and more.
What are hyperlinks? - Learn web development
back in 1989, tim berners-lee, the web's inventor, spoke of the three pillars on which the web stands: url, an address system that keeps track of web documents http, a transfer protocol to find documents when given their urls html, a document
format allowing for embedded hyperlinks as you can see in the three pillars, everything on the web revolves around documents and how to access them.
...use external links to provide in
formation besides the content available through your webpage.
Common questions - Learn web development
what tools are available to debug and improve website per
formance?
... this set of articles shows you how to use the developer tools in firefox to debug and improve per
formance of your website, using the tools to check memory usage, the javascript call tree, the number of dom nodes being rendered, and more.
Test your skills: Styling basics - Learn web development
this aim of this skill test is to assess whether you've understood our styling web
forms article.
... styling basics 1 our basic
form styling assessment is fairly free-
form, and you have a lot of flexibility over what you end up doing here.
Example - Learn web development
this is the example code for the article your first html
form.
... a simple
form html content <
form action="/my-handling-
form-page" method="post"> <div> <label for="name">name:</label> <input type="text" id="name" name="user_name"> </div> <div> <label for="mail">e-mail:</label> <input type="email" id="mail" name="user_email"> </div> <div> <label for="msg">message:</label> <textarea id="msg" name="user_message"></textarea> </div> <div class="button"> <button type="submit">send your message</button> </div> </
form> css content
form { /* just to center the
form on the page */ margin: 0 auto; width: 400px; /* to see the limits of the
form */ padding: 1em; border: 1px solid #ccc; border-radius: 1em; } div + div { margin-top: 1em; } label { /* to make sure that all label have the same size an...
CSS basics - Learn web development
fonts and text now that we've explored some css fundamentals, let's improve the appearance of the example by adding more rules and in
formation to the style.css file.
...you can find more in
formation about different display values on mdn's display reference page.
Installing basic software - Learn web development
you should also test how your site per
forms on mobile devices and on any old browsers your target audience may still be using (such as ie 8–10.) lynx, a text-based terminal web browser, is great for seeing how your site is experienced by visually-impaired users.
... an automation system, like webpack, grunt, or gulp to automatically per
form repetitive tasks, such as minifying code and running tests.
Publishing your website - Learn web development
google app engine is a powerful plat
form that lets you build and run applications on google’s infrastructure — whether you need to build a multi-tiered web application from scratch or host a static website.
...for more in
formation.
Add a hitmap on top of an image - Learn web development
formerly, image maps were a popular navigation device, but it’s important to thoroughly consider their per
formance and accessibility ramifications.
...(a default <area> occupies the entire image, minus any other hotspots you’ve defined.) the shape you choose determines the coordinate in
formation you’ll need to provide in coords.
Structuring a page of content - Learn web development
a footer containing copyright in
formation and credits.
...metadata in html html text fundamentals creating hyperlinks advanced text
formatting document and website structure debugging html marking up a letter structuring a page of content ...
Test your skills: Links - Learn web development
links 1 in this task we want you to help fill in the links on our whales in
formation page: the first link should be linked to a page called whales.html, which is in the same directory as the current page.
... we'd also like you to give it a tooltip when moused over that tells the user that the page includes in
formation on blue whales and sperm whales.
HTML Tables - Learn web development
coupled with a little css for styling, html makes it easy to display tables of in
formation on the web such as your school lesson plan, the timetable at your local swimming pool, or statistics about your favorite dinosaurs or football team.
... we have put together a course that includes all the essential in
formation you need to work towards your goal.
Asynchronous JavaScript - Learn web development
we have put together a course that includes all the essential in
formation you need to work towards your goal.
...the
former allows standard functions to implicitly behave asynchronously with promises, whereas the latter can be used inside async functions to wait for promises before the function continues.
Build your own function - Learn web development
you've reached the end of this article, but can you remember the most important in
formation?
... you can find some further tests to verify that you've retained this in
formation before you move on — see test your skills: functions.
Silly story generator - Learn web development
what you need to do is as follows: look up the
formulae for converting pounds to stone, and fahrenheit to centigrade.
...troubleshooting javascript storing the in
formation you need — variables basic math in javascript — numbers and operators handling text — strings in javascript useful string methods arrays assessment: silly story generator ...
Test your skills: Math - Learn web development
after multiplying the two results together and
formatting the result to 2 decimal places, the final result should be 10.42.
... write a line of code that takes result and
formats it to 2 decimal places, storing the result of this in a variable called finalresult.
What went wrong? Troubleshooting JavaScript - Learn web development
you should see an error message along the following lines: this is a pretty easy error to track down, and the browser gives you several useful bits of in
formation to help you out (the screenshot above is from firefox, but other browsers provide similar in
formation).
... syntaxerror: missing : after property id this error usually relates to an incorrectly
formed javascript object, but in this case we managed to get it by changing function checkguess() { to function checkguess( { this has caused the browser to think that we are trying to pass the contents of the function into the function as an argument.
JavaScript First Steps - Learn web development
we have put together a course that includes all the essential in
formation you need to work towards your goal.
... storing the in
formation you need — variables after reading the last couple of articles you should now know what javascript is, what it can do for you, how you use it alongside other web technologies, and what its main features look like from a high level.
Introducing JavaScript objects - Learn web development
we have put together a course that includes all the essential in
formation you need to work towards your goal.
... working with json data javascript object notation (json) is a standard text-based
format for representing structured data based on javascript object syntax, which is commonly used for representing and transmitting data on web sites (i.e.
JavaScript — Dynamic client-side scripting - Learn web development
every time a web page does more than just sit there and display static in
formation for you to look at—displaying timely content updates, interactive maps, animated 2d/3d graphics, scrolling video jukeboxes, or more—you can bet that javascript is probably involved.
... we have put together a course that includes all the essential in
formation you need to work towards your goal.
Routing in Ember - Learn web development
for todomvc, the capabilities of model aren't that important to us; you can find more in
formation in the ember model guide if you want to dig deeper.
... ember getting started with ember ember app structure and componentization ember interactivity: events, classes and state ember interactivity: footer functionality, conditional rendering routing in ember ember resources and troubleshooting vue getting started with vue creating our first vue component rendering a list of vue components adding a new todo
form: vue events, methods, and models styling vue components with css using vue computed properties vue conditional rendering: editing existing todos focus management with vue refs vue resources svelte getting started with svelte starting our svelte todo list app dynamic behavior in svelte: working with variables and props componentizing our svelte app advanced s...
Accessibility in React - Learn web development
the <todo /> component will switch templates, as we designed, and you'll see a
form that lets us edit the name of the task.
... ember getting started with ember ember app structure and componentization ember interactivity: events, classes and state ember interactivity: footer functionality, conditional rendering routing in ember ember resources and troubleshooting vue getting started with vue creating our first vue component rendering a list of vue components adding a new todo
form: vue events, methods, and models styling vue components with css using vue computed properties vue conditional rendering: editing existing todos focus management with vue refs vue resources svelte getting started with svelte starting our svelte todo list app dynamic behavior in svelte: working with variables and props componentizing our svelte app advanced s...
Creating our first Vue component - Learn web development
listing props as an object allows you to specify default values, mark props as required, per
form basic object typing (specifically around javascript primitive types), and per
form simple prop validation.
... ember getting started with ember ember app structure and componentization ember interactivity: events, classes and state ember interactivity: footer functionality, conditional rendering routing in ember ember resources and troubleshooting vue getting started with vue creating our first vue component rendering a list of vue components adding a new todo
form: vue events, methods, and models styling vue components with css using vue computed properties vue conditional rendering: editing existing todos focus management with vue refs vue resources svelte getting started with svelte starting our svelte todo list app dynamic behavior in svelte: working with variables and props componentizing our svelte app advanced s...
Tools and testing - Learn web development
working out what tools you should be using can be a difficult process, so we have written this set of articles to in
form you of what types of tool are available, what they can do for you, and how to make use of the current industry favourites.
... we have put together a course that includes all the essential in
formation you need to work towards your goal.
Embedding API for Accessibility
in part, being accessible means supporting a built-in accessibility apis for a plat
form, such as microsoft active accessibility or atk for linux and unix desktops.
...for the most part, an automatic reframe is per
formed when one of these prefs is changed.
Add-ons
this new, high-per
formance browser for android has been rebuilt from the ground up using geckoview, mozilla’s mobile browser engine.
... for more in
formation about transition support, please visit our wiki page.
Adding a new event
textevents.h this header file should be used for defining input events from keyboard or ime and also other text edit related events like querying focused content in
formation.
...if all in
formation of the event is stored by its internal event, c++ event handlers can access them with following code: ns_imethodimp aneventlistener::handleevent(nsidomevent* aevent) { internalfooevent* internalevent = aevent->getinternalnsevent()->asfooevent(); if (ns_warn_if(!internalevent)) { return ns_error_unexpected; } dosomethingwith(internalevent->mbar); aevent->preventdefault(); ...
Cookies Preferences in Mozilla
network.cookie.maxnumber default value: 1000 configures the maximum amount of cookies to be stored valid range is from 0-65535, rfc 2109 and 2965 require this to be at least 300 network.cookie.maxperhost default value: 50 configures the maximum amount of cookies to be stored per host valid range is from 0-65535, rfc 2109 and 2965 require this to be at least 20 network.cookie.disablecookie
formailnews default value: true true = do not accept any cookies from within mailnews or from mail-style uris false = allow cookies in these situations this preference is applicable to all versions of seamonkey.
...(the old prefs are network.cookie.lifetime.enabled, network.cookie.lifetime.behavior, and network.cookie.warnaboutcookies.) true = prefs have been migrated false = migrate prefs on next startup original document in
formation author(s): mike connor last updated date: may 22, 2004 copyright in
formation: portions of this content are © 1998–2007 by individual mozilla.org contributors; content available under a creative commons license | details.
Creating a Login Manager storage module
this can be useful if you want to integrate a gecko application's password management with an existing password management system, or use your own password storage
format or database.
... this.stub(arguments); }, getalldisabledhosts: function slms_getalldisabledhosts(count) { this.stub(arguments); }, getloginsavingenabled: function slms_getloginsavingenabled(hostname) { this.stub(arguments); }, setloginsavingenabled: function slms_setloginsavingenabled(hostname, enabled) { this.stub(arguments); }, findlogins: function slms_findlogins(count, hostname,
formsubmiturl, httprealm) { this.stub(arguments); }, countlogins: function slms_countlogins(ahostname, a
formsubmiturl, ahttprealm) { this.stub(arguments); } }; function nsgetmodule(compmgr, filespec) xpcomutils.generatemodule([sampleloginmanagerstorage]); sample c++ implementation bug 309807 contains a complete example.
Creating reftest-based unit tests
keep in mind new tests should fit a 600x600 window so we can test on mobile plat
forms easier.
...more in
formation on this file can be found in the readme.txt referenced below, which was written by the creator of the reftest tool.
Capturing a minidump
sometimes a more complete
form of minidump is needed to see additional details about a crash, in which case manual capture of a minidump is desired.
...they are therefore much more likely to contain private in
formation, if there is any in the browser.
Debugging JavaScript
log.jsm (
formerly log4moz) this is a partial implementation of the log4* interfaces (for example, see log4j or log4net).
...like this: function getstackdump() { var lines = []; for (var frame = components.stack; frame; frame = frame.caller) { lines.push(frame.filename + " (" + frame.linenumber + ")"); } return lines.join("\n"); } see also debugging mozilla with gdb setting up an extension development environment (particularly development preferences and development extensions) original document in
formation author(s): ben bucksch created date: september 12, 2005, last updated date: november 10, 2009 copyright in
formation: portions of this content are © 1998–2007 by individual mozilla.org contributors; content available under a creative commons license | details.
Debugging OpenGL
if you start up firefox with this variable defined, the following behavior changes occur: each time you issue an opengl call, a check is per
formed to ensure that the gl context is current, using a thread-local static variable to keep track of this.
... note: you can download debug builds from mozilla taskcluster — click an appropriate plat
form's debug build on the left, e.g.
OS TARGET
os_target is typically the output of the 'uname -s' command on the target plat
form.
... the following list is not complete as any plat
form could have its own os_target.
Old Thunderbird build
for additional in
formation, see the build documentation.
... searched the bug database for issues relating to your problem (e.g., plat
form-specific issues).
Simple Instantbird build
for additional, more detailed in
formation, see the build documentation.
... have you searched the bug database for issues relating to your problem (e.g., plat
form-specific issues)?
Simple Sunbird build
for complete in
formation, see the build documentation.
...see this section for in
formation on how to easily integrate lightning into a nightly version of thunderbird.
Windows SDK versions
older versions some of the older version are no longer supported, further in
formation is available at obsolete build caveats and tips [en-us] under the windows sdk article.
...older sdks these are no longer supported, further in
formation is available at obsolete build caveats and tips [en-us] under the windows sdk article.
Callgraph
this can be used for per
forming static analysis based on the relationship between functions and methods.
...the callgraph project uses gcc and treehydra to generate in
formation about function and method calls at compile time, and aggregates it into a sqlite database.
Creating Custom Events That Can Pass Data
for example, if you want firefox to per
form an action whenever something happens (i.e., something other than the standard mouse/keyboard events) and, depending on the data passed along with this event, you want firefox to react differently.
...if you peruse nsdomclassinfoclasses.h you'll see of list of macros of the
form domci_class(foo).
ESLint
no-undef (eslint) if you don't understand a rule, you can look it up on eslint.org for more in
formation about it.
... more in
formation: outline details of the rules rule source code common issues and how to solve them my editor says that "mozilla/whatever" is unknown run ./mach eslint --setup restart your editor if that doesn't work, check that you have your editor pointing to the correct node_modules folder.
Multiple Firefox profiles
from profile manager inside firefox if you already have firefox instance running, you can open another profile from the integrated profile manager on any plat
form: type about:profiles into the browser url search bar.
... confirm that you wish to delete the profile: don't delete files removes the profile from the profile manager yet retains the profile data files on your computer in the storage folder so that your in
formation is not lost.
Storage access policy: Block cookies from trackers
we’ll keep this page updated with the newest in
formation as we strengthen our protections.
...specifically, we check the exact hostname of the resource against the list, as well as the last four hostnames
formed by starting with the last five components and successively removing the leading component.
Tracking Protection
click the ⓘ symbol in the address bar to view in
formation about the currently loaded page.
...ttp://www.example.com', event);"> visit example.com </a> <script> function tracklink(url,event) { event.preventdefault(); if (window.ga && ga.loaded) { ga('send', 'event', 'outbound', 'click', url, { 'transport': 'beacon', 'hitcallback': function() { document.location = url; } }); } else { document.location = url; } } </script> more in
formation about this technique is available at google analytics, privacy, and event tracking.
HTMLIFrameElement.findAll()
casesensitivity a string to declare whether you want the search to be case sensitive (case-sensitive) or insensitive (case-insensitive.) example the following function is taken from our browser api demo, and executes a search when a search
form is submitted.
... search
form.addeventlistener('submit', function(e) { e.preventdefault(); browser.findall(searchbar.value, 'case-sensitive'); searchactive = true; prev.disabled = false; next.disabled = false; searchbar.blur(); }); specification not part of any specification.
HTMLIFrameElement.getScreenshot()
mimetype optional a mime type specifying the
format of the image to be returned; if not specified, the default used is image/jpeg.
... use image/png to capture the alpha channel of the rendered result by returning a png-
format image.
HTMLIFrameElement.getStructuredData()
the getstructureddata() method of the htmliframeelement interface retrieves any structured microdata (and hcard and hcalendar micro
format data) contained in the html loaded in the browser <iframe> and returns it as json.
...) { var request = browser.getstructureddata(); request.onsuccess = function() { console.log(request.result); } }); running this code in a browser api app and then loading up a page that contains microdata (such as the website of british alt-country band salter cane) will result in a json object being returned, along the lines of: { "items": [ { "type":["http://micro
formats.org/profile/hcard"], "properties":{"fn":["chris askew"], "n":[ { "properties": { "given-name":["chris"], "family-name":["askew"], ...
Browser API
htmliframeelement.getstructureddata() retrieves any structured microdata (and hcard and hcalendar micro
format data) contained in the html loaded in the browser <iframe> and returns it as json.
... mozbrowserfindchange sent when a search operation is per
formed on the browser <iframe> content (see htmliframeelement search methods.) mozbrowserfirstpaint sent when the <iframe> paints content for the first time (this doesn't include the initial paint from about:blank.) mozbrowsericonchange sent when a new icon (e.g.
-moz-window-dragging
<window>, <panel> inherited no media visual computed value as specified animation type discrete canonical order the unique non-ambiguous order defined by the
formal grammar syntax the -moz-window-dragging property is specified as one of the keyword values listed below.
... no-drag the window is not draggable
formal syntax drag | no-drag example toolbarpaletteitem { -moz-window-dragging: no-drag; } specifications this property is not part of any specification.
overflow-clip-box
initial valuepadding-boxapplies toall elementsinheritednomediavisualcomputed valueas specifiedanimation typediscretecanonical orderthe unique non-ambiguous order defined by the
formal grammar syntax values padding-box this keyword makes the clipping be related to the padding box.
...
formal syntax padding-box | content-box examples padding-box html <div class="things"> <input value="abcdefghijklmnopqrstuvwxyzÅÄÖ" class="scroll padding-box"> <div class="scroll padding-box"><span>abcdefghijklmnopqrstuvwxyzÅÄÖ</span></div> </div> css .scroll { overflow: auto; padding: 0 30px; width: 6em; border: 1px solid black; background: lime content-box; } .padding-box { overflow-clip-box: padding-box; } js function scrollsomeelements() { var elms = document.queryselectorall('.scroll'); for (i=0; i < elms.length; ++i) { elms[i].scrollleft=80; } } var elt = document.queryelementsbytagname('body')[0]; elt.addeventlistener("load", scrollsomeelements, false); result ...
Embedding the editor
it is likely that we'd use xbl to implement this type of widget, as is the plan for other
form controls.
... original document in
formation author(s): the editor team (mozilla-editor@mozilla.org) last updated date: october 30, 2000 original document: embedding the editor ...
Script security
therefore there's no need for any security checks, there are no wrappers, and there is no per
formance overhead for the common case of objects in a single window interacting with each other.
... see xray vision for much more in
formation on xrays.
Gecko's "Almost Standards" Mode
also on mdc images, tables, and mysterious gaps mozilla's doctype sniffing mozilla's quirks mode original document in
formation author(s): eric a.
... meyer, netscape communications last updated date: published 08 nov 2002 copyright in
formation: copyright © 2001-2003 netscape.
How Mozilla determines MIME Types
when loading an uri with a type that mozilla can not handle, a helper app dialog shows up, and the displayed in
formation comes from these sources: ask the os for a handler of the given <extension, mime type> pair.
... related in
formation document loading - from load start to finding a handler original document in
formation author(s): christian biesinger last updated date: march 7, 2005 copyright in
formation: copyright (c) christian biesinger ...
How to get a process dump with Windows Task Manager
(to get a process dump for thunderbird or some other product, substitute the product name where ever you see firefox in these instructions.) caution the memory dump that will be created through this process is a complete snapshot of the state of firefox when you create the file, so it contains urls of active tabs, history in
formation, and possibly even passwords depending on what you are doing when the snapshot is taken.
... run firefox, reproduce the hang start firefox and per
form whatever steps are necessary to cause firefox to hang.
How to investigate Disconnect failures
an example of such a failure disconnect failures happens when one side is closing the connection and mozmill is unable to send the in
formation over the bridge or when firefox crashes.
...we cannot investigate failures via mozmill, because we do not catch the crashes, so the crashes' in
formation is not logged; we have to go to ci machines and investigate directly.
PBackground
ipdl recap ipdl is a language used to define "protocols" — essentially
formalized versions of how two things can communicate.
... note: if you want more detailed in
formation on ipdl, start out by reading the ipdl tutorial.
Implementing QueryInterface
in general, i disapprove of macros except in cases where the macro must expand to different text in different situations, e.g., different plat
forms, debugging vs.
... original document in
formation author(s): scott collins last updated date: may 8, 2003 copyright in
formation: portions of this content are © 1998–2007 by individual mozilla.org contributors; content available under a creative commons license | details.
UpdateInfo
updateinfo objects hold in
formation about available versions of add-ons and are generated as a result of an update check per
formed by addonupdatechecker.
... targetapplications object[] in
formation about what applications the update is compatible with.
Assert.jsm
the assert.jsm javascript code module implements the commonjs unit testing specification version 1.1, which provides a basic, standardized interface for per
forming in-code logical assertions with optional, customizable error reporting.
... to use it, you first need to import the code module into your javascript scope: components.utils.import("resource://testing-common/assert.jsm"); the assert class offers methods for per
forming common logical assertions.
Widget Wrappers
widget wrappers are objects that provide in
formation about a widget.
... there are 'group' wrappers which provide in
formation about the widget across all windows, and 'single' wrappers which provide in
formation about a specific instance in a specific window.
DownloadLastDir.jsm
using the downloadlastdir object to determine or set the path into which the last download occurred: // file is an nsifile var file = downloadlastdir.file; downloadlastdir.file = file; you can also set and retrieve this in
formation on a site-by-site basis.
... when history is cleared when the user's browsing history is cleared, the value of the last download directory path is restored to the plat
form's default download directory path.
FxAccountsProfileClient.jsm
the fxaccountsprofileclient.jsm javascript module provides a way to fetch firefox accounts profile in
formation.
...methods fetchprofile() fetches firefox accounts profile in
formation.
Http.jsm
httprequest supports the following parameters: name meaning headers an array of headers postdata this can be: a string: send it as is an array of parameters: encode as
form values null/undefined: no post data.
...the elements of the array will be url-encoded and "application/x-www-
form-urlencoded; charset=utf-8" will be enforced as the content type.
NetUtil.jsm
the netutil.jsm javascript code module provides easy-to-use apis for per
forming common network related tasks.
... methods asynccopy() the asynccopy() method per
forms a simple asynchronous copy of data from a source input stream to a destination output stream.
Examples
rejection handlers provide in
formation about the exact error time and location, but the handlers may sometimes be forgotten.
... note: this warning is generated some time after the error occurred, and may provide less in
formation about the error location.
PromiseWorker.jsm
javascript files imported into the worker scope and main thread scope which allows posting to the worker and receiving in the
form of a promise.
...se]); promise_domyfuncfalse.then( function(aval) { console.log('fullfilled - promise_domyfuncfalse - ', aval); }, function(areason) { console.error('rejected - promise_domyfuncfalse - ', areason); } ).catch( function(acaught) { console.error('caught - promise_domyfuncfalse - ', acaught); } ); result running the code above will log the following in
formation to the console: "fullfilled - promise_domyfunctrue - " "you sent to promiseworker argument of: `true`" bootstrap.js line 8 "rejected - promise_domyfuncfalse - " "you passed in a non-true value for shouldresolve argument and therefore this will reject the main thread promise" bootstrap.js line 25 other examples githu...
Services.jsm
for example, to obtain a reference to the preferences service: var prefsservice = services.prefs; provided service getters service accessor service interface service name androidbridge nsiandroidbridge 1 appinfo nsixulappinfo nsixulruntime application in
formation service appshell nsiappshellservice application shell service blocklist nsiblocklistservice blocklist service cache nsicacheservice cache service cache2 nsicachestorageservice cache storage service clipboard nsiclipboard clipboard console nsiconsoleservice error console service contentprefs ...
... application startup service storage mozistorageservice storage api service strings nsistringbundleservice string bundle service sysinfo nsipropertybag2 system info service telemetry nsitelemetry telemetry service tm nsithreadmanager thread manager service urifixup nsiurifixup uri fixup service url
formatter nsiurl
formatter url
formatter service vc nsiversioncomparator version comparator service wm nsiwindowmediator window mediator service ww nsiwindowwatcher window watcher service 1 mobile only 2 windows only 3 main process only 4 child process only ...
Webapps.jsm
st, aapp, arunupdate) _createactivitiestounregister: function(amanifest, aapp, aentrypoint) _unregisteractivitiesforapps: function(aappstounregister) _unregisteractivities: function(amanifest, aapp) _processmanifestforids: function(aids, arunupdate) observe: function(asubject, atopic, adata) addmessagelistener: function(amsgnames, aapp, amm) removemessagelistener: function(amsgnames, amm)
formatmessage: function(adata) receivemessage: function(amessage) getappinfo: function getappinfo(aappid) broadcastmessage: function broadcastmessage(amsgname, acontent) registerupdatehandler: function(ahandler) unregisterupdatehandler: function(ahandler) notifyupdatehandlers: function(aapp, amanifest, azippath) _getappdir: function(aid) _writefile: function(apath, adata) dogetlist: function(...
...lpackage: function doinstallpackage(adata, amm) pushcontentaction: function(windowid) popcontentaction: function(windowid) actioncancelled: function(windowid) denyinstall: function(adata) _setupapp: function(adata, aid) _cloneapp: function(adata, anewapp, alocalemanifest, amanifest, aid, alocalid) _writemanifestfile: function(aid, aispackage, ajsonmanifest) _nextlocalid: function() _appid
formanifesturl: function(auri) makeappid: function() _saveapps: function() _readmanifests: function(adata) _ensuresufficientstorage: function(anewapp) _checkdownloadsize: function(afreebytes, anewapp) _getrequestchannel: function(afullpackagepath, aislocalfileinstall, aoldapp,) _senddownloadprogressevent: function(anewapp, aprogress) _getpackage: function(arequestchannel, aid, aoldapp, anewapp...
XPCOMUtils.jsm
function mycomponent() { // initialize the component here } class declaration declare the class prototype, using a
form similar to this.
... service: true, // optional array of applications' ids in the
form: // [ "{xxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxxxx}", ...
L10n Checks
you pass both paths to the files, e.g.: check-l10n-completeness -i file en-us.dtd my.dtd the output the output of l10n checks shows the missing and obsolete strings in a pseudo-diff
format.
...the file names will be shown in a hierarchical
form, so in the example above, your files are browser.dtd in ab-cd/browser/chrome/browser and migration.dtd in another directory level deeper.
Localizing extension descriptions
each has at least one em:locale property marking the locale that the in
formation should be used for and then all the various strings for the locale.
...the localization in
formation provided by the em:localized property can be overriden using a set of localized preferences as detailed below.
Localizing with Mercurial
the commit message should take the
form of "bug 123456 - change this thing to work better by doing something; r=reviewers" if you are to fix a bug.
...you need to follow the instructions regarding the contributor
form.
Localizing with Pontoon
info menu gives important in
formation, like the anticipated project timeline and a list of keyboard shortcuts.
...the contents of the <title> tag in websites and strings with placeables or different plural
forms.
Creating localizable web content
good: this icon is recognized as the international symbol for in
formation.
... use localized screenshots if possible screenshots are important in
formative graphics, often times explaining how to achieve something in a desktop or web application.
Fonts for Mozilla's MathML engine
fonts with appropriate unicode coverage and open font
format features are required for good math rendering.
... fonts with a math table you can actually render mathml using any font with a math table and related open font
format features.
MathML Torture Test
mn></mrow></munder><mfrac><msqrt><mrow><mn>2</mn><mi>π</mi><mi>n</mi></mrow></msqrt><mrow><mi>n</mi><mo>!</mo></mrow></mfrac><msup><mrow><mo>(</mo><mfrac><mi>n</mi><mi>e</mi></mfrac><mo>)</mo></mrow><mi>n</mi></msup></mrow><mo>=</mo><mn>1</mn></math></td> </tr> <tr> <td>30</td> <td><img src="https://udn.realityripple.com/samples/d5/2cf8356a09.png" width="194" height="58" alt="leibniz
formula for the determinant" /></td> <td><math display="block" xmlns="http://www.w3.org/1998/math/mathml"><mrow><mrow><mo lspace="0em" rspace="0em">det</mo><mo stretchy="false">(</mo><mi>a</mi><mo stretchy="false">)</mo></mrow><mo>=</mo><munder><mo>∑</mo><mrow><mi>σ</mi><mo>∊</mo><msub><mi>s</mi><mi>n</mi></msub></mrow></munder><mrow><mi>ϵ</mi><mo stretchy="false">(</mo><mi>σ</mi><mo stretc...
... addeventlistener("change", updatemathfont, false) } window.addeventlistener("load", load, false); the following test contains sample tex
formulas from knuth's tex book and equivalent mathml representations.
MathML Accessibility in Mozilla
this table below provides a list of mathml constructions and how they are read in mozilla applications for various plat
forms: windows: mathml support is provided by nvda, which actually delegates math reading to the proprietary mathplayer plugin.
...mozilla and nvda developers essentially do not have control on how mathematical
formulas are read, please contact design science for any inquiries.
Mozilla MathML Project
create mathml documents authoring mathml editors converters stylesheets original document in
formation author(s): roger b.
... sidje other contributors: frédéric wang last updated date: april 4, 2010 copyright in
formation: portions of this content are © 1999–2010 by individual mozilla.org contributors; content available under a creative commons license | details.
Mozilla Port Blocking
background on 08/15/2001, cert issued a vulnerability note vu#476267 for a "cross-protocol" scripting attack, known as the html
form protocol attack which allowed sending arbitrary data to most tcp ports.
... more in
formation nsioservice.cpp gbadportlist bug 83401 vulnerability note vu#476267 dougt@netscape.com original document in
formation author(s): doug turner last updated date: august 15, 2007 copyright in
formation: portions of this content are © 1998–2007 by individual mozilla.org contributors; content available under a creative commons license | details.
Mozilla projects on GitHub
project name description pdf.js a portable document
format (pdf) reader written entirely in javascript.
... kitsune kitsune is the plat
form that drives the mozilla support web site, sumo.
Mozilla Style System
the methods on nsistyleruleprocessor allow the front end to ask the back ends for the style data that applies to a given element or pseudo-element, in the
form of style rules.
...however, the second of these rules is the key to many of the per
formance and memory-use optimizations in the style system.
JS::PerfMeasurement
the js::perfmeasurement class, found in jsperf.h, lets you take detailed per
formance measurements of your code.
... we also can't guarantee that all plat
forms will support all event types, once we have more than one back end for this interface.
Memory Profiler
however, the in
formation exposed in this way is usually a snapshot and the history of how memory has been used goes missing.
...the profile while recording is stored in memory in a very compact
format.
Scroll-linked effects
this article discusses scroll-linked effects, their effect on per
formance, related tools, and possible mitigation techniques.
... scrolling effects explained often scrolling effects are implemented by listening for the scroll event and then updating elements on the page in some way (usually the css position or trans
form property.) you can find a sampling of such effects at css scroll api: use cases.
A brief guide to Mozilla preferences
it provides a general overview of mozilla preferences, including where preferences are stored, a file-by-file analysis of preference loading sequence, and in
formation on editing preferences.
...they are: default preference files firefox ships default preferences in several files, all in the application directory: greprefs.js - preferences shared by all applications using the mozilla plat
form services/common/services-common.js - preferences for some shared services code, this should arguably be included in some other file defaults/pref/services-sync.js - default preferences for firefox sync, also oddly misplaced browser/app/profile/channel-prefs.js - a file indicating the user's update channel.
nglayout.debug.disable_xul_cache
to improve per
formance, mozilla caches chrome xul documents the first time they load for faster loading later.
...false: cache xul documents in memory and save the cache to disk on exit to improve per
formance.
Preference reference
bout:newtab) which offers the most often visited pages for fast navigation.browser.search.context.loadinbackgroundbrowser.search.context.loadinbackground controls whether a search from the context menu with "search <search engine> for <selected text>" opening a new tab will give focus to it and load it in the foreground or keep focus on the current tab and open it in the background.browser.urlbar.
formatting.enabledthe preference browser.urlbar.
formatting.enabled controls whether the domain name including the top level domain is highlighted in the address bar by coloring it black and the other parts grey.browser.urlbar.trimurlsthe preference browser.urlbar.trimurls controls whether the protocol http and the trailing slash behind domain name (if the open page is exactly the domain name) are hidd...
...the old behavior can be restored by setting the preference mail.tabs.drawintitlebar to false.nglayout.debug.disable xul fastloadthe preference nglayout.debug.disable_xul_fastload controls whether or not xul fastload is used.nglayout.debug.disable_xul_cacheto improve per
formance, mozilla caches chrome xul documents the first time they load for faster loading later.
Preferences
these articles provide in
formation about how to use the preference system.
... a brief guide to mozilla preferences an introductory guide to where preferences are stored and other useful in
formation about the core preference system.
Research and prep
this is, therefore, meant to be a guideline for how you should be
formulating your recommendations.
... it is your l10n team's responsibility to per
form research and identify the most appropriate web services for your region and present them in your bug as your in
formed recommendations.
Productization guide
for example, we ship firefox with 6 or 7 search engine plug-ins to make users’ lives easier when they’re looking for in
formation, translation, products, multimedia, spelling and definitions, etc.
...the first page will cover per
forming research and preparing to submit productization recommendations.
Crash reporting
for more in
formation, see how to get a stacktrace for a bug report.
...there is also a custom query tool which allows users to limit searches on more precise in
formation.
MailNews
leak and bloat tests this page describes how to per
form tests that measure memory leaks and bloat for mailnews and its sub-components.
... see pages tagged mailnews for additional mailnews-specific in
formation.
Midas editor module security preferences
lity is completely removed since 2013-12-14 18:23 pst, see: bugs 38966 and 913734 note: if you've reached this page from a message box in firefox or another mozilla product, try using keyboard shortcuts for the cut, copy, and paste commands: copy: ctrl+c or ctrl+insert (command+c on mac) paste: ctrl+v or shift+insert (command+v on mac) cut: ctrl+x or shift+delete (command+x on mac) the in
formation on the rest of this page is for web developers and advanced users.
... to protect users' private in
formation, unprivileged scripts cannot invoke the cut, copy, and paste commands in midas, which is mozilla's rich text editor component.
NSPR release procedure
as the name of the shell script implies, repackage.sh merely repackages binary distributions in a different
format.
...the repackage.sh script repackages the jar files into the
form most commonly used on that plat
form.
Cached Monitors
see monitors for in
formation about uncached monitors.
...this additional flexibility comes at the cost of a small loss in per
formance.
Condition Variables
for reference in
formation on nspr locks, see locks.
...for in
formation about prmonitor, see monitors.
NSPR LOG FILE
the exact syntax is plat
form specific.
...if nspr_log_file is not in the environment, then log output is written to stdout or stderr, depending on the plat
form.
Network Addresses
to facilitate the transition to ipv6, it is recommended that clients treat all structures containing network addresses as transparent objects and use the functions documented here to manipulate the in
formation.
... pr_initializenetaddr converting between a string and a network address pr_stringtonetaddr pr_netaddrtostring converting address
formats pr_convertipv4addrtoipv6 getting host names and addresses pr_gethostbyname pr_gethostbyaddr pr_enumeratehostent pr_getaddrinfobyname pr_enumerateaddrinfo pr_getcanonnamefromaddrinfo pr_freeaddrinfo getting protocol entries pr_getprotobyname pr_getprotobynumber ...
PRExplodedTime
in addition, prexplodedtime includes a prtimeparameters structure representing the local time zone in
formation, so that the time point is non-ambiguously specified.
... tm_params: a prtimeparameters structure representing the local time zone in
formation.
PRFileInfo
file in
formation structure used with pr_getfileinfo and pr_getopenfileinfo.
... description the prfileinfo structure provides in
formation about a file, a directory, or some other kind of file system object, as specified by the type field.
PRFileInfo64
file in
formation structure used with pr_getfileinfo64 and pr_getopenfileinfo64.
... description the prfileinfo64 structure provides in
formation about a file, a directory, or some other kind of file system object, as specified by the type field.
PRIOMethods
fileinfo get in
formation about an open file.
...for in
formation about each function, see the corresponding function description in this document.
PRIntervalTime
a plat
form-dependent type that represents a monotonically increasing integer--the nspr runtime clock.
... syntax #include <prinrval.h> typedef pruint32 printervaltime; #define pr_interval_min 1000ul #define pr_interval_max 100000ul #define pr_interval_no_wait 0ul #define pr_interval_no_timeout 0xfffffffful description the units of printervaltime are plat
form-dependent.
PRNetAddr
flowinfo routing in
formation.
...(note that prnetaddr does not have the length field that is present in struct sockaddr_in on some unix plat
forms.) the macros pr_af_inet, pr_af_inet6, pr_inaddr_any, pr_inaddr_loopback are defined if prio.h is included.
PRThreadScope
in most cases, this leads to a significant per
formance benefit.
... however, on systems that require nspr to make a distinction between global and local threads, global threads are invariably required to do any
form of i/o.
PRTimeParameters
a representation of time zone in
formation.
...the prtimeparameters structure represents the local time zone in
formation in terms of the offset (in seconds) from gmt.
PR_CEnterMonitor
this reference must remain valid as long as there are monitoring operations being per
formed.
...in the
former case, the entry count is simply incremented and the function returns.
PR_EXTERN
for syntax details for each plat
form, see prtypes.h.
... warning: some plat
forms do not allow the use of the underscore character (_) as the first character of an exported symbol.
PR_GetOSError
description used for plat
form-specific code that requires the underlying os error.
...however, this in
formation is preserved, along with a plat
form neutral error code, on a per thread basis.
PR_IMPLEMENT
for syntax details for each plat
form, see prtypes.h.
... warning: some plat
forms do not allow the use of the underscore character (_) as the first character of an exported symbol.
PR_IntervalToMicroseconds
converts plat
form-dependent intervals to standard clock microseconds.
... syntax #include <prinrval.h> pruint32 pr_intervaltomicroseconds(printervaltime ticks); parameter ticks the number of plat
form-dependent intervals to convert.
PR_IntervalToMilliseconds
converts plat
form-dependent intervals to standard clock milliseconds.
... syntax #include <prinrval.h> pruint32 pr_intervaltomilliseconds(printervaltime ticks); parameter ticks the number of plat
form-dependent intervals to convert.
PR_IntervalToSeconds
converts plat
form-dependent intervals to standard clock seconds.
... syntax #include <prinrval.h> pruint32 pr_intervaltoseconds(printervaltime ticks); parameter ticks the number of plat
form-dependent intervals to convert.
PR_LOG
returns nothing description this macro
formats the specified arguments and writes the output to the log file, if logging is enabled for the specified module and level.
... for a description of
formatting and
format strings, see "
formatted printing".
PR_MkDir
caveat: the mode parameter is currently applicable only on unix plat
forms.
... it may be applicable to other plat
forms in the future.
PR_NormalizeTime
syntax #include <prtime.h> void pr_normalizetime ( prexplodedtime *time, prtimeparamfn params); parameters the function has these parameters: time a pointer to a clock/calendar time in the prexplodedtime
format.
... call this function in these situations: to normalize a time after per
forming arithmetic operations directly on the field values of the calendar time object.
PR_Open
this feature is currently only applicable on unix plat
forms.
... it is ignored by any other plat
form but it may apply to other plat
forms in the future.
PR_OpenAnonFileMap
on unix plat
forms, pr_openanonfilemap uses dirname as a directory name, without the trailing '/', to contain the anonymous file.
... on windows plat
forms, dirname is ignored.
PR_ReadDir
on windows plat
forms and the mac os, this value identifies files with the "hidden" attribute set.
... on unix plat
form, this value identifies files whose names begin with a period (".").
NSPR API Reference
ime type and constants interval functions date and time types and constants time parameter callback functions functions memory management operations memory allocation functions memory allocation macros string operations pl_strlen pl_strcpy pl_strdup pl_strfree floating point number to string conversion pr_strtod pr_dtoa pr_cnvtf long long (64-bit) integers bitmaps
formatted printing linked lists linked list types prclist linked list macros pr_init_clist pr_init_static_clist pr_append_link pr_insert_link pr_next_link pr_prev_link pr_remove_link pr_remove_and_init_link pr_insert_before pr_insert_after dynamic library linking library linking types prlibrary prstaticlinktable library linkin...
...g functions pr_setlibrarypath pr_getlibrarypath pr_getlibraryname pr_freelibraryname pr_loadlibrary pr_unloadlibrary pr_findsymbol pr_findsymbolandlibrary finding symbols defined in the main executable program plat
form notes dynamic library search path exporting symbols from the main executable program process management and interprocess communication process management types and constants prprocess prprocessattr process management functions setting the attributes of a new process creating and managing processes multiwait receive system in
formation and environment variables logging conditional compilation and execution log types and variables prlogmoduleinfo prlogmodulelevel nspr_log_modul...
Building NSS
introduction this page has detailed in
formation on how to build nss.
... because nss is a cross-plat
form library that builds on many different plat
forms and has many options, it may be complex to build.
Certificate functions
mxr 3.4 and later cert_findsmimeprofile mxr 3.2 and later cert_findsubjectkeyidextension mxr 3.7 and later cert_findusercertbyusage mxr 3.4 and later cert_findusercertsbyusage mxr 3.4 and later cert_finishcertificaterequestattributes mxr 3.10 and later cert_finishextensions mxr 3.5 and later cert_
formatname mxr 3.2 and later cert_freedistnames mxr 3.2 and later cert_freenicknames mxr 3.2 and later cert_getavatag mxr 3.2 and later cert_getcertchainfromcert mxr 3.4 and later cert_getcertemailaddress mxr 3.2 and later cert_getcertificatenames mxr 3.10 and later cert_getcertificaterequestextens...
...eralname mxr 3.10 and later cert_getprevnameconstraint mxr 3.10 and later cert_getsloptime mxr 3.2 and later cert_getsslcacerts mxr 3.2 and later cert_getstatename mxr 3.2 and later cert_getusepkixforvalidation mxr 3.12 and later cert_getvaliddnspatternsfromcert mxr 3.12 and later cert_gentime2
formattedascii mxr 3.2 and later cert_hexify mxr 3.2 and later cert_importcachain mxr 3.2 and later cert_importcerts mxr 3.2 and later cert_isrootdercert mxr 3.8 and later cert_isusercert mxr 3.6 and later cert_keyfromdercrl mxr 3.4 and later cert_makecanickname mxr 3.4 and later cer...
HTTP delegation
the http server session object is logically associated with host and port destination in
formation, in our example this is "host ocsp.provider.com port 80".
...instead, the parameters are a server session object (that carries host and port in
formation already) and the request path.
HTTP delegation
the http server session object is logically associated with host and port destination in
formation, in our example this is "host ocsp.provider.com port 80".
...instead, the parameters are a server session object (that carries host and port in
formation already) and the request path.
4.3 Release Notes
_with_camellia_128_cbc_sha tls_dh_anon_with_camellia_128_cbc_sha tls_dh_dss_with_camellia_256_cbc_sha tls_dh_rsa_with_camellia_256_cbc_sha tls_dh_anon_with_camellia_256_cbc_sha tls_ecdh_anon_with_null_sha tls_ecdh_anon_with_rc4_128_sha tls_ecdh_anon_with_3des_ede_cbc_sha tls_ecdh_anon_with_aes_128_cbc_sha tls_ecdh_anon_with_aes_256_cbc_sha distribution in
formation jss is checked into mozilla/security/jss/.
... plat
form in
formation jss 4.3 works with jdk versions 4 or higher we suggest the latest.
JSS 4.4.0 Release Notes
distribution in
formation the hg tag is jss_4_4_20170313.
... bugs fixed in jss 4.4.0 this bugzilla query returns all the bugs fixed in nss 4.4.0: https://bugzilla.mozilla.org/buglist.cgi?product=jss&target_milestone=4.4&target_milestone=4.4&bug_status=resolved&resolution=fixed documentation build instructions for jss at https://hg.mozilla.org/projects/jss/file/tip/readme plat
form in
formation you can check out the source from mercurial via hg clone -r 055aa3ce8a61 https://hg.mozilla.org/projects/jss jss 4.4.0 works with openjdk versions 1.7 or higher we suggest the latest - openjdk 1.8.
NSS 3.12.6 release notes
distribution in
formation the cvs tag for the nss 3.12.6 release is nss_3_12_6_rtm.
... new functions for sni (see ssl.h for more in
formation): sslsnisocketconfig return values: ssl_sni_current_config_is_used: libssl must use the default cert and key.
NSS 3.12.9 release notes
distribution in
formation the cvs tag for the nss 3.12.9 release is nss_3.12.9_rtm.
...ebl bug 607058: crash [@ nss_cms_decoder_work_data] bug 613394: november/december 2010 batch of nss root ca changes bug 610843: need way to recover softoken in child after fork() bug 617492: add pk11_keygenwithtemplate function to pk11wrap (for firefox sync) bug 610162: sha-512 and sha-384 hashes are incorrect for inputs of 512mb or larger when running under windows and other 32-bit plat
forms (fx 3.6.12 and 4.0b6) bug 518551: vfychain crashes in pkits tests.
NSS 3.14.1 release notes
distribution in
formation the cvs tag is nss_3_14_1_rtm.
... bugs fixed in nss 3.14.1 the following bugzilla query returns all of the bugs fixed in nss 3.14.1: https://bugzilla.mozilla.org/buglist.cgi?list_id=5216669;resolution=fixed;query_
format=advanced;bug_status=resolved;bug_status=verified;target_milestone=3.14.1;product=nss compatability nss 3.14.1 shared libraries are backward compatible with all older nss 3.x shared libraries.
NSS 3.14.4 release notes
distribution in
formation the cvs tag is nss_3_14_4_rtm.
... bugs fixed in nss 3.14.4 https://bugzilla.mozilla.org/buglist.cgi?bug_id=894370%2c832942%2c863947&bug_id_type=anyexact&list_id=8338081&resolution=fixed&classification=components&query_
format=advanced&product=nss compatibility nss 3.14.4 shared libraries are backward compatible with all older nss 3.x shared libraries.
NSS 3.14.5 release notes
distribution in
formation the cvs tag is nss_3_14_5_rtm.
... bugs fixed in nss 3.14.5 https://bugzilla.mozilla.org/buglist.cgi?bug_id=934016&bug_id_type=anyexact&resolution=fixed&classification=components&query_
format=advanced&product=nss compatibility nss 3.14.5 shared libraries are backward compatible with all older nss 3.x shared libraries.
NSS 3.15.1 release notes
distribution in
formation nss 3.15.1 source distributions are also available on ftp.mozilla.org for secure https download: source tarballs: https://ftp.mozilla.org/pub/mozilla.org/security/nss/releases/nss_3_15_1_rtm/src/ new in nss 3.15.1 new functionality tls 1.2: tls 1.2 (rfc 5246) is supported.
... bugs fixed in nss 3.15.1 https://bugzilla.mozilla.org/buglist.cgi?list_id=5689256;resolution=fixed;classification=components;query_
format=advanced;target_milestone=3.15.1;product=nss compatibility nss 3.15.1 shared libraries are backward compatible with all older nss 3.x shared libraries.
NSS 3.15.2 release notes
distribution in
formation nss 3.15.2 source distributions are also available on ftp.mozilla.org for secure https download: source tarballs: https://ftp.mozilla.org/pub/mozilla.org/security/nss/releases/nss_3_15_2_rtm/src/ security advisories the following security-relevant bugs have been resolved in nss 3.15.2.
... a complete list of all bugs resolved in this release can be obtained at https://bugzilla.mozilla.org/buglist.cgi?resolution=fixed&classification=components&query_
format=advanced&target_milestone=3.15.2&product=nss&list_id=7982238 compatibility nss 3.15.2 shared libraries are backward compatible with all older nss 3.x shared libraries.
NSS 3.15.3.1 release notes
distribution in
formation the hg tag is nss_3_15_3_1_rtm.
...bugs fixed in nss 3.15.3.1 bug 946351 - misissued google certificates from dcssi a complete list of all bugs resolved in this release can be obtained at https://bugzilla.mozilla.org/buglist.cgi?resolution=fixed&classification=components&query_
format=advanced&target_milestone=3.15.3.1&product=nss compatibility nss 3.15.3.1 shared libraries are backward compatible with all older nss 3.x shared libraries.
NSS 3.15.3 release notes
distribution in
formation the hg tag is nss_3_15_3_rtm.
...bugs fixed in nss 3.15.3 bug 850478 - list rc4_128 cipher suites after aes_128 cipher suites bug 919677 - don't advertise tls 1.2-only ciphersuites in a tls 1.1 clienthello a complete list of all bugs resolved in this release can be obtained at https://bugzilla.mozilla.org/buglist.cgi?resolution=fixed&classification=components&query_
format=advanced&target_milestone=3.15.3&product=nss compatibility nss 3.15.3 shared libraries are backward compatible with all older nss 3.x shared libraries.
NSS 3.15.4 release notes
distribution in
formation the hg tag is nss_3_15_4_rtm.
... bugs fixed in nss 3.15.4 a complete list of all bugs resolved in this release can be obtained at https://bugzilla.mozilla.org/buglist.cgi?resolution=fixed&classification=components&query_
format=advanced&target_milestone=3.15.4&product=nss compatibility nss 3.15.4 shared libraries are backward compatible with all older nss 3.x shared libraries.
NSS 3.15.5 release notes
distribution in
formation the hg tag is nss_3_15_5_rtm.
... bugs fixed in nss 3.15.5 a complete list of all bugs resolved in this release can be obtained at https://bugzilla.mozilla.org/buglist.cgi?resolution=fixed&classification=components&query_
format=advanced&target_milestone=3.15.5&product=nss compatibility nss 3.15.5 shared libraries are backward compatible with all older nss 3.x shared libraries.
NSS 3.16.1 release notes
distribution in
formation the hg tag is nss_3_16_1_rtm.
... bugs fixed in nss 3.16.1 this bugzilla query returns all the bugs fixed in nss 3.16.1: https://bugzilla.mozilla.org/buglist.cgi?resolution=fixed&classification=components&query_
format=advanced&product=nss&target_milestone=3.16.1 ...
NSS 3.16.2.3 release notes
distribution in
formation the hg tag is nss_3_16_2_3_rtm.
...previously nss would only validate the peer's public key before per
forming ecdh key agreement.
NSS 3.16.2 release notes
distribution in
formation the hg tag is nss_3_16_2_rtm.
... bugs fixed in nss 3.16.2 this bugzilla query returns all the bugs fixed in nss 3.16.2: https://bugzilla.mozilla.org/buglist.cgi?resolution=fixed&classification=components&query_
format=advanced&product=nss&target_milestone=3.16.2 ...
NSS 3.16.3 release notes
distribution in
formation the hg tag is nss_3_16_3_rtm.
... cn = netlock expressz (class c) tanusitvanykiado sha1 fingerprint: e3:92:51:2f:0a:cf:f5:05:df:f6:de:06:7f:75:37:e1:65:ea:57:4b turned off websites and code signing trust bits (1024-bit root) bugs fixed in nss 3.16.3 this bugzilla query returns all the bugs fixed in nss 3.16.3: https://bugzilla.mozilla.org/buglist.cgi?resolution=fixed&classification=components&query_
format=advanced&product=nss&target_milestone=3.16.3 ...
NSS 3.16.4 release notes
distribution in
formation the hg tag is nss_3_16_4_rtm.
... bugs fixed in nss 3.16.4 this bugzilla query returns all the bugs fixed in nss 3.16.4: https://bugzilla.mozilla.org/buglist.cgi?resolution=fixed&classification=components&query_
format=advanced&product=nss&target_milestone=3.16.4 ...
NSS 3.17.1 release notes
distribution in
formation the hg tag is nss_3_17_1_rtm.
... bugs fixed in nss 3.17.1 this bugzilla query returns all the bugs fixed in nss 3.17.1: https://bugzilla.mozilla.org/buglist.cgi?resolution=fixed&classification=components&query_
format=advanced&product=nss&target_milestone=3.17.1 acknowledgements the nss development team would like to thank antoine delignat-lavaud, security researcher at inria paris in team prosecco, and the advanced threat research team at intel security, who both independently discovered and reported this issue, for responsibly disclosing the issue by providing advance copies of their research.
NSS 3.17.3 release notes
distribution in
formation the hg tag is nss_3_17_3_rtm.
...:bb cn = globalsign ecc root ca - r5 sha1 fingerprint: 1f:24:c6:30:cd:a4:18:ef:20:69:ff:ad:4f:dd:5f:46:3a:1b:69:aa the version number of the updated root ca list has been set to 2.2 bugs fixed in nss 3.17.3 this bugzilla query returns all the bugs fixed in nss 3.17.3: https://bugzilla.mozilla.org/buglist.cgi?resolution=fixed&classification=components&query_
format=advanced&product=nss&target_milestone=3.17.3 compatibility nss 3.17.3 shared libraries are backward compatible with all older nss 3.x shared libraries.
NSS 3.17.4 release notes
distribution in
formation the hg tag is nss_3_17_4_rtm.
... bugs fixed in nss 3.17.4 this bugzilla query returns all the bugs fixed in nss 3.17.4: https://bugzilla.mozilla.org/buglist.cgi?resolution=fixed&classification=components&query_
format=advanced&product=nss&target_milestone=3.17.4 compatibility nss 3.17.4 shared libraries are backward compatible with all older nss 3.x shared libraries.
NSS 3.17 release notes
distribution in
formation the hg tag is nss_3_17_rtm.
... bugs fixed in nss 3.17 this bugzilla query returns all the bugs fixed in nss 3.17: https://bugzilla.mozilla.org/buglist.cgi?resolution=fixed&classification=components&query_
format=advanced&product=nss&target_milestone=3.17 ...
NSS 3.18.1 release notes
distribution in
formation the hg tag is nss_3_18_1_rtm.
... cn=mcsholding test, o=mcsholding, c=eg sha1 fingerprint: e1:f3:59:1e:76:98:65:c4:e4:47:ac:c3:7e:af:c9:e2:bf:e4:c5:76 the version number of the updated root ca list has been set to 2.4 bugs fixed in nss 3.18.1 this bugzilla query returns all the bugs fixed in nss 3.18.1: https://bugzilla.mozilla.org/buglist.cgi?resolution=fixed&classification=components&query_
format=advanced&product=nss&target_milestone=3.18.1 compatibility nss 3.18.1 shared libraries are backward compatible with all older nss 3.18 shared libraries.
NSS 3.19.1 release notes
distribution in
formation the hg tag is nss_3_19_1_rtm.
...t, or use has been raised: the minimum modulus size for rsa keys is now 512 bits the minimum modulus size for dsa keys is now 1023 bits the minimum modulus size for diffie-hellman keys is now 1023 bits bugs fixed in nss 3.19.1 this bugzilla query returns all the bugs fixed in nss 3.19.1: https://bugzilla.mozilla.org/buglist.cgi?resolution=fixed&classification=components&query_
format=advanced&product=nss&target_milestone=3.19.1 acknowledgements the nss development team would like to thank matthew green and karthikeyan bhargavan for responsibly disclosing the issue in bug 1138554.
NSS 3.19.2 release notes
distribution in
formation the hg tag is nss_3_19_2_rtm.
... bugs fixed in nss 3.19.2 this bugzilla query returns all the bugs fixed in nss 3.19.2: https://bugzilla.mozilla.org/buglist.cgi?resolution=fixed&classification=components&query_
format=advanced&product=nss&target_milestone=3.19.2 compatibility nss 3.19.2 shared libraries are backward compatible with all older nss 3.x shared libraries.
NSS 3.19.3 release notes
distribution in
formation the hg tag is nss_3_19_3_rtm.
...d:e5:2f:e0 cn = certinomis - root ca sha1 fingerprint: 9d:70:bb:01:a5:a4:a0:18:11:2e:f7:1c:01:b9:32:c5:34:e7:88:a8 the version number of the updated root ca list has been set to 2.5 bugs fixed in nss 3.19.3 this bugzilla query returns all the bugs fixed in nss 3.19.3: https://bugzilla.mozilla.org/buglist.cgi?resolution=fixed&classification=components&query_
format=advanced&product=nss&target_milestone=3.19.3 compatibility nss 3.19.3 shared libraries are backward compatible with all older nss 3.19 shared libraries.
NSS 3.20 release notes
distribution in
formation the hg tag is nss_3_20_rtm.
... bugs fixed in nss 3.20 this bugzilla query returns all the bugs fixed in nss 3.20: https://bugzilla.mozilla.org/buglist.cgi?resolution=fixed&classification=components&query_
format=advanced&product=nss&target_milestone=3.20 compatibility nss 3.20 shared libraries are backward compatible with all older nss 3.x shared libraries.
NSS 3.22 release notes
distribution in
formation the hg tag is nss_3_22_rtm.
... bugs fixed in nss 3.22 this bugzilla query returns all the bugs fixed in nss 3.22: https://bugzilla.mozilla.org/buglist.cgi?resolution=fixed&classification=components&query_
format=advanced&product=nss&target_milestone=3.22 compatibility nss 3.22 shared libraries are backward compatible with all older nss 3.x shared libraries.
NSS 3.25 release notes
distribution in
formation the hg tag is nss_3_25_rtm.
...c:22:59:29:25:7b:f4:0d:08:94:f2:9e:a8:ba:f2 cn = opentrust root ca g3 sha-256 fingerprint: b7:c3:62:31:70:6e:81:07:8c:36:7c:b8:96:19:8f:1e:32:08:dd:92:69:49:dd:8f:57:09:a4:10:f7:5b:62:92 bugs fixed in nss 3.25 this bugzilla query returns all the bugs fixed in nss 3.25: https://bugzilla.mozilla.org/buglist.cgi?resolution=fixed&classification=components&query_
format=advanced&product=nss&target_milestone=3.25 compatibility nss 3.25 shared libraries are backward compatible with all older nss 3.x shared libraries.
NSS 3.26 release notes
distribution in
formation the hg tag is nss_3_26_rtm.
...08:c6 npn is disabled, and alpn is enabled by default the nss test suite now completes with the experimental tls 1.3 code enabled several test improvements and additions, including a nist known answer test bugs fixed in nss 3.26 this bugzilla query returns all the bugs fixed in nss 3.26: https://bugzilla.mozilla.org/buglist.cgi?resolution=fixed&classification=components&query_
format=advanced&product=nss&target_milestone=3.26 compatibility nss 3.26 shared libraries are backwards compatible with all older nss 3.x shared libraries.
NSS 3.27 release notes
distribution in
formation the hg tag is nss_3_27_rtm.
...:4f:40:bb:ae:86:5e:19:f6:73 cn = equifax secure global ebusiness ca-1 sha-256 fingerprint: 5f:0b:62:ea:b5:e3:53:ea:65:21:65:16:58:fb:b6:53:59:f4:43:28:0a:4a:fb:d1:04:d7:7d:10:f9:f0:4c:07 bugs fixed in nss 3.27 this bugzilla query returns all the bugs fixed in nss 3.27: https://bugzilla.mozilla.org/buglist.cgi?resolution=fixed&classification=components&query_
format=advanced&product=nss&target_milestone=3.27 compatibility nss 3.27 shared libraries are backwards compatible with all older nss 3.x shared libraries.
NSS 3.29 release notes
distribution in
formation the hg tag is nss_3_29_rtm.
... bugs fixed in nss 3.29 this bugzilla query returns all the bugs fixed in nss 3.29: https://bugzilla.mozilla.org/buglist.cgi?resolution=fixed&classification=components&query_
format=advanced&product=nss&target_milestone=3.29 compatibility nss 3.29 shared libraries are backward compatible with all older nss 3.x shared libraries.
NSS 3.34.1 release notes
distribution in
formation the hg tag is nss_3_34.1_rtm.
... new in nss 3.34 new functionality none new functions bugs fixed in nss 3.34.1 this bugzilla query returns all the bugs fixed in nss 3.34.1: https://bugzilla.mozilla.org/buglist.cgi?resolution=fixed&classification=components&query_
format=advanced&product=nss&target_milestone=3.34.1 compatibility nss 3.34.1 shared libraries are backward compatible with all older nss 3.x shared libraries.
NSS 3.34 release notes
distribution in
formation the hg tag is nss_3_34_rtm.
... new functions bugs fixed in nss 3.34 this bugzilla query returns all the bugs fixed in nss 3.34: https://bugzilla.mozilla.org/buglist.cgi?resolution=fixed&classification=components&query_
format=advanced&product=nss&target_milestone=3.34 compatibility nss 3.34 shared libraries are backward compatible with all older nss 3.x shared libraries.
NSS 3.36.1 release notes
distribution in
formation the hg tag is nss_3_36_1_rtm.
... this bugzilla query returns all the bugs fixed in nss 3.36.1: https://bugzilla.mozilla.org/buglist.cgi?resolution=fixed&classification=components&query_
format=advanced&product=nss&target_milestone=3.36.1 compatibility nss 3.36.1 shared libraries are backward compatible with all older nss 3.x shared libraries.
NSS 3.36.6 release notes
distribution in
formation the hg tag is nss_3_36_6_rtm.
...this is a patch release to fix cve-2018-12404 bugs fixed in nss 3.36.6 bug 1485864 - cache side-channel variant of the bleichenbacher attack (cve-2018-12404) bug 1389967 and bug 1448748 - fixes for mingw on x64 plat
forms.
NSS 3.36 release notes
distribution in
formation the hg tag is nss_3_36_rtm.
... bugs fixed in nss 3.36 this bugzilla query returns all the bugs fixed in nss 3.36: https://bugzilla.mozilla.org/buglist.cgi?resolution=fixed&classification=components&query_
format=advanced&product=nss&target_milestone=3.36 compatibility nss 3.36 shared libraries are backward compatible with all older nss 3.x shared libraries.
NSS 3.37.3 release notes
distribution in
formation the hg tag is nss_3_37_3_rtm.
... bugs fixed in nss 3.37.3 bug 1459739 - fix build on armv6/armv7 and other plat
forms.
NSS 3.38 release notes
distribution in
formation the hg tag is nss_3_38_rtm.
... bugs fixed in nss 3.38 this bugzilla query returns all the bugs fixed in nss 3.38: https://bugzilla.mozilla.org/buglist.cgi?resolution=fixed&classification=components&query_
format=advanced&product=nss&target_milestone=3.38 compatibility nss 3.38 shared libraries are backward compatible with all older nss 3.x shared libraries.
NSS 3.39 release notes
distribution in
formation the hg tag is nss_3_39_rtm.
...fingerprint: b7c36231706e81078c367cb896198f1e3208dd926949dd8f5709a410f75b6292 bugs fixed in nss 3.39 bug 1483128 - nss responded to an sslv2-compatible clienthello with a serverhello that had an all-zero random (cve-2018-12384) this bugzilla query returns all the bugs fixed in nss 3.39: https://bugzilla.mozilla.org/buglist.cgi?resolution=fixed&classification=components&query_
format=advanced&product=nss&target_milestone=3.39 compatibility nss 3.39 shared libraries are backward compatible with all older nss 3.x shared libraries.
NSS 3.40 release notes
distribution in
formation the hg tag is nss_3_40_rtm.
...d: cn = visa ecommerce root sha-256 fingerprint: 69fac9bd55fb0ac78d53bbee5cf1d597989fd0aaab20a25151bdf1733ee7d122 bugs fixed in nss 3.40 bug 1478698 - ffdhe key exchange sometimes fails with decryption failure this bugzilla query returns all the bugs fixed in nss 3.40: https://bugzilla.mozilla.org/buglist.cgi?resolution=fixed&classification=components&query_
format=advanced&product=nss&target_milestone=3.40 compatibility nss 3.40 shared libraries are backward compatible with all older nss 3.x shared libraries.
NSS 3.41.1 release notes
distribution in
formation the hg tag is nss_3_41_1_rtm.
...(cve-2018-18508) this bugzilla query returns all bugs fixed in 3.41.1: https://bugzilla.mozilla.org/buglist.cgi?resolution=fixed&classification=components&query_
format=advanced&product=nss&target_milestone=3.41.1 compatibility nss 3.41.1 shared libraries are backward compatible with all older nss 3.x shared libraries.
NSS 3.41 release notes
distribution in
formation the hg tag is nss_3_41_rtm.
...acher attack (cve-2018-12404) bug 1481271 - resend the same ticket in clienthello after helloretryrequest bug 1493769 - set session_id for external resumption tokens bug 1507179 - reject ccs after handshake is complete in tls 1.3 this bugzilla query returns all the bugs fixed in nss 3.41: https://bugzilla.mozilla.org/buglist.cgi?resolution=fixed&classification=components&query_
format=advanced&product=nss&target_milestone=3.41 compatibility nss 3.41 shared libraries are backward compatible with all older nss 3.x shared libraries.
NSS 3.42.1 release notes
distribution in
formation the hg tag is nss_3_42_1_rtm.
...(cve-2018-18508) this bugzilla query returns all the bugs fixed in nss 3.42.1: https://bugzilla.mozilla.org/buglist.cgi?resolution=fixed&classification=components&query_
format=advanced&product=nss&target_milestone=3.42.1 compatibility nss 3.42.1 shared libraries are backward compatible with all older nss 3.x shared libraries.
NSS 3.42 release notes
distribution in
formation the hg tag is nss_3_42_rtm.
... bug 1513913 - a fix for solaris where firefox 60 core dumps during start when using profile from version 52 this bugzilla query returns all the bugs fixed in nss 3.42: https://bugzilla.mozilla.org/buglist.cgi?resolution=fixed&classification=components&query_
format=advanced&product=nss&target_milestone=3.42 compatibility nss 3.42 shared libraries are backward compatible with all older nss 3.x shared libraries.
NSS 3.44.2 release notes
distribution in
formation the hg tag is nss_3_44_2_rtm.
... bugs fixed in nss 3.44.2 bug 1582343 - soft token mac verification not constant time bug 1577953 - remove arbitrary hkdf output limit by allocating space as needed this bugzilla query returns all the bugs fixed in nss 3.44.2: https://bugzilla.mozilla.org/buglist.cgi?resolution=fixed&classification=components&query_
format=advanced&product=nss&target_milestone=3.44.2 compatibility nss 3.44.2 shared libraries are backward compatible with all older nss 3.x shared libraries.
NSS 3.44.3 release notes
the nss team would like to recognize first-time contributors: craig disselkoen distribution in
formation the hg tag is nss_3_44_3_rtm.
... bugs fixed in nss 3.44.3 bug 1579060 - don't set the constructed bit for issueruniqueid and subjectuniqueid in mozilla::pkix cve-2019-11745 - encryptupdate should use maxout, not block size this bugzilla query returns all the bugs fixed in nss 3.44: https://bugzilla.mozilla.org/buglist.cgi?resolution=fixed&classification=components&query_
format=advanced&product=nss&target_milestone=3.44 compatibility nss 3.44.3 shared libraries are backward compatible with all older nss 3.x shared libraries.
NSS 3.44.4 release notes
thank you to cesar pereida garcia and the network and in
formation security group (nisec) at tampere university for reporting this issue.
... distribution in
formation the hg tag is nss_3_44_4_rtm.
NSS 3.45 release notes
the nss team would like to recognize first-time contributors: bastien abadie christopher patton jeremie courreges-anglas marcus burghardt michael shigorin tomas mraz distribution in
formation the hg tag is nss_3_45_rtm.
... bug 1558681 - stop using a global for anti-replay of tls 1.3 early data bug 1561510 - fix a bug where removing -arch xxx args from cc didn't work bug 1561523 - add a string for the new-ish error ssl_error_missing_post_handshake_auth_extension this bugzilla query returns all the bugs fixed in nss 3.45: https://bugzilla.mozilla.org/buglist.cgi?resolution=fixed&classification=components&query_
format=advanced&product=nss&target_milestone=3.45 compatibility nss 3.45 shared libraries are backward compatible with all older nss 3.x shared libraries.
NSS 3.46.1 release notes
distribution in
formation the hg tag is nss_3_46_1_rtm.
... bugs fixed in nss 3.46.1 bug 1582343 - soft token mac verification not constant time bug 1577953 - remove arbitrary hkdf output limit by allocating space as needed this bugzilla query returns all the bugs fixed in nss 3.46.1: https://bugzilla.mozilla.org/buglist.cgi?resolution=fixed&classification=components&query_
format=advanced&product=nss&target_milestone=3.46.1 compatibility nss 3.46.1 shared libraries are backward compatible with all older nss 3.x shared libraries.
NSS 3.47.1 release notes
the nss team would like to recognize first-time contributors: craig disselkoen distribution in
formation the hg tag is nss_3_47_1_rtm.
....47.1 cve-2019-11745 - encryptupdate should use maxout, not block size bug 1590495 - fix a crash that could be caused by client certificates during startup bug 1589810 - fix compile-time warnings from uninitialized variables in a perl script this bugzilla query returns all the bugs fixed in nss 3.47: https://bugzilla.mozilla.org/buglist.cgi?resolution=fixed&classification=components&query_
format=advanced&product=nss&target_milestone=3.47 compatibility nss 3.47.1 shared libraries are backward compatible with all older nss 3.x shared libraries.
NSS 3.47 release notes
the nss team would like to recognize first-time contributors: christian weisgerber deian stefan jenine distribution in
formation the hg tag is nss_3_47_rtm.
... bug 1577038 - add pk11_getcertsfromprivatekey to return all certificates with public keys matching a particular private key this bugzilla query returns all the bugs fixed in nss 3.47: https://bugzilla.mozilla.org/buglist.cgi?resolution=fixed&classification=components&query_
format=advanced&product=nss&target_milestone=3.47 compatibility nss 3.47 shared libraries are backward compatible with all older nss 3.x shared libraries.
NSS 3.48.1 release notes
distribution in
formation the hg tag is nss_3_48_1_rtm.
... this bugzilla query returns all the bugs fixed in nss 3.48: https://bugzilla.mozilla.org/buglist.cgi?resolution=fixed&classification=components&query_
format=advanced&product=nss&target_milestone=3.48 compatibility nss 3.48.1 shared libraries are backward compatible with all older nss 3.x shared libraries.
NSS 3.49.1 release notes
distribution in
formation the hg tag is nss_3_49_1_rtm.
... this bugzilla query returns all the bugs fixed in nss 3.49: https://bugzilla.mozilla.org/buglist.cgi?resolution=fixed&classification=components&query_
format=advanced&product=nss&target_milestone=3.49 compatibility nss 3.49.1 shared libraries are backward compatible with all older nss 3.x shared libraries.
NSS 3.49.2 release notes
distribution in
formation the hg tag is nss_3_49_2_rtm.
... bug 1608327 - fix compilation problems with neon-specific code in freebl bug 1608895 - fix a taskcluster issue with python 2 / python 3 this bugzilla query returns all the bugs fixed in nss 3.49: https://bugzilla.mozilla.org/buglist.cgi?resolution=fixed&classification=components&query_
format=advanced&product=nss&target_milestone=3.49 compatibility nss 3.49.2 shared libraries are backward compatible with all older nss 3.x shared libraries.
NSS 3.51 release notes
the nss team would like to recognize first-time contributors: dmitry baryshkov victor tapia distribution in
formation the hg tag is nss_3_51_rtm.
... blake2b_update bug 1617387 - fix compiler warning in secsign.c bug 1618400 - fix a openbsd/arm64 compilation error: unused variable 'getauxval' bug 1610687 - fix a crash on unaligned cmaccontext.aes.keyschedule when using aes-ni intrinsics this bugzilla query returns all the bugs fixed in nss 3.51: https://bugzilla.mozilla.org/buglist.cgi?resolution=fixed&classification=components&query_
format=advanced&product=nss&target_milestone=3.51 compatibility nss 3.51 shared libraries are backward compatible with all older nss 3.x shared libraries.
NSS 3.52.1 release notes
thank you to cesar pereida garcia and the network and in
formation security group (nisec) at tampere university for reporting this issue.
... distribution in
formation the hg tag is nss_3_52_1_rtm.
NSS 3.53.1 release notes
thank you to sohaib ul hassan, billy bob brumley, and the network and in
formation security group (nisec) at tampere university for reporting this issue and providing a patch.
... distribution in
formation the hg tag is nss_3_53_1_rtm.
NSS 3.54 release notes
distribution in
formation the hg tag is nss_3_54_rtm.
... this bugzilla query returns all the bugs fixed in nss 3.54: https://bugzilla.mozilla.org/buglist.cgi?resolution=fixed&classification=components&query_
format=advanced&product=nss&target_milestone=3.54 compatibility nss 3.54 shared libraries are backward compatible with all older nss 3.x shared libraries.
NSS 3.56 release notes
distribution in
formation the hg tag is nss_3_56_rtm.
... this bugzilla query returns all the bugs fixed in nss 3.56: https://bugzilla.mozilla.org/buglist.cgi?resolution=fixed&classification=components&query_
format=advanced&product=nss&target_milestone=3.56 compatibility nss 3.56 shared libraries are backward compatible with all older nss 3.x shared libraries.
Enc Dec MAC Output Public Key as CSR
generates encryption/mac keys and outputs public key as certificate signing request /* this source code
form is subject to the terms of the mozilla public * license, v.
...own) { pr_fprintf(pr_stderr, "unknown key or hash type\n"); rv = secfailure; goto cleanup; } rv = sec_dersigndata(arena, &result, encoding->data, encoding->len, privk, signalgtag); if (rv) { pr_fprintf(pr_stderr, "signing of data failed\n"); rv = secfailure; goto cleanup; } /* encode request in specified
format */ if (ascii) { char *obuf; char *name, *email, *org, *state, *country; secitem *it; int total; it = &result; obuf = btoa_convertitemtoascii(it); total = pl_strlen(obuf); name = cert_getcommonname(subject); if (!name) { name = strdup("(not specified)"); } email = cert_getcertemailaddress(...
nss tech note5
using nss to per
form miscellaneous cryptographic operations nss technical note: 5 nss project info is at http://www.mozilla.org/projects/security/pki/nss/ you can browse the nss source online at http://lxr.mozilla.org/mozilla/source/security/nss/ and http://lxr.mozilla.org/security/ be sure to look for sample code first for things you need to do.
... generate a symmetric key subsequent to the operation, the symmetric key may need to be transported/stored in wrapped or raw
form.
nss tech note6
the following applies to nss 3.11 : the low-level freebl cryptographic code has been separated from softoken on all plat
forms.
... even on plat
forms for which there is only one implementation of freebl, there is now a separate freebl shared library.
nss tech note8
background in
formation on libssl's cache functions and sids nss technical note: 8 27 february 2006 nelson b.
... bolyard here is some background in
formation on libssl's cache functions and sids.
NSS Tools sslstrength
synopsis 1) sslstrength ciphers 2) sslstrength hostname[:port] [ciphers=xyz] [debug] [verbose] [policy=export|domestic] description the first
form simple lists out the possible ciphers.
...the second
form attempts to connect to the named ssl host.
NSS release notes template
distribution in
formation the hg tag is nss_3_xx_rtm.
... bugs fixed in nss 3.xx this bugzilla query returns all the bugs fixed in nss 3.xx: https://bugzilla.mozilla.org/buglist.cgi?resolution=fixed&classification=components&query_
format=advanced&product=nss&target_milestone=3.xx (make a link) acknowledgements the nss development team would like to thank ...
Migration to HG
updated instructions for building nss with nspr can be found at: /docs/nss_reference/building_and_installing_nss/build_instructions it's best to refer to the above document to learn about the various environment variables that you might have to set to build on your plat
form (this part hasn't changed).
...y that shows how to checkout the source code and build both nspr and nss: mkdir workarea cd workarea hg clone https://hg.mozilla.org/projects/nspr hg clone https://hg.mozilla.org/projects/nss cd nss # set use_64=1 on 64 bit architectures # set build_opt=1 to get an optimized build make nss_build_all note that the jss project has been given a private copy of the
former mozilla/security/coreconf directory, allowing it to remain stable, and only update its build system as necessary.
Sample manual installation
where <obj-dir> would vary according to the type of build and the plat
form.
... for example, <obj-dir> for a debug build of nss on the x86 plat
form with a linux kernel version 2.6 with glibc would be: linux2.6_x86_glibc_pth_dbg.obj from these directories, you can copy the files to any system (or other) directory.
FC_GetMechanismInfo
name fc_getmechanisminfo - get in
formation on a particular mechanism.
... description fc_getmechanisminfo obtains in
formation about a particular mechanism possibly supported by a token.
FC_Initialize
in addition to creating the internal data structures, it per
forms the fips software integrity test and power-up self-tests.
... the library parameters string has this
format: "configdir='dir' certprefix='prefix1' keyprefix='prefix2' secmod='file' flags= " here are some examples.
NSPR functions
nspr is a plat
form abstraction library that provides a cross-plat
form api to common os services.
... printervaltime has an abstract, plat
form-dependent time unit.
FIPS mode of operation
per
forms pair-wise consistency test.
... fc_wrapkey: rsa key wrapping fc_unwrapkey: rsa key wrapping fc_derivekey: diffie-hellman, ec diffie-hellman random number generation functions fc_seedrandom fc_generaterandom: per
forms continuous random number generator test.
NSS tools : vfychain
options -a the following certfile is base64 encoded -b yymmddhhmmz validate date (default: now) -d directory database directory -f enable cert fetching from aia url -o oid set policy oid for cert validation(
format oid.1.2.3) -p use pkix library to validate certificate by calling: * cert_verifycertificate if specified once, * cert_pkixverifycert if specified twice and more.
...additional resources for in
formation about nss and other tools related to nss (like jss), check out the nss project wiki at [1]http://www.mozilla.org/projects/security/pki/nss/.
NSS reference
initial notes we are migrating the ssl reference into the
format described in the mdn style guide.
... validating certificates cert_verifycertnow cert_verifycert cert_verifycertname cert_checkcertvalidtimes nss_cmpcertchainwcanames manipulating certificates cert_dupcertificate cert_destroycertificate sec_deletepermcertificate __cert_closepermcertdb getting certificate in
formation cert_findcertbyname cert_getcertnicknames cert_freenicknames cert_getdefaultcertdb nss_findcertkeatype comparing secitem objects secitem_compareitem key functions key functions seckey_getdefaultkeydb seckey_destroyprivatekey digital signatures this api consists of the routines used to per
form signature generation and the routines used to per
form s...
OLD SSL Reference
old ssl reference we are migrating this ssl reference into the
format described in the mdn style guide.
... validating certificates cert_verifycertnow cert_verifycertname cert_checkcertvalidtimes nss_cmpcertchainwcanames manipulating certificates cert_dupcertificate cert_destroycertificate getting certificate in
formation cert_findcertbyname cert_getcertnicknames cert_freenicknames cert_getdefaultcertdb nss_findcertkeatype comparing secitem objects secitem_compareitem chapter 6 key functions this chapter describes two functions used to mani...
ssltyp.html
this page is part of the ssl reference that we are migrating into the
format described in the mdn style guide.
...as long as you use the
form shown here, your code will not need revision.
Utility functions
the public functions listed here per
form initialization tasks and other services.
...rt_setucs4_utf8conversionfunction mxr 3.2 and later port_strdup mxr 3.5 and later port_ucs2_asciiconversion mxr 3.2 and later port_ucs2_utf8conversion mxr 3.2 and later port_zalloc mxr 3.2 and later port_zfree mxr 3.2 and later rsa_
formatblock mxr 3.2 and later sec_asn1decode mxr 3.4 and later sec_asn1decodeinteger mxr 3.2 and later sec_asn1decodeitem mxr 3.2 and later sec_asn1decoderabort mxr 3.9 and later sec_asn1decoderclearfilterproc mxr 3.2 and later sec_asn1...
modutil-tasks.html
nss security tools: modutil tasks newsgroup: mozilla.dev.tech.crypto task list the jar installation script is very fragile with respect to plat
form definitions (especially version numbers).
... a fix was made for "hpux b.11.00," but issues may still arise for plat
forms like "linux 2.2.12-20." documentation needs to be explicit about the use of fo ...
NSS Tools modutil-tasks
nss security tools: modutil tasks newsgroup: mozilla.dev.tech.crypto task list the jar installation script is very fragile with respect to plat
form definitions (especially version numbers).
... a fix was made for "hpux b.11.00," but issues may still arise for plat
forms like "linux 2.2.12-20." documentation needs to be explicit about the use of fo ...
NSS Tools pk12util
availability see the release notes for the plat
forms this tool is available on.
...if no suitable replacement for the desired algorithm can be found a "no security module can per
form the requested operation" will appear on the error message.
NSS Tools sslstrength
synopsis 1) sslstrength ciphers 2) sslstrength hostname[:port] [ciphers=xyz] [debug] [verbose] [policy=export|domestic] description the first
form simple lists out the possible ciphers.
...the second
form attempts to connect to the named ssl host.
NSS tools : vfychain
options -a the following certfile is base64 encoded -b yymmddhhmmz validate date (default: now) -d directory database directory -f enable cert fetching from aia url -o oid set policy oid for cert validation(
format oid.1.2.3) -p use pkix library to validate certificate by calling: * cert_verifycertificate if specified once, * cert_pkixverifycert if specified twice and more.
... additional resources for in
formation about nss and other tools related to nss (like jss), check out the nss project wiki at [1]http://www.mozilla.org/projects/security/pki/nss/.
The Necko HTTP module
http logging this document describes how to enable http logging for various plat
forms.
... original document in
formation last updated date: may 12, 2003 copyright in
formation: portions of this content are © 1998–2007 by individual mozilla.org contributors; content available under a creative commons license | details ...
Necko Interfaces Overview
scheme, host, path, ...) per protocol implementation necko provides uri impl's for common uri
formats (see nsstandardurl, nssimpleuri) nsichannel : nsirequest represents a logical connection to the resource identified by a nsiuri per protocol implementation single use (ie.
...nsirequest::cancel method nsitransport represents a physical connection, such as a file descriptor or a socket used directly by protocol handler implementations (as well as by mailnews and chatzilla) synchronous i/o methods: openinputstream, openoutputstream asynchronous i/o methods: asyncread, asyncwrite nsitransport::asyncread takes a nsistreamlistener parameter original document in
formation author(s): darin fisher last updated date: december 10, 2001 copyright in
formation: portions of this content are © 1998–2007 by individual mozilla.org contributors; content available under a creative commons license | details.
Proxies in Necko
this means that callers can just create an nsichannel, not needing to worry about whether the channel will use a proxy or not the basic interfaces for proxies are: nsiproxyinfo, nsiprotocolproxyservice, and nsiproxiedprotocolhandler nsiproxyinfo is a simple helper which stores in
formation about the type of the proxy, its host and its port.
... original document in
formation author(s): christian biesinger last updated date: april 8, 2005 copyright in
formation: portions of this content are © 1998–2007 by individual mozilla.org contributors; content available under a creative commons license | details.
Personal Security Manager (PSM)
personal security manager (psm) consists of a set of libraries that per
form cryptographic operations on behalf of a client application.
... archived in
formation about psm ...
Installing Pork
build and install mcpp mcpp generates macro expansion comments that allow pork's elsa to undo macros, which is necessary in order to get exact position in
formation.
... $ export path=/builds/gcc-3.4.6-installed/bin:$path $ export cppflags=-m32 $ cc=gcc34 cxx=g++34 cppflags=-m32 ldflags=-m32 ../src/configure --enable-replace-cpp --prefix=/builds/gcc-3.4.6-installed --target=i686-pc-linux $ make $ make install program_trans
form_name= ...
Pork Tool Development
cppsourceloc wraps sourceloc, providing in
formation about macro expansion.
... cppsourceloc will change the previously provided location in
formation (in variable cpp_source_loc._loc) from post-location to pre-location.
Pork
this in
formation allows c++ to be automatically rewritten in a precise way.
...as of october 2009 oink incorporates the pork functionality into its standard distribution; look for files and tests having the prefix "x
form".
Download Rhino
rhino is available for download both in source and compiled
form.
... see rhino license for further in
formation.
Rhino JavaScript compiler
-debug -g specifies that debug in
formation should be generated.
...see javascript language versions for more in
formation on language versions.
Rhino license
* * redistribution and use in source and binary
forms, with or without * modification, are permitted provided that the following conditions * are met: * * - redistributions of source code must retain the above copyright * notice, this list of conditions and the following disclaimer.
... * * - redistributions in binary
form must reproduce the above copyright * notice, this list of conditions and the following disclaimer in the * documentation and/or other materials provided with the distribution.
Rhino shell
see javascript language versions for more in
formation on language versions.
... {input: "c\na\nb"}) a b c 0 js> // demo of output and err options js> var opt={input: "c\na\nb", output: 'sort output:\n'} js> runcommand("sort", opt) 0 js> print(opt.output) sort output: a b c js> var opt={input: "c\na\nb", output: 'sort output:\n', err: ''} js> runcommand("sort", "--bad-arg", opt) 2 js> print(opt.err) /bin/sort: unrecognized option `--bad-arg' try `/bin/sort --help' for more in
formation.
GCIntegration - SpiderMonkey Redirect 1
moving gc there are two
forms of moving gc we are likely to implement: generational gc and compacting gc.
...we don't have a fully
formed plan in place for what will replace it, but whatever it is will likely resemble auto-rooters.
Getting SpiderMonkey source code
you can get the spidermonkey source code in gzipped
form or directly from the mercurial repository.
...wing urls: http://ftp.mozilla.org/pub/spidermonkey/releases/ http://ftp.mozilla.org/pub/spidermonkey/prereleases/ here is a command-line example of downloading and unzipping spidermonkey source code version 59.0: mkdir mozilla cd mozilla wget http://ftp.mozilla.org/pub/spidermonkey/prereleases/59/pre1/mozjs-59.0a1.0.tar.bz2 tar xvf mozjs-59.0a1.0.tar.bz2 these commands should work on most plat
forms including windows, as long as on windows you are using the mozillabuild bash shell.
Bytecodes
background spidermonkey bytecodes are the canonical
form of code representation that is used in the javascript engine.
...a frame on the stack has space for javascript values (the tagged value
format) in a few different categories.
JS::Compile
onst js::readonlycompileoptions &options, file *file, js::mutablehandlescript script); bool js::compile(jscontext *cx, js::handleobject obj, const js::readonlycompileoptions &options, const char *filename, js::mutablehandlescript script); name type description cx jscontext * pointer to a js context from which to derive runtime in
formation.
...this in
formation is included in error messages if an error occurs during compilation..
JS::CompileOptions
constructor js::readonlycompileoptions(); // added in spidermonkey 31 js::owningcompileoptions(jscontext *cx); // added in spidermonkey 31 js::compileoptions(jscontext *cx, jsversion version = jsversion_unknown); name type description cx jscontext * pointer to a js context from which to derive runtime in
formation.
... the web plat
form allows scripts to be loaded from arbitrary cross-origin sources.
JSErrorReport
describes the
format of a js error that is used either by the internal error reporting mechanism or by a user-defined error-reporting mechanism.
... ismuted bool the web plat
form allows scripts to be loaded from arbitrary cross-origin sources.
JSExnType
bound) jsexn_err error jsexn_internalerr internalerror jsexn_evalerr evalerror jsexn_rangeerr rangeerror jsexn_referenceerr referenceerror jsexn_syntaxerr syntaxerror jsexn_typeerr typeerror jsexn_urierr urierror jsexn_limit (upper bound) description these types are part of a jserror
formatstring structure.
... see also mxr id search for jsexntype jserror
formatstring bug 684526 ...
JSNewResolveOp
flags uint32_t obsolete since jsapi 31 flags giving contextual in
formation about the ongoing property access.
... description like jsresolveop, but flags provide contextual in
formation about the property access.
JS_DecompileFunction
syntax jsstring * js_decompilefunction(jscontext *cx, js::handle<jsfunction*> fun); name type description cx jscontext * pointer to a js context from which to derive runtime in
formation.
... description js_decompilefunction generates the complete source code of a function declaration from a function's compiled
form, fun.
JS_DeleteProperty
_deletepropertybyid(jscontext *cx, js::handleobject obj, js::handleid id, js::objectopresult &result); bool js_deleteucproperty(jscontext *cx, js::handleobject obj, const char16_t *name, size_t namelen, js::objectopresult &result); name type description cx jscontext * pointer to a js context from which to derive runtime in
formation.
... first, a property lookup is per
formed.
JS_DeleteProperty2
perty2(jscontext *cx, js::handleobject obj, const char16_t *name, size_t namelen, bool *succeeded); bool js_deletepropertybyid2(jscontext *cx, js::handleobject obj, js::handleid id, bool *succeeded); // added in spidermonkey 1.8.1 name type description cx jscontext * pointer to a js context from which to derive runtime in
formation.
... first, a property lookup is per
formed.
JS_EnumerateDiagnosticMemoryRegions
this article covers features introduced in spidermonkey 17 enumerate memory regions that contain diagnostic in
formation..
... description js_enumeratediagnosticmemoryregions enumerates memory regions that contain diagnostic in
formation intended to be included in crash report minidumps.
JS_GetFunctionArity
description js_getfunctionarity returns the number of
formal parameters of a function, fun.
...otherwise fun is implemented in javascript, and the result is the number of identifiers in its
formal parameter list (see ecma 262-3 §13).
JS_GetPropertyAttrsGetterAndSetter
unsigned int *attrsp, jsbool *foundp, jspropertyop *getterp, jspropertyop *setterp); jsbool js_getpropertyattrsgetterandsetterbyid(jscontext *cx, jsobject *obj, jsid id, unsigned int *attrsp, jsbool *foundp, jspropertyop *getterp, jspropertyop *setterp); // added in spidermonkey 1.8.1 name type description cx jscontext * the context in which to per
form the property lookup.
...for more in
formation about javascript getters and setters, see defining getters and setters.
JS_PopArguments
syntax void js_poparguments(jscontext *cx, void *mark); name type description cx jscontext * pointer to a js context from which to derive runtime in
formation.
...see also js_pusharguments js_convertvalue js_addargument
formatter js_convertarguments bug 542091 ...
JS_ReportErrorNumber
callback syntax typedef const jserror
formatstring * (* jserrorcallback)(void *userref, const unsigned errornumber); name type description userref void * the userref pointer that was passed to the reporterrornumber api.
...otherwise, if the jserror
formatstring returned by the jserrorcallback has .exntype == jsexn_none, then the error reporter, if any, is called, and no error object is created.
JS_SET_TRACING_DETAILS
this article covers features introduced in spidermonkey 1.8 set debugging in
formation about the next thing to be traced by a jstracer.
... description set debugging in
formation about a reference to a traceable thing to prepare for the following call to js_calltracer.
JS_SetFunctionCallback
using this function may have a significant per
formance impact.
... syntax void js_setfunctioncallback(jscontext *cx, jsfunctioncallback fcb); name type description cx jscontext * pointer to a js context from which to derive runtime in
formation.
JS_SetOptions
the
former creates a property on the global object.
... this enables compile-time scope chain resolution of consts (a per
formance optimization).
JS_TracerInit
cx jscontext * the context in which to per
form tracing.
...in the latter case, the only operations the callback may per
form on thing are to call js_tracechildren or the debug-only js_printtracethinginfo function.
JS_ValueToFunction
syntax jsfunction * js_valuetofunction(jscontext *cx, js::handlevalue v); jsfunction * js_valuetoconstructor(jscontext *cx, js::handlevalue v); name type description cx jscontext * the context in which to per
form the conversion.
...(implementation note: the actual conversion is per
formed by the object itself.
jsdouble
implementation note: spidermonkey has had several bugs involving details of floating-point arithmetic on various plat
forms.
...help in the
form of test cases, commentary, and patches is always appreciated.
SpiderMonkey 52
it continues to improve per
formance over previous spidermonkey releases.
... plat
form support migrating to spidermonkey 52 new javascript language features new c++ apis deleted apis api changes known issues ...
Running Automated JavaScript Tests
for a smoke test or if you are not changing language-level functionality, you may wish to use jstests.py path_to_js_shell --exclude=test262 other options allow you to show the test command lines being run, command output and return codes, run tests named in a given file, exclude tests named in a given file, hide the progress bar, change the timeout, run skipped tests, print output in tinderbox
format, run a test in the debugger, or run tests in valgrind.
... the jstests test suite also includes some tests from web-plat
form-tests.
XUL Accessibility
ccessible value searching specific element in neighbour of the element search inside the element subtree go up through parents (max level is 5) and search inside theirs subtrees if the element is anonymous then search in whole anonymous subtree, here the attribute anonid is used instead of id attribute accessible properties this section describes common rules how accessibility properties are
formed for xul elements.
...get tooltiptext attribute value if the aria role is used and it allows to have accessible value then aria-valuetext or aria-valuenow are used if the element is xlink then value is generated from link location actions if the element is xlink then jump action is exposed if the element has registered click event handler then click action is exposed xul elements notification used to display an in
formative message.
Accessibility API Implementation Details
we provide for them the support of these products on windows, linux/unix and os x plat
forms.at developmentthe accessibility of computer software has seen drastic improvements over the past two decades.
... x
forms accessibilitythis article provides a quick guide to how accessibility is handled in gecko for x
forms.xul accessibilitythis article shows how xul control elements are mapped to accessibility api.
Feed content access API
"feedtest_window"); var doc = win.document.wrappedjsobject; doc.open(); // write the html header and page title doc.write("<html><head><title>feed: " + feed.title.text + "</title></head><body>"); doc.write("<h1>" + feed.title.text + "</h1><p>"); var itemarray = feed.items; var numitems = itemarray.length; // write the article in
formation if (!numitems) { doc.write("<i>no news is good news!</i>"); } else { var i; var theentry; var theurl; var info; for (i=0; i<numitems; i++) { theentry = itemarray.queryelementat(i, components.interfaces.nsifeedentry); if (theentry) { theurl = doc.write('<b...
...the title is an nsifeedtextconstruct that can represent the text in various
formats; we get its text property to fetch the feed's title as html-encoded text.
Life After XUL: Building Firefox Interfaces with HTML
background: discussion of how to replace xul is ongoing within the plat
form team.
... problems / solutions: accessibility localization caching for working offline / pre-caching for snappy first run visual per
formance / jank security privacy operations tooling build process third-party library use and management ...
Places Expiration
this means on mobile and old systems expiration will be more aggressive than on high-end hardware, to try keep the database size at a reasonable (and per
formant) value.
...this ensures expiration doesn't lag behind without hitting per
formances when there is no need for it.
Using the Places favicon service
most of the time, the favicon will be served from the browser's cache and will have minimal per
formance impact.
...this allows efficient caching, since the default favicon will probably be cached in its decoded
form by the image library.
Using the Places livemark service
the expiration time for a livemark is determined by using in
formation provided by the server when the feed was requested, specifically nsicacheentryinfo.expirationtime.
... if no in
formation was provided by the server, the default expiration time is 1 hour.
The Publicity Stream API
activity is an object,
formatted as per the fixme: deadlinkactivity streams open specification.
...it is suggested that the list be processed and condensed into an attractive, cohesive
format for users (eg., multiple tweets show as 'adam tweeted 4 times').
XML Extras
not as just another document
format.
...the xml extras module is built by default on all plat
forms, and is included in the browser installers so it is available in the nightly builds.
Aggregating the In-Memory Datasource
that is, you want to reflect the contents of something as an rdf graph (presumably so that it can be aggregated with other in
formation or displayed as styled content).
... for more in
formation on writing a datasource, see the rdf datasource how-to document.
Binary compatibility
effectively, it is a different plat
form.
...for more in
formation on issues of componentization and binary compatibility, see http://mozilla.org/projects/xpcom/gl...ent_reuse.html .
Fun With XBL and XPConnect
the basic model of interaction is as follows: binding to the xpcom object the widget holds onto an xpcom object that is the auto complete engine that will per
form our auto complete lookups.
... <handlers> <handler type="keypress" keycode="vk_return" value="autocomplete(anonymouscontent[0].value, this.autocompletelistener);"/> </handlers> </implementation> </binding> original document in
formation author(s): scott macgregor last updated date: april 13, 2000 copyright in
formation: copyright (c) scott macgregor ...
Resources
weblock resources weblock installer and in
formation the sdk download linux: http://ftp.mozilla.org/pub/mozilla/releases/mozilla1.4a/gecko-sdk-i686-pc-linux-gnu-1.4a.tar.gz windows: http://ftp.mozilla.org/pub/mozilla/releases/mozilla1.4a/gecko-sdk-win32-1.4a.zip other mozilla downloads gecko resources internal string guide external string guide the gecko networking library ("necko") the netscape portable runtime environment embedding mozilla current module owners xpinstall xul xpcom resources the xpcom project page xulplanet's online xpcom reference in
formation on xpconnect and scriptab...
...distribution of the work or derivative of the work in any standard (paper) book
form is prohibited unless prior permission is obtained from the copyright holder.
Creating XPCOM components
or reading data processing the white list data iweblock method by method lock and unlock addsite removesite setsites getnext getsites hasmoreelements finishing the component using frozen interfaces copying interfaces into your build environment implementing the nsicontentpolicy interface receiving notifications implementing the nsicontentpolicy uni
form resource locators checking the white list creating nsiuri objects building the weblock ui user interface package list client code overview xul the xul document the locking ui site adding ui weblock.xul overlaying new user interface into mozilla weblockoverlay.xul other resources weblock.css image resources packaging weblock component installat...
...distribution of the work or derivative of the work in any standard (paper) book
form is prohibited unless prior permission is obtained from the copyright holder.
Making cross-thread calls using runnables
in the mozilla plat
form, most activities such as layout, dom operations, content javascript, and chrome javascript run on the main thread.
... however, it may be useful for c++ code in the mozilla plat
form to run tasks on another thread.
Components.ID
summary components.id is a constructor that creates native objects that con
form to the nsijsid interface.
... syntax var interfaceid = [ new ] components.id(iid); parameters iid a string of the
format '{00000000-0000-0000-0000-000000000000}' giving the interface id of the interface description components.id creates interface ids for use in implementing methods like queryinterface, getinterfaces, and other methods that take interface ids as parameters.
RbXPCOM
rbxpcom (ruby cross-plat
form com) provides bindings between the popular ruby programming language and xpcom.
... you can find additional in
formation using the resource links below.
xpcshell
see the xpcshell reference for in
formation on command line arguments and extension functions.
... read xpcshell:profiling for in
formation on how to profile scripts.
nsCStringEncoding
the conversion may result in loss and/or corruption of in
formation if the strings do not strictly contain ascii data.
...ns_cstring_encoding_native_filesystem conversion from utf-16 to the native filesystem charset may result in a loss of in
formation.
RefPtr
refptr (
formerly known as nsrefptr, see bug 1207245) is a general class to implement reference counting pointers for objects.
... but this is considered bad
form, and may soon be made a compile-time error.
IAccessible2
m ia2scrolltype scrolltype ); hresult scrolltopoint([in] enum ia2coordinatetype coordinatetype, [in] long x, [in] long y ); [propget] hresult states([out] accessiblestates states ); [propget] hresult uniqueid([out] long uniqueid ); [propget] hresult windowhandle([out] hwnd windowhandle ); methods attributes() returns the attributes specific to this iaccessible2 object, such as a cell's
formula.
...groupposition() returns grouping in
formation.
IAccessibleHypertext
other-licenses/ia2/accessiblehypertext.idlnot scriptable this interface exposes in
formation about hypertext in a document.
...the returned iaccessiblehyperlink object encapsulates the hyperlink and provides several kinds of in
formation describing it.
mozIStorageConnection
additionally, the system will be able to in
form you if you erroneously attempt to execute it synchronously.
... warning: per
forming synchronous io on the main thread can cause serious per
formance problems.
mozIStorageError
corrupt 11 the database on disk is mal
formed.
...
format 24 auxiliary database
format error.
nsIAppStartup
this can be used, for example, when doing per
formance testing of the startup process to discount numbers for tests that were interrupted by a user prompt.
... example this example logs startup time in
formation to the console.
nsIBidiKeyboard
note: this throws ns_error_not_implemented if the widget layer doesn't provide this in
formation.
...more info: bug 348724, bug 348724, and gnome bug: 116626 mac only islangrtl is supported on this plat
form.
nsIBinaryOutputStream
xpcom/io/nsibinaryoutputstream.idlscriptable this interface allows writing of primitive data types (integers, floating-point values, booleans, and so on.) to a stream in a binary, untagged, fixed-endianness
format.
... this might be used, for example, to implement network protocols or to produce architecture-neutral binary disk files, that is ones that can be read and written by both big-endian and little-endian plat
forms.
nsICacheEntryDescriptor
the strings do not have to con
form to any particular charset, but they must be null terminated.
...the strings do not have to con
form to any particular charset, but they must be null terminated.
nsIChannel
netwerk/base/nsichannel.idlscriptable this interface allows clients to construct 'get' requests for specific protocols, and manage them in a uni
form way.
... securityinfo nsisupports transport-level security in
formation (if any, else null) corresponding to the channel, normally presented through the interfaces nsitransportsecurityinfo and nsisslstatusprovider read only.
nsIChromeRegistry
chrome/public/nsichromeregistry.idlscriptable provides access to the chrome registry; you can use this to get in
formation about chrome documents that have been registered.
...convertchromeurl() resolves a chrome url to an loadable uri using the in
formation in the registry.
nsIConsoleMessage
inherits from: nsisupports last changed in gecko 1.7 implementations may provide an object that can be query interfaced, nsisupports.queryinterface(), to provide more specific message in
formation.
...attributes attribute type description message wstring the message in a string
format.
nsIConsoleService
logging a message with additional in
formation to include other in
formation an nsiconsolemessage object must be used.
... in this example nsiscripterror, which implements nsiconsolemessage, is used to include in
formation about the source file and line number of the error.
nsIContentSniffer
in
formation from the given request may be used in order to make a better decision.
... let conv = cc["@mozilla.org/intl/scriptableunicodeconverter"] .createinstance(ci.nsiscriptableunicodeconverter); conv.charset = charset; try { let str = conv.convertfrombytearray(adata, alength); if (str.substring(0, 5) == "%pdf-") return "application/pdf"; // we detected a pdf file } catch (e) { // try to get in
formation from arequest } ...
nsICookieManager2
this should consist only of the host portion of the uri and should not contain a leading dot, port number, or other in
formation.
...this should consist only of the host portion of the uri and should not contain a leading dot, port number, or other in
formation.
nsIDOMFile
the nsidomfile interface retrieves data from a file submitted to a
form using the input type "file".
... this allows the file reference to be saved when the
form is submitted while the user is using a web application offline, so that the data can be retrieved and uploaded once the internet connection is restored.
nsIDOMGeoPositionAddress
dom/interfaces/geolocation/nsidomgeopositionaddress.idlscriptable this interface describes the geographical address of a location, including street, city, and country in
formation, for example.
... this in
formation may or may not be available, depending on the geolocation service being used.
nsIDOMGeoPositionCoords
accuracy double the accuracy of position in
formation, in meters.
... altitudeaccuracy double the accuracy of altitude in
formation, in meters.
nsIDOMProgressEvent
dom/interfaces/events/nsidomprogressevent.idlscriptable this interface represents the events sent with progress in
formation while uploading data using the xmlhttprequest object.
... 1.0 66 introduced gecko 1.9.1 deprecated gecko 22 inherits from: nsidomevent last changed in gecko 1.9.1 (firefox 3.5 / thunderbird 3.0 / seamonkey 2.0) the nsidomprogressevent is used in the media elements (<video> and <audio>) to in
form interested code of the progress of the media download.
nsIDocShell
when reading a document, a converter is used to translate the text from its original
format into unicode.
... adocshell if the load was succesfully initiated, this receives the nsidocshell that actually per
formed the load.
nsIDownload
has the
form of twelve alphanumeric characters.
... mimeinfo nsimimeinfo provides the targets relevant mime in
formation, including its mime type, helper application, and whether or not the helper should be executed automatically once the download is complete.
nsIDownloadProgressListener
astatus the new state in
formation for the download.
... astatus the new state in
formation for the download.
nsIEnvironment
note: * for unix/linux plat
forms we follow the unix definition: an environment variable exists when getenv() returns a non-null value.
... for non-unix/linux plat
forms we have to fall back to a "portable" definition (which is incorrect for unix/linux!!!!) which simply checks whether the string returned by get() is empty or not.
nsIFaviconService
afaviconloadtype one of nsifaviconservice.favicon_load_private or nsifaviconservice.favicon_load_non_private to indicate that any network requests per
formed should act like ones from a private browsing context (ie.
...this should be determined via privatebrowsingutils.iswindowprivate(somerelatedwindow) if the favicon may expose the user's private browsing data by per
forming a network request, otherwise favicon_load_non_private may be used.
nsIFeed
it includes attributes that provide in
formation about the feed, as well as access to the items or entries in the feed.
... textinput nsiwritablepropertybag2 in
formation about a text box that can be displayed along with the feed by aggregators that support it, to allow the reader to send a response back to the source of the feed.
nsIFeedProgressListener
void handleentry( in nsifeedentry entry, in nsifeedresult result ); parameters entry pointer to an nsifeedentry containing in
formation about the entry that was just processed.
... result pointer to an nsifeedresult containing the current in
formation about the feed being processed.
nsIFeedResult
stylesheet nsiuri an xslt stylesheet available to trans
form the source of the feed.
... some feeds include this in
formation in a processing instruction.
nsIFileProtocolHandler
note: under some plat
forms this is a lossy conversion.
... note: callers should use geturlspecfromactualfile() if possible, for per
formance reasons.
nsIGeolocationProvider
1.0 66 introduced gecko 1.9.1 inherits from: nsisupports last changed in gecko 1.9.2 (firefox 3.6 / thunderbird 3.1 / fennec 1.0) this must be called on the main thread interface provides location in
formation to the nsgeolocator via the nsidomgeolocationcallback interface.
...the nsigeolocationprovider interface provides in
formation about the current users location to interested parties via nsigeolocationupdate.
nsIGlobalHistory3
docshell/base/nsiglobalhistory3.idlscriptable this interface provides in
formation about global history to gecko.
...this function is preferred to nsiglobalhistory2.adduri() because it provides more in
formation (including the redirect destination, channels involved, and redirect flags) to the history implementation.
nsIINIParserWriter
nsiiniparserwriter xpcom/ds/nsiiniparser.idlscriptable allows writing to an ini-
format configuration file.
... 1.0 66 introduced gecko 1.9.2 inherits from: nsisupports last changed in gecko 13.0 (firefox 13.0 / thunderbird 13.0 / seamonkey 2.10) this interface provides methods that allow writing to ini-
format configuration files.
nsIJSID
js/src/xpconnect/idl/xpcjsid.idlscriptable this interface provides in
formation about a contract or interface.
...void initialize( in string idstring ); parameters idstring the number to initialize the jsid, in string
format, e.g.
nsIJumpListBuilder
see nsijumplistitem for in
formation on adding additional jump list types.
... constants constant value description jumplist_category_tasks 0 tasks are common actions per
formed by users within the application.
nsILivemarkService
ns_error_mal
formed_uri if the site uri annotation has somehow been corrupted (and can't be turned into an nsiuri) getlivemarkidforfeeduri() determines whether the feed uri is a currently registered livemark.
... ns_error_mal
formed_uri if the site uri annotation has somehow been corrupted (and can't be turned into an nsiuri) islivemark() this method determines whether the folder with the given folder id identifies a livemark container.
nsILocaleService
return value the user's os setting for preferred locale in the
format described in nsilocale.
...nsilocale getlocalefromacceptlanguage( in string acceptlanguage ); parameters acceptlanguage locale preference in the same
format as the accept-language http header.
nsILoginManagerIEMigrationHelper
1.0 66 introduced gecko 1.9 inherits from: nsisupports last changed in gecko 1.9 (firefox 3) method overview void migrateandaddlogin(in nsilogininfo alogin); methods migrateandaddlogin() takes a login provided from nsieprofilemigrator, migrates it to the current login manager
format, and adds it to the list of stored logins.
... note: in some cases, multiple logins may be created from a single input when the
format is ambiguous.
nsIMIMEInputStream
methods addheader() adds an additional header to the stream on the
form "name: value".
... example var postdata = components.classes["@mozilla.org/network/mime-input-stream;1"] .createinstance(components.interfaces.nsimimeinputstream); postdata.addheader("content-type", "application/x-www-
form-urlencoded"); postdata.addcontentlength = true; postdata.setdata(stringstream); ...
nsIMarkupDocumentViewer
obsolete since gecko 6.0 bidicontrolstextmode octet the order of bidirectional text in
form controls.
... bidisupport octet whether to use plat
form bidi support or mozilla's bidi support 1 - use mozilla's bidi support 2 - use the plat
form bidi support 3 - disable bidi support.
nsIMemoryMultiReporterCallback
1.0 66 introduced gecko 7.0 inherits from: nsisupports last changed in gecko 7.0 (firefox 7.0 / thunderbird 7.0 / seamonkey 2.4) method overview void callback(in acstring process, in autf8string path, in print32 kind, in print32 units, in print64 amount, in autf8string description, in nsisupports closure); methods callback() called to provide in
formation from a multi-reporter.
... implement this method to handle the report in
formation.
nsIMicrosummaryGenerator
for generators installed via nsisidebar.addmicrosummarygenerator(), this uri is a urn of the
form urn:source:<url>, where <url> is the remote location from which we installed the generator.
... for generators installed via some other mechanism (for example an extension that dynamically creates generators), this uri is a urn in a
form of the extension's own choosing, with the only restriction being that the uri be globally unique.
nsIModule
registerself() when the nsimodule is discovered, this method will be called so that any setup registration can be pre
formed.
... unregisterself() when the nsimodule is being unregistered, this method will be called so that any unregistration can be pre
formed.
nsIMsgDBHdr
it is also mandatory to set msghdr.folder.msgdatabase = null after per
forming this kind of operations to prevent leaking.
...thunderbird provides a utility function which per
forms this for the currently selected message: markcurrentmessageasread().
nsIMsgDatabase
erview void open(in nsilocalfile afoldername, in boolean acreate, in boolean aleaveinvaliddb); void forcefolderdbclosed(in nsimsgfolder afolder); void close(in boolean aforcecommit); void commit(in nsmsgdbcommit committype); void forceclosed(); void clearcachedhdrs; void resethdrcachesize(in unsigned long size); nsimsgdbhdr getmsghdrforkey(in nsmsgkey key); nsimsgdbhdr getmsghdr
formessageid(in string messageid); boolean containskey(in nsmsgkey key); nsimsgdbhdr createnewhdr(in nsmsgkey key); void addnewhdrtodb(in nsimsgdbhdr newhdr, in boolean notify); nsimsgdbhdr copyhdrfromexistinghdr(in nsmsgkey key, in nsimsgdbhdr existinghdr, in boolean addhdrtodb); void listallkeys(in nsmsgkeyarrayref outputkeys); native code only!
... void forceclosed(); clearcachedhdrs() void clearcachedhdrs(); resethdrcachesize() void resethdrcachesize(in unsigned long size); getmsghdrforkey() nsimsgdbhdr getmsghdrforkey(in nsmsgkey key); parameters key getmsghdr
formessageid() nsimsgdbhdr getmsghdr
formessageid(in string messageid); parameters messageid containskey() returns whether or not this database contains the given key.
nsIMsgMessageService
objects that implements nsimsgmessageservice give the user top level routines related to messages like copying, displaying, attachment's manipulation, printing, streaming the message content to eml
format string, etc.
... displaymessageforprinting() when you want a message displayed in a
format that is suitable for printing.
nsINavBookmarkObserver
onfolderchanged() obsolete since gecko 1.9 (firefox 3) notify this observer that a bookmark folder's in
formation has changed.
... onitemchanged() this method notifies this observer that an item's in
formation has changed.
nsINavHistoryFullVisitResultNode
this includes more detailed in
formation than the result_type_visit query (which returns nsinavhistoryvisitresultnode, and as such takes more time to look up.
... 1.0 66 introduced gecko 1.9 inherits from: nsinavhistoryvisitresultnode last changed in gecko 1.9 (firefox 3) the in
formation returned in this interface is not commonly used, hence its separation into a separate query type for efficiency.
nsINavHistoryResult
when you close the root node the result will stop observing changes, so it is good practice to close the root node when you are done with a result, since that will avoid unwanted per
formance hits.
...this is used to prevent rapid flickering of changes when per
forming batch or temporary operations on the result structure.
nsIPromptService
for more in
formation on out parameters and javascript refer to working with out parameters.
...ean promptpassword(in nsidomwindow aparent, in wstring adialogtitle, in wstring atext, inout wstring apassword, in wstring acheckmsg, inout boolean acheckstate); boolean select(in nsidomwindow aparent, in wstring adialogtitle, in wstring atext, in pruint32 acount, [array, size_is(acount)] in wstring aselectlist, out long aoutselection); constants the following flags are combined to
form the abuttonflags parameter passed to confirmex.
nsIProtocolHandler
current versions of firefox assume that the uri has uri_loadable_by_anyone set, but this will not work starting with the mozilla 2 plat
form.
...if this is null, then utf-8 encoding is assumed and no character trans
formation is not per
formed.
nsIProtocolProxyService
netwerk/base/public/nsiprotocolproxyservice.idlscriptable this interface provides methods to access in
formation about various network proxies.
...proxy auto config (pac) may per
form a synchronous dns query, which may not return immediately.
nsIProxyInfo
constant value description transparent_proxy_resolves_host 1 << 0 this flag is set if the proxy is to per
form name resolution itself.
... if this is the case, the hostname is used in some fashion, and we shouldn't do any
form of dns lookup ourselves.
nsIResumableChannel
entityid in
formation about the file, to match before obtaining the file.
...entityid in
formation about the file, to match before obtaining the file.
nsISHEntry
docshell/shistory/public/nsishentry.idlscriptable each document or subframe in session history will have a nsishentry associated with it which will hold all in
formation required to recreate the document from history.
... layouthistorystate nsilayouthistorystate layouthistorystate for scroll position and
form values.
nsISHistory
to access individual history entries of the enumerator, per
form the following steps: call getshistoryenumerator() to obtain handle the nsisimpleenumerator object.
... per
form a queryinterface on the object returned by step #2 to nsishentry.
nsIScreen
widget/nsiscreen.idlscriptable this interface provides in
formation about a display screen.
...this will only have an effect on plat
forms that support screen rotation.
nsIScreenManager
widget/public/nsiscreenmanager.idlscriptable this interface lets you get in
formation about the display screen (or screens) attached to the user's computer.
...this pointer's definition is specific to the plat
form's native widget implementation, and is typically of the same type as ns_native_window.
nsISearchEngine
search
form astring a url string pointing to the engine's search
form.
... getsubmission() gets a nsisearchsubmission object that contains in
formation about what to send to the search engine, including the uri and postdata, if applicable.
nsISecurityCheckedComponent
inherits from: nsisupports last changed in gecko 1.7 capability strings in gecko, a "capability" is a string identifying a set of actions that code is allowed to per
form.
...code that has the "universalbrowserread" capability is allowed to per
form certain actions that allow it to read in
formation from the local system.
nsISound
if you wish to use this method for playing sounds, you should check the plat
form before you call playsystemsound().
...various event names are provided, which will result in playing the corresponding sound effect on the plat
form the user is running on: _moz_mailbeep the system sound when the system receives email.
nsIStreamConverter
first of all the stream converter implementation must register itself with the component manager using a contractid in the
format below.
...stream converter contractid
format (the stream converter root key is defined in this file): @mozilla.org/streamconv;1?from=from_mime_type&to=to_mime_type method overview void asyncconvertdata(in string afromtype, in string atotype, in nsistreamlistener alistener, in nsisupports actxt); nsiinputstream convert(in nsiinputstream afromstream, in string afromtype, in string atotype, in nsisupports actxt); methods asyncconvertdata() asynchronous version: converts data arriving via the converter's nsistreamlistener.ondataavailable() method from one type to another, pushing the converted data out to the caller via alistener::ondataavailable().
nsITelemetry
toolkit/components/telemetry/nsitelemetry.idlscriptable a service to gather per
formance data that can be tracked over time to allow generating histograms.
... example you can find detailed in
formation on adding a new telemetry probe and recording telemetry data at adding a new telemetry probe [en-us].
nsITreeSelection
layout/xul/base/src/tree/public/nsitreeselection.idlscriptable this interface is used by the tree widget to get in
formation about what is selected.
...timedselect() per
form a timed select.
nsIURIFixupInfo
keywordprovidername astring the keyword search provider name expected to provide a keyword search; empty string if no keyword search is per
formed.
... keywordassent astring the keyword used for the search (post trimming etc.); empty string if no keyword search is per
formed.
nsIVersionComparator
see here: nsixulappinfo components.utils.import("resource://gre/modules/services.jsm"); var curentbrowserversion = services.appinfo.plat
formversion; //example: '31.*' var comparetothisversion = '25.*'; var compareresult = services.vc.compare(curentbrowserversion, comparetothisversion); if (compareresult == -1) { //currentbrowserversion is less than '25.*' (comparetothisversion) } else if (compareresult == 0) { //currentbrowserversion is '25.*' (comparetothisversion) } else if (compareresult == 1) { //currentbrowserversio...
...n is greater than '25.*' (comparetothisversion) } else { //will never get here as services.vc.compare only returns -1, 0, or 1 } see also toolkit version
format ...
nsIWebNavigationInfo
docshell/base/nsiwebnavigationinfo.idlscriptable exposes a way to get in
formation on the capabilities of gecko web navigation objects.
... return value returns one of the support type constants, indicating whether or not the specified mime type is supported, and in what
form that support exists.
nsIWifiAccessPoint
netwerk/wifi/nsiwifiaccesspoint.idlscriptable this interface provides in
formation about a single access point.
...this string is in the
format "xx-xx-xx-xx-xx-xx".
nsIXULTemplateQueryProcessor
some queries may not need the reference variable if the syntax or the
form of the data implies the value.
...a breadth-first search of the first action is per
formed to find this element.
XPCOM Interface Reference by grouping
dom device nsidomgeogeolocation nsidomgeoposition nsidomgeopositionaddress nsidomgeopositioncallback nsidomgeopositioncoords nsidomgeopositionerror nsidomgeopositionerrorcallback nsidomgeopositionoptions nsidomglobalpropertyinitializer element nsidomchromewindow nsidomclientrect nsidomelement nsidomhtmlaudioelement nsidomhtml
formelement nsidomhtmlmediaelement nsidomhtmlsourceelement nsidomhtmltimeranges nsidomjswindow nsidomnode nsidomnshtmldocument nsidomstorageitem nsidomstoragemanager nsidomwindow nsidomwindow2 nsidomwindowinternal nsidomwindowutils nsidynamiccontainer nsieditor event nsidomevent nsidomeventgroup nsidomeventlistener nsidome...
... nsixsltexception nsixsltprocessor download nsidownload nsidownloadmanager nsidownloadprogresslistener element internal nsiworker nsiworkerglobalscope nsiworkermessageevent nsiworkermessageport nsiworkerscope tree nsitreeboxobject nsitreecolumn nsitreecolumns nsitreecontentview nsitreeselection nsitreeview x
form nsix
formsmodelelement nsix
formsnsinstanceelement nsix
formsnsmodelelement xmlhttprequest nsixmlhttprequesteventtarget favicon nsifavicondatacallback nsifaviconservice frame nsichromeframemessagemanager nsiframeloader nsiframeloaderowner nsiframemessagelistener nsiframemessagemanager interface nsijsxmlhttprequest ...
Setting HTTP request headers
in addition to the actual content, some important in
formation is passed with http headers for both http requests and responses.
... for more in
formation about notifications framework and a list of common notification topics, see observer notifications.
Frequently Asked Questions
it's not in your code, or it's not on your plat
form, but there's an nscomptr on the line where the error is and you're suspicious.
...[see initialization and assignment for more details] you should note, though, that there is a small per
formance penalty for this.
Using nsIPasswordManager
to do so securely, they can use nsipasswordmanager, which provides for secure storage of sensitive password in
formation.
...of this in
formation, the password is the only data that will be stored securely.
XPIDL Syntax
lexically, tokens are delimited by whitespace (defined here as spaces, tabs, vertical tabs,
form feeds, line feeds, and carriage returns, or [ \t\v\f\r\n] in regular expression
form).
...*("," attribute) "]" attribute = (identifier / const) ["(" (identifier / iid) ")"] param = [attributes] ("in" / "out" / "inout") identifier identifier number = number / identifier number /= "(" number ")" number /= "-" number number /= number ("+" / "-" / "*") number number /= number ("<<" / >>") number number /= number "|" number ; lexical tokens, i'm going to specify these in regex
form number = /-?\d+|0x[0-9a-fa-f]+/ cdata = /%{[ ]*c\+\+[ ]*\n(.*?\n?)%}[ ]*(c\+\+)?/s include = /\#include[ \t]+"[^"\n]+"/ nativeid = /[^()\n]+(?=\))/ iid = /[0-9a-fa-f]{8}-[0-9a-fa-f]{4}-[0-9a-fa-f]{4}-[0-9a-fa-f]{12}/ identifier = /unsigned long long|unsigned short|unsigned long|long long|[a-za-z][a-za-z_0-9]*/ ...
Test-Info
each task generates one or more json-
formatted data files providing detailed in
formation on tests run in continuous integration, typically broken down by bugzilla component.
...test-info has several sub-commands; the "report" sub-command is used by the test-info tasks mozilla-central$ mach help test-info report to reproduce test-info(all): mozilla-central$ mach test-info report --show-tests --show-summary --show-activedata running test-info on try to run these tasks on try, use something like: mach try fuzzy -q test-info contact in
formation test-info is maintained by :gbrown.
Testing Mozilla code
more in
formation on how asan works can be found on the address sanitizer wiki.
... this job only runs on linux64, which is the plat
form best suited to running valgrind.
Cached compose window FAQ
the upside is that is has been a major per
formance win why did you do this?
... any new window per
formance problems that mozilla has are especially painful in mail compose, as we need to create a new compose window on every new mail message or reply.
Mail event system
in its implementation of onintpropertychanged, it uses this in
formation to update the message count in the dialog.
... notifypropertychanged then broadcasts this event to the mail session: mailsession->onintpropertychanged(this, ktotalmessagesatom, 4, 5); the mail session rebroadcasts this in
formation to each of the global listeners that has been registered with it.
The libmime module
there is one header file and one source file for each class (for example, the mimeinlinetext class is defined in "mimetext.h" and "mimetext.c".) each header file follows the following boiler-plate
form: typedefs these come first to avoid circular dependencies.
... its name must be of the
form "<class>initialize", and it should initialize the various method slots in the class as appropriate.
Adding items to the Folder Pane
this data is returned in the
form of an array of folder-tree-items.
...must persist over sessions text (attribute) the text to display in the tree level (attribute) the level in the tree to display the item at open (rw, attribute) whether or not this container is open children (attribute) an array of child items also con
forming to this spec getproperties (function) a call from getrowproperties or getcellproperties for this item will be passed into this function command (function) this function will be called when the item is double-clicked for our example extension, two different types of folder-tree-items will be defined.
Theme Packaging
see the install.rdf reference for more in
formation: em:id em:version em:type em:targetapplication em:name em:internalname optional install.rdf properties em:description em:creator em:contributor em:homepageurl em:updateurl note that if your theme will be made available on the https://addons.mozilla.org website, it may not include an updateurl.
... structure of an installable bundle: describes the common structure of installable bundles, including extensions, themes, and xulrunner applications extension packaging: specific in
formation about how to package extensions theme packaging: specific in
formation about how to package themes multiple-item extension packaging: specific in
formation about multiple-item extension xpis xul application packaging: specific in
formation about how to package xulrunner applications chrome registration ...
Thunderbird extensions
see developer.thunderbird.net for newer in
formation.
...learn more about gloda: an overview of gloda how to create your first message query and read the gloda examples gloda internals: gloda debugging, gloda indexing more thunderbird-specific links some links may be out of date, but they still provide valuable in
formation on the codebase.
Virtualenv
for more in
formation on virtualenv in general, see the virtualenv web site.
... the mozilla build system mostly uses .pth files instead of the more typically used python setup.py develop or python setup.py install to install python modules in to the virtualenv's python path due to per
formance concerns (although such functionality is available via the setup.py keyword in a packages.txt file).
CType
these objects have assorted methods and properties that let you create objects of these types, find out in
formation about them, and so forth.
...the
format of this string is "type " + name.
js-ctypes reference
it is obtained by by loading the ctypes module: components.utils.import("resource://gre/modules/ctypes.jsm"); you can use the ctypes object to load libraries, construct types, and per
form miscellaneous tasks such as type casting.
... other features error-handling js-ctypes supports both errno (on all plat
forms) and getlasterror (on windows plat
forms).
Constants - Plugins
version feature constants npvers constant: version feature in
formation value description npvers_has_streamoutput 8 streaming data.
... npvers_has_
form_values 15 nppv
formvalue nppvariables are supported.
Memory - Plugins
since npn_memalloc automatically frees cached in
formation if necessary to fulfill a request for memory, calls to npn_memalloc may succeed where direct calls to newptr fail.
...for communicator 4.0 and later versions, this function is not necessary for the mac os plat
form; npn_memalloc now per
forms memory flushing internally.
Plugin Roadmap for Firefox - Plugins
plugins are a security and per
formance problem for firefox users.
... in order to improve security and per
formance, mozilla will maintain a list of sites which cannot use any plugins.
Color vision simulation - Firefox Developer Tools
the simulator in the accessibility inspector in firefox developer tools lets you see what a web page would look like to users with various
forms of color vision deficiency (better known as "color blindness"), as well as contrast sensitivity loss.
...the most common
forms of color blindness (commonly lumped together as "red-green color blindness") affect more men than women, because they are due to a mutation in a gene in the x chromosome, which men usually have only one copy of.
Browser Console - Firefox Developer Tools
so it logs the same sorts of in
formation as the web console - network requests, javascript, css, and security errors and warnings, and messages explicitly logged by javascript code.
... however, rather than logging this in
formation for a single content tab, it logs in
formation for all content tabs, for add-ons, and for the browser's own code.
Set event listener breakpoints - Firefox Developer Tools
selecting this and then choosing some events to break on will mean that when you step through code, in
formation about events fired will be logged to the console instead of the devtools breaking on each one.
...see set a breakpoint > inline variable preview for more in
formation.
UI Tour - Firefox Developer Tools
in the screenshot below there are three breakpoints: line 82 has a normal breakpoint and execution is paused here line 85 has a logpoint which logs the contents of tablerow to the console line 100 has a conditional breakpoint the third column shows more in
formation about the breakpoints.
... source maps: enabled by default, this option directs the debugger to load the original versions of files, and map them to the generated ones loaded in a page, to ease debugging of transl
formed sources.
Debugger.Object - Firefox Developer Tools
the hostannotations accessor consults the embedding for additional in
formation about the referent that might be of interest to the debugger.
... theframe argument is the current stack frame, whose code is about to per
form the operation on the object being reported.
Inspecting web sockets - Firefox Developer Tools
each frame expands on click, so you can inspect the
formatted data.
... columns in the response pane in the response pane, you can choose to show the following in
formation about each frame: data size time opcode maskbit finbit the data and time columns are visible by default, but you can customize the interface to see more columns by choosing which ones to show from the context menu that is opened by right-clicking in the table header.
Throttling - Firefox Developer Tools
the characteristics emulated are: download speed upload speed minimum latency the table below lists the numbers associated with each network type, but please do not rely on this feature for exact per
formance measurements; it's intended to give an approximate idea of the user experience in different conditions.
...kbps 250 kbps 100 good 3g 1.5 mbps 750 kbps 40 regular 4g/lte 4 mbps 3 mbps 20 dsl 2 mbps 1 mbps 5 wi-fi 30 mbps 15 mbps 2 network monitor features the following articles cover different aspects of using the network monitor: toolbar network request list network request details network traffic recording per
formance analysis ...
Network Monitor - Firefox Developer Tools
when it first opens, the network monitor does not show request in
formation.
... ui overview the ui is divided into four main pieces: the main screen contains the toolbar, the network request list, and the network request details pane: the per
formance analysis view is a separate screen: working with the network monitor the following articles cover different aspects of using the network monitor: toolbar network request list network request details network traffic recording per
formance analysis throttling ...
Edit fonts - Firefox Developer Tools
variable fonts, or opentype font variations, define a new font file
format that allows the font designer to include multiple variations of a typeface inside a single font file.
... variable fonts make it easy to vary font characteristics in a much more granular fashion because their allowable ranges are defined by axes of variation (see introducing the 'variation axis' for more in
formation).
Flame Chart - Firefox Developer Tools
the flame chart shows you the state of the javascript stack for your code at every millisecond during the per
formance profile.
... we can also see that two of the green markers are for selectionsort() and quicksort(), but we're also seeing calls to plat
form (gecko) code in between our calls to the sorting functions.
Tips - Firefox Developer Tools
if no filename is included, the file name will be in this
format: screen shot date at time.png the --fullpage parameter is optional.
... network monitor click the request summary to compare per
formance of cache vs.
Validators - Firefox Developer Tools
html tidy html tidy is a tool that can be used to report errors in an html page and to
format web pages for better reading.
... accessibility services lynx viewer checks a web page using lynx visualization and allows validation of accessibility features original document in
formation last updated date: august 16th, 2002 copyright © 2001-2003 netscape.
AnalyserNode.fftSize - Web APIs
the fftsize property of the analysernode interface is an unsigned long value and represents the window size in samples that is used when per
forming a fast fourier trans
form (fft) to get frequency domain data.
...for more complete applied examples/in
formation, check out our voice-change-o-matic demo (see app.js lines 128–205 for relevant code).
AnalyserNode.frequencyBinCount - Web APIs
for technical reasons related to how the fast fourier trans
form is defined, it is always half the value of analysernode.fftsize.
...for more complete applied examples/in
formation, check out our voice-change-o-matic demo (see app.js lines 128–205 for relevant code).
AnalyserNode.getByteTimeDomainData() - Web APIs
the getbytetimedomaindata() method of the analysernode interface copies the current wave
form, or time-domain, data into a uint8array (unsigned byte array) passed into it.
...for more complete applied examples/in
formation, check out our voice-change-o-matic demo (see app.js lines 128–205 for relevant code).
AnalyserNode.getFloatFrequencyData() - Web APIs
if you need higher per
formance and don't care about precision, you can use analysernode.getbytefrequencydata() instead, which works on a uint8array.
... for more complete applied examples/in
formation, check out our voice-change-o-matic-float-data demo (see the source code too).
AnalyserNode.getFloatTimeDomainData() - Web APIs
the getfloattimedomaindata() method of the analysernode interface copies the current wave
form, or time-domain, data into a float32array array passed into it.
...for more complete applied examples/in
formation, check out our voice-change-o-matic-float-data demo (see the source code too).
Animation.commitStyles() - Web APIs
it will cause the end styling state to be written to the element being animated, in the
form of properties inside a style attribute.
... examples const divelem = document.queryselector('div'); document.body.addeventlistener('mousemove', evt => { let anim = divelem.animate( { trans
form: `translate(${ evt.clientx}px, ${evt.clienty}px)` }, { duration: 500, fill: 'forwards' } ); anim.commitstyles(); }); specifications specification status comment web animationsthe definition of 'commitstyles()' in that specification.
Attr - Web APIs
schematypeinfo read only the type in
formation associated with this attribute.
... while the type in
formation contained in this attribute is guaranteed to be correct after loading the document or invoking document.normalizedocument, this property may not be reliable if the node was moved.
AudioConfiguration - Web APIs
properties the audioconfiguration dictionary is made up of four audio properties, including: contenttype: a valid audio mime type, for in
formation on possible values and what they mean, see the web audio codec guide.
... } }; // check support and per
formance navigator.mediacapabilities.decodinginfo(mediaconfig).then(result => { console.log('this configuration is ' + (result.supported ?
AudioWorkletProcessor.process - Web APIs
a node that trans
forms its input.
... a node that trans
forms its input, but has a so-called tail-time — this means that it will produce an output for some time even after its inputs are disconnected or are inactive (producing zero-channels).
AuthenticatorAssertionResponse.authenticatorData - Web APIs
the authenticatordata property of the authenticatorassertionresponse interface returns an arraybuffer containing in
formation from the authenticator such as the relying party id hash (rpidhash), a signature counter, test of user presence, user verification flags, and any extensions processed by the authenticator.
...this is a sequence of bytes with the following
format: aaguid (16 bytes) - authenticator attestation globally unique identifier, a unique number that identifies the model of the authenticator (not the specific instance of the authenticator) so that a relying party can understand the characteristics of the authenticator by looking up its metadata statement.
BaseAudioContext.createOscillator() - Web APIs
the createoscillator() method of the baseaudiocontext interface creates an oscillatornode, a source representing a periodic wave
form.
...for applied examples/in
formation, check out our violent theremin demo (see app.js for relevant code); also see our oscillatornode page for more in
formation.
BaseAudioContext - Web APIs
baseaudiocontext.createoscillator() creates an oscillatornode, a source representing a periodic wave
form.
... baseaudiocontext.createperiodicwave() creates a periodicwave, used to define a periodic wave
form that can be used to determine the output of an oscillatornode.
BasicCardResponse - Web APIs
the first of these three (supportedinstruments in the example below) contains a data property that has to con
form to the structure defined by the basiccardrequest dictionary.
...this has to con
form to the structure defined by the basiccardresponse dictionary, and may look something like this: { "cardnumber' : '9999999999999999", "cardholdername' : 'mr.
BeforeInstallPromptEvent - Web APIs
beforeinstallpromptevent.plat
forms read only returns an array of domstring items containing the plat
forms on which the event was dispatched.
... example window.addeventlistener("beforeinstallprompt", function(e) { // log the plat
forms provided as options in an install prompt console.log(e.plat
forms); // e.g., ["web", "android", "windows"] e.userchoice.then(function(choiceresult) { console.log(choiceresult.outcome); // either "accepted" or "dismissed" }, handleerror); }); ...
Blob.text() - Web APIs
the data is always presumed to be in utf-8
format.
... usage notes the filereader method readastext() is an older method that per
forms a similar function.
Body - Web APIs
body.
formdata() takes a response stream and reads it to completion.
... it returns a promise that resolves with a
formdata object.
CSSMediaRule - Web APIs
syntax the syntax is described using the webidl
format.
...it has the following specific property: cssmediarule.media read only specifies a medialist representing the intended destination medium for style in
formation.
CSSStyleValue.parse() - Web APIs
example the code below parses a set of declarations for the trans
form property.
... const css = cssstylevalue.parse( 'trans
form', 'translate3d(10px,10px,0) scale(0.5)'); csstrans
formvalue {0: csstranslate, 1: cssscale, length: 2, is2d: false} specifications specification status comment css typed om level 1the definition of 'parse()' in that specification.
Cache.delete() - Web APIs
if set to true, the ?value=bar part of http://foo.com/?value=bar would be ignored when per
forming a match.
... ignorevary: a boolean that, when set to true, tells the matching operation not to per
form vary header matching.
Cache.keys() - Web APIs
if set to true, the ?value=bar part of http://foo.com/?value=bar would be ignored when per
forming a match.
... ignorevary: a boolean that, when set to true, tells the matching operation not to per
form vary header matching.
Cache.match() - Web APIs
for example, if set to true the ?value=bar part of http://foo.com/?value=bar would be ignored when per
forming a match.
... ignorevary: a boolean that when set to true tells the matching operation not to per
form vary header matching — i.e.
Cache - Web APIs
see deleting old caches for more in
formation.
... note: in chrome, visit chrome://inspect/#service-workers and click on the "inspect" link below the registered service worker to view logging statements for the various actions the service-worker.js script is per
forming.
CacheStorage.match() - Web APIs
for example, if set to true, the ?value=bar part of http://foo.com/?value=bar would be ignored when per
forming a match.
... ignorevary: a boolean that, when set to true, tells the matching operation not to per
form vary header matching.
CanvasPattern - Web APIs
canvaspattern.settrans
form() applies an svgmatrix or dommatrix representing a linear trans
form to the pattern.
... living standard added settrans
form() method in v5.
CanvasRenderingContext2D.getImageData() - Web APIs
this method is not affected by the canvas's trans
formation matrix.
... you can find more in
formation about getimagedata() and general manipulation of canvas contents in pixel manipulation with canvas.
CanvasRenderingContext2D.isPointInPath() - Web APIs
syntax ctx.ispointinpath(x, y [, fillrule]); ctx.ispointinpath(path, x, y [, fillrule]); parameters x the x-axis coordinate of the point to check, unaffected by the current trans
formation of the context.
... y the y-axis coordinate of the point to check, unaffected by the current trans
formation of the context.
CanvasRenderingContext2D.putImageData() - Web APIs
this method is not affected by the canvas trans
formation matrix.
... you can find more in
formation about putimagedata() and general manipulation of canvas contents in the article pixel manipulation with canvas.
A basic ray-caster - Web APIs
the canvas overview and tutorial i found here at mdn are great, but nobody had written about animation yet, so i thought i'd try a port of a basic raycaster i'd worked on a while ago, and see what sort of per
formance we can expect from a javascript-controlled pixel buffer.
... results the canvas in safari 2.0.1 per
formed surprisingly well.
Hit regions and accessibility - Web APIs
« previousnext » the <canvas> element on its own is just a bitmap and does not provide in
formation about any drawn objects.
...see aria and aria techniques for more in
formation.
ClipboardEvent.clipboardData - Web APIs
the clipboardevent.clipboarddata property holds a datatransfer object, which can be used: to specify what data should be put into the clipboard from the cut and copy event handlers, typically with a setdata(
format, data) call; to obtain the data to be pasted from the paste event handler, typically with a getdata(
format) call.
... see the cut, copy, and paste events documentation for more in
formation.
Clipboard API - Web APIs
the specification refers to this as the 'async clipboard api.' clipboardevent secure context represents events providing in
formation related to modification of the clipboard, that is cut, copy, and paste events.
... clipboarditem secure context represents a single item
format, used when reading or writing data.
console.assert() - Web APIs
syntax console.assert(assertion, obj1 [, obj2, ..., objn]); console.assert(assertion, msg [, subst1, ..., substn]); // c-like message
formatting parameters assertion any boolean expression.
...this parameter gives you additional control over the
format of the output.
Console.info() - Web APIs
the console.info() method outputs an in
formational message to the web console.
...this gives you additional control over the
format of the output.
console.log() - Web APIs
this gives you additional control over the
format of the output.
... there's more in
formation in the chrome console api reference about this and other functions.
Console API - Web APIs
the console api provides functionality to allow developers to per
form debugging tasks, such as logging messages or the values of variables at set points in your code, or timing how long an operation takes to complete.
...find out about these at: google chrome devtools implementation safari devtools implementation usage is very simple — the console object — available via window.console, or workerglobalscope.console in workers; accessible using just console — contains many methods that you can call to per
form rudimentary debugging tasks, generally focused around logging various values to the browser's web console.
Content Index API - Web APIs
for more in
formation see the service worker api.
... // reference registration const registration = await navigator.serviceworker.ready; // feature detection if ('index' in registration) { // content index api functionality const contentindex = registration.index; } adding to the content index here we're declaring an item in the correct
format and creating an asynchronous function which uses the add() method to register it with the content index.
ConvolverNode - Web APIs
the convolvernode interface is an audionode that per
forms a linear convolution on a given audiobuffer, often used to achieve a reverb effect.
... note: for more in
formation on the theory behind linear convolution, see the convolution article on wikipedia.
CredentialsContainer.preventSilentAccess() - Web APIs
mediation varies by origin, and is an added check point of browser stored credentials, in
forming a user of an account login status.
... this method is typically called after a user signs out of a website, ensuring this user's login in
formation is not automatically passed on the next site visit.
Crypto.getRandomValues() - Web APIs
to guarantee enough per
formance, implementations are not using a truly random number generator, but they are using a pseudo-random number generator seeded with a value with enough entropy.
...user agents are instead urged to provide the best entropy they can when generating random numbers, using a well-defined, efficient pseudorandom number generator built into the user agent itself, but seeded with values taken from an external source of pseudorandom numbers, such as a plat
form-specific random number function, the unix /dev/urandom device, or other source of random or pseudorandom data.
DOMMatrixReadOnly.translate() - Web APIs
examples this svg contains two squares, one red and one blue, each positioned at the document origin: <svg width="250" height="250" viewbox="0 0 50 50"> <rect width="25" height="25" fill="red" /> <rect id="trans
formed" width="25" height="25" fill="blue" /> </svg> the following javascript first creates an identity matrix, then uses the translate() method to create a new, translated matrix — which is then applied to the blue square as a trans
form.
... const matrix = new dommatrixreadonly().translate(25, 25); document.queryselector('#trans
formed').setattribute('trans
form', matrix.tostring()); screenshotlive sample specifications specification status comment geometry interfaces module level 1the definition of 'dommatrixreadonly.translate()' in that specification.
DOMPoint - Web APIs
in the following snippet, the pose of the xr device (such as a vr headset or phone with ar capabilities) can be retrieved by calling using xrframe.getviewerpose() during an xrsession animation frame, then accessing the resulting xrpose's trans
form property, which contains two dompointreadonly attributes: position as a vector and orientation as a quaternion.
... function onxrframe(time, xrframe) { let viewerpose = xrframe.getviewerpose(xrreferencespace); if (viewerpose) { let position = viewerpose.trans
form.position; let orientation = viewerpose.trans
form.orientation; console.log('xr viewer position: {x: ' + roundtotwo(position.x) + ', y: ' + roundtotwo(position.y) + ', z: ' + roundtotwo(position.z)); console.log('xr viewer orientation: {x: ' + roundtotwo(orientation.x) + ', y: ' + roundtotwo(orientation.y) + ', z: ' + roundtotwo(orientation.z) + ', w: ' + roundtotwo(orientation.w)); } } specifications specification status comment ...
DOMPointInit - Web APIs
this is the vertical coordinate, and barring any trans
forms applied to the coordinate system, positive values are downward and negative values upward toward the top of the screen.
... dompointinit.z an unrestricted floating-point value which gives the point's z-coordinate, which is (assuming no trans
formations that alter the situation) the depth coordinate; positive values are closer to the user and negative values retreat back into the screen.
Binary strings - Web APIs
the size of the data so represented is twice as big as it would be in normal binary
format, however this will not be visible to the final user, since the length of javascript strings is calculated using two bytes as the unit.
...however, this is slow and error-prone, due to the need for multiple conversions (especially if the binary data is not actually byte-
format data, but, for example, 32-bit integers or floats).
DataTransfer.mozSetDataAt() - Web APIs
data should be added in order of preference, with the most specific
format added first and the least specific
format added last.
... if data of the given
format already exists, it is replaced in the same position as the old data.
DataTransfer.mozTypesAt() - Web APIs
the datatransfer.moztypesat() method returns a list of the
format types that are stored for an item at the specified index.
... return value nsivariant a list of data
formats (which are strings).
DisplayMediaStreamConstraints.video - Web APIs
more precise control over the
format of the returned video track may be exercised by instead providing a mediatrackconstraints object, which is used to process the video data after obtaining it from the device but prior to adding it to the stream.
... if a boolean is specified, a value of true (the default) indicates that the stream returned by getdisplaymedia() should be in whatever
format the user agent feels is best.
DisplayMediaStreamConstraints - Web APIs
processing in
formation is specified using mediatrackconstraints objects providing options which are applied to the track after the media data is received but before it is made available on the mediastream.
...optionally, a mediatrackconstraints object may be given, providing options specifying processing to be per
formed on the video data before adding it to the stream.
Document.createNSResolver() - Web APIs
this adapter works like the dom level 3 method lookupnamespaceuri on nodes in resolving the namespaceuri from a given prefix using the current in
formation available in the node's hierarchy at the time lookupnamespaceuri is called.
...to match default elements in a non-null namespace, you either have to refer to a particular element using a
form such as *namespace-uri()=http://www.w3.org/1999/xhtml and name()=p[@id='_myid'] (this approach works well for dynamic xpath expressions where the namespaces might not be known) or use prefixed name tests, and create a namespace resolver mapping the prefix to the namespace.
Document.createProcessingInstruction() - Web APIs
target is a string containing the first part of the processing instruction (i.e., <?target … ?>) data is a string containing any in
formation the processing instruction should carry, after the target.
... obsolete added note that the namespace of the target name is not checked whether it is well-
formed, defined what is considered an illegal character for the target name and specified the returned processinginstruction object more precisely.
Document.evaluate() - Web APIs
generally, more specific xpath selectors as in the above example usually gives a significant per
formance improvement, especially on very large documents.
...if the "." was left out (leaving //h2) the query would start from the root node (html) which would be more wasteful.) see introduction to using xpath in javascript for more in
formation.
Document.implementation - Web APIs
syntax domimpobj = document.implementation; example var modname = "html"; var modver = "2.0"; var con
formtest = document.implementation.hasfeature( modname, modver ); alert( "dom " + modname + " " + modver + " supported?: " + con
formtest ); // alerts with: "dom html 2.0 supported?: true" if dom level 2 html module is supported.
... a list of module names (e.g., core, html, xml, etc.) is available in the dom level 2 con
formance section.
Document.lastModified - Web APIs
alert(document.lastmodified); // returns: tuesday, december 16, 2017 11:09:42 trans
forming lastmodified into a date object this example trans
forms lastmodified into a date object.
... let olastmodif = new date(document.lastmodified); trans
forming lastmodified into milliseconds this example trans
forms lastmodified into the number of milliseconds since january 1, 1970, 00:00:00, local time.
Document.requestStorageAccess() - Web APIs
when the promise gets resolved, the resolve handler will run as if a user gesture is being processed, whether the promise was fulfilled or rejected: in the
former case, code can then start to call apis that require user activation and things can move forward.
... in the latter case, code can run to in
form the user of why the request failed and what they can do to continue (for example asking them to log in, if that is a requirement).
Document.write() - Web APIs
more in
formation is available in the w3c xhtml faq.
...for more in
formation, refer to intervening against document.write().
How to create a DOM tree - Web APIs
dom trees can be queried using xpath expressions, converted to strings or written to a local or remote files using xmlserializer (without having to first convert to a string), posted to a web server (via xmlhttprequest), trans
formed using xslt, xlink, converted to a javascript object through a jxon algorithm, etc.
...another application is that, since xul is xml, the ui of your application can be dynamically manipulated, downloaded, uploaded, saved, loaded, converted, or trans
formed quite easily.
EXT_float_blend - Web APIs
for more in
formation, see also using extensions in the webgl tutorial.
... examples const gl = canvas.getcontext('webgl2'); // enable necessary extensions gl.getextension('ext_color_buffer_float'); gl.getextension('ext_float_blend'); const tex = gl.createtexture(); gl.bindtexture(gl.texture_2d, tex); // use floating point
format gl.teximage2d(gl.texture_2d, 0, gl.rgba32f, 1, 1, 0, gl.rgba, gl.float, null); const fb = gl.createframebuffer(); gl.bindframebuffer(gl.framebuffer, fb); gl.framebuffertexture2d(gl.framebuffer, gl.color_attachment0, gl.texture_2d, tex, 0); // enable blending gl.enable(gl.blend); gl.drawarrays(gl.points, 0, 1); // won't throw gl.invalid_operation with the extension enabled specifications ...
EXT_shader_texture_lod - Web APIs
for more in
formation, see also using extensions in the webgl tutorial.
...ampler, vec4 p, vec2 dpdx, vec2 dpdy) vec4 texturecubegradext(samplercube sampler, vec3 p, vec3 dpdx, vec3 dpdy) examples enabling the extensions: gl.getextension('ext_shader_texture_lod'); shader code that avoids artifacts when wrapping texture coordinates: <script type="x-shader/x-fragment"> #extension gl_ext_shader_texture_lod : enable #extension gl_oes_standard_derivatives : enable uni
form sampler2d mytexture; varying vec2 texcoord; void main(){ gl_fragcolor = texture2dgradext(mytexture, mod(texcoord, vec2(0.1, 0.5)), dfdx(texcoord), dfdy(texcoord)); } </script> specifications specification status comment ext_shader_texture_lodthe definition of 'ext_shader_texture_lod' in that specification.
Element.attributes - Web APIs
to be more specific, attributes is a key/value pair of strings that represents any in
formation regarding that attribute.
....hasattributes()) { var attrs = paragraph.attributes; var output = ""; for(var i = attrs.length - 1; i >= 0; i--) { output += attrs[i].name + "->" + attrs[i].value; } result.value = output; } else { result.value = "no attributes to show"; } } </script> </head> <body> <p id="paragraph" style="color: green;">sample paragraph</p> <
form action=""> <p> <input type="button" value="show first attribute name and value" onclick="listattributes();"> <input id="result" type="text" value=""> </p> </
form> </body> </html> specifications specification status comment domthe definition of 'element.attributes' in that specification.
Element: blur event - Web APIs
bubbles no cancelable no interface focusevent event handler property onblur sync / async sync composed yes examples simple example html <
form id="
form"> <input type="text" placeholder="text input"> <input type="password" placeholder="password"> </
form> javascript const password = document.queryselector('input[type="password"]'); password.addeventlistener('focus', (event) => { event.target.style.background = 'pink'; }); password.addeventlistener('blur', (event) => { event.target.style.background = ''; }); result event de...
... html <
form id="
form"> <input type="text" placeholder="text input"> <input type="password" placeholder="password"> </
form> javascript const
form = document.getelementbyid('
form');
form.addeventlistener('focus', (event) => { event.target.style.background = 'pink'; }, true);
form.addeventlistener('blur', (event) => { event.target.style.background = ''; }, true); result specifications specification status comment ui events working draft added info that this event is composed.
Element: focus event - Web APIs
bubbles no cancelable no interface focusevent event handler property onfocus sync / async sync composed yes examples simple example html <
form id="
form"> <input type="text" placeholder="text input"> <input type="password" placeholder="password"> </
form> javascript const password = document.queryselector('input[type="password"]'); password.addeventlistener('focus', (event) => { event.target.style.background = 'pink'; }); password.addeventlistener('blur', (event) => { event.target.style.background = ''; }); result event de...
... html <
form id="
form"> <input type="text" placeholder="text input"> <input type="password" placeholder="password"> </
form> javascript const
form = document.getelementbyid('
form');
form.addeventlistener('focus', (event) => { event.target.style.background = 'pink'; }, true);
form.addeventlistener('blur', (event) => { event.target.style.background = ''; }, true); result specifications specification status comment ui events working draft added info that this event is composed.
Element.scrollHeight - Web APIs
for example: html <
form name="registration"> <p> <textarea id="rules">lorem ipsum dolor sit amet, consectetur adipiscing elit.
... </textarea> </p> <p> <input type="checkbox" id="agree" name="accept" /> <label for="agree">i agree</label> <input type="submit" id="nextstep" value="next" /> </p> </
form> css #notice { display: inline-block; margin-bottom: 12px; border-radius: 5px; width: 600px; padding: 5px; border: 2px #7fdf55 solid; } #rules { width: 600px; height: 130px; padding: 5px; border: #2a9f00 solid 2px; border-radius: 5px; } javascript function checkreading () { if (checkreading.read) { return; } checkreading.read = this.scrollheight - this.scrollt...
Element.tagName - Web APIs
this string's capitalization depends on the document type: for dom trees which represent html documents, the returned tag name is always in the canonical upper-case
form.
... example html <span id="born">when i was born...</span> javascript var span = document.getelementbyid("born"); console.log(span.tagname); in xhtml (or any other xml
format), the original case will be maintained, so "span" would be output in case the original tag name was created lowercase.
FileError - Web APIs
constant value description encoding_err 5 the url is mal
formed.
... invalid_state_err 7 the operation cannot be per
formed on the current state of the interface object.
FileException - Web APIs
constant value description encoding_err 5 the url is mal
formed.
... invalid_state_err 7 the operation cannot be per
formed on the current state of the interface object.
FileSystemEntry.getMetadata() - Web APIs
} the filesystementry interface's method getmetadata() obtains a metadata object with in
formation about the file system entry, such as its modification date and time and its size.
...receives a single input parameter: a metadata object with in
formation about the file.
FileSystemEntrySync - Web APIs
it includes methods for working with files—including copying, moving, removing, and reading files—as well as in
formation about the file it points to—including the file name and its path from the root to the entry.
...for more in
formation, see the article on basic concepts.
Guide to the Fullscreen API - Web APIs
note that the fullscreenchange event doesn't provide any in
formation itself as to whether the document is entering or exiting fullscreen mode, but if the document has a non null fullscreenelement, you know you're in fullscreen mode.
... other in
formation the document provides some additional in
formation that can be useful when developing fullscreen web applications: documentorshadowroot.fullscreenelement the fullscreenelement property tells you the element that's currently being displayed fullscreen.
Gamepad API - Web APIs
it contains three interfaces, two events and one specialist function, to respond to gamepads being connected and disconnected, and to access other in
formation about the gamepads themselves, and what buttons and other controls are currently being pressed.
... see also the extensions to the gamepad interface, for features that allow you to access the above in
formation.
GeolocationCoordinates.longitude - Web APIs
javascript the javascript code below creates an event listener so that when the user clicks on a button, the location in
formation is retrieved and displayed.
...when the user clicks the button, we'll fetch and display the location in
formation.
GeolocationPositionError.code - Web APIs
the following values are possible: value associated constant description 1 permission_denied the acquisition of the geolocation in
formation failed because the page didn't have the permission to do it.
... 3 timeout the time allowed to acquire the geolocation, defined by positionoptions.timeout in
formation that was reached before the in
formation was obtained.
GeolocationPositionError - Web APIs
the following values are possible: value associated constant description 1 permission_denied the acquisition of the geolocation in
formation failed because the page didn't have the permission to do it.
... 3 timeout the time allowed to acquire the geolocation, defined by positionoptions.timeout in
formation was reached before the in
formation was obtained.
GlobalEventHandlers.onerror - Web APIs
}) event of type errorevent contains all the in
formation about the event and the error.
... notes when an error occurs in a script, loaded from a different origin, the details of the error are not reported to prevent leaking in
formation (see bug 363897).
HTMLCanvasElement.mozOpaque - Web APIs
if the canvas knows there's no translucency, painting per
formance can be optimized.
...for example, you could conditionally set it to true if mimetype == 'image/jpeg', or similar, to gain per
formance in your application when translucency is not needed.
HTMLCanvasElement - Web APIs
if the canvas knows there's no translucency, painting per
formance can be optimized.
... htmlcanvaselement.todataurl() returns a data-url containing a representation of the image in the
format specified by the type parameter (defaults to png).
HTMLDialogElement.returnValue - Web APIs
examples the following example displays a button to open a <dialog> containing a
form via the showmodal() method.
... <!-- simple pop-up dialog box containing a
form --> <dialog id="favdialog"> <
form method="dialog"> <p><label>favorite animal: <select name="favanimal" required> <option></option> <option>brine shrimp</option> <option>red panda</option> <option>spider monkey</option> </select> </label></p> <menu> <button>cancel</button> <button>confirm</button> </menu> </
form> </dialog> <menu> <button id="updatedetails">update details</button> </menu> <script> (function() { var updatebutton = document.getelementbyid('updatedetails'); var dialog = document.getelementbyid('favdialog'); dialog.returnvalue = 'favanimal'; ...
HTMLElement: transitioncancel event - Web APIs
see globaleventhandlers.ontransitioncancel for more in
formation.
...ueryselector('.transition'); transition.ontransitioncancel = () => { console.log('transition canceled'); }; live example in the following example, we have a simple <div> element, styled with a transition that includes a delay: <div class="transition"></div> <div class="message"></div> .transition { width: 100px; height: 100px; background: rgba(255,0,0,1); transition-property: trans
form background; transition-duration: 2s; transition-delay: 2s; } .transition:hover { trans
form: rotate(90deg); background: rgba(255,0,0,0); } to this, we'll add some javascript to indicate that the transitionstart, transitionrun, transitioncancel and transitionend events fire.
HTMLFieldSetElement - Web APIs
htmlfieldsetelement.
formread only an html
formcontrolscollection 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.
HTMLFontElement.color - Web APIs
the obsolete htmlfontelement.color property is a domstring that reflects the color html attribute, containing either a named color or a color specified in the hexadecimal #rrggbb
format.
... the
format of the string must follow one of the following html microsyntaxes: microsyntax description examples valid name color string nameofcolor (case insensitive) green green green valid hex color string in rgb
format: #rrggbb #008000 rgb using decimal values rgb(x,x,x) (x in 0-255 range) rgb(0,128,0) syntax colorstring = fontobj.color; fontobj.color = colorstring; examples // assumes there is <font id="f"> element in the html var f = document.getelementbyid("f"); f.color = "green"; specifications the <font> tag is not supported in html5 and as a result neither is <font>.color.
HTMLHtmlElement.version - Web APIs
this property has been declared as deprecated by the w3c technical recommendation for html 4.01 in favor of use of the dtd for obtaining version in
formation for a document.
... returns version in
formation about the document type definition (dtd) of a document.
HTMLHtmlElement - Web APIs
this property should not be used any more as it is non-con
forming.
... recommendation the version element has been removed, as it is non-con
forming.
HTMLImageElement.longDesc - Web APIs
the obsolete property longdesc on the htmlimageelement interface specifies the url of a text or html file which contains a long-
form description of the image.
... syntax descurl = htmlimageelement.longdesc; htmlimageelement.longdesc = descurl; value a domstring which may be either an empty string (indicating that no long description is available) or the url of a file containing a long
form description of the image's contents.
HTMLImageElement.srcset - Web APIs
otherwise, the condition descriptor may take one of two
forms: to indicate that the image resource specified by the image candidate string should be used when the image is being rendered with a particular width in pixels, provide a width descriptor comprised the number giving that width in pixels followed by the lower case letter "w".
... for more in
formation on what image
formats are available for use in the <img> element, see image file type and
format guide.
HTMLInputElement.setSelectionRange() - Web APIs
note that accordingly to the whatwg
forms spec selectionstart, selectionend properties and setselectionrange method apply only to inputs of types text, search, url, tel and password.
... selectiondirection optional a string indicating the direction in which the selection is considered to have been per
formed.
HTMLIsIndexElement - Web APIs
htmlisindexelement.
form read only is a html
formelement representing the <
form> element it belongs too.
... it can have the null value, if <isindex> isn't part of any
form.
HTMLLabelElement - Web APIs
htmllabelelement.
form read only is a html
formelement object representing the
form with which the labeled control is associated, or null if there is no associated control, or if that control isn't associated with a
form.
... in other words, this is just a shortcut for htmllabelelement.control.
form.
HTMLLinkElement - Web APIs
the htmllinkelement interface represents reference in
formation for external resources and the relationship of those resources to a document and vice-versa (corresponds to <link> element; not to be confused with <a>, which is represented by htmlanchorelement).
... htmllinkelement.media is a domstring representing a list of one or more media
formats to which the resource applies.
HTMLMediaElement.seekToNextFrame() - Web APIs
this method lets you access frames of video media without the media being per
formed in real time.
... firefox 49 returns undefined instead of a promise, and per
forms the seek operation synchronously.
HTMLOptionElement - Web APIs
htmloptionelement.
form read only is a html
formelement representing the same value as the
form of the corresponding <select> element, if the option is a descendant of a <select> element, or null if none is found.
... the
form property can be the null value.
HTMLStyleElement - Web APIs
to manipulate css, see using dynamic styling in
formation for an overview of the objects used to manipulate specified css properties using the dom.
... htmlstyleelement.media is a domstring representing the intended destination medium for style in
formation.
HTMLTimeElement.dateTime - Web APIs
the htmltimeelement.datetime property is a domstring that reflects the datetime html attribute, containing a machine-readable
form of the element's date and time value.
... the
format of the string must follow one of the following html microsyntaxes: microsyntax description examples valid month string yyyy-mm 2011-11, 2013-05 valid date string yyyy-mm-dd 1887-12-01 valid yearless date string mm-dd 11-12 valid time string hh:mm hh:mm:ss hh:mm:ss.mmm 23:59 12:15:47 12:15:52.998 valid local date and time string yyyy-mm-dd hh:mm yyyy-mm-dd hh:mm:ss yyyy-mm-dd hh:mm:ss.mmm yyyy-mm-ddthh:mm yyyy-mm-ddthh:mm:ss yyyy-mm-ddthh:mm:ss.mmm 2013-12-25 11:12 1972-07-25 13:43:07 1941-03-15 07:06:23.678 2013-12-25t11:12 1972-07-25t13:43:07 1941-03-15t07:06:23.678 valid time-zone offset string z +hhmm +hh:mm ...
HTMLTrackElement - Web APIs
this element can be used as a child of either <audio> or <video> to specify a text track containing in
formation such as closed captions or subtitles.
...if you need to be able to per
form any processing on the track after the <track> is set up, you should instead ensure that the track's mode is either hidden (if you don't want it to start out being presented to the user) or showing (to initially display the track).
HTMLVideoElement.msIsLayoutOptimalForPlayback - Web APIs
syntax htmlvideoelement.msislayoutoptimalforplayback: domstring; value boolean value set to true indicates that video is being rendered optimally (better per
formance and using less battery power).
... if false, improvements can be made to optimize per
formance.
Headers - Web APIs
the headers interface of the fetch api allows you to per
form various actions on http request and response headers.
...for more in
formation see guard.
History - Web APIs
for more in
formation, see working with the history api.
...for more in
formation, see working with the history api.
IDBDatabase.transaction() - Web APIs
mode optional the types of access that can be per
formed in the transaction.
... if you need to open the object store in readwrite mode to change data, you would use the following: var transaction = db.transaction('my-store-name', "readwrite"); as of firefox 40, indexeddb transactions have relaxed durability guarantees to increase per
formance (see bug 1112702), which is the same behaviour as other indexeddb-supporting browsers.
IDBFactory.open() - Web APIs
the method returns an idbopendbrequest object immediately, and per
forms the open operation asynchronously.
... note: you can find out more in
formation on the different available storage types, and how firefox handles client-side data storage, at browser storage limits and eviction criteria.
IDBObjectStore.createIndex() - Web APIs
any sorting operations per
formed on the data via key ranges will then obey sorting rules of that locale (see locale-aware sorting.) you can specify its value in one of three ways: string: a string containing a specific locale code, e.g.
... auto: the plat
form default locale will be used (may be changed by user agent settings.) null or undefined: if no locale is specified, normal javascript sorting will be used — not locale-aware.
IDBRequest - Web APIs
the request object does not initially contain any in
formation about the result of the operation, but once in
formation becomes available, an event is fired on the request, and the in
formation becomes available through the properties of the idbrequest instance.
...if an error occurs while per
forming the operation, the exception is made available through the result property and an error event is fired (idbrequest.onerror).
IDBTransaction - Web APIs
firefox durability guarantees note that as of firefox 40, indexeddb transactions have relaxed durability guarantees to increase per
formance (see bug 1112702.) previously in a readwrite transaction idbtransaction.oncomplete was fired only when all data was guaranteed to have been flushed to disk.
... version_change "versionchange" (2 in chrome) allows any operation to be per
formed, including ones that delete and create object stores and indexes.
IdleDeadline.didTimeout - Web APIs
idle callbacks support the concept of a timeout in order to ensure that whatever task they're meant to per
form actually happens, even if the user agent never has enough idle time available.
... your callback will typically check the value of didtimeout if it needs to per
form an action even if the browser is too busy to grant you the time; you should react by per
forming the needed task or, ideally, a minimal amount of work that can be done to keep things moving along, then schedule a new callback to try again to get the rest of the work done.
InputEvent() - Web APIs
inputeventinitoptional is a inputeventinit dictionary, having the following fields: inputtype: (optional) a string specifying the type of change for editible content such as, for example, inserting, deleting, or
formatting text.
... datatransfer: (optional) a datatransfer object containing in
formation about richtext or plaintext data being added to or removed from editible content.
InputEvent.inputType - Web APIs
possible changes include for example inserting, deleting, and
formatting text.
...there are many possible values, such as inserttext, deletecontentbackward, insertfrompaste, and
formatbold.
InputEvent - Web APIs
inputevent.datatransferread only returns a datatransfer object containing in
formation about richtext or plaintext data being added to or removed from editable content.
... inputevent.inputtyperead only returns the type of change for editable content such as, for example, inserting, deleting, or
formatting text.
compareVersion - Web APIs
note that the registry pathname is not the location of the software on the computer; it is the location of in
formation about the software inside the client version registry.
... version an installversion object containing version in
formation or a string in the
format major.minor.release.build, where major, minor, release, and build are integer values representing version in
formation.
InstallTrigger - Web APIs
the principal method on the installtrigger object is install, which downloads and installs one or more software packages archived in the xpi file
format.
... the following is a basic example of an install trigger on a web page: xpi={'xpinstall dialog display name':'simple.xpi'}; installtrigger.install(xpi); you can also use the installtrigger object to install netscape 6/mozilla skins and language packs, and per
form multiple-package installations with install.
IntersectionObserver.rootMargin - Web APIs
each side of the rectangle represented by rootmargin is added to the corresponding side in the root element's bounding box before the intersection test is per
formed.
... syntax var marginstring = intersectionobserver.rootmargin; value a string,
formatted similarly to the css margin property's value, which contains offsets for one or more sides of the root's bounding box.
InterventionReportBody - Web APIs
an intervention report is generated when usage of a feature in a web document has been blocked by the browser for reasons such as security, per
formance, or user annoyance.
... message a string containing a human-readable description of the intervention, including in
formation such how the intervention could be avoided.
KeyboardEvent.code - Web APIs
* (math.pi/180); position.x += (math.sin(rad) * offset); position.y -= (math.cos(rad) * offset); if (position.x < 0) { position.x = 399; } else if (position.x > 399) { position.x = 0; } if (position.y < 0) { position.y = 399; } else if (position.y > 399) { position.y = 0; } } the refresh() function handles applying the rotation and position by using an svg trans
form.
... function refresh() { let x = position.x - (shipsize.width/2); let y = position.y - (shipsize.height/2); let trans
form = "translate(" + x + " " + y + ") rotate(" + angle + " 15 15) "; spaceship.setattribute("trans
form", trans
form); } finally, the addeventlistener() method is used to start listening for keydown events, acting on each key by updating the ship position and rotation angle, then calling refresh() to draw the ship at its new position and angle.
KeyframeEffect.target - Web APIs
it per
forms as both a getter and a setter, except with animations and transitions generated by css.
... examples in the follow the white rabbit example, whiterabbit sets the target element to be animated: var whiterabbit = document.getelementbyid("rabbit"); var rabbitdownkeyframes = new keyframeeffect( whiterabbit, [ { trans
form: 'translatey(0%)' }, { trans
form: 'translatey(100%)' } ], { duration: 3000, fill: 'forwards' } ); // returns <div id="rabbit">click the rabbit's ears!</div> rabbitdownkeyframes.target; specifications specification status comment web animationsthe definition of 'keyframeeffect' in that specification.
LargestContentfulPaint - Web APIs
examples the following example shows how to create a per
formanceobserver that listens for largest-contentful-paint entries and logs the lcp value to the console.
...// https://bugs.webkit.org/show_bug.cgi?id=209216 try { let lcp; const po = new per
formanceobserver((entrylist) => { const entries = entrylist.getentries(); const lastentry = entries[entries.length - 1]; // update `lcp` to the latest value, using `rendertime` if it's available, // otherwise using `loadtime`.
LayoutShift - Web APIs
layoutshift.sources returns an array of layoutshiftattribution objects with in
formation on the elements that were shifted.
...// https://bugs.webkit.org/show_bug.cgi?id=209216 try { let cumulativelayoutshiftscore = 0; const observer = new per
formanceobserver((list) => { for (const entry of list.getentries()) { // only count layout shifts without recent user input.
LocalFileSystem - Web APIs
for example, if you were to create a mail app, you might create a temporary storage for caching assets (like images and attachments) to speed up per
formance, while creating persistent storage for unique data—such as drafts of emails that were composed while offline—that should not be lost before they are backed up into the cloud.
...for more in
formation about restrictions, see the basic concepts article.
MSCandidateWindowShow - Web APIs
this event fires after the positioning in
formation of the ime candidate window has been determined.
... you can obtain the positioning in
formation using the getcandidatewindowclientrect method, and adjust your layout as needed to avoid any occlusions with the ime candidate window.
MediaCapabilitiesInfo - Web APIs
the mediacapabilitiesinfo interface of the media capabilities api is made available when the promise returned by the mediacapabilities.encodinginfo() or mediacapabilities.decodinginfo() methods of the mediacapabilities interface fulfills, providing in
formation as to whether the media type is supported, and whether encoding or decoding such media would be smooth and power efficient.
... example // mediaconfiguration to be tested const mediaconfig = { type : 'file', audio : { contenttype : "audio/ogg", channels : 2, bitrate : 132700, samplerate : 5200 }, }; // check support and per
formance navigator.mediacapabilities.decodinginfo(mediaconfig).then(result => { // result contains the media capabilities in
formation console.log('this configuration is ' + (result.supported ?
MediaDevices.getUserMedia() - Web APIs
see security for more in
formation on this and other security issues related to using getusermedia().
... while in
formation about a user's cameras and microphones are inaccessible for privacy reasons, an application can request the camera and microphone capabilities it needs and wants, using additional constraints.
MediaDevices.ondevicechange - Web APIs
there is no in
formation about the change included in the event object; to get the updated list of devices, you'll have to use enumeratedevices().
...this method is called any time we want to fetch the current list of media devices and then update the displayed lists of audo and video devices using that in
formation.
MediaDevices - Web APIs
enumeratedevices() obtains an array of in
formation about the media input and output devices available on the system.
... getsupportedconstraints() returns an object con
forming to mediatracksupportedconstraints indicating which constrainable properties are supported on the mediastreamtrack interface.
MediaError.message - Web APIs
the read-only property mediaerror.message returns a domstring which contains a human-readable string offering specific diagnostic details related to the error described by the mediaerror object, or an empty string ("") if no diagnostic in
formation can be determined or provided.
...borted: s += "the user canceled the audio."; break; case mediaerror.media_err_network: s+= "a network error occurred while fetching the audio."; break; case mediaerror.media_err_decode: s+= "an error occurred while decoding the audio."; break; case mediaerror.media_err_src_not_supported: s+= "the audio is missing or is in a
format not supported by your browser."; break; default: s += "an unknown error occurred."; break; } let message = err.message; if (message && message.length) { s += " " + message; } displayerrormessage("<strong>error " + err.code + ":</strong> " + s + "<br>"); }; this gets the mediaerror object describing the error from the error property o...
msExtendedCode - Web APIs
the element's error property will then contain an msextendedcode read-only property with plat
form-specific error code in
formation.
... value type: long; the plat
form specific error code.
MediaError - Web APIs
mediaerror.message a domstring object containing a human-readable string which provides specific diagnostic in
formation to help the reader understand the error condition which occurred; specifically, it isn't simply a summary of what the error code means, but actual diagnostic in
formation to help in understanding what exactly went wrong.
... this text and its
format is not defined by the specification and will vary from one user agent to another.
MediaKeySystemConfiguration - Web APIs
the mediakeysystemconfiguration dictionary holds configuration in
formation about the media key system in use.
...an initialization data type is a string indicating the
format of the initialization data.
MediaRecorder.onerror - Web APIs
notsupportederror an attempt was made to instantiate a mediarecorder using a mime type that isn't supported on the user's device; one or more of the requested container, codecs, or profiles as well as other in
formation may be invalid.
... example this example creates a new mediarecorder instance and starts recording using the user agent's default media
format.
MediaSession.metadata - Web APIs
the metadata property of the mediasession interface contains a mediametadata object providing descriptive in
formation about the currently playing media, or null if the metadata has not been set.
... syntax var mediametadata = navigator.mediasession.metadata; navigator.mediasession.metadata = mediametadata; value an instance of mediametadata containing in
formation about the media currently being played.
MediaTrackConstraints.deviceId - Web APIs
because rtp doesn't include this in
formation, tracks associated with a webrtc rtcpeerconnection will never include this property.
...however, the value of the deviceid is determined by the source of the track's content, and there's no particular
format mandated by the specification (although some kind of guid is recommended).
MediaTrackConstraints.latency - Web APIs
because rtp doesn't include this in
formation, tracks associated with a webrtc rtcpeerconnection will never include this property.
...in most cases, low latency is desirable for per
formance and user experience purposes, but when power consumption is a concern, or delays are otherwise acceptable, higher latency might be acceptable.
MediaTrackSettings.deviceId - Web APIs
because rtp doesn't include this in
formation, tracks associated with a webrtc rtcpeerconnection will never include this property.
... the actual value of the string, however, is determined by the source of the track, and there is no guarantee what
form it will take, although the specification does recommend it be a guid.
MediaTrackSupportedConstraints - Web APIs
an object con
forming to mediatracksupportedconstraints is returned by mediadevices.getsupportedconstraints().
...instead, the specified constraints will be applied, with any unrecognized constraints stripped from the request.that can lead to confusing and hard to debug errors, so be sure to use getsupportedconstraints() to retrieve this in
formation before attempting to establish constraints if you need to know the difference between silently ignoring a constraint and a constraint being accepted.
MerchantValidationEvent.complete() - Web APIs
the merchantvalidationevent method complete() takes merchant-specific in
formation previously received from the validationurl and uses it to validate the merchant.
...another payment request is currently being processed, the current payment request is not currently being displayed to the user, or payment in
formation is currently being updated.
MessageEvent - Web APIs
examples in our basic shared worker example (run shared worker), we have two html pages, each of which uses some javascript to per
form a simple calculation.
... the different scripts are using the same worker file to per
form the calculation — they can both access it, even if their pages are running inside different windows.
Microdata DOM API - Web APIs
you can't use them anymore and this document is kept as in
formation only.
... microdata becomes even more useful when scripts can use it to expose in
formation to the user, for example offering it in a
form that can be used by other applications.
MimeType - Web APIs
the mimetype interface provides contains in
formation about a mime type associated with a particular plugin.
... mimetype.enabledplugin returns an instance of plugin containing in
formation about the plugin itself.
MouseEvent.pageX - Web APIs
see page in coordinate systems for some additional in
formation about coordinates specified in this fashion.
... example more examples you can also see an example that demonstrates how to access the mouse position in
formation in every available coordinate system.
Navigator.oscpu - Web APIs
operating system oscpuinfo string
format os/2 os/2 warp x (either 3, 4 or 4.5) windows ce windowsce x.y1 windows 64-bit (64-bit build) windows nt x.y; win64; x64 windows 64-bit (32-bit build) windows nt x.y; wow64 windows 32-bit windows nt x.y mac os x (ppc build) powerpc mac os x version x.y mac os x (i386/x64 build) intel mac os x or macos version x.y linux 64-bit (32-bit build) output of uname -s plus "i686 on x86_64" linux output of u...
...name -sm x.y refers to the version of the operating system example function osinfo() { alert(window.navigator.oscpu); } osinfo(); // alerts "windows nt 6.0" for example usage notes unless your code is privileged (chrome or at least has the universalbrowserread privilege), it may get the value of the general.oscpu.override preference instead of the true plat
form.
NavigatorID - Web APIs
navigatorid.appversion read only returns either "4.0" or a string representing version in
formation about the browser.
... navigatorid.plat
form read only returns either the empty string or a string representing the plat
form the browser is running on.
NavigatorPlugins.plugins - Web APIs
in chrome) return flash.description.replace(/shockwave flash /,""); } } the following example displays in
formation about the installed plugin(s).
... let newrow = table.insertrow(); newrow.insertcell().textcontent = navigator.plugins[i].name; newrow.insertcell().textcontent = navigator.plugins[i].filename; newrow.insertcell().textcontent = navigator.plugins[i].description; newrow.insertcell().textcontent = navigator.plugins[i].version?navigator.plugins[i].version:""; } notes the plugin object exposes a small interface for getting in
formation about the various plugins installed in your browser.
Node.removeChild() - Web APIs
with the first syntax
form shown, you may reuse the removed node later in your code, via the oldchild object reference.
... in the second syntax
form, however, there is no oldchild reference kept, so assuming your code has not kept any other reference to the node elsewhere, it will immediately become unusable and irretrievable, and will usually be automatically deleted from memory after a short time.
Node.setUserData() - Web APIs
note that such data will not be preserved when imported via node.importnode, as with node.clonenode() and node.renamenode() operations (though node.adoptnode does preserve the in
formation), and equality tests in node.isequalnode() do not consider user data in making the assessment.
... this method offers the convenience of associating data with specific nodes without needing to alter the structure of a document and in a standard fashion, but it also means that extra steps may need to be taken if one wishes to serialize the in
formation or include the in
formation upon clone, import, or rename operations.
NotificationAction - Web APIs
these buttons' appearance and specific functionality vary across plat
forms but generally they provide a way to asynchronously show actions to the user in a notification.
... here a service worker shows a notification with a single "archive" action, allowing users to per
form this common task from the notification without having to open the website.
Notifications API - Web APIs
the api is designed to be compatible with existing notification systems, across different plat
forms.
... concepts and usage on supported plat
forms, showing a system notification generally involves two things.
OES_standard_derivatives - Web APIs
for more in
formation, see also using extensions in the webgl tutorial.
... gentype dfdx(gentype) gentype dfdy(gentype) gentype fwidth(gentype) examples enabling the extensions: gl.getextension('oes_standard_derivatives'); gl.getextension('ext_shader_texture_lod'); shader code that avoids artifacts when wrapping texture coordinates: <script type="x-shader/x-fragment"> #extension gl_ext_shader_texture_lod : enable #extension gl_oes_standard_derivatives : enable uni
form sampler2d mytexture; varying vec2 texcoord; void main(){ gl_fragcolor = texture2dgradext(mytexture, mod(texcoord, vec2(0.1, 0.5)), dfdx(texcoord), dfdy(texcoord)); } </script> specifications specification status comment oes_standard_derivativesthe definition of 'oes_standard_derivatives' in that specification.
PannerNode.setVelocity() - Web APIs
the velocity relative to the listener is used to control the pitch change needed to con
form with the doppler effect due to the relative speed.
... // set up listener and panner position in
formation var width = window.innerwidth; var height = window.innerheight; var xpos = math.floor(width/2); var ypos = math.floor(height/2); var zpos = 295; // define other variables var audiocontext = window.audiocontext || window.webkitaudiocontext; var audioctx = new audiocontext(); var panner = audioctx.createpanner(); panner.panningmodel = 'hrtf'; panner.distancemodel = 'inverse'; panner.refdis...
ParentNode.querySelector() - Web APIs
see locating dom elements using selectors for more in
formation about using selectors to identify elements.
...see escaping special characters for more in
formation.
PasswordCredential - Web APIs
the interface of the credential management api provides in
formation about a username/password pair.
... passwordcredential.additionaldata secure context one of a
formdata instance, a urlsearchparams instance, or null.
PaymentAddress.languageCode - Web APIs
this is used while localizing the displayy of the address, allowing the determination of the field separators and the order of fields when
formatting the address.
... syntax var paymentlanguagecode = paymentaddress.languagecode; value a domstring providing the bcp-47
format language code indicating the language the address was written in, such as "en-us", "pt-br", or "ja-jp".
PaymentDetailsUpdate - Web APIs
the paymentdetailsupdate dictionary is used to provide updated in
formation to the payment user interface after it has been instantiated.
... this can be done either by calling the paymentrequestupdateevent.updatewith() method or by using the paymentrequest.show() method's detailspromise parameter to provide a promise that returns a paymentdetailsupdate that updates the payment in
formation before the user interface is even enabled for the first time.
PaymentMethodChangeEvent.methodName - Web APIs
see payment method identifiers in payment request api for more in
formation.
... // methoddetails contains the card in
formation const result = calculatediscount(ev.methoddetails); object.assign(newstuff, result); break; } } // finally...
PaymentRequestUpdateEvent - Web APIs
the paymentrequestupdateevent interface is used for events sent to a paymentrequest instance when changes are made to shipping-related in
formation for a pending paymentrequest.
... methods in addition to methods inherited from the parent interface, event, paymentrequestupdateevent offers the following methods: paymentrequestupdateevent.updatewith() secure context if the event handler determines that in
formation included in the payment request needs to be changed, or that new in
formation needs to be added, it calls updatewith() with the in
formation that needs to be replaced or added.
PaymentResponse.complete() - Web APIs
the user agent may or may not present some
form of "payment successful" indication to the user.
... examples the following example sends payment in
formation to a secure server using the fetch api.
PaymentResponse.details - Web APIs
this data is returned by the payment app that satisfies the payment request, and must con
form to the structure defined in the basiccardresponse dictionary.
... payment.show().then(paymentresponse => { var paymentdata = { // payment method string method: paymentresponse.methodname, // payment details as you requested details: paymentresponse.details, // shipping address in
formation address: todict(paymentresponse.shippingaddress) }; // send in
formation to the server }); specifications specification status comment payment request api candidate recommendation initial definition.
PaymentResponse.methodName - Web APIs
see merchant validation in payment processing concepts for more in
formation.
... payment.show().then(paymentresponse => { var paymentdata = { // payment method string method: paymentresponse.methodname, // payment details as you requested details: paymentresponse.details, // shipping address in
formation address: todict(paymentresponse.shippingaddress) }; // send in
formation to the server }); specifications specification status comment payment request api candidate recommendation initial definition.
PaymentResponse - Web APIs
the contents of the object depend on the payment method being used; for example, if the basic card payment method is used, this object must con
form to the structure defined in the basiccardresponse dictionary.
... payerdetailchange secure context fired during a retry when the user makes changes to their personal in
formation while filling out a payment request
form.
PeriodicWave.PeriodicWave() - Web APIs
options optional a periodicwaveoptions dictionary object defining the properties you want the periodicwave to have (it also inherits the options defined in the periodicwaveconstraints dictionary.): real: a float32array containing the cosine terms that you want to use to
form the wave (equivalent to the real parameter of audiocontext.createperiodicwave).
... imag: a float32array containing the sine terms that you want to use to
form the wave (equivalent to the imag parameter of audiocontext.createperiodicwave).
Pointer Lock API - Web APIs
the pointer lock api (
formerly called mouse lock api) provides input methods based on the movement of the mouse over time (i.e., deltas), not just the absolute position of the mouse cursor in the viewport.
...the ability to avoid this limitation, in the
form of the attribute/value combination <iframe sandbox="allow-pointer-lock">, is expected to appear in chrome soon.
ProgressEvent() - Web APIs
loaded optional is an unsigned long long representing the amount of work already per
formed by the underlying process.
... total optional is an unsigned long long representing the total amount of work that the underlying process is in the progress of per
forming.
ProgressEvent.initProgressEvent() - Web APIs
loaded is an unsigned long long representing the amount of work already per
formed by the underlying process.
... total is an unsigned long long representing the total amount of work that the underlying process is in the progress of per
forming.
ProgressEvent - Web APIs
progressevent.loaded read only is an unsigned long long representing the amount of work already per
formed by the underlying process.
... progressevent.total read only is an unsigned long long representing the total amount of work that the underlying process is in the progress of per
forming.
PromiseRejectionEvent() - Web APIs
this can be anything from a numeric error code to an error domstring to an object which contains detailed in
formation describing the situation resulting in the promise being rejected.
...the reason could just as easily be a number, or even an object with detailed in
formation including the home address, how serious the fire is, and the phone number of an emergency contact who should be notified.
PromiseRejectionEvent.reason - Web APIs
this in theory provides in
formation about why the promise was rejected.
... syntax reason = promiserejectionevent.reason value a value or object which provides in
formation you can use to understand why the promise was rejected.
PublicKeyCredential - Web APIs
the publickeycredential interface provides in
formation about a public key / private key pair, which is a credential for logging in to a service using an un-phishable and data-breach resistant asymmetric key pair instead of a password.
... publickeycredential.isuserverifyingplat
formauthenticatoravailable()secure context a static method returning a promise which resolves to true if an authenticator bound to the plat
form is capable of verifying the user.
PublicKeyCredentialCreationOptions.attestation - Web APIs
the in
formation contained in the attestation may thus disclose some in
formation about the user (e.g.
...this avoids making a check with the attestation certificate authority and asking the user consent for sharing identifying in
formation.
PublicKeyCredentialCreationOptions.extensions - Web APIs
if true, the client outputs an array of arrays with 3 values containing in
formation about how the user was verified (e.g.
... biometricperfbounds object with two numerical properties: far and frr biometric authenticator per
formance bounds.
PublicKeyCredentialCreationOptions - Web APIs
examples // some examples of cose algorithms const cose_alg_ecdsa_w_sha256 = -7; const cose_alg_ecdsa_w_sha512 = -36; var createcredentialoptions = { //
format of new credentials is publickey publickey: { // relying party rp: { name: "example corp", id: "login.example.com", icon: "https://login.example.com/login.ico" }, // cryptographic challenge from the server challenge: new uint8array(26), // user user: { id: new uint8array(16), n...
...smith", }, // requested
format of new keypair pubkeycredparams: [{ type: "public-key", alg: cose_alg_ecdsa_w_sha256, }], // timeout after 1 minute timeout: 60000, // do not send the authenticator's origin attestation attestation: "none", extensions: { uvm: true, exts: true }, // filter out authenticators which are bound to the device authenticatorselection:{ authenticatorattachment: "cross-plat
form", requireresidentkey: true, userverification: "preferred" }, // exclude already existing credentials for the user excludecredentials: [ ...
PushManager.subscribe() - Web APIs
for more in
formation, see "using vapid with webpush".
...in a production environment it might make sense to // also report in
formation about errors back to the // application server.
RTCConfiguration.bundlePolicy - Web APIs
the goal of bundling is to optimize per
formance by reducing the overhead of having multiple transports in play.
... the fewer rtp transports or bundles of rtp streams you have, the better the network per
formance will be.
RTCConfiguration.certificates - Web APIs
see using certificates below for more in
formation on why you might want to—or not to—explicitly provide certificates.
... <<<--- add link to in
formation about identity --->>> examples specifications specification status comment webrtc 1.0: real-time communication between browsersthe definition of 'rtcconfiguration.certificates' in that specification.
RTCDataChannel - Web APIs
data
format the underlying data
format is defined by the ieee draft specification draft-ietf-mmusic-sctp-sdp.
... the current
format specifies its protocol as either "udp/dtls/sctp" (udp carrying dtls carrying sctp) or "tcp/dtls/sctp" (tcp carrying dtls carrying sctp).
RTCIceCandidate.RTCIceCandidate() - Web APIs
syntax candidate = new rtcicecandidate([candidateinfo]); parameters candidateinfo optional an optional rtcicecandidateinit object providing in
formation about the candidate; if this is provided, the candidate is initialized configured to represent the described candidate.
... note: parsing of the candidate string is per
formed using the candidate-attribute grammar from the webrtc specification.
RTCIceCandidate. toJSON() - Web APIs
the rtcicecandidate method tojson() converts the rtcicecandidate on which it's called into json in the
form of an rtcicecandidateinit object.
... syntax json = rtcicecandidate.tojson(); return value an object con
forming to the rtcicecandidateinit dictionary, whose members' values are set to the corresponding values in the rtcicecandidate object.
RTCIceCandidate.type - Web APIs
you can't specify the value of type in the options object, but the address is automatically extracted from the candidate a-line, if it's
formatted properly, being taken from its cand-type field.
... if type is null, that in
formation was missing from the candidate's a-line, which will cause rtcpeerconnection.addicecandidate() to throw an operationerror exception.
RTCIceCandidateStats.protocol - Web APIs
the tcptype property provides additional in
formation about the kind of tcp candidate represented by the object.
...this is the preferred protocol for media interactions because of its better per
formance profile.
RTCIceCandidateStats.transportId - Web APIs
the rtcicecandidatestats dictionary's transportid property is a string that uniquely identifies the transport that produced the rtctransportstats from which in
formation about this candidate was taken.
... syntax transportid = rtcicecandidatestats.transportid; value a domstring whose value uniquely identifies the transport from which any transport-related in
formation accumulated in the rtcicecandidatestats was taken.
RTCIceCandidateStats - Web APIs
this function is then called for rtcstats objects whose type is local-candidate, indicating that the object is in fact an rtcicecandidatestats with in
formation about a local ice candidate.
...case "ethernet": case "vpn": return true; case "bluetooth": case "cellular": case "wimax": case "unknown": default: return false; } } if (rtcstats && rtcstats.type === "local-candidate") { if (!isusablenetworktype(rtcstats)) { abortconnection(); return; } } this code calls a function called abortconnection() if the rtcstats object represents in
formation about a local candidate is which would be using a network connection other than ethernet or a vpn.
RTCIceProtocol - Web APIs
the tcptype property provides additional in
formation about the kind of tcp candidate represented by the object.
...this is the preferred protocol for media interactions because of its better per
formance profile.
RTCIceTransport - Web APIs
the rtcicetransport interface provides access to in
formation about the ice transport layer over which the data is being sent and received.
... this is particularly useful if you need to access state in
formation about the connection.
RTCIceTransportState - Web APIs
instead, you can think of "disconnected" as being similar to "checking" but with the added in
formation that the connection had been working but at the moment is not.
... every user agent and plat
form may have its own scenarios that can trigger the "disconnected" state.
RTCInboundRtpStreamStats.pliCount - Web APIs
this in
formation is only available for video streams.
...however, the primary purpose of this message is to allow the sender to consider techniques to mitigate network per
formance issues.
RTCPeerConnection: iceconnectionstatechange event - Web APIs
bubbles no cancelable no interface event event handler property oniceconnectionstatechange one common task per
formed by the iceconnectionstatechange event listener: to trigger ice restart when the state changes to failed.
... see ice restart in lifetime of a webrtc session for further in
formation.
RTCPeerConnection: icecandidateerror event - Web APIs
the webrtc api event icecandidateerror is sent to an rtcpeerconnection if an error occurs while per
forming ice negotiations through a stun or turn server.
... the event object is of type rtcpeerconnectioniceerrorevent, and contains in
formation describing the error in some amount of detail.
RTCRtpCodecCapability - Web APIs
the webrtc api's rtcrtpcodeccapability dictionary provides in
formation describing the capabilities of a single media codec.
... sdpfmtpline optional a domstring giving the
format specific parameters field from the a=fmtp line in the sdp which corresponds to the codec, if such a line exists.
RTCRtpContributingSource - Web APIs
the rtcrtpcontributingsource dictionary of the the webrtc api is used by getcontributingsources() to provide in
formation about a given contributing source (csrc), including the most recent time a packet that the source contributed was played out.
... the in
formation provided is based on the last ten seconds of media received.
RTCRtpSender - Web APIs
with it, you can configure the encoding used for the corresponding track, get in
formation about the device's media capabilities, and so forth.
... rtcrtpsender.replacetrack() attempts to replace the track currently being sent by the rtcrtpsender with another track, without per
forming renegotiation.
RTCSctpTransport - Web APIs
the rtcsctptransport interface provides in
formation which describes a stream control transmission protocol (sctp) transport.
... this provides in
formation about limitations of the transport, but also provides a way to access the underlying datagram transport layer security (dtls) transport over which sctp packets for all of an rtcpeerconnection's data channels are sent and received.
RTCStats - Web APIs
the statistics type hierarchy the various dictionaries that are used to define the contents of the objects that contain each of the various types of statistics for webrtc are structured in such a way that they build upon the core rtcstats dictionary, each layer adding more relevant in
formation.
... rtcstats is the foundation of all webrtc statistics objects rtcrtpstreamstats adds to rtcstats in
formation that applies to all rtp endpoints (that is, both local and remote endpoints, and regardless of whether the endpoint is a sender or a receiver) rtcreceivedrtpstreamstats further adds statistics measured at the receiving end of an rtp stream, regardless of whether it's local or remote.
ReadableStreamBYOBReader.read() - Web APIs
the different possibilities are as follows: if a chunk is available, the promise will be fulfilled with an object of the
form { value: thechunk, done: false }.
... if the stream becomes closed, the promise will be fulfilled with an object of the
form { value: undefined, done: true }.
ReadableStreamDefaultReader.read() - Web APIs
the different possibilities are as follows: if a chunk is available, the promise will be fulfilled with an object of the
form { value: thechunk, done: false }.
... if the stream becomes closed, the promise will be fulfilled with an object of the
form { value: undefined, done: true }.
Request.referrerPolicy - Web APIs
the referrerpolicy read-only property of the request interface returns the referrer policy, which governs what referrer in
formation, sent in the referer header, should be included with the request.
...for more in
formation and possible values, see the referrer-policy http header page.
Request - Web APIs
body.
formdata() returns a promise that resolves with a
formdata representation of the request body.
...ng the request() constructor with some initial data and body content for an api request which need a body payload: const request = new request('https://example.com', {method: 'post', body: '{"foo": "bar"}'}); const url = request.url; const method = request.method; const credentials = request.credentials; const bodyused = request.bodyused; note: the body type can only be a blob, buffersource,
formdata, urlsearchparams, usvstring or readablestream type, so for adding a json object to the payload you need to stringify that object.
Response - Web APIs
body.
formdata() takes a response stream and reads it to completion.
... it returns a promise that resolves with a
formdata object.
SVGPatternElement - Web APIs
svgpatternelement.patterntrans
form read only an svganimatedtrans
formlist corresponding to the patterntrans
form attribute of the given <pattern> element.
... candidate recommendation removed the implemented interfaces svgtests, svglangspace, svgexternalresourcesrequired, svgstylable, and svgtrans
formable.
Screen Capture API - Web APIs
its sole method is mediadevices.getdisplaymedia(), whose job is to ask the user to select a screen or portion of a screen to capture in the
form of a mediastream.
...similar to getusermedia(), this method creates a promise that resolves with a mediastream containing the display area selected by the user, in a
format that matches the specified options.
ScrollToOptions.behavior - Web APIs
examples in our scrolltooptions example (see it live) we include a
form that allows the user to enter three values — two numbers representing the left and top properties (i.e.
... when the
form is submitted, an event handler is run that puts the entered values into a scrolltooptions dictionary, and then invokes the window.scrollto() method, passing the dictionary as a parameter:
form.addeventlistener('submit', (e) => { e.preventdefault(); var scrolloptions = { left: leftinput.value, top: topinput.value, behavior: scrollinput.checked ?
ScrollToOptions.left - Web APIs
examples in our scrolltooptions example (see it live) we include a
form that allows the user to enter three values — two numbers representing the left and top properties (i.e.
... when the
form is submitted, an event handler is run that puts the entered values into a scrolltooptions dictionary, and then invokes the window.scrollto() method, passing the dictionary as a parameter:
form.addeventlistener('submit', (e) => { e.preventdefault(); var scrolloptions = { left: leftinput.value, top: topinput.value, behavior: scrollinput.checked ?
ScrollToOptions.top - Web APIs
examples in our scrolltooptions example (see it live) we include a
form that allows the user to enter three values — two numbers representing the left and top properties (i.e.
... when the
form is submitted, an event handler is run that puts the entered values into a scrolltooptions dictionary, and then invokes the window.scrollto() method, passing the dictionary as a parameter:
form.addeventlistener('submit', (e) => { e.preventdefault(); var scrolloptions = { left: leftinput.value, top: topinput.value, behavior: scrollinput.checked ?
ScrollToOptions - Web APIs
examples in our scrolltooptions example (see it live) we include a
form that allows the user to enter three values — two numbers representing the left and top properties (i.e.
... when the
form is submitted, an event handler is run that puts the entered values into a scrolltooptions dictionary, and then invokes the window.scrollto() method, passing the dictionary as a parameter:
form.addeventlistener('submit', (e) => { e.preventdefault(); var scrolloptions = { left: leftinput.value, top: topinput.value, behavior: scrollinput.checked ?
SharedWorker - Web APIs
example in our basic shared worker example (run shared worker), we have two html pages, each of which uses some javascript to per
form a simple calculation.
... the different scripts are using the same worker file to per
form the calculation — they can both access it, even if their pages are running inside different windows.
SourceBuffer.changeType() - Web APIs
the changetype() method of the sourcebuffer interface sets the mime type that future calls to appendbuffer() should expect the new media data to con
form to.
... syntax sourcebuffer.changetype(type); parameters type a domstring specifying the mime type that future buffers will con
form to.
SourceBuffer - Web APIs
sourcebuffer.trackdefaults specifies the default values to use if kind, label, and/or language in
formation is not available in the initialization segment of the media to be appended to the sourcebuffer.
... sourcebuffer.changetype() changes the mime type that future calls to appendbuffer() will expect the new data to con
form to.
SpeechRecognitionError.error - Web APIs
bad-grammar there was an error in the speech recognition grammar or semantic tags, or the chosen grammar
format or semantic tag
format was unsupported.
... examples var recognition = new speechrecognition(); recognition.onerror = function(event) { console.log('speech recognition error detected: ' + event.error); console.log('additional in
formation: ' + event.message); } ...
SpeechRecognitionErrorEvent.error - Web APIs
bad-grammar there was an error in the speech recognition grammar or semantic tags, or the chosen grammar
format or semantic tag
format was unsupported.
... examples var recognition = new speechrecognition(); recognition.onerror = function(event) { console.log('speech recognition error detected: ' + event.error); console.log('additional in
formation: ' + event.message); } specifications specification status comment web speech apithe definition of 'error' in that specification.
SpeechSynthesis.speak() - Web APIs
when a
form containing the text we want to speak is submitted, we (amongst other things) create a new utterance containing this text, then speak it by passing it into speak() as a parameter.
... input
form.onsubmit = function(event) { event.preventdefault(); var utterthis = new speechsynthesisutterance(inputtxt.value); var selectedoption = voiceselect.selectedoptions[0].getattribute('data-name'); for(i = 0; i < voices.length ; i++) { if(voices[i].name === selectedoption) { utterthis.voice = voices[i]; } } synth.speak(utterthis); inputtxt.blur(); } specifications specification status comment web speech apithe definition of 'speak()' in that specification.
SpeechSynthesisErrorEvent.error - Web APIs
examples var synth = window.speechsynthesis; var input
form = document.queryselector('
form'); var inputtxt = document.queryselector('input'); var voiceselect = document.queryselector('select'); var voices = synth.getvoices(); ...
... input
form.onsubmit = function(event) { event.preventdefault(); var utterthis = new speechsynthesisutterance(inputtxt.value); var selectedoption = voiceselect.selectedoptions[0].getattribute('data-name'); for(i = 0; i < voices.length ; i++) { if(voices[i].name === selectedoption) { utterthis.voice = voices[i]; } } synth.speak(utterthis); utterthis.onerror = function(event) { console.error('an error has occurred with the speech synthesis: ' + event.error); } inputtxt.blur(); } specifications specification status comment web speech apithe definition of 'error' in that specification.
SpeechSynthesisUtterance.SpeechSynthesisUtterance() - Web APIs
var synth = window.speechsynthesis; var input
form = document.queryselector('
form'); var inputtxt = document.queryselector('input'); var voiceselect = document.queryselector('select'); var voices = synth.getvoices(); ...
... input
form.onsubmit = function(event) { event.preventdefault(); var utterthis = new speechsynthesisutterance(inputtxt.value); var selectedoption = voiceselect.selectedoptions[0].getattribute('data-name'); for(i = 0; i < voices.length ; i++) { if(voices[i].name === selectedoption) { utterthis.voice = voices[i]; } } synth.speak(utterthis); inputtxt.blur(); } specifications specification status comment web speech apithe definition of 'speechsynthesisutterance()' in that specification.
SpeechSynthesisUtterance.lang - Web APIs
examples var synth = window.speechsynthesis; var input
form = document.queryselector('
form'); var inputtxt = document.queryselector('input'); var voiceselect = document.queryselector('select'); var voices = synth.getvoices(); ...
... input
form.onsubmit = function(event) { event.preventdefault(); var utterthis = new speechsynthesisutterance(inputtxt.value); var selectedoption = voiceselect.selectedoptions[0].getattribute('data-name'); for(i = 0; i < voices.length ; i++) { if(voices[i].name === selectedoption) { utterthis.voice = voices[i]; } } utterthis.lang = 'en-us'; synth.speak(utterthis); inputtxt.blur(); } specifications specification status comment web speech apithe definition of 'lang' in that specification.
SpeechSynthesisUtterance.onboundary - Web APIs
}; examples var synth = window.speechsynthesis; var input
form = document.queryselector('
form'); var inputtxt = document.queryselector('input'); var voiceselect = document.queryselector('select'); var voices = synth.getvoices(); ...
... input
form.onsubmit = function(event) { event.preventdefault(); var utterthis = new speechsynthesisutterance(inputtxt.value); var selectedoption = voiceselect.selectedoptions[0].getattribute('data-name'); for(i = 0; i < voices.length ; i++) { if(voices[i].name === selectedoption) { utterthis.voice = voices[i]; } } synth.speak(utterthis); utterthis.onboundary = function(event) { console.log(event.name + ' boundary reached after ' + event.elapsedtime + ' milliseconds.'); } inputtxt.blur(); } specifications specification status comment web speech apithe definition of 'onboundary' in that specification.
SpeechSynthesisUtterance.onend - Web APIs
}; examples var synth = window.speechsynthesis; var input
form = document.queryselector('
form'); var inputtxt = document.queryselector('input'); var voiceselect = document.queryselector('select'); var voices = synth.getvoices(); ...
... input
form.onsubmit = function(event) { event.preventdefault(); var utterthis = new speechsynthesisutterance(inputtxt.value); var selectedoption = voiceselect.selectedoptions[0].getattribute('data-name'); for(i = 0; i < voices.length ; i++) { if(voices[i].name === selectedoption) { utterthis.voice = voices[i]; } } synth.speak(utterthis); utterthis.onend = function(event) { console.log('utterance has finished being spoken after ' + event.elapsedtime + ' milliseconds.'); } inputtxt.blur(); } specifications specification status comment web speech apithe definition of 'onend' in that specification.
SpeechSynthesisUtterance.onerror - Web APIs
}; examples var synth = window.speechsynthesis; var input
form = document.queryselector('
form'); var inputtxt = document.queryselector('input'); var voiceselect = document.queryselector('select'); var voices = synth.getvoices(); ...
... input
form.onsubmit = function(event) { event.preventdefault(); var utterthis = new speechsynthesisutterance(inputtxt.value); var selectedoption = voiceselect.selectedoptions[0].getattribute('data-name'); for(i = 0; i < voices.length ; i++) { if(voices[i].name === selectedoption) { utterthis.voice = voices[i]; } } synth.speak(utterthis); utterthis.onerror = function(event) { console.log('an error has occurred with the speech synthesis: ' + event.error); } inputtxt.blur(); } specifications specification status comment web speech apithe definition of 'onerror' in that specification.
SpeechSynthesisUtterance.onmark - Web APIs
}; examples var synth = window.speechsynthesis; var input
form = document.queryselector('
form'); var inputtxt = document.queryselector('input'); var voiceselect = document.queryselector('select'); var voices = synth.getvoices(); ...
... input
form.onsubmit = function(event) { event.preventdefault(); var utterthis = new speechsynthesisutterance(inputtxt.value); var selectedoption = voiceselect.selectedoptions[0].getattribute('data-name'); for(i = 0; i < voices.length ; i++) { if(voices[i].name === selectedoption) { utterthis.voice = voices[i]; } } synth.speak(utterthis); utterthis.onmark = function(event) { console.log('a mark was reached: ' + event.name); } inputtxt.blur(); } specifications specification status comment web speech apithe definition of 'onmark' in that specification.
SpeechSynthesisUtterance.onpause - Web APIs
}; examples var synth = window.speechsynthesis; var input
form = document.queryselector('
form'); var inputtxt = document.queryselector('input'); var voiceselect = document.queryselector('select'); var voices = synth.getvoices(); ...
... input
form.onsubmit = function(event) { event.preventdefault(); var utterthis = new speechsynthesisutterance(inputtxt.value); var selectedoption = voiceselect.selectedoptions[0].getattribute('data-name'); for(i = 0; i < voices.length ; i++) { if(voices[i].name === selectedoption) { utterthis.voice = voices[i]; } } synth.speak(utterthis); utterthis.onpause = function(event) { console.log('speech paused after ' + event.elapsedtime + ' milliseconds.'); } inputtxt.blur(); } specifications specification status comment web speech apithe definition of 'onpause' in that specification.
SpeechSynthesisUtterance.onresume - Web APIs
}; examples var synth = window.speechsynthesis; var input
form = document.queryselector('
form'); var inputtxt = document.queryselector('input'); var voiceselect = document.queryselector('select'); var voices = synth.getvoices(); ...
... input
form.onsubmit = function(event) { event.preventdefault(); var utterthis = new speechsynthesisutterance(inputtxt.value); var selectedoption = voiceselect.selectedoptions[0].getattribute('data-name'); for(i = 0; i < voices.length ; i++) { if(voices[i].name === selectedoption) { utterthis.voice = voices[i]; } } synth.speak(utterthis); utterthis.onresume = function(event) { console.log('speech resumed after ' + event.elapsedtime + ' milliseconds.'); } inputtxt.blur(); } specifications specification status comment web speech apithe definition of 'onresume' in that specification.
SpeechSynthesisUtterance.onstart - Web APIs
}; examples var synth = window.speechsynthesis; var input
form = document.queryselector('
form'); var inputtxt = document.queryselector('input'); var voiceselect = document.queryselector('select'); var voices = synth.getvoices(); ...
... input
form.onsubmit = function(event) { event.preventdefault(); var utterthis = new speechsynthesisutterance(inputtxt.value); var selectedoption = voiceselect.selectedoptions[0].getattribute('data-name'); for(i = 0; i < voices.length ; i++) { if(voices[i].name === selectedoption) { utterthis.voice = voices[i]; } } synth.speak(utterthis); utterthis.onstart = function(event) { console.log('we have started uttering this speech: ' + event.utterance.text); } inputtxt.blur(); } specifications specification status comment web speech apithe definition of 'onstart' in that specification.
SpeechSynthesisUtterance.voice - Web APIs
examples var synth = window.speechsynthesis; var input
form = document.queryselector('
form'); var inputtxt = document.queryselector('input'); var voiceselect = document.queryselector('select'); var voices = synth.getvoices(); ...
... input
form.onsubmit = function(event) { event.preventdefault(); var utterthis = new speechsynthesisutterance(inputtxt.value); var selectedoption = voiceselect.selectedoptions[0].getattribute('data-name'); for(i = 0; i < voices.length ; i++) { if(voices[i].name === selectedoption) { utterthis.voice = voices[i]; } } synth.speak(utterthis); inputtxt.blur(); } specifications specification status comment web speech apithe definition of 'voice' in that specification.
SpeechSynthesisUtterance.volume - Web APIs
examples var synth = window.speechsynthesis; var input
form = document.queryselector('
form'); var inputtxt = document.queryselector('input'); var voiceselect = document.queryselector('select'); var voices = synth.getvoices(); ...
... input
form.onsubmit = function(event) { event.preventdefault(); var utterthis = new speechsynthesisutterance(inputtxt.value); var selectedoption = voiceselect.selectedoptions[0].getattribute('data-name'); for(i = 0; i < voices.length ; i++) { if(voices[i].name === selectedoption) { utterthis.voice = voices[i]; } } utterthis.volume = 0.5; synth.speak(utterthis); inputtxt.blur(); } specifications specification status comment web speech apithe definition of 'volume' in that specification.
SpeechSynthesisVoice - Web APIs
every speechsynthesisvoice has its own relative speech service including in
formation about language, name and uri.
... + ' (' + voices[i].lang + ')'; if(voices[i].default) { option.textcontent += ' -- default'; } option.setattribute('data-lang', voices[i].lang); option.setattribute('data-name', voices[i].name); voiceselect.appendchild(option); } } populatevoicelist(); if (speechsynthesis.onvoiceschanged !== undefined) { speechsynthesis.onvoiceschanged = populatevoicelist; } input
form.onsubmit = function(event) { event.preventdefault(); var utterthis = new speechsynthesisutterance(inputtxt.value); var selectedoption = voiceselect.selectedoptions[0].getattribute('data-name'); for(i = 0; i < voices.length ; i++) { if(voices[i].name === selectedoption) { utterthis.voice = voices[i]; } } utterthis.pitch = pitch.value; utterthis.rate = rate.value; syn...
StorageEstimate - Web APIs
the estimate() method returns an object that con
forms to this dictionary when its promise resolves.
... these values are only estimates for several reasons, including both per
formance and preventing storage capacity data from being used for fingerprinting purposes.
StorageManager.estimate() - Web APIs
this method operates asynchronously, so it returns a promise which resolves once the in
formation is available.
... return value a promise that resolves to an object which con
forms to the storageestimate dictionary.
StorageQuota - Web APIs
the storagequota property of the navigator interface of the quota management api provides means to query and request storage usage and quota in
formation.
... methods storagequota.queryinfo returns a storageinfo object containting the current data usage and available quota in
formation for the application.
Streams API - Web APIs
previously, if we wanted to process a resource of some kind (be it a video, or a text file, etc.), we'd have to download the entire file, wait for it to be deserialized into a suitable
format, then process the whole lot after it is fully received.
... unpack chunks of a png: this example shows how pipethrough() can be used to trans
form a readablestream into a stream of other data types by trans
forming a data of a png file into a stream of png chunks.
TaskAttributionTiming - Web APIs
the taskattributiontiming interface of the long tasks api returns in
formation about the work involved in a long task and its associate frame context.
... <div id="interfacediagram" style="display: inline-block; position: relative; width: 100%; padding-bottom: 11.666666666666666%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 70" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/per
formanceentry" target="_top"><rect x="1" y="1" width="160" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="81" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">per
formanceentry</text></a><polyline points="161,25 171,20 171,30 161,25" stroke="#d4dde4" fill="none"/><line x1="171" y1="25"...
TextEncoder - Web APIs
this is potentially more per
formant than the older encode() method.
... point = str.charcodeat(i), i += 1; if (point >= 0xd800 && point <= 0xdbff) { if (i === len) { resarr[respos += 1] = 0xef/*0b11101111*/; resarr[respos += 1] = 0xbf/*0b10111111*/; resarr[respos += 1] = 0xbd/*0b10111101*/; break; } // https://mathiasbynens.be/notes/javascript-encoding#surrogate-
formulae nextcode = str.charcodeat(i); if (nextcode >= 0xdc00 && nextcode <= 0xdfff) { point = (point - 0xd800) * 0x400 + nextcode - 0xdc00 + 0x10000; i += 1; if (point > 0xffff) { resarr[respos += 1] = (0x1e/*0b11110*/<<3) | (point>>>18); resarr[respos += 1] = (0...
TextTrackCue - Web APIs
these cues represent a string of text that is presented for some duration of time during the per
formance of a texttrack.
... the cue includes the start time (the time at which the text will be displayed) and the end time (the time at which it will be removed from the display), as well as other in
formation.
TimeEvent - Web APIs
the timeevent interface, a part of svg smil animation, provides specific contextual in
formation associated with time events.
...0" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="161" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">timeevent</text></a></svg></div> a:hover text { fill: #0095dd; pointer-events: all;} properties timeevent.detail read only is a long that specifies some detail in
formation about the event, depending on the type of the event.
Touch.radiusX - Web APIs
note: this attribute has not been
formally standardized.
... src.style.width = touch.radiusx * 2 + 'px'; src.style.height = touch.radiusy * 2 + 'px'; src.style.trans
form = "rotate(" + touch.rotationangle + "deg)"; }; specifications specification status comment touch events – level 2 draft non-stable version.
UIEvent.initUIEvent() - Web APIs
the page on creating and triggering events gives more in
formation about the way to use these.
... detail is an unsigned long specifying some detail in
formation about the event, depending on the type of event.
UIEvent.layerX - Web APIs
examples <html> <head> <title>pagex\pagey & layerx\layery example</title> <script type="text/javascript"> function showcoords(evt){ var
form = document.
forms.
form_coords; var parent_id = evt.target.parentnode.id;
form.parentid.value = parent_id;
form.pagexcoords.value = evt.pagex;
form.pageycoords.value = evt.pagey;
form.layerxcoords.value = evt.layerx;
form.layerycoords.value = evt.layery; } </script> <style type="text/css"> #d1 { border: solid blue 1px; padding: 20px; } #d2 { position: absolute; top: 180px;...
...note the pagex\pagey properties still return the absolute position in the document, including page scrolling.</span> </div> <div id="d3"> <
form name="
form_coords" id="
form1"> parent element id: <input type="text" name="parentid" size="7" /><br /> pagex:<input type="text" name="pagexcoords" size="7" /> pagey:<input type="text" name="pageycoords" size="7" /><br /> layerx:<input type="text" name="layerxcoords" size="7" /> layery:<input type="text" name="layerycoords" size="7" /> </
form> </div> </body> </html> specifications this pr...
UIEvent.layerY - Web APIs
example <html> <head> <title>pagex\pagey & layerx\layery example</title> <script type="text/javascript"> function showcoords(evt){ var
form = document.
forms.
form_coords; var parent_id = evt.target.parentnode.id;
form.parentid.value = parent_id;
form.pagexcoords.value = evt.pagex;
form.pageycoords.value = evt.pagey;
form.layerxcoords.value = evt.layerx;
form.layerycoords.value = evt.layery; } </script> <style type="text/css"> #d1 { border: solid blue 1px; padding: 20px; } #d2 { position: absolute; top: 180px;...
...note the pagex\pagey properties still return the absolute position in the document, including page scrolling.</span> </div> <div id="d3"> <
form name="
form_coords" id="
form1"> parent element id: <input type="text" name="parentid" size="7" /><br /> pagex:<input type="text" name="pagexcoords" size="7" /> pagey:<input type="text" name="pageycoords" size="7" /><br /> layerx:<input type="text" name="layerxcoords" size="7" /> layery:<input type="text" name="layerycoords" size="7" /> </
form> </div> </body> </html> specifications this pr...
UIEvent.pageY - Web APIs
example <html> <head> <title>pagex\pagey & layerx\layery example</title> <script type="text/javascript"> function showcoords(evt){ var
form = document.
forms.
form_coords; var parent_id = evt.target.parentnode.id;
form.parentid.value = parent_id;
form.pagexcoords.value = evt.pagex;
form.pageycoords.value = evt.pagey;
form.layerxcoords.value = evt.layerx;
form.layerycoords.value = evt.layery; } </script> <style type="text/css"> #d1 { border: solid blue 1px; padding: 20px; } #d2 { position: absolute; top: 180px...
...note the pagex\pagey properties still return the absolute position in the document, including page scrolling.</span> </div> <div id="d3"> <
form name="
form_coords"> parent element id: <input type="text" name="parentid" size="7" /><br /> pagex:<input type="text" name="pagexcoords" size="7" /> pagey:<input type="text" name="pageycoords" size="7" /><br /> layerx:<input type="text" name="layerxcoords" size="7" /> layery:<input type="text" name="layerycoords" size="7" /> </
form> </div> </body> </html> specifications this property is n...
URL API - Web APIs
the url api is a component of the url standard, which defines what constitutes a valid uni
form resource locator and the api that accesses and manipulates urls.
... the url standard also defines concepts such as domains, hosts, and ip addresses, and also attempts to describe in a standard way the legacy application/x-www-
form-urlencoded mime type used to submit web
forms' contents as a set of key/value pairs.
USB.getDevices() - Web APIs
for in
formation on pairing devices, see usb.requestdevice().
...for in
formation on pairing devices, see usb.requestdevice().
USBAlternateInterface - Web APIs
the usbalternateinterface interface of the webusb api provides in
formation about a particular configuration of an interface provided by the usb device.
... constructor usbalternateinterface.usbalternateinterface creates a new usbalternateinterface object which will be populated with in
formation about the alternate interface of the provided usbinterface with the given alternate setting number.
USBConfiguration - Web APIs
the usbconfiguration interface of the webusb api provides in
formation about a particular configuration of a usb device and the interfaces that it supports.
... constructor usbconfiguration.usbconfiguration() creates a new usbconfiguration object which contains in
formation about the configuration on the provided usbdevice with the given configuration value.
USBDevice - Web APIs
usbdevice.isochronoustransferin() returns a promise that resolves with a usbisochronousintransferresult when time sensitive in
formation has been transmitted to the usb device.
... usbdevice.isochronoustransferout() returns a promise that resolves with a usbisochronousouttransferresult when time sensitive in
formation has been transmitted from the usb device.
USBEndpoint - Web APIs
the usbendpoint interface of the webusb api provides in
formation about an endpoint provided by the usb device.
... constructor usbendpoint.usbendpoint creates a new usbendpoint object which will be populated with in
formation about the endpoint on the provided usbaltenateinterface with the given endpoint number and transfer direction.
USBInterface - Web APIs
the usbinterface interface of the webusb api provides in
formation about an interface provided by the usb device.
... constructor usbinterface.usbinterface creates a new usbinterface object which will be populated with in
formation about the interface on the provided usbconfiguration with the given interface number.
VRStageParameters - Web APIs
properties vrstageparameters.sittingtostandingtrans
form read only contains a matrix that trans
forms the sitting-space view matrices of vrframedata to standing-space.
...etvrdisplays().then(function(displays) { vrdisplay = displays[0]; var stageparams = vrdisplay.stageparameters; // stageparams is a vrstageparameters object if(stageparams === null) { info.textcontent = 'your vr hardware does not support room-scale experiences.' } else { info.innerhtml = '<strong>display stage parameters</strong>' + '<br>sitting to standing trans
form: ' + stageparams.sittingtostandingtrans
form + '<br>play area width (m): ' + stageparams.sizex + '<br>play area depth (m): ' + stageparams.sizey } }); specifications specification status comment webvr 1.1the definition of 'vrstageparameters' in that specification.
ValidityState.rangeOverflow - Web APIs
the read-only rangeoverflow property of a validitystate object indicates if the value of an <input>, after having been edited by the user, does not con
form to the constraints set by the element's max attribute.
... if the field is numeric in nature, including the date, month, week, time, datetime-local, number and range types and a max value is set, if the value don't doesn't con
form to the constraints set by the max value, the rangeoverflow property will be true.
ValidityState.rangeUnderflow - Web APIs
the read-only rangeunderflow property of a validitystate object indicates if the value of an <input>, after having been edited by the user, does not con
form to the constraints set by the element's min attribute.
... if the field is numeric in nature, including the date, month, week, time, datetime-local, number and range types and a min value is set, if the value don't doesn't con
form to the constraints set by the min value, the rangeunderflow property will be true.
WEBGL_debug_shaders - Web APIs
this extension is not directly available to web sites as the way of how the shader is translated may uncover personally-identifiable in
formation to the web page about the kind of graphics card in the user's computer.
...for more in
formation, see also using extensions in the webgl tutorial.
WEBGL_depth_texture - Web APIs
for more in
formation, see also using extensions in the webgl tutorial.
... extended methods this extension extends webglrenderingcontext.teximage2d(): the
format and internal
format parameters now accept gl.depth_component and gl.depth_stencil.
WaveShaperNode.oversample - Web APIs
the possible oversample values are: value effect 'none' do not per
form any oversampling.
...for applied examples/in
formation, check out our voice-change-o-matic demo (see app.js for relevant code).
WebGL2RenderingContext.bindBufferBase() - Web APIs
possible values: gl.trans
form_feedback_buffer gl.uni
form_buffer index a gluint specifying the index of the target.
... examples gl.bindbufferbase(gl.trans
form_feedback_buffer, 0, buffer); specifications specification status comment webgl 2.0the definition of 'bindbufferbase' in that specification.
WebGL2RenderingContext.bindBufferRange() - Web APIs
possible values: gl.trans
form_feedback_buffer gl.uni
form_buffer index a gluint specifying the index of the target.
... examples gl.bindbufferrange(gl.trans
form_feedback_buffer, 1, buffer, 0, 4); specifications specification status comment webgl 2.0the definition of 'bindbufferrange' in that specification.
WebGL2RenderingContext.texStorage3D() - Web APIs
syntax void gl.texstorage3d(target, levels, internal
format, width, height, depth); parameters target a glenum specifying the binding point (target) of the active texture.
... internal
format a glenum specifying the texture store
format.
WebGL2RenderingContext.vertexAttribIPointer() - Web APIs
the webgl2renderingcontext.vertexattribipointer() method of the webgl 2 api specifies integer data
formats and locations of vertex attributes in a vertex attributes array.
...ices, interpreted as integer gl.vertexattribipointer(2, 4, gl.unsigned_byte, 20, 16); gl.enablevertexattribarray(2); //connect to attributes from the vertex shader gl.bindattriblocation(shaderprogram, 0, "position"); gl.bindattriblocation(shaderprogram, 1, "boneweights"); gl.bindattriblocation(shaderprogram, 2, "boneindices"); <script id="shader-vs" type="x-shader/x-vertex">#version 300 es uni
form mat4 mvmatrix; uni
form mat4 bones[120]; in vec3 position; in vec4 boneweights; in uvec4 boneindices;//read as 4-component unsigned integer void main() { vec4 skinnedposition = bones[boneindices.s] * vec4(position, 1.0) * boneweights.s + bones[boneindices.t] * vec4(position, 1.0) * boneweights.t + bones[boneindices.p] * vec4(position, 1.0) * boneweights.p + bo...
WebGLActiveInfo.name - Web APIs
the read-only webglactiveinfo.name property represents the name of the requested data returned by calling the getactiveattrib() or getactiveuni
form() methods.
... examples var activeattrib = gl.getactiveattrib(program, index); activeattrib.name; var activeuni
form = gl.getactiveuni
form(program, index); activeuni
form.name; specifications specification status comment webgl 1.0the definition of 'webglactiveinfo.name' in that specification.
WebGLActiveInfo.size - Web APIs
the read-only webglactiveinfo.size property is a number representing the size of the requested data returned by calling the getactiveattrib() or getactiveuni
form() methods.
... examples var activeattrib = gl.getactiveattrib(program, index); activeattrib.size; var activeuni
form = gl.getactiveuni
form(program, index); activeuni
form.size; specifications specification status comment webgl 1.0the definition of 'webglactiveinfo.size' in that specification.
WebGLActiveInfo.type - Web APIs
the read-only webglactiveinfo.type property represents the type of the requested data returned by calling the getactiveattrib() or getactiveuni
form() methods.
... examples var activeattrib = gl.getactiveattrib(program, index); activeattrib.type; var activeuni
form = gl.getactiveuni
form(program, index); activeuni
form.type; specifications specification status comment webgl 1.0the definition of 'webglactiveinfo.type' in that specification.
WebGLContextEvent.statusMessage - Web APIs
the read-only webglcontextevent.statusmessage property contains additional event status in
formation, or is an empty string if no additional in
formation is available.
... examples the statusmessage property can contain a plat
form dependent string with details of an event.
WebGLQuery - Web APIs
the webglquery interface is part of the webgl 2 api and provides ways to asynchronously query for in
formation.
... another kind of queries are disjoint timer queries, which allow you to measure per
formance and profiling of your gpu.
WebGLRenderingContext.copyTexImage2D() - Web APIs
syntax void gl.copyteximage2d(target, level, internal
format, x, y, width, height, border); parameters target a glenum specifying the binding point (target) of the active texture.
... internal
format a glenum specifying the color components in the texture.
WebGLRenderingContext.isContextLost() - Web APIs
the user's computer has multiple graphics processors (such as a laptop with both mobile and desktop class gpus, the
former used primarily when on battery power), and the user or system decides to switch gpus.
... another page running in the user's browser per
forms an operation using the gpu that takes too long, causing hte browser to decide to reset the gpu in order to break the stall.
WebGLShader - Web APIs
at this point the webglshader is still not in a usable
form and must still be attached to a webglprogram.
...\n\n' + info; } return shader; } see webglprogram for in
formation on attaching the shaders.
Clearing with colors - Web APIs
finally, we note that color in webgl is usually in rgba
format, that is four numerical components for red, green, blue and alpha (opacity).
... var gl = canvas.getcontext("webgl") || canvas.getcontext("experimental-webgl"); // if failed, in
form user of failure.
Using shaders to apply color in WebGL - Web APIs
this example uses the glmatrix library to per
form its matrix and vertex math.
... to use these colors, the vertex shader needs to be updated to pull the appropriate color from the color buffer: const vssource = ` attribute vec4 avertexposition; attribute vec4 avertexcolor; uni
form mat4 umodelviewmatrix; uni
form mat4 uprojectionmatrix; varying lowp vec4 vcolor; void main(void) { gl_position = uprojectionmatrix * umodelviewmatrix * avertexposition; vcolor = avertexcolor; } `; the key difference here is that for each vertex, we pass its color using a varying to the fragment shader.
A simple RTCDataChannel sample - Web APIs
a side channel, commonly called a “signalling server,” is usually used to exchange the description (which is in application/sdp
form) between the two peers.
... function handlereceivemessage(event) { var el = document.createelement("p"); var txtnode = document.createtextnode(event.data); el.appendchild(txtnode); receivebox.appendchild(el); } this method simply per
forms some basic dom injection; it creates a new <p> (paragraph) element, then creates a new text node containing the message text, which is received in the event's data property.
Writing WebSocket client applications - Web APIs
var msg = { type: "message", text: document.getelementbyid("text").value, id: clientid, date: date.now() }; // send the msg object as a json-
formatted string.
... text data
format text received over a websocket connection is in utf-8
format.
WebXR permissions and security - Web APIs
user intent user intent is the concept of whether or not an action being per
formed by code is being per
formed because of something the user intends to do or not.
... explicit user intent (explicit user consent) is granted when the user has specifically and expressly been asked for permission to per
form an action.
Using IIR filters - Web APIs
there's more in
formation on how biquad filters work here.
... if you are looking to learn more there's some in
formation about the maths behind iir filters here.
Web Bluetooth API - Web APIs
bluetoothremotegattcharacteristic represents a gatt characteristic, which is a basic data element that provides further in
formation about a peripheral’s service.
... bluetoothremotegattdescriptor represents a gatt descriptor, which provides further in
formation about a characteristic’s value.
Web NFC API - Web APIs
the web nfc api allows exchanging data over nfc via light-weight nfc data exchange
format (ndef) messages.
... note: devices and tags have to be
formatted and recorded specifically to support ndef record
format to be used with web nfc.
Web Workers API - Web APIs
the advantage of this is that laborious processing can be per
formed in a separate thread, allowing the main (usually the ui) thread to run without being blocked/slowed down.
... you can find out more in
formation on how these demos work in using web workers.
Window.console - Web APIs
the window.console property returns a reference to the console object, which provides methods for logging in
formation to the browser's console.
... these methods are intended for debugging purposes only and should not be relied on for presenting in
formation to end users.
Window.convertPointFromNodeToPage() - Web APIs
specifications this method was specified in the defunct 20 march 2009 working draft of css 2d trans
forms module level 3.
... it is not present in the current css trans
forms module level 1 working draft.
Window.convertPointFromPageToNode - Web APIs
specifications this method was specified in the defunct 20 march 2009 working draft of css 2d trans
forms module level 3.
... it is not present in the current css trans
forms module level 1 working draft.
Window.devicePixelRatio - Web APIs
a value of 1 indicates a classic 96 dpi (76 dpi on some plat
forms) display, while a value of 2 is expected for hidpi/retina displays.
... html the html creates the boxes containing the instructions and the pixel-ratio box that will display the current pixel ratio in
formation.
Window.matchMedia() - Web APIs
usage notes you can use the returned media query to per
form both instantanteous and event-driven checks to see if the document matches the media query.
... to per
form a one-time, instantaneous check to see if the document matches the media query, look at the value of the matches property, which will be true if the document meets the media query's requirements.
Privileged features - Web APIs
on windows plat
forms, a dependent window does not show on the task bar.
... the exact behavior of modal windows depends on the plat
form and on the mozilla release version.
Window.pkcs11 - Web APIs
for more in
formation on installing pkcs11 modules, see installing pkcs11 modules.
... syntax objref = window.pkcs11 example window.pkcs11.addmodule(smod, secpath, 0, 0); notes see nsidompkcs11 for more in
formation about how to manipulate pkcs11 objects.
window.requestIdleCallback() - Web APIs
this enables developers to per
form background and low priority work on the main event loop, without impacting latency-critical events such as animation and input response.
...currently only one property is defined: timeout: if timeout is specified and has a positive value, and the callback has not already been called by the time timeout milliseconds have passed, the callback will be called during the next idle period, even if doing so risks causing a negative per
formance impact.
Window.speechSynthesis - Web APIs
inside the input
form.onsubmit handler, we stop the
form submitting with preventdefault(), create a new speechsynthesisutterance instance containing the text from the text <input>, set the utterance's voice to the voice selected in the <select> element, and start the utterance speaking via the speechsynthesis.speak() method.
... var synth = window.speechsynthesis; var input
form = document.queryselector('
form'); var inputtxt = document.queryselector('input'); var voiceselect = document.queryselector('select'); function populatevoicelist() { voices = synth.getvoices(); for(i = 0; i < voices.length ; i++) { var option = document.createelement('option'); option.textcontent = voices[i].name + ' (' + voices[i].lang + ')'; if(voices[i].default) { option.textcontent += ' -- default'; } option.setattribute('data-lang', voices[i].lang); option.setattribute('data-name', voices[i].name); voiceselect.appendchild(option); } } populatevoicelist(); if (speechsynthesis.onvoiceschanged !== undefined) { speechsynthesis.onvoiceschanged = populatevoicelist; } input
form.onsubmit = functio...
WindowOrWorkerGlobalScope.fetch() - Web APIs
body any body that you want to add to your request: this can be a blob, buffersource,
formdata, urlsearchparams, usvstring, or readablestream object.
...this in
formation should instead be provided using an authorization header.
WindowOrWorkerGlobalScope.queueMicrotask() - Web APIs
the importance of microtasks comes in its ability to per
form tasks asynchronously but in a specific order.
... microtasks are especially useful for libraries and frameworks that need to per
form final cleanup or other just-before-rendering tasks.
Worker.prototype.postMessage() - Web APIs
the worker can send back in
formation to the thread that spawned it using the dedicatedworkerglobalscope.postmessage method.
...when either of two
form inputs (first and second) have their values changed, change events invoke postmessage() to send the value of both inputs to the current worker.
WorkerGlobalScope.navigator - Web APIs
ent of self.console.log(self.navigator);, as these are being called on the worker scope, which can be referenced with workerglobalscope.self), you will get a workernavigator object written to the console — something like the following: object {online: true, useragent: "mozilla/5.0 (macintosh; intel mac os x 10_10_1) ap…ml, like gecko) chrome/40.0.2214.93 safari/537.36", product: "gecko", plat
form: "macintel", appversion: "5.0 (macintosh; intel mac os x 10_10_1) applewebki…ml, like gecko) chrome/40.0.2214.93 safari/537.36"…} appcodename: "mozilla" appname: "netscape" appversion: "5.0 (macintosh; intel mac os x 10_10_1) applewebkit/537.36 (khtml, like gecko) chrome/40.0.2214.93 safari/537.36" hardwareconcurrency: 4 online: true plat
form: "macintel" product: "...
...gecko" useragent: "mozilla/5.0 (macintosh; intel mac os x 10_10_1) applewebkit/537.36 (khtml, like gecko) chrome/40.0.2214.93 safari/537.36" __proto__: object you could use this navigator object to return more in
formation about the runtime envinronment, as you might do with a normal navigator object.
WorkerNavigator.connection - Web APIs
the workernavigator.connection read-only property returns a networkin
formation object containing in
formation about the system's connection, such as the current bandwidth of the user's device or whether the connection is metered.
... syntax connectioninfo = self.navigator.connection specifications specification status comment network in
formation apithe definition of 'navigator.connection' in that specification.
WorkerNavigator - Web APIs
workernavigator.connectionread only provides a networkin
formation object containing in
formation about the network connection of a device.
... navigatorid.plat
form read only returns a string representing the plat
form of the browser.
Worklet - Web APIs
with worklets, you can run javascript and webassembly code to do graphics rendering or audio processing where high per
formance is required.
... web audio render thread web audio api animationworklet for creating scroll-linked and other high per
formance procedural animations.
How to check the security state of an XMLHTTPRequest over SSL - Web APIs
the function is passed the channel property of an xmlhttprequest to extract the following in
formation: was the connection secure?
...t(errname); return error; // xxx: errtype goes unused } function dumpsecurityinfo(xhr, error) { let channel = xhr.channel; try { dump("connection status:\n"); if (!error) { dump("\tsucceeded\n"); } else { dump("\tfailed: " + error.name + "\n"); } let secinfo = channel.securityinfo; // print general connection security state dump("security in
formation:\n"); if (secinfo instanceof ci.nsitransportsecurityinfo) { secinfo.queryinterface(ci.nsitransportsecurityinfo); dump("\tsecurity state of connection: "); // check security state flags if ((secinfo.securitystate & ci.nsiwebprogresslistener.state_is_secure) == ci.nsiwebprogresslistener.state_is_secure) { dump("secure connection\n"); } els...
Synchronous and asynchronous requests - Web APIs
in general, however, asynchronous requests should be preferred to synchronous requests for per
formance reasons.
...:( client.setrequestheader("content-type", "text/plain;charset=utf-8"); client.send(analyticsdata); } using the sendbeacon() method, the data will be transmitted asynchronously to the web server when the user agent has had an opportunity to do so, without delaying the unload or affecting the per
formance of the next navigation.
XMLHttpRequest.send() - Web APIs
an xmlhttprequestbodyinit, which per the fetch spec can be a blob, buffersource,
formdata, urlsearchparams, or usvstring object.
...}; xhr.send(null); // xhr.send('string'); // xhr.send(new blob()); // xhr.send(new int8array()); // xhr.send(document); example: post var xhr = new xmlhttprequest(); xhr.open("post", '/server', true); //send the proper header in
formation along with the request xhr.setrequestheader("content-type", "application/x-www-
form-urlencoded"); xhr.onreadystatechange = function() { // call a function when the state changes.
XMLSerializer.serializeToString() - Web APIs
the xmlserializer method serializetostring() constructs a string representing the specified dom tree in xml
form.
... syntaxerror a serialization of html was requested but could not succeed due to the content not being well-
formed.
XRFrame - Web APIs
a webxr device api xrframe object is passed into the requestanimationframe() callback function and provides access to the in
formation needed in order to render a single frame of animation for an xrsession describing a vr or ar sccene.
...the in
formation about a specific object can be obtained by calling one of the methods on the object.
XRInputSource.gripSpace - Web APIs
for (let source in xrsession.inputsources) { if (source.gripspace) { let grippose = frame.getpose(source.gripspace, xrrefspace); if (grippose) { mydrawmeshusingtrans
form(controllermesh, grippose.trans
form.matrix); } } } for each input source which has a value for gripspace, this loop obtains the xrpose representing the position and orientation that are described by gripspace.
... if a valid pose is returned, a method mydrawmeshusingtrans
form() is called to draw the controller's mesh trans
formed using the grip pose's trans
form matrix.
XRInputSource.targetRaySpace - Web APIs
to determine the position and orientation of the target ray while rendering a frame, pass it into the xrframe method getpose() method, then use the returned xrpose object's trans
form to gather the spatial in
formation you need.
... the code should continue to per
form tasks such as drawing controllers or any objects representative of the user's hands' positions in the virtual space, as well as any other input-related tasks.
XRInputSourceArray.forEach() - Web APIs
if you don't need this in
formation, you may omit this.
... specifications specification status comment webxr device apithe definition of 'xrinputsourcearray' in that specification.1 working draft xrinputsourcearray interface [1] see iterator-like methods in in
formation contained in a webidl file for in
formation on how an iterable declaration in an interface definition causes entries(), foreach(), keys(), and values() methods to be exposed from objects that implement the interface.
XRInputSourceEvent.frame - Web APIs
then, if the result isn't null, the target ray pose's trans
form is passed into a function called mycheckandhandlehit() to see if the ray was pointing at anything when the select was triggered.
... xrsession.onselectstart = event => { let targetraypose = event.frame.getpose(event.inputsource.targetrayspace, myrefspace); if (targetraypose) { checkandhandlehit(targetraypose.trans
form); } }; specifications specification status comment webxr device apithe definition of 'xrinputsourceevent.frame' in that specification.
XRInputSourceEvent - Web APIs
properties frame read only an xrframe object providing the needed in
formation about the event frame during which the event occurred.
... xrsession.addeventlistener("select", event => { let targetraypose = event.frame.getpose(event.inputsource.targetrayspace, myrefspace); if (targetraypose) { let hit = myhittest(targetraypose.trans
form); if (hit) { /* handle the hit */ } } }); specifications specification status comment webxr device apithe definition of 'xrinputsourceevent' in that specification.
XRPermissionDescriptor.optionalFeatures - Web APIs
reference space descriptors the types of reference space are listed in the table below, with brief in
formation about their use cases and which interface is used to implement them.
...the exact position depends on the underlying plat
form and implementation.
XRPermissionDescriptor - Web APIs
the available features are the same as those used by xrsessioninit; see default features in xrsessioninit for further in
formation.
... examples the example below demonstrates per
forming the permission request for an application that requires the local-floor reference space in an immersive-vr environment.
XRPermissionStatus.granted - Web APIs
the types of reference space are listed in the table below, with brief in
formation about their use cases and which interface is used to implement them.
...the exact position depends on the underlying plat
form and implementation.
XRReferenceSpaceEvent - Web APIs
trans
form read only an xrrigidtrans
form object indicating the position and orientation of the specified referencespace's native origin after the event, defined relative to the coordinate system before the event.
...this is an opportunity for your app to update any stored trans
forms, position/orientation in
formation, or the like—or to dump any cached values based on the reference's space's origin so you can recompute them as needed.
XRReferenceSpaceEventInit.referenceSpace - Web APIs
syntax let eventinitdict = { referencespace: xrreferencespace, trans
form: xrrigidtrans
form }); value an xrreferencespace indicating the source of the event.
... let refspaceevent = new xrreferencespaceevent("reset", { referencespace: myrefspace, trans
form: mytrans
form }); specifications specification status comment webxr device apithe definition of 'xrreferencespaceeventinit.referencespace' in that specification.
XRReferenceSpaceEventInit - Web APIs
trans
form an xrrigidtrans
form which maps the old coordinate system (from before the changes indicated by this event) to the new coordiante system.
... let refspaceevent = new xrreferencespaceevent("reset", { referencespace: myrefspace, trans
form: mytrans
form }); specifications specification status comment webxr device apithe definition of 'xrreferencespaceeventinit' in that specification.
XRReferenceSpaceType - Web APIs
reference space descriptors the types of reference space are listed in the table below, with brief in
formation about their use cases and which interface is used to implement them.
...the exact position depends on the underlying plat
form and implementation.
XRSession.onsqueeze - Web APIs
then we pass the currently held object and the target ray's trans
form matrix into a function we call dropobjectusingray() to drop the object, using the target ray to determine the surface upon which the object should be placed.
... xrsession.onsqueeze = event => { if (event.inputsource.handedness == user.handedness) { let targetraypose = event.frame.getpose(event.inputsource.targetrayspace, myrefspace); if (user.heldobject && targetraypose) { dropobjectusingray(user.heldobject, targetraypose.trans
form.matrix): } } }; see the examples in the onsqueezestart and onsqueezeend event handlers for the reset of the event handling related to this approach.
XRSession.onsqueezestart - Web APIs
this object is then stored in a heldobject variable in the user object we're using to represent user in
formation.
... xrsession.onsqueezestart = event => { if (event.inputsource.handedness == user.handedness) { let targetraypose = event.frame.getpose(event.inputsource.targetrayspace, myrefspace; if (targetraypose) { user.heldobject = findobjectusingray(targetraypose.trans
form); } } }; specifications specification status comment webxr device apithe definition of 'xrsession.onsqueezestart' in that specification.
XRSession.requestReferenceSpace() - Web APIs
reference space descriptors the types of reference space are listed in the table below, with brief in
formation about their use cases and which interface is used to implement them.
...the exact position depends on the underlying plat
form and implementation.
XRViewerPose - Web APIs
for example, every player in a mmorpg might have an instance of xrviewerpose to provide a way to calculate what they can see; if the game provides a mechanism that tells the player if another player sees them, or that they see another player, this in
formation becomes crucial.
... also, when rendering the scene for spectators or other players in a multiplayer game, the trans
form of the xrviewerpose can be used to determine both placement and facing direction of the other players in the game, so that they can be drawn in the correct place with the correct facing.
XRWebGLLayerInit - Web APIs
the constructor's optional layerinit parameter takes an object which must con
form to this dictionary.
... examples given an xrsession, xrsession, and a webgl rendering context, gl, this snippet sets the rendering layer for the session, specifying the ignoredepthvalues option, indicating that the depth buffer should not be used (or should not exist at all), and that the only source for distance in
formation of any given point is its position relative to the viewer.
Introduction - Web APIs
xsl (extensible stylesheet language) trans
formations are composed of two parts: xsl elements, which allow the trans
formation of an xml tree into another markup tree and xpath, a selection language for trees.
... trans
formations in xslt are based on rules that consist of templates.
Resources - Web APIs
resources trans
forming xml: netscape and xslt what kind of language is xslt?
... at ibm developerworks xslt tutorial at zvon.org xpath tutorial at zvon.org using the mozilla javascript interface to do xsl trans
formations at mozilla.org mozilla.org's xslt project page, which includes a frequently encountered issues section.
msWriteProfilerMark - Web APIs
notes mswriteprofilermark enables you to inject dom based per
formance markers in addition to existing javascript api to learn exactly when parts of the page are being rendered, building a waterfall view for every one of our impressions showing latency per object, which can be useful for more accurately debugging real users perf issues.
... this method is useful to profile real website per
formance by using the operating system metrics as a baseline.
ARIA Screen Reader Implementors Guide - Accessibility
this is particularly important for changes in data cells, where the column and row headers provide important contextual in
formation.
... allow global settings to turn off the presentation of live changes, present all live changes, use markup, or be "smart" (use heuristics) details for processing via plat
form accessibility apis we hope browser manufacturers will work to provide consistent implementations.
ARIA Technique Template - Accessibility
the in
formation provided above is one of those opinions and therefore not normative.
... examples example 1: code working examples: notes aria attributes used related aria techniques compatibility tbd: add support in
formation for common ua and at product combinations additional resources ...
Using the aria-label attribute - Accessibility
the in
formation provided above is one of those opinions and therefore not normative.
... used by aria roles all elements of the base markup related aria techniques using the aria-labelledby attribute compatibility tbd: add support in
formation for common ua and at product combinations additional resources wai-aria specification for aria-label ...
Using the aria-orientation attribute - Accessibility
the in
formation provided above is one of those opinions and therefore not normative.
...id="handle_zoomslider" role="slider" aria-orientation="vertical" aria-valuemin="0" aria-valuemax="17" aria-valuenow="14" > <span>11</span> </a> working examples: slider example notes used with aria roles scrollbar listbox combobox menu tree separator slider tablist toolbar related aria techniques compatibility tbd: add support in
formation for common ua and at product combinations additional resources wai-aria specification for the aria-orientation attribute ...
Using the aria-valuemax attribute - Accessibility
the in
formation provided above is one of those opinions and therefore not normative.
... <div role="slider" aria-valuenow="4" aria-valuemin="1" aria-valuemax="10"> working examples: progressbar example slider example spinbutton example notes used with aria roles progressbar scrollbar slider spinbutton related aria techniques aria-valuemin aria-valuenow aria-valuetext compatibility tbd: add support in
formation for common ua and at product combinations additional resources wai-aria specification for the aria-valuemax attribute ...
Using the aria-valuemin attribute - Accessibility
the in
formation provided above is one of those opinions and therefore not normative.
... <div role="slider" aria-valuenow="4" aria-valuemin="1" aria-valuemax="10"> working examples: progressbar example slider example spinbutton example notes used with aria roles progressbar scrollbar slider spinbutton related aria techniques aria-valuemax aria-valuenow aria-valuetext compatibility tbd: add support in
formation for common ua and at product combinations additional resources wai-aria specification for the aria-valuemin attribute ...
Using the aria-valuenow attribute - Accessibility
the in
formation provided above is one of those opinions and therefore not normative.
... <div role="slider" aria-valuenow="4" aria-valuemin="1" aria-valuemax="10"> working examples: progressbar example slider example spinbutton example notes used with aria roles progressbar scrollbar slider spinbutton related aria techniques aria-valuemax aria-valuemin aria-valuetext compatibility tbd: add support in
formation for common ua and at product combinations additional resources wai-aria specification for the aria-valuenow attribute ...
Using the aria-valuetext attribute - Accessibility
the in
formation provided above is one of those opinions and therefore not normative.
... <div role="slider" aria-valuenow="1" aria-valuemin="1" aria-valuemax="7" aria-valuetext="sunday"> working examples: notes used with aria roles progressbar scrollbar slider spinbutton related aria techniques aria-valuenow compatibility tbd: add support in
formation for common ua and at product combinations additional resources wai-aria specification for the aria-valuetext attribute ...
Using the presentation role - Accessibility
the in
formation provided above is one of those opinions and therefore not normative.
... examples example 1: <ul role="tablist"> <li role="presentation"> <a role="tab" href="#">tab 1</a> </li> <li role="presentation"> <a role="tab" href="#">tab 2</a> </li> <li role="presentation"> <a role="tab" href="#">tab 3</a> </li> </ul> working examples: notes aria attributes used related aria techniques compatibility tbd: add support in
formation for common ua and at product combinations additional resources using aria - 2.9 use of role=presentation or role=none: https://www.w3.org/tr/using-aria/#presentation ...
Using the progressbar role - Accessibility
the in
formation provided above is one of those opinions and therefore not normative.
...</div> working examples: notes aria attributes used progressbar aria-valuenow aria-valuemin aria-valuemax aria-valuetext related aria techniques compatibility tbd: add support in
formation for common ua and at product combinations additional resources ...
Using the toolbar role - Accessibility
the in
formation provided above is one of those opinions and therefore not normative.
... examples example 1: code working examples: w3c toolbar example notes aria attributes used related aria techniques compatibility tbd: add support in
formation for common ua and at product combinations additional resources ...
Using ARIA: Roles, states, and properties - Accessibility
addition of aria semantics only exposes extra in
formation to a browser's accessibility api, and does not affect a page's dom.
...see radio role) tablist (including tab and tabpanel roles) tree treegrid document structure roles application article cell columnheader definition directory document feed figure group heading img list listitem math none note presentation row rowgroup rowheader separator table term textbox toolbar tooltip landmark roles banner complementary contentinfo
form main navigation region search live region roles alert log marquee status timer window roles alertdialog dialog states and properties widget attributes aria-autocomplete aria-checked aria-current aria-disabled aria-errormessage aria-expanded aria-haspopup aria-hidden aria-invalid aria-label aria-level aria-modal aria-multiline aria-multiselectable aria-...
Accessibility
mobile accessibility with web access on mobile devices being so popular, and popular plat
forms such as ios and android having fully-fledged accessibility tools, it is important to consider the accessibility of your web content on these plat
forms.
... other documentation understanding the web content accessibility guidelines this set of articles provides quick explanations to help you understand the steps that need to be taken to con
form to the recommendations outlined in the w3c web content accessibility guidelines 2.0 (wcag 2.0 or just wcag, for the purposes of this writing).
-moz-outline-radius - CSS: Cascading Style Sheets
formal definition initial valueas each of the properties of the shorthand:-moz-outline-radius-topleft: 0-moz-outline-radius-topright: 0-moz-outline-radius-bottomright: 0-moz-outline-radius-bottomleft: 0applies toall elementsinheritednopercentagesas each of the properties of the shorthand:-moz-outline-radius-topleft: refer to the corresponding dimension of the border box-moz-outline-radius-topright: r...
...fied-moz-outline-radius-bottomright: as specified-moz-outline-radius-bottomleft: as specifiedanimation typeas each of the properties of the shorthand:-moz-outline-radius-topleft: a length, percentage or calc();-moz-outline-radius-topright: a length, percentage or calc();-moz-outline-radius-bottomright: a length, percentage or calc();-moz-outline-radius-bottomleft: a length, percentage or calc();
formal syntax <outline-radius>{1,4} [ / <outline-radius>{1,4} ]?where <outline-radius> = <length> | <percentage> examples rounding an outline note: this example will not display the desired effect if you are viewing this in a browser other than firefox.
-webkit-border-before - CSS: Cascading Style Sheets
syntax values one or more of the following, in any order: <'border-width'> see border-width <'border-style'> see border-style <'color'> see color
formal definition initial valueas each of the properties of the shorthand:border-width: as each of the properties of the shorthand:border-top-width: mediumborder-right-width: mediumborder-bottom-width: mediumborder-left-width: mediumborder-style: as each of the properties of the shorthand:border-top-style: noneborder-right-style: noneborder-bottom-style: noneborder-left-style: nonecolor: varies from ...
...the transparent keyword maps to rgba(0,0,0,0).animation typediscrete
formal syntax <'border-width'> | <'border-style'> | <'color'>where <color> = <rgb()> | <rgba()> | <hsl()> | <hsla()> | <hex-color> | <named-color> | currentcolor | <deprecated-system-color>where <rgb()> = rgb( <percentage>{3} [ / <alpha-value> ]?
-webkit-text-stroke - CSS: Cascading Style Sheets
formal definition initial valueas each of the properties of the shorthand:-webkit-text-stroke-width: 0-webkit-text-stroke-color: currentcolorapplies toall elementsinheritedyescomputed valueas each of the properties of the shorthand:-webkit-text-stroke-width: absolute <length>-webkit-text-stroke-color: computed coloranimation typeas each of the properties of the shorthand:-webkit-text-stroke-width: di...
...screte-webkit-text-stroke-color: a color
formal syntax <length> | <color>where <color> = <rgb()> | <rgba()> | <hsl()> | <hsla()> | <hex-color> | <named-color> | currentcolor | <deprecated-system-color>where <rgb()> = rgb( <percentage>{3} [ / <alpha-value> ]?
-webkit-touch-callout - CSS: Cascading Style Sheets
when a target is touched and held on ios, safari displays a callout in
formation about the link.
...
formal definition initial valuedefaultapplies toall elementsinheritedyescomputed valueas specifiedanimation typediscrete
formal syntax default | none examples turn off touch callout .example { -webkit-touch-callout: none; } specifications not part of any standard.
:-moz-submit-invalid - CSS: Cascading Style Sheets
the :-moz-submit-invalid css pseudo-class is a mozilla extension that represents any submit <button> on
forms whose contents aren't valid based on their validation constraints.
...you can use this pseudo-class to customize the appearance of the submit button when there are invalid
form fields.
:-moz-ui-invalid - CSS: Cascading Style Sheets
the :-moz-ui-invalid css pseudo-class represents any validated
form element whose value isn't valid based on their validation constraints, in certain circumstances.
... if the element is required, the preceding rules apply only if the user has changed the value or attempted to submit the
form.
:-moz-ui-valid - CSS: Cascading Style Sheets
the :-moz-ui-valid css pseudo-class represents any validated
form element whose value validates correctly based on its validation constraints.
... if the element is required, the preceding rules apply only if the user has changed the value or attempted to submit the
form.
::before (:before) - CSS: Cascading Style Sheets
/* add a heart before links */ a::before { content: "♥"; } note: the pseudo-elements generated by ::before and ::after are contained by the element's
formatting box, and thus don't apply to replaced elements such as <img>, or to <br> elements.
...li { list-style-type: none; position: relative; margin: 2px; padding: 0.5em 0.5em 0.5em 2em; background: lightgrey; font-family: sans-serif; } li.done { background: #ccff99; } li.done::before { content: ''; position: absolute; border-color: #009933; border-style: solid; border-width: 0 0.3em 0.25em 0; height: 1em; top: 1.3em; left: 0.6em; margin-top: -1em; trans
form: rotate(45deg); width: 0.5em; } javascript var list = document.queryselector('ul'); list.addeventlistener('click', function(ev) { if (ev.target.tagname === 'li') { ev.target.classlist.toggle('done'); } }, false); here is the above code example running live.
::first-line (:first-line) - CSS: Cascading Style Sheets
-settings, font-language-override, font-weight, font-size, font-size-adjust, font-stretch, and font-family all background-related properties: background-color, background-clip, background-image, background-origin, background-position, background-repeat, background-size, background-attachment, and background-blend-mode the color property word-spacing, letter-spacing, text-decoration, text-trans
form, and line-height text-shadow, text-decoration, text-decoration-color, text-decoration-line, text-decoration-style, and vertical-align.
...see what i mean?</p> <span>the first line of this text will not receive special styling because it is not a block-level element.</span> css ::first-line { color: blue; text-trans
form: uppercase; /* warning: do not use these */ /* many properties are invalid in ::first-line pseudo-elements */ margin-left: 20px; text-indent: 20px; } result specifications specification status comment css pseudo-elements level 4the definition of '::first-line' in that specification.
:active - CSS: Cascading Style Sheets
other common targets of this pseudo-class include elements that contain an activated element, and
form elements that are being activated through their associated <label>.
...</p> css a:link { color: blue; } /* unvisited links */ a:visited { color: purple; } /* visited links */ a:hover { background: yellow; } /* hovered links */ a:active { color: red; } /* active links */ p:active { background: #eee; } /* active paragraphs */ result active
form elements html <
form> <label for="my-button">my button: </label> <button id="my-button" type="button">try clicking me or my label!</button> </
form> css
form :active { color: red; }
form button { background: white; } result specifications specification status comment html living standardthe definition of ':active' in that specification.
:enabled - CSS: Cascading Style Sheets
html <
form action="url_of_
form"> <label for="firstfield">first field (enabled):</label> <input type="text" id="firstfield" value="lorem"><br> <label for="secondfield">second field (disabled):</label> <input type="text" id="secondfield" value="ipsum" disabled="disabled"><br> <input type="button" value="submit"> </
form> css input:enabled { color: #2b2; } input:disabled { color: #aaa; } re...
... recommendation defines the semantics for html and
forms.
:in-range - CSS: Cascading Style Sheets
in the absence of such a limitation, the element can neither be "in-range" nor "out-of-range." syntax :in-range examples html <
form action="" id="
form1"> <ul>values between 1 and 10 are valid.
... <li> <input id="value1" name="value1" type="number" placeholder="1 to 10" min="1" max="10" value="12"> <label for="value1">your value is </label> </li> </ul> </
form> css li { list-style: none; margin-bottom: 1em; } input { border: 1px solid black; } input:in-range { background-color: rgba(0, 255, 0, 0.25); } input:out-of-range { background-color: rgba(255, 0, 0, 0.25); border: 2px solid red; } input:in-range + label::after { content: 'okay.'; } input:out-of-range + label::after { content: 'out of range!'; } result specifications specification status comment html living standardthe definition of ':in-range' in that specification.
:indeterminate - CSS: Cascading Style Sheets
the :indeterminate css pseudo-class represents any
form element whose state is indeterminate, such as checkboxes which have their html indeterminate attribute set to true, radio buttons which are members of a group in which all radio buttons are unchecked, and indeterminate <progress> elements.
... /* selects any <input> whose state is indeterminate */ input:indeterminate { background: lime; } elements targeted by this selector are: <input type="checkbox"> elements whose indeterminate property is set to true by javascript <input type="radio"> elements, when all radio buttons with the same name value in the
form are unchecked <progress> elements in an indeterminate state syntax :indeterminate examples checkbox & radio button this example applies special styles to the labels associated with indeterminate
form fields.
:lang() - CSS: Cascading Style Sheets
/* selects any <p> in english (en) */ p:lang(en) { quotes: '\201c' '\201d' '\2018' '\2019'; } note: in html, the language is determined by a combination of the lang attribute, the <meta> element, and possibly by in
formation from the protocol (such as http headers).
... syntax
formal syntax :lang( <language-code> ) parameter <language-code> a <string> representing the language you want to target.
:read-only - CSS: Cascading Style Sheets
input:read-only, textarea:read-only { background-color: #ccc; } p:read-only { background-color: #ccc; } syntax :read-only examples confirming
form in
formation in read-only/read-write controls one use of readonly
form controls is to allow the user to check and verify in
formation that they may have entered in an earlier
form (for example, shipping details), while still being able to submit the in
formation along with the rest of the
form.
... input:-moz-read-only, textarea:-moz-read-only, input:read-only, textarea:read-only { border: 0; box-shadow: none; background-color: white; } textarea:-moz-read-write, textarea:read-write { box-shadow: inset 1px 1px 3px #ccc; border-radius: 5px; } you can find the full source code at readonly-confirmation.html; this renders like so: styling read-only non-
form controls this selector doesn't just select <input>/<textarea> elements — it will select any element that cannot be edited by the user.
:read-write - CSS: Cascading Style Sheets
input:read-write, textarea:read-write { background-color: #bbf; } p:read-write { background-color: #bbf; } syntax :read-write examples confirming
form in
formation in read-only/read-write controls one use of readonly
form controls is to allow the user to check and verify in
formation that they may have entered in an earlier
form (for example, shipping details), while still being able to submit the in
formation along with the rest of the
form.
... input:-moz-read-only, textarea:-moz-read-only, input:read-only, textarea:read-only { border: 0; box-shadow: none; background-color: white; } textarea:-moz-read-write, textarea:read-write { box-shadow: inset 1px 1px 3px #ccc; border-radius: 5px; } you can find the full source code at readonly-confirmation.html; this renders like so: styling read-write non-
form controls this selector doesn't just select <input>/<textarea> elements — it will select any element that can be edited by the user, such as a <p> element with contenteditable set on it.
:where() - CSS: Cascading Style Sheets
desktopmobilechromeedgefirefoxinternet exploreroperasafariandroid webviewchrome for androidfirefox for androidopera for androidsafari on iossamsung internet:where()chrome full support 72disabled full support 72disabled disabled from version 72: this feature is behind the #enable-experimental-web-plat
form-features preference (needs to be set to enabled).
... nosafari no support nowebview android no support nochrome android full support 72disabled full support 72disabled disabled from version 72: this feature is behind the #enable-experimental-web-plat
form-features preference (needs to be set to enabled).
suffix - CSS: Cascading Style Sheets
formal definition related at-rule@counter-styleinitial value".
... " (full stop followed by a space)computed valueas specified
formal syntax <symbol>where <symbol> = <string> | <image> | <custom-ident>where <image> = <url> | <image()> | <image-set()> | <element()> | <paint()> | <cross-fade()> | <gradient>where <image()> = image( <image-tags>?
font-stretch - CSS: Cascading Style Sheets
mdn understanding wcag, guideline 1.4 explanations understanding success criterion 1.4.8 | w3c understanding wcag 2.0
formal definition related at-rule@font-faceinitial valuenormalcomputed valueas specified
formal syntax <font-stretch-absolute>{1,2}where <font-stretch-absolute> = normal | ultra-condensed | extra-condensed | condensed | semi-condensed | semi-expanded | expanded | extra-expanded | ultra-expanded | <percentage> examples setting a percentage range for font-stretch the following find a local open sa...
... @font-face { font-family: "open sans"; src: local("open sans")
format("woff2"), url("/fonts/opensans-regular-webfont.woff")
format("woff"); font-stretch: 87.5% 112.5%; } specifications specification status comment css fonts module level 4the definition of 'font-stretch' in that specification.
font-weight - CSS: Cascading Style Sheets
mdn understanding wcag, guideline 1.4 explanations understanding success criterion 1.4.8 | w3c understanding wcag 2.0
formal definition related at-rule@font-faceinitial valuenormalcomputed valueas specified
formal syntax <font-weight-absolute>{1,2}where <font-weight-absolute> = normal | bold | <number <a href="/docs/css/value_definition_syntax#brackets" title="brackets: enclose several entities, combinators, and multipliers to trans
form them as a single component">[1,1000]> examples setting normal font weight in...
... @font-face { font-family: "open sans"; src: local("open sans")
format("woff2"), url("/fonts/opensans-regular-webfont.woff")
format("woff"); font-weight: 400; } specifications specification status comment css fonts module level 4the definition of 'font-weight' in that specification.
@font-feature-values - CSS: Cascading Style Sheets
formal syntax @font-feature-values <family-name># { <feature-value-block-list> }where <family-name> = <string> | <custom-ident>+<feature-value-block-list> = <feature-value-block>+where <feature-value-block> = <feature-type> '{' <feature-value-declaration-list> '}'where <feature-type> = @stylistic | @historical-
forms | @styleset | @character-variant | @swash | @ornaments | @annotation<feature-value-...
...to change preferences in firefox, visit about:config.opera android no support nosafari ios full support 9.3samsung internet android no support no@historical-
formschrome no support noedge no support nofirefox full support 34 full support 34 full support 24disabled disabled from version 24: this feature is behind the layout.css.font-fea...
@import - CSS: Cascading Style Sheets
see here for more in
formation.
...
formal syntax @import [ <string> | <url> ] [ <media-query-list> ]?;where <media-query-list> = <media-query>#where <media-query> = <media-condition> | [ not | only ]?
@keyframes - CSS: Cascading Style Sheets
syntax @keyframes slidein { from { trans
form: translatex(0%); } to { trans
form: translatex(100%); } } values <custom-ident> a name identifying the keyframe list.
... @keyframes important1 { from { margin-top: 50px; } 50% { margin-top: 150px !important; } /* ignored */ to { margin-top: 100px; } } @keyframes important2 { from { margin-top: 50px; margin-bottom: 100px; } to { margin-top: 150px !important; /* ignored */ margin-bottom: 50px; } }
formal syntax @keyframes <keyframes-name> { <keyframe-block-list> }where <keyframes-name> = <custom-ident> | <string><keyframe-block-list> = <keyframe-block>+where <keyframe-block> = <keyframe-selector># { <declaration-list> }where <keyframe-selector> = from | to | <percentage> examples css animation examples see using css animations for examples.
@media - CSS: Cascading Style Sheets
(please see paged media for in
formation about
formatting issues that are specific to these
formats.) screen intended primarily for screens.
...
formal syntax @media <media-query-list> { <group-rule-body> }where <media-query-list> = <media-query>#where <media-query> = <media-condition> | [ not | only ]?
height - CSS: Cascading Style Sheets
formal definition related at-rule@viewportinitial valueas each of the properties of the shorthand:min-height: automax-height: nonepercentagesas each of the properties of the shorthand:min-height: the percentage is calculated with respect to the height of the generated box's containing block.
...if the height of the containing block is not specified explicitly (i.e., it depends on content height), and this element is not absolutely positioned, the percentage value is treated as none.computed valueas each of the properties of the shorthand:min-height: the percentage as specified or the absolute lengthmax-height: the percentage as specified or the absolute length or none
formal syntax <viewport-length>{1,2}where <viewport-length> = auto | <length-percentage>where <length-percentage> = <length> | <percentage> examples setting minimum and maximum height @viewport { height: 500px; } specifications specification status comment css device adaptationthe definition of '"height" descriptor' in that specification.
width - CSS: Cascading Style Sheets
formal definition related at-rule@viewportinitial valueas each of the properties of the shorthand:min-width: automax-width: nonepercentagesas each of the properties of the shorthand:min-width: refer to the width of the containing blockmax-width: refer to the width of the containing blockcomputed valueas each of the properties of the shorthand:min-width: the percentage as specified or the absolute len...
...gthmax-width: the percentage as specified or the absolute length or none
formal syntax <viewport-length>{1,2}where <viewport-length> = auto | <length-percentage>where <length-percentage> = <length> | <percentage> examples setting minimum and maximum width @viewport { width: 500px; } specifications specification status comment css device adaptationthe definition of '"min-width" descriptor' in that specification.
Detecting CSS animation support - CSS: Cascading Style Sheets
if( animation === false ) { // animate in javascript fallback } else { elem.style[ animationstring ] = 'rotate 1s linear infinite'; var keyframes = '@' + keyframeprefix + 'keyframes rotate { '+ 'from {' + keyframeprefix + 'trans
form:rotate( 0deg ) }'+ 'to {' + keyframeprefix + 'trans
form:rotate( 360deg ) }'+ '}'; if( document.stylesheets && document.stylesheets.length ) { document.stylesheets[0].insertrule( keyframes, 0 ); } else { var s = document.createelement( 'style' ); s.innerhtml = keyframes; document.getelementsbytagname( 'head' )[ 0 ].appendchild( s ); ...
... } } this code looks at the value of animation; if it's false, we know we need to use our javascript fallback code to per
form our animation.
Border-image generator - CSS: Cascading Style Sheets
: none; user-select: none; } .ui-input-slider * { float: left; height: 100%; line-height: 100%; } /* input slider */ .ui-input-slider > input { margin: 0; padding: 0; width: 50px; text-align: center; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; } .ui-input-slider-info { width: 90px; padding: 0px 10px 0px 0px; text-align: right; text-trans
form: lowercase; } .ui-input-slider-left, .ui-input-slider-right { width: 16px; cursor: pointer; background: url("https://mdn.mozillademos.org/files/5679/arrows.png") center left no-repeat; } .ui-input-slider-right { background: url("https://mdn.mozillademos.org/files/5679/arrows.png") center right no-repeat; } .ui-input-slider-name { width: 90px; padding: 0 10px 0 0; text-align: right; tex...
...t-trans
form: lowercase; } .ui-input-slider-btn-set { width: 25px; background-color: #2c9fc9; border-radius: 5px; color: #fff; font-weight: bold; line-height: 14px; text-align: center; } .ui-input-slider-btn-set:hover { background-color: #379b4a; cursor: pointer; } /*************************************************************************************/ /*************************************************************************************/ /* * ui dropdown */ /* dropdown */ .ui-dropdown { height: 2em; width: 120px; font-family: "segoe ui", arial, helvetica, sans-serif; font-size: 12px; background-image: url("https://mdn.mozillademos.org/files/6037/drop_arrow_icon.png"); background-position: right center; background-repeat: no-repeat; background-color: #359740; position...
Border-radius generator - CSS: Cascading Style Sheets
ser-select: none; } .ui-input-slider-container * { float: left; height: 100%; line-height: 100%; } /* input slider */ .ui-input-slider > input { margin: 0; padding: 0; width: 50px; text-align: center; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; } .ui-input-slider-info { width: 90px; padding: 0px 10px 0px 0px; text-align: right; text-trans
form: lowercase; } .ui-input-slider-left, .ui-input-slider-right { width: 16px; cursor: pointer; background: url("https://mdn.mozillademos.org/files/5679/arrows.png") center left no-repeat; } .ui-input-slider-right { background: url("https://mdn.mozillademos.org/files/5679/arrows.png") center right no-repeat; } .ui-input-slider-name { width: 90px; padding: 0 10px 0 0; text-align: right; tex...
...t-trans
form: lowercase; } .ui-input-slider-btn-set { width: 25px; background-color: #2c9fc9; border-radius: 5px; color: #fff; font-weight: bold; line-height: 14px; text-align: center; } .ui-input-slider-btn-set:hover { background-color: #379b4a; cursor: pointer; } /* * ui component */ /* checkbox */ .ui-checkbox { text-align: center; font-size: 16px; font-family: "segoe ui", arial, helvetica, sans-serif; line-height: 1.5em; color: #fff; -moz-user-select: none; -webkit-user-select: none; -ms-user-select: none; user-select: none; } .ui-checkbox > input { display: none; } .ui-checkbox > label { font-size: 12px; padding: 0.333em 1.666em 0.5em; height: 1em; line-height: 1em; background-color: #888; background-image: url("https://mdn.mozillademos.org/files/5683/d...
CSS Basic Box Model - CSS: Cascading Style Sheets
css basic box model is a module of css that defines the rectangular boxes—including their padding and margin—that are generated for elements and laid out according to the visual
formatting model.
... visual
formatting model explains the visual
formatting model.
CSS Display - CSS: Cascading Style Sheets
css display is a module of css that defines how the css
formatting box tree is generated from the document element tree and defines properties controlling it.
... reference css properties display css data types <display-outside> <display-inside> <display-listitem> <display-box> <display-internal> <display-legacy> guides css flow layout (display: block, display: inline) block and inline layout in normal flow flow layout and overflow flow layout and writing modes
formatting contexts explained in flow and out of flow display: flex basic concepts of flexbox aligning items in a flex container controlling ratios of flex items along the main axis cross-browser flexbox mixins mastering wrapping of flex items ordering flex items relationship of flexbox to other layout methods backwards compatibility of flexbox typical use cases of flexbox display: grid basic concepts of grid layout relationship to other layout met...
Mastering Wrapping of Flex Items - CSS: Cascading Style Sheets
the difference between visibility: hidden and display: none when you set an item to display: none in order to hide it, the item is removed from the
formatting structure of the page.
...using visibility: hidden keeps the box in the
formatting structure which is useful in that it still behaves as if it were part of the layout even though the user can’t see it.
Flow Layout and Writing Modes - CSS: Cascading Style Sheets
a block-level box will establish a new block
formatting context, meaning that if its inner display type would be flow, it will get a computed display type of flow-root.
...however, replaced elements such as
form controls which include text, should match the writing mode in use.
CSS Fonts - CSS: Cascading Style Sheets
ures: normal; font-size: 2rem; letter-spacing: 1px; } <p>three hundred years ago<br> i thought i might get some sleep<br> i stretched myself out onna antique bed<br> an' my spirit did a midnite creep</p> the result is as follows: variable fonts examples you can find a number of variable fonts examples at v-fonts.com and axis-praxis.org; see also our variable fonts guide for more in
formation and usage in
formation.
...these include things like ligatures (special glyphs that combine characters like 'fi' or 'ffl'), kerning (adjustments to the spacing between specific letter
form pairings), fractions, numeral styles, and a number of others.
Auto-placement in CSS Grid Layout - CSS: Cascading Style Sheets
if you give the items no placement in
formation they will position themselves on the grid, one in each grid cell.
...this is generally what you want, if you are laying out a
form for example you wouldn’t want the labels and fields to become jumbled up in order to fill in some gap.
Understanding CSS z-index - CSS: Cascading Style Sheets
in addition to their horizontal and vertical positions, boxes lie along a "z-axis" and are
formatted one on top of the other.
... stacking context example 1: 2-level html hierarchy, z-index on the last level stacking context example 2: 2-level html hierarchy, z-index on all levels stacking context example 3: 3-level html hierarchy, z-index on the second level original document in
formation author(s): paolo lombardi this article is the english translation of an article i wrote in italian for yappy.
CSS Ruby Layout - CSS: Cascading Style Sheets
css ruby layout is a module of css that provides the rendering model and
formatting controls related to the display of ruby annotation.
... ruby annotation is a
form of interlinear annotation, consisting of short runs of text alongside the base text.
CSS Text - CSS: Cascading Style Sheets
css text is a module of css that defines how to per
form text manipulation, like line breaking, justification and alignment, white space handling, and text trans
formation.
... reference properties hanging-punctuation hyphens letter-spacing line-break overflow-wrap tab-size text-align text-align-last text-indent text-justify text-size-adjust text-trans
form white-space word-break word-spacing specifications specification status comment css logical properties and values level 1 editor's draft updates some properties to be independent of the directionality of the text.
CSS data types - CSS: Cascading Style Sheets
in
formal syntax, data types are denoted by a keyword placed between the inequality signs "<" and ">".
... <color-stop-angle> <counter-style> <custom-ident> <dimension> <filter-function> <flex> <frequency> <frequency-percentage> <gradient> <ident> <image> <integer> <length> <length-percentage> <number> <number-percentage> <percentage> <position> <quote> <ratio> <resolution> <shape-box> <shape-radius> <string> <time> <time-percentage> <timing-function> <toggle-value> <trans
form-function> <type-or-unit> <url> <url-modifier> <zero> specifications specification status comment css values and units module level 4 editor's draft css values and units module level 3 candidate recommendation initial definition.
Privacy and the :visited selector - CSS: Cascading Style Sheets
this process was quick to execute, and made it possible not only to determine where the user had been on the web, but could also be used to guess a lot of in
formation about the user's identity.
... to mitigate this problem, browsers have limited the amount of in
formation that can be obtained from visited links.
Value definition syntax - CSS: Cascading Style Sheets
css value definition syntax, a
formal grammar, is used for defining the set of valid values for a css property or function.
... component value combinators brackets brackets enclose several entities, combinators, and multipliers, then trans
form them as a single component.
Actual value - CSS: Cascading Style Sheets
calculating a property's actual value the user agent per
forms four steps to calculate a property's actual (final) value: first, the specified value is determined based on the result of cascading, inheritance, or using the initial value.
... finally, the used value is trans
formed according to the limitations of the local environment, resulting in the actual value.
align-self - CSS: Cascading Style Sheets
formal definition initial valueautoapplies toflex items, grid items, and absolutely-positioned boxesinheritednocomputed valueauto computes to itself on absolutely-positioned elements, and to the computed value of align-items on the parent (minus any legacy keywords) on all other boxes, or start if the box has no parent.
...otherwise the specified value.animation typediscrete
formal syntax auto | normal | stretch | <baseline-position> | <overflow-position>?
animation-duration - CSS: Cascading Style Sheets
for more in
formation, see setting multiple animation property values.
...
formal definition initial value0sapplies toall elements, ::before and ::after pseudo-elementsinheritednocomputed valueas specifiedanimation typediscrete
formal syntax <time># examples see css animations for examples.
animation-fill-mode - CSS: Cascading Style Sheets
for more in
formation, see setting multiple animation property values.
...
formal definition initial valuenoneapplies toall elements, ::before and ::after pseudo-elementsinheritednocomputed valueas specifiedanimation typediscrete
formal syntax <single-animation-fill-mode>#where <single-animation-fill-mode> = none | forwards | backwards | both examples you can see the effect of animation-fill-mode in the following example.
animation-iteration-count - CSS: Cascading Style Sheets
for more in
formation, see setting multiple animation property values.
...
formal definition initial value1applies toall elements, ::before and ::after pseudo-elementsinheritednocomputed valueas specifiedanimation typediscrete
formal syntax <single-animation-iteration-count>#where <single-animation-iteration-count> = infinite | <number> examples see css animations for examples.
animation-name - CSS: Cascading Style Sheets
for more in
formation, see setting multiple animation property values.
...
formal definition initial valuenoneapplies toall elements, ::before and ::after pseudo-elementsinheritednocomputed valueas specifiedanimation typediscrete
formal syntax [ none | <keyframes-name> ]#where <keyframes-name> = <custom-ident> | <string> examples see css animations for examples.
animation-play-state - CSS: Cascading Style Sheets
for more in
formation, see setting multiple animation property values.
...
formal definition initial valuerunningapplies toall elements, ::before and ::after pseudo-elementsinheritednocomputed valueas specifiedanimation typediscrete
formal syntax <single-animation-play-state>#where <single-animation-play-state> = running | paused examples see css animations for examples.
animation-timing-function - CSS: Cascading Style Sheets
for more in
formation, see setting multiple animation property values.
...
formal definition initial valueeaseapplies toall elements, ::before and ::after pseudo-elementsinheritednocomputed valueas specifiedanimation typediscrete
formal syntax <timing-function>#where <timing-function> = linear | <cubic-bezier-timing-function> | <step-timing-function>where <cubic-bezier-timing-function> = ease | ease-in | ease-out | ease-in-out | cubic-bezier(<number <a href="/docs/css/value_definition_syntax#brackets" title="brackets: enclose several entities, combinators, and multipliers to trans
form them as a single component">[0,1]>, <number>, <number <a href="/docs/css/value_definition_syntax#brackets" title="brackets: enclose several entities, combinators, and multipliers to trans
form them as a single component">[0,1]>, <number>)<step-timing-function> = step-start | step-e...
background-attachment - CSS: Cascading Style Sheets
(it is effectively attached to the element's border.)
formal definition initial valuescrollapplies toall elements.
... it also applies to ::first-letter and ::first-line.inheritednocomputed valueas specifiedanimation typediscrete
formal syntax <attachment>#where <attachment> = scroll | fixed | local examples simple example html <p> there were doors all round the hall, but they were all locked; and when alice had been all the way down one side and up the other, trying every door, she walked sadly down the middle, wondering how she was ever to get out again.
background-blend-mode - CSS: Cascading Style Sheets
formal definition initial valuenormalapplies toall elements.
...it also applies to ::first-letter and ::first-line.inheritednocomputed valueas specifiedanimation typediscrete
formal syntax <blend-mode>#where <blend-mode> = normal | multiply | screen | overlay | darken | lighten | color-dodge | color-burn | hard-light | soft-light | difference | exclusion | hue | saturation | color | luminosity examples <div id="div"></div> <select id="select"> <option>normal</option> <option>multiply</option> <option selected>screen</option> <option>overlay</option> <option>darken</option> <option>lighten</option> <option>color-dodge</option> <option>color-burn</option> <option>hard-light</option> <option>soft-light</option> <opt...
background-clip - CSS: Cascading Style Sheets
formal definition initial valueborder-boxapplies toall elements.
... it also applies to ::first-letter and ::first-line.inheritednocomputed valueas specifiedanimation typediscrete
formal syntax <box>#where <box> = border-box | padding-box | content-box examples html <p class="border-box">the background extends behind the border.</p> <p class="padding-box">the background extends to the inside edge of the border.</p> <p class="content-box">the background extends only to the edge of the content box.</p> <p class="text">the background is clipped to the foreground text.</p> css p { border: .8em darkviolet; border-style: dotted double; margin: 1em 0; padding: 1.4em; background: linear-gradient(60deg, red, yellow, red, yellow, red); font: 900 1.2em sans-serif; text-decoration: underline; } .border-box { background-clip: border-box; } .padding-b...
background-origin - CSS: Cascading Style Sheets
formal definition initial valuepadding-boxapplies toall elements.
... it also applies to ::first-letter and ::first-line.inheritednocomputed valueas specifiedanimation typediscrete
formal syntax <box>#where <box> = border-box | padding-box | content-box examples setting background origins .example { border: 10px double; padding: 10px; background: url('image.jpg'); background-position: center left; background-origin: content-box; } #example2 { border: 4px solid black; padding: 10px; background: url('image.gif'); background-repeat: no-repeat; background-origin: border-box; } div { background-image: url('logo.jpg'), url('mainback.png'); /* applies two images to the background */ background-position: top right, 0px 0px; background-origin: content-box, padding-box; } specifications specification status comment ...
background-repeat - CSS: Cascading Style Sheets
formal definition initial valuerepeatapplies toall elements.
... it also applies to ::first-letter and ::first-line.inheritednocomputed valuea list, each item consisting of two keywords, one per dimensionanimation typediscrete
formal syntax <repeat-style>#where <repeat-style> = repeat-x | repeat-y | [ repeat | space | round | no-repeat ]{1,2} examples setting background-repeat html <ol> <li>no-repeat <div class="one"></div> </li> <li>repeat <div class="two"></div> </li> <li>repeat-x <div class="three"></div> </li> <li>repeat-y <div class="four"></div> </li> <li>space <div class="five"></div> </li> <li>round <div class="six"></div> </li> <li>repeat-x, repeat-y (multiple images) <div class="seven"></div> </li> </ol> css /* shared for all divs in example */ ol, li { margin: 0; padding: 0; } l...
border-block-end - CSS: Cascading Style Sheets
formal definition initial valueas each of the properties of the shorthand:border-top-width: mediumborder-top-style: noneborder-top-color: currentcolorapplies toall elementsinheritednocomputed valueas each of the properties of the shorthand:border-top-width: the absolute length or 0 if border-top-style is none or hiddenborder-top-style: as specifiedborder-top-color: computed coloranimation typeas each...
... of the properties of the shorthand:border-block-end-color: a colorborder-block-end-style: discreteborder-block-end-width: a length
formal syntax <'border-top-width'> | <'border-top-style'> | <'color'>where <color> = <rgb()> | <rgba()> | <hsl()> | <hsla()> | <hex-color> | <named-color> | currentcolor | <deprecated-system-color>where <rgb()> = rgb( <percentage>{3} [ / <alpha-value> ]?
border-block-start - CSS: Cascading Style Sheets
formal definition initial valueas each of the properties of the shorthand:border-width: as each of the properties of the shorthand:border-top-width: mediumborder-right-width: mediumborder-bottom-width: mediumborder-left-width: mediumborder-style: as each of the properties of the shorthand:border-top-style: noneborder-right-style: noneborder-bottom-style: noneborder-left-style: nonecolor: varies from ...
...is none or hiddenborder-style: as each of the properties of the shorthand:border-bottom-style: as specifiedborder-left-style: as specifiedborder-right-style: as specifiedborder-top-style: as specifiedborder-block-start-color: computed coloranimation typeas each of the properties of the shorthand:border-block-start-color: a colorborder-block-start-style: discreteborder-block-start-width: a length
formal syntax <'border-top-width'> | <'border-top-style'> | <'color'>where <color> = <rgb()> | <rgba()> | <hsl()> | <hsla()> | <hex-color> | <named-color> | currentcolor | <deprecated-system-color>where <rgb()> = rgb( <percentage>{3} [ / <alpha-value> ]?
border-block - CSS: Cascading Style Sheets
formal definition initial valueas each of the properties of the shorthand:border-top-width: mediumborder-top-style: noneborder-top-color: currentcolorapplies toall elementsinheritednocomputed valueas each of the properties of the shorthand:border-top-width: the absolute length or 0 if border-top-style is none or hiddenborder-top-style: as specifiedborder-top-color: computed coloranimation typediscret...
...e
formal syntax <'border-top-width'> | <'border-top-style'> | <'color'>where <color> = <rgb()> | <rgba()> | <hsl()> | <hsla()> | <hex-color> | <named-color> | currentcolor | <deprecated-system-color>where <rgb()> = rgb( <percentage>{3} [ / <alpha-value> ]?
border-bottom-left-radius - CSS: Cascading Style Sheets
formal definition initial value0applies toall elements; but user agents are not required to apply to table and inline-table elements when border-collapse is collapse.
...it also applies to ::first-letter.inheritednopercentagesrefer to the corresponding dimension of the border boxcomputed valuetwo absolute <length>s or <percentage>sanimation typea length, percentage or calc();
formal syntax <length-percentage>{1,2}where <length-percentage> = <length> | <percentage> examples live example code .
border-bottom-right-radius - CSS: Cascading Style Sheets
formal definition initial value0applies toall elements; but user agents are not required to apply to table and inline-table elements when border-collapse is collapse.
...it also applies to ::first-letter.inheritednopercentagesrefer to the corresponding dimension of the border boxcomputed valuetwo absolute <length>s or <percentage>sanimation typea length, percentage or calc();
formal syntax <length-percentage>{1,2}where <length-percentage> = <length> | <percentage> examples live example code .
border-bottom-style - CSS: Cascading Style Sheets
formal definition initial valuenoneapplies toall elements.
... it also applies to ::first-letter.inheritednocomputed valueas specifiedanimation typediscrete
formal syntax <line-style>where <line-style> = none | hidden | dotted | dashed | solid | double | groove | ridge | inset | outset examples demonstrating all border styles html <table> <tr> <td class="b1">none</td> <td class="b2">hidden</td> <td class="b3">dotted</td> <td class="b4">dashed</td> </tr> <tr> <td class="b5">solid</td> <td class="b6">double</td> <td class="b7">groove</td> <td class="b8">ridge</td> </tr> <tr> <td class="b9">inset</td> <td class="b10">outset</td> </tr> </table> css /* define look of the table */ table { border-width: 3px; background-color: #52e385; } tr, td { padding: 3px; } /* border-bottom-style example cla...
border-bottom-width - CSS: Cascading Style Sheets
formal definition initial valuemediumapplies toall elements.
... it also applies to ::first-letter.inheritednocomputed valuethe absolute length or 0 if border-bottom-style is none or hiddenanimation typea length
formal syntax <line-width>where <line-width> = <length> | thin | medium | thick examples comparing bottom border widths html <div>element 1</div> <div>element 2</div> css div { border: 1px solid red; margin: 1em 0; } div:nth-child(1) { border-bottom-width: thick; } div:nth-child(2) { border-bottom-width: 2em; } result specifications specification status comment css backgrounds and borders module level 3the definition of 'border-bottom-width' in that specification.
border-bottom - CSS: Cascading Style Sheets
formal definition initial valueas each of the properties of the shorthand:border-bottom-width: mediumborder-bottom-style: noneborder-bottom-color: currentcolorapplies toall elements.
...t also applies to ::first-letter.inheritednocomputed valueas each of the properties of the shorthand:border-bottom-width: the absolute length or 0 if border-bottom-style is none or hiddenborder-bottom-style: as specifiedborder-bottom-color: computed coloranimation typeas each of the properties of the shorthand:border-bottom-color: a colorborder-bottom-style: discreteborder-bottom-width: a length
formal syntax <line-width> | <line-style> | <color>where <line-width> = <length> | thin | medium | thick<line-style> = none | hidden | dotted | dashed | solid | double | groove | ridge | inset | outset<color> = <rgb()> | <rgba()> | <hsl()> | <hsla()> | <hex-color> | <named-color> | currentcolor | <deprecated-system-color>where <rgb()> = rgb( <percentage>{3} [ / <alpha-value> ]?
border-end-end-radius - CSS: Cascading Style Sheets
formal definition initial value0applies toall elements; but user agents are not required to apply to table and inline-table elements when border-collapse is collapse.
...it also applies to ::first-letter.inheritednopercentagesrefer to the corresponding dimension of the border boxcomputed valuetwo absolute <length>s or <percentage>sanimation typea length, percentage or calc();
formal syntax <length-percentage>{1,2}where <length-percentage> = <length> | <percentage> examples border radius with vertical text html <div> <p class="exampletext">example</p> </div> css content div { background-color: rebeccapurple; width: 120px; height: 120px; border-end-end-radius: 10px; } .exampletext { writing-mode: vertical-rl; padding: 10px; background-color: #fff; border-end-end-radius: 10px; } results specifications specification status comment css...
border-end-start-radius - CSS: Cascading Style Sheets
formal definition initial value0applies toall elements; but user agents are not required to apply to table and inline-table elements when border-collapse is collapse.
...it also applies to ::first-letter.inheritednopercentagesrefer to the corresponding dimension of the border boxcomputed valuetwo absolute <length>s or <percentage>sanimation typea length, percentage or calc();
formal syntax <length-percentage>{1,2}where <length-percentage> = <length> | <percentage> examples border radius with vertical text html <div> <p class="exampletext">example</p> </div> css div { background-color: rebeccapurple; width: 120px; height: 120px; border-end-start-radius: 10px; } .exampletext { writing-mode: vertical-rl; padding: 10px; background-color: #fff; border-end-start-radius: 10px; } results specifications specification status comment css log...
border-image-outset - CSS: Cascading Style Sheets
formal definition initial value0applies toall elements, except internal table elements when border-collapse is collapse.
... it also applies to ::first-letter.inheritednocomputed valueas specified, but with relative lengths converted into absolute lengthsanimation typeby computed value type
formal syntax [ <length> | <number> ]{1,4} examples outsetting a border image html <div id="outset">this element has an outset border image!</div> css #outset { width: 10rem; background: #cef; border: 1.4rem solid; border-image: radial-gradient(#ff2, #55f) 40; border-image-outset: 1.5; /* 1.5 × 1.4rem = 2.1rem */ margin: 2.1rem; } result specifications specification status comment css backgrounds and borders module level 3the definition of 'border-image-outset' in that specification.
border-image-repeat - CSS: Cascading Style Sheets
formal definition initial valuestretchapplies toall elements, except internal table elements when border-collapse is collapse.
... it also applies to ::first-letter.inheritednocomputed valueas specifiedanimation typediscrete
formal syntax [ stretch | repeat | round | space ]{1,2} examples repeating border images css #bordered { width: 12rem; margin-bottom: 1rem; padding: 1rem; border: 40px solid; border-image: url("https://mdn.mozillademos.org/files/4127/border.png") 27; border-image-repeat: stretch; /* can be changed in the live sample */ } html <div id="bordered">you can try out various border repetition rules on me!</div> <select id="repetition"> <option value="stretch">stretch</option> <option value="repeat">repeat</option> <option value="round">round</option> <option value="space">space</option> <option value="stretch repeat">stretch repeat</option> <option value="space round">spa...
border-image-source - CSS: Cascading Style Sheets
formal definition initial valuenoneapplies toall elements, except internal table elements when border-collapse is collapse.
... it also applies to ::first-letter.inheritednocomputed valuenone or the image with its uri made absoluteanimation typediscrete
formal syntax none | <image>where <image> = <url> | <image()> | <image-set()> | <element()> | <paint()> | <cross-fade()> | <gradient>where <image()> = image( <image-tags>?
border-image-width - CSS: Cascading Style Sheets
formal definition initial value1applies toall elements, except internal table elements when border-collapse is collapse.
... it also applies to ::first-letter.inheritednopercentagesrefer to the width or height of the border image areacomputed valueas specified, but with relative lengths converted into absolute lengthsanimation typeby computed value type
formal syntax [ <length-percentage> | <number> | auto ]{1,4}where <length-percentage> = <length> | <percentage> examples tiling a border image this example creates a border image using the following ".png" file, which is 90 by 90 pixels: thus, each circle in the source image is 30 by 30 pixels.
border-inline-end - CSS: Cascading Style Sheets
formal definition initial valueas each of the properties of the shorthand:border-width: as each of the properties of the shorthand:border-top-width: mediumborder-right-width: mediumborder-bottom-width: mediumborder-left-width: mediumborder-style: as each of the properties of the shorthand:border-top-style: noneborder-right-style: noneborder-bottom-style: noneborder-left-style: nonecolor: varies from ...
...yle is none or hiddenborder-style: as each of the properties of the shorthand:border-bottom-style: as specifiedborder-left-style: as specifiedborder-right-style: as specifiedborder-top-style: as specifiedborder-inline-end-color: computed coloranimation typeas each of the properties of the shorthand:border-inline-end-color: a colorborder-inline-end-style: discreteborder-inline-end-width: a length
formal syntax <'border-top-width'> | <'border-top-style'> | <'color'>where <color> = <rgb()> | <rgba()> | <hsl()> | <hsla()> | <hex-color> | <named-color> | currentcolor | <deprecated-system-color>where <rgb()> = rgb( <percentage>{3} [ / <alpha-value> ]?
border-inline-start - CSS: Cascading Style Sheets
formal definition initial valueas each of the properties of the shorthand:border-width: as each of the properties of the shorthand:border-top-width: mediumborder-right-width: mediumborder-bottom-width: mediumborder-left-width: mediumborder-style: as each of the properties of the shorthand:border-top-style: noneborder-right-style: noneborder-bottom-style: noneborder-left-style: nonecolor: varies from ...
...one or hiddenborder-style: as each of the properties of the shorthand:border-bottom-style: as specifiedborder-left-style: as specifiedborder-right-style: as specifiedborder-top-style: as specifiedborder-inline-start-color: computed coloranimation typeas each of the properties of the shorthand:border-inline-start-color: a colorborder-inline-start-style: discreteborder-inline-start-width: a length
formal syntax <'border-top-width'> | <'border-top-style'> | <'color'>where <color> = <rgb()> | <rgba()> | <hsl()> | <hsla()> | <hex-color> | <named-color> | currentcolor | <deprecated-system-color>where <rgb()> = rgb( <percentage>{3} [ / <alpha-value> ]?
border-inline - CSS: Cascading Style Sheets
formal definition initial valueas each of the properties of the shorthand:border-top-width: mediumborder-top-style: noneborder-top-color: currentcolorapplies toall elementsinheritednocomputed valueas each of the properties of the shorthand:border-top-width: the absolute length or 0 if border-top-style is none or hiddenborder-top-style: as specifiedborder-top-color: computed coloranimation typediscret...
...e
formal syntax <'border-top-width'> | <'border-top-style'> | <'color'>where <color> = <rgb()> | <rgba()> | <hsl()> | <hsla()> | <hex-color> | <named-color> | currentcolor | <deprecated-system-color>where <rgb()> = rgb( <percentage>{3} [ / <alpha-value> ]?
border-left-style - CSS: Cascading Style Sheets
formal definition initial valuenoneapplies toall elements.
... it also applies to ::first-letter.inheritednocomputed valueas specifiedanimation typediscrete
formal syntax <line-style>where <line-style> = none | hidden | dotted | dashed | solid | double | groove | ridge | inset | outset examples html <table> <tr> <td class="b1">none</td> <td class="b2">hidden</td> <td class="b3">dotted</td> <td class="b4">dashed</td> </tr> <tr> <td class="b5">solid</td> <td class="b6">double</td> <td class="b7">groove</td> <td class="b8">ridge</td> </tr> <tr> <td class="b9">inset</td> <td class="b10">outset</td> </tr> </table> css /* define look of the table */ table { border-width: 2px; background-color: #52e385; } tr, td { padding: 3px; } /* border-left-style example classes */ .b1 {border-left-style: non...
border-left-width - CSS: Cascading Style Sheets
formal definition initial valuemediumapplies toall elements.
... it also applies to ::first-letter.inheritednocomputed valuethe absolute length or 0 if border-left-style is none or hiddenanimation typea length
formal syntax <line-width>where <line-width> = <length> | thin | medium | thick examples comparing border widths html <div>element 1</div> <div>element 2</div> css div { border: 1px solid red; margin: 1em 0; } div:nth-child(1) { border-left-width: thick; } div:nth-child(2) { border-left-width: 2em; } result specifications specification status comment css backgrounds and borders module level 3the definition of 'border-left-width' in that specification.
border-left - CSS: Cascading Style Sheets
formal definition initial valueas each of the properties of the shorthand:border-left-width: mediumborder-left-style: noneborder-left-color: currentcolorapplies toall elements.
... it also applies to ::first-letter.inheritednocomputed valueas each of the properties of the shorthand:border-left-width: the absolute length or 0 if border-left-style is none or hiddenborder-left-style: as specifiedborder-left-color: computed coloranimation typeas each of the properties of the shorthand:border-left-color: a colorborder-left-style: discreteborder-left-width: a length
formal syntax <line-width> | <line-style> | <color>where <line-width> = <length> | thin | medium | thick<line-style> = none | hidden | dotted | dashed | solid | double | groove | ridge | inset | outset<color> = <rgb()> | <rgba()> | <hsl()> | <hsla()> | <hex-color> | <named-color> | currentcolor | <deprecated-system-color>where <rgb()> = rgb( <percentage>{3} [ / <alpha-value> ]?
border-radius - CSS: Cascading Style Sheets
is equivalent to: */ border-top-left-radius: 4px 2px; border-top-right-radius: 3px 4px; border-bottom-right-radius: 6px 2px; border-bottom-left-radius: 3px 4px;
formal definition initial valueas each of the properties of the shorthand:border-top-left-radius: 0border-top-right-radius: 0border-bottom-right-radius: 0border-bottom-left-radius: 0applies toall elements; but user agents are not required to apply to table and inline-table elements when border-collapse is collapse.
...t-radius: two absolute <length>s or <percentage>sborder-top-right-radius: two absolute <length>s or <percentage>sanimation typeas each of the properties of the shorthand:border-top-left-radius: a length, percentage or calc();border-top-right-radius: a length, percentage or calc();border-bottom-right-radius: a length, percentage or calc();border-bottom-left-radius: a length, percentage or calc();
formal syntax <length-percentage>{1,4} [ / <length-percentage>{1,4} ]?where <length-percentage> = <length> | <percentage> examples border: solid 10px; /* the border will curve into a 'd' */ border-radius: 10px 40px 40px 10px; border: groove 1em red; border-radius: 2em; background: gold; border: ridge gold; border-radius: 13em/3em; border: none; border-radius: 40px 10px; ...
border-right-style - CSS: Cascading Style Sheets
formal definition initial valuenoneapplies toall elements.
... it also applies to ::first-letter.inheritednocomputed valueas specifiedanimation typediscrete
formal syntax <line-style>where <line-style> = none | hidden | dotted | dashed | solid | double | groove | ridge | inset | outset examples border styles html <table> <tr> <td class="b1">none</td> <td class="b2">hidden</td> <td class="b3">dotted</td> <td class="b4">dashed</td> </tr> <tr> <td class="b5">solid</td> <td class="b6">double</td> <td class="b7">groove</td> <td class="b8">ridge</td> </tr> <tr> <td class="b9">inset</td> <td class="b10">outset</td> </tr> </table> css /* define look of the table */ table { border-width: 2px; background-color: #52e385; } tr, td { padding: 3px; } /* border-right-style example classes */ .b1 {border...
border-right-width - CSS: Cascading Style Sheets
formal definition initial valuemediumapplies toall elements.
... it also applies to ::first-letter.inheritednocomputed valuethe absolute length or 0 if border-right-style is none or hiddenanimation typea length
formal syntax <line-width>where <line-width> = <length> | thin | medium | thick examples comparing border widths html <div>element 1</div> <div>element 2</div> css div { border: 1px solid red; margin: 1em 0; } div:nth-child(1) { border-right-width: thick; } div:nth-child(2) { border-right-width: 2em; } result specifications specification status comment css backgrounds and borders module level 3the definition of 'border-right-width' in that specification.
border-right - CSS: Cascading Style Sheets
formal definition initial valueas each of the properties of the shorthand:border-right-width: mediumborder-right-style: noneborder-right-color: currentcolorapplies toall elements.
... it also applies to ::first-letter.inheritednocomputed valueas each of the properties of the shorthand:border-right-width: the absolute length or 0 if border-right-style is none or hiddenborder-right-style: as specifiedborder-right-color: computed coloranimation typeas each of the properties of the shorthand:border-right-color: a colorborder-right-style: discreteborder-right-width: a length
formal syntax <line-width> | <line-style> | <color>where <line-width> = <length> | thin | medium | thick<line-style> = none | hidden | dotted | dashed | solid | double | groove | ridge | inset | outset<color> = <rgb()> | <rgba()> | <hsl()> | <hsla()> | <hex-color> | <named-color> | currentcolor | <deprecated-system-color>where <rgb()> = rgb( <percentage>{3} [ / <alpha-value> ]?
border-start-end-radius - CSS: Cascading Style Sheets
formal definition initial value0applies toall elements; but user agents are not required to apply to table and inline-table elements when border-collapse is collapse.
...it also applies to ::first-letter.inheritednopercentagesrefer to the corresponding dimension of the border boxcomputed valuetwo absolute <length>s or <percentage>sanimation typea length, percentage or calc();
formal syntax <length-percentage>{1,2}where <length-percentage> = <length> | <percentage> examples border radius with vertical text html <div> <p class="exampletext">example</p> </div> css div { background-color: rebeccapurple; width: 120px; height: 120px; border-start-end-radius: 10px; } .exampletext { writing-mode: vertical-rl; padding: 10px; background-color: #fff; border-start-end-radius: 10px; } results specifications specification status comment css log...
border-start-start-radius - CSS: Cascading Style Sheets
formal definition initial value0applies toall elements; but user agents are not required to apply to table and inline-table elements when border-collapse is collapse.
...it also applies to ::first-letter.inheritednopercentagesrefer to the corresponding dimension of the border boxcomputed valuetwo absolute <length>s or <percentage>sanimation typea length, percentage or calc();
formal syntax <length-percentage>{1,2}where <length-percentage> = <length> | <percentage> examples border radius with vertical text html <div> <p class="exampletext">example</p> </div> css div { background-color: rebeccapurple; width: 120px; height: 120px; border-start-start-radius: 10px; } .exampletext { writing-mode: vertical-rl; padding: 10px; background-color: #fff; border-start-start-radius: 10px; } results specifications specification status comment css...
border-style - CSS: Cascading Style Sheets
formal definition initial valueas each of the properties of the shorthand:border-top-style: noneborder-right-style: noneborder-bottom-style: noneborder-left-style: noneapplies toall elements.
... it also applies to ::first-letter.inheritednocomputed valueas each of the properties of the shorthand:border-bottom-style: as specifiedborder-left-style: as specifiedborder-right-style: as specifiedborder-top-style: as specifiedanimation typediscrete
formal syntax <line-style>{1,4}where <line-style> = none | hidden | dotted | dashed | solid | double | groove | ridge | inset | outset examples table with all property values here is an example of all the property values.
border-top-left-radius - CSS: Cascading Style Sheets
formal definition initial value0applies toall elements; but user agents are not required to apply to table and inline-table elements when border-collapse is collapse.
...it also applies to ::first-letter.inheritednopercentagesrefer to the corresponding dimension of the border boxcomputed valuetwo absolute <length>s or <percentage>sanimation typea length, percentage or calc();
formal syntax <length-percentage>{1,2}where <length-percentage> = <length> | <percentage> examples live example code an arc of ellipse is used as the border div { border-top-left-radius: 40px 40px; } an arc of ellipse is used as the border div { border-top-left-radius: 40px 20px; } the box is a square: an arc of circle is used as the border div { border-top-left-radius: 40%; } ...
border-top-right-radius - CSS: Cascading Style Sheets
formal definition initial value0applies toall elements; but user agents are not required to apply to table and inline-table elements when border-collapse is collapse.
...it also applies to ::first-letter.inheritednopercentagesrefer to the corresponding dimension of the border boxcomputed valuetwo absolute <length>s or <percentage>sanimation typea length, percentage or calc();
formal syntax <length-percentage>{1,2}where <length-percentage> = <length> | <percentage> examples live example code an arc of circle is used as the border div { border-top-right-radius: 40px 40px; } an arc of ellipse is used as the border div { border-top-right-radius: 40px 20px; } the box is a square: an arc of circle is used as the border div { border-top-right-radius: 40%; } .
border-top-style - CSS: Cascading Style Sheets
formal definition initial valuenoneapplies toall elements.
... it also applies to ::first-letter.inheritednocomputed valueas specifiedanimation typediscrete
formal syntax <line-style>where <line-style> = none | hidden | dotted | dashed | solid | double | groove | ridge | inset | outset examples html <table> <tr> <td class="b1">none</td> <td class="b2">hidden</td> <td class="b3">dotted</td> <td class="b4">dashed</td> </tr> <tr> <td class="b5">solid</td> <td class="b6">double</td> <td class="b7">groove</td> <td class="b8">ridge</td> </tr> <tr> <td class="b9">inset</td> <td class="b10">outset</td> </tr> </table> css /* define look of the table */ table { border-width: 2px; background-color: #52e385; } tr, td { padding: 3px; } /* border-top-style example classes */ .b1 {border-top-style: none;...
border-top-width - CSS: Cascading Style Sheets
formal definition initial valuemediumapplies toall elements.
... it also applies to ::first-letter.inheritednocomputed valuethe absolute length or 0 if border-top-style is none or hiddenanimation typea length
formal syntax <line-width>where <line-width> = <length> | thin | medium | thick examples html <div>element 1</div> <div>element 2</div> css div { border: 1px solid red; margin: 1em 0; } div:nth-child(1) { border-top-width: thick; } div:nth-child(2) { border-top-width: 2em; } result specifications specification status comment css backgrounds and borders module level 3the definition of 'border-top-width' in that specification.
border-top - CSS: Cascading Style Sheets
formal definition initial valueas each of the properties of the shorthand:border-top-width: mediumborder-top-style: noneborder-top-color: currentcolorapplies toall elements.
... it also applies to ::first-letter.inheritednocomputed valueas each of the properties of the shorthand:border-top-width: the absolute length or 0 if border-top-style is none or hiddenborder-top-style: as specifiedborder-top-color: computed coloranimation typeas each of the properties of the shorthand:border-top-color: a colorborder-top-style: discreteborder-top-width: a length
formal syntax <line-width> | <line-style> | <color>where <line-width> = <length> | thin | medium | thick<line-style> = none | hidden | dotted | dashed | solid | double | groove | ridge | inset | outset<color> = <rgb()> | <rgba()> | <hsl()> | <hsla()> | <hex-color> | <named-color> | currentcolor | <deprecated-system-color>where <rgb()> = rgb( <percentage>{3} [ / <alpha-value> ]?
border-width - CSS: Cascading Style Sheets
formal definition initial valueas each of the properties of the shorthand:border-top-width: mediumborder-right-width: mediumborder-bottom-width: mediumborder-left-width: mediumapplies toall elements.
...th: the absolute length or 0 if border-left-style is none or hiddenborder-right-width: the absolute length or 0 if border-right-style is none or hiddenborder-top-width: the absolute length or 0 if border-top-style is none or hiddenanimation typeas each of the properties of the shorthand:border-bottom-width: a lengthborder-left-width: a lengthborder-right-width: a lengthborder-top-width: a length
formal syntax <line-width>{1,4}where <line-width> = <length> | thin | medium | thick examples a mix of values and lengths html <p id="sval"> one value: 6px wide border on all 4 sides</p> <p id="bival"> two different values: 2px wide top and bottom border, 10px wide right and left border</p> <p id="treval"> three different values: 0.3em top, 9px bottom, and zero width right and left</p...
border - CSS: Cascading Style Sheets
formal definition initial valueas each of the properties of the shorthand:border-width: as each of the properties of the shorthand:border-top-width: mediumborder-right-width: mediumborder-bottom-width: mediumborder-left-width: mediumborder-style: as each of the properties of the shorthand:border-top-style: noneborder-right-style: noneborder-bottom-style: noneborder-left-style: noneborder-color: as ea...
...ypeas each of the properties of the shorthand:border-color: as each of the properties of the shorthand:border-bottom-color: a colorborder-left-color: a colorborder-right-color: a colorborder-top-color: a colorborder-style: discreteborder-width: as each of the properties of the shorthand:border-bottom-width: a lengthborder-left-width: a lengthborder-right-width: a lengthborder-top-width: a length
formal syntax <line-width> | <line-style> | <color>where <line-width> = <length> | thin | medium | thick<line-style> = none | hidden | dotted | dashed | solid | double | groove | ridge | inset | outset<color> = <rgb()> | <rgba()> | <hsl()> | <hsla()> | <hex-color> | <named-color> | currentcolor | <deprecated-system-color>where <rgb()> = rgb( <percentage>{3} [ / <alpha-value> ]?
box-align - CSS: Cascading Style Sheets
see flexbox for in
formation about the current standard.
...
formal definition initial valuestretchapplies toelements with a css display value of box or inline-boxinheritednocomputed valueas specifiedanimation typediscrete
formal syntax start | center | end | baseline | stretch examples setting box alignment <!doctype html> <html> <head> <title>css box-align example</title> <style> div.example { display: box; /* as specified */ displ...
box-direction - CSS: Cascading Style Sheets
see flexbox for in
formation about the current standard.
...
formal definition initial valuenormalapplies toelements with a css display value of box or inline-boxinheritednocomputed valueas specifiedanimation typediscrete
formal syntax normal | reverse | inherit examples setting box direction .example { /* bottom-to-top layout */ -moz-box-direction: reverse; /* mozilla */ -webkit-box-direction: reverse; /* webkit */ box-direction: reverse; ...
box-flex-group - CSS: Cascading Style Sheets
see flexbox for in
formation about the current standard.
...
formal definition initial value1applies toin-flow children of box elementsinheritednocomputed valueas specifiedanimation typediscrete
formal syntax <integer> examples simple usage example in the original flexbox spec, box-flex-group could be used to assign flex children to different groups to distribute flexible space between: article:nth-child(1) { -webkit-box-flex-group: 1; } article:nth-c...
box-flex - CSS: Cascading Style Sheets
see flexbox for in
formation about the current standard.
...
formal definition initial value0applies toelements that are direct children of an element with a css display value of -moz-box or -moz-inline-box or -webkit-box or -webkit-inline-boxinheritednocomputed valueas specifiedanimation typediscrete
formal syntax <number> examples setting box-flex <!doctype html> <html> <head> <title>-moz-box-flex example</title> <style> div.example { ...
box-lines - CSS: Cascading Style Sheets
see flexbox for in
formation about the current standard.
...
formal definition initial valuesingleapplies tobox elementsinheritednocomputed valueas specifiedanimation typediscrete
formal syntax single | multiple examples simple usage example in the original version of the spec, box-lines allowed you to specify that you wanted your flex container's children to wrap onto multiple lines.
box-ordinal-group - CSS: Cascading Style Sheets
see flexbox for in
formation about the current standard.
...
formal definition initial value1applies tochildren of box elementsinheritednocomputed valueas specifiedanimation typediscrete
formal syntax <integer> examples basic usage example in an older version of the spec, box-ordinal-group was included to allow you to change the display order of flex children inside a flex container: article:nth-child(1) { -webkit-box-ordinal-group: 2 -moz-box-ordina...
box-orient - CSS: Cascading Style Sheets
see flexbox for in
formation about the current standard.
...
formal definition initial valueinline-axis (horizontal in xul)applies toelements with a css display value of box or inline-boxinheritednocomputed valueas specifiedanimation typediscrete
formal syntax horizontal | vertical | inline-axis | block-axis | inherit examples setting horizontal box orientation here, he box-orient property will cause the two <p> sections in the example to display in the s...
box-pack - CSS: Cascading Style Sheets
see flexbox for in
formation about the current standard.
...
formal definition initial valuestartapplies toelements with a css display value of -moz-box, -moz-inline-box, -webkit-box or -webkit-inline-boxinheritednocomputed valueas specifiedanimation typediscrete
formal syntax start | center | end | justify examples div.example { border-style: solid; display: -moz-box; /* mozilla */ display: -webkit-box; /* webkit */ /* make this box taller than ...
box-shadow - CSS: Cascading Style Sheets
formal definition initial valuenoneapplies toall elements.
... it also applies to ::first-letter.inheritednocomputed valueany length made absolute; any specified color computed; otherwise as specifiedanimation typea shadow list
formal syntax none | <shadow>#where <shadow> = inset?
break-after - CSS: Cascading Style Sheets
formal definition initial valueautoapplies toblock-level elementsinheritednocomputed valueas specifiedanimation typediscrete
formal syntax auto | avoid | always | all | avoid-page | page | left | right | recto | verso | avoid-column | column | avoid-region | region examples breaking into neat columns in the following example we have a container that contains an <h1> spanning all columns (achieve...
... by default, the subheadings and paragraphs were laid out rather messily because the headings were not in a uni
form place.
break-before - CSS: Cascading Style Sheets
formal definition initial valueautoapplies toblock-level elementsinheritednocomputed valueas specifiedanimation typediscrete
formal syntax auto | avoid | always | all | avoid-page | page | left | right | recto | verso | avoid-column | column | avoid-region | region examples breaking into neat columns in the following example we have a container that contains an <h1> spanning all columns (achieve...
... by default, the subheadings and paragraphs were laid out rather messily because the headings were not in a uni
form place.
clamp() - CSS: Cascading Style Sheets
the expressions can be math functions (see calc() for more in
formation), literal values, or other expressions, such as attr(), that evaluate to a valid argument type (like <length>), or nested min() and max() functions.
...
formal syntax clamp( <calc-sum>#{3} )where <calc-sum> = <calc-product> [ [ '+' | '-' ] <calc-product> ]*where <calc-product> = <calc-value> [ '*' <calc-value> | '/' <number> ]*where <calc-value> = <number> | <dimension> | <percentage> | ( <calc-sum> ) examples min, max, and clamp comparison in this example we have a simple responsive example that makes use of min(), max(), and clamp() for some of ...
clear - CSS: Cascading Style Sheets
the floats that are relevant to be cleared are the earlier floats within the same block
formatting context.
...
formal definition initial valuenoneapplies toblock-level elementsinheritednocomputed valueas specifiedanimation typediscrete
formal syntax none | left | right | both | inline-start | inline-end examples clear: left html <div class="wrapper"> <p class="black">lorem ipsum dolor sit amet, consectetuer adipiscing elit.
clip - CSS: Cascading Style Sheets
values <<shape>()> a rectangular <<shape>()> of the
form rect(<top> <right> <bottom> <left>).
...
formal definition initial valueautoapplies toabsolutely positioned elementsinheritednocomputed valueauto if specified as auto, otherwise a rectangle with four values, each of which is auto if specified as auto or the computed length otherwiseanimation typea rectangle
formal syntax <shape> | autowhere <shape> = rect(<top>, <right>, <bottom>, <left>) examples clipping an image css .dotted-border ...
color-adjust - CSS: Cascading Style Sheets
for example, a page might include a list of in
formation with rows whose background colors alternate between white and a light grey.
...
formal definition initial valueeconomyapplies toall elementsinheritedyescomputed valueas specifiedanimation typediscrete
formal syntax economy | exact examples preserving low contrast in this example, a box is shown which uses a background-image and a translucent linear-gradient() function atop a black background color to have a dark blue gradient behind medium red text.
column-rule - CSS: Cascading Style Sheets
formal definition initial valueas each of the properties of the shorthand:column-rule-width: mediumcolumn-rule-style: nonecolumn-rule-color: currentcolorapplies tomulticol elementsinheritednocomputed valueas each of the properties of the shorthand:column-rule-color: computed colorcolumn-rule-style: as specifiedcolumn-rule-width: the absolute length; 0 if the column-rule-style is none or hiddenanimati...
...on typeas each of the properties of the shorthand:column-rule-color: a colorcolumn-rule-style: discretecolumn-rule-width: a length
formal syntax <'column-rule-width'> | <'column-rule-style'> | <'column-rule-color'> examples example 1 /* same as "medium dotted currentcolor" */ p.foo { column-rule: dotted; } /* same as "medium solid blue" */ p.bar { column-rule: solid blue; } /* same as "8px solid currentcolor" */ p.baz { column-rule: solid 8px; } p.abc { column-rule: thick inset blue; } example 2 html <p class="content-box"> this is a bunch of text split into three columns.
column-span - CSS: Cascading Style Sheets
the element establishes a new block
formatting context.
...
formal definition initial valuenoneapplies toin-flow block-level elementsinheritednocomputed valueas specifiedanimation typediscrete
formal syntax none | all examples making a heading span columns in this example, the heading is made to span across all the columns of the article.
columns - CSS: Cascading Style Sheets
formal definition initial valueas each of the properties of the shorthand:column-width: autocolumn-count: autoapplies toblock containers except table wrapper boxesinheritednocomputed valueas each of the properties of the shorthand:column-width: the absolute length, zero or largercolumn-count: as specifiedanimation typeas each of the properties of the shorthand:column-width: a lengthcolumn-count: an i...
...nteger
formal syntax <'column-width'> | <'column-count'> examples setting three equal columns html <p class="content-box"> this is a bunch of text split into three columns using the css `columns` property.
conic-gradient() - CSS: Cascading Style Sheets
accessibility concerns browsers do not provide any special in
formation on background images to assistive technology.
...if the image contains in
formation critical to understanding the page's overall purpose, it is better to describe it semantically in the document.
counter-reset - CSS: Cascading Style Sheets
none no counter reset is to be per
formed.
...
formal definition initial valuenoneapplies toall elementsinheritednocomputed valueas specifiedanimation typediscrete
formal syntax [ <custom-ident> <integer>?
counter-set - CSS: Cascading Style Sheets
none no counter set is to be per
formed.
...
formal definition initial valuenoneapplies toall elementsinheritednocomputed valueas specifiedanimation typediscrete
formal syntax [ <custom-ident> <integer>?
counters() - CSS: Cascading Style Sheets
the counters() function has two
forms: 'counters(name, string)' or 'counters(name, string, style)'.
...
formal syntax counters( <custom-ident>, <string>, <counter-style>?
<custom-ident> - CSS: Cascading Style Sheets
it consists of one or more characters, where characters can be any of the following: any alphabetical character (a to z, or a to z), any decimal digit (0 to 9), a hyphen (-), an underscore (_), an escaped character (preceded by a backslash, \), a unicode character (in the
format of a backslash, \, followed by one to six hexadecimal digits, representing its unicode code point) note that id1, id1, id1 and id1 are all different identifiers as they are case-sensitive.
... implemented by the different browsers: disc, circle, square, decimal, cjk-decimal, decimal-leading-zero, lower-roman, upper-roman, lower-greek, lower-alpha, lower-latin, upper-alpha, upper-latin, arabic-indic, armenian, bengali, cambodian, cjk-earthly-branch, cjk-heavenly-stem, cjk-ideographic, devanagari, ethiopic-numeric, georgian, gujarati, gurmukhi, hebrew, hiragana, hiragana-iroha, japanese-
formal, japanese-in
formal, kannada, katakana, katakana-iroha, khmer, korean-hangul-
formal, korean-hanja-
formal, korean-hanja-in
formal, lao, lower-armenian, malayalam, mongolian, myanmar, oriya, persian, simp-chinese-
formal, simp-chinese-in
formal, tamil, telugu, thai, tibetan, trad-chinese-
formal, trad-chinese-in
formal, upper-armenian, disclosure-open, and disclosure-close.
env() - CSS: Cascading Style Sheets
for non-rectangular displays — like a round watch face — the four values set by the user agent
form a rectangle such that all content inside the rectangle is visible.
...
formal syntax env( <custom-ident> , <declaration-value>?
flex-wrap - CSS: Cascading Style Sheets
see using css flexible boxes for more properties and in
formation.
...
formal definition initial valuenowrapapplies toflex containersinheritednocomputed valueas specifiedanimation typediscrete
formal syntax nowrap | wrap | wrap-reverse examples setting flex container wrap values html <h4>this is an example for flex-wrap:wrap </h4> <div class="content"> <div class="red">1</div> <div class="green">2</div> <div class="blue">3</div> </div> <h4>this is an exampl...
flex - CSS: Cascading Style Sheets
formal definition initial valueas each of the properties of the shorthand:flex-grow: 0flex-shrink: 1flex-basis: autoapplies toflex items, including in-flow pseudo-elementsinheritednocomputed valueas each of the properties of the shorthand:flex-grow: as specifiedflex-shrink: as specifiedflex-basis: as specified, but with relative lengths converted into absolute lengthsanimation typeas each of the prop...
...erties of the shorthand:flex-grow: a numberflex-shrink: a numberflex-basis: a length, percentage or calc();
formal syntax none | [ <'flex-grow'> <'flex-shrink'>?
font-optical-sizing - CSS: Cascading Style Sheets
formal definition initial valueautoapplies toall elements.
... it also applies to ::first-letter and ::first-line.inheritedyescomputed valueas specifiedanimation typediscrete
formal syntax auto | none examples disabling optical sizing <p class="optical-sizing">this paragraph is optically sized.
font-stretch - CSS: Cascading Style Sheets
formal definition initial valuenormalapplies toall elements.
... it also applies to ::first-letter and ::first-line.inheritedyescomputed valueas specifiedanimation typea font stretch
formal syntax <font-stretch-absolute>where <font-stretch-absolute> = normal | ultra-condensed | extra-condensed | condensed | semi-condensed | semi-expanded | expanded | extra-expanded | ultra-expanded | <percentage> examples setting font stretch percentages note that this example will only work in browsers that support <percentage> values.
font-style - CSS: Cascading Style Sheets
mdn understanding wcag, guideline 1.4 explanations w3c understanding wcag 2.1
formal definition initial valuenormalapplies toall elements.
... it also applies to ::first-letter and ::first-line.inheritedyescomputed valueas specifiedanimation typediscrete
formal syntax normal | italic | oblique <angle>?
font-variant-position - CSS: Cascading Style Sheets
formal definition initial valuenormalapplies toall elements.
... it also applies to ::first-letter and ::first-line.inheritedyescomputed valueas specifiedanimation typediscrete
formal syntax normal | sub | super examples setting superscript and subscript
forms html <p class="normal">normal!</p> <p class="super">super!</p> <p class="sub">sub!</p> css p { display: inline; } .normal { font-variant-position: normal; } .super { font-variant-position: super; } .sub { font-variant-position: sub; } result specifications specification status comment css fonts module level 3the definition of 'font-variant-position' in that specification.
gap (grid-gap) - CSS: Cascading Style Sheets
formal definition initial valueas each of the properties of the shorthand:row-gap: normalcolumn-gap: normalapplies tomulti-column elements, flex containers, grid containersinheritednocomputed valueas each of the properties of the shorthand:row-gap: as specified, with <length>s made absolute, and normal computing to zero except on multi-column elementscolumn-gap: as specified, with <length>s made abso...
...lute, and normal computing to zero except on multi-column elementsanimation typeas each of the properties of the shorthand:row-gap: a length, percentage or calc();column-gap: a length, percentage or calc();
formal syntax <'row-gap'> <'column-gap'>?
grid-auto-columns - CSS: Cascading Style Sheets
fit-content(argument) represents the
formula min(max-content, max(auto, argument)), which is calculated similar to auto (i.e.
...
formal definition initial valueautoapplies togrid containersinheritednopercentagesrefer to corresponding dimension of the content areacomputed valuethe percentage as specified or the absolute lengthanimation typediscrete
formal syntax <track-size>+where <track-size> = <track-breadth> | minmax( <inflexible-breadth> , <track-breadth> ) | fit-content( [ <length> | <percentage> ] )where <track-breadth>...
grid-auto-flow - CSS: Cascading Style Sheets
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.
...
formal definition initial valuerowapplies togrid containersinheritednocomputed valueas specifiedanimation typediscrete
formal syntax [ row | column ] | dense examples setting grid auto-placement html <div id="grid"> <div id="item1"></div> <div id="item2"></div> <div id="item3"></div> <div id="item4"></div> <div id="item5"></div> </div> <select id="direction" onchange="changegridautofl...
grid-column-end - CSS: Cascading Style Sheets
note: named grid areas automatically generate implicit named lines of this
form, so specifying grid-column-end: foo; will choose the end edge of that named grid area (unless another line named foo-end was explicitly specified before it).
...
formal definition initial valueautoapplies togrid items and absolutely-positioned boxes whose containing block is a grid containerinheritednocomputed valueas specifiedanimation typediscrete
formal syntax <grid-line>where <grid-line> = auto | <custom-ident> | [ <integer> && <custom-ident>?
grid-column-start - CSS: Cascading Style Sheets
note: named grid areas automatically generate implicit named lines of this
form, so specifying grid-column-start: foo; will choose the start edge of that named grid area (unless another line named foo-start was explicitly specified before it).
...
formal definition initial valueautoapplies togrid items and absolutely-positioned boxes whose containing block is a grid containerinheritednocomputed valueas specifiedanimation typediscrete
formal syntax <grid-line>where <grid-line> = auto | <custom-ident> | [ <integer> && <custom-ident>?
grid-column - CSS: Cascading Style Sheets
note: named grid areas automatically generate implicit named lines of this
form, so specifying grid-column: foo; will choose the start/end edge of that named grid area (unless another line named foo-start/foo-end was explicitly specified before it).
...
formal definition initial valueas each of the properties of the shorthand:grid-column-start: autogrid-column-end: autoapplies togrid items and absolutely-positioned boxes whose containing block is a grid containerinheritednocomputed valueas each of the properties of the shorthand:grid-column-start: as specifiedgrid-column-end: as specifiedanimation typediscrete
formal syntax <grid-line> [ / <grid-l...
grid-row-end - CSS: Cascading Style Sheets
note: named grid areas automatically generate implicit named lines of this
form, so specifying grid-row-end: foo; will choose the end edge of that named grid area (unless another line named foo-end was explicitly specified before it).
...
formal definition initial valueautoapplies togrid items and absolutely-positioned boxes whose containing block is a grid containerinheritednocomputed valueas specifiedanimation typediscrete
formal syntax <grid-line>where <grid-line> = auto | <custom-ident> | [ <integer> && <custom-ident>?
grid-row-start - CSS: Cascading Style Sheets
note: named grid areas automatically generate implicit named lines of this
form, so specifying grid-row-start: foo; will choose the start edge of that named grid area (unless another line named foo-start was explicitly specified before it).
...
formal definition initial valueautoapplies togrid items and absolutely-positioned boxes whose containing block is a grid containerinheritednocomputed valueas specifiedanimation typediscrete
formal syntax <grid-line>where <grid-line> = auto | <custom-ident> | [ <integer> && <custom-ident>?
grid-row - CSS: Cascading Style Sheets
note: named grid areas automatically generate implicit named lines of this
form, so specifying grid-row: foo; will choose the start/end edge of that named grid area (unless another line named foo-start/foo-end was explicitly specified before it).
...
formal definition initial valueas each of the properties of the shorthand:grid-row-start: autogrid-row-end: autoapplies togrid items and absolutely-positioned boxes whose containing block is a grid containerinheritednocomputed valueas each of the properties of the shorthand:grid-row-start: as specifiedgrid-row-end: as specifiedanimation typediscrete
formal syntax <grid-line> [ / <grid-line> ]?where...
grid-template-areas - CSS: Cascading Style Sheets
unless those cells
form a rectangle, the declaration is invalid.
...
formal definition initial valuenoneapplies togrid containersinheritednocomputed valueas specifiedanimation typediscrete
formal syntax none | <string>+ examples specifying named grid areas html <section id="page"> <header>header</header> <nav>navigation</nav> <main>main area</main> <footer>footer</footer> </section> css #page { display: grid; width: 100%; height: 250px; grid-template-areas: "head head" "nav main" "nav foot"; grid-template-rows: 50px 1fr 30px; grid-template-columns: 150px 1fr; } #page > header { grid-area: head; background-color: #8ca0ff; } #page > nav { grid-area: nav; background-color: #ffa08c; } #page > main { grid-area: main; background-color: #ffff64; } #page > footer { grid-ar...
grid-template - CSS: Cascading Style Sheets
formal definition initial valueas each of the properties of the shorthand:grid-template-columns: nonegrid-template-rows: nonegrid-template-areas: noneapplies togrid containersinheritednopercentagesas each of the properties of the shorthand:grid-template-columns: refer to corresponding dimension of the content areagrid-template-rows: refer to corresponding dimension of the content areacomputed valueas...
... each of the properties of the shorthand:grid-template-columns: as specified, but with relative lengths converted into absolute lengthsgrid-template-rows: as specified, but with relative lengths converted into absolute lengthsgrid-template-areas: as specifiedanimation typediscrete
formal syntax none | [ <'grid-template-rows'> / <'grid-template-columns'> ] | [ <line-names>?
grid - CSS: Cascading Style Sheets
formal definition initial valueas each of the properties of the shorthand:grid-template-rows: nonegrid-template-columns: nonegrid-template-areas: nonegrid-auto-rows: autogrid-auto-columns: autogrid-auto-flow: rowgrid-column-gap: 0grid-row-gap: 0column-gap: normalrow-gap: normalapplies togrid containersinheritednopercentagesas each of the properties of the shorthand:grid-template-rows: refer to corres...
...ow: as specifiedgrid-column-gap: the percentage as specified or the absolute lengthgrid-row-gap: the percentage as specified or the absolute lengthcolumn-gap: as specified, with <length>s made absolute, and normal computing to zero except on multi-column elementsrow-gap: as specified, with <length>s made absolute, and normal computing to zero except on multi-column elementsanimation typediscrete
formal syntax <'grid-template'> | <'grid-template-rows'> / [ auto-flow && dense?
hyphens - CSS: Cascading Style Sheets
note: the rules defining how hyphenation is per
formed are not explicitly defined by the specification, so the exact hyphenation may vary from browser to browser.
...
formal definition initial valuemanualapplies toall elementsinheritedyescomputed valueas specifiedanimation typediscrete
formal syntax none | manual | auto examples specifying text hyphenation this example uses three classes, one for each possible configuration of the hyphens property.
image-set() - CSS: Cascading Style Sheets
accessibility concerns browsers do not provide any special in
formation on background images to assistive technology.
...if the image contains in
formation critical to understanding the page's overall purpose, it is better to describe it semantically in the document.
isolation - CSS: Cascading Style Sheets
formal definition initial valueautoapplies toall elements.
... in svg, it applies to container elements, graphics elements, and graphics referencing elements.inheritednocomputed valueas specifiedanimation typediscrete
formal syntax auto | isolate examples forcing a new stacking context for an element html <div id="b" class="a"> <div id="d"> <div class="a c">auto</div> </div> <div id="e"> <div class="a c">isolate</div> </div> </div> css .a { background-color: rgb(0,255,0); } #b { width: 200px; height: 210px; } .c { width: 100px; height: 100px; border: 1px solid black; padding: 2px; mix-blend-mode: difference; } #d { isolation: auto; } #e { isolation: isolate; } result specifications specification status comment compositing and blending level 1the definition of 'isolation' in tha...
justify-items - CSS: Cascading Style Sheets
ine; justify-items: last baseline; /* overflow alignment (for positional alignment only) */ justify-items: safe center; justify-items: unsafe center; /* legacy alignment */ justify-items: legacy right; justify-items: legacy left; justify-items: legacy center; /* global values */ justify-items: inherit; justify-items: initial; justify-items: unset; this property can take one of four different
forms: basic keywords: one of the keyword values normal, auto, or stretch.
...
formal definition initial valuelegacyapplies toall elementsinheritednocomputed valueas specifiedanimation typediscrete
formal syntax normal | stretch | <baseline-position> | <overflow-position>?
justify-self - CSS: Cascading Style Sheets
ght; /* pack item from the right */ /* baseline alignment */ justify-self: baseline; justify-self: first baseline; justify-self: last baseline; /* overflow alignment (for positional alignment only) */ justify-self: safe center; justify-self: unsafe center; /* global values */ justify-self: inherit; justify-self: initial; justify-self: unset; this property can take one of three different
forms: basic keywords: one of the keyword values normal, auto, or stretch.
...
formal definition initial valueautoapplies toblock-level boxes, absolutely-positioned boxes, and grid itemsinheritednocomputed valueas specifiedanimation typediscrete
formal syntax auto | normal | stretch | <baseline-position> | <overflow-position>?
letter-spacing - CSS: Cascading Style Sheets
mdn understanding wcag, guideline 1.4 explanations understanding success criterion 1.4.8 | w3c understanding wcag 2.0
formal definition initial valuenormalapplies toall elements.
... it also applies to ::first-letter and ::first-line.inheritedyescomputed valuean optimum value consisting of either an absolute length or the keyword normalanimation typea length
formal syntax normal | <length> examples setting letter spacing html <p class="normal">letter spacing</p> <p class="em-wide">letter spacing</p> <p class="em-wider">letter spacing</p> <p class="em-tight">letter spacing</p> <p class="px-wide">letter spacing</p> css .normal { letter-spacing: normal; } .em-wide { letter-spacing: 0.4em; } .em-wider { letter-spacing: 1em; } .em-tight { letter-spacing: -0.05em; } .px-wide { letter-spacing: 6px; } result specifications specification status comment css text module level 3the definition of 'letter-spacing' in that specification.
line-height - CSS: Cascading Style Sheets
w3c understanding wcag 2.1
formal definition initial valuenormalapplies toall elements.
... it also applies to ::first-letter and ::first-line.inheritedyespercentagesrefer to the font size of the element itselfcomputed valuefor percentage and length values, the absolute length, otherwise as specifiedanimation typeeither number or length
formal syntax normal | <number> | <length> | <percentage> examples basic example /* all rules below have the same resultant line height */ div { line-height: 1.2; font-size: 10pt; } /* number/unitless */ div { line-height: 1.2em; font-size: 10pt; } /* length */ div { line-height: 120%; font-size: 10pt; } /* percentage */ div { font: 10pt/1.2 georgia,"bitstream charter",serif; } /* font shorthand */ it is often more convenient to set line-height by using the font shorthand as shown above, but this requires the font-family property to ...
list-style-position - CSS: Cascading Style Sheets
for more in
formation on this, see bug 36854.
...
formal definition initial valueoutsideapplies tolist itemsinheritedyescomputed valueas specifiedanimation typediscrete
formal syntax inside | outside examples setting list item position html <ul class="inside">list 1 <li>list item 1-1</li> <li>list item 1-2</li> <li>list item 1-3</li> <li>list item 1-4</li> </ul> <ul class="outside">list 2 <li>list item 2-1</li> <li>list item 2-2</l...
margin-bottom - CSS: Cascading Style Sheets
formal definition initial value0applies toall elements, except elements with table display types other than table-caption, table and inline-table.
... it also applies to ::first-letter and ::first-line.inheritednopercentagesrefer to the width of the containing blockcomputed valuethe percentage as specified or the absolute lengthanimation typea length
formal syntax <length> | <percentage> | auto examples setting positive and negative bottom margins html <div class="container"> <div class="box0">box 0</div> <div class="box1">box 1</div> <div class="box2">box one's negative margin pulls me up</div> </div> css css for divs to set margin-bottom and height .box0 { margin-bottom:1em; height:3em; } .box1 { margin-bottom:-1.5em; height:4em; } .box2 { border:1px dashed black; border-width:1px 0; margin-bottom:2em; } some definitions for container and divs so margins' effects can be seen more clearly .container...
margin-left - CSS: Cascading Style Sheets
flexbox layout mode
formal definition initial value0applies toall elements, except elements with table display types other than table-caption, table and inline-table.
... it also applies to ::first-letter and ::first-line.inheritednopercentagesrefer to the width of the containing blockcomputed valuethe percentage as specified or the absolute lengthanimation typea length
formal syntax <length> | <percentage> | auto examples setting left margin using pixels and percentages .content { margin-left: 5%; } .sidebox { margin-left: 10px; } .logo { margin-left: -5px; } specifications specification status comment css basic box modelthe definition of 'margin-left' in that specification.
margin-right - CSS: Cascading Style Sheets
flexbox layout mode
formal definition initial value0applies toall elements, except elements with table display types other than table-caption, table and inline-table.
... it also applies to ::first-letter and ::first-line.inheritednopercentagesrefer to the width of the containing blockcomputed valuethe percentage as specified or the absolute lengthanimation typea length
formal syntax <length> | <percentage> | auto examples setting right margin using pixels and percentages .content { margin-right: 5%; } .sidebox { margin-right: 10px; } .logo { margin-right: -5px; } specifications specification status comment css basic box modelthe definition of 'margin-right' in that specification.
margin-top - CSS: Cascading Style Sheets
formal definition initial value0applies toall elements, except elements with table display types other than table-caption, table and inline-table.
... it also applies to ::first-letter and ::first-line.inheritednopercentagesrefer to the width of the containing blockcomputed valuethe percentage as specified or the absolute lengthanimation typea length
formal syntax <length> | <percentage> | auto examples setting positive and negative top margins .content { margin-top: 5%; } .sidebox { margin-top: 10px; } .logo { margin-top: -5px; } #footer { margin-top: 1em; } specifications specification status comment css basic box modelthe definition of 'margin-top' in that specification.
margin-trim - CSS: Cascading Style Sheets
formal definition initial valuenoneapplies toblock containers and multi-column containers.
... it also applies to ::first-letter and ::first-line.inheritednocomputed valueas specifiedanimation typediscrete
formal syntax none | in-flow | all examples basic usage once support is implemented for this property, it will probably work like so: when you've got a container with some inline children and you want to put a margin between each child but not have it interfere with the spacing at the end of the row, you might do something like this: article { background-color: red; margin: 20px; padding: 20px; display: inline-block; } article > span { background-color: black; color: white; text-align: center; padding: 10px; margin-right: 20px; } the problem here is that you'd end up with 20px too much spacing at the right of the row, so you'd maybe do this to fix it: span...
margin - CSS: Cascading Style Sheets
formal syntax [ <length> | <percentage> | auto ]{1,4} examples simple example html <div class="center">this element is centered.</div> <div class="outside">this element is positioned outside of its container.</div> css .center { margin: auto; background: lime; width: 66%; } .outside { margin: 3rem 0 0 -3rem; background: cyan; width: 66%; } more examples margin: 5%; ...
...see mastering margin collapsing for more in
formation.
mask-border - CSS: Cascading Style Sheets
formal definition initial valueas each of the properties of the shorthand:mask-border-mode: alphamask-border-outset: 0mask-border-repeat: stretchmask-border-slice: 0mask-border-source: nonemask-border-width: autoapplies toall elements; in svg, it applies to container elements excluding the defs element and all graphics elementsinheritednopercentagesas each of the properties of the shorthand:mask-bord...
...er-source: as specified, but with <url> values made absolutemask-border-width: as specified, but with relative lengths converted into absolute lengthsanimation typeas each of the properties of the shorthand:mask-border-mode: discretemask-border-outset: discretemask-border-repeat: discretemask-border-slice: discretemask-border-source: discretemask-border-width: discretecreates stacking contextyes
formal syntax <'mask-border-source'> | <'mask-border-slice'> [ / <'mask-border-width'>?
mask-position - CSS: Cascading Style Sheets
formal definition initial valuecenterapplies toall elements; in svg, it applies to container elements excluding the defs element and all graphics elementsinheritednopercentagesrefer to size of mask painting area minus size of mask layer image (see the text for background-position)computed valueconsists of two keywords representing the origin and two offsets from that origin, each given as an absolute...
... length (if given a <length>), otherwise as a percentage.animation typerepeatable list of simple list of length, percentage, or calc
formal syntax <position>#where <position> = [ [ left | center | right ] | [ top | center | bottom ] | [ left | center | right | <length-percentage> ] [ top | center | bottom | <length-percentage> ]?
mask - CSS: Cascading Style Sheets
formal definition initial valueas each of the properties of the shorthand:mask-image: nonemask-mode: match-sourcemask-repeat: no-repeatmask-position: centermask-clip: border-boxmask-origin: border-boxmask-size: automask-composite: addapplies toall elements; in svg, it applies to container elements excluding the defs element and all graphics elementsinheritednopercentagesas each of the properties of t...
...solute lengthsmask-composite: as specifiedanimation typeas each of the properties of the shorthand:mask-image: discretemask-mode: discretemask-repeat: discretemask-position: repeatable list of simple list of length, percentage, or calcmask-clip: discretemask-origin: discretemask-size: repeatable list of simple list of length, percentage, or calcmask-composite: discretecreates stacking contextyes
formal syntax <mask-layer>#where <mask-layer> = <mask-reference> | <position> [ / <bg-size> ]?
max-block-size - CSS: Cascading Style Sheets
fit-content(<length-percentage>) uses the fit-content
formula with the available space replaced by the specified argument, i.e.
...
formal definition initial value0applies tosame as width and heightinheritednopercentagesblock-size of containing blockcomputed valuesame as max-width and max-heightanimation typea length, percentage or calc();
formal syntax <'max-width'> examples setting max-block-size with horizontal and vertical text in this example, the same text (the opening sentences from herman melville's novel moby-dick) ...
max-width - CSS: Cascading Style Sheets
fit-content(<length-percentage>) uses the fit-content
formula with the available space replaced by the specified argument, i.e.
... mdn understanding wcag, guideline 1.4 explanations understanding success criterion 1.4.4 | w3c understanding wcag 2.0
formal definition initial valuenoneapplies toall elements but non-replaced inline elements, table rows, and row groupsinheritednopercentagesrefer to the width of the containing blockcomputed valuethe percentage as specified or the absolute length or noneanimation typea length, percentage or calc();
formal syntax auto | <length> | <percentage> | min-content | max-content | fit-content(<length-percentage>)where <length-percentage> = <length> | <percentage> e...
min-width - CSS: Cascading Style Sheets
fit-content(<length-percentage>) uses the fit-content
formula with the available space replaced by the specified argument, i.e.
...
formal definition initial valueautoapplies toall elements but non-replaced inline elements, table rows, and row groupsinheritednopercentagesrefer to the width of the containing blockcomputed valuethe percentage as specified or the absolute lengthanimation typea length, percentage or calc();
formal syntax auto | <length> | <percentage> | min-content | max-content | fit-content(<length-percentage>)where <length-percentage> = <length> | <percentage> examples setting minimum element width table { min-width: 75%; }
form { min-width: 0; } specifications specification status comment css box sizing module level 4the definition of 'min-width' in that specification.
mix-blend-mode - CSS: Cascading Style Sheets
formal definition initial valuenormalapplies toall elementsinheritednocomputed valueas specifiedanimation typediscretecreates stacking contextyes
formal syntax <blend-mode>where <blend-mode> = normal | multiply | screen | overlay | darken | lighten | color-dodge | color-burn | hard-light | soft-light | difference | exclusion | hue | saturation | color | luminosity examples effect of different mix...
...padding: 1em; margin: .5em .5em 0; font: .8em sans-serif; text-align: left; white-space: nowrap; } .note + .row .cell { margin-top: 0; } .container { position: relative; background: linear-gradient(to right, #000 0%, transparent 50%, #fff 100%), linear-gradient(to bottom, #ff0 0%, #f0f 50%, #0ff 100%); width: 150px; height: 150px; margin: 0 auto; } .r { trans
form-origin: center; trans
form: rotate(-30deg); fill: url(#red); } .g { trans
form-origin: center; trans
form: rotate(90deg); fill: url(#green); } .b { trans
form-origin: center; trans
form: rotate(210deg); fill: url(#blue); } .isolate .group { isolation: isolate; } .normal .item { mix-blend-mode: normal; } .multiply .item { mix-blend-mode: multiply; } .screen .item { mix-...
offset-anchor - CSS: Cascading Style Sheets
> values */ offset-anchor: 25% 75%; /* <length> values */ offset-anchor: 0 0; offset-anchor: 1cm 2cm; offset-anchor: 10ch 8em; /* edge offsets values */ offset-anchor: bottom 10px right 20px; offset-anchor: right 3em bottom 10px; /* global values */ offset-anchor: inherit; offset-anchor: initial; offset-anchor: unset; values auto offset-anchor is given the same value as the element's trans
form-origin, unless offset-path is none, in which case it takes its value from offset-position.
...
formal definition initial valueautoapplies totrans
formable elementsinheritednopercentagesrelativetowidthandheightcomputed valuefor <length> the absolute value, otherwise a percentageanimation typea position
formal syntax auto | <position>where <position> = [ [ left | center | right ] | [ top | center | bottom ] | [ left | center | right | <length-percentage> ] [ top | center | bottom | <length-percentage> ]?
offset-path - CSS: Cascading Style Sheets
formal definition initial valuenoneapplies totrans
formable elementsinheritednocomputed valueas specifiedanimation typeas <angle>, <basic-shape> or <path()>creates stacking contextyes
formal syntax none | ray( [ <angle> && <size>?
...6 a11,11 0 0,1 595,789 v434 a11,11 0 0,0 584,423 h506 l900,190" fill="none" stroke="black" stroke-width="13" stroke-linejoin="round" stroke-linecap="round" /> <path id="firstscissorhalf" class="scissorhalf" d="m30,0 h-10 a10,10 0 0,0 -20,10 a20,20 0 1,1 -40,-10 h20 a10,10 0 0,1 30,0 m-40,20 a10,10 1 0,0 -40,0 a10,10 1 0,0 -40,20 m0,0" trans
form="translate(0,0)" fill="green" stroke="black" stroke-width="5" stroke-linejoin="round" stroke-linecap="round" fill-rule="evenodd" /> <path id="secondscissorhalf" class="scissorhalf" d="m30,0 h-10 a10,10 0 0,1 -20,-10 a20,20 0 1,0 -40,10 h20 a10,10 0 0,0 30,0 m-40,-20 a10,10 1 0,0 -40,0 a10,10 1 0,0 -40,-20 m0,0" trans
form="translate...
offset-rotate - CSS: Cascading Style Sheets
<angle> the element has a constant clockwise rotation trans
formation applied to it by the specified rotation angle.
...
formal definition initial valueautoapplies totrans
formable elementsinheritednocomputed valueas specifiedanimation typeas <angle>, <basic-shape> or <path()>
formal syntax [ auto | reverse ] | <angle> examples setting element orientation along its offset path html <div></div> <div></div> <div></div> css div { width: 40px; height: 40px; background: #2bc4a2; margin: 20px; clip-path: polygon(0% 0%, 70% 0%, 100% 50%, 70% 100%, 0% 100%, 30% 50%); animation: move 5000ms infinite alternate ease-in-out; of...
offset - CSS: Cascading Style Sheets
et: path('m 100 100 l 300 100 l 200 300 z'); offset: url(arc.svg); /* offset path with distance and/or rotation */ offset: url(circle.svg) 100px; offset: url(circle.svg) 40%; offset: url(circle.svg) 30deg; offset: url(circle.svg) 50px 20deg; /* including offset anchor */ offset: ray(45deg closest-side) / 40px 20px; offset: url(arc.svg) 2cm / 0.5cm 3cm; offset: url(arc.svg) 30deg / 50px 100px;
formal definition initial valueas each of the properties of the shorthand:offset-position: autooffset-path: noneoffset-distance: 0offset-anchor: autooffset-rotate: autoapplies totrans
formable elementsinheritednopercentagesas each of the properties of the shorthand:offset-position: refertosizeofcontainingblockoffset-distance: refer to the total path lengthoffset-anchor: relativetowidthandheightcompute...
...se a percentageoffset-anchor: for <length> the absolute value, otherwise a percentageoffset-rotate: as specifiedanimation typeas each of the properties of the shorthand:offset-position: a positionoffset-path: as <angle>, <basic-shape> or <path()>offset-distance: a length, percentage or calc();offset-anchor: a positionoffset-rotate: as <angle>, <basic-shape> or <path()>creates stacking contextyes
formal syntax [ <'offset-position'>?
outline - CSS: Cascading Style Sheets
how to design useful and usable focus indicators wcag 2.1: understanding success criterion 2.4.7: focus visible
formal definition initial valueas each of the properties of the shorthand:outline-color: invert, for browsers supporting it, currentcolor for the otheroutline-style: noneoutline-width: mediumapplies toall elementsinheritednocomputed valueas each of the properties of the shorthand:outline-color: for the keyword invert, the computed value is invert.
...the transparent keyword maps to rgba(0,0,0,0).outline-width: an absolute length; if the keyword none is specified, the computed value is 0outline-style: as specifiedanimation typeas each of the properties of the shorthand:outline-color: a coloroutline-width: a lengthoutline-style: discrete
formal syntax [ <'outline-color'> | <'outline-style'> | <'outline-width'> ] examples using outline to set a focus style html <a href="#">this link has a special focus style.</a> css a { border: 1px solid; border-radius: 3px; display: inline-block; margin: 10px; padding: 5px; } a:focus { outline: 4px dotted #e73; outline-offset: 4px; background: #ffa; } result specificatio...
overflow-block - CSS: Cascading Style Sheets
if content fits inside the padding box, it looks the same as visible, but still establishes a new block-
formatting context.
...
formal definition initial valueautoapplies toblock-containers, flex containers, and grid containersinheritednocomputed valueas specified, except with visible/clip computing to auto/hidden respectively if one of overflow-x or overflow-y is neither visible nor clipanimation typediscrete
formal syntax visible | hidden | clip | scroll | auto examples html <ul> <li><code>overflow-block:hidden</code> — hides the text outside the box <div id="div1"> lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
overflow-inline - CSS: Cascading Style Sheets
if content fits inside the padding box, it looks the same as visible, but still establishes a new block-
formatting context.
...
formal definition initial valueautoapplies toblock-containers, flex containers, and grid containersinheritednocomputed valueas specified, except with visible/clip computing to auto/hidden respectively if one of overflow-x or overflow-y is neither visible nor clipanimation typediscrete
formal syntax visible | hidden | clip | scroll | auto examples setting inline overflow behavior html <ul> <li><code>overflow-inline:hidden</code> — hides the text outside the box <div id="div1"> abcdefghijklmopqrstuvwxyzabcdefghijklmopqrstuvwxyz </div> </li> <li><code>overflow-inline:scroll</code> — always adds a scrollbar <div id="div2"> abcdefghijklmopqrstuvwxyzabcdefghijklmopqrstuvwxyz </div> </li> <...
padding-bottom - CSS: Cascading Style Sheets
formal definition initial value0applies toall elements, except table-row-group, table-header-group, table-footer-group, table-row, table-column-group and table-column.
... it also applies to ::first-letter and ::first-line.inheritednopercentagesrefer to the width of the containing blockcomputed valuethe percentage as specified or the absolute lengthanimation typea length
formal syntax <length> | <percentage> examples setting padding bottom with pixels and percentages .content { padding-bottom: 5%; } .sidebox { padding-bottom: 10px; } specifications specification status comment css basic box modelthe definition of 'padding-bottom' in that specification.
padding-left - CSS: Cascading Style Sheets
formal definition initial value0applies toall elements, except table-row-group, table-header-group, table-footer-group, table-row, table-column-group and table-column.
... it also applies to ::first-letter and ::first-line.inheritednopercentagesrefer to the width of the containing blockcomputed valuethe percentage as specified or the absolute lengthanimation typea length
formal syntax <length> | <percentage> examples setting left padding using pixels and percentages .content { padding-left: 5%; } .sidebox { padding-left: 10px; } specifications specification status comment css basic box modelthe definition of 'padding-left' in that specification.
padding-right - CSS: Cascading Style Sheets
formal definition initial value0applies toall elements, except table-row-group, table-header-group, table-footer-group, table-row, table-column-group and table-column.
... it also applies to ::first-letter and ::first-line.inheritednopercentagesrefer to the width of the containing blockcomputed valuethe percentage as specified or the absolute lengthanimation typea length
formal syntax <length> | <percentage> examples setting right padding using pixels and percentages .content { padding-right: 5%; } .sidebox { padding-right: 10px; } specifications specification status comment css basic box modelthe definition of 'padding-right' in that specification.
padding-top - CSS: Cascading Style Sheets
formal definition initial value0applies toall elements, except table-row-group, table-header-group, table-footer-group, table-row, table-column-group and table-column.
... it also applies to ::first-letter and ::first-line.inheritednopercentagesrefer to the width of the containing blockcomputed valuethe percentage as specified or the absolute lengthanimation typea length
formal syntax <length> | <percentage> examples setting top padding using pixels and percentages .content { padding-top: 5%; } .sidebox { padding-top: 10px; } specifications specification status comment css basic box modelthe definition of 'padding-top' in that specification.
padding - CSS: Cascading Style Sheets
formal definition initial valueas each of the properties of the shorthand:padding-bottom: 0padding-left: 0padding-right: 0padding-top: 0applies toall elements, except table-row-group, table-header-group, table-footer-group, table-row, table-column-group and table-column.
...eritednopercentagesrefer to the width of the containing blockcomputed valueas each of the properties of the shorthand:padding-bottom: the percentage as specified or the absolute lengthpadding-left: the percentage as specified or the absolute lengthpadding-right: the percentage as specified or the absolute lengthpadding-top: the percentage as specified or the absolute lengthanimation typea length
formal syntax [ <length> | <percentage> ]{1,4} examples setting padding with pixels html <h4>this element has moderate padding.</h4> <h3>the padding is huge in this element!</h3> css h4 { background-color: lime; padding: 20px 50px; } h3 { background-color: cyan; padding: 110px 50px 50px 110px; } result setting padding with pixels and percentages padding: 5%; /* al...
page-break-inside - CSS: Cascading Style Sheets
a subset of values should be aliased as follows: page-break-inside break-inside auto auto avoid avoid
formal definition initial valueautoapplies toblock-level elements in the normal flow of the root element.
... user agents may also apply it to other elements like table-row elements.inheritednocomputed valueas specifiedanimation typediscrete
formal syntax auto | avoid examples avoiding page breaks inside elements html <div class="page"> <p>this is the first paragraph.</p> <section class="list"> <span>a list</span> <ol> <li>one</li> <!-- <li>two</li> --> </ol> </section> <ul> <li>one</li> <!-- <li>two</li> --> </ul> <p>this is the second paragraph.</p> <p>this is the third paragraph, it contains more text.</p> <p>this is the fourth paragraph.
place-self - CSS: Cascading Style Sheets
formal definition initial valueas each of the properties of the shorthand:align-self: autojustify-self: autoapplies toblock-level boxes, absolutely-positioned boxes, and grid itemsinheritednocomputed valueas each of the properties of the shorthand:align-self: auto computes to itself on absolutely-positioned elements, and to the computed value of align-items on the parent (minus any legacy keywords) o...
...otherwise the specified value.justify-self: as specifiedanimation typediscrete
formal syntax <'align-self'> <'justify-self'>?
repeating-conic-gradient() - CSS: Cascading Style Sheets
accessibility concerns browsers do not provide any special in
formation on background images to assistive technology.
...if the image contains in
formation critical to understanding the page's overall purpose, it is better to describe it semantically in the document.
repeating-radial-gradient() - CSS: Cascading Style Sheets
left of its container, starting red, changing to green and back again, repeating five times between the center and the bottom right corner, and only once between the center and the top left corner */ repeating-radial-gradient(farthest-corner at 20% 20%, red 0, green, red 20%); values <position> the position of the gradient, interpreted in the same way as background-position or trans
form-origin.
...
formal syntax repeating-radial-gradient( [[ circle || <length> ] [at <position>]?
scroll-margin-block-end - CSS: Cascading Style Sheets
the scroll snap area is determined by taking the trans
formed border box, finding its rectangular bounding box (axis-aligned in the scroll container’s coordinate space), then adding the specified outsets.
...
formal definition initial value0applies toall elementsinheritednocomputed valueas specifiedanimation typeby computed value type
formal syntax <length> specifications specification status comment css scroll snap module level 1the definition of 'scroll-margin-block-end' in that specification.
scroll-margin-block-start - CSS: Cascading Style Sheets
the scroll snap area is determined by taking the trans
formed border box, finding its rectangular bounding box (axis-aligned in the scroll container’s coordinate space), then adding the specified outsets.
...
formal definition initial value0applies toall elementsinheritednocomputed valueas specifiedanimation typeby computed value type
formal syntax <length> specifications specification status comment css scroll snap module level 1the definition of 'scroll-margin-block-start' in that specification.
scroll-margin-block - CSS: Cascading Style Sheets
the scroll snap area is determined by taking the trans
formed border box, finding its rectangular bounding box (axis-aligned in the scroll container’s coordinate space), then adding the specified outsets.
...
formal definition initial value0applies toall elementsinheritednocomputed valueas specifiedanimation typeby computed value type
formal syntax <length>{1,2} specifications specification status comment css scroll snap module level 1the definition of 'scroll-margin-block' in that specification.
scroll-margin-bottom - CSS: Cascading Style Sheets
the scroll snap area is determined by taking the trans
formed border box, finding its rectangular bounding box (axis-aligned in the scroll container’s coordinate space), then adding the specified outsets.
...
formal definition initial value0applies toall elementsinheritednocomputed valueas specifiedanimation typeby computed value type
formal syntax <length> specifications specification status comment css scroll snap module level 1the definition of 'scroll-margin-bottom' in that specification.
scroll-margin-inline-end - CSS: Cascading Style Sheets
the scroll snap area is determined by taking the trans
formed border box, finding its rectangular bounding box (axis-aligned in the scroll container’s coordinate space), then adding the specified outsets.
...
formal definition initial value0applies toall elementsinheritednocomputed valueas specifiedanimation typeby computed value type
formal syntax <length> examples simple demonstration this example implements something very similar to the interactive example above, except that here we'll explain to you how it's implemented.
scroll-margin-inline-start - CSS: Cascading Style Sheets
the scroll snap area is determined by taking the trans
formed border box, finding its rectangular bounding box (axis-aligned in the scroll container’s coordinate space), then adding the specified outsets.
...
formal definition initial value0applies toall elementsinheritednocomputed valueas specifiedanimation typeby computed value type
formal syntax <length> examples simple demonstration this example implements something very similar to the interactive example above, except that here we'll explain to you how it's implemented.
scroll-margin-inline - CSS: Cascading Style Sheets
the scroll snap area is determined by taking the trans
formed border box, finding its rectangular bounding box (axis-aligned in the scroll container’s coordinate space), then adding the specified outsets.
...
formal definition initial value0applies toall elementsinheritednocomputed valueas specifiedanimation typeby computed value type
formal syntax <length>{1,2} examples simple demonstration this example implements something very similar to the interactive example above, except that here we'll explain to you how it's implemented.
scroll-margin-left - CSS: Cascading Style Sheets
the scroll snap area is determined by taking the trans
formed border box, finding its rectangular bounding box (axis-aligned in the scroll container’s coordinate space), then adding the specified outsets.
...
formal definition initial value0applies toall elementsinheritednocomputed valueas specifiedanimation typeby computed value type
formal syntax <length> specifications specification status comment css scroll snap module level 1the definition of 'scroll-margin-left' in that specification.
scroll-margin-right - CSS: Cascading Style Sheets
the scroll snap area is determined by taking the trans
formed border box, finding its rectangular bounding box (axis-aligned in the scroll container’s coordinate space), then adding the specified outsets.
...
formal definition initial value0applies toall elementsinheritednocomputed valueas specifiedanimation typeby computed value type
formal syntax <length> specifications specification status comment css scroll snap module level 1the definition of 'scroll-margin-right' in that specification.
scroll-margin-top - CSS: Cascading Style Sheets
the scroll snap area is determined by taking the trans
formed border box, finding its rectangular bounding box (axis-aligned in the scroll container’s coordinate space), then adding the specified outsets.
...
formal definition initial value0applies toall elementsinheritednocomputed valueas specifiedanimation typeby computed value type
formal syntax <length> specifications specification status comment css scroll snap module level 1the definition of 'scroll-margin-top' in that specification.
scroll-margin - CSS: Cascading Style Sheets
the scroll snap area is determined by taking the trans
formed border box, finding its rectangular bounding box (axis-aligned in the scroll container’s coordinate space), then adding the specified outsets.
...
formal definition initial value0applies toall elementsinheritednocomputed valueas specifiedanimation typeby computed value type
formal syntax <length>{1,4} examples simple demonstration this example implements something very similar to the interactive example above, except that here we'll explain to you how it's implemented.
scroll-snap-coordinate - CSS: Cascading Style Sheets
/* keyword value */ scroll-snap-coordinate: none; /* <position> values */ scroll-snap-coordinate: 50px 50px; /* single coordinate */ scroll-snap-coordinate: 100px 100px, 100px bottom; /* multiple coordinates */ /* global values */ scroll-snap-coordinate: inherit; scroll-snap-coordinate: initial; scroll-snap-coordinate: unset; if the element has been trans
formed, the snap coordinates are likewise trans
formed, thus aligning the snap points with the element as it is displayed.
...
formal definition initial valuenoneapplies toall elementsinheritednopercentagesrefer to the element’s border boxcomputed valueas specified, but with relative lengths converted into absolute lengthsanimation typea position
formal syntax none | <position>#where <position> = [ [ left | center | right ] | [ top | center | bottom ] | [ left | center | right | <length-percentage> ] [ top | center | bottom | <length-percentage> ]?
<shape> - CSS: Cascading Style Sheets
the <shape> css data type defines the specific
form (shape) of a region.
... syntax the <shape> data type is specified using the rect() function, which produces a region in the
form of a rectangle.
text-decoration-color - CSS: Cascading Style Sheets
webaim: color contrast checker mdn understanding wcag, guideline 1.4 explanations understanding success criterion 1.4.3 | w3c understanding wcag 2.0
formal definition initial valuecurrentcolorapplies toall elements.
... it also applies to ::first-letter and ::first-line.inheritednocomputed valuecomputed coloranimation typea color
formal syntax <color>where <color> = <rgb()> | <rgba()> | <hsl()> | <hsla()> | <hex-color> | <named-color> | currentcolor | <deprecated-system-color>where <rgb()> = rgb( <percentage>{3} [ / <alpha-value> ]?
text-decoration-skip - CSS: Cascading Style Sheets
(this is important in chinese, where underlining is a
form of punctuation.) box-decoration the text decoration is skipped over the box's margin, border, and padding areas.
...
formal definition initial valueobjectsapplies toall elementsinheritedyescomputed valueas specifiedanimation typediscrete
formal syntax none | [ objects | [ spaces | [ leading-spaces | trailing-spaces ] ] | edges | box-decoration ] examples skipping edges html <p>hey, grab a cup of <em>coffee!</em></p> css p { margin: 0; font-size: 3em; text-decoration: underline; text-decoration-skip: edges; } result specifications specification status comment css text decoration module level 4the definition of 'text-decoration-skip' in that specification.
text-decoration-style - CSS: Cascading Style Sheets
formal definition initial valuesolidapplies toall elements.
... it also applies to ::first-letter and ::first-line.inheritednocomputed valueas specifiedanimation typediscrete
formal syntax solid | double | dotted | dashed | wavy examples setting a wavy underline .example { -moz-text-decoration-line: underline; -moz-text-decoration-style: wavy; -moz-text-decoration-color: red; -webkit-text-decoration-line: underline; -webkit-text-decoration-style: wavy; -webkit-text-decoration-color: red; } css .wavy { text-decoration-line: underline; text-decoration-style: wavy; text-decoration-color: red; } html <p class="wavy">this text has a wavy red line beneath it.</p> results specifications specification status comment css text decoration module level 3the definition of 'text-decorati...
text-emphasis-position - CSS: Cascading Style Sheets
the in
formative table below summarizes the preferred emphasis mark positions for chinese, mongolian and japanese: preferred emphasis mark and ruby position language preferred position illustration horizontal vertical japanese over right korean mongolian chinese under right note: the text-emphasis-position ca...
...
formal definition initial valueover rightapplies toall elementsinheritednocomputed valueas specifiedanimation typediscrete
formal syntax [ over | under ] && [ right | left ] examples preferring ruby over emphasis marks some editors prefer to hide emphasis marks when they conflict with ruby.
text-emphasis - CSS: Cascading Style Sheets
formal definition initial valueas each of the properties of the shorthand:text-emphasis-style: nonetext-emphasis-color: currentcolorapplies toall elementsinheritednocomputed valueas each of the properties of the shorthand:text-emphasis-style: as specifiedtext-emphasis-color: computed coloranimation typeas each of the properties of the shorthand:text-emphasis-color: a colortext-emphasis-style: discret...
...e
formal syntax <'text-emphasis-style'> | <'text-emphasis-color'> examples a heading with emphasis shape and color this example draws a heading with triangles used to emphasize each character.
text-justify - CSS: Cascading Style Sheets
auto the browser chooses the best type of justification for the current situation based on a balance between per
formance and quality, but also on what is most appropriate for the language of the text (e.g., english, cjk languages, etc.).
...
formal definition initial valueautoapplies toinline-level and table-cell elementsinheritedyescomputed valueas specifiedanimation typediscrete
formal syntax auto | inter-character | inter-word | none examples <p class="none"><code>text-justify: none</code> —<br>lorem ipsum dolor sit amet, consectetur adipiscing elit.
text-shadow - CSS: Cascading Style Sheets
formal definition initial valuenoneapplies toall elements.
... it also applies to ::first-letter and ::first-line.inheritedyescomputed valuea color plus three absolute lengthsanimation typea shadow list
formal syntax none | <shadow-t>#where <shadow-t> = [ <length>{2,3} && <color>?
text-underline-offset - CSS: Cascading Style Sheets
formal definition initial valueautoapplies toall elements.
... it also applies to ::first-letter and ::first-line.inheritedyespercentagesrefer to the font size of the element itselfcomputed valueas specifiedanimation typeby computed value type
formal syntax auto | <length> | <percentage> examples <p class="oneline">here's some text with an offset wavy red underline!</p> <br> <p class="twolines">this text has lines both above and below it.
transition - CSS: Cascading Style Sheets
formal definition initial valueas each of the properties of the shorthand:transition-delay: 0stransition-duration: 0stransition-property: alltransition-timing-function: easeapplies toall elements, ::before and ::after pseudo-elementsinheritednocomputed valueas each of the properties of the shorthand:transition-delay: as specifiedtransition-duration: as specifiedtransition-property: as specifiedtransi...
...tion-timing-function: as specifiedanimation typediscrete
formal syntax <single-transition>#where <single-transition> = [ none | <single-transition-property> ] | <time> | <timing-function> | <time>where <single-transition-property> = all | <custom-ident><timing-function> = linear | <cubic-bezier-timing-function> | <step-timing-function>where <cubic-bezier-timing-function> = ease | ease-in | ease-out | ease-in-out | cubic-bezier(<number <a href="/docs/css/value_definition_syntax#brackets" title="brackets: enclose several entities, combinators, and multipliers to trans
form them as a single component">[0,1]>, <number>, <number <a href="/docs/css/value_definition_syntax#brackets" title="brackets: enclose several entities, combinators, and multipliers to trans
form them as a single component">[0,1]...
unicode-bidi - CSS: Cascading Style Sheets
this value allows the display of data that is already
formatted using a tool following the unicode bidirectional algorithm.
...
formal definition initial valuenormalapplies toall elements, though some values have no effect on non-inline elementsinheritednocomputed valueas specifiedanimation typediscrete
formal syntax normal | embed | isolate | bidi-override | isolate-override | plaintext examples css .bible-quote { direction: rtl; unicode-bidi: embed; } html <div class="bible-quote"> a line of text </div> <div> another line of text </div> result specifications specification status comment css writing modes module level 3the definition of 'unicode-bidi' in that specification.
vertical-align - CSS: Cascading Style Sheets
formal definition initial valuebaselineapplies toinline-level and table-cell elements.
... it also applies to ::first-letter and ::first-line.inheritednopercentagesrefer to the line-height of the element itselfcomputed valuefor percentage and length values, the absolute length, otherwise the keyword as specifiedanimation typea length
formal syntax baseline | sub | super | text-top | text-bottom | middle | top | bottom | <percentage> | <length> examples basic example html <div>an <img src="https://udn.realityripple.com/samples/b4/e1f0faff5b.svg" alt="link" width="32" height="32" /> image with a default alignment.</div> <div>an <img class="top" src="https://udn.realityripple.com/samples/b4/e1f0faff5b.svg" alt="link" width="32" height="32" /> image with a text-top alignment.</div> <div>an <img class="bottom" src="https://udn.realityripple.com/samples/b4/e1f0faff5b.svg" alt="link...
width - CSS: Cascading Style Sheets
fit-content(<length-percentage>) uses the fit-content
formula with the available space replaced by the specified argument, i.e.
... mdn understanding wcag, guideline 1.4 explanations understanding success criterion 1.4.4 | understanding wcag 2.0
formal definition initial valueautoapplies toall elements but non-replaced inline elements, table rows, and row groupsinheritednopercentagesrefer to the width of the containing blockcomputed valuea percentage or auto or the absolute lengthanimation typea length, percentage or calc();
formal syntax auto | <length> | <percentage> | min-content | max-content | fit-content(<length-percentage>)where <length-percentage> = <length> | <percentage> examples defaul...
word-spacing - CSS: Cascading Style Sheets
mdn understanding wcag, guideline 1.4 explanations understanding success criterion 1.4.8 | w3c understanding wcag 2.0
formal definition initial valuenormalapplies toall elements.
... it also applies to ::first-letter and ::first-line.inheritedyespercentagesrefer to the width of the affected glyphcomputed valuean optimum, minimum, and maximum value, each consisting of either an absolute length, a percentage, or the keyword normalanimation typea length
formal syntax normal | <length-percentage>where <length-percentage> = <length> | <percentage> specifications specification status comment css text module level 3the definition of 'word-spacing' in that specification.
CSS: Cascading Style Sheets
we have put together a course that includes all the essential in
formation you need to work towards your goal.
... css key concepts: the syntax and
forms of the language specificity, inheritance and the cascade css units and values box model and margin collapse the containing block stacking and block-
formatting contexts initial, computed, used, and actual values css shorthand properties css flexible box layout css grid layout media queries animation cookbook the css layout cookbook aims to bring together r...
Demos of open web technologies
2d graphics canvas blob sallad: an interactive blob using javascript and canvas (code demos) 3d raycaster processing.js p5js 3d on 2d canvas minipaint: image editor (source code) zen photon garden (source code) multi touch in canvas demo (source code) svg bubblemenu (visual effects and interaction) html trans
formations using foreignobject (visual effects and trans
forms) phonetics guide (interactive) 3d objects demo (interactive) 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 trans
formers 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 code) loader with blend modes text reveal with clip-path ambient shadow with custom properties luminiscent vial css-based single page application (source code) trans
formations impress.js (source code) games ioquake3 (source code) kai 'opua (source code) web apis ...
regexp:replace() - EXSLT
syntax regexp:replace(originalstring, regexpstring, flagsstring, replacestring) parameters originalstring the string per
form a search-and-replace operation upon.
... i - case insensitive match if this flag is specified, the match is per
formed in a case insensitive fashion.
Ajax - Developer guides
both json and xml are used for packaging in
formation in the ajax model.
...this article will explain how to use some ajax techniques, like: analyzing and manipulating the response of the server monitoring the progress of a request submitting
forms and upload binary files – in pure ajax, or using
formdata objects using ajax within web workers fetch api the fetch api provides an interface for fetching resources.
Creating and triggering events - Developer guides
elem.dispatchevent(event); event bubbling it is often desirable to trigger an event from a child element, and have an ancestor catch it; optionally, with data: <
form> <textarea></textarea> </
form> const
form = document.queryselector('
form'); const textarea = document.queryselector('textarea'); // create a new event, allow bubbling, and provide any data you want to pass to the "detail" property const eventawesome = new customevent('awesome', { bubbles: true, detail: { text: () => textarea.value } }); // the
form element listens for the custom "awesom...
...e" event and then consoles the output of the passed text() method
form.addeventlistener('awesome', e => console.log(e.detail.text())); // as the user types, the textarea inside the
form dispatches/triggers the event to fire, and uses itself as the starting point textarea.addeventlistener('input', e => e.target.dispatchevent(eventawesome)); creating and dispatching events dynamically elements can listen for events that haven't been created yet: <
form> <textarea></textarea> </
form> const
form = document.queryselector('
form'); const textarea = document.queryselector('textarea');
form.addeventlistener('awesome', e => console.log(e.detail.text())); textarea.addeventlistener('input', function() { // create and dispatch/trigger an event on the fly // note: optionally, we've also levera...
DOM onevent handlers - Developer guides
the web plat
form provides several ways to be notified of dom events.
...elements can be interactive (links, buttons, images,
forms, and so forth) or non-interactive (such as the base <body> element).
Overview of events and handlers - Developer guides
the function, in turn, would per
form whatever action was chosen by the programmer, in this case to open an html alert dialog.
... note that the handler has access to the ev object since it is passed as an argument; the object has in
formation about the event, notably the time at which the event occurred.
Introduction to HTML5 - Developer guides
for detailed in
formation about multiple browsers' support of html5 features, refer to the caniuse website.
... this is much simpler than the
former doctypes, and shorter, making it easier to remember and reducing the amount of bytes that must be downloaded.
XHTML - Developer guides
xhtml is a term that was historically used to describe html documents written to con
form with xml syntax rules.
...instead, even though the documents are written to con
form to xml syntax rules, they are served with a content-type: text/html header — so browsers parse those documents using html parsers rather than xml parsers, which can cause a variety of sometimes-very-surprising problems.
Localizations and character encodings - Developer guides
firefox needs a fallback encoding that it uses for non-con
forming legacy content that doesn't declare its encoding.
...it should be set to the canonical name of the legacy encoding that users of the localizations are most likely to encounter when browsing non-con
forming legacy web content that doesn't declare its encoding.
Writing forward-compatible websites - Developer guides
javascript prefix all global variable access in onfoo attributes with “window.” when an event handler content attribute (onclick, onmouseover, and so forth) is used on html element, all name lookup in the attribute first happens on the element itself, then on the element's
form if the element is a
form control, then on the document, and then on the window (where the global variables you have defined are).
...here's an example that works in browsers without html5 support but breaks in a browser supporting html5: <
form action="http://www.example.com"> <input type="submit" value="submit the
form" </
form> due to the missing > on the input tag.
HTML attribute: min - HTML: Hypertext Markup Language
valid for the numeric input types, including the date, month, week, time, datetime-local, number and range types, and the <meter> element, the min attribute is a number that specifies the most negative value a
form control to be considered valid.
... number <number> <input type="number" min="0" step="5" max="100"> range <number> <input type="range" min="60" step="5" max="100"> note: when the data entered by the user doesn't adhere to the min value set, the value is considered invalid in contraint validation and will match the :invalid pseudoclass see client-side validation and rangeunderflow for more in
formation.
<abbr>: The Abbreviation element - HTML: Hypertext Markup Language
html <p>ashok's joke made me <abbr title="laugh out loud">lol</abbr> big time.</p> result defining an abbreviation you can use <abbr> in tandem with <dfn> to more
formally define an abbreviation, as shown here.
... example <p>javascript object notation (<abbr>json</abbr>) is a lightweight data-interchange
format.</p> this is especially helpful for people who are unfamiliar with the terminology or concepts discussed in the content, people who are new to the language, and people with cognitive concerns.
<canvas>: The Graphics Canvas element - HTML: Hypertext Markup Language
if the canvas knows there's no translucency, painting per
formance can be optimized.
...t then in the javascript code, call htmlcanvaselement.getcontext() to get a drawing context and start drawing onto the canvas: const canvas = document.queryselector('canvas'); const ctx = canvas.getcontext('2d'); ctx.fillstyle = 'green'; ctx.fillrect(10, 10, 100, 100); result accessibility concerns alternative content the <canvas> element on its own is just a bitmap and does not provide in
formation about any drawn objects.
<cite>: The Citation element - HTML: Hypertext Markup Language
the reference may be in an abbreviated
form according to context-appropriate conventions related to citation metadata.
... example <p>more in
formation can be found in <cite>[iso-0000]</cite>.</p> the html above outputs: specifications specification status comment html living standardthe definition of '<cite>' in that specification.
<dfn>: The Definition element - HTML: Hypertext Markup Language
the element must still have text within it, but that text may be an abbreviation (perhaps using <abbr>) or another
form of the term.
...the
former establishes that the term is an abbreviation ("hst") and specifies the full term ("hubble space telescope") in its title attribute.
<footer> - HTML: Hypertext Markup Language
a footer typically contains in
formation about the author of the section, copyright data or links to related documents.
... usage notes enclose in
formation about the author in an <address> element that can be included into the <footer> element.
<frame> - HTML: Hypertext Markup Language
using the <frame> element is not encouraged because of certain disadvantages such as per
formance problems and lack of accessibility for users with screen readers.
...see the target attribute for more in
formation.
<hgroup> - HTML: Hypertext Markup Language
the <hgroup> element allows the primary heading for a document section to be grouped with any secondary headings—such as subheadings or alternative titles—to
form a multi-level heading.
... so in the abstract outline produced by the html outline algorithm defined in the html specification, the <hgroup> as a whole
forms a single logical heading, with the entire set of <h1>–<h6> children of the <hgroup> going into the outline as one multi-level unit, to comprise that single logical heading in the abstract outline.
<ins> - HTML: Hypertext Markup Language
for the
format of the string without a time, see
format of a valid date string.
... the
format of the string if it includes both date and time is covered in
format of a valid local date and time string.
<main> - HTML: Hypertext Markup Language
content that is repeated across a set of documents or document sections such as sidebars, navigation links, copyright in
formation, site logos, and search
forms shouldn't be included unless the search
form is the main function of the page.
...it's strictly in
formative.
<menu> - HTML: Hypertext Markup Language
the html <menu> element represents a group of commands that a user can per
form or activate.
...this might be in the
form of an unordered list of <li> elements, or, if the element has no <li> element children, flow content describing available commands.
<p>: The Paragraph element - HTML: Hypertext Markup Language
paragraphs are usually represented in visual media as blocks of text separated from adjacent blocks by blank lines and/or first-line indentation, but html paragraphs can be any structural grouping of related content, such as images or
form fields.
...the end tag may be omitted if the <p> element is immediately followed by an <address>, <article>, <aside>, <blockquote>, <div>, <dl>, <fieldset>, <footer>, <
form>, <h1>, <h2>, <h3>, <h4>, <h5>, <h6>, <header>, <hr>, <menu>, <nav>, <ol>, <pre>, <section>, <table>, <ul> or another <p> element, or if there is no more content in the parent element and the parent element is not an <a> element.
<table>: The Table element - HTML: Hypertext Markup Language
the html <table> element represents tabular data — that is, in
formation presented in a two-dimensional table comprised of rows and columns of cells containing data.
...in complex tables, scope can be specified so as to provide necessary in
formation about the cells related to a header.
<title>: The Document Title element - HTML: Hypertext Markup Language
in general, a longer, descriptive title per
forms better than short or generic titles.
... example <title>menu - blue house chinese food - foodyum: online takeout today!</title> to help the user, update the page title value to reflect significant page state changes (such as
form validation problems).
<u>: The Unarticulated Annotation (Underline) element - HTML: Hypertext Markup Language
usage notes along with other pure styling elements, the original html underline (<u>) element was deprecated in html 4; however, <u> was restored in html 5 with a new, semantic, meaning: to mark text as having some
form of non-textual annotation applied.
... use cases valid use cases for the <u> element include annotating spelling errors, applying a proper name mark to denote proper names in chinese text, and other
forms of annotation.
accesskey - HTML: Hypertext Markup Language
the way to activate the accesskey depends on the browser and its plat
form: windows linux mac firefox alt + shift + key on firefox 57 or newer: control + option + key or control + alt + key on firefox 14 or newer: control + alt + key on firefox 13 or older: control + key internet explorer alt + key alt + shift + key n/a edge n/a control + option + key control + option + shift + key ...
... in
forming the user that accesskeys are present, so that they are aware of the functionality.
hidden - HTML: Hypertext Markup Language
hidden elements shouldn't be linked from non-hidden elements, and elements that are descendants of a hidden element are still active, which means that script elements can still execute and
form elements can still submit.
... similarly, a canvas element with the hidden attribute could be used by a scripted graphics engine as an off-screen buffer, and a
form control could refer to a hidden
form element using its
form attribute.
id - HTML: Hypertext Markup Language
this attribute's value is an opaque string: this means that web authors should not rely on it to convey human-readable in
formation (although having your ids somewhat human-readable can be useful for code comprehension, e.g.
...browsers treat non-con
forming ids that contain whitespace as if the whitespace is part of the id.
style - HTML: Hypertext Markup Language
usage note: this attribute must not be used to convey semantic in
formation.
...typically it shouldn't be used to hide irrelevant in
formation; this should be done using the hidden attribute.
Preloading content with rel="preload" - HTML: Hypertext Markup Language
this ensures they are available earlier and are less likely to block the page's render, improving per
formance.
... there are a number of script-based resource loaders out there, but they don't have any power over the browser's fetch prioritization queue, and are subject to much the same per
formance problems.
Reason: CORS preflight channel did not succeed - HTTP
the cors request requires preflight, preflighting could not be per
formed.
... there are a couple of reasons why preflighting might fail: a cross-site request has previously been per
formed that already did a preflight, and doing the preflight again is not permitted.
Accept-Language - HTTP
(by languages, we mean natural languages, such as english, and not programming languages.) using content negotiation, the server then selects one of the proposals, uses it and in
forms the client of its choice with the content-language response header.
...the most common extra in
formation is the country or region variant (like 'en-us' or 'fr-ca') or the type of alphabet to use (like 'sr-latn').
Expect - HTTP
the only expectation defined in the specification is expect: 100-continue, to which the server shall respond with: 100 if the in
formation contained in the header is sufficient to cause an immediate success, 417 (expectation failed) if it cannot meet the expectation; or any other 4xx status otherwise.
... expect: 100-continue directives 100-continue in
forms recipients that the client is about to send a (presumably large) message body in this request and wishes to receive a 100 (continue) interim response.
Public-Key-Pins-Report-Only - HTTP
for more in
formation, see the public-key-pins header reference page and the http public key pinning article.
... header type response header forbidden header name no syntax public-key-pins-report-only: pin-sha256="<pin-value>"; max-age=<expire-time>; includesubdomains; report-uri="<uri>" directives pin-sha256="<pin-value>" the quoted string is the base64 encoded subject public key in
formation (spki) fingerprint.
Server - HTTP
avoid overly-detailed server values, as they can reveal in
formation that might make it (slightly) easier for attackers to exploit known security holes.
...usually in a
format similar to user-agent.
Upgrade - HTTP
a server may also send the header as part of a 426 upgrade required response, to indicate that the server won't per
form the request using the current protocol, but might do so if the protocol is changed.
... examples connection: upgrade upgrade: http/2.0, shttp/1.3, irc/6.9, rta/x11 connection: upgrade upgrade: websocket specifications specification hypertext transfer protocol (http/1.1): message syntax and routing (http/1.1)# header.upgrade hypertext transfer protocol (http/1.1): semantics and content (http/1.1)# status.426 hypertext transfer protocol version 2 (http/2) (http/2)# in
formational-responses ...
Warning - HTTP
the warning general http header contains in
formation about possible problems with the status of the message.
... 199 miscellaneous warning arbitrary, non-specific warning 214 trans
formation applied added by a proxy if it applies any trans
formation to the representation, such as changing the content-coding, media-type or the like.
X-Forwarded-For - HTTP
this header is used for debugging, statistics, and generating location-dependent content and by design it exposes privacy sensitive in
formation, such as the ip address of the client.
... examples x-forwarded-for: 2001:db8:85a3:8d3:1319:8a2e:370:7348 x-forwarded-for: 203.0.113.195 x-forwarded-for: 203.0.113.195, 70.41.3.18, 150.172.238.178 other non-standard
forms: # used for some google services x-proxyuser-ip: 203.0.113.19 specifications not part of any current specification.
DELETE - HTTP
request has body may successful response has body may safe no idempotent yes cacheable no allowed in html
forms no syntax delete /file.html http/1.1 example request delete /file.html http/1.1 responses if a delete method is successfully applied, there are several response status codes possible: a 202 (accepted) status code if the action will likely succeed but has not yet been enacted.
... a 204 (no content) status code if the action has been enacted and no further in
formation is to be supplied.
PATCH - HTTP
another (implicit) indication that patch is allowed, is the presence of the accept-patch header, which specifies the patch document
formats accepted by the server.
... request has body yes successful response has body yes safe no idempotent no cacheable no allowed in html
forms no syntax patch /file.txt http/1.1 example request patch /file.txt http/1.1 host: www.example.com content-type: application/example if-match: "e0023aa4e" content-length: 100 [description of changes] response a successful response is indicated by any 2xx status code.
TRACE - HTTP
the http trace method per
forms a message loop-back test along the path to the target resource, providing a useful debugging mechanism.
... request has body no successful response has body no safe no idempotent yes cacheable no allowed in html
forms no syntax trace /index.html specifications specification title rfc 7231, section 4.3.8: trace hypertext transfer protocol (http/1.1): semantics and content ...
HTTP request methods - HTTP
http defines a set of request methods to indicate the desired action to be per
formed for a given resource.
... trace the trace method per
forms a message loop-back test along the path to the target resource.
Protocol upgrade mechanism - HTTP
right after sending the 101 status code, the server can begin speaking the new protocol, per
forming any additional protocol-specific handshakes as necessary.
... for example: sec-websocket-extensions: superspeed, colormode; depth=16 sec-websocket-key provides in
formation to the server which is needed in order to confirm that the client is entitled to request an upgrade to websocket.
415 Unsupported Media Type - HTTP
the http 415 unsupported media type client error response code indicates that the server refuses to accept the request because the payload
format is in an unsupported
format.
... the
format problem might be due to the request's indicated content-type or content-encoding, or as a result of inspecting the data directly.
HTTP
the client then returns the cookie's value with every request to the same server in the
form of a cookie request header.
...responses are grouped in five classes: in
formational responses, successful responses, redirections, client errors, and servers errors.
Closures - JavaScript
the reason is that functions in javascript
form closures.
...d('help').innerhtml = help; } function setuphelp() { var helptext = [ {'id': 'email', 'help': 'your e-mail address'}, {'id': 'name', 'help': 'your full name'}, {'id': 'age', 'help': 'your age (you must be over 16)'} ]; helptext.foreach(function(text) { document.getelementbyid(text.id).onfocus = function() { showhelp(text.help); } }); } setuphelp(); per
formance considerations it is unwise to unnecessarily create functions within other functions if closures are not needed for a particular task, as it will negatively affect script per
formance both in terms of processing speed and memory consumption.
Using Promises - JavaScript
row would lead to the classic callback pyramid of doom: dosomething(function(result) { dosomethingelse(result, function(newresult) { dothirdthing(newresult, function(finalresult) { console.log('got the final result: ' + finalresult); }, failurecallback); }, failurecallback); }, failurecallback); with modern functions, we attach our callbacks to the returned promises instead,
forming a promise chain: dosomething() .then(function(result) { return dosomethingelse(result); }) .then(function(newresult) { return dothirdthing(newresult); }) .then(function(finalresult) { console.log('got the final result: ' + finalresult); }) .catch(failurecallback); the arguments to then are optional, and catch(failurecallback) is short for then(null, failurecallback).
...sable compose function, which is common in functional programming: const applyasync = (acc,val) => acc.then(val); const composeasync = (...funcs) => x => funcs.reduce(applyasync, promise.resolve(x)); the composeasync() function will accept any number of functions as arguments, and will return a new function that accepts an initial value to be passed through the composition pipeline: const trans
formdata = composeasync(func1, func2, func3); const result3 = trans
formdata(data); in ecmascript 2017, sequential composition can be done more simply with async/await: let result; for (const f of [func1, func2, func3]) { result = await f(result); } /* use last result (i.e.
JavaScript Guide - JavaScript
if you need exhaustive in
formation about a language feature, have a look at the javascript reference.
...ontinue for..in for..of functions defining functions calling functions function scope closures arguments & parameters arrow functions expressions and operators assignment & comparisons arithmetic operators bitwise & logical operators conditional (ternary) operator numbers and dates number literals number object math object date object text
formatting string literals string object template literals internationalization regular expressions indexed collections arrays typed arrays keyed collections map weakmap set weakset working with objects objects and properties creating objects defining methods getter and setter details of the object model prototype-based oop creating object ...
RangeError: invalid date - JavaScript
examples invalid cases unrecognizable strings or dates containing illegal element values in iso
formatted strings usually return nan.
... however, depending on the implementation, non–con
forming iso
format strings, may also throw rangeerror: invalid date, like the following cases in firefox: new date('foo-bar 2014'); new date('2014-25-23').toisostring(); new date('foo-bar 2014').tostring(); this, however, returns nan in firefox: date.parse('foo-bar 2014'); // nan for more details, see the date.parse() documentation.
Array.prototype.copyWithin() - JavaScript
description the copywithin works like c and c++'s memmove, and is a high-per
formance method to shift the data of an array.
..., 2] [1, 2, 3, 4, 5].copywithin(0, 3) // [4, 5, 3, 4, 5] [1, 2, 3, 4, 5].copywithin(0, 3, 4) // [4, 2, 3, 4, 5] [1, 2, 3, 4, 5].copywithin(-2, -3, -1) // [1, 2, 3, 3, 4] [].copywithin.call({length: 5, 3: 1}, 0, 3) // {0: 1, 3: 1, length: 5} // es2015 typed arrays are subclasses of array var i32a = new int32array([1, 2, 3, 4, 5]) i32a.copywithin(0, 2) // int32array [3, 4, 5, 4, 5] // on plat
forms that are not yet es2015 compliant: [].copywithin.call(new int32array([1, 2, 3, 4, 5]), 0, 3, 4); // int32array [4, 2, 3, 4, 5] specifications specification ecmascript (ecma-262)the definition of 'array.prototype.copywithin' in that specification.
Array.prototype.map() - JavaScript
let numbers = [1, 4, 9] let roots = numbers.map(function(num) { return math.sqrt(num) }) // roots is now [1, 2, 3] // numbers is still [1, 4, 9] using map to re
format objects in an array the following code takes an array of objects and creates a new array containing the newly re
formatted objects.
... let kvarray = [{key: 1, value: 10}, {key: 2, value: 20}, {key: 3, value: 30}] let re
formattedarray = kvarray.map(obj => { let robj = {} robj[obj.key] = obj.value return robj }) // re
formattedarray is now [{1: 10}, {2: 20}, {3: 30}], // kvarray is still: // [{key: 1, value: 10}, // {key: 2, value: 20}, // {key: 3, value: 30}] mapping an array of numbers using a function containing an argument the following code shows how map works when a function requiring one argument is used with it.
Array.prototype.sort() - JavaScript
thus the character
formed by the surrogate pair \ud655\ude55 will be sorted before the character \uff3a.
... so, the compare function has the following
form: function compare(a, b) { if (a is less than b by some ordering criterion) { return -1; } if (a is greater than b by the ordering criterion) { return 1; } // a must be equal to b return 0; } to compare numbers instead of strings, the compare function can simply subtract b from a.
Array.prototype.toLocaleString() - JavaScript
for the general
form and interpretation of the locales argument, see the intl page.
... object: object.prototype.tolocalestring() number: number.prototype.tolocalestring() date: date.prototype.tolocalestring() always display the currency for the strings and numbers in the prices array: var prices = ['¥7', 500, 8123, 12]; prices.tolocalestring('ja-jp', { style: 'currency', currency: 'jpy' }); // "¥7,¥500,¥8,123,¥12" for more examples, see also the intl, number
format, and datetime
format pages.
Array - JavaScript
description arrays are list-like objects whose prototype has methods to per
form traversal and mutation operations.
...this array has properties and elements which provide in
formation about the match.
Date.prototype.getDay() - JavaScript
var xmas95 = new date('december 25, 1995 23:15:30'); var weekday = xmas95.getday(); console.log(weekday); // 1 note: if needed, the full name of a day ("monday" for example) can be obtained by using intl.datetime
format with an options parameter.
... using this method, the internationalization is made easier: var options = { weekday: 'long'}; console.log(new intl.datetime
format('en-us', options).
format(xmas95)); // monday console.log(new intl.datetime
format('de-de', options).
format(xmas95)); // montag specifications specification ecmascript (ecma-262)the definition of 'date.prototype.getday' in that specification.
Date.prototype.getMonth() - JavaScript
var xmas95 = new date('december 25, 1995 23:15:30'); var month = xmas95.getmonth(); console.log(month); // 11 note: if needed, the full name of a month ("january" for example) can be obtained by using intl.datetime
format() with an options parameter.
... using this method, internationalization is made easier: var options = { month: 'long'}; console.log(new intl.datetime
format('en-us', options).
format(xmas95)); // december console.log(new intl.datetime
format('de-de', options).
format(xmas95)); // dezember specifications specification ecmascript (ecma-262)the definition of 'date.prototype.getmonth' in that specification.
Date.prototype.toISOString() - JavaScript
the toisostring() method returns a string in simplified extended iso
format (iso 8601), which is always 24 or 27 characters long (yyyy-mm-ddthh:mm:ss.sssz or ±yyyyyy-mm-ddthh:mm:ss.sssz, respectively).
... syntax dateobj.toisostring() return value a string representing the given date in the iso 8601
format according to universal time.
Function.name - JavaScript
javascript compressors and minifiers warning: be careful when using function.name and source code trans
formations, such as those carried out by javascript compressors (minifiers) or obfuscators.
...such trans
formations often change a function's name at build-time.
Intl.DisplayNames.prototype.resolvedOptions() - JavaScript
the intl.displaynames.prototype.resolvedoptions() method returns a new object with properties reflecting the locale and style
formatting options computed during the construction of the current displaynames object.
... syntax displaynames.resolvedoptions() return value an object with properties reflecting the locale and
formatting options computed during the construction of the given displaynames object.
Intl.Locale.prototype.baseName - JavaScript
the intl.locale.prototype.basename property returns a substring of the locale's string representation, containing core in
formation about the locale.
...the basename property returns basic, core in
formation about the locale in the
form of a substring of the complete data string.
Intl.PluralRules.prototype.resolvedOptions() - JavaScript
the intl.pluralrules.prototype.resolvedoptions() method returns a new object with properties reflecting the locale and plural
formatting options computed during initialization of this pluralrules object.
... syntax pluralrule.resolvedoptions() return value a new object with properties reflecting the locale and plural
formatting options computed during the initialization of the given pluralrules object.
Intl.PluralRules.select() - JavaScript
the intl.pluralrules.prototype.select method returns a string indicating which plural rule to use for locale-aware
formatting.
... description this function selects a pluralization category according to the locale and
formatting options of a pluralrules object.
JSON.stringify() - JavaScript
// '{"obj":"now i am a nested object under key 'obj'"}' json.stringify([ obj ]); // '["now i am a nested object under key '0'"]' issue with json.stringify() when serializing circular references note that since the json
format doesn't support object references (although an ietf draft exists), a typeerror will be thrown if one attempts to encode an object with circular references.
...push({ 'name': 'screend', 'width': 250, 'height': 60 }); session.screens.push({ 'name': 'screene', 'width': 390, 'height': 120 }); session.screens.push({ 'name': 'screenf', 'width': 1240, 'height': 650 }); // converting the json string with json.stringify() // then saving with localstorage in the name of session localstorage.setitem('session', json.stringify(session)); // example of how to trans
form the string generated through // json.stringify() and saved in localstorage in json object again var restoredsession = json.parse(localstorage.getitem('session')); // now restoredsession variable contains the object that was saved // in localstorage console.log(restoredsession); well-
formed json.stringify() engines implementing the well-
formed json.stringify specification will stringify lone s...
JSON - JavaScript
for those who wish to use a more human-friendly configuration
format based on json, there is json5, used by the babel compiler, and the more commonly used yaml.
... static methods json.parse(text[, reviver]) parse the string text as json, optionally trans
form the produced value and its properties, and return the value.
Map - JavaScript
per
formance per
forms better in scenarios involving frequent additions and removals of key-value pairs.
... value] of mymap.entries()) { console.log(key + ' = ' + value) } // 0 = zero // 1 = one iterating map with foreach() maps can be iterated using the foreach() method: mymap.foreach(function(value, key) { console.log(key + ' = ' + value) }) // 0 = zero // 1 = one relation with array objects let kvarray = [['key1', 'value1'], ['key2', 'value2']] // use the regular map constructor to trans
form a 2d key-value array into a map let mymap = new map(kvarray) mymap.get('key1') // returns "value1" // use array.from() to trans
form a map into a 2d key-value array console.log(array.from(mymap)) // will show you exactly the same array as kvarray // a succinct way to do the same, using the spread syntax console.log([...mymap]) // or use the keys() or values() iterators, and convert them to an ...
Math.random() - JavaScript
the math.random() function returns a floating-point, pseudo-random number in the range 0 to less than 1 (inclusive of 0, but not 1) with approximately uni
form distribution over that range — which you can then scale to your desired range.
... function getrandomint(min, max) { min = math.ceil(min); max = math.floor(max); return math.floor(math.random() * (max - min) + min); //the maximum is exclusive and the minimum is inclusive } it might be tempting to use math.round() to accomplish that, but doing so would cause your random numbers to follow a non-uni
form distribution, which may not be acceptable for your needs.
Math.random() - JavaScript
the math.random() function returns a floating-point, pseudo-random number in the range 0 to less than 1 (inclusive of 0, but not 1) with approximately uni
form distribution over that range — which you can then scale to your desired range.
... function getrandomint(min, max) { min = math.ceil(min); max = math.floor(max); return math.floor(math.random() * (max - min) + min); //the maximum is exclusive and the minimum is inclusive } it might be tempting to use math.round() to accomplish that, but doing so would cause your random numbers to follow a non-uni
form distribution, which may not be acceptable for your needs.
Number.MAX_SAFE_INTEGER - JavaScript
the reasoning behind that number is that javascript uses double-precision floating-point
format numbers as specified in ieee 754 and can only safely represent numbers between -(253 - 1) and 253 - 1.
...see number.issafeinteger() for more in
formation.
Number.MIN_SAFE_INTEGER - JavaScript
the reasoning behind that number is that javascript uses double-precision floating-point
format numbers as specified in ieee 754 and can only safely represent numbers between -(253 - 1) and 253 - 1.
... see number.issafeinteger() for more in
formation.
Number - JavaScript
the javascript number type is a double-precision 64-bit binary
format ieee 754 value, like double in java or c#.
...37 is still a number, not a bigint.) number may also be expressed in literal
forms like 0b101, 0o13, 0x0a.
Object.prototype.toString() - JavaScript
the tostring() method you create can be any value you want, but it will be most useful if it carries in
formation about the object.
...this function generates a string containing the name, breed, color, and sex of the object, in the
form "property = value;".
String.fromCharCode() - JavaScript
no validity checks are per
formed.
... examples using fromcharcode() bmp characters, in utf-16, use a single code unit: string.fromcharcode(65, 66, 67); // returns "abc" string.fromcharcode(0x2014); // returns "—" string.fromcharcode(0x12014); // also returns "—"; the digit 1 is truncated and ignored string.fromcharcode(8212); // also returns "—"; 8212 is the decimal
form of 0x2014 complete utf 16 table.
String length - JavaScript
utf-16, the string
format used by javascript, uses a single 16-bit code unit to represent the most common characters, but needs to use two code units for less commonly-used characters, so it's possible for the value returned by length to not match the actual number of characters in the string.
... the static property string.length is unrelated to the length of strings, it's the arity of the string function (loosely, the number of
formal parameters it has), which is 1.
String.prototype.match() - JavaScript
see groups and ranges for more in
formation.
... const str = 'for more in
formation, see chapter 3.4.5.1'; const re = /see (chapter \d+(\.\d)*)/i; const found = str.match(re); console.log(found); // logs [ 'see chapter 3.4.5.1', // 'chapter 3.4.5.1', // '.1', // index: 22, // input: 'for more in
formation, see chapter 3.4.5.1' ] // 'see chapter 3.4.5.1' is the whole match.
Uint16Array() constructor - JavaScript
the uint16array() typed array constructor creates an array of 16-bit unsigned integers in the plat
form byte order.
... description the uint16array() typed array constructor creates an array of 16-bit unsigned integers in the plat
form byte order.
WebAssembly.Module.customSections() - JavaScript
(read high level structure for in
formation on section structures, and how normal sections ("known sections") and custom sections are distinguished.) this provides developers with a way to include custom data inside wasm modules for other purposes, for example the name custom section, which allows developers to provide names for all the functions and locals in the module (like "symbols" in a native build).
... note that the webassembly text
format currently doesn't have a syntax specified for adding new custom sections; you can however add a name section to your wasm during conversion from text
format over to .wasm.
eval() - JavaScript
function call overhead is minimal, making the far smaller code size well worth the benefit function() more easily allows your code to utilize the per
formance buttering "use strict"; the code does not use eval(), making it orders of magnitude faster than otherwise.
...when the second statement is executed, eval() will cause these statements to be per
formed, and it will also evaluate the set of statements and return the value that is assigned to z.
Standard built-in objects - JavaScript
for more in
formation about the distinction between the dom and core javascript, see javascript technologies overview.
... intl intl.collator intl.datetime
format intl.list
format intl.number
format intl.pluralrules intl.relativetime
format intl.locale webassembly webassembly webassembly.module webassembly.instance webassembly.memory webassembly.table webassembly.compileerror webassembly.linkerror webassembly.runtimeerror other arguments ...
Logical OR assignment (||=) - JavaScript
logical or assignment short-circuits as well, meaning it only per
forms an assignment if the logical operation would evaluate the right-hand side.
... in other words, x ||= y is equivalent to: x || (x = y); and not equivalent to the following which would always per
form an assignment: x = x || y; note that this behavior is different to mathematical and bitwise assignment operators.
Unary plus (+) - JavaScript
syntax operator: +x description although unary negation (-) also can convert non-numbers, unary plus is the fastest and preferred way of converting something into a number, because it does not per
form any other operations on the number.
...integers in both decimal and hexadecimal (0x-prefixed)
formats are supported.
async function - JavaScript
the return value
forms the final link in the chain.
... if you wish to safely per
form two or more jobs in parallel, you must await a call to promise.all, or promise.allsettled.
for await...of - JavaScript
{ i: 0, next() { if (this.i < 3) { return promise.resolve({ value: this.i++, done: false }); } return promise.resolve({ done: true }); } }; } }; (async function() { for await (let num of asynciterable) { console.log(num); } })(); // 0 // 1 // 2 iterating over async generators since the return values of async generators con
form to the async iterable protocol, they can be looped using for await...of.
...tched', e) } })(); // 0 // 1 // 2 // catched 3 // compare with for-of loop: try { for (let numorpromise of generatorwithrejectedpromises()) { console.log(numorpromise); } } catch (e) { console.log('catched', e) } // 0 // 1 // promise { 2 } // promise { <rejected> 3 } // 4 // catched 5 // called finally to make finally blocks of a sync generator to be always called use appropriate
form of the loop, for await...of for the async generator and for...of for the sync one and await yielded promises explicitly inside the loop.
function* - JavaScript
param optional the name of a
formal parameter for the function.
... when a generator is finished, subsequent next() calls will not execute any of that generator's code, they will just return an object of this
form: {value: undefined, done: true}.
import - JavaScript
the static
form is preferable for loading initial dependencies, and can benefit more readily from static analysis tools and tree shaking.
... }); this
form also supports the await keyword.
Transitioning to strict mode - JavaScript
thorough testing will need to be per
formed to make sure nothing breaks.
... stay away from semantic differences eval: use it only if you know what you're doing arguments: always access function arguments via their name or per
form a copy of the arguments object using: var args = array.prototype.slice.call(arguments) as the first line of your function this: only use this when it refers to an object you created.
MathML attribute reference - MathML
displaystyle <mstyle>, <mtable> a boolean value specifying whether more vertical space is used for displayed equations or, if set to false, a more compact layout is used to display
formulas.
... unimplemented
form <mo> specifies the role of the operator in an enclosed expression.
<math> - MathML
dir overall directionality of
formulas.
...since you notate your mathml in an xml document, also be sure you write a well-
formed xml document.
<mo> - MathML
form specifies the role of the operator in an enclosed expression, which affects spacing and other default properties.
... examples <math> <mrow> <mn>5</mn> <mo>+</mo> <mn>5</mn> </mrow> <mrow> <mo> [ </mo> <!-- default
form value: prefix --> <mrow> <mn> 0 </mn> <mo> ; </mo> <!-- default
form value: infix --> <mn> 1 </mn> </mrow> <mo> ) </mo> <!-- default
form value: postfix --> </mrow> </math> specifications specification status comment mathml 3.0the definition of 'mo' in that specification.
MathML
mathml reference mathml element reference details about each mathml element and compatibility in
formation for desktop and mobile browsers.
... mathml attribute reference in
formation about mathml attributes that modify the appearance or behavior of elements.
Autoplay guide for media and Web Audio APIs - Web media technologies
in order to give users control over this, browsers often provide various
forms of autoplay blocking.
... when autoplay is true, the media will automatically begin to play as soon as possible after the following have occurred: the page is allowed to use autoplay functionality the element has been created during page load enough media has been received to begin playback and continue to play through to the end of the media without interruption, assuming there are no dramatic changes in network per
formance or bandwidth.
Using images in HTML - Web media technologies
it supports a wide range of attributes that control how the image behaves and allows you to add important in
formation like alt text for people who don't see the image.
... image file type and
format guide a guide to the various image file types commonly supported by web browsers including details about their individual use cases, capabilities, and compatibility factors.
Installing and uninstalling web apps - Progressive web apps (PWAs)
this guide explains how installation is per
formed, what it means, and what you need to do as a developer to let your users take advantage of it.
...you'll see fox pictures, but more importantly, some
form of user interface will be available to let you install the site as a web app.
Making PWAs work offline with Service workers - Progressive web apps (PWAs)
they can do a lot more than "just" offering offline capabilities, including handling notifications, per
forming heavy calculations on a separate thread, etc.
...per
formance-wise, you can prefetch resources that are not needed right now, but might be in the near future, so the app will be faster when you actually need those resources.
Web technology reference
html — structuring the web hypertext markup language is used to define and describe semantically the content (markup) of a web page in a well-structured
format.
...some introduce content into the page directly, others provide in
formation about document text and may include other tags as sub-elements.
SVG Core Attributes - SVG: Scalable Vector Graphics
the tag contains one single entry value in the
format defined in the tags for identifying languages (bcp47) ietf document.
...it's almost identical in usage to html's lang, but in con
forming xml 1.0 documents, it does not allow the use of a null attribute value (xml:lang="") to indicate an unknown language.
class - SVG: Scalable Vector Graphics
an element's class name serves two key roles: as a style sheet selector, for when an author assigns style in
formation to a set of elements.
... white space in lists is defined as one or more of the following consecutive characters: "space" (u+0020), "tab" (u+0009), "line feed" (u+000a), "carriage return" (u+000d), and "
form-feed" (u+000c).
data-* - SVG: Scalable Vector Graphics
they let svg markup and its resulting dom share in
formation that standard attributes can't, usually for scripting purposes.
...hyphen characters (-, u+002d) are removed and the next letter is capitalized, resulting in the camelcase
format.
font-variant - SVG: Scalable Vector Graphics
see the css font-variant property for more in
formation.
...ox="0 0 250 30" xmlns="http://www.w3.org/2000/svg"> <text y="20" font-variant="normal">normal text</text> <text x="100" y="20" font-variant="small-caps">small-caps text</text> </svg> usage notes value normal | none | [ <common-lig-values> || <discretionary-lig-values> || <historical-lig-values> || <contextual-alt-values> || stylistic( <feature-value-name> ) || historical-
forms || styleset( <feature-value-name># ) || character-variant( <feature-value-name># ) || swash( <feature-value-name> ) || ornaments( <feature-value-name> ) || annotation( <feature-value-name> ) || [ small-caps | all-small-caps | petite-caps | all-petite-caps | unicase | titling-caps ] || <numeric-figure-values> || <numeric-spacing-values> || <numeric-fraction-values> || ordinal || slashed-zero || <...
glyph-orientation-vertical - SVG: Scalable Vector Graphics
ideographic punctuation and other ideographic characters having alternate horizontal and vertical
forms will use the vertical
form of the glyph.
...(this presentation
form does not disable auto-ligature
formation or similar context-driven variations.) the determination of which characters should be auto-rotated may vary across user agents.
glyphRef - SVG: Scalable Vector Graphics
the glyphref attribute represents the glyph identifier, the
format of which is dependent on the
format of the given font.
...its
format depends on the
format of the given font.
k1 - SVG: Scalable Vector Graphics
the pixel composition is computed using the following
formula: result = k1*i1*i2 + k2*i1 + k3*i2 + k4 only one element is using this attribute: <fecomposite> html, body, svg { height: 100%; } <svg viewbox="0 0 420 200" xmlns="http://www.w3.org/2000/svg"> <filter id="composite1" x="0" y="0" width="100%" height="100%"> <fecomposite in2="sourcegraphic" operator="arithmetic" k1="1" k2="0" k3="0" k4="0" /> </filter> <filter id="composite2" x="0" y="0" width="100%" height="100%"> <fecomposite in2="sourcegraphic" operator="arithmetic" k1="10" k2="0" k3="0" k4="0" /> </filter> <image href="https://mdn.mozillademos.org/files/12668/mdn.svg" x="0" ...
...y="0" width="200" height="200" style="filter: url(#composite1);" /> <image href="https://mdn.mozillademos.org/files/12668/mdn.svg" x="0" y="0" width="200" height="200" style="filter: url(#composite2); trans
form: translatex(220px);" /> </svg> usage notes value <number> default value 0 animatable yes specifications specification status comment filter effects module level 1the definition of 'k1' in that specification.
k2 - SVG: Scalable Vector Graphics
the pixel composition is computed using the following
formula: result = k1*i1*i2 + k2*i1 + k3*i2 + k4 only one element is using this attribute: <fecomposite> html, body, svg { height: 100%; } <svg viewbox="0 0 420 200" xmlns="http://www.w3.org/2000/svg"> <filter id="composite1" x="0" y="0" width="100%" height="100%"> <fecomposite in2="sourcegraphic" operator="arithmetic" k1="1" k2="1" k3="0" k4="0" /> </filter> <filter id="composite2" x="0" y="0" width="100%" height="100%"> <fecomposite in2="sourcegraphic" operator="arithmetic" k1="1" k2="10" k3="0" k4="0" /> </filter> <image href="https://mdn.mozillademos.org/files/12668/mdn.svg" x="0" ...
...y="0" width="200" height="200" style="filter: url(#composite1);" /> <image href="https://mdn.mozillademos.org/files/12668/mdn.svg" x="0" y="0" width="200" height="200" style="filter: url(#composite2); trans
form: translatex(220px);" /> </svg> usage notes value <number> default value 0 animatable yes specifications specification status comment filter effects module level 1the definition of 'k2' in that specification.
k3 - SVG: Scalable Vector Graphics
the pixel composition is computed using the following
formula: result = k1*i1*i2 + k2*i1 + k3*i2 + k4 only one element is using this attribute: <fecomposite> html, body, svg { height: 100%; } <svg viewbox="0 0 420 200" xmlns="http://www.w3.org/2000/svg"> <filter id="composite1" x="0" y="0" width="100%" height="100%"> <fecomposite in2="sourcegraphic" operator="arithmetic" k1="1" k2="0" k3="1" k4="0" /> </filter> <filter id="composite2" x="0" y="0" width="100%" height="100%"> <fecomposite in2="sourcegraphic" operator="arithmetic" k1="1" k2="0" k3="10" k4="0" /> </filter> <image href="https://mdn.mozillademos.org/files/12668/mdn.svg" x="0" ...
...y="0" width="200" height="200" style="filter: url(#composite1);" /> <image href="https://mdn.mozillademos.org/files/12668/mdn.svg" x="0" y="0" width="200" height="200" style="filter: url(#composite2); trans
form: translatex(220px);" /> </svg> usage notes value <number> default value 0 animatable yes specifications specification status comment filter effects module level 1the definition of 'k3' in that specification.
k4 - SVG: Scalable Vector Graphics
the pixel composition is computed using the following
formula: result = k1*i1*i2 + k2*i1 + k3*i2 + k4 only one element is using this attribute: <fecomposite> html, body, svg { height: 100%; } <svg viewbox="0 0 420 200" xmlns="http://www.w3.org/2000/svg"> <filter id="composite1" x="0" y="0" width="100%" height="100%"> <fecomposite in2="sourcegraphic" operator="arithmetic" k1="1" k2="0" k3="0" k4="0" /> </filter> <filter id="composite2" x="0" y="0" width="100%" height="100%"> <fecomposite in2="sourcegraphic" operator="arithmetic" k1="10" k2="0" k3="0" k4="0.3" /> </filter> <image href="https://mdn.mozillademos.org/files/12668/mdn.svg" x="0...
..." y="0" width="200" height="200" style="filter: url(#composite1);" /> <image href="https://mdn.mozillademos.org/files/12668/mdn.svg" x="0" y="0" width="200" height="200" style="filter: url(#composite2); trans
form: translatex(220px);" /> </svg> usage notes value <number> default value 0 animatable yes specifications specification status comment filter effects module level 1the definition of 'k4' in that specification.
kernelUnitLength - SVG: Scalable Vector Graphics
fediffuselighting for the <fediffuselighting>, kernelunitlength indicates the intended distance in current filter units (i.e., units as determined by the value of attribute primitiveunits) for the x and y coordinate, respectively, in the surface normal calculation
formulas.
... value <number-optional-number> default value pixel in offscreen bitmap animatable yes fespecularlighting for the <fespecularlighting>, kernelunitlength indicates the intended distance in current filter units (i.e., units as determined by the value of attribute primitiveunits) for the x and y coordinate, respectively, in the surface normal calculation
formulas.
lang - SVG: Scalable Vector Graphics
that attribute specified a list of languages in bcp 47
format.
... the most common syntax is a value
formed by a lowercase two-character part for the language and an uppercase two-character part for the region or country, separated by a minus sign, e.g.
numOctaves - SVG: Scalable Vector Graphics
though more octaves also require more calculations, resulting in a negative impact on per
formance.
...x="0" y="0" width="100%" height="100%"> <feturbulence basefrequency="0.025" numoctaves="1" /> </filter> <filter id="noise2" x="0" y="0" width="100%" height="100%"> <feturbulence basefrequency="0.025" numoctaves="3" /> </filter> <rect x="0" y="0" width="200" height="200" style="filter: url(#noise1);" /> <rect x="0" y="0" width="200" height="200" style="filter: url(#noise2); trans
form: translatex(220px);" /> </svg> usage notes value <integer> default value 1 animatable yes <integer> defines the number of octaves.
opacity - SVG: Scalable Vector Graphics
see the css opacity property for more in
formation.
...t="100%" style="stop-color:seagreen;" /> </lineargradient> </defs> <rect x="0" y="0" width="100%" height="100%" fill="url(#gradient)" /> <circle cx="50" cy="50" r="40" fill="black" /> <circle cx="150" cy="50" r="40" fill="black" opacity="0.3" /> </svg> usage notes default value 1 value <alpha-value> animatable yes <alpha-value> the uni
form opacity setting to be applied across an entire object, as a <number>.
order - SVG: Scalable Vector Graphics
0 0 0 0 0 0 0 -4" order="3"/> </filter> <filter id="emboss2" x="0" y="0" width="100%" height="100%"> <feturbulence basefrequency="0.025" seed="0" /> <feconvolvematrix kernelmatrix="3 0 0 0 0 0 0 0 -4" order="1 1 1"/> </filter> <rect x="0" y="0" width="200" height="200" style="filter:url(#emboss1);" /> <rect x="0" y="0" width="200" height="200" style="filter:url(#emboss2); trans
form: translatex(220px);" /> </svg> usage notes value <number-optional-number> default value 3 animatable yes <number-optional-number> this value indicates the number of cells in each dimension for the kernel matrix.
... it is recommended that only small values (e.g., 3) be used; higher values may result in very high cpu overhead and usually do not produce results that justify the impact on per
formance.
overflow - SVG: Scalable Vector Graphics
the overflow attribute sets what to do when an element's content is too big to fit in its block
formatting context.
...see the css opacity property for more in
formation.
rotate - SVG: Scalable Vector Graphics
1 110 10 a120,120 -45 0,1 10,110" stroke="lightgrey" stroke-width="2" fill="none" id="themotionpath"/> <!-- red arrow which will not rotate --> <path fill="red" d="m-5,-5 l10,0 -5,5 0,0 z"> <!-- define the motion path animation --> <animatemotion dur="6s" repeatcount="indefinite" rotate="0"> <mpath href="#themotionpath"/> </animatemotion> </path> <g trans
form="translate(100, 0)"> <use href="#themotionpath"/> <!-- green arrow which will rotate along the motion path --> <path fill="green" d="m-5,-5 l10,0 -5,5 0,0 z"> <!-- define the motion path animation --> <animatemotion dur="6s" repeatcount="indefinite" rotate="auto"> <mpath href="#themotionpath"/> </animatemotion> </path> </g> <g trans
form="translate(200, 0)"> ...
...<use href="#themotionpath"/> <!-- blue arrow which will rotate backwards along the motion path --> <path fill="blue" d="m-5,-5 l10,0 -5,5 0,0 z"> <!-- define the motion path animation --> <animatemotion dur="6s" repeatcount="indefinite" rotate="auto-reverse"> <mpath href="#themotionpath"/> </animatemotion> </path> </g> <g trans
form="translate(300, 0)"> <use href="#themotionpath"/> <!-- purple arrow which will have a static rotation of 210 degrees --> <path fill="purple" d="m-5,-5 l10,0 -5,5 0,0 z"> <!-- define the motion path animation --> <animatemotion dur="6s" repeatcount="indefinite" rotate="210"> <mpath href="#themotionpath"/> </animatemotion> </path> </g> </svg> result specifications specification status ...
stitchTiles - SVG: Scalable Vector Graphics
dth="100%" height="100%"> <feturbulence basefrequency="0.025" stitchtiles="nostitch" /> </filter> <filter id="noise2" x="0" y="0" width="100%" height="100%"> <feturbulence basefrequency="0.025" stitchtiles="stitch" /> </filter> <rect x="0" y="0" width="100" height="100" style="filter: url(#noise1);" /> <rect x="0" y="0" width="100" height="100" style="filter: url(#noise1); trans
form: translate(100px, 0);" /> <rect x="0" y="0" width="100" height="100" style="filter: url(#noise1); trans
form: translate(0, 100px);" /> <rect x="0" y="0" width="100" height="100" style="filter: url(#noise1); trans
form: translate(100px, 100px);" /> <rect x="0" y="0" width="100" height="100" style="filter: url(#noise2); trans
form: translate(220px, 0);" /> <rect x="0" y="0" width="100" height...
...="100" style="filter: url(#noise2); trans
form: translate(320px, 0);" /> <rect x="0" y="0" width="100" height="100" style="filter: url(#noise2); trans
form: translate(220px, 100px);" /> <rect x="0" y="0" width="100" height="100" style="filter: url(#noise2); trans
form: translate(320px, 100px);" /> </svg> usage notes value nostitch | stitch default value nostitch animatable yes nostitch this value indicates that no attempt is made to achieve smooth transitions at the border of tiles which contain a turbulence function.
xlink:title - SVG: Scalable Vector Graphics
the use of this in
formation is highly dependent on the type of processing being done.
... these elements are using this attribute: <a>, <altglyph>, <animate>, <animatecolor>, <animatemotion>, <animatetrans
form>, <color-profile>, <cursor>, <feimage>, <filter>, <font-face-uri>, <glyphref>, <image>, <lineargradient>, <mpath>, <pattern>, <radialgradient>, <script>, <set>, <textpath>, <tref>, and <use> usage context value <anything> default value none animatable no <anything> this value specifies the title used to describe the meaning of the link or resource.
zoomAndPan - SVG: Scalable Vector Graphics
magnification in this context means the effect of a supplemental scale and translate trans
formation on the outermost svg document fragment.
... panning represents a translation (i.e., a shift) trans
formation on an svg document fragment in response to a user interface action.
<defs> - SVG: Scalable Vector Graphics
html,body,svg { height:100% } <svg viewbox="0 0 10 10" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"> <!-- some graphical objects to use --> <defs> <circle id="mycircle" cx="0" cy="0" r="5" /> <lineargradient id="mygradient" gradienttrans
form="rotate(90)"> <stop offset="20%" stop-color="gold" /> <stop offset="90%" stop-color="red" /> </lineargradient> </defs> <!-- using my graphical objects --> <use x="5" y="5" xlink:href="#mycircle" fill="url('#mygradient')" /> </svg> attributes global attributes core attributes most notably: id lang styling attributes class, style event attributes global event at...
...ent element event attributes, graphical event attributes presentation attributes most notably: clip-path, clip-rule, color, color-interpolation, color-rendering, cursor, display, fill, fill-opacity, fill-rule, filter, mask, opacity, pointer-events, shape-rendering, stroke, stroke-dasharray, stroke-dashoffset, stroke-linecap, stroke-linejoin, stroke-miterlimit, stroke-opacity, stroke-width, trans
form, vector-effect, visibility usage notes categoriescontainer element, structural elementpermitted contentany number of the following elements, in any order:animation elementsdescriptive elementsshape elementsstructural elementsgradient elements<a>, <altglyphdef>, <clippath>, <color-profile>, <cursor>, <filter>, <font>, <font-face>, <foreignobject>, <image>, <marker>, <mask>, <pattern>, <script>,...
<ellipse> - SVG: Scalable Vector Graphics
note: ellipses are unable to specify the exact orientation of the ellipse (if, for example, you wanted to draw an ellipse tilted at a 45 degree angle), but it can be rotated by using the trans
form attribute.
...tes global event attributes, graphical event attributes presentation attributes most notably: clip-path, clip-rule, color, color-interpolation, color-rendering, cursor, display, fill, fill-opacity, fill-rule, filter, mask, opacity, pointer-events, shape-rendering, stroke, stroke-dasharray, stroke-dashoffset, stroke-linecap, stroke-linejoin, stroke-miterlimit, stroke-opacity, stroke-width, trans
form, vector-effect, visibility aria attributes aria-activedescendant, aria-atomic, aria-autocomplete, aria-busy, aria-checked, aria-colcount, aria-colindex, aria-colspan, aria-controls, aria-current, aria-describedby, aria-details, aria-disabled, aria-dropeffect, aria-errormessage, aria-expanded, aria-flowto, aria-grabbed, aria-haspopup, aria-hidden, aria-invalid, aria-keyshortcuts, aria-label, ari...
<feConvolveMatrix> - SVG: Scalable Vector Graphics
the basic convolution
formula which is applied to each color value for a given pixel is: colorx,y = ( sum i=0 to [ordery-1] { sum j=0 to [orderx-1] { source x-targetx+j, y-targety+i * kernelmatrixorderx-j-1, ordery-i-1 } } ) / divisor + bias * alphax,y where "orderx" and "ordery" represent the x and y values for the...
... note in the above
formulas that the values in the kernel matrix are applied such that the kernel matrix is rotated 180 degrees relative to the source and destination images in order to match convolution theory as described in many computer graphics textbooks.
<g> - SVG: Scalable Vector Graphics
trans
formations applied to the <g> element are per
formed on its child elements, and its attributes are inherited by its children.
...tes global event attributes, graphical event attributes presentation attributes most notably: clip-path, clip-rule, color, color-interpolation, color-rendering, cursor, display, fill, fill-opacity, fill-rule, filter, mask, opacity, pointer-events, shape-rendering, stroke, stroke-dasharray, stroke-dashoffset, stroke-linecap, stroke-linejoin, stroke-miterlimit, stroke-opacity, stroke-width, trans
form, vector-effect, visibility aria attributes aria-activedescendant, aria-atomic, aria-autocomplete, aria-busy, aria-checked, aria-colcount, aria-colindex, aria-colspan, aria-controls, aria-current, aria-describedby, aria-details, aria-disabled, aria-dropeffect, aria-errormessage, aria-expanded, aria-flowto, aria-grabbed, aria-haspopup, aria-hidden, aria-invalid, aria-keyshortcuts, aria-label, ari...
<image> - SVG: Scalable Vector Graphics
the only image
formats svg software must support are jpeg, png, and other svg files.
... usage context categoriesgraphics element, graphics referencing elementpermitted contentany number of the following elements, in any order:animation elementsdescriptive elements attributes global attributes conditional processing attributes core attributes graphical event attributes presentation attributes xlink attributes class style externalresourcesrequired trans
form specific attributes x: positions the image horizontally from the origin.
<marker> - SVG: Scalable Vector Graphics
value type: auto|auto-start-reverse|<angle> ; default value: 0; animatable: yes preserveaspectratio this attribute defines how the svg fragment must be de
formed if it is embedded in a container with a different aspect ratio.
...ibutes most notably: requiredextensions, systemlanguage presentation attributes most notably: clip-path, clip-rule, color, color-interpolation, color-rendering, cursor, display, fill, fill-opacity, fill-rule, filter, mask, opacity, pointer-events, shape-rendering, stroke, stroke-dasharray, stroke-dashoffset, stroke-linecap, stroke-linejoin, stroke-miterlimit, stroke-opacity, stroke-width, trans
form, vector-effect, visibility aria attributes aria-activedescendant, aria-atomic, aria-autocomplete, aria-busy, aria-checked, aria-colcount, aria-colindex, aria-colspan, aria-controls, aria-current, aria-describedby, aria-details, aria-disabled, aria-dropeffect, aria-errormessage, aria-expanded, aria-flowto, aria-grabbed, aria-haspopup, aria-hidden, aria-invalid, aria-keyshortcuts, aria-label, ari...
<svg> - SVG: Scalable Vector Graphics
(not the height of its coordinate system.) value type: <length>|<percentage> ; default value: auto; animatable: yes preserveaspectratio how the svg fragment must be de
formed if it is displayed with a different aspect ratio.
...ment event attributes, document element event attributes presentation attributes most notably: clip-path, clip-rule, color, color-interpolation, color-rendering, cursor, display, fill, fill-opacity, fill-rule, filter, mask, opacity, pointer-events, shape-rendering, stroke, stroke-dasharray, stroke-dashoffset, stroke-linecap, stroke-linejoin, stroke-miterlimit, stroke-opacity, stroke-width, trans
form, vector-effect, visibility aria attributes aria-activedescendant, aria-atomic, aria-autocomplete, aria-busy, aria-checked, aria-colcount, aria-colindex, aria-colspan, aria-controls, aria-current, aria-describedby, aria-details, aria-disabled, aria-dropeffect, aria-errormessage, aria-expanded, aria-flowto, aria-grabbed, aria-haspopup, aria-hidden, aria-invalid, aria-keyshortcuts, aria-label, ari...
<symbol> - SVG: Scalable Vector Graphics
value type: <length>|<percentage> ; default value: auto; animatable: yes preserveaspectratio this attribute defines how the svg fragment must be de
formed if it is embedded in a container with a different aspect ratio.
...ent element event attributes, graphical event attributes presentation attributes most notably: clip-path, clip-rule, color, color-interpolation, color-rendering, cursor, display, fill, fill-opacity, fill-rule, filter, mask, opacity, pointer-events, shape-rendering, stroke, stroke-dasharray, stroke-dashoffset, stroke-linecap, stroke-linejoin, stroke-miterlimit, stroke-opacity, stroke-width, trans
form, vector-effect, visibility aria attributes aria-activedescendant, aria-atomic, aria-autocomplete, aria-busy, aria-checked, aria-colcount, aria-colindex, aria-colspan, aria-controls, aria-current, aria-describedby, aria-details, aria-disabled, aria-dropeffect, aria-errormessage, aria-expanded, aria-flowto, aria-grabbed, aria-haspopup, aria-hidden, aria-invalid, aria-keyshortcuts, aria-label, ari...
<use> - SVG: Scalable Vector Graphics
see xlink:href page for more in
formation.
...tes global event attributes, graphical event attributes presentation attributes most notably: clip-path, clip-rule, color, color-interpolation, color-rendering, cursor, display, fill, fill-opacity, fill-rule, filter, mask, opacity, pointer-events, shape-rendering, stroke, stroke-dasharray, stroke-dashoffset, stroke-linecap, stroke-linejoin, stroke-miterlimit, stroke-opacity, stroke-width, trans
form, vector-effect, visibility aria attributes aria-activedescendant, aria-atomic, aria-autocomplete, aria-busy, aria-checked, aria-colcount, aria-colindex, aria-colspan, aria-controls, aria-current, aria-describedby, aria-details, aria-disabled, aria-dropeffect, aria-errormessage, aria-expanded, aria-flowto, aria-grabbed, aria-haspopup, aria-hidden, aria-invalid, aria-keyshortcuts, aria-label, ari...
Example - SVG: Scalable Vector Graphics
</div> <
form action="" onsubmit="return false;"> <p> <label>number of motes:</label> <input id='num_motes' value='5'/> <br/> <label>max.
... velocity:</label> <input id='max_velocity' value='15'/> <br/> <label>attraction to cursor:</label> <input id='attract_cursor' value='6'/> <br/> <label>repulsion from peers:</label> <input id='repel_peer' value='5'/> <br/> </p> </
form> <script type='text/javascript'> <![cdata[ // array of motes var motes; // get the display element.
Getting started - SVG: Scalable Vector Graphics
if the html is html5, and the browser is a con
forming html5 browser, the svg can also be directly embedded.
... however, there may be syntax changes necessary to con
form to the html5 specification.
Gradients in SVG - SVG: Scalable Vector Graphics
both linear and radial gradients also take a few other attributes to describe trans
formations they may undergo.
...the radialgradient above would be rewritten: <radialgradient id="gradient" cx="60" cy="60" r="50" fx="35" fy="35" gradientunits="userspaceonuse"> you can also then apply another trans
formation to the gradient by using the gradienttrans
form attribute, but since we haven't introduced trans
forms yet, i'll leave that for later.
SVG: Scalable Vector Graphics
compared to classic bitmapped image
formats such as jpeg or png, svg-
format vector images can be rendered at any size without loss of quality and can be easily localized by updating the text within them, without the need of a graphical editor to do so.
... some real eye-candy svg at svg-wow.org firefox extension (grafox) to add a subset of smil animation support interactive photos manipulation html trans
formations using svg's foreignobject mapping, charting, games & 3d experiments while a little svg can go a long way to enhanced web content, here are some examples of heavy svg usage.
Mixed content - Web security
the attacker could also infer in
formation about the user's activities by watching which images are served to the user; often images are only served on a specific page within a website.
... passive content list this section lists all types of http requests which are considered passive content: <img> (src attribute) <audio> (src attribute) <video> (src attribute) <object> subresources (when an <object> per
forms http requests) mixed active content mixed active content is content that has access to all or parts of the document object model of the https page.
Securing your site - Web security
this article offers an assortment of suggestions, as well as links to other articles providing more useful in
formation.
... user in
formation security how to turn off
form autocompletion
form fields support autocompletion in gecko; that is, their values can be remembered and automatically brought back the next time the user visits your site.
Subresource Integrity - Web security
how subresource integrity helps using content delivery networks (cdns) to host files such as scripts and stylesheets that are shared among multiple sites can improve site per
formance and conserve bandwidth.
... note: an integrity value's "hash" part is, strictly speaking, a cryptographic digest
formed by applying a particular hash function to some input (for example, a script or stylesheet file).
Using shadow DOM - Web Components
when the icon is focused, it displays the text in a pop up in
formation box to provide further in-context in
formation.
...with this optimization the per
formance of external and internal styles should be similar.
generate-id - XPath
notes the same id must be generated every time for the same node in the current document in the current trans
formation.
... the generated id may not be the same in subsequent trans
formations.
Functions - XPath
for further in
formation on using xpath/xslt functions, please see the for further reading page.
... boolean() ceiling() choose() concat() contains() count() current() xslt-specific document() xslt-specific element-available() false() floor()
format-number() xslt-specific function-available() generate-id() xslt-specific id() (partially supported) key() xslt-specific lang() last() local-name() name() namespace-uri() normalize-space() not() number() position() round() starts-with() string() string-length() substring() substring-after() substring-before() sum() system-property() xslt-specific translate() true() unparsed-entity-url() xslt-specific (not supported) ...
XPath
trans
forming xml with xslt xslt uses xpath to address code segments in an xml document that it wishes to trans
form.
... xmlquire (
formerly known as sketchpath) a graphical xpath builder/debugger(.net).
Interacting with page scripts - Archive of obsolete content
expose objects to page scripts until firefox 30, you could use unsafewindow to per
form the reverse procedure, and make objects defined in content scripts available to page scripts: // content-script.js unsafewindow.contentscriptobject = {"greeting" : "hello from add-on"}; // page-script.js var button = document.getelementbyid("show-content-script-var"); button.addeventlistener("click", function() { // access object defined by content script console.log(window.contentscrip...
Autodial for Windows NT - Archive of obsolete content
original document in
formation author(s): benjamin chuang last updated date: october 2, 2002 copyright in
formation: portions of this content are © 1998–2007 by individual mozilla.org contributors; content available under a creative commons license | details.
Automated testing tips and tricks - Archive of obsolete content
todo: check example code in to the tree somewhere how to quit the browser on all plat
forms window.close() of the last open window does not quit the application on mac http://people.mozilla.com/~davel/scripts/ - look at quit.js and quit.xul install manifest file in appdir/chrome to map chrome://tests/content to directory containing quit.js and quit.xul example: content tests file:///users/davel/work/tests/ start app with command line flag -chrome chrome://tests/content/quit.xul how to create a new profile from the command line first, use the -createprofile command line flag to add a profile entry to profiles.ini and populate the new profile directory with a prefs.js file firefox-bin -createprofile "testprofile ${profi...
How Mozilla finds its configuration files - Archive of obsolete content
how mozilla finds its configuration files mozilla looks into the binary %userprofile%\application data\mozilla\registry.dat file for its "registry", which contains, amongst other in
formation, a pointer to the directory where the profile is stored (located at common/profiles/profilename/directory.
Finding the file to modify - Archive of obsolete content
in particular, positioning in
formation can be specified in both the structure layer and the style layer, and some behavior can be partly defined in the style layer.) we're going to add code to all three ui layers, starting with the structure layer.
Creating a Mozilla Extension - Archive of obsolete content
dify finding the code to modify adding the structure specifying the appearance enabling the behavior - retrieving tinderbox status enabling the behavior - updating the status bar panel enabling the behavior - updating the status periodically making it into a static overlay making it into a dynamic overlay and packaging it up for distribution conclusion next » original document in
formation author(s): myk melez last updated date: september 19, 2006 copyright in
formation: portions of this content are © 1998–2007 by individual mozilla.org contributors; content available under a creative commons license | details.
contents.rdf - Archive of obsolete content
f:li resource="urn:mozilla:skin:myskin/1.0:communicator"/> <rdf:li resource="urn:mozilla:skin:myskin/1.0:editor"/> <rdf:li resource="urn:mozilla:skin:myskin/1.0:global"/> <rdf:li resource="urn:mozilla:skin:myskin/1.0:messenger"/> <rdf:li resource="urn:mozilla:skin:myskin/1.0:navigator"/> </rdf:seq> </chrome:packages> </rdf:description> <!-- version in
formation.
Creating a Skin for Mozilla - Archive of obsolete content
organizing images adding an image to the right of a toolbar jar file installer utility (provided by neil marshall) frequently asked questions links original document in
formation author: neil marshall other contributors (suggestions/corrections): brent marshall, cdn (http://themes.mozdev.org), jp martin, boris zbarsky, asa dotzler, wesayso, david james, dan mauch last updated date: jan 5th, 2003 copyright in
formation: copyright 2002-2003 neil marshall, permission given to devmo to migrate into the wiki april 2005 via email.
DTrace - Archive of obsolete content
dtrace is sun microsystem's dynamic tracing framework that allows developers to instrument a program with probes that have little to no effect on per
formance when not in use and very little when active.
Installing Dehydra - Archive of obsolete content
(obsolete dehydra releases can be found on the mozilla ftp site.) hg clone http://hg.mozilla.org/rewriting-and-analysis/dehydra/ cd dehydra export cxx=/usr/bin/g++ ./configure \ --js-headers=$home/obj-js/dist/include \ --js-libs=$home/obj-js make # run dehydra and treehydra tests make check usage dehydra checking can be per
formed directly within the mozilla build.
Drag and Drop Example - Archive of obsolete content
flavour, session) {}, ondrop: function (event, dropdata, session) { if (dropdata.data != "") { var elem = document.createelement(dropdata.data); event.target.appendchild(elem); elem.setattribute("left", "" + event.pagex); elem.setattribute("top", "" + event.pagey); elem.setattribute("label", dropdata.data); } } }; « previous original document in
formation author(s): neil deakin original document: http://xulplanet.com/tutorials/mozsdk/dragex.php copyright in
formation: copyright (c) neil deakin ...
Helper Apps (and a bit of Save As) - Archive of obsolete content
original document in
formation author(s): boris zbarsky last updated date: september 12, 2002 copyright in
formation: portions of this content are © 1998–2007 by individual mozilla.org contributors; content available under a creative commons license | details.
importUserCertificates - Archive of obsolete content
if it fails, one of the following error strings will be returned: error string description "error:usercancel" the user canceled the import operation "error:invalidcertificate" one of the certificate packages was incorrectly
formatted "error:internalerror" the software encountered some internal error, such as out of memory "error:invalidrequestid" the request id in the response message does not match any outstanding request ...
Java in Firefox Extensions - Archive of obsolete content
ticmethod = aclass.getmethod("getgreeting", []); var greeting = astaticmethod.invoke(null, []); alert(greeting); another, perhaps simpler approach is as follows: var myclass = loader.loadclass('com.example.myclass'); // use the same loader from above var myobj = myclass.newinstance(); var binval = myobj.mymethod(arg1, arg2); // pass whatever arguments you need (they'll be auto-converted to java
form, taking into account the liveconnect conversion rules) for more complex cases, in which you need to call a specific constructor with arguments, you will need reflection.
Extenders - Archive of obsolete content
manifest chief mechanism for allowing advanced api use within your jetpack superpowers similar to libraries, superpowers are for adding deeper plat
form coupling for your jetpack sandboxes safely abstracts library interoperability issues so you don't have to worry about them future api interface method for including not yet finalized functionality in your jetpack ...
Enabling - Archive of obsolete content
jetpack.future.import("clipboard"); the goal here is to be able to remove the jetpack.future.import() call when the feature has been
formally accepted into the core without additionally changing the script (barring any other changes made during integration).
Mozilla Web Developer Community - Archive of obsolete content
mozilla spread firefox standards communities get involved in grass-roots web standards evangelism efforts through these groups: the web standards project, a grassroots coalition fighting for standards maccaws, making a commercial case for web standards a list apart, for people who make websites mozilla technology evangelism, get involved with mozilla evangelism you may also find helpful in
formation on the w3c mailing lists newsletter there is no newsletter planned at this time.
Example Sticky Notes - Archive of obsolete content
--> <svg:svg width="60px" height="60px"> <svg:g fill-opacity="0.6" stroke="#ffffff" stroke-width="1px"> <svg:circle cx="25px" cy="12px" r="12" fill="#ff0000" trans
form="translate(0,0)"/> <svg:circle cx="25px" cy="12px" r="12" fill="#00ff00" trans
form="translate(7,12)"/> <svg:circle cx="25px" cy="12px" r="12" fill="#0000ff" trans
form="translate(-7,12)"/> </svg:g> </svg:svg> <children/> </content> <implementation> <!-- here and futher cdata wrappers around javascript code are not mandatory but recommended.
File.macAlias - Archive of obsolete content
xpisrc = "miscellaneous program"; var vi = "1.1.1.1"; initinstall( "macintosh alias", "misc", vi, 0); f = getfolder("program"); g = getfolder("mac desktop"); addfile( "filemacalias", "2.2.2.2", xpisrc, f, xpisrc, true); err = file.macalias(f, xpisrc, g, xpisrc + " alias"); logcomment("file.macalias returns: " + err); if (0 == getlasterror()) per
forminstall(); else cancelinstall(); ...
File.windowsShortcut - Archive of obsolete content
"test", vi, 0); f = getfolder("windows"); g = getfolder("temporary"); addfile( "miscshortcut", "2.2.2.2", xpisrc, f, xpisrc, true); target = getfolder(f, xpisrc); shortcutpath = getfolder("program"); err = file.windowsshortcut( target, shortcutpath, "misc shortcut", g, "", target, 0); logcomment("file.windowsshortcut returns: " + err); if (0 == getlasterror()) per
forminstall(); else cancelinstall(); ...
Install.addFile - Archive of obsolete content
var xpisrc = "file.txt"; initinstall( "adding a file", "testfile", "1.0.1.7", 1); f = getfolder("program"); setpackagefolder(f); addfile(xpisrc); if (0 == getlasterror()) per
forminstall(); else cancelinstall(); ...
toString - Archive of obsolete content
to get the version number out of an installversion object in order to compare it with other versions, you can call tostring() and get back the version as a string in the
format "maj.min.rev.bld." example var vi = new installversion(); vi.init("999.888.777.666"); //random string vistring = vi.tostring(); ...
::-ms-browse - Archive of obsolete content
or border-top-left-radius border-top-right-radius border-top-style border-top-width box-shadow box-sizing color cursor display (values block, inline-block, none) @font-face font-size font-style font-weight height margin-bottom margin-left margin-right margin-top opacity outline-color outline-style outline-width padding-bottom padding-left padding-right padding-top trans
form trans
form-origin visibility width syntax ::-ms-browse example html <label>select image: <input type="file"></label> css input[type="file"]::-ms-browse { color: red; background-color: yellow; } result output example specifications not part of any specification.
::-ms-check - Archive of obsolete content
or border-top-left-radius border-top-right-radius border-top-style border-top-width box-shadow box-sizing color cursor display (values block, inline-block, none) @font-face font-size font-style font-weight height margin-bottom margin-left margin-right margin-top opacity outline-color outline-style outline-width padding-bottom padding-left padding-right padding-top trans
form trans
form-origin visibility width syntax ::-ms-check example html <
form> <label for="redbutton">red</label> <input type="radio" id="redbutton"><br> <label for="greencheckbox">green</label> <input type="checkbox" id="greencheckbox"> </
form> css input, label { display: inline; } input[type=radio]::-ms-check { border-color: red; /* this will make the border red when the butt...
::-ms-clear - Archive of obsolete content
or border-top-left-radius border-top-right-radius border-top-style border-top-width box-shadow box-sizing color cursor display (values block, inline-block, none) @font-face font-size font-style font-weight height margin-bottom margin-left margin-right margin-top opacity outline-color outline-style outline-width padding-bottom padding-left padding-right padding-top trans
form trans
form-origin visibility width syntax ::-ms-clear example html <
form> <label for="firstname">first name:</label> <input type="text" id="firstname" name="firstname" placeholder="first name"> <br> <label for="lastname">last name:</label> <input type="text" id="lastname" name="lastname" placeholder="second name"> </
form> css input, label { display: block; } input[type=te...
::-ms-expand - Archive of obsolete content
or border-top-left-radius border-top-right-radius border-top-style border-top-width box-shadow box-sizing color cursor display (values block, inline-block, none) @font-face font-size font-style font-weight height margin-bottom margin-left margin-right margin-top opacity outline-color outline-style outline-width padding-bottom padding-left padding-right padding-top trans
form trans
form-origin visibility width syntax ::-ms-clear specifications not part of any specification.
::-ms-fill-lower - Archive of obsolete content
op-width box-shadow box-sizing color cursor display (values block, inline-block, none) @font-face font-size font-style font-weight height margin-bottom margin-left margin-right margin-top -ms-background-position-x -ms-background-position-y -ms-high-contrast-adjust opacity outline-color outline-style outline-width padding-bottom padding-left padding-right padding-top trans
form trans
form-origin visibility width specifications not part of any specification.
::-ms-fill-upper - Archive of obsolete content
op-width box-shadow box-sizing color cursor display (values block, inline-block, none) @font-face font-size font-style font-weight height margin-bottom margin-left margin-right margin-top -ms-background-position-x -ms-background-position-y -ms-high-contrast-adjust opacity outline-color outline-style outline-width padding-bottom padding-left padding-right padding-top trans
form trans
form-origin visibility width syntax ::-ms-fill-upper specifications not part of any specification.
::-ms-fill - Archive of obsolete content
n-name background-clip, background-color, background-image, background-origin, background-repeat, and background-size border border-radius box-shadow box-sizing color cursor display (values block, inline-block, none) font height margin -ms-background-position-x -ms-background-position-y -ms-high-contrast-adjust opacity outline-color, outline-style, and outline-width padding trans
form and trans
form-origin visibility syntax ::-ms-fill example html <progress value="10" max="50"></progress> css progress::-ms-fill { background-color: orange; } result a progress bar using this style might look something like this: ...
::-ms-reveal - Archive of obsolete content
op-width box-shadow box-sizing color cursor display (values block, inline-block, none) @font-face font-size font-style font-weight height margin-bottom margin-left margin-right margin-top -ms-background-position-x -ms-background-position-y -ms-high-contrast-adjust opacity outline-color outline-style outline-width padding-bottom padding-left padding-right padding-top trans
form trans
form-origin visibility width syntax ::-ms-reveal specifications not part of any specification.
::-ms-thumb - Archive of obsolete content
op-width box-shadow box-sizing color cursor display (values block, inline-block, none) @font-face font-size font-style font-weight height margin-bottom margin-left margin-right margin-top -ms-background-position-x -ms-background-position-y -ms-high-contrast-adjust opacity outline-color outline-style outline-width padding-bottom padding-left padding-right padding-top trans
form trans
form-origin visibility width syntax ::-ms-thumb specifications not part of any specification.
::-ms-ticks-after - Archive of obsolete content
op-width box-shadow box-sizing color cursor display (values block, inline-block, none) @font-face font-size font-style font-weight height margin-bottom margin-left margin-right margin-top -ms-background-position-x -ms-background-position-y -ms-high-contrast-adjust opacity outline-color outline-style outline-width padding-bottom padding-left padding-right padding-top trans
form trans
form-origin visibility width syntax ::-ms-ticks-after ...
::-ms-ticks-before - Archive of obsolete content
op-width box-shadow box-sizing color cursor display (values block, inline-block, none) @font-face font-size font-style font-weight height margin-bottom margin-left margin-right margin-top -ms-background-position-x -ms-background-position-y -ms-high-contrast-adjust opacity outline-color outline-style outline-width padding-bottom padding-left padding-right padding-top trans
form trans
form-origin visibility width syntax ::-ms-ticks-before ...
::-ms-track - Archive of obsolete content
op-width box-shadow box-sizing color cursor display (values block, inline-block, none) @font-face font-size font-style font-weight height margin-bottom margin-left margin-right margin-top -ms-background-position-x -ms-background-position-y -ms-high-contrast-adjust opacity outline-color outline-style outline-width padding-bottom padding-left padding-right padding-top trans
form trans
form-origin visibility width syntax ::-ms-track see also ::-ms-thumb ::-ms-fill-upper ::-ms-fill-lower ::-webkit-slider-runnable-track ::-moz-range-track css-tricks: styling cross-browser compatible range inputs with css quirksmode: styling and scripting sliders ...
::-ms-value - Archive of obsolete content
op-width box-shadow box-sizing color cursor display (values block, inline-block, none) @font-face font-size font-style font-weight height margin-bottom margin-left margin-right margin-top -ms-background-position-x -ms-background-position-y -ms-high-contrast-adjust opacity outline-color outline-style outline-width padding-bottom padding-left padding-right padding-top trans
form trans
form-origin visibility width syntax ::-ms-value example input::-ms-value { color: lime; font-style: italic; } to disable the default styling: select::-ms-value { background-color: transparent; color: inherit; } specifications not part of any specification.
CSS - Archive of obsolete content
d multi-speaker setups allow for a fully three-dimensional stage.display-insidethe display-inside css property specifies the inner display type of the box generated by an element, dictating how its contents lay out inside the box.display-outsidethe display-outside css property specifies the outer display type of the box generated by an element, dictating how the element participates in its parent
formatting context.
Processing XML with E4X - Archive of obsolete content
it is possible to create an xmllist using xml literal syntax without needing to create a well-
formed xml document, using the following syntax: var xmllist = <> <lang>javascript</lang> <lang>python</lang> </>; the += operator can be used to append new elements to an xmllist within a document: languages.lang += <lang>ruby</lang>; note that unlike node lists returned by regular dom methods, xmllists are static and are not automatically updated to reflect changes in the dom.
Introduction - Archive of obsolete content
use of inline functions in content although the brackets are restricted to single statements for evaluation, one might provide an anonymous function to per
form some extra processing inline: var a = 'foo'; var b = <bar>{function () {var c = a.touppercase(); var d = 5 * 5; return c + d;}()}</bar>; where the above produces: <bar>foo25</bar>.
Array comprehensions - Archive of obsolete content
even strings may be used as input; to achieve the filter and map actions (under array-like objects) above: var str = 'abcdef'; var consonantsonlystr = [for (c of str) if (!(/[aeiouaeiou]/).test(c)) c].join(''); // 'bcdf' var interpolatedzeros = [for (c of str) c + '0' ].join(''); // 'a0b0c0d0e0f0' again, the input
form is not preserved, so we have to use join() to revert back to a string.
ECMAScript 2016 to ES.Next support in Mozilla - Archive of obsolete content
pes (not yet implemented; in other browsers) regexp named capture groups (not yet implemented; in other browsers) ecmascript 2019 array.flat() (firefox 62) array.flatmap() (firefox 62) object.fromentries() (firefox 63) string.trimstart() and string.trimend() (firefox 61) optional catch binding (firefox 58) function.tostring() revision (firefox 54) symbol.description (firefox 63) well-
formed json.stringify() (firefox 64) ecmascript 2020 this is the current es.next version.
Building up a basic demo with Babylon.js - Game development
ames: babylon.js demo</title> <style> html,body,canvas { margin: 0; padding: 0; width: 100%; height: 100%; font-size: 0; } </style> </head> <body> <script src="babylon.js"></script> <canvas id="render-canvas"></canvas> <script> var canvas = document.getelementbyid("render-canvas"); /* all our javascript code goes here */ </script> </body> </html> it contains some basic in
formation like the document <title>, and some css to set the width and height of the <canvas> element (which babylon.js will use to render the content on) to fill the entire available viewport space.
Building up a basic demo with the PlayCanvas engine - Game development
vas demo</title> <style> body { margin: 0; padding: 0; } canvas { width: 100%; height: 100%; } </style> </head> <body> <script src="playcanvas-latest.js"></script> <canvas id="application-canvas"></canvas> <script> var canvas = document.getelementbyid("application-canvas"); /* all our javascript code goes here */ </script> </body> </html> it contains some basic in
formation like the document <title>, and some css to set the width and height of the <canvas> element that playcanvas will use to 100% so that it will fill the entire available viewport space.
Square tilemaps implementation: Static maps - Game development
note: when writing this article, we assumed previous reader knowledge of canvas basics such as how get a 2d canvas context, load images, etc., which is all explained in the canvas api tutorial, as well as the basic in
formation included in our tilemaps introduction article.
Build the brick field - Game development
to begin with we've included the brickinfo object, as this will come in handy very soon: function initbricks() { brickinfo = { width: 50, height: 20, count: { row: 3, col: 7 }, offset: { top: 50, left: 60 }, padding: 10 }; } this brickinfo object will hold all the in
formation we need: the width and height of a single brick, the number of rows and columns of bricks we will see on screen, the top and left offset (the location on the canvas where we shall start to draw the bricks) and the padding between each row and column of bricks.
Extra lives - Game development
the
former is anchored on its top right edge to align properly with the screen, and the latter is centered, both using anchor.set().
Tutorials - Game development
2d plat
form game with phaser this tutorial series shows how to create a simple plat
form game using phaser, covering fundamentals such as sprites, collisions, physics, collectables, and more.
Visual JS GE - Game development
rsion : "0.5", path_of_node_app : "d:/path_to_server_instance_folder/server/" , // edit here path_of_www : "d:/xamp/htdocs/project_instance/", // path_to_www edit here editor_port : "1013", reg_path : "users/", account_port : 3666 , destroy_session_after_x_mseconds : 20000, }; local node.js application tools (uses in developer mode only) the following section provides in
formation about the tools involved in visual-js game engine.
Game development
we've also included a reference section so you can easily find in
formation about all the most common apis used in game development.
Ember app structure and componentization - Learn web development
ember getting started with ember ember app structure and componentization ember interactivity: events, classes and state ember interactivity: footer functionality, conditional rendering routing in ember ember resources and troubleshooting vue getting started with vue creating our first vue component rendering a list of vue components adding a new todo
form: vue events, methods, and models styling vue components with css using vue computed properties vue conditional rendering: editing existing todos focus management with vue refs vue resources svelte getting started with svelte starting our svelte todo list app dynamic behavior in svelte: working with variables and props componentizing our svelte app advanced s...
Rendering a list of Vue components - Learn web development
ember getting started with ember ember app structure and componentization ember interactivity: events, classes and state ember interactivity: footer functionality, conditional rendering routing in ember ember resources and troubleshooting vue getting started with vue creating our first vue component rendering a list of vue components adding a new todo
form: vue events, methods, and models styling vue components with css using vue computed properties vue conditional rendering: editing existing todos focus management with vue refs vue resources svelte getting started with svelte starting our svelte todo list app dynamic behavior in svelte: working with variables and props componentizing our svelte app advanced s...
Chrome Worker Modules
e the values that have been exported // assuming that mymodule.js is installed to resource://gre/modules/mymodule.js let module = require("resource://gre/modules/mymodule.js") foo(module.key); // module.key == "this is public"; // however, secretkey is not exported and cannot be used for the installation of resources, please see the documentation on moz.build (if your code is part of the plat
form) or on chrome manifests (if your code is part of an add-on).
Browser chrome tests
be aware that this is not a solution; you should investigate why your test is taking so long, since it's most likely due to a bad test design or a per
formance problem.
Testopia
q wiki docs bugs (please read the bug reporting guide) official testopia blog irc: #testopia or #bugzilla user help support-webtools@lists.mozilla.org developers dev-apps-webtools@lists.mozilla.org downloads download 2.5 (bugzilla 4.2) download 2.4 (bugzilla 3.6 and 4.0) archived versions developers greg hendricks vance baarda (
former developer) ed fuentetaja (
former developer) ...
Bugzilla
testopia - test case management extension bugzilla.org - the project site wikipedia:bugzilla - general description of bugzilla (not specific to mozilla projects) bmo on wiki.mozilla.org - in
formation about mozilla's customized bugzilla installation, including how to contribute to it tools bugzilla todos lists review and flag requests, patches to check in, unfulfilled requests you made of other people, and assigned bugs.
Cookies in Mozilla
original document in
formation author(s): mike connor last updated date: march 15, 2004 copyright in
formation: portions of this content are © 1998–2007 by individual mozilla.org contributors; content available under a creative commons license | details.
Creating Sandboxed HTTP Connections
its setuploadstream method is called, passing in the nsiinputstream and the type (in this case, "application/x-www-
form-urlencoded"): var uploadchannel = gchannel.queryinterface(components.interfaces.nsiuploadchannel); uploadchannel.setuploadstream(inputstream, "application/x-www-
form-urlencoded", -1); due to a bug, calling setuploadstream will reset the nsihttpchannel to be a put request, so now the request type is set to post: // order important - setuploadstream resets to put httpchannel.requestmethod = "pos...
Articles for new developers
when first getting started as a contributor to the mozilla project, there's a lot of in
formation to sort through and understand.
pymake
pymake for more in
formation.
Replace
remarks if insufficient memory is available to per
form the assignment, then the string's internal buffer will point to a static empty (zero-length) buffer.
Append
remarks if insufficient memory is available to per
form the assignment, then the string's internal buffer will point to a static empty (zero-length) buffer.
Assign
remarks if insufficient memory is available to per
form the assignment, then the string's internal buffer will point to a static empty (zero-length) buffer.
Insert
remarks if insufficient memory is available to per
form the assignment, then the string's internal buffer will point to a static empty (zero-length) buffer.
Replace
remarks if insufficient memory is available to per
form the assignment, then the string's internal buffer will point to a static empty (zero-length) buffer.
nsAdoptingCString
@param astring is the string to check @param aignorecase tells us how to treat case @param acount tells us how many chars to compare @return boolean parameters char* astring print32 acount tofloat float tofloat(print32*) const - source per
form string to float conversion.
nsAdoptingString
from left) @return offset in string, or knotfound parameters prunichar* astring print32 aoffset print32 rfindcharinset(const nsstring&, print32) const - source parameters nsstring& astring print32 aoffset equalsignorecase prbool equalsignorecase(const char*, print32) const - source parameters char* astring print32 acount tofloat float tofloat(print32*) const - source per
form string to float conversion.
nsAutoString
from left) @return offset in string, or knotfound parameters prunichar* astring print32 aoffset print32 rfindcharinset(const nsstring&, print32) const - source parameters nsstring& astring print32 aoffset equalsignorecase prbool equalsignorecase(const char*, print32) const - source parameters char* astring print32 acount tofloat float tofloat(print32*) const - source per
form string to float conversion.
nsCAutoString
@param astring is the string to check @param aignorecase tells us how to treat case @param acount tells us how many chars to compare @return boolean parameters char* astring print32 acount tofloat float tofloat(print32*) const - source per
form string to float conversion.
nsCString
@param astring is the string to check @param aignorecase tells us how to treat case @param acount tells us how many chars to compare @return boolean parameters char* astring print32 acount tofloat float tofloat(print32*) const - source per
form string to float conversion.
nsDependentCString
@param astring is the string to check @param aignorecase tells us how to treat case @param acount tells us how many chars to compare @return boolean parameters char* astring print32 acount tofloat float tofloat(print32*) const - source per
form string to float conversion.
nsDependentString
from left) @return offset in string, or knotfound parameters prunichar* astring print32 aoffset print32 rfindcharinset(const nsstring&, print32) const - source parameters nsstring& astring print32 aoffset equalsignorecase prbool equalsignorecase(const char*, print32) const - source parameters char* astring print32 acount tofloat float tofloat(print32*) const - source per
form string to float conversion.
nsFixedCString
@param astring is the string to check @param aignorecase tells us how to treat case @param acount tells us how many chars to compare @return boolean parameters char* astring print32 acount tofloat float tofloat(print32*) const - source per
form string to float conversion.
nsFixedString
from left) @return offset in string, or knotfound parameters prunichar* astring print32 aoffset print32 rfindcharinset(const nsstring&, print32) const - source parameters nsstring& astring print32 aoffset equalsignorecase prbool equalsignorecase(const char*, print32) const - source parameters char* astring print32 acount tofloat float tofloat(print32*) const - source per
form string to float conversion.
nsPromiseFlatCString
@param astring is the string to check @param aignorecase tells us how to treat case @param acount tells us how many chars to compare @return boolean parameters char* astring print32 acount tofloat float tofloat(print32*) const - source per
form string to float conversion.
All keyboard shortcuts - Firefox Developer Tools
show/hide more in
formation about current property (computed view only, when a property is selected) enter or space return or space enter or space open mdn reference page about current property (computed view only, when a property is selected) f1 f1 f1 open current css file in style editor (computed view only, when more in
formation is shown for a property and a css file reference is ...
Measure a portion of the page - Firefox Developer Tools
when you stop holding the mouse down, the rectangle that was displayed on screen when you released the button will stay there until you click again, allowing you time to take screenshots, note the in
formation down, etc.
Aggregate view - Firefox Developer Tools
let's get an allocation trace: open the memory tool check "record call stacks" load https://mdn.github.io/per
formance-scenarios/dom-allocs/alloc.html take a snapshot select "view/aggregate" select "group by/call stack" you should see something like this: this is telling us that 93% of the total heap snapshot was allocated in functions called from "alloc.js", line 35 (our initial createtoolbars() call).
Basic operations - Firefox Developer Tools
however, recording this in
formation has a run-time cost, so you must ask the tool to record memory calls before the memory is allocated, if you want to see memory call sites in the snapshot.
Edit CSS filters - Firefox Developer Tools
css filter properties in the rules view have a circular gray and white swatch next to them: clicking the swatch opens a filter editor: the filter editor lists each of the effects per
formed by that filter on a separate line.
Inspect and select colors - Firefox Developer Tools
the color picker includes an eyedropper icon: clicking this icon enables you to use the eyedropper to select a new color for the element from the page: clicking the color sample while holding down the shift key changes the color
format: ...
Animation inspector (Firefox 41 and 42) - Firefox Developer Tools
the animation inspector enables you to: see in
formation about all animations running in the page play/pause all animations play/pause/rewind/fast-forward each animation jump to a specific point in an animation highlight and inspect the animated node adjust the playback rate of each animation see whether an animation is running in the compositor thread (a lightning bolt icon is displayed next to such animations) ...
Animation inspector example: CSS transitions - Firefox Developer Tools
="https://udn.realityripple.com/samples/e6/a96484b5c3.png" class="icon"/> <span class="note">firefox developer edition</span> </div> css content .channel { padding: 2em; margin: 0.5em; box-shadow: 1px 1px 5px #808080; margin: 1.5em; } .channel > * { vertical-align: middle; line-height: normal; } .icon { width: 50px; height: 50px; filter: grayscale(100%); transition: trans
form 750ms ease-in, filter 750ms ease-in-out; } .note { margin-left: 1em; font: 1.5em "open sans",arial,sans-serif; overflow: hidden; white-space: nowrap; display: inline-block; opacity: 0; width: 0; transition: opacity 500ms 150ms, width 500ms 150ms; } .icon#selected { filter: grayscale(0%); trans
form: scale(1.5); } .icon#selected+span { opacity: 1; width: 300px; } javas...
Animation inspector example: Web Animations API - Firefox Developer Tools
1px 1px 5px #808080; margin: 1.5em; } .channel > * { vertical-align: middle; line-height: normal; } #icon { width: 50px; height: 50px; filter: grayscale(100%); } #note { margin-left: 1em; font: 1.5em "open sans",arial,sans-serif; overflow: hidden; white-space: nowrap; display: inline-block; opacity: 0; width: 0; } javascript content var iconkeyframeset = [ { trans
form: 'scale(1)', filter: 'grayscale(100%)'}, { filter: 'grayscale(100%)', offset: 0.333}, { trans
form: 'scale(1.5)', offset: 0.666 }, { trans
form: 'scale(1.5)', filter: 'grayscale(0%)'} ]; var notekeyframeset = [ { opacity: '0', width: '0'}, { opacity: '1', width: '300px'} ]; var iconkeyframeoptions = { duration: 750, fill: 'forwards', easing: 'ease-in', enddelay: 100 } var note...
How to - Firefox Developer Tools
scss grid inspector: examine grid layoutsedit css filtersedit shape paths in cssedit fontsexamine event listenersexamine and edit cssexamine and edit htmlexamine and edit the box modelinspect and select colorsopen the inspectorreposition elements in the pageselect an elementselect and highlight elementsuse the inspector apiuse the inspector from the web consoleview background imagesvisualize trans
formswork with animations ...
Animation.onremove - Web APIs
examples in our simple replace indefinite animations demo, you can see the following code: const divelem = document.queryselector('div'); document.body.addeventlistener('mousemove', evt => { let anim = divelem.animate( { trans
form: `translate(${ evt.clientx}px, ${evt.clienty}px)` }, { duration: 500, fill: 'forwards' } ); anim.commitstyles(); //anim.persist() anim.onremove = function() { console.log('animation removed'); } console.log(anim.replacestate); }); here we have a <div> element, and an event listener that fires the event handler code whenever the mouse moves.
Animation.pause() - Web APIs
example animation.pause() is used many times in the alice in web animations api land growing/shrinking alice game, largely because animations created with the element.animate() method immediately start playing and must be paused manually if you want to avoid that: // animation of the cupcake slowly getting eaten up var nommingcake = document.getelementbyid('eat-me_sprite').animate( [ { trans
form: 'translatey(0)' }, { trans
form: 'translatey(-80%)' } ], { fill: 'forwards', easing: 'steps(4, end)', duration: alicechange.effect.timing.duration / 2 }); // doesn't actually need to be eaten until a click event, so pause it initially: nommingcake.pause(); additionally, when resetting : // an all-purpose function to pause the animations on alice, the cupcake, and the bottle that re...
Animation.persist() - Web APIs
examples in our simple replace indefinite animations demo, you can see the following code: const divelem = document.queryselector('div'); document.body.addeventlistener('mousemove', evt => { let anim = divelem.animate( { trans
form: `translate(${ evt.clientx}px, ${evt.clienty}px)` }, { duration: 500, fill: 'forwards' } ); anim.commitstyles(); //anim.persist() anim.onremove = function() { console.log('animation removed'); } console.log(anim.replacestate); }); here we have a <div> element, and an event listener that fires the event handler code whenever the mouse moves.
Animation.play() - Web APIs
two animation.play()s, one eventlistener: // the cake has its own animation: var nommingcake = document.getelementbyid('eat-me_sprite').animate( [ { trans
form: 'translatey(0)' }, { trans
form: 'translatey(-80%)' } ], { fill: 'forwards', easing: 'steps(4, end)', duration: alicechange.effect.timing.duration / 2 }); // pause the cake's animation so it doesn't play immediately.
Animation.replaceState - Web APIs
examples in our simple replace indefinite animations demo, you can see the following code: const divelem = document.queryselector('div'); document.body.addeventlistener('mousemove', evt => { let anim = divelem.animate( { trans
form: `translate(${ evt.clientx}px, ${evt.clienty}px)` }, { duration: 500, fill: 'forwards' } ); anim.commitstyles(); //anim.persist() anim.onremove = function() { console.log('animation removed'); } console.log(anim.replacestate); }); here we have a <div> element, and an event listener that fires the event handler code whenever the mouse moves.
Animation - Web APIs
it will cause the end styling state to be written to the element being animated, in the
form of properties inside a style attribute.
AudioBuffer - Web APIs
the buffer contains data in the following
format: non-interleaved ieee754 32-bit linear pcm with a nominal range between -1 and +1, that is, 32bits floating point buffer, with each samples between -1.0 and 1.0.
AudioBufferSourceNode.start() - Web APIs
the computation of the offset into the sound is per
formed using the sound buffer's natural sample rate, rather than the current playback rate, so even if the sound is playing at twice its normal speed, the midway point through a 10-second audio buffer is still 5.
AudioContext.createMediaStreamDestination() - Web APIs
examples in the following simple example, we create a mediastreamaudiodestinationnode, an oscillatornode and a mediarecorder (the example will therefore only work in firefox and chrome at this time.) the mediarecorder is set up to record in
formation from the mediastreamdestinationnode.
AudioListener.dopplerFactor - Web APIs
// set up listener and panner position in
formation var width = window.innerwidth; var height = window.innerheight; var xpos = math.floor(width/2); var ypos = math.floor(height/2); var zpos = 295; // define other variables var audiocontext = window.audiocontext || window.webkitaudiocontext; var audioctx = new audiocontext(); var panner = audioctx.createpanner(); panner.panningmodel = 'hrtf'; panner.distancemodel = 'inverse'; panner.refdis...
AudioListener.forwardX - Web APIs
// set up listener and panner position in
formation var width = window.innerwidth; var height = window.innerheight; var xpos = math.floor(width/2); var ypos = math.floor(height/2); var zpos = 295; // define other variables var audiocontext = window.audiocontext || window.webkitaudiocontext; var audioctx = new audiocontext(); var panner = audioctx.createpanner(); panner.panningmodel = 'hrtf'; panner.distancemodel = 'inverse'; panner.refdis...
AudioListener.forwardY - Web APIs
// set up listener and panner position in
formation var width = window.innerwidth; var height = window.innerheight; var xpos = math.floor(width/2); var ypos = math.floor(height/2); var zpos = 295; // define other variables var audiocontext = window.audiocontext || window.webkitaudiocontext; var audioctx = new audiocontext(); var panner = audioctx.createpanner(); panner.panningmodel = 'hrtf'; panner.distancemodel = 'inverse'; panner.refdis...
AudioListener.forwardZ - Web APIs
// set up listener and panner position in
formation var width = window.innerwidth; var height = window.innerheight; var xpos = math.floor(width/2); var ypos = math.floor(height/2); var zpos = 295; // define other variables var audiocontext = window.audiocontext || window.webkitaudiocontext; var audioctx = new audiocontext(); var panner = audioctx.createpanner(); panner.panningmodel = 'hrtf'; panner.distancemodel = 'inverse'; panner.refdis...
AudioListener.positionX - Web APIs
// set up listener and panner position in
formation var width = window.innerwidth; var height = window.innerheight; var xpos = math.floor(width/2); var ypos = math.floor(height/2); var zpos = 295; // define other variables var audiocontext = window.audiocontext || window.webkitaudiocontext; var audioctx = new audiocontext(); var panner = audioctx.createpanner(); panner.panningmodel = 'hrtf'; panner.distancemodel = 'inverse'; panner.refdis...
AudioListener.positionY - Web APIs
// set up listener and panner position in
formation var width = window.innerwidth; var height = window.innerheight; var xpos = math.floor(width/2); var ypos = math.floor(height/2); var zpos = 295; // define other variables var audiocontext = window.audiocontext || window.webkitaudiocontext; var audioctx = new audiocontext(); var panner = audioctx.createpanner(); panner.panningmodel = 'hrtf'; panner.distancemodel = 'inverse'; panner.refdis...
AudioListener.positionZ - Web APIs
// set up listener and panner position in
formation var width = window.innerwidth; var height = window.innerheight; var xpos = math.floor(width/2); var ypos = math.floor(height/2); var zpos = 295; // define other variables var audiocontext = window.audiocontext || window.webkitaudiocontext; var audioctx = new audiocontext(); var panner = audioctx.createpanner(); panner.panningmodel = 'hrtf'; panner.distancemodel = 'inverse'; panner.refdis...
AudioListener.setOrientation() - Web APIs
// set up listener and panner position in
formation var width = window.innerwidth; var height = window.innerheight; var xpos = math.floor(width/2); var ypos = math.floor(height/2); var zpos = 295; // define other variables var audiocontext = window.audiocontext || window.webkitaudiocontext; var audioctx = new audiocontext(); var panner = audioctx.createpanner(); panner.panningmodel = 'hrtf'; panner.distancemodel = 'inverse'; panner.refdis...
AudioListener.setPosition() - Web APIs
// set up listener and panner position in
formation var width = window.innerwidth; var height = window.innerheight; var xpos = math.floor(width/2); var ypos = math.floor(height/2); var zpos = 295; // define other variables var audiocontext = window.audiocontext || window.webkitaudiocontext; var audioctx = new audiocontext(); var panner = audioctx.createpanner(); panner.panningmodel = 'hrtf'; panner.distancemodel = 'inverse'; panner.refdis...
AudioListener.speedOfSound - Web APIs
// set up listener and panner position in
formation var width = window.innerwidth; var height = window.innerheight; var xpos = math.floor(width/2); var ypos = math.floor(height/2); var zpos = 295; // define other variables var audiocontext = window.audiocontext || window.webkitaudiocontext; var audioctx = new audiocontext(); var panner = audioctx.createpanner(); panner.panningmodel = 'hrtf'; panner.distancemodel = 'inverse'; panner.refdis...
AudioListener.upX - Web APIs
// set up listener and panner position in
formation var width = window.innerwidth; var height = window.innerheight; var xpos = math.floor(width/2); var ypos = math.floor(height/2); var zpos = 295; // define other variables var audiocontext = window.audiocontext || window.webkitaudiocontext; var audioctx = new audiocontext(); var panner = audioctx.createpanner(); panner.panningmodel = 'hrtf'; panner.distancemodel = 'inverse'; panner.refdis...
AudioListener.upY - Web APIs
// set up listener and panner position in
formation var width = window.innerwidth; var height = window.innerheight; var xpos = math.floor(width/2); var ypos = math.floor(height/2); var zpos = 295; // define other variables var audiocontext = window.audiocontext || window.webkitaudiocontext; var audioctx = new audiocontext(); var panner = audioctx.createpanner(); panner.panningmodel = 'hrtf'; panner.distancemodel = 'inverse'; panner.refdis...
AudioListener.upZ - Web APIs
// set up listener and panner position in
formation var width = window.innerwidth; var height = window.innerheight; var xpos = math.floor(width/2); var ypos = math.floor(height/2); var zpos = 295; // define other variables var audiocontext = window.audiocontext || window.webkitaudiocontext; var audioctx = new audiocontext(); var panner = audioctx.createpanner(); panner.panningmodel = 'hrtf'; panner.distancemodel = 'inverse'; panner.refdis...
Crypto.subtle - Web APIs
the crypto.subtle read-only property returns a subtlecrypto which can then be used to per
form low-level cryptographic operations.
DOMConfiguration - Web APIs
pre-defined parameters: "canonical-
form", "cdata-sections", "check-character-normalization", "comments", "datatype-normalization", "element-content-whitespace", "entities", "error-handler", "infoset", "namespaces", "namespace-declarations", "normalize-characters","schema-location", "schema-type", "split-cdata-sections", "validate", "validate-if-schema", "well-
formed" properties domconfiguration.parameternames read only is a domstringlist methods domconfiguration.cansetparameter() returns a boolean domconfiguration.getparameter() returns a domuserdata domconfiguration.setparameter() sets a parameter specification http://www.w3.org/tr/dom-level-3-cor...mconfiguration ...
DOMException - Web APIs
notallowederror the request is not allowed by the user agent or the plat
form in the current context, possibly because the user denied permission (no legacy code value and constant name).
DOMMatrixReadOnly.flipX() - Web APIs
const flipped = document.getelementbyid('flipped'); const matrix = new dommatrixreadonly(); const flippedmatrix = matrix.flipx(); flipped.setattribute('trans
form', flippedmatrix.tostring()); screenshotlive sample specifications specification status comment geometry interfaces module level 1the definition of 'dommatrixreadonly.flipx()' in that specification.
DOMParser - Web APIs
you can per
form the opposite operation—converting a dom tree into xml or html source—using the xmlserializer interface.
DOMPoint.x - Web APIs
in general, positive values x mean to the right, and negative values of x means to the left, barring any trans
forms that may have altered the orientation of the axes.
DOMPoint.y - Web APIs
unless trans
forms have been applied to alter the orientation, the value of y increases downward and decreases upward.
DOMPoint.z - Web APIs
unless trans
forms have changed the orientation, a z of 0 is the plane of the screen, with positive values extending outward toward the user from the screen, and negative values receding into the distance behind the screen.
DOMPointInit.x - Web APIs
in general, positive values x mean to the right, and negative values of x means to the left, assuming that trans
forms have not altered the orientation of the axes.
DOMPointReadOnly.x - Web APIs
in general, positive values x mean to the right, and negative values of x means to the left, assuming no trans
forms have resulted in a reversal.
DOMPointReadOnly.y - Web APIs
in general, positive values of y mean downward, and negative values of y mean upward, assuming no trans
forms have resulted in a reversal.
EffectTiming.direction - Web APIs
examples in the forgotten key example, alice waves her arm up and down by passing her an alternate value for her direction property: // get alice's arm, and wave it up and down document.getelementbyid("alice_arm").animate([ { trans
form: 'rotate(10deg)' }, { trans
form: 'rotate(-40deg)' } ], { easing: 'steps(2, end)', iterations: infinity, direction: 'alternate', duration: 600 }); specifications specification status comment web animationsthe definition of 'direction' in that specification.
EffectTiming.easing - Web APIs
examples in the red queen's race example, we animate alice and the red queen by passing an easing of steps(7, end) to animate(): // define the key frames var spriteframes = [ { trans
form: 'translatey(0)' }, { trans
form: 'translatey(-100%)' } ]; // get the element that represents alice and the red queen var redqueen_alice_sprite = document.getelementbyid('red-queen_and_alice_sprite'); // animate alice and the red queen using steps() var redqueen_alice = redqueen_alice_sprite.animate( spriteframes, { easing: 'steps(7, end)', direction: "reverse", duration: 600, playb...
EffectTiming.iterationStart - Web APIs
usually you'll use a value between 0.0 and 1.0 to indicate an offset into the first run of the animation at which to begin the animation per
formance, but any positive, non-infinite value is allowed.
EffectTiming.iterations - Web APIs
examples in the forgotten key example, alice waves her arm up and down the entire time the page is open by passing infinity as the value for her iterations property: // get alice's arm, and wave it up and down document.getelementbyid("alice_arm").animate([ { trans
form: 'rotate(10deg)' }, { trans
form: 'rotate(-40deg)' } ], { easing: 'steps(2, end)', iterations: infinity, direction: 'alternate', duration: 600 }); specifications specification status comment web animationsthe definition of 'iterations' in that specification.
Element: DOMMouseScroll event - Web APIs
note: if the plat
form's native mouse wheel events only provide scroll distance by pixels, or if the speed can be customized by the user, the value is computed using the line height of the nearest scrollable ancestor element of the event's target.
Element: MozMousePixelScroll event - Web APIs
if the plat
form's native mouse wheel events indicate the scroll distance in terms of lines or pages, the value of detail is computed using that value and the line height or page width/height of the nearest ancestor scrollable element that contains the target element.
Element: copy event - Web APIs
a handler for this event can modify the clipboard contents by calling setdata(
format, data) on the event's clipboardevent.clipboarddata property, and cancelling the event's default action using event.preventdefault().
Element: cut event - Web APIs
a handler for this event can modify the clipboard contents by calling setdata(
format, data) on the event's clipboardevent.clipboarddata property, and cancelling the default action using event.preventdefault().
Element: dblclick event - Web APIs
javascript const card = document.queryselector('aside'); card.addeventlistener('dblclick', function (e) { card.classlist.toggle('large'); }); html <aside> <h3>my card</h3> <p>double click to resize this object.</p> </aside> css aside { background: #fe9; border-radius: 1em; display: inline-block; padding: 1em; trans
form: scale(.9); trans
form-origin: 0 0; transition: trans
form .6s; } .large { trans
form: scale(1.3); } result specifications specification status ui eventsthe definition of 'dblclick' in that specification.
Element: focusin event - Web APIs
bubbles yes cancelable no interface focusevent event handler property onfocusin sync / async sync composed yes examples live example html <
form id="
form"> <input type="text" placeholder="text input"> <input type="password" placeholder="password"> </
form> javascript const
form = document.getelementbyid('
form');
form.addeventlistener('focusin', (event) => { event.target.style.background = 'pink'; });
form.addeventlistener('focusout', (event) => { event.target.style.background = ''; }); result specifications specif...
Element: focusout event - Web APIs
bubbles yes cancelable no interface focusevent event handler property onfocusout sync / async sync composed yes examples live example html <
form id="
form"> <input type="text" placeholder="text input"> <input type="password" placeholder="password"> </
form> javascript const
form = document.getelementbyid('
form');
form.addeventlistener('focusin', (event) => { event.target.style.background = 'pink'; });
form.addeventlistener('focusout', (event) => { event.target.style.background = ''; }); result specifications specif...
Element.getClientRects() - Web APIs
when called on svg elements other than an outer-<svg>, the "viewport" that the resulting rectangles are relative to is the viewport that the element's outer-<svg> establishes (and to be clear, the rectangles are also trans
formed by the outer-<svg>'s viewbox trans
form, if any).
Element.insertAdjacentText() - Web APIs
you can enter some text into the
form element, then press the insert before and insert after buttons to insert it before or after the existing paragraph text using insertadjacenttext().
Element: paste event - Web APIs
to override the default behavior (for example to insert some different data or a trans
formation of the clipboard contents) an event handler must cancel the default action using event.preventdefault(), and then insert its desired data manually.
Element.releasePointerCapture() - Web APIs
/div> css div { width: 140px; height: 50px; display: flex; align-items: center; justify-content: center; background: #fbe; } javascript function beginsliding(e) { slider.onpointermove = slide; slider.setpointercapture(e.pointerid); } function stopsliding(e) { slider.onpointermove = null; slider.releasepointercapture(e.pointerid); } function slide(e) { slider.style.trans
form = `translate(${e.clientx - 70}px)`; } const slider = document.getelementbyid('slider'); slider.onpointerdown = beginsliding; slider.onpointerup = stopsliding; result specifications specification status comment pointer events – level 2the definition of 'releasepointercapture' in that specification.
Element.setPointerCapture() - Web APIs
/div> css div { width: 140px; height: 50px; display: flex; align-items: center; justify-content: center; background: #fbe; } javascript function beginsliding(e) { slider.onpointermove = slide; slider.setpointercapture(e.pointerid); } function stopsliding(e) { slider.onpointermove = null; slider.releasepointercapture(e.pointerid); } function slide(e) { slider.style.trans
form = `translate(${e.clientx - 70}px)`; } const slider = document.getelementbyid('slider'); slider.onpointerdown = beginsliding; slider.onpointerup = stopsliding; result specifications specification status comment pointer events – level 2the definition of 'setpointercapture' in that specification.
Element.slot - Web APIs
a slot is a placeholder inside a web component that users can fill with their own markup (see using templates and slots for more in
formation).
Element: wheel event - Web APIs
cale me with your mouse wheel.</div> body { min-height: 100vh; margin: 0; display: flex; align-items: center; justify-content: center; } div { width: 105px; height: 105px; background: #cdf; padding: 5px; } function zoom(event) { event.preventdefault(); scale += event.deltay * -0.01; // restrict scale scale = math.min(math.max(.125, scale), 4); // apply scale trans
form el.style.trans
form = `scale(${scale})`; } let scale = 1; const el = document.queryselector('div'); el.onwheel = zoom; addeventlistener equivalent the event handler can also be set up using the addeventlistener() method: el.addeventlistener('wheel', zoom); specifications specification status comment ui eventsthe definition of 'wheel' in that specification.
Element - Web APIs
languages outside the realm of the web plat
form, like xul through the xulelement interface, also implement element.
ElementCSSInlineStyle.style - Web APIs
examples // set multiple styles in a single statement elt.style.csstext = "color: blue; border: 1px solid black"; // or elt.setattribute("style", "color:red; border: 1px solid blue;"); // set specific style while leaving other inline style values untouched elt.style.color = "blue"; getting style in
formation the style property is not useful for completely learning about the styles applied on the element, since it represents only the css declarations set in the element's inline style attribute, not those that come from style rules elsewhere, such as style rules in the <head> section, or external style sheets.
ErrorEvent - Web APIs
the errorevent interface represents events providing in
formation related to errors in scripts or in files.
GlobalEventHandlers.ontransitioncancel - Web APIs
.box { margin-left: 70px; margin-top: 30px; border-style: solid; border-width: 1px; display: block; width: 100px; height: 100px; background-color: #0000ff; color: #ffffff; padding: 20px; font: bold 1.6em "helvetica", "arial", sans-serif; -webkit-transition: width 2s, height 2s, background-color 2s, -webkit-trans
form 2s, color 2s; transition: width 2s, height 2s, background-color 2s, trans
form 2s, color 2s; } .box:hover { background-color: #ffcccc; color: #000000; width: 200px; height: 200px; -webkit-trans
form: rotate(180deg); trans
form: rotate(180deg); } javascript next, we need to establish our event handlers to change the text content of the box when the transition begins and ends.
GlobalEventHandlers.ontransitionend - Web APIs
.box { margin-left: 70px; margin-top: 30px; border-style: solid; border-width: 1px; display: block; width: 100px; height: 100px; background-color: #0000ff; color: #ffffff; padding: 20px; font: bold 1.6em "helvetica", "arial", sans-serif; transition: width 2s, height 2s, background-color 2s, trans
form 2s, color 2s; } .box:hover { background-color: #ffcccc; color: #000000; width: 200px; height: 200px; trans
form: rotate(180deg); } javascript next, we need to establish our event handlers to change the text content of the box when the transition begins and ends.
GlobalEventHandlers.onwheel - Web APIs
html <div>scale me with your mouse wheel.</div> css body { min-height: 100vh; margin: 0; display: flex; align-items: center; justify-content: center; } div { width: 80px; height: 80px; background: #cdf; padding: 5px; transition: trans
form .3s; } javascript function zoom(event) { event.preventdefault(); if (event.deltay < 0) { // zoom in scale *= event.deltay * -2; } else { // zoom out scale /= event.deltay * 2; } // restrict scale scale = math.min(math.max(.125, scale), 4); // apply scale trans
form el.style.trans
form = `scale(${scale})`; } let scale = 1; const el = document.queryselector('di...
GlobalEventHandlers - Web APIs
globaleventhandlers.on
formdata is an eventhandler for processing
formdata events, fired after the entry list representing the
form's data is constructed.
HTMLAudioElement - Web APIs
mozcurrentsampleoffset() returns the number of samples
form the beginning of the stream that have been written so far into the audio stream created by calling mozwriteaudio().
HTMLBaseFontElement - Web APIs
htmlbasefontelement.color is a domstring representing the text color using either a named color or a color specified in the hexadecimal #rrggbb
format.
HTMLCollection - Web APIs
for example, assuming there is one <
form> element in the document and its id is my
form: var elem1, elem2; // document.
forms is an htmlcollection elem1 = document.
forms[0]; elem2 = document.
forms.item(0); alert(elem1 === elem2); // shows: "true" elem1 = document.
forms.my
form; elem2 = document.
forms.nameditem("my
form"); alert(elem1 === elem2); // shows: "true" elem1 = document.
forms["named.item.with.periods"]; specifications ...
HTMLDataElement - Web APIs
htmldataelement.value is a domstring reflecting the value html attribute, containing a machine-readable
form of the element's value.
HTMLElement: animationcancel event - Web APIs
n class="activate" type="button">activate animation</button> <div class="event-log"></div> </div> css .container { height: 3rem; } .event-log { width: 25rem; height: 2rem; border: 1px solid black; margin: 0.2rem; padding: 0.2rem; } .animation.active { animation-duration: 2s; animation-name: slidein; animation-iteration-count: 2; } @keyframes slidein { from { trans
form: translatex(100%) scalex(3); } to { trans
form: translatex(0) scalex(1); } } js const animation = document.queryselector('p.animation'); const animationeventlog = document.queryselector('.animation-example>.event-log'); const applyanimation = document.queryselector('.animation-example>button.activate'); let iterationcount = 0; animation.addeventlistener('animationstart', () => { an...
HTMLElement: animationiteration event - Web APIs
n class="activate" type="button">activate animation</button> <div class="event-log"></div> </div> css .container { height: 3rem; } .event-log { width: 25rem; height: 2rem; border: 1px solid black; margin: 0.2rem; padding: 0.2rem; } .animation.active { animation-duration: 2s; animation-name: slidein; animation-iteration-count: 2; } @keyframes slidein { from { trans
form: translatex(100%) scalex(3); } to { trans
form: translatex(0) scalex(1); } } js const animation = document.queryselector('p.animation'); const animationeventlog = document.queryselector('.animation-example>.event-log'); const applyanimation = document.queryselector('.animation-example>button.activate'); let iterationcount = 0; animation.addeventlistener('animationstart', () => { an...
HTMLElement: animationstart event - Web APIs
n class="activate" type="button">activate animation</button> <div class="event-log"></div> </div> css .container { height: 3rem; } .event-log { width: 25rem; height: 2rem; border: 1px solid black; margin: 0.2rem; padding: 0.2rem; } .animation.active { animation-duration: 2s; animation-name: slidein; animation-iteration-count: 2; } @keyframes slidein { from { trans
form: translatex(100%) scalex(3); } to { trans
form: translatex(0) scalex(1); } } js const animation = document.queryselector('p.animation'); const animationeventlog = document.queryselector('.animation-example>.event-log'); const applyanimation = document.queryselector('.animation-example>button.activate'); let iterationcount = 0; animation.addeventlistener('animationstart', () => { an...
HTMLElement.click() - Web APIs
syntax element.click() example simulate a mouse-click when moving the mouse pointer over a checkbox: html <
form> <input type="checkbox" id="mycheck" onmouseover="myfunction()" onclick="alert('click event occured')"> </
form> javascript // on mouse-over, execute myfunction function myfunction() { document.getelementbyid("mycheck").click(); } specification specification status comment html living standard living standard document object model (dom) level 2 ...
HTMLElement.dir - Web APIs
an image can have its dir property set to "rtl" in which case the html attributes title and alt will be
formatted and defined as "rtl".
HTMLElement.innerText - Web APIs
html <h3>source element:</h3> <p id="source"> <style>#source { color: red; } #text { text-trans
form: uppercase; }</style> <span id=text>take a look at<br>how this text<br>is interpreted below.</span> <span style="display:none">hidden text</span> </p> <h3>result of textcontent:</h3> <textarea id="textcontentoutput" rows="6" cols="30" readonly>...</textarea> <h3>result of innertext:</h3> <textarea id="innertextoutput" rows="6" cols="30" readonly>...</textarea> javascript const source =...
HTMLElement.onpaste - Web APIs
note that there is currently no dom-only way to obtain the text being pasted; you'll have to use an nsiclipboard to get that in
formation.
HTMLElement: pointermove event - Web APIs
bubbles yes cancelable yes interface pointerevent event handler property onpointermove usage notes the event, which is of type pointerevent, provides all the in
formation you need to know about the user's interaction with the pointing device, including the position, movement distance, button states, and much more.
HTMLElement: transitionend event - Web APIs
lector('.transition'); transition.ontransitionend = () => { console.log('transition ended'); }; live example in the following example, we have a simple <div> element, styled with a transition that includes a delay: <div class="transition">hover over me</div> <div class="message"></div> .transition { width: 100px; height: 100px; background: rgba(255,0,0,1); transition-property: trans
form background; transition-duration: 2s; transition-delay: 1s; } .transition:hover { trans
form: rotate(90deg); background: rgba(255,0,0,0); } to this, we'll add some javascript to indicate that the transitionstart, transitionrun, transitioncancel and transitionend events fire.
HTMLElement: transitionrun event - Web APIs
nsition started running, and will start transitioning when the transition delay has expired'); }; live example in the following example, we have a simple <div> element, styled with a transition that includes a delay: <div class="transition">hover over me</div> <div class="message"></div> .transition { width: 100px; height: 100px; background: rgba(255,0,0,1); transition-property: trans
form, background; transition-duration: 2s; transition-delay: 1s; } .transition:hover { trans
form: rotate(90deg); background: rgba(255,0,0,0); } to this, we'll add some javascript to indicate where the transitionstart and transitionrun events fire.
HTMLElement: transitionstart event - Web APIs
addeventlistener(): element.ontransitionrun = () => { console.log('started transitioning'); }; live example in the following example, we have a simple <div> element, styled with a transition that includes a delay: <div class="transition">hover over me</div> <div class="message"></div> .transition { width: 100px; height: 100px; background: rgba(255,0,0,1); transition-property: trans
form, background; transition-duration: 2s; transition-delay: 1s; } .transition:hover { trans
form: rotate(90deg); background: rgba(255,0,0,0); } to this, we'll add some javascript to indicate where the transitionstart and transitionrun events fire.
HTMLElement - Web APIs
event handlers most event handler properties, of the
form onxyz, are defined on the documentandelementeventhandlers, globaleventhandlers or toucheventhandlers interfaces and implemented by htmlelement.
HTMLFontElement.face - Web APIs
the
format of the string must follow one of the following html microsyntax: microsyntax description examples list of one or more valid font family names a list of font names, that have to be present on the local system courier,verdana syntax facestring = fontobj.face; fontobj.face = facestring; examples // assumes there is <font id="f"> element in the html va...
HTMLFontElement.size - Web APIs
the
format of the string must follow one of the following html microsyntaxes: microsyntax description examples valid size number string integer number in the range of 1-7 6 relative size string +x or -x, where x is the number relative to the value of the size attribute of the <basefont> element (the result should be in the same range of 1-7) +2 -1 syntax sizestring = fontobj.size; fontobj.size = sizestring; examples // assumes there is <font id="f"> element in the ht...
PannerNode.refDistance - Web APIs
/ this tone should decay immediately and fairly quickly scheduletesttone(1, context.currenttime); // this tone should decay slower and later than the previous one scheduletesttone(4, context.currenttime + note_length); // this tone should decay only slightly, and only start decaying fairly late scheduletesttone(7, context.currenttime + note_length * 2); after running this code, the resulting wave
forms should look something like this: specifications specification status comment web audio apithe definition of 'refdistance' in that specification.
PannerNode.rolloffFactor - Web APIs
tart(starttime); osc.stop(starttime + note_length); }; // this tone should decay fairly quickly scheduletesttone(1, context.currenttime); // this tone should decay slower than the previous one scheduletesttone(0.5, context.currenttime + note_length); // this tone should decay only slightly scheduletesttone(0.1, context.currenttime + note_length * 2); after running this code, the resulting wave
forms should look something like this: specifications specification status comment web audio apithe definition of 'rollofffactor' in that specification.
PannerNode.setOrientation() - Web APIs
// set up listener and panner position in
formation var width = window.innerwidth; var height = window.innerheight; var xpos = math.floor(width/2); var ypos = math.floor(height/2); var zpos = 295; // define other variables var audiocontext = window.audiocontext || window.webkitaudiocontext; var audioctx = new audiocontext(); var panner = audioctx.createpanner(); panner.panningmodel = 'hrtf'; panner.distancemodel = 'inverse'; panner.refdis...
PannerNode.setPosition() - Web APIs
// set up listener and panner position in
formation var width = window.innerwidth; var height = window.innerheight; var xpos = math.floor(width/2); var ypos = math.floor(height/2); var zpos = 295; // define other variables var audiocontext = window.audiocontext || window.webkitaudiocontext; var audioctx = new audiocontext(); var panner = audioctx.createpanner(); panner.panningmodel = 'hrtf'; panner.distancemodel = 'inverse'; panner.refdis...
PannerNode - Web APIs
// set up listener and panner position in
formation var width = window.innerwidth; var height = window.innerheight; var xpos = math.floor(width/2); var ypos = math.floor(height/2); var zpos = 295; // define other variables var audiocontext = window.audiocontext || window.webkitaudiocontext; var audioctx = new audiocontext(); var panner = audioctx.createpanner(); panner.panningmodel = 'hrtf'; panner.distancemodel = 'inverse'; panner.refdis...
PayerErrors.email - Web APIs
rs = {}; // check payer details if (!validemail(response.payeremail)) { payererrors.email = "please make sure you enter a valid email address." } if (!validname(response.payername)) { payererrors.email = "please enter a valid name, using only <appropriate characters>." } if (!validphone(response.payerphone)) { payererrors.phone = "please enter a valid phone number in the
form ###-###-####." } // check everything else too...
PayerErrors.name - Web APIs
rs = {}; // check payer details if (!validemail(response.payeremail)) { payererrors.email = "please make sure you enter a valid email address." } if (!validname(response.payername)) { payererrors.email = "please enter a valid name, using only <appropriate characters>." } if (!validphone(response.payerphone)) { payererrors.phone = "please enter a valid phone number in the
form ###-###-####." } // check everything else too...
PayerErrors.phone - Web APIs
rs = {}; // check payer details if (!validemail(response.payeremail)) { payererrors.email = "please make sure you enter a valid email address." } if (!validname(response.payername)) { payererrors.email = "please enter a valid name, using only <appropriate characters>." } if (!validphone(response.payerphone)) { payererrors.phone = "please enter a valid phone number in the
form ###-###-####." } // check everything else too...
PayerErrors - Web APIs
for each field in the payment in
formation that fails validation, the payererrors object contains a string explaining the error.
PaymentMethodChangeEvent - Web APIs
methoddetails optional an object providing payment method-specific in
formation describing the changes made to the payment, or null if there is no additional in
formation available or required.
PaymentRequest.canMakePayment() - Web APIs
let's see if we can use basic card const supportsbasiccard = await new paymentrequest( [{ supportedmethods: "basic-card" }], details ).canmakepayment(); if (supportsbasiccard) { // show basic card support return; } // otherwise, make payments using html
form element } specifications specification status comment payment request apithe definition of 'canmakepayment()' in that specification.
PaymentRequest.prototype.id - Web APIs
const response = await request.show(); console.log(response.requestid === request.id); // and in serialized
form too const json = response.tojson(); console.log(json.requestid,response.requestid, request.id); syntax var id = paymentrequest.id value a domstring.
PaymentRequest: merchantvalidation event - Web APIs
this event: request.onmerchantvalidation = event => { event.complete(async () => { const merchantserverurl = window.location.origin + '/validate?url=' + encodeuricomponent(event.validationurl); // get validation data, and complete validation; return await fetch(merchantserverurl).then(response => response.text()); }); }; const response = await request.show(); for more in
formation, see merchant validation in payment processing concepts.
PaymentRequest.onmerchantvalidation - Web APIs
t object request looks like this: request.onmerchantvalidation = ev => { ev.complete(async () => { const merchantserverurl = window.location.origin + '/validation?url=' + encodeuricomponent(ev.validationurl); // get validation data, and complete validation; return await fetch(merchantserverurl).then(r => r.text()); }) }; const response = await request.show(); for more in
formation, see merchant validation in payment processing concepts.
PaymentRequest.onshippingaddresschange - Web APIs
to make sure an updated address is included when sending payment in
formation to the server, you should add event listeners for a paymentrequest object after instantiation, but before the call to show().
PaymentRequest.onshippingoptionchange - Web APIs
to make sure an updated option is included when sending payment in
formation to the server, you should add event listeners for a paymentrequest object after instantiation, but before the call to show().
PaymentRequest: shippingaddresschange event - Web APIs
bubbles no cancelable no interface paymentrequestupdateevent event handler property onshippingaddresschange usage notes depending on the browser, the shipping address in
formation may be redacted for privacy reasons.
PaymentRequest: shippingoptionchange event - Web APIs
for payment requests that request shipping in
formation, and for which shipping options are offered, the shippingoptionchange event is sent to the paymentrequest whenever the user chooses a shipping option from the list of available options.
PaymentResponse.requestId - Web APIs
the requestid read-only property of the paymentresponse interface rreturns the free-
form identifier supplied by the paymentresponse() constructor by details.id.
Pbkdf2Params - Web APIs
the general guidance here is to use as many iterations as possible, subject to keeping an acceptable level of per
formance for your application.
Permissions.query() - Web APIs
exceptions exception explanation typeerror retrieving the permissiondescriptor in
formation failed in some way, or the permission doesn't exist or is currently unsupported (e.g.
Permissions.revoke() - Web APIs
exceptions typeerror retrieving the permissiondescriptor in
formation failed in some way, or the permission doesn't exist or is currently unsupported (e.g.
RTCTrackEvent() - Web APIs
syntax trackevent = new rtctrackevent(eventinfo); parameters eventinfo an object based on the rtctrackeventinit dictionary, providing in
formation about the track which has been added to the rtcpeerconnection.
RTCTrackEventInit - Web APIs
the webrtc api's rtctrackeventinit dictionary is used to provide in
formation describing an rtctrackevent when instantiating a new track event using new rtctrackevent().
RadioNodeList.value - Web APIs
syntax value = radionodelist.value; radionodelist.value = string; example html <
form> <label><input type="radio" name="color" value="blue">blue</label> <label><input type="radio" name="color" value="red">red</label> </
form> javascript // get the
form const
form = document.
forms[0]; // get the
form's radio buttons const radios =
form.elements['color']; // choose the "red" option radios.value = 'red'; result specifications specification status comments ...
RadioNodeList - Web APIs
the radionodelist interface represents a collection of radio elements in a <
form> or a <fieldset> element.
Range - Web APIs
range.detach() releases the range from use to improve per
formance.
ReadableStream.pipeTo() - Web APIs
examples // fetch the original image fetch('png-logo.png') // retrieve its body as readablestream .then(response => response.body) .then(body => body.pipethrough(new pngtrans
formstream())) .then(rs => rs.pipeto(new finaldestinationstream())) specifications specification status comment streamsthe definition of 'pipeto()' in that specification.
ReadableStream - Web APIs
readablestream.pipethrough() provides a chainable way of piping the current stream through a trans
form stream or any other writable/readable pair.
Report - Web APIs
properties report.body read only the body of the report, which is a reportbody object containing the detailed report in
formation.
Request() - Web APIs
body: any body that you want to add to your request: this can be a blob, buffersource,
formdata, urlsearchparams, usvstring, or readablestream object.
Request.context - Web APIs
note: you can find a full list of the different available contexts including associated context frame types, csp directives, and plat
form feature examples in the fetch spec request context section.
Response() - Web APIs
this can be null (which is the default value), or one of: blob buffersource
formdata readablestream urlsearchparams usvstring init optional an options object containing any custom settings that you want to apply to the response, or an empty object (which is the default value).
SVGAElement - Web APIs
not _blank"); } } specifications specification status comment scalable vector graphics (svg) 2 candidate recommendation replaced inheritance from svgelement by svggraphicselement and removed the interface implementations of svgtests, svglangspace, svgexternalresourcesrequired, svgstylable, and svgtrans
formable by htmlhyperlinkelementutils scalable vector graphics (svg) 1.1 (second edition) recommendation initial definition ...
SVGAltGlyphElement.glyphRef - Web APIs
syntax string = myglyph.glyphref; myglyph.glyphref = string; value the return value is a glyph identifier, the value of which depends on the
format of the given font.
SVGAnimationElement - Web APIs
the svganimationelement interface is the base interface for all of the animation element interfaces: svganimateelement, svgsetelement, svganimatecolorelement, svganimatemotionelement and svganimatetrans
formelement.
SVGCircleElement - Web APIs
candidate recommendation replaced the inheritance from svgelement, svgtests, svglangspace, svgexternalresourcesrequired, svgstylable, and svgtrans
formable by svggeometryelement scalable vector graphics (svg) 1.1 (second edition)the definition of 'svgcircleelement' in that specification.
SVGClipPathElement - Web APIs
candidate recommendation removed the inheritance from svgtests, svglangspace, svgexternalresourcesrequired, svgstylable, svgtrans
formable, and svgunittypes scalable vector graphics (svg) 1.1 (second edition)the definition of 'svgclippathelement' in that specification.
SVGDefsElement - Web APIs
candidate recommendation replaced the inheritance from svgelementsvgtests, svglangspace, svgexternalresourcesrequired, svgstylable, and svgtrans
formable by svggraphicselement scalable vector graphics (svg) 1.1 (second edition)the definition of 'svgdefselement' in that specification.
SVGElement - Web APIs
these can also be defined in svg using attributes of the
form data-*, where * is the key name for the pair.
SVGForeignObjectElement - Web APIs
candidate recommendation replaced the inheritance from svgelement, svgtests, svglangspace, svgexternalresourcesrequired, svgstylable, and svgtrans
formable by svggraphicselement and svgurireference scalable vector graphics (svg) 1.1 (second edition)the definition of 'svgforeignobjectelement' in that specification.
SVGGElement - Web APIs
candidate recommendation changed the inheritance from svgelement to svggraphicselement and removed the implemented interfaces svgtests, svglangspace, svgexternalresourcesrequired, svgstylable, and svgtrans
formable.
SVGGradientElement - Web APIs
svggradientelement.gradienttrans
form read only returns an svganimatedtrans
formlist corresponding to attribute gradienttrans
form on the given element.
SVGGraphicsElement: copy event - Web APIs
a handler for this event can modify the clipboard contents by calling setdata(
format, data) on the event's clipboardevent.clipboarddata property, and cancelling the event's default action using event.preventdefault().
SVGGraphicsElement: cut event - Web APIs
a handler for this event can modify the clipboard contents by calling setdata(
format, data) on the event's clipboardevent.clipboarddata property, and cancelling the default action using event.preventdefault().
SVGGraphicsElement: paste event - Web APIs
to override the default behavior (for example to insert some different data or a trans
formation of the clipboard contents) an event handler must cancel the default action using event.preventdefault(), and then insert its desired data manually.
SVGImageElement - Web APIs
candidate recommendation changed the inheritance from svgelement to svggraphicselement, removed the implemented interfaces svgtests, svglangspace, svgexternalresourcesrequired, svgstylable, and svgtrans
formable and added the crossorigin property.
SVGLineElement - Web APIs
candidate recommendation changed the inheritance from svgelement to svggeometryelement and removed the implemented interfaces svgtests, svglangspace, svgexternalresourcesrequired, svgstylable, and svgtrans
formable.
SVGMaskElement - Web APIs
candidate recommendation removed the implemented interfaces svgtests, svglangspace, svgexternalresourcesrequired, svgstylable, and svgtrans
formable.
WebGLRenderingContext.disable() - Web APIs
when using a webgl 2 context, the following values are available additionally: constant description gl.rasterizer_discard deactivates that primitives are discarded immediately before the rasterization stage, but after the optional trans
form feedback stage.
WebGLRenderingContext.enable() - Web APIs
when using a webgl 2 context, the following values are available additionally: constant description gl.rasterizer_discard primitives are discarded immediately before the rasterization stage, but after the optional trans
form feedback stage.
WebGLRenderingContext.getContextAttributes() - Web APIs
examples given this <canvas> element <canvas id="canvas"></canvas> and given this webgl context var canvas = document.getelementbyid('canvas'); var gl = canvas.getcontext('webgl'); gl.getcontextattributes(); the getcontextattributes method returns an object that describes the attributes set on this context, for example: { alpha: true, antialias: true, depth: true, failifmajorper
formancecaveat: false, powerpreference: "default", premultipliedalpha: true, preservedrawingbuffer: false, stencil: false, desynchronized: false } the context attributes can be set when creating the context using the htmlcanvaselement.getcontext() method: canvas.getcontext('webgl', { antialias: false, depth: false }); see getcontext() for more in
formati...
WebGLRenderingContext.isEnabled() - Web APIs
when using a webgl 2 context, the following values are available additionally: constant description gl.rasterizer_discard primitives are discarded immediately before the rasterization stage, but after the optional trans
form feedback stage.
WebGLRenderingContext.stencilFunc() - Web APIs
gl.enable(gl.stencil_test); gl.stencilfunc(gl.less, 0, 0b1110011); to get the current stencil function, reference value, or other stencil in
formation, query the following constants with getparameter().
WebGLRenderingContext.stencilFuncSeparate() - Web APIs
gl.enable(gl.stencil_test); gl.stencilfuncseparate(gl.front, gl.less, 0.2, 1110011); to get the current stencil function, reference value, or other stencil in
formation, query the following constants with getparameter().
WebGLRenderingContext.stencilOp() - Web APIs
gl.enable(gl.stencil_test); gl.stencilop(gl.incr, gl.decr, gl.invert); to get the current in
formation about stencil and depth pass or fail, query the following constants with getparameter().
WebGLRenderingContext.stencilOpSeparate() - Web APIs
gl.enable(gl.stencil_test); gl.stencilopseparate(gl.front, gl.incr, gl.decr, gl.invert); to get the current in
formation about stencil and depth pass or fail, query the following constants with getparameter().
WebGLRenderingContext.vertexAttrib[1234]f[v]() - Web APIs
for example, if you have a shader which has a color vertex attribute, but you want to draw everything in a single color, you can use vertexattrib to achieve that without creating a buffer filled with only one value or having to create a separate shader which uses a uni
form for the color.
WebGLRenderingContext.viewport() - Web APIs
the webglrenderingcontext.viewport() method of the webgl api sets the viewport, which specifies the affine trans
formation of x and y from normalized device coordinates to window coordinates.
Raining rectangles - Web APIs
timer = settimeout(drawanimation, 17); } function playerclick (evt) { // we need to trans
form the position of the click event from // window coordinates to relative position inside the canvas.
XRInputSourceArray.keys() - Web APIs
specifications specification status comment webxr device apithe definition of 'xrinputsourcearray' in that specification.1 working draft xrinputsourcearray interface [1] see iterator-like methods in in
formation contained in a webidl file for in
formation on how an iterable declaration in an interface definition causes entries(), foreach(), keys(), and values() methods to be exposed from objects that implement the interface.
XRInputSourceArray.values() - Web APIs
specifications specification status comment webxr device apithe definition of 'xrinputsourcearray' in that specification.1 working draft xrinputsourcearray interface [1] see iterator-like methods in in
formation contained in a webidl file for in
formation on how an iterable declaration in an interface definition causes entries(), foreach(), keys(), and values() methods to be exposed from objects that implement the interface.
XRInputSourceEvent() - Web APIs
xrsession.addeventlistener("select", event => { let targetraypose = event.frame.getpose(event.inputsource.targetrayspace, myrefspace); if (targetraypose) { let hit = myhittest(targetraypose.trans
form); if (hit) { /* handle the hit */ } } }); specifications specification status comment webxr device apithe definition of 'xrinputsourceevent' in that specification.
XRInputSourceEventInit.frame - Web APIs
the xrinputsourceeventinit dictionary's property frame specifies an xrframe providing in
formation about the timestamp at which the new input source event took place, as well as access to the xrframe method getpose() which can be used to map the coordinates of any xrreferencespace to the space in which the event took place.
XRPermissionDescriptor.mode - Web APIs
no specific features are specified during this query; see requiredfeatures and optionalfeatures for more in
formation on specifying features during a webxr permission check.
XRReferenceSpaceEvent() - Web APIs
trans
form an xrrigidtrans
form which maps the old coordinate system (from before the changes indicated by this event) to the new coordiante system.
XRSession.end() - Web APIs
return value a promise that resolves without a value after any plat
form-specific steps related to shutting down the session have completed.
XRSession: end event - Web APIs
bubbles no cancelable no interface xrsessionevent event handler xrsession.onend example to be in
formed when a webxr session comes to an end, you can add a handler to your xrsession instance using addeventlistener(), like this: xrsession.addeventlistener("end", function(event) { /* the session has shut down */ }); alternatively, you can use the xrsession.onend event handler property to establish a handler for the end event: xrsession.onend = function(event) { /* the session has shut down */ } specifications specification sta...
XRSession.renderState - Web APIs
the in
formation provided covers the minimum and maximum distance at which to render objects, the vertical field of view to use when rendering the in the inline session mode, and the xrwebgllayer to render into for inline composition.
XRSession.updateRenderState() - Web APIs
syntax xrsession.updaterenderstate(newstate) parameters newstate an object con
forming to the xrrenderstateinit dictionary specifying the properties of the session's renderstate to update before rendering the next frame.
ARIA: Main role - Accessibility
by classifying and labeling sections of a page, structural in
formation conveyed visually through layout can be represented programmatically.
ARIA: Region role - Accessibility
by classifying and labeling sections of a page, structural in
formation conveyed visually through layout is represented programmatically.
ARIA: img role - Accessibility
these elements could be images, code snippets, text, emojis, or other content that can be combined to deliver in
formation in a visual manner.
ARIA: Suggestion role - Accessibility
</p> we could even provide an in
formation box saying who made the suggestion and when, and associate it with the suggestion via aria-details: <p>freida’s pet is a <span role="suggestion" aria-details="comment-source"> <span role="deletion">black cat called luna</span> <span role="insertion">purple tyrannosaurus rex called tiny</span> </span>.
ARIA: tab role - Accessibility
some assistive technology will provide a count of the number of tab role elements inside a tablist, and in
form users of which tab they currently have targeted.
overview - Accessibility
menu control slider from the paciello group blog: aria slider, part one, part two, part threet (example) creating an accessible, internationalized dojo rating widget tabs enhancing tabview accessibility with wai-aria roles and states, from the yui blog enhancing the jquery ui tabs accordingly to wcag 2.0 and aria tab panel example here on codetalks lightbox wcag 2.0 and aria-con
formant lightbox application http://majx-js.digissime.net/js/popin/
form validation wcag 2.0 and aria-con
formant live
form validation tables german tutorial on creating an accessible
form simple grid example at codetalks date picker grid at codetalks wcag 2.0 and aria-con
formant sortable tables ...
HTML To MSAA - Accessibility
ystem_ haspopup state_system_ focusable n/a "open"/"close" depending on state event_object_ valuechange when selected option is changed table role_system_ table from @summary attribute n/a described_by (0x100e) points to caption element n/a n/a td, th role_system_ cell n/a n/a n/a n/a n/a n/a thead role_system_ columnheader n/a n/a n/a n/a n/a n/a abbr, acronym, blockquote,
form, frame, h1-h6, iframe bstr role n/a n/a n/a n/a n/a n/a ...
Custom properties (--*): CSS variables - CSS: Cascading Style Sheets
formal syntax <declaration-value> example html <p id="firstparagraph">this paragraph should have a blue background and yellow text.</p> <p id="secondparagraph">this paragraph should have a yellow background and blue text.</p> <div id="container"> <p id="thirdparagraph">this paragraph should have a green background and yellow text.</p> </div> css :root { --first-color: #488cff; --second-col...
-moz-context-properties - CSS: Cascading Style Sheets
formal definition initial valuenoneapplies toany element that can have an image applied to it, for example as a background-image, border-image, or list-style-image.inheritedyescomputed valueas specifiedanimation typediscrete
formal syntax none | [ fill | fill-opacity | stroke | stroke-opacity ]# examples exposing fill and stroke to an svg image in this example we have a simple svg embedded using...
-moz-float-edge - CSS: Cascading Style Sheets
formal definition initial valuecontent-boxapplies toall elementsinheritednocomputed valueas specifiedanimation typediscrete
formal syntax border-box | content-box | margin-box | padding-box examples html <div class="box"> <p>lorem ipsum dolor sit amet, consectetur adipiscing elit.</p> </div> css .box { display: block; height: 5px; margin: 0.5em auto 0.5em auto; color: gray; -moz-f...
-moz-force-broken-image-icon - CSS: Cascading Style Sheets
formal definition initial value0applies toimagesinheritednocomputed valueas specifiedanimation typediscrete
formal syntax <integer> examples html <img src='/broken/image/link.png' alt='broken image link'> css img { -moz-force-broken-image-icon: 1; height: 100px; width: 100px; } result screenshotlive sample note: unless the image has a specified height and width the broken image icon w...
-moz-orient - CSS: Cascading Style Sheets
formal definition initial valueinlineapplies toany element; it has an effect on progress and meter, but not on <input type="range"> or other elementsinheritednocomputed valueas specifiedanimation typediscrete
formal syntax inline | block | horizontal | vertical examples html <p> the following progress meter is horizontal (the default): </p> <progress max="100" value="75"></progress> <p> th...
-moz-outline-radius-bottomleft - CSS: Cascading Style Sheets
formal definition initial value0applies toall elementsinheritednopercentagesrefer to the corresponding dimension of the border boxcomputed valueas specifiedanimation typea length, percentage or calc();
formal syntax <outline-radius>where <outline-radius> = <length> | <percentage> examples rounding a outline since this is a firefox-only property, this example will not display the desired effect i...
-moz-outline-radius-bottomright - CSS: Cascading Style Sheets
formal definition initial value0applies toall elementsinheritednopercentagesrefer to the corresponding dimension of the border boxcomputed valueas specifiedanimation typea length, percentage or calc();
formal syntax <outline-radius>where <outline-radius> = <length> | <percentage> examples html <p>look at this paragraph's bottom-right corner.</p> css p { margin: 5px; border: solid cyan; o...
-moz-outline-radius-topleft - CSS: Cascading Style Sheets
formal definition initial value0applies toall elementsinheritednopercentagesrefer to the corresponding dimension of the border boxcomputed valueas specifiedanimation typea length, percentage or calc();
formal syntax <outline-radius>where <outline-radius> = <length> | <percentage> examples the example below will not display the desired effect if you are viewing this in a browser other than firefox...
-moz-outline-radius-topright - CSS: Cascading Style Sheets
formal definition initial value0applies toall elementsinheritednopercentagesrefer to the corresponding dimension of the border boxcomputed valueas specifiedanimation typea length, percentage or calc();
formal syntax <outline-radius>where <outline-radius> = <length> | <percentage> examples html <p>look at this paragraph's top-right corner.</p> css p { margin: 5px; border: solid cyan; outl...
-moz-user-focus - CSS: Cascading Style Sheets
formal definition initial valuenoneapplies toall elementsinheritednocomputed valueas specifiedanimation typediscrete
formal syntax ignore | normal | select-after | select-before | select-menu | select-same | select-all | none examples html <input class="ignored" value="the user cannot focus on this element."> css .ignored { -moz-user-focus: ignore; } specifications not part of any standar...
-moz-user-input - CSS: Cascading Style Sheets
formal definition initial valueautoapplies toall elementsinheritedyescomputed valueas specifiedanimation typediscrete
formal syntax auto | none | enabled | disabled examples disabling user input for an element input.example { /* the user will be able to select the text, but not change it.
-webkit-line-clamp - CSS: Cascading Style Sheets
formal definition initial valuenoneapplies toall elementsinheritednocomputed valueas specifiedanimation typeby computed value type
formal syntax none | <integer> examples truncating a paragraph html <p> in this example the <code>-webkit-line-clamp</code> property is set to <code>3</code>, which means the text is clamped after three lines.
-webkit-mask-attachment - CSS: Cascading Style Sheets
formal definition initial valuescrollapplies toall elementsinheritednocomputed valueas specifiedanimation typediscrete
formal syntax <attachment>#where <attachment> = scroll | fixed | local examples fixing a mask image to the viewport body { -webkit-mask-image: url('images/mask.png'); -webkit-mask-attachment: fixed; } specifications not part of any standard.
-webkit-mask-composite - CSS: Cascading Style Sheets
formal definition initial valuesource-overapplies toall elementsinheritednocomputed valueas specifiedanimation typediscrete
formal syntax <composite-style>#where <composite-style> = clear | copy | source-over | source-in | source-out | source-atop | destination-over | destination-in | destination-out | destination-atop | xor examples compositing with xor .example { -webkit-mask-image: url(mask...
-webkit-mask-position-x - CSS: Cascading Style Sheets
formal definition initial value0%applies toall elementsinheritednopercentagesrefer to the size of the box itselfcomputed valuefor <length> the absolute value, otherwise a percentageanimation typediscrete
formal syntax [ <length-percentage> | left | center | right ]#where <length-percentage> = <length> | <percentage> examples horizontally positioning a mask image .exampleone { -webkit-mask-imag...
-webkit-mask-position-y - CSS: Cascading Style Sheets
formal definition initial value0%applies toall elementsinheritednopercentagesrefer to the size of the box itselfcomputed valuefor <length> the absolute value, otherwise a percentageanimation typediscrete
formal syntax [ <length-percentage> | top | center | bottom ]#where <length-percentage> = <length> | <percentage> examples vertically positioning a mask image .exampleone { -webkit-mask-image:...
-webkit-mask-repeat-x - CSS: Cascading Style Sheets
formal definition initial valuerepeatapplies toall elementsinheritednocomputed valueas specifiedanimation typediscrete
formal syntax repeat | no-repeat | space | round examples using a repeating or non-repeating mask image .exampleone { -webkit-mask-image: url('mask.png'); -webkit-mask-repeat-x: repeat; } .exampletwo { -webkit-mask-image: url('mask.png'); -webkit-mask-repeat-x: no-repea...
-webkit-mask-repeat-y - CSS: Cascading Style Sheets
formal definition initial valuerepeatapplies toall elementsinheritednocomputed valuefor <length> the absolute value, otherwise a percentageanimation typediscrete
formal syntax repeat | no-repeat | space | round examples using a repeating or non-repeating mask image .exampleone { -webkit-mask-image: url('mask.png'); -webkit-mask-repeat-y: repeat; } .exampletwo { -webkit-mask-image: url('ma...
-webkit-overflow-scrolling - CSS: Cascading Style Sheets
formal definition initial valueautoapplies toscrolling boxesinheritedyescomputed valueas specifiedanimation typediscrete
formal syntax auto | touch examples html <div class="scroll-touch"> <p> this paragraph has momentum scrolling </p> </div> <div class="scroll-auto"> <p> this paragraph does not.
-webkit-tap-highlight-color - CSS: Cascading Style Sheets
formal definition initial valueblackapplies toall elementsinheritednocomputed valueas specifiedanimation typediscrete
formal syntax <color>where <color> = <rgb()> | <rgba()> | <hsl()> | <hsla()> | <hex-color> | <named-color> | currentcolor | <deprecated-system-color>where <rgb()> = rgb( <percentage>{3} [ / <alpha-value> ]?
-webkit-text-fill-color - CSS: Cascading Style Sheets
formal definition initial valuecurrentcolorapplies toall elementsinheritedyescomputed valuecomputed coloranimation typea color
formal syntax <color>where <color> = <rgb()> | <rgba()> | <hsl()> | <hsla()> | <hex-color> | <named-color> | currentcolor | <deprecated-system-color>where <rgb()> = rgb( <percentage>{3} [ / <alpha-value> ]?
-webkit-text-stroke-color - CSS: Cascading Style Sheets
formal definition initial valuecurrentcolorapplies toall elementsinheritedyescomputed valuecomputed coloranimation typea color
formal syntax <color>where <color> = <rgb()> | <rgba()> | <hsl()> | <hsla()> | <hex-color> | <named-color> | currentcolor | <deprecated-system-color>where <rgb()> = rgb( <percentage>{3} [ / <alpha-value> ]?
-webkit-text-stroke-width - CSS: Cascading Style Sheets
formal definition initial value0applies toall elementsinheritedyescomputed valueabsolute <length>animation typediscrete
formal syntax <length> examples varying stroke widths css p { margin: 0; font-size: 4em; -webkit-text-stroke-color: red; } #thin { -webkit-text-stroke-width: thin; } #medium { -webkit-text-stroke-width: 3px; } #thick { -webkit-text-stroke-width: 1.5mm; } html ...
:-moz-focusring - CSS: Cascading Style Sheets
whether the user agent has focus ring drawing enabled can depend on operating system settings and other factors, so the precise behavior of this pseudo-class will vary from plat
form to plat
form.
::-webkit-file-upload-button - CSS: Cascading Style Sheets
syntax selector::-webkit-file-upload-button examples html <
form> <label for="fileupload">upload file</label><br> <input type="file" id="fileupload"> </
form> css input, label { display: block; } input[type=file]::-webkit-file-upload-button { border: 1px solid grey; background: #fffaaa; } below is the example for you to try.
::after (:after) - CSS: Cascading Style Sheets
/* add an arrow after links */ a::after { content: "→"; } note: the pseudo-elements generated by ::before and ::after are contained by the element's
formatting box, and thus don't apply to replaced elements such as <img>, or to <br> elements.
::cue-region - CSS: Cascading Style Sheets
yle font-variant font-weight line-height opacity outline outline-color outline-style outline-width ruby-position text-combine-upright text-decoration text-decoration-color text-decoration-line text-decoration-style text-decoration-thickness text-shadow visibility white-space specifications specification status comment webvtt: the web video text tracks
formatthe definition of 'the ::cue-region pseudo-element' in that specification.
::cue - CSS: Cascading Style Sheets
::cue { color: #fff; background-color: rgba(0, 0, 0, 0.6); } specifications specification status comment webvtt: the web video text tracks
formatthe definition of '::cue' in that specification.
::first-letter (:first-letter) - CSS: Cascading Style Sheets
-blend-mode all margin properties: margin, margin-top, margin-right, margin-bottom, margin-left all padding properties: padding, padding-top, padding-right, padding-bottom, padding-left all border properties: the shorthands border, border-style, border-color, border-width, border-radius, border-image, and the longhands properties the color property the text-decoration, text-shadow, text-trans
form, letter-spacing, word-spacing (when appropriate), line-height, text-decoration-color, text-decoration-line, text-decoration-style, box-shadow, float, vertical-align (only if float is none) css properties syntax /* css3 syntax */ ::first-letter /* css2 syntax */ :first-letter examples simple drop cap in this example we will use the ::first-letter pseudo-element to create a simple drop cap e...
::slotted() - CSS: Cascading Style Sheets
the ::slotted() css pseudo-element represents any element that has been placed into a slot inside an html template (see using templates and slots for more in
formation).
:dir() - CSS: Cascading Style Sheets
formal syntax :dir( ltr | rtl ) examples html <div dir="rtl"> <span>test1</span> <div dir="ltr">test2 <div dir="auto">עִבְרִית</div> </div> </div> css :dir(ltr) { background-color: yellow; } :dir(rtl) { background-color: powderblue; } result specifications specification status comment html living standardthe definition of ':dir(ltr)' in th...
:empty - CSS: Cascading Style Sheets
accessible names expose the interactive control to the accessibility tree, an api that communicates in
formation useful for assistive technologies.
:focus-visible - CSS: Cascading Style Sheets
tips for designing useful and usable focus indicators cognition it may not be obvious as to why the focus indicator is appearing and disappearing if a person is using mixed
forms of input.
:nth-last-of-type() - CSS: Cascading Style Sheets
formal syntax :nth-last-of-type( <nth> )where <nth> = <an-plus-b> | even | odd examples html <div> <span>this is a span.</span> <span>this is another span.</span> <em>this is emphasized.</em> <span>wow, this span gets limed!!!</span> <strike>this is struck through.</strike> <span>here is one last span.</span> </div> css span:nth-last-of-type(2) { background-color: lime; } result ...
:nth-of-type() - CSS: Cascading Style Sheets
formal syntax :nth-of-type( <nth> )where <nth> = <an-plus-b> | even | odd examples basic example html <div> <div>this element isn't counted.</div> <p>1st paragraph.</p> <p>2nd paragraph.</p> <div>this element isn't counted.</div> <p>3rd paragraph.</p> <p class="fancy">4th paragraph.</p> </div> css /* odd paragraphs */ p:nth-of-type(2n+1) { color: red; } /* even paragraphs */ p:n...
:out-of-range - CSS: Cascading Style Sheets
in the absence of such a limitation, the element can neither be "in-range" nor "out-of-range." syntax :out-of-range examples html <
form action="" id="
form1"> <p>values between 1 and 10 are valid.</p> <ul> <li> <input id="value1" name="value1" type="number" placeholder="1 to 10" min="1" max="10" value="12"> <label for="value1">your value is </label> </li> </ul> </
form> css li { list-style: none; margin-bottom: 1em; } input { border: 1px solid black; } input:in-range { background-color: rgba(0, ...
@charset - CSS: Cascading Style Sheets
formal syntax @charset "<charset>"; examples valid and invalid charset declarations @charset "utf-8"; /* set the encoding of the style sheet to unicode utf-8 */ @charset 'iso-8859-15'; /* invalid, wrong quoting style used */ @charset "utf-8"; /* invalid, more than one space */ @charset "utf-8"; /* invalid, there is a character (a space) before the at-rule */ @charset utf-8; ...
additive-symbols - CSS: Cascading Style Sheets
formal definition related at-rule@counter-styleinitial valuen/acomputed valueas specified
formal syntax [ <integer> && <symbol> ]#where <symbol> = <string> | <image> | <custom-ident>where <image> = <url> | <image()> | <image-set()> | <element()> | <paint()> | <cross-fade()> | <gradient>where <image()> = image( <image-tags>?
fallback - CSS: Cascading Style Sheets
formal definition related at-rule@counter-styleinitial valuedecimalcomputed valueas specified
formal syntax <counter-style-name>where <counter-style-name> = <custom-ident> examples specifying a fallback counter style html <ul class="list"> <li>one</li> <li>two</li> <li>three</li> <li>four</li> <li>five</li> </ul> css @counter-style fallback-example { system: fixed; symbols: "\24...
negative - CSS: Cascading Style Sheets
formal definition related at-rule@counter-styleinitial value"-" hyphen-minuscomputed valueas specified
formal syntax <symbol> <symbol>?where <symbol> = <string> | <image> | <custom-ident>where <image> = <url> | <image()> | <image-set()> | <element()> | <paint()> | <cross-fade()> | <gradient>where <image()> = image( <image-tags>?
pad - CSS: Cascading Style Sheets
formal definition related at-rule@counter-styleinitial value0 ""computed valueas specified
formal syntax <integer> && <symbol>where <symbol> = <string> | <image> | <custom-ident>where <image> = <url> | <image()> | <image-set()> | <element()> | <paint()> | <cross-fade()> | <gradient>where <image()> = image( <image-tags>?
prefix - CSS: Cascading Style Sheets
formal definition related at-rule@counter-styleinitial value"" (the empty string)computed valueas specified
formal syntax <symbol>where <symbol> = <string> | <image> | <custom-ident>where <image> = <url> | <image()> | <image-set()> | <element()> | <paint()> | <cross-fade()> | <gradient>where <image()> = image( <image-tags>?
range - CSS: Cascading Style Sheets
formal definition related at-rule@counter-styleinitial valueautocomputed valueas specified
formal syntax [ [ <integer> | infinite ]{2} ]# | auto examples setting counter style over a range <ul class="list"> <li>one</li> <li>two</li> <li>three</li> <li>four</li> <li>five</li> <li>six</li> <li>seven</li> <li>eight</li> <li>nine</li> <li>ten</li> </ul> @counter-style range-mult...
symbols - CSS: Cascading Style Sheets
formal definition related at-rule@counter-styleinitial valuen/acomputed valueas specified
formal syntax <symbol>+where <symbol> = <string> | <image> | <custom-ident>where <image> = <url> | <image()> | <image-set()> | <element()> | <paint()> | <cross-fade()> | <gradient>where <image()> = image( <image-tags>?
@counter-style - CSS: Cascading Style Sheets
formal syntax @counter-style <counter-style-name> { [ system: <counter-system>; ] | [ symbols: <counter-symbols>; ] | [ additive-symbols: <additive-symbols>; ] | [ negative: <negative-symbol>; ] | [ prefix: <prefix>; ] | [ suffix: <suffix>; ] | [ range: <range>; ] | [ pad: <padding>; ] | [ speak-as: <speak-as>; ] | [ fallback: <counter-style-name>; ] }where <counter-style-name> = ...
@document - CSS: Cascading Style Sheets
formal syntax @document [ <url> | url-prefix(<string>) | domain(<string>) | media-document(<string>) | regexp(<string>) ]# { <group-rule-body> } examples specifying document for css rule @document url("http://www.w3.org/"), url-prefix("http://www.w3.org/style/"), domain("mozilla.org"), media-document("video"), regexp("https:.*") { /* css rules here apply...
font-display - CSS: Cascading Style Sheets
formal definition related at-rule@font-faceinitial valueautocomputed valueas specified
formal syntax [ auto | block | swap | fallback | optional ] examples specifying fallback font-display @font-face { font-family: examplefont; src: url(/path/to/fonts/examplefont.woff)
format('woff'), url(/path/to/fonts/examplefont.eot)
format('eot'); font-weight: 400; font-style: normal; font-di...
font-family - CSS: Cascading Style Sheets
formal definition related at-rule@font-faceinitial valuen/a (required)computed valueas specified
formal syntax <family-name>where <family-name> = <string> | <custom-ident>+ examples setting the font family name @font-face { font-family: examplefont; src: url('examplefont.ttf'); } specifications specification status comment css fonts module level 3the definition of 'font-family' in that specification.
font-style - CSS: Cascading Style Sheets
formal definition related at-rule@font-faceinitial valuenormalcomputed valueas specified
formal syntax normal | italic | oblique <angle>{0,2} examples specifying an italic font style as an example, consider the garamond font family, in its normal
form, we get the following result: @font-face { font-family: garamond; src: url('garamond.ttf'); } the italicized version of this text uses the...
font-variation-settings - CSS: Cascading Style Sheets
formal definition related at-rule@font-faceinitial valuenormalcomputed valueas specified
formal syntax normal | [ <string> <number> ]# examples setting font weight and stretch in a @font-face rule @font-face { font-family: 'opentypefont'; src: url('open_type_font.woff2')
format('woff2'); font-weight: normal; font-style: normal; font-variation-settings: 'wght' 400, 'wdth' 300; } specif...
unicode-range - CSS: Cascading Style Sheets
formal definition related at-rule@font-faceinitial valueu+0-10ffffcomputed valueas specified
formal syntax <unicode-range># examples using a different font for a single character in this example we create a simple html containing a single <div> element, including an ampersand, that we want to style with a different font.
grid - CSS: Cascading Style Sheets
neato!</p> css :not(.unknown) { color: lightgray; } @media (grid: 0) { .unknown { color: lightgray; } .bitmap { color: red; text-trans
form: uppercase; } } @media (grid: 1) { .unknown { color: lightgray; } .grid { color: black; text-trans
form: uppercase; } } result specifications specification status comment media queries level 4the definition of 'grid' in that specification.
hover - CSS: Cascading Style Sheets
none the primary input mechanism cannot hover at all or cannot conveniently hover (e.g., many mobile devices emulate hovering when the user per
forms an inconvenient long tap), or there is no primary pointing input mechanism.
prefers-reduced-data - CSS: Cascading Style Sheets
ata: no-preference)" crossorigin> <link rel="stylesheet" href="style.css"> </head> css @media (prefers-reduced-data: no-preference) { @font-face { font-family: montserrat; font-style: normal; font-weight: 400; font-display: swap; /* latin */ src: local('montserrat regular'), local('montserrat-regular'), url('fonts/montserrat-regular.woff2')
format('woff2'); unicode-range: u+0000-00ff, u+0131, u+0152-0153, u+02bb-02bc, u+02c6, u+02da, u+02dc, u+2000-206f, u+2074, u+20ac, u+2122, u+2191, u+2193, u+2212, u+2215, u+feff, u+fffd; } } body { font-family: montserrat, -apple-system, blinkmacsystemfont, "segoe ui", roboto, helvetica, arial, "microsoft yahei", sans-serif, "apple color emoji", "segoe ui emoji", "segoe ui symbol"; } ...
prefers-reduced-motion - CSS: Cascading Style Sheets
*/ @media (prefers-reduced-motion) { .animation { animation-name: dissolve; } } .animation { background-color: #306; color: #fff; font: 1.2em sans-serif; width: 10em; padding: 1em; border-radius: 1em; text-align: center; } @keyframes pulse { 0% { trans
form: scale(1); } 25% { trans
form: scale(.9); } 50% { trans
form: scale(1); } 75% { trans
form: scale(1.1); } 100% { trans
form: scale(1); } } @keyframes dissolve { 0% { opacity: 1; } 50% { opacity: 0.8; } 100% { opacity: 1; } } result specifications specification status comment media queries level 5the definition of 'prefers-reduced-motion' in that speci...
update - CSS: Cascading Style Sheets
examples html <p>if this text animates for you, you are using a fast-updating device.</p> css @keyframes jiggle { from { trans
form: translatey(0); } to { trans
form: translatey(25px); } } @media (update: fast) { p { animation: 1s jiggle linear alternate infinite; } } result specifications specification status comment media queries level 4the definition of 'update' in that specification.
bleed - CSS: Cascading Style Sheets
formal definition related at-rule@pageinitial valueautocomputed valueas specified
formal syntax auto | <length> examples setting a page bleed of 1cm @page { bleed: 1cm; } specifications specification status comment css paged media module level 3the definition of 'bleed' in that specification.
marks - CSS: Cascading Style Sheets
formal definition related at-rule@pageinitial valuenonecomputed valueas specified
formal syntax none | [ crop | cross ] examples adding crop and cross marks @page { marks: crop cross; } specifications specification status comment css paged media module level 3the definition of 'marks' in that specification.
size - CSS: Cascading Style Sheets
formal definition related at-rule@pageinitial valueautocomputed valueas specified, but with relative lengths converted into absolute lengths
formal syntax <length>{1,2} | auto | [ <page-size> | [ portrait | landscape ] ] examples specifying size and orientation @page { size: 4in 6in landscape; } nesting inside a @media rule @media print { @page { size: 50mm 150mm; } } specificatio...
max-height - CSS: Cascading Style Sheets
formal definition related at-rule@viewportinitial valueautopercentagesrefer to the height of the initial viewportcomputed valueif specified as a length, the corresponding absolute length; if specified as a percentage, the specified value; otherwise, auto
formal syntax <viewport-length>where <viewport-length> = auto | <length-percentage>where <length-percentage> = <length> | <percentage> examples ...
max-width - CSS: Cascading Style Sheets
formal definition related at-rule@viewportinitial valueautopercentagesrefer to the width of the initial viewportcomputed valueif specified as a length, the corresponding absolute length; if specified as a percentage, the specified value; otherwise, auto
formal syntax <viewport-length>where <viewport-length> = auto | <length-percentage>where <length-percentage> = <length> | <percentage> examples ...
max-zoom - CSS: Cascading Style Sheets
formal definition related at-rule@viewportinitial valueautopercentagesthe zoom factor itselfcomputed valueauto, or a non-negative number or percentage as specified
formal syntax auto | <number> | <percentage> examples setting max-zoom @viewport { max-zoom: 1.5; } specifications specification status comment css device adaptationthe definition of '"max-zoom" desc...
min-height - CSS: Cascading Style Sheets
formal definition related at-rule@viewportinitial valueautopercentagesrefer to the height of the initial viewportcomputed valueif specified as a length, the corresponding absolute length; if specified as a percentage, the specified value; otherwise, auto
formal syntax <viewport-length>where <viewport-length> = auto | <length-percentage>where <length-percentage> = <length> | <percentage> examples ...
min-width - CSS: Cascading Style Sheets
formal definition related at-rule@viewportinitial valueautopercentagesrefer to the width of the initial viewportcomputed valueif specified as a length, the corresponding absolute length; if specified as a percentage, the specified value; otherwise, auto
formal syntax <viewport-length>where <viewport-length> = auto | <length-percentage>where <length-percentage> = <length> | <percentage> examples s...
min-zoom - CSS: Cascading Style Sheets
formal definition related at-rule@viewportinitial valueautopercentagesthe zoom factor itselfcomputed valueauto, or a non-negative number or percentage as specified
formal syntax auto | <number> | <percentage> examples setting min zoom factor @viewport { min-zoom: 2.0; } specifications specification status comment css device adaptationthe definition of '"min-zoom" ...
orientation - CSS: Cascading Style Sheets
formal definition related at-rule@viewportinitial valueautopercentagesrefer to the size of bounding boxcomputed valueas specified
formal syntax auto | portrait | landscape examples setting viewport orientation @viewport { orientation: landscape; } specifications specification status comment css device adaptationthe definition of '"orientation" descriptor' in that ...
user-zoom - CSS: Cascading Style Sheets
mdn understanding wcag, guideline 1.4 explanations understanding success criterion 1.4.4 | understanding wcag 2.0
formal definition related at-rule@viewportinitial valuezoompercentagesrefer to the size of bounding boxcomputed valueas specified
formal syntax zoom | fixed examples disabling user zoom @viewport { user-zoom: fixed; } specifications specification status comment css device adaptationthe definition of '"user-zoom" descriptor' in that specification.
viewport-fit - CSS: Cascading Style Sheets
formal definition related at-rule@viewportinitial valueautocomputed valueas specified
formal syntax auto | contain | cover examples scaling viewport to fit device display @viewport { viewport-fit: cover; } specifications specification status comment css round display level 1the definition of '"viewport-fit" descriptor' in that specification.
zoom - CSS: Cascading Style Sheets
formal definition related at-rule@viewportinitial valueautopercentagesthe zoom factor itselfcomputed valueauto, or a non-negative number or percentage as specified
formal syntax auto | <number> | <percentage> examples setting viewport zoom factor @viewport { zoom: 2.0; } specifications specification status comment css device adaptationthe definition of '"zoom" de...
@viewport - CSS: Cascading Style Sheets
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: 0.5; max-zoom: 0.9; } @viewport { orientation: landscape; } specifications specification status comment css round display level 1the definition of '@viewport' in that spe...
Animatable CSS properties - CSS: Cascading Style Sheets
ll-padding-right scroll-padding-top scroll-snap-coordinate scroll-snap-destination scrollbar-color shape-image-threshold shape-margin shape-outside tab-size text-decoration text-decoration-color text-decoration-thickness text-emphasis text-emphasis-color text-indent text-shadow text-underline-offset top trans
form trans
form-origin translate vertical-align visibility width word-spacing z-index zoom ...
Descendant combinator - CSS: Cascading Style Sheets
/* list items that are descendants of the "my-things" list */ ul.my-things li { margin: 2em; } the descendant combinator is technically one or more css white space characters — the space character and/or one of four control characters: carriage return,
form feed, new line, and tab characters — between two selectors in the absence of another combinator.
General sibling combinator - CSS: Cascading Style Sheets
/* paragraphs that are siblings of and subsequent to any image */ img ~ p { color: red; } syntax
former_element ~ target_element { style properties } examples css p ~ span { color: red; } html <span>this is not red.</span> <p>here is a paragraph.</p> <code>here is some code.</code> <span>and here is a red span!</span> <code>more code...</code> <span>and this is a red span!</span> result specifications specification status comment selectors level 4the definition of 'subsequent-sibling combinator' in that specification.
Grid wrapper - CSS: Cascading Style Sheets
enters the container } /* remove the max-width and margins if the browser supports grid */ @supports (display: grid) { .grid { display: grid; /* other grid code goes here */ max-width: none; margin: 0; } } to “break out” a full-width item to the edge of the viewport you can then use this trick (courtesy of una kravets): .item { width: 100vw; margin-left: 50%; trans
form: translate3d(-50%, 0, 0); } this gives a good approximation of the layout, only without the benefit of being able to align items easily on an exact grid.
Pseudo-classes - CSS: Cascading Style Sheets
/* any button over which the user's pointer is hovering */ button:hover { color: blue; } pseudo-classes let you apply a style to an element not only in relation to the content of the document tree, but also in relation to external factors like the history of the navigator (:visited, for example), the status of its content (like :checked on certain
form elements), or the position of the mouse (like :hover, which lets you know if the mouse is over an element or not).
Cubic Bezier Generator - CSS: Cascading Style Sheets
<html> <canvas id="bezier" width="336" height="336"> </canvas> <
form> <label for="x1">x1 = </label><input onchange="updatecanvas();" type="text" maxlength=6 id="x1" value="0.79" class='field'> <label for="y1">y1 = </label><input onchange="updatecanvas();return true;" type="text" maxlength=6 id="y1" value="0.33" class='field'> <label for="x2">x2 = </label><input onchange="updatecanvas();return true;" type="text" maxlength=6 id="x2" value="0.14" class='field'> <label for="y2">y2 = </label><input onchange="updatecanvas();return true;" type="text" maxlength=6 id="y2" value="0.53" class='field'> <br> <output id="output">log</output> </
form> </html> .field { width: 40px; } function updatecanvas() { var x1 =...
Tools - CSS: Cascading Style Sheets
other tools css animation - stylie to check the device display in
formation (helpful in responsive web design) - mydevice.io css menus - cssmenumaker.com a mighty, modern css linter that helps you enforce consistent conventions and avoid errors in your stylesheets - stylelint ...
CSS Tutorials - CSS: Cascading Style Sheets
css trans
forms trans
forms allow you to change the position of elements by modifying their coordinate space: it allows for translating, rotating, and de
forming them in the 2d or 3d spaces.
align-content - CSS: Cascading Style Sheets
formal definition initial valuenormalapplies tomulti-line flex containersinheritednocomputed valueas specifiedanimation typediscrete
formal syntax normal | <baseline-position> | <content-distribution> | <overflow-position>?
align-items - CSS: Cascading Style Sheets
formal definition initial valuenormalapplies toall elementsinheritednocomputed valueas specifiedanimation typediscrete
formal syntax normal | stretch | <baseline-position> | [ <overflow-position>?
all - CSS: Cascading Style Sheets
formal definition initial valuethere is no practical initial value for it.applies toall elementsinheritednocomputed valueas the specified value applies to each property this is a shorthand for.animation typeas each of the properties of the shorthand (all properties but unicode-bidi and direction)
formal syntax initial | inherit | unset | revert examples html <blockquote id="quote"> lorem ipsum...
aspect-ratio - CSS: Cascading Style Sheets
formal definition initial valueautoapplies toall elements except inline boxes and internal ruby or table boxesinheritednocomputed valueas specifiedanimation typediscrete
formal syntax auto | <ratio> examples mapping width and height to aspect-ratio firefox has added an internal aspect-ratio property (in version 69 onwards) that applies to replaced elements and other related elements that accept ...
backdrop-filter - CSS: Cascading Style Sheets
formal definition initial valuenoneapplies toall elements; in svg, it applies to container elements excluding the defs element and all graphics elementsinheritednocomputed valueas specifiedanimation typea filter function list
formal syntax none | <filter-function-list>where <filter-function-list> = [ <filter-function> | <url> ]+where <filter-function> = <blur()> | <brightness()> | <contrast()> | <d...
background-position-x - CSS: Cascading Style Sheets
formal definition initial valueleftapplies toall elementsinheritednopercentagesrefer to width of background positioning area minus height of background imagecomputed valuea list, each item consisting of: an offset given as a combination of an absolute length and a percentage, plus an origin keywordanimation typediscrete
formal syntax [ center | [ [ left | right | x-start | x-end ]?
background-position-y - CSS: Cascading Style Sheets
formal definition initial valuetopapplies toall elementsinheritednopercentagesrefer to height of background positioning area minus height of background imagecomputed valuea list, each item consisting of: an offset given as a combination of an absolute length and a percentage, plus an origin keywordanimation typediscrete
formal syntax [ center | [ [ top | bottom | y-start | y-end ]?
block-size - CSS: Cascading Style Sheets
formal definition initial valueautoapplies tosame as width and heightinheritednopercentagesblock-size of containing blockcomputed valuesame as width and heightanimation typea length, percentage or calc();
formal syntax <'width'> examples block size with vertical text html <p class="exampletext">example text</p> css .exampletext { writing-mode: vertical-rl; background-color: yellow; blo...
border-block-color - CSS: Cascading Style Sheets
formal definition initial valuecurrentcolorapplies toall elementsinheritednocomputed valuecomputed coloranimation typediscrete
formal syntax <'border-top-color'>{1,2} examples border with vertical text html <div> <p class="exampletext">example text</p> </div> css div { background-color: yellow; width: 120px; height: 120px; } .exampletext { writing-mode: vertical-lr; border: 10px...
border-block-end-color - CSS: Cascading Style Sheets
formal definition initial valuecurrentcolorapplies toall elementsinheritednocomputed valuecomputed coloranimation typea color
formal syntax <'border-top-color'> examples border color with vertical text html <div> <p class="exampletext">example text</p> </div> css div { background-color: yellow; width: 120px; height: 120px; } .exampletext { writing-mode: vertical-lr; border: 10px...
border-block-end-style - CSS: Cascading Style Sheets
formal definition initial valuenoneapplies toall elementsinheritednocomputed valueas specifiedanimation typediscrete
formal syntax <'border-top-style'> examples dashed border with vertical text html <div> <p class="exampletext">example text</p> </div> css div { background-color: yellow; width: 120px; height: 120px; } .exampletext { writing-mode: vertical-lr; border: 5px solid bl...
border-block-end-width - CSS: Cascading Style Sheets
formal definition initial valuemediumapplies toall elementsinheritednopercentageslogical-width of containing blockcomputed valueabsolute length; 0 if the border style is none or hiddenanimation typea length
formal syntax <'border-top-width'> examples border width with veritcal text html <div> <p class="exampletext">example text</p> </div> css div { background-color: yellow; width: 120p...
border-block-start-color - CSS: Cascading Style Sheets
values <'color'> see border-color
formal definition initial valuecurrentcolorapplies toall elementsinheritednocomputed valuecomputed coloranimation typea color
formal syntax <'border-top-color'> examples border color with vertical text html <div> <p class="exampletext">example text</p> </div> css div { background-color: yellow; width: 120px; height: 120px; } .exampletext { writing-mode: vertical-lr; border: 10px...
border-block-start-style - CSS: Cascading Style Sheets
formal definition initial valuenoneapplies toall elementsinheritednocomputed valueas specifiedanimation typediscrete
formal syntax <'border-top-style'> examples dashed border wtih vertical text html <div> <p class="exampletext">example text</p> </div> css div { background-color: yellow; width: 120px; height: 120px; } .exampletext { writing-mode: vertical-lr; border: 5px solid bl...
border-block-start-width - CSS: Cascading Style Sheets
formal definition initial valuemediumapplies toall elementsinheritednopercentageslogical-width of containing blockcomputed valueabsolute length; 0 if the border style is none or hiddenanimation typea length
formal syntax <'border-top-width'> examples border width with vertical text html <div> <p class="exampletext">example text</p> </div> css div { background-color: yellow; width: 120p...
border-block-style - CSS: Cascading Style Sheets
formal definition initial valuenoneapplies toall elementsinheritednocomputed valueas specifiedanimation typediscrete
formal syntax <'border-top-style'> examples dashed border with vertical text html <div> <p class="exampletext">example text</p> </div> css div { background-color: yellow; width: 120px; height: 120px; } .exampletext { writing-mode: vertical-lr; border: 5px solid bl...
border-block-width - CSS: Cascading Style Sheets
formal definition initial valuemediumapplies toall elementsinheritednopercentageslogical-width of containing blockcomputed valueabsolute length; 0 if the border style is none or hiddenanimation typediscrete
formal syntax <'border-top-width'> examples border width with vertical text html <div> <p class="exampletext">example text</p> </div> css div { background-color: yellow; width: 120p...
border-collapse - CSS: Cascading Style Sheets
formal definition initial valueseparateapplies totable and inline-table elementsinheritedyescomputed valueas specifiedanimation typediscrete
formal syntax collapse | separate examples a colorful table of browser engines html <table class="separate"> <caption><code>border-collapse: separate</code></caption> <tbody> <tr><th>browser</th> <th>layout engine</th></tr> <tr><td class="fx">f...
border-inline-color - CSS: Cascading Style Sheets
formal definition initial valuecurrentcolorapplies toall elementsinheritednocomputed valuecomputed coloranimation typediscrete
formal syntax <'border-top-color'>{1,2} examples border color with vertical text html <div> <p class="exampletext">example text</p> </div> css div { background-color: yellow; width: 120px; height: 120px; } .exampletext { writing-mode: vertical-lr; border...
border-inline-end-color - CSS: Cascading Style Sheets
formal definition initial valuecurrentcolorapplies toall elementsinheritednocomputed valuecomputed coloranimation typea color
formal syntax <'border-top-color'> examples html <div> <p class="exampletext">example text</p> </div> css div { background-color: yellow; width: 120px; height: 120px; } .exampletext { writing-mode: vertical-lr; border: 10px solid blue; border-inline-end-...
border-inline-end-style - CSS: Cascading Style Sheets
formal definition initial valuenoneapplies toall elementsinheritednocomputed valueas specifiedanimation typediscrete
formal syntax <'border-top-style'> examples html <div> <p class="exampletext">example text</p> </div> css div { background-color: yellow; width: 120px; height: 120px; } .exampletext { writing-mode: vertical-lr; border: 5px solid blue; border-inline-end-style: das...
border-inline-end-width - CSS: Cascading Style Sheets
formal definition initial valuemediumapplies toall elementsinheritednopercentageslogical-width of containing blockcomputed valueabsolute length; 0 if the border style is none or hiddenanimation typea length
formal syntax <'border-top-width'> examples applying a border with vertical text html <div> <p class="exampletext">example text</p> </div> css div { background-color: yellow; width:...
border-inline-start-color - CSS: Cascading Style Sheets
formal definition initial valuecurrentcolorapplies toall elementsinheritednocomputed valuecomputed coloranimation typea color
formal syntax <'border-top-color'> examples html <div> <p class="exampletext">example text</p> </div> css div { background-color: yellow; width: 120px; height: 120px; } .exampletext { writing-mode: vertical-lr; border: 10px solid blue; border-inline-star...
border-inline-start-style - CSS: Cascading Style Sheets
formal definition initial valuenoneapplies toall elementsinheritednocomputed valueas specifiedanimation typediscrete
formal syntax <'border-top-style'> examples html <div> <p class="exampletext">example text</p> </div> css div { background-color: yellow; width: 120px; height: 120px; } .exampletext { writing-mode: vertical-lr; border: 5px solid blue; border-inline-start-style: d...
border-inline-start-width - CSS: Cascading Style Sheets
formal definition initial valuemediumapplies toall elementsinheritednopercentageslogical-width of containing blockcomputed valueabsolute length; 0 if the border style is none or hiddenanimation typea length
formal syntax <'border-top-width'> examples html <div> <p class="exampletext">example text</p> </div> css div { background-color: yellow; width: 120px; height: 120px; } .examplete...
border-inline-style - CSS: Cascading Style Sheets
formal definition initial valuenoneapplies toall elementsinheritednocomputed valueas specifiedanimation typediscrete
formal syntax <'border-top-style'> examples html content <div> <p class="exampletext">example text</p> </div> css content div { background-color: yellow; width: 120px; height: 120px; } .exampletext { writing-mode: vertical-lr; border: 5px solid blue; border-inlin...
border-inline-width - CSS: Cascading Style Sheets
formal definition initial valuemediumapplies toall elementsinheritednopercentageslogical-width of containing blockcomputed valueabsolute length; 0 if the border style is none or hiddenanimation typediscrete
formal syntax <'border-top-width'> examples html <div> <p class="exampletext">example text</p> </div> css div { background-color: yellow; width: 120px; height: 120px; } .examplete...
bottom - CSS: Cascading Style Sheets
formal definition initial valueautoapplies topositioned elementsinheritednopercentagesrefer to the height of the containing blockcomputed valueif specified as a length, the corresponding absolute length; if specified as a percentage, the specified value; otherwise, autoanimation typea length, percentage or calc();
formal syntax <length> | <percentage> | auto examples absolute and fixed positionin...
box-decoration-break - CSS: Cascading Style Sheets
formal definition initial valuesliceapplies toall elementsinheritednocomputed valueas specifiedanimation typediscrete
formal syntax slice | clone examples inline box fragments an inline element that contains line breaks styled with: .example { background: linear-gradient(to bottom right, yellow, green); box-shadow: 8px 8px 10px 0px deeppink, -5px -5px 5px 0px blue, 5px 5px 15px ...
box-sizing - CSS: Cascading Style Sheets
formal definition initial valuecontent-boxapplies toall elements that accept width or heightinheritednocomputed valueas specifiedanimation typediscrete
formal syntax content-box | border-box examples box sizes with content-box and border-box this example shows how different box-sizing values alter the rendered size of two otherwise identical elements.
break-inside - CSS: Cascading Style Sheets
a subset of values should be aliased as follows: page-break-inside break-inside auto auto avoid avoid
formal definition initial valueautoapplies toblock-level elementsinheritednocomputed valueas specifiedanimation typediscrete
formal syntax auto | avoid | avoid-page | avoid-column | avoid-region examples avoiding breaking inside a figure in the following example we have a container that contains an <h1> spanning all columns (achieved using column-span: all) and a series of paragraphs laid out in...
caption-side - CSS: Cascading Style Sheets
formal definition initial valuetopapplies totable-caption elementsinheritedyescomputed valueas specifiedanimation typediscrete
formal syntax top | bottom | block-start | block-end | inline-start | inline-end examples setting captions above and below html <table class="top"> <caption>caption above the table</caption> <tr> <td>some data</td> <td>some more data</td> </tr> </table> <...
caret-color - CSS: Cascading Style Sheets
formal definition initial valueautoapplies toall elementsinheritedyescomputed valueauto is computed as specified and <color> values are computed as defined for the color property.animation typea color
formal syntax auto | <color>where <color> = <rgb()> | <rgba()> | <hsl()> | <hsla()> | <hex-color> | <named-color> | currentcolor | <deprecated-system-color>where <rgb()> = rgb( <percentage>{3} [ / <al...
clip-path - CSS: Cascading Style Sheets
formal definition initial valuenoneapplies toall elements; in svg, it applies to container elements excluding the defs element and all graphics elementsinheritednopercentagesrefer to reference box when specified, otherwise border-boxcomputed valueas specified, but with <url> values made absoluteanimation typeyes, as specified for <basic-shape>, otherwise no
formal syntax <clip-source> | [ <basic-sh...
column-count - CSS: Cascading Style Sheets
formal definition initial valueautoapplies toblock containers except table wrapper boxesinheritednocomputed valueas specifiedanimation typean integer
formal syntax <integer> | auto examples splitting a paragraph across three columns html <p class="content-box"> this is a bunch of text split into three columns using the css `column-count` property.
column-fill - CSS: Cascading Style Sheets
formal definition initial valuebalanceapplies tomulticol elementsinheritednocomputed valueas specifiedanimation typediscrete
formal syntax auto | balance | balance-all examples splitting text evenly across columns html <p class="content-box"> this is a bunch of text split into multiple columns.
column-gap (grid-column-gap) - CSS: Cascading Style Sheets
formal definition initial valuenormalapplies tomulti-column elements, flex containers, grid containersinheritednopercentagesrefer to corresponding dimension of the content areacomputed valueas specified, with <length>s made absolute, and normal computing to zero except on multi-column elementsanimation typea length, percentage or calc();
formal syntax normal | <length-percentage>where <length-perce...
column-rule-color - CSS: Cascading Style Sheets
formal definition initial valuecurrentcolorapplies tomulticol elementsinheritednocomputed valuecomputed coloranimation typea color
formal syntax <color>where <color> = <rgb()> | <rgba()> | <hsl()> | <hsla()> | <hex-color> | <named-color> | currentcolor | <deprecated-system-color>where <rgb()> = rgb( <percentage>{3} [ / <alpha-value> ]?
column-rule-style - CSS: Cascading Style Sheets
formal definition initial valuenoneapplies tomulticol elementsinheritednocomputed valueas specifiedanimation typediscrete
formal syntax <'border-style'> examples setting a dashed column rule html <p>this is a bunch of text split into three columns.
column-rule-width - CSS: Cascading Style Sheets
formal definition initial valuemediumapplies tomulticol elementsinheritednocomputed valuethe absolute length; 0 if the column-rule-style is none or hiddenanimation typea length
formal syntax <'border-width'> examples setting a thick column rule html <p>this is a bunch of text split into three columns.
column-width - CSS: Cascading Style Sheets
formal definition initial valueautoapplies toblock containers except table wrapper boxesinheritednocomputed valuethe absolute length, zero or largeranimation typea length
formal syntax <length> | auto examples setting column width in pixels html <p class="content-box"> lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliqu...
direction - CSS: Cascading Style Sheets
formal definition initial valueltrapplies toall elementsinheritedyescomputed valueas specifiedanimation typediscrete
formal syntax ltr | rtl examples setting right-to-left direction blockquote { direction: rtl; } specifications specification status comment css writing modes module level 3the definition of 'direction' in that specification.
element() - CSS: Cascading Style Sheets
<div style="width:400px; height:400px; background:-moz-element(#mybackground1) no-repeat;"> <p>this box uses the element with the #mybackground1 id as its background!</p> </div> <div style="overflow:hidden; height:0;"> <div id="mybackground1" style="width:1024px; height:1024px; background-image: linear-gradient(to right, red, orange, yellow, white);"> <p style="trans
form-origin:0 0; trans
form: rotate(45deg); color:white;">this text is part of the background.
empty-cells - CSS: Cascading Style Sheets
formal definition initial valueshowapplies totable-cell elementsinheritedyescomputed valueas specifiedanimation typediscrete
formal syntax show | hide example showing and hiding empty table cells html <table class="table_1"> <tr> <td>moe</td> <td>larry</td> </tr> <tr> <td>curly</td> <td></td> </tr> </table> <br> <table class="table_2"> <tr> <td>moe</td> <td>lar...
drop-shadow() - CSS: Cascading Style Sheets
the box-shadow property creates a rectangular shadow behind an element's entire box, while the drop-shadow() filter function creates a shadow that con
forms to the shape (alpha channel) of the image itself.
flex-basis - CSS: Cascading Style Sheets
formal definition initial valueautoapplies toflex items, including in-flow pseudo-elementsinheritednopercentagesrefer to the flex container's inner main sizecomputed valueas specified, but with relative lengths converted into absolute lengthsanimation typea length, percentage or calc();
formal syntax content | <'width'> examples setting flex item initial sizes html <ul class="container"> <li ...
flex-direction - CSS: Cascading Style Sheets
flexbox & the keyboard navigation disconnect — tink source order matters | adrian roselli mdn understanding wcag, guideline 1.3 explanations understanding success criterion 1.3.2 | w3c understanding wcag 2.0
formal definition initial valuerowapplies toflex containersinheritednocomputed valueas specifiedanimation typediscrete
formal syntax row | row-reverse | column | column-reverse examples reversing flex container columns and rows html <h4>this is a column-reverse</h4> <div id="content"> <div class="box" style="background-color:red;">a</div> <div class="box" style="background-color:lightblue;"...
flex-flow - CSS: Cascading Style Sheets
formal definition initial valueas each of the properties of the shorthand:flex-direction: rowflex-wrap: nowrapapplies toflex containersinheritednocomputed valueas each of the properties of the shorthand:flex-direction: as specifiedflex-wrap: as specifiedanimation typediscrete
formal syntax <'flex-direction'> | <'flex-wrap'> examples setting column-reverse and wrap element { /* main-axis is the...
flex-grow - CSS: Cascading Style Sheets
formal definition initial value0applies toflex items, including in-flow pseudo-elementsinheritednocomputed valueas specifiedanimation typea number
formal syntax <number> examples setting flex item grow factor html <h4>this is a flex-grow</h4> <h5>a,b,c and f are flex-grow:1 .
flex-shrink - CSS: Cascading Style Sheets
formal definition initial value1applies toflex items, including in-flow pseudo-elementsinheritednocomputed valueas specifiedanimation typea number
formal syntax <number> examples setting flex item shrink factor html <p>the width of content is 500px; the flex-basis of the flex items is 120px.</p> <p>a, b, c have flex-shrink:1 set.
float - CSS: Cascading Style Sheets
formal definition initial valuenoneapplies toall elements, but has no effect if the value of display is none.inheritednocomputed valueas specifiedanimation typediscrete
formal syntax left | right | none | inline-start | inline-end examples how floated elements are positioned as mentioned above, when an element is floated, it is taken out of the normal flow of the document (though still remaining ...
font-smooth - CSS: Cascading Style Sheets
formal definition initial valueautoapplies toall elementsinheritedyescomputed valueas specifiedanimation typediscrete
formal syntax auto | never | always | <absolute-size> | <length>where <absolute-size> = xx-small | x-small | small | medium | large | x-large | xx-large | xxx-large examples basic usage example the following example shows the safari/chromium and firefox equivalents that turn on f...
grid-auto-rows - CSS: Cascading Style Sheets
formal definition initial valueautoapplies togrid containersinheritednopercentagesrefer to corresponding dimension of the content areacomputed valuethe percentage as specified or the absolute lengthanimation typediscrete
formal syntax <track-size>+where <track-size> = <track-breadth> | minmax( <inflexible-breadth> , <track-breadth> ) | fit-content( [ <length> | <percentage> ] )where <track-breadth>...
ident - CSS: Cascading Style Sheets
it consists of one or more characters, where characters can be any of the following: any alphabetical character (a to z, or a to z), any decimal digit (0 to 9), a hyphen (-), an underscore (_), an escaped character (preceded by a backslash, \), a unicode character (in the
format of a backslash, \, followed by one to six hexadecimal digits, representing its unicode code point) note that id1, id1, id1 and id1 are all different identifiers as they are case-sensitive.
image-rendering - CSS: Cascading Style Sheets
formal definition initial valueautoapplies toall elementsinheritedyescomputed valueas specifiedanimation typediscrete
formal syntax auto | crisp-edges | pixelated examples setting image scaling algorithms in practical use, the pixelated and crisp-edges rules can be combined to provide some fallback for each other.
Inheritance - CSS: Cascading Style Sheets
see also css values for controlling inheritance: inherit, initial, unset, and revert introducing the css cascade cascade and inheritance css key concepts: css syntax, at-rule, comments, specificity and inheritance, the box, layout modes and visual
formatting models, and margin collapsing, or the initial, computed, resolved, specified, used, and actual values.
initial-letter-align - CSS: Cascading Style Sheets
formal definition initial valueautoapplies to::first-letter pseudo-elements and inline-level first child of a block containerinheritednocomputed valueas specifiedanimation typediscrete
formal syntax [ auto | alphabetic | hanging | ideographic ] examples aligning initial letter html <p class="auto ">initial letter - auto</p> <p class="alphabetic">initial letter - alphabetic</p> <p class="hanging...
initial-letter - CSS: Cascading Style Sheets
formal definition initial valuenormalapplies to::first-letter pseudo-elements and inline-level first child of a block containerinheritednocomputed valueas specifiedanimation typediscrete
formal syntax normal | [ <number> <integer>?
inline-size - CSS: Cascading Style Sheets
formal definition initial valueautoapplies tosame as width and heightinheritednopercentagesinline-size of containing blockcomputed valuesame as width and heightanimation typea length, percentage or calc();
formal syntax <'width'> examples setting inline size in pixels html <p class="exampletext">example text</p> css .exampletext { writing-mode: vertical-rl; background-color: yellow; in...
inset-block-end - CSS: Cascading Style Sheets
formal definition initial valueautoapplies topositioned elementsinheritednopercentageslogical-height of containing blockcomputed valuesame as box offsets: top, right, bottom, left properties except that directions are logicalanimation typea length, percentage or calc();
formal syntax <'top'> examples setting block end offset html <div> <p class="exampletext">example text</p> </div> css div...
inset-block-start - CSS: Cascading Style Sheets
formal definition initial valueautoapplies topositioned elementsinheritednopercentageslogical-height of containing blockcomputed valuesame as box offsets: top, right, bottom, left properties except that directions are logicalanimation typea length, percentage or calc();
formal syntax <'top'> examples setting block start offset html <div> <p class="exampletext">example text</p> </div> css d...
inset-block - CSS: Cascading Style Sheets
formal definition initial valueautoapplies topositioned elementsinheritednopercentageslogical-height of containing blockcomputed valuesame as box offsets: top, right, bottom, left properties except that directions are logicalanimation typea length, percentage or calc();
formal syntax <'top'>{1,2} examples setting block start and end offsets html <div> <p class="exampletext">example text</p> <...
inset-inline-end - CSS: Cascading Style Sheets
formal definition initial valueautoapplies topositioned elementsinheritednopercentageslogical-width of containing blockcomputed valuesame as box offsets: top, right, bottom, left properties except that directions are logicalanimation typea length, percentage or calc();
formal syntax <'top'> examples setting inline end offset html <div> <p class="exampletext">example text</p> </div> css div ...
inset-inline-start - CSS: Cascading Style Sheets
formal definition initial valueautoapplies topositioned elementsinheritednopercentageslogical-width of containing blockcomputed valuesame as box offsets: top, right, bottom, left properties except that directions are logicalanimation typea length, percentage or calc();
formal syntax <'top'> examples setting inline start offset html <div> <p class="exampletext">example text</p> </div> css d...
inset-inline - CSS: Cascading Style Sheets
formal definition initial valueautoapplies topositioned elementsinheritednopercentageslogical-width of containing blockcomputed valuesame as box offsets: top, right, bottom, left properties except that directions are logicalanimation typea length, percentage or calc();
formal syntax <'top'>{1,2} examples setting inline start and end offsets html <div> <p class="exampletext">example text</p> <...
inset - CSS: Cascading Style Sheets
formal definition initial valueautoapplies topositioned elementsinheritednopercentageslogical-height of containing blockcomputed valuesame as box offsets: top, right, bottom, left properties except that directions are logicalanimation typea length, percentage or calc();
formal syntax <'top'>{1,4} examples setting offsets for an element html <div> <span class="exampletext">example text</span> ...
justify-content - CSS: Cascading Style Sheets
formal definition initial valuenormalapplies toflex containersinheritednocomputed valueas specifiedanimation typediscrete
formal syntax normal | <content-distribution> | <overflow-position>?
left - CSS: Cascading Style Sheets
formal definition initial valueautoapplies topositioned elementsinheritednopercentagesrefer to the width of the containing blockcomputed valueif specified as a length, the corresponding absolute length; if specified as a percentage, the specified value; otherwise, autoanimation typea length, percentage or calc();
formal syntax <length> | <percentage> | auto examples positioning elements html <d...
line-break - CSS: Cascading Style Sheets
formal definition initial valueautoapplies toall elementsinheritedyescomputed valueas specifiedanimation typediscrete
formal syntax auto | loose | normal | strict | anywhere examples setting text wrapping see whether the text is wrapped before "々", "ぁ" and "。".
line-height-step - CSS: Cascading Style Sheets
formal definition initial value0applies toblock containersinheritedyescomputed valueabsolute <length>animation typediscrete
formal syntax <length> examples setting step unit for line box height in the following example, the height of line box in each paragraph is rounded up to the step unit.
list-style-image - CSS: Cascading Style Sheets
formal definition initial valuenoneapplies tolist itemsinheritedyescomputed valuenone or the image with its uri made absoluteanimation typediscrete
formal syntax <url> | none examples setting list item images html <ul> <li>item 1</li> <li>item 2</li> </ul> css ul { list-style-image: url("https://mdn.mozillademos.org/files/11981/starsolid.gif"); } result specifications spe...
list-style - CSS: Cascading Style Sheets
ul { list-style: none; } ul li::before { content: "\200b"; } voiceover and list-style-type: none – unfettered thoughts mdn understanding wcag, guideline 1.3 explanations understanding success criterion 1.3.1 | w3c understanding wcag 2.0
formal definition initial valueas each of the properties of the shorthand:list-style-type: disclist-style-position: outsidelist-style-image: noneapplies tolist itemsinheritedyescomputed valueas each of the properties of the shorthand:list-style-image: none or the image with its uri made absolutelist-style-position: as specifiedlist-style-type: as specifiedanimation typediscrete
formal syntax <'list...
margin-block-end - CSS: Cascading Style Sheets
formal definition initial value0applies tosame as margininheritednopercentagesdepends on layout modelcomputed valueif specified as a length, the corresponding absolute length; if specified as a percentage, the specified value; otherwise, autoanimation typea length
formal syntax <'margin-left'> examples setting block end margin html <div> <p class="exampletext">example text</p> </div> css d...
margin-block-start - CSS: Cascading Style Sheets
formal definition initial value0applies tosame as margininheritednopercentagesdepends on layout modelcomputed valueif specified as a length, the corresponding absolute length; if specified as a percentage, the specified value; otherwise, autoanimation typea length
formal syntax <'margin-left'> examples setting block start margin html <div> <p class="exampletext">example text</p> </div> css ...
margin-block - CSS: Cascading Style Sheets
formal definition initial value0applies tosame as margininheritednopercentagesdepends on layout modelcomputed valueif specified as a length, the corresponding absolute length; if specified as a percentage, the specified value; otherwise, autoanimation typediscrete
formal syntax <'margin-left'>{1,2} examples setting block start and end margins html <div> <p class="exampletext">example text</p>...
margin-inline-end - CSS: Cascading Style Sheets
formal definition initial value0applies tosame as margininheritednopercentagesdepends on layout modelcomputed valueif specified as a length, the corresponding absolute length; if specified as a percentage, the specified value; otherwise, autoanimation typea length
formal syntax <'margin-left'> examples setting inline end margin html <div> <p class="exampletext">example text</p> </div> css ...
margin-inline-start - CSS: Cascading Style Sheets
formal definition initial value0applies tosame as margininheritednopercentagesdepends on layout modelcomputed valueif specified as a length, the corresponding absolute length; if specified as a percentage, the specified value; otherwise, autoanimation typea length
formal syntax <'margin-left'> examples setting inline start margin html <div> <p class="exampletext">example text</p> </div> css...
margin-inline - CSS: Cascading Style Sheets
formal definition initial value0applies tosame as margininheritednopercentagesdepends on layout modelcomputed valueif specified as a length, the corresponding absolute length; if specified as a percentage, the specified value; otherwise, autoanimation typediscrete
formal syntax <'margin-left'>{1,2} examples setting inline start and end margins html <div> <p class="exampletext">example text</p...
mask-border-mode - CSS: Cascading Style Sheets
formal definition initial valuealphaapplies toall elements; in svg, it applies to container elements excluding the defs element and all graphics elementsinheritednocomputed valueas specifiedanimation typediscrete
formal syntax luminance | alpha examples basic usage this property doesn't yet seem to have support anywhere.
mask-border-outset - CSS: Cascading Style Sheets
formal definition initial value0applies toall elements; in svg, it applies to container elements excluding the defs element and all graphics elementsinheritednocomputed valueas specified, but with relative lengths converted into absolute lengthsanimation typediscrete
formal syntax [ <length> | <number> ]{1,4} examples basic usage this property doesn't appear to be supported anywhere yet.
mask-border-repeat - CSS: Cascading Style Sheets
formal definition initial valuestretchapplies toall elements; in svg, it applies to container elements excluding the defs element and all graphics elementsinheritednocomputed valueas specifiedanimation typediscrete
formal syntax [ stretch | repeat | round | space ]{1,2} examples basic usage this property doesn't appear to be supported anywhere yet.
mask-border-source - CSS: Cascading Style Sheets
formal definition initial valuenoneapplies toall elements; in svg, it applies to container elements excluding the defs element and all graphics elementsinheritednocomputed valueas specified, but with <url> values made absoluteanimation typediscrete
formal syntax none | <image>where <image> = <url> | <image()> | <image-set()> | <element()> | <paint()> | <cross-fade()> | <gradient>where <image()> = i...
mask-border-width - CSS: Cascading Style Sheets
formal definition initial valueautoapplies toall elements; in svg, it applies to container elements excluding the defs element and all graphics elementsinheritednopercentagesrelative to width/height of the mask border image areacomputed valueas specified, but with relative lengths converted into absolute lengthsanimation typediscrete
formal syntax [ <length-percentage> | <number> | auto ]{1,4}where...
mask-clip - CSS: Cascading Style Sheets
formal definition initial valueborder-boxapplies toall elements; in svg, it applies to container elements excluding the defs element and all graphics elementsinheritednocomputed valueas specifiedanimation typediscrete
formal syntax [ <geometry-box> | no-clip ]#where <geometry-box> = <shape-box> | fill-box | stroke-box | view-boxwhere <shape-box> = <box> | margin-boxwhere <box> = border-box | paddin...
mask-composite - CSS: Cascading Style Sheets
formal definition initial valueaddapplies toall elements; in svg, it applies to container elements excluding the defs element and all graphics elementsinheritednocomputed valueas specifiedanimation typediscrete
formal syntax <compositing-operator>#where <compositing-operator> = add | subtract | intersect | exclude examples compositing mask layers with addition css #masked { width: 100px; he...
mask-image - CSS: Cascading Style Sheets
formal definition initial valuenoneapplies toall elements; in svg, it applies to container elements excluding the defs element and all graphics elementsinheritednocomputed valueas specified, but with <url> values made absoluteanimation typediscrete
formal syntax <mask-reference>#where <mask-reference> = none | <image> | <mask-source>where <image> = <url> | <image()> | <image-set()> | <element()> | ...
mask-mode - CSS: Cascading Style Sheets
formal definition initial valuematch-sourceapplies toall elements; in svg, it applies to container elements excluding the defs element and all graphics elementsinheritednocomputed valueas specifiedanimation typediscrete
formal syntax <masking-mode>#where <masking-mode> = alpha | luminance | match-source examples using alpha mask mode css #masked { width: 227px; height: 200px; background: b...
mask-origin - CSS: Cascading Style Sheets
formal definition initial valueborder-boxapplies toall elements; in svg, it applies to container elements excluding the defs element and all graphics elementsinheritednocomputed valueas specifiedanimation typediscrete
formal syntax <geometry-box>#where <geometry-box> = <shape-box> | fill-box | stroke-box | view-boxwhere <shape-box> = <box> | margin-boxwhere <box> = border-box | padding-box | conten...
mask-repeat - CSS: Cascading Style Sheets
formal definition initial valueno-repeatapplies toall elements; in svg, it applies to container elements excluding the defs element and all graphics elementsinheritednocomputed valueconsists of two keywords, one per dimensionanimation typediscrete
formal syntax <repeat-style>#where <repeat-style> = repeat-x | repeat-y | [ repeat | space | round | no-repeat ]{1,2} examples setting repeat for a sing...
mask-size - CSS: Cascading Style Sheets
formal definition initial valueautoapplies toall elements; in svg, it applies to container elements excluding the defs element and all graphics elementsinheritednocomputed valueas specified, but with relative lengths converted into absolute lengthsanimation typerepeatable list of simple list of length, percentage, or calc
formal syntax <bg-size>#where <bg-size> = [ <length-percentage> | auto ]{1,2}...
mask-type - CSS: Cascading Style Sheets
formal definition initial valueluminanceapplies to<mask> elementsinheritednocomputed valueas specifiedanimation typediscrete
formal syntax luminance | alpha examples setting an alpha mask html <div class="redsquare"></div> <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="0" height="0"> <defs> <mask id="m" maskcontentunits="objectb...
max-inline-size - CSS: Cascading Style Sheets
formal definition initial value0applies tosame as width and heightinheritednopercentagesinline-size of containing blockcomputed valuesame as max-width and max-heightanimation typea length, percentage or calc();
formal syntax <'max-width'> examples setting max inline size in pixels html <p class="exampletext">example text</p> css .exampletext { writing-mode: vertical-rl; background-color:...
max() - CSS: Cascading Style Sheets
formal syntax max( <calc-sum># )where <calc-sum> = <calc-product> [ [ '+' | '-' ] <calc-product> ]*where <calc-product> = <calc-value> [ '*' <calc-value> | '/' <number> ]*where <calc-value> = <number> | <dimension> | <percentage> | ( <calc-sum> ) examples setting a minimum size for a font another use case for css functions is allow a font size to grow while ensuring it is at least a mimum size, en...
min-block-size - CSS: Cascading Style Sheets
formal definition initial value0applies tosame as width and heightinheritednopercentagesblock-size of containing blockcomputed valuesame as min-width and min-heightanimation typea length, percentage or calc();
formal syntax <'min-width'> examples setting minimum block size for vertical text html <p class="exampletext">example text</p> css .exampletext { writing-mode: vertical-rl; backgro...
min-inline-size - CSS: Cascading Style Sheets
formal definition initial value0applies tosame as width and heightinheritednopercentagesinline-size of containing blockcomputed valuesame as min-width and min-heightanimation typea length, percentage or calc();
formal syntax <'min-width'> examples setting minimum inline size for vertical text html <p class="exampletext">example text</p> css .exampletext { writing-mode: vertical-rl; backg...
minmax() - CSS: Cascading Style Sheets
formal syntax minmax( [ <length> | <percentage> | min-content | max-content | auto ] , [ <length> | <percentage> | <flex> | min-content | max-content | auto ] ) css properties minmax() function can be used within: grid-template-columns grid-template-rows grid-auto-columns grid-auto-rows examples css #container { display: grid; grid-template-columns: minmax(min-content, 300px) minmax(...
object-fit - CSS: Cascading Style Sheets
formal definition initial valuefillapplies toreplaced elementsinheritednocomputed valueas specifiedanimation typediscrete
formal syntax fill | contain | cover | none | scale-down examples setting object-fit for an image html <section> <h2>object-fit: fill</h2> <img class="fill" src="https://udn.realityripple.com/samples/ae/248a9938d9.png" alt="mdn logo"> <img class="fill narrow" src="htt...
object-position - CSS: Cascading Style Sheets
formal definition initial value50% 50%applies toreplaced elementsinheritedyespercentagesrefer to width and height of element itselfcomputed valueas specifiedanimation typerepeatable list of simple list of length, percentage, or calc
formal syntax <position>where <position> = [ [ left | center | right ] | [ top | center | bottom ] | [ left | center | right | <length-percentage> ] [ top | center | bo...
offset-distance - CSS: Cascading Style Sheets
formal definition initial value0applies totrans
formable elementsinheritednopercentagesrefer to the total path lengthcomputed valuefor <length> the absolute value, otherwise a percentageanimation typea length, percentage or calc();
formal syntax <length-percentage>where <length-percentage> = <length> | <percentage> examples using offset-distance in an animation the motion aspect in css motion pat...
offset-position - CSS: Cascading Style Sheets
formal definition initial valueautoapplies totrans
formable elementsinheritednopercentagesrefertosizeofcontainingblockcomputed valuefor <length> the absolute value, otherwise a percentageanimation typea position
formal syntax auto | <position>where <position> = [ [ left | center | right ] | [ top | center | bottom ] | [ left | center | right | <length-percentage> ] [ top | center | bottom | <length-...
opacity - CSS: Cascading Style Sheets
webaim: color contrast checker mdn understanding wcag, guideline 1.4 explanations understanding success criterion 1.4.3 | w3c understanding wcag 2.0
formal definition initial value1.0applies toall elementsinheritednocomputed valuethe specified value, clipped in the range [0,1]animation typea number
formal syntax <alpha-value>where <alpha-value> = <number> | <percentage> examples setting background opacity html <div class="light">you can barely see this.</div> <div class="medium">this is easier to see.</div> <div class="heavy">this is very e...
order - CSS: Cascading Style Sheets
flexbox & the keyboard navigation disconnect — tink source order matters | adrian roselli mdn understanding wcag, guideline 1.3 explanations understanding success criterion 1.3.2 | w3c understanding wcag 2.0
formal definition initial value0applies toflex items and absolutely-positioned flex container childreninheritednocomputed valueas specifiedanimation typean integer
formal syntax <integer> examples ordering items in a flex container this example uses css to create a classic two-sidebar layout surrounding a content block.
orphans - CSS: Cascading Style Sheets
formal definition initial value2applies toblock container elementsinheritedyescomputed valueas specifiedanimation typediscrete
formal syntax <integer> examples setting a minimum orphan size of three lines html <div> <p>this is the first paragraph containing some text.</p> <p>this is the second paragraph containing some more text than the first one.
outline-offset - CSS: Cascading Style Sheets
formal definition initial value0applies toall elementsinheritednocomputed valueas specified, but with relative lengths converted into absolute lengthsanimation typea length
formal syntax <length> examples setting outline offset in pixels html <p>gallia est omnis divisa in partes tres.</p> css p { outline: 1px dashed red; outline-offset: 10px; background: yellow; border: 1px solid blue...
outline-style - CSS: Cascading Style Sheets
formal definition initial valuenoneapplies toall elementsinheritednocomputed valueas specifiedanimation typediscrete
formal syntax auto | <'border-style'> examples setting outline style to auto the auto value indicates a custom outline style — typically a style [that] is either a user interface default for the plat
form, or perhaps a style that is richer than can be described in detail in css, ...
outline-width - CSS: Cascading Style Sheets
formal definition initial valuemediumapplies toall elementsinheritednocomputed valuean absolute length; if the keyword none is specified, the computed value is 0animation typea length
formal syntax <line-width>where <line-width> = <length> | thin | medium | thick examples setting an element's outline width html <span id="thin">thin</span> <span id="medium">medium</span> <span id="thick">thick</...
Guide to scroll anchoring - CSS: Cascading Style Sheets
these suppression triggers are changes to the computed value of any of the following properties: top, left, right, or bottom margin or padding any width or height-related properties trans
form additionally, position changes anywhere inside the scrolling box also disable scroll anchoring.
overflow-anchor - CSS: Cascading Style Sheets
formal definition initial valueautoapplies toall elementsinheritednocomputed valueas specifiedanimation typediscrete
formal syntax auto | none examples prevent scroll anchoring to prevent scroll anchoring in a document, use the overflow-anchor property.
overflow-wrap - CSS: Cascading Style Sheets
formal definition initial valuenormalapplies tonon-replaced inline elementsinheritedyescomputed valueas specifiedanimation typediscrete
formal syntax normal | break-word | anywhere examples comparing overflow-wrap, word-break, and hyphens this example compares the results of overflow-wrap, word-break, and hyphens when breaking up a long word.
overscroll-behavior-block - CSS: Cascading Style Sheets
formal definition initial valueautoapplies tonon-replaced block-level elements and non-replaced inline-block elementsinheritednocomputed valueas specifiedanimation typediscrete
formal syntax contain | none | auto examples preventing block overscrolling in this demo we have two block-level boxes, one inside the other.
overscroll-behavior-inline - CSS: Cascading Style Sheets
formal definition initial valueautoapplies tonon-replaced block-level elements and non-replaced inline-block elementsinheritednocomputed valueas specifiedanimation typediscrete
formal syntax contain | none | auto examples preventing inline overscrolling in this demo we have two block-level boxes, one inside the other.
overscroll-behavior-x - CSS: Cascading Style Sheets
formal definition initial valueautoapplies tonon-replaced block-level elements and non-replaced inline-block elementsinheritednocomputed valueas specifiedanimation typediscrete
formal syntax contain | none | auto examples preventing an underlying element from scrolling horizontally in our simple overscroll-behavior-x example (see source code also), we have two block-level boxes, one inside the o...
overscroll-behavior-y - CSS: Cascading Style Sheets
formal definition initial valueautoapplies tonon-replaced block-level elements and non-replaced inline-block elementsinheritednocomputed valueas specifiedanimation typediscrete
formal syntax contain | none | auto examples preventing an underlying element from scrolling vertically .messages { height: 220px; overflow: auto; overscroll-behavior-y: contain; } see overscroll-behavior for a fu...
overscroll-behavior - CSS: Cascading Style Sheets
formal definition initial valueautoapplies tonon-replaced block-level elements and non-replaced inline-block elementsinheritednocomputed valueas specifiedanimation typediscrete
formal syntax [ contain | none | auto ]{1,2} examples preventing an underlying element from scrolling in our overscroll-behavior example (see the source code also), we present a full-page list of fake contacts, and a dialo...
padding-block-end - CSS: Cascading Style Sheets
formal definition initial value0applies toall elementsinheritednopercentageslogical-width of containing blockcomputed valueas <length>animation typea length
formal syntax <'padding-left'> examples setting block end padding for vertical text html content <div> <p class="exampletext">example text</p> </div> css content div { background-color: yellow; width: 120px; height: 120px; } .
padding-block-start - CSS: Cascading Style Sheets
formal definition initial value0applies toall elementsinheritednopercentageslogical-width of containing blockcomputed valueas <length>animation typea length
formal syntax <'padding-left'> examples setting block start padding for vertical text html <div> <p class="exampletext">example text</p> </div> css div { background-color: yellow; width: 120px; height: 120px; } .exampletext { ...
padding-block - CSS: Cascading Style Sheets
formal definition initial value0applies toall elementsinheritednopercentageslogical-width of containing blockcomputed valueas <length>animation typediscrete
formal syntax <'padding-left'>{1,2} examples setting block padding for vertical text html <div> <p class="exampletext">example text</p> </div> css div { background-color: yellow; width: 120px; height: 120px; } .exampletext { w...
padding-inline-end - CSS: Cascading Style Sheets
formal definition initial value0applies toall elementsinheritednopercentageslogical-width of containing blockcomputed valueas <length>animation typea length
formal syntax <'padding-left'> examples setting inline end padding for vertical text html <div> <p class="exampletext">example text</p> </div> css div { background-color: yellow; width: 120px; height: 120px; } .exampletext { w...
padding-inline-start - CSS: Cascading Style Sheets
formal definition initial value0applies toall elementsinheritednopercentageslogical-width of containing blockcomputed valueas <length>animation typea length
formal syntax <'padding-left'> examples setting inline start padding for vertical text html <div> <p class="exampletext">example text</p> </div> css div { background-color: yellow; width: 120px; height: 120px; } .exampletext { ...
padding-inline - CSS: Cascading Style Sheets
formal definition initial value0applies toall elementsinheritednopercentageslogical-width of containing blockcomputed valueas <length>animation typediscrete
formal syntax <'padding-left'>{1,2} examples setting inline padding for vertical text html <div> <p class="exampletext">example text</p> </div> css div { background-color: yellow; width: 120px; height: 120px; } .exampletext { ...
paint-order - CSS: Cascading Style Sheets
formal definition initial valuenormalapplies totext elementsinheritedyescomputed valueas specifiedanimation typediscrete
formal syntax normal | [ fill | stroke | markers ] examples reversing the paint order of stroke and fill svg <svg xmlns="http://www.w3.org/2000/svg" width="400" height="200"> <text x="10" y="75">stroke in front</text> <text x="10" y="150" class="stroke-behind">stroke behi...
place-content - CSS: Cascading Style Sheets
stretch if the combined size of the items is less than the size of the alignment container, any auto-sized items have their size increased equally (not proportionally), while still respecting the constraints imposed by max-height/max-width (or equivalent functionality), so that the combined size exactly fills the alignment container
formal definition initial valuenormalapplies tomulti-line flex containersinheritednocomputed valueas specifiedanimation typediscrete
formal syntax <'align-content'> <'justify-content'>?
place-items - CSS: Cascading Style Sheets
formal definition initial valueas each of the properties of the shorthand:align-items: normaljustify-items: legacyapplies toall elementsinheritednocomputed valueas each of the properties of the shorthand:align-items: as specifiedjustify-items: as specifiedanimation typediscrete
formal syntax <'align-items'> <'justify-items'>?
pointer-events - CSS: Cascading Style Sheets
formal definition initial valueautoapplies toall elementsinheritedyescomputed valueas specifiedanimation typediscrete
formal syntax auto | none | visiblepainted | visiblefill | visiblestroke | visible | painted | fill | stroke | all | inherit examples disabling pointer events on all images this example disables pointer events (clicking, dragging, hovering, etc.) on all images.
<position> - CSS: Cascading Style Sheets
levant) */ keyword value /* a keyword for horizontal position, value for vertical position */ value keyword /* a value for horizontal position, keyword for vertical position */ value value /* a value for each direction (horizontal then vertical) */ /* 4-value syntax */ keyword value keyword value /* each value is an offset from the keyword that preceeds it */
formal syntax [ [ left | center | right ] || [ top | center | bottom ] | [ left | center | right | <length> | <percentage> ] [ top | center | bottom | <length> | <percentage> ]?
quotes - CSS: Cascading Style Sheets
formal definition initial valuedepends on user agentapplies toall elementsinheritedyescomputed valueas specifiedanimation typediscrete
formal syntax none | auto | [ <string> <string> ]+ examples basic quote marks html <q>to be or not to be.
radial-gradient() - CSS: Cascading Style Sheets
syntax /* a gradient at the center of its container, starting red, changing to blue, and finishing green */ radial-gradient(circle at center, red 0, blue, green 100%) values <position> the position of the gradient, interpreted in the same way as background-position or trans
form-origin.
repeat() - CSS: Cascading Style Sheets
the repeat() css function represents a repeated fragment of the track list, allowing a large number of columns or rows that exhibit a recurring pattern to be written in a more compact
form.
resize - CSS: Cascading Style Sheets
resize does not apply to the following: inline elements block elements for which the overflow property is set to visible
formal definition initial valuenoneapplies toelements with overflow other than visible, and optionally replaced elements representing images or videos, and iframesinheritednocomputed valueas specifiedanimation typediscrete
formal syntax none | both | horizontal | vertical | block | inline examples disabling resizability of textareas in many browsers, <textarea> elements are resizable by default.
right - CSS: Cascading Style Sheets
formal definition initial valueautoapplies topositioned elementsinheritednopercentagesrefer to the width of the containing blockcomputed valueif specified as a length, the corresponding absolute length; if specified as a percentage, the specified value; otherwise, autoanimation typea length, percentage or calc();
formal syntax <length> | <percentage> | auto examples absolute and relative position...
row-gap (grid-row-gap) - CSS: Cascading Style Sheets
formal definition initial valuenormalapplies tomulti-column elements, flex containers, grid containersinheritednopercentagesrefer to corresponding dimension of the content areacomputed valueas specified, with <length>s made absolute, and normal computing to zero except on multi-column elementsanimation typea length, percentage or calc();
formal syntax normal | <length-percentage>where <length-perce...
ruby-align - CSS: Cascading Style Sheets
formal definition initial valuespace-aroundapplies toruby bases, ruby annotations, ruby base containers, ruby annotation containersinheritedyescomputed valueas specifiedanimation typediscrete
formal syntax start | center | space-between | space-around examples ruby aligned at the start of the base text html <ruby> <rb>this is a long text to check</rb> <rp>(</rp><rt>short ruby</rt><rp>)<...
ruby-position - CSS: Cascading Style Sheets
formal definition initial valueoverapplies toruby annotations containersinheritedyescomputed valueas specifiedanimation typediscrete
formal syntax over | under | inter-character examples ruby positioned over the text html <ruby> <rb>超電磁砲</rb> <rp>(</rp><rt>レールガン</rt><rp>)</rp> </ruby> css ruby { ruby-position:over; } result ruby positioned under the text htm...
scroll-padding-block-end - CSS: Cascading Style Sheets
formal definition initial valueautoapplies toscroll containersinheritednopercentagesrelative to the scroll container's scrollportcomputed valueas specifiedanimation typeby computed value type
formal syntax auto | <length-percentage>where <length-percentage> = <length> | <percentage> specifications specification status comment css scroll snap module level 1the definitio...
scroll-padding-block-start - CSS: Cascading Style Sheets
formal definition initial valueautoapplies toscroll containersinheritednopercentagesrelative to the scroll container's scrollportcomputed valueas specifiedanimation typeby computed value type
formal syntax auto | <length-percentage>where <length-percentage> = <length> | <percentage> specifications specification status comment css scroll snap module level 1the definitio...
scroll-padding-block - CSS: Cascading Style Sheets
formal definition initial valueautoapplies toscroll containersinheritednopercentagesrelative to the scroll container's scrollportcomputed valueas specifiedanimation typeby computed value type
formal syntax [ auto | <length-percentage> ]{1,2}where <length-percentage> = <length> | <percentage> specifications specification status comment css scroll snap module level 1the ...
scroll-padding-bottom - CSS: Cascading Style Sheets
formal definition initial valueautoapplies toscroll containersinheritednopercentagesrelative to the scroll container's scrollportcomputed valueas specifiedanimation typeby computed value type
formal syntax auto | <length-percentage>where <length-percentage> = <length> | <percentage> specifications specification status comment css scroll snap module level 1the definitio...
scroll-padding-inline-end - CSS: Cascading Style Sheets
formal definition initial valueautoapplies toscroll containersinheritednopercentagesrelative to the scroll container's scrollportcomputed valueas specifiedanimation typeby computed value type
formal syntax auto | <length-percentage>where <length-percentage> = <length> | <percentage> specifications specification status comment css scroll snap module level 1the definitio...
scroll-padding-inline-start - CSS: Cascading Style Sheets
formal definition initial valueautoapplies toscroll containersinheritednopercentagesrelative to the scroll container's scrollportcomputed valueas specifiedanimation typeby computed value type
formal syntax auto | <length-percentage>where <length-percentage> = <length> | <percentage> specifications specification status comment css scroll snap module level 1the definitio...
scroll-padding-inline - CSS: Cascading Style Sheets
formal definition initial valueautoapplies toscroll containersinheritednopercentagesrelative to the scroll container's scrollportcomputed valueas specifiedanimation typeby computed value type
formal syntax [ auto | <length-percentage> ]{1,2}where <length-percentage> = <length> | <percentage> specifications specification status comment css scroll snap module level 1the ...
scroll-padding-left - CSS: Cascading Style Sheets
formal definition initial valueautoapplies toscroll containersinheritednopercentagesrelative to the scroll container's scrollportcomputed valueas specifiedanimation typeby computed value type
formal syntax auto | <length-percentage>where <length-percentage> = <length> | <percentage> specifications specification status comment css scroll snap module level 1the definitio...
scroll-padding-right - CSS: Cascading Style Sheets
formal definition initial valueautoapplies toscroll containersinheritednopercentagesrelative to the scroll container's scrollportcomputed valueas specifiedanimation typeby computed value type
formal syntax auto | <length-percentage>where <length-percentage> = <length> | <percentage> specifications specification status comment css scroll snap module level 1the definitio...
scroll-padding-top - CSS: Cascading Style Sheets
formal definition initial valueautoapplies toscroll containersinheritednopercentagesrelative to the scroll container's scrollportcomputed valueas specifiedanimation typeby computed value type
formal syntax auto | <length-percentage>where <length-percentage> = <length> | <percentage> specifications specification status comment css scroll snap module level 1the definitio...
scroll-padding - CSS: Cascading Style Sheets
formal definition initial valueautoapplies toscroll containersinheritednopercentagesrelative to the scroll container's scrollportcomputed valueas specifiedanimation typeby computed value type
formal syntax [ auto | <length-percentage> ]{1,4}where <length-percentage> = <length> | <percentage> specifications specification status comment css scroll snap module level 1the ...
scroll-snap-align - CSS: Cascading Style Sheets
formal definition initial valuenoneapplies toall elementsinheritednocomputed valueas specifiedanimation typediscrete
formal syntax [ none | start | end | center ]{1,2} specifications specification status comment css scroll snap module level 1the definition of 'scroll-snap-align' in that specification.
scroll-snap-destination - CSS: Cascading Style Sheets
formal definition initial value0px 0pxapplies toscroll containersinheritednopercentagesrelative to same axis of the padding-box of the scroll containercomputed valueas specified, but with relative lengths converted into absolute lengthsanimation typea position
formal syntax <position>where <position> = [ [ left | center | right ] | [ top | center | bottom ] | [ left | center | right | <length-perce...
scroll-snap-points-x - CSS: Cascading Style Sheets
formal definition initial valuenoneapplies toscroll containersinheritednopercentagesrelative to same axis of the padding-box of the scroll containercomputed valueas specified, but with relative lengths converted into absolute lengthsanimation typediscrete
formal syntax none | repeat( <length-percentage> )where <length-percentage> = <length> | <percentage> examples setting horizontal scroll snap p...
scroll-snap-points-y - CSS: Cascading Style Sheets
formal definition initial valuenoneapplies toscroll containersinheritednopercentagesrelative to same axis of the padding-box of the scroll containercomputed valueas specified, but with relative lengths converted into absolute lengthsanimation typediscrete
formal syntax none | repeat( <length-percentage> )where <length-percentage> = <length> | <percentage> examples setting vertical scroll snap poi...
scroll-snap-stop - CSS: Cascading Style Sheets
formal definition initial valuenormalapplies toall elementsinheritednocomputed valueas specifiedanimation typediscrete
formal syntax normal | always examples snapping in different axes this example is duplicated from scroll-snap-type with minor variances.
scroll-snap-type-x - CSS: Cascading Style Sheets
formal definition initial valuenoneapplies toscroll containersinheritednocomputed valueas specifiedanimation typediscrete
formal syntax none | mandatory | proximity specifications not part of any standard.
scroll-snap-type-y - CSS: Cascading Style Sheets
formal definition initial valuenoneapplies toscroll containersinheritednocomputed valueas specifiedanimation typediscrete
formal syntax none | mandatory | proximity specifications not part of any standard.
scroll-snap-type - CSS: Cascading Style Sheets
formal definition initial valuenoneapplies toall elementsinheritednocomputed valueas specifiedanimation typediscrete
formal syntax none | [ x | y | block | inline | both ] [ mandatory | proximity ]?
shape-image-threshold - CSS: Cascading Style Sheets
formal definition initial value0.0applies tofloatsinheritednocomputed valuethe same as the specified value after clipping the <number> to the range [0.0, 1.0].animation typea number
formal syntax <alpha-value>where <alpha-value> = <number> | <percentage> examples aligning text to a gradient this example creates a <div> block with a gradient background image.
shape-margin - CSS: Cascading Style Sheets
formal definition initial value0applies tofloatsinheritednopercentagesrefer to the width of the containing blockcomputed valueas specified, but with relative lengths converted into absolute lengthsanimation typea length, percentage or calc();
formal syntax <length-percentage>where <length-percentage> = <length> | <percentage> examples adding a margin to a polygon html <section> <div class="shap...
shape-outside - CSS: Cascading Style Sheets
formal definition initial valuenoneapplies tofloatsinheritednocomputed valueas defined for <basic-shape> (with <shape-box> following, if supplied), the <image> with its uri made absolute, otherwise as specified.animation typeyes, as specified for <basic-shape>, otherwise no
formal syntax none | <shape-box> | <basic-shape> | <image>where <shape-box> = <box> | margin-box<basic-shape> = <inset()> | <c...
tab-size - CSS: Cascading Style Sheets
formal definition initial value8applies toblock containersinheritedyescomputed valuethe specified integer or an absolute lengthanimation typea length
formal syntax <integer> | <length> examples expanding by character count pre { tab-size: 4; /* set tab size to 4 characters wide */ } collapse tabs pre { tab-size: 0; /* remove indentation */ } comparing to the default size this example c...
table-layout - CSS: Cascading Style Sheets
formal definition initial valueautoapplies totable and inline-table elementsinheritednocomputed valueas specifiedanimation typediscrete
formal syntax auto | fixed examples fixed-width tables with text-overflow this example uses a fixed table layout, combined with the width property, to restrict the table's width.
text-align-last - CSS: Cascading Style Sheets
formal definition initial valueautoapplies toblock containersinheritedyescomputed valueas specifiedanimation typediscrete
formal syntax auto | start | end | left | right | center | justify examples justifying the last line <p>integer elementum massa at nulla placerat varius.
text-align - CSS: Cascading Style Sheets
mdn understanding wcag, guideline 1.4 explanations understanding success criterion 1.4.8 | understanding wcag 2.0
formal definition initial valuestart, or a nameless value that acts as left if direction is ltr, right if direction is rtl if start is not supported by the browser.applies toblock containersinheritedyescomputed valueas specified, except for the match-parent value which is calculated against its parent's direction value and results in a computed value of either left or rightanimation typediscrete for...
text-combine-upright - CSS: Cascading Style Sheets
formal definition initial valuenoneapplies tonon-replaced inline elementsinheritedyescomputed valuespecified keyword, plus integer if 'digits'animation typediscrete
formal syntax none | all | [ digits <integer>?
text-decoration-skip-ink - CSS: Cascading Style Sheets
formal definition initial valueautoapplies toall elementsinheritedyescomputed valueas specifiedanimation typediscrete
formal syntax auto | all | none examples html <p>you should go on a quest for a cup of coffee.</p> <p class="no-skip-ink">or maybe you'd prefer some tea?</p> <p>この文は、 text-decoration-skip-ink: auto の使用例を示しています。</p> <p class="skip-ink-all">この�...
text-emphasis-color - CSS: Cascading Style Sheets
formal definition initial valuecurrentcolorapplies toall elementsinheritednocomputed valuecomputed coloranimation typea color
formal syntax <color>where <color> = <rgb()> | <rgba()> | <hsl()> | <hsla()> | <hex-color> | <named-color> | currentcolor | <deprecated-system-color>where <rgb()> = rgb( <percentage>{3} [ / <alpha-value> ]?
text-emphasis-style - CSS: Cascading Style Sheets
formal definition initial valuenoneapplies toall elementsinheritednocomputed valueas specifiedanimation typediscrete
formal syntax none | [ [ filled | open ] | [ dot | circle | double-circle | triangle | sesame ] ] | <string> examples h2 { text-emphasis-style: sesame; } specifications specification status comment css text decoration module level 3the definition of...
text-indent - CSS: Cascading Style Sheets
formal definition initial value0applies toblock containersinheritedyespercentagesrefer to the width of the containing blockcomputed valuethe percentage as specified or the absolute length, plus any keywords as specifiedanimation typea length, percentage or calc();
formal syntax <length-percentage> && hanging?
text-orientation - CSS: Cascading Style Sheets
formal definition initial valuemixedapplies toall elements, except table row groups, rows, column groups, and columnsinheritedyescomputed valueas specifiedanimation typediscrete
formal syntax mixed | upright | sideways examples html <p>lorem ipsum dolet semper quisquam.</p> css p { writing-mode: vertical-rl; text-orientation: upright; } result specifications specification ...
text-overflow - CSS: Cascading Style Sheets
formal definition initial valueclipapplies toblock container elementsinheritednocomputed valueas specifiedanimation typediscrete
formal syntax [ clip | ellipsis | <string> ]{1,2} examples css p { width: 200px; border: 1px solid; padding: 2px 5px; /* both of the following are required for text-overflow */ white-space: nowrap; overflow: hidden; } .overflow-visible { white-space: i...
text-size-adjust - CSS: Cascading Style Sheets
formal definition initial valueauto for smartphone browsers supporting inflation, none in other cases (and then not modifiable).applies toall elementsinheritedyespercentagesyes, refer to the corresponding size of the text fontcomputed valueas specifiedanimation typediscrete
formal syntax none | auto | <percentage> examples basic disabling usage as hinted at above, on a properly designed responsi...
top - CSS: Cascading Style Sheets
formal definition initial valueautoapplies topositioned elementsinheritednopercentagesrefer to the height of the containing blockcomputed valueif specified as a length, the corresponding absolute length; if specified as a percentage, the specified value; otherwise, autoanimation typea length, percentage or calc();
formal syntax <length> | <percentage> | auto examples body { background: beige; }...
touch-action - CSS: Cascading Style Sheets
mdn understanding wcag, guideline 1.4 explanations understanding success criterion 1.4.4 | understanding wcag 2.0
formal definition initial valueautoapplies toall elements except: non-replaced inline elements, table rows, row groups, table columns, and column groupsinheritednocomputed valueas specifiedanimation typediscrete
formal syntax auto | none | [ [ pan-x | pan-left | pan-right ] | [ pan-y | pan-up | pan-down ] | pinch-zoom ] | manipulation examples disabling all gestures the most common usage is to ...
transition-delay - CSS: Cascading Style Sheets
formal definition initial value0sapplies toall elements, ::before and ::after pseudo-elementsinheritednocomputed valueas specifiedanimation typediscrete
formal syntax <time># examples transition-delay: 0.5s <div class="parent"> <div class="box">lorem</div> </div> .parent { width: 250px; height:125px;} .box { width: 100px; height: 100px; background-color: red; font-size:...
transition-property - CSS: Cascading Style Sheets
formal definition initial valueallapplies toall elements, ::before and ::after pseudo-elementsinheritednocomputed valueas specifiedanimation typediscrete
formal syntax none | <single-transition-property>#where <single-transition-property> = all | <custom-ident> examples there are several examples of css transitions included in the main css transitions article.
url() - CSS: Cascading Style Sheets
formal syntax url( <string> <url-modifier>* ) examples content property html <ul> <li>item 1</li> <li>item 2</li> <li>item 3</li> </ul> css li::after { content: ' - ' url(https://mdn.mozillademos.org/files/16761/star.gif); } result data-uri html <div class="background"></div> css .background { height: 100vh; } .background { background: yellow; background: url("data:ima...
user-select - CSS: Cascading Style Sheets
formal definition initial valueautoapplies toall elementsinheritednocomputed valueas specifiedanimation typediscrete
formal syntax auto | text | none | contain | all examples html <p>you should be able to select this text.</p> <p class="unselectable">hey, you can't select this text!</p> <p class="all">clicking once will select all of this text.</p> css .unselectable { -moz-user-select: none...
visibility - CSS: Cascading Style Sheets
formal definition initial valuevisibleapplies toall elementsinheritedyescomputed valueas specifiedanimation typea visibility
formal syntax visible | hidden | collapse examples basic example html <p class="visible">the first paragraph is visible.</p> <p class="not-visible">the second paragraph is not visible.</p> <p class="visible">the third paragraph is visible.
white-space - CSS: Cascading Style Sheets
rapping end-of-line spaces normal collapse collapse wrap remove nowrap collapse collapse no wrap remove pre preserve preserve no wrap preserve pre-wrap preserve preserve wrap hang pre-line preserve collapse wrap remove break-spaces preserve preserve wrap wrap
formal definition initial valuenormalapplies toall elementsinheritedyescomputed valueas specifiedanimation typediscrete
formal syntax normal | pre | nowrap | pre-wrap | pre-line | break-spaces examples basic example code { white-space: pre; } line breaks inside <pre> elements pre { word-wrap: break-word; /* ie 5.5-7 */ white-space: pre-wrap; /* modern browsers */ } in action ...
widows - CSS: Cascading Style Sheets
formal definition initial value2applies toblock container elementsinheritedyescomputed valueas specifiedanimation typediscrete
formal syntax <integer> examples controlling column widows html <div> <p>this is the first paragraph containing some text.</p> <p>this is the second paragraph containing some more text than the first one.
word-break - CSS: Cascading Style Sheets
formal definition initial valuenormalapplies toall elementsinheritedyescomputed valueas specifiedanimation typediscrete
formal syntax normal | break-all | keep-all | break-word examples html <p>1.
writing-mode - CSS: Cascading Style Sheets
formal definition initial valuehorizontal-tbapplies toall elements except table row groups, table column groups, table rows, and table columnsinheritedyescomputed valueas specifiedanimation typediscrete
formal syntax horizontal-tb | vertical-rl | vertical-lr | sideways-rl | sideways-lr examples using multiple writing modes this example demonstrates all of the writing modes, showing each with tex...
z-index - CSS: Cascading Style Sheets
formal definition initial valueautoapplies topositioned elementsinheritednocomputed valueas specifiedanimation typean integercreates stacking contextyes
formal syntax auto | <integer> examples visually layering elements html <div class="dashed-box">dashed box <span class="gold-box">gold box</span> <span class="green-box">green box</span> </div> css .dashed-box { position: relative; z...
regexp:test() - EXSLT
i case insensitive match if this flag is specified, the match is per
formed in a case insensitive fashion.
Regular expressions (regexp) - EXSLT
regexp:match()regexp:match() per
forms regular expression matching on a string, returning the submatches found as a result.regexp:replace()regexp:replace() replaces the portions of a string that match a given regular expression with the contents of another string.regexp:test()regexp:test() tests to see whether a string matches a specified regular expression.
Sets (set) - EXSLT
xslt/xpath reference: xslt elements, exslt functions, xpath functions, xpath axes the exslt sets package offers functions that let you per
form set manipulation.
Index - Event reference
each event is represented by an object which is based on the event interface, and may have additional custom fields and/or functions used to get additional in
formation about what happened.
Community - Developer guides
ajax resources ajax workshops and courses skillsmatter.com: courses and events on javascript, ajax, and reverse ajax technologies telerik.com: an active community forum for ajax community.tableau.com: community support forum and courses available for ajax codementor.io: social plat
form with ajax forums and tutorials lynda.com: tutorials available for learning the fundamentals of ajax ajax interview questions and answer and answerinterwiki links ...
Guide to Web APIs - Developer guides
ent apiddomeencoding apiencrypted media extensionsffetch apifile system api frame timing apifullscreen apiggamepad api geolocation apihhtml drag and drop apihigh resolution timehistory apiiimage capture apiindexeddbintersection observer apillong tasks api mmedia capabilities api media capture and streamsmedia session apimedia source extensions mediastream recordingnnavigation timingnetwork in
formation api ppage visibility apipayment request apiper
formance apiper
formance timeline apipermissions apipointer eventspointer lock apiproximity events push api rresize observer apiresource timing apisserver sent eventsservice workers apistoragestorage access apistreams ttouch eventsuurl apivvibration apivisual viewport wweb animationsweb audio apiweb authentication apiweb crypto apiweb notific...
Web Audio playbackRate explained - Developer guides
playbackrate is a multiplier applied to the original rate.) a complete example let's create a <video> element first, and set up video and playback rate controls in html: <video id="myvideo" controls> <source src="https://udn.realityripple.com/samples/6f/08625b424a.m4v" type='video/mp4' /> <source src="https://udn.realityripple.com/samples/5b/8cd6da9c65.webm" type='video/webm' /> </video> <
form> <input id="pbr" type="range" value="1" min="0.5" max="4" step="0.1" > <p>playback rate <span id="currentpbr">1</span></p> </
form> and apply some javascript to it: window.onload = function () { var v = document.getelementbyid("myvideo"); var p = document.getelementbyid("pbr"); var c = document.getelementbyid("currentpbr"); p.addeventlistener('input',function(){ c.innerhtml = p...
Media buffering, seeking, and time ranges - Developer guides
in practice a good way to do this is use the seekable attribute, although as we have seen above seekable parts of the media are not neccessarily contiguous — they often are however and we can safely approximate this in
formation to give the user an indication of which parts of the media can be played directly.
Printing - Developer guides
you want to adjust the user experience of printing, such as presenting a specially-
formatted version of your content before printing begins.
The Unicode Bidirectional Text Algorithm - Developer guides
in memory order, from left to right right-to-left override (rlo) u+202e ‮ <bdo dir="rtl"> overrides the bidi algorithm and displays the embedded characters in reverse memory order, from right to left closing unicode bidi algorithm control characters character code point html entity markup equivalent description pop directional
formatting (pdf) u+202c ‬ closing whatever opening tag used the dir attribute used for rle or lre </bdo> used for rlo or lro pop directional isolate (pdi) u+2069 ⁩ closing whatever opening tag used the dir attribute used for rli, lri, or fsi ...
GET - HTTP
request has body no successful response has body yes safe yes idempotent yes cacheable yes allowed in html
forms yes syntax get /index.html specifications specification title rfc 7231, section 4.3.1: get hypertext transfer protocol (http/1.1): semantics and content ...
HEAD - HTTP
request has body no successful response has body no safe yes idempotent yes cacheable yes allowed in html
forms no syntax head /index.html specifications specification title rfc 7231, section 4.3.2: head hypertext transfer protocol (http/1.1): semantics and content ...
OPTIONS - HTTP
request has body no successful response has body yes safe yes idempotent yes cacheable no allowed in html
forms no syntax options /index.html http/1.1 options * http/1.1 examples identifying allowed request methods to find out which request methods a server supports, one can use the curl command-line program to issue an options request: curl -x options https://example.org -i the response then contains an allow header that holds the allowed methods: http/1.1 204 no content allow: options, get, head, post cache-control: max-...
PUT - HTTP
request has body yes successful response has body no safe no idempotent yes cacheable no allowed in html
forms no syntax put /new.html http/1.1 example request put /new.html http/1.1 host: example.com content-type: text/html content-length: 16 <p>new file</p> responses if the target resource does not have a current representation and the put request successfully creates one, then the origin server must in
form the user agent by sending a 201 (created) response.
Network Error Logging - HTTP
servfail) dns.address_changed for security reasons, if the server ip address that delivered the original report is different to the current server ip address at time of error generation, the report data will be downgraded to only include in
formation about this problem and the type set to dns.address_changed.
100 Continue - HTTP
the http 100 continue in
formational status response code indicates that everything so far is ok and that the client should continue with the request or ignore it if it is already finished.
103 Early Hints - HTTP
the http 103 early hints in
formation response status code is primarily intended to be used with the link header to allow the user agent to start preloading resources while the server is still preparing a response.
205 Reset Content - HTTP
the http 205 reset content response status tells the client to reset the document view, so for example to clear the content of a
form, reset a canvas state, or to refresh the ui.
301 Moved Permanently - HTTP
even if the specification requires the method (and the body) not to be altered when the redirection is per
formed, not all user-agents align with it - you can still find this type of bugged software out there.
302 Found - HTTP
even if the specification requires the method (and the body) not to be altered when the redirection is per
formed, not all user-agents con
form here - you can still find this type of bugged software out there.
400 Bad Request - HTTP
the hypertext transfer protocol (http) 400 bad request response status code indicates that the server cannot or will not process the request due to something that is perceived to be a client error (e.g., mal
formed request syntax, invalid request message framing, or deceptive request routing).
401 Unauthorized - HTTP
this status is sent with a www-authenticate header that contains in
formation on how to authorize correctly.
411 Length Required - HTTP
note: by specification, when sending data in a series of chunks, the content-length header is omitted and at the beginning of each chunk you need to add the length of the current chunk in hexadecimal
format.
SyntaxError: unterminated string literal - JavaScript
that
form looks like this: var longstring = 'this is a very long string which needs \ to wrap across multiple lines because \ otherwise my code is unreadable.'; another possibility is to use template literals, which are supported in ecmascript 2015 environments: var longstring = `this is a very long string which needs to wrap across multiple lines because otherwise m...
arguments.callee - JavaScript
1 : factorial(n - 1)*n; }); this has numerous benefits: the function can be called like any other from inside your code it does not create a variable in the outer scope (except for ie 8 and below) it has better per
formance than accessing the arguments object another feature that was deprecated was arguments.callee.caller, or more specifically function.caller.
getter - JavaScript
note the following when working with the get syntax: it can have an identifier which is either a number or a string; it must have exactly zero parameters (see incompatible es5 change: literal getter and setter functions must now have exactly zero or one arguments for more in
formation); it must not appear in an object literal with another get or with a data entry for the same property ({ get x() { }, get x() { } } and { x: ..., get x() { } } are forbidden).
Rest parameters - JavaScript
formally defined in function expression), while the arguments object contains all arguments passed to the function; the arguments object is not a real array, while rest parameters are array instances, meaning methods like sort, map, foreach or pop can be applied on it directly; the arguments object has additional functionality specific to itself (like the callee property).
setter - JavaScript
note the following when working with the set syntax: it can have an identifier which is either a number or a string; it must have exactly one parameter (see incompatible es5 change: literal getter and setter functions must now have exactly zero or one arguments for more in
formation); it must not appear in an object literal with another set or with a data entry for the same property.
Array.prototype.forEach() - JavaScript
converting a for loop to foreach const items = ['item1', 'item2', 'item3'] const copyitems = [] // before for (let i = 0; i < items.length; i++) { copyitems.push(items[i]) } // after items.foreach(function(item){ copyitems.push(item) }) printing the contents of an array note: in order to display the content of an array in the console, you can use console.table(), which prints a
formatted version of the array.
Array.prototype.indexOf() - JavaScript
} else // all else for (; i !== len; ++i) if (that[i] === member) return i return -1 // if the value was not found, then return -1 } })(object, math.max, math.min) however, if you are more interested in all the little technical bits defined by the ecma standard, and are less concerned about per
formance or conciseness, then you may find this more descriptive polyfill to be more useful.
Array.of() - JavaScript
for more in
formation, see: array.of() array.from() proposal array.of() polyfill polyfill running the following code before any other code will create array.of() if it's not natively available.
ArrayBuffer - JavaScript
it is an array of bytes, often referred to in other languages as a "byte array".you cannot directly manipulate the contents of an arraybuffer; instead, you create one of the typed array objects or a dataview object which represents the buffer in a specific
format, and use that to read and write the contents of the buffer.
BigInt - JavaScript
type in
formation when tested against typeof, a bigint will give "bigint": typeof 1n === 'bigint' // true typeof bigint('1') === 'bigint' // true when wrapped in an object, a bigint will be considered as a normal "object" type: typeof object(1n) === 'object' // true operators the following operators may be used with bigints (or object-wrapped bigints): +, *, -, **, %.
BigInt64Array - JavaScript
the bigint64array typed array represents an array of 64-bit signed integers in the plat
form byte order.
RegExp.$1-$9 - JavaScript
examples using $n with string.replace the following script uses the replace() method of the string instance to match a name in the
format first last and output it in the
format last, first.
Set - JavaScript
ew set([3, 4, 5, 6]) issuperset(seta, setb) // => true union(seta, setc) // => set [1, 2, 3, 4, 5, 6] intersection(seta, setc) // => set [3, 4] symmetricdifference(seta, setc) // => set [1, 2, 5, 6] difference(seta, setc) // => set [1, 2] relation with array objects let myarray = ['value1', 'value2', 'value3'] // use the regular set constructor to trans
form an array into a set let myset = new set(myarray) myset.has('value1') // returns true // use the spread operator to trans
form a set into an array.
String.prototype.blink() - JavaScript
examples using blink() the following example uses string methods to change the
formatting of a string: var worldstring = 'hello, world'; console.log(worldstring.blink()); // <blink>hello, world</blink> console.log(worldstring.bold()); // <b>hello, world</b> console.log(worldstring.italics()); // <i>hello, world</i> console.log(worldstring.strike()); // <strike>hello, world</strike> specifications specification ecmascript (ecma-262)the definition of 's...
String.prototype.bold() - JavaScript
examples using bold() the following example uses string methods to change the
formatting of a string: var worldstring = 'hello, world'; console.log(worldstring.blink()); // <blink>hello, world</blink> console.log(worldstring.bold()); // <b>hello, world</b> console.log(worldstring.italics()); // <i>hello, world</i> console.log(worldstring.strike()); // <strike>hello, world</strike> specifications specification ecmascript (ecma-262)the definition of 'string.prototype.bold' in that specification.
String.prototype.codePointAt() - JavaScript
x); var second; if ( // check if it’s the start of a surrogate pair first >= 0xd800 && first <= 0xdbff && // high surrogate size > index + 1 // there is a next code unit ) { second = string.charcodeat(index + 1); if (second >= 0xdc00 && second <= 0xdfff) { // low surrogate // https://mathiasbynens.be/notes/javascript-encoding#surrogate-
formulae return (first - 0xd800) * 0x400 + second - 0xdc00 + 0x10000; } } return first; }; if (defineproperty) { defineproperty(string.prototype, 'codepointat', { 'value': codepointat, 'configurable': true, 'writable': true }); } else { string.prototype.codepointat = codepointat; } }()); } examples using codep...
String.prototype.fixed() - JavaScript
examples using fixed() the following example uses the fixed method to change the
formatting of a string: var worldstring = 'hello, world'; console.log(worldstring.fixed()); // "<tt>hello, world</tt>" specifications specification ecmascript (ecma-262)the definition of 'string.prototype.fixed' in that specification.
String.fromCodePoint() - JavaScript
les decimals and negatives if (!(codepoint < 0x10ffff && (codepoint>>>0) === codepoint)) throw rangeerror("invalid code point: " + codepoint); if (codepoint <= 0xffff) { // bmp code point codelen = codeunits.push(codepoint); } else { // astral code point; split in surrogate halves // https://mathiasbynens.be/notes/javascript-encoding#surrogate-
formulae codepoint -= 0x10000; codelen = codeunits.push( (codepoint >> 10) + 0xd800, // highsurrogate (codepoint % 0x400) + 0xdc00 // lowsurrogate ); } if (codelen >= 0x3fff) { result += stringfromcharcode.apply(null, codeunits); codeunits.length = 0; } } return result + stringfromcharcode.ap...
String.prototype.indexOf() - JavaScript
eturns 0 'hello world'.indexof('', 0) // returns 0 'hello world'.indexof('', 3) // returns 3 'hello world'.indexof('', 8) // returns 8 however, with any fromindex value equal to or greater than the string's length, the returned value is the string's length: 'hello world'.indexof('', 11) // returns 11 'hello world'.indexof('', 13) // returns 11 'hello world'.indexof('', 22) // returns 11 in the
former instance, js seems to find an empty string just after the specified index value.
String.prototype.italics() - JavaScript
examples using italics() the following example uses string methods to change the
formatting of a string: var worldstring = 'hello, world'; console.log(worldstring.blink()); // <blink>hello, world</blink> console.log(worldstring.bold()); // <b>hello, world</b> console.log(worldstring.italics()); // <i>hello, world</i> console.log(worldstring.strike()); // <strike>hello, world</strike> specifications specification ecmascript (ecma-262)the definition of 'string.prototype.italics' in that specification.
String.prototype.search() - JavaScript
(if you only want to know if it exists, use the similar test() method on the regexp prototype, which returns a boolean.) for more in
formation (but slower execution) use match() (similar to the regular expression exec() method).
String.prototype.startsWith() - JavaScript
rawpos|0 : 0; return this.substring(pos, pos + search.length) === search; } }); } a more robust (fully es2015 specification compliant), but less per
formant and compact, polyfill is available on github by mathias bynens.
String.prototype.strike() - JavaScript
examples using strike() the following example uses string methods to change the
formatting of a string: var worldstring = 'hello, world'; console.log(worldstring.blink()); // <blink>hello, world</blink> console.log(worldstring.bold()); // <b>hello, world</b> console.log(worldstring.italics()); // <i>hello, world</i> console.log(worldstring.strike()); // <strike>hello, world</strike> specifications specification ecmascript (ecma-262)the definition of 'string.prototype.strike' in that spe...
String.prototype.sub() - JavaScript
examples using sub() and sup() methods the following example uses the sub() and sup() methods to
format a string: var supertext = 'superscript'; var subtext = 'subscript'; console.log('this is what a ' + supertext.sup() + ' looks like.'); // this is what a <sup>superscript</sup> looks like console.log('this is what a ' + subtext.sub() + ' looks like.'); // this is what a <sub>subscript</sub> looks like.
String.prototype.sup() - JavaScript
examples using sub() and sup() methods the following example uses the sub() and sup() methods to
format a string: var supertext = 'superscript'; var subtext = 'subscript'; console.log('this is what a ' + supertext.sup() + ' looks like.'); // "this is what a <sup>superscript</sup> looks like." console.log('this is what a ' + subtext.sub() + ' looks like.'); // "this is what a <sub>subscript</sub> looks like." specifications specification ecmascript (ecma-262)the definition of 'string.prototype.sup' in that specifi...
SyntaxError - JavaScript
it is thrown when the javascript engine encounters tokens or token order that does not con
form to the syntax of the language when parsing code.
TypeError() constructor - JavaScript
the typeerror() constructor creates a new error when an operation could not be per
formed, typically (but not exclusively) when a value is not of the expected type.
TypeError - JavaScript
the typeerror object represents an error when an operation could not be per
formed, typically (but not exclusively) when a value is not of the expected type.
URIError() constructor - JavaScript
examples catching an urierror try { decodeuricomponent('%') } catch (e) { console.log(e instanceof urierror) // true console.log(e.message) // "mal
formed uri sequence" console.log(e.name) // "urierror" console.log(e.filename) // "scratchpad/1" console.log(e.linenumber) // 2 console.log(e.columnnumber) // 2 console.log(e.stack) // "@scratchpad/2:2:3\n" } creating an urierror try { throw new urierror('hello', 'somefile.js', 10) } catch (e) { console.log(e instanceof urie...
delete operator - JavaScript
therefore, to avoid syntax errors in strict mode, you must use the delete operator in the
form of delete object.property or delete object['property'].
instanceof - JavaScript
for instance, [] instanceof window.frames[0].array will return false, because array.prototype !== window.frames[0].array and arrays inherit from the
former.
new.target - JavaScript
normally, the left-hand side of the dot is the object on which property access is per
formed, but here, new is not an object.
for...in - JavaScript
iterating over own properties only if you only want to consider properties attached to the object itself, and not its prototypes, use getownpropertynames() or per
form a hasownproperty() check (propertyisenumerable() can also be used).
for...of - JavaScript
ject to examine all of the parameters passed into a javascript function: (function() { for (const argument of arguments) { console.log(argument); } })(1, 2, 3); // 1 // 2 // 3 iterating over a dom collection iterating over dom collections like nodelist: the following example adds a read class to paragraphs that are direct descendants of an article: // note: this will only work in plat
forms that have // implemented nodelist.prototype[symbol.iterator] const articleparagraphs = document.queryselectorall('article > p'); for (const paragraph of articleparagraphs) { paragraph.classlist.add('read'); } closing iterators in for...of loops, abrupt iteration termination can be caused by break, throw or return.
for - JavaScript
it checks that i is less than nine, per
forms the two succeeding statements, and increments i by 1 after each pass through the loop.
return - JavaScript
return a + b; is trans
formed by asi into: return; a + b; the console will warn "unreachable code after return statement".
switch - JavaScript
(see the section what happens if i forgot a break?) this is an example of a single operation sequential case statement, where four different values per
form exactly the same.
Trailing commas - JavaScript
furthermore, when using a rest parameters, trailing commas are not allowed: function f(,) {} // syntaxerror: missing
formal parameter (,) => {}; // syntaxerror: expected expression, got ',' f(,) // syntaxerror: expected expression, got ',' function f(...p,) {} // syntaxerror: parameter after rest parameter (...p,) => {} // syntaxerror: expected closing parenthesis, got ',' trailing commas in destructuring a trailing comma is also allowed on the left-hand side when using destructuring ass...
JavaScript reference - JavaScript
uint32array float32array float64array bigint64array biguint64array keyed collections map set weakmap weakset structured data arraybuffer sharedarraybuffer atomics dataview json control abstraction promise generator generatorfunction asyncfunction reflection reflect proxy internationalization intl intl.collator intl.datetime
format intl.displaynames intl.list
format intl.locale intl.number
format intl.pluralrules intl.relativetime
format webassembly webassembly webassembly.module webassembly.instance webassembly.memory webassembly.table webassembly.compileerror webassembly.linkerror webassembly.runtimeerror statements javascript statements and declarations control flowb...
attributeName - SVG: Scalable Vector Graphics
four elements are using this attribute: <animate>, <animatecolor>, <animatetrans
form>, and <set> html, body, svg { height: 100%; } <svg viewbox="0 0 250 250" xmlns="http://www.w3.org/2000/svg"> <rect x="50" y="50" width="100" height="100"> <animate attributetype="xml" attributename="y" from="0" to="50" dur="5s" repeatcount="indefinite"/> </rect> </svg> usage notes value <name> default value none animatable no <name> this value indicates the name of the css property or attribute of the target element to be animated.
attributeType - SVG: Scalable Vector Graphics
four elements are using this attribute: <animate>, <animatecolor>, <animatetrans
form>, and <set> html, body, svg { height: 100%; } <svg viewbox="0 0 250 250" xmlns="http://www.w3.org/2000/svg"> <rect x="50" y="50" width="100" height="100"> <animate attributetype="xml" attributename="y" from="0" to="50" dur="5s" repeatcount="indefinite"/> </rect> </svg> usage notes value css | xml | auto default value auto animatable no css this value specifies that the value of attributename is the name of a css property defined as animatable.
azimuth - SVG: Scalable Vector Graphics
id="distantlight1"> <fediffuselighting> <fedistantlight azimuth="0" /> </fediffuselighting> </filter> <filter id="distantlight2"> <fediffuselighting> <fedistantlight azimuth="240" /> </fediffuselighting> </filter> <circle cx="100" cy="100" r="80" style="filter: url(#distantlight1);" /> <circle cx="100" cy="100" r="80" style="filter: url(#distantlight2); trans
form: translatex(240px);" /> </svg> usage notes value <number> default value 0 animatable yes specifications specification status comment filter effects module level 1the definition of 'azimuth' in that specification.
baseFrequency - SVG: Scalable Vector Graphics
00/svg"> <filter id="noise1" x="0" y="0" width="100%" height="100%"> <feturbulence basefrequency="0.025" /> </filter> <filter id="noise2" x="0" y="0" width="100%" height="100%"> <feturbulence basefrequency="0.05" /> </filter> <rect x="0" y="0" width="200" height="200" style="filter: url(#noise1);" /> <rect x="0" y="0" width="200" height="200" style="filter: url(#noise2); trans
form: translatex(220px);" /> </svg> usage notes value <number-optional-number> default value 0 animatable yes <number-optional-number> if two numbers are provided, the first one represents the base frequency in the horizontal direction and the second one the base frequency in the vertical direction.
begin - SVG: Scalable Vector Graphics
six elements are using this attribute: <animate>, <animatecolor>, <animatemotion>, <animatetrans
form>, <discard>, and <set> animate, animatecolor, animatemotion, animatetrans
form, set for <animate>, <animatecolor>, <animatemotion>, <animatetrans
form>, and <set>, begin defines when the element should begin, i.e.
by - SVG: Scalable Vector Graphics
four elements are using this attribute: <animate>, <animatecolor>, <animatemotion>, and <animatetrans
form> html, body, svg { height: 100%; } <svg viewbox="0 0 200 200" xmlns="http://www.w3.org/2000/svg"> <rect x="10" y="10" width="100" height="100"> <animate attributename="width" fill="freeze" by="50" dur="3s"/> </rect> </svg> usage notes value see below default value none animatable no the exact value type for this attribute depends on the value of the attribute that wil...
calcMode - SVG: Scalable Vector Graphics
four elements are using this attribute: <animate>, <animatecolor>, <animatemotion>, and <animatetrans
form> usage notes value discrete | linear | paced | spline default value linear animatable no discrete this specifies that the animation function will jump from one value to the next without any interpolation.
clip-path - SVG: Scalable Vector Graphics
this is the same as having a custom clipping path with a clippathunits set to userspaceonuse --> <rect x="11" y="11" width="8" height="8" stroke="green" clip-path="circle() view-box" /> </svg> usage notes value <url> | [ <basic-shape> || <geometry-box> ] | none default value none animatable yes <geometry-box> an extra in
formation to tell how a <basic-shape> is applied to an element: fill-box indicates to use the object bounding box; stroke-box indicates to use the object bounding box extended with the stroke; view-box indicates to use the nearest svg viewport as the reference box.
diffuseConstant - SVG: Scalable Vector Graphics
lter> <filter id="diffuselighting2" x="0" y="0" width="100%" height="100%"> <fediffuselighting in="sourcegraphic" diffuseconstant="2"> <fepointlight x="60" y="60" z="20" /> </fediffuselighting> </filter> <rect x="0" y="0" width="200" height="200" style="filter: url(#diffuselighting1);" /> <rect x="0" y="0" width="200" height="200" style="filter: url(#diffuselighting2); trans
form: translatex(220px);" /> </svg> usage notes value <number> default value 1 animatable yes specifications specification status comment filter effects module level 1the definition of 'diffuseconstant' in that specification.
fr - SVG: Scalable Vector Graphics
rkseagreen"/> </radialgradient> <radialgradient id="gradient2" cx="0.5" cy="0.5" r="0.5" fx="0.35" fy="0.35" fr="25%"> <stop offset="0%" stop-color="white"/> <stop offset="100%" stop-color="darkseagreen"/> </radialgradient> </defs> <circle cx="100" cy="100" r="100" fill="url(#gradient1)" /> <circle cx="100" cy="100" r="100" fill="url(#gradient2)" style="trans
form: translatex(240px);" /> </svg> usage notes value <length> default value 0 animatable none example <svg viewbox="0 0 120 120" width="200" height="200" xmlns="http://www.w3.org/2000/svg"> <defs> <radialgradient id="gradient" cx="0.5" cy="0.5" r="0.5" fx="0.35" fy="0.35" fr="5%"> <stop offset="0%" stop-color="red"/> <stop off...
from - SVG: Scalable Vector Graphics
four elements are using this attribute: <animate>, <animatecolor>, <animatemotion>, and <animatetrans
form> html, body, svg { height: 100%; } <svg viewbox="0 0 200 200" xmlns="http://www.w3.org/2000/svg"> <rect x="10" y="10" height="100"> <animate attributename="width" fill="freeze" from="100" to="150" dur="3s"/> </rect> </svg> usage notes value see below default value none animatable no the exact value type for this attribute depends on t...
fx - SVG: Scalable Vector Graphics
arkseagreen"/> </radialgradient> <radialgradient id="gradient2" cx="0.5" cy="0.5" r="0.5" fx="0.75" fy="0.35" fr="5%"> <stop offset="0%" stop-color="white"/> <stop offset="100%" stop-color="darkseagreen"/> </radialgradient> </defs> <circle cx="100" cy="100" r="100" fill="url(#gradient1)" /> <circle cx="100" cy="100" r="100" fill="url(#gradient2)" style="trans
form: translatex(240px);" /> </svg> usage notes value <length> default value coincides with the presentational value of cx for the element whether the value for cx was inherited or not.
fy - SVG: Scalable Vector Graphics
arkseagreen"/> </radialgradient> <radialgradient id="gradient2" cx="0.5" cy="0.5" r="0.5" fx="0.35" fy="0.75" fr="5%"> <stop offset="0%" stop-color="white"/> <stop offset="100%" stop-color="darkseagreen"/> </radialgradient> </defs> <circle cx="100" cy="100" r="100" fill="url(#gradient1)" /> <circle cx="100" cy="100" r="100" fill="url(#gradient2)" style="trans
form: translatex(240px);" /> </svg> usage notes value <length> default value coincides with the presentational value of cy for the element whether the value for cy was inherited or not.
glyph-name - SVG: Scalable Vector Graphics
the glyph names can be used in situations where unicode character numbers do not provide sufficient in
formation to access the correct glyph, such as when there are multiple glyphs per unicode character.
intercept - SVG: Scalable Vector Graphics
e="linear" intercept="0.3"/> <fefuncg type="linear" intercept="0.1"/> <fefuncb type="linear" intercept="0.8"/> </fecomponenttransfer> </filter> <rect x="0" y="0" width="200" height="200" fill="url(#gradient)" style="filter: url(#componenttransfer1);" /> <rect x="0" y="0" width="200" height="200" fill="url(#gradient)" style="filter: url(#componenttransfer2); trans
form: translatex(220px);" /> </svg> usage notes value <number> default value 0 animatable yes specifications specification status comment filter effects module level 1the definition of 'intercept' in that specification.
kernelMatrix - SVG: Scalable Vector Graphics
="100%" height="100%"> <feconvolvematrix kernelmatrix="-1 0 0 0 0 0 0 0 1"/> </filter> <image xlink:href="//developer.mozilla.org/files/6457/mdn_logo_only_color.png" width="200" height="200" style="filter:url(#convolvematrix1);"/> <image xlink:href="//developer.mozilla.org/files/6457/mdn_logo_only_color.png" width="200" height="200" style="filter:url(#convolvematrix2); trans
form:translatex(220px);"/> </svg> usage notes value <list of numbers> default value none animatable yes <list of numbers> the list of <number>s that make up the kernel matrix for the convolution.
keyPoints - SVG: Scalable Vector Graphics
five elements are using this attribute: <animate>, <animatecolor>, <animatemotion>, <animatetrans
form>, and <set> html, body, svg { height: 100%; } <svg viewbox="0 0 120 120" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"> <path d="m10,110 a120,120 -45 0,1 110 10 a120,120 -45 0,1 10,110" stroke="lightgrey" stroke-width="2" fill="none" id="motionpath"/> <circle cx="10" cy="110" r="3" fill="lightgrey"/> <circle cx="110" cy="10" r="3" fill="lightgrey"/> <circle r="5" fill="red"> <animatemotion dur="3s" repeatcount="indefinite" keypoints="0;0.5;1" keytimes="0;0.15;1" calcmode="linear"> <mpath xlink:href="#motionpath"/> </animatemotion> </circle> ...
keySplines - SVG: Scalable Vector Graphics
four elements are using this attribute: <animate>, <animatecolor>, <animatemotion>, and <animatetrans
form> html, body, svg { height: 100%; } <svg viewbox="0 0 120 120" xmlns="http://www.w3.org/2000/svg"> <circle cx="60" cy="10" r="10"> <animate attributename="cx" dur="4s" calcmode="spline" repeatcount="indefinite" values="60 ; 110 ; 60 ; 10 ; 60" keytimes="0 ; 0.25 ; 0.5 ; 0.75 ; 1" keysplines="0.5 0 0.5 1 ; 0.5 0 0.5 1 ; 0.5 0 0.5 1 ; 0.5 0 0.5 1"/> <animate attribut...
keyTimes - SVG: Scalable Vector Graphics
four elements are using this attribute: <animate>, <animatecolor>, <animatemotion>, and <animatetrans
form> html, body, svg { height: 100%; } <svg viewbox="0 0 120 120" xmlns="http://www.w3.org/2000/svg"> <circle cx="60" cy="10" r="10"> <animate attributename="cx" dur="4s" repeatcount="indefinite" values="60 ; 110 ; 60 ; 10 ; 60" keytimes="0 ; 0.25 ; 0.5 ; 0.75 ; 1"/> <animate attributename="cy" dur="4s" repeatcount="indefinite" values="10 ; 60 ; 110 ; 60 ; 10" keytime...
lighting-color - SVG: Scalable Vector Graphics
er> <filter id="diffuselighting2" x="0" y="0" width="100%" height="100%"> <fediffuselighting in="sourcegraphic" lighting-color="blue"> <fepointlight x="60" y="60" z="20" /> </fediffuselighting> </filter> <rect x="0" y="0" width="200" height="200" style="filter: url(#diffuselighting1);" /> <rect x="0" y="0" width="200" height="200" style="filter: url(#diffuselighting2); trans
form: translatex(220px);" /> </svg> usage notes value color default value white animatable yes specifications specification status comment filter effects module level 1the definition of 'lighting-color' in that specification.
limitingConeAngle - SVG: Scalable Vector Graphics
d="spotlight2" x="0" y="0" width="100%" height="100%"> <fediffuselighting diffuseconstant="2"> <fespotlight x="10" y="10" z="50" pointsatx="100" pointsaty="100" limitingconeangle="40" /> </fediffuselighting> </filter> <rect x="0" y="0" width="200" height="200" style="filter: url(#spotlight1);" /> <rect x="0" y="0" width="200" height="200" style="filter: url(#spotlight2); trans
form: translatex(220px);" /> </svg> usage notes value <number> default value 0 animatable yes specifications specification status comment filter effects module level 1the definition of 'limitingconeangle' in that specification.
max - SVG: Scalable Vector Graphics
five elements are using this attribute: <animate>, <animatecolor>, <animatemotion>, <animatetrans
form>, and <set> html, body, svg { height: 100%; } <svg viewbox="0 0 120 120" xmlns="http://www.w3.org/2000/svg"> <circle cx="60" cy="10" r="10"> <animate attributename="cx" dur="4s" max="6s" repeatcount="indefinite" values="60 ; 110 ; 60 ; 10 ; 60" keytimes="0 ; 0.25 ; 0.5 ; 0.75 ; 1"/> <animate attributename="cy" dur="4s" max="6s" repeatcount="indefinite" values="10 ; 60 ; 110 ; 60 ; 10" keytimes="0 ; 0.25 ; 0.5 ; 0.75 ; 1"/> </circle> </svg> usage notes value <clock-value> default value none animatable no <clock-value> specifies...
min - SVG: Scalable Vector Graphics
five elements are using this attribute: <animate>, <animatecolor>, <animatemotion>, <animatetrans
form>, and <set> html, body, svg { height: 100%; } <svg viewbox="0 0 120 120" xmlns="http://www.w3.org/2000/svg"> <circle cx="60" cy="10" r="10"> <animate attributename="cx" dur="4s" min="2s" repeatcount="indefinite" values="60 ; 110 ; 60 ; 10 ; 60" keytimes="0 ; 0.25 ; 0.5 ; 0.75 ; 1"/> <animate attributename="cy" dur="4s" min="2s" repeatcount="indefinite" values="10 ; 60 ; 110 ; 60 ; 10" keytimes="0 ; 0.25 ; 0.5 ; 0.75 ; 1"/> </circle> </svg> usage notes value <clock-value> default value 0 animatable no <clock-value> specifies th...
mode - SVG: Scalable Vector Graphics
en" flood-opacity="1"/> <feblend in="sourcegraphic" in2="floodfill" mode="color-dodge"/> </filter> <image xlink:href="//developer.mozilla.org/files/6457/mdn_logo_only_color.png" width="200" height="200" style="filter:url(#blending1);"/> <image xlink:href="//developer.mozilla.org/files/6457/mdn_logo_only_color.png" width="200" height="200" style="filter:url(#blending2); trans
form:translatex(220px);"/> </svg> usage notes value <blend-mode> default value normal animatable yes for a description of the values, see <blend-mode>.
onclick - SVG: Scalable Vector Graphics
thirty-seven elements are using this attribute: <a>, <altglyph>, <animate>, <animatemotion>, <animatetrans
form>, <circle>, <defs>, <desc>, <ellipse>, <foreignobject>, <g>, <image>, <line>, <lineargradient>, <marker>, <metadata>, <mpath>, <path>, <pattern>, <polygon>, <polyline>, <radialgradient>, <rect>, <script>, <set>, <stop>, <style>, <svg>, <switch>, <symbol>, <text>, <textpath>, <title>, <tref>, <tspan>, <use>, <view> html, body, svg { height: 100%; margin: 0; } <svg viewbox="0 0 200 200" xmlns="http://www.w3.org/2000/svg"> <circle cx="100" cy="100" r="100" onclick="alert('you have clicked the circle.')" /> </svg> usage notes value <anything> default value none ...
pointer-events - SVG: Scalable Vector Graphics
will change color whether you are clicking on the circle or the rect itself --> <rect x="10" y="0" height="10" width="10" fill="black" /> <circle cx="15" cy="5" r="4" fill="white" pointer-events="none" /> </svg> window.addeventlistener('mouseup', (e) => { // let's pick a random color between #000000 and #ffffff const color = math.round(math.random() * 0xffffff) // let's
format the color to fit css requirements const fill = '#' + color.tostring(16).padstart(6,'0') // let's apply our color in the // element we actually clicked on e.target.style.fill = fill }) as a presentation attribute, it can be applied to any element but it is mostly relevant only on the following twenty-three elements: <a>, <circle>, <clippath>, <defs>, <ellipse>, <foreignobject>, <g>,...
points - SVG: Scalable Vector Graphics
two elements are using this attribute: <polyline>, and <polygon> html,body,svg { height:100% } <svg viewbox="-10 -10 220 120" xmlns="http://www.w3.org/2000/svg"> <!-- polyline is an open shape --> <polyline stroke="black" fill="none" points="50,0 21,90 98,35 2,35 79,90"/> <!-- polygon is a closed shape --> <polygon stroke="black" fill="none" trans
form="translate(100,0)" points="50,0 21,90 98,35 2,35 79,90"/> <!-- it is usualy considered best practices to separate a x and y coordinate with a comma and a group of coordinates by a space.
pointsAtX - SVG: Scalable Vector Graphics
/fediffuselighting> </filter> <filter id="lighting2" x="0" y="0" width="100%" height="100%"> <fediffuselighting in="sourcegraphic"> <fespotlight x="60" y="60" z="50" pointsatx="400" /> </fediffuselighting> </filter> <rect x="0" y="0" width="200" height="200" style="filter: url(#lighting1);" /> <rect x="0" y="0" width="200" height="200" style="filter: url(#lighting2); trans
form: translatex(220px);" /> </svg> usage notes default value 0 value <number> animatable yes specifications specification status comment filter effects module level 1the definition of 'pointsatx' in that specification.
pointsAtY - SVG: Scalable Vector Graphics
/fediffuselighting> </filter> <filter id="lighting2" x="0" y="0" width="100%" height="100%"> <fediffuselighting in="sourcegraphic"> <fespotlight x="60" y="60" z="50" pointsaty="400" /> </fediffuselighting> </filter> <rect x="0" y="0" width="200" height="200" style="filter: url(#lighting1);" /> <rect x="0" y="0" width="200" height="200" style="filter: url(#lighting2); trans
form: translatex(220px);" /> </svg> usage notes default value 0 value <number> animatable yes specifications specification status comment filter effects module level 1the definition of 'pointsaty' in that specification.
pointsAtZ - SVG: Scalable Vector Graphics
fediffuselighting> </filter> <filter id="lighting2" x="0" y="0" width="100%" height="100%"> <fediffuselighting in="sourcegraphic"> <fespotlight x="100" y="100" z="50" pointsatz="80" /> </fediffuselighting> </filter> <rect x="0" y="0" width="200" height="200" style="filter: url(#lighting1);" /> <rect x="0" y="0" width="200" height="200" style="filter: url(#lighting2); trans
form: translatex(220px);" /> </svg> usage notes default value 0 value <number> animatable yes specifications specification status comment filter effects module level 1the definition of 'pointsatz' in that specification.
preserveAlpha - SVG: Scalable Vector Graphics
<feconvolvematrix kernelmatrix="1 -1 2 0 0 0 0 0 -2" preservealpha="false"/> </filter> <image xlink:href="//developer.mozilla.org/files/6457/mdn_logo_only_color.png" width="200" height="200" style="filter:url(#convolvematrix1);"/> <image xlink:href="//developer.mozilla.org/files/6457/mdn_logo_only_color.png" width="200" height="200" style="filter:url(#convolvematrix2); trans
form:translatex(220px);"/> </svg> usage notes default value false value true | false animatable yes true this value indicates that the convolution will only apply to the color channels.
refX - SVG: Scalable Vector Graphics
symbol for <symbol>, refx defines the x coordinate of the symbol, which is defined by the cumulative effect of the x attribute and any trans
formations on the <symbol> and its host <use> element.
refY - SVG: Scalable Vector Graphics
symbol for <symbol>, refy defines the y coordinate of the symbol, which is defined by the cumulative effect of the y attribute and any trans
formations on the <symbol> and its host <use> element.
repeatCount - SVG: Scalable Vector Graphics
five elements are using this attribute: <animate>, <animatecolor>, <animatemotion>, <animatetrans
form>, and <set> html, body, svg { height: 100%; } <svg viewbox="0 0 220 150" xmlns="http://www.w3.org/2000/svg"> <rect x="0" y="0" width="100" height="100"> <animate attributetype="xml" attributename="y" from="0" to="50" dur="1s" repeatcount="5"/> </rect> <rect x="120" y="0" width="100" height="100"> <animate attributetype="xml" attributename="y" from="0" to="50" dur="1s" repeatcount="indefinite"/> </rect> </svg> usage notes value <number> | indefinite default value none animatable no <number> this value specifies the numb...
repeatDur - SVG: Scalable Vector Graphics
five elements are using this attribute: <animate>, <animatecolor>, <animatemotion>, <animatetrans
form>, and <set> html, body, svg { height: 100%; } <svg viewbox="0 0 220 150" xmlns="http://www.w3.org/2000/svg"> <rect x="0" y="0" width="100" height="100"> <animate attributetype="xml" attributename="y" from="0" to="50" dur="1s" repeatdur="5s"/> </rect> <rect x="120" y="0" width="100" height="100"> <animate attributetype="xml" attributename="y" from="0" to="50" dur="1s" repeatdur="indefinite"/> </rect> </svg> usage notes value <clock-value> | indefinite default values none animatable no <clock-value> this value specifies the...
requiredExtensions - SVG: Scalable Vector Graphics
the iri names for the extension should include versioning in
formation, such as "http://example.org/svgextensionxyz/1.0", so that script writers can distinguish between different versions of a given extension.
restart - SVG: Scalable Vector Graphics
five elements are using this attribute: <animate>, <animatecolor>, <animatemotion>, <animatetrans
form>, and <set> html, body, svg { height: 100%; } a { fill: blue; text-decoration: underline; cursor: pointer; } <svg viewbox="0 0 220 200" xmlns="http://www.w3.org/2000/svg"> <rect y="30" width="100" height="100"> <animate attributetype="xml" attributename="y" from="30" to="100" dur="5s" repeatcount="1" restart="always" /> </rect> <rect x="120" y="30" width="100" height="100"> <animate attributetype="xml" attributename="y" from="30" to="100" dur="5s" repeatcount="1" restart="whennotactive"/> </rect> <a id="restart"><text y="20">restart animation</text></a> </svg> document.ge...
scale - SVG: Scalable Vector Graphics
mentfilter2" x="-20%" y="-20%" width="140%" height="140%"> <feturbulence type="turbulence" basefrequency="0.05" numoctaves="2" result="turbulence"/> <fedisplacementmap in2="turbulence" in="sourcegraphic" scale="50"/> </filter> <circle cx="100" cy="100" r="80" style="filter: url(#displacementfilter);""/> <circle cx="100" cy="100" r="80" style="filter: url(#displacementfilter2); trans
form: translatex(240px);""/> </svg> usage notes value <number> default value none animatable yes <number> this value defines the scale factor for the displacement.
seed - SVG: Scalable Vector Graphics
id="noise1" x="0" y="0" width="100%" height="100%"> <feturbulence basefrequency="0.025" seed="0" /> </filter> <filter id="noise2" x="0" y="0" width="100%" height="100%"> <feturbulence basefrequency="0.025" seed="100" /> </filter> <rect x="0" y="0" width="200" height="200" style="filter:url(#noise1);" /> <rect x="0" y="0" width="200" height="200" style="filter:url(#noise2); trans
form: translatex(220px);" /> </svg> usage notes value <number> default value 0 animatable yes example <svg width="200" height="200" viewbox="0 0 220 220" xmlns="http://www.w3.org/2000/svg"> <filter id="displacementfilter"> <feturbulence basefrequency="0.05" seed="1000" result="turbulence"/> <fedisplacementmap in2="turbulence" in="...
specularConstant - SVG: Scalable Vector Graphics
r id="specularlighting2" x="0" y="0" width="100%" height="100%"> <fespecularlighting in="sourcegraphic" specularconstant="0.8"> <fepointlight x="60" y="60" z="20" /> </fespecularlighting> </filter> <rect x="0" y="0" width="200" height="200" style="filter: url(#specularlighting1);" /> <rect x="0" y="0" width="200" height="200" style="filter: url(#specularlighting2); trans
form: translatex(220px);" /> </svg> usage notes value <number> default value 1 animatable yes specifications specification status comment filter effects module level 1the definition of 'specularconstant' in that specification.
specularExponent - SVG: Scalable Vector Graphics
filter id="diffuselighting2" x="0" y="0" width="100%" height="100%"> <fespecularlighting in="sourcegraphic" specularexponent="5"> <fepointlight x="60" y="60" z="20" /> </fespecularlighting> </filter> <rect x="0" y="0" width="200" height="200" style="filter: url(#diffuselighting1);" /> <rect x="0" y="0" width="200" height="200" style="filter: url(#diffuselighting2); trans
form: translatex(220px);" /> </svg> fespecularlighting for <fespecularlighting>, specularexponent defines the exponent value for the specular term.
stdDeviation - SVG: Scalable Vector Graphics
nblur stddeviation="1" /> </filter> <filter id="gaussianblur2"> <fegaussianblur stddeviation="5" /> </filter> <filter id="gaussianblur3" x="-30%" y="-30%" width="160%" height="160%"> <fegaussianblur stddeviation="10" /> </filter> <circle cx="100" cy="100" r="50" style="filter: url(#gaussianblur1);" /> <circle cx="100" cy="100" r="50" style="filter: url(#gaussianblur2); trans
form: translatex(140px);" /> <circle cx="100" cy="100" r="50" style="filter: url(#gaussianblur3); trans
form: translatex(280px);" /> </svg> usage notes value <number-optional-number> default value 0 animatable yes <number-optional-number> if two numbers are provided, the first number represents a standard deviation value along the x-axis.
stroke-miterlimit - SVG: Scalable Vector Graphics
the ratio of miter length (distance between the outer tip and the inner corner of the miter) to stroke-width is directly related to the angle (theta) between the segments in user space by the
formula: stroke-miterlimit = miterlength stroke-width = 1 sin ( θ 2 ) for example, a miter limit of 1.414 converts miters to bevels for theta less than 90 degrees, a limit of 4.0 converts them for theta less than approximately 29 degrees, and a limit of 10.0 converts them for theta less than approximately 11.5 degrees.
stroke - SVG: Scalable Vector Graphics
legend compatibility unknown compatibility unknown note: for in
formation on using the context-stroke (and context-fill) values from html documents, see the documentation for the non-standard -moz-context-properties property.
surfaceScale - SVG: Scalable Vector Graphics
filter> <filter id="diffuselighting2" x="0" y="0" width="100%" height="100%"> <fediffuselighting in="sourcegraphic" surfacescale="15"> <fepointlight x="60" y="60" z="20" /> </fediffuselighting> </filter> <rect x="0" y="0" width="200" height="200" style="filter: url(#diffuselighting1);" /> <rect x="0" y="0" width="200" height="200" style="filter: url(#diffuselighting2); trans
form: translatex(220px);" /> </svg> fespecularlighting for <fespecularlighting>, surfacescale defines the height of the surface.
systemLanguage - SVG: Scalable Vector Graphics
35 elements are using this attribute: <a>, <altglyph>, <animate>, <animatecolor>, <animatemotion>, <animatetrans
form>, <audio>, <canvas>, <circle>, <clippath>, <cursor>, <defs>, <discard>, <ellipse>, <foreignobject>, <g>, <iframe>, <image>, <line>, <mask>, <path>, <pattern>, <polygon>, <polyline>, <rect>, <set>, <svg>, <switch>, <text>, <textpath>, <tref>, <tspan>, <unknown>, <use>, and <video> usage notes value <language-tags> default value none animatable no <language-tags> the value is a set of comma-separated tokens, each of which must be a language-tag value, as defined in bcp 47.
tableValues - SVG: Scalable Vector Graphics
table" tablevalues="1 0"/> <fefuncg type="table" tablevalues="1 0"/> <fefuncb type="table" tablevalues="1 0"/> </fecomponenttransfer> </filter> <rect x="0" y="0" width="200" height="200" fill="url(#gradient)" style="filter: url(#componenttransfer1);" /> <rect x="0" y="0" width="200" height="200" fill="url(#gradient)" style="filter: url(#componenttransfer2); trans
form: translatex(220px);" /> </svg> usage notes value <list-of-numbers> default value empty list resulting in identity transfer animatable yes <list-of-numbers> this value holds a comma- and/or space-separated list of <number>s, which define a lookup table for the color component transfer function.
text-anchor - SVG: Scalable Vector Graphics
the text-anchor attribute is used to align (start-, middle- or end-alignment) a string of pre-
formatted text or auto-wrapped text where the wrapping area is determined from the inline-size property relative to a given point.
xlink:arcrole - SVG: Scalable Vector Graphics
for example, a resource might generically represent a "person," but in the context of a particular arc it might have the role of "mother" and in the context of a different arc it might have the role of "daughter." twentytwo elements are using this attribute: <a>, <altglyph>, <animate>, <animatecolor>, <animatemotion>, <animatetrans
form>, <color-profile>, <cursor>, <feimage>, <filter>, <font-face-uri>, <glyphref>, <image>, <lineargradient>, <mpath>, <pattern>, <radialgradient>, <script>, <set>, <textpath>, <tref>, <use> usage notes value <iri> default value none animatable no <iri> this value specifies an iri reference that identifies some resource that describes the intended prope...
xlink:type - SVG: Scalable Vector Graphics
twentytwo elements are using this attribute: <a>, <altglyph>, <animate>, <animatecolor>, <animatemotion>, <animatetrans
form>, <color-profile>, <cursor>, <feimage>, <filter>, <font-face-uri>, <glyphref>, <image>, <lineargradient>, <mpath>, <pattern>, <radialgradient>, <script>, <set>, <textpath>, <tref>, and <use> usage notes value simple default value simple animatable no simple this value specifies that the referred resource is a simple link.
xml:lang - SVG: Scalable Vector Graphics
the most common syntax is a value
formed by a lowercase two-character part for the language and an uppercase two-character part for the region or country, separated by a minus sign, e.g.
z - SVG: Scalable Vector Graphics
fuselighting> </filter> <filter id="diffuselighting2" x="0" y="0" width="100%" height="100%"> <fediffuselighting in="sourcegraphic"> <fepointlight x="60" y="60" z="50" /> </fediffuselighting> </filter> <rect x="0" y="0" width="200" height="200" style="filter: url(#diffuselighting1);" /> <rect x="0" y="0" width="200" height="200" style="filter: url(#diffuselighting2); trans
form: translatex(220px);" /> </svg> fepointlight for <fepointlight>, z defines the location along the z-axis for the light source in the coordinate system established by the primitiveunits attribute on the <filter> element.
<a> - SVG: Scalable Vector Graphics
ent element event attributes, graphical event attributes presentation attributes most notably: clip-path, clip-rule, color, color-interpolation, color-rendering, cursor, display, fill, fill-opacity, fill-rule, filter, mask, opacity, pointer-events, shape-rendering, stroke, stroke-dasharray, stroke-dashoffset, stroke-linecap, stroke-linejoin, stroke-miterlimit, stroke-opacity, stroke-width, trans
form, vector-effect, visibility xlink attributes most notably: xlink:title aria attributes aria-activedescendant, aria-atomic, aria-autocomplete, aria-busy, aria-checked, aria-colcount, aria-colindex, aria-colspan, aria-controls, aria-current, aria-describedby, aria-details, aria-disabled, aria-dropeffect, aria-errormessage, aria-expanded, aria-flowto, aria-grabbed, aria-haspopup, aria-hidden, ari...
<circle> - SVG: Scalable Vector Graphics
tes global event attributes, graphical event attributes presentation attributes most notably: clip-path, clip-rule, color, color-interpolation, color-rendering, cursor, display, fill, fill-opacity, fill-rule, filter, mask, opacity, pointer-events, shape-rendering, stroke, stroke-dasharray, stroke-dashoffset, stroke-linecap, stroke-linejoin, stroke-miterlimit, stroke-opacity, stroke-width, trans
form, vector-effect, visibility aria attributes aria-activedescendant, aria-atomic, aria-autocomplete, aria-busy, aria-checked, aria-colcount, aria-colindex, aria-colspan, aria-controls, aria-current, aria-describedby, aria-details, aria-disabled, aria-dropeffect, aria-errormessage, aria-expanded, aria-flowto, aria-grabbed, aria-haspopup, aria-hidden, aria-invalid, aria-keyshortcuts, aria-label, ari...
<clipPath> - SVG: Scalable Vector Graphics
styling attributes class, style conditional processing attributes most notably: requiredextensions, systemlanguage presentation attributes most notably: clip-path, clip-rule, color, display, fill, fill-opacity, fill-rule, filter, mask, opacity, shape-rendering, stroke, stroke-dasharray, stroke-dashoffset, stroke-linecap, stroke-linejoin, stroke-miterlimit, stroke-opacity, stroke-width, trans
form, vector-effect, visibility usage notes categoriesnonepermitted contentany number of the following elements, in any order:animation elementsdescriptive elementsshape elements<text>, <use> specifications specification status comment css masking module level 1the definition of '<clippath>' in that specification.
<feImage> - SVG: Scalable Vector Graphics
the <feimage> svg filter primitive fetches image data from an external source and provides the pixel data as output (meaning if the external source is an svg image, it is rasterized.) usage context categoriesfilter primitive elementpermitted contentany number of the following elements, in any order:<animate>, <animatetrans
form>, <set> attributes global attributes core attributes presentation attributes filter primitive attributes xlink attributes class style externalresourcesrequired specific attributes preserveaspectratio xlink:href dom interface this element implements the svgfeimageelement interface.
<font-face-uri> - SVG: Scalable Vector Graphics
usage context categoriesfont elementpermitted contentany number of the following elements, in any order:<font-face-
format> attributes global attributes core attributes xlink attributes specific attributes xlink:href dom interface this element implements the svgfontfaceurielement interface.
<foreignObject> - SVG: Scalable Vector Graphics
ment event attributes, document element event attributes presentation attributes most notably: clip-path, clip-rule, color, color-interpolation, color-rendering, cursor, display, fill, fill-opacity, fill-rule, filter, mask, opacity, pointer-events, shape-rendering, stroke, stroke-dasharray, stroke-dashoffset, stroke-linecap, stroke-linejoin, stroke-miterlimit, stroke-opacity, stroke-width, trans
form, vector-effect, visibility aria attributes aria-activedescendant, aria-atomic, aria-autocomplete, aria-busy, aria-checked, aria-colcount, aria-colindex, aria-colspan, aria-controls, aria-current, aria-describedby, aria-details, aria-disabled, aria-dropeffect, aria-errormessage, aria-expanded, aria-flowto, aria-grabbed, aria-haspopup, aria-hidden, aria-invalid, aria-keyshortcuts, aria-label, ari...
<glyph> - SVG: Scalable Vector Graphics
>, <altglyphdef>, <clippath>, <color-profile>, <cursor>, <filter>, <font>, <font-face>, <foreignobject>, <image>, <marker>, <mask>, <pattern>, <script>, <style>, <switch>, <text>, <view> attributes global attributes core attributes presentation attributes class style specific attributes d horiz-adv-x vert-origin-x vert-origin-y vert-adv-y unicode glyph-name orientation arabic-
form lang dom interface this element implements the svgglyphelement interface.
<glyphRef> - SVG: Scalable Vector Graphics
usage context categoriestext content elementpermitted contentempty attributes global attributes core attributes » presentation attributes » xlink attributes » class style specific attributes x y dx dy glyphref
format xlink:href dom interface this element implements the svgglyphrefelement interface.
<hatch> - SVG: Scalable Vector Graphics
context categoriesnever-rendered element, paint server elementpermitted contentany number of the following elements, in any order:animation elementsdescriptive elements<hatchpath>, <script>, <style> attributes global attributes core attributes global event attributes presentation attributes style attributes specific attributes x y pitch rotate hatchunits hatchcontentunits trans
form href dom interface this element implements the svghatchelement interface.
<line> - SVG: Scalable Vector Graphics
tes global event attributes, graphical event attributes presentation attributes most notably: clip-path, clip-rule, color, color-interpolation, color-rendering, cursor, display, fill, fill-opacity, fill-rule, filter, mask, opacity, pointer-events, shape-rendering, stroke, stroke-dasharray, stroke-dashoffset, stroke-linecap, stroke-linejoin, stroke-miterlimit, stroke-opacity, stroke-width, trans
form, vector-effect, visibility aria attributes aria-activedescendant, aria-atomic, aria-autocomplete, aria-busy, aria-checked, aria-colcount, aria-colindex, aria-colspan, aria-controls, aria-current, aria-describedby, aria-details, aria-disabled, aria-dropeffect, aria-errormessage, aria-expanded, aria-flowto, aria-grabbed, aria-haspopup, aria-hidden, aria-invalid, aria-keyshortcuts, aria-label, ari...
<mask> - SVG: Scalable Vector Graphics
styling attributes class, style conditional processing attributes most notably: requiredextensions, systemlanguage presentation attributes most notably: clip-path, clip-rule, color, display, fill, fill-opacity, fill-rule, filter, mask, opacity, shape-rendering, stroke, stroke-dasharray, stroke-dashoffset, stroke-linecap, stroke-linejoin, stroke-miterlimit, stroke-opacity, stroke-width, trans
form, vector-effect, visibility usage notes categoriescontainer elementpermitted contentany number of the following elements, in any order:animation elementsdescriptive elementsshape elementsstructural elementsgradient elements<a>, <altglyphdef>, <clippath>, <color-profile>, <cursor>, <filter>, <font>, <font-face>, <foreignobject>, <image>, <marker>, <mask>, <pattern>, <script>, <style>, <switch>, ...
<path> - SVG: Scalable Vector Graphics
tes global event attributes, graphical event attributes presentation attributes most notably: clip-path, clip-rule, color, color-interpolation, color-rendering, cursor, display, fill, fill-opacity, fill-rule, filter, mask, opacity, pointer-events, shape-rendering, stroke, stroke-dasharray, stroke-dashoffset, stroke-linecap, stroke-linejoin, stroke-miterlimit, stroke-opacity, stroke-width, trans
form, vector-effect, visibility aria attributes aria-activedescendant, aria-atomic, aria-autocomplete, aria-busy, aria-checked, aria-colcount, aria-colindex, aria-colspan, aria-controls, aria-current, aria-describedby, aria-details, aria-disabled, aria-dropeffect, aria-errormessage, aria-expanded, aria-flowto, aria-grabbed, aria-haspopup, aria-hidden, aria-invalid, aria-keyshortcuts, aria-label, ari...
<polygon> - SVG: Scalable Vector Graphics
tes global event attributes, graphical event attributes presentation attributes most notably: clip-path, clip-rule, color, color-interpolation, color-rendering, cursor, display, fill, fill-opacity, fill-rule, filter, mask, opacity, pointer-events, shape-rendering, stroke, stroke-dasharray, stroke-dashoffset, stroke-linecap, stroke-linejoin, stroke-miterlimit, stroke-opacity, stroke-width, trans
form, vector-effect, visibility aria attributes aria-activedescendant, aria-atomic, aria-autocomplete, aria-busy, aria-checked, aria-colcount, aria-colindex, aria-colspan, aria-controls, aria-current, aria-describedby, aria-details, aria-disabled, aria-dropeffect, aria-errormessage, aria-expanded, aria-flowto, aria-grabbed, aria-haspopup, aria-hidden, aria-invalid, aria-keyshortcuts, aria-label, ari...
<polyline> - SVG: Scalable Vector Graphics
tes global event attributes, graphical event attributes presentation attributes most notably: clip-path, clip-rule, color, color-interpolation, color-rendering, cursor, display, fill, fill-opacity, fill-rule, filter, mask, opacity, pointer-events, shape-rendering, stroke, stroke-dasharray, stroke-dashoffset, stroke-linecap, stroke-linejoin, stroke-miterlimit, stroke-opacity, stroke-width, trans
form, vector-effect, visibility aria attributes aria-activedescendant, aria-atomic, aria-autocomplete, aria-busy, aria-checked, aria-colcount, aria-colindex, aria-colspan, aria-controls, aria-current, aria-describedby, aria-details, aria-disabled, aria-dropeffect, aria-errormessage, aria-expanded, aria-flowto, aria-grabbed, aria-haspopup, aria-hidden, aria-invalid, aria-keyshortcuts, aria-label, ari...
<rect> - SVG: Scalable Vector Graphics
tes global event attributes, graphical event attributes presentation attributes most notably: clip-path, clip-rule, color, color-interpolation, color-rendering, cursor, display, fill, fill-opacity, fill-rule, filter, mask, opacity, pointer-events, shape-rendering, stroke, stroke-dasharray, stroke-dashoffset, stroke-linecap, stroke-linejoin, stroke-miterlimit, stroke-opacity, stroke-width, trans
form, vector-effect, visibility aria attributes aria-activedescendant, aria-atomic, aria-autocomplete, aria-busy, aria-checked, aria-colcount, aria-colindex, aria-colspan, aria-controls, aria-current, aria-describedby, aria-details, aria-disabled, aria-dropeffect, aria-errormessage, aria-expanded, aria-flowto, aria-grabbed, aria-haspopup, aria-hidden, aria-invalid, aria-keyshortcuts, aria-label, ari...
<stop> - SVG: Scalable Vector Graphics
html,body,svg { height:100% } <svg viewbox="0 0 10 10" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"> <defs> <lineargradient id="mygradient" gradienttrans
form="rotate(90)"> <stop offset="5%" stop-color="gold" /> <stop offset="95%" stop-color="red" /> </lineargradient> </defs> <!-- using my linear gradient --> <circle cx="5" cy="5" r="4" fill="url('#mygradient')" /> </svg> attributes offset this attribute defines where the gradient stop is placed along the gradient vector.
<switch> - SVG: Scalable Vector Graphics
categoriescontainer elementpermitted contentany number of the following elements, in any order:animation elementsdescriptive elementsshape elements<a>, <foreignobject>, <g>, <image>, <svg>, <switch>, <text>, <use> attributes global attributes conditional processing attributes core attributes graphical event attributes presentation attributes class style externalresourcesrequired trans
form dom interface this element implements the svgswitchelement interface.
<text> - SVG: Scalable Vector Graphics
aphical event attributes presentation attributes most notably: clip-path, clip-rule, color, color-interpolation, color-rendering, cursor, display, dominant-baseline, fill, fill-opacity, fill-rule, filter, mask, opacity, pointer-events, shape-rendering, stroke, stroke-dasharray, stroke-dashoffset, stroke-linecap, stroke-linejoin, stroke-miterlimit, stroke-opacity, stroke-width, text-anchor, trans
form, vector-effect, visibility aria attributes aria-activedescendant, aria-atomic, aria-autocomplete, aria-busy, aria-checked, aria-colcount, aria-colindex, aria-colspan, aria-controls, aria-current, aria-describedby, aria-details, aria-disabled, aria-dropeffect, aria-errormessage, aria-expanded, aria-flowto, aria-grabbed, aria-haspopup, aria-hidden, aria-invalid, aria-keyshortcuts, aria-label, ari...
<textPath> - SVG: Scalable Vector Graphics
tes global event attributes, graphical event attributes presentation attributes most notably: clip-path, clip-rule, color, color-interpolation, color-rendering, cursor, display, fill, fill-opacity, fill-rule, filter, mask, opacity, pointer-events, shape-rendering, stroke, stroke-dasharray, stroke-dashoffset, stroke-linecap, stroke-linejoin, stroke-miterlimit, stroke-opacity, stroke-width, trans
form, vector-effect, visibility aria attributes aria-activedescendant, aria-atomic, aria-autocomplete, aria-busy, aria-checked, aria-colcount, aria-colindex, aria-colspan, aria-controls, aria-current, aria-describedby, aria-details, aria-disabled, aria-dropeffect, aria-errormessage, aria-expanded, aria-flowto, aria-grabbed, aria-haspopup, aria-hidden, aria-invalid, aria-keyshortcuts, aria-label, ari...
<tspan> - SVG: Scalable Vector Graphics
aphical event attributes presentation attributes most notably: clip-path, clip-rule, color, color-interpolation, color-rendering, cursor, display, dominant-baseline, fill, fill-opacity, fill-rule, filter, mask, opacity, pointer-events, shape-rendering, stroke, stroke-dasharray, stroke-dashoffset, stroke-linecap, stroke-linejoin, stroke-miterlimit, stroke-opacity, stroke-width, text-anchor, trans
form, vector-effect, visibility aria attributes aria-activedescendant, aria-atomic, aria-autocomplete, aria-busy, aria-checked, aria-colcount, aria-colindex, aria-colspan, aria-controls, aria-current, aria-describedby, aria-details, aria-disabled, aria-dropeffect, aria-errormessage, aria-expanded, aria-flowto, aria-grabbed, aria-haspopup, aria-hidden, aria-invalid, aria-keyshortcuts, aria-label, ari...
SVG Tutorial - SVG: Scalable Vector Graphics
introducing svg from scratch introduction getting started positions basic shapes paths fills and strokes gradients patterns texts basic trans
formations clipping and masking other content in svg filter effects svg fonts svg image tag tools for svg svg and css the following topics are more advanced and hence should get their own tutorials.
Using templates and slots - Web Components
and because we are appending its contents to a shadow dom, we can include some styling in
formation inside the template in a <style> element, which is then encapsulated inside the custom element.