Search completed in 1.36 seconds.
Browser Detection and Cross Browser Support - Archive of obsolete content
improper
browser detection can lead to web maintenance nightmares.
... rethinking the basics of when and how to detect user agents is crucial to creating maintainable, cross
browser web content.
... this article reviews several approaches to
browser detection, their usefulness in specific circumstances to arrive at a common sense approach to
browser detection.
...And 131 more matches
Tabbed browser - Archive of obsolete content
here you should find a set of useful code snippets to help you work with firefox's tabbed
browser.
...these snippets assume they are run in the context of a
browser window.
... if you need to work with tabs from a non-
browser window, you need to obtain a reference to one first, see working with windows in chrome code for details.
...And 60 more matches
Browser API
the html
browser api is an extension of the html <iframe> element that allows web apps to implement
browsers or
browser-like applications.
...
browser api concepts and usage the
browser api consists of two major parts: custom <iframe> attributes: by adding a moz
browser attribute to the <iframe> element we can make it appear like a top-level
browser window to the embedded content.
...
browser api interfaces to support the requirement of a
browser <iframe>, the htmliframeelement dom interface has been extended with new methods that give the <iframe> some super powers.
...And 53 more matches
Browser detection using the user agent - HTTP
serving different web pages or services to different
browsers is usually a bad idea.
... the web is meant to be accessible to everyone, regardless of which
browser or device they're using.
... there are ways to develop your website to progressively enhance itself based on the availability of features rather than by targeting specific
browsers.
...And 50 more matches
Introduction to cross browser testing - Learn web development
overview: cross
browser testing next this article starts the module off by providing an overview of the topic of (cross)
browser testing, answering questions such as "what is cross
browser testing?", "what are the most common types of problems you'll encounter?", and "what are the main approaches for testing, identifying, and fixing problems?" prerequisites: familiarity with the core html, css, and javascript languages.
... objective: to gain an understanding of the high-level concepts involved in cross
browser testing.
... what is cross
browser testing?
...And 48 more matches
Supporting older browsers - Learn web development
however, there will be visitors to your site who use older
browsers, or
browsers which do not support the methods you have used.
... this will always be the case on the web — as new features are developed, different
browsers will prioritise different things.
... prerequisites: html basics (study introduction to html), and an idea of how css works (study introduction to css and styling boxes.) objective: to understand how to provide support for your layouts on older
browsers that might not support the features you want to use.
...And 37 more matches
browser - Archive of obsolete content
« xul reference home [ examples | attributes | properties | methods | related ] a xul <
browser> element represents a frame which is expected to contain a view of a web document.
... are you here looking for information about the firefox web
browser, or because you'd like to download the latest version of firefox?
... get firefox most of the properties and methods of the
browser will rarely be used and can only be called from chrome urls.
...And 35 more matches
tabbrowser - Archive of obsolete content
it is similar to the
browser element, except that multiple documents can be displayed, each in a separate tab.
... attributes autocompleteenabled, autocompletepopup, autoscroll, contentcontextmenu, contenttooltip, handlectrlpageupdown, onbookmarkgroup, onnewtab, tabmodalpromptshowing properties
browsers, cangoback, cangoforward, contentdocument, contenttitle, contentvieweredit, contentviewerfile, contentwindow, currenturi, docshell, documentcharsetinfo, homepage, markupdocumentviewer, securityui, selected
browser, selectedtab, sessionhistory, tabcontainer, tabs, visibletabs, web
browserfind, webnavigation, webprogress methods addprogresslistener, addtab, addtabsprogresslistener,appendgroup, get
browseratindex, get
browserinde...
...xfordocument, get
browserfordocument, get
browserfortab, geticon, getnotificationbox, gettabfor
browser, gettabmodalpromptbox, goback, gobackgroup, goforward, goforwardgroup, gohome, gotoindex, loadgroup, loadonetab, loadtabs, loaduri, loaduriwithflags, movetabto, pintab, reload, reloadalltabs, reloadtab, reloadwithflags, removealltabsbut, removecurrenttab, removeprogresslistener, removetab, removetabsprogresslistener,replacegroup, selecttabatindex, seticon, showonlythesetabs, stop, unpintab attributes autocompleteenabled type: boolean set to true to enable autocomplete of fields.
...And 34 more matches
Browser Console - Firefox Developer Tools
the
browser console is like the web console, but applied to the whole
browser rather than a single content tab.
...however, rather than logging this information for a single content tab, it logs information for all content tabs, for add-ons, and for the
browser's own code.
... if you also want to use the other web developer tools in the regular web toolbox with add-on or
browser code, consider using the
browser toolbox.
...And 28 more matches
Populating the page: how browsers work - Web Performance
to understand how to improve performance and perceived performance, it helps to understand how the
browser works.
... two major issues in web performance 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.
... for the most part,
browsers are considered single threaded.
...And 28 more matches
Using the Browser API
the html
browser api is an extension of the html <iframe> element that allows web apps to implement
browsers or
browser-like applications.
... it was originally used in firefox os to implement
browser applications before that project was cancelled; since firefox 47 it is available to desktop chrome code and used in places like the firefox devtools.
... it consists of two major parts: custom <iframe> attributes: by adding a moz
browser attribute to the <iframe> element we can make it appear like a top-level
browser window to the embedded content.
...And 26 more matches
Creating a cross-browser video player - Developer guides
this article describes a simple html5 video player that uses the media and fullscreen apis and works across most major desktop and mobile
browsers.
... as well as working fullscreen, the player features custom controls rather than just using the
browser defaults.
...doing things this way still allows users who have javascript turned off (for whatever reason) to still have access to the
browser's native controls.
...And 26 more matches
HTML forms in legacy browsers - Learn web development
our worst curse is legacy
browsers.
... okay, let's admit it, when we said "legacy
browser" we all have in mind safari or old versions of internet explorer, but they are far from the only ones.
... in the mobile world, when neither the
browser nor the os can be updated such as on older android phones or iphones, the stock
browsers that don't update are also legacy
browsers.
...And 24 more matches
Cross-browser audio basics - Developer guides
this article provides: a basic guide to creating a cross-
browser html5 audio player with all the associated attributes, properties, and events explained a guide to custom controls created using the media api basic audio example the code below is an example of a basic audio implementation using html5: <audio controls> <source src="audiofile.mp3" type="audio/mpeg"> <source src="audiofile.ogg" type="audio/ogg"> <!-- fallback for non supporting
browsers goes here --> <p>your
browser does not support html5 audio, but you can still <a href="audiofile.mp3">download the music</a>.</p> </audio> note: you can also use an mp4 file instead of mp3.
...(currently,
browsers that support mp3 also support mp4 audio).
... here we define an <audio> element with multiple sources — we do this as not all
browsers support the same audio formats.
...And 22 more matches
Developing cross-browser and cross-platform pages - Archive of obsolete content
an important practice when doing cross-
browser, cross-platform pages and dhtml development involves the ability to determine the capabilities of the
browser which loads your web page.
...there are 2 known approaches for such goals: the
browser identification approach (also known as useragent string detection and often referred as "
browser sniffing") and the object/feature support detection approach.
... the
browser identification approach is now known to be complicated, unreliable and difficult to maintain.
...And 21 more matches
Installing plugins to Gecko embedding browsers on Windows - Archive of obsolete content
this document presents the windows registry keys plugin installers can parse to determine where to install a given plugin (for mozilla
browsers) on windows.
... since the prospect of embedded gecko
browsers raises the scenario of more than one gecko-based
browser that a netscape-style plugin can work with, it becomes important to let plugin developers know how to discover these
browsers on a windows machine.
... this information applies to mozilla based
browsers that pull the mozilla codebase after the mozilla 0.9.1 milestone release.
...And 20 more matches
nsIWebBrowser
embedding/
browser/web
browser/nsiweb
browser.idlscriptable this interface is implemented by web
browser objects.
... embedders use this interface during initialization to associate the new web
browser instance with the embedders chrome and to register any listeners.
...method overview void addweb
browserlistener(in nsiweakreference alistener, in nsiidref aiid); void removeweb
browserlistener(in nsiweakreference alistener, in nsiidref aiid); attributes attribute type description containerwindow nsiweb
browserchrome the chrome object associated with the
browser instance.
...And 13 more matches
Roll your own browser: An embedding how-to
contained within this directory are a couple of makefiles: base
browser-unix base
browser-win the xpinstall packager follows the same format.
...it should include all of the base support that you need to get a web
browser started up.
...(screenshot) xparts: kde extension that allows mozilla to be embedded into the konqueror
browser.
...And 12 more matches
What are browser developer tools? - Learn web development
every modern web
browser includes a powerful suite of developer tools.
...this article explains how to use the basic functions of your
browser's devtools.
... how to open the devtools in your
browser the devtools live inside your
browser in a subwindow that looks roughly like this, depending on what
browser you are using: how do you pull it up?
...And 11 more matches
browser.type - Archive of obsolete content
the type of
browser, which can be used to set access of the document loaded inside the
browser.
... if this is not set, the loaded document has the same access as the window containing the
browser.
...subdocuments of chrome documents are of chrome type, unless the container element (one of iframe,
browser or editor) has one of the special type attribute values (the common ones are content, content-targetable and content-primary) indicating that the subdocument is of content type.
...And 10 more matches
Browser chrome tests
the
browser chrome test suite is an automated testing framework designed to allow testing of application chrome windows using javascript.
... it currently allows you to run javascript code in the same scope as the main firefox
browser window and report results using the same functions as the mochitest test framework.
... running the
browser chrome tests to run mochitest, first build mozilla with your changes; then run ./mach mochitest -f
browser this will launch your build and open a "
browser chrome tests" window, and report the results in the ui and to stdout.
...And 10 more matches
Using the viewport meta tag to control layout on mobile browsers
background the
browser's viewport is the area of the window in which web content can be seen.
... this is often not the same size as the rendered page, in which case the
browser provides scrollbars for the user to scroll around and access all the content.
...many other mobile
browsers now support this tag, although it is not part of any web standard.
...And 10 more matches
Browser storage limits and eviction criteria - Web APIs
the process by which the
browser works out how much space to allocate to web data storage and what to delete when that limit is reached is not simple, and differs between
browsers.
... this article describes how
browsers determine what local content to purge and when in order to free up needed local storage space.
... note: the information below should be fairly accurate for most modern
browsers, but
browser specifics are called out where known.
...And 10 more matches
Browser Side Plug-in API - Plugins
« previousnext » this chapter describes methods in the plug-in api that are available from the
browser.
... the names of all of these methods begin with npn_ to indicate that they are implemented by the
browser and called by the plug-in.
... npn_getauthenticationinfo this function is called by plug-ins to get http authentication information from the
browser.
...And 9 more matches
Cross browser testing - Learn web development
this module focuses on testing web projects across different
browsers.
...what users,
browsers, and devices do you most need to worry about?), how to go about doing testing, the main issues that you'll face with different types of code and how to mitigate them, what tools are most useful in helping you test and fix problems, and how to use automation to speed up testing.
... guides introduction to cross
browser testing this article starts the module off by providing an overview of the topic of cross
browser testing, answering questions such as "what is cross
browser testing?", "what are the most common types of problems you'll encounter?", and "what are the main approaches for testing, identifying, and fixing problems?" strategies for carrying out testing next, we drill down into carrying out testing, looking at identifying a target audie...
...And 8 more matches
Browser Toolbox - Firefox Developer Tools
the
browser toolbox enables you to debug add-ons and the
browser's own javascript code rather than just web pages like the normal toolbox.
... the
browser toolbox's context is the whole
browser rather than just single page on a single tab.
... use the
browser toolbox for add-ons that are neither.
...And 8 more matches
Metro browser chrome tests - Archive of obsolete content
the metro
browser chrome test suite is an automated testing framework designed to allow testing of the immersive version of firefox for windows 8 and above using javascript.
... it currently allows you to run javascript code in the same scope as the immersive
browser and report results using the same functions as the mochitest test framework.
... running the metro
browser chrome tests to run mochitest, first build mozilla with your changes; then run ./mach mochitest-metro this will launch metro
browser chrome tests in the default immersive
browser.
...And 7 more matches
mozbrowserasyncscroll
the moz
browserasyncscroll event is fired when the content of a
browser <iframe> is scrolled.
... general info specification non standard interface customevent bubbles yes cancelable yes target <iframe> default action none properties property type description target read only eventtarget the
browser iframe type read only domstring the type of event.
... details the details property returns an anonymous javascript object with the following properties: top the scroll top position in css pixels of the document within the
browser <iframe>.
...And 7 more matches
nsIWebBrowserChrome
embedding/
browser/web
browser/nsiweb
browserchrome.idlscriptable corresponds to the top-level, outermost window containing an embedded gecko web
browser.
... inherits from: nsisupports last changed in gecko 0.9.6 method overview void destroy
browserwindow(); void exitmodaleventloop(in nsresult astatus); boolean iswindowmodal(); void setstatus(in unsigned long statustype, in wstring status); void showasmodal(); void size
browserto(in long acx, in long acy); attributes attribute type description chromeflags unsigned long the chrome flags for this
browser chrome.
... web
browser nsiweb
browser the currently loaded web
browser.
...And 7 more matches
Defining Cross-Browser Tooltips - Archive of obsolete content
learn how to define "tooltips" in a cross-
browser, standards-friendly way.
... authors are used to using the alt attribute to create "tooltips" in web
browsers.
... the classic example is a "tooltip" of an image; when the user pauses the mouse pointer over an image, the contents of the alt attribute are displayed as a "tooltip." gecko-based
browsers such as mozilla, netscape 6+, and compuserve 7 do not support this behavior.
...And 6 more matches
Inner-browsing extending the browser navigation paradigm - Archive of obsolete content
introduction when you click a link on a web page, your web
browser makes a request to a web server which usually results in a new web page as a response.
...recently, however, modern
browsers and enriched web standards have begun to make new navigational and presentational models possible.
...additionally, server-side technologies have also evolved, supporting and connecting different resources to different
browsers.
...And 5 more matches
Browser compatibility and Scroll Snap - CSS: Cascading Style Sheets
in this article, we consider questions that might arise related to compatibility across
browsers and versions of
browsers when adding support for scroll-snap to your web site or app.
...this will ensure your scroll snapping works in all
browsers which implement the specification, including firefox.
... in this initial example we have used the old specification alongside the current specification in order to make scroll snapping work in all
browsers which support some form of scroll snapping.
...And 5 more matches
mozbrowserloadend
although implementations may change in the future and it is not supported widely across
browsers, it is suitable for use in code dedicated to firefox os apps.
... the moz
browserloadend event is fired when the
browser <iframe> has finished loading all its assets, or has failed to load.
... general info specification non standard interface customevent bubbles yes cancelable yes target <iframe> default action none properties property type description target read only eventtarget the
browser iframe type read only domstring the type of event.
...And 4 more matches
nsIBrowserSearchService
netwerk/base/public/nsi
browsersearchservice.idlscriptable please add a summary to this article.
... 1.0 66 introduced gecko 1.8 inherits from: nsisupports last changed in gecko 2.0 (firefox 4 / thunderbird 3.3 / seamonkey 2.1) implemented by: @mozilla.org/
browser/search-service;1.
... to access this service, use: var
browsersearchservice = components.classes["@mozilla.org/
browser/search-service;1"] .getservice(components.interfaces.nsi
browsersearchservice); attempting to use any method or attribute of this interface before init() has completed will force the service to fall back to a slower, synchronous, initialization.
...And 4 more matches
Browser Feature Detection - Archive of obsolete content
among the methods of
browser detection, many people recommend using the existence of specific properties or methods in a
browser's dom to detect the
browser type and whether it supports a given operation.
... this test takes that idea to the extreme and tests a large number of properties and methods to determine the level of support a
browser has for particular standards and reports a rating as the percentage of names the
browser defines.
...
browser sniffing via api name detection the following tables list the api names defined for specific w3c dom apis and lists the percentage of names that your
browser actually defines followed by a list of each of the api names tested along with an indication of whether the name was defined for your
browser.
...And 3 more matches
mozbrowsercontextmenu
the moz
browsercontextmenu event is fired when the user tried to access a context menu over a
browser <iframe>.
... general info specification non standard interface customevent bubbles yes cancelable yes target <iframe> default action none properties property type description target read only eventtarget the
browser iframe type read only domstring the type of event.
... details the details property returns an anonymous javascript object with the following properties: clientx the x value of the coordinate that was clicked inside the
browser <iframe>'s viewport.
...And 3 more matches
Internationalized Domain Names (IDN) Support in Mozilla Browsers
introduction netscape 7.1 is the first commercial
browser that has built-in support for internationalized domain name under the new ietf rfc's established in 2003.
... how idn works when a
browser sees a host name such as http://developer.mozilla.org, it passes a request to the dns resolver service (usually built into an os), which in turn sends a request to a nearest domain name server to return an ip address that corresponds to the host name.
... idn allows host/domain names with non-ascii characters for user input into a
browser's location bar or url's embedded in web pages.
...And 3 more matches
nsIWebBrowserFind
embedding/components/find/public/nsiweb
browserfind.idlscriptable searches for text in a web
browser.
... inherits from: nsisupports last changed in gecko 1.7 get one by doing a getinterface on an nsiweb
browser.
... by default, the implementation will search the focused frame, or if there is no focused frame, the web
browser content area.
...And 3 more matches
Flash Activation: Browser Comparison - Plugins
each of the major
browsers has now implemented a feature where adobe flash content does not run by default, but each of the
browsers has implemented this feature and the user interface in slightly different ways.
... this guide will help outline the similarities and differences between the
browsers so web developers can provide the best user experience.
... in each
browser, the decision to enable flash is made by users on a per-site basis.
...And 3 more matches
XULBrowserWindow - Archive of obsolete content
the xul
browserwindow object provides methods and properties that let the
browser update the user interface of the enclosing xul window.
... in order to do so it implements the following interfaces: nsisupports nsixul
browserwindow nsiwebprogresslistener nsiwebprogresslistener2 nsisupportsweakreference note: this page is not complete at this time.
...you may also wish to refer to the implementation of xul
browserwindow in
browser/base/content/
browser.js.
...And 2 more matches
mozbrowseractivitydone
the moz
browseractivitydone event is fired when something inside the
browser <iframe> triggers a web activity, and that web activity's message is consumed by the receiving app.
... note: for activities where the receiving app's activity definition in its manifest does not include returnvalue or returnvalue is false, no moz
browseractivitydone event will be generated as of the landing of bug 1194525 in firefox os 2.5.
... general info specification non standard interface customevent bubbles yes cancelable yes target <iframe> default action none properties property type description target read only eventtarget the
browser iframe type read only domstring the type of event.
...And 2 more matches
mozbrowsercaretstatechanged
the moz
browsercaretstatechanged event is fired when the user selects content in a page loaded in a
browser <iframe>.
... general info specification non standard interface customevent bubbles yes cancelable yes target <iframe> default action none properties property type description target read only eventtarget the
browser iframe type read only domstring the type of event.
... commands an object that defines what commands can currently be executed in the
browser <iframe>.
...And 2 more matches
mozbrowsericonchange
the moz
browsericonchange event is sent when a new icon (e.g.
... <link rel="icon"> or <link rel="apple-touch-icon">) is available in the
browser <iframe>'s content.
... general info specification non standard interface customevent bubbles yes cancelable yes target <iframe> default action none properties property type description target read only eventtarget the
browser iframe type read only domstring the type of event.
...And 2 more matches
mozbrowseropenwindow
the moz
browseropenwindow event is fired when a new window is required — usually when the content of a
browser <iframe> successfully calls the window.open() method, or the user clicks on a link with an unknown target.
... general info specification non standard interface customevent bubbles yes cancelable yes target <iframe> default action none properties property type description target read only eventtarget the
browser iframe type read only domstring the type of event.
... name a domstring representing the name of the new
browser window.
...And 2 more matches
mozbrowserselectionstatechanged
the moz
browserselectionstatechanged event is fired when the text selected inside the
browser <iframe> content changes.
... note that this is deprecated, and current implementations should use moz
browsercaretstatechanged instead.
... general info specification non standard interface customevent bubbles yes cancelable yes target <iframe> default action none properties property type description target read only eventtarget the
browser iframe type read only domstring the type of event.
...And 2 more matches
mozbrowsershowmodalprompt
the moz
browsershowmodalprompt event is fired when the content of a
browser <iframe> calls the window.alert(), window.confirm(), or window.prompt() methods.
... general info specification non standard interface customevent bubbles yes cancelable yes target <iframe> default action none properties property type description target read only eventtarget the
browser iframe type read only domstring the type of event.
... message a domstring representing the value passed to the window.alert(), window.confirm(), or window.prompt() methods within the
browser <iframe>'s content.
...And 2 more matches
nsIWebBrowserChrome2
embedding/
browser/web
browser/nsiweb
browserchrome2.idlscriptable an extension to nsiweb
browserchrome.
... 1.0 66 introduced gecko 1.9 inherits from: nsiweb
browserchrome last changed in gecko 1.9 (firefox 3) method overview void setstatuswithcontext(in unsigned long statustype, in astring statustext, in nsisupports statuscontext); methods setstatuswithcontext() called when the status text in the chrome needs to be updated.
... this method may be called instead of nsiweb
browserchrome.setstatus().
...And 2 more matches
nsIWebBrowserFindInFrames
embedding/components/find/public/nsiweb
browserfind.idlscriptable controls how find behaves when multiple frames or iframes are present.
... inherits from: nsisupports last changed in gecko 1.7 get an instance by doing a queryinterface from nsiweb
browserfind.
...setting nsiweb
browserfind.searchframes to true sets this to true.
...And 2 more matches
nsIWebBrowserPersist
embedding/components/web
browserpersist/nsiweb
browserpersist.idlscriptable interface for persisting dom documents and uris to local or remote storage.
... inherits from: nsicancelable last changed in gecko 36.0 (firefox 36.0 / thunderbird 36.0 / seamonkey 2.33) implemented by: @mozilla.org/embedding/
browser/nsweb
browser;1 and @mozilla.org/embedding/
browser/nsweb
browserpersist;1.
... to create an instance, use: var web
browserpersist = components.classes["@mozilla.org/embedding/
browser/nsweb
browserpersist;1"] .createinstance(components.interfaces.nsiweb
browserpersist); method overview void cancelsave(); void savechannel(in nsichannel achannel, in nsisupports afile); void savedocument(in nsidomdocument adocument, in nsisupports afile, in nsisupports adatapath, in string aoutputcontenttype, in unsigned long aencodingflags, in unsigned long awrapcolumn); void saveuri(in nsiuri auri, in nsisupports acachekey, in nsiuri areferrer, in long areferrerpolicy, in nsiinputstream apostdata, in string aextraheaders, in nsisupports afile, in nsiloadcontext aprivacycontext); void saveprivacyawareuri(in nsiuri auri, in...
...And 2 more matches
mozbrowseraudioplaybackchange
the moz
browseraudioplaybackchange event is fired when audio starts or stops playing within a
browser <iframe>.
... general info specification non standard interface customevent bubbles yes cancelable yes target <iframe> default action none properties property type description target read only eventtarget the
browser iframe type read only domstring the type of event.
... details read only boolean indicates whether audio is playing in the
browser.
... examples var
browser = document.queryselector("iframe");
browser.addeventlistener("moz
browseraudioplaybackchange", function(event) { console.log(event.details); }); related events moz
browserclose moz
browsercontextmenu moz
browsererror moz
browsericonchange moz
browserloadend moz
browserloadstart moz
browserlocationchange moz
browseropenwindow moz
browsersecuritychange moz
browsertitlechange moz
browserusernameandpasswordrequired ...
mozbrowsererror
the moz
browsererror event is fired when an error occurs while trying to load content within a
browser <iframe>.
... general info specification non standard interface customevent bubbles yes cancelable yes target <iframe> default action none properties property type description target read only eventtarget the
browser iframe type read only domstring the type of event.
...tfound connectionfailure netinterrupt nettimeout cspblocked phishingblocked malwareblocked unwantedblocked offline malformeduri redirectloop unknownsockettype netreset notcached isprinting deniedportaccess proxyresolvefailure proxyconnectfailure contentencodingfailure remotexul unsafecontenttype corruptedcontenterror certerror other example var
browser = document.queryselector("iframe");
browser.addeventlistener("moz
browsererror", function( event ) { console.log("an error occurred:" + event.detail); }); related events moz
browserasyncscroll moz
browserclose moz
browsercontextmenu moz
browsericonchange moz
browserloadend moz
browserloadstart moz
browserlocationchange moz
browseropenwindow moz
browsersecuritychange moz
browsershowmodalpromp...
...t moz
browsertitlechange moz
browserusernameandpasswordrequired ...
mozbrowserfindchange
the moz
browserfindchange event is fired when a search method is invoked in the
browser <iframe> content.
... general info specification non standard interface customevent bubbles yes cancelable yes target <iframe> default action none properties property type description target read only eventtarget the
browser iframe type read only domstring the type of event.
... example var
browser = document.queryselector("iframe");
browser.addeventlistener("moz
browserfindchange", function(event) { console.log("currently highlighted: " + event.details.activematchordinal + " out of " + event.details.numberofmatches); }); related events moz
browserasyncscroll moz
browsercontextmenu moz
browsererror moz
browsericonchange moz
browserloadend moz
browserloadstart moz
browserl...
...ocationchange moz
browseropenwindow moz
browsersecuritychange moz
browsershowmodalprompt moz
browsertitlechange moz
browserusernameandpasswordrequired ...
mozbrowserlocationchange
the moz
browserlocationchange event is fired when a
browser <iframe>'s location changes — it is fired every time navigation occurs.
... general info specification non standard interface customevent bubbles yes cancelable yes target <iframe> default action none properties property type description target read only eventtarget the
browser iframe type read only domstring the type of event.
... var
browser = document.queryselector("iframe");
browser.addeventlistener('moz
browserlocationchange', function (event) { urlbar.value = event.detail.url; }); related events moz
browserasyncscroll moz
browserclose moz
browsercontextmenu moz
browsererror moz
browsericonchange moz
browserloadend moz
browserloadstart moz
browseropenwindow moz
browsersecuritychange moz
browsershowmodalprompt moz
browsertitle...
...change moz
browserusernameandpasswordrequired ...
mozbrowsermanifestchange
the moz
browsermanifestchange event is fired when the manifest location of the app loaded in the
browser <iframe> changes.
... general info specification non standard interface customevent bubbles yes cancelable yes target <iframe> default action none properties property type description target read only eventtarget the
browser iframe type read only domstring the type of event.
... example var
browser = document.queryselector("iframe");
browser.addeventlistener("moz
browsermanifestchange", function(event) { console.log("new manifest url: " + event.details.href); }); related events moz
browserasyncscroll moz
browsercontextmenu moz
browsererror moz
browsericonchange moz
browserloadend moz
browserloadstart moz
browserlocationchange moz
browseropenwindow moz
browsersecuritychange moz
browsershowmod...
...alprompt moz
browsertitlechange moz
browserusernameandpasswordrequired ...
mozbrowsermetachange
the moz
browsermetachange event is fired when a <meta> element related to web applications is added, removed or changed.
... general info specification non standard interface customevent bubbles yes cancelable yes target <iframe> default action none properties property type description target read only eventtarget the
browser iframe type read only domstring the type of event.
... example var
browser = document.queryselector("iframe");
browser.addeventlistener("moz
browsermetachange", function(event) { console.log("a meta tag has been " + event.details.type + ".
... its name is " + event.details.name + ", and its content is " + event.details.content + "."); }); related events moz
browserasyncscroll moz
browsercontextmenu moz
browsererror moz
browsericonchange moz
browserloadend moz
browserloadstart moz
browserlocationchange moz
browseropenwindow moz
browsersecuritychange moz
browsershowmodalprompt moz
browsertitlechange moz
browserusernameandpasswordrequired ...
mozbrowseropensearch
the moz
browseropensearch event is fired when a link to a search engine is found — i.e.
... general info specification non standard interface customevent bubbles yes cancelable yes target <iframe> default action none properties property type description target read only eventtarget the
browser iframe type read only domstring the type of event.
... example var
browser = document.queryselector("iframe");
browser.addeventlistener("moz
browseropensearch", function( event ) { console.log("new search engine encountered: " + event.details.title); }); related events moz
browserasyncscroll moz
browserclose moz
browsercontextmenu moz
browsererror moz
browsericonchange moz
browserloadend moz
browserloadstart moz
browserlocationchange moz
browseropenwindow mozbrows...
...ersecuritychange moz
browsertitlechange ...
mozbrowserresize
the moz
browserresize event is fired when a
browser <iframe> viewport is resized in some way.
... general info specification non standard interface customevent bubbles yes cancelable yes target <iframe> default action none properties property type description target read only eventtarget the
browser iframe type read only domstring the type of event.
... example var
browser = document.queryselector("iframe");
browser.addeventlistener("moz
browserresize", function( event ) { console.log("the new window size is " + event.details.width + " x " + event.details.height + "."); }); related events moz
browserasyncscroll moz
browserclose moz
browsercontextmenu moz
browsererror moz
browsericonchange moz
browserloadend moz
browserloadstart moz
browserlocationchange mozbr...
...owsersecuritychange moz
browsertitlechange moz
browserusernameandpasswordrequired ...
mozbrowserscroll
the moz
browserscroll event is fired when the
browser <iframe> content scrolls.
... general info specification non standard interface customevent bubbles yes cancelable yes target <iframe> default action none properties property type description target read only eventtarget the
browser iframe type read only domstring the type of event.
... example var
browser = document.queryselector("iframe");
browser.addeventlistener("moz
browserscroll", function( event ) { console.log("the new scroll position is " + event.details.left + " across and " + event.details.top + "down."); }); related events moz
browserasyncscroll moz
browserclose moz
browsercontextmenu moz
browsererror moz
browsericonchange moz
browserloadend moz
browserloadstart mozb...
...rowserlocationchange moz
browsersecuritychange moz
browsertitlechange moz
browserusernameandpasswordrequired ...
mozbrowserscrollareachanged
the moz
browserscrollareachanged event is fired when the available scrolling area in the
browser <iframe> changes.
... this can occur on resize and when the page size changes (while loading for example.) general info specification non standard interface customevent bubbles yes cancelable yes target <iframe> default action none properties property type description target read only eventtarget the
browser iframe type read only domstring the type of event.
... example var
browser = document.queryselector("iframe");
browser.addeventlistener("moz
browserscrollareachanged", function( event ) { console.log("the new scroll area is " + event.details.width + " x " + event.details.height + "."); }); related events moz
browserasyncscroll moz
browserclose moz
browsercontextmenu moz
browsererror moz
browsericonchange moz
browserloadend moz
browserloadstart mozbro...
...wserlocationchange moz
browsersecuritychange moz
browsertitlechange moz
browserusernameandpasswordrequired ...
mozbrowserscrollviewchange
the moz
browserscrollviewchange event is fired when asynchronous scrolling (i.e.
... general info specification non standard interface customevent bubbles yes cancelable yes target <iframe> default action none properties property type description target read only eventtarget the
browser iframe type read only domstring the type of event.
... example var
browser = document.queryselector("iframe");
browser.addeventlistener("moz
browserscrollviewchange", function( event ) { console.log("scrolling has " + event.details.state + "."); }); related events moz
browserasyncscroll moz
browserclose moz
browsercontextmenu moz
browsererror moz
browsericonchange moz
browserloadend moz
browserloadstart moz
browserlocationchange moz
browsersecuritychange mozbrowse...
...rtitlechange moz
browserusernameandpasswordrequired ...
mozbrowsersecuritychange
the moz
browsersecuritychange event is fired when the
browser <iframe> has connected to the server, and when the mixed content state changes.
... general info specification non standard interface customevent bubbles yes cancelable yes target <iframe> default action none properties property type description target read only eventtarget the
browser iframe type read only domstring the type of event.
... example var
browser = document.queryselector("iframe");
browser.addeventlistener("moz
browsersecuritychange", function( event ) { console.log("the ssl state is:" + event.details.state); }); related events moz
browserasyncscroll moz
browserclose moz
browsercontextmenu moz
browsererror moz
browsericonchange moz
browserloadend moz
browserloadstart moz
browserlocationchange moz
browseropenwindow moz
browsertitlecha...
...nge moz
browserusernameandpasswordrequired ...
mozbrowserusernameandpasswordrequired
the moz
browserusernameandpasswordrequired event is fired when the content within a
browser <iframe> requires an http authentification.
... general info specification non standard interface customevent bubbles yes cancelable yes target <iframe> default action none properties property type description target read only eventtarget the
browser iframe type read only domstring the type of event.
... example var
browser = document.queryselector("iframe[moz
browser]");
browser.addeventlistener("moz
browserusernameandpasswordrequired", function( event ) { console.log("the auth realm is:" + event.detail.realm); }); related events moz
browserasyncscroll moz
browserclose moz
browsercontextmenu moz
browsererror moz
browsericonchange moz
browserloadend moz
browserloadstart moz
browserlocationchange moz
browseropenw...
...indow moz
browsersecuritychange moz
browsertitlechange ...
mozbrowservisibilitychange
the moz
browservisibilitychange event is fired when the visibility state of the current
browser iframe <iframe> changes, for example due to a call to setvisible().
... general info specification non standard interface customevent bubbles yes cancelable yes target <iframe> default action none properties property type description target read only eventtarget the
browser iframe type read only domstring the type of event.
... details the details property returns an anonymous javascript object with the following properties: visible a boolean that indicates whether the
browser iframe is visible (true) or not (false).
... example var
browser = document.queryselector("iframe");
browser.addeventlistener("moz
browservisibilitychange", function( event ) { if(event.details.visible) { console.log("the
browser is visible."); } else { console.log("the
browser is hidden."); } }); related events moz
browserasyncscroll moz
browserclose moz
browsercontextmenu moz
browsererror moz
browsericonchange moz
browserloadend moz
browserloadstart moz
browserlocationchange moz
browseropenwindow moz
browsersecuritychange moz
browsertitlechange ...
browser.download.lastDir.savePerSite
browser.download.lastdir.savepersite controls whether the directory preselected in the file picker for saving a file download is being remembered on a per-website (host) base.
...if no download directory for the current website has been stored,
browser.download.lastdir will be used.
... false the last used directory for any download (stored in
browser.download.lastdir) will be the preselected directory in the file picker.
... related
browser.download.lastdir ...
nsIBrowserHistory
toolkit/components/places/public/nsi
browserhistory.idlscriptable a
browser-specific interface to global history.
... it adds functions used by the basic
browser like, marking pages as typed in the url bar, and removing pages as from the history interface.
... inherits from: nsiglobalhistory2 last changed in gecko 22.0 (firefox 22.0 / thunderbird 22.0 / seamonkey 2.19) implemented by: @mozilla.org/
browser/nav-history-service;1.
... to use this service, use: var
browserhistory = components.classes["@mozilla.org/
browser/nav-history-service;1"] .getservice(components.interfaces.nsi
browserhistory); method overview void addpagewithdetails(in nsiuri auri, in wstring atitle, in long long alastvisited); obsolete since gecko 15.0 void markpageasfollowedlink(in nsiuri auri); obsolete since gecko 22.0 void markpageastyped(in nsiuri auri); obsolete since gecko 22.0 void registeropenpage(in nsiuri auri); obsolete since gecko 9.0 void removeallpages(); void removepage(in nsiuri auri); void removepages([array, size_is(alength)] in nsiuri auris, in unsigned long alength, in boolean adobatchnotify); void removepagesbytimeframe(in long long a...
nsIXULBrowserWindow
xpfe/appshell/public/nsixul
browserwindow.idlscriptable provides methods that may be called from the internals of the
browser area to tell the containing xul window to update its user interface.
... inherits from: nsisupports last changed in gecko 2.0 (firefox 4 / thunderbird 3.3 / seamonkey 2.1) the xul
browserwindow attribute exists on the nsixulwindow interface although both firefox and seamonkey also store their nsixul
browserwindow reference in the global xul
browserwindow object accessible from javascript code.
... note: the xul
browserwindow object offered to javascript code provides a great many more methods and attributes than those listed here, which are only the ones available to c++ code.
... see the documentation for xul
browserwindow for details.
Hiding browser chrome - Archive of obsolete content
there are times in which an extension may find it useful to hide
browser chrome (that is, toolbars, the location bar, and so forth), in order to reduce clutter when presenting a particular user interface.
...this can be accomplished by augmenting the behavior of the xul
browserwindow object's hidechromeforlocation() method.
...var prevfunc = xul
browserwindow.hidechromeforlocation; xul
browserwindow.hidechromeforlocation = function(alocation) { return (/* your test goes here */) || prevfunc.apply(xul
browserwindow, [alocation]); } this works by saving a reference to the current implementation of the hidechromeforlocation() method, then replacing it with a new method that calls through to the previous implementation.
Opening a Link in the Default Browser - Archive of obsolete content
xulrunner applications may have situation where they wish to open a uri in the default
browser.
...to suppress this warning for particular protocols that are safe to open in the default application, you must set default prefs (thunderbird sets the following prefs): // suppress external-load warning for standard
browser schemes pref("network.protocol-handler.warn-external.http", false); pref("network.protocol-handler.warn-external.https", false); pref("network.protocol-handler.warn-external.ftp", false); you can also check whether an external handler for a scheme exists.
...ow you do it: var extps = components.classes["@mozilla.org/uriloader/external-protocol-service;1"] .getservice(components.interfaces.nsiexternalprotocolservice); if (extps.externalprotocolhandlerexists("http")) { // handler for http:// urls exists } link within an iframe to enable a link inside an html document that is the "src" of an iframe to be opened in the default
browser, setting the preference: pref("network.protocol-handler.expose-all", false); seems to work.
Browser - MDN Web Docs Glossary: Definitions of Web-related terms
a web
browser or
browser is a program that retrieves and displays pages from the web, and lets users access further pages through hyperlinks.
... a
browser is the most familiar type of user agent.
... learn more download a
browser mozilla firefox google chrome microsoft edge opera
browser ...
mozbrowserclose
the moz
browserclose event is fired when the content of a
browser <iframe> calls the window.close() method.
... example var
browser = document.queryselector("iframe");
browser.addeventlistener("moz
browserclose", function() { console.log("
browser window has been closed; iframe will be destroyed."); }); related events moz
browserasyncscroll moz
browsercontextmenu moz
browsererror moz
browsericonchange moz
browserloadend moz
browserloadstart moz
browserlocationchange moz
browseropenwindow moz
browsersecuritychange mozbrow...
...sershowmodalprompt moz
browsertitlechange moz
browserusernameandpasswordrequired ...
mozbrowserdocumentfirstpaint
the moz
browserdocumentfirstpaint event is fired when a new paint occurs on any document in the
browser <iframe>.
... example var
browser = document.queryselector("iframe");
browser.addeventlistener("moz
browserdocumentfirstpaint", function() { console.log("first content painted."); }); related events moz
browserasyncscroll moz
browsercontextmenu moz
browsererror moz
browsericonchange moz
browserloadend moz
browserloadstart moz
browserlocationchange moz
browseropenwindow moz
browsersecuritychange moz
browsershowmodalprompt mo...
...z
browsertitlechange moz
browserusernameandpasswordrequired ...
mozbrowserfirstpaint
the moz
browserfirstpaint event is fired when the <iframe> paints content for the first time (this doesn't include the initial paint from about:blank).
... example var
browser = document.queryselector("iframe");
browser.addeventlistener("moz
browserfirstpaint", function(event) { console.log("first content painted."); }); related events moz
browserasyncscroll moz
browsercontextmenu moz
browsererror moz
browsericonchange moz
browserloadend moz
browserloadstart moz
browserlocationchange moz
browseropenwindow moz
browsersecuritychange moz
browsershowmodalprompt mozbr...
...owsertitlechange moz
browserusernameandpasswordrequired ...
mozbrowserloadstart
the moz
browserloadstart event is fired when the
browser <iframe> starts to load a new page.
... example in this example the moz
browserloadend and moz
browserloadstart events are used to change the icon shown on the stop/reload button between stop (x) and reload (r), as appropriate.
... var
browser = document.queryselector("iframe");
browser.addeventlistener('moz
browserloadstart',function() { stopreload.textcontent = 'x'; });
browser.addeventlistener('moz
browserloadend',function() { stopreload.textcontent = 'r'; }); related events moz
browserasyncscroll moz
browserclose moz
browsercontextmenu moz
browsererror moz
browsericonchange moz
browserloadend moz
browserlocationchange moz
browseropenwindow moz
browsersecuritychange moz
browsershowmodalprompt moz
browsertitlechange moz
browserusernameandpasswordrequired ...
mozbrowseropentab
the moz
browseropentab event is fired when a new tab is opened within a
browser <iframe> as a result of the user issuing a command to open a link target in a new tab (for example ctrl/cmd + click.) general info specification non standard interface customevent bubbles yes cancelable yes target <iframe> default action none properties property type description target read only eventtarget the
browser iframe type read only domstring the type...
... example var
browser = document.queryselector("iframe");
browser.addeventlistener("moz
browseropentab", function( event ) { console.log("a new document has opened containing the content at " + event.details.url + "."); }); related events moz
browserasyncscroll moz
browserclose moz
browsercontextmenu moz
browsererror moz
browsericonchange moz
browserloadend moz
browserloadstart moz
browserlocationchange mozbrows...
...ersecuritychange moz
browsertitlechange moz
browserusernameandpasswordrequired ...
mozbrowsertitlechange
the moz
browsertitlechange event is fired when the title of a
browser <iframe> (i.e.
... general info specification non standard interface customevent bubbles yes cancelable yes target <iframe> default action none properties property type description target read only eventtarget the
browser iframe type read only domstring the type of event.
... example var
browser = document.queryselector("iframe");
browser.addeventlistener("moz
browsertitlechange", function( event ) { console.log("the title of the document is:" + event.detail); }); related events moz
browserasyncscroll moz
browserclose moz
browsercontextmenu moz
browsererror moz
browsericonchange moz
browserloadend moz
browserloadstart moz
browserlocationchange moz
browseropenwindow moz
browsersecuritychange moz
browsershowmodalprompt moz
browserusernameandpasswordrequired ...
nsIBrowserBoxObject
layout/xul/base/public/nsi
browserboxobject.idlscriptable please add a summary to this article.
... inherits from: nsicontainerboxobject last changed in gecko 1.9 (firefox 3) the boxobject belonging to a xul
browser element implements this interface.
...the
browser.xml binding uses this property to gain access to the webnavigation, contentdocument, contentwindow, web
browserfind, webprogress and sessionhistory properties.
nsIWebBrowserChrome3
embedding/
browser/web
browser/nsiweb
browserchrome3.idlscriptable an extension to nsiweb
browserchrome2.
... 1.0 66 introduced gecko 2.0 inherits from: nsiweb
browserchrome2 last changed in gecko 2.0 (firefox 4 / thunderbird 3.3 / seamonkey 2.1) method overview astring onbeforelinktraversal(in astring originaltarget, in nsiuri linkuri, in nsidomnode linknode, in prbool isapptab); methods onbeforelinktraversal() determines the appropriate target for a link.
...see also nsiweb
browserchrome2 ...
Writing Web Audio API code that works in every browser - Developer guides
furthermore, as a result of the spec being still in flux, some
browsers use deprecated properties and method names that are not present in standards-compliant
browsers: safari uses the old method names, firefox uses the new ones, and chrome and opera use both.
...this little library will "normalise" the interfaces for you and make it look as if your code is running in a standards compliant
browser, by aliasing prefixed names to the unprefixed versions.
...in the meantime, you can explicitly specify 'equalpower' instead: var panner = new audiocontext.pannernode(); panner.panningmodel = 'equalpower'; note that there's a list of projects built with the web audio api, specifying which ones use the standard audiocontext and which
browsers do they work on.
browserid - Archive of obsolete content
« xul reference home
browserid type: string the id of the
browser element to which the findbar is attached.
... you should use the
browser property to get and set this value from a script.
getBrowserIndexForDocument - Archive of obsolete content
« xul reference home get
browserindexfordocument( document ) return type: integer returns the index of the
browser for the specified document in the tab
browser the method was invoked on.
... the returned index is dependent on the tabs in the tab
browser and is invalidated when the tab ordering changes.
Browser-side plug-in API - Archive of obsolete content
this chapter describes methods in the plug-in api that are provided by the
browser; these allow call back to the
browser to request information, tell the
browser to repaint part of the window, and so forth.
... the names of all of these methods begin with npn_ to indicate that they are implemented by the
browser and called by the plug-in.
browser.dom.window.dump.file
browser.dom.window.dump.file redirects the ouput of window.dump() calls to a file whose address is specified in this preference if
browser.dom.window.dump.enabled is set to true.
... related
browser.dom.window.dump.enabled ...
Browser security
an important aspect of developing code for any
browser, including firefox, as well as any web-oriented project, is its security.
...ey work.exploitable crashesthis article will help you determine if a crash is exploitable, find crashes which are exploitable, and to fix exploitable crashes.handling mozilla security bugsthis document describes how the new security organizational structure will work, and how security-related mozilla bug reports will be handled.pinning violation reportsif a site makes use of key pinning, and your
browser sees a certificate chain for that site which does not match the pin, firefox will reject the connection and display an error page.
Cross-browser Flexbox mixins - CSS: Cascading Style Sheets
this article provides a set of mixins for those who want to mess around with flexbox using the native support of current
browsers.
... this set uses: fallbacks using 2009 'box' syntax (ff and older webkit) and prefixed syntaxes (ie10, webkit
browsers without flex wrapping) final standards syntax (ff, safari, chrome, ie11+, edge, opera) this was inspired by: http://dev.opera.com/articles/view/advanced-cross-
browser-flexbox/ with help from: http://w3.org/tr/css3-flexbox/ http://the-echoplex.net/flexyboxes/ http://msdn.microsoft.com/en-us/library/ie/hh772069(v=vs.85).aspx http://css-tricks.com/using-flexbox/ a complete guide to flexbox | css-tricks visual guide to css3 flexbox: flexbox playground | note: mixins are not currently supported natively in
browsers.
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 platforms, operating systems, and
browsers.
... perhaps your target audience is people that are using older hardware, for example, and can't upgrade to the latest and greatest
browsers.
... 67 windows add-on sdk enumerate and examine open
browser windows, open new windows, and listen for window events.
...And 161 more matches
Index - MDN Web Docs Glossary: Definitions of Web-related terms
adobe flash can run from supporting web
browsers via a
browser plug-in.
... 19 apple safari glossary, navigation, webmechanics safari is a web
browser developed by apple and bundled with both macos and ios.
... 31 blink glossary, infrastructure, layout, rendering engine blink is an open-source
browser layout engine developed by google as part of chromium (and therefore part of chrome as well).
...And 77 more matches
Handling common JavaScript problems - Learn web development
previous overview: cross
browser testing next now we'll look at common cross-
browser javascript problems and how to fix them.
... this includes information 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.
... prerequisites: familiarity with the core html, css, and javascript languages; an idea of the high-level principles of cross
browser testing.
...And 70 more matches
Gecko Compatibility Handbook - Archive of obsolete content
they are actually replaced by ''-(example removed)-'' the goal of this handbook is to help you update websites to work with standards-based
browsers and properly detect gecko.
... gecko is an embeddable
browser, developed as part of the mozilla open source project and based on w3 standards rather than the proprietary approaches of the past.
... adhering to web standards simplifies cross-
browser web development and enables accessibility.
...And 63 more matches
Handling common HTML and CSS problems - Learn web development
previous overview: cross
browser testing next with the scene set, we'll now look specifically at the common cross-
browser problems you will come across in html and css code, and what tools can be used to prevent problems from happening, or fix problems that occur.
... this includes linting code, handling css prefixes, using
browser dev tools to track down problems, using polyfills to add support into
browsers, tackling responsive design problems, and more.
... prerequisites: familiarity with the core html, css, and javascript languages; an idea of the high level principles of cross
browser testing.
...And 60 more matches
Drawing and Event Handling - Plugins
it is drawn in a target called a drawable, which corresponds to either the
browser window or an off-screen bitmap.
...a windowless plug-in draws itself only in response to a paint message from the
browser.
... for windowless plug-ins, the
browser calls the npp_setwindow method with an npwindow structure that represents a drawable.
...And 52 more matches
Setting up your own test automation environment - Learn web development
previous overview: cross
browser testing in this article, we will teach you how to install your own automation environment and run your own tests using selenium/webdriver and a testing library such as selenium-webdriver for node.
... prerequisites: familiarity with the core html, css, and javascript languages; an idea of the high-level principles of cross
browser testing, and automated testing.
... objective: to show how to set up a selenium testing environment locally and run tests with it, and how to integrate it with tools like lambdatest, sauce labs, and
browserstack.
...And 48 more matches
Streams - Plugins
streams can be produced by the
browser and consumed by a plug-in instance, or produced by an instance and consumed by the
browser.
... streams produced by the
browser can be automatically sent to or requested by the plug-in instance.
... the
browser calls the plug-in methods npp_newstream, npp_writeready, npp_write, and npp_destroystream to, respectively, create a stream, find out how much data the plug-in can handle, push data into the stream, and delete it.
...And 46 more matches
Introduction to automated testing - Learn web development
previous overview: cross
browser testing next manually running tests on several
browsers and devices, several times per day, can get tedious, and time-consuming.
...in this article, we look at what is available, how to use task runners, and how to use the basics of commercial
browser test automation apps such as lambdatest, sauce labs,
browserstack, and testingbot.
... prerequisites: familiarity with the core html, css, and javascript languages; an idea of the high level principles of cross-
browser testing.
...And 45 more matches
HTTP Index - HTTP
it was designed for communication between web
browsers and web servers, but it can also be used for other purposes.
... 2 a typical http session http in client-server protocols, like http, sessions consist of three phases: 3 an overview of http html, http, overview, webmechanics, l10n:priority http isthe foundation of any data exchange on the web and it is a client-server protocol, which means requests are initiated by the recipient, usually the web
browser.
... 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 information is available to sites the
browser connects to as well.
...And 43 more matches
Strategies for carrying out testing - Learn web development
previous overview: cross
browser testing next this article starts the module off by providing an overview of the topic of (cross)
browser testing, answering questions such as "what is cross-
browser testing?", "what are the most common types of problems you'll encounter?", and "what are the main approaches for testing, identifying, and fixing problems?" prerequisites: familiarity with the core html, css, and javascript languages; an idea of the high level principles of cross-
browser testing.
... objective: to gain an understanding of the high-level concepts involved in cross-
browser testing.
... when doing cross-
browser testing, you need to work out a list of
browsers you will need to test on to start with.
...And 42 more matches
Using XPInstall to Install Plugins - Archive of obsolete content
xpinstall is a javascript-based installer technology that works across all the platforms that mozilla and netscape
browsers based on mozilla (such as netscape 7) are deployed.
... it can be a way to ensure a smooth user-experience when obtaining plugins, without obliging the user to exit the browsing environment to launch a binary installer (the classic setup.exe experience on windows) or obliging the user to restart their
browser.
...this article presents a guideline for improving the plugin installation experience for netscape gecko
browsers using xpinstall.
...And 39 more matches
Theme changes in Firefox 2 - Archive of obsolete content
browser changes requiring theme updates there are a number of changed and deleted files in the
browser that may require you to make changes to your theme.
... filename css file details
browser/base/searchdialog.xul
browser/base/content/searchdialog.css removed from firefox 2.
... safebrowsing/warning-overlay.xul safebrowsing/
browser-protection.css new file containing the overlay that's drawn over the
browser when you browse to a suspected phishing site.
...And 38 more matches
Index - Learn web development
to help you achieve this, this module will cover general best practices (which are demonstrated throughout the html, css, and javascript topics), cross
browser testing, and some tips on enforcing accessibility from the start.
... beginner, express, flask, learn, node, php, python, django, lamp, server-side, servers throughout most of the learning area, we tell you to just open your examples directly in a
browser — this can be done by double clicking the html file, dragging and dropping it into the
browser window, or choosing file > open...
... 25 what are
browser developer tools?
...And 38 more matches
Plug-in Basics - Plugins
next » how plug-ins are used plug-ins offer a rich variety of features that can increase the flexibility of gecko-based
browsers.
... with the plug-in api, you can create dynamically loaded plug-ins that can: register one or more mime types draw into a part of a
browser window receive keyboard and mouse events obtain data from the network using urls post data to urls add hyperlinks or hotspots that link to new urls draw into sections on an html page communicate with javascript/dom from native code you can see which plug-ins are installed on your system and have been properly associated with the
browser by consulting the installed plug-ins page.
...a helper application is a separate, free-standing application that can be started from the
browser.
...And 38 more matches
Window.open() - Web APIs
this can be a path or url to an html page, image file, or any other resource that is supported by the
browser.
... description the open() method creates a new secondary
browser window, similar to choosing new window from the file menu.
... note on the use of window.open() to reopen an existing window with name windowname : this functionality is not valid for all
browsers and more with variable conditions.
...And 36 more matches
Migrate apps from Internet Explorer to Mozilla - Archive of obsolete content
introduction when netscape started the mozilla
browser, it made the conscious decision to support w3c standards.
...
browsers, like internet explorer 4, that were built before the conception of w3c standards inherited many quirks.
... in this article, i will describe mozilla's quirks mode, which provides strong backwards html compatibility with internet explorer and other legacy
browsers.
...And 35 more matches
Index
111 using xpcom components xpcom applications like the mozilla
browser are sophisticated, modularized clients of xpcom components.
... in fact, virtually all of the functionality that you associate with a
browser - navigation, window management, managing cookies, bookmarks, security, searching, rendering, and other features - is defined in xpcom components and accessed by means of those component interfaces.
...for example, if this object is created with the root "
browser.startup.", the preferences "
browser.startup.page", "
browser.startup.homepage", and "
browser.startup.homepage_override" can be accessed by simply passing "page", "homepage", or "homepage_override" to the various get/set methods.
...And 33 more matches
Event reference
this article offers a list of events that can be sent; some are standard events defined in official specifications, while others are events used internally by specific
browsers; for example, mozilla-specific events are listed so that add-ons can use them to interact with the
browser.
... network events event name fired when online the
browser has gained access to the network.
... offline the
browser has lost access to the network.
...And 33 more matches
CSS property compatibility table for form controls - Learn web development
how to read the tables values for each property, there are four possible values: yes there's reasonably consistent support for the property across
browsers.
...there are two possible renderings: n (normal) indicates that the property is applied as it is t (tweaked) indicates that the property is applied with the extra rule below: * { /* turn off the native look and feel */ -webkit-appearance: none; appearance: none; /* for internet explorer */ background: none; } compatibility tables global behaviors some behaviors are common to many
browsers at a global level: border, background, border-radius, height using one of these properties can partially or fully turn off the native look & feel of widgets on some
browsers.
... line-height this property is supported inconsistently across
browsers and you should avoid it.
...And 31 more matches
Overview of Mozilla embedding APIs
much of the gecko functionality is exposed through a component called the nsweb
browser.
...each web
browser instance represents the "client-area" of a typical
browser window.
... the web
browser exposes a set of interfaces which allow the embedding application to control activity and respond to changes within this client area.
...And 31 more matches
Audio and Video Delivery - Developer guides
this article is intended as a starting point for exploring the various delivery mechanisms of web based media and compatibility with popular
browsers.
... the audio and video elements whether we are dealing with pre-recorded audio files or live streams, the mechanism for making them available through the
browser's <audio> and <video> elements remains pretty much the same.
... 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.
...And 29 more matches
Chapter 5: Let's build a Firefox extension - Archive of obsolete content
although it may still work in some
browsers, its use is discouraged since it could be removed at any time.
... true
browser.dom.window.dump.enabled (not present in firefox 3.5+) enables use of the dump method for debugging.
...for example, in the firefox
browser window, everything other than the web page being displayed in the content area is chrome.
...And 28 more matches
Plug-in Development Overview - Gecko Plugin API Reference
plan your plug-in: decide on the services you want the plug-in software to provide and how it will interact with the
browser and the special media for which the plug-in is created.
...also see making plug-ins scriptable for more information about making plug-ins accessible from the
browser.
...to see your plug-in in action, simply display the html page that calls it in the
browser.
...And 28 more matches
Plug-in Development Overview - Plugins
plan your plug-in: decide on the services you want the plug-in software to provide and how it will interact with the
browser and the special media for which the plug-in is created.
...also see making plug-ins scriptable for more information about making plug-ins accessible from the
browser.
...to see your plug-in in action, simply display the html page that calls it in the
browser.
...And 28 more matches
Web video codec guide - Web media technologies
the primary drawback to av1 at this time is that it is very new, and support is still in the process of being integrated into most
browsers.
...hroma subsampling main 8 or 10 4:0:0 (greyscale) or 4:2:0 high 8 or 10 4:0:0 (greyscale), 4:2:0, or 4:4:4 professional 8, 10, or 12 4:0:0 (greyscale), 4:2:0, 4:2:2, or 4:4:4 hdr support yes variable frame rate (vfr) support yes
browser compatibility feature chrome edge firefox internet explorer opera safari av1 support 70 75 67 no 57 no container support isobmff[1], mpeg-ts, mp4, webm rtp / webrtc compatible yes supporting/maintaining organiz...
... non-web
browser implementations of webrtc (any implementation which doesn't include the javascript apis) are required to support avc as a codec in webrtc calls.
...And 28 more matches
Using the Right Markup to Invoke Plugins - Archive of obsolete content
the object element: w3c standards and cross-
browser issues the object element is part of the html 4.01 specification, and is the recommended mechanism to invoke plugins.
... traditionally, the object element has been used differently by microsoft internet explorer and by mozilla-based
browsers such as netscape 7.
...
browsers such as netscape 7 will not render the flash plugin if the above kind of markup is used, because netscape 7 does not support activex or activex-based component invocations, with the exception of windows media player in netscape 7.1.
...And 27 more matches
Video and audio content - Learn web development
a really simple example looks like this: <video src="rabbit320.webm" controls> <p>your
browser doesn't support html5 video.
... controls users must be able to control video and audio playback (it's especially critical for people who have epilepsy.) you must either use the controls attribute to include the
browser's own control interface, or build your interface using the appropriate javascript api.
... the paragraph inside the <video> tags this is called fallback content — this will be displayed if the
browser accessing the page doesn't support the <video> element, allowing us to provide a fallback for older
browsers.
...And 27 more matches
Using the application cache - HTML: Hypertext Markup Language
this application cache (appcache) interface lists resources that
browsers should cache to be available offline.
... reduced server load the
browser only downloads resources that have changed from the server.
... how the application cache works enabling the application cache to enable the application cache for an application, include the manifest attribute in the <html> element: <html manifest="/example.appcache"> … </html> the manifest attribute references a url for a cache manifest file: a text file that lists urls that
browsers should cache for your application.
...And 27 more matches
Anatomy of a video game - Game development
modern
browsers strive to call methods right as they are needed and idle (or do their other tasks) in the gaps.
...being more specific with the
browser about when your function needs to be called allows the
browser to optimize when it is called.
... some code needs to be run frame-by-frame so why attach that function to anything other than the
browser's redraw schedule?
...And 26 more matches
HTML documentation index - HTML: Hypertext Markup Language
if so, the
browser modifies its widget to allow editing.
... 15 draggable global attributes, html, reference the draggable global attribute is an enumerated attribute that indicates whether the element can be dragged, either with native
browser behavior or the html drag and drop api.
... 51 the html autocomplete attribute addresses, attribute, email addresses, forms, html, input, phone numbers, reference, select, text, usernames, autocomplete, form, passwords, textarea 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 information expected in the field.
...And 26 more matches
Content Panels - Archive of obsolete content
in the mozilla
browser window, the area where the web page is displayed is created by using an iframe.
... iframe example example 1 : source view <toolbox> <toolbar id="nav-toolbar"> <toolbarbutton label="back" /> <toolbarbutton label="forward" /> <textbox id="urlfield" /> </toolbar> </toolbox> <iframe id="content-body" src="http://www.mozilla.org/index.html" flex="1" /> the example here has created a very simple interface for a web
browser.
...
browsers there is a second type of content panel, using the
browser tag.
...And 24 more matches
XUL Structure - Archive of obsolete content
when you type the url of an html page into the
browser's address field, the
browser locates the web site and downloads the content.
... this chrome package registration is the way firefox extensions are able to add features to the
browser.
...the extension will hook into the
browser using a xul specific feature called an overlay which allows the xul from the extension to mesh with the xul in the
browser.
...And 24 more matches
Codecs used by WebRTC - Web media technologies
this guide reviews the codecs that
browsers are required to implement as well as other codecs that some or all
browsers support for webrtc.
...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.
...this guide reviews the codecs that
browsers are required to implement as well as other codecs that some or all
browsers support for webrtc.
...And 24 more matches
Window - Web APIs
in a tabbed
browser, each tab is represented by its own window object; the global window seen by javascript code running within a given tab always represents the tab in which the code is running.
... that said, even in a tabbed
browser, some properties and methods still apply to the overall window that contains the tab, such as resizeto() and innerheight.
... window.console read only returns a reference to the console object which provides access to the
browser's debugging console.
...And 23 more matches
Writing forward-compatible websites - Developer guides
this page explains how to write websites that do not break when new
browser versions are released.
... what this means is that any time you access a global variable in an event handler content attribute, including calling any function declared globally, you can end up with a name collision if a specification adds a new dom property to elements or documents which has the same name as your function or variable, and a
browser implements it.
... as a simple example, don't assume that any
browser in which "filter" in body.style tests true must be microsoft internet explorer and therefore e.g.
...And 23 more matches
List of Mozilla-Based Applications - Archive of obsolete content
abstract accounting tool adobe acrobat and adobe reader portable document format (pdf) software uses mozilla spidermonkey adobe flash player popular
browser plug-in uses nss in linux version adwatch content management system uses xul and xpcom aicpcu/iia exam app exam delivery software aliwal geocoder geocoding & data on a map amarok xul remote remote control for amarok music player ample sdk javascript gui-framework aol instant messenger im client uses n...
...red to use nss with mod_nss ssl module apicawatch site performance monitoring tool uses firefox as part of its monitoring package astyle css editor editing tool atmail webmail client aviva for java mainframe connectivity product uses mozilla rhino babelgum internet tv service basilisk pre-servo xul-based web
browser uses most of the firefox 55 source code batik java-based toolkit uses mozilla rhino bitbox security focused
browser seemingly based on firefox blackbird
browser for african american community bluegriffon wysiwyg editor next generation version of composer buzzbird twitter client built on xulrunner camino bro...
... celtx media tool cenzic hailstorm vulnerability assessment and management tool uses gecko chatzilla irc client standalone version (xulrunner) chromium and google chrome web
browser uses mozilla nss and npapi libraries chromeless
browser with html-based interface classilla mozilla
browser for mac os 9 clines a clone of color lines (game) standalone version cloud web operating system cloud browse iphone/ipad/ipod touch
browser seems to be firefox running remotely on servers that people access through device conkeror keyboard-oriented
browser convertigo enterprise mashup server ser...
...And 22 more matches
How CSS works - Learn web development
in this lesson we will take a look at how a
browser takes css and html and turns that into a webpage.
... 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 how css and html are parsed by the
browser, and what happens when a
browser encounters css it does not understand.
... when a
browser displays a document, it must combine the document's content with its style information.
...And 22 more matches
Implementing feature detection - Learn web development
previous overview: cross
browser testing next feature detection involves working out whether a
browser supports a certain block of code, and running different code depending on whether it does (or doesn't), so that the
browser can always provide a working experience rather than crashing/erroring in some
browsers.
... prerequisites: familiarity with the core html, css, and javascript languages; an idea of the high-level principles of cross-
browser testing.
... the concept of feature detection the idea behind feature detection is that you can run a test to determine whether a feature is supported in the current
browser, and then conditionally run code to provide an acceptable experience both in
browsers that do support the feature, and
browsers that don't.
...And 22 more matches
<video>: The Video Embed element - HTML: Hypertext Markup Language
in a similar manner to the <img> element, we include a path to the media we want to display inside the src attribute; we can include other attributes to specify information such as video width and height, whether we want it to autoplay and loop, whether we want to show the
browser's default video controls, etc.
... the content inside the opening and closing <video></video> tags is shown as a fallback in
browsers that don't support the element.
... in some
browsers (e.g.
...And 22 more matches
Cross-Origin Resource Sharing (CORS) - HTTP
cross-origin resource sharing (cors) is a mechanism that uses additional http headers to tell
browsers to give a web application running at one origin, access to selected resources from a different origin.
... for security reasons,
browsers restrict cross-origin http requests initiated from scripts.
... the cors mechanism supports secure cross-origin requests and data transfers between
browsers and servers.
...And 22 more matches
The building blocks of responsive design - Progressive web apps (PWAs)
for web developers, it is now fairly common to be called upon to create a web site or app that changes its user interface depending on the
browser or device accessing the site to provide an optimized experience.
... one approach to this is to create different versions of your site/app for different platforms or
browsers and serve them appropriately after detecting which
browser or platform is looking at your site.
... but this is increasingly inefficient:
browser sniffing is inherently error prone, and maintaining multiple copies of your code can turn out to be a nightmare.
...And 22 more matches
The Essentials of an Extension - Archive of obsolete content
this is important because the appearance of the
browser is very different for each operating system.
...this is what a chrome uri looks like: chrome://packagename/section/path/to/file so, for instance, if i want to access the file
browseroverlay.xul in the extension, the chrome uri would be chrome://xulschoolhello/content/
browseroverlay.xul.
...so, to access the dtd file in the hello world extension, the chrome path is chrome://xulschoolhello/locale/
browseroverlay.dtd.
...And 21 more matches
jspage - Archive of obsolete content
evalue)?"textnode":"whitespace";}}else{if(typeof a.length=="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},platform:{name:(window.orientation!=undefined)?"ipod":(navigator.platform.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)?95...
...0:925)); },trident:function(){return(!window.activexobject)?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.platform[
browser.platform.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 ne...
...w activexobject("microsoft.xmlhttp");});};
browser.features.xhr=!!(
browser.request());
browser.plugins.flash=(function(){var a=($try(function(){return navigator.plugins["shockwave flash"].description; },function(){return new activexobject("shockwaveflash.shockwaveflash").getvariable("$version");})||"0 r0").match(/\d+/g);return{version:parseint(a[0]||0+"."+a[1],10)||0,build:parseint(a[2],10)||0}; })();function $exec(b){if(!b){return b;}if(window.execscript){window.execscript(b);}else{var a=document.createelement("script");a.setattribute("type","text/javascript"); a[(
browser.engine.webkit&&
browser.engine.version<420)?"innertext":"text"]=b;document.head.appendchild(a);document.head.removechild(a);}return b;}native.uid=1; var $uid=(
browser.engine.trident)?function(a){return(a.uid||(a.uid=[native.uid++]...
...And 21 more matches
Index - Archive of obsolete content
30
browser.type xul attributes, xul reference type: one of the values below.the type of
browser, which can be used to set access of the document loaded inside the
browser.
... 31
browserid xul, xul reference no summary!
... 476 get
browseratindex xul methods, xul reference no summary!
...And 21 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 information, tell the
browser to repaint part of the window, and so forth.
... the names of all of these methods begin with npn_ to indicate that they are implemented by the
browser and called by the plug-in.
... np_getvalue allows the
browser to query the plug-in for information.
...And 21 more matches
Windows Media in Netscape - Archive of obsolete content
detecting the right
browser like internet explorer, netscape 7.1 and later versions can play windows media files using the popular windows media player activex control.
...netscape 7.1 is the first netscape gecko™
browser to support the windows media player as an activex control -- previous netscape
browsers did not support any activex controls, and thus detecting which versions of netscape support the windows media activex control is an important first step towards building multimedia experiences using html, javascript, and the windows media activex control.
... the windows media 9 series sdk documentation for netscape
browsers says that versions of netscape (including 6.2 and 7.0) support the embedding of the windows media player control using a java applet.
...And 21 more matches
Beginner's guide to media queries - Learn web development
previous overview: css layout next the css media query gives you a way to apply css only when the
browser and device environment matches a rule that you specify, for example "viewport is wider than 480 pixels".
... media query basics the simplest media query syntax looks like this: @media media-type and (media-feature-rule) { /* css rules go here */ } it consists of: a media type, which tells the
browser what kind of media this code is for (e.g.
...it will not apply when the page is loaded in a
browser.
...And 21 more matches
Responsive images - Learn web development
this kind of problem didn't exist when the web first existed, in the early to mid 90s — back then the only devices in existence to browse the web were desktops and laptops, so
browser engineers and spec writers didn't even think to implement solutions.
... responsive image technologies were implemented recently to solve the problems indicated above by letting you offer the
browser several image files, either all showing the same thing but containing different numbers of pixels (resolution switching), or different images suitable for different space allocations (art direction).
... note: the new features discussed in this article — srcset/sizes/<picture> — are all supported in release versions of modern desktop and mobile
browsers (including microsoft's edge
browser, although not internet explorer.) how do you create responsive images?
...And 21 more matches
Client-side storage - Learn web development
previous overview: client-side web apis modern web
browsers support a number of ways for web sites to store data on the user's computer — with the user's permission — then retrieve it when necessary.
...most major modern web sites are dynamic — they store data on the server using some kind of database (server-side storage), then run server-side code to retrieve needed data, insert it into static page templates, and serve the resulting html to the client to be displayed by the user's
browser.
... note: there are limits to the amount of data you can store using client-side storage apis (possibly both per individual api and cumulatively); the exact limit varies depending on the
browser and possibly based on user settings.
...And 21 more matches
Embedding Tips
get thensiwebnavigation interface on your web
browser and call the loaduri method with the appropriate uri and flags.
... implement the nsiwebprogresslistener interface and register it with the appropriate web
browser object via the nsiweb
browser::addweb
browserlistener() method.
... implement the nsiuricontentlistener interface, and register it with the appropriate web
browser object via the nsiweb
browser::parenturicontentlistener attribute.
...And 21 more matches
Mozilla Web Developer FAQ
this document answers questions that web authors ask frequently specifically in connection with firefox and other gecko-based
browsers.
...in the quirks mode—for the purpose of backwards compatibility—gecko mimics some behaviors of legacy
browsers in ways that are spec violations.
... since also other contemporary
browsers have a standards mode, activating the standards mode or the almost standards mode in other
browsers as well (using the above-mentioned exact doctypes) is the best way to get consistent css layout results across different
browsers.
...And 21 more matches
Places Developer Guide
bookmarks the toolkit bookmarks service is nsinavbookmarksservice: var bookmarks = cc["@mozilla.org/
browser/nav-bookmarks-service;1"] .getservice(ci.nsinavbookmarksservice); this service provides methods for adding, editing and deleting items in the bookmarks collection.
...however, firefox developers can take advantage of several helper apis that are
browser-specific: fuel - a collection of wrapper apis for easing access to a number of firefox utilities and services nsiplacestransactionsservice - a firefox service for modifying bookmarks in a transactional manner, providing facilities for undo/redo places utilities for javascript - accessors and helper functions for firefox and extensions creating bookmarks, folders and other items creating a...
... creating a livemark var ioservice = cc["@mozilla.org/network/io-service;1"] .getservice(ci.nsiioservice); var siteuri = ioservice.newuri("http://www.mozilla.com", null, null); var feeduri = ioservice.newuri("http://www.mozilla.org/news.rdf", null, null); var livemarks = cc["@mozilla.org/
browser/livemark-service;2"] .getservice(ci.nsilivemarkservice); livemarks.createlivemark(bookmarks.toolbarfolder, // the id of the folder the livemark will be placed in "my livemark title", // the title of the livemark siteuri, // the uri of the site.
...And 21 more matches
Building the WebLock UI
in this chapter, however, we are going to be building a user interface for the weblock component that's meant to be added to the existing mozilla
browser[other-mozlike-
browsers].
...specifically, the user interface we create in this chapter will be overlaid into the statusbar of the
browser component, where it will provide a small icon the user can click to access the web lock interface.
... weblock indicator in
browser user interface package list the user interface described in this section is comprised of four files: weblockoverlay.xul is the file that defines the little status icon in the
browser.
...And 21 more matches
nsISessionStore
browser/components/sessionstore/nsisessionstore.idlscriptable provides a means for extensions and other code to store data in association with
browser sessions, tabs, and windows.
... the api operates on top-level
browser.xul and navigator.xul windows; see note on windows for details.
... 1.0 66 introduced gecko 1.8 inherits from: nsisupports last changed in gecko 2.0 (firefox 4 / thunderbird 3.3 / seamonkey 2.1) in versions of firefox prior to 3.5, the user preference
browser.sessionstore.enabled must be true for these calls to be successful.
...And 21 more matches
Using feature queries - CSS: Cascading Style Sheets
feature queries are created using the css at-rule @supports, and are useful as they give web developers a way to test to see if a
browser has support for a certain feature, and then provide css that will only run based on the result of that test.
...the difference is that with a media query you are testing something about the environment in which the web page is running, whereas with feature queries you are testing
browser support for css features.
...you may not test for a bare property name such as display; the rule requires a property name and a value: @supports (property: value) { css rules to apply } if you want to check if a
browser supports the row-gap property, for example, you would write the following feature query.
...And 21 more matches
<input>: The Input (Form Input) element - HTML: Hypertext Markup Language
<input type="checkbox" name="checkbox"/> color a control for specifying a color; opening a color picker when active in supporting
browsers.
...opens a date picker or numeric wheels for year, month, day when active in supporting
browsers.
...opens a date picker or numeric wheels for date- and time-components when active in supporting
browsers.
...And 21 more matches
Media container formats (file types) - Web media technologies
see codecs used by webrtc for information about codecs commonly used for making webrtc calls, as well as
browser compatibility information around codec support in webrtc.
...not all of these are broadly supported by
browsers, however; some combinations of container and codec are sometimes given their own file extensions and mime types as a matter of convenience, or because of their ubiquity.
... index of media container formats (file types) to learn more about a specific container format, find it in this list and click through to the details, which include information about what the container is typically useful for, what codecs it supports, and which
browsers support it, among other specifics.
...And 21 more matches
tabs/utils - Archive of obsolete content
functions for working with xul tabs and the xul tab
browser object.
... window : window a
browser window.
... gettab
browser(window) get the tab
browser element for the given
browser window.
...And 20 more matches
Advanced form styling - Learn web development
unfortunately, the behavior of this property's original implementations was very different across
browsers, making it not very usable.
... newer implementations are more consistent in behavior; interestingly enough, both chromium-based
browsers (chrome, opera, edge), safari, and firefox all support the -webkit- prefixed version (-webkit-appearance).
...prefixed usually means "work in progress", so in the future
browser vendors may come to a consensus to drop the prefix.
...And 20 more matches
Introduction to events - Learn web development
in this article, we discuss some important concepts surrounding events, and look at how they work in
browsers.
... objective: to understand the fundamental theory of events, how they work in
browsers, and how events may differ in different programming environments.
... in the case of the web, events are fired inside the
browser window, and tend to be attached to a specific item that resides in it — this might be a single element, set of elements, the html document loaded in the current tab, or the entire
browser window.
...And 19 more matches
What is JavaScript? - Learn web development
browser apis are built into your web
browser, and are able to expose data from the surrounding computer environment, or do useful complex things.
... note: many of the above demos won't work in an older
browser — when experimenting, it's a good idea to use a modern
browser like firefox, chrome, edge or opera to run your code in.
... you will need to consider cross
browser testing in more detail when you get closer to delivering production code (i.e.
...And 19 more matches
Client-Server Overview - Learn web development
previous overview: first steps next now that you know the purpose and potential benefits of server-side programming we're going to examine in detail what happens when a server receives a "dynamic request" from a
browser.
... web servers and http (a primer) web
browsers communicate with web servers using the hypertext transfer protocol (http).
... 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.
...And 19 more matches
Initialization and Destruction - Plugins
initialization: the
browser calls the plug-in api function np_initialize when the plug-in code is first loaded.
... instance creation: the
browser calls the plug-in api function npp_new when the instance is created.
... instance destruction: the plug-in instance is deleted when the user leaves the instance page or closes the instance window; the
browser calls the function npp_destroy to tell the plug-in that the instance is being deleted.
...And 19 more matches
requiredFeatures - SVG: Scalable Vector Graphics
it determines whether or not all of the named features are supported by the
browser; if all of them are supported, the attribute evaluates to true end the element is rendered; otherwise, the attribute evaluates to false and the current element and its children are skipped and thus will not be rendered.
...determines whether all of the named features are supported by the
browser.
...in some cases the feature strings map directly to a set of attributes, properties or elements, in others they represent some functionality of the
browser.
...And 19 more matches
MCD, Mission Control Desktop, AKA AutoConfig - Archive of obsolete content
objective the objective is to provide users with a mailer agent, a web
browser, and a news reader which are automatically configured (preferences) at startup to the current user connected on the computer.
... firefox 22 omni.jar archive file became omni.ja since http://blog.ffextensionguru.com/2011/11/16/omni-jar-to-become-omni-ja/ [root@localhost firefox]# unzip -l /usr/lib/firefox/
browser/omni.ja | grep defaults/pr warning [/usr/lib/firefox/
browser/omni.ja]: 3598815 extra bytes at beginning or within zipfile (attempting to process anyway) error [/usr/lib/firefox/
browser/omni.ja]: reported length of central directory is -3598815 bytes too long (atari stzip zipfile?
... [root@calaz firefox]# cat firefox.cfg //put everything in a try/catch try { //privacy & security defaultpref("signon.remembersignons", false); //proxy and cache, as it is on nfs volume, we don't want cache lockpref("
browser.cache.disk.capacity", 0); lockpref("network.cookie.cookiebehavior", 0); defaultpref("network.proxy.autoconfig_url", "http://wpad.int-evry.fr/wpad.dat"); defaultpref("network.proxy.type", 2); lockpref("network.protocol-handler.app.mailto", "/usr/bin/thunderbird"); //firefox3 urlclassifier3.sqlite iowait/cpu pb //http://forums.mozillazine.org/viewtopic.php?p=3381133#3381133 defaultpref("
browser.sa...
...And 18 more matches
Download Manager preferences - Archive of obsolete content
preference description
browser.download.antivirus.dontclean note: in gecko 1.9.1.
...
browser.download.manager.addtorecentdocs a boolean value that indicates whether or not new downloads should be added to the recent documents list.
...
browser.download.manager.alertonexeopen a boolean value that indicates whether the ui should alert the user about the dangers of opening (executing) an exe.
...And 18 more matches
Debugging CSS - Learn web development
this article will give you guidance on how to go about debugging a css problem, and show you how the devtools included in all modern
browsers can help you to find out what is going on.
... prerequisites: basic computer literacy, basic software installed, basic knowledge of working with files, html basics (study introduction to html), and an idea of how css works (study css first steps.) objective: to learn the basics of what
browser devtools are, and how to do simple inspection and editing of css.
... 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 platforms.
...And 18 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 information, and check on the current version of the plug-in api and the
browser.
... displaying a status line message users are accustomed to checking the ui status line at the bottom of the
browser window for updates on the progress of an operation or the url of a link on the page.
...the user might appreciate seeing the percentage completed of the current operation or the url of a button or other link object when the cursor is over it, all of which the
browser shows.
...And 18 more matches
CSS Grid Layout and Progressive Enhancement - CSS: Cascading Style Sheets
in spring of 2017, we saw for the first time a major specification like grid being shipped into
browsers almost simultaneously, and we now have css grid layout support in the public versions of firefox, chrome, opera, safari and edge.
... however, while evergreen
browsers mean that many of us are going to see the majority of users having grid layout support very quickly, there are also old or non-supporting
browsers to contend with.
... the supporting
browsers other than in internet explorer, css grid layout is unprefixed in safari, chrome, opera, firefox and edge.
...And 18 more matches
Overview of events and handlers - Developer guides
this overview of events and event handling explains the code design pattern used to react to incidents occurring when a
browser accesses a web page, and it summarizes the types of such incidents modern web
browsers can handle.
... events and event handling provide a core technique in javascript for reacting to incidents occurring when a
browser accesses a web page, including events from preparing a web page for display, from interacting with the content of the web page, relating to the device on which the
browser is running, and from many other causes such as media stream playback or animation timing.
... events and event handling become central to web programming with the addition of the language to
browsers, accompanying a switch in the rendering architecture of
browsers from fetch and load page rendering to event driven, reflow based, page rendering.
...And 18 more matches
<input type="datetime-local"> - HTML: Hypertext Markup Language
the control's ui varies in general from
browser to
browser; at the moment support is patchy, with only chrome/opera and edge on desktop and most modern versions of mobile
browsers having usable implementations.
... in other
browsers, these degrade gracefully to simple <input type="text"> controls.
...some mobile
browsers (particularly on ios) do not currently implement this correctly.
...And 18 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.
...however, the ones listed below are generally recognized as usable on the web, though bmp is generally not recommended as
browser support is potentially constrained; it should usually be avoided for web content.
... 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 photographic expert group image image/jpeg .jpg, .jpeg, .jfif, .pjpeg, .pjp chrome, edge, firefox, internet explorer, opera, safari png portable network graphics image/png .png chrome,...
...And 18 more matches
SVG documentation index - SVG: Scalable Vector Graphics
svg: scalable vector graphics 2d graphics, graphics, icons, images, reference, responsive design, svg, scalable graphics, scalable images, vector graphics, web, l10n:priority scalable vector graphics (svg) are an xml-based markup language for describing two-dimensional based vector graphics.xml 2 applying svg effects to html content css, guide, html, svg modern
browsers support using svg within css styles to apply graphical effects to html content.
...versions of svg viewers prior to the release of firefox 1.5 unfortunately paid scant attention to namespaces, but they are essential to multi-xml dialect supporting user agents such as gecko-based
browsers which must be very strict.
... 107 image-rendering needsexample, svg, svg attribute the image-rendering attribute provides a hint to the
browser about how to make speed vs.
...And 18 more matches
Client-side form validation - Learn web development
when you enter data, the
browser and/or the web server will check to see that the data is in the correct format and within the constraints set by the application.
... validation done in the
browser is called client-side validation, while validation done on the server is called server-side validation.
... if the user tries to send the data, the
browser will submit the form, provided there is nothing else stopping it from doing so (e.g., javascript).
...And 17 more matches
Using Service Workers - Web APIs
setting up to play with service workers many service workers features are now enabled by default in newer versions of supporting
browsers.
... if however you find that demo code is not working in your installed versions, you might need to enable a pref: firefox nightly: go to about:config and set dom.serviceworkers.enabled to true; restart
browser.
... chrome canary: go to chrome://flags and turn on experimental-web-platform-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.
...And 17 more matches
Backwards Compatibility of Flexbox - CSS: Cascading Style Sheets
flexbox is very well supported across modern
browsers, however there are a few issues that you might run into.
... in this guide we will look at how well flexbox is supported in
browsers, and look at some potential issues, resources and methods for creating workarounds and fallbacks.
... flexbox was implemented in an experimental way in several web
browsers.
...And 17 more matches
<audio>: The Embed Audio element - HTML: Hypertext Markup Language
it may contain one or more audio sources, represented using the src attribute or the <source> element: the
browser will choose the most suitable one.
...in a similar manner to the <img> element, we include a path to the media we want to embed inside the src attribute; we can include other attributes to specify information such as whether we want it to autoplay and loop, whether we want to show the
browser's default audio controls, etc.
... the content inside the opening and closing <audio></audio> tags is shown as a fallback in
browsers that don't support the element.
...And 17 more matches
<input type="date"> - HTML: Hypertext Markup Language
the input ui generally varies from
browser to
browser; see
browser compatibility for further details.
... in unsupported
browsers, the control degrades gracefully to <input type="text">.
... 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.
...And 17 more matches
<textarea> - HTML: Hypertext Markup Language
setting these is a good idea for consistency, as
browser defaults can differ.
... autocapitalize this is a non-standard attribute supported by webkit on ios (therefore nearly all
browsers running on ios, including safari, firefox, and chrome), which controls whether and how the text value should be automatically capitalized as it is entered/edited by the user.
... autocomplete this attribute indicates whether the value of the control can be automatically completed by the
browser.
...And 17 more matches
Web audio codec guide - Web media technologies
of course, individual
browsers may or may not choose to support all of these codecs, and their support for which container types can use them may vary as well.
... in addition,
browsers may choose to support additional codecs not included on this list.
... supported sample rates 8 khz - 96 khz recommended minimum bit rate for stereo sound 96 kbps at 48 khz sample rate compression lossy maximum audio channels 48 (plus 16 low frequency enhancement channels) audio frequency bandwidth 0 hz - 96 khz (standard audio channels) 0 hz - 120 hz (lfe channels) latency 20 ms to 405 ms
browser compatibility feature chrome edge firefox internet explorer opera safari aac support yes[2] yes yes[1] 9 yes 3.1 container support mp4, adts, 3gp rtp / webrtc compatible yes licensing for streaming or distri...
...And 17 more matches
Mozilla Application Framework in Detail - Archive of obsolete content
this innovation in
browser technology offers small size, speed and industry leading standards support.
...as personal connectivity expands from the desktop computer to new web-enabled products and devices, gecko is a
browser engine that has been designed from the ground up to power a new generation of desktop
browsers and browsing devices and to accelerate the growth and development of the next-generation internet.
... small, fast and standards compliant, gecko is easily embeddable across platforms in
browsers, desktop applications and browsing devices and delivers full-functionality browsing to them all.
...And 16 more matches
Handling common accessibility problems - Learn web development
previous overview: cross
browser testing next next we turn our attention to accessibility, providing information on common problems, how to do simple testing, and how to make use of auditing/automation tools for finding accessibility issues.
... prerequisites: familiarity with the core html, css, and javascript languages; an idea of the high level principles of cross
browser testing.
... users of older devices that might not have the latest
browsers.
...And 16 more matches
MIME types (IANA media types) - HTTP
important:
browsers use the mime type, not the file extension, to determine how to process a url, so it's important that web servers send the correct mime type in the response's content-type header.
... if this is not correctly configured,
browsers are likely to misinterpret the contents of files and sites will not work correctly, and downloaded files may be mishandled.
... with the exception of multipart/form-data, used in the post method of html forms, and multipart/byteranges, used with 206 partial content to send part of a document, http doesn't handle multipart documents in a special way: the message is transmitted to the
browser (which will likely show a "save as" window if it doesn't know how to display the document).
...And 16 more matches
WAI-ARIA basics - Learn web development
wai-aria is a technology that can help with such problems by adding in further semantics that
browsers and assistive technologies can recognize and use to let users know what is going on.
...html5 provides special input types to render such controls: <input type="date"> <input type="range"> these are not well-supported across
browsers, and it is also difficult to style them, making them not very useful for integrating with website designs.
... an important point about wai-aria attributes is that they don't affect anything about the web page, except for the information exposed by the
browser's accessibility apis (where screenreaders get their information from).
...And 15 more matches
The web and web standards - Learn web development
by late 1990, timbl had created all the things needed to run the first version of the web — http, html, the first web
browser, which was called worldwideweb, an http server, and some web pages to look at.
... in the next few years that followed, the web exploded, with multiple
browsers being released, thousands of web servers being set up, and millions of web pages being created.
...these documents are not very useful for learning how to use the technologies they describe (this is why we have sites like mdn web docs), but instead are intended to be used by software engineers to implement these technologies (usually in web
browsers).
...And 15 more matches
WebGL best practices - Web APIs
you can rely on this document to guide your choice of approach, and ensure you're on the right track no matter what
browser or hardware your users run.
...for unchanged vaos,
browsers can cache the fetch limits, whereas when vaos change,
browsers must revalidate and recalculate limits.
... in production code, avoid such entry points, especially on the
browser main thread where they can cause the entire page to jank (often including scrolling or even the whole
browser).
...And 15 more matches
Viewport concepts - CSS: Cascading Style Sheets
in web
browser terms, it is generally the same as the
browser window, excluding the ui, menu bar, etc.
...the size of the viewport depends on the size of the screen, whether the
browser is in fullscreen mode or not, and whether or not the user zoomed in.
... on larger monitors where applications aren't necessarily full screen, the viewport is the size of the
browser window.
...And 15 more matches
<img>: The Image Embed element - HTML: Hypertext Markup Language
a complete guide to image formats supported by web
browsers is available.
... 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 photographic expert group...
...cs image/svg+xml .svg chrome, edge, firefox, internet explorer, opera, safari tiff tagged image file format image/tiff .tif, .tiff none built-in; add-ons required webp web picture format image/webp .webp chrome, edge, firefox, opera the abbreviation for each format links to a longer description of the format, its capabilities, and detailed
browser compatibility information; including which versions introduced support and specific special features that may have been introduced later.
...And 15 more matches
<input type="month"> - HTML: Hypertext Markup Language
the control's ui varies in general from
browser to
browser; at the moment support is patchy, with only chrome/opera and edge on desktop — and most modern mobile
browser versions — having usable implementations.
... 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.
... for those of you using a
browser that doesn't support month, the screenshot below shows what it looks like in chrome and opera.
...And 15 more matches
<input type="time"> - HTML: Hypertext Markup Language
the control's user interface will vary from
browser to
browser.
... support is good in modern
browsers, with safari being the sole major
browser not yet implementing it; in safari, and any other
browsers that don't support <time>, it degrades gracefully to <input type="text">.
... using time inputs although among the date and time input types time has the widest
browser support, it is not yet approaching universal, so it is likely that you'll need to provide an alternative method for entering the date and time, so that safari users (and users of other non-supporting
browsers) can still easily enter time values.
...And 15 more matches
<input type="week"> - HTML: Hypertext Markup Language
the control's user interface varies from
browser to
browser; cross-
browser support is currently a bit limited, with only chrome/opera and microsoft edge supporting it at this time.
... in non-supporting
browsers, the control degrades gracefully to function identically to <input type="text">.
...when the above value is submitted to the server, for example,
browsers may display it as week 01, 2017, but the submitted value will always look like week=2017-w01.
...And 15 more matches
Index - HTTP
browsers set adequate values for this header depending on the context where the request is done: when fetching a css stylesheet a different value is set for the request than when fetching an image, video or a script.
...
browsers usually don't set this header as the default value for each content type is usually correct and transmitting it would allow easier fingerprinting.
...
browsers set adequate values for this header according to their user interface language and even if a user can change it, this happens rarely (and is frowned upon as it leads to fingerprinting).
...And 15 more matches
Web Performance
the performance 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.critical rendering paththe critical rendering path is the sequence of steps the
browser goes through to convert the html, css, and javascript into pixels on the screen.
... optimizing the critical render path improves render performance.the critical rendering path includes the document object model (dom), css object model (cssom), render tree and layout.css and javascript animation performance
browsers are able to optimize rendering flows.
... navigation and resource timingsnavigation timings are metrics measuring a
browser's document navigation events.
...And 15 more matches
XUL Migration Guide - Archive of obsolete content
xul overlays xul overlays are used to modify existing windows such as the main
browser window.
... in this way an extension can integrate its user interface into the
browser: for example, adding menu items, buttons, and toolbars.
...to add user interface components to the
browser, there are a few different options.
...And 14 more matches
windows - Archive of obsolete content
enumerate and examine open
browser windows, open new windows, and listen for window events.
... usage the windows module provides basic functions for working with
browser windows.
... with this module, you can: enumerate the currently opened
browser windows open new
browser windows listen for common window events such as open and close private windows if your add-on has not opted into private browsing, then you won't see any private
browser windows.
...And 14 more matches
Adobe Flash - Archive of obsolete content
the focus of this article is to present tips on scripting flash within gecko™-based web
browsers.
... detecting the right flash plugin (and
browser) adobe flash has exposed the scriptability feature in netscape gecko
browsers since flash 6r49 and later.
... versions of flash prior to flash 6r49 (such as flash 5) are not scriptable in netscape gecko
browsers.
...And 14 more matches
What is a URL? - Learn web development
it is the mechanism used by
browsers to retrieve any published resource on the web.
... deeper dive basics: anatomy of a url here are some examples of urls: https://developer.mozilla.org https://developer.mozilla.org/docs/learn/ https://developer.mozilla.org/search?q=url any of those urls can be typed into your
browser's address bar to tell it to load the associated page (resource).
...the first part of the url indicates which protocol the
browser must use.
...And 14 more matches
What’s in the head? Metadata in HTML - Learn web development
previous overview: introduction to html next the head of an html document is the part that is not displayed in the web
browser when the page is loaded.
... let's revisit the simple html document we covered in the previous article: <!doctype html> <html> <head> <meta charset="utf-8"> <title>my test page</title> </head> <body> <p>this is my page</p> </body> </html> the html head is the contents of the <head> element — unlike the contents of the <body> element (which are displayed on the page when loaded in a
browser), the head's content is not displayed on the page.
... the <h1> element appears on the page when loaded in the
browser — generally this should be used once per page, to mark up the title of your page content (the story title, or news headline, or whatever is appropriate to your usage.) the <title> element is metadata that represents the title of the overall html document (not the document's content.) active learning: inspecting a simple example to start off this active learning, we'd like you to go to our...
...And 14 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.
...it should end up looking something like this: function handlesubmit(e) { e.preventdefault(); alert('hello, world!'); } to use this function, add an onsubmit attribute to the <form> element, and set its value to the handlesubmit function: <form onsubmit={handlesubmit}> now if you head back to your
browser and click on the "add" button, your
browser will show you an alert dialog with the words "hello, world!" — or whatever you chose to write there.
...update it as follows: function handlesubmit(e) { e.preventdefault(); props.addtask("say hello!"); } clicking on the "add" button in your
browser will prove that the addtask() callback function works, but it'd be nice if we could get the alert to show us what we're typing in our input field!
...And 14 more matches
Using XPCOM Components
applications like the mozilla
browser are sophisticated, modularized clients of xpcom components.
... in fact, virtually all of the functionality that you associate with a
browser - navigation, window management, managing cookies, bookmarks, security, searching, rendering, and other features - is defined in xpcom components and accessed by means of those component interfaces.
...for now, what's important to see is how components like the ones in this section are obtained and used by the mozilla
browser.
...And 14 more matches
Index - Firefox Developer Tools
14
browser console
browser, debugging, tools, web development, webdevelopment:tools the
browser console is like the web console, but applied to the whole
browser rather than a single content tab.
... 15
browser toolbox debug, firefox, javascript the
browser toolbox enables you to debug add-ons and the
browser's own javascript code rather than just web pages like the normal toolbox.
... the
browser toolbox's context is the whole
browser rather than just single page on a single tab.
...And 14 more matches
Console messages - Firefox Developer Tools
open url in new tab opens the url in a new
browser tab.
...a reflow is the name given to the operation in which the
browser calculates the layout of all or part of the page.
... reflows occur when a change has happened to a page that the
browser thinks affects the layout.
...And 14 more matches
Using IndexedDB - Web APIs
indexeddb is a way for you to persistently store data inside a user's
browser.
... creating and structuring the store using an experimental version of indexeddb in case you want to test your code in
browsers that still use a prefix, you can use the following code: // in the following line, you should include the prefixes of implementations you want to test.
...// moreover, you may need references to some window.idb* objects: window.idbtransaction = window.idbtransaction || window.webkitidbtransaction || window.msidbtransaction || {read_write: "readwrite"}; // this line should only be needed if it is needed to support the object's constants for older
browsers window.idbkeyrange = window.idbkeyrange || window.webkitidbkeyrange || window.msidbkeyrange; // (mozilla has never prefixed these objects, so we don't need window.mozidb*) beware that implementations that use a prefix may be buggy, or incomplete, or following an old version of the specification.
...And 14 more matches
MediaDevices.getUserMedia() - Web APIs
if the
browser cannot find all media tracks with the specified types that meet the constraints given, then the returned promise is rejected with notfounderror.
...the following expresses a preference for 1280x720 camera resolution: { audio: true, video: { width: 1280, height: 720 } } the
browser will try to honour this, but may return other resolutions if an exact match is not available, or the user overrides it.
...here's a full example: { audio: true, video: { width: { min: 1024, ideal: 1280, max: 1920 }, height: { min: 576, ideal: 720, max: 1080 } } } an ideal value, when used, has gravity, which means that the
browser will try to find the setting (and camera, if you have more than one), with the smallest fitness distance from the ideal values given.
...And 14 more matches
Navigator - Web APIs
standard navigatorid.appcodename read only returns the internal "code" name of the current
browser.
... navigatorid.appname read only returns a domstring with the official name of the
browser.
... navigatorid.appversion read only returns the version of the
browser as a domstring.
...And 14 more matches
ui/frame - Archive of obsolete content
it occupies the whole width of the
browser window and is 18 pixels high on a normal-resolution display or 36 pixels high on a high-resolution (hidpi) display.
...however, they will appear in the
browser console.
...a frame creates a separate iframe instance for each
browser window.
...And 13 more matches
Listening to events in Firefox extensions - Archive of obsolete content
types of events there are multiple types of events that application and extension authors can use to receive notifications from <xul:
browser> and <xul:tab
browser> elements to hear about changes relating to loads of the content contained within them.
...} b.addeventlistener("event", callback, false) where b is the
browser or tab
browser you wish to watch for events from.
... keep in mind that the events may come from any frame within the
browser or, for a tab
browser, any of the
browsers within it.
...And 13 more matches
Chapter 3: Introduction to XUL—How to build a more intuitive UI - Archive of obsolete content
introduction an overview of xul xul is an xml-based language, and was developed to be the gui markup language for the mozilla
browser.
... xul display methods xul is used almost exclusively in mozilla applications like firefox and thunderbird, and extensions for them, but other web
browsers based on firefox or the gecko engine, and even web-based content also used xul.
... for example, there is the mozilla amazon
browser, which helps with shopping at amazon, and the presentation method in xul, a tool for writing and displaying presentations to try out the code samples in this chapter, save them as text files with .xul extensions and drag and drop them into the firefox
browser window.
...And 13 more matches
Manifest Files - Archive of obsolete content
if you just want to try testing privileged xul code in the firefox
browser, you can do this easily by just using a manifest with only one line in it: create a new directory somewhere.
...if you aren't sure what the file path is, open that directory in a
browser and copy the url from the address field.
...of course, you will need to restart the
browser for the changes to take effect.
...And 13 more matches
The Business Benefits of Web Standards - Archive of obsolete content
introduction and context doing more with less seems to be the mission impossible for web designers: addressing more customers, a broader audience, more diversity in terms of
browsers, more accessibility, users asking for more speed, while spending less to maintain or redesign a web site.
...in the same way that standards hugely reduce the concern we need to have for
browser differences, they also reduce the differences between the way search engines rank pages.
...while some
browsers have quirks that cause different behavior by platform, mozilla-based
browsers are designed to behave identically on all supported platforms (mac, linux, unix, windows...) web content is increasingly being accessed by a growing number of user agents other than
browsers, or by
browsers on different platforms - for example mobile telephones.
...And 13 more matches
Responsive design - Learn web development
historic website layouts at one point in history you had two options when designing a website: you could create a liquid site, which would stretch to fill the
browser window or a fixed width site, which would be a fixed size in pixels.
...when viewing the example, drag your
browser window in and out to see how this looks at different sizes.
...again, observe the result as you change the
browser window size.
...And 13 more matches
Drawing graphics - Learn web development
previous overview: client-side web apis next the
browser contains some very powerful graphics programming tools, from the scalable vector graphics (svg) language, to apis for drawing on html <canvas> elements, (see the canvas api and webgl).
... the situation started to improve when
browsers began to support the <canvas> element and associated canvas api — apple invented it in around 2004, and other
browsers followed by implementing it in the years that followed.
...this became webgl, which gained traction among
browser vendors, and was standardized around 2009–2010.
...And 13 more matches
WebRequest.jsm
the webrequest api is modeled on chrome's webrequest extension api, which makes it easier to write cross-
browser add-on code.
... in particular, "blocking" may be passed to several event types, and will make the event dispatch synchronous, so the
browser will wait for the event listener to return before continuing with the request.
...if you don't pass filter, then the listener is invoked for every web request the
browser makes that triggers that particular event.
...And 13 more matches
imgIContainer
although it may still work in some
browsers, its use is discouraged since it could be removed at any time.
...although it may still work in some
browsers, its use is discouraged since it could be removed at any time.
...although it may still work in some
browsers, its use is discouraged since it could be removed at any time.
...And 13 more matches
How to turn off form autocompletion - Web security
by default,
browsers remember information that the user submits through <input> fields on websites.
... this enables the
browser to offer autocompletion (that is, suggest possible completions for fields that the user has started typing in) or autofill (that is, pre-populate certain fields upon load).
... these features are usually enabled by default, but they can be a privacy concern for users, so
browsers can let users disable them.
...And 13 more matches
An Interview With Douglas Bowman of Wired News - Archive of obsolete content
that approach meant that the content of every column would have to be loaded and calculated before it would be rendered in the
browser window.
...i wanted center column content to appear first in
browsers that got the un-styled version.
...but adding a third column to the mix created too many width variables for some
browsers to dynamically calculate a total.
...And 12 more matches
iframe - Archive of obsolete content
if you want to run content in a remote process, use a xul
browser element.
... attributes showcaret, src, type, transparent properties accessibletype, contentdocument, contentwindow, docshell, webnavigation examples <iframe src="table.php" flex="2" id="
browsertable" name="table_frame"/> selecting an url from a menu <menulist oncommand="donav(this);"> <menupopup> <menuitem label="mozilla" value="http://mozilla.org" /> <menuitem label="slashdot" value="http://slashdot.org"/> <menuitem label="sourceforge" value="http://sf.net" /> <menuitem label="freshmeat" value="http://freshmeat.net"/> </menupopup> </menulist> <iframe id="myfram...
... the type of
browser, which can be used to set access of the document loaded inside the
browser.
...And 12 more matches
Other form controls - Learn web development
modern
browsers provide a drag handle that you can drag to increase/decrease the size of the text area.
...the values are soft (the default value), which means the text submitted is not wrapped but the text rendered by the
browser is wrapped; hard (the cols attribute must be specified when using this value), which means both the submitted and rendered texts are wrapped, and off, which stops wrapping.
...in both cases the interaction is the same — once the control is activated, the
browser displays a list of values the user can select between.
...And 12 more matches
Getting started with React - Learn web development
of course, your
browser can't read jsx without help.
... also bear in mind that react and reactdom produce apps that only work on a fairly modern set of
browsers — ie9+ by way of some polyfills.
... it is recommended that you use a modern
browser like firefox, safari, or chrome when working through these tutorials.
...And 12 more matches
Message manager overview
in multiprocess firefox there are (at least) two processes: the chrome process, also called the parent process, runs the
browser ui (chrome) code and code inserted by extensions one or more content processes, also called child processes.
... at the top level, there are two different sorts of message managers: frame message managers: these enable chrome process code to load a script into a
browser frame (essentially, a single
browser tab) in the content process.
... these scripts are called frame scripts, and as the name suggests, they are scoped to a specific
browser frame.
...And 12 more matches
EventTarget.addEventListener() - Web APIs
available only in code running in xbl or in the chrome of the firefox
browser.
...ideally, you should include it for the widest possible
browser compatibility.
...if true, the listener receives synthetic events dispatched by web content (the default is false for
browser chrome and true for regular web pages).
...And 12 more matches
Basic concepts - Web APIs
indexeddb is a way for you to persistently store data inside a user's
browser.
... for more information on how the
browser handles storing your data in the background, read
browser storage limits and eviction criteria.
...<iframe> content) can access the indexeddb store for the origin it is embedded into, unless the
browser is set to never accept third party cookies (see bug 1147821.) definitions this section defines and explains terms used in the indexeddb api.
...And 12 more matches
Key Values - Web APIs
learn how to use these key values in javascript using keyboardevent.key special values | modifier keys | whitespace keys | navigation keys | editing keys | ui keys | device keys | ime and composition keys | function keys | phone keys | multimedia keys | audio control keys | tv control keys | media controller keys | speech recognition keys | document keys | application selector keys |
browser control keys | numeric keypad keys special values values of key which have special meanings other than identifying a specific key or character.
... vk_space (0x20) kvk_space (0x31) gdk_key_space (0x20) gdk_key_kp_space (0xff80) qt::key_space (0x20) keycode_space (62) [1] older
browsers may return "spacebar" instead of " " for the space bar key.
... gdk_key_excel (0x1008ff5c) qt::key_excel (0x010000d4) "launchweb
browser" [4] the web
browser key.
...And 12 more matches
Index - Developer guides
6 audio and video delivery audio, guide, html, html5, media, video whether we are dealing with pre-recorded audio files or live streams, the mechanism for making them available through the
browser's <audio> and <video> elements remains pretty much the same.
... 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.
... 7 adding captions and subtitles to html5 video html5, media, webvtt, captions, subtitles, track in other articles we looked at how to build a cross
browser video player using the htmlmediaelement and window.fullscreen apis, and also at how to style the player.
...And 12 more matches
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.
... in this guide, we'll cover autoplay functionality in the various media and web audio apis, including a brief overview of how to use autoplay and how to work with
browsers to handle autoplay blocking gracefully.
... that means that both of the following are considered autoplay behavior, and are therefore subject to the
browser's autoplay blocking policy: <audio src="/music.mp4" autoplay> and audioelement.play(); the following web features and apis may be affected by autoplay blocking: the html <audio> and <video> elements the web audio api from the user's perspective, a web page or app that spontaneously starts making noise without warning can be jarring, inconvenient, or off-putting.
...And 12 more matches
Critical rendering path - Web Performance
the critical rendering path is the sequence of steps the
browser goes through to convert the html, css, and javascript into pixels on the screen.
...the
browser engine combines the two to create the render tree.
...the
browser then begins parsing the html, converting the received bytes to the dom tree.
...And 12 more matches
Finding window handles - Archive of obsolete content
note: starting in gecko 2.0, only the top level
browser window has an hwnd.
...typically the top level
browser window hwnd has no children, although if there are windowed plugins (such as flash) visible in the window, they will have hwnds whose parent is the top level
browser window hwnd.
... finding the content window handle hwnd hcontent = 0; // first we need to find the main
browser window hwnd hff = ::findwindowex(0, 0, "mozillauiwindowclass", 0); if (hff) { // next we step down through a fixed structure hwnd htemp; htemp = ::findwindowex(hff, 0, "mozillawindowclass", 0); htemp = ::findwindowex(htemp, 0, "mozillawindowclass", 0); // assume only 1 window at this level has children // and the 1 with children is the one we want hwnd hchild = ::getwindow(htemp, gw_child); while (htemp && !hchild) { htemp = ::getwindow(htemp, gw_hwndnext); hchild = ::getwindow(htemp,...
...And 11 more matches
Venkman Introduction - Archive of obsolete content
the javascript debugger, also called venkman, has been a part of the mozilla
browser and the community of web and script developers there for some time.
...first, from within the
browser you want to host the debugger application, visit the firefox add-ons page and click on the "install" link for the most recent version.
... when the download is complete, restart your
browser (some windows users may also need to restart their computer as well).
...And 11 more matches
Building a Theme - Archive of obsolete content
an example of the content within a typical xpi file for a theme: example.xpi: /install.rdf /chrome.manifest /preview.png /icon.png /chrome/
browser/ communicator/ global/ mozapps/ we'll want to create a file structure similar to the one above for our tutorial, so let's begin by creating a folder for your theme somewhere on your hard disk (e.g.
... global to chrome/global mozapps to chrome/mozapps now that you've copied the global and mozapps folders, a handful of other folders from the
browser/omni.ja archive are required.
... it is located in the
browser folder in the location mentioned above.
...And 11 more matches
Gecko FAQ - Gecko Redirect 1
gecko is the open source
browser engine designed to support open internet standards such as html 5, css 3, the w3c dom, xml, javascript, and others.
... gecko is used in multiple
browsers, including mozilla firefox, seamonkey, and others.
...it paints the
browser's content area, which is the blank area inside the
browser window's chrome.
...And 11 more matches
How can we design for all types of users? - Learn web development
for instance, if in your css you declare this: body { font-size:16px; } … you are telling the
browser that whatever happens, the font size must be 16 pixels.
... modern
browsers get around this rule by pretending that you're asking for "16 pixels when the user sets a zoom factor of 100%".
... relative units are expressed in em, % and rem: percent-based sizes: % this unit tells your
browser that an element's font size must be n% of the previous element whose font size was expressed.
...And 11 more matches
Fetching data from the server - Learn web development
the ajax model involves using a web api as a proxy to more intelligently request data rather than just having the
browser reload the entire page.
... xmlhttprequest xmlhttprequest (which is frequently abbreviated to xhr) is a fairly old technology now — it was invented by microsoft in the late '90s, and has been standardized across
browsers for quite a long time.
...to fix this, add the following two lines at the bottom of your code (just above the closing </script> tag) to load verse 1 by default, and make sure the <select> element always shows the correct value: updatedisplay('verse 1'); versechoose.value = 'verse 1'; serving your example from a server modern
browsers will not run xhr requests if you just run the example from a local file.
...And 11 more matches
Introduction to web APIs - Learn web development
they generally fall into two categories:
browser apis are built into your web
browser and are able to expose data from the
browser and surrounding computer environment and do useful complex things with it.
... for example, the web audio api provides javascript constructs for manipulating audio in the
browser — taking an audio track, altering its volume, applying effects to it, etc.
... in the background, the
browser is actually using some complex lower-level code (e.g.
...And 11 more matches
Index
instead of simply verifying that the requester of a certificate is in control of an administrative email address at the desired web site's domain, it's required that the ca performs a verification of real world identity documents (such as a company registration document with the country's authority), and it's also required that a
browser software performs a revocation check with the ca, prior to granting validity to the certificate.
... in order to distinguish an ev certificate, cas will embed a policy oid in the certificate, and the
browser is expected to verify that a trust chain permits the end entity (ee) certificate to make use of the policy.
...(tls is a newer version of ssl with enhanced features.) when establishing an ssl connection to a server, (at least) a server certificate (and its trust chain) is exchanged from the server to the client (e.g., the
browser), and the client verifies that the certificate can be verified (including matching the name of the expected destination server).
...And 11 more matches
Working with windows in chrome code
content windows when a xul window contains a widget capable of displaying a page, such as <
browser> or <iframe>, the document in that widget is, naturally, separate from the document of the chrome window itself.
... the same holds for chrome windows opened inside a tab of <tab
browser>.
... accessing content documents assume you have a document loaded in a <tab
browser>, <
browser>, or <iframe> element inside your document.
...And 11 more matches
Memory - Plugins
because plug-ins share memory space with the
browser, they can take advantage of any customized memory-allocation scheme the
browser has.
...
browser memory schemes may be more efficient than standard os memory functions, and can give the
browser flexibility in the way it manages memory.
... the methods that handle memory belong to the
browser group of methods.
...And 11 more matches
Gecko Plugin API Reference - Plugins
the names of all of these methods begin with npp_ to indicate that they are implemented by the plug-in and called by the
browser.
... npp_destroy npp_destroystream npp_getvalue np_getvalue npp_handleevent np_initialize npp_new npp_newstream npp_print npp_setvalue npp_setwindow np_shutdown npp_streamasfile npp_urlnotify npp_write npp_writeready
browser side plug-in api this chapter describes methods in the plug-in api that are available from the
browser.
... the names of all of these methods begin with npn_ to indicate that they are implemented by the
browser and called by the plug-in.
...And 11 more matches
Background Tasks API - Web APIs
concepts and usage the main thread of a web
browser is centered around its event loop.
...in addition, the event loop handles interactions with the operating system, updates to the
browser's own user interface, and so forth.
...window.requestidlecallback() makes it possible to become actively engaged in helping to ensure that the
browser's event loop runs smoothly, by allowing the
browser to tell your code how much time it can safely use without causing the system to lag.
...And 11 more matches
Accessibility documentation index - Accessibility
4 aria test cases aria, accessibility for each example we test the "expected" results with assistive technologies, for each
browser that at supports wai-aria in.
... where a failure occurs we will test the
browser for api incorrectness, using tools such as msaa inspect.
... this must be done in order to determine where to file a bug (
browser or at).
...And 11 more matches
Using HTML sections and outlines - Developer guides
important: there are no implementations of the proposed outline algorithm in web
browsers nor assistive technology; it was never part of a final w3c specification.
...semantic sectioning elements are specifically designed to communicate structural meaning to
browsers and other technologies interpreting the document on behalf of users, such as screen readers and voice assistants.
...for example, <div class="navigation"> does not suggest any meaning about its content to a
browser; only a human reading the html source can divine the meaning of a class like navigation.
...And 11 more matches
Link types - HTML: Hypertext Markup Language
<link> <a>, <area>, <form> dns-prefetch hints to the
browser that a resource is needed, allowing the
browser to do a dns lookup and protocol handshaking before a user clicks the link.
...in the
browser, it is usually referred to as the favicon.
... if there are multiple <link rel="icon">s, the
browser uses their media, type, and sizes attributes to select the most appropriate icon.
...And 11 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 (platform; 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.
... platform describes the native platform the
browser is running on (e.g.
...in recent
browsers, geckoversion is the same as firefoxversion.
...And 11 more matches
An overview of HTTP - HTTP
it is the foundation of any data exchange on the web and it is a client-server protocol, which means requests are initiated by the recipient, usually the web
browser.
...the messages sent by the client, usually a web
browser, are called requests and the messages sent by the server as an answer are called responses.
...most of the time the user-agent is a web
browser, but it can be anything, for example a robot that crawls the web to populate and maintain a search engine index.
...And 11 more matches
Strict mode - JavaScript
browsers not supporting strict mode will run strict mode code with different behavior from
browsers that do, so don't rely on strict mode without feature-testing for support for the relevant aspects of strict mode.
...the octal syntax isn't part of ecmascript 5, but it's supported in all
browsers by prefixing the octal number with a zero: 0644 === 420 and "\045" === "%".
...javascript in
browsers can access the user's private information, so such javascript must be partially transformed before it is run, to censor access to forbidden functionality.
...And 11 more matches
Animation performance and frame rate - Web Performance
the performance 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.
... while performance is sensitive to the particular system and its load, performance tools can help you understand the work the
browser's doing to render your site, and help you prevent and diagnose problems when they occur.
...let's take a look at how we can use
browser tools to inspect the frame rate.
...And 11 more matches
Menu - Archive of obsolete content
jetpack's menu api allows features to access and modify the
browser's built-in menus.
...two namespaces are associated with this api: jetpack.menu, which provides access to the
browser's menus, and jetpack.menu, the constructor for making new menus.
... many users, especially those new to firefox, don't realize the distinction between add-ons and the
browser itself.
...And 10 more matches
Using Remote XUL - Archive of obsolete content
it contains elements for all common ui widgets (menus, buttons, toolbars, etc.) and many sophisticated ones (trees,
browsers, color pickers).
... xul is often used by desktop applications like mozilla but can also be loaded from a web server and rendered inside the content pane of a compatible
browser.
... note: the downside to using xul is that it only works with
browsers that understand it.
...And 10 more matches
Archived Mozilla and build documentation - Archive of obsolete content
see the references section for information on creating extension in earlier
browsers.
... creating a mozilla extension a mozilla extension is an installable enhancement to the mozilla
browser that provides additional functionality (for example linky, which adds an item to the context menu for opening multiple links in a document or selection).
... migrate apps from internet explorer to mozilla when netscape started the mozilla
browser, it made the conscious decision to support w3c standards.
...And 10 more matches
Audio for Web games - Game development
web-based audio is maturing fast, but there are still many
browser differences to navigate.
...there are a couple of differences between desktop and mobile
browsers that may have caused
browser vendors to make choices that can make web audio difficult for game developers to work with.
... autoplay
browser autoplay policy now affects desktop and mobile
browsers.
...And 10 more matches
What is CSS? - Learn web development
these documents will be readable in a web
browser.
...what you are seeing is the
browser's default styles — very basic styles that the
browser applies to html to make sure it will be basically readable even if no explicit styling is specified by the author of the page.
...using css you can control exactly how html elements look in the
browser, presenting your markup using whatever design you like.
...And 10 more matches
Fundamental text and font styling - Learn web development
color can accept any css color unit, for example: p { color: red; } this will cause the paragraphs to become red, rather than the standard
browser default black, like so: <h1>tommy the cat</h1> <p>well i remember it as though it were a meal ago...</p> <p>said tommy the cat as he reeled back to clear whatever foreign matter may have nestled its way into his mighty throat.
...but it was a rare occasion such as this that he did.</p> font families to set a different font on your text, you use the font-family property — this allows you to specify a font (or list of fonts) for the
browser to apply to the selected elements.
... the
browser will only apply a font if it is available on the machine the website is being accessed on; if not, it will just use a
browser default font.
...And 10 more matches
JavaScript basics - Learn web development
these include:
browser application programming interfaces (apis) built into web
browsers, providing functionality such as dynamically creating html and setting css styles; collecting and manipulating a video stream from a user's webcam, or generating 3d graphics and audio samples.
... the section below introduces some aspects of the core language, and offers an opportunity to play with a few
browser api features too.
...then load index.html in your
browser.
...And 10 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).
...the way that
browsers parse html is a lot more permissive than how programming languages are run, which is both a good and a bad thing.
... html itself doesn't suffer from syntax errors because
browsers parse it permissively, meaning that the page still displays even if there are syntax errors.
...And 10 more matches
From object to iframe — other embedding technologies - Learn web development
say you wanted to include the mdn glossary on one of your web pages — you could try something like this: <iframe src="https://udn.realityripple.com/docs/glossary" width="100%" height="500" frameborder="0" allowfullscreen sandbox> <p> <a href="https://udn.realityripple.com/docs/glossary"> fallback link for
browsers that don't support iframes </a> </p> </iframe> this example includes the basic essentials needed to use an <iframe>: allowfullscreen if set, the <iframe> is able to be placed in fullscreen mode using the full screen api (somewhat beyond scope for this article.) frameborder if set to 1, this tells the
browser to draw a border between this frame and other frames, which is the default ...
... fallback content in the same way as other similar elements like <video>, you can include fallback content between the opening and closing <iframe></iframe> tags that will appear if the
browser doesn't support the <iframe>.
...it is unlikely that you'll come across any
browser that doesn't support <iframe>s these days.
...And 10 more matches
Manipulating documents - Learn web development
objective: to gain familiarity with the core dom apis, and the other apis commonly associated with dom and document manipulation the important parts of a web
browser web
browsers are very complicated pieces of software with a lot of moving parts, many of which can't be controlled or manipulated by a web developer using javascript.
... you might think that such limitations are a bad thing, but
browsers are locked down for good reasons, mostly centering around security.
...there are a few really obvious bits you'll reference regularly in your code — consider the following diagram, which represents the main parts of a
browser directly involved in viewing web pages: the window is the
browser tab that a web page is loaded into; this is represented in javascript by the window object.
...And 10 more matches
Useful string methods - Learn web development
let's enter some examples into the
browser developer console.
...try entering the following lines: let
browsertype = 'mozilla';
browsertype.length; this should return the number 7, because "mozilla" is 7 characters long.
...inside the square brackets you include the number of the character you want to return, so for example to retrieve the first letter you'd do this:
browsertype[0]; remember: computers count from 0, not 1!
...And 10 more matches
Introduction to client-side frameworks - Learn web development
when we remember that the application has to let the user to do all of these things through the
browser, however, some cracks start to show.
... the verbosity of dom changes building html elements and rendering them in the
browser at the appropriate time takes a surprising amount of code.
...when you follow a link on this very website, your
browser communicates with a server and fetches new content to display for you.
...And 10 more matches
Message manager overview
in the initial version of multiprocess firefox there are two processes: the chrome process, also called the parent process, runs the
browser ui (chrome) code and code inserted by extensions the content processes, also called the child processes, run all web content.
...at the top level, there are two different sorts of message managers: frame message managers: these enable chrome process code to load a script into a
browser frame (essentially, a single
browser tab) in the content process.
... these scripts are called frame scripts, and as the name suggests, they are scoped to a specific
browser frame.
...And 10 more matches
URLs - Plugins
plug-ins can request and receive the data associated with urls of any type that the
browser can handle, including http, ftp, news, mailto, and gopher.
... url scheme description about locates
browser information or "fun" pages.
...
browser-specific.
...And 10 more matches
Waterfall - Firefox Developer Tools
the waterfall gives you insight into the sorts of things the
browser is doing as it runs your site or app.
... it's based on the idea that the things a
browser does when running a site can be divided into various types - running javascript, updating layout, and so on - and that at any given point in time, the
browser is doing one of those things.
... so if you see a sign of a performance 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.
...And 10 more matches
Capabilities, constraints, and settings - Web APIs
figuring this out has often been difficult, and has usually involved looking at some combination of which user agent (or
browser) you're running on, which version it is, looking to see if certain objects exist, trying to see whether various things work or not and determining what errors occur, and so forth.
... the twin concepts of constraints and capabilities let the
browser and web site or app exchange information about what constrainable properties the
browser's implementation supports and what values it supports for each one.
... overview the process works like this (using mediastreamtrack as an example): if needed, call mediadevices.getsupportedconstraints() to get the list of supported constraints, which tells you what constrainable properties the
browser knows about.
...And 10 more matches
Request.cache - Web APIs
it controls how the request will interact with the
browser's http cache.
...the available values are: default — the
browser looks for a matching request in its http cache.
... if there is a match but it is stale, the
browser will make a conditional request to the remote server.
...And 10 more matches
Web applications and ARIA FAQ - Accessibility
a wide variety of commonly-used
browsers, assistive technologies, javascript toolkits, and applications now support aria.
...you may want to consider implementing aria using progressive enhancement techniques—such as adding aria using javascript, not directly to your markup—in order to more gracefully support older
browsers and assistive technologies.
...
browsers aria is supported in the following
browsers:
browser minimum version notes firefox 3.0+ works with nvda, jaws 10+, and orca chrome latest screen reader support still experimental as of chrome 15 safari 4+ safari 5 support is much improved.
...And 10 more matches
background-size - CSS: Cascading Style Sheets
note: background sizing for vector images that lack intrinsic dimensions or proportions is not yet fully implemented in all
browsers.
... be careful about relying on the behavior described above, and test in multiple
browsers to be sure the results are acceptable.
...rendering of <gradient>s in such cases changed in firefox 8, and at present is generally inconsistent across
browsers, which do not all implement rendering in full accordance with the css3 background-size specification and with the css3 image values gradient specification.
...And 10 more matches
HTML attribute: rel - HTML: Hypertext Markup Language
link not allowed not allowed dns-prefetch tells the
browser to preemptively perform 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.
... link link link manifest web app manifest link not allowed not allowed modulepreload tells to
browser to preemptively fetch the script and store it in the document's module map for later evaluation.
... values if there are multiple <link rel="icon">s, the
browser uses their media attribute, type, and sizes attributes to select the most appropriate icon.
...And 10 more matches
<input type="url"> - HTML: Hypertext Markup Language
on
browsers that don't support inputs of type url, a url input falls back to being a standard text input.
... tip: use the title attribute to specify text that most
browsers will display as a tooltip to explain what the requirements are to match the pattern.
... non-standard attributes the following non-standard attributes are also available on some
browsers.
...And 10 more matches
<link>: The External Resource Link element - HTML: Hypertext Markup Language
these provide useful hints to allow the
browser to choose the most appropriate icon available.
...take this example: <link rel="preload" href="myfont.woff2" as="font" type="font/woff2" crossorigin="anonymous"> a rel value of preload indicates that the
browser should preload this resource (see preloading content with rel="preload" for more details), with the as attribute indicating the specific class of content being fetched.
...the
browser may use its own heuristics to decide the priority of the resource.
...And 10 more matches
HTML elements reference - HTML: Hypertext Markup Language
this includes information about styles, scripts and data to help software (search engines,
browsers, etc.) use and render the page.
... <title> the html title element (<title>) defines the document's title that is shown in a
browser's title bar or a page's tab.
... <bdi> the html bidirectional isolate element (<bdi>) tells the
browser's bidirectional algorithm to treat the text it contains in isolation from its surrounding text.
...And 10 more matches
Using HTTP cookies - HTTP
an http cookie (web cookie,
browser cookie) is a small piece of data that a server sends to the user's web
browser.
... the
browser may store it and send it back with later requests to the same server.
... typically, it's used to tell if two requests came from the same
browser — keeping a user logged-in, for example.
...And 10 more matches
Link prefetching FAQ - HTTP
link prefetching is a
browser mechanism, which utilizes
browser idle time to download or prefetch documents that the user might visit in the near future.
... a web page provides a set of prefetching hints to the
browser, and after the
browser is finished loading the page, it begins silently prefetching specified documents and stores them in its cache.
... when the user visits one of the prefetched documents, it can be served up quickly out of the
browser's cache.
...And 10 more matches
Inheritance and the prototype chain - JavaScript
this is equivalent to the javascript property __proto__ which is non-standard but de-facto implemented by many
browsers.
...(the console is included in most web
browser's developer tools.
...when you access a property of dosomeinstancing, the
browser first looks to see if dosomeinstancing has that property.
...And 10 more matches
Introduction to progressive web apps - Progressive web apps (PWAs)
you can install a native app so that it works offline, and users love tapping their icons to easily access their favorite apps, rather than navigating to it using a
browser.
... progressive, so it's still usable on a basic level on older
browsers, but fully-functional on the latest ones.
... responsive, so it's usable on any device with a screen and a
browser—mobile phones, tablets, laptops, tvs, refrigerators, etc.
...And 10 more matches
Intercepting Page Loads - Archive of obsolete content
some of the techniques presented here apply only to content loaded in the main
browser area, while others detect content being loaded in other xul windows, or even detect xul content being loaded.
... the easy way: load events this comes from the tab
browser code snippets page.
... this._loadhandler = function() {that._onpageload(); }; g
browser.addeventlistener("load", this._loadhandler, true); g
browser is a global object that corresponds to the tab
browser element in the main
browser window.
...And 9 more matches
CSS3 - Archive of obsolete content
at risk: due to insufficient
browser support, standardization of the padding-box value may be postponed to the next iteration of this module.
... at risk: due to insufficient
browser support, standardization of the pseudo-elements ::value, ::choices, ::repeat-item, and ::repeat-index may be postponed to the next iteration of this module .
... at risk: due to insufficient
browser support, standardization of the icon property and the icon value may be postponed to css4.
...And 9 more matches
Prism - Archive of obsolete content
prism is a simple xulrunner-based
browser that hosts web applications without the normal web
browser user interface.
... prism is based on a concept called site-specific
browsers (ssb).
...it doesn’t have the menus, toolbars and other accoutrements of a traditional web
browser.
...And 9 more matches
Common Firefox theme issues and solutions - Archive of obsolete content
the resolution to this issue is to add the following code to your
browser.css file somewhere below where the main-window is made transparent to support aero glass.
...in order to work around this issue, you need to either rename any of the following files that are in your chrome://
browser/skin/ folder and fix any references to those files, or copy them to the folder chrome://
browser/skin/lion/: keyhole-circle.png toolbar.png toolbarbutton-dropmarker.png tab
browser/alltabs-box-bkgnd-icon.png tabview/tabview.png places/toolbar.png linux linux select box fields are showing both drop arrow and spinner arrows on linux: the styling of drop down select box fields may show bot...
...the fix is to make sure any style rule that references #appmenu-button also has a comparable reference to #appmenu-toolbar-button in chrome://
browser/skin/
browser.css.
...And 9 more matches
Implementing controls using the Gamepad API - Game development
this article looks at implementing an effective, cross-
browser control system for web games using the gamepad api, allowing you to control your web games using console game controllers.
...eventually, extra drivers and plugins allowed us to use console gamepads with desktop games — either native games or those running in the
browser.
... now in the era of html5, we finally have the gamepad api, which gives us the ability to play
browser-based games using gamepad controllers without any plugins.
...And 9 more matches
Legacy layout methods - Learn web development
prerequisites: html basics (study introduction to html), and an idea of how css works (study introduction to css and styling boxes.) objective: to understand the fundamental concepts behind the grid layout systems used prior to css grid layout being available in
browsers.
...this knowledge will be helpful to you if you need to create fallback code for
browsers that do not support newer methods, in addition to allowing you to work on existing projects which use these types of systems.
...try adjusting the width of your
browser window to see for yourself.
...And 9 more matches
CSS FAQ - Learn web development
browsers use the doctype declaration to choose whether to show the document using a mode that is more compatible with web standards or with old
browser bugs.
... using a correct and modern doctype declaration at the start of your html will improve
browser standards compliance.
... modern
browsers have two main rendering modes: quirks mode: also called backwards-compatibility mode, allows legacy webpages to be rendered as their authors intended, following the non-standard rendering rules used by older
browsers.
...And 9 more matches
What is the difference between webpage, website, web server, and search engine? - Learn web development
we'll cover these terms and technologies in more detail as we explore further, but these quick definitions will be a great start for you: web page a document which can be displayed in a web
browser such as firefox, google chrome, opera, microsoft internet explorer or edge, or apple's safari.
...search engines are normally accessed through a web
browser (e.g.
... web page a web page is a simple document displayable by a
browser.
...And 9 more matches
Sending form data - Learn web development
a client (usually a web
browser) sends a request to a server (most of the time a web server like apache, nginx, iis, tomcat, etc.), using the http protocol.
...on the other hand, if the form is hosted on a secure page but you specify an insecure http url with the action attribute, all
browsers display a security warning to the user each time they try to send data because the data will not be encrypted.
...each time you want to reach a resource on the web, the
browser sends a request to a url.
...And 9 more matches
Styling web forms - Learn web development
this has historically been difficult — form controls vary greatly in how easy they are to customize with css — but it is getting easier as old
browsers are retired and modern
browsers give us more features to use.
... form controls were added to html in the html 2 specification in 1995; css wasn't released until late 1996, and wasn't supported very well by
browsers for a few years after that.
...
browsers relied on the underlying operating system to manage and render form controls.
...And 9 more matches
Tips for authoring fast-loading HTML pages - Learn web development
depending on a
browser's cache settings, it may send a request with the if-modified-since header for each referenced file, asking whether the file has been modified since the last time it was downloaded.
... too much time spent querying the last modified time of the referenced files can delay the initial display of the web page, since the
browser must check the modification time for each of these files, before rendering the page.
...use modern ajax methods to manipulate page content for modern
browsers, rather than the older approaches based on document.write().
...And 9 more matches
Functions — reusable blocks of code - Learn web development
built-in
browser functions we've made use of functions built in to the
browser a lot in this course.
... note: feel free to enter these lines into your
browser's javascript console to re-familiarize yourself with their functionality, if needed.
...in fact, some of the code you are calling when you invoke (a fancy word for run, or execute) a built in
browser function couldn't be written in javascript — many of these functions are calling parts of the background
browser code, which is written largely in low-level system languages like c++, not web languages like javascript.
...And 9 more matches
Website security - Learn web development
as you read, note how threats are most successful when the web application either trusts, or is not paranoid enough about the data coming from the
browser.
... cross-site scripting (xss) xss is a term used to describe a class of attacks that allow an attacker to inject client-side scripts through the website into the
browsers of other users.
... because the injected code comes to the
browser from the site, the code is trusted and can do things like send the user's site authorization cookie to the attacker.
...And 9 more matches
Introducing a complete toolchain - Learn web development
jsx or typescript) in our development process, and then transforms our code so that the production version still runs on a wide variety of
browsers, modern and older.
... to configure prettier, give .prettierrc.json the following contents: { "singlequote": true, "trailingcomma": "es5" } with these settings, when prettier formats javascript for you it will use single quotes for all your quoted values, and it won't use trailing commas (a newer feature of ecmascript that will cause errors in older
browsers).
... next up, we’ll configure eslint — create another file in the root of your will-it-miss directory called .eslintrc.json, and give it the following contents: { "env": { "es6": true, "
browser": true }, "extends": "eslint:recommended", "parseroptions": { "ecmaversion": 6, "sourcetype": "module" }, "rules": { "no-console": 0 } } the above eslint configuration says that we want to use the "recommended" eslint settings, that we're going to allow usage of es6 features (such as map() or set()), that we can use module import statements, and that using console.log() is allowed.
...And 9 more matches
Embedding API for Accessibility
intpref("font.size.fixed.x-western", newfontsize); setintpref("font.size.variable.x-western", newfontsize); /* for other i18n charsets, change the name as explained above for font face*/ setcharpref("font.default","serif"); /* or "sans-serif" */ setintpref("
browser.use_document_fonts", whichfonts); /* whichfonts: 0=no, 1=yes */ moz 0.8 fonts from operating system?
... setboolpref("
browser.use_system_fonts", usesystemfonts); no colors for page setcharpref("
browser.display.foreground_color", "#abcdef" /* hex color value */); setcharpref("
browser.display.background_color", "#abcdef" /* hex color value */); setboolpref("
browser.display.use_system_colors", boolsystemcolors); setboolpref("
browser.display.use_document_colors", booluseauthorcolors); /* setting use_document_colors also stops background images from loading */ moz 0.8 link appearance setcharpref("
browser.anchor_color", "#abcdef" /* hex color ...
...value */); setcharpref("
browser.visited_color", "#abcdef" /* hex color value */); setboolpref("
browser.underline_anchors", boolunderlinelinks); moz 0.8 focus appearance setboolpref("
browser.display.use_focus_colors", usefocuscolors); setcharpref("
browser.display.focus_background_color", colorstring); setcharpref("
browser.display.focus_text_color", colorstring); setcharpref("
browser.display.focus_ring_width", numpixels); /* 0-4 */ moz 0.9.2 text selection appearance setcharpref("
browser.selection.background_color", colorstring); ...
...And 9 more matches
Cross Process Object Wrappers
note that from firefox 47 onwards, unsafe cpow usage is no longer permitted in
browser code.
... if
browser code tries an unsafe cpow operation, the
browser will throw an exception and you'll see an "unsafe cpow usage forbidden” error in the
browser console.
...one of these shims provides the following behavior: whenever chrome code tries to access content directly (for example, through window.content or
browser.contentdocument), it is given back a cpow that wraps the content object.
...And 9 more matches
Application Translation with Mercurial
firefox and fx-* denote branches of firefox for desktop, the
browser for desktops and notebooks running, windows, mac os or linux.
... fennec and fennec-* denote branches of firefox for mobile, the firefox
browser for the android operating system.
... seamonkey and sea-* denote branches of seamonkey, the suite consisting of
browser, mail and chat client and more.
...And 9 more matches
Observer Notifications
sessionstore-windows-restored sent by the session restore process to indicate that all initial
browser windows have opened.
...
browser these topics indicate interesting things that happen that the
browser alerts you to.
... topic description
browser:purge-session-history sent when the sanitizer runs to purge all history and other information.
...And 9 more matches
Introduction to the File and Directory Entries API - Web APIs
the app can restart uploads after an interruption, such as the
browser being closed or crashing, connectivity getting interrupted, or the computer getting shut down.
... big concepts before you start using the file and directory entries api, you need to understand a few concepts: the file and directory entries api is a virtual representation of a file system the file and directory entries api can use different storage types
browsers impose storage quota the file and directory entries api has asynchronous and synchronous versions when using the asynchronous api, always use the error callbacks the file and directory entries api interacts with other apis the file and directory entries api is case-sensitive the file and directory entries api is a virtual representation of a file system the api doesn't give you access to ...
...it does not necessarily have a relationship to the local file system outside the
browser.
...And 9 more matches
In depth: Microtasks and the JavaScript runtime environment - Web APIs
starting with the addition of timeouts and intervals as part of the web api (settimeout() and setinterval()), the javascript environment provided by web
browsers has gradually advanced to include powerful features that enable scheduling of tasks, multi-threaded application development, and so forth.
...other than the main thread—which some
browsers share across multiple agents—each component of an agent is unique to that agent.
... your web site or app's code runs in the same thread, sharing the same event loop, as the user interface of the web
browser itself.
...And 9 more matches
NavigatorID.userAgent - Web APIs
the navigatorid.useragent read-only property returns the user agent string for the current
browser.
... the specification asks
browsers to provide as little information via this field as possible.
... never assume that the value of this property will stay the same in future versions of the same
browser.
...And 9 more matches
Live streaming web audio and video - Developer guides
the key consideration when streaming media to a
browser is the fact that rather than playing a finite file we are relaying a file that is being created on the fly and has no pre-determined start or end.
...this file sits on a server and can be delivered — like most other files — to the
browser.
... live streamed media lacks a finite start and end time as rather than a static file, it is a stream of data that the server passes on down the line to the
browser and is often adaptive (see below).
...And 9 more matches
<input type="range"> - HTML: Hypertext Markup Language
if the user's
browser doesn't support type range, it will fall back and treat it as a text input.
... see the range control with hash marks below for an example of how the options on a range are denoted in supported
browsers max the greatest value in the range of permitted values.
... adding hash marks and labels the html specification gives
browsers some flexibility on how to present the range control.
...And 9 more matches
Strict-Transport-Security - HTTP
the http strict-transport-security response header (often abbreviated as hsts) lets a web site tell
browsers that it should only be accessed using https, instead of using http.
... header type response header forbidden header name no syntax strict-transport-security: max-age=<expire-time> strict-transport-security: max-age=<expire-time>; includesubdomains strict-transport-security: max-age=<expire-time>; preload directives max-age=<expire-time> the time, in seconds, that the
browser should remember that a site is only to be accessed using https.
... the http strict transport security header informs 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.
...And 9 more matches
How to make PWAs installable - Progressive web apps (PWAs)
these technologies allow the app to be launched directly from the device's home screen, rather than the user having to open the
browser and then navigate to the site by using a bookmark or typing the url.
...this makes the web app easier to access; additionally, you can specify that the app be launched in fullscreen or standalone mode, thus removing the default
browser user interface that would otherwise be present, creating an even more seamless and native-like feel.
... requirements to make the web site installable, it needs the following things in place: a web manifest, with the correct fields filled in the web site to be served from a secure (https) domain an icon to represent the app on the device a service worker registered, to allow the app to work offline (this is required only by chrome for android currently) currently, only the chromium-based
browsers such as chrome, edge, and samsung internet require the service worker.
...And 9 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 information, or lets the malicious script rewrite the html content.
... the malicious content often includes javascript, but sometimes html, flash, or any other code the
browser can execute.
...the victim then retrieves this malicious script from the server when the
browser sends a request for data.
...And 9 more matches
window/utils - Archive of obsolete content
functions for working with
browser windows.
... usage private windows with this module your add-on will see private
browser windows even if it has not explicitly opted into private browsing, so you need to take care not to store any user data derived from private
browser windows.
... globals functions getmostrecent
browserwindow() get the topmost
browser window, as an nsidomwindow instance.
...And 8 more matches
Index of archived content - Archive of obsolete content
ta running applications svg animation svg general scrollbar sidebar stringview tabbox toolbar tree uri parsing view source for xul applications windows xml-related code snippets xml:base support in old
browsers xpath getattributens common pitfalls communication between html and your extension creating custom firefox extensions with the mozilla build system custom about: urls default preferences deploying a plugin as an extension developing add-ons dis...
...wnloading json and javascript in extensions enhanced extension installation extension etiquette extension library extension packaging extension samples extension theming guidelines extension versioning, update and compatibility extensions support in seamonkey 2 firefox addons developer guide hiding
browser chrome hotfix extension how to convert an overlay extension to restartless inline options install manifests installing extensions and themes from web pages interaction between privileged and non-privileged pages jetpack processes legacy add-ons legacy extensions for firefox for android ...
... api accounts.jsm
browserapp addtab closetab deck get
browserfordocument get
browserforwindow gettabfor
browser gettabforid gettabforwindow loaduri quit selecttab tabs helperapps.jsm home.jsm banner panels homeprovider.jsm homestorage nativ...
...And 8 more matches
Images, Tables, and Mysterious Gaps - Archive of obsolete content
however, these techniques may be relevant when the developer cannot assume that users have a modern
browser, such as for html-based e-mail messages.
...back in the early days, this approach worked, because
browsers would usually make a table cell exactly as wide and tall as an image it contained.
... fast forward to 2001, and the rise of standards-based
browsers that lay out pages using html and css instead of their own private layout algorithms.
...And 8 more matches
Learn XPI Installer Scripting by Example - Archive of obsolete content
this article uses the installer script from
browser.xpi install package as the basis for discussing xpi installations in general.
... about
browser.xpi
browser.xpi is the xpi archive in which the main components of the mozilla
browser are archived for installation.
... first, a quick scan of the contents of the xpi file (which you can open using with any unzip utility) reveals the following high-level directory structure: install.js bin\ chrome\ components defaults\ icons\ plugins\ res\ note that this high-level structure parallels the directory structure of the installed
browser very closely: as you will see in the installation script, the contents of the archive are installed onto the file system in much the same way that they are stored in the archive itself, though it's possible to rearrange things arbitrarily upon installation--to create new directories, to install files in system folders and other areas.
...And 8 more matches
Efficient animation for web games - Game development
help the
browser help you if you are using dom for your ui, which i would certainly recommend, you really ought to use css transitions and/or css animations, rather than javascript-powered animations.
... though javascript animations can be easier to express at times, unless you have a great need to synchronise ui animation state with game animation state, you’re unlikely to be able to do a better job than the
browser.
...because of this, the
browser can make some assumptions that it can’t easily make when you’re manually tweaking values in javascript.
...And 8 more matches
CSS values and units - Learn web development
you can use any available <color> values assuming they are supported by your
browser.
... the page on mdn for each value will give you information about
browser support.
... for example, if you look at the page for <color> you will see that the
browser compatibility section lists different types of color value and support for them.
...And 8 more matches
Flexbox - Learn web development
for a long time, the only reliable cross
browser-compatible tools available for creating css layouts were things like floats and positioning.
...to get started, you should make a local copy of the first starter file — flexbox0.html from our github repo — load it in a modern
browser (like firefox or chrome), and have a look at the code in your code editor.
... flexbox provides a property called flex-direction that specifies what direction the main axis runs in (what direction the flexbox children are laid out in) — by default this is set to row, which causes them to be laid out in a row in the direction your
browser's default language works in (left to right, in the case of an english
browser).
...And 8 more matches
Web fonts - Learn web development
this takes one or more font family names, and the
browser travels down the list until it finds a font it has available on the system it is running on: p { font-family: helvetica, "trebuchet ms", verdana, sans-serif; } this system works well, but traditionally web developers' font choices were limited.
...web fonts are a css feature that allows you to specify font files to be downloaded along with your website as it is accessed, meaning that any
browser that supports web fonts can have exactly the fonts you specify available to it.
... 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.
...And 8 more matches
The HTML5 input types - Learn web development
note: most of the features discussed in this article have wide support across
browsers.
...if you want more detail on
browser support, you should consult our html forms element reference, and in particular our extensive <input> types reference.
...any other content causes the
browser to display an error when the form is submitted.
...And 8 more matches
How to build custom form controls - Learn web development
.select { /* the computations are made assuming 1em == 16px which is the default value in most
browsers.
...) is the new font size context for em value in this context */ font-family : verdana, arial, sans-serif; box-sizing : border-box; /* we need extra room for the down arrow we will add */ padding : .1em 2.5em .2em .5em; width : 10em; /* 100px */ border : .2em solid #000; border-radius : .4em; box-shadow : 0 .1em .2em rgba(0,0,0,.45); /* the first declaration is for
browsers that do not support linear gradients.
...it is neither future-proof nor will not work on legacy
browsers.
...And 8 more matches
Adding vector graphics to the Web - Learn web development
well, svg does have some disadvantages: svg can get complicated very quickly, meaning that file sizes can grow; complex svgs can also take significant processing time in the
browser.
... svg is not supported in older
browsers, so may not be suitable if you need to support older versions of internet explorer with your web site (svg started being supported as of ie9.) raster graphics are arguably better for complex precision images such as photos, for the reasons described above.
... the svg file can be cached by the
browser, resulting in faster loading times for any page that uses the image loaded in the future.
...And 8 more matches
Choosing the right approach - Learn web development
browser compatibility really good general support, although the exact support for callbacks in apis depends on the particular api.
... single delayed operation repeating operation multiple sequential operations multiple simultaneous operations yes yes (recursive timeouts) yes (nested timeouts) no code example here the
browser will wait two seconds before executing the anonymous function, then will display the alert message (see it running live, and see the source code): let mygreeting = settimeout(function() { alert('hello, mr.
...
browser compatibility desktopmobilechromeedgefirefoxinternet exploreroperasafariandroid webviewchrome for androidfirefox for androidopera for androidsafari on iossamsung internetsettimeoutchrome full support 30edge full support 12firefox full support 1 fu...
...And 8 more matches
Cooperative asynchronous JavaScript: Timeouts and intervals - Learn web development
executes a specified block of code before the
browser next repaints the display, allowing an animation to be run at a suitable framerate regardless of the environment it is being run in.
... in the following example, the
browser will wait two seconds before executing the anonymous function, then will display the alert message (see it running live, and see the source code): let mygreeting = settimeout(function() { alert('hello, mr.
...you'll probably want a way to stop such tasks, otherwise you may end up getting errors when the
browser can't complete any further versions of the task, or if the animation being handled by the task has finished.
...And 8 more matches
CSS performance optimization - Learn web development
for this reason, css is render blocking, unless the
browser knows the css is not currently needed.
... the
browser can paint the page once it has downloaded the css and built the css object model.
...
browsers follow a specific rendering path: paint only occurs after layout, which occurs after the render tree is created, which in turn requires both the dom and the cssom trees.
...And 8 more matches
Framework main features - Learn web development
previous overview: client-side javascript frameworks next each major javascript framework has a different approach to updating the dom, handling
browser events, and providing an enjoyable developer experience.
... dsls can't be read by the
browser directly; they must be transformed into javascript or html first.
... when used with react, the jsx from the previous snippet would be compiled into this: var subject = "world"; var header = react.createelement("header", null, react.createelement("h1", null, "hello, ", subject, "!") ); when ultimately rendered by the
browser, the above snippet will produce html that looks like this: <header> <h1>hello, world!</h1> </header> handlebars the handlebars templating language is not specific to ember applications, but it is heavily utilized in ember apps.
...And 8 more matches
CSUN Firefox Materials
firefox 1.5, beyond the status quo "...firefox is a great little
browser.
... it's a quick download, occupies very little disk space, and has a clean, no-nonsense interface." - pc magazine firefox 1.5 is a fast, free, standards compliant web
browser which is rapidly gaining recognition for its fresh, streamlined approach to browsing the web.
...keyboard support "mozilla firefox is a web-
browser with superior keyboard support.
...And 8 more matches
Creating reftest-based unit tests
the power of the tool comes from the fact that there is more than one way to achieve any given visual effect in a
browser.
...and a
browser may change the visual effect produced by a tag while still being compliant with relevant standards.
...if a
browser changes the depth of the indenting and the visual construct is tested against an invariant, the test would appear to fail.
...And 8 more matches
Listening to events on all tabs
adding a listener to listen to progress events on all tabs, call the
browser's addtabsprogresslistener() method: g
browser.addtabsprogresslistener(myprogresslistener); myprogresslistener is an object that implements the callbacks used to provide notifications of progress events.
... removing a listener to remove a previously installed progress listener, call removetabsprogresslistener(): g
browser.removetabsprogresslistener(myprogresslistener); implementing a listener the listener object itself has five methods it can implement to handle various events: onlocationchange called when the uri of the document displayed in the tab changes.
... void onlocationchange( nsidomxulelement a
browser, nsiwebprogress awebprogress, nsirequest arequest, nsiuri alocation [optional] in unsigned long aflags ); parameters a
browser the
browser representing the tab whose location changed.
...And 8 more matches
Displaying Places information using views
every xul document containing a built-in view must import the stylesheet
browser/components/places/content/places.css and overlay the file
browser/components/places/content/placesoverlay.xul: <?xml-stylesheet href="chrome://
browser/content/places/places.css" ?> <?xul-overlay href="chrome://
browser/content/places/placesoverlay.xul" ?> it's this stylesheet that binds elements with the special type attribute to one of the views.
... <tree type="places" place="place:terms=mozilla&onlybookmarked=1&querytype=1"> <treecols> <treecol id="title" label="my bookmarks" flex="1" primary="true" /> </treecols> <treechildren /> </tree> the next example does the same as the last but uses javascript to set the tree's place attribute: var histserv = cc["@mozilla.org/
browser/nav-history-service;1"].
...the treechildren element should be empty: <tree type="places"> <treecols> <treecol id="title" flex="1" primary="true" /> <treecol id="url" flex="1" /> </treecols> <treechildren /> </tree> the tree view is implemented in
browser/components/places/content/tree.xml.
...And 8 more matches
Bootstrapping a new locale
from now on may be needs some corrections, (see expected structure below $cd ab-cd/
browser/chrome/
browser) may be needs $cp -r mozilla-1.9.x/
browser/locales/ ab-cd and then $mv ab-cd/en-us ab-cd/
browser and the same for the others the commands seems symbolic and not real ...
... mkdir -p ab-cd/
browser/installer ab-cd/
browser/profile/chrome ab-cd/
browser/searchplugins ab-cd/
browser/updater ab-cd/toolkit cp -r mozilla-1.9.x/
browser/locales/ ab-cd/
browser cp -r mozilla-1.9.x/dom/locales/ ab-cd/dom cp -r mozilla-1.9.x/editor/locales/ ab-cd/editor cp -r mozilla-1.9.x/extensions/reporter/locales/chrome ab-cd/extensions cp -r mozilla-1.9.x/netwerk/locales/ ab-cd/netwerk cp -r mozilla-1.9.x/other-licenses/branding/firefox/locales/ ab-cd/other-licenses cp -r mozilla-1.9.x/security/manager/locales/ ab-cd/security cp -r mozilla-1.9.x/toolkit/locales/ ab-cd/toolkit getting started change your directory to the new working directory so you are in the ~/[your working directory]/[ab-cd]/ path and ca...
...we'll first navigate to the directory called "
browser" by running the following commands one after the other from your command line: $ cd [ab-cd]/
browser/chrome/
browser to see what is contained in "
browser" type $ ls and, you should see the following output from your terminal: aboutcerterror.dtd pageinfo.dtd aboutdialog.dtd pageinfo.properties aboutprivatebrowsing.dtd pagereportfirsttime.dtd aboutrobots.dtd places aboutsessionrestore.dtd preferences aboutsupport.dtd quitdialog.properties basemenuoverlay.dtd safemode.dtd
browser.dtd safebrowsing
browser.properties sanitize.dtd credits.dtd search.properties enginemanager.dtd searc...
...And 8 more matches
Localizing without a specialized tool
$ compare-locales mozilla-1.9.2/
browser/locales/l10n.ini l10n-mozilla-1.9.2 x-testing for convenience, try saving the output of this command to a text file on your desktop so you can review it as you go.
... run: $ compare-locales mozilla-1.9.2/
browser/locales/l10n.ini l10n-mozilla-1.9.2 x-testing > ~/desktop/x-testing.compare open the x-testing.compare file that is on your desktop.
... you should see something like this: x-testing
browser chrome
browser aboutcerterror.dtd // add and localize this file aboutdialog.dtd +aboutlink +aboutlink.accesskey +aboutversion +closecmdgnome.accesskey +closecmdgnome.label +copyright +copyright.accesskey +copyrightgnome.accesskey +copyrightinfo1 +copyrightinfo2 +licenselink +licenselinktext aboutprivatebrowsing.dtd // add and localize this file aboutrobots.dtd // add and localize this file ...
...And 8 more matches
Using the Places history service
nsi
browserhistory: adds functions used by the basic
browser like marking pages as typed in the url bar, and removing pages as from the history interface.
... creating the history service the places history service's contract id is "@mozilla.org/
browser/nav-history-service;1": var historyservice = components.classes["@mozilla.org/
browser/nav-history-service;1"] .getservice(components.interfaces.nsinavhistoryservice); it also responds to the old contract id for url bar autocomplete "@mozilla.org/autocomplete/search;1?name=history" and the contract id for the old history system (since it is backwards-compatible) "...
...@mozilla.org/
browser/global-history;2".
...And 8 more matches
nsINavBookmarksService
1.0 67 introduced gecko 1.8 inherits from: nsisupports last changed in gecko 14.0 (firefox 14.0 / thunderbird 14.0 / seamonkey 2.11) implemented by: @mozilla.org/
browser/nav-bookmarks-service;1.
... to use this service, use: var navbookmarksservice = components.classes["@mozilla.org/
browser/nav-bookmarks-service;1"] .getservice(components.interfaces.nsinavbookmarksservice); method overview void addobserver(in nsinavbookmarkobserver observer, in boolean ownsweak); void beginupdatebatch(); obsolete since gecko 1.9 void changebookmarkuri(in long long aitemid, in nsiuri anewuri); long long createdynamiccontainer(in long long aparentfolder, in autf8string aname, in astring acontractid, in long aindex); note: renamed from createcontainer in gecko 1.9 obsolete since gecko 13.0 long long createfolder(in long long aparentfolder, in autf8string name, in long index); void endupdatebatch(); obsolete since gecko 1.9 ...
...although it may still work in some
browsers, its use is discouraged since it could be removed at any time.
...And 8 more matches
Tutorial: Show Allocations Per Call Path - Firefox Developer Tools
visit the url about:config, and set the devtools.chrome.enabled preference to true: setting the 'devtools.chrome.enabled' preference open a developer scratchpad (menu button > developer > scratchpad), and select "
browser" from the "environment" menu.
... (this menu will not be present unless you have changed the preference as explained above.) selecting the '
browser' context in the scratchpad enter the following code in the scratchpad: // this simply defines the 'debugger' constructor in this // scratchpad; it doesn't actually start debugging anything.
...this function is available in the
browser // console.
...And 8 more matches
Paint Flashing Tool - Firefox Developer Tools
the paint flashing tool, when activated, highlights the part of a page that the
browser needs to repaint in response to some input: for example, the user moving the mouse or scrolling.
... with the help of this tool you can figure out whether your website is causing the
browser to repaint more than it needs to.
... repaints and responsiveness when the
browser renders a web page it parses the html and css, determines how to lay it out, and then paints it to actually display the content on the screen.
...And 8 more matches
Animating CSS properties - Firefox Developer Tools
the performance 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 performance problems.
...the
browser creates the animation as a transition from each keyframe to the next.
...And 8 more matches
HTML Drag and Drop API - Web APIs
html drag and drop interfaces enable applications to use drag-and-drop features in
browsers.
...(see performing a drop.) note: neither dragstart nor dragend events are fired when dragging a file into the
browser from the os.
... note: dragevent and datatransfer are broadly supported on desktop
browsers.
...And 8 more matches
Web Authentication API - Web APIs
- the server is connected by https or is the localhost), and will not be available for use if the
browser is not operating in a secure context.
... in order to understand how the create() and get() methods fit into the bigger picture, it is important to understand that they sit between two components that are outside the
browser: server - the web authentication api is intended to register new credentials on a server (also referred to as a service or a relying party) and later use those same credentials on that same server to authenticate a user.
...note most javascript programmers that are creating an application will only really care about steps 1 and 5 where the create() function is called and subsequently returns; however, steps 2, 3, and 4 are essential to understanding the processing that takes place in the
browser and authenticator and what the resulting data means.
...And 8 more matches
CSS Containment - CSS: Cascading Style Sheets
if the
browser knows that a part of the page is independent, rendering can be optimized and performance improved.
... article { contain: content; } each article is independent of the other articles on the page, and so they have been given contain: content in order to indicate to the
browser that this is the case.
... the
browser can then use this information to make decisions about how to render the content.
...And 8 more matches
text-rendering - CSS: Cascading Style Sheets
the
browser makes trade-offs among speed, legibility, and geometric precision.
...however, gecko and webkit
browsers let you apply this property to html and xml content on windows, macos, and linux.
... syntax values auto the
browser makes educated guesses about when to optimize for speed, legibility, and geometric precision while drawing text.
...And 8 more matches
will-change - CSS: Cascading Style Sheets
the will-change css property hints to
browsers how an element is expected to change.
...
browsers may set up optimizations before an element is actually changed.
...the
browser already tries as hard as it can to optimize everything.
...And 8 more matches
The HTML autocomplete attribute - HTML: Hypertext Markup Language
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 information expected in the field.
... the source of the suggested values is generally up to the
browser; typically values come from past values entered by the user, but they may also come from pre-configured values.
... for instance, a
browser might let the user save their name, address, phone number, and email addresses for autocomplete purposes.
...And 8 more matches
<iframe>: The Inline Frame element - HTML: Hypertext Markup Language
the topmost browsing context — the one with no parent — is usually the
browser window, represented by the window object.
...the
browser uses its own heuristics to decide the priority of the resource.
... loading indicates how the
browser should load the iframe: eager: load the iframe immediately, regardless if it is outside the visible viewport (this is the default value).
...And 8 more matches
<input type="email"> - HTML: Hypertext Markup Language
on
browsers that don't support inputs of type email, a email input falls back to being a standard text input.
... tip: use the title attribute to specify text that most
browsers will display as a tooltip to explain what the requirements are to match the pattern.
... a simple email input currently, all
browsers which implement this element implement it as a standard text input field with basic validation features.
...And 8 more matches
<script>: The Script element - HTML: Hypertext Markup Language
this attribute allows the elimination of parser-blocking javascript where the
browser would have to load and evaluate scripts before continuing to parse.
... see
browser compatibility for notes on
browser support.
... defer this boolean attribute is set to indicate to a
browser that the script is meant to be executed after the document has been parsed, but before firing domcontentloaded.
...And 8 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 information is used by the
browser to determine, before laying the page out, which image defined in srcset to use.
... srcset a list of one or more strings separated by commas indicating a set of possible images represented by the source for the
browser to use.
...And 8 more matches
Preloading content with rel="preload" - HTML: Hypertext Markup Language
the preload value of the <link> element's rel attribute lets you declare fetch requests in the html's <head>, specifying resources that your page will need very soon, which you want to start loading early in the page lifecycle, before
browsers' main rendering machinery kicks in.
...this example is trivial, as the
browser probably discovers the <link rel="stylesheet"> and <script> elements in the same chunk of html as the preloads, but the benefits can be seen much more clearly the later resources are discovered and the larger they are.
...using as to specify the type of content to be preloaded allows the
browser to: prioritize resource loading more accurately.
...And 8 more matches
Content negotiation - HTTP
server-driven content negotiation in server-driven content negotiation, or proactive content negotiation, the
browser (or any other kind of user-agent) sends several http headers along with the url.
... even if server-driven content negotiation is the most common way to agree on a specific representation of a resource, it has several drawbacks: the server doesn't have total knowledge of the
browser.
... even with the client hints extension, it has not a complete knowledge of the capabilities of the
browser.
...And 8 more matches
Performance fundamentals - Web Performance
in the context of open web apps, this document explains in general what performance is, how the
browser platform helps improve it, and what tools and processes you can use to test and improve it.
...this works well because the
browser is designed to optimize these effects and use the gpu to handle them smoothly with minimal impact on processor performance.
...the
browser can do these tasks on your gpu, letting the cpu handle other things.
...And 8 more matches
Add to Home screen - Progressive web apps (PWAs)
add to home screen (or a2hs for short) is a feature available in modern
browsers that allows a user to "install" a web app, ie.
... what
browsers support a2hs?
... a2hs is supported in all mobile
browsers, except ios webview.
...And 8 more matches
widget - Archive of obsolete content
private windows if your add-on has not opted into private browsing, then your widget will not appear in any private
browser windows.
... id string a string used to identify your widget in order to save its location when the user moves it in the
browser.
... getview(window) retrieve a widgetview instance of this widget relative to a
browser window.
...And 7 more matches
HTML to DOM - Archive of obsolete content
although you can now natively parse html using domparser and xmlhttprequest, this is a new feature that is not yet supported by all
browsers in use in the wild.
... var frame = document.getelementbyid("sample-frame"); if (!frame) { // create frame frame = document.createelement("iframe"); // iframe (or
browser on older firefox) frame.setattribute("id", "sample-frame"); frame.setattribute("name", "sample-frame"); frame.setattribute("type", "content"); frame.setattribute("collapsed", "true"); document.getelementbyid("main-window").appendchild(frame); // or // document.documentelement.appendchild(frame); // set restrictions as needed frame.webnavigation.allowauth = false; frame.webnav...
...; // skip blank page or frame if (doc.location.href == "about:blank" || doc.defaultview.frameelement) return; // do something with the dom of doc alert(doc.location.href); // when done remove frame or set location "about:blank" settimeout(function (){ var frame = document.getelementbyid("sample-frame"); // remove frame // frame.destroy(); // if using
browser element instead of iframe frame.parentnode.removechild(frame); // or set location "about:blank" // frame.contentdocument.location.href = "about:blank"; },10); }, true); } // load a page frame.contentdocument.location.href = "http://www.mozilla.org/"; // or // frame.webnavigation.loaduri("http://www.mozilla.org/",components.interfaces.nsiwebnavigation,null,null,null);...
...And 7 more matches
Plug-n-Hack - Archive of obsolete content
overview plug-n-hack (pnh) is a proposed standard from the mozilla security team for defining how security tools can interact with
browsers in a more useful and usable way.
... security researchers commonly use security tools in conjunction with
browsers, but until now direct integration has required writing platform and
browser specific extensions.
... configuring a
browser to work with a security tool can be a non-trivial process, and this can discourage people with less experience from using such tools.
...And 7 more matches
Debugging a XULRunner Application - Archive of obsolete content
/* 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 performance and usability.
...this will only work if the pref pref("
browser.dom.window.dump.enabled", true) is enabled.
... to output dump calls instead to a file, set
browser.dom.window.dump.file to the file destination where the log should be created and restart the application.
...And 7 more matches
The First Install Problem - Archive of obsolete content
problem definition the first install problem is the name given to the conditions arising when a plugin or embeddable software installs itself on a system first, before any other gecko-based
browser.
... if this happens, gecko-based
browsers often won't be able to discover the plugin, and will prompt the user to download the plugin again if the affiliated mime type is encountered on the web.
... unless gecko does a pre-emptive scan upon startup for desirable plugins that are not in the
browser's plugins directory first, the best way to solve this problem is to encourage plugin vendors to leave dlls (and xpt files, if applicable) in a location that gecko can discover at runtime.
...And 7 more matches
Using the W3C DOM - Archive of obsolete content
some
browsers have non-standard properties, such as internet explorer's document.all[], that are not part of the w3c document object model (dom) standards and may cause javascript errors in standards-compliant
browsers.
...w3c dom standards are well supported by modern
browsers, however the standards are moving target so support for newer features should be tested before use.
... using w3c standards means that code will run in compliant
browsers with minimal need for cross-
browser support, whereas code based on proprietary standards requires much more effort to be compatible with multiple user agents.
...And 7 more matches
What is a web server? - Learn web development
an http server is software that understands urls (web addresses) and http (the protocol your
browser uses to view webpages).
... at the most basic level, whenever a
browser needs a file that is hosted on a web server, the
browser requests the file via http.
... when the request reaches the correct (hardware) web server, the (software) http server accepts the request, finds the requested document, and sends it back to the
browser, also through http.
...And 7 more matches
How the Web works - Learn web development
previous overview: getting started with the web how the web works provides a simplified view of what happens when you view a webpage in a web
browser on your computer or phone.
...a simplified diagram of how they interact might look like this: clients are the typical web user's internet-connected devices (for example, your computer connected to your wi-fi, or your phone connected to your mobile network) and web-accessing software available on those devices (usually a web
browser like firefox or chrome).
...when a client device wants to access a webpage, a copy of the webpage is downloaded from the server onto the client machine to be displayed in the user's web
browser.
...And 7 more matches
Getting started with HTML - Learn web development
it is a markup language that tells web
browsers how to structure the web pages you visit.
...with the kind of overlap in the example above, the
browser has to guess at your intent.
...(the spacing is due to default css styling that the
browser applies to paragraphs.) note: html5 redefined the element categories: see element content categories.
...And 7 more matches
A first splash into JavaScript - Learn web development
open it in both your text editor and your web
browser.
...save your code and refresh the page in your
browser.
... if you haven't already done so, save your code, refresh the page in your
browser, and open the developer tools javascript console.
...And 7 more matches
Introduction to the server side - Learn web development
web
browsers communicate with web servers using the hypertext transfer protocol (http).
... 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.
... web servers wait for client request messages, process them when they arrive, and reply to the web
browser with an http response message.
...And 7 more matches
Adding phishing protection data providers
to find an id number to use, you can build a loop that requests the value of
browser.safebrowsing.provider.0.name, then
browser.safebrowsing.provider.1.name, and so forth until no value is returned.
... required preferences
browser.safebrowsing.provider.idnum.name a human-readable name for the data provider.
...
browser.safebrowsing.provider.idnum.keyurl an url that returns a private key to be used for encrypting of other requests.
...And 7 more matches
Creating a Language Pack
pre-build steps in the .mozconfig, you want to have mk_add_options moz_objdir=@topsrcdir@/obj-firefox-build ac_add_options --disable-compile-environment ac_add_options --with-l10n-base=../l10n-central # path relative to moz_objdir ac_add_options --enable-application=[
browser or mail] the given path should have your localization directory as child (i.e., a subdirectory ab-cd where ab-cd is your locale code).
... you still need to specify which application you're localizing (e.g., for firefox, that's
browser, thunderbird would be mail).
... every time you want to create a langpack, you need to be in the directory obj-firefox-build/
browser/locales.
...And 7 more matches
Debugging JavaScript
browser console the
browser console lets you see all javascript errors and logging in the
browser, including from firefox code.
...activate it through with the menu tools > web developer >
browser console.
... you can also start the
browser console when you launch firefox, by launching firefox from the command line and passing --jsconsole as a flag: /path/to/firefox --jsconsole log to the
browser console using the standard console api after importing console.jsm: let console = (cu.import("resource://gre/modules/console.jsm", {})).console; console.log("hello from firefox code"); error console this is obsolete and is no longer enabled in firefox by default.
...And 7 more matches
Limitations of chrome scripts
for example: whenever extensions try to access web content from the chrome process, the
browser will return a cross process object wrapper that gives the chrome code synchronous access to the content.
... however, these shims are not a substitute for migrating extensions: they are only a temporary measure, and will be removed eventually they can have a bad effect on responsiveness there are likely to be edge cases in which they don't work properly you can see all the places where your add-on uses compatibility shims by setting the dom.ipc.shims.enabledwarnings preference and watching the
browser console as you use the add-on.
...for each pattern we've noted: whether a shim exists and what kind of behavior it provides how to update your add-on so you don't need the shim g
browser.contentwindow, window.content...
...And 7 more matches
PopupNotifications.jsm
method overview void locationchange(); notification getnotification(id,
browser); void remove(notification); notification show(
browser, id, message, anchorid, mainaction, secondaryactions, options); properties attribute type description ispanelopen boolean returns true if the notification panel is currently visible, false if it is not.
... methods locationchange() the consumer can call this method to let the popup notification module know that the current
browser's location has changed.
... getnotification() retrieve a notification object associated with the
browser/id pair.
...And 7 more matches
Embedded Dialog API
posing gecko dialogs in embedding applications problem statement an application embedding gecko cannot tightly control its own windows and still allow gecko to be a fully functional web
browser.
...these new windows can be entire new
browser windows opened in response to web page script, or dialogs or alerts which may arise from script or merely during normal operation of the
browser.
...its simplest requirements are that the app must allow gecko to create new
browser windows and new simple, empty windows.
...And 7 more matches
Mozilla
any performance metrics gathered by such builds are largely unrelated to what would be found in a release
browser.
...
browser chrome tests the
browser chrome test suite is an automated testing framework designed to allow testing of application chrome windows using javascript.
... it currently allows you to run javascript code in the same scope as the main firefox
browser window and report results using the same functions as the mochitest test framework.
...And 7 more matches
Firefox Developer Tools
this section contains detailed guides to all of the tools as well as information on how to debug firefox for android, how to extend devtools, and how to debug the
browser as a whole.
... note: if you are just getting started with web development and using developer tools, our learning docs will help you — see getting started with the web and what are
browser developer tools?
...but you can attach the tools to a variety of other targets, too, both within the current
browser and in different
browsers or even different devices.
...And 7 more matches
Fullscreen API - Web APIs
this makes it possible to present desired content—such as an online game—using the user's entire screen, removing all
browser user interface elements and other applications from the screen until full-screen mode is shut off.
... note: support for this api varies somewhat across
browsers, with many requiring vendor prefixes and/or not implementing the latest specification.
... see the
browser compatibility section below for details on support for this api.
...And 7 more matches
LocalFileSystem - Web APIs
persistent storage is storage that stays in the
browser unless the app or the user removes it, but the user must grant you permission before you can use it.
... in contrast, temporary storage is automatically granted without any user permission, but it can be expunged by the
browser at any time.
... //taking care of the
browser-specific prefix window.requestfilesystem = window.requestfilesystem || window.webkitrequestfilesystem; // the first parameter defines the type of storage: persistent or temporary // next, set the size of space needed (in bytes) // initfs is the success callback // and the last one is the error callback // for denial of access and other errors.
...And 7 more matches
Using the Notifications API - Web APIs
the system notification system will vary of course by platform and
browser, but this is ok, and the notifications api is written to be general enough for compatibility with most system notification systems.
... because of abuses of push notifications in the past, web
browsers and developers have begun to implement strategies to help mitigate this problem.
...this is not only best practice — you should not be spamming users with notifications they didn't agree to — but going forward
browsers will explicitly disallow notification permission requests not triggered in response to a user gesture.
...And 7 more matches
Pointer events - Web APIs
hit test the process the
browser uses to determine a target element for a pointer event.
... pointercancel onpointercancel a
browser fires this event if it concludes the pointer will no longer be able to generate events (for example the related device is deactived).
...the
browser does this automatically when a pointerup or pointercancel event occurs.
...And 7 more matches
Using the Web Storage API - Web APIs
the web storage api provides mechanisms by which
browsers can securely store key/value pairs.
... the two mechanisms within web storage are as follows: sessionstorage maintains a separate storage area for each given origin that's available for the duration of the page session (as long as the
browser is open, including page reloads and restores).
... localstorage does the same thing, but persists even when the
browser is closed and reopened.
...And 7 more matches
Variable fonts guide - CSS: Cascading Style Sheets
bold and italic and bold italic), rather than relying upon the
browser to synthesize them.
...in order to most accurately reflect the typeface design and avoid differences between
browsers and how they may or may not synthesize the different styles, it's more accurate to load the specific font files where needed when using a non-variable font.
...if a number value supplied is outside the range encoded in the font, the
browser should render the font at the closest value allowed.
...And 7 more matches
Consistent list indentation - CSS: Cascading Style Sheets
this often leads to frustration, because what works in one
browser often doesn't have the same effect in another.
... for example, if you declare that lists have no left margin, they move over in internet explorer, but sit stubbornly in place in gecko-based
browsers.this article will help you understand the problems that can occur and how to avoid them.
... this is why, in every
browser except internet explorer for windows, markers are placed outside any border set for an <li> element, assuming the value of list-style-position is outside.
...And 7 more matches
Using media queries - CSS: Cascading Style Sheets
screen) or specific characteristics and parameters (such as screen resolution or
browser viewport width).
... only the only operator is used to apply a style only if an entire query matches, and is useful for preventing older
browsers from applying selected styles.
... when not using only, older
browsers would interpret the query screen and (max-width: 500px) simply as screen, ignoring the remainder of the query, and applying its styles on all screens.
...And 7 more matches
touch-action - CSS: Cascading Style Sheets
the touch-action css property sets how an element's region can be manipulated by a touchscreen user (for example, by zooming features built into the
browser).
...action: auto; touch-action: none; touch-action: pan-x; touch-action: pan-left; touch-action: pan-right; touch-action: pan-y; touch-action: pan-up; touch-action: pan-down; touch-action: pinch-zoom; touch-action: manipulation; /* global values */ touch-action: inherit; touch-action: initial; touch-action: unset; by default, panning (scrolling) and pinching gestures are handled exclusively by the
browser.
... an application using pointer events will receive a pointercancel event when the
browser starts handling a touch gesture.
...And 7 more matches
Adding captions and subtitles to HTML5 video - Developer guides
in other articles we looked at how to build a cross
browser video player using the htmlmediaelement and window.fullscreen apis, and also at how to style the player.
... the default attribute is set on the english <track> element, indicating to the
browser that this is the default subtitle file definition to use when subtitles have been turned on and the user has not made a specific selection.
...similar to the video controls, if a
browser supports html5 video subtitles, there will be a button provided within the native control set to access them.
...And 7 more matches
Event developer guide - Developer guides
the overview page provides an introduction to the design pattern and a summary of the types of incidents which are defined and reacted to by modern web
browsers.
... the remaining pages describe how to use events of different kinds defined by web
browsers.
... unfortunately, these events have been defined piece by piece as web
browsers have evolved so that there is no satisfying systematic characterization of the events built-in or defined by modern web
browsers.
...And 7 more matches
Mobile Web Development - Developer guides
we've organized it into two sections, designing for mobile devices and cross-
browser compatibility.
...it includes techniques such as: fluid css layouts, to make the page adapt smoothly as the
browser window size changes the use of media queries to conditionally include css rules appropriate for the device screen width and height the viewport meta tag instructs the
browser to display your site at the appropriate scale for the user's device.
... cross-
browser development write cross-
browser code to create web sites that will work acceptably across different mobile
browsers: try to avoid using
browser-specific features, such as vendor-prefixed css properties.
...And 7 more matches
<input type="search"> - HTML: Hypertext Markup Language
tip: use the title attribute to specify text that most
browsers will display as a tooltip to explain what the requirements are to match the pattern.
...the
browser decides, using this hint, what label to put on the enter key.
...if not provided, or an invalid value is given, the
browser's default maximum number of entries is used.
...And 7 more matches
Standard metadata names - HTML: Hypertext Markup Language
note:
browsers may use this to identify the application.
...several
browsers, like firefox and opera, use this as the default description of bookmarked pages.
... the
browser will use this information in tandem with the user's
browser or device settings to determine what colors to use for everything from background and foregrounds to form controls and scrollbars.
...And 7 more matches
Navigation and resource timings - Web Performance
navigation timings are metrics measuring a
browser's document navigation events.
...while deprecated, they are supported in all
browsers.
... performance timings the performancetiming api, a javascript api for measuring the loading performance of the requested page, is deprecated but supported in all
browsers.
...And 7 more matches
Privacy, permissions, and information security
cooperation among web content, the web
browser, and the web server is needed to achieve as much privacy and information security as possible.
... personal and private information <what kind of information is private or personal?> privacy risks <what are ways personal information can be gotten by third parties?> fingerprinting fingerprinting is a technique used to gather a variety of information that's made available by a user's
browser and collating it until it becomes possible to uniquely identify that user's
browser.
... modern
browsers take steps to help prevent fingerprinting-based attacks by either not allowing information to be accessed or, where the information must be made available, by introducing variations that prevent it from being used for identification purposes.
...And 7 more matches
Same-origin policy - Web security
these exceptions are nonstandard and unsupported in any other
browser.
... the port number is checked separately by the
browser.
...restrictions vary by
browser: internet explorer, firefox, chrome, safari (scroll down to cve-2010-0051) and opera.
...And 7 more matches
private-browsing - Archive of obsolete content
check whether a given object is private, so an add-on can respect private browsing usage per-window private browsing private browsing status is a property of an individual
browser window.
... the user enters private browsing by opening a new private
browser window.
...g into private browsing add-ons built using the sdk must opt into private browsing by setting the following key in their package.json file: "permissions": {"private-browsing": true} if an add-on has not opted in, then the high-level sdk modules will not expose private windows, or objects (such as tabs) that are associated with private windows: the windows module will not list any private
browser windows, generate any events for private
browser windows, or let the add-on open any private
browser windows the tabs module will not list any tabs that belong to private
browser windows, and the add-on won't receive any events for such tabs any ui components will not be displayed in private
browser windows any menus or menu items created using the context-menu will not be shown...
...And 6 more matches
Miscellaneous - Archive of obsolete content
this event is mozilla-only; other
browsers may support window.onmousewheel.
...ttps://developer.mozilla.org/samples/domref/dispatchevent.html also, new in firefox 3 / gecko 1.9: var utils = window.queryinterface(components.interfaces.nsiinterfacerequestor) .getinterface(components.interfaces.nsidomwindowutils); utils.sendmouseevent("mousedown", 10, 10, 0, 1, 0); utils.sendmouseevent("mouseup", 10, 10, 0, 1, 0); getting the currently selected text from
browser.xul overlay context: var selectedtext = document.commanddispatcher.focusedwindow.getselection().tostring(); or: content.getselection(); // |window| object is implied; i.e., window.content.getselection() or: get
browserselection(); // |window| object is implied; i.e., window.get
browserselection() this final option massages the selection to remove leading and trailing whitespace.
...it is defined at //github.com/realityripple/pale-moon/blob/master/palemoon/base/content/
browser.js#l5113.
...And 6 more matches
Progress Listeners - Archive of obsolete content
progress listeners progress listeners allow extensions to be notified of events associated with documents loading in the
browser and with tab switching events.
... in the examples below the progress listener is attached to the tab
browser, which means you don't get any notifications for inactive tabs.
... }, // for definitions of the remaining functions see related documentation onprogresschange: function(awebprogress, arequest, curself, maxself, curtot, maxtot) {}, onstatuschange: function(awebprogress, arequest, astatus, amessage) {}, onsecuritychange: function(awebprogress, arequest, astate) {} } attach the progress listener to a <
browser> or a <tab
browser> element using addprogresslistener, for example for firefox put the following code in a load listener of a main window: g
browser.addprogresslistener(mylistener); when used with a
browser, the second argument is a mask which determines the type of events that will be received.
...And 6 more matches
Plug-n-Hack Phase1 - Archive of obsolete content
plug-n-hack (pnh) phase 1 allows easier integration and defines how security tools can advertise their capabilities to
browsers.
... security tool manifest to support pnh-1 security tools provide a manifest over http(s) which defines the capabilities that the
browser can make use of.
... the tool configures itself by serving an html document (we’ll call this the configuration document) to the
browser.
...And 6 more matches
Install script template - Archive of obsolete content
installs to the current
browser that is invoking the installation 2.
...writes registry keys exposing the above secondary install location for other
browsers to find.
...ese will be used when the win32 registry keys are written var hkey_local_machine = "hkey_local_machine"; var hkey_current_user = "hkey_current_user"; var reg_moz_path = "software\\mozillaplugins"; // my own error code in case secondary installation fails var nosecondaryinstall = 1; // error return codes need some memory var err; // error return codes when we try and install to the current
browser var errblock1; // error return codes when we try and do a secondary installation var errblock2 = 0; // global variable containing our secondary install location var secondaryfolder; //special error values used by the cycore developers (www.cycore.com) who helped make this install script var exceptionoccurederror = -4711; var winregisnullerror = -4712; var invalidrootkeyerro...
...And 6 more matches
Creating a Window - Archive of obsolete content
if you are only in the development stage, you can just type the url (whether a chrome:, file: or other url type) into the location bar in a mozilla
browser window.
...the xul window will appear in the
browser window as opposed to a new window, but this is often sufficient during the early stages of development.
... note: the local xul document can be opened in the
browser as mentioned above only if |dom.allow_xul_xbl_for_file| preference in "about:config" has been set to |true| .
...And 6 more matches
XULRunner Hall of Fame - Archive of obsolete content
conkeror a highly programmable web
browser with a leopard-oriented design inspired by emacs.
... surebo browselorer a new, simple yet highly functional and customizable web
browser, based on xulrunner 22.
...build instructions kirix strata a new specialty
browser for accessing and manipulating data from the web telekast an open source teleprompter and script editor.
...And 6 more matches
NPN_GetURL - Archive of obsolete content
« gecko plugin api reference « plug-in side plug-in api summary asks the
browser to create a stream for the specified url.
...safest target, even though, when used with a mailto or news url, this creates an extra blank the
browser instance.
... if the target is null, the
browser creates a new stream and delivers the data to the current instance regardless of the mime type of the url.
...And 6 more matches
NPN_SetValue - Archive of obsolete content
« gecko plugin api reference «
browser side plug-in api summary implemented by
browsers.
... this call is used to inform the
browser of variable information controlled by the plugin.
...windowed, false=windowless nppvplugintransparentbool: sets transparent mode for display of a plugin; true=transparent, 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 nppvformvalue nppvplugindrawingmodel value the value of the specified variable to be set.
...And 6 more matches
NPN_Version - Archive of obsolete content
« gecko plugin api reference «
browser side plug-in api summary lets plugins obtain version information, both of the plug-in api and of the
browser itself.
... netscape_major pointer to the
browser's major version; changes with major code release number.
... netscape_minor pointer to the
browser's version; changes with point release number.
...And 6 more matches
Create Your Own Firefox Background Theme - Archive of obsolete content
creating a theme header image the header image is displayed as the background of the top of the
browser window, nestling in behind the toolbars, address bar, search bar and the tab strip.
... it will be anchored to the top-right corner of the
browser window.
... 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.
...And 6 more matches
Back to the Server: Server-Side JavaScript On The Rise - Archive of obsolete content
spidermonkey on the other hand is the javascript engine (written in c) in the highly popular mozilla firefox
browser.
...in addition, the jaxer “ajax server” (a project i work on at aptana) is an example of ssjs that uses not only spidermonkey, but also embeds the entire firefox
browser engine in the application server such that you can do server-side dom manipulation and other ajaxy things server-side that rhino was not built to do.
... as stated earlier, aptana jaxer is built using the mozilla
browser engine engine that powers mozilla firefox, which includes spidermonkey as its javascript interpreter, but lots more features beyond ssjs alone such as dom, db, file io, css, server sessions, e4x, etc...] this is a great advantage to the developer as it presents a consistent server-side and client-side development environment for both
browser and server contexts that is centered on open source and...
...And 6 more matches
Introduction to CSS layout - Learn web development
normal flow normal flow is how the
browser lays out html pages by default when you do nothing to control page layout.
... let's look at a quick html example: <p>i love my cat.</p> <ul> <li>buy cat food</li> <li>exercise</li> <li>cheer up friend</li> </ul> <p>the end!</p> by default, the
browser will display this code as follows: note here how the html is displayed in the exact order in which it appears in the source code, with elements stacked up on top of one another — the first paragraph, followed by the unordered list, followed by the second paragraph.
...static positioning is the default in normal flow, but you can cause elements to be laid out differently using other values, for example always fixed to the top of the
browser viewport.
...And 6 more matches
Installing basic software - Learn web development
office document editors are not suitable for this use, as they rely on hidden elements that interfere with the rendering engines used by web
browsers.
... web
browsers, to test code in.
... currently, the most-used
browsers are firefox, chrome, opera, safari, internet explorer and microsoft edge.
...And 6 more matches
Images in HTML - Learn web development
you could embed the image using its absolute url, for example: <img src="https://www.example.com/images/dinosaur.jpg"> but this is pointless, as it just makes the
browser do more work, looking up the ip address from the dns server all over again, etc.
...if for example our image name was spelled dinosooooor.jpg, the
browser wouldn't display the image, and would display the alt text instead: so, why would you ever see or need alt text?
... the
browser doesn't support the image type.
...And 6 more matches
Multimedia: Images - Learn web development
many javascript libraries can implement this for you, such as lazysizes, and
browser vendors are working on a native lazyload attribute that is currently in the experimental phase.
... other formats improve on jpeg's capabilities in regards to compression, but are not available on every
browser: webp — created by google and nowadays supported by all major
browsers except safari.
...doesn't support progressive display and the image decoding is not hardware accellerated and therefore resource intensive on the
browser's main thread.
...And 6 more matches
Accessibility Features in Firefox
keyboard support "mozilla firefox is a web-
browser with superior keyboard support." alan cantor, cantor access consulting firefox includes keyboard access to all of its amazing features: browse with caret allows users to select arbitrary content with the keyboard and move through content as if inside a read-only editor.
...extensions are small add-ons which can change your
browser experience as you see fit.
...chen is a screen reader extension built just for firefox which can read mathml community contributions the real reason behind firefox's success is the great community of volunteers and organizations that realize they have something to benefit from a
browser open to utilizing their ideas and hard work.
...And 6 more matches
Theme concepts
themes developed using the webextensions api in firefox enable you to change the look of the
browser by adding images to the header area of the firefox
browser; this is the area behind the menu bar, toolbars, address bar, search bar, and tab strip.
... these theme options can be implemented as static themes (although the theme images themselves may be animated) or as dynamic themes created in a
browser extension.
... static themes static themes are specified using the same resources as a
browser extension: a manifest.json file to define the theme components with those components stored in the same folder as the manifest.json file or a sub folder.
...And 6 more matches
Performance best practices for Firefox front-end engineers
use requestidlecallback() if you simply cannot avoid doing some kind of long job on the main thread, try to break it up into smaller pieces that you can run when the
browser has a free moment to spare, and the user isn't doing anything.
...knowing the path they will take through the various layers of the
browser engine will help you optimize your code to avoid pitfalls.
... when css is applied to a document (html or xul, it doesn’t matter), the
browser does calculations to figure out which css styles will apply to each element.
...And 6 more matches
CustomizableUI.jsm
customizableui assumes that each area it is told about is present in every
browser window.
... onwindowopened(awindow) fired when a new customizable (ie
browser) window is opened.
... onwindowclosed(awindow) fired when a customizable (ie
browser) window is closed.
...And 6 more matches
Gecko Profiler FAQ
it is quite reasonable to actually run the
browser for 40 minutes and once the said leaks have happened capture the profiles and study what went wrong.
... [ehsan] i have been profiling my real
browser usage for months now, and so can you.
... a better idea would be picking up a real
browser workload where through previous profiling we know that malloc overhead contributes a measurable percentage of overhead to the overall time and then study the change to that workload after replacing the allocator.
...And 6 more matches
Hacking Tips
hacking tips benchmarking (shell) arewefastyet.com display the benchmark results of the javascript shell, and
browser for b2g.
... using the gecko profiler (
browser / xpcshell) see the section dedicated to profiling with the gecko profiler.
... using the jit inspector (
browser) install the jit inspector addon in your
browser.
...And 6 more matches
nsIDOMWindowInternal
history nsidomhistory readonly: returns a reference to the history object, which provides an interface for manipulating the
browser session history.
... crypto nsidomcrypto readonly: returns the
browser crypto object, which can then be used to manipulate various
browser security features.
... status domstring sets the text in the status bar at the bottom of the
browser or returns the previously set text.
...And 6 more matches
Introduction to DOM Inspector - Firefox Developer Tools
(note: this is now a dead link.) when you first start the dom inspector, you are presented with a two-pane application window that looks a little like the main mozilla
browser.
... like the
browser, the dom inspector includes an address bar, and some of the same menus.
...in firefox and seamonkey
browser, these will be the webpages you have opened in tabs.
...And 6 more matches
Document.cookie - Web APIs
contrary to earlier specifications, leading dots in domain names are ignored, but
browsers may decline to set the cookie containing such dots.
... when user privacy is a concern, it's important that any web app implementation invalidate cookie data after a certain timeout instead of relying on the
browser to do it.
... many
browsers let users specify that cookies should never expire, which is not necessarily safe.
...And 6 more matches
Working with the History API - Web APIs
example of pushstate() method suppose http://mozilla.org/foo.html executes the following javascript: let stateobj = { foo: "bar", } history.pushstate(stateobj, "page 2", "bar.html") this will cause the url bar to display http://mozilla.org/bar.html, but won't cause the
browser to load bar.html or even check that bar.html exists.
...clicking the
browser's back button (still) does.
...because firefox saves state objects to the user's disk so they can be restored after the user restarts the
browser, we impose a size limit of 640k characters on the serialized representation of a state object.
...And 6 more matches
KeyboardEvent: code values - Web APIs
the reason is that some
browsers choose to interpret physical keys differently, there are some differences in which keys map to which codes.
...0xe02c "unidentified" "eject" 0xe02d "unidentified" "" 0xe02e "audiovolumedown" "volumedown" (was "volumedown" until chrome 50) 0xe02f "unidentified" "" 0xe030 "audiovolumeup" "volumeup" (was "volumeup" until chrome 50) 0xe031 "unidentified" "" 0xe032 "
browserhome" "
browserhome" 0xe033, 0xe034 "unidentified" "" 0xe035 "numpaddivide" "numpaddivide" 0xe036 "unidentified" "" 0xe037 "printscreen" "printscreen" 0xe038 "altright" "altright" 0xe039, 0xe03a "unidentified" "" 0xe03b "unidentified" "help" 0xe03c...
... 0xe052 "insert" "insert" 0xe053 "delete" "delete" 0xe054 ~ 0xe05a "unidentified" "" 0xe05b "metaleft" "osleft" 0xe05c "metaright" "osright" 0xe05d "contextmenu" "contextmenu" 0xe05e "power" "" 0xe05f ~ 0xe064 "unidentified" "" 0xe065 "
browsersearch" "
browsersearch" 0xe066 "
browserfavorites" "
browserfavorites" 0xe067 "
browserrefresh" "
browserrefresh" 0xe068 "
browserstop" "
browserstop" 0xe069 "
browserforward" "
browserforward" 0xe06a "
browserback" "
browserback" 0xe06b "launchapp1" "" 0xe06c "launchmail" "" 0xe06d "launc...
...And 6 more matches
Payment Request API - Web APIs
advantages of using the payment request api with "basic-card" (card-based payments): fast purchase experience: users enter their details once into the
browser and are then ready to pay for goods and services on the web.
... consistent experience on every site (that supports the api): as the payment sheet is controlled by the
browser, it can tailor the experience to the user.
... accessibility: as the
browser controls the input elements of the payment sheet, it can assure consistent keyboard and screen reader accessibility on every website without developers needing to do anything.
...And 6 more matches
PerformanceResourceTiming - Web APIs
performanceresourcetiming.fetchstartread only a domhighrestimestamp immediately before the
browser starts to fetch the resource.
... performanceresourcetiming.domainlookupstartread only a domhighrestimestamp immediately before the
browser starts the domain name lookup for the resource.
... performanceresourcetiming.domainlookupendread only a domhighrestimestamp representing the time immediately after the
browser finishes the domain name lookup for the resource.
...And 6 more matches
Performance API - Web APIs
however, if the
browser is unable to provide a time value accurate to 5 microseconds (because, for example, due to hardware or software constraints), the
browser can represent the value as a time in milliseconds accurate to a millisecond.
...if the scope is a window, the value is the time the
browser context was created and if the scope is a worker, the value is the time the worker was created.
... performanceframetiming provides methods and properties containing frame timing data about the
browser's event loop.
...And 6 more matches
WindowOrWorkerGlobalScope.setTimeout() - Web APIs
if you want to enable this functionality on that
browser, you must use a polyfill (see the polyfill section).
... polyfill if you need to pass one or more arguments to your callback function, but need it to work in
browsers which don't support sending additional arguments using either settimeout() or setinterval() (e.g., internet explorer 9 and below), you can include this polyfill to enable the html5 standard arguments-passing functionality.
...function() { vcallback.apply(null, aargs); } : vcallback, ndelay); }; }, 0, 'test'); }()) ie-only fix if you want a completely unobtrusive fix for every other mobile or desktop
browser, including ie 9 and below, you can either use javascript conditional comments: /*@cc_on // conditional ie < 9 only fix @if (@_jscript_version <= 9) (function(f){ window.settimeout = f(window.settimeout); window.setinterval = f(window.setinterval); })(function(f){return function(c,t){var a=[].slice.call(arguments,2);return f(function(){c instanceof function?c.apply(this,a):eval(...
...And 6 more matches
@supports - CSS: Cascading Style Sheets
the @supports css at-rule lets you specify declarations that depend on a
browser's support for one or more specific css features.
...the following example returns true if the
browser's transform-origin property considers 5% 5% valid: @supports (transform-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.
... selector() tests if the
browser supports the tested selector syntax.
...And 6 more matches
Introduction to HTML5 - Developer guides
some html5 features remain unsupported by some
browsers.
...for detailed information about multiple
browsers' support of html5 features, refer to the caniuse website.
...to indicate that your html content uses html5, simply use: <!doctype html> doing so will cause even
browsers that don't presently support html5 to enter into standards mode, which means that they'll interpret the long-established parts of html in an html5-compliant way while ignoring the new features of html5 they don't support.
...And 6 more matches
HTML5 - Developer guides
introduction to html5 this article introduces how to indicate to the
browser that you are using html5 in your web design or web application.
...this leads to far greater predictability and interoperability between html5-compliant
browsers.
... webrtc this technology, where rtc stands for real-time communication, allows connecting to other people and controlling videoconferencing directly in the
browser, without the need for a plugin or an external application.
...And 6 more matches
<input type="file"> - HTML: Hypertext Markup Language
non-standard attributes in addition to the attributes listed above, the following non-standard attributes are available on some
browsers.
... you should try to avoid using them when possible, since doing so will limit the ability of your code to function in
browsers that don't implement them.
... note: though originally implemented only for webkit-based
browsers, webkitdirectory is also usable in microsoft edge as well as firefox 50 and later.
...And 6 more matches
<input type="password"> - HTML: Hypertext Markup Language
specifics of how the entry process works may vary from
browser to
browser; mobile devices, for example, often display the typed character for a moment before obscuring it, to allow the user to be sure they pressed the key they meant to press; this is helpful given the small size of keys and the ease with which the wrong one can be pressed, especially on virtual keyboards.
...login forms) should be served over https; many
browsers now implement mechanisms to warn against insecure login forms; see insecure passwords.
... tip: use the title attribute to specify text that most
browsers will display as a tooltip to explain what the requirements are to match the pattern.
...And 6 more matches
Quirks Mode and Standards Mode - HTML: Hypertext Markup Language
when the web standards were made at w3c,
browsers could not just start using them, as doing so would break most existing sites on the web.
...
browsers therefore introduced two modes to treat new standards compliant sites differently from old legacy sites.
... there are now three modes used by the layout engines in web
browsers: quirks mode, almost standards mode, and full standards mode.
...And 6 more matches
Content Security Policy (CSP) - HTTP
browsers that don't support it still work with servers that implement it, and vice-versa:
browsers that don't support csp simply ignore it, functioning as usual, defaulting to the standard same-origin policy for web content.
... if the site doesn't offer the csp header,
browsers likewise use the standard same-origin policy.
...xss attacks exploit the
browser's trust of the content received from the server.
...And 6 more matches
Configuring servers for Ogg media - HTTP
if you don't know whether the ogg file contains audio or video, you can serve it with the mime type application/ogg, and the
browser will treat it as a video file.
...it must return 206: partial content to all byte range requests; otherwise,
browsers can't be sure you actually support byte range requests.
... include regular key frames when the
browser seeks through ogg media to a specified time, it has to seek to the nearest key frame before the seek target, then download and decode the video from there until the requested target time.
...And 6 more matches
User-Agent - HTTP
please read
browser detection using the user agent for why serving different web pages or services to different
browsers is usually a bad idea.
... 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-information>) <platform> (<platform-details>) <extensions> directives <product> a product identifier — its name or development codename.
...the ua string of firefox is broken down into 4 components: mozilla/5.0 (platform; rv:geckoversion) gecko/geckotrail firefox/firefoxversion mozilla/5.0 is the general token that says the
browser is mozilla-compatible.
...And 6 more matches
Media type and format guide: image, audio, and video content - Web media technologies
originally, these capabilities were limited, and were expanded organically, with different
browsers finding their own solutions to the problems around including still and video imagery on the web.
...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 information for various combinations of these, and suggestions for prioritization of formats, as well as which formats excel at specific types of content.
...And 6 more matches
Installing and uninstalling web apps - Progressive web apps (PWAs)
web application installation is a feature available in modern
browsers that allows users to choose to easily and conveniently “install” a web application on their device so they can access it in the same way they would any other installed app.
... depending on the device and features of the operating system and
browser, this can result in what is essentially a fully featured application (for example, using webapk on android) or as a shortcut added to their device’s screen.
...the application itself may then manifest as in a chromeless view (without the full
browser chrome) but it nevertheless is executing effectively as a tab within the
browser.
...And 6 more matches
jpm - Archive of obsolete content
see selecting a
browser version.
... jpm run -b /path/to/firefox/nightly see selecting a
browser version.
... for example, to pass the -jsconsole argument to firefox and launch the
browser console, try the following: jpm run --binary-args -jsconsole to pass multiple arguments, or arguments containing spaces, quote them: jpm run --binary-args '-url mzl.la -jsconsole' --debug run the add-on debugger attached to the add-on.
...And 5 more matches
Chapter 4: Using XPCOM—Implementing advanced processes - Archive of obsolete content
listing 4 shows how to get the active
browser window and the number of open tabs.
... listing 4: get active
browser window netscape.security.privilegemanager .enableprivilege('universalxpconnect'); var windowmediator = components .classes['@mozilla.org/appshell/window-mediator;1'] .getservice(components.interfaces.nsiwindowmediator); var
browser = windowmediator.getmostrecentwindow('navigator:
browser'); alert(
browser.g
browser.mtabs.length); get overview of all windows with a certain type use the nsiwindowmediator.getenumerator(...
...listing 5 shows how to get a summary of all
browser windows in firefox and then close them.
...And 5 more matches
Cross Package Overlays - Archive of obsolete content
for example, you could add menu items or toolbars to the mozilla
browser window.
... we'll use this feature to add a toolbar to the mozilla
browser window.
... the mozilla mail application uses overlays to add content to the
browser window.
...And 5 more matches
NPP_NewStream - Archive of obsolete content
the
browser must copy data in the stream to the local cache to satisfy random access requests made through npn_requestread.
... this will cause the
browser to destroy the stream without calling npp_destroystream.
...the
browser calls npp_destroystream when the stream completes (either successfully or abnormally).
...And 5 more matches
NPStream - Archive of obsolete content
« gecko plugin api reference « plug-in side plug-in api summary represents a stream of data either produced by the
browser and consumed by the plug-in, or produced by the plug-in and consumed by the
browser.
... /* plug-in private data */ void* ndata; /* netscape private data */ const char* url; uint32 end; uint32 lastmodified; void* notifydata; const char *headers; } npstream; fields the data structure has the following fields: plug-in-private value that the plug-in can use to store a pointer to private data associated with the instance; not modified by the
browser.
... ndata
browser-private value that can store data associated with the instance; should not be modified by the plug-in.
...And 5 more matches
Plugins - Archive of obsolete content
plugins are shared libraries that users can install to display content that the
browser can't display natively.
... 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.
... plugins are written using npapi, the cross-
browser api for plugins.
...And 5 more matches
Writing JavaScript for XHTML - Archive of obsolete content
the receiving
browser considers the content to be html, and does not utilise its xml parser.
...this was common practice in html, to hide the scripts from
browsers not capable of js.
...moreover, there's really no point to commenting out your scripts -- no
browser written in the last ten years will display your code on the page.
...And 5 more matches
Fixing Table Inheritance in Quirks Mode - Archive of obsolete content
summary: when in quirks mode, gecko-based
browsers will appear to ignore inheritance of font styles into tables from parent elements.
...in version 4
browsers such as netscape navigator 4.x and internet explorer 4.x, tables generally "broke" the inheritance of font styling.
...this led to a number of workarounds which were designed to cater to these bugs, and also to gecko-based
browsers emulating the behavior in some cases.
...And 5 more matches
Common causes of memory leaks in extensions - Extensions
for example, in xul overlay code: var contentwindows = []; function in
browserxuloverlay(contentwindow) { // forgetting or failing to pop the content window thing again contentwindows.push(contentwindow); } this will keep the content window compartments alive until the
browser window is closed.
... users often only open a single
browser window per session and use tabs, in which case the leaked compartments will live for the whole life of the session.
...consider the following example code that could be part of your
browser.xul overlay: g
browser.addeventlistener("domcontentloaded", function(evt) { var contentdoc = evt.originaltarget; var i = 0; // refresh the title once each second setinterval(function() { contentdoc.title = ++i; }, 1000); }, false); one would normally expect that the interval (or timer) would be destroyed as soon as the document unloads, in the same way that event listeners are au...
...And 5 more matches
Polyfill - MDN Web Docs Glossary: Definitions of Web-related terms
a polyfill is a piece of code (usually javascript on the web) used to provide modern functionality on older
browsers that do not natively support it.
... other times, polyfills are used to address issues where
browsers implement the same features in different ways.
... the polyfill uses non-standard features in a certain
browser to give javascript a standards-compliant way to access the feature.
...And 5 more matches
Advanced styling effects - Learn web development
prerequisites: html basics (study introduction to html) and an idea of how css works (study css first steps.) objective: to get an idea about how to use some of the advanced styling effects available in modern
browsers.
...like text shadows, box shadows are supported pretty well across
browsers, including ie9+ and edge.
...this is not an official standard, but has been implemented across multiple
browsers, as it is popular, and used fairly widely by developers.
...And 5 more matches
Images, media, and form elements - Learn web development
if the user enters something unexpected, or leaves a required field blank, the
browser can show an error message.
... different
browsers are inconsistent in how much styling and customization they allow for such items.
...the default styling of these elements will differ however based on the operating system and
browser that your user visits the site with.
...And 5 more matches
Basic native form controls - Learn web development
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.
... objective: to understand in detail the original set of native form widgets available in
browsers for collecting data, and how to implement them using html.
... note: the features discussed in this article are supported in all
browsers, which is not the case for all form controls.
...And 5 more matches
General asynchronous programming concepts - Learn web development
overview: asynchronous next in this article, we'll run through a number of important concepts relating to asynchronous programming, and how this looks in web
browsers and javascript.
... objective: to understand the basic concepts behind asynchronous programming, and how they manifest in web
browsers and javascript.
...it is up to the programming environment you are using (web
browsers, in the case of web development) to provide you with apis that allow you to run such tasks asynchronously.
...And 5 more matches
Video and Audio APIs - Learn web development
prerequisites: javascript basics (see first steps, building blocks, javascript objects), the basics of client-side apis objective: to learn how to use
browser apis to control video and audio playback.
...as we showed in video and audio content, a typical implementation looks like this: <video controls> <source src="rabbit320.mp4" type="video/mp4"> <source src="rabbit320.webm" type="video/webm"> <p>your
browser doesn't support html5 video.
... here is a <a href="rabbit320.mp4">link to the video</a> instead.</p> </video> this creates a video player inside the
browser like so: you can review what all the html features do in the article linked above; for our purposes here, the most interesting attribute is controls, which enables the default set of playback controls.
...And 5 more matches
Handling text — strings in JavaScript - Learn web development
let's start by entering some basic lines into the
browser developer console to familiarize ourselves.
...if the
browser can't find it, then an error is raised (e.g.
...if the
browser can see where a string starts, but can't find the end of the string, as indicated by the 2nd quote, it complains with an error (with "unterminated string literal").
...And 5 more matches
Inheritance in JavaScript - Learn web development
but mostly this has involved built-in
browser functions.
...try saving your code, loading the page in a
browser, and entering teacher.prototype.constructor into the console to verify.
...we didn't cover those here, as they are not yet supported very widely across
browsers.
...And 5 more matches
Accessibility in React - Learn web development
this outline is your visual indicator that the
browser is currently focused on this element.
...this shows you that the
browser's focus has moved.
... to improve the experience for keyboard and screen-reader users, we should manage the
browser’s focus ourselves.
...And 5 more matches
Client-side tooling overview - Learn web development
if you jump on your favourite search engine and look for "front-end developer tools" you're going to hit a huge spectrum of results ranging from text editors, to
browsers, to the type of pens you can use to take notes.
...turning an intermediate language into javascript that a
browser can understand.
... also well-worth looking at is webhint, a configurable, open-source linter for the web that surfaces best practices including approaches to accessibility, performance, cross-
browser compatibility via mdn's
browser compatibility data, security, testing for pwas, and more.
...And 5 more matches
HTTP logging
this saves a log of http-related information from your
browser run into a file that you can examine (or upload to bugzilla if a developer has asked you for a log).
... at any point during while your
browser is running, you can turn logging on and off.
... this allows you to capture only the "interesting" part of the
browser's behavior (i.e.
...And 5 more matches
Localizing with Mozilla Translator
the directory structure will look like this: (ab-cd jar root) locale |-- branding | |-- brand.dtd | `-- brand.properties |--
browser | |-- aboutdialog.dtd .
... |--
browser-region | `-- region.properties `-- ab-cd |-- alerts | `-- notificationnames.properties |-- autoconfig | `-- autoconfig.properties |-- cookie | |-- cookieacceptdialog.dtd | `-- cookieacceptdialog.properties |-- global | |-- about.dtd | |-- apppicker.dtd .
...
browser |-- locales | |-- en-us | | |-- readme.txt | | |-- chrome | | | |-- branding | | | | |-- brand.dtd | | | | `-- brand.properties | | | |--
browser | | | | |-- aboutdialog.dtd as you see, there is ''link'' point, usually at chrome (in cvs & mozilla-central), sometimes in a deeper point.
...And 5 more matches
Scroll-linked effects
these effects work well in
browsers where the scrolling is done synchronously on the
browser's main thread.
... however, most
browsers now support some sort of asynchronous scrolling in order to provide a consistent 60 frames per second experience to the user.
...as the scroll event listener runs in the javascript on the
browser's main thread, it will be asynchronous relative to the user-visible scrolling.
...And 5 more matches
NSS tools : ssltab
you can use this option to upload the output into a
browser.
...in your
browser window, enter the url http://intercept:1924.
... the
browser retrieves the requested page from the server at www.netscape.com, but the page is intercepted and passed on to the
browser by the debugging tool on intercept.
...And 5 more matches
NSS tools : ssltap
you can use this option to upload the output into a
browser.
...in your
browser window, enter the url http://intercept:1924.
... the
browser retrieves the requested page from the server at www.netscape.com, but the page is intercepted and passed on to the
browser by the debugging tool on intercept.
...And 5 more matches
NSS Tools ssltap
you can use this option to upload the output into a
browser.
...in your
browser window, enter the url http://intercept:1924.
... the
browser retrieves the requested page from the server at www.netscape.com, but the page is intercepted and passed on to the
browser by the debugging tool on intercept.
...And 5 more matches
NSS tools : ssltap
you can use this option to upload the output into a
browser.
...in your
browser window, enter the url http://intercept:1924.
... the
browser retrieves the requested page from the server at www.netscape.com, but the page is intercepted and passed on to the
browser by the debugging tool on intercept.
...And 5 more matches
Web Replay
record/replay infrastructure broadly, reliable record/replay is achieved by controlling for non-determinism in the
browser.
... the chrome and middleman processes communicate using the standard
browser protocols (pcontent, p
browser, etc.) and implementations for their actors, while the middleman and child processes communicate with their own channel and messages, which is tuned to the demands of the recording/replaying process.
... shared array buffers can be used by web content to introduce data races to the
browser on the contents of those buffers, going against a fundamental assumption of the record/replay infrastructure.
...And 5 more matches
Places utilities for JavaScript
by default its only included in
browser.xul.
... warning : placesutils class since firefox 3 beta 5 has been split into: placesutils: can be used in any toolkit application placesuiutils: only in firefox placesutils this is a gigantic object full of usefulness if you need to do any bookmark work from within
browser.xul.
...for instance, normally in order to get access to the bookmarks service, you have to run something like: components.classes["@mozilla.org/
browser/nav-bookmarks-service;1"] .getservice(components.interfaces.nsinavbookmarksservice); with places utils all you need to write is: placesutils.bookmarks this should save on the number of references to the service that are needed, and can help clean up interfaces that are already fairly cluttered.
...And 5 more matches
nsIAppShellService
boolean createstartupstate(in long awindowwidth, in long awindowheight); obsolete since gecko 1.8 nsixulwindow createtoplevelwindow(in nsixulwindow aparent, in nsiuri aurl, in pruint32 achromemask, in long ainitialwidth, in long ainitialheight, in nsiappshell aappshell); nsiwebnav createwindowless
browser (in bool aischrome) void destroyhiddenwindow(); void doprofilestartup(in nsicmdlineservice acmdlineservice, in boolean caninteract); obsolete since gecko 1.8 void ensure1window(in nsicmdlineservice acmdlineservice); obsolete since gecko 1.8 void enterlastwindowclosingsurvivalarea(); obsolete since gecko 1.8 void exitlastwindowclosingsurvivalarea(); ob...
...(see nsi
browserwindow for bit/flag definitions).
...if one has not been made, this will create a
browser window.
...And 5 more matches
Xray vision
the javascript code that along with the c++ core, implements the
browser itself is called chrome code and runs using system privileges.
...so when chrome code accesses content objects, it sees them with xray vision: // chrome code var transfer = g
browser.contentwindow.confirm("transfer all my money?"); // calls the native implementation note that using window.confirm() would be a terrible way to implement a security policy, and is only shown here to illustrate how xray vision works.
... to waive xray vision for an object you can use components.utils.waivexrays(object), or use the object's wrappedjsobject property: // chrome code var waivedwindow = components.utils.waivexrays(g
browser.contentwindow); var transfer = waivedwindow.confirm("transfer all my money?"); // calls the redefined implementation // chrome code var waivedwindow = g
browser.contentwindow.wrappedjsobject; var transfer = waivedwindow.confirm("transfer all my money?"); // calls the redefined implementation waivers are transitive: so if you waive xray vision for an object, then you automatically waive it for ...
...And 5 more matches
Scripting plugins - Plugins
« previousnext » xxx: dummy p element this document describes the new cross-
browser npapi extensions, commonly called npruntime, that have been developed by a group of
browser and plugin vendors, including the mozilla foundation, adobe, apple, opera, and sun microsystems (see press release).
... this document also explains how to make a plugin use these new extensions to be scriptable as well as how to access objects in a
browser.
... (a bit of history: npapi plugins that used to take advantage of being scriptable via liveconnect in 4.x netscape
browsers lost this possibility in mozilla (due to the jni making the netscape 4.x jri obsolete).
...And 5 more matches
Tutorial: Set a breakpoint - Firefox Developer Tools
since the debugger api is only available to privileged javascript code, you’ll need to use the
browser content toolbox to try it out.
... to do this, open the firefox developer tools, click on the options gear at the upper right of the toolbox, and make sure that both “enable
browser chrome and add-on debugging toolboxes” and “enable remote debugging” are checked.
... save the following text to an html file: <div onclick="report('the best div');">click me!</div> <div onclick="report('another great div');">or me!</div> <script> function report(what) { console.log('clicked: ' + what); } </script> visit the html file in your
browser, and open the
browser content toolbox by opening the firefox menu, choosing “web developer”, and then “
browser content toolbox”.
...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 perform layout, reflows, and garbage collection.
...this just gives the
browser some background tasks to perform.
...it gives us a compressed view of the waterfall, which tells us what kinds of operations the
browser is doing during the recording.
...And 5 more matches
Basic usage of canvas - Web APIs
at the end of this page, you will know how to set up a canvas 2d context and have drawn a first example in your
browser.
... fallback content the <canvas> element differs from an <img> tag in that, like for <video>, <audio>, or <picture> elements, it is easy to define some fallback content, to be displayed in older
browsers not supporting it, like versions of internet explorer earlier than version 9 or textual
browsers.
... you should always provide fallback content to be displayed by those
browsers.
...And 5 more matches
Introduction to the DOM - Web APIs
this document can be either displayed in the
browser window or as the html source.
... the w3c dom and whatwg dom standards are implemented in most modern
browsers.
... many
browsers extend the standard, so care must be exercised when using them on the web where documents may be accessed by various
browsers with different doms.
...And 5 more matches
Using the Frame Timing API - Web APIs
the performanceframetiming interface provides frame timing data about the
browser's event loop.
... a frame represents the amount of work a
browser does in one event loop iteration such as processing dom events, resizing, scrolling, rendering, css animations, etc.
...this means the
browser should process a frame in about 16.7ms.
...And 5 more matches
HTMLImageElement.src - Web APIs
syntax htmlimageelement.src = newsource; let src = htmlimageelement.src; value when providing only a single image, rather than a set of images from which the
browser selects the best match for the viewport size and display pixel density, the src attribute is a usvstring specifying the url of the desired image.
... if you use the srcset content attribute to provide multiple image options for different display pixel densities, the url specified by the src attribute is used in one of two ways: as a fallback for
browsers that don't support srcset.
... additionally, if you use src along with both sizes (or the corresponding sizes content attribute) and srcset in order to choose an image based on the viewport size, the src attribute is only used as a fallback for
browsers that don't support sizes and srcset; otherwise, it's not used at all.
...And 5 more matches
Navigator.registerProtocolHandler() - Web APIs
syntax navigator.registerprotocolhandler(scheme, url, title); note: recently updated to navigator.registerprotocolhandler(scheme, url), but no
browsers currently support this version.
...older
browsers also supported http.
...this will be displayed to the user, such as prompting “allow this site to handle [scheme] links?” or listing registered handlers in the
browser’s settings.
...And 5 more matches
Navigator.onLine - Web APIs
returns the online status of the
browser.
...the property sends updates whenever the
browser's ability to connect to the network changes.
...
browsers implement this property differently.
...And 5 more matches
RTCPeerConnection - Web APIs
also included is a list of any ice candidates that may already have been generated by the ice agent since the offer or answer represented by the description was first instantiated.getdefaulticeservers() the getdefaulticeservers() method of the rtcpeerconnection interface returns an array of objects based on the rtciceserver dictionary, which indicates what, if any, ice servers the
browser will use by default if none are provided to the rtcpeerconnection in its rtcconfiguration.
... however,
browsers are not required to provide any default ice servers at all.iceconnectionstate read only the read-only property rtcpeerconnection.iceconnectionstate returns an enum of type rtciceconnectionstate which state of the ice agent associated with the rtcpeerconnection.icegatheringstate read only the read-only property rtcpeerconnection.icegatheringstate returns an enum of type rtcicegatheringstate that describes connection's ice gathering state.
...rty ontrack is an eventhandler which specifies a function to be called when the track event occurs, indicating that a track has been added to the rtcpeerconnection.methodsalso inherits methods from: eventtargetaddicecandidate()when a web site or app using rtcpeerconnection receives a new ice candidate from the remote peer over its signaling channel, it delivers the newly-received candidate to the
browser's ice agent by calling rtcpeerconnection.addicecandidate().addstream() the obsolete rtcpeerconnection method addstream() adds a mediastream as a local source of audio or video.
...And 5 more matches
Storage Access API - Web APIs
concepts and usage most
browsers implement a number of storage access policies that restrict access to cookies and site data for embedded, cross-origin resources.
... the semantics around third-party cookie blocking policies in particular differ from
browser to
browser, but the core functionality is similar: cross-origin resources embedded in a third-party context are not given access to the same cookies and site storage that they would have access to when loaded in a first-party context.
...this also prevents embedded content on the page from spamming the
browser or user with excessive access requests.
...And 5 more matches
Touch events - Web APIs
the touch interface, which represents a single touchpoint, includes information such as the position of the touch point relative to the
browser viewport.
...it will only work on a
browser that supports touch events.
... create a canvas <canvas id="canvas" width="600" height="600" style="border:solid black 1px;"> your
browser does not support canvas element.
...And 5 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 perform tasks such as: teleconferencing systems menu systems voicemail systems entry of credit card or other payment information 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.
... hasaddtrack because some
browsers have not yet implemented rtcpeerconnection.addtrack(), therefore requiring the use of the obsolete addstream() method, we use this boolean to determine whether or not the user agent supports addtrack(); if it doesn't, we'll fall back to addstream().
...this variable will let the example operate even on
browsers not yet implementing the newer addtrack() method; we'll do so by falling back to the older addstream() method.
...And 5 more matches
Improving compatibility using WebRTC adapter.js - Web APIs
while the webrtc specification is relatively stable, not all
browsers have fully implemented all of its features.
... in addition, some
browsers still have prefixes on some or all webrtc apis.
...the webrtc organization provides on github the webrtc adapter to work around compatibility issues in different
browsers' webrtc implementations.
...And 5 more matches
Starting up and shutting down a WebXR session - Web APIs
webxr availability as a new and still in development api, webxr support is limited to specific devices and
browsers; and even on those, it may not be enabled by default.
... webxr polyfill the team designing the webxr specification has published a webxr polyfill which you can use to simulate webxr on
browsers which don't have support for the webxr apis.
... if the
browser supports the older webvr api, that is used.
...And 5 more matches
WorkerNavigator - Web APIs
inherited properties navigatorid.appcodename read only always returns 'mozilla', in any
browser.
... navigatorid.appname read only returns the official name of the
browser.
... navigatorid.appversion read only returns the version of the
browser as a string.
...And 5 more matches
ARIA Test Cases - Accessibility
or copy-paste: http://oaa-accessibility.org/examples/ for each example we test the "expected" results with assistive technologies, for each
browser that at supports wai-aria in.
... where a failure occurs we will test the
browser for api incorrectness, using tools such as msaa inspect.
... this must be done in order to determine where to file a bug (
browser or at).
...And 5 more matches
:is() (:matches(), :any()) - CSS: Cascading Style Sheets
note that currently
browsers support this functionality as :matches(), or through an older, prefixed pseudo-class — :any(), including older versions of chrome, firefox, and safari.
...'='<attr-modifier> = i | s examples cross-
browser example <header> <p>this is my header paragraph</p> </header> <main> <ul> <li><p>this is my first</p><p>list item</p></li> <li><p>this is my second</p><p>list item</p></li> </ul> </main> <footer> <p>this is my footer paragraph</p> </footer> :-webkit-any(header, main, footer) p:hover { color: red; cursor: pointer; } :-moz-any(header, main, footer) p:hover { color: red; ...
...er, main, footer) p'); } catch(e) { try { matcheditems = document.queryselectorall(':matches(header, main, footer) p'); } catch(e) { try { matcheditems = document.queryselectorall(':-webkit-any(header, main, footer) p'); } catch(e) { try { matcheditems = document.queryselectorall(':-moz-any(header, main, footer) p'); } catch(e) { console.log('your
browser doesn\'t support :is(), :matches(), or :any()'); } } } } matcheditems.foreach(applyhandler); function applyhandler(elem) { elem.addeventlistener('click', function(e) { alert('this paragraph is inside a ' + e.target.parentnode.nodename); }); } simplifying list selectors the :is() pseudo-class can greatly simplify your css selectors.
...And 5 more matches
Using CSS animations - CSS: Cascading Style Sheets
letting the
browser control the animation sequence lets the
browser optimize performance and efficiency by, for example, reducing the update frequency of animations running in tabs that aren't currently visible.
...if from/0% or to/100% is not specified, the
browser starts or finishes the animation using the computed values of all attributes.
... examples note: some older
browsers (pre-2017) may need prefixes; the live examples you can click to see in your
browser include the -webkit prefixed syntax.
...And 5 more matches
Controlling Ratios of Flex Items Along the Main Axis - CSS: Cascading Style Sheets
here we will explore them in depth in order that you can fully understand what the
browser is doing when you use them.
... flex item sizing in order to work out how much space there is available to lay out flex items, the
browser needs to know how big the item is to start with.
...in a
browser that supports this keyword you should be able to see that the text has taken all of the soft wrapping opportunities available to it, becoming as small as it can be without overflowing.
...And 5 more matches
appearance (-moz-appearance, -webkit-appearance) - CSS: Cascading Style Sheets
the -moz-appearance and -webkit-appearance properties are non-standard versions of this propery, used (respectively) by gecko (firefox) and by webkit-based (e.g., safari) and blink-based (e.g., chrome, opera)
browsers to achieve the same thing.
...although it is supported in most modern
browsers, its implementation varies widely.
... in older
browsers, even the keyword none does not have the same effect on all form elements across different
browsers, and some do not support it at all.
...And 5 more matches
quotes - CSS: Cascading Style Sheets
the quotes css property sets how the
browser should render quotation marks that are added using the open-quotes or close-quotes values of the css content property.
...that's the question!</q> css q { quotes: '"' '"' "'" "'"; } q::before { content: open-quote; } q::after { content: close-quote; } result auto quotes for most
browsers, the default value of quotes is auto (firefox 70+), or the
browser otherwise had this default behavior (chromiums, safari, edge), so this example works without it being explicitly being set.
... recommendation initial definition
browser compatibility the compatibility table on this page is generated from structured data.
...And 5 more matches
Applying color to HTML elements using CSS - HTML: Hypertext Markup Language
although historically it's been necessary to implement your own color picker, html now provides support for
browsers to provide one for your use through the <input> element, by using "color" as the value of its type attribute.
... when trying to decide upon a base color, you may find that
browser extensions that let you select colors from web content can be particularly handy.
...most
browsers, by default, remove background images when printing documents.
...And 5 more matches
<input type="tel"> - HTML: Hypertext Markup Language
despite the fact that inputs of type tel are functionally identical to standard text inputs, they do serve useful purposes; the most quickly apparent of these is that mobile
browsers — especially on mobile phones — may opt to present a custom keypad optimized for entering phone numbers.
... note:
browsers that don't support type tel fall back to being a standard text input.
... tip: use the title attribute to specify text that most
browsers will display as a tooltip to explain what the requirements are to match the pattern.
...And 5 more matches
Evolution of HTTP - HTTP
a client to display (and accidentally edit) these documents, the first web
browser called worldwideweb.
... http/1.0 – building extensibility http/0.9 was very limited and both
browsers and servers quickly extended it to be more versatile: versioning information 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 wa...
...onnection and request to fetch the image (followed by a response to that request): get /myimage.gif http/1.0 user-agent: ncsa_mosaic/2.0 (windows 3.1) 200 ok date: tue, 15 nov 1994 08:12:32 gmt server: cern/3.0 libwww/2.17 content-type: text/gif (image content) these novelties have not been introduced as concerted effort, but as a try-and-see approach over the 1991-1995 period: a server and a
browser added one feature and it saw if it got traction.
...And 5 more matches
Identifying resources on the Web - HTTP
https://developer.mozilla.org https://developer.mozilla.org/docs/learn/ https://developer.mozilla.org/search?q=url any of those urls can be typed into your
browser's address bar to tell it to load the associated page (resource).
...it indicates which protocol the
browser must use.
...the web requires one of these two, but
browsers also know how to handle other protocols such as mailto: (to open a mail client) or ftp: to handle file transfer, so don't be surprised if you see such protocols.
...And 5 more matches
HTTP caching - HTTP
this page will mostly talk about
browser and proxy caches, but there are also gateway caches, cdn, reverse proxy caches and load balancers that are deployed on web servers for better reliability, performance and scaling of web sites and web applications.
... private
browser caches a private cache is dedicated to a single user.
... you might have seen "caching" in your
browser's settings already.
...And 5 more matches
HTTP headers - HTTP
downloads content-disposition indicates if the resource transmitted should be displayed inline (default behavior without the header), or if it should be handled like a download and the
browser should present a “save as” dialog.
... feature-policy provides a mechanism to allow and deny the use of
browser features in its own frame, and in iframes that it embeds.
... x-content-type-options disables mime sniffing and forces
browser to use the type given in content-type.
...And 5 more matches
JavaScript modules - JavaScript
fast forward a few years and we now have complete applications being run in
browsers with a lot of javascript, as well as javascript being used in other contexts (node.js, for example).
... the good news is that modern
browsers have started to support module functionality natively, and this is what this article is all about.
... this can only be a good thing —
browsers can optimize loading of modules, making it more efficient than having to use a library and do all of that extra client-side processing and extra round trips.
...And 5 more matches
Authoring MathML - MathML
using mathml mathml in html pages you can use presentation mathml inside html5 documents: <!doctype html> <html> <head> <title>mathml in html5</title> </head> <body> <h1>mathml in html5</h1> <p> square root of two: <math> <msqrt> <mn>2</mn> </msqrt> </math> </p> </body> </html> content mathml is not supported by
browsers.
... fallback for
browsers without mathml support unfortunately, some
browsers are not able to render mathml equations or only have a limited support.
...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 perform feature detection of the mspace or mpadded elements (see the
browser compatibility table on these pages).
...And 5 more matches
Optimizing startup performance - Web Performance
does it seem to lock up the device or the user's
browser while the app loads?
...this will prevent the app,
browser, and/or device from appearing to have locked up.
...if the app is being run in a
browser, it's possible the user may get an "unresponsive app" or "slow script" notification.
...And 5 more matches
Media - Progressive web apps (PWAs)
like other features of css, printing depends on
browser choice and its settings.
... for example, the mozilla
browser supplies default margins, headers, and footers for printing.
...it is impossible to anticipate every user's
browser choice and settings at the time of printing.
...And 5 more matches
Subresource Integrity - Web security
subresource integrity (sri) is a security feature that enables
browsers to verify that resources they fetch (for example, from a cdn) are delivered without unexpected manipulation.
... note: for subresource-integrity verification of a resource served from an origin other than the document in which it’s embedded,
browsers additionally check the resource using cross-origin resource sharing (cors), to ensure the origin serving the resource allows it to be shared with the requesting origin.
... using subresource integrity you use the subresource integrity feature by specifying a base64-encoded cryptographic hash of a resource (file) you’re telling the
browser to fetch, in the value of the integrity attribute of any <script> or <link> element.
...And 5 more matches
On page load - Archive of obsolete content
this article is for xul/javascript developers who want to have custom code executed each time a new page is loaded in
browser/mail.
... progress listeners allow extensions to be notified of events associated with documents loading in the
browser and with tab switching events.
... creating an overlay first, you need to create an overlay to one (or more, depending on which applications you target) of the following xul documents: application uri to overlay firefox chrome://
browser/content/
browser.xul thunderbird chrome://messenger/content/messenger.xul navigator from seamonkey chrome://navigator/content/navigator.xul attaching a script attach a script to your overlay (see "attaching a script to an overlay") that adds a load event listener to appcontent element (
browsers) or messagepane (mail): window.addeventlistener("load", function load(event){ window.removeeventlistener("load", load, false); //remove listener, no longer needed myextension...
...And 4 more matches
Chapter 6: Firefox extensions and XUL applications - Archive of obsolete content
when venkman first launches, it can only debug the file currently open in your web
browser.
... this is because a lot of javascript files can slow down the
browser down if they’re opened for debugging, but you’ll need to lift this restriction in order to develop extensions.
... uncheck the “exclude
browser files” menu item under the debug menu (figure 1).
...And 4 more matches
Session store API - Archive of obsolete content
if your extension wants to be able to restore data when tabs are restored, you can install a listener like this: function myextensionhandlerestore(aevent) { var tab = event.originaltarget; /* the tab being restored */ var uri = tab.linked
browser.contentdocument.location; /* the tab's uri */ components.classes["@mozilla.org/consoleservice;1"] .getservice(components.interfaces.nsiconsoleservice) .logstringmessage("restoring tab: " + uri); }; document.addeventlistener("sstabrestoring", myextensionhandlerestore, false); simply replace the contents of the function myextensionhandlerestore() with whatever you need...
... firefox 3.6 knows how to save session store data when the last
browser window closes, even if there are still other windows open.
...in other words, it's now possible for sessions to be restored even without the
browser quitting and being relaunched.
...And 4 more matches
Source code directories overview - Archive of obsolete content
seamonkey seamonkey is the development name for the mozilla
browser suite.
...
browser contains the code for firefox.
...the [#seamonkey-embedding embedding] code wraps this code with higher level
browser functions like forward, back and history.
...And 4 more matches
Creating a Skin for Firefox/Getting Started - Archive of obsolete content
skin\classic\
browser browser contains all the toolbar icons, as well as the icons for the bookmark manager and the preferences window.
... skin\classic\global global contains almost all of the important css files that define the appearance of the
browser.
... skin\classic\mozapps mozapps contains all the styles and icons for the
browser peripherals, such as the extension manager or update wizard.
...And 4 more matches
Editor Embedding Guide - Archive of obsolete content
in the beginning there is makeeditable given an nsiweb
browser instance, get an nsidomwindow from the getcontentdomwindow call.
... then simply call nsiweb
browser->do_getinterface on the nsiweb
browser to retrieve the nsieditingsession from it.
...nscomptr<nsieditingsession> editingsession; nsiweb
browser->do_getinterface(getter_addrefs(editingsession)); if (editingsession) editingsession->makewindoweditable(domwindow, "html", pr_true); the valid editor types are: "text" (similar to notepad or a textarea; does not allow for html) "textmail" (similar to "text" but html can be inserted; intended for plaintext mail usage and handling of citations) "html" (this is the default type if no type is ...
...And 4 more matches
Introduction to XUL - Archive of obsolete content
window chrome is displayed and managed by the same layout engine that manages html content in the
browser.
... terms "xpfe" is the term mozilla-the-organization is using to describe mozilla-the-
browser's cross platform front end, because x and c look similar if you beat them long and hard with a hammer.
... the intention is to build cross-platform applications like
browsers and mail clients from a set of tools designed for that purpose.
...And 4 more matches
Introduction - Archive of obsolete content
xul (pronounced "zool" and rhyming with "cool") was created to make development of the mozilla
browser easier and faster.
... there are several ways you can use xul: firefox extension an extension adds functionality to the
browser itself, often in the form of extra toolbars, context menus, or customizations to the
browser's user interface.
... this is done using a feature of xul called an overlay, which allows the ui provided from one source, in this case, the firefox
browser, to be merged together with the ui from the extension.
...And 4 more matches
Accessibility/XUL Accessibility Reference - Archive of obsolete content
d label--> </label> </button> <button id='butwrap2'> <label control="butwrap2" value="<!--this-->" /> <label control="butwrap2" value="is" /> <label control="butwrap2" value="a" /> <label control="butwrap2" value="button" /> </button> <button image="images/img.xbm" tooltiptext="<!--button text-->"/> note that in the third example, only the first label is read
browser jaws 7.10 issues to use a
browser element with html, the type="content" attribute should be specified.
... however, this attribute causes any xul loaded in the
browser to have issues with jaws 7.10.
...therefore, with jaws 7.10, to use xul inside of a
browser, the type attribute cannot not be used.
...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 information.
...values for npnvariable: npnvxdisplay =1: unix only: returns the current display npnvxtappcontext: unix only: returns the application's xtappcontext npnvnetscapewindow: 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, fa...
...lse=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: npnvsupportswindowless: tells whether the
browser supports windowless plugins.
...And 4 more matches
Theme changes in Firefox 3 - Archive of obsolete content
browser changes requiring theme updates there are a number of changed and deleted files in the
browser that may require you to make changes to your theme.
... all file list all platforms file description of change
browser/themes/*/
browser/
browser.css the width of the drag and drop indicator is no longer calculated during the drag (tab
browser.xml).
...also, the visibility of the indicator is now controlled by setting collapsed in tab
browser.xml.
...And 4 more matches
Archived JavaScript Reference - Archive of obsolete content
however, this api has been deprecated and removed from
browsers.
... you can use the more general proxy object instead.array.unobserve()the array.unobserve() method was used to remove observers set by array.observe(), but has been deprecated and removed from
browsers.
...do not use it!handler.enumerate()the handler.enumerate() method used to be a trap for for...in statements, but has been removed from the ecmascript standard in es2016 and is deprecated in
browsers.legacy generator functionthe legacy generator function statement declares legacy generator functions with the specified parameters.legacy generator function expressionthe function keyword can be used to define a legacy generator function inside an expression.
...And 4 more matches
Archived open Web documentation - Archive of obsolete content
talk:background-size should not the "
browser compatibility" table also list google chrome and konqueror?
... znerd 04 august 2009
browser detection and cross
browser support improper
browser detection can lead to web maintenance nightmares.
... rethinking the basics of when and how to detect user agents is crucial to creating maintainable, cross
browser web content.
...And 4 more matches
Archive of obsolete content
here at mdn, we try to avoid outright deleting content that might be useful to people targeting legacy platforms, operating systems, and
browsers.
... perhaps your target audience is people that are using older hardware, for example, and can't upgrade to the latest and greatest
browsers.
...material in this archived content zone should not be used for building new web sites or apps for modern
browsers.
...And 4 more matches
CSS and JavaScript accessibility best practices - Learn web development
you could style form focus/hover states to make this behaviour more consistent across
browsers or fit in better with your page design, but don't get rid of it altogether — again, people rely on these clues to help them know what is going on.
...but again, a large part of it is using built-in
browser functionality where possible.
... providing custom controls for html5 <video>s that are accessible to keyboard-only users, along with a direct link to the video that can be used to access it if javascript is not available (the default <video>
browser controls aren't keyboard accessible in most
browsers).
...And 4 more matches
Accessible multimedia - Learn web development
for example (see native-controls.html source code and live): <audio controls> <source src="viper.mp3" type="audio/mp3"> <source src="viper.ogg" type="audio/ogg"> <p>your
browser doesn't support html5 audio.
... here is a <a href="viper.mp3">link to the audio</a> instead.</p> </audio> <br> <video controls> <source src="rabbit320.mp4" type="video/mp4"> <source src="rabbit320.webm" type="video/webm"> <p>your
browser doesn't support html5 video.
...it looks like so in firefox and chrome: however, there are problems with these controls: they are not keyboard accessible in most
browsers, i.e.
...And 4 more matches
How CSS is structured - Learn web development
each css rule starts with a selector—or a list of selectors—in order to tell the
browser which element or elements the rules should apply to.
...it is completely ignored by the
browser's css engine.
...however, a media query follows that defines a blue background if the
browser viewport is wider than 30em.
...And 4 more matches
How do you make sure your website works properly? - Learn web development
dig deeper test in your
browser if you want to know whether your website works correctly, the first thing to do is fire up your
browser and go to the page you want to test.
...you won't see this much in your
browser, but it's good to know about "301" since search engines use this information a lot to update their indexes.
... 304: not modified the file has not changed since the last time you asked for it, so your
browser can display the version from its cache, resulting in faster response times and more efficient use of bandwidth.
...And 4 more matches
What software do I need to build a website? - Learn web development
you'll need tools to: create and edit webpages upload files to your web server view your website nearly all operating systems by default include a text editor and a
browser, which you can use to view websites.
... operating system ftp software windows winscp moba xterm filezilla (all os) linux nautilus/files (gnome) dolphin (kde) mac os cyberduck chrome os shiftedit (all os) browsing websites as you already know, you need a web
browser to view websites.
... there are dozens of
browser options for your personal use, but when you're developing a website you should test it at least with the following major
browsers, to make sure your site works for most people: mozilla firefox google chrome microsoft internet explorer apple safari if you're targeting a specific group (e.g., technical platform or country), you may have to test the site with additional
browsers, like opera, konqueror, or uc
browser.
...And 4 more matches
UI pseudo-classes - Learn web development
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.
...some of the others are aimed at solving very specific niche problems, or simply not very well supported in
browsers yet.
... the ones listed above all have pretty good
browser support, but of course, you should test your form implementations carefully to make sure they work for your target audience.
...And 4 more matches
Introducing asynchronous JavaScript - Learn web development
a lot of the functionality we have looked at in previous learning area modules is synchronous — you run some code, and the result is returned as soon as the
browser can do so.
...in essence, it's the
browser's way of saying "i promise to get back to you with the answer as soon as i can," hence the name "promise." this concept can take practice to get used to; it feels a little like schrödinger's cat in action.
... neither of the possible outcomes have happened yet, so the fetch operation is currently waiting on the result of the
browser trying to complete the operation at some point in the future.
...And 4 more matches
Object prototypes - Learn web development
understanding prototype objects here we'll go back to the example in which we finished writing our person() constructor — load the example in your
browser.
...s) { // property and method definitions this.name = { 'first': first, 'last' : last }; this.age = age; this.gender = gender; //...see link in summary above for full definition } we have then created an object instance like this: let person1 = new person('bob', 'smith', 32, 'male', ['music', 'skiing']); if you type "person1." into your javascript console, you should see the
browser try to auto-complete this with the member names available on this object: in this list, you will see the members defined on person1's constructor — person() — name, age, gender, interests, bio, and greeting.
...in this case, what happens is: the
browser initially checks to see if the person1 object has a valueof() method available on it, as defined on its constructor, person(), and it doesn't.
...And 4 more matches
Properly configuring server MIME types - Learn web development
this is a major source of problems for users of gecko-based
browsers, which respect the mime types as reported by web servers and web applications.
... mime types describe the media type of content either in email or served by web servers or web applications and are intended to help guide a web
browser in how the content is to be processed and displayed.
... if the web server or application reports an incorrect mime type for content, a web
browser has no way, according to the http specification, of knowing that the author actually intended the content to be processed and displayed in a way different from that implied by the reported mime type.
...And 4 more matches
Componentizing our React app - Learn web development
if at any point in the future you try to render a component that does not return anything, react will display an error in your
browser.
...your <ul> should read like this: <ul role="list" classname="todo-list stack-large stack-exception" aria-labelledby="list-heading" > <todo /> <todo /> <todo /> </ul> when you look back at your
browser, you'll notice something unfortunate: your list now repeats the first task three times!
...let’s use the names of our tasks that we had before: <todo name="eat" /> <todo name="sleep" /> <todo name="repeat" /> when your
browser refreshes, you will see… the exact same thing as before.
...And 4 more matches
React resources - Learn web development
react devtools we used console.log() to check on the state and props of our application in this tutorial, and you'll also have seen some of the useful warnings and error message that react gives you both in the cli and your
browser's javascript console.
... the react devtools utility allows you to inspect the internals of your react application directly in the
browser.
... it adds a new panel to your
browser's developer tools, and with it you can inspect the state and props of various components, and even edit state and props to make immediate changes to your application.
...And 4 more matches
Command line options
-override /path/to/override.ini load the specified override.ini file to override application.ini (
browser/app/application.ini).
...
browser -
browser start with the
browser component.
... -setdefault
browser set the application as the default
browser.
...And 4 more matches
HTMLIFrameElement.findAll()
the findall() method of the htmliframeelement searches for a string in a
browser <iframe>'s text content; if found, the first instance of the string relative to the caret position will be highlighted.
... invoking this method results in a moz
browserfindchange event firing, which carries details about the search results.
... note: use of the
browser api requires a privileged app, and
browser and/or embed-apps permissions, depending on what you want to do.
...And 4 more matches
HTMLIFrameElement.setVisible()
the setvisible() method of the htmliframeelement is used to change the visibility state of the
browser <iframe>.
... the visible state of a
browser <iframe> has nothing to do with its actual visibility (which is handled through css).
... the visible state is used to define the level of resources required by the
browser <iframe>.
...And 4 more matches
Localizing with Koala
appname:
browser.
...they can be found in two files, inside the
browser/chrome/
browser directory: searchbar.dtd, search.properties.
...
browser\chrome\
browser\search.properties ?
...And 4 more matches
Profiling with the Firefox Profiler
it can be used in a variety of situations where external profilers are not available, and can provide more information and insight into what the
browser is doing.
... tip: threads that are annotated with "[default]" are in the parent (aka "ui", aka "
browser chrome", aka "main") process and those annotated with "[tab]" are in the web content (aka "child") processes.
... tip: long-running tasks in the parent process will block all input or drawing with the
browser ui (aka "ui jank") whereas long-running tasks in the content process will block interactivity with the page but still allowing the user to pan and zoom around thanks to apz.
...And 4 more matches
about:memory
here is an example for a
browser session where tabs were open to cnn.com, techcrunch.com, and arstechnica.com.
...++ dom │ │ │ │ └──0.05 mb (00.02%) ── property-tables │ │ │ └───9.61 mb (05.01%) ++ (18 tiny) │ │ └───4.39 mb (02.29%) -- js-zone(0x7f69425b5800) │ ├──15.75 mb (08.21%) ++ top(http://techcrunch.com/, id=20) │ ├──12.85 mb (06.69%) ++ top(http://arstechnica.com/, id=14) │ ├───6.40 mb (03.33%) ++ top(chrome://
browser/content/
browser.xul, id=3) │ └───3.59 mb (01.87%) ++ (4 tiny) ├───45.74 mb (23.84%) ++ js-non-window ├───33.73 mb (17.58%) ── heap-unclassified ├───22.51 mb (11.73%) ++ heap-overhead ├────6.62 mb (03.45%) ++ images ├────5.82 mb (03.03%) ++ workers/workers(chrome) ├────5.36 mb (02.80%) ++ (16 tiny) ├────4.07 mb (02.12%...
... the "window-objects" sub-tree represents all javascript window objects, which includes the
browser tabs and ui windows.
...And 4 more matches
Notes on TLS - SSL 3.0 Intolerant Servers
this is the main symptom of the problem when mozilla based
browsers encounter tls/ssl 3.0 intolerant servers.
... netscape 6.x/7.x and mozilla
browsers (0.9.1 and later versions) correctly implement the tls specification, and the users cannot utilize sites which have this problem.
... for up-to-date information, you can read a bugzilla bug report which keeps track of this problem with mozilla-based
browsers.
...And 4 more matches
Creating JavaScript jstest reftests
the js/src/tests directories test files are run by the jstest harness in the shell and the reftest harness in the
browser.
...for example, to test the decompilation of a simple function you could write: var f = (function () { return 1; }); expect = 'function () { return 1; }'; actual = f + ''; comparesource(expect, actual, 'decompile simple function'); handling shell or
browser specific features jstests run both in the
browser and in the javascript shell.
... if your test needs to use
browser-specific features, either: make the test silently pass if those features aren't present; or write a mochitest instead (preferred); or at the top of the test, add the comment // skip-if(xulruntime.shell), so that it only runs in the
browser.
...And 4 more matches
nsIDocShell
instead, retrieve an nsidocshell from a
browser or other document container element.
... note that out-of-process
browsers do not have an nsidocshell; instead you can access the nsidocshell object from a frame script.
... isoffscreen
browser boolean if true, this docshell is not visible in the traditional sense, but is being actively rendered to the screen (such as by being painted to a canvas), and should be treated accordingly.
...And 4 more matches
nsIEditorIMESupport
although it may still work in some
browsers, its use is discouraged since it could be removed at any time.
...although it may still work in some
browsers, its use is discouraged since it could be removed at any time.
...although it may still work in some
browsers, its use is discouraged since it could be removed at any time.
...And 4 more matches
nsIWebProgressListener
another example: the loading of a pdf or flash file might not not send onlocationchange if the document is handed off to a third-party tool rather than being loaded into the
browser.
...the status message is intended to be displayed to the user (for example, in the status bar of the
browser).
... example the nsiwebprogresslistener for each tab: g
browser.mtabprogresslistener can be used in the parent to listen for most nsiwebprogresslistener events, but in
browser code, will not have access to the nsiwebprogress's domwindow property.
...And 4 more matches
DevTools API - Firefox Developer Tools
a toolbox can be hosted within a
browser tab (at the bottom or on the side), or in its own window (we say that the toolbox is undocked).
... toolbox.hosttype.bottom host type for the default toolbox host at the bottom of the
browser window.
... toolbox.hosttype.side host type for the host at the side of the
browser window.
...And 4 more matches
Using the CSS properties and values API - Web APIs
registering a custom property registering a custom property allows you to tell the
browser how the custom property should behave; what are allowed types, whether the custom property inherits its value, and what the default value of the custom property is.
...the following will register a css custom properties, --my-prop, using @property, as a color, give it a default value, and have it not inherit its value: @property --my-prop { syntax: '<color>'; inherits: false; initial-value: #c0ffee; } using registered custom properties one of the advantages of registering a property is that the
browser now knows how it should handle your custom property through things like transitions!
... when a property isn't registered, the
browser doesn't know how to treat it, so it assumes that any value can be used and therefore can't animate it.
...And 4 more matches
console - Web APIs
the console object provides access to the
browser's debugging console (e.g.
...the specifics of how it works varies from
browser to
browser, but there is a de facto set of features that are typically provided.
... console.profile() starts the
browser's built-in profiler (for example, the firefox performance tool).
...And 4 more matches
DirectoryReaderSync - Web APIs
// taking care of the
browser-specific prefixes.
... // taking care of the
browser-specific prefixes.
... security_err the
browser determined that it was not safe to look up the metadata.
...And 4 more matches
Document - Web APIs
the document interface represents any web page loaded in the
browser and serves as an entry point into the web page's content, which is the dom tree.
...note that this is currently only implemented by chrome; other
browsers still implement them directly on the document interface.
... extension for html documents the document interface for html documents inherit from the htmldocument interface or, since html5, is extended for such documents: document.clear() in majority of modern
browsers, including recent versions of firefox and internet explorer, this method does nothing.
...And 4 more matches
How whitespace is handled by HTML, CSS, and in the DOM - Web APIs
</h1> this source code contains a couple of line feeds after the doctype and a bunch of space characters before, after, and inside the <h1> element, but the
browser doesn’t seem to care at all and just shows the words "hello world!" as if these characters didn’t exist at all: this is so that whitespace characters don't impact the layout of your page.
...in the earlier example one of the spaces between "hello" and "world!" still exists when the page is rendered in a
browser.
... there are rules in the
browser engine that decide which whitespace characters are useful and which aren’t — these are specified at least in part in css text module level 3, and especially the parts about the css white-space property and whitespace processing details, but we also offer an easier explanation below.
...And 4 more matches
FileSystemEntry - Web APIs
because this is a non-standard api, whose specification is not currently on a standards track, it's important to keep in mind that not all
browsers implement it, and those that do may implement only small portions of it.
... check the
browser compatibility section for details.
... // taking care of the
browser-specific prefixes.
...And 4 more matches
HTMLMediaElement - Web APIs
keep in mind that
browsers may ignore autoplay requests, so you should ensure that your code isn't dependent on autoplay working.
... htmlmediaelement.buffered read only returns a timeranges object that indicates the ranges of the media source that the
browser has buffered (if any) at the moment the buffered property is accessed.
... htmlmediaelement.played read only returns a timeranges object that contains the ranges of the media source that the
browser has played, if any.
...And 4 more matches
NavigatorID - Web APIs
the navigatorid interface contains methods and properties related to the identity of the
browser.
... navigatorid.appcodename read only always returns "mozilla", in any
browser.
... navigatorid.appname read only always returns "netscape", in any
browser.
...And 4 more matches
Page Visibility API - Web APIs
pages only become hidden when the user switches tabs or minimizes the
browser window containing the tab.
...these may include: most
browsers stop sending requestanimationframe() callbacks to background tabs or hidden <iframe>s in order to improve performance and battery life.
... budget-based background timeout throttling is now available in modern
browsers (firefox 58+, chrome 57+), placing an additional limit on background timer cpu usage.
...And 4 more matches
Performance - Web APIs
performance.clearmarks() removes the given mark from the
browser's performance entry buffer.
... performance.clearmeasures() removes the given measure from the
browser's performance entry buffer.
... performance.clearresourcetimings() removes all performance entries with a entrytype of "resource" from the
browser's performance data buffer.
...And 4 more matches
RTCDataChannel - Web APIs
every data channel is associated with an rtcpeerconnection, and each peer connection can have up to a theoretical maximum of 65,534 data channels (the actual limit may vary from
browser to
browser).
...these labels are not required to be unique.maxpacketlifetime read only the read-only rtcdatachannel property maxpacketlifetime returns the amount of time, in milliseconds, the
browser is allowed to take to attempt to transmit a message, as set when the data channel was created, or null.maxretransmits read only the read-only rtcdatachannel property maxretransmits returns the maximum number of times the
browser should try to retransmit a message before giving up, as set when the data channel was created, or null, which indicates that there is no maximum.negotiated read only th...
...eliable.stream read only the deprecated (and never part of the official specification) read-only rtcdatachannel property stream returns an id number (between 0 and 65,535) which uniquely identifies the rtcdatachannel.event handlersalso inherits event handlers from: eventtargetonbufferedamountlow the rtcdatachannel.onbufferedamountlow property is an eventhandler which specifies a function the
browser calls when the bufferedamountlow event is sent to the rtcdatachannel.
...And 4 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 performance timeline.
... this document shows how to create mark and measure performance entry types and how to use user timing methods (which are extensions of the performance interface) to retrieve and remove entries from the
browser's performance timeline.
...the mark is a timestamp in the
browser's performance timeline.
...And 4 more matches
WebRTC API - Web APIs
webrtc (web real-time communication) is a technology which enables web applications and sites to capture and optionally stream audio and/or video media, as well as to exchange arbitrary data between
browsers without requiring an intermediary.
... interoperability because implementations of webrtc are still evolving, and because each
browser has different levels of support for codecs and webrtc features, you should strongly consider making use of the adapter.js library provided by google before you begin to write your code.
... lifetime of a webrtc session webrtc lets you build peer-to-peer communication of arbitrary data, audio, or video—or any combination thereof—into a
browser application.
...And 4 more matches
Rendering and the WebXR frame animation callback - Web APIs
once that's in hand, you request that the
browser call your rendering function the next time it needs a framebuffer to render your scene.
... refresh rate and frame rate assuming you've called the xrsession method requestanimationframe() since the last time the screen refreshed, the
browser will call your frame renderer callback every time it's ready to repaint your app or site window.
... hardare vertical refresh rate when the
browser is ready to refresh the <canvas> within which your webxr content is displayed, it calls your frame rendering callback, which uses the specified timestamp and any other relevant data, such as models and textures, as well as application state, to render the scene—as it should appear at the specified time—into the webgl backbuffer.
...And 4 more matches
Web Audio API best practices - Web APIs
the audio will start playing when the
browser determines it can load the rest of the file before playing finishes.
... cross
browser & legacy support the web audio api specification is constantly evolving and like most things on the web, there are some issues with it working consistently across
browsers.
... here we'll look at options for getting around cross-
browser problems.
...And 4 more matches
Window: beforeunload event - Web APIs
if the user confirms, the
browser navigates to the new page, otherwise it cancels the navigation.
... however note that not all
browsers support this method, and some instead require the event handler to implement one of two legacy methods: assigning a string to the event's returnvalue property returning a string from the event handler.
... some
browsers used to display the returned string in the confirmation dialog, enabling the event handler to display a custom message to the user.
...And 4 more matches
Window.requestFileSystem() - Web APIs
even compared to the rest of the file and directory entries api, requestfilesystem() is especially non-standard; only chrome implements it, and all other
browser makers have decided that they will not implement it.
... syntax this method is prefixed with webkit in all
browsers that implement it (that is, google chrome).
...specify window.temporary if it's acceptable for the
browser to delete the files at its own discretion, such as if storage space runs low, or window.persistent if you need the files to remain in place unless the user or the web site or app explicitly permit it.
...And 4 more matches
ARIA - Accessibility
however, if you choose to use aria, you are responsible for mimicking (the equivalent)
browser behaviour in script.
...in this example, the role="progressbar" attribute informs the
browser that this element is actually a javascript-powered progress bar widget.
...support is based on the operating system and
browser being used, as well as the kind of assistive technology interfacing with it.
...And 4 more matches
Using CSS custom properties (variables) - CSS: Cascading Style Sheets
fallback values aren't used to fix the
browser compatibility.
... if the
browser doesn't support css custom properties, the fallback value won't help.
... it's just a backup for the
browser which supports css custom properties to choose a different value if the given variable isn't defined or has an invalid value.
...And 4 more matches
<color> - CSS: Cascading Style Sheets
this is because most devices are not calibrated, and some
browsers do not support output devices' color profiles.
... 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.
...however, be aware that older
browsers may treat it as black with an alpha value of 0.
...And 4 more matches
display - CSS: Cascading Style Sheets
note:
browsers that support the two value syntax, on finding the outer value only, such as when display: block or display: inline is specified, will set the inner value to flow.
... note:
browsers that support the two value syntax, on finding the inner value only, such as when display: flex or display: grid is specified, will set their outer value to block.
... note: in
browsers that support the two-value syntax, if no inner value is specified it will default to flow.
...And 4 more matches
text-size-adjust - CSS: Cascading Style Sheets
other
browsers will ignore this property.
... /* keyword values */ text-size-adjust: none; text-size-adjust: auto; /* <percentage> value */ text-size-adjust: 80%; /* global values */ text-size-adjust: inherit; text-size-adjust: initial; text-size-adjust: unset; because many websites have not been developed with small devices in mind, mobile
browsers differ from desktop
browsers in the way they render web pages.
... since text that has been scaled down to fit a mobile screen may be very small, many mobile
browsers apply a text inflation algorithm to enlarge the text to make it more readable.
...And 4 more matches
HTML5 Parser - Developer guides
the html parser is one of the most complicated and sensitive pieces of a
browser.
... parsing is now done in a separate thread from firefox’s main ui thread, improving overall
browser responsiveness.
...this will result in more consistent behavior across
browser implementations.
...And 4 more matches
Localizations and character encodings - Developer guides
browsers process text as unicode internally.
... however, a way of representing characters in terms of bytes (character encoding) is used for transferring text over the network to the
browser.
... to specify that a page is using, for example, the utf-8 character encoding (as per the recommendation), simply place the following line in the <head> block: <meta charset="utf-8"> details and
browser internals when the encoding is declared by web content like the html specification requires, firefox will use that encoding for turning the bytes into the internal representation.
...And 4 more matches
Developer guides
most of what you see on screen in your
browser is described, fundamentally, using html.
...this article is intended as a starting point for exploring the various delivery mechanisms of web-based media and compatibility with popular
browsers.
...having native audio and video in the
browser means we can use these data streams with technologies such as <canvas>, webgl or web audio api to modify audio and video directly, for example adding reverb/compression effects to audio, or grayscale/sepia filters to video.
...And 4 more matches
HTML attribute: multiple - HTML: Hypertext Markup Language
for the file input type, the native messaging the
browser provides differs.
...most
browsers displaying a scrolling list box for a <select> control with the multiple attribute set versus a single line dropdown when the attribute is ommitted.
... <select multiple name="drawfs" id="drawfs"> <option>grumpy</option> <option>happy</option> <option>sleepy</option> <option>bashful</option> <option>sneezy</option> <option>dopey</option> <option>doc</option> </select> when multiple is specified, most
browsers will show a scrolling list box instead of a single line dropdown.
...And 4 more matches
<a>: The Anchor element - HTML: Hypertext Markup Language
can be used with or without a value: without a value, the
browser will suggest a filename/extension, generated from various sources: the content-disposition http header the final segment in the url path the media type (from the (content-type header, the start of a data: url, or blob.type for a blob: url) defining a value suggests it as the filename.
...filesystems may forbid other characters in filenames, so
browsers will adjust the suggested name if necessary.
...links are not restricted to http-based urls — they can use any url scheme supported by
browsers: sections of a page with fragment urls pieces of media files with media fragments telephone numbers with tel: urls email addresses with mailto: urls while web
browsers may not support other url schemes, web sites can with registerprotocolhandler() hreflang hints at the human language of the linked url.
...And 4 more matches
<acronym> - HTML: Hypertext Markup Language
example <p>the <acronym title="world wide web">www</acronym> is only a component of the internet.</p> default styling though the purpose of this tag is purely for the convenience of the author, its default styling varies from one
browser to another: some
browsers, like internet explorer, do not style it differently than a <span> element.
... a few
browsers not only add a dotted underline, but also put it in small caps; to avoid this styling, adding something like font-variant: none in the css takes care of this case.
... it is therefore recommended that web authors either explicitly style this element, or accept some cross-
browser variation.
...And 4 more matches
<area> - HTML: Hypertext Markup Language
alt a text string alternative to display on
browsers that do not display images.
... ping contains a space-separated list of urls to which, when the hyperlink is followed, post requests with the body ping will be sent by the
browser (in the background).
... many
browsers, notably internet explorer 4 and higher, support circ, polygon, and rectangle as valid values for shape, but these values are non-standard.
...And 4 more matches
<button>: The Button element - HTML: Hypertext Markup Language
unlike other
browsers, firefox persists the dynamic disabled state of a <button> across page loads.
... firefox, unlike other
browsers, persists the dynamic disabled state of a <button> across page loads.
... _blank: load the response into a new unnamed browsing context — usually a new tab or window, depending on the user’s
browser settings.
...And 4 more matches
<content>: The Shadow DOM Content Placeholder element (obsolete) - HTML: Hypertext Markup Language
note: though present in early draft of the specifications and implemented in several
browsers, this element has been removed in later versions of the spec, and should not be used.
... note: for this code to work, the
browser you display it in must support web components.
... shadowroot.innerhtml = '<h2>inserted heading</h2> <content select="p"></content>'; </script> </body> </html> if you display this in a web
browser it should look like the following.
...And 4 more matches
<input type="number"> - HTML: Hypertext Markup Language
the
browser may opt to provide stepper arrows to let the user increase and decrease the value using their mouse or by simply tapping with a fingertip.
... on
browsers that don't support inputs of type number, a number input falls back to type text.
...there seems to be some disagreement about this among
browsers; see bug 1398528.
...And 4 more matches
<input type="text"> - HTML: Hypertext Markup Language
tip: use the title attribute to specify text that most
browsers will display as a tooltip to explain what the requirements are to match the pattern.
... non-standard attributes the following non-standard attributes are also available on some
browsers.
...the
browser decides, using this hint, what label to put on the enter key.
...And 4 more matches
List of default Accept values - HTTP
this article documents the default values for the http accept header for specific inputs and
browser versions.
...note that all
browsers add the */* mime type to cover all cases.
... this is typically used for requests initiated via the address bar of a
browser, or via an html <a> element.
...And 4 more matches
Set-Cookie - HTTP
browsers block frontend javascript code from accessing the set cookie header, as required by the fetch spec, which defines set-cookie as a forbidden response-header name that must be filtered out from any response exposed to frontend code.
... warning: many web
browsers have a session restore feature that will save all tabs and restore them next time the
browser is used.
... session cookies will also be restored, as if the
browser was never closed.
...And 4 more matches
X-Frame-Options - HTTP
the x-frame-options http response header can be used to indicate whether or not a
browser should be allowed to render a page in a <frame>, <iframe>, <embed> or <object>.
... the added security is provided only if the user accessing the document is using a
browser that supports x-frame-options.
... note: the content-security-policy http header has a frame-ancestors directive which obsoletes this header for supporting
browsers.
...And 4 more matches
Introduction - JavaScript
inside a host environment (for example, a web
browser), javascript can be connected to the objects of its environment to provide programmatic control over them.
...core javascript can be extended for a variety of purposes by supplementing it with additional objects; for example: client-side javascript extends the core language by supplying objects to control a
browser and its document object model (dom).
... this means that in the
browser, javascript can change the way the webpage (dom) looks.
...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 performance — loading a page requires a new round trip to the server.
... client-side rendering (csr) allows the website to be updated in the
browser almost instantly when navigating to different pages, but requires more of an initial download hit and extra rendering on the client at the beginning.
...in addition to the basic shell, you can add other features such as add to home screen or push notifications, safe in the knowledge that the app will still work ok if they are not supported by the user's
browser — this is the beauty of progressive enhancement.
...And 4 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 performance — loading a page requires a new round trip to the server.
... client-side rendering (csr) allows the website to be updated in the
browser almost instantly when navigating to different pages, but requires more of an initial download hit and extra rendering on the client at the beginning.
...in addition to the basic shell, you can add other features such as add to home screen or push notifications, safe in the knowledge that the app will still work ok if they are not supported by the user's
browser — this is the beauty of progressive enhancement.
...And 4 more matches
Tools for SVG - SVG: Scalable Vector Graphics
browser support as of internet explorer 9, all major
browsers support svg: ie 9, mozilla firefox, safari, google chrome and opera.
... mobile devices with webkit-based
browsers also support svg.
...usage of headless
browsers such as slimerjs and phantomjs are also popular for this purpose, as the image produced is closer to what the svg will look like in the
browser.
...And 4 more matches
WebAssembly Concepts - WebAssembly
this article explains the concepts behind how webassembly works including its goals, the problems it solves, and how it runs inside the web
browser's rendering engine.
... webassembly is a new type of code that can be run in modern web
browsers and provides new features and major gains in performance.
...like other web code, it will enforce the
browser's same-origin and permissions policies.
...And 4 more matches
tabs - Archive of obsolete content
uri: './style.css' }); var button = togglebutton({ id: "stylist", label: "stylist", icon: "./icon-16.png", onchange: function(state) { if (state.checked) { attach(style, tabs.activetab); } else { detach(style, tabs.activetab); } } }); private windows if your add-on has not opted into private browsing, then you won't see any tabs that are hosted by private
browser windows.
... tabs hosted by private
browser windows won't be seen if you enumerate the tabs module itself, and you won't receive any events for them.
...nd then back the other way: var { modelfor } = require("sdk/model/core"); var { viewfor } = require("sdk/view/core"); var tabs = require("sdk/tabs"); var tab_utils = require("sdk/tabs/utils"); function maphighleveltolowlevel(tab) { // get the xul tab that corresponds to this high-level tab var lowleveltab = viewfor(tab); // now we can, for example, access the tab's content directly var
browser = tab_utils.get
browserfortab(lowleveltab); console.log(
browser.contentdocument.body.innerhtml); // get the high-level tab back from the xul tab var highleveltab = modelfor(lowleveltab); console.log(highleveltab.url); } tabs.on("ready", maphighleveltolowlevel); note that directly accessing xul objects and web content like this means you're no longer protected by the compatibility guaran...
...And 3 more matches
Downloading Files - Archive of obsolete content
downloading files to download a file, create an instance of nsiweb
browserpersist and call its nsiweb
browserpersist.saveuri() method, passing it a url to download and an nsifile instance representing the local file name/path.
... components.utils.import("resource://gre/modules/privatebrowsingutils.jsm"); const web
browserpersist = components.constructor("@mozilla.org/embedding/
browser/nsweb
browserpersist;1", "nsiweb
browserpersist"); var persist = web
browserpersist(); var targetfile = services.dirsvc.get("desk", ci.nsifile); targetfile.append("file.bin"); // obtain the privacy context of the
browser window that the url // we are downloading comes from.
... downloading binary files with a progress listener to download a binary file with custom progress listener: components.utils.import("resource://gre/modules/privatebrowsingutils.jsm"); const web
browserpersist = components.constructor("@mozilla.org/embedding/
browser/nsweb
browserpersist;1", "nsiweb
browserpersist"); var persist = web
browserpersist(); var targetfile = services.dirsvc.get("desk", ci.nsifile); targetfile.append("file.bin"); var obj_uri = services.io.newuri(aurltodownload, null, null); // obtain the privacy context of the
browser wi...
...And 3 more matches
Code snippets - Archive of obsolete content
miscellaneous miscellaneous useful code fragments html to dom using a hidden
browser element to parse html to a window's dom javascript libraries here are some javascript libraries that may come in handy.
...hence, if you are going to use another scripting language you might expect that most of the
browsers will not recognize it.
... nevertheless, the increasing computational power of modern
browsers together with the introduction of typed arrays in ecmascript allow us, in theory, to build full virtual machines in pure ecmascript.
...And 3 more matches
Appendix C: Avoiding using eval in Add-ons - Archive of obsolete content
overriding/extending/amending existing functions a common thing add-ons do during their initialization is overriding/extending existing
browser functions by using function.tostring/function.tosource and eval to "string-patch" the function body.
...var functionbody = g
browser.addtab.tosource(); var afterbracket = functionbody.indexof("{") + 1; functionbody = functionbody.substring(0, afterbracket) + "myaddon.onaddtab(auri);" + functionbody.substring(afterbracket); eval("g
browser.addtab = " + functionbody); of course, this not only looks messy, but can be quite error prone.
...in real life such code is often far more complex) the code might break in the future, as certain assumptions might not longer be true, for example the function signature may change (auri from above becomes aurl) or the function is replaced by a short-hand/arrow function: function addtab(auri) tab
browser.addtab(auri); var addtab = (auri) => tab
browser.addtab(auri); same as with "passing functions/code as strings" above, patching a function to with fragments of externally retrieved data will create security vulnerabilities.
...And 3 more matches
User Notifications and Alerts - Archive of obsolete content
notification boxes are very easy to create, and are very customizable: let nb = g
browser.getnotificationbox(); let acceptbutton = new object(); let declinebutton = new object(); let message = this._bundle.getstring("xulschoolhello.friendmessage.label"); let that = this; acceptbutton.label = this._bundle.getstring("xulschoolhello.acceptbutton.label"); acceptbutton.accesskey = this._bundle.getstring("xulschoolhello.acceptbutton.accesskey"); acceptbutton.popup = null; acceptbutto...
...nb.appendnotification( message, "xulschoolhello-friend-notification", "chrome://xulschoolhello/skin/friend-notification.png", nb.priority_info_high, [ acceptbutton, declinebutton ]); all
browser tabs have a notification box by default, so you don't need to do any overlaying.
... the notificationbox elements can be obtained from the g
browser object.
...And 3 more matches
Extensions support in SeaMonkey 2 - Archive of obsolete content
some urls are listed below: url in firefox url in seamonkey overlays chrome://
browser/content/
browser.xul chrome://navigator/content/navigator.xul main
browser window chrome://
browser/content/pageinfo/pageinfo.xul chrome://navigator/content/pageinfo/pageinfo.xul page info window chrome://
browser/content/preferences/permissions.xul chrome://communicator/content/permis...onsmanager.xul permissions manager dialog ...
... urls added in 2.1 url in firefox url in seamonkey chrome://
browser/content/bookmarks/bookmarkspanel.xul chrome://communicator/content/bookmarks/bm-panel.xul chrome://
browser/content/places/places.xul chrome://communicator/content/bookma...rksmanager.xul thunderbird uses mostly the same chrome urls for overlaying as seamonkey.
... the statusbar in firefox 3 a new vbox has been added, called "
browser-bottombox", which encloses the find bar and status bar at the bottom of the
browser window.
...And 3 more matches
Signing an XPI - Archive of obsolete content
warning: performing this operation while the
browser is running could cause corruption of your security databases.
... if the
browser is currently running, you should exit the
browser before continuing this operation.
...ding: meta-inf/zigbert.rsa (deflated 35%) c:\projects\codesigning\signed> zip -r -d fsb.xpi * -x meta-inf/zigbert.rsa adding: meta-inf/manifest.mf (deflated 37%) adding: meta-inf/zigbert.sf (deflated 40%) adding: chrome/fsb.jar (deflated 74%) adding: chrome.manifest (deflated 69%) adding: install.rdf (deflated 62%) test your certificate to test your certificate, install it into your
browser, and attempt to load the signed extension by following these steps: 1.
...And 3 more matches
XUL user interfaces - Archive of obsolete content
you create a simple demonstration that runs in your mozilla
browser.
...for example, xul provides specialized windows like dialogs and wizards, as well as status bars, menus, tool bars, and even
browsers.
...arning") status.setattribute("label", "") } else if (adate === false || isnan(adate.gettime())) { status.setattribute("warning", "true") status.setattribute("label", "date is not valid") } else { status.removeattribute("warning") status.setattribute("label", adate.tolocaledatestring()) } } to see the result exactly as intended, use the default theme in your
browser.
...And 3 more matches
Creating a status bar extension - Archive of obsolete content
next » this is the first in a series of articles that will demonstrate how to create increasingly intricate extensions for the firefox
browser.
...this sample will add a static text string to the status bar at the bottom of firefox
browser windows.
... content status-bar-sample-1 chrome/content/ # firefox overlay chrome://
browser/content/
browser.xul chrome://status-bar-sample-1/content/status-bar-sample-1.xul the first line registers the location on disk of the contents of the extension whose id is "status-bar-sample-1".
...And 3 more matches
List of Former Mozilla-Based Applications - Archive of obsolete content
applications that switched to another technology name description additional information 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 flock switched from being firefox-based to chromium-based when it released a new beta on june 16, 2010 jolicloud web operating s...
...ystem 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 technologies so...
...ftware 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 information 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 doczilla sg...
...And 3 more matches
A XUL Bestiary - Archive of obsolete content
chrome some of the most powerful and frequently misunderstood features of xul and the mozilla
browser have to do with chrome.
...this special option allows you to create and access chromes independent of the mozilla
browser and begins to suggest some possibilities for xul-as-platform beyond the simple restyling of the
browser.
...though this is not yet in the
browser, very soon it will be possible to change the look of a whole application dynamically, but only to the extent that the skin is actually defined in the main global.css, or global skin.
...And 3 more matches
The Chrome URL - Archive of obsolete content
the following url will refer to the bookmarks window, listed for firefox: chrome://
browser/content/bookmarks/bookmarksmanager.xul you can enter chrome urls anywhere normal urls can be used.
... you can even enter them directly into the url bar in a firefox
browser window.
... if you enter the url mentioned above into the
browser's address bar, you should see that window appear like a web page might do and for the most part will function as if it was a separate window.
...And 3 more matches
XUL Questions and Answers - Archive of obsolete content
an example of this is: var tree = document.getelementbyid('treeid'); selectedtreeitem = tree.view.getitematindex(tree.currentindex); selectedtreeitem.firstchild.setattribute('style', 'background: #ff0000'); what is an example of tab
browser in xul?
... using the following code sample, // get
browsers object var
browsers=document.getelementbyid('content').
browsers; var num
browsers=
browsers.length; for (var i=0; num
browsers>i; i++) { var thisuri=
browsers[i].currenturi.spec; // do something with it.
... specifying window.onload function to specify a function to run when the window is loaded,add the following code between the script tags in the xul file: window.addeventlistener("load", function(e) { startup(); }, false); similarly, for onunload use the code: window.addeventlistener("unload", function(e) { shutdown(); }, false); is there an event which is called when the firefox
browser is initialized?
...And 3 more matches
prefwindow - Archive of obsolete content
important note for xulrunner-based applications: the preferences system - part of the toolkit - still relies on two
browser.* preferences.
... the first one is
browser.preferences.instantapply, a boolean preference.
... the second preference is
browser.preferences.animatefadein, again a boolean preference.
...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-platform
browser plugin framework written in c++.
... plugins created with firebreath work on all major
browsers, including firefox 3.0 and later.
...project: nixysa project home page description (from the home page): nixysa is a framework written in python to automatically generate glue code for npapi plugins (plugins for
browsers such as google chrome or firefox), letting you easily expose c++ classes to javascript from a simple idl representation.
...And 3 more matches
NPN_MemAlloc - Archive of obsolete content
« gecko plugin api reference « plug-in side plug-in api summary allocates memory from the
browser's memory space.
... syntax #include <npapi.h> void *npn_memalloc (uint32 size); parameters the function has the following parameters: size size of memory, in bytes, to allocate in the
browser's memory space.
... description the plug-in calls npn_memalloc to allocate a specified amount of memory in the
browser's memory space.
...And 3 more matches
NPN_PluginThreadAsyncCall - Archive of obsolete content
« gecko plugin api reference «
browser side plug-in api summary thread safe way to request that the
browser calls a plug-in function on the
browser or plugin thread (the thread on which the plug-in was initiated).
...the "plug-in thread" is the thread hosting the plug-in, which may be either the
browser's main thread or the plug-in process if the plug-in is being executed out-of-process.
...in particular, the user must ensure that the function pointer remains callable and the user data is not deallocated until the
browser executes the call.
...And 3 more matches
NPP_WriteReady - Archive of obsolete content
description the
browser calls npp_writeready before each call to npp_write to determine whether a plug-in can receive data and how many bytes it can receive.
... this function allows the
browser to send only as much data to the instance as it can handle at one time, making resource use more efficient for both the
browser and plug-in.
...the
browser can write a smaller amount of data if desired or necessary; for example, if only 8k of data is available in a network buffer.
...And 3 more matches
Theme changes in Firefox 4 - Archive of obsolete content
/chrome/
browser/skin contains application-specific skin resource files.
... controlling the actual icon size used by add-on toolbar buttons the iconsize attribute of the
browser's toolbar elements now has a different default value on each toolbar independently.
... the iconsize attribute of the toolbox element in the main
browser window (#navigator-toolbox) still reflects the user preference in the toolbar customization palette.
...And 3 more matches
background-size - Archive of obsolete content
should not the "
browser compatibility" table also list google chrome and konqueror?
...agreed; we should definitely encourage people to look stuff up by engine rather than
browser.
... these tables should be revised over time to list gecko, webkit, internet explorer, and opera, with perhaps a tooltip on each that provides details on which
browsers are encompassed by each.
...And 3 more matches
Index - Game development
new technologies are constantly arriving to make it possible to develop better and more powerful games that can be run in any standards-compliant web
browser.
... 16 building up a basic demo with a-frame 3d, a-frame, vr, virtual reality, web, webgl the webxr and webgl apis already enable us to start creating virtual reality (vr) experiences inside web
browsers, but the community is still waiting for tools and libraries to appear, to make this easier.
... 25 async scripts for asm.js games, javascript, asm.js, async every medium or large game should compile asm.js code as part of an async script to give the
browser the maximum flexibility to optimize the compilation process.
...And 3 more matches
Vendor Prefix - MDN Web Docs Glossary: Definitions of Web-related terms
browser vendors sometimes add prefixes to experimental or nonstandard css properties and javascript apis, so developers can experiment with new ideas while—in theory—preventing their experiments from being relied upon and then breaking web developers' code during the standardization process.
... developers should wait to include the unprefixed property until
browser behavior is standardized.
...
browser vendors are working to stop using vendor prefixes for experimental features.
...And 3 more matches
User agent - MDN Web Docs Glossary: Definitions of Web-related terms
a user agent is a computer program representing a person, for example, a
browser in a web context.
... besides a
browser, a user agent could be a bot scraping webpages, a download manager, or another app accessing the web.
... along with each request they make to the server,
browsers include a self-identifying user-agent http header called a user agent (ua) string.
...And 3 more matches
HTML: A good basis for accessibility - Learn web development
table layouts are a relic of the past — they made sense back when css support was not widespread in
browsers, but now they just create confusion for screen reader users.
... one key aspect of the accessibility of ui controls is that by default,
browsers allow them to be manipulated by the keyboard.
...the focused elements are given a highlighted default style in every
browser (it differs slightly between different
browsers) so that you can tell what element is focused.
...And 3 more matches
HTML: A good basis for accessibility - Learn web development
table layouts are a relic of the past — they made sense back when css support was not widespread in
browsers, but now they just create confusion for screen reader users.
... one key aspect of the accessibility of ui controls is that by default,
browsers allow them to be manipulated by the keyboard.
...the focused elements are given a highlighted default style in every
browser (it differs slightly between different
browsers) so that you can tell what element is focused.
...And 3 more matches
Mobile accessibility - Learn web development
long gone are the days when mobile devices ran completely different web technologies to desktop
browsers, forcing developers to use
browser sniffing and serve them completely separate sites (although quite a few companies still detect usage of mobile devices and serve them a separate mobile domain).
...modern mobile
browsers tend to have good support for wai-aria, too.
... browsing web pages you can use the local context menu while in a web
browser to find options to navigate web pages using just the headings, form controls, or links, or navigate line by line, etc.
...And 3 more matches
Cascade and inheritance - Learn web development
specificity specificity is how the
browser decides which rule applies if multiple rules have different selectors, but could still apply to the same element.
... note: there is also a newer value, revert, which has limited
browser support.
...later ones overrule earlier ones: source order specificity importance we will look at these to see how
browsers figure out exactly what css should be applied.
...And 3 more matches
Getting started with CSS - Learn web development
to link styles.css to index.html add the following line somewhere inside the <head> of the html document: <link rel="stylesheet" href="styles.css"> this <link> element tells the
browser that we have a stylesheet, using the rel attribute, and the location of that stylesheet as the value of the href attribute.
...using your code editor add the following to your css file: h1 { color: red; } save your html and css files and reload the page in a web
browser.
... changing the default behavior of elements when we look at a well-marked up html document, even something as simple as our example, we can see how the
browser is making the html readable by adding some default styling.
...And 3 more matches
Styling links - Learn web development
visited: a link when it has already been visited (exists in the
browser's history), styled using the :visited pseudo class.
...d be able to focus on the links on this page with the keyboard by pressing the tab key (on mac, you'll need to use option + tab, or enable the full keyboard access: all controls option by pressing ctrl + f7.) active links are red (try holding down the mouse button on the link as you click it.) interestingly enough, these default styles are nearly the same as they were back in the early days of
browsers in the mid-1990s.
... } 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; background: #cdfeaa; } a:active { background: #265301; color: #cdfeaa; } we'll also provide some sample html to apply the css to: <p>there are several
browsers available, such as <a href="#">mozilla firefox</a>, <a href="#">google chrome</a>, and <a href="#">microsoft edge</a>.</p> putting the two together gives us this result: so what did we do here?
...And 3 more matches
Sending forms through JavaScript - Learn web development
gaining control of the global interface standard html form submission, as described in the previous article, loads the url where the data was sent, which means the
browser window navigates with a full page load.
... if you control the front-end (the code that's executed in the
browser) and the back-end (the code which is executed on the server), you can send json/xml and process them however you want.
... for( name in data ) { urlencodeddatapairs.push( encodeuricomponent( name ) + '=' + encodeuricomponent( data[name] ) ); } // combine the pairs into a single string and replace all %-encoded spaces to // the '+' character; matches the behaviour of
browser form submissions.
...And 3 more matches
Advanced text formatting - Learn web development
this is usually a feeling, thought, or piece of additional background information.</dd> </dl> the
browser default styles will display description lists with the descriptions indented somewhat from the terms.
...s that the enclosed text is an extended quotation.</p> to turn this into a block quote, we would just do this: <p>here below is a blockquote...</p> <blockquote cite="/docs/web/html/element/blockquote"> <p>the <strong>html <code><blockquote></code> element</strong> (or <em>html block quotation element</em>) indicates that the enclosed text is an extended quotation.</p> </blockquote>
browser default styling will render this as an indented paragraph, as an indicator that it is a quote; the paragraph above the quotation is there to demonstrate that.
...for example, the below bit of markup contains a quotation from the mdn <q> page: <p>the quote element — <code><q></code> — is <q cite="/docs/web/html/element/q">intended for short quotations that don't require paragraph breaks.</q></p>
browser default styling will render this as normal text put in quotes to indicate a quotation, like so: citations the content of the cite attribute sounds useful, but unfortunately
browsers, screenreaders, etc.
...And 3 more matches
Creating hyperlinks - Learn web development
almost any web content can be converted to a link so that when clicked or otherwise activated the web
browser goes to another web address (url).
...if the web
browser doesn't know how to display or handle the file, it will ask you if you want to open the file (in which case the duty of opening or handling the file is passed to a suitable native app on the device) or download the file (in which case you can try to deal with it later on).
...when you use an absolute url, the
browser starts by looking up the real location of the server on the domain name system (dns), see how the web works for more information).
...And 3 more matches
HTML text fundamentals - Learn web development
previous overview: introduction to html next one of html's main jobs is to give text structure and meaning (also known as semantics) so that a
browser can display it correctly.
... however, when you open the document in your
browser, you'll see that the text appears as a big chunk!
... this is because there are no elements to give the content structure, so the
browser does not know what is a heading and what is a paragraph.
...And 3 more matches
Making asynchronous programming easier with async and await - Learn web development
try typing the following lines into your
browser's js console: function hello() { return "hello" }; hello(); the function returns "hello" — nothing special, right?
...bye for now!`); }; } let han = new person('han', 'solo', 25, 'male', ['smuggling']); the first class method could now be used something like this: han.greeting().then(console.log);
browser support one consideration when deciding whether to use async/await is support for older
browsers.
... they are available in modern versions of most
browsers, the same as promises; the main support problems come with internet explorer and opera mini.
...And 3 more matches
Graceful asynchronous programming with Promises - Learn web development
since the call to getusermedia() is made from the
browser's main thread, the entire
browser is blocked until getusermedia() returns!
... obviously, that's not an acceptable option; without promises, everything in the
browser becomes unusable until the user decides what to do about the camera and microphone.
... if you save the html file you've just created and load it in your
browser, you'll see that the image is displayed in the page as expected.
...And 3 more matches
Build your own function - Learn web development
it will display a custom message box on a web page and will act as a customized replacement for a
browser's built-in alert() function.
...type the following in your
browser's javascript console, on any page you like: alert('this is a message'); the alert function takes a single argument — the string that is displayed in the alert box.
... note: this example should work in all modern
browsers fine, but the styling might look a bit funny in slightly older
browsers.
...And 3 more matches
Looping code - Learn web development
width and height are the width and height of the inner
browser window.
... when i becomes equal to cats.length (in this case, 5), the loop will stop, and the
browser will move on to the next bit of code below the loop.
...if not, the loop will go on forever, and either the
browser will force it to stop, or it will crash.
...And 3 more matches
Third-party APIs - Learn web development
previous overview: client-side web apis next the apis we've covered so far are built into the
browser, but not all apis are.
...this article looks at the difference between
browser apis and 3rd party apis and shows some typical uses of the latter.
... let's look at a simple mapquest api example, and use it to illustrate how third-party apis differ from
browser apis.
...And 3 more matches
What went wrong? Troubleshooting JavaScript - Learn web development
to get started, open the local copy inside your favorite text editor, and your
browser.
... fixing syntax errors earlier on in the course we got you to type some simple javascript commands into the developer tools javascript console (if you can't remember how to open this in your
browser, follow the previous link to find out how).
... what's even more useful is that the console gives you error messages whenever a syntax error exists inside the javascript being fed into the
browser's javascript engine.
...And 3 more matches
Object-oriented JavaScript for beginners - Learn web development
i\'m ' + obj.name + '.'); }; return obj; } you can now create a new person by calling this function — try the following lines in your
browser's javascript console: const salva = createnewperson('salva'); salva.name; salva.greeting(); this works well enough, but it is a bit long-winded; if we know we want to create an object, why do we need to explicitly create a new empty object and return it?
... add the following lines below your previous code addition: let person1 = new person('bob'); let person2 = new person('sarah'); save your code and reload it in the
browser, and try entering the following lines into your js console: person1.name person1.greeting() person2.name person2.greeting() cool!
... let's look at the constructor calls again: let person1 = new person('bob'); let person2 = new person('sarah'); in each case, the new keyword is used to tell the
browser we want to create a new object instance, followed by the function name with its required parameters contained in parentheses, and the result is stored in a variable — very similar to how a standard function is called.
...And 3 more matches
What is web performance? - Learn web development
how content is rendered to effectively understand web performance, the issues behind it, and the major topic areas we mentioned above, you really should understand some specifics about how
browsers work.
... this includes: how the
browser works.
... when you request a url and hit enter / return, the
browser finds out where the server is that holds that website's files, establishes a connection to it, and requests the files.
...And 3 more matches
Multimedia: video - Learn web development
objective: to learn about the various video formats, their impact on performance, 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.
...essions in three different formats at 10mb, 12mb, and 13mb, declare the smallest first and the largest last: <video width="400" height="300" controls="controls"> <!-- webm: 10 mb --> <source src="video.webm" type="video/webm" /> <!-- mpeg-4/h.264: 12 mb --> <source src="video.mp4" type="video/mp4" /> <!-- ogg/theora: 13 mb --> <source src="video.ogv" type="video/ogv" /> </video> the
browser downloads the first format it understands.
... see caniuse.com for current
browser support of video and other media types.
...And 3 more matches
Multiple Firefox profiles
available
browser development channels there are four available
browser channels, each at a different level of stability and development.
... mac os x multifirefox by dave martorana profile management determining the profile while firefox is running to determine the profile of a currently-running firefox instance in windows, macos or linux, type about:profiles into the
browser url search bar.
... from profile manager inside firefox if you already have firefox instance running, you can open another profile from the integrated profile manager on any platform: type about:profiles into the
browser url search bar.
...And 3 more matches
Communicating with frame scripts
target the xul <
browser> element from which this message was sent.
...essage) { console.log(message.name); console.log(message.sync); console.log(message.data); console.log(message.target); console.log(message.objects); } so combining this message listener with the message above will give console output somewhat like this, when the user clicks a <div>: "my-addon@me.org:my-e10s-extension-message" false object { details: "they clicked", tag: "div" } <xul:
browser anonid="initial
browser" ...
...an xpcom component), you can access the window of the
browser that sent the message with message.target.ownerdocument.defaultview.
...And 3 more matches
Localization Use Cases
declensions in gaia's
browser app, there's an about-
browser string defined as follows in apps/
browser/locales/
browser: about-
browser=about {{
browserbrandshortname}} problem definition in many inflected languages (e.g.
... in slovenian, the ideal string would inflect the noun, like so: o firefoxu however, since we want the name of the
browser to be stored in the
browserbrandshortname entity, we can't modify it.
...
browser, to give about the firefox
browser.
...And 3 more matches
JSAPI User Guide
javascript is widely used for client-side scripts that run in the
browser.
... but mozilla's javascript engine is a library that can be linked into any c++ program, not just a
browser.
...
browsers expose dom objects.
...And 3 more matches
Avoiding leaks in JavaScript XPCOM components
the worst example of this problem is tab
browser.
... tab
browser is an xbl binding that wraps
browsers in tabs, creating and destroying them as needed.
... but the
browsers are themselves xbl bindings, and much of the memory associated with the page displayed in the tab is reachable from the javascript properties of the
browser element.
...And 3 more matches
nsIIOService
for loads that are not related to any document, such as loads coming from addons or internal
browser features, use null here.
...for loads from an addon or from internal
browser features, pass the system principal.
... for loads that are not related to any document, such as loads coming from addons or internal
browser features, use null here.
...And 3 more matches
nsIXPConnect
although it may still work in some
browsers, its use is discouraged since it could be removed at any time.
...although it may still work in some
browsers, its use is discouraged since it could be removed at any time.
...although it may still work in some
browsers, its use is discouraged since it could be removed at any time.
...And 3 more matches
nsIXULWindow
oolean ascreen, in boolean aalert); nsixulwindow createnewwindow(in print32 achromeflags, in nsiappshell aappshell); nsidocshelltreeitem getcontentshellbyid(in wstring id); void removechildwindow(in nsixulwindow achild); void showmodal(); attributes attribute type description chromeflags pruint32 chromeflags are from nsiweb
browserchrome.
...it could be an editor, a docshell, or a
browser object.
... xul
browserwindow nsixul
browserwindow provides access to the xul
browserwindow object offering a way for the
browser to update the user interface of the enclosing xul window.
...And 3 more matches
Working with data
// lets create an array of long's var my = ctypes.long.array()([1, 2, 3, 4]); my.tostring(); // this outputs to
browser console: `"ctypes.long.array(4)([ctypes.int64("1"), ctypes.int64("2"), ctypes.int64("3"), ctypes.int64("4")])"` my.addressofelement(1).contents; // this outputs `int64 { }` my.addressofelement(1).contents.tostring(); // outputs: `"2"` // now this is how to get the array of long's cast to array of int's var mycasted = ctypes.cast(my.address(), ctypes.int.array(my.length).ptr).contents; mycasted.
...tostring(); // this outputs to
browser console: `"ctypes.int.array(4)([1, 2, 3, 4])"` mycasted.addressofelement(1).contents; // this outputs `2` mycasted.addressofelement(1).contents.tostring(); // outputs: `"2"` source of this, and to see wrong ways of casting, and explanation on why this is the right way to cast an array (explained by matching constructor's) see here: githubgist :: _ff-addon-tutorial-jsctypes_castingarrays data and pointers a cdata object represents a c value in memory.
... as review, making a null-terminated string happens like this: var cstr_nullterminated = ctypes.jschar.array()('rawr'); console.log(cstr_nullterminated); // outputs to
browserconsole: `cdata { length: 5 }` console.log(cstr_nullterminated.tostring()); // outputs to
browser console: `"ctypes.char16_t.array(5)(["r", "a", "w", "r", "\x00"])"` the console.log shows that the length is greater then the length of "rawr" which is 4, doing a .tostring on it shows there is a null terminator of \x00 on the end.
...And 3 more matches
Accessibility Inspector - Firefox Developer Tools
here we are mainly talking about exposing information to people with visual disabilities — this is done via the accessibility apis available inside web
browsers, which expose information on what roles the different elements on your page play (e.g., are they just text, or are they buttons, links, form elements, etc.?).
... roles and other information exposed by
browser accessibility apis are presented in a hierarchical structure called the accessibility tree.
... accessing the accessibility inspector when you first open any of the other developer tools, the accessibility features are turned off (unless you've already got them turned on in another
browser tab, or got the firefox accessibility engine started already, e.g., you might be a screenreader user or tester).
...And 3 more matches
DOM Inspector internals - Firefox Developer Tools
this comparison turns out to be quite apt, since each panel actually contains an anonymous
browser, and individual viewers exist in separate documents loaded in the
browser.
...its contents should resemble the following: extensions/ … jsutil/ … prefs/ … res/ … tests/ … viewers/ …
browseroverlay.xul commandoverlay.xul editingoverlay.xul flasher.js hooks.js inspector.css inspector.js inspectoroverlay.xul inspector.xml inspector.xul keysetoverlay.xul object.js object.xul popupoverlay.xul sidebar.js sidebar.xul statusbaroverlay.xul tasksoverlay-cz.xul tasksoverlay-ff.xul tasksoverlay-mobile.xul tasksoverlay-sb.xul tasksoverlay-tb.xul tasksoverlay.xul toolboxove...
...these overlays are:
browseroverlay.xul tasksoverlay-cz.xul tasksoverlay-ff.xul tasksoverlay-mobile.xul tasksoverlay-sb.xul tasksoverlay-tb.xul tasksoverlay.xul venkmanoverlay.xul prefs/prefsoverlay.xul further examination of the chrome manifest will reveal that dom inspector also uses conditional overlays on its primary window: overlay chrome://inspector/content/inspector.xul chrome://communicator/content/utility...
...And 3 more matches
DOMHighResTimeStamp - Web APIs
however, if the
browser is unable to provide a time value accurate to 5 µs (due, for example, to hardware or software constraints), the
browser can represent the value as a time in milliseconds accurate to a millisecond.
... also note the section below on reduced time precision controlled by
browser preferences to avoid timing attacks and fingerprinting.
... reduced time precision to offer protection against timing attacks and fingerprinting, the precision of time stamps might get rounded depending on
browser settings.
...And 3 more matches
Document.registerElement() - Web APIs
the document.registerelement() method registers a new custom element in the
browser and returns a constructor for the new element.
...the
browser you use it in must support web components.
... example here is a very simple example: var mytag = document.registerelement('my-tag'); now the new tag is registered in the
browser.
...And 3 more matches
Document.requestStorageAccess() - Web APIs
if the
browser is not processing a user gesture, reject.
... check any additional rules that the
browser has.
... the ephemeral storage access grant is: invalidated at the end of the
browser session.
...And 3 more matches
Element - Web APIs
element.requestfullscreen() asynchronously asks the
browser to make the element full-screen.
... cancel fires on a <dialog> when the user instructs the
browser that they wish to dismiss the current open dialog.
... for example, the
browser might fire this event when the user presses the esc key or clicks a "close dialog" button which is part of the
browser's ui.
...And 3 more matches
FetchEvent - Web APIs
the
browser creates these objects itself and provides them to fetch event callbacks.
... fetchevent.request read only the request the
browser intends to make.
... fetchevent.respondwith() prevent the
browser's default fetch handling, and provide (a promise for) a response yourself.
...And 3 more matches
FileSystemDirectoryReader - Web APIs
because this is a non-standard api, whose specification is not currently on a standards track, it's important to keep in mind that not all
browsers implement it, and those that do may implement only small portions of it.
... check the
browser compatibility section for details.
...
browser compatibility the compatibility table on this page is generated from structured data.
...And 3 more matches
FontFace.display - Web APIs
(see below.) block period the
browser invisibly prepares a fallback font.
...the spec recommends 3 seconds for the block period, though this may vary from
browser to
browser.
...the spec recommends 100 ms or less for the block period and 3 seconds for the swap period, though these values may vary from
browser to
browser.
...And 3 more matches
Frame Timing API - Web APIs
the performanceframetiming interface provides frame timing data about the
browser's event loop.
... a frame represents the amount of work a
browser does in one event loop iteration such as processing dom events, resizing, scrolling, rendering, css animations, etc.
...this means the
browser should process a frame in about 16.7 ms.
...And 3 more matches
HTMLMediaElement.srcObject - Web APIs
until other
browsers catch up, for mediasource, blob and file, consider falling back to creating a url with url.createobjecturl() and assign it to htmlmediaelement.src.
... const mediasource = new mediasource(); const video = document.createelement('video'); video.srcobject = mediasource; supporting fallback to the src property the examples below support older
browser versions that require you to create an object url and assign it to src if srcobject isn't supported.
... first, a mediastream from a camera is assigned to a newly-created <video> element, with fallback for older
browsers.
...And 3 more matches
IDBVersionChangeEvent.version - Web APIs
warning: while this property is still implemented in older
browsers, the latest specification replaces it with the oldversion and newversion attributes.
... see the compatibility table to know what
browsers support them.
...
browser compatibility the compatibility table on this page is generated from structured data.
...And 3 more matches
IDBVersionChangeRequest.setVersion() - Web APIs
for older webkit
browsers, call this method before creating or deleting an object store.
...some not up-to-date
browsers still implement this method.
...
browser compatibility the compatibility table on this page is generated from structured data.
...And 3 more matches
Intersection Observer API - Web APIs
historically, detecting visibility of an element, or the relative visibility of two elements in relation to each other, has been a difficult task for which solutions have been unreliable and prone to causing the
browser and the sites the user is accessing to become sluggish.
...as the user scrolls the page, these intersection detection routines are firing constantly during the scroll handling code, resulting in an experience that leaves the user frustrated with the
browser, the web site, and their computer.
...this way, sites no longer need to do anything on the main thread to watch for this kind of element intersection, and the
browser is free to optimize the management of intersections as it sees fit.
...And 3 more matches
Using the Media Capabilities API - Web APIs
these features include: the ability to query the
browser to determine its ability to encode or decode media given a specified set of encoding parameters.
...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.
... note: the display capabilities functionality mentioned in the third point above have not yet appeared in any
browser.
...And 3 more matches
Web-based protocol handlers - Web APIs
when the link is activated, the
browser should launch the default desktop application for handling email.
...basically, the web application uses registerprotocolhandler() to register itself with the
browser as a potential handler for a given protocol.
... when a
browser executes this code, it should display a prompt to the user, asking permission to allow the web application to register as a handler for the protocol.
...And 3 more matches
NavigatorID.appVersion - Web APIs
returns either "4.0" or a string representing version information about the
browser.
... note: do not rely on this property to return the correct
browser version.
... syntax window.navigator.appversion value either "4.0" or a string representing version information about the
browser.
...And 3 more matches
Permissions - Web APIs
this is not currently supported in any
browser.
...this is not currently supported in any
browser.
...
browser support the compatibility table on this page is generated from structured data.
...And 3 more matches
Pointer Lock API - Web APIs
pointer lock lets you access mouse events even when the cursor goes past the boundary of the
browser or screen.
...without pointer lock, the rotation or manipulation stops the moment the pointer reaches the edge of the
browser or screen.
... it is not limited by
browser or screen boundaries.
...And 3 more matches
RTCRtpReceiver.getCapabilities() static function - Web APIs
all
browsers support the primary media kinds: audio and video.
... return value an rtcrtpcapabilities object stating what capabilities the
browser has for receiving the specified media kind over an rtcpeerconnection.
... if the
browser doesn't have any support for the given media kind, the returned value is null.
...And 3 more matches
RTCRtpSender.getCapabilities() static function - Web APIs
all
browsers support the primary media kinds: audio and video.
... return value an rtcrtpcapabilities object stating what capabilities the
browser has for sending the specified media kind over an rtcpeerconnection.
... if the
browser doesn't have any support for the given media kind, the returned value is null.
...And 3 more matches
Resource Timing API - Web APIs
however, if the
browser is unable to provide a time value accurate to 5 µs (because, for example, due to hardware or software constraints), the
browser can represent a the value as a time in milliseconds accurate to a millisecond.
...the last three timestamps are, in order: requeststart - the timestamp before the
browser starts requesting the resource from the server; responsestart - the timestamp after the
browser receives the first byte of the response from the server; and responseend - the timestamp after the
browser receives the last byte of the resource.
...the clearresourcetimings() method removes all "resource" type performance entries from the
browser's resource performance entry buffer.
...And 3 more matches
TextRange - Web APIs
although it is well supported by ie, most other
browsers no longer support this property.
... this property should only be used as one of the solutions when you need to be compatible with lower versions of ie, rather than relying on it completely in cross
browser scripts.
... note that this interface is not supported in non ie
browsers.
...And 3 more matches
Signaling and video calling - Web APIs
the exact process will vary, of course, but in general there are a few key points at which signaling messages get handled: the signaling process involves this exchange of messages among a number of points: each user's client running within a web
browser each user's web
browser the signaling server the web server hosting the chat service imagine that naomi and priya are engaged in a discussion using the chat software, and naomi decides to open a video call between the two.
...you can learn more about the codecs which webrtc requires
browsers to support, which additional codecs are supported by which
browsers, and how to choose the best codecs to use in the guide codecs used by webrtc.
... starting negotiation once the caller has created its rtcpeerconnection, created a media stream, and added its tracks to the connection as shown in starting a call, the
browser will deliver a negotiationneeded event to the rtcpeerconnection to indicate that it's ready to begin negotiation with the other peer.
...And 3 more matches
Lighting a WebXR setting - Web APIs
but
browsers are required to take a number of steps to make it difficult to physically locate the user without their consent.
... how
browsers mitigate these issues in order to help mitigate these risks,
browsers are required by the webxr lighting estimation api specification to report lighting information that is fudged somewhat from the true value.
... spherical harmonics precision
browsers can mitigate the risk of fingerprinting by reducing the precision of spherical harmonics.
...And 3 more matches
Movement, orientation, and motion: A WebXR example - Web APIs
by importing this polyfill, we allow the example to work on many
browsers that don't yet have webxr implementations in place, and we smooth out any transient deviations from the specification that occur during these still somewhat experimental days of the webxr specification.
... options this example has a number of options you can configure by adjusting the values of constants before you load it in the
browser.
... enableforcepolyfill if this boolean is true, the example will attempt to use the webxr polyfill even if the
browser actually has support for webxr.
...And 3 more matches
Using the Web Animations API - Web APIs
meet the web animations api the web animations api opens the
browser’s animation engine to developers and manipulation by javascript.
...it is one of the most performant ways to animate on the web, letting the
browser make its own internal optimizations without hacks, coercion, or window.requestanimationframe().
...
browser support the basic web animations api features discussed in this article are available by default in firefox 48+ and chrome 36+.
...And 3 more matches
Web Animations API Concepts - Web APIs
the web animations api (waapi) provides javascript developers access to the
browser’s animation engine and describes how animations should be implemented across
browsers.
...back then it was the only animation engine
browsers had to worry about.
... while four out of five
browsers supported smil, it only animated svg elements, could not be used from css, and was very complex — often leading to inconsistent implementations.
...And 3 more matches
Web Storage API - Web APIs
the web storage api provides mechanisms by which
browsers can store key/value pairs, in a much more intuitive fashion than using cookies.
... web storage concepts and usage the two mechanisms within web storage are as follows: sessionstorage maintains a separate storage area for each given origin that's available for the duration of the page session (as long as the
browser is open, including page reloads and restores) stores data only for a session, meaning that the data is stored until the
browser (or tab) is closed.
... localstorage does the same thing, but persists even when the
browser is closed and reopened.
...And 3 more matches
Window: popstate event - Web APIs
the popstate event will be triggered by doing a
browser action such as a click on the back or forward button (or calling history.back() or history.forward() in javascript).
...
browsers tend to handle the popstate event differently on page load.
...if the goal is to catch the moment when the new document state is already fully in place, a zero-delay settimeout() method call should be used to effectively put its inner callback function that does the processing at the end of the
browser event loop: window.onpopstate = () => settimeout(dosomething, 0); when popstate is sent when the transition occurs, either due to the user triggering the
browser's "back" button or otherwise, the popstate event is near the end of the process to transition to the new location.
...And 3 more matches
Using XMLHttpRequest - Web APIs
a little vanilla framework all these effects are done automatically by the web
browser whenever you submit a <form>.
...if you do not need to upload binary files, this framework works fine in most
browsers.
... cross-site xmlhttprequest modern
browsers support cross-site requests by implementing the cross-origin resource sharing (cors) standard.
...And 3 more matches
Relationship of flexbox to other layout methods - CSS: Cascading Style Sheets
until
browsers implement the gap properties for flexbox, margins have to be used to create gaps between items.
...you can see more information on
browser support in the mdn documentation for writing-mode.
...you might however want to use flexbox as a fallback for grid layout, as there is better support for flexbox in older
browsers.
...And 3 more matches
Basic Concepts of grid layout - CSS: Cascading Style Sheets
in a web
browser, you won’t see any difference to how these items are displayed before turning them into a grid, as grid has created a single column grid for the items.
...click this and then the grid on this element will be overlaid in the
browser window.
... .wrapper { display: grid; grid-template-columns: repeat(3, 1fr); column-gap: 10px; row-gap: 1em; } note: when grid first shipped in
browsers the column-gap, row-gap and gap were prefixed with the grid- prefix as grid-column-gap, grid-row-gap and grid-gap respectively.
...And 3 more matches
WebKit CSS extensions - CSS: Cascading Style Sheets
old prefixed syntax is still supported in some
browsers.
...xt-justify -webkit-text-orientation -webkit-text-size-adjust -webkit-text-underline-position -webkit-transform -webkit-transform-origin -webkit-transform-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 without a prefix, but are not on the standards track.
... deprecated -webkit- properties the following properties were once supported with the -webkit- prefix but are no longer supported in evergreen
browsers, with or without the -webkit- prefix.
...And 3 more matches
color-adjust - CSS: Cascading Style Sheets
by default, the
browser is allowed to make any adjustments to the element's appearance it determines to be necessary and prudent given the type and capabilities of the output device.
...for example, when printing, a
browser might opt to leave out all background images and to adjust text colors to be sure the contrast is optimized for reading on white paper.
... exact the element's content has been specifically and carefully crafted to use colors, images, and styles in a thoughtful and/or important way, such that being altered by the
browser might actually make things worse rather than better.
...And 3 more matches
font-size - CSS: Cascading Style Sheets
this is an os-independent and cross-
browser way of literally telling the
browsers to render the letters at exactly the number of pixels in height that you specified.
... the results may vary slightly across
browsers, as they may use different algorithms to achieve a similar effect.
... note: defining font sizes in px is not accessible, because the user cannot change the font size in some
browsers.
...And 3 more matches
HTML attribute reference - HTML: Hypertext Markup Language
autocapitalize global attribute sets whether input is automatically capitalized when entered by user autocomplete <form>, <input>, <select>, <textarea> indicates whether controls in this form can by default have their values automatically completed by the
browser.
... note: although
browsers and email clients may still support this attribute, it is obsolete.
... controls <audio>, <video> indicates whether the
browser should show playback controls to the user.
...And 3 more matches
SameSite cookies - HTTP
this is the default value in modern
browsers.
... none used to be the default value, but recent
browser versions made lax the default value to have reasonably robust defense against some classes of cross-site request forgery (csrf) attacks.
... none requires the secure attribute in latest
browser versions.
...And 3 more matches
X-XSS-Protection - HTTP
although these protections are largely unnecessary in modern
browsers when sites implement a strong content-security-policy that disables the use of inline javascript ('unsafe-inline'), they can still provide protections for users of older web
browsers that don't yet support csp.
... chrome has removed their xss auditor firefox have not, and will not implement x-xss-protection edge have retired their xss filter this means that if you do not need to support legacy
browsers, it is recommended that you use content-security-policy without allowing unsafe-inline scripts instead.
... 1 enables xss filtering (usually default in
browsers).
...And 3 more matches
JavaScript technologies overview - JavaScript
however, the umbrella term "javascript" as understood in a web
browser context contains several very different elements.
... this core language is also used in non-
browser environments, for example in node.js.
...in a
browser, this global object is the window object, but ecmascript only defines the apis not specific to
browsers, e.g.
...And 3 more matches
Proxy - JavaScript
const target = {}; const p = new proxy(target, {}); p.a = 37; // operation forwarded to the target console.log(target.a); // 37 // (the operation has been properly forwarded!) note that while this "no-op" works for javascript objects, it does not work for native
browser objects like dom elements.
...the object also supports an extra property called latest
browser both as a getter and a setter.
... let products = new proxy({
browsers: ['internet explorer', 'netscape'] }, { get: function(obj, prop) { // an extra property if (prop === 'latest
browser') { return obj.
browsers[obj.
browsers.length - 1]; } // the default behavior to return the value return obj[prop]; }, set: function(obj, prop, value) { // an extra property if (prop === 'latest
browser') { obj.
browsers.push(value); return true; } // convert the value if it is not an array if (typeof value === 'string') { value = [value]; } // the default behavior to store the value obj[prop] = value; // indicate success return true; } }); console.log(products.
browsers); // ['internet explorer', 'netscape'] products.
browsers = 'firefox'; // pass a ...
...And 3 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 <searchform> element.
... <opensearchdescription xmlns="http://a9.com/-/spec/opensearch/1.1/" xmlns:moz="http://www.mozilla.org/2006/
browser/search/"> <shortname>[snk]</shortname> <description>[search engine full name and summary]</description> <inputencoding>[utf-8]</inputencoding> <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… --> <para...
...And 3 more matches
SVG Presentation Attributes - SVG: Scalable Vector Graphics
value: auto|srgb|linearrgb|<name>|<iri>|inherit; animatable: yes color-rendering it provides a hint to the
browser about how to optimize its color interpolation and compositing operations.
... value: auto|text-bottom|alphabetic|ideographic|middle|central| mathematical|hanging|text-top; animatable: yes enable-background deprecated since svg 2 it tells the
browser how to manage the accumulation of the background image.
... value: auto|<angle>|inherit; animatable: no image-rendering it provides a hint to the
browser about how to make speed vs.
...And 3 more matches
Web security
redirection with 301 and 302 response codes to be written data security using http cookies an http cookie (web cookie,
browser cookie) is a small piece of data that a server sends to the user's web
browser.
... the
browser may store it and send it back with later requests to the same server.
... typically, it's used to tell if two requests came from the same
browser — keeping a user logged-in, for example.
...And 3 more matches
Tutorials
mdn html element reference a comprehensive reference for html elements, and how the different
browsers support them.
... css reference complete reference to css, with details on support by firefox and other
browsers.
... fluid grids design layouts that fluidly resize with the
browser window, while still using a typographic grid.
...And 3 more matches
Compiling a New C/C++ Module to WebAssembly - WebAssembly
creating html and javascript this is the simplest case we'll look at, whereby you get emscripten to generate everything you need to run your code, as webassembly, in the
browser.
... at this point in your source directory you should have: the binary wasm module code (hello.wasm) a javascript file containing glue code to translate between the native c functions, and javascript/wasm (hello.js) an html file to load, compile, and instantiate your wasm code, and display its output in the
browser (hello.html) running your example now all that remains is for you to load the resulting hello.html in a
browser that supports webassembly.
... if everything has worked as planned, you should see "hello world" output in the emscripten console appearing on the web page, and your
browser’s javascript console.
...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 performance and provides languages such as c/c++, c# and rust with a compilation target so that they can run on the web.
... and what's even better is that it is being developed as a web standard via the w3c webassembly working group and community group with active participation from all major
browser vendors.
...this is the low-level textual representation of a .wasm module shown in
browser developer tools when debugging.
...And 3 more matches
Sidebar - Archive of obsolete content
opening and closing the sidebar firefox provides a built-in sidebarui object function defined in
browser-sidebar.js.
... this means that the function is available in all
browser windows.
...to open a page in the "viewwebpanelssidebar" from chrome code (
browser/addon/extension) such as from menuitem, it can call: openwebpanel(atitle, auri); accessing the sidebar from a
browser.xul script the sidebar content is always in a document separate from the main
browser document (the sidebar is actually implemented as a xul
browser element).
...And 2 more matches
Displaying web content in an extension without security issues - Archive of obsolete content
the issue that is commonly overlooked here is that the rss feed could contain some malicious javascript code and it would then execute with the privileges of the extension — meaning that it would get full access to the
browser (cookies, history etc) and to user’s files.
...however, if the document is loaded into <iframe type="content"> or <
browser type="content">, it will be considered a content document, and so will be all the frames it loads (the "type" attribute is ignored at that point).
...if you open "chrome://foo/content/foo.xul" in the
browser, it will open as a content document despite having extended privileges.
...And 2 more matches
Chapter 1: Introduction to Extensions - Archive of obsolete content
perhaps the first time you looked at firefox, you may have been surprised to see that it has a much simpler structure than other full-featured
browsers, such as opera or safari.
... what features are considered standard for web
browsers these days?
...but we didn't set out to create an all-in-one
browser that can satisfy everyone.
...And 2 more matches
Adding Events and Commands - Archive of obsolete content
window.addeventlistener( "load", function() { xulschoolchrome.
browseroverlay.init(); }, false); you can do something similar with the onunload event, to do any cleanup you may need.
... another way to attach event handlers, just like html, is to place the handler in the xul code: <overlay id="xulschoolhello-
browser-overlay" onload="xulschoolchrome.
browseroverlay.init();" xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"> we prefer the first method because it keeps a better separation of content and behavior.
...for example: <button label="&xulschoolhello.defaultgreeting.label;" oncommand="xulschoolchrome.
browseroverlay.changegreeting(event);" /> then on the javascript code you would have something like this: changegreeting : function(aevent) { // more stuff aevent.target.setattribute("label", somenewgreeting); } the target in this example is the button element, so clicking on it will change its text.
...And 2 more matches
JavaScript Object Management - Archive of obsolete content
/** * controls the
browser overlay for the hello world extension.
... */ 〈namespace〉.
browseroverlay = { /** * initializes this object.
... } // more stuff }; window.addeventlistener( "load", function() { 〈namespace〉.
browseroverlay.init(); }, false); there are some things you can't (or shouldn't) do inside load handlers, such as closing the window being loaded, or opening new windows, alerts or dialogs.
...And 2 more matches
Observer Notifications - Archive of obsolete content
in a chrome
browser overlay file, we register an observer to listen to the notification topic "xulschoolhello-test-topic" when the window loads.
...therefore, the registered observer is unregistered when the
browser window is unloaded.
... /** * controls the
browser overlay for the hello world extension.
...And 2 more matches
Security best practices in extensions - Archive of obsolete content
web content handling in general the best way to ensure that the
browser is not compromised when you load content is to make sure it does not have those privileges.
...for pages coming from the server, you need to take steps to ensure that the content can not call back into the web
browser and run malicious code.
... the main way to do this is by creating an iframe or
browser element in the sidebar, and loading your content there.
...And 2 more matches
Updating addons broken by private browsing changes - Archive of obsolete content
if your code refers to any of the following interfaces: ff 15: nsidomstoragemanager ff 16: nsitransferable ff 18: imgicache moziasyncfavicons nsifaviconservice nsiweb
browserpersist ff 19: nsicontentprefservice nsidownloadmanager nsidownload nsihttpauthmanager nsistricttransportsecurityservice ff 20: nsiprivatebrowsingservice nsirecentbadcertservice furthermore, if your code uses any of these common chrome apis: ff 19: saveurl saveinternal openlinkin ff 20: open
browserwindow gprivatebrowsingui finally, if your code watches for any of these observer notificatio...
...ns: private-browsing private-browsing-cancel-vote private-browsing-change-granted private-browsing-transition-complete then your addon will require updating to correctly support the new per-window private
browser feature in firefox 20 (and will require updating to work correctly in releases of firefox since the ones listed).
... nsiweb
browserpersist: saveuri gained a new argument; see the nsiweb
browserpersist docs for more information.
...And 2 more matches
Search Extension Tutorial (Draft) - Archive of obsolete content
pref("
browser.search.defaultenginename", "data:text/plain,
browser.search.defaultenginename=example engine"); in the case or restartless extensions, the preferences need to be changed manually, and reverted when the extension is disabled if they have not been changed in the meantime.
... setpref("
browser.search.defaultenginename", "example engine", true); } function shutdown(data, reason) { // no need to do this if this is app shutdown.
...search.xml <?xml version="1.0" encoding="utf-8"?> <searchplugin xmlns="http://www.mozilla.org/2006/
browser/search/"> <shortname>example engine</shortname> <description>example search engine</description> <inputencoding>utf-8</inputencoding> <image width="16" height="16" type="image/png">data:image/png;base64, ...
...And 2 more matches
Underscores in class and ID Names - Archive of obsolete content
note:
browser support for underscores in css has greatly improved since this article was originally published in 2001 and the following recommendation is no longer accurate for most circumstances.
... summary: the use of the underscore character in css can lead to major display problems in multiple
browsers.
... 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.
...And 2 more matches
Creating a Firefox sidebar extension - Archive of obsolete content
see the references section for information on creating extension in earlier
browsers.
...chrome/content/emptysidebar.xul <?xml version="1.0"?> <?xml-stylesheet href="chrome://global/skin/" type="text/css" ?> <?xml-stylesheet href="chrome://
browser/skin/
browser.css" type="text/css" ?> <!doctype page system "chrome://emptysidebar/locale/emptysidebar.dtd"> <page id="sbemptysidebar" title="&emptysidebar.title;" xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul" > <vbox flex="1"> <label id="atest" value="&emptysidebar.title;" /> </vbox> </page> new extensions can be registered in the menus or popups, fire...
...the manifest also tells firefox that the extension has an overlay that needs to be merged into the
browser.
...And 2 more matches
Getting Started - Archive of obsolete content
you can use the same version as the one you use to browse the web, but if you mess it up, it is possible that you will be unable to access your
browser without uninstalling and reinstalling mozilla.
...they contain the images/styles for the
browser, email client, or html editor.
... css files the css files in these directories tell the
browser how to display the buttons and other controls, where to put the images, what border and padding it should put around them, etc.
...And 2 more matches
Remotely debugging Firefox for Metro - Archive of obsolete content
if you're using a version of firefox older than 27, you'll need to restart the
browser for the setting to take effect.
... if you are connecting to firefox for metro on a different computer or a different port, enter the appropriate hostname and port number and then press "connect." in the windows 8 (metro)
browser next you'll see a dialog in firefox for metro asking you to confirm the connection.
... on the desktop next, the desktop shows you a dialog that looks something like this: this is asking whether you want to debug web content running in a
browser tab, or to debug the
browser code itself.
...And 2 more matches
Creating toolbar buttons (Customize Toolbar Window) - Archive of obsolete content
just add code like this to your overlay: <toolbarpalette id="
browsertoolbarpalette"> <toolbarbutton id="myextension-button" class="toolbarbutton-1" label="&toolbarbutton.label;" tooltiptext="&toolbarbutton.tooltip;" oncommand="myextension.ontoolbarbuttoncommand(event);"/> </toolbarpalette> notes: the id of the palette (
browsertoolbarpalette in the example) depends on the window (the parent window of the toolbar you wish to insert a button).
... onclick="checkformiddleclick(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: function(event) { switch(event.button) { case 0: // left click break; case 1: // middle click break; case 2: // right click break; } } to add more buttons, put more <toolba...
... adding the button bootstrap style adding a button to the
browserpalette on runtime in a bootstrap addon is a bit different because the
browserpalette is indirectly reached.
...And 2 more matches
XULRunner tips - Archive of obsolete content
properties"); if your application is based on gecko 2.0, you need to register a component through the new component registration because the extension manager uses fuel, namely application.restart(), to restart your xulrunner-based application after any change (installation, removal, enabling, disabling) in the extensions' list: copy files fuelapplication.js and fuelapplication.manifest from
browser/fuel/src for instance into your components/ directory tweak the line #include ../../../toolkit/components/exthelper/extapplication.js in your copy of fuelapplication.js as needed make sure to declare the fuel module and the two files in your components/makefile.in as in
browser/fuel/src/makefile.in rebuild...
...zilla.org) containing one line of text -- the exact path to the root directory of dom inspector (where the install.rdf is) like this one: /home/username/.mozilla/firefox/numbersandletters/extensions/inspector@mozilla.org/ now create a javascript file with the following code and include it in the main window of your application: function startdomi() { // load the window datasource so that
browser windows opened subsequent to dom // inspector show up in the dom inspector's window list.
... preferences needed for file download dialogs to use the unknown-content-type and file-downloads dialogs from a <
browser> element, you need to add the following prefs: pref("
browser.download.usedownloaddir", true); pref("
browser.download.folderlist", 0); pref("
browser.download.manager.showalertoncomplete", true); pref("
browser.download.manager.showalertinterval", 2000); pref("
browser.download.manager.retention", 2); pref("
browser.download.manager.showwhenstarting", true); pref("
browser.download.manager.usewindow",...
...And 2 more matches
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 information from the
browser.
...the
browser passes back the http username.
...the
browser passes back the http password.
...And 2 more matches
NPN_MemFlush - Archive of obsolete content
requests that the
browser free a specified amount of memory.
... syntax #include <npapi.h> uint32 npn_memflush(uint32 size); parameters the function has the following parameters: size size of memory, in bytes, to free in the
browser's memory space.
... if no memory can be freed, the
browser returns 0.
...And 2 more matches
NPN_UserAgent - Archive of obsolete content
« gecko plugin api reference «
browser side plug-in api summary returns the
browser's user agent field.
... this can be used to handle variations in different
browsers (or versions thereof) when implementing your plug-in.
... returns a pointer to a buffer that contains the user agent field of the
browser.
...And 2 more matches
NPN_Write - Archive of obsolete content
« gecko plugin api reference «
browser side plug-in api summary pushes data into a stream produced by the plug-in and consumed by the
browser.
... returns if successful, the function returns a positive integer representing the number of bytes written (consumed by the
browser).
... this number depends on the size of the
browser's memory buffers, the number of active streams, and other factors.
...And 2 more matches
NPP_Write - Archive of obsolete content
the buffer is allocated by the
browser and is deleted after returning from the function, so the plug-in should make a copy of the data it needs to keep.
...if the return value is smaller than the size of the buffer, the
browser sends the remaining data to the plug-in through subsequent calls to npp_writeready and npp_write.
...the
browser will destroy the stream by calling npp_destroystream.
...And 2 more matches
XEmbed Extension for Mozilla Plugins - Archive of obsolete content
however, before you do so you should make sure that the
browser also supports xembed when the plugin is first initialized.
...it's good practice to do this in case people try to install your plugin for older versions of the
browser that don't support xembed functionality.
...nperror np_initialize(npnetscapefuncs* nstable, nppluginfuncs* pluginfuncs) { nperror err = nperr_no_error; prbool supportsxembed = pr_false; npntoolkittype toolkit = 0; [ code that copies all of the function tables and does ] [ other standard checks ] /* * make sure that the
browser supports functionality we care * about.
...And 2 more matches
Properly Using CSS and JavaScript in XHTML Documents - Archive of obsolete content
when an xhtml page is served with mime type text/html it is treated by all
browsers as if it were nothing more than html.
... use of comments inside inline style and script authors who are familiar with html commonly enclose the contents of inline style and script tags in comments in order to hide the contents of the tags from
browsers which do not understand them.
... <style type="text/css"> <!-- body {background-color: blue; color: yellow;} --> </style> <script type="text/javascript"> <!-- var i = 0; var sum = 0; for (i = 0; i < 10; ++i) { sum += i; } alert('sum = ' + sum); // --> </script> this example illustrates that a conformant
browser can ignore content inside of comments.
...And 2 more matches
Building up a basic demo with A-Frame - Game development
the webxr and webgl apis already enable us to start creating virtual reality (vr) experiences inside web
browsers, but the community is still waiting for tools and libraries to appear, to make this easier.
... high level overview the current version of a-frame is 0.3.2, which means it's highly experimental, but it already works and you can test it right away in the
browser.
...you should start off by: making sure you are using a modern
browser with good webgl support (and webxr support if you have available vr or ar hardware) such as the latest firefox or chrome — download firefox nightly or chrome (v54 or higher).
...And 2 more matches
Building up a basic demo with Three.js - Game development
you should: make sure you are using a modern
browser with good webgl support, such as the latest firefox or chrome.
... renderer a renderer is a tool which displays scenes right in your
browser.
...thanks to this approach, a fallback can be used, if a desired technology is not supported by the
browser.
...And 2 more matches
Visual typescript game engine - Game development
multiplatform video chat (for all
browsers) implemented.
... npm install npm run build navigate in
browser /build/app.html to see client app in action -the client part is a
browser web application.
... main dependency file // symbolic for now const plarformergameinfo = { name: "crypto-runner", title: "play platformer crypto runner!", }; // symbolic for now const gameslist: any[] = [ plarformergameinfo, ]; const master = new ioc(gameslist); const appicon: appicon = new appicon(master.get.
browser); master.singlton(platformer, master.get.starter); console.log("platformer: ", master.get.platformer); master.get.platformer.attachappevents(); project structure builds/ is autogenerated.
...And 2 more matches
Parse - MDN Web Docs Glossary: Definitions of Web-related terms
parsing means analyzing and converting a program into an internal format that a runtime environment can actually run, for example the javascript engine inside
browsers.
... the
browser parses html into a dom tree.
... when the html parser finds non-blocking resources, such as an image, the
browser will request those resources and continue parsing.
...And 2 more matches
What is accessibility? - Learn web development
most
browsers and operating systems these days have zoom capabilities.
...see our cross-
browser testing screen readers guide for more details on using them.
...you can find more details about keyboard controls in our cross
browser testing using native keyboard accessibility section.
...And 2 more matches
Normal Flow - Learn web development
prerequisites: the basics of html (study introduction to html), and an idea of how css works (study introduction to css.) objective: to explain how
browsers layout web pages by default, before we begin to make changes.
...it ensures that your content is readable, even if the user is using a very limited
browser or a device such as a screen reader that reads out the content of the page.
...the normal layout flow (mentioned in the layout introduction article) is the system by which elements are placed inside the
browser's viewport.
...And 2 more matches
CSS layout - Learn web development
positioning positioning allows you to take elements out of the normal document layout flow, and make them behave differently, for example sitting on top of one another, or always remaining in the same place inside the
browser viewport.
... beginner's guide to media queries the css media query gives you a way to apply css only when the
browser and device environment matches a rule that you specify, for example "viewport is wider than 480 pixels".
... supporting older
browsers in this module we recommend using flexbox and grid as the main layout methods for your designs.
...And 2 more matches
What is a Domain Name? - Learn web development
as we already saw, when you want to display a webpage in your
browser it's easier to type a domain name than an ip address.
... let's take a look at the process: type mozilla.org in your
browser's location bar.
... your
browser asks your computer if it already recognizes the ip address identified by this domain name (using a local dns cache).
...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...
... embedded audio <audio controls="controls" src="https://udn.realityripple.com/samples/b7/193cb038d0.mp3">your
browser does not support the html5 audio element.</audio> your
browser does not support the html5 audio element.
... embedded audio with alternative sources <audio controls="controls"><source src="https://udn.realityripple.com/samples/b7/193cb038d0.mp3" type="audio/mpeg"><source src="https://udn.realityripple.com/samples/f7/14a4179ee6.ogg" type="audio/ogg"> your
browser does not support audio.
...And 2 more matches
Client-side web APIs - Learn web development
apis are programming features for manipulating different aspects of the
browser and operating system the site is running on, or manipulating data from other web sites or services.
... third party apis the apis we've covered so far are built into the
browser, but not all apis are.
...this article looks at the difference between
browser apis and 3rd party apis and shows some typical uses of the latter.
...And 2 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 perform calculations with it.
... but the
browser does "10 divided by 8 equals 1.25", then "50 plus 1.25 plus 2 equals 53.25".
...when you do this, you'll see a value of 4 returned — this is because the
browser returns the current value, then increments the variable.
...And 2 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 information on how to access this tool).
...try typing these lines into your web
browser's console.
...there is no reason to use var, unless you need to support old versions of internet explorer with your code (it doesn't support let until version 11; the modern windows edge
browser supports let just fine).
...And 2 more matches
Solve common problems in your JavaScript code - Learn web development
common beginner's mistakes correct spelling and casing if your code doesn't work and/or the
browser complains that something is undefined, check that you've spelt all your variable names, function names, etc.
... some common built-in
browser functions that cause problems are: correct wrong getelementsbytagname() getelementbytagname() getelementsbyname() getelementbyname() getelementsbyclassname() getelementbyclassname() getelementbyid() getelementsbyid() semi-colon position you need to make sure you don't place any semi-colons incorrectly.
... in fact, some
browsers (like firefox) will give you an error message in the developer console if you have code after a return statement.
...And 2 more matches
Object building practice - Learn web development
next, we set constants called width and height, and the width and height of the canvas element (represented by the canvas.width and canvas.height properties) to equal the width and height of the
browser viewport (the area that the webpage appears on — this can be gotten from the window.innerwidth and window.innerheight properties).
...this can range between 0 (top left hand corner) to the width and height of the
browser viewport (bottom right hand corner).
... save the code so far, and load the html file in a
browser.
...And 2 more matches
React interactivity: Editing, filtering, conditional rendering - Learn web development
conditional rendering in jsx, we can use a condition to change what is rendered by the
browser.
...editingtemplate : viewtemplate}</li>; your
browser should render all your tasks just like before.
... bind this function to the form’s submit event by adding the following onsubmit handler to the editingtemplate's <form>: <form classname="stack-small" onsubmit={handlesubmit}> you should now be able to edit a task in your
browser!
...And 2 more matches
Gecko info for Windows accessibility vendors
windows applications based on the gecko layout engine gecko is a rendering engine that mozilla, netscape and other new
browsers use.
... k-meleon: a light, ultra-fast and more advanced (fully configurable) gecko-based web
browser available on the windows platform xul-based clients (support msaa) xul-based clients make full use of the gecko architecture, not only for html content, as well as for menus, dialogs and the entire user interface via an xml language called xul (extensible user-interface language).
... and event_menuend role_scrollbar not supported n/a role_grip not supported n/a role_sound not supported n/a role_cursor not supported n/a role_caret supported for caret fires event_show, event_hide, event_locationchange role_alert xul: <
browsermessage> dhtml: role="wairole:alert" fires event_alert role_window supported automatically by ms windows role_client xul: <
browser> html: <frame> or <iframe> role_menupopup dhtml: role="wairole:menu" fires event_menupopupstart, event_menupopupend ...
...And 2 more matches
Mozilla’s UAAG evaluation report
this uaag evaluation report covers nightly builds of the mozilla web
browser itself, running on windows 2000, as of february 20, 2002.
... most
browsers do not allow the user to select text with the keyboard alone.
...(p1) p the following line can be added to a user's prefs.js file to control blinking: user_pref("
browser.blink_allowed", false); bug 89144 has been filed to expose this pref in the ui.
...And 2 more matches
Frequently Asked Questions for Lightweight themes
lightweight themes are easy-to-install, easy-to-use skins that change the look of your firefox web
browser.
... lightweight themes change the header area of your
browser, including the tab text color and the background tab colors.
... in just a few seconds, you can install a theme and transform the look of your firefox web
browser.
...And 2 more matches
Lightweight themes
creating a theme header image the header image is displayed as the background of the top of the
browser window, nestling in behind the toolbars, address bar, search bar and the tab strip.
... it will be anchored to the top-right corner of the
browser window.
... 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.
...And 2 more matches
Creating a Firefox sidebar
such kind of sidebar can be a simple web panel or a full-featured extension that is completely integrated with the
browser.
...a sample extension to add a web panel is available as a starter.obsolete since gecko 57 if you'd like to have a deeper integration with the
browser to offer more complex features, a traditional overlay extension can be an option.
...although it may still work in some
browsers, its use is discouraged since it could be removed at any time.
...And 2 more matches
Experimental features in Firefox
in order to test new features, mozilla publishes a test version of the firefox
browser, firefox nightly, every day.
... nightly 33 no developer edition 33 no beta 33 no release 33 no preference name media.track.enabled dom document property: autoplaypolicy the document property autoplaypolicy returns a string indicating how the
browser handles requests to automatically play media (either using the autoplay property on a media element or by attempting to trigger playback from javascript code.
...the value changes over time depending on what the user is doing, their preferences, and the state of the
browser in general.
...And 2 more matches
Frame script loading and lifetime
the script just writes "foo" to the command line: // chrome script var mm = g
browser.selected
browser.messagemanager; mm.loadframescript('data:,dump("foo\\n")', true); loadframescript() takes two mandatory parameters: a url that points to the frame script you want to load a boolean flag, allowdelayedload note: if the message manager is a global frame message manager or a window message manager, loadframescript() may load the script multiple times, once in each applicable frame.
... if the message manager is a
browser message manager, you should always pass true here.
... because a
browser message manager only corresponds to a single
browser tab, its loadframescript() function will only ever load the frame script into that one tab.
...And 2 more matches
HTMLIFrameElement.clearMatch()
invoking this method results in a moz
browserfindchange event firing, which carries details about the search results.
... note: use of the
browser api requires a privileged app, and
browser and/or embed-apps permissions, depending on what you want to do.
... see using the
browser api for more details.
...And 2 more matches
HTMLIFrameElement.findNext()
invoking this method results in a moz
browserfindchange event firing, which carries details about the search results.
... note: use of the
browser api requires a privileged app, and
browser and/or embed-apps permissions, depending on what you want to do.
... see using the
browser api for more details.
...And 2 more matches
HTTP Cache
//github.com/realityripple/uxp/blob/master/netwerk/base/public/nsiloadcontextinfo.idl it is a helper interface wrapping following four arguments into a single one: private-browsing boolean flag anonymous load boolean flag app id number (0 for no app) is-in-
browser boolean flag helper functions to create nsiloadcontextinfo objects: c++ consumers: functions at loadcontextinfo.h exported header js consumers: resource://gre/modules/loadcontextinfo.jsm module methods two storage objects created with the same set of nsiloadcontextinfo arguments are identical, containing the same cache entries.
...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 app id the scope belongs to, otherwise there is no app (app id is considered 0) p - when present the scope is of a private browsing load, this never persists cachestorageservice keeps a global hashtable mapped by the scope key.
...the default size of this meta data memory pool is only 250kb and is controlled by a new
browser.cache.disk.metadata_memory_limit preference.
...And 2 more matches
L10n Checks
if you want to test the localization for de, run: check-l10n-completeness
browser/locales/l10n.ini ../l10n/ de add-ons (xpi) mode l10n checks gathers the locales to compare from the chrome.manifest file inside the xpi file.
...ab-cd
browser chrome/
browser browser.dtd +backforwardmenu.tooltip +fullzoomenlargecmd.commandkey3 +fullzoomreducecmd.commandkey2 +fullzoomresetcmd.commandkey2 +organizebookmarks.label -showallbookmarkscmd2.label migration/migration.dtd -importfromfile.accesskey -importfromfile.label +importfromhtmlfile.acc...
...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.
...And 2 more matches
QA phase
ource code: $ cd mozilla-aurora $ hg pull -u enter the following command to create the .mozconfig file: $ nano -w .mozconfig enter the following lines in your .mozconfig file: mk_add_options moz_objdir=@topsrcdir@/../firefox-build ac_add_options --disable-compile-environment ac_add_options --with-l10n-base=../l10n-central # path relative to moz_objdir ac_add_options --enable-application=[
browser or mail] you will need to specify which application you're localizing in the fourth line (e.g., for firefox, that's
browser, thunderbird would be mail).
... enter the following command to perform 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!
... restart your
browser and start testing!
...And 2 more matches
Preference reference
accessibility.tabfocusthe preference accessibility.tabfocus controls what elements receive focus when the user presses the tab key.
browser.altclicksavethe preference
browser.altclicksave controls whether clicking a link while holding the alt key starts the download of that link.
browser.dom.window.dump.enabledthis setting enables the dump function, which sends messages to the system console.
... set it to true to enable it, or false to disable it.
browser.dom.window.dump.file
browser.dom.window.dump.file redirects the ouput of window.dump() calls to a file whose address is specified in this preference if
browser.dom.window.dump.enabled is set to true.
... changes require an application restart.
browser.download.lastdir.savepersite
browser.download.lastdir.savepersite controls whether the directory preselected in the file picker for saving a file download is being remembered on a per-website (host) base.
...And 2 more matches
NSS Certificate Download Specification
for mozilla
browsers, this handling will depend upon the mime content-type that is used on the object being downloaded.
... importing certificates into mozilla
browsers mozilla
browsers import certificates found in http protocol responses.
... there are several mime content types that are used to indicate to the
browser what type of certificate is being imported.
...And 2 more matches
nsIDOMWindowUtils
although it may still work in some
browsers, its use is discouraged since it could be removed at any time.
... note: after calling this method, the window.innerwidth and window.innerheight properties return the size of the viewport you've specified instead of the size of the
browser widget.
...for example, to scale a content |window| inside a <
browser> by a factor of 2.0.
...And 2 more matches
nsIDownloadManager
the path is dependent on two user configurable prefs set in preferences:
browser.download.folderlist defines the default download location for files: 0: files are downloaded to the desktop by default.
... 2: files are downloaded to the local path specified by the
browser.download.dir preference.
...if you want to both add and start a download, you need to create an nsiweb
browserpersist object, call this method, set the progresslistener to the returned nsidownload object, and then call the nsiweb
browserpersist.saveuri() method.
...And 2 more matches
nsINavHistoryService
1.0 66 introduced gecko 1.8 inherits from: nsisupports last changed in gecko 22 (firefox 22 / thunderbird 22 / seamonkey 2.19) implemented by: "@mozilla.org/
browser/nav-history-service;1".
... to use this service, use: var historyservice = components.classes["@mozilla.org/
browser/nav-history-service;1"] .getservice(components.interfaces.nsinavhistoryservice); method overview astring getpagetitle(in nsiuri auri); void markpageasfollowedbookmark(in nsiuri auri); void markpageasfollowedlink(in nsiuri auri); void markpageastyped(in nsiuri auri); boolean canadduri(in nsiuri auri); long long addvisit(in nsiuri auri, in prtime atime, in nsiuri areferringuri, in long atransitiontype, in boolean aisredirect, in long long asessionid); obsolete since gecko 22.0 nsinavhistoryquery getnewquery(); nsinavhistoryqueryoptions getnewqueryoptions(); nsinavhistoryresult executequery(in ns...
...this is much better than using
browserhistory.count since that can be very slow if there is a lot of history (it must enumerate each item).
...And 2 more matches
nsIPrintingPrompt
embedding/
browser/web
browser/nsiprintingprompt.idlscriptable this is the printing prompt interface which can be used without knowlege of a parent window.
...you can then fly you own dialog and then properly fill in the printsettings object before calling nsiweb
browserprint's print method.
... defaults for platform service: showprintdialog - displays a native dialog showpagesetup() - displays a native dialog showprogress() - displays a xul dialog method overview void showpagesetup(in nsiprintsettings printsettings, in nsiobserver aobs); void showprintdialog(in nsiweb
browserprint web
browserprint, in nsiprintsettings printsettings); void showprogress(in nsiweb
browserprint web
browserprint, in nsiprintsettings printsettings, in nsiobserver opendialogobserver, in boolean isforprinting, out nsiwebprogresslistener webprogresslistener, out nsiprintprogressparams printprogressparams, out boolean notifyonopen); methods showpagesetup() shows the print progres...
...And 2 more matches
nsIWindowCreator
embedding/base/nsiwindowcreator.idlscriptable a callback interface used by gecko to create new
browser windows.
... inherits from: nsisupports last changed in gecko 0.9.6 method overview nsiweb
browserchrome createchromewindow(in nsiweb
browserchrome parent, in pruint32 chromeflags); methods createchromewindow() create a new window.
...nsiweb
browserchrome createchromewindow( in nsiweb
browserchrome parent, in pruint32 chromeflags ); parameters parent the nsiweb
browserchrome of the parent window, if any.
...And 2 more matches
XPCOM Interface Reference by grouping
(i'm fully aware that this will be a great point of discussion and probably will end in tears, but since i'm the first person to apparently take a swing at this, i get first dibs.) the primary sections consist of:
browser this section contains elements associated with the view pane or the content of the "
browser window" proper.
...
browser autocomplete nsiautocompletecontroller nsiautocompleteinput nsiautocompletesearch console nsiconsolelistener nsiconsolemessage nsiconsoleservice document nsidocshell dom device nsidomgeogeolocation nsidomgeoposition nsidomgeopositionaddress nsidomgeopositioncallback nsidomgeopositioncoords nsidomgeopositionerror ...
... nsixulappinfo nsixulruntime nsixultemplatebuilder nsixultemplatequeryprocessor nsixultemplateresult bookmark livemark nsilivemarkservice nsinavbookmarkobserver nsinavbookmarksservice nsinavhistoryservice
browser dom nsiweb
browser nsiweb
browserpersist cache nsicache nsicachedeviceinfo nsicacheentrydescriptor nsicacheentryinfo nsicachelistener nsicachemetadatavisitor nsicacheservice nsicachesession nsicachevisitor nsicachingchan...
...And 2 more matches
UI Tour - Firefox Developer Tools
it shows icons for the
browsers that do support the properties, and notes properties that are experimental or deprecated.
...the "
browser compatibility" section of the article gives details of
browser support for the property.
... to configure the set of
browsers you want the compatibility view to check for, click settings at the bottom of the panel.
...And 2 more matches
Call Tree - Firefox Developer Tools
the call tree tells you which javascript functions the
browser spent the most time in.
... by analyzing its results, you can find bottlenecks in your code - places where the
browser is spending a disproportionately large amount of time.
...statistically, the number of samples taken in which we were executing a particular function corresponds to the amount of time the
browser spent executing it.
...And 2 more matches
Element: mousewheel event - Web APIs
the mousewheel event was never part of any standard, and while it was implemented by several
browsers, it was never implemented by firefox.
...however, the meaning of the amount of these values is not the same between
browsers.
...this is really different from other
browsers except chrome with continuous scroll supported device.
...And 2 more matches
FederatedCredential - Web APIs
in supporting
browsers, an instance of this class may be passed the credential received from the init object for global fetch.
...
browser compatibility the compatibility table in this page is generated from structured data.
... if you'd like to contribute to the data, please check out https://github.com/mdn/
browser-compat-data and send us a pull request.
...And 2 more matches
FederatedCredential - Web APIs
in
browsers that support it, an instance of this interface may be passed in the credential member of the init object for global fetch.
...
browser compatibility the compatibility table in this page is generated from structured data.
... if you'd like to contribute to the data, please check out https://github.com/mdn/
browser-compat-data and send us a pull request.
...And 2 more matches
FileEntrySync - Web APIs
this specification is more or less abandoned as it didn't get significant traction among
browser makers.
...
browser compatibility the compatibility table on this page is generated from structured data.
... if you'd like to contribute to the data, please check out https://github.com/mdn/
browser-compat-data and send us a pull request.
...And 2 more matches
FileSystemDirectoryEntry - Web APIs
example in the following code snippet, we create a directory called "documents." // taking care of the
browser-specific prefixes.
... draft
browser compatibility the compatibility table on this page is generated from structured data.
... if you'd like to contribute to the data, please check out https://github.com/mdn/
browser-compat-data and send us a pull request.
...And 2 more matches
FileSystemDirectoryReader.readEntries() - Web APIs
in chromium-based
browsers, the following example will only return a max of 100 entries.
...
browser compatibility the compatibility table on this page is generated from structured data.
... if you'd like to contribute to the data, please check out https://github.com/mdn/
browser-compat-data and send us a pull request.
...And 2 more matches
FileSystemEntry.toURL() - Web APIs
if your site is located at http://my-awesome-website.woot, and you have a temporary file system that contains an image file named awesomesauce.jpg, the url returned by tourl() might be (depending on the
browser's implementation) something like "filesystem:http://my-awesome-website.woot/temporary/awesomesauce.jpg".
... code that makes use of this might look like this: let img = document.createelement("img"); img.src = imagefileentry.tourl(); document.body.appendchild(img); assuming the scenario mentioned before the code, the result would be html that looks like this being appended to the end of the document: <img src="filesystem:http://my-awesome-website.woot/temporary/awesomesauce.jpg">
browser compatibility the compatibility table on this page is generated from structured data.
... if you'd like to contribute to the data, please check out https://github.com/mdn/
browser-compat-data and send us a pull request.
...And 2 more matches
File and Directory Entries API - Web APIs
because this is a non-standard api, whose specification is not currently on a standards track, it's important to keep in mind that not all
browsers implement it, and those that do may implement only small portions of it.
... check the
browser compatibility section for details.
...check the
browser compatibility for any part of the api you use carefully, and see file and directory entries api support in firefox for more details.
...And 2 more matches
Guide to the Fullscreen API - Web APIs
this article demonstrates how to use the fullscreen api to place a given element into full-screen mode, as well as how to detect when the
browser enters or exits full-screen mode.
... for the moment not all
browsers are implementing the unprefixed version of the api (for vendor agnostic access to the fullscreen api you can use fscreen).
...
browser compatibility document.fullscreen the compatibility table on this page is generated from structured data.
...And 2 more matches
GlobalEventHandlers.onerror - Web APIs
<img src="imagenotfound.gif" onerror="this.onerror=null;this.src='imagefound.gif';" /> the reason we have the this.onerror=null in the function is that the
browser will be stuck in an endless loop if the onerror image itself generates an error.
...instead the error reported is simply "script error." this behavior can be overriden in some
browsers using the crossorigin attribute on <script> and having the server send the appropriate cors http response headers.
... a workaround is to isolate "script error." and handle it knowing that the error detail is only viewable in the
browser console and not accessible via javascript.
...And 2 more matches
HTMLImageElement.decoding - Web APIs
the decoding property of the htmlimageelement interface represents a hint given to the
browser on how it should decode the image.
...the
browser decides what is best for the user.
... usage notes the decoding property allows you to control whether or not the
browser is allowed to try to parallelize loading your image.
...And 2 more matches
HTMLMediaElement.play() - Web APIs
note: older
browsers may not return a value from play().
...possible errors include: notallowederror the user agent (
browser) or operating system doesn't allow playback of media in the current context or situation.
... this may happen, for example, if the
browser requires the user to explicitly start media playback by clicking a "play" button.
...And 2 more matches
The HTML DOM API - Web APIs
access to the
browser navigation history supporting and connective interfaces for other apis such as web components, web storage, web workers, websocket, and server-sent events.
... 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 information specific to using the dom in the context of a web
browser, as well as to using it to represent html documents specifically.
...t htmltemplateelement htmltextareaelement htmltimeelement htmltitleelement htmltrackelement htmlulistelement htmlunknownelement htmlvideoelement deprecated html element interfaces htmlmarqueeelement obsolete html element interfaces htmlbasefontelement htmlfontelement htmlframeelement htmlframesetelement htmlisindexelement htmlmenuitemelement web app and
browser integration interfaces these interfaces offer access to the
browser window and document that contain the html, as well as to the
browser's state, available plugins (if any), and various configuration options.
...And 2 more matches
History.pushState() - Web APIs
in an html document, the history.pushstate() method adds a state to the
browser's session history stack.
...because firefox saves state objects to the user's disk so they can be restored after the user restarts the
browser, we impose a size limit of 640k characters on the serialized representation of a state object.
... title most
browsers currently ignore this parameter, although they may use it in the future.
...And 2 more matches
History - Web APIs
the history interface allows manipulation of the
browser session history, that is the pages visited in the tab or frame that the current page is loaded in.
... back() this asynchronous method goes to the previous page in session history, the same action as when the user clicks the
browser's back button.
... forward() this asynchronous method goes to the next page in session history, the same action as when the user clicks the
browser's forward button; this is equivalent to history.go(1).
...And 2 more matches
LocalFileSystemSync - Web APIs
example //taking care of the
browser-specific prefix window.requestfilesystemsync = window.requestfilesystemsync || window.webkitrequestfilesystemsync; // the first parameter defines the type of storage: persistent or temporary // next, set the size of space needed (in bytes) // initfs is the success callback // and the last one is the error callback // for denial of access and other errors.
... method overview filesystemsync requestfilesystemsync (in unsigned short type, in long long size) raises fileexception; entrysync resolvelocalfilesystemsyncurl (in domstring url) raises fileexception; constants constant value description temporary 0 transient storage that can be be removed by the
browser at its discretion.
... persistent 1 storage that stays in the
browser unless the user or the app expunges it.
...And 2 more matches
MouseEvent.pageX - Web APIs
see the
browser compatibility section for details.
...even though numeric types both are represented by number in javascript, they may be handled differently internally in the
browser's code, resulting in potential behavior differences.
... see
browser compatibility to learn which
browsers have been updated to use the revised data type.
...And 2 more matches
NavigatorID.platform - Web APIs
returns a string representing the platform of the
browser.
... the specification allows
browsers to always return the empty string, so don't rely on this property to get a reliable answer.
... syntax platform = navigator.platform value a domstring identifying the platform on which the
browser is running, or an empty string if the
browser declines to (or is unable to) identify the platform.
...And 2 more matches
Online and offline events - Web APIs
some
browsers implement online/offline events from the whatwg web applications 1.0 specification.
... additionally, this property should update whenever a
browser is no longer capable of connecting to the network.
... firefox 2 updates this property when switching to/from the
browser's offline mode.
...And 2 more matches
PasswordCredential - Web APIs
in supporting
browsers an instance of this class may be passed in the credential member of the init object for global fetch.
...
browser compatibility the compatibility table on this page is generated from structured data.
... if you'd like to contribute to the data, please check out https://github.com/mdn/
browser-compat-data and send us a pull request.
...And 2 more matches
PaymentRequest.canMakePayment() - Web APIs
you can call this before calling show() to provide a streamlined user experience when the user's
browser can't handle any of the payment methods you accept.
... for instance, you might call canmakepayment() to determine if the
browser will let the user pay using payment request api, and if it won't, you could fall back to another payment method, or offer a list of methods that aren't handled by payment request api (or even provide instructions for paying by mail or by phone).
... note: if you call this too often, the
browser may reject the returned promise with a domexception.
...And 2 more matches
PerformanceTiming - Web APIs
some correspond to dom events; others describe the time at which internal
browser operations of interest took place.
... performancetiming.fetchstart read only when the
browser is ready to fetch the document using an http request.
... performancetiming.requeststart read only when the
browser sent the request to obtain the actual document, from the server or from a cache.
...And 2 more matches
Performance Timeline - Web APIs
the standard also includes interfaces that allow an application to define performance observer callbacks that are notified when specific performance events are added to the
browser's performance timeline.
... performance interface extensions: as shown in the performance interface's
browser compatibility table, most of these interfaces are broadly implemented by desktop
browsers and have less support on mobile devices.
... performanceentry: as shown in the performanceentry interface's
browser compatibility table, most of these interfaces are broadly implemented by desktop
browsers and have less support on mobile devices.
...And 2 more matches
Using Pointer Events - Web APIs
this application will only work on a
browser that supports pointer events.
... create a canvas the touch-action property is set to none to prevent the
browser from applying its default touch behavior to the application.
... <canvas id="canvas" width="600" height="600" style="border:solid black 1px; touch-action:none"> your
browser does not support canvas element.
...And 2 more matches
Reporting API - Web APIs
deprecated feature usage (when you are using something that will stop working soon in
browsers).
... occurrence of user-agent interventions (when the
browser blocks something your code is trying to do because it is deemed a security risk for example, or just plain annoying, like auto-playing audio).
... available report types the spec defines the following report types: deprecation report indicates that a webapi or other
browser feature being used in the website is expected to stop working in a future release.
...And 2 more matches
Using the Screen Capture API - Web APIs
note: it may be useful to note that recent versions of the webrtc adapter.js shim include implementations of getdisplaymedia() to enable screen sharing on
browsers that support it but do not implement the current standard api.
...sharing surfaces include the contents of a
browser tab, a complete window, all of the applications of a window combined into a single surface, and a monitor (or group of monitors combined together into one surface).
...generally, the
browser will provide an image which obscures the hidden portion of the logical display surface in some way, such as by blurring or replacing with a color or pattern.
...And 2 more matches
Using readable streams - Web APIs
browser support you can consume fetch body objects as streams and create your own custom readable streams in firefox 65+ and chrome 42+ (and equivalent chromium-based
browsers).
...it has a number of advantages, and what is really nice about it is that
browsers have recently added the ability to consume a fetch response as a readable stream.
... the readablestream() constructor it is easy to read from a stream when the
browser provides it for you as in the case of fetch, but sometimes you need to create a custom stream and populate it with your own chunks.
...And 2 more matches
Using WebGL extensions - Web APIs
canonical extension names, vendor prefixes and preferences extensions may be supported by
browser vendors before being officially ratified (but only when they are in draft stage).
... in that case, their name can be prefixed by the vendor prefix (moz_, webkit_, etc.) or the extension is only available once a
browser preference has been toggled.
...for instance: var ext = ( gl.getextension('oes_vertex_array_object') || gl.getextension('moz_oes_vertex_array_object') || gl.getextension('webkit_oes_vertex_array_object') ); note that, vendor prefix have been discouraged more and more and thus most
browser implement experimental extensions behind a feature flag rather than vendor prefix.
...And 2 more matches
Using WebRTC data channels - Web APIs
concerns with large messages currently, it's not practical to use rtcdatachannel for messages larger than 64kib (16kib if you want to support cross-
browser exchange of data).
... this will become an issue when
browsers properly support the current standard for supporting larger messages—the end-of-record (eor) flag that indicates when a message is the last one in a series that should be treated as a single payload.
...he goes into a bit more detail there, but as
browsers have been updated since then some of it may be out-of-date.
...And 2 more matches
Using the Web Audio API - Web APIs
browser support modern
browsers have good support for most features of the web audio api.
... there are a lot of features of the api, so for more exact information, you'll have to check the
browser compatibility tables at the bottom of each reference page.
... // for legacy
browsers const audiocontext = window.audiocontext || window.webkitaudiocontext; const audiocontext = new audiocontext(); so what's going on when we do this?
...And 2 more matches
Using the Web Speech API - Web APIs
note: on some
browsers, like chrome, using speech recognition on a web page involves a server-based recognition engine.
... to run the demo, you can clone (or directly download) the github repo it is part of, open the html index file in a supporting desktop
browser, or navigate to the live demo url in a supporting mobile
browser like chrome.
...
browser support support for web speech api speech recognition is curently limited to chrome for desktop and android — chrome has supported it since around version 33 but with prefixed interfaces, so you need to include prefixed versions of them, e.g.
...And 2 more matches
Window.routeEvent() - Web APIs
although it may still work in some
browsers, its use is discouraged since it could be removed at any time.
...
browser compatibility the compatibility table in this page is generated from structured data.
... if you'd like to contribute to the data, please check out https://github.com/mdn/
browser-compat-data and send us a pull request.
...And 2 more matches
WindowOrWorkerGlobalScope.queueMicrotask() - Web APIs
the queuemicrotask() method, which is exposed on the window or worker interface, queues a microtask to be executed at a safe time prior to control returning to the
browser's event loop.
... the microtask is a short function which will run after the current task has completed its work and when there is no other code waiting to be run before control of the execution context is returned to the
browser's event loop.
... this lets your code run without interfering with any other, potentially higher priority, code that is pending, but before the
browser regains control over the execution context, potentially depending on work you need to complete.
...And 2 more matches
ARIA: application role - Accessibility
any sort of special interpretation of html structures and widgets should be suspended, and control should be completely handed over to the
browser and web application to handle mouse, keyboard, or touch interaction.
... background for historic reasons, especially on windows, screen readers and some other assistive technologies (at) have traditionally grabbed the whole web content from the
browser at once after it had finished loading.
... for all of this to work, ats intercept almost all keyboard input and consume it themselves, letting nothing through to the
browser or other user agent.
...And 2 more matches
:has() - CSS: Cascading Style Sheets
/* selects any <a>, as long as it has an <img> element directly inside it */ /* note that this is not supported in any
browser yet */ let test = document.queryselector('a:has(> img)'); syntax :has( <relative-selector-list> )where <relative-selector-list> = <relative-selector>#where <relative-selector> = <combinator>?
...this limitation has been removed because no
browser implemented it that way.
... instead,
browsers currently only support the use of :has() within stylesheets.
...And 2 more matches
:visited - CSS: Cascading Style Sheets
styling restrictions for privacy reasons,
browsers strictly limit which styles you can apply using this pseudo-class, and how they can be used: allowable css properties are color, background-color, border-color, border-bottom-color, border-left-color, border-right-color, border-top-color, column-rule-color, outline-color, text-decoration-color, and text-emphasis-color.
...of the properties that can be set with this pseudo-class, your
browser probably has a default value for color and column-rule-color only.
...lets
browsers restrict its behavior for privacy reasons.
...And 2 more matches
system - CSS: Cascading Style Sheets
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.
...] | [ extends <counter-style-name> ]where <counter-style-name> = <custom-ident> examples cyclic counter if your
browser supports it, this example will render a list like this: ◉ one ◉ two ◉ three css <ul> <li>one</li> <li>two</li> <li>three</li> </ul> @counter-style fisheye { system: cyclic; symbols: ◉; suffix: " "; } ul { list-style: fisheye; } result fixed counter if your
browser supports it, this example will render a list like this: ➀ one ➁ two ➂ three 4 four 5 five css <ul> <li>one</li> <li>two</li> <li>three</li> <li>four</li> <li>five</li> <...
.../ul> @counter-style circled-digits { system: fixed; symbols: ➀ ➁ ➂; suffix: ' '; } ul { list-style: circled-digits; } result symbolic counter if your
browser supports it, this example will render a list like this: a.
...And 2 more matches
@viewport - CSS: Cascading Style Sheets
it's primarily used for mobile devices, but is also used by desktop
browsers that support features like "snap to edge" (such as microsoft edge).
...this is typically based on the size of the window on desktop
browsers that aren't in full screen mode.
... descriptors
browser support for @viewport is weak at this time, with support being largely available in internet explorer and edge.
...And 2 more matches
Detecting CSS animation support - CSS: Cascading Style Sheets
we create an array of
browser prefixes to loop over and we set pfx to an empty string.
...this means the
browser supports css animation without any prefix, which, to date, none of them do.
... if the
browser does not support non-prefixed animation and animation is still false, we iterate over all the possible prefixes, since all the major
browsers are currently prefixing this property and changing its name to animationname instead.
...And 2 more matches
Using multi-column layouts - CSS: Cascading Style Sheets
</p> </div> css #col { column-count: 2; } result will display the content in two columns (if you're using a multi-column compliant
browser): the column-width property sets the minimum desired column width.
... if column-count is not also set, then the
browser will automatically make as many columns as fit in the available width.
...excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum </div> css #columns_12 { columns: 12 8em; } result height balancing the css3 column specification requires that the column heights must be balanced: that is, the
browser automatically sets the maximum column height so that the heights of the content in each column are approximately equal.
...And 2 more matches
Basic concepts of CSS Scroll Snap - CSS: Cascading Style Sheets
the mandatory keyword tells the
browser whether the content has to snap to a certain point, no matter where the scroll is.
... using mandatory gives a very consistent experience — you know that the
browser will always snap to each defined point.
... the proximity value will only snap to a position when it is close by, the exact distance being left to the
browser to decide.
...And 2 more matches
Introducing the CSS Cascade - CSS: Cascading Style Sheets
user-agent stylesheets the
browser has a basic style sheet that gives a default style to any document.
...some
browsers use actual style sheets for this purpose, while others simulate them in code, but the end result is the same.
... some
browsers let users modify the user-agent stylesheet.
...And 2 more matches
font-size-adjust - CSS: Cascading Style Sheets
to use this property in a way that is compatible with
browsers that do not support font-size-adjust, it is specified as a number that the font-size property is multiplied by.
... this will still produce reasonable results in
browsers that do not support font-size-adjust, where a 14px font will be used.
...this means that the first-choice font, when available, will appear the same size in
browsers, whether or not they support font-size-adjust.
...And 2 more matches
hyphens - CSS: Cascading Style Sheets
it can prevent hyphenation entirely, hyphenate at manually-specified points within the text, or let the
browser automatically insert hyphens where appropriate.
...in html, the language is determined by the lang attribute, and
browsers will hyphenate only if this attribute is present and the appropriate hyphenation dictionary is available.
... note: the rules defining how hyphenation is performed are not explicitly defined by the specification, so the exact hyphenation may vary from
browser to
browser.
...And 2 more matches
image-set() - CSS: Cascading Style Sheets
the image-set() css function notation is a method of letting the
browser pick the most appropriate css image from a given set, primarily for high pixel density screens.
...the image-set() function delivers the most appropriate image resolution for a user’s device, providing a set of image options — each with an associated resolution declaration — from which the
browser picks the most appropriate for the device and settings.
... accessibility concerns
browsers do not provide any special information on background images to assistive technology.
...And 2 more matches
<image> - CSS: Cascading Style Sheets
nd-size; and (3) its default size, determined by the kind of property the image is used with: kind of object (css property) default object size background-image the size of the element's background positioning area list-style-image the size of a 1em character border-image-source the size of the element's border image area cursor the
browser-defined size matching the usual cursor size on the client's system mask-image ?
...if supported, the
browser-defined size matching the usual cursor size on the client's system content for a pseudo-element (::after/::before) a 300px × 150px rectangle the concrete object size is calculated using the following algorithm: if the specified size defines both the width and the height, these values are used as the concrete object size.
... note: not all
browsers support every type of image on every property.
...And 2 more matches
position - CSS: Cascading Style Sheets
(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.
...as a user scrolls, the
browser must repaint the sticky or fixed content in a new location.
... depending on the content needing to be repainted, the
browser performance, and the device's processing speed, the
browser may not be able to manage repaints at 60 fps, causing accessibility concerns for people with sensitivities and jank for everyone.
...And 2 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 mpd file tells the
browser where the various pieces of media are located, it also includes meta data such as mimetype and codecs and there are other details such as byte-ranges in there too - it is an xml document and in many cases will be generated for you.
... <video src="my.mpd" type="application/dash+xml"></video> it might be wise to provide a fallback for
browsers that don't yet support mpeg-dash: <video> <source src="my.mpd" type="application/dash+xml"> <!-- fallback --> <source src="my.mp4" type="video/mp4"> <source src="my.webm" type="video/webm"> </video> live profile a useful piece of software when dealing with mpeg-dash is dash encoder.
...And 2 more matches
Video player styling basics - Developer guides
in the previous cross
browser video player article we described how to build a cross-
browser html5 video player using the media and fullscreen apis.
... as mentioned in the previous article, there is a fallback provided for
browsers that do not support the <progress> element; this also needs to be styled appropriately: .controls progress[data-state="fake"] { background:#e6e6e6; height:65%; } .controls progress span { width:0%; height:100%; display:inline-block; background-color:#2a84cd; } a .data-state class is also used here when a <progress> element is being "faked"; when it's in this state the backgr...
... there are some
browser-specific properties that need to be set to ensure that firefox and chrome use the required colour for the progress bar: .controls progress::-moz-progress-bar { background-color:#0095dd; } .controls progress::-webkit-progress-value { background-color:#0095dd; } although the same properties are set to the same value, these rules need to be defined separately, otherwise chrome ignores it.
...And 2 more matches
Making content editable - Developer guides
note: in firefox 63 beta/dev edition, some of the rich-text editing features have been disabled by default, for better cross-
browser compatibility.
... differences in markup generation use of contenteditable across different
browsers has been painful for a long time because of the differences in generated markup between
browsers.
... for example, even something as simple as what happens when you press enter/return to create a new line of text inside an editable element was handled differently across the major
browsers (firefox inserted <br> elements, ie/opera used <p>, chrome/safari used <div>).
...And 2 more matches
<canvas>: The Graphics Canvas element - HTML: Hypertext Markup Language
this is only supported by mozilla-based
browsers; use the standardized canvas.getcontext('2d', { alpha: false }) instead.
...that content will be rendered both on older
browsers that don't support canvas and in
browsers with javascript disabled.
... maximum canvas size the maximum size of a <canvas> element is very large, but the exact size depends on the
browser.
...And 2 more matches
<details>: The Details disclosure element - HTML: Hypertext Markup Language
it is sent after the state is changed, although if the state changes multiple times before the
browser can dispatch the event, the events are coalesced so that only one is sent.
... 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").
... here's what your
browser does with it: providing a summary this example adds a summary to the above example by using the <summary> element inside <details>, like this: <details> <summary>system requirements</summary> <p>requires a computer running an operating system.
...And 2 more matches
<input type="checkbox"> - HTML: Hypertext Markup Language
the exact appearance depends upon the operating system configuration under which the
browser is running.
... unlike other
browsers, firefox by default persists the dynamic checked state of an <input> across page loads.
... essentially, then, the indeterminate attribute adds a third possible state to the checkbox: "i don't know." in this state, the
browser may draw the checkbox in grey or with a different mark inside the checkbox.
...And 2 more matches
<input type="color"> - HTML: Hypertext Markup Language
the element's presentation may vary substantially from one
browser and/or platform to another—it might be a simple textual input that automatically validates to ensure that the color information is entered in the proper format, or a platform-standard color picker, or some kind of custom color picker window.
... note: any web
browser that doesn't support an input of type color will naturally fall back to the type text.
...es changes over time to the color value: colorpicker.addeventlistener("input", updatefirst, false); colorpicker.addeventlistener("change", watchcolorpicker, false); function watchcolorpicker(event) { document.queryselectorall("p").foreach(function(p) { p.style.color = event.target.value; }); } selecting the value if the <input> element's implementation of the color type on the user's
browser doesn't support a color well, but is instead a text field for entering the color string directly, you can use the select() method to select the text currently in the edit field.
...And 2 more matches
<input type="radio"> - HTML: Hypertext Markup Language
unlike other
browsers, firefox by default persists the dynamic checked state of an <input> across page loads.
...border: 6px solid black; } button, legend { color: white; background-color: black; padding: 5px 10px; border-radius: 0; border: 0; font-size: 14px; } button:hover, button:focus { color: #999; } button:active { background-color: white; color: black; outline: 1px solid black; } most notable here is the use of the -moz-appearance property (with prefixes needed to support some
browsers).
...although it is supported in most modern
browsers, its implementation varies widely.
...And 2 more matches
accesskey - HTML: Hypertext Markup Language
note: in the whatwg spec, it says you can specify multiple space-separated characters, and the
browser will use the first one it supports.
... however, this does not work in most
browsers.
... the way to activate the accesskey depends on the
browser and its platform: 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 google chrome alt + shift + key safari n/a opera 15+ alt + key control + alt + key opera 12 shift + esc opens a contents list which are accessible by accesskey, the...
...And 2 more matches
Global attributes - HTML: Hypertext Markup Language
for example, html5-compliant
browsers hide content marked as <foo hidden>...</foo>, even though <foo> is not a valid html element.
...the
browser should use the first one that exists on the computer keyboard layout.
...if so, the
browser modifies its widget to allow editing.
...And 2 more matches
Data URLs - HTTP
note: data urls are treated as unique opaque origins by modern
browsers, rather than inheriting the origin of the settings object responsible for the navigation.
... length limitations although firefox supports data urls of essentially unlimited length,
browsers are not required to support any particular maximum length of data.
... for example, the opera 11
browser limited urls to 65535 characters long which limits data urls to 65529 characters (65529 characters being the length of the encoded data, not the source, if you use the plain data:, without specifying a mime type).
...And 2 more matches
HTTP Public Key Pinning (HPKP) - HTTP
it has been removed in modern
browsers and is no longer supported.
...web clients such as
browsers trust a lot of these cas, which can all create certificates for arbitrary domain names.
...some
browsers might allow other hashing algorithms than sha-256 in the future.
...And 2 more matches
Redirections in HTTP - HTTP
when
browsers receive a redirect, they immediately load the new url provided in the location header.
... special redirections 304 (not modified) redirects a page to the locally cached copy (that was stale), and 300 (multiple choice) is a manual redirection: the body, presented by the
browser as a web page, lists the possible redirections and the user clicks on one to select it.
...when displaying the page, the
browser will go to the indicated url.
...And 2 more matches
A re-introduction to JavaScript (JS tutorial) - JavaScript
the most common host environment is the
browser, but javascript interpreters can also be found in a huge list of other places, including adobe acrobat, adobe photoshop, svg images, yahoo's widget engine, server-side environments such as node.js, nosql databases like the open source apache couchdb, embedded computers, complete desktop environments like gnome (one of the most popular guis for gnu/linux operating systems), and others.
...this takes the base for the conversion as an optional second argument, which you should always provide: parseint('123', 10); // 123 parseint('010', 10); // 10 in older
browsers, strings beginning with a "0" are assumed to be in octal (radix 8), but this hasn't been the case since 2013 or so.
... unless you're certain of your string format, you can get surprising results on those older
browsers: parseint('010'); // 8 parseint('0x10'); // 16 here, we see the parseint() function treat the first string as octal due to the leading 0, and the second string as hexadecimal due to the leading "0x".
...And 2 more matches
About JavaScript - JavaScript
javascript® (often shortened to js) is a lightweight, interpreted, object-oriented language with first-class functions, and is best known as the scripting language for web pages, but it's used in many non-
browser environments as well.
... besides the above implementations, there are other popular javascript engines such as:- google's v8, which is used in the google chrome
browser and recent versions of opera
browser.
... the javascriptcore (squirrelfish/nitro) used in some webkit
browsers such as apple safari.
...And 2 more matches
this - JavaScript
// in web
browsers, the window object is also the global object: console.log(this === window); // true a = 37; console.log(window.a); // 37 this.b = "mdn"; console.log(window.b) // "mdn" console.log(b) // "mdn" note: you can always easily get the global object using the global globalthis property, regardless of the current context in which your code is running.
... since the following code is not in strict mode, and because the value of this is not set by the call, this will default to the global object, which is window in a
browser.
... function f1() { return this; } // in a
browser: f1() === window; // true // in node: f1() === globalthis; // true in strict mode, however, if the value of this is not set when entering an execution context, it remains as undefined, as shown in the following example: function f2() { 'use strict'; // see strict mode return this; } f2() === undefined; // true in the second example, this should be undefined, because f2 was called directly and not as a method or property of an object (e.g.
...And 2 more matches
Mapping the width and height attributes of media container elements to their aspect-ratio - Web media technologies
this change means that the aspect ratio of the image is calculated by the
browser early on and can then be used to correct the size needed to display the image before it has loaded, if css has been applied that causes problems with its display size.
... jank problems when loading images in the olden days of web development, it was always seen as a good practice to add width and height attributes to your html <img> elements, so that when
browsers first loaded the page, they could put a correctly-sized placeholder box in the layout for each image to appear in when it finally loads.
... due to this work,
browsers are working on adding a new mechanism for sizing images before the actual image is loaded.
...And 2 more matches
Using dns-prefetch - Web Performance
when a
browser requests a resource from a (third party) server, that cross-origin’s domain name must be resolved to an ip address before the
browser can issue the request.
...this is because the ip behind your site’s domain will have already been resolved by the time the
browser sees the hint.
...
browsers that don’t support preconnect will still get some added benefit by falling back to dns-prefetch.
...And 2 more matches
Mobile first - Progressive web apps (PWAs)
this article offers some related ideas, looking at the concept of mobile first — the practice of designing a website so that the default layout/configuration is for mobile devices, and layouts and features for desktop
browsers are then layered on top of that default.
... if you are using mechanisms like feature detection and matchmedia to conditionally load scripting functionality depending on viewport size, feature support, etc., you should just load the very basics that pretty much all
browsers will need first, then progressively enhance
browsers higher up the food chain.
... feature detection feature detection involves doing tests (usually in javascript) to determine whether a
browser supports a certain feature, and then serving css or javascript to suit that situation.
...And 2 more matches
dominant-baseline - SVG: Scalable Vector Graphics
if there is no baseline table in the nominal font, or if the baseline table lacks an entry for the desired baseline, then the
browser may use heuristics to determine the position of the desired baseline.
...the choice of which font baseline-table to use from the baseline-tables in the font is
browser dependent.
...the choice of which baseline-table to use from the baseline-tables in the font is
browser dependent.
...And 2 more matches
SVG and CSS - SVG: Scalable Vector Graphics
below you'll create a simple demonstration that runs in your svg-enabled
browser.
...l: azure; --segment-fill-stroke: lightsteelblue; --segment-fill-stroke-width: 1; --segment-edge-fill: none; --segment-edge-stroke: deepskyblue; --segment-edge-stroke-width: 3; --segment-fill-fill-hover: plum; --segment-fill-stroke-hover: none; --segment-edge-stroke-hover: slateblue; } /* non-standard way of styling elements referenced via <use> elements, supported by some older
browsers */ #outer-petals .segment-fill { fill: azure; stroke: lightsteelblue; stroke-width: 1; } #outer-petals .segment-edge { fill: none; stroke: deepskyblue; stroke-width: 3; } #outer-petals .segment:hover > .segment-fill { fill: plum; stroke: none; } #outer-petals .segment:hover > .segment-edge { stroke: slateblue; } /* inner petals */ #inner-petals { --segment-fill-fill: yell...
...ow; --segment-fill-stroke: yellow; --segment-fill-stroke-width: 1; --segment-edge-fill: none; --segment-edge-stroke: yellowgreen; --segment-edge-stroke-width: 9; --segment-fill-fill-hover: darkseagreen; --segment-fill-stroke-hover: none; --segment-edge-stroke-hover: green; } /* non-standard way of styling elements referenced via <use> elements, supported by some older
browsers */ #inner-petals .segment-fill { fill: yellow; stroke: yellow; stroke-width: 1; } #inner-petals .segment-edge { fill: none; stroke: yellowgreen; stroke-width: 9; } #inner-petals .segment:hover > .segment-fill { fill: darkseagreen; stroke: none; } #inner-petals .segment:hover > .segment-edge { stroke: green; } open the document in your svg-enabled
browser.
...And 2 more matches
Features restricted to secure contexts - Web security
current features available only in secure contexts this section lists all the apis available only in secure contexts, along with
browser versions the limitation was introduced in, as appropriate.
... note: only the
browsers that actually support secure contexts are listed in this document.
...ed not supported 51 web authentication api 65 in preview (17) in development 60 web bluetooth 56 not supported not supported not supported web midi (see midiaccess, for example) 43 not supported not supported not supported web crypto api 60 79 not supported 75 secure context restrictions that vary by
browser some
browsers may decide to disable certain apis in non-secure contexts or apply other restrictions/security measures, despite the spec not requiring them.
...And 2 more matches
Transport Layer Security - Web security
it was updated to ssl 3.0 not long after, and as its usage expanded, it became clear that a common, standard encryption technology needed to be specified to ensure interoperability among all web
browsers and servers.
...in general, you should try to limit cipher support to the newest ciphers possible which are compatible with the
browsers you want to be able to connect to your site.
...tls 1.3 is enabled in some
browsers, including the 0-rtt mode.
...And 2 more matches
Porting the Library Detector - Archive of obsolete content
how the library detector works all the work is done inside a single file, librarydetector.xul this contains: a xul overlay a script the xul overlay adds a box element to the
browser's status bar: the script does everything else.
... the script listens to g
browser's domcontentloaded event.
... finally, it listens to g
browser's tabselect event, to update the contents of the box for that window.
...however, instead of maintaining its own state by listening for g
browser events and updating the user interface, the content script will just run when it's loaded, collect the array of library names, and post it back to main.js: function testlibraries() { var win = unsafewindow; var librarylist = []; for(var i in ld_tests) { var passed = ld_tests[i].test(win); if (passed) { var libraryinfo = { name: i, version: passed.version ...
context-menu - Archive of obsolete content
like other apis in the sdk, the context-menu api uses content scripts to let your add-on interact with pages in the
browser.
... var selection = require("sdk/selection"); and within the contentscript, reference the selected text as selection.text private windows if your add-on has not opted into private browsing, then any menus or menu items that you add will not appear in context menus belonging to private
browser windows.
... const { getmostrecent
browserwindow } = require("sdk/window/utils"); var cm = require("sdk/context-menu"); var uuid = require('sdk/util/uuid').uuid(); var uuidstr = uuid.number.substring(1,37); cm.item({ data: uuidstr+"this is a tooltip", label: "just a tigger, will never show up", contentscript: 'self.on("context", function(){self.postmessage(); return false;})', onmessage: function(){ var cmitems = getmostrece...
...nt
browserwindow().document.queryselectorall(".addon-context-menu-item[value^='"+ uuidstr +"']"); for(var i=0; i < cmitems.length; i++) cmitems[i].tooltiptext = cmitems[i].value.substring(36); } }); globals constructors item(options) creates a labeled menu item that can perform an action when clicked.
frame/utils - Archive of obsolete content
experimental provides helper functions for working with platform internals like frames and
browsers.
... usage module exports create function that takes the nsidomdocument of a privileged document and creates a
browser element in its documentelement: let { open } = require('sdk/window/utils'); let { create } = require('sdk/frame/utils'); let window = open('data:text/html,foo'); let frame = create(window.document); optionally create can be passed set of options to configure created frame even further.
... execution of scripts may easily be enabled: let { open } = require('sdk/window/utils'); let { create } = require('sdk/frame/utils'); let window = open('data:text/html,top'); let frame = create(window.document, { uri: 'data:text/html,<script>console.log("running");</script>', allowjavascript: true }); } globals functions create(document, options) creates a xul
browser element in a privileged document.
... returns frame : the new
browser element.
ui/sidebar - Archive of obsolete content
a sidebar is a vertical strip of user interface real estate for your add-on that's attached to the left-hand side of the
browser window.
...from firefox 33 onwards you can pass a
browserwindow into these methods, and they will then operate on the specified window.
... parameters window :
browserwindow the window in which to show the sidebar, specified as a
browserwindow.
... parameters window :
browserwindow the window for which to hide the sidebar, specified as a
browserwindow.
Release notes - Archive of obsolete content
removed isprivatebrowsing from
browserwindow.
... added a
browserwindow parameter to sidebar.show() and sidebar.hide(), to control the window for which the sidebar will be shown or hidden.
... firefox 31 highlights add-on debugger added the ability to convert between high-level
browserwindow objects and dom windows, and between high-level tab objects and xul tabs.
... removed tab-
browser, app-strings and api-utils.publicconstructor details github commits made between firefox 28 and firefox 29.
Creating Event Targets - Archive of obsolete content
in this tutorial we'll create part of a module to access the
browser's places api.
...then open "index.js" and add the following code: var {cc, ci} = require("chrome"); var { xpcomutils } = require("resource://gre/modules/xpcomutils.jsm"); var bookmarkservice = cc["@mozilla.org/
browser/nav-bookmarks-service;1"] .getservice(ci.nsinavbookmarksservice); var bookmarkobserver = { onitemadded: function(aitemid, afolder, aindex) { console.log("added ", bookmarkservice.getbookmarkuri(aitemid).spec); }, onitemvisited: function(aitemid, avisitid, time) { console.log("visited ", bookmarkservice.getbookmarkuri(aitemid).spec); }, queryinterface: ...
... create a new file in "lib" called "bookmarks.js", and add the following code: var { emit, on, once, off } = require("sdk/event/core"); var {cc, ci} = require("chrome"); var { xpcomutils }= require("resource://gre/modules/xpcomutils.jsm"); var bookmarkservice = cc["@mozilla.org/
browser/nav-bookmarks-service;1"] .getservice(ci.nsinavbookmarksservice); var bookmarkobserver = { onitemadded: function(aitemid, afolder, aindex) { emit(exports, "added", bookmarkservice.getbookmarkuri(aitemid).spec); }, onitemvisited: function(aitemid, avisitid, time) { emit(exports, "visited", bookmarkservice.getbookmarkuri(aitemid).spec); }, queryinterface...
... open "bookmarks.js" and replace its contents with this code: var { emit } = require("sdk/event/core"); var { eventtarget } = require("sdk/event/target"); var { class } = require("sdk/core/heritage"); var { merge } = require("sdk/util/object"); var {cc, ci} = require("chrome"); var { xpcomutils } = require("resource://gre/modules/xpcomutils.jsm"); var bookmarkservice = cc["@mozilla.org/
browser/nav-bookmarks-service;1"] .getservice(ci.nsinavbookmarksservice); function createobserver(target) { var bookmarkobserver = { onitemadded: function(aitemid, afolder, aindex) { emit(target, "added", bookmarkservice.getbookmarkuri(aitemid).spec); }, onitemvisited: function(aitemid, avisitid, time) { emit(target, "visited", bookmarkservice.ge...
Getting started (cfx) - Archive of obsolete content
when firefox launches, in the top-right corner of the
browser you'll see an icon with the firefox logo.
...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 perform basic operations with tabs.
... developing without cfx run because cfx run restarts the
browser each time you invoke it, it can be a little cumbersome if you are making frequent changes to an add-on.
...that way you can test new changes without needing to restart the
browser: make a change to your add-on run cfx xpi post the add-on to the port specified you could even automate this workflow with a simple script.
LookupNamespaceURI - Archive of obsolete content
here is an implementation of node.lookupnamespaceuri which should work cross-
browser.
... note that all gecko-based
browsers (including firefox) support node.lookupnamespaceuri.
... this function is not necessary for gecko-based
browsers (though the function will quickly return the standard value for mozilla
browsers) when used to reflect on static documents.
...lper (node, prefix) { // adapted directly from http://www.w3.org/tr/dom-level-3-core/namespaces-algorithms.html#lookupnamespaceurialgo var i, att, htmlmode = document.contenttype, // mozilla only xmlnspattern = /^xmlns:(.*)$/; switch (node.nodetype) { case 1: // element_node (could also just test for node.element_node, etc., if supported in all
browsers) if (node.namespaceuri != null && node.prefix === prefix) { // note: prefix could be "null" in the case we are looking for default namespace return node.namespaceuri; } if (node.attributes.length) { for (i = 0; i < node.attributes.length; i++) { att = node.attribut...
Extension Etiquette - Archive of obsolete content
theming if you have xul buttons in your extension that do functions similar to ones that already exist in a
browser — for example, a feed reader that reloads and stops — use icons from the
browser's theme.
... coding practices namespace conflicts there are many namespaces which extensions often must share with other consumers, be they other add-ons, web code, or the
browser itself.
... ids and class names in html and xul documents, when extensions add elements to web pages or
browser windows.
...for example, "does an action in the
browser." documentation assume that the vast majority of your users don't have inner working knowledge of mozilla.
Interaction between privileged and non-privileged pages - Archive of obsolete content
in your extension's
browser.xul overlay, write code which listens for a custom dom event.
...mespaceuri property, or as per the dom specification, use initevent() with an event name that is itself namespaced (xml name characters only): "it is also strongly recommended that third parties adding their own events use their own prefix to avoid confusion and lessen the probability of conflicts with other new events.") in the case where your extension's overlay does not interact directly with
browser.xul, such as in a sidebar, it might be easier to add the event listener to the top-level document directly as shown below (also see: accessing the elements of the top-level document from a child window).
...ack</button> <button onclick="return something.send_request({baz: 3}, something.callback)">send {baz: 3} with callback</button> <button onclick="return something.send_request({mozilla: 3})">send {mozilla: 3} without callback</button> <button onclick="return something.send_request({firefox: 4}, something.callback)">send {firefox: 4} with callback</button> </body> </html> overlay on
browser.xul in your extension: var something = { listen_request: function(callback) { // analogue of chrome.extension.onrequest.addlistener document.addeventlistener("something-query", function(event) { var node = event.target; if (!node || node.nodetype != node.text_node) return; var doc = node.ownerdocument; callback(json.parse(node.nodevalue), doc, function(resp...
...ecurity_notes> */ function geteventdata(event) { if (event.target.ownerdocument != targetdoc) throw "event from unexpected source"; return new xml(event.target.getattribute("eventdatafrompage")); } security notes never invoke the web page's javascript functions from your extension - doing this increases the chance of creating a security hole, where a malicious web page can trick the
browser to run its code with extended privileges (just like your extension) with, for example, the ability to delete local files.
Case Sensitivity in class and id Names - Archive of obsolete content
we have discovered, however, that many authors are running into trouble with class and id names because they're used to the bugs of
browsers that don't fully support open standards.
...for example, you would not want to do something like: .urgent {color: purple;} .urgent {color: yellow;} even though these are technically two distinct class names,
browsers other than netscape 6 will treat them as though they are the same thing.
... therefore, authors should not rely on case-sensitivity as a way of creating distinct identifiers, unless they are designing solely for a truly standards-compliant
browser such as netscape 6.
...as of this writing, netscape 6 is the only
browser to honor this defined behavior; other
browsers treat both class and id names as case-insensitive.
Creating a dynamic status bar extension - Archive of obsolete content
we use the window.addeventlistener() dom function to tell firefox to call the stockwatcher.startup() function when a new
browser window is opened: window.addeventlistener("load", function(e) { stockwatcher.startup(); }, false); our new extension has two primary functions: startup() and refreshinformation().
...startup() the startup() function is called when a new
browser window is opened.
...after doing that, we install an interval routine on the
browser window by calling window.setinterval().
...it's called whenever the user clicks on the status bar panel, when our extension is first added to a
browser window, and by the interval handler to periodically update the display.
Getting the page URL in NPAPI plugin - Archive of obsolete content
there's unfortunately no trivial way to do that, but you can still do it, by asking the
browser for the page url during plugin initialization.
...tradeoffs: uses npapi only works in most
browsers does not work in mozillas older than firefox 1.0 via npp_newstream from braden mcdaniel: if you want the uri of the resource for which the plug-in is invoked, the most npapi-friendly way to do that is to get it from the npstream that is passed to npp_newstream.
... tradeoffs: npapi only probably works in all
browsers, all versions is sort of backwards (?) advantages / disadvantages ?
...tradeoffs: is inherently incompatible with other non-mozilla
browsers (i.e.
Using content preferences - Archive of obsolete content
this permits code running within chrome (in other words: extensions and the
browser itself, not web sites) to locally save preferences on a per-site basis.
... var value = prefservice.getpref(uri, "devmo.somesetting"); built-in site-specific preferences preference name menu equivalent values notes
browser.content.full-zoom view / zoom example: "1.10000002384186" (rounding variant of "1.1") related about:config preferences:
browser.zoom.full boolean, set by the menu item view / zoom / zoom text only.
...
browser.zoom.sitespecific toolkit.zoommanager.zoomvalues zoom.maxpercent and zoom.minpercent
browser.download.lastdir path of a filesystem directory related about:config preferences:
browser.download.lastdir the last directory for any site use downloadlastdir.jsm for access to these preferences.
...
browser.upload.lastdir path of a filesystem directory this preference is stored and retrieved automatically by file upload controls.
Finding the file to modify - Archive of obsolete content
it contains elements for all common ui widgets (menus, buttons, toolbars, etc.) and many sophisticated ones (trees,
browsers, color pickers).
...to add a tinderbox status icon to mozilla, we need to find the xul file that defines the structure of the
browser window.
... in the dom inspector window, go to the file menu, select the inspect a window submenu, then select the mozilla
browser window item (named after the page currently loaded in the
browser).
... the dom inspector will display the url of the xul file that defines the mozilla
browser window, which is chrome://navigator/content/navigator.xul.
In-Depth - Archive of obsolete content
normal in english web
browsers items are displayed top to bottom and left to right.
...load mozilla and one
browser window.
...click file->inspect and select the
browser window.
... click on the inspect icon and then click on the back button in the
browser window.
Supporting private browsing mode - Archive of obsolete content
to determine whether or not the
browser is permanently in private browsing mode, you can look at the privatebrowsingmode attribute on the document root.
... in addition, there is a
browser:purge-session-history notification that is sent when the
browser purges private data that extensions can watch in order to know when it's time to do the same.
... a private
browser listener helper object this helper object registers listeners for private browsing mode changes.
...private browsing for theme designers if you want to make your theme look different when used in private browsing mode, you can do so quite easily by using the browsingmode attribute in the window element in
browser.xul.
Using Breakpoints in Venkman - Archive of obsolete content
hard breakpoints can only exist in the context of a function currently "live" in the
browser.
...(note: by default, venkman hides files file that appear to be part of the
browser core; this includes extensions.
... to debug an extension, uncheck "exclude
browser files" on the debug menu and your installed extension files should appear in the loaded scripts list.) venkman also indicates that one or more breakpoints have been set in the loaded scripts view, where red dots appear next to the files in which breakpoints have been set, along with the line number where the function begins whose code is being stopped.
...when you set a breakpoint at line 81, you can start animation on the web page in the
browser window and see venkman stop execution as it enters the onflipx function.
Installer Script - Archive of obsolete content
var err = initinstall("netscape seamonkey", "
browser", "6.0.0.2000110807"); 21.
... registerchrome(content | delayed_chrome, getfolder(cf,"
browser.xpi"),"content/communicator/"); 45.
... registerchrome(content | delayed_chrome, getfolder(cf,"
browser.xpi"),"content/editor/"); 46.
... registerchrome(content | delayed_chrome, getfolder(cf,"
browser.xpi"),"content/navigator/"); 47.
findbar - Archive of obsolete content
for example, the standard findbar in firefox 3.5 looks like this on the mac: you may attach a findbar to a particular
browser element by either setting the findbar's
browserid attribute to the id of the
browser element before the findbar element is bound, or by setting the findbar's
browser property to the
browser element itself.
... attributes
browserid, findnextaccesskey, findpreviousaccesskey, highlightaccesskey, matchcaseaccesskey properties
browser, findmode methods close, onfindagaincommand, open, startfind, togglehighlight example <
browser type="content-primary" flex="1" id="content" src="about:blank"/> <findbar id="findtoolbar"
browserid="content"/> attributes
browserid type: string the id of the
browser element to which the findbar is attached.
... you should use the
browser property to get and set this value from a script.
...s inherited properties align, , allowevents, , boxobject, builder, , , , classname, , , , , collapsed, contextmenu, controllers, database, datasources, dir, , , flex, height, hidden, id, , , left, , maxheight, maxwidth, menu, minheight, minwidth, , , , , , , observes, ordinal, orient, , pack, , persist, , , , ref, resource, , , , , statustext, style, ,, tooltip, tooltiptext, top, width
browser type:
browser element lets you set and get the
browser in which the findbar is located.
swapDocShells - Archive of obsolete content
« xul reference home swapdocshells( other
browser ) return type: no return value swaps the content, history and current state of this
browser with another
browser.
... during the swap, pagehide and pageshow events are fired on both
browsers.
... this method can be used to move
browser between windows or tear off a
browser into a new window.
... note: both
browsers must be either standalone
browsers or embedded in a tab
browser.
ContextMenus - Archive of obsolete content
for instance, the firefox
browser applies a single context menu to the
browser area which displays web pages.
... 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 platforms, one of the items in a context menu is marked as being a default operation.
...in this example, the triggernode property is checked for a popup attached to a
browser to determine whether an image is clicked: <script> function showhideitems(aevent) { // aevent.target is the popup for which the popupshowing event fired.
...eloadingcontent && element.currenturi); document.getelementbyid("enlarge").hidden = !isimage; document.getelementbyid("details").hidden = !isimage; } </script> <menupopup id="contentareacontextmenu" onpopupshowing="showhideitems(event)"> <menuitem label="copy"/> <menuitem id="enlarge" label="enlarge image"/> <menuitem id="details" label="image details"/> </menupopup> <
browser src="http://www.mozilla.org" context="contentareacontextmenu"/> when the popupshowing event is fired, the showhideitems function is called.
The Joy of XUL - Archive of obsolete content
the user interface for all of mozilla's core applications (
browser, messenger, address book, etc.) is written in xul with one single code base supporting all mozilla platforms.
...designers who are experienced in building web applications using w3c standard technologies can leverage this experience from the
browser directly to the desktop.
... xul blurs the distinction between desktop application and internet
browser apps because it is firmly entrenched in both worlds.
... whether you need to migrate an existing web application to the desktop, are looking for a technology that will enable you to easily port your applications to multiple platforms, or want to integrate your own cool features into the
browser, xul warrants serious consideration.
Commands - Archive of obsolete content
this works well for a
browser, since editing commands invoked from the main menu will work inside the content area.
... note that html also has a commands and controller system although you can't use it on unprivileged web pages, but you may use it from, for example, a
browser extension.
... try opening the example below (source view) in a
browser window and selecting items from the list.
... you'll notice that the delete command on the
browser's edit menu is enabled and that selecting it will delete a row.
Skinning XUL Files by Hand - Archive of obsolete content
when this day comes, skins defined in a global skin file will be applied to a whole application -- like the mozilla
browser -- so that all the various windows and parts will look consistent.
... finally, mozilla provides some special extensions to the cascading style sheets specification that allow even more control over the way that xul is skinned within the
browser.
... when you reload the xul file you have been working on, the box element you have used to create the navigation area in the xul file appear as follows: the skinned
browser is not much to look at right now -- and you may note that this basic skin has transgressed upon some of the skinning guidelines because it overrides color information, but you can get a sense of what the possibilities are with the combination of the xul structure and the style rules of css.
... the purpose of this split between xul and its skins -- and between the global skin and whatever custom styles you might create -- is to enable the dynamic skinning of applications such as the mozilla
browser.
The Implementation of the Application Object Model - Archive of obsolete content
what content developers want from the next release of mozilla is a standards-compliant
browser.
... if we ship a
browser that does not have 100% support for css2, for example, but we've extended html by adding 20-30 new tags, people are going to put down their blinders and see only the fact that we were off adding a whole slew of new stuff to html when we could have been firming up our standards story.
...yes, you'd probably ship a
browser slightly faster than with the xul-based approach, but the features that would be lost are too compelling to ignore.
...the additional cost up front to implement xul is worth it for the amount of time it will save in future versions of the
browser.
promptBox - Archive of obsolete content
it's returned by the tab
browser method gettabmodalpromptbox method.
... a tab may have multiple prompts on it; the tabmodalpromptshowing attribute on the tab
browser will tell you how many prompts a given tab has.
... listprompts() returns a list of all the prompts on the tab
browser.
... return value a nodelist containing all of the prompt elements on the tab
browser.
window - Archive of obsolete content
this is used to hide chrome when showing in-
browser ui such as the about:addons page, and causes the toolbars to be hidden, with only the tab strip (and, if currently displayed, the add-on bar) left showing.
...this might be used, for example, to distinguish between a
browser window and an editor window.
... values for window type as found on mxr: http://mxr.mozilla.org/mozilla-release/search?string=windowtype navigator:
browser - looks like if window has g
browser it has this window type devtools:scratchpad - scratchpad windows navigator:view-source - the view source windows properties inherited properties align, , allowevents, , boxobject, builder, , , , classname, , , , , collapsed, contextmenu, controllers, database, datasources, dir, , , flex, height, hidden, id, , , left, , maxheight, maxwidth, menu, minheight, minwidth, , , , , , , observes, ordinal, orient, , pack, , persist, , , , ref, resource, , , , , statustext, style, ,, tooltip, tooltiptext, top, width methods ...
... to add a favicon to the address bar and
browser tab (ie dialog is not a popup) then use the following code snippet to use the html namespace and link.
Extentsions FAQ - Archive of obsolete content
var tab = g
browser.addtab( url ); // and if you want it to load in the foreground: g
browser.selectedtab = tab; is it possible to read the html-code of the current url/site?
... in the debug menu, uncheck exclude
browser files.
... http://lxr.mozilla.org/mozilla1.8/so...ents/ns
browser...
...there's a bug in bugzilla about stacking other widgets on top of
browser/iframe, which hopefully will be fixed for gecko 1.9.
NPN_GetURLNotify - Archive of obsolete content
« gecko plugin api reference «
browser side plug-in api summary requests creation of a new stream with the contents of the specified url; gets notification of the result.
... for requests that complete unsuccessfully, the
browser calls npp_urlnotify() as soon as possible.
... for requests that complete successfully: if the target is non-null, the
browser calls npp_urlnotify() after it has finished loading the url.
... if the target is null, the
browser calls npp_urlnotify() after closing the stream by calling npn_destroystream().
NPN_RequestRead - Archive of obsolete content
description for a seekable stream, the
browser sends data only in response to requests by the plug-in.
...if the plug-in requests multiple ranges (either through a list of npbyterange objects in a single call to npn_requestread(), or multiple calls to npn_requestread()), the
browser can write individual ranges in any order, and with any number of npp_writeready() and npp_write() calls.
... the plug-in must allocate npbyterange objects, which the
browser copies if necessary.
... if the stream is not inherently seekable, the stream must have been put in np_seek mode initially (since the
browser must cache all the stream data on disk in order to access it randomly).
NPP_Destroy - Archive of obsolete content
the
browser calls this function when a plug-in instance is deleted, typically because the user has left the page containing the instance, closed the window, or quit the
browser.
...ownership of the buf field of the npsaveddata structure passes from the plug-in to the
browser when npp_destroy returns.
... the
browser can and will discard this data based on arbitrary criteria such as its size and the user's page history.
... to ensure that the
browser does not crash or leak memory when the saved data is discarded, npsaveddata's buf field should be a flat structure (a simple structure with no allocated substructures) allocated with npn_memalloc.
NPP_HandleEvent - Archive of obsolete content
description the
browser calls npp_handleevent to tell the plug-in when events take place in the plug-in's window or drawable area.
... ms windows the
browser gives each windowed plug-in its own native window, often a child window of the
browser window, to draw into.
... mac os the
browser does not give a windowed plug-in a native window, because the mac os platform does not support child windows.
... instead, the windowed plug-in draws into the graphics port associated with the the
browser window, at the offset that the
browser specifies.
NPP_New - Archive of obsolete content
instance contains instance-specific private data for the plug-in and the
browser.
...values: np_embed: (1) instance was created by an embed tag and shares the
browser window with other content.
...if non-null, the
browser passes ownership of the npsaveddata object back to the plug-in.
...the
browser ignores any non-standard attributes within an embed tag.
NPSavedData - Archive of obsolete content
can be any reasonable size; its contents are private to the plug-in and are not modified by the
browser.
... description the npsaveddata object contains a block of per-instance information that the
browser saves after the instance is deleted.
...you can use the plug-in's npp_destroy() function to allocate an npsaveddata object using the npn_memalloc() function, fill in the fields, and return it to the
browser as an output parameter.
...if the user revisits a web page that contains a plug-in, the
browser returns the npsaveddata to the new instance of the plug-in in a call to npp_new().
NP_Initialize - Archive of obsolete content
description the
browser calls this function only once: when a plug-in is loaded, before the first instance is created.
... this is the first function that the
browser calls.
... np_initialize tells the plug-in that the
browser has loaded it and provides global initialization.
... after the last instance of a plug-in has been deleted, the
browser calls np_shutdown, where you can release allocated memory or resources.
Theme changes in Firefox 3.5 - Archive of obsolete content
core,
browser and toolkit changes requiring theme updates there are a number of changes in the
browser that may require you to make changes to your theme.
...
browser.xul bug 463189 added a new attribute on the xul window element of
browser.xul named browsingmode.
... this attribute can be used to style different parts of the
browser window inside the private browsing mode.
...to do this only for 3.5 use a css selector that is only supported in 3.5, like so: window:not([active="true"]) menubar>menu:nth-child(1n) { color:threedshadow } private browsing: show private browsing state by coloring the url bar, or by adding an icon to the toolbox/tab
browserbar.
Using Web Standards in your Web Pages - Archive of obsolete content
"
browser makers are no longer the problem.
... 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 conform to the world wide web consortium (w3c) web standards.
...every proposed w3c web standards replacement in this article is working without a problem in modern
browsers like msie 7, firefox 2, opera 9, safari 3, konqueror 3.5+, icab 4, etc.
... contents benefits of using web standards making your page using web standards - how to using the w3c dom developing cross
browser and cross platform pages using xmlhttprequest summary of changes references original document information author(s): mike cowperthwaite, marcio galli, jim ley, ian oeschger, simon paquet, gérard talbot last updated date: may 29, 2008 copyright information: portions of this content are © 1998–2008 by individual mozilla.org contributors; content available under a creative commons lic...
Issues Arising From Arbitrary-Element hover - Archive of obsolete content
this innovation, first introduced by microsoft® internet explorer and later adopted into the css specification, is very popular for the styling of text links, particularly those that are supposed to look and act like javascript-driven "rollovers." however, advancing css support in
browsers has caused some unexpectedly aggressive hovering behavior on some pages.
... gecko behavior in
browsers based on netscape gecko builds later than 20020410 (netscape 6.1+), :hover styles can be applied to any element in a document.
...the most reliable fix is to add the anchor element to the selectors, like this: a:hover {color: red;} a.nav:hover {color: red;} in an attempt to avoid causing problems for legacy documents,
browsers based on mozilla 1.0 and later (netscape 7+) include code that causes bare pseudo-classes to be restricted only to links if the document is rendered in "quirks" mode.
... in
browsers based on the engine found in mozilla 1.3b and later, this quirk is extended to cover selectors that combine a bare class selector with the :hover pseudo-class (see bug 169078 for details).
asm.js - Game development
emscripten, a c/c++ to javascript compiler, emits asm.js code to make it run with near native performance on several
browsers.
...firefox is the only
browser to do this right now.
... using a subset of javascript asm.js is already supported by major web
browsers.
... since asm.js runs in a
browser it depends heavily on the
browser and the hardware.
Domain sharding - MDN Web Docs Glossary: Definitions of Web-related terms
browsers limit the number of active connections for each domain.
...when multiple domains are used to serve multiple assets,
browsers are able to download more resources simultaneously, resulting in a faster page load time and improved user experience.
...as
browsers limit the number of active connections per domain, serving all the required resources from a single domain could be slow as assets need to be downloaded sequentially.
... with domain sharding, the required downloads are served from more than one domain, enabling the
browser to simultaneously download needed resources.
Houdini - MDN Web Docs Glossary: Definitions of Web-related terms
houdini is a set of low level apis that give developers the power to extend css, providing the ability to hook into the styling and layout process of a
browser’s rendering engine.
... houdini gives developers access to the css object model (cssom), enabling developers to write code the
browser can parse as css.
... the benefit of houdini is that developers can create css features without waiting for web standards specifications to define them and without waiting for every
browser to fully implement the features.
...
browsers create the cssom — including layout, paint, and composite processes — before applying any style updates found in scripts: layout, paint, and composite processes are repeated for updated javascript styles to be implemented.
Microsoft Internet Explorer - MDN Web Docs Glossary: Definitions of Web-related terms
internet explorer (or ie) is a free graphical
browser maintained by microsoft for legacy enterprise uses.
... microsoft edge is currently the default windows
browser.
...by around 2002, internet explorer had become the most used
browser in the world, but has since lost ground to chrome, firefox, edge, and safari.
... explorer on wikipedia internet explorer versions on wikipedia learning about internet explorer http://windows.microsoft.com/en-us/internet-explorer/download-ie http://windows.microsoft.com/en-us/windows7/getting-started-with-internet-explorer-9 http://windows.microsoft.com/en-us/internet-explorer/internet-explorer-help http://windows.microsoft.com/en-us/internet-explorer/make-ie-default-
browser#ie=ie-11 technical reference http://windows.microsoft.com/en-us/internet-explorer/products/ie-8/system-requirements http://windows.microsoft.com/en-us/internet-explorer/products/ie-9/system-requirements http://support.microsoft.com/kb/969393 ...
Creating fancy letterheaded paper - Learn web development
add another background declaration that just adds the top image to the top of the letter, as a fallback for
browsers that don't support the previous declaration.
... now comment out the filter and implement the drop shadow in a different (slightly more cross-
browser compatible) way, which still follows the shape of the round image.
... hints and tips remember that you can create a fallback for older
browsers by putting the fallback version of a declaration first, followed by the version that works across newer
browsers only.
... older
browsers will apply the first declaration and ignore the second one, whereas newer
browsers will apply the first one, then override it with the second one.
Pseudo-classes and pseudo-elements - Learn web development
once again the relevant mdn page for each selector is helpful in explaining
browser support.
...modern
browsers support the early pseudo-elements with single- or double-colon syntax for backwards compatibility.
... ::grammar-error matches a portion of the document containing a grammar error as flagged by the
browser.
... ::spelling-error matches a portion of the document containing a spelling error as flagged by the
browser.
CSS selectors - Learn web development
it is a pattern of elements and other terms that tell the
browser which html elements should be selected to have the css property values inside the rule applied to them.
... in css, selectors are defined in the css selectors specification; like any other part of css they need to have support in
browsers for them to work.
... the majority of selectors that you will come across are defined in the level 3 selectors specification, which is a mature specification, therefore you will find excellent
browser support for these selectors.
...i have also included a link to the mdn page for each selector where you can check
browser support information.
Sizing items in CSS - Learn web development
you should, however, not use this technique to load really large images and then scale them down in the
browser.
... viewport units the viewport — which is the visible area of your page in the
browser you are using to view a site — also has a size.
...to see the example change when you change the viewport size you will need to load the example in a new
browser window that you can resize (as the embedded <iframe> that contains the example shown above is its viewport).
... open the example, resize the
browser window, and observe what happens to the size of the box and text.
Styling tables - Learn web development
unfortunately, it doesn't look good when rendered on the screen (see it live at punk-bands-unstyled.html): with only the default
browser styling it looks cramped, hard to read, and boring.
...yes, we could have put both the background image and the linear gradient on the <thead> and <tfoot> elements using multiple background images, but we decided to do it separately for the benefit of older
browsers that don't support multiple background images or linear gradients.
... lastly, we've given the entire table a solid background color so that
browsers that don't support the :nth-child selector still have a background for their body rows.
...this includes information on using
browser devtools to find solutions to your problems.
The box model - Learn web development
the
browser renders this as a block box, so the paragraph begins on a new line, and expands to the full width available to it.
... by default,
browsers use the standard box model.
...by doing this you are telling the
browser to take the border box as the area defined by any size you set.
... use
browser devtools to view the box model your
browser developer tools can make understanding the box model far easier.
Test Your Skills: Fundamental layout comprehension - Learn web development
opening the index.html file in a
browser should give you a page with basic styling but no layout, which should look something like the image seen below.
... this starting point has all of the content of your layout as displayed by the
browser in normal flow.
...the columns should be a flexible size so that if the
browser window shrinks smaller the columns become narrower.
... in this module introduction to css layout normal flow flexbox grid floats positioning multiple-column layout responsive design beginner's guide to media queries legacy layout methods supporting older
browsers fundamental layout comprehension assessment ...
Practical positioning examples - Learn web development
but not only that — we'll give it fixed position so that it stays in the same position in the
browser window.
...change your .info-box rule to get rid of margin: 0 auto; (we no longer want the info-box centered), add position: fixed;, and stick it to the top of the
browser viewport.
... next, we set a fixed width on the panel, and make its height the entire height of the
browser viewport.
... in this module introduction to css layout normal flow flexbox grid floats positioning multiple-column layout responsive design beginner's guide to media queries legacy layout methods supporting older
browsers fundamental layout comprehension assessment ...
How do you set up a local testing server? - Learn web development
remote files throughout most of the learning area, we tell you to just open your examples directly in a
browser — this can be done by double clicking the html file, dragging and dropping it into the
browser window, or choosing file > open...
...some
browsers (including chrome) will not run async requests (see fetching data from the server) if you just run the example from a local file.
...you can go to this server by going to the url localhost:8000 in your web
browser.
...at this point you should be able to run the python flask examples using for example python3 python-example.py, then navigating to localhost:5000 in your
browser.
Common questions - Learn web development
it is the mechanism used by
browsers to retrieve any published resource on the web.
... what are
browser developer tools?
... every
browser features a set of devtools for debugging html, css, and other web code.
... this article explains how to use the basic functions of your
browser's devtools.
Test your skills: Advanced styling - Learn web development
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.
... first of all, try giving the search box a consistent width, height, padding, and border color across
browsers.
... you'll find that some
browsers will not behave in terms of the form element's height.
... one thing that is inconsistent across
browsers (particularly looking at safari here) is the position of the standard blue focus outline.
CSS basics - Learn web development
paste the following line in the head (between the <head> and </head> tags): <link href="styles/style.css" rel="stylesheet"> save index.html and load it in your
browser.
...the
browser ignores comments as it renders the code.
...that happens because
browsers apply default styling to the <h1> element (among others).
...to eliminate the gap, we overwrite the
browser's default styling with the setting margin: 0;.
Define terms with HTML - Learn web development
i'm feeling blue but we're constantly defining keywords informally, as here: firefox is the web
browser created by the mozilla foundation.
...note that <dfn> tags go around the word to be defined, not the definition (the definition consists of the entire paragraph): <p><dfn>firefox</dfn> is the web
browser created by the mozilla foundation.</p> another use for bold is to emphasize content.
...if you want a more formal relationship, or your definition consists of only one sentence rather than the whole paragraph, you can use the aria-describedby attribute to associate a term more formally with its definition: <p> <span id="ff"> <dfn aria-describedby="ff">firefox</dfn> is the web
browser created by the mozilla foundation.
... improving the visual output here's how a graphical
browser displays the foregoing list: if you want the keywords to stand out better, you could try bolding them.
HTML table advanced features and accessibility - Learn web development
save your code and open it in a
browser to see what it looks like.
...you can include the table footer right at the bottom of the table as you'd expect, or just below the table header (the
browser will still render it at the bottom of the table).
...to check this, open up one of your previous examples that doesn't include <tbody> and look at the html code in your
browser developer tools — you will see that the
browser has added this tag for you.
... try opening it in a
browser — you'll see that it looks ok, but it could stand to be improved.
JavaScript object basics - Learn web development
try entering the following line below the javascript code that's already in your file, then saving and refreshing: const person = {}; now open your
browser's javascript console, enter person into it, and press enter/return.
...i\'m ' + this.name[0] + '.'); } }; after saving and refreshing, try entering some of the following into the javascript console on your
browser devtools: person.name person.name[0] person.age person.interests[1] person.bio() person.greeting() you have now got some data and functionality inside your object, and are now able to access them with some nice simple syntax!
...every time we've been working through an example that uses a built-in
browser api or javascript object, we've been using objects, because such features are built using exactly the same kind of object structures that we've been looking at here, albeit more complex ones than in our own basic custom examples.
...as an example, the notifications api — which allows modern
browsers to fire system notifications — requires you to instantiate a new object instance using the constructor for each notification you want to fire.
Aprender y obtener ayuda - Learn web development
run code after several promises are fulfilled play a video stream from a webcam in the
browser create a linear gradient in the background of your element error messages if you are having a problem with some code and a specific error message is coming up, it is often a good idea to just copy the error message into your search engine and use it as the search term.
...
browser testing it is often a good idea to see if your problem is affecting all
browsers, or whether it only occurs in one or a small number of
browsers.
... if it is only affecting one
browser, for example, you can use that
browser to narrow down the search.
... example searches might look like: <video> playback doesn't work in the ios
browser.
Server-side web frameworks - Learn web development
previous overview: first steps next the previous article showed you what the communication between web clients and servers looks like, the nature of http requests and responses, and what a server-side web application needs to do in order to respond to requests from a web
browser.
... 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 information in http responses.
...running a web server on a raspberry pi, drone controllers, etc.) express (node.js/javascript) express is a fast, unopinionated, flexible and minimalist web framework for node.js (node is a
browserless environment for running javascript).
... built-in testing facility and code formatter (deno fmt) (javascript)
browser compatibility: deno programs that are written completely in javascript excluding the deno namespace (or feature test for it), should work directly in any modern
browser.
Getting started with Svelte - Learn web development
while frameworks like react and vue do the bulk of their work in the user's
browser while the app is running, svelte shifts that work into a compile step that happens only when you build your app, producing highly-optimized vanilla javascript.
...your
browser will display something like this: application structure the starter template comes with the following structure: moz-todo-svelte ├── readme.md ├── package.json ├── package-lock.json ├── rollup.config.js ├── .gitignore ├── node_modules ├── public │ ├── favicon.ico │ ├── index.html │ ├── global.css │ └── build �...
... you can see this in action by opening localhost:5000 in a new
browser tab, right/ctrl-clicking on the hello world!
...it looks like so: to start a repl, open your
browser and navigate to https://svelte.dev/repl.
Getting started with Vue - Learn web development
babel.config.js: this is the config file for babel, which transforms modern javascript features being used in development code into older syntax that is more cross-
browser compatible in production code.
... .
browserslistrc: this is a config for
browserslist.
... you can use this to control which
browsers your tooling optimizes for.
... if you navigate to the “local” address in a new
browser tab (this should be something like http://localhost:8080 as stated above, but may vary based on your setup), you should see your app.
The Firefox codebase: CSS Guidelines
writing cross-platform css firefox supports many different platforms and each of those platforms can contain many different configurations: windows 7, 8 and 10 default theme aero basic (windows 7, 8) windows classic (windows 7) high contrast (all versions) linux macos file structure the
browser/ directory contains styles specific to firefox the toolkit/ directory contains styles that are shared across all toolkit applications (thunderbird and seamonkey) under each of those two directories, there is a themes directory containing 4 sub-directories: shared linux osx windows the shared directories contain styles shared across all 3 platforms, while the other 3 directories contain...
...theme css the following directories also contain css:
browser/base/content/ toolkit/content/ these directories contain content css, that applies on all platforms, which is styling deemed to be essential for the
browser to behave correctly.
... when importing your stylesheets, it's best to import the content css before the theme css, that way the theme values get to override the content values (which is probably what you want), and you're going to want them both after the global values, so your imports will look like this: <?xml-stylesheet href="chrome://global/skin/global.css" type="text/css"?> <?xml-stylesheet href="chrome://
browser/content/path/module.css" type="text/css"?> <?xml-stylesheet href="chrome://
browser/skin/path/module.css" type="text/css"?> [1] -moz-appearance is tricky.
... generally, when specifying -moz-appearance: foo; you're giving hints as to how something should act, however -moz-appearance: none; is probably saying 'ignore
browser preconceptions - i want a blank sheet', so that's more visual.
ESLint
setting up eslint ./mach eslint --setup running eslint eslint can be run via: ./mach lint -l eslint you can limit running it to a specific directory with: ./mach lint -l eslint
browser/components or work directory changes: ./mach lint -l eslint -w or outgoing commits only: ./mach lint -l eslint -o see ./mach eslint --help for more options when running eslint.
...here are some common issues: my script is imported into the global
browser.xul scope.
... add a line like: /* eslint-env mozilla/
browser-window */ or enable the rule in a .eslintrc.js if it will apply to the whole directory.
... ensure there is a .eslintrc.js file that extends one of: "plugin:mozilla/
browser-test" "plugin:mozilla/chrome-test" "plugin:mozilla/mochitest-test" "plugin:mozilla/xpcshell-test" see other test directories for how to do this.
Obsolete Build Caveats and Tips
although it may still work in some
browsers, its use is discouraged since it could be removed at any time.
...although it may still work in some
browsers, its use is discouraged since it could be removed at any time.
... if you are building from an older project branch that still uses cvs, you will need to set moz_co_project to the appropriate value or values, using a comma-separated list, such as "mk_add_options moz_co_project=
browser,mail,calendar,suite,xulrunner".
... note: starting in gecko 5.0, if you don't specify an application, --enable-application=
browser is assumed, thereby building firefox.
HTMLIFrameElement.executeScript()
the executescript() method of the htmliframeelement interface allows a specified script to be executed against a page loaded in the
browser <iframe>.
... note: use of the
browser api requires a privileged app, and
browser and/or embed-apps permissions, depending on what you want to do.
... see using the
browser api for more details.
... examples var request1 =
browser.executescript( var a = 3; a + 3 , {url: 'http://example.com/index.html'}); request1.onsuccess = function() { console.log(request1.result); // 6 } var request2 =
browser.executescript( new promise((resolve, reject) => { settimeout(function() { resolve(6); }, 1000}) ) , {origin: 'http://example.com'}); request2.onsuccess = function() { console.log(request2.result); // 6...
HTMLIFrameElement.sendMouseEvent()
the sendmouseevent() method of the htmliframeelement interface allows you to fake a mouse event and send it to the
browser <iframe>'s content.
... x a number representing the x position of the cursor relative to the
browser <iframe>'s visible area in css pixels.
... y a number representing the y position of the cursor relative to the
browser <iframe>'s visible area in css pixels.
... examples var
browser = document.queryselector('iframe');
browser.sendmouseevent("mousemove", x, y, 0, 0, 0);
browser.sendmouseevent("mousedown", x, y, 0, 1, 0);
browser.sendmouseevent("mouseup", x, y, 0, 1, 0); specification not part of any specification.
HTMLIFrameElement.sendTouchEvent()
the sendtouchevent() method of the htmliframeelement allows you to fake a touch event and send it to the
browser <iframe>'s content.
... x an array of numbers representing the x position of each touch point relative to the
browser <iframe>'s visible area in css pixels.
... y an array of numbers representing the y position of each touch point relative to the
browser <iframe>'s visible area in css pixels.
... examples var
browser = document.queryselector('iframe');
browser.sendtouchevent("touchstart", [1], [x], [y], [2], [2], [20], [0.5], 1, 0); specification not part of any specification.
Script security
like any web
browser, gecko can load javascript from untrusted and potentially hostile web pages and run it on the user's computer.
...the rules for determining whether an object is same-origin with another, and what access is allowed cross-origin, are now mostly standardized across
browsers.
... having the
browser front end in javascript has benefits: it can be much quicker to develop in javascript than in c++, and contributors do not need to learn c++.
... this also enables the script security model to treat compartments that have expanded principals more like part of the
browser than like web content.
Localization and Plurals
chrome://mozapps/locale/downloads/do...tes,hours,days chrome://mozapps/locale/downloads/do...dstitlepercent chrome://
browser/locale/
browser.prop...auseddownloads version history 0.1: initial version with pluralrule check, properties input loading, table generation, sample output display 0.2: use pluralform.numforms() to get the number of forms instead of figuring out locally to better support future rules - requires build from 2007/01/27 or later 0.3: generate a list of what numbers fall into which plural form to ...
...this module provides a couple methods for localizing to the
browser's current locale as well as getting methods to localize to a desired plural rule.
... the latter ability of specifying a plural rule is useful for extensions because the extension doesn't necessarily have to be localized to the
browser's locale.
... components.utils.import("resource://gre/modules/pluralform.jsm"); methods: get these methods make use of the
browser's current locale specified by chrome://global/locale/intl.properties's pluralrule value.
MathML Torture Test
alue="texgyrebonum">tex gyre bonum</option> <option value="texgyrepagella">tex gyre pagella</option> <option value="texgyreschola">tex gyre schola</option> <option value="texgyretermes">tex gyre termes</option> <option value="xits">xits</option> </select> <br/> </p> <table> <tr> <td></td> <th scope="col">as rendered by tex</th> <th scope="col">as rendered by your
browser</th></tr> <tr> <td>1</td> <td><img src="https://udn.realityripple.com/samples/45/d5a0dbbca3.png" width="38" height="22" alt="texbook, 16.2-16.3" /></td> <td> <math display="block"> <mrow> <msup> <mi>x</mi> <mn>2</mn> </msup> <msup> <mi>y</mi> <mn>2</mn> </msup> ...
...it compares the rendering by the xetex engine using the default latin modern math font against the mathml rendering by your
browser using the default math font, or an alternative opentype math fonts.
... to get the best rendering, be sure to have appropriate mathematical fonts installed on your system and to use a
browser with opentype math support such as gecko 31.0 (firefox 31.0 / thunderbird 31.0 / seamonkey 2.28) or higher.
...finally, you may want to check this table comparing how the tests are read by various screen readers for mozilla
browsers.
TimerFirings logging
-991946880[7f46c365ba00]: [6775] fn timer (slack 100 ms): layeractivitytracker -991946880[7f46c365ba00]: [6775] fn timer (one_shot 250 ms): presshell::spaintsuppressioncallback -991946880[7f46c365ba00]: [6775] fn timer (one_shot 160 ms): ns
browserstatusfilter::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 information.
... -991946880[7f46c365ba00]: [6775] fn timer (one_shot 0 ms): [content] chrome://
browser/content/tab
browser.xml:1816:0 711637568[7f3219c48000]: [6835] fn timer (one_shot 100 ms): [content] http://edition.cnn.com/:5:7231 711637568[7f3219c48000]: [6835] fn timer (one_shot 100 ms): [content] http://a.visualrevenue.com/vrs.js:6:9423 these js timers are annotated with [content] and show the javascript source location where they were created.
...300x600;click=http://pixel.mathtag.com/click/img?mt_aid=2744535504761193354&mt_id=1895890&mt_adid=148611&mt_sid=973379&mt_exid=9&mt_inapp=0&mt_uuid=353d5460-19f6-4400-9bbd-d0fcc3bcf595&mt_3pck=http%3a//beacon-apac-hkg1.rubiconproject.com/beacon/t/d1f9921d-4e47-448f-b6ba-36cae1c31b65/&redirect=;ord=2744535504761193354?:83:0 94 801266240[7f7c1f248000]: [7163] fn timer (one_shot 160 ms): ns
browserstatusfilter::timeouthandler 92 -495057024[7f74e105ba00]: [7108] fn timer (one_shot 160 ms): ns
browserstatusfilter::timeouthandler the first column shows how many times the particular line appeared.
... 204 fn timer (one_shot): [content] http://widgets.outbrain.com/outbrain.js:20:330 186 fn timer (one_shot): ns
browserstatusfilter::timeouthandler 138 fn timer (one_shot): [content] https://self-repair.mozilla.org/repair/:7:13669 118 fn timer (one_shot): [content] http://a.visualrevenue.com/vrs.js:6:9423 108 fn timer (slack): layeractivitytracker 104 fn timer (slack): nsidocument::selectorcache 104 fn timer (slack): cctimerfired ...
A brief guide to Mozilla preferences
preferences files to protect privacy by preventing inadvertent loading of a preferences file in the
browser, the first line of the file is made un-parseable and skipped on loading.
...irefox ships default preferences in several files, all in the application directory: greprefs.js - preferences shared by all applications using the mozilla platform 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.
...
browser/app/profile/firefox.js - defaults specific to firefox
browser/app/profile/firefox-branding.js - defaults specific to the specific kind of firefox being installed (nightly, aurora, beta, release)
browser/defaults/preferences/firefox-l10n.js - defaults specific to the installed language of firefox.
... changing defaults a systems administrator can modify the default preferences in two ways: the administrator may add an all-companyname.js preference file (install_directory/
browser/defaults/preferences/all-companyname.js).
An overview of NSS Internals
instead of simply verifying that the requester of a certificate is in control of an administrative email address at the desired web site's domain, it's required that the ca performs a verification of real world identity documents (such as a company registration document with the country's authority), and it's also required that a
browser software performs a revocation check with the ca, prior to granting validity to the certificate.
... in order to distinguish an ev certificate, cas will embed a policy oid in the certificate, and the
browser is expected to verify that a trust chain permits the end entity (ee) certificate to make use of the policy.
...(tls is a newer version of ssl with enhanced features.) when establishing an ssl connection to a server, (at least) a server certificate (and its trust chain) is exchanged from the server to the client (e.g., the
browser), and the client verifies that the certificate can be verified (including matching the name of the expected destination server).
...in other words, if your
browser or your server operates on an older nss database format, don't use the nss tools to operate on it while the other software is executing.
Running Automated JavaScript Tests
sometimes jstests are called js reftests because of how they are run in the
browser.
...(some js reftests will be skipped when run in the
browser, as it lacks some shell-specific testing functionality.) running jstests running jstests on a js shell the jstests shell harness is js/src/tests/jstests.py.
... running jstest in a
browser jstests also runs on
browser, with the following command: ./mach jstest
browser to run specific test, you can use --filter=pattern command-line argument, where pattern is a regexp pattern that is tested against file:///{path_to_obj_dir}/dist/test-stage/jsreftest/tests/jsreftest.html?test={relative_path_to_test_from_js/src/tests} string: ./mach jstest
browser --filter=pattern running jstests ...
...on treeherder when viewing treeherder after a push to the mozilla repositories, jstests run in the
browser are shown as r(j) meaning "javascript reftests".
TPS Tests
asset lists a test file will contain one or more asset lists, which are lists of bookmarks, passwords, or other types of
browser data that are relevant to sync.
... // phase declarations var phases = { "phase1": "profile1", "phase2": "profile2", "phase3": "profile1" }; // asset list // the initial list of bookmarks to be added to the
browser var bookmarks_initial = { "menu": [ { uri: "http://www.google.com", title "google.com", changes: { // these properties are ignored by calls other than bookmarks.modify title: "google" } }, { folder: "foldera" }, { folder: "folderb" } ], "menu/foldera": [ { uri: "http://www.yahoo.com", title: "testing yahoo", changes: { ...
... you will have to manually quit the
browser at each phase, but you will be able to inspect the
browser state manually.
...(note that the python testrunner will generally still kill firefox after a tps test runs for 5 or so minutes, so it's often helpful to kill the python testrunner outright, and then use aboutsync in a different instance of the
browser).
compare-locales
if you want to test the localization for de, run $ compare-locales
browser/locales/l10n.toml ./l10n/ de to check mobile, replace the previous line with: $ compare-locales mobile/android/locales/l10n.toml ./l10n/ zh-tw to check mail, suite, calendar that lives on comm-central, you can either rely on the check-out of mozilla within comm-central repository that the regular comm-central build instructions generate: $ compare-locales ./comm-central/mail/locales/l10n.t...
...to get a single result across the projects, specify the --unified flag: $ compare-locales --unified
browser/locales/l10n.toml mobile/android/locales/l10n.toml ./l10n/ de cross-channel and compare-locales if you're working against the gecko-strings cross-channel repository, the toml configuration files are in the _configs subdirectory,
browser.toml, mobile_android.toml, mail.toml and calendar.toml, and suite.toml.
... ab-cd
browser chrome/
browser browser.dtd +backforwardmenu.tooltip +fullzoomenlargecmd.commandkey3 +fullzoomreducecmd.commandkey2 +fullzoomresetcmd.commandkey2 +organizebookmarks.label -showallbookmarkscmd2.label migration/migration.dtd -importfromfile.accesskey -importfromfile.label +importfromhtmlfile.accesskey +importfromhtmlfile.label you can assume changed strings when you see entities removed and added with a similar name.
... 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.
AT APIs Support
k-meleon - light, ultra-fast and more advanced (fully configurable) gecko-based web
browser available on the windows platform on linux/unix platform yelp help viewer - the help viewer in gnome evolution email - provides integrated mail, addressbook and calendaring functionality to users of the gnome desktop.
... on mac platform camino - web
browser for os x xul applications xul applications make full use of the gecko architecture, not only for html content, but also for the entire user interface.
... examples of xul applications: firefox - web-
browser thunderbird - email client seamonkey - web-
browser, advanced e-mail and newsgroup client, irc chat client, and html editing made simple sunbird - cross-platform calendar application kompozer - a complete web authoring system for linux desktop, microsoft windows and macintosh users to rival programs like frontpage and dreamweaver.
...the mozilla keyboard shortcuts for content are similar to what is used in other
browsers.
Retrieving part of the bookmarks tree
first, you need to get an empty query and options objects from the history service: var historyservice = components.classes["@mozilla.org/
browser/nav-history-service;1"] .getservice(components.interfaces.nsinavhistoryservice); var options = historyservice.getnewqueryoptions(); var query = historyservice.getnewquery(); find the folder you want to get known folder ids are retrieved from the bookmarks service.
...this example will get the id of the bookmarks toolbar: var bookmarksservice = components.classes["@mozilla.org/
browser/nav-bookmarks-service;1"] .getservice(components.interfaces.nsinavbookmarksservice); var toolbarfolder = bookmarksservice.toolbarfolder; the placesroot is the root folder in the whole places hierarchy.
...otherwise, it will continue to get observer notifications and update itself, slowing down the whole
browser.
...complete code listing var historyservice = components.classes["@mozilla.org/
browser/nav-history-service;1"] .getservice(components.interfaces.nsinavhistoryservice); var options = historyservice.getnewqueryoptions(); var query = historyservice.getnewquery(); var bookmarksservice = components.classes["@mozilla.org/
browser/nav-bookmarks-service;1"] .getservice(components.interfaces.nsinavbookmarksservice); var toolbar...
Using the Places favicon service
creating the favicon service the favicon service's contract id is @mozilla.org/
browser/favicon-service;1, so to gain access to the favicon service, you should do something like this: var faviconservice = components.classes["@mozilla.org/
browser/favicon-service;1"] .getservice(components.interfaces.nsifaviconservice); caching the favicon service stores an expiration time for each favicon.
...most of the time, the favicon will be served from the
browser's cache and will have minimal performance impact.
...expiration is handled by
browser/components/places/src/nsnavhistoryexpire.cpp as described in places design.
... getting favicon images you can use favicons in the
browser ui using special annotation uris.
Using the Places livemark service
initiating the livemark service before using the livemark service, you need to obtain an instance: var livemarkservice = components.classes["@mozilla.org/
browser/livemark-service;2"] .getservice(components.interfaces.nsilivemarkservice); creating a new livemark the nsilivemarkservice.createlivemark() method creates a new livemark.
... var bmsvc = components.classes["@mozilla.org/
browser/nav-bookmarks-service;1"].
... update behavior five seconds after the
browser starts up, the livemark service's update timer is started.
...users can modify the default expiration time via the <tt>
browser.bookmarks.livemark_refresh_seconds</tt> preference, which indicates the expiration time in seconds.
XML Extras
the xml extras module is built by default on all platforms, and is included in the
browser installers so it is available in the nightly builds.
...bugs should be filed against the xml component in the
browser product.
...edmond woychowsky has also written articles on xml data islands in mozilla: "make xml data islands work in mozilla", "build cross-
browser xml paging code" and "implement a flexible shopping cart with xml and asp".
... xmlhttprequest.open("ahost") ok file:// documents can access http:// documents but you need to enable universal
browserread privilege in your scripts - see the javascript security: signed scripts document for more details.
Packaging WebLock
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 information on registration).
... the chrome registry lives in a series of rdf/xml files in the application directory of mozilla and other gecko-based
browsers, where new installs, user configurable data, skins, and other information are related to one another and the application itself.
... archiving resources once you have compiled all the resources that make up the weblock component and the files that make up the user interface that will be added to the
browser, you can place these within a subdirectory called weblock.
... in mozilla and netscape
browsers, xpinstall makes this process especially easy by providing the file format (xpi) and the necessary installation scripts for doing a web-based installation.
Starting WebLock
the weblock user interface the weblock component in this tutorial uses xul to define the additional
browser ui in a cross-platform 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.
... in general, the weblock service interface needs to include the following functionality: lock - enable web locking so that any
browser in the gecko application is restricted to the white list of website domains.
...this should allow any
browser in the gecko application to browse any website regardless of the white list.
...when weblock is called, one of the first things it wants to do is read in a file that lists the urls that the
browser is allowed to load.
nsIAnnotationService
1.0 66 introduced gecko 1.9 inherits from: nsisupports last changed in gecko 2.0 (firefox 4 / thunderbird 3.3 / seamonkey 2.1) implemented by: "@mozilla.org/
browser/annotation-service;1".
... to use this service, use: var annotationservice = components.classes["@mozilla.org/
browser/annotation-service;1"] .getservice(components.interfaces.nsiannotationservice); note: the annotation service is not thread-safe.
... this means that if you create an annotation on an unvisited uri, it will get deleted when the
browser shuts down.
... this means that if you create an annotation on an unvisited uri, it will get deleted when the
browser shuts down.
nsIContentViewManager
content/base/public/nsiframeloader.idlscriptable manages the content views contained in a
browser 1.0 66 introduced gecko 2.0 inherits from: nsisupports last changed in gecko 2.0 (firefox 4 / thunderbird 3.3 / seamonkey 2.1) to obtain a reference to the view manager for a document, you can queryinterface() the nsiframeloader object to nsicontentviewmanager.
...once you have the view manager, you can call getcontentviewsin() to get a list of the content views for a given portion of the
browser display, then use those nsicontentview objects to manipulate the content views.
... methods getcontentviewsin() returns an array of nsicontentview objects representing all of the content views that intersect with the specified rectangle in the
browser.
... pixels are in chrome device pixels and are relative to the
browser element.
nsIDBFolderInfo
although it may still work in some
browsers, its use is discouraged since it could be removed at any time.
...although it may still work in some
browsers, its use is discouraged since it could be removed at any time.
...although it may still work in some
browsers, its use is discouraged since it could be removed at any time.
...although it may still work in some
browsers, its use is discouraged since it could be removed at any time.
nsIPluginHost
although it may still work in some
browsers, its use is discouraged since it could be removed at any time.
...although it may still work in some
browsers, its use is discouraged since it could be removed at any time.
...although it may still work in some
browsers, its use is discouraged since it could be removed at any time.
...ceowner aowner ); parameters amimetype aurl aowner native code only!stopplugininstance void stopplugininstance( in nsiplugininstance ainstance ); parameters ainstance native code only!useragent void useragent( in nativechar resultingagentstring ); parameters examples list all plug-ins and associated mime types and get handler info this example here logs to
browser console all the installed plug-ins and the associated mime types.
nsIPrefService
for example, if the root
browser.startup.
... is used, the branch will be able to easily access the preferences
browser.startup.page,
browser.startup.homepage, and
browser.startup.homepage_override by simply requesting page, homepage, or homepage_override.
...for example, if the root
browser.startup.
... is used, the branch will be able to easily access the preferences
browser.startup.page,
browser.startup.homepage, and
browser.startup.homepage_override by simply requesting page, homepage, or homepage_override.
nsISHistory
inherits from: nsisupports last changed in gecko 2.0 (firefox 4 / thunderbird 3.3 / seamonkey 2.1) in an embedded
browser environment, the nsiweb
browser object creates an instance of session history for each open window.
...implemented by: @mozilla.org/
browser/shistory;1.
... to create an instance, use: var shistory = components.classes["@mozilla.org/
browser/shistory;1"] .createinstance(components.interfaces.nsishistory); method overview void addshistorylistener(in nsishistorylistener alistener); nsishentry getentryatindex(in long index, in boolean modifyindex); void purgehistory(in long numentries); void reloadcurrententry(); void removeshistorylistener(in nsishistorylistener alistener); attributes attribute type description count long the number of toplevel documents currently available in session history.
...for example to control memory usage of the
browser, to prevent users from loading documents from history, to erase evidence of prior page loads and so on.
nsIWebContentHandlerRegistrar
undefined; var registeruri = 'http://mail.live.com/secure/start?action=compose&to=%s'; var myurihostname = services.io.newuri(registeruri, null, null).host; // this section here is long and daunting, but its just finding a suitable contentwindow var domwindows = services.wm.getenumerator(null); while (domwindows.hasmoreelements()) { var adomwindow = domwindows.getnext(); if (adomwindow.g
browser) { if (adomwindow.g
browser.tabcontainer) { //adomwindow has tabs var tabs = adomwindow.g
browser.tabcontainer.childnodes; for (var i = 0; i < tabs.length; i++) { console.log(tabs[i].linked
browser.contentwindow.location); if (tabs[i].linked
browser.contentwindow.location.hostname == myurihostname) { htmlc...
...ontentwindow = tabs[i].linked
browser.contentwindow; break; //break for loop } } if (htmlcontentwindow) { break; //break while loop } } else { //adomwindow doest have any tabs if (adomwindow.g
browser.contentwindow.location.hostname == myurihostname) { htmlcontentwindow = adomwindow.contentwindow; break; } } } else { //adomwindow is a popup window if (adomwindow.location.hostname == myurihostname) { htmlcontentwindow = adomwindow; break; } } } // this section here is long and daunting, but its just finding a suitable contentwindow if (!htmlcontentwindow) { throw new err...
...r-registrar;1"] .getservice(ci.nsiwebcontenthandlerregistrar); var allowregisterfromdifferenthost = services.prefs.getboolpref('gecko.handlerservice.allowregisterfromdifferenthost'); if (!allowregisterfromdifferenthost) { services.prefs.setboolpref('gecko.handlerservice.allowregisterfromdifferenthost', true); } var htmlcontentwindow = services.wm.getmostrecentwindow('navigator:
browser'); //because we set the preference to true above, we need any window that has a
browser, just pass the domwindow and the registerprotocolhandler will get the contentwindow from it nsiwchr.registerprotocolhandler("mailto", "http://mail.live.com/secure/start?action=compose&to=%s", "outlook.com live mail", htmlcontentwindow); if (!allowregisterfromdifferenthost) { //it this variable is false, th...
...to take from: http://mxr.mozilla.org/mozilla-release/source/
browser/components/feeds/src/webcontentconverter.js#372 and http://stackoverflow.com/questions/24900655/use-registerprotocolhandler-without-contentwindow place holder see also nsiwebcontentsonverterservice (under construction: page doesnt exist yet) registerprotocolhandler from non-privelaged scope web api interfaces > navigator.registercontenthandler() web api interfaces > navigator.registerprotocolhandler() ...
nsIWindowMediator
rnal || ci.nsidomwindow); domwindow.addeventlistener("load", function () { domwindow.removeeventlistener("load", arguments.callee, false); //this removes this load function from the window //window has now loaded now do stuff to it //as example this will add a function to listen to tab select and will fire alert in that window if (domwindow.g
browser && domwindow.g
browser.tabcontainer) { domwindow.g
browser.tabcontainer.addeventlistener('tabselect', function () { domwindow.alert('tab was selected') }, false); } }, false); }, onclosewindow: function (awindow) {}, onwindowtitlechange: function (awindow, atitle) {} }; //to register services.wm.addlistener(windowl...
...
browser windows have a window type of navigator:
browser.
...for example, you could use it in the "ok" handler of your options dialog to apply the new settings to each open
browser window.
...if, for example, you wish to enumerate all
browser windows, you would specify "navigator:
browser".
nsIWindowWatcher
method overview nsiweb
browserchrome getchromeforwindow(in nsidomwindow awindow); nsiauthprompt getnewauthprompter(in nsidomwindow aparent); nsiprompt getnewprompter(in nsidomwindow aparent); nsidomwindow getwindowbyname(in wstring atargetname, in nsidomwindow acurrentwindow); nsisimpleenumerator getwindowenumerator(); nsidomwindow openwindow(in nsidomwindow aparent, in string aurl,...
... nsiweb
browserchrome getchromeforwindow( in nsidomwindow awindow ); parameters awindow the nsidomwindow whose chrome window the caller needs.
... return value an nsiweb
browserchrome object for the corresponding chrome window getnewauthprompter() return a newly created nsiauthprompt implementation.
...if it is impossible to get to an nsiweb
browserchrome from aparent, this method will effectively act as if aparent were null.
Using popup notifications
this code module is imported by the
browser, so you don't need to do it explicitly yourself.
... then you can create the popup notification at the appropriate time like this: popupnotifications.show(g
browser.selected
browser, "sample-popup", "this is a sample popup notification.", null, /* anchor id */ { label: "do something", accesskey: "d", callback: function() { alert("doing something awesome!"); } }, null /* secondary action */ ); in this case, we aren't providing any secondary actions; that is, actions provided to the user through the drop-down menu.
... this to style the icon, like this: .popup-notification-icon[popupid="sample-popup"] { list-style-image: url("chrome://popupnotifications/skin/mozlogo.png"); } with this css in place, the result is the look we want: adding secondary options to provide options in the drop-down menu, add an array of notification actions to the call to the show() method, like this: popupnotifications.show(g
browser.selected
browser, "sample-popup", "this is a sample popup notification.", null, /* anchor id */ { label: "do something", accesskey: "d", callback: function() { alert("doing something awesome!"); } }, [ { label: "first secondary option", accesskey: "1", callback:...
... components.utils.import('resource://gre/modules/popupnotifications.jsm'); var notify = new popupnotifications(g
browser, document.getelementbyid("notification-popup"), document.getelementbyid("notification-popup-box")); var notification = notify.show( //
browser g
browser.selected
browser, // popup id "pdes-popup", // message "hi, there!, i'm gonna show you something today!!", // anchor id null, // main action { label: "click here", accesskey: "d", callback: ...
Using tab-modal prompts
you can force a prompt to be tab-modal using code like this: var thewindow = g
browser.contentwindow; let prompt = components.classes["@mozilla.org/prompter;1"] .getservice(components.interfaces.nsipromptfactory) .getprompt(thewindow, components.interfaces.nsiprompt); let bag = prompt.queryinterface(components.interfaces.nsiwritablepropertybag2); bag.setpropertyasbool("allowtabmodal", true); the var "thewindow" is a reference to the dom window.
... even if you set it to the
browser window ("var thewindow = window") the modal alert will be shown in the current tab.
...for example: var factory = components.classes["@mozilla.org/prompter;1"] .getservice(components.interfaces.nsipromptfactory); var prompt = factory.getprompt(g
browser.contentwindow, components.interfaces.nsiprompt); var bag = prompt.queryinterface(components.interfaces.nsiwritablepropertybag2); bag.setpropertyasbool("allowtabmodal", true); var promptargs = ["devmo alert", "omg!
...then apply it, like in the example below, here we apply the prompt with a checkbox: var window = g
browser.contentwindow; var promptfact = components.classes['@mozilla.org/prompter;1'].getservice(components.interfaces.nsipromptfactory); var prompt = promptfact.getprompt(window, components.interfaces.nsiprompt); var promptbag = prompt.queryinterface(components.interfaces.nsiwritablepropertybag2); promptbag.setpropertyasbool('allowtabmodal', true); var check = {value: false}; //initial state of checkb...
Frame rate - Firefox Developer Tools
in web performance, a frame encapsulates the work the
browser needs to do in order to update and repaint the screen.
...if it takes too long for the
browser to process the frame, then the
browser will appear momentarily unresponsive (janky).
... similarly, if scrolling through a page involves a lot of complex page updates and the
browser can't keep up an acceptable frame rate, scrolling the page will appear sluggish or will occasionally freeze.
...it takes a timestamp when the
browser finishes a frame, and uses this to keep track of the frame rate over the course of the recording.
UI Tour - Firefox Developer Tools
frame rate graph the frame rate gives you an overview of the
browser's responsiveness during the recording: see the separate article on frame rate.
... 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 performing repaints.
... the x-axis represents time, and the recorded operations are laid out as a waterfall, reflecting the serial nature of the
browser's execution.
...statistically, the number of samples taken in which we were executing a particular function corresponds to the amount of time the
browser is spending executing it, so you can identify bottlenecks in your code.
Performance - Firefox Developer Tools
the tool then shows you an overview of the things the
browser was doing to render your site over the profile, and a graph of the frame rate over the profile.
... you get four sub-tools to examine aspects of the profile in more detail: the waterfall shows the different operations the
browser was performing, 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.
... waterfall understand the work the
browser's doing as the user interacts with your site.
... scenarios animating css properties uses the waterfall to understand how the
browser updates a page, and how animating different css properties can affect performance.
Responsive Design Mode - Firefox Developer Tools
on the right end of the screen, three buttons allow you to: camera button - take a screenshot settings button - opens the rdm settings menu close button - closes rdm mode and returns to regular browsing the settings menu includes the following commands: left-align viewport - when checked moves the rdm viewport to the left side of the
browser window show user agent - when checked displays the user agent string the final two options define when the page is reloaded: reload when touch simulation is toggled: when this option is enabled, the page is reloaded whenever you toggle touch support.
...for example, many pages check for touch support on load and only add event handlers if it is supported, or only enable certain features on certain
browsers.
...select a device, and responsive design mode sets the following properties to match the selected device: screen size device pixel ratio (the ratio of device physical pixels to device-independent pixels) touch event simulation additionally, firefox sets the user-agent http request header to identify itself as the default
browser on the selected device.
...in responsive design mode, you can instruct the
browser to emulate, very approximately, the characteristics of various different types of networks.
Settings - Firefox Developer Tools
if common preferences is not included in the settings, web console logs can be persisted by using the 'about:config' url in
browser address bar, searching for: 'devtools.webconsole.persistlog' then toggling this value to true inspector show
browser styles a setting to control whether styles applied by the
browser (user-agent styles) should be displayed in the inspector's rules view.
... note that this setting is independent of the "
browser styles" checkbox in the inspector's computed view.
... disable http cache disable the
browser http cache to simulate first-load performance in all tabs that have the toolbox open.
... enable
browser chrome and add-on debugging toolboxes enable you to use developer tools in the context of the
browser itself, and not only web content.
about:debugging (before Firefox 68) - Firefox Developer Tools
you can also modify the preferences directly in about:config, or by checking "enable
browser chrome and add-on debugging toolboxes" and "enable remote debugging" in the developer tools settings.
...this does what it says: reloading any persistent scripts, such as background scripts parsing the manifest.json file again, so changes to permissions, content_scripts,
browser_action or any other keys will take effect.
... note that this feature isn't that immediately useful to debugging desktop tabs — you can open up a toolbox to debug a tab easily enough already — but this will become far more useful when about:debugging starts to support remote debugging, and this page can begin to list tabs available for debugging on mobile device
browsers, simulators, etc.
...just click the "push" button to send a push event to the service worker: service workers not compatible in firefox 49+, a warning message will be displayed in the service workers section of the workers page if service workers are incompatible with the current
browser configuration, and therefore cannot be used or debugged.
about:debugging - Firefox Developer Tools
starting in firefox 78, the url bar is editable, so that you can change the url used by the
browser on the remote device, by typing in firefox for desktop.
...this does what it says: reloads any persistent scripts, such as background scripts parses the manifest.json file again, so changes to permissions, content_scripts,
browser_action or any other keys take effect installed extensions the permanently installed extensions are listed in the next section, extensions.
... note: it's recommended that you use the
browser toolbox, not the add-on debugger, for debugging webextensions.
... service workers not compatible a warning message is displayed at the top of the this firefox tab if service workers are incompatible with the current
browser configuration, and therefore cannot be used or debugged.
BeforeUnloadEvent - Web APIs
see
browser compatibility for more information.
... { fill: #0095dd; pointer-events: all;} bubbles no cancelable yes target objects defaultview interface event examples window.addeventlistener("beforeunload", function( event ) { event.returnvalue = "\o/"; }); // is equivalent to window.addeventlistener("beforeunload", function( event ) { event.preventdefault(); }); webkit-derived
browsers don't follow the spec for the dialog box.
... an almost-cross-
browser working example would be close to the below example.
... window.addeventlistener("beforeunload", function (e) { var confirmationmessage = "\o/"; (e || window.event).returnvalue = confirmationmessage; // gecko + ie return confirmationmessage; /* safari, chrome, and other * webkit-derived
browsers */ }); specifications specification status comment html living standardthe definition of 'beforeunloadevent' in that specification.
BudgetService.getBudget() - Web APIs
browser compatibility the compatibility table on this page is generated from structured data.
... if you'd like to contribute to the data, please check out https://github.com/mdn/
browser-compat-data and send us a pull request.
...expect poor cross-
browser support.non-standard.
... expect poor cross-
browser support.deprecated.
BudgetService.getCost() - Web APIs
browser compatibility the compatibility table on this page is generated from structured data.
... if you'd like to contribute to the data, please check out https://github.com/mdn/
browser-compat-data and send us a pull request.
...expect poor cross-
browser support.non-standard.
... expect poor cross-
browser support.deprecated.
BudgetService.reserve() - Web APIs
browser compatibility the compatibility table on this page is generated from structured data.
... if you'd like to contribute to the data, please check out https://github.com/mdn/
browser-compat-data and send us a pull request.
...expect poor cross-
browser support.non-standard.
... expect poor cross-
browser support.deprecated.
BudgetService - Web APIs
browser compatibility the compatibility table on this page is generated from structured data.
... if you'd like to contribute to the data, please check out https://github.com/mdn/
browser-compat-data and send us a pull request.
...expect poor cross-
browser support.non-standard.
... expect poor cross-
browser support.deprecated.
BudgetState.budgetAt - Web APIs
browser compatibility the compatibility table on this page is generated from structured data.
... if you'd like to contribute to the data, please check out https://github.com/mdn/
browser-compat-data and send us a pull request.
...expect poor cross-
browser support.non-standard.
... expect poor cross-
browser support.deprecated.
BudgetState.time - Web APIs
browser compatibility the compatibility table on this page is generated from structured data.
... if you'd like to contribute to the data, please check out https://github.com/mdn/
browser-compat-data and send us a pull request.
...expect poor cross-
browser support.non-standard.
... expect poor cross-
browser support.deprecated.
BudgetState - Web APIs
browser compatibility the compatibility table on this page is generated from structured data.
... if you'd like to contribute to the data, please check out https://github.com/mdn/
browser-compat-data and send us a pull request.
...expect poor cross-
browser support.non-standard.
... expect poor cross-
browser support.deprecated.
Content Index API - Web APIs
the content index api allows developers to register their offline enabled content with the
browser.
...content indexing allows developers to tell the
browser about their specific offline content.
...the
browser can then use these entries to display offline reading to a user.
... self.addeventlistener('contentdelete', (event) => { console.log(event.id); // logs content index id, which can then be used to determine what content to delete from your cache }); the contentdelete event is only fired when the deletion happens due to interaction with the
browser's built-in user interface.
DOMMatrixReadOnly.scale() - Web APIs
dommatrix.scale(scale[, originx][, originy]) we'll show an example of how you can deal with the cross-
browser support implications of this in the examples section, below.
... we test if the
browser supports a six parameter scale() method by creating a new matrix using three parameters and observing it's is2d property — if this is false then the third parameter has been accepted by the
browser as a scalez parameter, making this a 3d matrix.
... we then create a new matrix scaled about a given origin, using either three or six parameters depending on the
browser support.
... const matrix = new dommatrixreadonly(); const scaledmatrix = matrix.scale(0.5); let scaledmatrixwithorigin = matrix.scale(0.5, 25, 25); // if the
browser has interpreted these parameters as scalex, scaley, scalez, the resulting matrix is 3d const
browserexpectssixparamscale = !scaledmatrixwithorigin.is2d; if (
browserexpectssixparamscale) { scaledmatrixwithorigin = matrix.scale(0.5, 0.5, 1, 25, 25, 0); } document.queryselector('#transformed').setattribute('transform', scaledmatrix.tostring()); document.queryselector('#transformedorigin').setattribute('transform', scaledmatrixwithorigin.tostring()); screenshotlive sample specifications ...
DataTransferItem.webkitGetAsEntry() - Web APIs
this function is implemented as webkitgetasentry() in non-webkit
browsers including firefox at this time; it may be renamed to simply getasentry() in the future, so you should code defensively, looking for both.
...in chromium-based
browsers, the following example will only return a max of 100 entries.
...
browser compatibility the compatibility table on this page is generated from structured data.
... if you'd like to contribute to the data, please check out https://github.com/mdn/
browser-compat-data and send us a pull request.
Element.currentStyle - Web APIs
browser compatibility the compatibility table on this page is generated from structured data.
... if you'd like to contribute to the data, please check out https://github.com/mdn/
browser-compat-data and send us a pull request.
...expect poor cross-
browser support.non-standard.
... expect poor cross-
browser support.
Element.runtimeStyle - Web APIs
browser compatibility the compatibility table on this page is generated from structured data.
... if you'd like to contribute to the data, please check out https://github.com/mdn/
browser-compat-data and send us a pull request.
...expect poor cross-
browser support.non-standard.
... expect poor cross-
browser support.
Element.scrollLeftMax - Web APIs
browser compatibility the compatibility table on this page is generated from structured data.
... if you'd like to contribute to the data, please check out https://github.com/mdn/
browser-compat-data and send us a pull request.
...expect poor cross-
browser support.non-standard.
... expect poor cross-
browser support.
FileException - Web APIs
browser compatibility the compatibility table on this page is generated from structured data.
... if you'd like to contribute to the data, please check out https://github.com/mdn/
browser-compat-data and send us a pull request.
...expect poor cross-
browser support.non-standard.
... expect poor cross-
browser support.deprecated.
FileReaderSync - Web APIs
browser compatibility the compatibility table on this page is generated from structured data.
... if you'd like to contribute to the data, please check out https://github.com/mdn/
browser-compat-data and send us a pull request.
...expect poor cross-
browser support.non-standard.
... expect poor cross-
browser support.deprecated.
FileSystem - Web APIs
some
browsers offer additional apis to create and manage file systems, such as chrome's requestfilesystem() method.
...instead you will have a "virtual drive" within the
browser sandbox.
... draft
browser compatibility the compatibility table on this page is generated from structured data.
... if you'd like to contribute to the data, please check out https://github.com/mdn/
browser-compat-data and send us a pull request.
FileSystemDirectoryEntry.removeRecursively() - Web APIs
example directory.removerecursively(function() { /* the directory was removed successfully */ }, function() { /* an error occurred while removing the directory */ });
browser compatibility the compatibility table on this page is generated from structured data.
... if you'd like to contribute to the data, please check out https://github.com/mdn/
browser-compat-data and send us a pull request.
...expect poor cross-
browser support.non-standard.
... expect poor cross-
browser support.deprecated.
FileSystemEntry.copyTo() - Web APIs
workingdirectory.getfile("tmp/log.txt", {}, function(fileentry) { workingdirectory.getdirectory("log", {}, function(direntry) { fileentry.copyto(direntry); }, handleerror); }, handleerror);
browser compatibility the compatibility table on this page is generated from structured data.
... if you'd like to contribute to the data, please check out https://github.com/mdn/
browser-compat-data and send us a pull request.
...expect poor cross-
browser support.non-standard.
... expect poor cross-
browser support.deprecated.
FileSystemEntry.getMetadata() - Web APIs
workingdirectory.getfile("tmp/log.txt", {}, function(fileentry) { fileentry.getmetadata(function(metadata) { if (metadata.size > 1048576) { workingdirectory.getdirectory("log", {}, function(direntry) { fileentry.moveto(direntry); }, handleerror); } }); }, handleerror);
browser compatibility the compatibility table on this page is generated from structured data.
... if you'd like to contribute to the data, please check out https://github.com/mdn/
browser-compat-data and send us a pull request.
...expect poor cross-
browser support.non-standard.
... expect poor cross-
browser support.deprecated.
FileSystemEntry.moveTo() - Web APIs
workingdirectory.getfile("tmp/log.txt", {}, function(fileentry) { fileentry.getmetadata(function(metadata) { if (metadata.size > 1048576) { workingdirectory.getdirectory("log", {}, function(direntry) { fileentry.moveto(direntry); }, handleerror); } }); }, handleerror);
browser compatibility the compatibility table on this page is generated from structured data.
... if you'd like to contribute to the data, please check out https://github.com/mdn/
browser-compat-data and send us a pull request.
...expect poor cross-
browser support.non-standard.
... expect poor cross-
browser support.deprecated.
FileSystemEntry.remove() - Web APIs
workingdirectory.getfile("tmp/workfile.json", {}, function(fileentry) { fileentry.remove(function() { /* the file was removed successfully */ }); }, handleerror);
browser compatibility the compatibility table on this page is generated from structured data.
... if you'd like to contribute to the data, please check out https://github.com/mdn/
browser-compat-data and send us a pull request.
...expect poor cross-
browser support.non-standard.
... expect poor cross-
browser support.deprecated.
FileSystemFileEntry.createWriter() - Web APIs
browser compatibility the compatibility table on this page is generated from structured data.
... if you'd like to contribute to the data, please check out https://github.com/mdn/
browser-compat-data and send us a pull request.
...expect poor cross-
browser support.non-standard.
... expect poor cross-
browser support.deprecated.
FileSystemFileEntry - Web APIs
draft draft of proposed api
browser compatibility the compatibility table on this page is generated from structured data.
... if you'd like to contribute to the data, please check out https://github.com/mdn/
browser-compat-data and send us a pull request.
...expect poor cross-
browser support.non-standard.
... expect poor cross-
browser support.deprecated.
FileSystemSync - Web APIs
browser compatibility the compatibility table on this page is generated from structured data.
... if you'd like to contribute to the data, please check out https://github.com/mdn/
browser-compat-data and send us a pull request.
...expect poor cross-
browser support.non-standard.
... expect poor cross-
browser support.requires a vendor prefix or different name for use.requires a vendor prefix or different name for use.
GestureEvent - Web APIs
browser compatibility the compatibility table on this page is generated from structured data.
... if you'd like to contribute to the data, please check out https://github.com/mdn/
browser-compat-data and send us a pull request.
...expect poor cross-
browser support.non-standard.
... expect poor cross-
browser support.
HTMLImageElement.isMap - Web APIs
usage notes when an image marked as being part of a server-side image map is clicked, the
browser constructs the string "?x,y", where x and y indicate the coordinates at which the mouse was clicked as offsets from the top-left corner of the image, specified in css pixels.
... the
browser then fetches that url from the server and displays or downloads it depending on the value of the download attribute.
... living standard
browser compatibility the compatibility table on this page is generated from structured data.
... if you'd like to contribute to the data, please check out https://github.com/mdn/
browser-compat-data and send us a pull request.
HTMLImageElement.loading - Web APIs
the htmlimageelement property loading is a string whose value provides a hint to the user agent that tells the
browser how to handle loading images which are currently outside the window's visual viewport.
...the possible values are: eager the default behavior, eager tells the
browser to load the image as soon as the <img> element is processed.
... lazy tells the user agent to hold off on loading the image until the
browser estimates that it will be needed imminently.
... preventing element shift during image lazy loads when an image whose loading has been delayed by the loading attribute being set to lazy is finally loaded, the
browser will determine the final size of the <img> element based on the style and intrinsic size of the image, then reflow the document as needed to update the positions of elements based on any size change made to the element to fit the image.
HTMLImageElement.sizes - Web APIs
the
browser takes all of this information and selects an image and width that best meets the specified values.
... how exactly the images are used may depend upon the
browser and what the pixel density of the user's display is.
... living standard
browser compatibility the compatibility table on this page is generated from structured data.
... if you'd like to contribute to the data, please check out https://github.com/mdn/
browser-compat-data and send us a pull request.
HTMLImageElement.srcset - Web APIs
also provided is the word-break attribute, using the break-all value to tell the
browser to wrap the string within the width available regardless of where in the string the wrap must occur.
... it uses the image's currentsrc property to fetch and display the url selected by the
browser from the srcset.
... living standard
browser compatibility the compatibility table on this page is generated from structured data.
... if you'd like to contribute to the data, please check out https://github.com/mdn/
browser-compat-data and send us a pull request.
HTMLImageElement - Web APIs
htmlimageelement.complete read only returns a boolean that is true if the
browser has finished fetching the image, whether successful or not.
... htmlimageelement.decoding an optional domstring representing a hint given to the
browser on how it should decode the image.
... htmlimageelement.loading a domstring providing a hint to the
browser used to optimize loading the document by determining whether to load the image immediately (eager) or on an as-needed basis (lazy).
...this was once used by
browsers under constrained network conditions or on slow devices.
HTMLInputElement.webkitEntries - Web APIs
browser compatibility the compatibility table on this page is generated from structured data.
... if you'd like to contribute to the data, please check out https://github.com/mdn/
browser-compat-data and send us a pull request.
...expect poor cross-
browser support.non-standard.
... expect poor cross-
browser support.
HTMLInputElement.webkitdirectory - Web APIs
browser compatibility the compatibility table on this page is generated from structured data.
... if you'd like to contribute to the data, please check out https://github.com/mdn/
browser-compat-data and send us a pull request.
...expect poor cross-
browser support.non-standard.
... expect poor cross-
browser support.
HTMLInputElement - Web APIs
formmethod string: returns / sets the element's formmethod attribute, containing the http method that the
browser uses to submit the form.
... properties that apply only to text/number-containing or elements autocomplete string: returns / sets the element's autocomplete attribute, indicating whether the value of the control can be automatically completed by the
browser.
...possible values are: on: the
browser can autocomplete the value using previously stored value off: the user must explicity enter a value max string: returns / sets the element's max attribute, containing the maximum (numeric or date-time) value for this item, which must not be less than its minimum (min attribute) value.
... inputmode provides a hint to
browsers as to the type of virtual keyboard configuration to use when editing this element or its contents.
File drag and drop - Web APIs
the following code snippet shows how this is done with a <div> element: <div id="drop_zone" ondrop="drophandler(event);"> <p>drag one or more files to this drop zone ...</p> </div> typically, an application will include a dragover event handler on the drop target element and that handler will turn off the
browser's default drag behavior.
...in this example, the drop target element uses the following styling: #drop_zone { border: 5px solid blue; width: 200px; height: 100px; } note that dragstart and dragend events are not fired when dragging a file into the
browser from the os.
...in the following drop handler, if the
browser supports datatransferitemlist interface, the getasfile() method is used to access each file; otherwise the datatransfer interface's files property is used to access each file.
...file[' + i + '].name = ' + ev.datatransfer.files[i].name); } } } prevent the
browser's default drag behavior the following dragover event handler calls preventdefault() to turn off the
browser's default drag and drop handler.
History API - Web APIs
the dom window object provides access to the
browser's session history (not to be confused for webextensions history) through the history object.
... moving forward and backward to move backward through history: window.history.back() this acts exactly as if the user clicked on the back button in their
browser toolbar.
... current page by either passing 0, or by invoking it without an argument: // the following statements // both have the effect of // refreshing the page window.history.go(0) window.history.go() you can determine the number of pages in the history stack by looking at the value of the length property: let numberofentries = window.history.length interfaces history allows manipulation of the
browser session history (that is, the pages visited in the tab or frame that the current page is loaded in).
...and then illustrates some of the methods of the history object to add, replace, and move within the
browser history for the current tab.
IDBDatabase.createObjectStore() - Web APIs
for older webkit
browsers, you must call first.
...// this handler is only supported in recent
browsers.
... recommendation
browser compatibility the compatibility table on this page is generated from structured data.
... if you'd like to contribute to the data, please check out https://github.com/mdn/
browser-compat-data and send us a pull request.
IDBDatabaseException - Web APIs
browser compatibility the compatibility table on this page is generated from structured data.
... if you'd like to contribute to the data, please check out https://github.com/mdn/
browser-compat-data and send us a pull request.
...expect poor cross-
browser support.non-standard.
... expect poor cross-
browser support.deprecated.
IDBEnvironment - Web APIs
example the following code creates a request for a database to be opened asychronously, after which the database is opened when the request's onsuccess handler is fired: var db; function opendb() { var dbopenrequest = window.indexeddb.open("todolist"); dbopenrequest.onsuccess = function(e) { db = dbopenrequest.result; }; }
browser compatibility the compatibility table on this page is generated from structured data.
... if you'd like to contribute to the data, please check out https://github.com/mdn/
browser-compat-data and send us a pull request.
...expect poor cross-
browser support.non-standard.
... expect poor cross-
browser support.deprecated.
IDBIndex - Web APIs
recommendation
browser compatibility the compatibility table on this page is generated from structured data.
... if you'd like to contribute to the data, please check out https://github.com/mdn/
browser-compat-data and send us a pull request.
...expect poor cross-
browser support.non-standard.
... expect poor cross-
browser support.user must explicitly enable this feature.user must explicitly enable this feature.requires a vendor prefix or different name for use.requires a vendor prefix or different name for use.
IDBTransactionSync - Web APIs
when an application creates an idbtransactionsync object, it blocks until the
browser is able to reserve the require database objects.
...when this method is called, the
browser ignores all the changes performed to the objects of this database since this transaction was created.
...when this method is called, the
browser durably stores all the changes performed to the objects of the database since this transaction was created.
... recoverable_err if this transaction's scope is dynamic, and the
browser cannot commit all of the changes due to another transaction.
IDBVersionChangeRequest - Web APIs
browser compatibility the compatibility table on this page is generated from structured data.
... if you'd like to contribute to the data, please check out https://github.com/mdn/
browser-compat-data and send us a pull request.
...expect poor cross-
browser support.non-standard.
... expect poor cross-
browser support.deprecated.
MSGestureEvent - Web APIs
browser compatibility the compatibility table on this page is generated from structured data.
... if you'd like to contribute to the data, please check out https://github.com/mdn/
browser-compat-data and send us a pull request.
...expect poor cross-
browser support.non-standard.
... expect poor cross-
browser support.
MediaDevices.getDisplayMedia() - Web APIs
note:
browser support for audio tracks varies, both in terms of whether or not they're supported at all by the media recorder and in terms of the which audio source or sourcoes are supported.
... check the compatibility table for details for each
browser.
...for that reason, the specification details measures
browsers are required to take in order to fully support getdisplaymedia().
...
browsers are encouraged to provide a warning to users about sharing displays or windows that contain
browsers, and to keep a close eye on what other content might be getting captured and shown to other users.
MediaRecorder.ignoreMutedMedia - Web APIs
browser compatibility the compatibility table in this page is generated from structured data.
... if you'd like to contribute to the data, please check out https://github.com/mdn/
browser-compat-data and send us a pull request.
...expect poor cross-
browser support.non-standard.
... expect poor cross-
browser support.deprecated.
MediaSession.playbackState - Web APIs
paused the
browser's media session is currently paused.
... playing the
browser's media session is currently playing media, which can be paused.
...
browser compatibility the compatibility table on this page is generated from structured data.
... if you'd like to contribute to the data, please check out https://github.com/mdn/
browser-compat-data and send us a pull request.
Using the MediaStream Recording API - Web APIs
instead, the problem was solved by making the third container's height equal to 100% of the parent height, minus the heights and padding of the other two: .sound-clips { box-shadow: inset 0 3px 4px rgba(0,0,0,0.7); background-color: rgba(0,0,0,0.1); height: calc(100% - 240px - 0.7rem); overflow: scroll; } note: calc() has good support across modern
browsers too, even going back to internet explorer 9.
...avigator.mediadevices.getusermedia ( // constraints - only audio needed for this app { audio: true }) // success callback .then(function(stream) { }) // error callback .catch(function(err) { console.log('the following getusermedia error occured: ' + err); } ); } else { console.log('getusermedia not supported on your
browser!'); } the whole thing is wrapped in a test that checks whether getusermedia is supported before running anything else.
...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.
...we register an event handler to do this using mediarecorder.ondataavailable: let chunks = []; mediarecorder.ondataavailable = function(e) { chunks.push(e.data); } note: the
browser will fire dataavailable events as needed, but if you want to intervene you can also include a timeslice when invoking the start() method — for example start(10000) — to control this interval, or call mediarecorder.requestdata() to trigger an event when you need it.
Media Capabilities API - Web APIs
different
browsers support different media types and new media types are always being developed.
... with the media capabilities api, developers can ensure each user is getting the best bitrate and storage savings for their
browser, device, and os capabilities.
... the media capabilities api provide more powerful features than say mediarecorder.istypesupported() or htmlmediaelement.canplaytype(), which only address general
browser support, not performance.
... media capabilities interfaces mediacapabilities provides information about the decoding abilities of the device, system and
browser based on codecs, profile, resolution, and bitrates.
Transcoding assets for Media Source Extensions - Web APIs
getting started the first and most important step is to ensure that your files are comprised of a container and codec that users'
browsers support.
... while this is true on paper,
browser support varies for specific container/codec combinations.
... to check if the
browser supports a particular container, you can pass a string of the mime type to the mediasource.istypesupported method: mediasource.istypesupported('audio/mp3'); // false mediasource.istypesupported('video/mp4'); // true mediasource.istypesupported('video/mp4; codecs="avc1.4d4028, mp4a.40.2"'); // true the string is the mime type of the container, optionally followed by a list of codecs.
... currently, mp4 containers with h.264 video and aac audio codecs have support across all modern
browsers, while others don't.
Metadata.modificationTime - Web APIs
browser compatibility the compatibility table on this page is generated from structured data.
... if you'd like to contribute to the data, please check out https://github.com/mdn/
browser-compat-data and send us a pull request.
...expect poor cross-
browser support.non-standard.
... expect poor cross-
browser support.
Metadata.size - Web APIs
browser compatibility the compatibility table on this page is generated from structured data.
... if you'd like to contribute to the data, please check out https://github.com/mdn/
browser-compat-data and send us a pull request.
...expect poor cross-
browser support.non-standard.
... expect poor cross-
browser support.
Metadata - Web APIs
browser compatibility the compatibility table on this page is generated from structured data.
... if you'd like to contribute to the data, please check out https://github.com/mdn/
browser-compat-data and send us a pull request.
...expect poor cross-
browser support.non-standard.
... expect poor cross-
browser support.requires a vendor prefix or different name for use.requires a vendor prefix or different name for use.
MutationEvent - Web APIs
the practical reasons to avoid the mutation events are performance issues and cross-
browser support.
... cross-
browser support these events are not implemented consistently across different
browsers, for example: ie prior to version 9 didn't support the mutation events at all and does not implement some of them correctly in version 9 (for example, domnodeinserted) webkit doesn't support domattrmodified (see webkit bug 8191 and the workaround) "mutation name events", i.e.
... domelementnamechanged and domattributenamechanged are not supported in firefox (as of version 11), and probably in other
browsers as well.
... dottoro documents
browser support for mutation events.
Navigator.cookieEnabled - Web APIs
note: when the
browser is configured to block third-party cookies, and navigator.cookieenabled is invoked inside a third-party iframe, it returns true in safari, edge spartan and ie (while trying to set a cookie in such scenario would fail).
... it returns false in firefox and chromium-based
browsers.
... note: web
browsers may prevent writing certain cookies in certain scenarios.
... example if (!navigator.cookieenabled) { // the
browser does not support or is blocking cookies from being set.
NavigatorPlugins - Web APIs
the navigatorplugins mixin adds to the navigator interface methods and properties for discovering and interacting with plugins installed into the
browser.
... properties navigatorplugins.mimetypes read only returns an mimetypearray listing the mime types supported by the
browser.
... navigatorplugins.plugins read only returns a pluginarray listing the plugins installed in the
browser.
... navigatorplugins.javaenabled() read only returns a boolean flag indicating whether the host
browser is java-enabled or not.
NodeList.prototype.forEach() - Web APIs
hild(kid3); let list = node.childnodes; list.foreach( function(currentvalue, currentindex, listobj) { console.log(currentvalue + ', ' + currentindex + ', ' + this); }, 'mythisarg' ); the above code results in the following: [object htmlparagraphelement], 0, mythisarg [object text], 1, mythisarg [object htmlspanelement], 2, mythisarg polyfill this polyfill adds compatibility to all
browsers supporting es5: if (window.nodelist && !nodelist.prototype.foreach) { nodelist.prototype.foreach = function (callback, thisarg) { thisarg = thisarg || window; for (var i = 0; i < this.length; i++) { callback.call(thisarg, this[i], i, this); } }; } or if (window.nodelist && !nodelist.prototype.foreach) { nodelist.prototype.foreach = array.prototyp...
...e.foreach; } the above behavior is how many
browsers actually implement nodelist.prototype.foreach() (chrome, for example).
... candidate recommendation defines foreach on iterable declarations
browser compatibility the compatibility table on this page is generated from structured data.
... if you'd like to contribute to the data, please check out https://github.com/mdn/
browser-compat-data and send us a pull request.
Notification - Web APIs
default — the user choice is unknown and therefore the
browser will act as if the value were denied.
... function notifyme() { // let's check if the
browser supports notifications if (!("notification" in window)) { alert("this
browser does not support desktop notification"); } // let's check whether notification permissions have already been granted else if (notification.permission === "granted") { // if it's okay let's create a notification var notification = new notification("hi there!"); } // otherwise, we need to ask the...
...} we no longer show a live sample on this page, as chrome and firefox no longer allow notification permissions to be requested from cross-origin <iframe>s, with other
browsers to follow.
...this is not only best practice — you should not be spamming users with notifications they didn't agree to — but going forward
browsers will explicitly disallow notifications not triggered in response to a user gesture.
performance.setResourceTimingBufferSize() - Web APIs
the setresourcetimingbuffersize() method sets the
browser's resource timing buffer size to the specified number of "resource" performance entry type objects.
... a
browser's recommended resource timing buffer size is at least 150 performance entry objects.
... syntax performance.setresourcetimingbuffersize(maxsize); arguments maxsize a number representing the maximum number of performance entry objects the
browser should hold in its performance entry buffer.
... example function setresourcetimingbuffersize(maxsize) { if (performance === undefined) { log("
browser does not support web performance"); return; } var supported = typeof performance.setresourcetimingbuffersize == "function"; if (supported) { log("...
Using the Permissions API - Web APIs
at the moment, implementation of the api is at an early stage, so support in
browsers is pretty spotty: it can only be found in chrome 44 and later and firefox 43 and later.
... accessing the permissions api the navigator.permissions property has been added to the
browser to allow access to the global permissions object.
...if we choose to never share our location from the permission prompt (deny permission), then we can't get back to the permission prompt without using the
browser menu options: firefox: tools > page info > permissions > access your location.
... however, future additions to
browser functionality should provide the request() method, which will allow us to programatically request permissions, any time we like.
Web Push API Notifications best practices - Web APIs
“if done well, it's nice to have, but if not done well, it's really annoying.” — overheard conversation between two
browser developers discussing the ethics of push notifications.
...in mobile, it shows up in the notification tray, just like app push notifications, even when the
browser is not running.” — an unnamed marketing site positive uses of push but there’s a bright and useful side to push notifications, too.
...
browser mitigations because of abuses of push notifications in the past, web
browser developers have begun to implement strategies to help mitigate this problem.
... for example, safari 12.1 now requires—and other
browsers either already do, or are planning[1] to do so—that the user interact with the page in some way before the page can request permission to perform push notifications.
RTCConfiguration.certificates - Web APIs
if this property isn't specified, the
browser will automatically generate and use a certificate to secure the connection.
... the method by which a
browser decides which certificate to use is implementation-dependent.
... some
browsers may simply choose the first listed certificate and ignore the rest of the list; others may take a different approach.
... <<<--- add link to information about identity --->>> examples specifications specification status comment webrtc 1.0: real-time communication between
browsersthe definition of 'rtcconfiguration.certificates' in that specification.
RTCDataChannel.maxPacketLifeTime - Web APIs
the read-only rtcdatachannel property maxpacketlifetime returns the amount of time, in milliseconds, the
browser is allowed to take to attempt to transmit a message, as set when the data channel was created, or null.
... this limits how long the
browser can continue to attempt to transmit and retransmit the message before giving up.
... syntax var lifetime = adatachannel.maxpacketlifetime; value the number of milliseconds over which the
browser may continue to attempt to transmit the message until it either succeeds or gives up.
... example // tbd specifications specification status comment webrtc 1.0: real-time communication between
browsersthe definition of 'rtcdatachannel.maxpacketlifetime' in that specification.
RTCDataChannel.send() - Web APIs
different
browsers have different limitations on the size of the message you can send.
... specifications exist to define how to automatically fragment large messages, but not all
browsers implement them, and those that do have various additional restrictions.
...for example, if one peer is a modern
browser that supports using the eor (end of record) flag to indicate when a received message is the last piece of a multi-part object sent using send().
... var pc = new rtcpeerconnection(); var dc = pc.createdatachannel("backchannel"); function sendmessage(msg) { let obj = { "message": msg, "timestamp": new date() } dc.send(json.stringify(obj)); } specifications specification status comment webrtc 1.0: real-time communication between
browsersthe definition of 'rtcdatachannel.send()' in that specification.
RTCIceCandidate.usernameFragment - Web APIs
note that 24 bits of the username fragment are required to be randomized by the
browser.
...the specifics for which bits are random and what the remainder of the ufrag text are are left up to the
browser implementation to decide.
... for example, a
browser might choose to always use a 24-character ufrag in which bit 4 of each character is randomly selected between 0 and 1.
... specifications specification status comment webrtc 1.0: real-time communication between
browsersthe definition of 'rtcicecandidate.usernamefragment' in that specification.
RTCPeerConnection.getDefaultIceServers() - Web APIs
the getdefaulticeservers() method of the rtcpeerconnection interface returns an array of objects based on the rtciceserver dictionary, which indicates what, if any, ice servers the
browser will use by default if none are provided to the rtcpeerconnection in its rtcconfiguration.
... however,
browsers are not required to provide any default ice servers at all.
... syntax var defaulticeservers = rtcpeerconnection.getdefaulticeservers(); return value an array of ice servers, specified as objects based on rtciceserver, which the
browser will use if none are specified in the configuration of the rtcpeerconnection.
... if there are no defaults provided by the
browser, the returned array is empty; this property's value is never null.
SVGImageElement.decoding - Web APIs
the decoding property of the svgimageelement interface represents a hint given to the
browser on how it should decode the image.
...the
browser decides what is best for the user.
...
browser compatibility the compatibility table on this page is generated from structured data.
... if you'd like to contribute to the data, please check out https://github.com/mdn/
browser-compat-data and send us a pull request.
SVGTransformList - Web APIs
recommendation initial definition
browser compatibility the compatibility table on this page is generated from structured data.
... if you'd like to contribute to the data, please check out https://github.com/mdn/
browser-compat-data and send us a pull request.
...expect poor cross-
browser support.non-standard.
... expect poor cross-
browser support.
Selection - Web APIs
however,
browsers other than gecko did not implement multiple ranges, and the specification also requires the selection to always have a single range.
... selection and input focus selection and input focus (indicated by document.activeelement) have a complex relationship that varies by
browser.
... in cross-
browser compatible code, it's better to handle them separately.
... behavior of selection api in terms of editing host focus changes the selection api has a common behavior (i.e., shared between
browsers) that governs how focus behavior changes for editing hosts after certain methods are called.
Selection API - Web APIs
browser compatibility selection the compatibility table on this page is generated from structured data.
... if you'd like to contribute to the data, please check out https://github.com/mdn/
browser-compat-data and send us a pull request.
...expect poor cross-
browser support.non-standard.
... expect poor cross-
browser support.see implementation notes.see implementation notes.
Service Worker API - Web APIs
service workers essentially act as proxy servers that sit between web applications, the
browser, and the network (when available).
...a service worker client is either a document in a
browser context or a sharedworker, which is controlled by an active worker.
...note that this interface is deprecated in modern
browsers.
... windowclient represents the scope of a service worker client that is a document in a
browser context, controlled by an active worker.
Streams API concepts - Web APIs
you might do this for example in a serviceworker if you want to fetch a response from the server and stream it to the
browser, but also stream it to the serviceworker cache.
...these currently have very limited availability in
browsers.
... pipe chains the streams api makes it possible to pipe streams into one another (or at least it will do when
browsers implement the relevant functionality) using a structure called a pipe chain.
... note: this functionality isn't fully thought through yet, or available in many
browsers.
Supporting both TouchEvent and MouseEvent - Web APIs
consequently, even if a
browser supports touch, the
browser must still emulate mouse events so content that assumes mouse-only input will work as is without direct modification.
...however, because the
browser must emulate mouse events, there may be some interaction issues that need to be handled.
... event firing the touch events standard defines a few
browser requirements regarding touch and mouse interaction (see the interaction with mouse events and click section for details), noting the
browser may fire both touch events and mouse events in response to the same user input.
... if the
browser fires both touch and mouse events because of a single user input, the
browser must fire a touchstart before any mouse events.
Using Touch Events - Web APIs
browsers typically dispatch emulated mouse and click events when there is only a single active touch point.
... // create touchstart handler someelement.addeventlistener('touchstart', function(ev) { // iterate through the touch points that were activated // for this element and process each event 'target' for (var i=0; i < ev.targettouches.length; i++) { process_target(ev.targettouches[i].target); } }, false); prevent the
browser from processing emulated mouse events.
... implementation and deployment status the touch events
browser compatibility data indicates touch event support among mobile
browsers is relatively broad, with desktop
browser support lagging although additional implementations are in progress.
... the implementation status of pointer events in
browsers is relatively high with chrome, firefox, ie11 and edge having complete implementations.
UIEvent.initUIEvent() - Web APIs
browser compatibility the compatibility table on this page is generated from structured data.
... if you'd like to contribute to the data, please check out https://github.com/mdn/
browser-compat-data and send us a pull request.
...expect poor cross-
browser support.non-standard.
... expect poor cross-
browser support.deprecated.
UIEvent.layerX - Web APIs
browser compatibility the compatibility table on this page is generated from structured data.
... if you'd like to contribute to the data, please check out https://github.com/mdn/
browser-compat-data and send us a pull request.
...expect poor cross-
browser support.non-standard.
... expect poor cross-
browser support.
User Timing API - Web APIs
the user timing interface allows the developer to create application specific timestamps that are part of the
browser's performance timeline.
...the mark is a timestamp in the
browser's performance timeline.
... interoperability as shown in the performance interface's
browser compatibility table, the user timing methods are broadly implemented by desktop and mobile
browsers (the only exceptions are desktop safari and mobile safari, however the safari technology preview 24 has support).
... to test your
browser's support for this api, run the perf-api-support application.
WebGLRenderingContext - Web APIs
examples webgl context feature detection in this first example we are going to check whether the
browser supports webgl.
...the internal width and height properties of the canvas remain at default values, which are different than the actual size of the canvas element in the
browser window.
... <p>compare the two canvases.</p> <canvas>your
browser does not seem to support html5 canvas.</canvas> <canvas>your
browser does not seem to support html5 canvas.</canvas> body { text-align : center; } canvas { display : inline-block; width : 120px; height : 80px; margin : auto; padding : 0; border : none; background-color : black; } window.addeventlistener("load", function() { "use strict" var firstcanvas = document.getelementsbytagname("canvas")[0], secondcanvas = document.getelementsbytagna...
..." + "your
browser or device may not support webgl."; return; } gl.viewport(0, 0, gl.drawingbufferwidth, gl.drawingbufferheight); gl.enable(gl.scissor_test); gl.scissor(30, 10, 60, 60); gl.clearcolor(1.0, 1.0, 0.0, 1.0); gl.clear(gl.color_buffer_bit); }); }, false); the source code of this example is also available on github.
Canvas size and WebGL - Web APIs
« previousnext » this webgl example explores the effect of setting (or not setting) the canvas size to its element size in css pixels, as it appears in the
browser window.
...the internal width and height properties of the canvas remain at default values, which are different than the actual size of the canvas element in the
browser window.
... <p>compare the two canvases.</p> <canvas>your
browser does not seem to support html5 canvas.</canvas> <canvas>your
browser does not seem to support html5 canvas.</canvas> body { text-align : center; } canvas { display : inline-block; width : 120px; height : 80px; margin : auto; padding : 0; border : none; background-color : black; } window.addeventlistener("load", function() { "use strict" var firstcanvas = document.getelementsbytagname("canvas")[0], secondcanvas = document.getelementsbytag...
..." + "your
browser or device may not support webgl."; return; } gl.viewport(0, 0, gl.drawingbufferwidth, gl.drawingbufferheight); gl.enable(gl.scissor_test); gl.scissor(30, 10, 60, 60); gl.clearcolor(1.0, 1.0, 0.0, 1.0); gl.clear(gl.color_buffer_bit); }); }, false); the source code of this example is also available on github.
Detect WebGL - Web APIs
feature-detecting webgl in this first example we are going to check whether the
browser supports webgl.
...the canvas is not added to the // document itself, so it is never displayed in the //
browser window.
...your
browser supports webgl."; } else { paragraph.innerhtml = "failed to get webgl context.
... " + "your
browser or device may not support webgl."; } } }, false); the source code of this example is also available on github.
Hello GLSL - Web APIs
note: this example will most likely work in all modern desktop
browsers.
... but it may not work in some mobile or older
browsers.
...hello glsl!</p> <canvas>your
browser does not seem to support html5 canvas.</canvas> body { text-align : center; } canvas { width : 280px; height : 210px; margin : auto; padding : 0; border : none; background-color : black; } button { display : block; font-size : inherit; margin : auto; padding : 0.6em; } <script type="x-shader/x-vertex" id="vertex-shader"> #version 100 void main() { gl_position = vec4(0.0, 0.0, 0.0, 1.0); gl_pointsize = 64.0; } </script> <script...
...program(program); } function getrenderingcontext() { var canvas = document.queryselector("canvas"); canvas.width = canvas.clientwidth; canvas.height = canvas.clientheight; var gl = canvas.getcontext("webgl") || canvas.getcontext("experimental-webgl"); if (!gl) { var paragraph = document.queryselector("p"); paragraph.innerhtml = "failed to get webgl context." + "your
browser or device may not support webgl."; return null; } gl.viewport(0, 0, gl.drawingbufferwidth, gl.drawingbufferheight); gl.clearcolor(0.0, 0.0, 0.0, 1.0); gl.clear(gl.color_buffer_bit); return gl; } })(); the source code of this example is also available on github.
WebGL: 2D and 3D graphics for the web - Web APIs
webgl (web graphics library) is a javascript api for rendering high-performance interactive 3d and 2d graphics within any compatible web
browser without the use of plug-ins.
... webgl stats a site with statistics about webgl capabilities in
browsers on different platforms.
... phaser is a fast, free and fun open source framework for canvas and webgl powered
browser games.
... vtk.js is a javascript library for scientific visualization in your
browser.
Writing WebSocket servers - Web APIs
browsers generally require a secure connection for websockets, although they may offer an exception for local devices.
... tip: all
browsers send an origin header.
...however, be warned that non-
browser agents can send a faked origin.
...as usual, it may also give the reason why the handshake failed in the http response body, but the message may never be displayed (
browsers do not display it).
WebXR application life cycle - Web APIs
life cycle outline most applications using webxr will follow a similar overall design pattern: check to see if the user's device and
browser are both capable of presenting the xr experience you want to provide.
... make sure the webxr api is available; if navigator.xr is undefined, you can assume the user's
browser and/or device doesn't support webxr.
... each time the callback is invoked, it should call requestanimationframe() again in order to let the
browser know that the callback needs to be run again when it's time to render the next frame.
... include a handler for the xrsession event end event to be informed when the session is ending, regardless of whether your code, the user, or the
browser initiated the termination of the session.
Using Web Workers - Web APIs
accepts zero or more uris as parameters to resources to import; all of the following examples are valid: importscripts(); /* imports nothing */ importscripts('foo.js'); /* imports just "foo.js" */ importscripts('foo.js', 'bar.js'); /* imports two scripts */ importscripts('//example.com/hello.js'); /* you can import scripts from other origins */ the
browser loads each listed script and executes it.
...most
browsers implement this feature as structured cloning.
... function pagelog(smsg) { // use a fragment:
browser will only render/reflow once.
... other types of worker in addition to dedicated and shared web workers, there are other types of worker available: serviceworkers essentially act as proxy servers that sit between web applications, and the
browser and network (when available).
Window.content - Web APIs
this is useful in xul windows that have a <
browser> (or tab
browser or <iframe>) with type="content-primary" attribute on it — the most famous example is firefox main window,
browser.xul.
... in such cases, content returns a reference to the window object for the document currently displayed in the
browser.
... it is a shortcut for
browserref.contentwindow.
... syntax var windowobject = window.content; example executing the following code in a chrome xul window with a <
browser type="content-primary"/> element in it draws a red border around the first div on the page currently displayed in the
browser: content.document.getelementsbytagname("div")[0].style.border = "solid red 1px"; specification none.
window.dump() - Web APIs
output from dump() is not sent to the
browser console.
... output can be sent to the
browser console using console.log().
... privileged code can also use components.utils.reporterror and nsiconsoleservice to log messages to the error console/
browser console.
...to see the dump output you have to enable it by setting the preference
browser.dom.window.dump.enabled to true.
Window.minimize() - Web APIs
browser compatibility the compatibility table in this page is generated from structured data.
... if you'd like to contribute to the data, please check out https://github.com/mdn/
browser-compat-data and send us a pull request.
...expect poor cross-
browser support.non-standard.
... expect poor cross-
browser support.
Privileged features - Web APIs
chrome if on, the page is loaded as window's only content, without any of the
browser's interface elements.
...note also that starting in gecko 2.0, you can use window.showmodaldialog() without universal
browserwrite privileges.
... alwaysraised if on, the new window will always be displayed on top of other
browser windows, regardless of whether it is active or not.
... alwaysontop if on, the new window will always be displayed on top of all other windows (
browser windows and otherwise), regardless of whether it is active or not.
Window.openDialog() - Web APIs
browser compatibility the compatibility table in this page is generated from structured data.
... if you'd like to contribute to the data, please check out https://github.com/mdn/
browser-compat-data and send us a pull request.
...expect poor cross-
browser support.non-standard.
... expect poor cross-
browser support.
Window.releaseEvents() - Web APIs
browser compatibility the compatibility table in this page is generated from structured data.
... if you'd like to contribute to the data, please check out https://github.com/mdn/
browser-compat-data and send us a pull request.
...expect poor cross-
browser support.non-standard.
... expect poor cross-
browser support.deprecated.
Window.requestAnimationFrame() - Web APIs
the window.requestanimationframe() method tells the
browser that you wish to perform 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 performs the next repaint.
... the number of callbacks is usually 60 times per second, but will generally match the display refresh rate in most web
browsers as per w3c recommendation.
... requestanimationframe() calls are paused in most
browsers when running in background tabs or hidden <iframe>s in order to improve performance and battery life.
Window.setCursor() - Web APIs
browser compatibility the compatibility table in this page is generated from structured data.
... if you'd like to contribute to the data, please check out https://github.com/mdn/
browser-compat-data and send us a pull request.
...expect poor cross-
browser support.non-standard.
... expect poor cross-
browser support.
Window.showModalDialog() - Web APIs
specification msdn page for showmodaldialog
browser compatibility the compatibility table in this page is generated from structured data.
... if you'd like to contribute to the data, please check out https://github.com/mdn/
browser-compat-data and send us a pull request.
...expect poor cross-
browser support.non-standard.
... expect poor cross-
browser support.deprecated.
Window.updateCommands() - Web APIs
browser compatibility the compatibility table in this page is generated from structured data.
... if you'd like to contribute to the data, please check out https://github.com/mdn/
browser-compat-data and send us a pull request.
...expect poor cross-
browser support.non-standard.
... expect poor cross-
browser support.
WindowOrWorkerGlobalScope.setInterval() - Web APIs
if you want to enable this functionality on that
browser, you must use a polyfill (see the callback arguments section).
...if you want to work on it with
browsers that natively do not support this feature, use one of the methods proposed above.
...to mitigate the potential impact this can have on performance, once intervals are nested beyond five levels deep, the
browser will automatically enforce a 4 ms minimum value for the interval.
...
browsers may enforce even more stringent minimum values for the interval under some circumstances, although these should not be common.
WorkerGlobalScope.console - Web APIs
the console read-only property of the workerglobalscope interface returns a console object providing access to the
browser console for the worker.
... example this property allows you to have access to a
browser console for debugging purposes, inside a worker.
... so for example you could call console.log('test'); inside a worker (which would basically be the equivalent of self.console.log('test');, as these are being called on the worker scope, which can be referenced with workerglobalscope.self), to return a test message out to the
browser console.
...however, if you are calling console.log() from a sharedworkerglobalscope, the global
browser console will receive the logs.
WorkerGlobalScope - Web APIs
(this does not yet appear to be implemented in any
browser.) events error fired when an error occured.
... offline fired when the
browser has lost access to the network and the value of navigator.online switched to false.
... online fired when the
browser has gained access to the network and the value of navigator.online switched to true.
...in newer
browser versions, close() is available on dedicatedworkerglobalscope and sharedworkerglobalscope instead.
HTML in XMLHttpRequest - Web APIs
this throws an error in the
browsers that implement the feature and works on others.
... method 2 there are two challenges to detecting exactly if a
browser supports html parsing in xmlhttprequest.
... handling html on older
browsers xmlhttprequest originally supported only xml parsing.
...for older
browsers, you can even use the xmlhttprequest.responsetext property in association with regular expressions in order to get, for example, the source code of an html element given its id: function gethtml (oxhr, stargetid) { var ropen = new regexp("<(?!\!)\\s*([^\\s>]+)[^>]*\\s+id\\=[\"\']" + stargetid + "[\"\'][^>]*>" ,"i"), ssrc = oxhr.responsetext, aexec = ropen.exec(ssrc); return aexec ?
Sending and Receiving Binary Data - Web APIs
}; oreq.send(); receiving binary data in older
browsers the load_binary_resource() function shown below loads binary data from the specified url, returning it to the caller.
...function load_binary_resource(url) { var req = new xmlhttprequest(); req.open('get', url, false); //xhr binary charset opt by marcus granado 2006 [http://mgran.blogspot.com] req.overridemimetype('text\/plain; charset=x-user-defined'); req.send(null); if (req.status != 200) return ''; return req.responsetext; } the magic happens in line 5, which overrides the mime type, forcing the
browser to treat it as plain text, using a user-defined character set.
... this tells the
browser not to parse it, and to let the bytes pass through unprocessed.
...add information about other
browsers' support here.
Multipart labels: Using ARIA for labels with embedded fields inside them - Accessibility
a classic example we all know from our
browser settings is the setting “delete history after x days”.
...if on an html page you provide aria-labelledby, you should also provide a label for construct to also support older
browsers that do not have aria support yet.
... with firefox 3, your blind users will automatically get better accessibility from the new attribute, but the users of older
browsers are not left in the dark this way.
...this technique works in firefox; however, it doesn't currently work in many other
browsers, including ie.
Keyboard-navigable JavaScript widgets - Accessibility
the following table describes tabindex behavior in modern
browsers: tabindex attribute focusable with mouse or javascript via element.focus() tab navigable not present follows the platform convention of the element (yes for form controls, links, etc.).
... prevent used key events from performing
browser functions if your widget handles a key event, prevent the
browser from also handling it (for example, scrolling in response to the arrow keys) by using your event handler's return code.
... for example: <span tabindex="-1" onkeydown="return handlekeydown();"> if handlekeydown() returns false, the event will be consumed, preventing the
browser from performing any action based on the keystroke.
... don't rely on consistent behavior for key repeat, at this point unfortunately onkeydown may or may not repeat depending on what
browser and os you're running on.
:link - CSS: Cascading Style Sheets
syntax :link examples by default, most
browsers apply a special color value to visited links.
...(after that, you'll need to clear your
browser history to see them again.) however, the background-color values are likely to remain, as most
browsers do not set that property on visited links by default.
...
browser compatibility the compatibility table on this page is generated from structured data.
... if you'd like to contribute to the data, please check out https://github.com/mdn/
browser-compat-data and send us a pull request.
@font-face - CSS: Cascading Style Sheets
since firefox 61 (and in other modern
browsers) this also accepts two values to specify a range that is supported by a font-face, for example font-stretch: 50% 200%; font-style a font-style value.
... since firefox 61 (and in other modern
browsers) this also accepts two values to specify a range that is supported by a font-face, for example font-style: oblique 20deg 50deg; font-weight a font-weight value.
... since firefox 61 (and in other modern
browsers) this also accepts two values to specify a range that is supported by a font-face, for example font-weight: 100 400; font-variant a font-variant value.
... 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".
forced-colors - CSS: Cascading Style Sheets
syntax the forced-colors media feature indicates whether or not the
browser is currently in forced-colors mode.
...the
browser provides the color palette to authors through the css system color keywords and, if appropriate, it triggers the appropriate value of prefers-color-scheme so that authors can adapt the page.
...that is, user-specified values (if any) or
browser-specified values are used instead.
... examples note: no
browser currently implements this feature so the following example will not work.
Block and inline layout in normal flow - CSS: Cascading Style Sheets
the default
browser stylesheet adds spacing between the paragraphs by way of adding a margin to the top and bottom.
... note: if you are not sure whether margins are collapsing, check the box model values in your
browser devtools.
... changing the formatting context an element participates in
browsers display items as part of a block or inline formatting context in terms of what normally makes sense for that element.
... for example, a <strong> element is used to highlight a word and displays bold in
browsers.
Logical properties for margins, borders and padding - CSS: Cascading Style Sheets
as these are new properties check
browser support before using.
...as these are new properties check
browser support before using.
... .box { border-block: 2px solid green; border-inline-width: 4px; border-inline-style: dotted; border-inline-color: rebeccapurple; } note: these two value shorthands shipped in firefox 66, check
browser support before using as other
browsers may not have implemented them yet.
...these have not yet been implemented by any
browser.
Syntax - CSS: Cascading Style Sheets
the basic goal of the cascading stylesheet (css) language is to allow a
browser engine to paint elements of the page with specific features, like colors, positioning, or decorations.
...each property has a set of valid values, defined by a formal grammar, as well as a semantic meaning, implemented by the
browser engine.
...these statements only apply if a specific condition is matched: the @media at-rule content is applied only if the device on which the
browser runs matches the expressed condition; the @document at-rule content is applied only if the current page matches some conditions, and so on.
...now, though still experimental and not supported by every
browser, conditional group rules can contain a wider range of content: rulesets but also some, but not all, at-rules.
all - CSS: Cascading Style Sheets
body { font-size: small; background-color: #f0f0f0; color:blue; } blockquote { background-color: skyblue; color: red; } the <blockquote> uses the
browser's default styling together with a specific background and text color.
... body { font-size: small; background-color: #f0f0f0; color:blue; } blockquote { background-color: skyblue; color: red; } blockquote { all: unset; } the <blockquote> doesn't use the
browser default styling: it is an inline element now (initial value), its background-color is transparent (initial value), but its font-size is still small (inherited value) and its color is blue (inherited value).
... body { font-size: small; background-color: #f0f0f0; color:blue; } blockquote { background-color: skyblue; color: red; } blockquote { all: initial; } the <blockquote> doesn't use the
browser default styling: it is an inline element now (initial value), its background-color is transparent (initial value), its font-size is normal (initial value) and its color is black (initial value).
... body { font-size: small; background-color: #f0f0f0; color:blue; } blockquote { background-color: skyblue; color: red; } blockquote { all: inherit; } the <blockquote> doesn't use the
browser default styling: it is a block element now (inherited value from its containing <body> element), its background-color is #f0f0f0 (inherited value), its font-size is small (inherited value) and its color is blue (inherited value).
aspect-ratio - CSS: Cascading Style Sheets
this property is not yet implemented in
browsers, however some
browsers are implementing this internally in order to provide the aspect ratio mapping described below.
...this appears in the
browser's internal ua stylesheet.
... editor's draft initial definition
browser compatibility the compatibility table on this page is generated from structured data.
... if you'd like to contribute to the data, please check out https://github.com/mdn/
browser-compat-data and send us a pull request.
box-align - CSS: Cascading Style Sheets
browser compatibility the compatibility table on this page is generated from structured data.
... if you'd like to contribute to the data, please check out https://github.com/mdn/
browser-compat-data and send us a pull request.
...expect poor cross-
browser support.non-standard.
... expect poor cross-
browser support.deprecated.
box-direction - CSS: Cascading Style Sheets
browser compatibility the compatibility table on this page is generated from structured data.
... if you'd like to contribute to the data, please check out https://github.com/mdn/
browser-compat-data and send us a pull request.
...expect poor cross-
browser support.non-standard.
... expect poor cross-
browser support.deprecated.
break-after - CSS: Cascading Style Sheets
page break aliases for compatibility reasons, the legacy page-break-after property should be treated by
browsers as an alias of break-after.
...a subset of values should be aliased as follows: page-break-after break-after auto auto left left right right avoid avoid always page the always value of page-break-* was implemented by
browsers as a page break, and not as a column break.
...
browser compatibility the compatibility table on this page is generated from structured data.
... if you'd like to contribute to the data, please check out https://github.com/mdn/
browser-compat-data and send us a pull request.
break-before - CSS: Cascading Style Sheets
page break aliases for compatibility reasons, the legacy page-break-before property should be treated by
browsers as an alias of break-before.
...a subset of values should be aliased as follows: page-break-before break-before auto auto left left right right avoid avoid always page the always value of page-break-* was implemented by
browsers as a page break, and not as a column break.
...
browser compatibility the compatibility table on this page is generated from structured data.
... if you'd like to contribute to the data, please check out https://github.com/mdn/
browser-compat-data and send us a pull request.
break-inside - CSS: Cascading Style Sheets
page break aliases for compatibility reasons, the legacy page-break-inside property should be treated by
browsers as an alias of break-inside.
...
browser compatibility the compatibility table on this page is generated from structured data.
... if you'd like to contribute to the data, please check out https://github.com/mdn/
browser-compat-data and send us a pull request.
... for older webkit-based
browsers, the prefixed property -webkit-column-break-inside can be used to control column breaks.
caption-side - CSS: Cascading Style Sheets
browser compatibility the compatibility table on this page is generated from structured data.
... if you'd like to contribute to the data, please check out https://github.com/mdn/
browser-compat-data and send us a pull request.
...expect poor cross-
browser support.non-standard.
... expect poor cross-
browser support.
cursor - CSS: Cascading Style Sheets
the
browser will try to load the first image specified, falling back to the next if it can't, and falling back to the keyword value if no images could be loaded (or if none were specified).
... keyword values move your mouse over values to see their live appearance in your
browser: category css value example description general auto the ua will determine the cursor to display based on the current context.
...cursor changes using images which are outside the size range supported by the
browser will generally just be ignored.
... check the
browser compatibility table for any notes on cursor size limits.
font-optical-sizing - CSS: Cascading Style Sheets
syntax /* keyword values */ font-optical-sizing: none; font-optical-sizing: auto; /* default */ /* global values */ font-optical-sizing: inherit; font-optical-sizing: initial; font-optical-sizing: unset; values none the
browser will not modify the shape of glyphs for optimal viewing.
... auto the
browser will modify the shape of glyphs for optimal viewing.
... this is the default across
browsers.</p> <p class="no-optical-sizing">this paragraph is not optically sized.
... you should see a difference in supporting
browsers.</p> @font-face { src: url('amstelvaralpha-vf.ttf'); font-family:'amstelvar'; font-style: normal; } p { font-size: 36px; font-family: amstelvar; } .no-optical-sizing { font-optical-sizing: none; } note: the font referenced above — which includes optical sizing and is freely-licensed — is good for testing.
image() - CSS: Cascading Style Sheets
if the
browser doesn't understand the media fragments notation, it simply ignores the fragment, displaying the entire image.
...
browsers that understand image() also understand the fragment notation.
... accessibility concerns
browsers do not provide any special information on background images to assistive technology.
... providing fallback images .help::before { content: image("try.webp", "try.svg", "try.gif"); } in this example, the
browser will display an image as generated content before the content of the element with the class of help.
outline-color - CSS: Cascading Style Sheets
note that
browsers are not required to support this value; if they don't, this keyword is considered invalid.
... 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.
...
browser compatibility the compatibility table in this page is generated from structured data.
... if you'd like to contribute to the data, please check out https://github.com/mdn/
browser-compat-data and send us a pull request.
text-decoration-thickness - CSS: Cascading Style Sheets
syntax /* single keyword */ text-decoration-thickness: auto; text-decoration-thickness: from-font; /* length */ text-decoration-thickness: 0.1em; text-decoration-thickness: 3px; /* percentage */ text-decoration-thickness: 10%; /* global values */ text-decoration-thickness: inherit; text-decoration-thickness: initial; text-decoration-thickness: unset; values auto the
browser chooses an appropriate width for the text decoration line.
...if the font file doesn't include this information, behave as if auto was set, with the
browser choosing an appropriate thickness.
... <length> specifies the thickness of the text decoration line as a <length>, overriding the font file suggestion or the
browser default.
...the
browser must use a minimum of 1 device pixel.
text-transform - CSS: Cascading Style Sheets
when applying text-transform: lowercase to an uppercase sigma (Σ), the
browser needs to choose the right lowercase form based on context.
... note: support for language-specific cases varies between
browsers, so check the
browser compatibility table.
...this resulted in differences between
browsers in the way the first letter was calculated (firefox considered - and _ as letters, but other
browsers did not.
...the capitalize line in the
browser compatibility table contains the version the different engines started to support this now precisely-defined behavior.
Mutation events - Developer guides
the practical reasons to avoid the mutation events are performance issues and cross-
browser support.
... cross-
browser support these events are not implemented consistently across different
browsers, for example: ie prior to version 9 didn't support the mutation events at all and does not implement some of them correctly in version 9 (for example, domnodeinserted) webkit doesn't support domattrmodified (see webkit bug 8191 and the workaround) "mutation name events", i.e.
... domelementnamechanged and domattributenamechanged are not supported in firefox (as of version 11), and probably in other
browsers as well.
... dottoro documents
browser support for mutation events.
disabled - HTML: Hypertext Markup Language
often
browsers grey out such controls and it won't receive any browsing events, like mouse clicks or focus-related ones.
... firefox will, unlike other
browsers, persist the dynamic disabled state of a <button> across page loads.
... usability
browsers display disabled form controls greyed as disabled form controls are immutable, won't receive focus or any browsing events, like mouse clicks or focus-related ones, and aren't submitted with the form.
... examples when form controls are disabled, many
browsers will display them in a lighter, greyed-out color by default.
HTML attribute: pattern - HTML: Hypertext Markup Language
tip: use the title attribute to specify text that most
browsers will display as a tooltip to explain what the requirements are to match the pattern.
...some
browsers show a tooltip with title contents, improving usability for sighted users.
...some
browsers show a tooltip when an element with a title is hovered, but that leaves out keyboard-only and touch-only users.
... while titles are used by some
browsers to populate error messaging, because
browsers sometimes also show the title as text on hover, it therefore shows in non-error situations, so be careful not to word titles as if an error has occurred.
<basefont> - HTML: Hypertext Markup Language
the document text in the default style is rendered in the first font face that the client's
browser supports.
... if no font listed is installed on the local system, the
browser typically defaults to the proportional or fixed-width font for that system.
...though once (imprecisely) normalized in html 3.2, it wasn't supported in all major
browsers.
... further,
browsers, and even successive versions of
browsers, never implemented it in the same way: practically, using it has always brought indeterminate results.
<bdi>: The Bidirectional Isolate element - HTML: Hypertext Markup Language
the html bidirectional isolate element (<bdi>) tells the
browser's bidirectional algorithm to treat the text it contains in isolation from its surrounding text.
...
browsers implement the unicode bidirectional algorithm to handle this.
... though the same visual effect can be achieved using the css rule unicode-bidi: isolate on a <span> or another text-formatting element, html authors should not use this approach because it is not semantic and
browsers are allowed to ignore css styling.
...these elements instruct the
browser to treat the name in isolation from its embedding context, so the example output is properly ordered: <ul> <li><bdi class="name">اَلأَعْشَى</bdi> - 1st place</li> <li><bdi class="name">jerry cruncher</bdi> - 2nd place</li> </ul> body { border: 1px solid #3f87a6; max-width: calc(100% - 40px - 6px); padding: 20px; width: calc(100% - 40px - 6px); border-width: 1px 1px 1px ...
<element>: The Custom Element element (Obsolete) - HTML: Hypertext Markup Language
browser compatibility the compatibility table in this page is generated from structured data.
... if you'd like to contribute to the data, please check out https://github.com/mdn/
browser-compat-data and send us a pull request.
...expect poor cross-
browser support.non-standard.
... expect poor cross-
browser support.deprecated.
<form> - HTML: Hypertext Markup Language
the
browser uses them in the order in which they are listed.
... autocomplete indicates whether input elements can by default have their values automatically completed by the
browser.
...possible values: off: the
browser may not automatically complete entries.
... (
browsers tend to ignore this for suspected login forms; see the autocomplete attribute and login fields.) on: the
browser may automatically complete entries.
<isindex> - HTML: Hypertext Markup Language
its support depended on both the
browser and the server to react to the query.
...all major
browsers have now removed <isindex>.
... 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...
...the question of forms for making queries is mentioned in reference to dynatext
browser: "the
browser displays toggle buttons, text fields etc.
<noframes>: The Frame Fallback element - HTML: Hypertext Markup Language
the obsolete html no frames or frame fallback element, <noframes>, provides content to be presented in
browsers that don't support (or have disabled support for) the <frame> element.
... although most commonly-used
browsers support frames, there are exceptions, including certain special-use
browsers including some mobile
browsers, as well as text-mode
browsers.
... <noframes> can be used to present a message explaining that the user's
browser doesn't support frames, but ideally should be used to present an alternate form of the site that doesn't use frames but still offers the same or similar functionality.
... <frameset cols="50%,50%"> <frame src="https://developer.mozilla.org/en/html/element/frameset" /> <frame src="https://developer.mozilla.org/en/html/element/frame" /> <noframes><p>it seems your
browser does not support frames or is configured to not allow them.</p></noframes> </frameset> specifications specification status comment html5the definition of 'noframes' in that specification.
<picture>: The Picture element - HTML: Hypertext Markup Language
the
browser will consider each child <source> element and choose the best match among them.
... if no matches are found—or the
browser doesn't support the <picture> element—the url of the <img> element's src attribute is selected.
...this lets
browsers opt for lower-density versions in data-saving modes, and you don't have to write explicit media conditions.
... if the <source>'s media condition evaluates to false, the
browser skips it and evaluates the next element inside <picture>.
<plaintext>: The Plain Text element (Deprecated) - HTML: Hypertext Markup Language
<plaintext> is deprecated since html 2, and not all
browsers implemented it.
...
browsers that did implement it didn't do so consistently.
... <plaintext> is obsolete in html5;
browsers that accept it may instead treat it as a <pre> element that still interprets html within.
...escape any <, > and & characters, to prevent
browsers inadvertently parsing content the element content as html.
<select>: The HTML Select element - HTML: Hypertext Markup Language
when multiple is specified, most
browsers will show a scrolling list box instead of a single line dropdown.
...
browsers are not required to present a select element as a scrolled list box.
... note: according to the html5 specification, the default value for size should be 1; however, in practice, this has been found to break some web sites, and no other
browser currently does that, so mozilla has opted to continue to return 0 for the time being with firefox.
... however, these properties don't produce a consistent result across
browsers, and it is hard to do things like line different types of form element up with one another in a column.
Compression in HTTP - HTTP
in practice, web developers don't need to implement compression mechanisms, both
browsers and servers have it implemented already, but they have to be sure that the server is configured adequately.
... all modern
browsers and servers do support it and the only thing to negotiate is the compression algorithm to use.
... to select the algorithm to use,
browsers and servers use proactive content negotiation.
... the
browser sends an accept-encoding header with the algorithm it supports and its order of precedence, the server picks one, uses it to compress the body of the response and uses the content-encoding header to tell the
browser the algorithm it has chosen.
Connection management in HTTP/1.x - HTTP
http pipelining http pipelining is not activated by default in modern
browsers: buggy proxies are still common and these lead to strange and erratic behaviors that web developers cannot foresee and diagnose easily.
... today, every http/1.1-compliant proxy and server should support pipelining, though many have limitations in practice: a significant reason no modern
browser activates this feature by default.
...as a solution,
browsers open several connections to each domain, sending parallel requests.
...each of these domains resolve to the same server, and the web
browser will open 6 connections to each (in our example, boosting the connections to 18).
Feature Policy - HTTP
feature policy allows web developers to selectively enable, disable, and modify the behavior of certain features and apis in the
browser.
... with feature policy, you opt-in to a set of "policies" for the
browser to enforce on specific features used throughout a website.
... these policies restrict what apis the site can access or modify the
browser's default behavior for certain features.
... for each policy-controlled feature, the
browser maintains a list of origins for which the feature is enabled, known as an allowlist.
Access-Control-Allow-Credentials - HTTP
the access-control-allow-credentials response header tells
browsers whether to expose the response to frontend javascript code when the request's credentials mode (request.credentials) is include.
... when a request's credentials mode (request.credentials) is include,
browsers will only expose the response to frontend javascript code if the access-control-allow-credentials value is true.
...note that simple get requests are not preflighted, and so if a request is made for a resource with credentials, if this header is not returned with the resource, the response is ignored by the
browser and not returned to web content.
...for a cors request with credentials, in order for
browsers to expose the response to frontend javascript code, both the server (using the access-control-allow-credentials header) and the client (by setting the credentials mode for the xhr, fetch, or ajax request) must indicate that they’re opting in to including credentials.
Cache-Control - HTTP
cache-control: immutable cache-control: stale-while-revalidate=<seconds> cache-control: stale-if-error=<seconds> directives cacheability a response is normally cached by the
browser if: it has a status code of 301, 302, 307, 308, or 410 and cache-control does not have no-store, or if proxy, does not have private and authorization is unset either has a status code of 301, 302, 307, 308, or 410 or has public, max-age or s-maxage in cache-control or has expires set public the response may be stored by any cache, even if the response is normally non-c...
... private the response may be stored only by a
browser's cache, even if the response is normally non-cacheable.
...although other directives may be set, this alone is the only directive you need in preventing cached responses on modern
browsers.
...it therefore forbids a proxy or
browser feature, such as google’s web light, from converting images to minimize data for a cache store or slow connection.
Content-Disposition - HTTP
in a regular http response, the content-disposition response header is a header indicating if the content is expected to be displayed inline in the
browser, that is, as a web page or as part of a web page, or as an attachment, that is downloaded and saved locally.
... header type response header (for the main body) general header (for a subpart of a multipart body) forbidden header name no syntax as a response header for the main body the first parameter in the http context is either inline (default value, indicating it can be displayed inside the web page, or as the web page) or attachment (indicating it should be downloaded; most
browsers presenting a 'save as' dialog, prefilled with the value of the filename parameters if present).
... examples a response triggering the "save as" dialog: 200 ok content-type: text/html; charset=utf-8 content-disposition: attachment; filename="cool.html" content-length: 21 <html>save me!</html> this simple html file will be saved as a regular download rather than displayed in the
browser.
... most
browsers will propose to save it under the cool.html filename (by default).
Expect-CT - HTTP
owing mechanisms: x.509v3 certificate extension to allow embedding of signed certificate timestamps issued by individual logs a tls extension of type signed_certificate_timestamp sent during the handshake supporting ocsp stapling (that is, the status_request tls extension) and providing a signedcertificatetimestamplist when a site enables the expect-ct header, they are requesting that the
browser check that any certificate for that site appears in public ct logs.
...
browsers ignore the expect-ct header over http; the header only has effect on https connections.
...
browsers will not remember an expect-ct policy, unless the site has 'proven' it can serve a certificate satisfying the certificate transparency requirements.
...
browsers implement their own trust model regarding which ct logs are considered trusted for the certificate to have been logged to.
Large-Allocation - HTTP
the non-standard large-allocation response header tells the
browser that the page being loaded is going to want to perform a large allocation.
... it is currently only implemented in firefox, but is harmless to send to every
browser.
...the large-allocation tells the
browser that the web content in the to-be-loaded page is going to want to perform 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.
... this message means that the
browser saw the large-allocation header, and was able to reload the page into a new process which should have more available contiguous memory.
X-DNS-Prefetch-Control - HTTP
the x-dns-prefetch-control http response header controls dns prefetching, a feature by which
browsers proactively perform 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 is what
browsers do, if they support the feature, when this header is not present off disables dns prefetching.
... the implementation of this prefetching in some
browsers allows domain name resolution to occur in parallel with (instead of in serial with) the fetching of actual page content.
... configuring prefetching in the
browser in general, you don't need to do anything to manage prefetching.
Proxy Auto-Configuration (PAC) file - HTTP
a proxy auto-configuration (pac) file is a javascript function that determines whether web
browser requests (http, https, and ftp) go directly to the destination or are forwarded to a web proxy server.
... the
browser will automatically retry a previously unresponsive proxy after 30 minutes.
... if all proxies are down, and there was no direct option specified, the
browser will ask if proxies should be temporarily ignored, and direct connections attempted.
... after 20 minutes, the
browser will ask if proxies should be retried, asking again after an additional 40 minutes.
Object.prototype.__proto__ - JavaScript
warning: changing the [[prototype]] of an object is, by the nature of how modern javascript engines optimize property accesses, a very slow operation, in every
browser and javascript engine.
... warning: while object.prototype.__proto__ is supported today in most
browsers, its existence and exact behavior has only been standardized in the ecmascript 2015 specification as a legacy feature to ensure compatibility for web
browsers.
...it was never originally included in the ecmascript language spec, but modern
browsers implemented it anyway.
... only recently was the __proto__ property standardized by the ecmascript 2015 specification for compatibility with web
browsers, so it will be supported into the future.
eval() - JavaScript
thus, any use of eval() will force the
browser to do long expensive variable name lookups to figure out where the variable exists in the machine code and set its value.
... additonally, new things can be introduced to that variable through eval() such as changing the type of that variable, forcing the
browser to re-evaluate all of the generated machine code to compensate.
...in the function without the eval(), the object is being evaluated in the global scope, so it is safe for the
browser to assume that date refers to window.date() instead of a local variable called date.
... but, in the code using eval(), the
browser cannot assume this since what if your code looked like the following: function date(n){ return ["monday","tuesday","wednesday","thursday","friday","saturday","sunday"][n%7 || 0]; } function loosejsonparse(obj){ return eval("(" + obj + ")"); } console.log(loosejsonparse( "{a:(4-1), b:function(){}, c:new date()}" )) thus, in the eval() version of the code, the
browser is forced to make the expensive lookup call to check to see if there are any local variables called date().
display - Web app manifests
the display mode changes how much of
browser ui is shown to the user and can range from
browser (when the full
browser window is shown) to fullscreen (when the app is full-screened).
... note: if the display member is not specified, it defaults to
browser.
...the elements will vary by
browser.
...
browser browser the application opens in a conventional
browser tab or new window, depending on the
browser and platform.
Lazy loading - Web Performance
css by default, css is treated as a render blocking resource, so the
browser won't render any processed content until the cssom is constructed.
... loading attribute the loading attribute on an <img> element (or the loading attribute on an <iframe>) can be used to instruct the
browser to defer loading of images/iframes that are off-screen until the user scrolls near them.
... polyfill include this polyfill to provide support for older and currently incompatible
browsers: loading-attribute-polyfill intersection observer api intersection observers allow the user to know when an observed element enters or exits the
browser’s viewport.
... event handlers when
browser compatibility is crucial, there are a few options: polyfill intersection observer fallback to scroll, resize or orientation change event handlers to determine if a specific element is in viewport specifications specification status comment html living standard living standard ...
Progressive loading - Progressive web apps (PWAs)
render-blocking resources bundling is a problem, because the
browser has to load the html, css, and javascript before it can paint their rendered results onto the screen.
...we can also split css files and add media types to them: <link rel="stylesheet" href="style.css"> <link rel="stylesheet" href="print.css" media="print"> this will tell the
browser to load them only when the condition is met.
... placeholder image instead of having all the screenshots of games referenced in <img> element src attributes, which will force the
browser to download them automatically, we can do it selectively via javascript.
... remember about the progressive enhancement approach — offer a usable product no matter the device or platform, but be sure to enrich the experience to those using modern
browsers.
Making PWAs work offline with Service workers - Progressive web apps (PWAs)
service workers explained service workers are a virtual proxy between the
browser and the network.
... "progressive" in pwa when implemented properly as a progressive enhancement, service workers can benefit users who have modern
browsers that support the api by providing offline support, but won't break anything for those using legacy
browsers.
... registering the service worker we'll start by looking at the code that registers a new service worker, in the app.js file: note : we're using the es6 arrow functions syntax in the service worker implementation if('serviceworker' in navigator) { navigator.serviceworker.register('./pwa-examples/js13kpwa/sw.js'); }; if the service worker api is supported in the
browser, it is registered against the site using the serviceworkercontainer.register() method.
... need anymore: self.addeventlistener('activate', (e) => { e.waituntil( caches.keys().then((keylist) => { return promise.all(keylist.map((key) => { if(key !== cachename) { return caches.delete(key); } })); }) ); }); this ensures we have only the files we need in the cache, so we don't leave any garbage behind; the available cache space in the
browser is limited, so it is a good idea to clean up after ourselves.
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-platform web applications.
... service workers a service worker is a script that allows intercepting and control of how a web
browser handles its network requests and asset caching.
... documentation <-- the temporary automatic list below will be replaced soon --> add to home screenadd to home screen (or a2hs for short) is a feature available in modern
browsers that allows a user to "install" a web app, ie.
...this guide explains how a2hs is used, and what you need to do as a developer to allow your users to take advantage of it.how to make pwas installablein this article, we learned about how we can make pwas installable with a properly-configured web manifest, and how the user can then install the pwa with the "add to home screen" feature of their
browser.how to make pwas re-engageable using notifications and pushhaving the ability to cache the contents of an app to work offline is a great feature.
color-profile - SVG: Scalable Vector Graphics
<name> a name corresponding to a defined color profile that is in the
browser's color profile description database.
... the
browser searches the color profile description database for a color profile description entry whose name descriptor matches <name> and uses the last matching entry that is found.
... recommendation initial definition
browser compatibility the compatibility table on this page is generated from structured data.
... if you'd like to contribute to the data, please check out https://github.com/mdn/
browser-compat-data and send us a pull request.
2015 MDN Fellowship Program - Archive of obsolete content
to support our efforts, the fellow will review various technical specifications to identify gaps between the documentation and current situation and refine existing tests to adapt to this cross-
browser test harness.
... github: jdm twitter: @lastontheboat service workers brief project description service workers essentially act as proxy servers that sit between web applications, the
browser and (when available) the network.
...finding and addressing performance bottlenecks depends on tooling the
browser networking and rendering but also, often more important, user perception.
remote/parent - Archive of obsolete content
usage in multiprocess firefox: the
browser ui runs in one process, sometimes called the chrome process or the parent process web content runs in one or more other processes, sometimes called content processes or remote processes or child processes.
...for example, this may be a xul <
browser> element.
... istab a boolean property indicating if this frame displays in one of the application's main
browser tabs.
ui/button/toggle - Archive of obsolete content
depending on your application, you might want a button to have different state in different
browser windows or different tabs.
...for example, suppose the
browser has two windows (w1 and w2), and each window has two tabs.
... initially the buttons in all tabs and windows will display the label value inherited from the global state:
browser: label = "my default" w1 t1 > displays "my default" t2 > displays "my default" w2 t3 > displays "my default" t4 > displays "my default" if you then set a label specific to t3 as "my t3 label", then set a label state specific to w2 as "my w2 label", then the button displayed when t3 is the active tab will still show "my t3 label", but the button displayed when t4 is the active tab will show "my w2 label":
browser: label = "my default" w1 t1 > displays "my default" t2 > displays "my default" w2 t3 > displays "my t3 label" t4 > displays "my w2 label" ...
ui/toolbar - Archive of obsolete content
working with multiple
browser windows there's only a single toolbar for all
browser windows, so operations like show and hide work across all
browser windows.
... if you need to customize content for a particular
browser window, you can do that by messaging the window-specific frame hosted by that toolbar.
...note that since there is only one toolbar for the whole
browser, opening another
browser window does not cause this event to be emitted again.
Low-Level APIs - Archive of obsolete content
frame/utils provides helper functions for working with platform internals like frames and
browsers.
... tabs/utils functions for working with xul tabs and the xul tab
browser object.
... window/utils functions for working with
browser windows.
Creating Reusable Modules - Archive of obsolete content
the documentation for that interface includes an example which we can adapt like this: var {cc, ci} = require("chrome"); function promptforfile() { const nsifilepicker = ci.nsifilepicker; var fp = cc["@mozilla.org/filepicker;1"] .createinstance(nsifilepicker); var window = require("sdk/window/utils").getmostrecent
browserwindow(); fp.init(window, "select a file", nsifilepicker.modeopen); fp.appendfilters(nsifilepicker.filterall | nsifilepicker.filtertext); var rv = fp.show(); if (rv == nsifilepicker.returnok || rv == nsifilepicker.returnreplace) { var file = fp.file; // get the path as string.
... var s = array.from(hash, (c, i) => tohexstring(hash.charcodeat(i))).join(""); return s; } function promptforfile() { var window = require("sdk/window/utils").getmostrecent
browserwindow(); const nsifilepicker = ci.nsifilepicker; var fp = cc["@mozilla.org/filepicker;1"] .createinstance(nsifilepicker); fp.init(window, "select a file", nsifilepicker.modeopen); fp.appendfilters(nsifilepicker.filterall | nsifilepicker.filtertext); var rv = fp.show(); if (rv == nsifilepicker.returnok || rv == nsifilepicker.returnreplace) { var file = fp.file; // g...
... so "filepicker.js" should look like this: var {cc, ci} = require("chrome"); function promptforfile() { var window = require("sdk/window/utils").getmostrecent
browserwindow(); const nsifilepicker = ci.nsifilepicker; var fp = cc["@mozilla.org/filepicker;1"] .createinstance(nsifilepicker); fp.init(window, "select a file", nsifilepicker.modeopen); fp.appendfilters(nsifilepicker.filterall | nsifilepicker.filtertext); var rv = fp.show(); if (rv == nsifilepicker.returnok || rv == nsifilepicker.returnreplace) { var file = fp.file; ...
Getting Started (jpm) - Archive of obsolete content
if firefox can not be located, or you have installed firefox developer as an alternate
browser, you may need to provide the path to it.
... for example, in ubuntu: jpm run -b /usr/bin/firefox when firefox launches, in the top-right corner of the
browser you'll see an icon with the firefox logo.
...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 perform basic operations with tabs.
IsDefaultNamespace - Archive of obsolete content
the following is a snippet to get isdefaultnamespace() supported across other
browsers.
... note that all gecko-based
browsers (including firefox) support node.isdefaultnamespace.
... this function is not necessary for gecko-based
browsers (though the function will quickly return the standard value for mozilla
browsers).
LookupPrefix - Archive of obsolete content
here is an implementation of lookupprefix which should work cross-
browser.
... note that all gecko-based
browsers (including firefox) support node.lookupprefix.
... this function is not necessary for gecko-based
browsers when used in xhtml.
JavaScript timers - Archive of obsolete content
the requestanimationframe() function tells the
browser that you wish to perform an animation and requests that the
browser schedule a repaint of the window for the next animation frame.
... setimmediate() calls a function immediately after the
browser has completed other operations, such as events and display updates.
... requestanimationframe() requestanimationframe() tells the
browser that you wish to perform an animation and requests that the
browser schedule a repaint of the window for the next animation frame.
Windows - Archive of obsolete content
opening new
browser windows to open a new
browser window, you can simply use window.open().
... however, window.open() returns a window object for content, not for the
browser window itself, so you should get the chrome window first.
... example window.open(); //this open a pop-up window that could be "blocked" client-side //the following code generate an error as describe in the following warning box var wm = components.classes["@mozilla.org/appshell/window-mediator;1"] .getservice(components.interfaces.nsiwindowmediator); var newwindow = wm.getmostrecentwindow("navigator:
browser"); var b = newwindow.g
browser; the code generate a typeerror from firefox console.
getAttributeNS - Archive of obsolete content
as some
browsers do not support getattributens, the following might be used to work on them as well.
... note that all gecko-based
browsers (including firefox) support dom:element.getattributens.
... this function is not necessary for gecko-based
browsers.
Adding Toolbars and Toolbar Buttons - Archive of obsolete content
to add your buttons, all you need to do is overlay the palette in your main
browser overlay.
... <overlay id="xulschoolhello-
browser-overlay" xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"> <toolbarpalette id="
browsertoolbarpalette"> <toolbarbutton id="xulschoolhello-hello-world-button" class="toolbarbutton-1 chromeclass-toolbar-additional" label="&xulschoolhello.helloworld.label;" tooltiptext="&xulschoolhello.helloworld.tooltip;" oncommand="xulschoolchrome.
browseroverlay.dosomething(event);" /> <!-- more buttons here.
...ame.label;" accesskey="&xulschoolhello.toolbar.accesskey;" customizable="true" mode="icons" context="toolbar-context-menu" defaultset="xulschoolhello-hello-world-button" insertbefore="personaltoolbar" /> </toolbox> </window> (note for mac os x: <window id="main-window"> and </window> are not required) our toolbar is added as a child of the toolbox element in the main
browser window.
Appendix F: Monitoring DOM changes - Archive of obsolete content
while they are still viable for add-ons targeting only the latest firefox, those wishing to support older
browsers will need to provide fallbacks.
... the code below contains an inefficient fallback implementation for older
browsers.
...minor changes are also required if one wishes to support other
browsers, or to run in non-chrome-privileged scopes.
Introduction - Archive of obsolete content
mozilla and firefox the term mozilla can be used to refer to several concepts: the mozilla project, the mozilla foundation, the mozilla corporation and the old mozilla
browser.
... mozilla has spawned several products and projects, the most notable being the mozilla firefox web
browser.
...you can identify the level of compatibility of web standards in gecko-based
browsers looking at their user agent string, which should include the gecko version.
Add-ons - Archive of obsolete content
bootstrapped extensions
browser.bookmarks.export( function() {...} // optional function ) code snippets … creating custom firefox extensions with the mozilla build system there is a wealth of material on creating extensions for firefox.
...in your extension's
browser.xul overlay, write code which listens for a custom dom event.
... tabbed
browser here you should find a set of useful code snippets to help you work with firefox's tabbed
browser.
XML data - Archive of obsolete content
you create a sample xml document, and a stylesheet that you can use to display it in your
browser.
...by default, your mozilla
browser displays xml in a format very similar to the original data in the xml file.
...color: white; } ocean { display: block; margin-bottom: 1em; } name { display: block; font-weight: bold; font-size: 150%; } area { display: block; } area:before { content: "area: "; } area:after { content: " million km\b2"; } depth { display: block; } depth:before { content: "mean depth: "; } depth:after { content: " m"; } open the document in your
browser: oceans arctic area: 13,000 million km² mean depth: 1,200 m atlantic area: 87,000 million km² mean depth: 3,900 m .
Using XML Data Islands in Mozilla - Archive of obsolete content
this feature is not based on multi-vendor web standards and is not supported in firefox (or other non-ie
browsers).
...haseorder> </script> the xml source text can then be retrieved like this: var ordersource = document.getelementbyid("purchase-order").textcontent; the xml source text can be parsed into a dom tree using the domparser api: var parser = new domparser(); var doc = parser.parsefromstring(ordersource, "application/xml"); the html5 data block-based way shown here works in firefox, opera, webkit-based
browsers such as chrome and safari, and ie9 while ie's xml data islands work only in ie.
...the price of the first line item is " + firstprice + "."; } </script> </head> <body onload="rundemo()";> demo did not run </body> </html> the xml source text can be parsed into a dom tree using the domparser api: var parser = new domparser(); var doc = parser.parsefromstring(ordersource, "application/xml"); the html5 data block-based way shown here works in firefox, opera, webkit-based
browsers such as chrome and safari, and ie9 while ie's xml data islands work only in ie.
Finding the code to modify - Archive of obsolete content
the "document - dom nodes" pane on the left-hand side of the inspector window displays a tree representation of the
browser window's xul file.
... when you select a node in the tree, a red border flashes for several seconds around the visual representation of that node in the
browser window.
...notice the flashing red border around the horizontal status bar at the bottom of the
browser window.
Making it into a static overlay - Archive of obsolete content
when navigator.xul is rendering into the
browser's application interface, this causes any attributes or child elements of the statusbar element in the overlay file to be added to the interface's dom and thus show up in the interface as if they were defined on the same element in navigator.xul.
... <!-- navigator --> <script type="application/javascript" src="chrome://navigator/content/
browser.js"/> <script type="application/javascript" src="chrome://navigator/content/navigator.js"/> <script type="application/javascript" src="chrome://navigator/content/navigatordd.js"/> <script type="application/javascript" src="chrome://navigator/content/sessionhistoryui.js"/> <script type="application/javascript" src="chrome://navigator/content/tinderstatus.js"/> <!-...
...ress"> <progressmeter class="progressmeter-statusbar" id="statusbar-icon" mode="normal" value="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> ...
Getting Started - Archive of obsolete content
skin\classic\mozapps mozapps contains all the styles and icons for the
browser peripherals, such as the extension manager or update wizard.
...the packages section lists which components of the
browser you're modifying.
...css files the css files in these directories tell the
browser how to display the buttons and other controls, where to put the images, what border and padding it should put around them, and so on.
Layout System Overview - Archive of obsolete content
presentation formatting is also required to provide compatibility with legacy
browsers (microsoft internet explorer and netscape navigator 4.x).
...this is referred to as the galley mode presentation, and is what one expects from a typical
browser.
...in other words, the same html or xml document could be viewed as a normal galley presentation in a
browser window, while simultaneously being presented in a paged presentation to a printer, or even an aural presentation to a speech-synthesizer.
JavaScript crypto - Archive of obsolete content
though some
browsers may still support it, it is in the process of being dropped.
... warning: the features mentioned in this article are deleted proprietary mozilla extensions, and are not supported in any other
browser.
... note: this function provides a convenient way to erase the ssl session state at the
browser level, but in order to really guarantee that the state is erased, it is more secure to do it on the server side whenever possible.
Basics - Archive of obsolete content
class notifications the notification box appears at the bottom right corner of the
browser and displays important information to the user.
...blah(lengthstringfocusedstringtostringstringpopstringpushstringreversestringshiftstringsortstringsplicestringunshiftstring)this is some default text lengththe number of open tabsstring focusedthe current tab in your
browserstring tostringstuffstring popstuffstring pushstuffstring reversestuffstring shiftstuffstring sortstuffstring splicestuffstring unshiftstuffstring onready()when the inherited document is fully loaded.
...methods open(urlstring)opens a new tab in your
browser with a defined url.
Tabs - Archive of obsolete content
blah(lengthstringfocusedstringtostringstringpopstringpushstringreversestringshiftstringsortstringsplicestringunshiftstring)this is some default text lengththe number of open tabsstring focusedthe current tab in your
browserstring tostringstuffstring popstuffstring pushstuffstring reversestuffstring shiftstuffstring sortstuffstring splicestuffstring unshiftstuffstring onready()when the inherited document is fully loaded.
...methods open(urlstring)opens a new tab in your
browser with a defined url.
... urlurl to be openedstring jetpack.tabs.open("http://www.example.com/"); blah(lengthstringfocusedstringtostringstringpopstringpushstringreversestringshiftstringsortstringsplicestringunshiftstring)this is some default text lengththe number of open tabsstring focusedthe current tab in your
browserstring tostringstuffstring popstuffstring pushstuffstring reversestuffstring shiftstuffstring sortstuffstring splicestuffstring unshiftstuffstring onready()when the inherited document is fully loaded.
FAQ - Archive of obsolete content
it lets users start web applications from their desktop, start menu, and dock, and it opens those applications in their own window separate from a web
browser and without the
browser interface (back and forward buttons, location bar, etc.).
...prism is a simple xulrunner application with the main portion of the ui consisting of a xul <
browser> element.
...prism uses gecko, the same
browser rendering system found in firefox.
Priority Content - Archive of obsolete content
dependant on: updating dhtml web pages for next generation
browsers on devedge the tune-up wizard (see below, in the wishlist section) mostly completed: popup window controls devedge article migrators: mathieu deaudelin there are inline examples on this page that cannot be migrated.
... started: scripting plugins: macromedia flash original: scripting plugins: macromedia flash wiki location: scripting plugins: macromedia flash migrators: dependant on (these parts need to be done, put your name down) completed: soap in netscape gecko-based
browsers original: soap in netscape gecko-based
browsers wiki location: soap in gecko-based
browsers migrators: doron rosenberg in progress: css support charts original: css support charts and archive.org mirror wiki location: css support charts migrators: serge k.
...keller note: henrik contacted me on apr 27 and gave us permission to use any of his materials in devedge in the devmo wiki under the cc:by-sa license (yay!) started:
browser feature detection original:
browser feature detection wiki location:
browser feature detection migrators: serge k.
Frequently Asked Questions - Archive of obsolete content
when servers send user agents an svg file they must tell the user agent that the file has the mime type "image/svg+xml", and if the svg file is stored gzipped they must tell the
browser that too.
...failing to respect the mime types servers send is incorrect and has been a source of security holes in other
browsers.
...this is either because your
browser doesn't support svg (you must have mozilla firefox 1.5 or newer), or because the webpage/server isn't correctly telling mozilla that the file contains svg.
XPJS Components Proposal - Archive of obsolete content
xpconnect provides the mechanisms for communication between native and js xpcom components, but it does not provide all of the infrastructure to register and instantiate js components outside of the limitations of the
browser window.
...these components will be independent of web content and
browser windows.
... xjs components are not run in
browser windows.
appendNotification - Archive of obsolete content
var window=components.classes["@mozilla.org/appshell/window-mediator;1"] .getservice(components.interfaces.nsiwindowmediator) .getmostrecentwindow("navigator:
browser"); } if (typeof g
browser === "undefined") { //if there is no g
browser defined, get it var g
browser = window.g
browser; } function testnotificationbutton1callback(thenotification, buttoninfo, eventtarget) { window.alert("button 1 pressed"); //prevent notification from closing: return true; }; function testnotificationbutton2callback(...
...thenotification, buttoninfo, eventtarget) { window.alert("button 2 pressed"); //do not prevent notification from closing: }; function testnotificationcallback(reason) { window.alert("reason is: " + reason); }; let notifybox = g
browser.getnotificationbox(); let buttons = []; let button1 = { isdefault: false, accesskey: "1", label: "button 1", callback: testnotificationbutton1callback, type: "", // if a popup, then must be: "menu-button" or "menu".
... popup: null }; buttons.push(button2); //appendnotification( label , value , image (url) , priority , buttons, eventcallback ) notifybox.appendnotification("my notification text", "test notification unique id", "chrome://
browser/content/aboutrobots-icon.png", notifybox.priority_info_high, buttons, testnotificationcallback); } ...
Property - Archive of obsolete content
« xul reference accessible accessibletype accesskey align allnotifications allowevents alwaysopenpopup amindicator applocale autocheck autofill autofillaftermatch boxobject
browsers builder builderview buttons canadvance cangoback cangoforward canrewind checked checkstate child children classname clickselectsall clientheight clientwidth collapsed color columns command commandmanager completedefaultindex container contentdocument contentprincipal contenttitle contentview contentvieweredit contentviewerfile contentwindow contextmenu control controller controllers crop current currentindex currentitem currentnotification currentpage currentpane currentset currenturi customtoo...
...ator popup popupboxobject popupopen position predicate preferenceelements preferencepanes preferences priority radiogroup readonly readonly ref resource resultspopup scrollboxobject scrollincrement scrollheight scrollwidth searchbutton searchcount searchlabel searchparam searchsessions second secondleadingzero securityui selected selected
browser selectedcount selectedindex selecteditem selecteditems selectedpanel selectedtab selectionend selectionstart selstyle seltype sessioncount sessionhistory showcommentcolumn showpopup size smoothscroll spinbuttons src state statusbar statustext stringbundle strings style subject suppressonselect tabcontainer tabindex tabs tabscrolling ta...
...bpanels tag textlength textvalue timeout title toolbarname toolbarset tooltip tooltiptext top treeboxobject type uri useraction value valuenumber view web
browserefind webnavigation webprogress width wizardpages wraparound year yearleadingzero related dom element properties dom:element.attributes dom:element.baseuri dom:element.childelementcount dom:element.childnodes dom:element.children dom:element.clientheight dom:element.clientleft dom:element.clienttop dom:element.clientwidth dom:element.clonenode dom:element.firstchild dom:element.firstelementchild dom:element.lastchild dom:element.lastelementchild dom:element.localname dom:element.namespaceuri dom:element.nextelementsibling dom:element.nextsibling dom:...
SeaMonkey - making custom toolbar (SM ver. 1.x) - Archive of obsolete content
zilla:package:custombutton"/> </rdf:seq> <rdf:description rdf:about="urn:mozilla:package:custombutton" chrome:displayname="custom button" chrome:description="my custom toolbar button" chrome:author="my name" chrome:name="custombutton" chrome:localeversion="1.8" chrome:skinversion="1.5" chrome:extension="true"/> <rdf:seq about="urn:mozilla:overlays"> <!--
browser --> <rdf:li> <rdf:seq about="chrome://navigator/content/navigator.xul"> <rdf:li>chrome://custombutton/content/button.xul</rdf:li> </rdf:seq> </rdf:li> <!-- address book --> <rdf:li> <rdf:seq about="chrome://messenger/content/addressbook/addressbook.xul"> <rdf:li>chrome://custombutton/content/button.xul</rdf:li> </rdf:seq> </rdf:li> ...
...paste it into the new file: <?xml version="1.0" encoding="utf-8"?> <?xml-stylesheet type="text/css" href="chrome://custombutton/content/button.css"?> <!doctype overlay > <overlay id="custombutton-overlay" xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"> <script type="application/javascript" src="chrome://custombutton/content/button.js"/> <!--
browser --> <toolbar id="nav-bar"> <hbox id="nav-bar-buttons"> <toolbarbutton id="custom-button-1"/> </hbox> </toolbar> <!-- address book --> <toolbar id="abtoolbar"> <hbox id="toolbar_button_box"> <toolbarbutton id="custom-button-1" position="8"/> </hbox> </toolbar> <!-- message compose --> <toolbar id="composetoolbar"> <hbox id="toolbar_button_box"> <toolbarbutton id="cu...
...restart seamonkey and type the chrome url: chrome://myapp/content/myapp.xul, the
browser should show you the content of the xul file.
Custom toolbar button - Archive of obsolete content
copy the following content, and paste it into the new file: content custombutton chrome/ style chrome://global/content/customizetoolbar.xul chrome://custombutton/content/button.css # firefox overlay chrome://
browser/content/
browser.xul chrome://custombutton/content/button.xul # thunderbird mail overlay chrome://messenger/content/messenger.xul chrome://custombutton/content/button.xul # thunderbird compose overlay chrome://messenger/content/messengercompose/messengercompose.xul chrome://custombutton/content/button.xul # thunderbird address book overlay chrome://messenger/content/addressbook/addressbook.xul ...
...into the new file: <?xml version="1.0" encoding="utf-8"?> <?xml-stylesheet type="text/css" href="chrome://custombutton/content/button.css"?> <!doctype overlay > <overlay id="custombutton-overlay" xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"> <script type="application/javascript" src="chrome://custombutton/content/button.js"/> <!-- firefox --> <toolbarpalette id="
browsertoolbarpalette"> <toolbarbutton id="custom-button-1"/> </toolbarpalette> <!-- thunderbird mail --> <toolbarpalette id="mailtoolbarpalette"> <toolbarbutton id="custom-button-1"/> </toolbarpalette> <!-- thunderbird compose --> <toolbarpalette id="msgcomposetoolbarpalette"> <toolbarbutton id="custom-button-1"/> </toolbarpalette> <!-- thunderbird address book --> <toolbarpalette id="add...
... to open the javascript console, choose tools – web developer-
browser console, and enable js.
Popup Menus - Archive of obsolete content
a good example is the drop down menu that appears when you click on the little down arrows next to the back and forward buttons in a
browser window.
...for example, the popup menu that appears when you click the back button in a
browser should appear underneath the back button, not where the mouse pointer is.
...this is the value used for the drop-down menus associated with the
browser's back and forward buttons.
XUL Reference - Archive of obsolete content
« xul reference « alphabetical list of all xul elements action arrowscrollbox assign bbox binding bindings box broadcaster broadcasterset button
browser checkbox caption clicktoscroll colorpicker column columns commandset command conditions content datepicker deck description dialog dialogheader dropmarker editor grid grippy groupbox hbox iframe image key keyset label listbox listcell listcol listcols listhead listheader listitem member menu menubar menuitem menulist menupopup menuseparator notification notificationbox observes overlay page panel param popupset preference preferences prefpane prefwindow progressmeter query queryset radio radiogroup resizer richlistbox richlistitem row rows rule scale script ...
... scrollbar scrollbox scrollcorner separator spacer spinbuttons splitter stack statusbar statusbarpanel stringbundle stringbundleset tab tab
browser (firefox-only starting with firefox 3/gecko 1.9) tabbox tabpanel tabpanels tabs template textnode textbox textbox (firefox autocomplete) textbox (mozilla autocomplete) timepicker titlebar toolbar toolbarbutton toolbargrippy toolbaritem toolbarpalette toolbarseparator toolbarset toolbarspacer toolbarspring toolbox tooltip tree treecell treechildren treecol treecols treeitem treerow treeseparator triple vbox where window wizard wizardpage categorical list of all xul elements « xul reference « windows window wizard wizardpage titlebar window structure --- menus and popups --- ...
...ete toolbarseperator toolbarspring tabs and grouping tab tabbox tabpanel tabpanels tabs controls --- text and images label caption image lists --- trees --- layout --- templates --- scripting --- helper elements other xul lists dialog overlay page window wizard wizardpage preference preferences prefpane prefwindow
browser tab
browser editor iframe titlebar resizer statusbar statusbarpanel dialogheader notification notificationbox menubar menu menuitem menuseparator menupopup panel tooltip popupset toolbar toolbarbutton toolbargrippy toolbaritem toolbarpalette toolbarseparator toolbarset toolbarspacer toolbarspring toolbox tabbox tabs tab tabpanels tabpanel groupbox caption separa...
tooltip - Archive of obsolete content
page type: boolean setting the page attribute to true will result in the tooltip being filled automatically as appropriate for a
browser content area tooltip, i.e.
... the tooltip text is set according to the dom element in the
browser that the user hovered over.
... example <tooltip id="pagetooltip" page="true"/> <
browser tooltip="pagetooltip"/> position type: string the position attribute determines where the popup appears relative to the element the user clicked to invoke the popup.
Multi-process plugin architecture - Archive of obsolete content
plugins are a frequent source of instability or crashes for
browser users.
... when plugins run in the same process as the
browser, any leaks or crashes in the plugin will affect the entire
browser: in order to make the
browser user experience better, it is possible to separate plugin execution from the process in which the
browser normally executes.
... when multi-process plugins are enabled, a shim layer in the
browser implements the plugin api (the npp_ functions which would normally be implemented directly by the plugin).
NPEvent - Archive of obsolete content
in addition to these standard types, the
browser provides three additional event types that can be passed in the what field of the eventrecord: getfocusevent: sent when the instance could become the focus of subsequent key events, when the user clicks the instance or presses the tab key to focus the instance.
... if your plug-in ignores key events, return false, and the key events will be processed by the
browser itself.
... if you don't want a special cursor, return false and the
browser will use the standard arrow cursor.
NPN_DestroyStream - Archive of obsolete content
stream pointer to current stream, initiated by either the
browser or the plug-in.
...values: npres_done (most common): stream completed normally; all data was sent by the plug-in to the
browser.
...this stream can be either a stream that the
browser created and passed to the plug-in in npp_newstream(), or a stream created by the plug-in through a call to npn_newstream().
NPN_GetValueForURL - Archive of obsolete content
« gecko plugin api reference «
browser side plug-in api summary provides information to a plugin which is associated with a given url, for example the cookies or preferred proxy.
...the
browser passes back the requested information.
... description this entry point is designed to allow plugins which implement their own http stacks to form requests to the web server in the same way the
browser does.
NPN NewStream - Archive of obsolete content
summary requests the creation of a new data stream produced by the plug-in and consumed by the
browser.
... stream stream to be created by the
browser.
... description npn_newstream creates a new stream of data produced by the plug-in and consumed by the
browser.
NPN_ReloadPlugins - Archive of obsolete content
« gecko plugin api reference «
browser side plug-in api summary reloads all of the installed plugins.
...normally, if you add or remove any plug-ins, the
browser does not see them until you restart gecko.
... npn_reloadplugins() lets you install a new plug-in and load it, or to remove a plug-in, without having to restart the
browser.
NPN_Status - Archive of obsolete content
« gecko plugin api reference «
browser side plug-in api summary lets a plug-in display a message on the
browser's status line.
... description you can use this function to make your plug-in display status information in the
browser window, in the same place the
browser does.
...the
browser always displays the last status line message it receives, regardless of the message source.
NPObject - Archive of obsolete content
plugin specific, or
browser specific) members.
... npobject is the type used to express objects exposed by either the plugin or by the
browser through this api.
... the
browsers are expected to expose their window objects and everything reachable from it through this api.
NPP - Archive of obsolete content
typedef struct _npp { void* pdata; /* plug-in private data */ void* ndata; /* mozilla private data */ } npp_t; typedef npp_t* npp; fields the data structure has the following fields: pdata a value, whose definition is up to the plug-in, that the plug-in can use to store a pointer to an internal data structure associated with the instance; this field isn't modified by the
browser.
... ndata a private value, owned by the
browser, which is used to store data associated with the instance; this value should not be modified by the plug-in.
...npp contains private instance data for both the plug-in and the
browser.
NPSetWindowCallbackStruct - Archive of obsolete content
pointer to the display structure that represents the
browser-server connection.
...the npsetwindowcallbackstruct object, allocated by the
browser, contains information required for the ws_info field of an npwindow.
...the remaining fields are standard x toolkit attributes of the top-level shell window in the
browser window hierarchy.
NPWindow - Archive of obsolete content
the
browser calls npp_setvalue whenever the drawable changes.
...for windowed plug-ins, the
browser calls the npp_setwindow method with an npwindow structure that represents a drawable (a pointer to an npwindow allocated by the
browser).
...for windowless plug-ins, the
browser calls the npp_setwindow method with an npwindow structure that represents a drawable.
NP_Shutdown - Archive of obsolete content
syntax #include <npapi.h> void np_shutdown(void); windows #include <npapi.h> void winapi np_shutdown(void); description the
browser calls this function once after the last instance of your plug-in is destroyed, before unloading the plug-in library itself.
... note: if enough memory is available, the
browser can keep the plug-in library loaded if it expects to create more instances in the near future.
... the
browser calls np_shutdown only when the library is finally unloaded.
MSX Emulator (jsMSX) - Archive of obsolete content
since javascript currently is mostly an interpreted language in web
browsers, it is at least an order of magnitude slower than other languages such as c and java.
... therefore, jsmsx requires a very fast computer to emulate msx at the normal 50-60 interrupts per second inside a web
browser.
...the initial motivation was to find some interesting project to develop while exploring the possibilities of the <canvas> tag and javascript language in the most recent web
browsers like firefox 2.
Standards-Compliant Authoring Tools - Archive of obsolete content
creating cross-
browser code upfront will save you lots of time quality testing your web content.
...if you're using older versions of tools that rely on old
browser bugs or generate
browser-specific code, it may be time to upgrade: nvu is a standalone editor created from the remains of mozilla composer.
... macromedia™ dreamweaver™ cs6 style master and layout master by western civilisation some caveats: it appears that tools currently available from namo generate ie-specific or netscape 4-specific code that may require extra debugging for compatibility with standards-based
browsers.
Introduction to game development for the Web - Game development
with modern web technologies and a recent
browser, it's entirely possible to make stunning, top-notch games for the web.
...thanks to massive performance 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.
... javascript javascript, the programming language used on the web, is blazing fast in modern
browsers and getting faster all the time.
Building up a basic demo with the PlayCanvas engine - Game development
built for modern
browsers, playcanvas is a fully-featured 3d game engine with resource loading, an entity and component system, advanced graphics manipulation, collision and physics engine (built with ammo.js), audio, and facilities to handle control inputs from various devices (including gamepads).
...you should start off by: making sure you are using a modern
browser with good webgl support, such as the latest firefox or chrome.
... try saving the file and loading it in your
browser.
3D games on the Web - Game development
documentation and
browser support the webgl project documentation and specification is maintained by the khronos group, not the w3c as with most of the web apis.
... support on modern
browsers is very good, even on mobile, so you don't have to worry about that too much.
... the main
browsers are all supporting webgl and all you need to focus on is optimizing the performance on the devices you use.
2D maze game with device orientation - Game development
you can open the index file in your favourite
browser to launch the game and try it.
... adding the sound among the preloaded assets there was an audio track (in various formats for
browser compatibility), which we can use now.
... the best way to use it in our case is to vibrate the phone every time the ball hits the walls — inside the wallcollision function: if("vibrate" in window.navigator) { window.navigator.vibrate(100); } if the vibrate method is supported by the
browser and available in the window.navigator object, vibrate the phone for 100 miliseconds.
Visual-js game engine - Game development
manual start from cmd : server_folder/node editor.js after starting on-page-editor open
browser icon to open internet
browser in editor mode .
... save on drop menu or better with ctrl+s before testing in
browsers.
... adding new script explanation : after adding new script and save script if you have extra changes , open starter/run.js and you will found line : sys.script.load("scripts/new_script.js") ctrl+s use from menu run->choose
browser for testing .
DOM (Document Object Model) - MDN Web Docs Glossary: Definitions of Web-related terms
the dom is a document model loaded in the
browser and representing the document as a node tree, where each node represents part of the document (e.g.
... the dom is one of the most-used apis on the web because it allows code running in a
browser to access and interact with every node in the document.
... dom was not originally specified—it came about when
browsers began implementing javascript.
Favicon - MDN Web Docs Glossary: Definitions of Web-related terms
a favicon (favorite icon) is a tiny icon included along with a website, which is displayed in places like the
browser's address bar, page tabs and bookmarks menu.
... note, however, that most modern
browsers replaced the favicon from the address bar by an image indicating whether or not the website is using https.
...when a familiar icon is seen in the
browser's address bar, for example, it helps users know they are in the right place.
Global object - MDN Web Docs Glossary: Definitions of Web-related terms
in a web
browser, when scripts create global variables, they're created as members of the global object.
...for example: in a web
browser, any code which the script doesn't specifically start up as a background task has a window as its global object.
... window object in the
browser the window object is the global object in the
browser.
JavaScript - MDN Web Docs Glossary: Definitions of Web-related terms
javascript is primarily used in the
browser, enabling developers to manipulate webpage content through the dom, manipulate data with ajax and indexeddb, draw graphics with canvas, interact with the device running the
browser through various apis, and more.
... javascript is one of the world's most commonly-used languages, owing to the recent growth and performance improvement of apis available in
browsers.
... recently, javascript's popularity has expanded even further through the successful node.js platform—the most popular cross-platform javascript runtime environment outside the
browser.
Page prediction - MDN Web Docs Glossary: Definitions of Web-related terms
page prediction is a
browser feature or script which, when enabled, tells the
browser to download resources the user is likely to visit before the user requests the content.
...for example, as the user types in the address bar, the
browser might send the current text in the address bar to the search engine before the user submits the request.
... although
browser page prediction and prediction services enable faster page loads, they consume additional bandwidth.
Style origin - MDN Web Docs Glossary: Definitions of Web-related terms
user-agent origin the user agent origin is the style origin comprised of the default styles used by the user's web
browser.
... user origin the user origin is the style origin containing any css that the user of the web
browser has added.
... these may be from adding styles using a developer tool or from a
browser extension that automatically applies custom styles to content, such as stylus or stylish.
Thread - MDN Web Docs Glossary: Definitions of Web-related terms
the main thread is the one used by the
browser to handle user events, render and paint the display, and to run the majority of the code that comprises a typical web page or app.
... because these things are all happening in one thread, a slow website or app script slows down the entire
browser; worse, if a site or app script enters an infinite loop, the entire
browser will hang.
...this allows slow, complex, or long-running tasks to be executed independently of the main thread, preserving the overall performance of the site or app—as well as that of the
browser overall.
WebExtensions - MDN Web Docs Glossary: Definitions of Web-related terms
webextensions is a cross-
browser system for developing
browser extensions in firefox.
... this system provides apis, which to a large extent are supported across different
browsers like mozilla firefox, google chrome, opera
browser, and microsoft edge .
... learn more technical reference
browser extensions on mdn ...
Overflowing content - Learn web development
it is the way you instruct the
browser how it should behave.
...using overflow: scroll,
browsers with visible scrollbars will always display them—even if there is not enough content to overflow.
...this allows the
browser to determine if it should display scrollbars.
Type, class, and ID selectors - Learn web development
this means that instead of the default styling added by the
browser, which spaces out headings and paragraphs with margins, everything is close together and we can't see the different paragraphs easily.
... this kind of behavior can sometimes be seen in "reset stylesheets", which strips out all of the
browser styling.
... we can tell the
browser that we only want to match the element if it has two classes applied by chaining them together with no white space between them.
Floats - Learn web development
there are three potential ways to deal with this, two of which work in all
browsers — yet are slightly hacky — and a third new way that deals with this situation properly.
...assuming you have a supporting
browser, the box will clear.
... previous overview: css layout next in this module introduction to css layout normal flow flexbox grid floats positioning multiple-column layout responsive design beginner's guide to media queries legacy layout methods supporting older
browsers fundamental layout comprehension assessment ...
Multiple-column layout - Learn web development
the column-count property will create as many columns as the value you give it, so if you add the following css to your stylesheet and reload the page, you will get three columns: .container { column-count: 3; } the columns that you create have flexible widths — the
browser works out how much space to assign each column.
...cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.</p> </div> .container { column-count: 3; } change your css to use column-width as follows: .container { column-width: 200px; } the
browser will now give you as many columns as it can of the size that you specify; any remaining space is then shared between the existing columns.
... at the present time it is also worth adding the older property page-break-inside: avoid for best
browser support.
Positioning - Learn web development
previous overview: css layout next positioning allows you to take elements out of the normal document layout flow, and make them behave differently; for example sitting on top of one another, or always remaining in the same place inside the
browser viewport.
...or if you want to create a ui element that floats over the top of other parts of the page, and/or always sits in the same place inside the
browser window no matter how much the page is scrolled?
...when we add position: sticky to the <dt> element, along with a top value of 0, supporting
browsers will stick the headings to the top of the viewport as they reach that position.
Front-end web developer - Learn web development
subjects covered the subjects covered are: basic setup and learning how to learn web standards and best practices (such as accessibility and cross-
browser compatibility) html, the language that gives web content structure and meaning css, the language used to style web pages javascript, the scripting language used to create dynamic functionality on the web tooling that is used to facilitate modern client-side web development.
...all you need is a computer that can run modern web
browsers, an internet connection, and a willingness to learn.
... modules cross-
browser testing (25–30 hour read/exercises) accessibility (20–25 hour read/exercises) modern tooling time to complete: 55–90 hours prerequisites it is a good idea to know html, css, and javascript before working through this section, as the tools discussed work alongside many of these technologies.
Use JavaScript within a webpage - Learn web development
how to trigger javascript from html within a
browser, javascript doesn't do anything by itself.
...you can hardly ever predict just how long it will take for users or
browsers to complete an process (especially asynchronous actions such as loading resources).
...moreover, third-party scripts (ads, tracking scripts,
browser extensions) might break your scripts.
HTML table basics - Learn web development
this was commonly used because css support across
browsers used to be terrible; table layouts are much less common nowadays, but you might still see them in some corners of the web.
... save your html and load it in a
browser, and you should see that the headers now look like headers.
... save and open your code in a
browser to see the improvement.
Working with JSON - Learn web development
try loading this up and then accessing data inside the variable via your
browser's javascript console.
...luckily, these two problems are so common in web development that a built-in json object is available in
browsers, which contains the following two methods: parse(): accepts a json string as a parameter, and returns the corresponding javascript object.
...try entering the following lines into your
browser's javascript console one by one to see it in action: let myjson = { "name": "chris", "age": "38" }; myjson let mystring = json.stringify(myjson); mystring here we're creating a javascript object, then checking what it contains, then converting it to a json string using stringify() — saving the return value in a new variable — then checking it again.
Test your skills: Object basics - Learn web development
note: in the examples below, if there is an error in your code it will be outputted into the results panel on the page, to help you try to figure out the answer (or into the
browser's javascript console, in the case of the downloadable version).
... run the greeting() method using dot notation (it will log the greeting to the
browser devtools' console).
...we want you to rewrite the greeting() method so that it logs "hello, said bertie the cymric." to the
browser devtools' console, but in a way that will work across any cat object of the same structure, regardless of its name or breed.
Perceived performance - Learn web development
first paint is reported by the
browser and provides the time, in ms, of when the page starts changing; but this change can be a simple background color update or something even less noticable.
...first contentful paint (fcp) reports the time when the
browser first rendered anything of signifigance, be that text, foreground or background image, or a canvas or svg; capturing the very beginning of the loading experience.
... improving perceived performance understanding networking, how the
browser works, user perception of time, etc., can help you better understand how to improve the user interaction.
Web performance resources - Learn web development
best practices start with learning the critical rendering path of the
browser.
... <link rel="stylesheet" href="/path/to/my.css" media="print" onload="this.media='all'"> <noscript><link rel="stylesheet" href="/path/to/my.css"></noscript> the downside with this approach is the flash of unstyled text (fout.) the simplist way to address this is by inlining css that is required for any content that is rendered above the fold, or what you see in the
browser viewport before scrolling.
...by using font display swap the
browser will not block rendering and will use the backup system fonts that are defined.
Beginning our React todo list - Learn web development
<title>todomatic</title> when your
browser refreshes, you should see something like this: it's ugly, and doesn’t function yet, but that's okay — we'll style it in a moment.
...if we were to use checked, as we would in regular html, react would log some warnings into our
browser console relating to handling events on the checkbox, which we want to avoid.
...ec; } .c-cb > label::after { box-sizing: content-box; content: ""; position: absolute; top: 11px; left: 9px; width: 18px; height: 7px; transform: rotate(-45deg); border: solid; border-width: 0 0 5px 5px; border-top-color: transparent; opacity: 0; background: transparent; } .c-cb > input[type="checkbox"]:checked + label::after { opacity: 1; } save and look back at your
browser, and your app should now have reasonable styling.
Advanced Svelte: Reactivity, lifecycle, accessibility - Learn web development
update your existing checkalltodos() function to the following: const checkalltodos = (completed) => { todos.foreach(t => t.completed = completed) console.log('todos', todos) } go back to your
browser, open your devtools console, and click check all/uncheck all a few times.
...this outline is your visual indicator that the
browser is currently focused on this element.
...doing so avoids unnecessary work and allows the
browser to batch things more effectively.
Creating our first Vue component - Learn web development
your component’s template section should now look like this: <template> <div> <input type="checkbox" id="todo-item" checked="false" /> <label for="todo-item">{{label}}</label> </div> </template> go back to your
browser and you'll see the todo item rendered as before, but without a label (oh no!).
... go to your
browser's devtools and you’ll see a warning along these lines in the console: [vue warn]: missing required prop: "label" found in ---> <todoitem> at src/components/todoitem.vue <app> at src/app.vue <root> this is because we marked the label as a required prop, but we never gave the component that prop — we've defined where inside the template we want it used, but we haven't passed it into the component when calling it.
...you can check if the unique ids are working by temporarily adding more <to-do-item></to-do-item> calls into app.vue, and then checking their rendered output with your
browser's devtools.
Focus management with Vue refs - Learn web development
in addition, what happens when you press tab again varies depending on the
browser you're using.
...however, it also means you often should not edit your html elements directly through native
browser apis (like document.getelementbyid) when using frameworks, because it results in the vdom and real dom going out of sync.
... now that we have a ref and have let
browsers know that we can programmatically focus the <h2>, we need to set focus on it.
Deploying our app - Learn web development
this is the strategy of breaking a
browser's own caching mechanism, which forces the
browser to download a new copy of your code.
...this unique filename "busts" your
browser's cache, thereby making sure the
browser downloads the fresh code each time an update is made to the deployed code.
...also see our cross
browser testing module for a bunch of useful testing information remember also that tests are not limited to javascript; tests can be run against the rendered dom, user interactions, css, and even how a page looks.
Package management basics - Learn web development
moreover, a reliable third-party dependency will likely have been tested in a lot of different situations, making it more robust and cross-
browser compatible than your own solution.
...a bundle is the term that’s generally used to refer to a single file on your web server that contains all the javascript for your software — typically compressed as much as possible to help reduce the time it takes to get your software downloaded and displayed in your visitors’
browser.
... if we had avoided any development tools and pointed a <script src=””> element to a hosted version of date-fns, roughly the same thing would have happened — all of the library would be downloaded when our example page is loaded in a
browser.
Tools and testing - Learn web development
on top of that, we still need to keep cross-
browser support in the forefront of our minds, and make sure that our code follows best practices that allow our projects to work across different
browsers and devices that our users are using to browse the web, and be usable by people with disabilities.
... cross
browser testing this module looks specifically at the area of testing web projects across different
browsers.
...what users,
browsers and devices do you most need to worry about?), how to go about testing, the main issues that you'll face with different types of code and how to fix/mitigate those, what tools are most useful in helping you test and fix problems, and how to use automation to speed up testing.
Accessibility information for UI designers and developers
only one element has focus at a given time, typically revealed by
browsers with a dotted outline.
... see also: understanding sc 2.4.7: focus visible be ready for resizing and custom styles on the web, users can use tools in their
browser to make font sizes larger, or even provide custom css to meet their specific needs.
... use default controls controls that are built into
browsers come with a lot of accessibility for free.
Mozilla Plugin Accessibility
plugins in gecko-based
browsers have a lot of accessibility issues.
...all
browser keys unavailable when plugin has focus focused plugins currently have no choice but to consume all keyboard events.
... the new plugin api will allow plugins to bubble unused keypresses to the
browser.
Themes
browser themes
browser theme concepts get an introduction to creating themes for the latest versions of firefox using the amo theme generator use the theme generator to create and submit a new theme to amo lightweight themes lightweight themes have been deprecated and are no longer accepted by amo.
... only
browser themes will be accepted going forward.
... tools & resources
browser theme manifest.json keys
browser extensions theme api discourse forum theme related blog posts archived resources ...
Add-ons
extensions written using webextensions apis for firefox are designed to be cross-
browser compatible.
...you can see the apis currently supported in firefox and other
browsers.
...this new, high-performance
browser for android has been rebuilt from the ground up using geckoview, mozilla’s mobile
browser engine.
Chrome registration
chrome providers a supplier of chrome for a given window type (e.g., for the
browser window) is called a chrome provider.
... this example shows how a different overlay can be used for different applications: overlay chrome://
browser/content/
browser.xul chrome://myaddon/content/ffoverlay.xul application={ec8030f7-c20a-464f-9b0e-13a3a9e97384} overlay chrome://messenger/content/mailwindowoverlay.xul chrome://myaddon/content/tboverlay.xul application={3550f703-e582-4d05-9a08-453d09bdfdc6} overlay chrome://songbird/content/xul/layoutbaseoverlay.xul chrome://myaddon/content/sboverlay.xul application=songbird@songbirdnest.com app...
...ample chrome manifest content necko jar:comm.jar!/content/necko/ locale necko en-us jar:en-us.jar!/locale/necko/ content xbl-marquee jar:comm.jar!/content/xbl-marquee/ content pipnss jar:pipnss.jar!/content/pipnss/ locale pipnss en-us jar:en-us.jar!/locale/pipnss/ # firefox-only overlay chrome://
browser/content/pageinfo.xul chrome://pippki/content/pageinfooverlay.xul application={ec8030f7-c20a-464f-9b0e-13a3a9e97384} # seamonkey-only overlay chrome://navigator/content/pageinfo.xul chrome://pippki/content/pageinfooverlay.xul application={92650c4d-4b8e-4d2a-b7eb-24ecf4f6b63a} overlay chrome://communicator/content/pref/preftree.xul chrome://pippki/content/prefoverlay.xul content ...
Creating MozSearch plugins
the following xml is the bundled firefox 2 search plugin for searching using yahoo!: <searchplugin xmlns="http://www.mozilla.org/2006/
browser/search/"> <shortname>yahoo</shortname> <description>yahoo search</description> <inputencoding>utf-8</inputencoding> <image width="16" height="16">data:image/x-icon;base64,r0lgodlheaaqajecap8aaaaaap///waaach5baeaaaialaaaaaaqabaaaaipli+py+0nogquybdened2khkffwuamezmpzsfmaihphrrguum/ft+uwaaow==</image> <url type="application/x-suggestions+json" method="get" template="http://ff.search.yahoo.com/g...
...firefox will use the above search engine description to construct the following search url: http://search.yahoo.com/search?p=mozilla&ei=utf-8&fr=moz2 if the user clicks the magnifying glass icon in the search bar, or chooses the web search option in the tools menu when the search bar isn't visible, the
browser will take them to http://search.yahoo.com/, the value of the <searchform> element.
... <searchplugin xmlns="http://www.mozilla.org/2006/
browser/search/"> <shortname>mdc</shortname> <description>mozilla developer center search</description> <inputencoding>utf-8</inputencoding> <image width="16" height="16">data:image/x-icon;base64,ivborw0kggoaaaansuheugaaabaaaaaqcayaaaaf8%2f9haaaabgdbtueaak%2finwwk6qaaabl0rvh0u29mdhdhcmuaqwrvymugsw1hz2vszwfkexhjztwaaahwsurbvhjayvz%2f%2fz8djqaggjiqoe%2ffv2fv7oz8rays%2fn%2bvkfg%2fiynjfyd%2f1%2brvq7ffu3dpfpsbaaheahibcj85c8bn2nj4vwsdw%2f8zqlwkio8ccroqu0dxqlwrdshuwzbaaigjmtnnpgya9j8uqhfelwpxf2mideirksn9fwsjorkaeeam0dd4dzmaypi%2fg%2bqky4hh5waxgf8pdq0fgwj22d27cjadaaiirlmjo%2bmxa9r2kahvgba2wwx6b8w7od6ceqcggkcmcel8bgwxycbuigtdvkhdbia%2bcuotgaccued3tdqn75d4xma...
Configuring Build Options
choose one of the following options to add to your mozconfig file:
browser (firefox) ac_add_options --enable-application=
browser note: this is the default mail (thunderbird) ac_add_options --enable-application=comm/mail mozilla suite (seamonkey) ac_add_options --enable-application=suite calendar (lightning extension, uses thunderbird) ac_add_options --enable-application=comm/mail ac_add_options --enable-calendar selecting build opti...
... for example: ac_add_options --disable-optimize --enable-debug mk_add_options moz_objdir=/mozilla/src/obj-@config_guess@ mk_add_options moz_build_projects="
browser mail" ac_add_app_options
browser --enable-application=
browser ac_add_app_options mail --enable-application=comm/mail if you want to build only one project using this mozconfig, use the following command line: moz_current_project=
browser ./mach build this will build only the
browser.
..../mozconfig-common # build firefox mk_add_options moz_objdir=@topsrcdir@/obj-firefox ac_add_options --enable-application=
browser mozconfig-thunderbird: # include the common mozconfig .
Inner and outer windows
consider that when the user is looking at a document in a
browser window, not only can the document the user is currently viewing change, but the document's contents can change.
...consider this view of a window and the
browser history: as the user navigates, documents are added to the backward-forward cache (often referred to as the bfcache).
...they get displayed in the outer window, which is contained in the "physical"
browser window.
Performance
the more expensive they are to execute the longer it will take for the
browser to become responsive after startup.
...gister observers (and other callbacks to global services) in a frame script bad: //framescript.js services.obs.addobserver("document-element-inserted", { observe: function(doc, topic, data) { if(doc.ownerglobal.top != content) return; // bail out if this is for another tab decoratedocument(doc); } }) observer notifications get fired for events that happen anywhere in the
browser, they are not scoped to the current tab.
...amescript // framescript.js function onlyonceinabluemoon() { // we only need this during a total solar eclipse while goat blood rains from the sky sendasyncmessage('my-addon:paragraph-count', {num: content.document.queryselectorall('p').length}) } addmessagelistener("my-addon:request-from-parent", onlyonceinabluemoon) better: // addon.js function ontoolbarbutton(event) { let tabmm = g
browser.mcurrent
browser.frameloader.messagemanager; let button = event.target; let callback = (message) => { tabmm.removemessagelistener("my-addon:paragraph-count", callback) decoratebutton(button, message.data.num) } tabmm.addmessagelistener("my-addon:paragraph-count", callback); tabmm.loadframescript("data:,sendasyncmessage('my-addon:paragraph-count', {num: content.document.queryselec...
HTMLIFrameElement.getActive()
the getactive() method of the htmliframeelement indicates whether the current
browser <iframe> is the currently active frame.
... syntax var amiactive = instanceofhtmliframeelement.getactive(); returns a boolean indicating whether the current
browser <iframe> is the currently active frame (true) or not (false.) parameters none.
... example var
browser = document.queryselector('iframe'); var amiactive =
browser.getactive(); specification not part of any specification.
HTMLIFrameElement.getMuted()
the getmuted() method of the htmliframeelement indicates whether the
browser <iframe> is currently muted.
... example callback version: var
browser = document.queryselector('iframe'); var request =
browser.getmuted(); request.onsuccess = function() { if(request.result) { console.log('the
browser is muted.'); } else { console.log('the
browser is unmuted.'); } } promise version: var
browser = document.queryselector('iframe');
browser.getmuted().then(function(muted) { if(muted) { console.log('the
browser is muted.'); ...
... } else { console.log('the
browser is unmuted.'); } }); specification not part of any specification.
HTMLIFrameElement.getStructuredData()
the getstructureddata() method of the htmliframeelement interface retrieves any structured microdata (and hcard and hcalendar microformat data) contained in the html loaded in the
browser <iframe> and returns it as json.
...if the request is successful, the request.result is a json object representation of all microdata contained on the page loaded in the
browser.
... examples var
browser = document.queryselector('iframe');
browser.addeventlistener('moz
browserloadend',function() { 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://microformats.org/profile/hcard"], "properties":{"fn":["chris askew"], "n":[ { "properties": { "given-name":["chris"], "family-name":["askew"], ...
HTMLIFrameElement.getVisible()
the getvisible() method of the htmliframeelement is used to request the current visible state of the
browser <iframe>.
...if the request is successful, the request's result is a boolean indicating the visible state of the
browser <iframe>.
... example var
browser = document.queryselector('iframe'); var request =
browser.getvisible(); request.onsuccess = function() { console.log('the visible state is: ' + this.result ?
HTMLIFrameElement.goBack()
the goback() method of the htmliframeelement interface is used to navigate backwards in the
browser <iframe>'s history.
... by calling this method, the
browser <iframe> changes its location for the previous location available in its navigation history, which sends a series of related events: moz
browserlocationchange, moz
browserloadstart, and so on.
... examples back.addeventlistener('touchend',function() {
browser.goback(); }); specification not part of any specification.
HTMLIFrameElement.goForward()
the goforward() method of the htmliframeelement is used to navigate forward in the
browser <iframe>'s history.
... by calling this method, the
browser <iframe> changes its location to the next location available in its navigation history, which sends a series of related events: moz
browserlocationchange, moz
browserloadstart and so on.
... examples fwd.addeventlistener('touchend',function() {
browser.goforward(); }); specification not part of any specification.
HTMLIFrameElement.purgeHistory()
the purgehistory() method of the htmliframeelement interface is used to clear the browsing history associated with the
browser <iframe>.
... note: to delete cookies for a firefox os app, you could call clear
browserdata() on the actual app itself.
... examples domrequest: var
browser = document.queryselector('iframe'); var request =
browser.purgehistory(); request.onsuccess = function() { console.log('history deleted!'); } request.onerror = function() { console.error(this.error.name); } promise: var
browser = document.queryselector('iframe');
browser.purgehistory().then(function() { console.log('history deleted!'); }, function(error) { console.error(this.error.n...
How test harnesses work
mozilla test harnesses are typically composed of a python runner that invokes firefox, utilizes the
browser to run tests, and reports the results.
... the python harness communicates with the
browser by inserting an extension in the testing profile or uses marionette's wire protocol to drive the
browser.
...variables (mozrunner, currently) creates a profile (mozprofile via mozrunner) sets appropriate test preferences inserts a shim extension in the profile (for non-marionette tests) gathers the tests (manifestdestiny) potentially sets up an http server for test data (mozhttpd) invokes the binary (mozrunner) it is the job of the shim extension to shut down the
browser logging (mozlog, in theory) (run tests, accrue results) cleanup: shutdown the
browser check for crashes (mozcrash) reporting (moztest) marionette tests list of testing extensions pageloader (talos) mochitest: //github.com/realityripple/uxp/blob/master/testing/mochitest/install.rdf (mochitest) ...
IPDL Tutorial
the following ipdl code defines a very basic interaction of
browser and plugin actors: async protocol pplugin { child: async init(nscstring pluginpath); async shutdown(); parent: async ready(); }; this code declares the pplugin protocol.
...here is a dirt-simple example of how a
browser implementor might use ppluginparent.
... when creating a plugin instance, the
browser should block until instance creation is finished, and needs some information 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.
Integrated Authentication
so, it is paramount that the
browser does not freely exchange ntlm user credentials with any server that requests them.
... mozilla currently supports a whitelist of sites that are permitted to engage in spnego authentication with the
browser.
...ted-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.
JavaScript-DOM Prototypes in Mozilla
here is an attempt to modify a host object: (function(){ try { image.prototype.src = 1; } catch(ex){ alert(ex); } })(); this demonstrates that the image constructor, a host object supported in nearly all
browsers for mac and windows, has a prototype property, and that an attempt to modify the prototype's src - property results in an error.
... | |.__proto__ | object.prototype | |.__proto__ | null if you have an instance of a htmldivelement in javascript, the following will hold true: div.__proto__ === htmldivelement.prototype which means that the following should also be true: div.__proto__ === div.constructor.prototype non standard no
browser is required to provide modifiable __proto__, nor a global node, nor provide any way to get at host objects nor their associated prototypes.
...results in other
browsers is not guaranteed.
Mozilla Quirks Mode Behavior
prior to gecko 36, it also applied to images, and form controls but the quirk has been adapted to match the behavior of other
browser (bug 783213).
...this is fixed in gecko 16 (firefox 16) for standards mode but remains in quirks mode for compatibility with quirks mode behavior of other
browsers.
... html parser in quirks mode, we parsed html comments in a non-sgml way compatible with other
browsers instead of treating "--" as the comment start and end delimiter.
Investigating leaks using DMD heap scan mode
this will keep the watch dog from killing the
browser when shut down takes multiple minutes.
... next, exit the
browser.
...this isn’t too bad, because unlike ref count logging, we have the full state of memory in our existing log, so we don’t need to run the
browser again.
DMD
desktop firefox (linux) build build firefox with these options: ac_add_options --enable-dmd if building via try server, modify
browser/config/mozconfigs/linux64/common-opt or a similar file before pushing.
... desktop firefox (mac) build build with these options: ac_add_options --enable-dmd if building via try server, modify
browser/config/mozconfigs/macosx64/common-opt or a similar file before pushing.
... desktop firefox (windows) build build with these options: ac_add_options --enable-dmd if building via try server, modify
browser/config/mozconfigs/win32/common-opt.
Leak Gauge
getting a log file to get a log file, run the
browser with the following environment variables set.
...the
browser will run with negligible slowdown.
... you must exit the
browser before post-processing the log file or the results will be unreliable.
Power profiling overview
web
browsers are popular applications and can be power-intensive, and therefore can significantly affect battery life.
... compare
browsers to see if firefox is doing better or worse than another
browser on a particular workload.
..."high" can most easily be gauged by comparing against other
browsers.
Phishing: a short definition
this too, includes missing https or ev certificate indicators in a
browser’s navigation bar.
... web
browser vendors too, are interested in protecting their users from phishing.
... after all, the
browser plays an essential role in the scheme: a fake website is loaded in a
browser and here is the maker’s last chance to preventing fraud.
Patches and pushes
patchify search plugins are found in
browser/searchplugins.
...<searchplugin xmlns="http://www.mozilla.org/2006/
browser/search/"> <shortname>yahoo</shortname> <description>yahoo search</description> <inputencoding>utf-8</inputencoding> <image width="16" height="16">data:image/x-icon;base64,r0lgodlheaaqajecap8aaaaaap///waaach5baeaaaialaaaaaaqabaaaaipli+py+0nogquybdened2khkffwuamezmpzsfmaihphrrguum/ft+uwaaow==</image> ***this tag is optional***<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}"/> <...
... create a patch of the searchplugins directory by entering the following command in your command-line tool, where mypatch.diff is where you give your patch a name: $ hg add mozilla/
browser/searchplugins/ $ hg diff mozilla/
browser/searchplugins/ > mypatch.diff attach your patch file to the bug by clicking the "add an attachment" link.
Rhino FAQ
can i use rhino in a web
browser?
... rhino is a library for java use, and not for general web
browsers.
... however, a java-based
browser may use rhino with scripts from a page in the same manner that any other java program would.
Statistics API
the
browser preference javascript.options.mem.log controls dumping of human-readable gc stats messages to the developer console.
... the
browser preference javascript.options.mem.notify controls emission of json encoded gc stats to an observer interface.
...in between slices, other
browser code is allowed to run.
TPS Pref Lists
a prefs asset list is an array of objects with name and value keys, representing
browser preferences.
... for example: var prefs1 = [ { name: "
browser.startup.homepage", value: "http://www.getfirefox.com" }, { name: "
browser.urlbar.maxrichresults", value: 20 }, { name: "
browser.tabs.autohide", value: true } ]; pref lists and phase actions the only actions supported for preference asset lists are modify and verify: prefs.modify prefs.verify sync only syncs certain preferences.
... to find the list of valid preferences, go to about:config on a
browser that has weave installed, and search for services.sync.prefs.sync.
A Web PKI x509 certificate primer
in order for a certificate to be valid these three requirements must be met: there is a verification path from the site certificate to a trusted certificate of the user agent (ie if you follow the issuer path you will end on a self-signed certificate that is considered trusted by the
browser).
... one issue that is not commonly known is that the x509 trust graph is not a forest (a bunch of trees where each root is a trusted root) but a cyclic graph, where the same key/issuer can be a root or an intermediate for another root in the
browsers key store (when roots create intermediates for each other it is called cross-signing).
...*.yourcompany.com) but you want others outside of your organization to be able to browse to your website using https without having to manually import a root certificate, then you can get an ssl certificate from one of the cas who already have a root certificate included in the major
browsers.
Setting up an update server
ituting <obj dir>, <mar output path>, <version> and <channel> appropriately: ./mach package touch "<obj dir>/dist/firefox/precomplete" mar="<obj dir>/dist/host/bin/mar.exe" moz_product_version=<version> mar_channel_id=<channel> ./tools/update-packaging/make_full_update.sh <mar output path> "<obj dir>/dist/firefox" for a local build, <channel> can be default, and <version> can be the value from
browser/config/version.txt (or something arbitrarily large like 2000.0a1).
...this is the python2 command: python -m simplehttpserver 8000 or, this is the python3 command: python3 -m http.server 8000 if you aren't sure that you started the server correctly, try using a web
browser to navigate to http://127.0.0.1:8000/update.xml and make sure that you get the xml file you created earlier.
...you can use this command with firefox's
browser console to determine the update directory: const {fileutils} = chromeutils.import("resource://gre/modules/fileutils.jsm"); fileutils.getdir("updrootd", [], false).path once you have determined the update directory, close firefox, browse to the directory and remove the subdirectory called updates.
Accessing the Windows Registry Using XPCOM
you can use it as shown in the following example: var wss = components.classes["@mozilla.org/
browser/shell-service;1"] .getservice(components.interfaces.nsiwindowsshellservice); var id = wss.getregistryentry(wss.hklm, "software\\microsoft\\windows\\currentversion", "productid"); note: there's no way to set a registry value using this interface.
... it can be used as follows: var wss = components.classes["@mozilla.org/winhooks;1"] .getservice(components.interfaces.nsiwindowsregistry); var id = wss.getregistryentry(wss.hklm, "software\\microsoft\\windows\\currentversion", "productid"); backwards compatibility if you need to support firefox 1.0 and other older
browser versions, you should check to see which interfaces are available.
... the following skeleton code will allow you to determine which interface to use: if ("@mozilla.org/windows-registry-key;1" in components.classes) { // firefox 1.5 or newer } else if ("@mozilla.org/winhooks;1" in components.classes) { // seamonkey or other older non-toolkit application } else if ("@mozilla.org/
browser/shell-service;1" in components.classes) { var wss = components.classes["@mozilla.org/
browser/shell-service;1"] .getservice(components.interfaces.nsiwindowsshellservice); if ("getregistryentry" in wss) { // firefox 1.0 } else { // nothing supported } } else { // nothing supported } ...
Creating the Component Code
what we'll be working on the component we'll be working on in this book controls a special mode in your
browser that prevents users from leaving the current domain or a set of safe domains.
... web lock user interface most of the actual work in the weblock component is preparing the component itself, finding the xpcom interfaces the component needs to use, and hooking into existing functionality within the gecko
browser.
...xpinstall, the cross-platform installation technology that mozilla uses to install the
browser and other components, is one such alternative.
Preface
although, xpcom can be used in many environments which are unrelated to web browsing, xpcom's main client is gecko, an open source, standards compliant, embeddable web
browser, where it's easiest and most practical to illustrate xpcom's functionality.
... organization of the tutorial the following list provides an overview of the steps that we will take to build an xpcom component called weblock, which provides site blocking functionality to gecko-based
browsers.
...the weblock component we describe in this tutorial is a practical (and, we hope, genuinely useful) addition to the
browser.
Components.utils.Sandbox
example of obtaining content principal from the window: var principal = g
browser.selectedtab.linked
browser.contentprincipal; var sandbox = components.utils.sandbox(principal); expanded principal an expanded principal is specified as an array of the principals it subsumes.
...for example the content principal above can be made expanded/extended like so: var principal = [g
browser.selectedtab.linked
browser.contentprincipal]; // this is now an expanded (aka extended) principal var sandbox = components.utils.sandbox(principal); null principal you can create a null principal using code like: cc["@mozilla.org/nullprincipal;1"].createinstance(ci.nsiprincipal); from firefox 37 onwards, you can also specify the null principal by simply passing null as the principal argument.
... this example is to be run from scratchpad with environemnt set to
browser.
nsIConsoleService
xpcom/base/nsiconsoleservice.idlscriptable the console service is the back-end for the error console, bundled with every mozilla application, and for firefox's web console and
browser console.
...although it may still work in some
browsers, its use is discouraged since it could be removed at any time.
... see also error console (deprecated) web console
browser console nsiconsolemessage ...
nsICookieStorage
although it may still work in some
browsers, its use is discouraged since it could be removed at any time.
... last changed in gecko 1.7 inherits from: nsisupports method overview void getcookie(in string acookieurl, in voidptr acookiebuffer, in pruint32ref acookiesize); void setcookie(in string acookieurl, in constvoidptr acookiebuffer, in unsigned long acookiesize); methods getcookie() retrieves a cookie from the
browser's persistent cookie store.
... setcookie() stores a cookie in the
browser's persistent cookie store.
nsIMacDockSupport
this is created by using the dockmenu attribute of nsimacdocksupport here: http://mxr.mozilla.org/mozilla-release/source/
browser/base/content/
browser.js#1562 this is seen here: if you were to copy and follow that example you would replace the default native menu.
... this can be done like this: var docksupport = cc['@mozilla.org/widget/macdocksupport;1'].getservice(ci.nsimacdocksupport); console.log('docksupport:', docksupport); var win = services.wm.getmostrecentwindow('navigator:
browser'); var macmenu = win.document.createelementns('http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul', 'menupopup'); macmenu.setattribute('id', 'mymacmenu'); var macmenuitem = win.document.createelementns('http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul', 'menuitem'); macmenuitem.setattribute('label', 'show most recent window'); macmenuitem.setattribute('id', 'mymacmenuitem'); macmenuitem.addeventlistener('command', function(){ var docksupport = cc['@mozilla.org/widget/macdocksupport;1'].getservice(ci.nsimacdocksupport); docksupport.activateapplic...
...note: the hidden window of firefox (services.appshel.hiddendomwindow) loads on
browser startup, so if you would like to access it on startup of the
browser make sure to check and wait for the window to be loaded.
nsISearchEngine
netwerk/base/public/nsi
browsersearchservice.idlscriptable please add a summary to this article.
...this should only be called on engines created via nsi
browsersearchservice.addenginewithdetails().
...see also nsisearchsubmission nsi
browsersearchservice ...
nsISessionStartup
browser/components/sessionstore/nsisessionstartup.idlscriptable handles the session restore process.
... 1.0 66 introduced gecko 1.8 inherits from: nsisupports last changed in gecko 8.0 (firefox 8.0 / thunderbird 8.0 / seamonkey 2.5) implemented by: @mozilla.org/
browser/sessionstartup;1.
... to use this service, use: var sessionstartup = components.classes["@mozilla.org/
browser/sessionstartup;1"] .getservice(components.interfaces.nsisessionstartup); method overview boolean dorestore(); attributes attribute type description sessiontype unsigned long the type of session being restored; this will be one of the session type constants.
nsIWebNavigationInfo
this lets you determine whether a mime type can be displayed as-is inside a
browser, or if the
browser will instead forward handling of the data to a plug-in or an external helper application.
...you may specify null to check for compatibility with nsiwebnavigation objects that are in their default state; otherwise, the result is determined based on the configuration of the specified object (that is, how it is configured by using nsiweb
browsersetup).
...example let webnavigationinfo_service = components.classes["@mozilla.org/webnavigation-info;1"] .getservice(components.interfaces.nsiwebnavigationinfo); let support_code = webnavigationinfo_service.istypesupported(contenttype, null); if (support_code == webnavigationinfo_service.unsupported) { dump("unsupported content-type: not displaying in the
browser\n"); } see also nsiwebnavigation ...
XPCOM Interface Reference
odulensiauthpromptnsiauthprompt2nsiauthpromptadapterfactorynsiauthpromptcallbacknsiauthpromptprovidernsiauthpromptwrappernsiautocompletecontrollernsiautocompleteinputnsiautocompleteitemnsiautocompletelistenernsiautocompleteobservernsiautocompleteresultnsiautocompletesearchnsibadcertlistener2nsibidikeyboardnsibinaryinputstreamnsibinaryoutputstreamnsiblocklistpromptnsiblocklistservicensiboxobjectnsi
browserboxobjectnsi
browserhistorynsi
browsersearchservicensicrlinfonsicrlmanagernsicachensicachedeviceinfonsicacheentrydescriptornsicacheentryinfonsicachelistenernsicachemetadatavisitornsicacheservicensicachesessionnsicachevisitornsicachingchannelnsicancelablensicategorymanagernsichannelnsichanneleventsinknsichannelpolicynsicharsetresolvernsichromeframemessagemanagernsichromeregistrynsiclassinfonsiclipboa...
...itreeviewnsiurinsiurifixupnsiurifixupinfonsiurlnsiurlformatternsiurlparsernsiutf8converterservicensiutf8stringenumeratornsiuuidgeneratornsiupdatensiupdatechecklistenernsiupdatecheckernsiupdateitemnsiupdatemanagernsiupdatepatchnsiupdatepromptnsiupdatetimermanagernsiuploadchannelnsiuploadchannel2nsiurllistmanagercallbacknsiusercertpickernsiuserinfonsivariantnsiversioncomparatornsiweakreferencensiweb
browsernsiweb
browserchromensiweb
browserchrome2nsiweb
browserchrome3nsiweb
browserchromefocusnsiweb
browserfindnsiweb
browserfindinframesnsiweb
browserpersistnsiwebcontenthandlerregistrarnsiwebnavigationnsiwebnavigationinfonsiwebpagedescriptornsiwebprogressnsiwebprogresslistenernsiwebprogresslistener2nsiwebsocketchannelnsiwebsocketlistenernsiwebappssupportnsiwifiaccesspointnsiwifilistenernsiwifimonitornsiwinac...
...siworkernsiworkerfactorynsiworkerglobalscopensiworkermessageeventnsiworkermessageportnsiworkerscopensiwritablepropertybagnsiwritablepropertybag2nsixformsmodelelementnsixformsnsinstanceelementnsixformsnsmodelelementnsixmlhttprequestnsixmlhttprequesteventtargetnsixmlhttprequestuploadnsixpcexceptionnsixpcscriptablensixpconnectnsixsltexceptionnsixsltprocessornsixsltprocessorobsoletensixulappinfonsixul
browserwindownsixulbuilderlistenernsixulruntimensixulsortservicensixultemplatebuildernsixultemplatequeryprocessornsixultemplateresultnsixulwindownsixmlrpcclientnsixmlrpcfaultnsizipentrynsizipreadernsizipreadercachensizipwriternsmsgfilterfileattribvaluensmsgfolderflagtypensmsgjunkstatusnsmsgkeynsmsglabelvaluensmsgpriorityvaluensmsgruleactiontypensmsgsearchattribnsmsgsearchopnsmsgsearchscopensmsgsearchterm...
Plug-in Side Plug-in API - Plugins
the names of all of these methods begin with npp_ to indicate that they are implemented by the plug-in and called by the
browser.
... npp_getvalue allows the
browser to query the plug-in for information.
... np_getvalue allows the
browser to query the plug-in for information.
Plugins
plugins are shared libraries that users can install to display content that the
browser can't display natively.
... important: plugins are a legacy technology that are a security and performance problem for firefox (and other
browser) users.
... flash activation:
browser comparison each
browser activates flash slightly differently, which can be confusing for users and web authors.
DOM Inspector FAQ - Firefox Developer Tools
inspect content document inspect content, e.g., unprivileged web pages loaded in a
browser tab.
... inspect chrome document inspect application chrome, including open xul windows, e.g., the
browser window.
...this causes the document to be loaded in the
browser pane.
Use a source map - Firefox Developer Tools
the javascript sources executed by the
browser are often transformed 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 transformed state that the
browser has downloaded.
... a source map is a file that maps from the transformed source to the original source, enabling the
browser to reconstruct the original source and present the reconstructed original in the debugger.
Debugger.Memory - Firefox Developer Tools
function properties of the debugger.memory.prototype object memory use analysis exposes implementation details memory analysis may yield surprising results, because
browser implementation details that are transparent to content javascript often have visible effects on memory consumption.
... web developers need to know their pages’ actual memory consumption on real
browsers, so it is correct for the tool to expose these behaviors, as long as it is done in a way that helps developers make decisions about their own code.
... spidermonkey shares some strings amongst all web pages and
browser js.
All keyboard shortcuts - Firefox Developer Tools
opening and closing tools these shortcuts work in the main
browser window to open the specified tool.
...for tools like the
browser console that open in a new window, you have to close the window to close the tool.
... tab) ctrl + shift + c cmd + opt + c ctrl + shift + c open style editor shift + f7 shift + f7 * shift + f7 open profiler shift + f5 shift + f5 * shift + f5 open network monitor 2 ctrl + shift + e cmd + opt + e ctrl + shift + e toggle responsive design mode ctrl + shift + m cmd + opt + m ctrl + shift + m open
browser console ctrl + shift + j cmd + shift + j ctrl + shift + j open
browser toolbox ctrl + alt + shift + i cmd + opt + shift + i ctrl + alt + shift + i open scratchpad shift + f4 shift + f4 * shift + f4 open webide shift + f8 shift + f8 * shift + f8 storage inspector shift + f9 shift + f9 * shift + f9 open debug...
Performance Analysis - Firefox Developer Tools
the network monitor includes a performance analysis tool, to help show you how long the
browser takes to download the different parts of your site.
... (alternatively, if you have only just opened the network monitor, so it's not yet populated with the list of requests, you'll get a stopwatch icon in the main window.) the network monitor then loads the site twice: once with an empty
browser cache, and once with a primed
browser cache.
...it displays the results for each run side by side, or vertically if the
browser window is narrow: the results for each run are summarised in a table and a pie chart.
Examine and edit CSS - Firefox Developer Tools
to view user-agent styles (i.e.,
browser-default css rules), enable "inspector > show
browser styles" under the developer tool settings panel.
... (note that this setting is independent of the "
browser styles" checkbox in the computed view.) user-agent styles are displayed against a different background, and the link to the filename and line number contains the prefix (user agent): element {} rule the element {} rule at the top of the rules list isn't actually a css rule.
... clicking the arrow next to the property name (or pressing enter or space while it is selected) shows the rule that set this value, along with a link to the source filename and line number: by default, this view only shows values that have been explicitly set by the page: to see all values, click the "
browser styles" box.
Web Console remoting - Firefox Developer Tools
to see how the debugger is used in the web console code, look in
browser/devtools/webconsole/webconsole.js, and search for webconsoleconnectionproxy.
...this actor is used for the
browser console implementation and for debugging remote firefox/b2g instances.
... private browsing the
browser console can be used while the user has private windows open.
AudioContext.baseLatency - Web APIs
note: you can request a certain latency during construction time with the latencyhint option, but the
browser may ignore the option.
...
browser compatibility the compatibility table on this page is generated from structured data.
... if you'd like to contribute to the data, please check out https://github.com/mdn/
browser-compat-data and send us a pull request.
BasicCardResponse.billingAddress - Web APIs
example let's look at a sample payment request: var request = new paymentrequest(supportedinstruments, details, options); // call show() to trigger the
browser's payment flow.
...
browser compatibility the compatibility table on this page is generated from structured data.
... if you'd like to contribute to the data, please check out https://github.com/mdn/
browser-compat-data and send us a pull request.
BasicCardResponse.cardNumber - Web APIs
example let's look at a sample payment request: var request = new paymentrequest(supportedinstruments, details, options); // call show() to trigger the
browser's payment flow.
...
browser compatibility the compatibility table on this page is generated from structured data.
... if you'd like to contribute to the data, please check out https://github.com/mdn/
browser-compat-data and send us a pull request.
BasicCardResponse.cardSecurityCode - Web APIs
example let's look at a sample payment request: var request = new paymentrequest(supportedinstruments, details, options); // call show() to trigger the
browser's payment flow.
...
browser compatibility the compatibility table on this page is generated from structured data.
... if you'd like to contribute to the data, please check out https://github.com/mdn/
browser-compat-data and send us a pull request.
BasicCardResponse.cardholderName - Web APIs
example let's look at a sample payment request: var request = new paymentrequest(supportedinstruments, details, options); // call show() to trigger the
browser's payment flow.
...
browser compatibility the compatibility table on this page is generated from structured data.
... if you'd like to contribute to the data, please check out https://github.com/mdn/
browser-compat-data and send us a pull request.
BasicCardResponse.expiryMonth - Web APIs
example let's look at a sample payment request: var request = new paymentrequest(supportedinstruments, details, options); // call show() to trigger the
browser's payment flow.
...
browser compatibility the compatibility table on this page is generated from structured data.
... if you'd like to contribute to the data, please check out https://github.com/mdn/
browser-compat-data and send us a pull request.
BasicCardResponse.expiryYear - Web APIs
example let's look at a sample payment request: var request = new paymentrequest(supportedinstruments, details, options); // call show() to trigger the
browser's payment flow.
...
browser compatibility the compatibility table on this page is generated from structured data.
... if you'd like to contribute to the data, please check out https://github.com/mdn/
browser-compat-data and send us a pull request.
BasicCardResponse - Web APIs
// call show() to trigger the
browser's payment flow.
...
browser compatibility the compatibility table on this page is generated from structured data.
... if you'd like to contribute to the data, please check out https://github.com/mdn/
browser-compat-data and send us a pull request.
Beacon API - Web APIs
the synchronous xmlhttprequest forces the
browser to delay unloading the document, and makes the next navigation appear to be slower.
...if the
browser successfully queues the request for delivery, the method returns "true" and returns "false" otherwise.
...if the
browser successfully queues the request for delivery, the method returns "true" and otherwise returns "false".
CSSOMString - Web APIs
when a specification says cssomstring, it depends on the
browser vendors to choose whether to use domstring or usvstring.
... while
browser implementations that use utf-8 internally to represent strings in memory can use usvstring when the specification says cssomstring, implementations that already represent strings as 16-bit sequences might choose to use domstring instead.
... implementation differences
browser domstring or usvstring for cssomstring firefox (gecko) usvstring chrome (blink) usvstring safari (webkit) usvstring edge (edgehtml) - opera (blink) usvstring specifications specification status comment css object model (cssom)the definition of 'cssomstring' in that specification.
CSSStyleRule.selectorText - Web APIs
this is readonly in some
browsers; to set stylesheet rules dynamically cross-
browser, see using dynamic styling information.
... working draft
browser compatibility the compatibility table in this page is generated from structured data.
... if you'd like to contribute to the data, please check out https://github.com/mdn/
browser-compat-data and send us a pull request.
Using the CSS Typed Object Model - Web APIs
in
browsers that support computedstylemap(), you'll see a list of all the css properties and values.
... in other
browsers, you'll just see a link.
...ild(document.createtextnode( propval )); row.appendchild( cssvalue ); // and the type of unit const cssunit = document.createelement( 'td' ); cssunit.appendchild( document.createtextnode( allcomputedstyles.get( ofinterest[i] ).unit )); row.appendchild( cssunit ); //add the row to the table stylestable.appendchild( row ); } for those of you using a non-supporting
browser, the above output should looks something like this: property value unit padding-top 0 px margin-bottom 16 px font-size 16 px font-stretch 100 percent animation-duration 0 s animation-iteration-count 1 number width auto undefined height auto undefined y...
Cache - Web APIs
each
browser has a hard limit on the amount of cache storage that a given origin can use.
...the
browser does its best to manage disk space, but it may delete the cache storage for an origin.
... the
browser will generally delete all of the data for an origin or none of the data for an origin.
Canvas tutorial - Web APIs
first introduced in webkit by apple for the os x dashboard, <canvas> has since been implemented in
browsers.
... today, all major
browsers support it.
...the <canvas> element is not supported in some older
browsers, but is supported in recent versions of all major
browsers.
Clipboard - Web APIs
note: in reality, at this time
browser requirements for access to the clipboard vary significantly.
... clipboard availability the asynchronous clipboard api is a relatively recent addition, and the process of implementing it in
browsers is not yet complete.
... due to both potential security concerns and technical complexities, the process of integrating this api is happening gradually in most
browsers.
console.assert() - Web APIs
y shorthand: // console.assert(number % 2 === 0, {number, errormsg}); } // output: // the # is 2 // the # is 3 // assertion failed: {number: 3, errormsg: "the # is not even"} // the # is 4 // the # is 5 // assertion failed: {number: 5, errormsg: "the # is not even"} note that, while a string containing a substitution string works as a parameter for console.log in node and many, if not most,
browsers...
... console.log('the word is %s', 'foo'); // output: the word is foo ...the use of such a string does not currently work as intended as a parameter for console.assert in all
browsers: console.assert(false, 'the word is %s', 'foo'); // correct output in node.js and some
browsers // (e.g.
... firefox v60.0.2): // assertion failed: the word is foo // incorrect output in some
browsers // (e.g.
Console API - Web APIs
concepts and usage the console api started as a largely proprietary api, with different
browsers implementing it, albeit it in inconsistent ways.
... the console api spec was created to define consistent behavior, and all modern
browsers eventually settled on implementing this behavior — although some implementations still have their own additional proprietary functions.
... 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 perform rudimentary debugging tasks, generally focused around logging various values to the
browser's web console.
CustomEvent - Web APIs
some other
browsers are starting to support it for web compatibility purposes.
...by specification, this value is time since epoch—but in reality,
browsers' definitions vary.
... event.istrusted read only indicates whether or not the event was initiated by the
browser (after a user click, for instance) or by a script (using an event creation method, like event.initevent).
DOMTokenList.forEach() - Web APIs
html <span class="a b c"></span> javascript let span = document.queryselector("span"); let classes = span.classlist; let iterator = classes.values(); classes.foreach( function(value, key, listobj) { span.textcontent += `${value} ${key}/${this} ++ `; }, "arg" ); result polyfill this polyfill adds compatibility to all
browsers supporting es5: if (window.domtokenlist && !domtokenlist.prototype.foreach) { domtokenlist.prototype.foreach = function (callback, thisarg) { thisarg = thisarg || window; for (var i = 0; i < this.length; i++) { callback.call(thisarg, this[i], i, this); } }; } specifications specification status comment domthe definition of 'foreach() (as iter...
...
browser compatibility the compatibility table on this page is generated from structured data.
... if you'd like to contribute to the data, please check out https://github.com/mdn/
browser-compat-data and send us a pull request.
Document.evaluate() - Web APIs
recommendation initial specification
browser compatibility the compatibility table on this page is generated from structured data.
... if you'd like to contribute to the data, please check out https://github.com/mdn/
browser-compat-data and send us a pull request.
...rt 4.2samsung internet android full support 1.0legend full support full support no support no support see also document.createexpression() xpathresult xpath code snippets check for
browser support ...
Document.execCommand() - Web APIs
don't try using the return value to verify
browser support before calling a command.
...conditions of having this behavior enabled vary from one
browser to another, and have evolved over time.
...when this behavior is enabled varies between
browsers, and its conditions have evolved over time.
Document.getElementsByTagNameNS() - Web APIs
as of january 2012, only in webkit
browsers is the returned value a pure nodelist.
...see the note in
browser compatibility section in element.getelementsbytagnamens for details.
... <p>some div2 text</p> </div> </div> <p>some outer text</p> <p>some outer text</p> <button onclick="getallparaelems();"> show all p elements in document</button><br /> <button onclick="div1paraelems();"> show all p elements in div1 element</button><br /> <button onclick="div2paraelems();"> show all p elements in div2 element</button> </body> </html> potential workaround for other
browsers which do not support if the desired
browser did not support xpath, another approach (such as traversing the dom through all its children, identifying all @xmlns instances, etc.) would be necessary to find all tags with the desired local name and namespace, but xpath is much faster.
Document: pointercancel event - Web APIs
the pointercancel event is fired when the
browser determines that there are unlikely to be any more pointer events, or if after the pointerdown event is fired, the pointer is then used to manipulate the viewport by panning, zooming, or scrolling.
... the
browser decides that the user started pointer input accidentally.
... after the pointercancel event is fired, the
browser will also send pointerout followed by pointerleave.
Examples of web and XML development using the DOM - Web APIs
the properties of event objects differs greatly between
browsers, the whatwg dom standard lists the standard properties, however many
browsers have extended these greatly.
... put the following code into a blank text file and load it into a variety of
browsers, you'll be surprised at the different number and names of properties.
... if dom core methods document.createelement and node.appendchild are used to create rows and cells, ie requires that they are appended to a tbody element, whereas other
browsers will allow appending to a table element (the rows will be added to the last tbody element).
Element.classList - Web APIs
the following polyfill for both classlist and domtokenlist ensures full compliance (coverage) for all standard methods and properties of element.prototype.classlist for ie10-ie11
browsers plus nearly compliant behavior for ie 6-9.
....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 performant 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.
...in all polyfilled
browsers (ie6-9), an additional element[" uclp"] property is added to element to ensure standards compliant prototyping, and a domtokenlist[" ucl"] property is added to each element["classlist"] object to ensure that the domtokenlist is bounded to its own element.
Event - Web APIs
some other
browsers are starting to support it for web compatibility purposes.
...by specification, this value is time since epoch—but in reality,
browsers' definitions vary.
... event.istrusted read only indicates whether or not the event was initiated by the
browser (after a user click, for instance) or by a script (using an event creation method, like event.initevent).
EventSource - Web APIs
unlike websockets, server-sent events are unidirectional; that is, data messages are delivered in one direction, from the server to the client (such as a user's web
browser).
... when not used over http/2, sse suffers from a limitation to the maximum number of open connections, which can be specially painful when opening various tabs as the limit is per
browser and set to a very low number (6).
...this limit is per
browser + domain, so that means that you can open 6 sse connections across all of the tabs to www.example1.com and another 6 sse connections to www.example2.com.
Using Fetch - Web APIs
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.
... // the calling script is on the origin 'https://example.com' fetch('https://example.com', { credentials: 'same-origin' }); to instead ensure
browsers don’t include credentials in the request, use credentials: 'omit'.
...} polyfill to use fetch in unsupported
browsers, there is a fetch polyfill available that recreates the functionality for non-supporting
browsers.
Fetch API - Web APIs
the following
browsers shipped and outdated native fetch, and were updated in these versions: firefox version 61.0b13.
... if you are targetting older versions of these
browsers, be sure to include credentials: 'same-origin' init option on all api requests that may be affected by cookies/user login state.
... aborting a fetch
browsers have started to add experimental support for the abortcontroller and abortsignal interfaces (aka the abort api), which allow operations like fetch and xhr to be aborted if they have not already completed.
FileReaderSync.readAsArrayBuffer() - Web APIs
encodingerror is raised when the resource is a data url and exceed the limit length defined by each
browser.
...
browser compatibility the compatibility table on this page is generated from structured data.
... if you'd like to contribute to the data, please check out https://github.com/mdn/
browser-compat-data and send us a pull request.
FileReaderSync.readAsBinaryString() - Web APIs
encodingerror is raised when the resource is a data url and exceed the limit length defined by each
browser.
...
browser compatibility the compatibility table on this page is generated from structured data.
... if you'd like to contribute to the data, please check out https://github.com/mdn/
browser-compat-data and send us a pull request.
FileReaderSync.readAsDataURL() - Web APIs
encodingerror is raised when the resource is a data url and exceed the limit length defined by each
browser.
...
browser compatibility the compatibility table on this page is generated from structured data.
... if you'd like to contribute to the data, please check out https://github.com/mdn/
browser-compat-data and send us a pull request.
FileReaderSync.readAsText() - Web APIs
encodingerror is raised when the resource is a data url and exceed the limit length defined by each
browser.
...
browser compatibility the compatibility table on this page is generated from structured data.
... if you'd like to contribute to the data, please check out https://github.com/mdn/
browser-compat-data and send us a pull request.
FileSystemEntrySync - Web APIs
various
browsers implement pieces of the file and directory entries api (otherwise known as the file system api) but you should try to avoid using it.
...if you do not specify a name, the
browser preserves the entry's current name.
...if you do not specify a name, the
browser preserves the filesystementrysync's current name.
File and Directory Entries API support in Firefox - Web APIs
the original file system api was created to let
browsers implement support for accessing a sandboxed virtual file system on the user's storage device.
... this has caused a number of popular web sites not to work properly on
browsers other than chrome.
... to ensure your code will work in both chrome and other
browsers, you can include code similar to the following: var filesystemdirectoryentry = window.filesystemdirectoryentry || window.directoryentry; var filesystementry = window.filesystementry || window.entry; limitations in firefox next, let's look at limitations of the firefox implementation of the api.
FullscreenOptions.navigationUI - Web APIs
"hide" the
browser's navigation interface will be hidden and the entire dimensions of the screen will be allocated to the display of the element.
... "show" the
browser will present page navigation controls and possibly other user interface; the dimensions of the element (and the perceived size of the screen) will be clamped to leave room for this user interface.
... "auto" the
browser will choose which of the above settings to apply.
Using the Gamepad API - Web APIs
mapping: a string indicating whether the
browser has remapped the controls on the device to a known layout.
...if the
browser is able to map controls on the device to that layout the mapping property will be set to the string standard.
... to start with, we declare some variables: the gamepadinfo paragraph that the connection info is written into, the ball that we want to move, the start variable that acts as the id for requestanimation frame, the a and b variables that act as position modifiers for moving the ball, and the shorthand variables that will be used for the requestanimationframe() and cancelanimationframe() cross
browser forks.
Using the Geolocation API - Web APIs
the callback function is called multiple times, allowing the
browser to either update your location as you move, or provide a more accurate location as different techniques are used to geolocate you.
... this object allows you to specify whether to enable high accuracy, a maximum age for the returned position value (up until this age it will be cached and reused if the same position is requested again; after this the
browser will request fresh position data), and a timeout value that dictates how long the
browser should attempt to get the position data for, before it times out.
...oords.longitude; status.textcontent = ''; maplink.href = `https://www.openstreetmap.org/#map=18/${latitude}/${longitude}`; maplink.textcontent = `latitude: ${latitude} °, longitude: ${longitude} °`; } function error() { status.textcontent = 'unable to retrieve your location'; } if(!navigator.geolocation) { status.textcontent = 'geolocation is not supported by your
browser'; } else { status.textcontent = 'locating…'; navigator.geolocation.getcurrentposition(success, error); } } document.queryselector('#find-me').addeventlistener('click', geofindme); result ...
Geolocation API - Web APIs
the geolocation api is accessed via a call to navigator.geolocation; this will cause the user's
browser to ask them for permission to access their location data.
... if they accept, then the
browser will use the best available functionality on the device to access this information (for example, gps).
...oords.longitude; status.textcontent = ''; maplink.href = `https://www.openstreetmap.org/#map=18/${latitude}/${longitude}`; maplink.textcontent = `latitude: ${latitude} °, longitude: ${longitude} °`; } function error() { status.textcontent = 'unable to retrieve your location'; } if(!navigator.geolocation) { status.textcontent = 'geolocation is not supported by your
browser'; } else { status.textcontent = 'locating…'; navigator.geolocation.getcurrentposition(success, error); } } document.queryselector('#find-me').addeventlistener('click', geofindme); result specifications specification status comment geolocation api recommendation ...
HTMLCanvasElement.getContext() - Web APIs
this context is only available on
browsers that implement webgl version 1 (opengl es 2.0).
...this context is only available on
browsers that implement webgl version 2 (opengl es 3.0).
...if set to false, the
browser now knows that the backdrop is always opaque, which can speed up drawing of transparent content and images.
HTMLDialogElement: cancel event - Web APIs
the cancel event fires on a <dialog> when the user instructs the
browser that they wish to dismiss the current open dialog.
... for example, the
browser might fire this event when the user presses the esc key or clicks a "close dialog" button which is part of the
browser's ui.
...le-dialog'); dialog.addeventlistener('cancel', (event) => { result.textcontent = 'dialog was canceled'; }); const opendialog = document.queryselector('.open-dialog'); opendialog.addeventlistener('click', () => { if (typeof dialog.showmodal === 'function') { dialog.showmodal(); result.textcontent = ''; } else { result.textcontent = 'the dialog api is not supported by this
browser'; } }); const closebutton = document.queryselector('.close'); closebutton.addeventlistener('click', () => { dialog.close(); }); result specifications specification status html living standardthe definition of 'cancel' in that specification.
HTMLElement.offsetTop - Web APIs
working draft
browser compatibility the compatibility table on this page is generated from structured data.
... if you'd like to contribute to the data, please check out https://github.com/mdn/
browser-compat-data and send us a pull request.
...(having display:none does not affect this
browser.) ...
HTMLElement: pointercancel event - Web APIs
the pointercancel event is fired when the
browser determines that there are unlikely to be any more pointer events, or if after the pointerdown event is fired, the pointer is then used to manipulate the viewport by panning, zooming, or scrolling.
... the
browser decides that the user started pointer input accidentally.
... after the pointercancel event is fired, the
browser will also send pointerout followed by pointerleave.
HTMLImageElement.alt - Web APIs
for compatibility reasons,
browsers generally will accept an image without an alt attribute, but you should try to get into the habit of using it.
... unknown
browser compatibility the compatibility table on this page is generated from structured data.
... if you'd like to contribute to the data, please check out https://github.com/mdn/
browser-compat-data and send us a pull request.
HTMLImageElement.currentSrc - Web APIs
currentsrc lets you determine which image from the set of provided images was selected by the
browser.
... living standard
browser compatibility the compatibility table on this page is generated from structured data.
... if you'd like to contribute to the data, please check out https://github.com/mdn/
browser-compat-data and send us a pull request.
HTMLOrForeignElement.nonce - Web APIs
examples retrieving a nonce value in the past, not all
browsers supported the nonce idl attribute, so a workaround is to try to use getattribute as a fallback: let nonce = script['nonce'] || script.getattribute('nonce'); however, recent
browsers version hide nonce values that are accessed this way (an empty string will be returned).
...
browser compatibility the compatibility table on this page is generated from structured data.
... if you'd like to contribute to the data, please check out https://github.com/mdn/
browser-compat-data and send us a pull request.
HTMLScriptElement - Web APIs
javascript files should be served with the application/javascript mime type, but
browsers are lenient and block them only if the script is served with an image type (image/*), video type (video/*), audio type (audio/*), or text/csv.
... the defer attribute may be specified with the async attribute, so legacy
browsers that only support defer (and not async) fall back to the defer behavior instead of the default blocking behavior.
... htmlscriptelement.nomodule is a boolean that if true, stops the script's execution in
browsers that support es2015 modules — used to run fallback scripts in older
browsers that do not support javascript modules.
History.back() - Web APIs
the history.back() method causes the
browser to move back one page in the session history.
...
browser compatibility the compatibility table on this page is generated from structured data.
... if you'd like to contribute to the data, please check out https://github.com/mdn/
browser-compat-data and send us a pull request.
History.forward() - Web APIs
the history.forward() method causes the
browser to move forward one page in the session history.
...
browser compatibility the compatibility table on this page is generated from structured data.
... if you'd like to contribute to the data, please check out https://github.com/mdn/
browser-compat-data and send us a pull request.
IDBDatabase.deleteObjectStore() - Web APIs
for older webkit
browsers, you must call first.
... recommendation
browser compatibility the compatibility table on this page is generated from structured data.
... if you'd like to contribute to the data, please check out https://github.com/mdn/
browser-compat-data and send us a pull request.
IDBDatabase.onversionchange - Web APIs
objectstore.createindex("month", "month", { unique: false }); objectstore.createindex("year", "year", { unique: false }); objectstore.createindex("notified", "notified", { unique: false }); note.innerhtml += '<li>object store created.</li>'; db.onversionchange = function(event) { note.innerhtml += '<li>a database change has occurred; you should refresh this
browser window, or close it down and use the other open version of this application, wherever it exists.</li>'; }; }; specifications specification status comment indexed database api 2.0the definition of 'onversionchange' in that specification.
... recommendation
browser compatibility the compatibility table on this page is generated from structured data.
... if you'd like to contribute to the data, please check out https://github.com/mdn/
browser-compat-data and send us a pull request.
IDBDatabase.transaction() - Web APIs
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 performance (see bug 1112702), which is the same behaviour as other indexeddb-supporting
browsers.
... recommendation
browser compatibility the compatibility table on this page is generated from structured data.
... if you'd like to contribute to the data, please check out https://github.com/mdn/
browser-compat-data and send us a pull request.
databases - Web APIs
note: this method is introduced in a draft of a specifications and
browser compatibility is limited.
...
browser compatibility the compatibility table on this page is generated from structured data.
... if you'd like to contribute to the data, please check out https://github.com/mdn/
browser-compat-data and send us a pull request.
IDBFactory.open() - Web APIs
note: you can find out more information on the different available storage types, and how firefox handles client-side data storage, at
browser storage limits and eviction criteria.
... recommendation
browser compatibility the compatibility table on this page is generated from structured data.
... if you'd like to contribute to the data, please check out https://github.com/mdn/
browser-compat-data and send us a pull request.
IDBIndex.get() - Web APIs
if this value is null or missing, the
browser will use an unbound key range.
... recommendation
browser compatibility the compatibility table on this page is generated from structured data.
... if you'd like to contribute to the data, please check out https://github.com/mdn/
browser-compat-data and send us a pull request.
IDBIndex.getAll() - Web APIs
to use a feature like getall(), the
browser has to create all the objects at once.
...if this value is null or missing, the
browser will use an unbound key range.
...if this value exceeds the number of records in the query, the
browser will only retrieve the first item.
IDBIndex.getKey() - Web APIs
if this value is null or missing, the
browser will use an unbound key range.
... recommendation
browser compatibility the compatibility table on this page is generated from structured data.
... if you'd like to contribute to the data, please check out https://github.com/mdn/
browser-compat-data and send us a pull request.
IDBKeyRange.includes() - Web APIs
for
browsers that do not support it, the following polyfill can be used.
... recommendation
browser compatibility the compatibility table on this page is generated from structured data.
... if you'd like to contribute to the data, please check out https://github.com/mdn/
browser-compat-data and send us a pull request.
IDBObjectStore.createIndex() - Web APIs
(see above.) // it is only implemented in recent
browsers.
... recommendation
browser compatibility the compatibility table on this page is generated from structured data.
... if you'd like to contribute to the data, please check out https://github.com/mdn/
browser-compat-data and send us a pull request.
IDBObjectStore.deleteIndex() - Web APIs
this.result; // run the displaydata() function to populate the task list with all the to-do list data already in the idb displaydata(); }; // this event handles the event whereby a new version of the database needs to be created // either one has not been created before, or a new version number has been submitted via the // window.indexeddb.open line above //it is only implemented in recent
browsers dbopenrequest.onupgradeneeded = function(event) { var db = this.result; db.onerror = function(event) { note.innerhtml += '<li>error loading database.</li>'; }; // create an objectstore for this database var objectstore = db.createobjectstore("todolist", { keypath: "tasktitle" }); // define what data items the objectstore will contain objectstore.createindex("hours", "ho...
... recommendation
browser compatibility the compatibility table on this page is generated from structured data.
... if you'd like to contribute to the data, please check out https://github.com/mdn/
browser-compat-data and send us a pull request.
IDBOpenDBRequest.onblocked - Web APIs
either one has not been created // before, or a new version number has been submitted via the // window.indexeddb.open line above //it is only implemented in recent
browsers request.onupgradeneeded = function(event) { var db = event.target.result; db.onerror = function(event) { note.innerhtml += '<li>error loading database.</li>'; }; // create an objectstore for this database var objectstore = db.createobjectstore("todolist", { keypath: "tasktitle" }); ...
... recommendation
browser compatibility the compatibility table on this page is generated from structured data.
... if you'd like to contribute to the data, please check out https://github.com/mdn/
browser-compat-data and send us a pull request.
IDBTransaction.oncomplete - Web APIs
as of firefox 40, indexeddb transactions have relaxed durability guarantees to increase performance (see bug 1112702), which is the same behaviour as other indexeddb-supporting
browsers.
... recommendation
browser compatibility the compatibility table on this page is generated from structured data.
... if you'd like to contribute to the data, please check out https://github.com/mdn/
browser-compat-data and send us a pull request.
IndexedDB API - Web APIs
this is the main landing page for mdn's indexeddb coverage — here we provide links to the full api reference and usage guides,
browser support details, and some explanation of key concepts.
...the process by which the
browser works out how much space to allocate to web data storage and what to delete when that limit is reached is not simple, and differs between
browsers.
...
browser storage limits and eviction criteria attempts to explain how this works, at least in the case of firefox.
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 performance substantially.
...this event is sent when the document becomes hidden or visible, such as when the user switches tabs in their
browser.
... handling intersection changes once per pass through the
browser's event loop, each intersectionobserver checks to see if any of its target elements have passed through any of the observer's intersection ratio thresholds.
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, performance, or user annoyance.
... so for example, a script was been stopped because it was significantly slowing down the
browser, or the
browser's autoplay policy blocked audio from playing without a user gesture to trigger it.
...this typically matches the message a
browser will display in its devtools console when an intervention is imposed, if one is available.
KeyboardEvent - Web APIs
this may be the empty string if the
browser or device doesn't know the keyboard's locale.
...in the case of ui events, this is important for security reasons, as it prevents scripts from simulating user actions that interact with the
browser itself.
...this led to the implementation of non-standard initialization methods, the early dom events level 2 version, keyboardevent.initkeyevent() by gecko
browsers and the early dom events level 3 version, keyboardevent.initkeyboardevent() by others.
MediaPositionState.playbackRate - Web APIs
for example, a
browser might use this information along with the position property and the navigator.mediasession.playbackstate, as well as the session's metadata to provide an integrated common user interface showing the currently playing media as well as standard pause, play, forward, reverse, and other controls.
... example in this example, an app is updating the
browser to let it know that the user has clicked a button causing the playback to shift to a double-speed mode.
... it begins by creating a mediapositionstate object, then submits it to the
browser it by calling navigator.mediasession.setpositionstate().
MediaStream - Web APIs
the order is not defined, and may not only vary from one
browser to another, but also from one call to another.
...the order is not defined, and may not only vary from one
browser to another, but also from one call to another.
...the order is not defined, and may not only vary from one
browser to another, but also from one call to another.
MediaTrackConstraints - Web APIs
this may be because a given
browser doesn't support the property, or because it doesn't apply.
...the value may be a single one of the following strings, or an array of them to allow the
browser flexibility in deciding what to do about the cursor.
...
browser the stream contains the contents of a single
browser tab selected by the user.
NavigatorID.appName - Web APIs
the value of the navigatorid.appname property is always "netscape", in any
browser.
... note: do not rely on this property to return a real
browser name.
... all
browsers return "netscape" as the value of this property.
NavigatorPlugins.plugins - Web APIs
applications that must check for the presence of a
browser plugin should query navigator.plugins or navigator.mimetypes by exact name instead of enumerating the navigator.plugins array and comparing every plugin's name.
...).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 information about the various plugins installed in your
browser.
... a list of plugins is also available by entering about:plugins in the
browser's location bar.
Notification.requestPermission() - Web APIs
function notifyme() { // let's check if the
browser supports notifications if (!("notification" in window)) { alert("this
browser does not support desktop notification"); } // let's check whether notification permissions have already been granted else if (notification.permission === "granted") { // if it's okay let's create a notification var notification = new notification("hi there!"); } // otherwise, we need to ask the...
...} we no longer show a live sample on this page, as chrome and firefox no longer allow notification permissions to be requested from cross-origin <iframe>s, with other
browsers to follow.
...this is not only best practice — you should not be spamming users with notifications they didn't agree to — but going forward
browsers will explicitly disallow notifications not triggered in response to a user gesture.
NotificationEvent - Web APIs
tells the
browser that work is ongoing.
...
browser compatibility the compatibility table on this page is generated from structured data.
... if you'd like to contribute to the data, please check out https://github.com/mdn/
browser-compat-data and send us a pull request.
OffscreenCanvas.getContext() - Web APIs
this context is only available on
browsers that implement webgl version 1 (opengl es 2.0).
...this context is only available on
browsers that implement webgl version 2 (opengl es 3.0).
...if set to false, the
browser now knows that the backdrop is always opaque, which can speed up drawing of transparent content and images then.
PaymentRequest.PaymentRequest() - Web APIs
starting with more recent
browsers, this parameter is more generic than credit cards, it is a single domstring, and the meaning of the data parameter changes with the supportedmethods.
...if a value is not supplied, the
browser will construct one.
... // call show() to trigger the
browser's payment flow.
PaymentRequest.prototype.id - Web APIs
if none is provided, the
browser automatically sets the id value to a uuid.
...
browser compatibility the compatibility table on this page is generated from structured data.
... if you'd like to contribute to the data, please check out https://github.com/mdn/
browser-compat-data and send us a pull request.
PaymentResponse.complete() - Web APIs
see the
browser compatibility section below for details.
...
browser compatibility the compatibility table on this page is generated from structured data.
... if you'd like to contribute to the data, please check out https://github.com/mdn/
browser-compat-data and send us a pull request.
performance.clearResourceTimings() - Web APIs
the clearresourcetimings() method removes all performance entries with an entrytype of "resource" from the
browser's performance data buffer and sets the size of the performance data buffer to zero.
... to set the size of the
browser's performance data buffer, use the performance.setresourcetimingbuffersize() method.
... example function load_resource() { var image = new image(); image.src = "https://developer.mozilla.org/static/img/opengraph-logo.png"; } function clear_performance_timings() { if (performance === undefined) { log("
browser does not support web performance"); return; } // create a resource timing performance entry by loading an image load_resource(); var supported = typeof performance.clearresourcetimings == "function"; if (supported) { console.log("run: performance.clearresourcetimings()"); performance.clearresourcetimings(); } else { console.log("performance.clearresourcetimings() not ...
PerformanceFrameTiming - Web APIs
performanceframetiming is an abstract interface that provides frame timing data about the
browser's event loop.
... a frame represents the amount of work a
browser does in one event loop such as processing dom events, resizing, scrolling, rendering, css animations, etc..
...this means the
browser should process a frame in about 16.7ms.
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.
... reload navigation is through the
browser's reload operation or location.reload().
... back_forward navigation is through the
browser's history traversal operation.
PerformanceResourceTiming.requestStart - Web APIs
the requeststart read-only property returns a timestamp of the time immediately before the
browser starts requesting the resource from the server, cache, or local resource.
... if the transport connection fails and the
browser retires the request, the value returned will be the start of the retry request.
... syntax resource.requeststart; return value a domhighrestimestamp representing the time immediately before the
browser starts requesting the resource from the server example in the following example, the value of the *start and *end properties of all "resource" type events are logged.
PointerEvent - Web APIs
a pointer's hit test is the process a
browser uses to determine the target element for a pointer event.
... pointerevent.getpredictedevents() returns a sequence of pointerevent instances that the
browser predicts will follow the dispatched pointermove event's coalesced events.
... pointercancel a
browser fires this event if it concludes the pointer will no longer be able to generate events (for example the related device is deactived).
RTCDataChannel.maxRetransmits - Web APIs
the read-only rtcdatachannel property maxretransmits returns the maximum number of times the
browser should try to retransmit a message before giving up, as set when the data channel was created, or null, which indicates that there is no maximum.
... syntax var tries = adatachannel.maxretransmits; value the maximum number of times the
browser will try to retransmit a message before giving up, or null if not set when rtcpeerconnection.createdatachannel() was called.
... example // tbd specifications specification status comment webrtc 1.0: real-time communication between
browsersthe definition of 'rtcdatachannel.maxretransmits' in that specification.
RTCDataChannel.onbufferedamountlow - Web APIs
the rtcdatachannel.onbufferedamountlow property is an eventhandler which specifies a function the
browser calls when the bufferedamountlow event is sent to the rtcdatachannel.
... syntax rtcdatachannel.onbufferedamountlow = function; value a function which the
browser will call to handle the bufferedamountlow event.
...*/ dc.onbufferedamountlow = function() { if (source.position <= source.length) { dc.send(source.readfile(65536)); } } specifications specification status comment webrtc 1.0: real-time communication between
browsersthe definition of 'rtcdatachannel.onbufferedamountlow' in that specification.
RTCDataChannel.onclose - Web APIs
the rtcdatachannel.onclose property is an eventhandler which specifies a function to be called by the
browser when the close event is received by the rtcdatachannel.
... syntax rtcdatachannel.onclose = function; value a function which the
browser will call to handle the close event.
...*/ specifications specification status comment webrtc 1.0: real-time communication between
browsersthe definition of 'rtcdatachannel.onclose' in that specification.
RTCDataChannel.onclosing - Web APIs
the rtcdatachannel.onclosing property is an eventhandler which specifies a function to be called by the
browser when the closing event is received by the rtcdatachannel.
... syntax rtcdatachannel.onclosing = function; value a function which the
browser will call to handle the closing event.
... specifications specification status comment webrtc 1.0: real-time communication between
browsersthe definition of 'rtcdatachannel.onclosing' in that specification.
RTCDtlsTransport - Web APIs
all
browsers support bundling, so when both endpoints are
browsers, you can rest assured that bundling will be used.
... some non-
browser legacy endpoints, however, may not support bundle.
... specifications specification status comment webrtc 1.0: real-time communication between
browsersthe definition of 'rtcdtlstransport' in that specification.
RTCIceCandidateInit.usernameFragment - Web APIs
the specifics for which bits are random and what the remainder of the ufrag text are are left up to the
browser implementation to decide.
... for example, a
browser might choose to always use a 24-character ufrag in which bit 4 of each character is randomly selected between 0 and 1.
... specifications specification status comment webrtc 1.0: real-time communication between
browsersthe definition of 'rtcicecandidateinit.usernamefragment' in that specification.
RTCNetworkType - Web APIs
unknown the user's
browser is unable or unwilling to identify the underlying connection technology used by the described connection.
... this may be because the
browser isn't able to determine the network type for some reason or it may be intentionally getting obscured for security reasons, such as to avoid device fingerprinting.
... specifications specification status comment webrtc 1.0: real-time communication between
browsersthe definition of 'rtcnetworktype' in that specification.
RTCPeerConnection.getStats() - Web APIs
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.
... check the
browser compatibility table to verify the state of this method.
... specifications specification status comment webrtc 1.0: real-time communication between
browsersthe definition of 'rtcpeerconnection.getstats()' in that specification.
RTCRtpContributingSource.source - Web APIs
specifications specification status comment webrtc 1.0: real-time communication between
browsersthe definition of 'source' in that specification.
...
browser compatibility the compatibility table on this page is generated from structured data.
... if you'd like to contribute to the data, please check out https://github.com/mdn/
browser-compat-data and send us a pull request.
RTCRtpReceiver.track - Web APIs
specifications specification status comment webrtc 1.0: real-time communication between
browsersthe definition of 'track' in that specification.
...
browser compatibility the compatibility table on this page is generated from structured data.
... if you'd like to contribute to the data, please check out https://github.com/mdn/
browser-compat-data and send us a pull request.
Using the Resource Timing API - Web APIs
transfersize[" + i + "] = not supported"); } } managing the resource buffer although the
browser is required to support at least 150 resource timing performance entries in its resource timing buffer, some applications may use more resources than that limit.
...the clearresourcetimings() method removes all "resource" type performance entries from the
browser's resource performance entry buffer.
...performance.setresourcetimingbuffersize() = not supported"); } } the performance interface has a onresourcetimingbufferfull event handler that gets called (with an event of type event.type of "resourcetimingbufferfull") when the
browser's resource performance entry buffer is full.
Screen Capture API - Web APIs
the value is one of application,
browser, monitor, or window.
...the value is one of application,
browser, monitor, or window.
...this type is used for the displaysurface property in the constraints and settings objects, and has the possible values application,
browser, monitor, and window.
Selection.rangeCount - Web APIs
gecko
browsers allow multiple selections across table cells.
...select text in the
browser to see it change.
...in gecko
browsers, you can select multiple ranges across table cells by holding down ctrl while dragging with the mouse.
Using server-sent events - Web APIs
when not used over http/2, sse suffers from a limitation to the maximum number of open connections, which can be especially painful when opening multiple tabs, as the limit is per
browser and is set to a very low number (6).
...this limit is per
browser + domain, which means that you can open 6 sse connections across all of the tabs to www.example1.com and another 6 sse connections to www.example2.com (per stackoverflow).
...if this is specified, an event will be dispatched on the
browser to the listener for the specified event name; the website source code should use addeventlistener() to listen for named events.
Touch.clientY - Web APIs
the touch.clienty read-only property returns the y coordinate of the touch point relative to the
browser's viewport, not including any scroll offset.
...the touch.clientx property is the horizontal coordinate of a touch point relative to the
browser's viewport excluding any scroll offset.
... the touch.clienty property is the vertical coordinate of the touch point relative to the
browser's viewport excluding any scroll offset .
TouchEvent - Web APIs
note: the rate at which touchmove events is sent is
browser-specific, and may also vary depending on the capability of the user's hardware.
...there are several possible reasons why this might happen (and the exact reasons will vary from device to device, as well as
browser to
browser): an event of some kind occurred that canceled the touch; this might happen if a modal alert pops up during the interaction.
... the touch point has left the document window and moved into the
browser's ui area, a plug-in, or other external content.
Multi-touch interaction - Web APIs
it also calls preventdefault() to keep the
browser from applying further event handling (for example, mouse event emulation).
... function start_handler(ev) { // if the user makes simultaneous touches, the
browser will fire a // separate touchstart event for each touch point.
... function move_handler(ev) { // note: if the user makes more than one "simultaneous" touches, most
browsers // fire at least one touchmove event and some will fire several touchmoves.
URL - Web APIs
if a
browser doesn't yet support the url() constructor, you can access a url object using the window interface's window.url property.
... be sure to check to see if any of your target
browsers require this to be prefixed.
... static methods createobjecturl() returns a domstring containing a unique blob url, that is a url with blob: as its scheme, followed by an opaque string uniquely identifying the object in the
browser.
URLUtilsReadOnly.origin - Web APIs
for url using file: scheme, the value is
browser dependant.
...
browser compatibility the compatibility table in this page is generated from structured data.
... if you'd like to contribute to the data, please check out https://github.com/mdn/
browser-compat-data and send us a pull request.
WebGLRenderingContext.isContextLost() - Web APIs
examples include: two or more pages are using the gpu, but together place too high a demand on the gpu, so the
browser tells the two contexts that they've lost the connection, then selects one of the two to restore access for.
... another page running in the user's
browser performs an operation using the gpu that takes too long, causing hte
browser to decide to reset the gpu in order to break the stall.
... this would cause every webgl context to be lost throughout the entire
browser.
Clearing with colors - Web APIs
--> <canvas>your
browser does not seem to support html5 canvas.</canvas> body { text-align : center; } canvas { display : block; width : 280px; height : 210px; margin : auto; padding : 0; border : none; background-color : black; } // run everything inside window load event handler, to make sure // dom is fully loaded and styled before trying to manipulate it, // and to not mess up the global scope...
..." + "your
browser or device may not support webgl."; return; } paragraph.innerhtml = "congratulations!
... your
browser supports webgl.
Raining rectangles - Web APIs
you missed <strong>0</strong>.</p> <canvas>your
browser does not seem to support html5 canvas.</canvas> body { text-align : center; } canvas { display : block; width : 280px; height : 210px; margin : auto; padding : 0; border : none; background-color : black; } button { display : block; font-size : inherit; margin : auto; padding : 0.6em; } ;(function(){ "use strict" window.addeventlistener("load", setupanimation, ...
...// in addition we need to remember that vertical position in // webgl increases from bottom to top, unlike in the
browser // window.
...th.random()]; } } function getrenderingcontext() { var canvas = document.queryselector("canvas"); canvas.width = canvas.clientwidth; canvas.height = canvas.clientheight; var gl = canvas.getcontext("webgl") || canvas.getcontext("experimental-webgl"); if (!gl) { var paragraph = document.queryselector("p"); paragraph.innerhtml = "failed to get webgl context." + "your
browser or device may not support webgl."; return null; } gl.viewport(0, 0, gl.drawingbufferwidth, gl.drawingbufferheight); gl.clearcolor(0.0, 0.0, 0.0, 1.0); gl.clear(gl.color_buffer_bit); return gl; } })(); the source code of this example is also available on github.
Scissor animation - Web APIs
<p>webgl animation by clearing the drawing buffer with solid color and applying scissor test.</p> <button id="animation-onoff"> press here to <strong>[verb goes here]</strong> the animation</button> <canvas>your
browser does not seem to support html5 canvas.</canvas> body { text-align : center; } canvas { display : block; width : 280px; height : 210px; margin : auto; padding : 0; border : none; background-color : black; } button { display : block; font-size : inherit; margin : auto; padding : 0.6em; } ;(function(){ "use strict" window.addeventlistener("load", setupanimation, ...
...var gl, color = getrandomcolor(), position; function setupanimation (evt) { window.removeeventlistener(evt.type, setupanimation, false); if (!(gl = getrenderingcontext())) return; gl.enable(gl.scissor_test); gl.clearcolor(color[0], color[1], color[2], 1.0); // unlike the
browser window, vertical position in webgl is // measured from bottom to top.
..., math.random()]; } function getrenderingcontext() { var canvas = document.queryselector("canvas"); canvas.width = canvas.clientwidth; canvas.height = canvas.clientheight; var gl = canvas.getcontext("webgl") || canvas.getcontext("experimental-webgl"); if (!gl) { var paragraph = document.queryselector("p"); paragraph.innerhtml = "failed to get webgl context." + "your
browser or device may not support webgl."; return null; } gl.viewport(0, 0, gl.drawingbufferwidth, gl.drawingbufferheight); gl.clearcolor(0.0, 0.0, 0.0, 1.0); gl.clear(gl.color_buffer_bit); return gl; } })(); the source code of this example is also available on github.
Getting started with WebGL - Web APIs
next » webgl enables web content to use an api based on opengl es 2.0 to perform 2d and 3d rendering in an html canvas in
browsers that support it without the use of plug-ins.
...your
browser or machine may not support it."); return; } // set clear color to black, fully opaque gl.clearcolor(0.0, 0.0, 0.0, 1.0); // clear the color buffer with specified clear color gl.clear(gl.color_buffer_bit); } window.onload = main; the first thing we do here is obtain a reference to the canvas, assigning it to a variable named canvas.
...if the
browser does not support webgl, getcontext() will return null in which case we display a message to the user and exit.
Lifetime of a WebRTC session - Web APIs
webrtc lets you build peer-to-peer communication of arbitrary data, audio, or video—or any combination thereof—into a
browser application.
... note: different
browsers support ice restart under different sets of conditions.
... not all
browsers will perform ice restart due to network congestion, for example.
The WebSocket API (WebSockets) - Web APIs
the websocket api is an advanced technology that makes it possible to open a two-way interactive communication session between the user's
browser and a server.
... guides writing websocket client applications writing websocket servers writing a websocket server in c# writing a websocket server in java tools humblenet: a cross-platform networking library that works in the
browser.
... it consists of a c wrapper around websockets and webrtc that abstracts away cross-
browser differences, facilitating the creation of multi-user networking functionality for games and other apps.
Advanced techniques: Creating and sequencing audio - Web APIs
creating an audio context as you should be used to by now, each web audio api app starts with an audio context: // for cross
browser compatibility const audiocontext = window.audiocontext || window.webkitaudiocontext; const audioctx = new audiocontext(); the "sweep" — oscillators, periodic waves, and envelopes for what we will call the "sweep" sound, that first noise you hear when you dial up, we're going to create an oscillator to generate the sound.
...a
browser will clamp values outside this range.
... this.dataset.playing = 'true'; } else { window.cleartimeout(timerid); this.dataset.playing = 'false'; } }) }); summary we've now got an instrument inside our
browser!
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.
... android safetynet -prior to android key attestation, the only option for android devices was to create android safetynet attestations fido u2f - security keys that implement the fido u2f standard use this format none -
browsers may prompt users whether they want a site to be allowed to see their attestation data and/or may remove attestation data from the authenticator's response if the `attestation` parameter in `navigator.credentials.create()` is set to `none` the purpose of attestation is to cryptographically prove that a newly generated key pair came from a specific device.
...an arraybuffer that contains a json representation of what the
browser saw when being asked to authenticate.
Functions and classes available to Web Workers - Web APIs
41 (41) (yes) (yes) (yes) console api provides access to the
browser's debugging console (e.g., the web console in firefox).
... the specifics of how it works vary from
browser to
browser, but there is a de facto set of features that are typically provided.
... 21 (21) and 26 (26) for url() constructor no support no support no support webgl with offscreencanvas webgl (web graphics library) is a javascript api for rendering interactive 3d and 2d graphics within any compatible web
browser without the use of plug-ins.
Window.devicePixelRatio - Web APIs
in simpler terms, this tells the
browser how many of the screen's actual pixels should be used to draw a single css pixel.
... working draft initial definition
browser compatibility the compatibility table on this page is generated from structured data.
... if you'd like to contribute to the data, please check out https://github.com/mdn/
browser-compat-data and send us a pull request.
Window.history - Web APIs
the window.history read-only property returns a reference to the history object, which provides an interface for manipulating the
browser session history (pages visited in the tab or frame that the current page is loaded in).
... see manipulating the
browser history for examples and details.
... example history.back(); // equivalent to clicking back button history.go(-1); // equivalent to history.back(); notes for top-level pages you can see the list of pages in the session history, accessible via the history object, in the
browser's dropdowns next to the back and forward buttons.
Window.navigator - Web APIs
syntax navigatorobject = window.navigator examples example #1:
browser detect and return a string var s
browser, susrag = navigator.useragent; // the order matters here, and this may report false positives for unlisted
browsers.
... if (susrag.indexof("firefox") > -1) { s
browser = "mozilla firefox"; // "mozilla/5.0 (x11; ubuntu; linux x86_64; rv:61.0) gecko/20100101 firefox/61.0" } else if (susrag.indexof("samsung
browser") > -1) { s
browser = "samsung internet"; // "mozilla/5.0 (linux; android 9; samsung sm-g955f build/ppr1.180610.011) applewebkit/537.36 (khtml, like gecko) samsung
browser/9.4 chrome/67.0.3396.87 mobile safari/537.36 } else if (susrag.indexof("opera") > -1 || susrag.indexof("opr") > -1) { s
browser = "opera"; // "mozilla/5.0 (macintosh; intel mac os x 10_14_0) applewebkit/537.36 (khtml, like gecko) chrome/70.0.3538.102 safari/537.36 opr/57.0.3098.106" } else if (susrag.indexof("trident") > -1) { s
browser = "microsoft internet explorer"; // "mozilla/5.0 (windows nt 10.0; wow64; trident/7.0; .ne...
...t4.0c; .net4.0e; zoom 3.6.0; wbx 1.0.0; rv:11.0) like gecko" } else if (susrag.indexof("edge") > -1) { s
browser = "microsoft edge"; // "mozilla/5.0 (windows nt 10.0; win64; x64) applewebkit/537.36 (khtml, like gecko) chrome/58.0.3029.110 safari/537.36 edge/16.16299" } else if (susrag.indexof("chrome") > -1) { s
browser = "google chrome or chromium"; // "mozilla/5.0 (x11; linux x86_64) applewebkit/537.36 (khtml, like gecko) ubuntu chromium/66.0.3359.181 chrome/66.0.3359.181 safari/537.36" } else if (susrag.indexof("safari") > -1) { s
browser = "apple safari"; // "mozilla/5.0 (iphone; cpu iphone os 11_4 like mac os x) applewebkit/605.1.15 (khtml, like gecko) version/11.0 mobile/15e148 safari/604.1 980x1306" } else { s
browser = "unknown"; } alert("you are using: " + s
browser); specifi...
Window.onmozbeforepaint - Web APIs
although it may still work in some
browsers, its use is discouraged since it could be removed at any time.
... notes this event fires immediately before the
browser window is repainted, if the event has been requested by one or more scripts calling window.mozrequestanimationframe().
...this time is the same for all animations being run in the same
browser window, including those using the window.mozrequestanimationframe() method, css transitions, and smil animations.
Window.print() - Web APIs
in most
browsers, this method will block while the print dialog is open.
... living standard
browser compatibility the compatibility table in this page is generated from structured data.
... if you'd like to contribute to the data, please check out https://github.com/mdn/
browser-compat-data and send us a pull request.
window.requestIdleCallback() - Web APIs
the window.requestidlecallback() method queues a function to be called during a
browser's idle periods.
...
browser compatibility the compatibility table in this page is generated from structured data.
... if you'd like to contribute to the data, please check out https://github.com/mdn/
browser-compat-data and send us a pull request.
Window.screenX - Web APIs
the window.screenx read-only property returns the horizontal distance, in css pixels, of the left border of the user's
browser viewport to the left side of the screen.
... note: an alias of screenx was implemented across modern
browsers in more recent times — window.screenleft.
... syntax leftwindowpos = window.screenx returns a number equal to the number of css pixels from the left edge of the
browser viewport to the left edge of the screen.
Window.screenY - Web APIs
the window.screeny read-only property returns the vertical distance, in css pixels, of the top border of the user's
browser viewport to the top edge of the screen.
... note: an alias of screeny was implemented across modern
browsers in more recent times — window.screentop.
... syntax topwindowpos = window.screeny returns a number equal to the number of css pixels from the top edge of the
browser viewport to the top edge of the screen.
Window.sessionStorage - Web APIs
a page session lasts as long as the
browser is open, and survives over page reloads and restores.
...for example, the user may have their
browser configured to deny permission to persist data for the specified origin.
... sessionstorage.setitem('mycat', 'tom'); the following example autosaves the contents of a text field, and if the
browser is refreshed, restores the text field content so that no writing is lost.
Window.stop() - Web APIs
the window.stop() stops further resource loading in the current browsing context, equivalent to the stop button in the
browser.
... recommendation
browser compatibility the compatibility table in this page is generated from structured data.
... if you'd like to contribute to the data, please check out https://github.com/mdn/
browser-compat-data and send us a pull request.
WindowEventHandlers.onbeforeunload - Web APIs
note: to combat unwanted pop-ups, some
browsers don't display prompts created in beforeunload event handlers unless the page has been interacted with.
... window.addeventlistener('beforeunload', function (e) { // cancel the event e.preventdefault(); // if you prevent default behavior in mozilla firefox prompt will always be shown // chrome requires returnvalue to be set e.returnvalue = ''; }); guarantee the
browser unload by removing the returnvalue property of the event window.addeventlistener('beforeunload', function (e) { // the absence of a returnvalue property on the event will guarantee the
browser unload happens delete e['returnvalue']; }); notes when your page uses javascript to render content, the javascript may stop when leaving and then navigating back to the page.
... you can bind to window.onbeforeunload to prevent the
browser from fully caching the page.
XMLHttpRequest - Web APIs
event handlers onreadystatechange as a property of the xmlhttprequest instance is supported in all
browsers.
... since then, a number of additional event handlers have been implemented in various
browsers (onload, onerror, onprogress, etc.).
... more recent
browsers, including firefox, also support listening to the xmlhttprequest events via standard addeventlistener() apis in addition to setting on* properties to a handler function.
Using the link role - Accessibility
this technique demonstrates how to use the link role and describes the effect it has on
browsers and assistive technology.
... 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.
...e.target : e.srcelement; if (ref) { window.open(ref.getattribute('data-href'), '_blank'); } } } spanelem.addeventlistener('click', navigatelink); spanelem.addeventlistener('keydown', navigatelink); result notes if pressing the link triggers an action but does not change
browser focus or navigate to a new page, you might wish to consider using the button role instead of the link role.
Accessibility: What users can do to browse more safely - Accessibility
use reader mode on
browsers enable content blockers; gets rid of ads, reduces and/or removes distractions enables text-to-speech in certain
browsers, enable fonts by choice enable page zoom turn off animated gifs in the
browser browsers offer much power to their users; it's just a matter of knowing where to go.
...to reverse it, you will have to change the value back to "normal" use
browser extensions gif blocker for chrome, gif blocker is an extension available at the web store.
...there is a github repository for it at https://github.com/0ui/gif-scrubber beeline reader beeline reader has a
browser extension that allows you to set up for grayscale and dyslexi font, among other things take advantage operating system accessibility features most operating systems such as windows 10, have accessibility options that are surprisingly powerful.
:checked - CSS: Cascading Style Sheets
note: because
browsers often treat <option>s as replaced elements, the extent to which they can be styled with the :checked pseudo-class varies from
browser to
browser.
... recommendation defines the pseudo-class, but not the associated semantic
browser compatibility the compatibility table on this page is generated from structured data.
... if you'd like to contribute to the data, please check out https://github.com/mdn/
browser-compat-data and send us a pull request.
:defined - CSS: Cascading Style Sheets
this includes any standard element built in to the
browser, and custom elements that have been successfully defined (i.e.
... living standard
browser compatibility the compatibility table on this page is generated from structured data.
... if you'd like to contribute to the data, please check out https://github.com/mdn/
browser-compat-data and send us a pull request.
:empty - CSS: Cascading Style Sheets
note: in selectors level 4 the :empty pseudo-class was changed to act like :-moz-only-whitespace, but no
browser currently supports this yet.
...--></div> <div class="box">i will be pink.</div> <div class="box"> <!-- i will be pink in older
browsers because of the whitespace around this comment.
... --> </div> <div class="box"> <p><!-- i will be pink in all
browsers because of the non-collapsible whitespace and elements around this comment.
@charset - CSS: Cascading Style Sheets
as there are several ways to define the character encoding of a style sheet, the
browser will try the following methods in the following order (and stop as soon as one yields a result) : the value of the unicode byte-order character placed at the beginning of the file.
... recommendation initial definition
browser compatibility the compatibility table on this page is generated from structured data.
... if you'd like to contribute to the data, please check out https://github.com/mdn/
browser-compat-data and send us a pull request.
-webkit-transform-2d - CSS: Cascading Style Sheets
syntax -webkit-transform-2d is a boolean css media feature whose value is true if the
browser supports -webkit prefixed css 2d transforms.
... values true the
browser supports the 2d css transforms with the -webkit prefix.
... false the 2d css transforms prefixed with -webkit are not supported by the
browser.
-webkit-transform-3d - CSS: Cascading Style Sheets
syntax -webkit-transform-3d is a boolean css media feature whose value is true if the
browser supports -webkit prefixed css 3d transforms.
... values true the
browser supports the 3d css transforms with the -webkit prefix.
... false the 3d css transforms prefixed with -webkit are not supported by the
browser.
@media - CSS: Cascading Style Sheets
both em and px are valid units, but em works better if the user changes the
browser text size.
... because of this potential, a
browser may opt to fudge the returned values in some manner in order to prevent them from being used to precisely identify a computer.
... a
browser might also offer additional measures in this area; for example, if firefox's "resist fingerprinting" setting is enabled, many media queries report default values rather than values representing the actual device state.
Handling content breaks in multicol - CSS: Cascading Style Sheets
to some extent your use of fragmentation is always a suggestion to the
browser, to control breaks in this way if it is possible.
... in addition to the above,
browser support for these properties is a little patchy.
... the compatibility data charts on the individual property pages here on mdn can help you see which
browsers support which features.
Spanning and Balancing Columns - CSS: Cascading Style Sheets
note the spanning and balancing functionality covered in this guide is not as well supported across
browsers as the functionality covered in the previous two sections in this guide.
... note that column balancing is not supported by all
browsers.
... check that you are getting the sort of effect that you expect in the
browsers you support.
Aligning Items in a Flex Container - CSS: Cascading Style Sheets
browser support for this value is not as good as that of the values defined in the flexbox spec.
... see the documentation for justify-content on mdn for more details on all of these values and
browser support.
...the inclusion of these properties in box alignment means that in future we should be able to use column-gap and row-gap in flex layouts too, and in firefox 63 you will find the first
browser implementation of the gap properties in flex layout.
Line-based placement with CSS Grid - CSS: Cascading Style Sheets
note: when grid first shipped in
browsers the column-gap, row-gap and gap properties were prefixed with the grid- prefix as grid-column-gap, grid-row-gap and grid-gap respectively.
...
browsers are updating their rendering engines to remove this prefix, however the prefixed versions will be maintained as aliases, making them safe to use.
... at the present time, some
browsers do not support the unprefixed versions, which is why the live examples in this guide use grid- prefixed versions.
Basic concepts of Logical Properties and Values - CSS: Cascading Style Sheets
the below diagram shows the inline and block directions in a horizontal writing mode: this diagram shows block and inline in a vertical writing mode:
browser support logical properties and values can be thought of as a couple of groups in terms of current
browser support.
...these mapped properties are starting to see good
browser support, and if you look at the individual pages for the properties in the reference here on mdn you will see that edge is the only modern
browser currently missing these.
... testing for
browser support you can test for support of logical properties and values using feature queries.
Using CSS transitions - CSS: Cascading Style Sheets
animations that involve transitioning between two states are often called implicit transitions as the states in between the start and final states are implicitly defined by the
browser.
...using animations with auto may lead to unpredictable results, depending on the
browser and its version, and should be avoided.
... before we look at code snippets, you might want to take a look at the live demo (assuming your
browser supports transitions).
Questions about CSS - CSS: Cascading Style Sheets
css gives more control over the appearance of a web page to the page creator than to the
browser designer or the viewer.
... an imported style sheet, using the css @import notation to automatically import and merge an external style sheet with the current style sheet style attributes specified by the viewer to the
browser the default style sheet assumed by the
browser in general, the web page creator's style sheet takes precedence, but it's recommended that
browsers provide ways for the viewer to override the style attributes in some respects.
... since it's likely that different
browsers will choose to implement css1 somewhat differently, the web page creator must test the page with different
browsers.
background-position-x - CSS: Cascading Style Sheets
(some
browsers allow assigning the right edge for offset).
...
browser compatibility the compatibility table in this page is generated from structured data.
... if you'd like to contribute to the data, please check out https://github.com/mdn/
browser-compat-data and send us a pull request.
background-position-y - CSS: Cascading Style Sheets
(some
browsers allow assigning the bottom edge for offset).
...
browser compatibility the compatibility table in this page is generated from structured data.
... if you'd like to contribute to the data, please check out https://github.com/mdn/
browser-compat-data and send us a pull request.
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 performance benefits.
...if the containing box is offscreen, the
browser does not need to paint its contained elements — these must also be offscreen as they are contained completely by that box.
..."graphic.jpg" alt="photo"> <p>more content here.</p> </article> img { float: left; border: 3px solid black; } article { border: 1px solid black; } as you can see, because of the way floats work, the first image ends up inside the area of the second article: fixing with contain if we give each article the contain property with a value of content, when new elements are inserted the
browser understands it only needs to recalculate the containing element's subtree, and not anything outside it: <h1>my blog</h1> <article> <h2>heading of a nice article</h2> <p>content here.</p> <img src="i-just-showed-up.jpg" alt="social"> </article> <article> <h2>another heading of another article</h2> <img src="graphic.jpg" alt="photo"> <p>more content here.</p> </article> img { floa...
cross-fade() - CSS: Cascading Style Sheets
the original syntax, which has been implemented in some
browsers, only allowed for two images, with the sum of the transparency of those two images being exactly 100%.
... the original syntax is supported in safari and supported with the -webkit- prefix in chrome, opera, and other blink-based
browsers.
... accessibility concerns
browsers do not provide any special information on background images to assistive technology.
Adapting to the new two-value syntax of display - CSS: Cascading Style Sheets
ied then the specification explains that the outer value should be set to block: "if a <display-inside> value is specified but <display-outside> is omitted, the element’s outer display type defaults to block—except for ruby, which defaults to inline." finally, we have some legacy pre-composed inline-level values of: inline-block inline-table inline-flex inline-grid if a supporting
browser comes across these as single values then it treats them the same as the two-value versions: inline flow-root inline table inline flex inline grid so all of the current situations are neatly covered, meaning that we maintain compatibility of existing and new sites that use the single values, while allowing the spec to evolve.
...other
browsers do not yet implement the two-value versions.
...if you'd like to contribute to the data, please check out https://github.com/mdn/
browser-compat-data and send us a pull request.
<display-box> - CSS: Cascading Style Sheets
due to a bug in
browsers this will currently remove the element from the accessibility tree — screen readers will not look at what's inside.
... accessibility concerns current implementations in most
browsers will remove from the accessibility tree any element with a display value of contents.
... this will cause the element — and in some
browser versions, its descendant elements — to no longer be announced by screen reading technology.
element() - CSS: Cascading Style Sheets
on gecko
browsers, you can use the non-standard document.mozsetimageelement() method to change the element being used as the background for a given css background element.
...
browser compatibility the compatibility table on this page is generated from structured data.
... if you'd like to contribute to the data, please check out https://github.com/mdn/
browser-compat-data and send us a pull request.
env() - CSS: Cascading Style Sheets
to tell the
browser to use the whole available space on the screen, and so enabling us to use the env() variables, we need to add a new viewport meta value: <meta name="viewport" content="viewport-fit=cover" /> body { padding: env(safe-area-inset-top, 20px) env(safe-area-inset-right, 20px) env(safe-area-inset-bottom, 20px) env(safe-area-inset-left, 20px); } in addition, unlike custom properties,...
... originally provided by the ios
browser to allow developers to place their content in a safe area of the viewport, the safe-area-inset-* values defined in the specification can be used to help ensure content is visible even to viewers using non‑rectangular displays.
... <p> if the <code>env()</code> function is supported in your
browser, this paragraph’s text will have 50px of padding between it and the left border — but not the top, right and bottom.
filter - CSS: Cascading Style Sheets
this function is similar to the more established box-shadow property; the difference is that with filters, some
browsers provide hardware acceleration for better performance.
...if not specified, the color used depends on the
browser - it is usually the value of the <color> property, but note that safari currently paints a transparent shadow in this case.
...this function is similar to the more established opacity property; the difference is that with filters, some
browsers provide hardware acceleration for better performance.
font-language-override - CSS: Cascading Style Sheets
/* keyword value */ font-language-override: normal; /* <string> values */ font-language-override: "eng"; /* use english glyphs */ font-language-override: "trk"; /* use turkish glyphs */ /* global values */ font-language-override: initial; font-language-override: inherit; font-language-override: unset; by default, html's lang attribute tells
browsers to display glyphs designed specifically for that language.
... values normal tells the
browser to use font glyphs that are appropriate for the language specified by the lang attribute.
... <string> tells the
browser to use font glyphs that are appropriate for the language specified by the string.
font-stretch - CSS: Cascading Style Sheets
however, note that the <percentage> syntax is not yet supported by all
browsers: check the
browser compatibility table for details.
...rst-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.
... note: the font-stretch property was initially defined in css 2, but dropped in css 2.1 due to the lack of
browser implementation.
font-variant-caps - CSS: Cascading Style Sheets
if these are not present, the
browser synthesizes them from the uppercase glyphs.
... candidate recommendation initial definition
browser compatibility the compatibility table on this page is generated from structured data.
... if you'd like to contribute to the data, please check out https://github.com/mdn/
browser-compat-data and send us a pull request.
<integer> - CSS: Cascading Style Sheets
opera 12.1 supports values up to 215-1, ie up to 220-1, and other
browsers even higher.
...
browser compatibility the compatibility table on this page is generated from structured data.
... if you'd like to contribute to the data, please check out https://github.com/mdn/
browser-compat-data and send us a pull request.
margin - CSS: Cascading Style Sheets
auto the
browser selects a suitable margin to use.
...m: 30px margin */ /* left: 5px margin */ margin: 2em auto; /* top and bottom: 2em margin */ /* box is horizontally centered */ margin: auto; /* top and bottom: 0 margin */ /* box is horizontally centered */ notes horizontal centering to center something horizontally in modern
browsers, you can use display: flex; justify-content: center; .
... however, in older
browsers like ie8-9 that do not support flexible box layout, these are not available.
max-height - CSS: Cascading Style Sheets
auto the
browser will calculate and select a max-height for the specified element.
...
browser compatibility the compatibility table on this page is generated from structured data.
... if you'd like to contribute to the data, please check out https://github.com/mdn/
browser-compat-data and send us a pull request.
max-width - CSS: Cascading Style Sheets
auto the
browser will calculate and select a max-width for the specified element.
...
browser compatibility the compatibility table on this page is generated from structured data.
... if you'd like to contribute to the data, please check out https://github.com/mdn/
browser-compat-data and send us a pull request.
min-width - CSS: Cascading Style Sheets
auto the
browser will calculate and select a min-width for the specified element.
...
browser compatibility the compatibility table on this page is generated from structured data.
... if you'd like to contribute to the data, please check out https://github.com/mdn/
browser-compat-data and send us a pull request.
outline-width - CSS: Cascading Style Sheets
typically equivalent to 1px in desktop
browsers (including firefox).
...typically equivalent to 3px in desktop
browsers (including firefox).
...typically equivalent to 5px in desktop
browsers (including firefox).
outline - CSS: Cascading Style Sheets
a notable exception is input elements, which are given default styling by
browsers.
... accessibility concerns assigning outline a value of 0 or none will remove the
browser's default focus style.
... 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.
Guide to scroll anchoring - CSS: Cascading Style Sheets
scroll anchoring is a
browser feature that aims to solve this problem of content jumping, which happens if content loads in after the user has already scrolled to a new part of the document.
...the feature is enabled by default in supporting
browsers.
... the only possible values are auto or none: auto is the initial value; as long as the user has a supported
browser the scroll anchoring behavior will happen, and they should see fewer content jumps.
overflow-block - CSS: Cascading Style Sheets
browsers display scrollbars whether or not any content is actually clipped.
...desktop
browsers provide scrollbars if content overflows.
... </div> </li> <li><code>overflow-block:auto</code> — on most
browser, equivalent to <code>scroll</code> <div id="div4"> 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
browsers display scrollbars whether or not any content is actually clipped.
...desktop
browsers provide scrollbars if content overflows.
...code>overflow-inline:scroll</code> — always adds a scrollbar <div id="div2"> abcdefghijklmopqrstuvwxyzabcdefghijklmopqrstuvwxyz </div> </li> <li><code>overflow-inline:visible</code> — displays the text outside the box if needed <div id="div3"> abcdefghijklmopqrstuvwxyzabcdefghijklmopqrstuvwxyz </div> </li> <li><code>overflow-inline:auto</code> — on most
browsers, equivalent to <code>scroll</code> <div id="div4"> abcdefghijklmopqrstuvwxyzabcdefghijklmopqrstuvwxyz </div> </li> </ul> css #div1, #div2, #div3, #div4 { border: 1px solid black; width: 250px; margin-bottom: 12px; } #div1 { overflow-inline: hidden;} #div2 { overflow-inline: scroll;} #div3 { overflow-inline: visible;} #div4 { overflow-inline: auto;} result specif...
overflow-x - CSS: Cascading Style Sheets
browsers display scrollbars whether or not any content is actually clipped.
...desktop
browsers provide scrollbars if content overflows.
... </li> <li><code>overflow-x:scroll</code> — always adds a scrollbar <div id="div2"> abcdefghijklmopqrstuvwxyzabcdefghijklmopqrstuvwxyz </div> </li> <li><code>overflow-x:visible</code> — displays the text outside the box if needed <div id="div3"> abcdefghijklmopqrstuvwxyzabcdefghijklmopqrstuvwxyz </div> </li> <li><code>overflow-x:auto</code> — on most
browsers, equivalent to <code>scroll</code> <div id="div4"> abcdefghijklmopqrstuvwxyzabcdefghijklmopqrstuvwxyz </div> </li> </ul> css #div1, #div2, #div3, #div4 { border: 1px solid black; width: 250px; margin-bottom: 12px; } #div1 { overflow-x: hidden;} #div2 { overflow-x: scroll;} #div3 { overflow-x: visible;} #div4 { overflow-x: auto;} result specifications s...
overflow-y - CSS: Cascading Style Sheets
browsers display scrollbars whether or not any content is actually clipped.
...desktop
browsers provide scrollbars if content overflows.
... </div> </li> <li><code>overflow-y:auto</code> — on most
browser, equivalent to <code>scroll</code> <div id="div4"> lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
overflow - CSS: Cascading Style Sheets
browsers always display scrollbars whether or not any content is actually clipped, preventing scrollbars from appearing or disappearing as content changes.
...desktop
browsers provide scrollbars if content overflows.
...only supported in webkit-based (e.g., safari) and blink-based (e.g., chrome or opera)
browsers.
overscroll-behavior - CSS: Cascading Style Sheets
the overscroll-behavior css property sets what a
browser does when reaching the boundary of a scrolling area.
... /* keyword values */ overscroll-behavior: auto; /* default */ overscroll-behavior: contain; overscroll-behavior: none; /* two values */ overscroll-behavior: auto contain; /* global values */ overscroll-behavior: inherit; overscroll-behavior: initial; overscroll-behavior: unset; by default, mobile
browsers tend to provide a "bounce" effect or even a page refresh when the top or bottom of a page (or other scroll area) is reached.
...you can use overscroll-behavior to get rid of unwanted scroll chaining and the
browser's facebook/twitter app-inspired "pull to refresh"-type behavior.
page-break-after - CSS: Cascading Style Sheets
for compatibility reasons, page-break-after should be treated by
browsers as an alias of break-after.
... recommendation initial definition
browser compatibility the compatibility table on this page is generated from structured data.
... if you'd like to contribute to the data, please check out https://github.com/mdn/
browser-compat-data and send us a pull request.
page-break-before - CSS: Cascading Style Sheets
for compatibility reasons, page-break-before should be treated by
browsers as an alias of break-before.
... recommendation initial definition
browser compatibility the compatibility table on this page is generated from structured data.
... if you'd like to contribute to the data, please check out https://github.com/mdn/
browser-compat-data and send us a pull request.
revert - CSS: Cascading Style Sheets
the only difference is for properties that have values set by the
browser or by custom stylesheets created by users (set on the
browser side).
...revert will revert to bold because this is a default value for headers in most
browsers.
... h3 { font-weight: normal; color: blue; border-bottom: 1px solid grey; } <h3>this will have custom styles</h3> <p>just some text</p> <h3 style="all: revert">this should be reverted to
browser/user defaults</h3> <p>just some text</p> revert on a parent reverting effectively removes the value for the element you select with some rule and only for that element.
text-overflow - CSS: Cascading Style Sheets
to clip at the transition between characters you can specify text-overflow as an empty string, if that is supported in your target
browsers: text-overflow: '';.
...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: initial; } .overflow-clip { text-overflow: clip; } .overflow-ellipsis { text-overflow: ellipsis; } .overflow-string { /* not supported in most
browsers, see the '
browser compatibility' section below */ text-overflow: " [..]"; } html <p class="overflow-visible">lorem ipsum dolor sit amet, consectetur adipisicing elit.</p> <p class="overflow-clip">lorem ipsum dolor sit amet, consectetur adipisicing elit.</p> <p class="overflow-ellipsis">lorem ipsum dolor sit amet, consectetur adipisicing elit.</p> <p class="overflow-string">lorem ipsum ...
...as some not-listed-at-risk features needed to be removed, the spec was demoted to the working draft level, explaining why
browsers implemented this property unprefixed, though not at the cr state.
Getting Started - Developer guides
then, mozilla, safari, and other
browsers followed, implementing an xmlhttprequest object that supported the methods and properties of microsoft's original activex object.
...keep the method all-capitals as per the http standard, otherwise some
browsers (like firefox) might not process the request.
... note 2: if you do not set header cache-control: no-cache the
browser will cache the response and never re-submit the request, making debugging challenging.
Challenge solutions - Developer guides
solution one way to do this is to put comment delimiters around the rule for .carrot: /* .carrot { color: orange; } */ text styles big initial letters challenge without changing anything else, make all six initial letters twice the size in the
browser's default serif font.
...then refresh your
browser to see if you were correct.
... solution move the position of the :hover pseudo-class from a specific petal, to all petals #inner-petals { --segment-fill-fill-hover: pink; } /* non-standard way for some older
browsers */ #inner-petals:hover .segment-fill { fill: pink; stroke: none; } ...
Mouse gesture events - Developer guides
note: these gesture events are available to add-ons and other
browser chrome code, but are never sent to regular web page content.
... note: this event is sent whenever the movement of the user's fingers exceeds the number of pixels indicated by the
browser.gesture.pinch.threshold preference.
... note: this event is sent whenever the movement of the user's fingers exceeds the number of pixels indicated by the
browser.gesture.pinch.threshold preference.
Constraint validation - Developer guides
even though far fewer invalid form requests are to be expected, invalid ones can still be sent by non-compliant
browsers (for instance,
browsers without html5 and without javascript) or by bad people trying to trick your web application.
... here is the html part: <label for="fs">select a file smaller than 75 kb : </label> <input type="file" id="fs"> this displays: the javascript reads the file selected, uses the file.size() method to get its size, compares it to the (hard coded) limit, and calls the constraint api to inform the
browser if there is a violation: function checkfilesize() { var fs = document.getelementbyid("fs"); var files = fs.files; // if there is (at least) one file selected if (files.length > 0) { if (files[0].size > 75 * 1024) { // check the constraint fs.setcustomvalidity("the selected file must not be larger than 75 kb"); return; } } // no custom constraint violation f...
...note: setting a custom validity message on fieldset elements will not prevent form submission in most
browsers.
Mobile-friendliness - Developer guides
for example, it is absolutely critical to keep in mind which
browsers and devices you will target when picking a mobile strategy.
... if your audience is full of early-adopters, you can focus on tablets and smartphones with standards-friendly
browsers.
... on the other hand, if many of your site’s users are on devices with less capable
browsers, that may eliminate certain strategies as viable options.
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.
...every time a new
browser comes out, you must adjust your algorithm to accommodate it.
...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.
User input and controls - Developer guides
implement controls pointer lock in some cases, typically game development, you might need to access mouse events even when the cursor goes past the boundary of the
browser or screen: the pointer_lock_api gives you full control of the pointing device.
...bear in mind that many
browsers still implement this with a vendor prefix, so you will probably need to fork your code something like this: var elem = document.getelementbyid("myvideo"); if (elem.requestfullscreen) { elem.requestfullscreen(); } else if (elem.msrequestfullscreen) { elem.msrequestfullscreen(); } else if (elem.mozrequestfullscreen) { elem.mozrequestfullscreen(); } else if (elem.webkitrequestfullscreen) { ...
...it will only work on a
browser that supports touch events.
DASH Adaptive Streaming for HTML 5 Video - HTML: Hypertext Markup Language
browser support firefox 21 includes an implementation of dash for html5 webm video which is turned off by default.
... using dash - client side you'll want to modify your web page to point to the dash manifest first, instead of directly to a particular video file: <video> <source src="movie.mpd"> <source src="movie.webm"> your
browser does not support the video tag.
...if dash is supported by the
browser, your video will now stream adaptively.
<abbr>: The Abbreviation element - HTML: Hypertext Markup Language
this text is often presented by
browsers as a tooltip when the mouse cursor is hovered over the element.
... default styling the purpose of this element is purely for the convenience of the author and all
browsers display it inline (display: inline) by default, though its default styling varies from one
browser to another: some
browsers, like internet explorer, do not style it differently than a <span> element.
... a few
browsers not only add a dotted underline, but also put it in small caps; to avoid this styling, adding something like font-variant: none in the css takes care of this case.
<dl>: The Description List element - HTML: Hypertext Markup Language
examples single term and description <dl> <dt>firefox</dt> <dd> a free, open source, cross-platform, 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-platform, 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-platform, graphical web
browser developed by the mozilla corporation and hundreds of volunteers.
<input type="hidden"> - HTML: Hypertext Markup Language
this specifically can't be edited or seen by the user via the user interface, although you could edit the value via
browser developer tools.
... important: while the value isn't displayed to the user in the page's content, it is visible—and can be edited—using any
browser's developer tools or "view source" functionality.
... display: flex; margin-bottom: 10px; } label { flex: 2; line-height: 2; text-align: right; padding-right: 20px; } input, textarea { flex: 7; font-family: sans-serif; font-size: 1.1rem; padding: 5px; } textarea { height: 60px; } the server would set the value of the hidden input with the id "postid" to the id of the post in its database before sending the form to the user's
browser and would use that information when the form is returned to know which database record to update with modified information.
<input type="image"> - HTML: Hypertext Markup Language
obsolete attributes the following attribute was defined by html 4 for image inputs, but was not implemented by all
browsers and has since been deprecated: attribute description usemap the name of an image map (<map>) element to use with the image; this is obsolete.
... formmethod html5 specifies the http method that the
browser uses to submit the form.
... using the x and y data points when you submit a form using a button created with <input type="image">, two extra data points are submitted to the server automatically by the
browser — x and y.
<keygen> - HTML: Hypertext Markup Language
(note that only a subset of the curves named there may actually be supported in any particular
browser.) if the keyparams parameter string is not a recognized curve name string, then a curve is chosen according to the user's chosen key strength (low, medium, high), using the curve named "secp384r1" for high, and the curve named "secp256r1" for medium keys.
...the
browser presents several possible key strengths.
...if the user's
browser is configured to support cryptographic hardware (e.g.
<listing> - HTML: Hypertext Markup Language
it is deprecated since html 3.2 and was neither implemented by all
browsers, nor in a consistent way.
...
browser compatibility the compatibility table in this page is generated from structured data.
... if you'd like to contribute to the data, please check out https://github.com/mdn/
browser-compat-data and send us a pull request.
<noembed>: The Embed Fallback element (Obsolete) - HTML: Hypertext Markup Language
the <noembed> element is an obsolete, non-standard way to provide alternative, or "fallback", content for
browsers that do not support the <embed> element or do not support the type of embedded content an author wishes to use.
... while this element currently still works in many
browsers, it is obsolete and should not be used.
... examples the message inside <noembed> tag will appear only when your
browser does not support <embed> tag.
<q>: The Inline Quotation element - HTML: Hypertext Markup Language
most modern
browsers implement this by surrounding the text in quotation marks.
... implicit aria role no corresponding role permitted aria roles any dom interface htmlquoteelement usage note: most modern
browsers will automatically add quotation marks around text inside a <q> element.
... a style rule may be needed to add quotation marks in older
browsers.
spellcheck - HTML: Hypertext Markup Language
if this attribute is not set, its default value is element-type and
browser-defined.
... this attribute is merely a hint for the
browser:
browsers are not required to check for spelling errors.
... typically non-editable elements are not checked for spelling errors, even if the spellcheck attribute is set to true and the
browser supports spellchecking.
HTTP authentication - HTTP
authentication of cross-origin images a potential security hole recently been fixed by
browsers is authentication of cross-site images.
... character encoding of http authentication
browsers use utf-8 encoding for usernames and passwords.
... firefox once used iso-8859-1, but changed to utf-8 for parity with other
browsers and to avoid potential problems as described in bug 1419658.
Choosing between www and non-www URLs - HTTP
this will redirect the
browser trying to access the non-canonical urls to their canonical equivalent.
...in the previous example, http://www.example.org/whaddup would serve the same content as http://example.org/whaddup, but with an additional <link> element in the head: <link href="http://example.org/whaddup" rel="canonical"> unlike the previous case,
browser history will consider non-www and www urls as independent entries.
...it is good advice to do this since you can't predict which url users will type in their
browser's url bar.
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 information is available to sites the
browser connects to as well.
... for example, a script on
browserleaks highlights what firefox reveals when queried by a simple script running on the site (you can find the code in https://
browserleaks.com/firefox#more).
...for example: http://searchfox.org/mozilla-central/rev/48ea452803907f2575d81021e8678634e8067fc2/
browser/app/profile/firefox.js#575 web sites can easily collect firefox default preferences by overriding this pref() function and using the script resource:///defaults/preferences/firefox.js.
Basics of HTTP - HTTP
resource urls resource urls, those prefixed with the resource scheme are used by firefox and firefox
browser extensions to load resources internally, but is also available to some sites the
browser connects to as well.
... flow of an http session this fundamental article describes a typical http session: what happens under the hood when you click on a link in your
browser.
... 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.
Cross-Origin Resource Policy (CORP) - HTTP
as this policy is expressed via a response header, the actual request is not prevented—rather, the
browser prevents the result from being leaked by stripping the response body.
... cross-origin resource policy is an opt-in response header which can protect any resource; there is no need for
browsers to sniff mime types.
... cross-origin-resource-policy: same-site | same-origin | cross-origin during a cross-origin resource policy check, if the header is set, the
browser will deny no-cors requests issued from a different origin/site.
Using Feature Policy - HTTP
for each policy-controlled feature, the
browser maintains a list of origins for which the feature is enabled, known as an allowlist.
...the value of this header is a policy to be enforced by the
browser for the given page.
...you can use feature policies to specify the desired best practices, and rely on the
browser to enforce the policies to prevent regressions.
Access-Control-Allow-Origin - HTTP
header type response header forbidden header name no syntax access-control-allow-origin: * access-control-allow-origin: <origin> access-control-allow-origin: null directives * for requests without credentials, the literal value "*" can be specified, as a wildcard; the value tells
browsers to allow requesting code from any origin to access the resource.
...the "null" value for the acao header should therefore be avoided." examples a response that tells the
browser to allow code from any origin to access a resource will include the following: access-control-allow-origin: * a response that tells the
browser to allow requesting code from the origin https://developer.mozilla.org to access a resource will include the following: access-control-allow-origin: https://developer.mozilla.org limiting the possible access-control-allow-origin values to a set of all...
... cors and caching if the server sends a response with an access-control-allow-origin value that is an explicit origin (rather than the "*" wildcard), then the response should also include a vary response header with the value origin — to indicate to
browsers that server responses can differ based on the value of the origin request header.
Clear-Site-Data - HTTP
it allows web developers to have more control over the data stored locally by a
browser for their origins.
...the
browser cache, see http caching) for the origin of the response url.
... depending on the
browser, this might also clear out things like pre-rendered pages, script caches, webgl shader caches, or address bar suggestions.
CSP: connect-src - HTTP
note: connect-src 'self' does not resolve to websocket schemas in all
browsers, more info: https://github.com/w3c/webappsec-csp/issues/7 csp version 1 directive type fetch directive default-src fallback yes.
...some
browsers specifically exclude blob and filesystem from source directives.
...specifying nonce makes a modern
browser ignore 'unsafe-inline' which could still be set for older
browsers without nonce support.
CSP: form-action - HTTP
whether form-action should block redirects after a form submission is debated and
browser implementations of this aspect are inconsistent (e.g.
...some
browsers specifically exclude blob and filesystem from source directives.
...specifying nonce makes a modern
browser ignore 'unsafe-inline' which could still be set for older
browsers without nonce support.
CSP: script-src - HTTP
some
browsers specifically exclude blob and filesystem from source directives.
...specifying nonce makes a modern
browser ignore 'unsafe-inline' which could still be set for older
browsers without nonce support.
... the policy: script-src 'unsafe-inline' https: 'nonce-abcdefg' 'strict-dynamic' will act like 'unsafe-inline' https: in
browsers that support csp1, https: 'nonce-abcdefg' in
browsers that support csp2, and 'nonce-abcdefg' 'strict-dynamic' in
browsers that support csp3.
Public-Key-Pins-Report-Only - HTTP
the http public-key-pins-report-only response header was used to send reports of pinning violation to the report-uri specified in the header but, unlike public-key-pins still allows
browsers to connect to the server if the pinning is violated.
... the header is silently ignored in modern
browsers as support for hpkp has been removed.
...some
browsers might allow other hashing algorithms than sha-256 in the future.
Public-Key-Pins - HTTP
the http public-key-pins response header used to associate a specific cryptographic public key with a certain web server to decrease the risk of mitm attacks with forged certificates, however, it has been removed from modern
browsers and is no longer supported.
...some
browsers might allow other hashing algorithms than sha-256 in the future.
... max-age=<expire-time> the time, in seconds, that the
browser should remember that this site is only to be accessed using one of the defined keys.
Server-Timing - HTTP
database read/write, cpu time, file system access, etc.) in the developer tools in the user's
browser or in the performanceservertiming interface.
... performanceservertiming interface in addition to having server-timing header metrics appear in the developer tools of the
browser, the performanceservertiming interface enables tools to automatically collect and process metrics from javascript.
...the interface is only available in secure contexts (https) in some
browsers.
HTTP Messages - HTTP
web developers, or webmasters, rarely craft these textual http messages themselves: software, a web
browser, proxy, or web server, perform this action.
... they provide http messages through config files (for proxies or servers), apis (for
browsers), or other interfaces.
...no changes are needed in the apis used by web developers to utilize http frames; when available in both the
browser and the server, http/2 is switched on and used.
Network Error Logging - HTTP
this experimental header allows web sites and applications to opt-in to receive reports about failed (and, if desired, successful) network fetches from supporting
browsers.
... usage web applications opt in to this behaviour with the nel header, which is a json-encoded object: nel: { "report_to": "nel", "max_age": 31556952 } an origin considered secure by the
browser is required.
...apsed_time": 18, "method": "post", "phase": "dns", "protocol": "http/1.1", "referrer": "https://example.com/previous-page", "sampling_fraction": 1, "server_ip": "", "status_code": 0, "type": "dns.name_not_resolved", "url": "https://example-host.com/" } } the type of the network error may be one of the following pre-defined values from the specification, but
browsers can add and send their own error types: dns.unreachable the user's dns server is unreachable dns.name_not_resolved the user's dns server responded but was unable to resolve an ip address for the requested uri.
CSS Houdini
houdini is a set of low-level apis that exposes parts of the css engine, giving developers the power to extend css by hooking into the styling and layout process of a
browser’s rendering engine.
... houdini is a group of apis that give developers direct access to the css object model (cssom), enabling developers to write code the
browser can parse as css, thereby creating new css features without waiting for them to be implemented natively in
browsers.
...
browsers parse the cssom — including layout, paint, and composite processes — before applying any style updates found in scripts.
Memory Management - JavaScript
if the dom element holds a large amount of data (illustrated in the above example with the "lotsofdata" property), the memory consumed by this data will never be released and can lead to memory related issues such as the
browser becoming increasingly slower.
... as of 2012, all modern
browsers ship a mark-and-sweep garbage-collector.
... node.js node.js offers additional options and tools for configuring and debugging memory issues that may not be available for javascript executed within a
browser environment.
Date - JavaScript
note: parsing of strings with date.parse is strongly discouraged due to
browser differences and inconsistencies.
... examples several ways to create a date object the following examples show several ways to create javascript dates: note: parsing of date strings with the date constructor (and date.parse, they are equivalent) is strongly discouraged due to
browser differences and inconsistencies.
... end.gettime() - start.gettime() // elapsed time in milliseconds // to test a function and get back its return function printelapsedtime(ftest) { let nstarttime = date.now(), vreturn = ftest(), nendtime = date.now() console.log(`elapsed time: ${ string(nendtime - nstarttime) } milliseconds`) return vreturn } let yourfunctionreturn = printelapsedtime(yourfunction) note: in
browsers that support the web performance api's high-resolution time feature, performance.now() can provide more reliable and precise measurements of elapsed time than date.now().
String.prototype.localeCompare() - JavaScript
negative and positive integer results vary between
browsers (as well as between
browser versions) because the w3c specification only mandates negative and positive values.
... some
browsers may return -2 or 2, or even some other negative or positive value.
... let items = ['réservé', 'premier', 'cliché', 'communiqué', 'café', 'adieu']; items.sort( (a, b) => a.localecompare(b, 'fr', {ignorepunctuation: true})); // ['adieu', 'café', 'cliché', 'communiqué', 'premier', 'réservé'] check
browser support for extended arguments the locales and options arguments are not supported in all
browsers yet.
WebAssembly.Module() constructor - JavaScript
a webassembly.module() constructor creates a new module object containing stateless webassembly code that has already been compiled by the
browser and can be efficiently shared with workers, and instantiated multiple times.
...
browser compatibility the compatibility table on this page is generated from structured data.
... if you'd like to contribute to the data, please check out https://github.com/mdn/
browser-compat-data and send us a pull request.
WebAssembly.Module - JavaScript
a webassembly.module object contains stateless webassembly code that has already been compiled by the
browser — this can be efficiently shared with workers, and instantiated multiple times.
...
browser compatibility the compatibility table on this page is generated from structured data.
... if you'd like to contribute to the data, please check out https://github.com/mdn/
browser-compat-data and send us a pull request.
WebAssembly - JavaScript
webassembly.module() contains stateless webassembly code that has already been compiled by the
browser and can be efficiently shared with workers, and instantiated multiple times.
...
browser compatibility the compatibility table on this page is generated from structured data.
... if you'd like to contribute to the data, please check out https://github.com/mdn/
browser-compat-data and send us a pull request.
Lexical grammar - JavaScript
although bom before hashbang comment will work in a
browser it is not advised to use bom in a script with hasbang.
...because this syntax is new in ecmascript 2015, see the
browser compatibility table, below.
...because this syntax is new in ecmascript 2015, see the
browser compatibility table, below.
delete operator - JavaScript
console.log(delete func); // false cross-
browser notes although ecmascript makes iteration order of objects implementation-dependent, it may appear that all major
browsers support an iteration order based on the earliest added property coming first (at least for properties not on the prototype).
... however, in the case of internet explorer, when one uses delete on a property, some confusing behavior results, preventing other
browsers from using simple objects like object literals as ordered associative arrays.
... if you want to use an ordered associative array in a cross-
browser environment, use a map object if available, or simulate this structure with two separate arrays (one for the keys and the other for the values), or build an array of single-property objects, etc.
typeof - JavaScript
the only known
browser to have actually taken advantage of this is old internet explorer (see below).
...let idata = 99; typeof idata + ' wisen'; // 'number wisen' typeof (idata + ' wisen'); // 'string' regular expressions callable regular expressions were a non-standard addition in some
browsers.
... typeof undeclaredvariable === 'undefined'; typeof newletvariable; // referenceerror typeof newconstvariable; // referenceerror typeof newclass; // referenceerror let newletvariable; const newconstvariable = 'hello'; class newclass{}; exceptions all current
browsers expose a non-standard host object document.all with type undefined.
Transitioning to strict mode - JavaScript
ecmascript 5 introduced strict mode which is now implemented in all major
browsers (including ie10).
... while making web
browsers interpret code as strict is easy (just add 'use strict'; at the top of your source code), transitioning an existing code base to strict mode requires a bit more work.
... strictness-neutral code a potential "downside" of moving strict code to strict mode is that the semantics may be different in legacy
browsers which do not implement strict mode.
JavaScript
while it is most well-known as the scripting language for web pages, many non-
browser environments also use it, such as node.js, apache couchdb and adobe acrobat.
...as of 2012, all modern
browsers fully support ecmascript 5.1.
... older
browsers support at least ecmascript 3.
Handling media support issues in web content - Web media technologies
there is a drawback, however: because there are so many to choose from, with so many different kinds of licenses and design principles involved, each web
browser developer is left to its own devices when deciding which media file types and codecs to support.
... this places a small, but reasonably easily overcome, burden on the web developer: to properly handle the situation when the user's
browser can't handle a particular type of media.
... <img src="/images/stafff-photo-huge-progressive.jpg" alt="staff photo, taken in january of 1972"> when using a progressive image, the data is stored in such a way that the
browser is able to render a low-quality representation of the image as soon as possible, then update the image as it loads—or after it's finished loading—to present it in full quality.
Using images in HTML - Web media technologies
the
browser considers each child <source> element and chooses the best match among them.
... 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.
... mapping the width and height attributes of media container elements to their aspect-ratio this changes how
browsers load images so their aspect ratios are calculated by the
browser early on and can later be used to correct the display size of an image before it's loaded.
Web media technologies
this includes recommendations for what formats to use for what kinds of content, best practices including how to provide fallbacks and how to prioritize media types, and also includes general
browser support information for each media container and codec.
...to give users control over this, many
browsers now provide forms of autoplay blocking.
... this article is a guide to autoplay, with tips on when and how to use it and how to work with
browsers to handle autoplay blocking gracefully.
Recommended Web Performance Timings: How long is too long? - Web Performance
a second should be considered a rule in the maximum amount of time to indicate to a user that the request for new content was made and will load, such as the
browser displaying the page title and the background color of the page displaying.
...as noted in the description of the critical rendering path, when received,
browsers immediately start processing the html, rendering the content as it is received rather than waiting for additional assets to load.
...there are different suggested times for initially loading the page versus loading additional assets, responding to user interaction, and ensuring smooth animations: idling goal
browsers are single threaded (though background threads are supported for web workers).
Performance Monitoring: RUM vs synthetic monitoring - Web Performance
it is done in a controlled environment where variable like geography, network, device,
browser, and cached status are predetermined.
...in real user monitoring, the
browsers of real users report back performance metrics experienced.
... unlike synthetic monitoring, rum captures the performance of actual users regardless of device,
browser, network or geographic location.
Understanding latency - Web Performance
latency can be measured one way, for example, the amount of time it takes to send a request for resources, or the length of the entire round-trip from the
browser’s request for a resource to the moment when the requested resource arrives at the
browser.
...different
browser developer tools have different preset options, the characteristics emulated include download speed, upload speed, and minimum latency, or the minimum amount of type it takes to send a packet of data.
...if all connections are in use, the
browser can't download more resources until a connection is released, meaning those requests and resources are blocked.
cursor - SVG: Scalable Vector Graphics
this attribute behaves exactly like the css cursor property except that if the
browser supports the <cursor> element, you should be able to use it with the <funciri> notation.
... elements the following elements can use the cursor attribute container elements » graphics elements »
browser compatibility the compatibility table on this page is generated from structured data.
... if you'd like to contribute to the data, please check out https://github.com/mdn/
browser-compat-data and send us a pull request.
fill-opacity - SVG: Scalable Vector Graphics
x="250" cy="50" r="40" fill-opacity="50%" /> <!-- fill opacity as a css property --> <circle cx="350" cy="50" r="40" style="fill-opacity: .25;" /> </svg> usage notes value [0-1] | <percentage> default value 1 animatable yes note: svg2 introduces percentage values for fill-opacity, however, it is not widely supported yet (see
browser compatibility below) as a consequence, it is best practices to set opacity with a value in the range [0-1].
...
browser compatibility the compatibility table on this page is generated from structured data.
... if you'd like to contribute to the data, please check out https://github.com/mdn/
browser-compat-data and send us a pull request.
rx - SVG: Scalable Vector Graphics
the way the value of the rx attribute is interpreted depend on both the ry attribute and the width of the rectangle: if a properly specified value is provided for rx but not for ry (or the opposite), then the
browser will consider the missing value equal to the defined one.
... if neither rx nor ry has a properly specified value, then the
browser will draw a rectangle with square corners.
... if rx is greater than half of the width of the rectangle, then the
browser will consider the value for rx as half of the width of the rectangle.
ry - SVG: Scalable Vector Graphics
the way the value of the ry attribute is interpreted depend on both the rx attribute and the width of the rectangle: if a properly specified value is provided for ry but not for rx (or the opposite), then the
browser will consider the missing value equal to the defined one.
... if neither ry nor rx has a properly specified value, then the
browser will draw a rectangle with square corners.
... if ry is greater than half of the width of the rectangle, then the
browser will consider the value for ry as half of the width of the rectangle.
stroke-opacity - SVG: Scalable Vector Graphics
en" stroke-opacity="50%" /> <!-- stroke opacity as a css property --> <circle cx="35" cy="5" r="4" stroke="green" style="stroke-opacity: .3;" /> </svg> usage notes value [0-1] | <percentage> default value 1 animatable yes note: svg2 introduces percentage values for stroke-opacity, however, it is not widely supported yet (see
browser compatibility below) as a consequence, it is best practices to set opacity with a value in the range [0-1].
...
browser compatibility the compatibility table on this page is generated from structured data.
... if you'd like to contribute to the data, please check out https://github.com/mdn/
browser-compat-data and send us a pull request.
<a> - SVG: Scalable Vector Graphics
attributes download instructs
browsers to download a url instead of navigating to it, so the user will be prompted to save it as a local file.
... value type: <string> ; default value: none; animatable: yes ping a space-separated list of urls to which, when the hyperlink is followed, post requests with the body ping will be sent by the
browser (in the background).
...may be required for backwards compatibility for older
browsers.
Getting started - SVG: Scalable Vector Graphics
svg files on the web can be displayed directly in the
browser or embedded in html files via several methods: if the html is xhtml and is delivered as type application/xhtml+xml, the svg can be directly embedded in the xml source.
... if the html is html5, and the
browser is a conforming html5
browser, the svg can also be directly embedded.
...with this method, replacement technologies can be implemented for
browsers which normally can't process svg.
Introduction - SVG: Scalable Vector Graphics
svg is supported by all major
browsers.
... svg is supported in all modern
browsers and even a couple versions back in some cases.
... a fairly complete
browser support table can be found on can i use.
SVG In HTML Introduction - SVG: Scalable Vector Graphics
(another style rule makes an error message appear.) this approach has the following points in its favor: we have taken a regular html form that could have been part of an existing web site, and added an attractive, interactive background the approach is backwards compatible to
browsers that do not support svg; simply, no background appears in them it's very simple and performs very well the picture dynamically sizes itself to the required size in an intelligent way we can have declarative style rules applying to both html and svg the same script manipulates both html and svg the document is entirely standards-based to add a linked image with dom methods to an embedded ...
...(for inline svg to work in both firefox and internet explorer it is necessary to serve documents with a different content-type to each
browser.
... for this reason, if you're behind a proxy server that caches the page, the example wont work in the second
browser you load it in because it will receive the wrong content-type.) ...
Certificate Transparency - Web security
browser vendors and root store maintainers are also empowered to make more informed decisions regarding problematic cas that they may decide to distrust.
...
browser requirements google chrome requires ct log inclusion for all certificates issues with a notbefore date of after 30 april 2018.
... the expect-ct header can be used to request that a
browser always enforces the requirement for certificate transparency (e.g.
Using shadow DOM - Web Components
note that the shadow dom is not a new thing by any means —
browsers have used it for a long time to encapsulate the inner structure of an element.
... think for example of a <video> element, with the default
browser controls exposed.
... many modern
browsers implement an optimization for <style> tags either cloned from a common node or that have identical text, to allow them to share a single backing stylesheet.
Using templates and slots - Web Components
this was possible before, but it is made a lot easier by the html <template> element (which is well-supported in modern
browsers).
... so for example: <template id="my-paragraph"> <style> p { color: white; background-color: #666; padding: 5px; } </style> <p>my paragraph</p> </template> now we can use it by just adding it to our html document: <my-paragraph></my-paragraph> note: templates are well-supported in
browsers; the shadow dom api is supported by default in firefox (version 63 onwards), chrome, opera, safari, and edge (starting with version 79).
... so, if we want to add a slot into our trivial example, we could update our template's paragraph element like this: <p><slot name="my-text">my default text</slot></p> if the slot's content isn't defined when the element is included in the markup, or if the
browser doesn't support slots, <my-paragraph> just contains the fallback content "my default text".
SDK and XUL Comparison - Archive of obsolete content
security if they're not carefully designed, firefox add-ons can open the
browser to attack by malicious web pages.
... advantages of xul-based add-ons user interface flexibility xul overlays offer a great deal of options for building a ui and integrating it into the
browser.
Working with Events - Archive of obsolete content
objects emit events on state changes that might be of interest to add-on code, such as
browser windows opening, pages loading, network requests completing, and mouse clicks.
...many event emitters may emit more than one type of event: for example, a
browser window might emit both open and close events.
panel - Archive of obsolete content
so you can rewrite the above code like this: var mypanel = require("sdk/panel").panel({ contenturl: "./myfile.html" }); mypanel.show(); panel positioning by default the panel appears in the center of the currently active
browser window.
... panel limitations although panels can host html documents, they are not implemented as
browser tabs, so many things that work in normal web pages do not work inside panels: prior to firefox 33, you don't get a context menu.
High-Level APIs - Archive of obsolete content
modules listed on this page implement high-level apis for building add-ons: creating user interfaces, interacting with the web, and interacting with the
browser.
... windows enumerate and examine open
browser windows, open new windows, and listen for window events.
console - Archive of obsolete content
if the add-on has been installed in firefox, then the messages appear in the
browser console.
... if you're developing your add-on using the extension auto-installer, then the add-on is installed in firefox, meaning that messages will appear in the
browser console.
Adding a Button to the Toolbar - Archive of obsolete content
the button is added to the toolbar at the top of the
browser window: you can't set the initial location for the button, but the user can move it using the
browser's customization feature.
...if you specify a collection of icons in different sizes the
browser will automatically choose the best fit for the screen resolution and the place in the
browser ui that hosts the button.
Developing for Firefox Mobile - Archive of obsolete content
info: starting info: starting zerdatime 1329258528988 -
browser chrome startup finished.
...the easiest way is probably to copy the signed xpi somewhere on the device: adb push my-addon.xpi /mnt/sdcard/ then open firefox mobile and type this into the address bar: file:///mnt/sdcard/my-addon.xpi the
browser should open the xpi and ask if you want to install it.
Bootstrapped extensions - Archive of obsolete content
this is done using a special script file that's included in the extension that contains functions the
browser calls to command the extension to install, uninstall, start up, and shut down.
... bootstrap entry points the bootstrap.js script should contain several specific functions, which are called by the
browser to manage the extension.
Alerts and Notifications - Archive of obsolete content
var message = 'another pop-up blocked'; var box = g
browser.getnotificationbox(); var notification = box.getnotificationwithvalue('popup-blocked'); if (notification) { notification.label = message; } else { var buttons = [{ label: 'button', accesskey: 'b', popup: 'blockedpopupoptions', callback: null }]; let priority = box.priority_warning_medium; box.appendnotification(message, 'popup-blocked', ...
... 'chrome://
browser/skin/info.png', priority, buttons); } ...
Autocomplete - Archive of obsolete content
first, declare a panel with the "autocomplete" type, like so: <panel id="popup_autocomplete" type="autocomplete" noautofocus="true" /> now set the autocompletepopup attribute of your <
browser> element to the id of the panel you just declared: <
browser id="my_
browser" ...
... autocompletepopup="popup_autocomplete" /> finally, make sure that the value of the
browser.formfill.enable pref is set to true.
Bookmarks - Archive of obsolete content
firefox 2 and earlier creating a new bookmark var win = my
browser.contentwindow; // get the bookmarks service const bmsvc = components.classes["@mozilla.org/
browser/bookmarks-service;1"] .getservice(components.interfaces.nsibookmarksservice); // create the bookmark bmsvc.createbookmarkincontainer(win.document.title, // bookmark name win.location.href.tostring(), // uri of the bookmark null, // shortcut win.document.title, // description win.document.characterset, // charset null, // postdata bookmarksservice.getbookmarkstoolbarfolder(), // bookmark folder ...
... initiating the bookmarks service as is the case with nearly all interfaces, before you can use the bookmarks service, you need to get access to it: var bmsvc = components.classes["@mozilla.org/
browser/nav-bookmarks-service;1"] .getservice(components.interfaces.nsinavbookmarksservice); creating a bookmark folder creating a new bookmark folder is done using the nsinavbookmarksservice.createfolder() method.
Examples and demos from articles - Archive of obsolete content
for a full compatibility code, see also our cross
browser possible solution for image preview.
...it guides you through the basic features of the language with practical examples that you can try for yourself on your own computer and illustrates the standard features of css that work in modern
browsers.
JavaScript Debugger Service - Archive of obsolete content
although it may still work in some
browsers, its use is discouraged since it could be removed at any time.
... in firefox versions prior to gecko 33 (firefox 33 / thunderbird 33 / seamonkey 2.30), the javascript debugger service (or simply jsd) used to be an xpcom component that allows the tracking of javascript while it was being executed in the
browser.
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.
... posting data to the current tab there is a convenience method in global scope (in firefox, chrome://
browser/content/
browser.js): loaduri(auri, areferrer, apostdata, aallowthirdpartyfixup); posting data to a new window window.opendialog('chrome://
browser/content', '_blank', 'all,dialog=no', auri, aflags, areferrer, apostdata); ...
Preferences - Archive of obsolete content
using preference observers changes a user makes to your extension's preferences, such as through an options dialog, may not take effect until the
browser is restarted (e.g., if you have initialized local variables when the
browser loads).
...this technique will work no matter how or where the preferences are changed: in another
browser window, directly in the about:config interface, or even by another extension.
Rosetta - Archive of obsolete content
hence, if you are going to use another scripting language you might expect that most of the
browsers will not recognize it.
...nevertheless, the increasing computational power of modern
browsers together with the introduction of typed arrays in ecmascript allow us, in theory, to build full virtual machines in pure ecmascript.
Scrollbar - Archive of obsolete content
scrollbars inside
browser elements will be styled to.
... example xul window: <?xml version="1.0"?> <?xml-stylesheet href="chrome://global/skin/" type="text/css"?> <window id="samplewindow" width="320" height="240" xmlns="http://www.mozilla.org/keymaster/gat...re.is.only.xul"> <hbox flex="1"> <
browser type="content" src="http://mozilla.org" flex="1"/> <scrollbar orient="vertical"/> </hbox> </window> ...
Creating custom Firefox extensions with the Mozilla build system - Archive of obsolete content
if you are using firefox as your regular
browser (and if you're not, why not!?), you might be annoyed by the fact that you have to close regular firefox before running your custom-built version.
...for our simple extension example, this file might look something like this: myextension.jar: % content myextension %content/ % locale myextension en-us %locale/ % skin myextension classic/1.0 %skin/classic/ % overlay chrome://
browser/content/
browser.xul chrome://myextension/content/myextensionoverlay.xul content/myextensionoverlay.js (content/myextensionoverlay.js) content/myextensionoverlay.xul (content/myextensionoverlay.xul) locale/myextension.dtd (locale/myextension.dtd) locale/myextension.properties (locale/myextension.properties) skin/classic/myextension.css (skin/classic/myextension...
How to convert an overlay extension to restartless - Archive of obsolete content
need clearing here services.obs.notifyobservers(null, "chrome-flush-caches", null); } function install(data,reason) { } function uninstall(data,reason) { } function loadintowindow(window) { /* call/move your ui construction function here */ } function unloadfromwindow(window) { /* call/move your ui tear down function here */ } function foreachopenwindow(todo) // apply a function to all open
browser windows { var windows = services.wm.getenumerator("navigator:
browser"); while (windows.hasmoreelements()) todo(windows.getnext().queryinterface(components.interfaces.nsidomwindow)); } var windowlistener = { onopenwindow: function(xulwindow) { var window = xulwindow.queryinterface(components.interfaces.nsiinterfacerequestor) .getinterfa...
...ce(components.interfaces.nsidomwindow); function onwindowload() { window.removeeventlistener("load",onwindowload); if (window.document.documentelement.getattribute("windowtype") == "navigator:
browser") loadintowindow(window); } window.addeventlistener("load",onwindowload); }, onclosewindow: function(xulwindow) { }, onwindowtitlechange: function(xulwindow, newtitle) { } }; as mentioned above, components.utils.unload() will not work properly if the jsm file it is unloading is in a jar.
Jetpack Processes - Archive of obsolete content
handles messages that communicate between the
browser and jetpack process may contain only serializable (json) data and handles.
...either the
browser or the jetpack implementation may create one.
Getting Started with Firefox Extensions - Archive of obsolete content
firefox provides a very rich and flexible architecture that allows extension developers to add advanced features, customize the user's experience, and completely replace and remove parts of the
browser.
... you should see the following directory structure: xulschoolhello1 chrome.manifest install.rdf content
browseroverlay.xul
browseroverlay.js skin
browseroverlay.css locale en-us
browseroverlay.dtd
browseroverlay.properties that's lots of files for something so simple!
Handling Preferences - Archive of obsolete content
this is how we do it: openpreferences : function() { if (null == this._preferenceswindow || this._preferenceswindow.closed) { let instantapply = application.prefs.get("
browser.preferences.instantapply"); let features = "chrome,titlebar,toolbar,centerscreen" + (instantapply.value ?
...they are heavily stylized in the firefox preferences window, so you should include the same css file that is included in it (chrome://
browser/skin/preferences/preferences.css).
Setting Up a Development Environment - Archive of obsolete content
adding: install.rdf (deflated 50%) adding: chrome.manifest (deflated 50%) adding: content/
browseroverlay.js (deflated 42%) adding: content/
browseroverlay.xul (deflated 69%) adding: skin/
browseroverlay.css (stored 0%) adding: locale/
browseroverlay.dtd (deflated 52%) adding: locale/
browseroverlay.properties (stored 0%) creating xpi file.
... to debug extension and
browser code, right-click on the loaded scripts panel and uncheck exclude
browser files.
Supporting search suggestions in search plugins - Archive of obsolete content
when the
browser wants to fetch possible matches for a search term, it then sends an http get request to the url specified by the <url> element.
...these can be any additional information the search engine might want to return to be displayed by the
browser, such as the number of results available for that search.
MozOrientation - Archive of obsolete content
an event that is repeatedly fired on the window as accelerator data is provided to the
browser.
....beta, and evt.alpha // according to dev.w3.org/geo/api/spec-source-orientation } window.addeventlistener('deviceorientation', orientationhandler, false); window.addeventlistener('mozorientation', orientationhandler, false); example window.addeventlistener("mozorientation", dofunc, true); the example below simply displays the raw accelerometer data in the
browser window as the events arrive.
Install.js - Archive of obsolete content
// check if extension is already installed in profile if (file.exists(install.getfolder(profiledir, jarname))) { if (!this.silentinstall) { install.alert('updating existing profile install of ' + this.extfullname + ' to version ' + this.extversion + '.'); } this.profileinstall = true; } else if (!this.silentinstall) { // ask user for install location, profile or
browser dir?
... this.profileinstall = install.confirm('install ' + this.extfullname + ' ' + this.extversion + ' to your profile directory (ok) or your
browser directory (cancel)?'); } // init install var dispname = this.extfullname + ' ' + this.extversion; var regname = '/' + this.extauthor + '/' + this.extshortname; install.initinstall(dispname, regname, this.extversion); // find directory to install into var installpath; if (this.profileinstall) installpath = profiledir; else installpath = install.getfolder('chrome'); // add jar file install.addfile(null, 'chrome/' + jarname, installpath, null); // register chrome var jarpath = install.getfolder(installpath, jarname); var installtype = this.profileinstall ?
No Proxy For configuration - Archive of obsolete content
overview as
browsers rapidly grew in popularity in the mid-90's, many network administrators added proxy servers.
...proxy connections that fail return an error "the proxy server you have configured cannot be found", so configure your
browser to use a non-existent http proxy (hostname: "imaginary", port "80").
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 platforms 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 ${profile_...
...in test scripts, <code>sleep 5 after the above command should ensure the profile is created before the next command in the test script is run how to enable dump in a new profile add user_pref("
browser.dom.window.dump.enabled", true); to profiledir/user.js how to execute test code with chrome privileges using a chrome doc - see sbtests.xul in http://people.mozilla.com/~davel/scripts/ for an example firefox-bin -p sbtestprofile -chrome chrome://sbtests/content/ above code calls the quit function in quit.js to exit after test is finished how to detect conte...
Bookmark Keywords - Archive of obsolete content
to file this bookmark open the "bookmarks" menu in the
browser and select "add bookmark," or by of use the keyboard equivalent (e.g., <tt>cmd-d</tt> on macintosh).
... with that done, all you have to do in the future is type <tt>bz</tt> followed by a space and the bug's number into mozilla's address bar, and the
browser will jump right to the bug with that number.
Conclusion - Archive of obsolete content
to test it, try installing the extension on a fresh copy of mozilla by loading the file in your mozilla
browser (this works whether you load it from the web or from your local hard drive via a file:/// url).
...for example, you need to change chrome://navigator/content/navigator.xul to chrome://
browser/content/
browser.xul.
Creating a Microsummary - Archive of obsolete content
sers to be able to install it from http://people.mozilla.com/~myk/micro...ial/index.html, we might add the following code to the index.html page: <button onclick="window.sidebar.addmicrosummarygenerator('http://people.mozilla.com/~myk/microsummaries/tutorial/sfx-generator.xml')">install the spread firefox home page microsummary!</button> clicking that button will generate a javascript error on
browsers that don't support microsummaries, however, so to improve the experience for those users, we should check to see if the user is using a microsummaries-enabled
browser and display an explanatory message if not.
... we might do so via the following code: <script> const warning = "sorry, you need a microsummary-enabled
browser like firefox 2.0 to install and use microsummary generators."; function addgenerator(url) { if (typeof window.sidebar == "object" && typeof window.sidebar.addmicrosummarygenerator == "function") window.sidebar.addmicrosummarygenerator(url); else alert(warning); } </script> <button onclick="addgenerator('http://people.mozilla.com/~myk/microsummaries/tutorial/sfx-generator.xml')">install the spread firefox home page microsummary!</button> note that due to bug 341283, addmicrosummarygenerator() will not accept a relative url.
Embedding FAQ - Archive of obsolete content
here is the code : import org.eclipse.swt.swt; import org.eclipse.swt.
browser.mozilla
browser; import org.eclipse.swt.
browser.progressevent; import org.eclipse.swt.
browser.progresslistener; import org.eclipse.swt.widgets.display; import org.eclipse.swt.widgets.shell; import org.mozilla.xpcom.nsidomdocument; public class test { public static void main(string args[]) { display display = new display(); shell shell = new shell(display); ...
... final mozilla
browser browser = new mozilla
browser(shell,wt.border);
browser.seturl("http://www.google.com");
browser.addprogresslistener(new progresslistener() { public void changed(progressevent event) { } public void completed(progressevent event) { nsidomdocument doc =
browser.getdocument(); system.out.println(doc); } }); while (!shell.isdisposed()) { if (!display.readanddispatch()) { display.sleep(); } } } how to map a javascript function to a c++ functio...
Error Console - Archive of obsolete content
use the web console instead, for web content, or the
browser console for chrome content.
... to bring up error console from within a
browser or mail window, use the function tojavascriptconsole().
Repackaging Firefox - Archive of obsolete content
if you find a preference you think is generally useful to most partner repacks, please add it below, using the same style: localizable preferences
browser.startup.homepage=<string>
browser.startup.homepage_reset=<string> url for the default homepage, and what the homepage gets reset to when the user hits "restore to default" in the preferences.
...
browser.search.defaultenginename=<string> name of the default search engine.
Code snippets - Archive of obsolete content
for each (let client in tabsengine.getallclients()) { for each (let tab in client.tabs) { let url = tab.urlhistory[0]; // load the tab via the tabbed
browser api.
... mainwindow.g
browser.addtab(url); } } partially corrupt a server components.utils.import("resource://services-sync/main.js"); components.utils.import("resource://services-sync/resource.js"); function deletepath(path) { let resource = new resource(weave.service.storageurl + path); resource.setheader("x-confirm-delete", "1"); return resource.delete(); } // delete meta/global: deletepath("meta/global"); // delete keys: deletepath("crypto/keys"); // delete server: deletepath(""); corrupt a single engine on the server let engine = "bookmarks"; components.utils.import("resource://services-sync/main.js"); components.utils.import("resource://services-sync/resource.js"); components.utils.import("resource://services-sync/util.js"); let r = new resource(weave.service.storageurl + "meta/glo...
CRMF Request object - Archive of obsolete content
though some
browsers may still support it, it is in the process of being dropped.
... warning: the features mentioned in this article are deleted proprietary mozilla extensions, and are not supported in any other
browser.
generateCRMFRequest() - Archive of obsolete content
though some
browsers may still support it, it is in the process of being dropped.
... warning: the features mentioned in this article are deleted proprietary mozilla extensions, and are not supported in any other
browser.
importUserCertificates - Archive of obsolete content
though some
browsers may still support it, it is in the process of being dropped.
... warning: the features mentioned in this article are deleted proprietary mozilla extensions, and are not supported in any other
browser.
popChallengeResponse - Archive of obsolete content
though some
browsers may still support it, it is in the process of being dropped.
... warning: the features mentioned in this article are deleted proprietary mozilla extensions, and are not supported in any other
browser.
slideBar - Archive of obsolete content
about status: in development instantiation: jetpack.future.import('slidebar') last update: v0.6 summary: slidebar is a reinvention of the old sidebar feature of
browsers.
... they allow quick access to a wide range of both temporary and permanent information at the side of your
browser window.
slideBar - Archive of obsolete content
slidebar is a reinvention of the old sidebar features of
browsers.
... they allow quick access to a wide range of both temporary and permanent information at the side of your
browser window.
UI - Archive of obsolete content
menu accessing, modifying, and creating menus in the
browser slidebar ui mechanism for displaying jetpack content in a slide-out animated vertical column toolbar including entries and access elements into the toolbar panel a movable, expandable, and custom styled content element to display jetpack content tabs adding events and interacting with
browser tabs and their contained documents statusbar low-level functions and basic calls notifications a system for alerting u...
...sers via provided ui mechanisms selection interacting with user-selected content window mitigates and eases interactions between different
browser windows ...
Makefile.mozextension.2 - Archive of obsolete content
real_install: $(cp) chrome/$(project).jar ~/.mozilla/default/32p27fdr.slt/chrome/ #################################### ###### define chrome_manifest content $(project) content/ overlay chrome://
browser/content/
browser.xul chrome://$(project)/content/overlay.xul locale $(project) en-us locale/ skin $(project) classic/1.0 skin/ style chrome://global/content/customizetoolbar.xul chrome://$(project)/skin/overlay.css endef export chrome_manifest chrome.manifest: @echo generating $(project)/chrome.manifest @echo "$$chrome_manifest" > $(project)/chrome.manifest ###### #firefox {ec8030f7-c20a-...
...464f-9b0e-13a3a9e97384} #thunderbird {3550f703-e582-4d05-9a08-453d09bdfdc6} #nvu {136c295a-4a5a-41cf-bf24-5cee526720d5} #mozilla suite {86c18b42-e466-45a9-ae7a-9b95ba6f5640} #seamonkey {92650c4d-4b8e-4d2a-b7eb-24ecf4f6b63a} #sunbird {718e30fb-e89b-41dd-9da7-e25a45638b28} #netscape
browser {3db10fab-e461-4c80-8b97-957ad5f8ea47} ###### define install_rdf <rdf xmlns="http://www.w3.org/1999/02/22-rdf-syntax-ns#" xmlns:em="http://www.mozilla.org/2004/em-rdf#"> <description about="urn:mozilla:install-manifest"> <id>$(project_id)</id> <name>$(project_name)</name> <version>$(project_version)</version> <description>$(project_desc)</description> <creator>$(project_author)</creator> <contributor>here is a place for you who helped me</contributor> <homepageurl>http://$(project).mozdev.org/</homepag...
Microsummary XML grammar reference - Archive of obsolete content
if the <update> element does not include an interval attribute, firefox applies the interval specified by the
browser.microsummary.updateinterval preference.
... notes: regardless of the absolute or conditional update interval specified by this element, firefox will never update microsummaries more frequently than once per minute; because firefox checks for expired microsummaries every 15 seconds, it is possible for a microsummary update to begin up to 15 seconds later than its interval indicates; firefox respects the
browser cache when updating microsummaries, so it will not reload a page to update its microsummary if the cache contains a fresh copy of the page.
New Security Model for Web Services - Archive of obsolete content
more-complex access lists could be created to try to establish, with finer granularity, which domains are to be accessible or permitted from which other domains, but this requires extensive management which at best is quite error-prone for the end user and easily opens holes in a firewall that do not directly hurt the user who reconfigured his
browser to try to access some external service but hurts the owners of other services behind the firewall.
...but the big problem with this is that the typical
browser user really does not either understand or pay the consequences if he inadvertently opens a hole in his company's firewall.
Plug-n-Hack Get Involved - Archive of obsolete content
while this project has been started by the mozilla security team and has been validated with firefox and owasp zap, this is an open project and we welcome involvement from anyone, especially people working on other
browsers and security tools.
... if you would like to add pnh support to a
browser or tool, or even get involved in onward pnh development, then please get in touch and we will give you whatever assistance we can.
Plug-n-Hack Phase2 - Archive of obsolete content
the next phase of plug-n-hack (pnh) is still being planned but is intended to allow
browsers to advertise their capabilities to security tools.
... this will allow the tools to obtain information directly from the
browser, and even use the
browser as an extension of the tool.
BlogPosts - Archive of obsolete content
just browsing: mozilla prism update thanscorner: mozilla prism - webrunner with pazzaz mozilla prism - a revolution in web apps thanscorner: mozilla webrunner 0.7 site specific
browsers webrunner using webrunner webrunner + gears = offline desktop reader webrunner 0.5 webrunner 0.5 - mac support webrunner 0.5 - linux install webrunner, google reader, and google notebook distraction free gtd - 32+ web app files for online todo lists mozilla webrunner: a one-window, tabless
browser with no url bar webrunner becomes prism - a mozilla labs project mozilla labs: prism alex faaborg: prism mozilla prism: bringing web apps to the desktop everyone should use site specific
browsers mozilla prism portable (spanish) prism, l'avenir des applications web selon mozilla (french) mozilla prism : bundle cu...
...stom google reader + talk (french) just browsing: site-specific
browsers ...
Configuration - Archive of obsolete content
the file must be located in the web app home directory: splashscreen.html include uris that should be opened in the web app, rather than in the default
browser.
...separate multiple uris with commas: *google.com, *yahoo.com exclude urls that should be opened in the default
browser, rather than in the web app.
New Skin Notes - Archive of obsolete content
when the skin is updated on test/docs, editform textarea should be resizeable in all
browsers.
...--dria the menu column seems larger than before in the current test theme, so as to cause some reference pages to look ugly when
browser set in 800x* resolution, using the default firefox 1.0.6 fonts settings on xfree86.
Safely loading URIs - Archive of obsolete content
for example, loading some file: uris can hang the
browser or even crash the operating system in some cases.
...by passing the string to something that loads it in a <
browser> or <iframe>), you must call checkloaduristr to be secure.
Table Layout Strategy - Archive of obsolete content
poor mans choice is leave the first cell auto and specify 100%on the second one (this works cross-
browser) <tbody></tbody>foobar <table width="200px" border> <tbody> <tr><td>foo</td><td width="100%">bar</td></tr> </tbody> </table> the conflict free solution, the column should have the minimum width.
... so we specify it (this breaks in some other
browsers) <col width="0*"><col><tbody></tbody>foobar <table border width="200px"> <col width="0*"><col> <tbody> <tr><td>foo</td><td>bar</td></tr> </tbody> </table> this shrink wrapping width has usually the suffix 0proportional effective columns <tbody></tbody>foobarbazzap <table width="200px" border> <tbody> <tr><td>foo</td><td colspan="2" width="120px">bar</td></tr> <tr><td>baz</td><td>zap</td></tr> </tbody> </table> the colspan here is bogus, so the third column should not get any width.
Venkman - Archive of obsolete content
it aims to provide a powerful javascript debugging environment for mozilla based
browsers namely firefox, netscape 7.x/9.x and seamonkey.
... note that it is not included in the gecko-based
browsers such as k-meleon, galeon and netscape 8.x.
XBL - Archive of obsolete content
xbl 2.0 (w3c candidate recommendation) was developed to address problems found in xbl 1.0 and to allow for implementations in a broader range of web
browsers.
... custom xul elements with xbl from the xul school tutorial for add-on developers xbl chapter of "rapid application development with mozilla" xbl 2.0 primer (draft) xbl 2.0 cross-
browser implementation in javascript more xbl resources...
XML in Mozilla - Archive of obsolete content
testing and qa we have a lot of testcases linked to from the
browser standards compliance qa page.
...we'd really like to get tests that can be run automatically (this would require knowledge of web development; document.load() and/or xml extras might be needed), but probably most of the bugs we get have just been found by normal people trying to do something that works in some other
browser and does not work in mozilla.
Mac stub installer - Archive of obsolete content
once you have the mac installer built and ready to debug you may want to debug the xpinstall engine in the context of the installer rather than in the context of the
browser.
...note that there are two macro strings in the .jsts: $version$ which is replaced at packages time with the
browser version.
execute - Archive of obsolete content
file.execute() executes an installed file (such as a
browser) after it has been installed, and is typically placed at the end of an install script and outside of the main install block.
...if you do not set this flag and launch an executable that is not a part of the installation, you will raise an error when you restart the
browser.
SVG And Canvas In Mozilla - Archive of obsolete content
presentation view online download summary today's web
browsers offer somewhat limited graphics capabilities to web developers.
...to realize this potential in web applications,
browsers must expose rich new graphics apis to web content.
XTech 2005 Presentations - Archive of obsolete content
rich web: svg and canvas in mozilla - robert o'callahan today's web
browsers offer somewhat limited graphics capabilities to web developers.
...to realize this potential in web applications,
browsers must expose rich new graphics apis to web content.
buttons - Archive of obsolete content
warning: if the accept and cancel buttons are actually shown is system dependent and is mainly controlled by the value of the boolean preference
browser.preferences.instantapply.
... the default setting of
browser.preferences.instantapply currently is true on linux and mac os and false on windows (which however might or might not change soon, see bug 738797 and bug 1037225).
homepage - Archive of obsolete content
« xul reference home homepage type: url this attribute allows you to set a homepage for the
browser element.
... it does not have any correlation with the user's
browser homepage; instead it is a convenient property to hold a home page.
reserved - Archive of obsolete content
example here, the command to open a new
browser window is reserved: <command id="cmd_newnavigator" oncommand="open
browserwindow()" reserved="true"/> if the keyboard shortcut for that is accel-t, then this code will not work as expected, as compared to when it is run from web content: document.addeventlistener("keydown", handlekey, true); function handlekey(event) { // listen for the "new tab" shortcut if (event.metakey && (event.key ==...
... "t")) { // log a message console.log("intercepted accel-t"); // prevent the default
browser action event.preventdefault(); event.stoppropagation(); } } currently, this event handler as coded above runs and logs the message, but the default behavior persists.
windowtype - Archive of obsolete content
this might be used, for example, to distinguish between a
browser window and an editor window.
... values for window type as found on mxr: http://mxr.mozilla.org/mozilla-release/search?string=windowtype navigator:
browser - looks like if window has g
browser it has this window type devtools:scratchpad - scratchpad windows navigator:view-source - the view source windows ...
List of commands - Archive of obsolete content
ctcharprevious cmd_selectcharnext cmd_beginline cmd_endline cmd_selectbeginline cmd_selectendline cmd_wordprevious cmd_wordnext cmd_selectwordprevious cmd_selectwordnext cmd_scrollpageup cmd_scrollpagedown cmd_scrolllineup cmd_scrolllinedown cmd_movepageup cmd_movepagedown cmd_selectpageup cmd_selectpagedown other commands the following list other commands (prefixed by cmd_ or
browser:) which have not been categorized here yet (though they are in the alphabetical list below): http://lxr.mozilla.org/seamonkey/sou...baroverlay.xul http://lxr.mozilla.org/seamonkey/sou...t/navigator.js http://lxr.mozilla.org/seamonkey/sou...toroverlay.xul http://lxr.mozilla.org/seamonkey/sou...onaltoolbar.js http://lxr.mozilla.org/seamonkey/sou...rceoverlay.xul http://lxr.mozilla.org/seamo...
.../sou...oomoverlay.xul http://lxr.mozilla.org/seamonkey/sou...toroverlay.xul http://lxr.mozilla.org/seamonkey/sou...ark.properties http://lxr.mozilla.org/seamonkey/sou...kmarks-temp.js http://lxr.mozilla.org/seamonkey/sou.../bookmarks.xml http://lxr.mozilla.org/seamonkey/sou...rksoverlay.xul http://lxr.mozilla.org/seamonkey/sou...okmarkstree.js list of commands (listed alphabetically)
browser:addbookmark
browser:addbookmarkas
browser:addgroupmarkas
browser:back
browser:editpage
browser:find
browser:findagain
browser:findprev
browser:forward
browser:home
browser:managebookmark
browser:open
browser:openfile
browser:print
browser:printpreview
browser:savepage
browser:searchinternet
browser:sendpage
browser:uploadfile cmd_bm_copy cmd_bm_cut cmd_bm_delete cmd_bm_expan...
addTabsProgressListener - Archive of obsolete content
« xul reference home addtabsprogresslistener( listener ) return type: no return value add a progress listener to the
browser which will monitor loaded documents in all tabs in the tabbed
browser.
... the progress listener should be based on the nsiwebprogresslistener interface with an additional "
browser" argument as the first argument of every method, which is the
browser (not <tab
browser> = g
browser) where the event occurred.
removeTab - Archive of obsolete content
if only one tab is displayed, this method does nothing (unless the preference
browser.tabs.closewindowwithlasttab is true, in which case the window containing the tab is closed).
... if
browser.tabs.autohide is true, the row of tabs will collapse if only one tab remains.
Extensions - Archive of obsolete content
modifying the context menu an extension may wish to modify the context menu associated with the
browser area.
... in firefox, the
browser area that displays web pages has only one context menu.
Focus and Selection - Archive of obsolete content
suppose you wanted to move the focus from where it currently is, to the next place the
browser thinks it should be.
...you can do this anywhere you have a xul
browser document by simply: document.commanddispatcher.advancefocus(); in fact, the commanddispatcher simply implements the nsidomxulcommanddispatcher interface.
XPCOM Examples - Archive of obsolete content
try this example by opening a number of
browser windows and you'll see that they are all listed on the menu.
... cookies next, we will get a list of cookies that have been saved in the
browser.
dialog - Archive of obsolete content
warning: if the accept and cancel buttons are actually shown is system dependent and is mainly controlled by the value of the boolean preference
browser.preferences.instantapply.
...the default setting of
browser.preferences.instantapply currently is true on linux and mac os and false on windows (which however might or might not change soon, see bug 738797 and bug 1037225).
editor - Archive of obsolete content
attributes editortype, src, type properties accessibletype, commandmanager, contentdocument, contentwindow, docshell, editingsession, editortype, web
browserfind, webnavigation methods geteditor, gethtmleditor, makeeditable examples this example shows how to made the editor editable by setting the designmode 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'; ...
... web
browserfind type: nsiweb
browserfind this read-only property contains an nsiweb
browserfind object which can be used to search for text in the document.
elements - Archive of obsolete content
a action arrowscrollbox b bbox binding bindings box broadcaster broadcasterset button
browser c checkbox caption colorpicker column columns commandset command conditions content d deck description dialog dialogheader e editor grid grippy groupbox h hbox i iframe image k key keyset l label listbox listcell listcol listcols listhead listheader listitem m member menu menubar menuitem menulist menupopup menuseparator o observes overlay p page popup popupset preference preferences prefpane prefwindow progressmeter r radio radiogroup resizer richlistbox richlistitem resizer row rows rule s script scrollbar scrollbox scrollcorner ...
... separator spacer splitter stack statusbar statusbarpanel stringbundle stringbundleset t tab tab
browser tabbox tabpanel tabpanels tabs template textnode textbox titlebar toolbar toolbarbutton toolbargrippy toolbaritem toolbarpalette toolbarseparator toolbarset toolbarspacer toolbarspring toolbox tooltip tree treecell treechildren treecol treecols treeitem treerow treeseparator triple v vbox w window wizard wizardpage ...
notificationbox - Archive of obsolete content
typically the element will be a
browser, but any element may be used.
... also it is possible to call function with the same name (they are different) of global object g
browser: notifybox = g
browser.getnotificationbox() examples <notificationbox flex="1"> <
browser src="http://www.mozilla.org"/> </notificationbox> there is a more complex code available in the code snippets area.
preference - Archive of obsolete content
for example, the
browser's home page is set with the preference
browser.startup.homepage.
...for example, the
browser's home page is set with the preference
browser.startup.homepage.
toolbarpalette - Archive of obsolete content
you can add your own custom buttons to the firefox
browser by using an overlay that overlays the toolbarpalette with the id
browsertoolbarpalette.
... examples <toolbarpalette id="
browsertoolbarpalette"> <toolbarbutton id="toolbarpalette-button" class="toolbarbutton-class" label="&mylabel;" tooltiptext="&mytiptext;" oncommand="somefunction()"/> </toolbarpalette> attributes inherited from xul element align, allowevents, allownegativeassertions, class, coalesceduplicatearcs, collapsed, container, containment, context, contextmenu, datasources, dir, empty, equalsize, flags, flex, height, hidden, id, insertafter, insertbefore, left, maxheight, maxwidth, menu, minheight, minwidth, mousethrough, observes, ordinal, orient, pack, persist, popup, position, preference-editable, querytype, ref, removeelement, sortdirection, sortresource, sortresource2, statustext, style, templ...
wizard - Archive of obsolete content
this might be used, for example, to distinguish between a
browser window and an editor window.
... values for window type as found on mxr: http://mxr.mozilla.org/mozilla-release/search?string=windowtype navigator:
browser - looks like if window has g
browser it has this window type devtools:scratchpad - scratchpad windows navigator:view-source - the view source windows properties canadvance type: boolean this property is set to true if the user can press the next button to go to the next page.
XUL - Archive of obsolete content
there is a xulrunner application containing the xul periodic table which can be opened with gecko based
browsers.
...ls xul online live editor (copy & paste snippets from here and run them) xul explorer (a lightweight xul ide) xulexplorer (patched version of xul explorer) extension developer's extension (featuring a live xul editor) xulref sidebar firebug dom inspector spket ide, ide for xul/xbl ample sdk, (cross-
browser xul renderer in javascript/html) view all...
Getting started with XULRunner - Archive of obsolete content
*/ 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); xulrunner specific preferences include: toolkit.defaultchromeuri specifies the default window to open when the application is launched.
...the xul application will run instead of the firefox
browser that normally starts.
mozilla.dev.platform FAQ - Archive of obsolete content
q: when using xul elements <
browser/> and <tab
browser/> the javascript popup windows don't work out of the box, what needs to be implement?
... a: have the
browser.chromeurl preference - this should be a xul document containing a <
browser type="content-primary"> element in which the popup window's content should get loaded.
nsIContentPolicy - Archive of obsolete content
63 introduced gecko 1.0 inherits from: nsicontentpolicybase last changed in gecko 42 (firefox 42 / thunderbird 42 / seamonkey 2.39) you can observe content that is being loaded into your
browser by implementing nsicontentpolicy.
... type_document 6 indicates a dom document at the top-level (that is, directly within a
browser tab).
xbDesignMode.js - Archive of obsolete content
* * the original code is netscape cross
browser design mode code.
... * * contributor(s): doron rosenberg <doron@netscape.com> (original author) * * * * ***** end license block ***** */ /* xbdesignmode a javascript wrapper for
browsers that support designmode */ function xbdesignmode(aiframe){ this.meditordocument = null; this.miframeelement = null; // argument is a string, therefore an id if ( (typeof(aiframe) == "string") && (document.getelementbyid(aiframe).tagname.tolowercase()=="iframe") ){ this.miframeelement = document.getelementbyid(aiframe); } else if( (typeof(aiframe)=="object") && (aiframe.tagname.tolowercase() == "...
2006-10-20 - Archive of obsolete content
ie7 rss reader better - say reviewers a discussion revolving around the quality of rss readers in ie7, firefox and other assorted
browsers.
... also a debate about which
browser is "beating" which to a lesser extent further in the discussion.
2006-11-03 - Archive of obsolete content
discussions google adsense plugin for firefox a user post a link to a plugin for displaying "adsense earning" within the status bar of the
browser without logging into google.
... xml in firefox is a major problem a user draws attention to what they think is a bug, but the developers say it's proper
browser behaviour.
2006-11-04 - Archive of obsolete content
discussions adsense plugin for firefox a user post a link to a plugin for displaying "adsense earning" within the status bar of the
browser without logging into google.
... in firefox is a major problem a user draws attention to what they think is a bug, but the developers say it's propwer
browser behaviour.
2006-12-01 - Archive of obsolete content
how do allow an internal web site to have universal
browserwrite?
... a question regarding having an internal website use universal
browserwrite on a local intranet.
2006-11-10 - Archive of obsolete content
summary: mozilla.dev.builds - november 4th to november 10th 2006
browser buttons november 4th: mojr wants to know if firefox has a similar feature that the new ie 6 has built in.
... build problem firefox 2.0 on fc3 november 10th: vin downloaded the latest firefox 2 rc3 and tried to build it on fc3 with the following options: ./configure --enable-application=
browser --prefix=$prefix --enable-extensions=default,spatialnavigation then he tried running "make" and received the following error: /usr/bin/ld: testtarray.o(.text+0x2237): unresolvable relocation against symbol `nstarray_base::semptyhdr' /usr/bin/ld: final link failed: nonrepresentable section on output collect2: ld returned 1 exit status gmake[3]: *** [testtarray] error 1 gmake[3]: leaving direct...
2006-10-20 - Archive of obsolete content
started wed, oct 18 2006 9:38 am - a xulrunner developer, frank, discusses his desire to make xul/
browser based applications.
... he wants to be able to build applications that will run inside the
browser.
2006-11-17 - Archive of obsolete content
summary: mozilla.dev.platform - 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 <tab
browser/> the javascript popup windows don't work out of the box and asks what needs to be implement.
... boaz discuses the evolution of web
browsers towards a more "application mode" whereas a web
browser is loaded for the sole purpose of running a given website.
NPAnyCallbackStruct - Archive of obsolete content
at the time the plug-in is called, the
browser has already opened the file and written postscript for other parts of the page.
... when the plug-in is done, it should leave the file open, as the
browser can continue to write additional postscript data to the file.
NPFullPrint - Archive of obsolete content
mac os: thprint ms windows: printer's device context description the npp_print function passes the plug-in a pointer to an npprint object (previously allocated by the
browser).
...if you want an embedded plug-in to simply render its area of the page, set pluginprinted to false and return immediately; the
browser calls npp_print again with the npembedprint substructure of npprint.
NPN_InvalidateRect - Archive of obsolete content
« gecko plugin api reference «
browser side plug-in api summary invalidates the specified portion of the plugin's drawing area, adding it to the region that needs to be redrawn when the plugin next repaints its contents.
...the
browser redraws invalid areas of the document and any windowless plug-ins at regularly timed intervals.
NPN_InvalidateRegion - Archive of obsolete content
« gecko plugin api reference «
browser side plug-in api summary invalidates the specified drawing region prior to repainting or refreshing a windowless plug-in.
...the
browser redraws invalid areas of the document and windowless plug-ins at regularly timed intervals.
NPN_PostURL - Archive of obsolete content
if you specify _new or _blank, the response data is written to a new
browser window.
... for http urls only, the
browser resolves this method as the http server method post, which transmits data to the server.
NPN_SetValueForURL - Archive of obsolete content
« gecko plugin api reference «
browser side plug-in api summary allows a plugin to change the stored information associated with a url, in particular its cookies.
... description this entry point is designed to allow plugins to affect the cookies sent by the
browser back to the server.
NPP_DestroyStream - Archive of obsolete content
description the
browser calls the npp_destroystream function when a data stream sent to the plug-in is finished, either because it has completed successfully or terminated abnormally.
... after this, the
browser deletes the npstream object.
NPP_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 information.
... variable variable for which the
browser (caller) would like a value.
NPP_SetWindow - Archive of obsolete content
description the
browser calls npp_setwindow after creating the instance to allow drawing to begin.
... for windowed plug-ins on windows and unix, the window parameter contains a handle to a subwindow of the
browser window hierarchy.
NPPrintCallbackStruct - Archive of obsolete content
at the time the plug-in is called, the
browser has already opened the file and written postscript for other parts of the page.
... when the plug-in is done, it should leave the file open, so the
browser can continue to write additional postscript data to the file.
NP_Port - Archive of obsolete content
description on mac os, the window field of an npwindow structure points to an np_port object, which is allocated by the
browser.
...since the port is shared between the plug-in and other plug-ins and the
browser, the plug-in should always do the following: draw only within the area designated by the npwindow.
NPAPI plug-in side API - Archive of obsolete content
this chapter describes methods in the plug-in api that are available from the plug-in object; these allow plug-ins to interact with the
browser.
... the names of all of these methods begin with npp_ to indicate that they are implemented by the plug-in and called by the
browser.
Writing a plugin for Mac OS X - Archive of obsolete content
some symbols must be visible as standard c symbols so the
browser can find them, which means they need to be prefixed by an underscore, and must not have the c++ obfuscation that is generated by the c++ compiler.
... 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 developer tools: [user@foo mymac] nm basicplugin ...
contents.rdf - Archive of obsolete content
<rdf:description about="urn:mozilla:skin:my_theme" chrome:displayname="my theme" chrome:accesskey="n" chrome:author="" chrome:authorurl="" chrome:description="" chrome:name="my_theme" chrome:image="preview.png"> <chrome:packages> <rdf:seq about="urn:mozilla:skin:my_theme:packages"> <rdf:li resource="urn:mozilla:skin:my_theme:
browser"/> <rdf:li resource="urn:mozilla:skin:my_theme:communicator"/> <rdf:li resource="urn:mozilla:skin:my_theme:global"/> <rdf:li resource="urn:mozilla:skin:my_theme:mozapps"/> <rdf:li resource="urn:mozilla:skin:my_theme:help"/> </rdf:seq> </chrome:packages> </rdf:description> <!-- version information.
...--> <rdf:description chrome:skinversion="1.5" about="urn:mozilla:skin:my_theme:
browser"/> <rdf:description chrome:skinversion="1.5" about="urn:mozilla:skin:my_theme:communicator"/> <rdf:description chrome:skinversion="1.5" about="urn:mozilla:skin:my_theme:global"/> <rdf:description chrome:skinversion="1.5" about="urn:mozilla:skin:my_theme:mozapps"/> <rdf:description chrome:skinversion="1.5" about="urn:mozilla:skin:my_theme:help"/> </rdf:rdf> ...
Scratchpad - Archive of obsolete content
running scratchpad in the
browser context you can run scratchpad in the context of the
browser as a whole rather than a specific web page.
...once you've done this, the environment menu has a
browser option; once that's selected, your scope is the entire
browser rather than just the page content, as you will see from examining some globals: window /* [object chromewindow] */ g
browser /* [object xulelement] */ the scratchpad execution context is set to
browser when a snippet file has // -sp-context:
browser on the first line.
::-ms-fill-upper - Archive of obsolete content
browser compatibility historically supported in internet explorer and edge before version 79.
... see also ::-ms-fill-lower ::-ms-track ::-ms-thumb ::-moz-range-progress css-tricks: styling cross-
browser compatible range inputs with css quirksmode: styling and scripting sliders ...
Processing XML with E4X - Archive of obsolete content
compatibility issues prior to widespread
browser support for the <script> element, it was common for javascript embedded in a page to be surrounded by html comment tags to prevent <script> unaware
browsers from displaying javascript code to the user.
...they support javascript's regular dot and [] notation, but instead of accessing object properties e4x overloads these operators to access the element's children: var person = <person> <name>bob smith</name> <likes> <os>linux</os> <
browser>firefox</
browser> <language>javascript</language> <language>python</language> </likes> </person>; alert(person.name); // bob smith alert(person['name']); // bob smith alert(person.likes.
browser); // firefox alert(person['likes'].
browser); // firefox if you access something with more than one matching element, you get back an xmllist: alert(person.likes.language.length()); // 2 as ...
E4X - Archive of obsolete content
although it may still work in some
browsers, its use is discouraged since it could be removed at any time.
... note: in gecko 1.8 based
browsers such as firefox 1.5, e4x is already partially enabled for web page authors.
ArrayBuffer.transfer() - Archive of obsolete content
fill then the value is still 40 buf2.bytelength; // 80 new int32array(buf2)[0]; // 42 var buf3 = arraybuffer.transfer(buf2, 0); buf2.bytelength; // 0 but if you use the polyfill then the value is still 80 buf3.bytelength; // 0 polyfill you can partially work around this by inserting the following code at the beginning of your scripts, allowing use of much of the functionality of transfer() in
browsers that do not natively support it.
... this is not the exact equivalent of this api because
browsers that natively support it are be able to internally use the c++ function realloc() which extends the length of the memory and only copies it to a new location as-needed as opposed to the following pollyfill which always copies the whole thing to a new space of memory, but this function transfers data from one arraybuffer to another arraybuffer.
LiveConnect Overview - Archive of obsolete content
(although this functionality (along with some others) had been broken in gecko 1.9 (see bug 391642) as the mozilla-specific liveconnect code had not been maintained inside mozilla, with java 6 update 11 and 12 building support for reliance on mozilla's implementation of the generic (and cross-
browser) npapi plugin code, this has again been fixed.) for example, suppose you are using the java forname method to assign the name of a java class to a variable called theclass.
...locating the liveconnect classes in older versions of the netscape
browser, these classes were distributed along with the
browser.
Server-Side JavaScript - Archive of obsolete content
sounds obvious, but for at least the first twelve years of the web's evolution, developers have pretty much had to use different languages on the server from those available in the
browser, leading to segregated teams, disparate and inconsistent know-how, and plenty of server-side string manipulation gymnastics to generate html or ajax pages.
...some, like aptana with the open source jaxer server actually embed the entire mozilla firefox
browser engine (including spidermonkey) within a web server to enable server-side ajax and server-side dom access in addition to server-side execution of javascript.
Styling the Amazing Netscape Fish Cam Page - Archive of obsolete content
unfortunately, a few
browsers don't get this right, and end up flowing the cards as a single vertical column instead of putting the fish side by side.
... ...or it would have been, except in some
browsers the heading was drawn over the floated image, in contradiction to the css specification.
Reference - Archive of obsolete content
-- dria 05:30, 22 september 2005 (pdt) the examples (or most of them at least) say that the
browser can use the js 1.2 engine with the language="javascript1.2" tag, but this is no longer possible; language="javascript1.x" tags will always use the current version now, i.e.
... <hr> xmlhttprequest xmlhttprequest is a host object provided by the
browser, not part of js core language.
Building Mozilla XForms - Archive of obsolete content
$topsrcdir/
browser/config/mozconfig mk_add_options moz_co_project=
browser mk_add_options moz_objdir=@topsrcdir@/obj-@config_guess@ #mk_add_options autoconf=autoconf2.13 # possibly needed #mk_add_options moz_make_flags=-jn # (optional) replace n with the number of parallel build processes (e.g.
...$topsrcdir/
browser/config/mozconfig mk_add_options moz_co_project=
browser mk_add_options moz_objdir=@topsrcdir@/obj-@config_guess@ ac_add_options --enable-extensions="default,xforms" ac_add_options --enable-debug ac_add_options --disable-optimize ac_add_options --disable-tests building now that you have everything ready, you can rebuild mozilla with the same command you used before to build firefox without xforms.
Correctly Using Titles With External Stylesheets - Archive of obsolete content
therefore, any link to a stylesheet that includes a title attribute cannot be persistent, and is likely to be ignored by the web
browser.
...thus, when the document is loaded, the
browser will use all of the persistent stylesheets and one preferred stylesheet (but remember, there should only be one preferred stylesheet).
Fixing Incorrectly Sized List Item Markers - Archive of obsolete content
the problem in affected
browsers, list item markers will very often appear to be too big compared to the text in the list item itself.
...the following rule is derived from mozilla's html.css file: *|*:-moz-list-bullet, *|*:-moz-list-number {font-size: 1em;} this rule tells gecko-based
browsers to use the computed value of font-size for the marker's parent, which is the list item itself.
RDF in Mozilla FAQ - Archive of obsolete content
some examples of datasources that exist today are "
browser bookmarks", "
browser global history", "imap mail accounts", "nntp news servers", and "rdf/xml files".
...statements about the same rdf resource can then be intermingled: for example, the "last visit date" of a particular website comes from the "
browser global history" datasource, and the "shortcut keyword" that you can type to reach that website comes from the "
browser bookmarks" datasource.
Web Standards - Archive of obsolete content
sites developed along these lines will continue to function correctly as traditional desktop
browsers evolve, and as new internet devices come to market.
...this article covers common issues associated with migrating applications to the open source mozilla-based
browser.
Obsolete: XPCOM-based scripting for NPAPI plugins - Archive of obsolete content
it does not cover netscape 6 and 6.01 introduction plugins that used to take advantage of being scriptable via liveconnect in 4.x netscape
browsers lost this possibility in the new world.
...we leverage some of these ideas to help you make your netscape communicator 4.x plugins exposed to javascript in mozilla based
browsers.
Game promotion - Game development
grow your fanbase by talking to them, sharing tips, offering discounts, giving away prizes in competitions, or just complaining at the weather or buggy
browser you have to deal with.
...you can also sell a full version of the game from inside your
browser demo version, which will be a great move considering high competition, some developers even manage to make full
browser versions.
GLSL Shaders - Game development
you should: make sure you are using a modern
browser with good webgl support, such as the latest firefox or chrome.
...save and load index.html in your
browser — you should see a blue cube.
Desktop gamepad controls - Game development
the gamepad api gives you the ability to connect a gamepad to your computer and detect pressed buttons directly from the javascript code thanks to the
browsers implementing such feature.
... api status,
browser and hardware support the gamepad api is still in working draft status, although
browser support is already quite good — around 63% global coverage, according to caniuse.com.
Techniques for game development - Game development
optimizing startup performance how to make sure your game starts up quickly, smoothly, and without appearing to lock up the user's
browser or device.
...web-based audio is maturing fast, but there are still many
browser differences to negotiate.
Finishing up - Game development
requestanimationframe helps the
browser render the game better than the fixed framerate we currently have implemented using setinterval().
... bottom of the draw() function (just before the closing curly brace), add in the following line, which causes the draw() function to call itself over and over again: requestanimationframe(draw); the draw() function is now getting executed again and again within a requestanimationframe() loop, but instead of the fixed 10 milliseconds frame rate, we are giving control of the framerate back to the
browser.
Client hints - MDN Web Docs Glossary: Definitions of Web-related terms
in the second example, the server gives the
browser the hints by setting the accept-ch meta tag.
... basically, with the client hints header, the developer or application can tell the
browser to advertise information about itself to the server, such as the device pixel ratio, the viewport width, and the display width.
Effective connection type - MDN Web Docs Glossary: Definitions of Web-related terms
effective connection type (ect) refers to the measured network performance, 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.
...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 information api networkinformation networkinformation.effectivetype ...
First contentful paint - MDN Web Docs Glossary: Definitions of Web-related terms
first contentful paint (fcp) is when the
browser renders the first bit of content from the dom, providing the first feedback to the user that the page is actually loading.
... the first contentful paint time stamp is when the
browser first rendered any text, image (including background images), non-white canvas or svg.
First input delay - MDN Web Docs Glossary: Definitions of Web-related terms
when they click a link, tap on a button, or use a custom, javascript-powered control) to the time when the
browser is actually able to respond to that interaction.
... it is the length of time, in milliseconds, between the first user interaction on a web page and the
browser’s response to that interaction.
HSTS - MDN Web Docs Glossary: Definitions of Web-related terms
http strict transport security lets a web site inform the
browser that it should never load the site using http and should automatically convert all attempts to access the site using http to https requests instead.
... in other words, it tells the
browser that changing the protocol from http to https in a url works (and is more secure) and asks the
browser to do it for every request.
Progressive Enhancement - MDN Web Docs Glossary: Definitions of Web-related terms
progressive enhancement is a design philosophy that provides a baseline of essential content and functionality to as many users as possible, while delivering the best possible experience only to users of the most modern
browsers that can run all the required code.
... feature detection is generally used to determine whether
browsers can handle more modern functionality, while polyfills are often used to add missing features with javascript.
TCP handshake - MDN Web Docs Glossary: Definitions of Web-related terms
the three message mechanism is designed so that two computers that want to pass information back and forth to each other can negotiate the parameters of the connection before transmitting data such as http
browser requests.
... the host, generally the
browser, sends a tcp synchronize packet to the server.
Web performance - MDN Web Docs Glossary: Definitions of Web-related terms
web performance 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.
... objectively, it is measurable time, in milliseconds, it takes for the web page or web application to be downloaded, painted in the user's web
browser, and become responsive and interactive.
MDN Web Docs Glossary: Definitions of Web-related terms
attribute b bandwidth base64 baseline beacon bézier curve bidi bigint blink block block (css) block (scripting) block cipher mode of operation boolean boot2gecko bootstrap bounding box breadcrumb brotli
browser browsing context buffer c cache cacheable caldav call stack callback function canonical order canvas card sorting carddav caret cdn certificate authority certified challenge-response authentication character character enc...
...ative navigation directive netscape navigator network throttling nntp node node (dom) node (networking) node.js non-normative normative null nullish value number o 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 performance percent-encoding php pixel placeholder names plai...
Accessibility - Learn web development
to help you achieve this, this module will cover general best practices (which are demonstrated throughout the html, css, and javascript topics), cross
browser testing, and some tips on enforcing accessibility from the start.
...wai-aria is a technology that can help with such problems by adding in further semantics that
browsers and assistive technologies can recognize and use to let users know what is going on.
Backgrounds and borders - Learn web development
you can also use keywords: cover — the
browser will make the image just large enough so that it completely covers the box area while still retaining its aspect ratio.
... contain — the
browser will make the image the right size to fit inside the box.
Attribute selectors - Learn web development
this flag tells the
browser to match ascii characters case-insensitively.
... note: there is also a newer value s, which will force case-sensitive matching in contexts where matching is normally case-insensitive, however this is less well supported in
browsers and isn't very useful in an html context.
Grids - Learn web development
the following video provides a nice visual explanation of using css grid: defining a grid as a starting point, download and open the starting point file in your text editor and
browser (you can also see it live here).
... see also css grid guides css grid inspector: examine grid layouts previous overview: css layout next in this module introduction to css layout normal flow flexbox grid floats positioning multiple-column layout responsive design beginner's guide to media queries legacy layout methods supporting older
browsers fundamental layout comprehension assessment ...
How does the Internet work? - Learn web development
internet and the web as you might notice, when we browse the web with a web
browser, we usually use the domain name to reach a website.
...among those computers, some computers (called web servers) can send messages intelligible to web
browsers.
How to structure a web form - Learn web development
many assistive technologies and
browser plugins can discover <form> elements and implement special hooks to make them easier to use.
...the last one is an <input> element of type date, for entering the expiration date of the card; this one will come up with a date picker widget in supporting
browsers, and fall back to a normal text input in non-supporting
browsers.
Your first form - Learn web development
basic form styling now that you have finished writing your form's html code, try saving it and looking at it in a
browser.
...the names are important on both the client- and server-side; they tell the
browser which name to give each piece of data and, on the server side, they let the server handle each piece of data by name.
HTML basics - Learn web development
if they overlap as shown above, then your web
browser will try to make the best guess at what you were trying to say, which can lead to unexpected results.
...this sets the title of your page, which is the title that appears in the
browser tab the page is loaded in.
Publishing your website - Learn web development
using a web-based ide such as codepen there are a number of web apps that emulate a website development environment, allowing you to enter html, css and javascript, and then display the result of that code as a website — all in one
browser tab.
... navigate your
browser to username.github.io to see your website online.
Add a hitmap on top of an image - Learn web development
text links (perhaps styled with css) are preferable to image maps for several reasons: text links are lightweight, maintainable, often more seo-friendly, and support accessibility needs (e.g., screen readers, text-only
browsers, translation services).
... <map name="example-map-1"> <area shape="circle" coords="200,250,25" href="page-2.html" alt="circle example" /> <area shape="rect" coords="10, 5, 20, 15" href="page-3.html" alt="rectangle example" /> </map> step 3: make sure it works for everybody you aren’t done until you test image maps rigorously on many
browsers and devices.
Introduction to HTML - Learn web development
metadata in html the head of an html document is the part that is not displayed in the web
browser when the page is loaded.
... html text fundamentals one of html's main jobs is to give text meaning (also known as semantics), so that the
browser knows how to display it correctly.
Mozilla splash page - Learn web development
in each case (except one — which one is inherently responsive?) we want the
browser to serve the 120px wide version when the viewport width is 500px wide or less, or the 400px wide version otherwise.
... note: to properly test the srcset/sizes examples, you'll need to upload your site to a server (using github pages is an easy and free solution), then from there you can test whether they are working properly using
browser developer tools such as the firefox network monitor.
Asynchronous JavaScript - Learn web development
guides general asynchronous programming concepts in this article we'll run through a number of important concepts relating to asynchronous programming, and how this looks in web
browsers and javascript.
... making asynchronous programming easier with async and await promises can be somewhat complex to set up and understand, and so modern
browsers have implemented async functions and the await operator.
Arrays - Learn web development
as in previous articles, let's learn about the real basics of arrays by entering some examples into
browser developer console.
... for each item, print it out to the
browser console with console.log().
Silly story generator - Learn web development
go to the page containing the raw text and keep this open in a separate
browser tab somewhere.
...the following for example turns the background of the <html> element red — so the entire
browser window should go red if the javascript is applied properly: document.queryselector('html').style.backgroundcolor = 'red'; math.round() is a built-in javascript method that simply rounds the result of a calculation to the nearest whole number.
Test your skills: Object-oriented JavaScript - Learn web development
note: in the examples below, if there is an error in your code it will be outputted into the results panel on the page, to help you try to figure out the answer (or into the
browser's javascript console, in the case of the downloadable version).
... call your calcperimeter() method on the instance, to see whether it logs the calculation result to the
browser devtools' console as expected.
JavaScript — Dynamic client-side scripting - Learn web development
introducing javascript objects in javascript, most things are objects, from core javascript features like strings and arrays to the
browser apis built on top of javascript.
... client-side web apis when writing client-side javascript for web sites or applications, you won't go very far before you start to use apis — interfaces for manipulating different aspects of the
browser and operating system the site is running on, or even data from other web sites or services.
Measuring performance - Learn web development
the performanceobserver api can be used to observe performance measurement events and it can notify you of new performance entries as they are recorded in the
browser's performance timeline.
... network tools most
browsers have tools available that you can use to run against loaded pages and determine how they are performing.
The "why" of web performance - Learn web development
web performance refers to how quickly site content loads and renders in a web
browser, and how well it responds to user interaction.
...the site will be very slow to load—if it loads at all—with blocking scripts possibly timing out, and adverse cpu impact causing
browser crashes if it does load.
Web performance - Learn web development
this article introduces the components of performance, from web page loading and rendering, including how your content makes it into your users
browser to be viewed, to what groups of people we need to consider when thinking about performance, how do users perceive performance?
... mobile performance with web access on mobile devices being so popular, and all mobile platforms having fully-fledged web
browsers, but possibly limited bandwidth, cpu and battery life, it is important to consider the performance of your web content on these platforms.
Server-side website programming first steps - Learn web development
client-server overview now that you know the purpose and potential benefits of server-side programming, we're going to examine in detail what happens when a server receives a "dynamic request" from a
browser.
... server-side web frameworks the last article showed you what a server-side web application needs to do in order to respond to requests from a web
browser.
Getting started with Ember - Learn web development
automated testing environment that runs your tests in the
browser, allowing you to test like a user.
...(1) | 12ms the development server launches at http://localhost:4200, which you can visit in your
browser to check out what your work looks like so far.
Ember interactivity: Events, classes and state - Learn web development
coming back to our
browser tab with the app running, we can type whatever we want, and when we hit enter we'll be greeted with an alert message telling us exactly what we typed.
...replace it with the following: this.todos.add(text); if we try this out in the todo app in our
browser (npm start, go to localhost:4200), it will look like nothing happens after hitting the enter key (although the fact that the app builds without any errors is a good sign).
Deployment and next steps - Learn web development
css: css => { css.write('public/build/bundle.css'); } }), later on in the same file you'll also see how rollup minimizes our scripts in production mode and launches a local server in development mode: // in dev mode, call `npm run start` once // the bundle has been generated !production && serve(), // watch the `public` directory and refresh the //
browser on changes when not in production !production && livereload('public'), // if we're building for production (npm run build // instead of npm run dev), minify production && terser() ], there are many plugins for rollup that allow you to customize its behavior.
... once it has finished deploying, go to the "production" url in your
browser, and you'll see the app deployed!
Command line crash course - Learn web development
this is exactly the same as you would see with urls in your web
browser.
...if you enter it in a new
browser tab, you’ll (eventually) get redirected to /docs/web/api/windoworworkerglobalscope/fetch.
Accessibility and Mozilla
however, many of the concepts were also used during the development of firevox, an at using iaccessible2.accessible toolkit checklistplease contact the mozilla accessibility community with questions or feedback.csun firefox materialsfirefox 1.5 is a fast, free, standards compliant web
browser which is rapidly gaining recognition for its fresh, streamlined approach to browsing the web.
...feedback and constructive suggestions are encouraged.mozilla plugin accessibilityplugins in gecko-based
browsers have a lot of accessibility issues.
Index
678 make money from
browser extensions guide, monetization, webextensions, distribution while users can download
browser extensions for firefox free of cost from addons.mozilla.org (amo), this doesn’t mean you can’t make money from
browser extensions, and to a more limited extent themes.
... 686 theme concepts theme, add-on themes developed using the webextensions api in firefox enable you to change the look of the
browser by adding images to the header area of the firefox
browser; this is the area behind the menu bar, toolbars, address bar, search bar, and tab strip.
Benchmarking
any performance metrics gathered by such builds are largely unrelated to what would be found in a release
browser.
...the poisoning can be disabled by setting the environment variable jsgc_disable_poisoning=1 before starting the
browser.
Debugging on Mac OS X
these builds enable hardened runtime and only differ from production builds in that they are not notarized which should not otherwise affect functionality, (other than the ability to easily launch the
browser on macos 10.15+ -- see quarantine note below).
... debugging e10s child processes using xcode to debug child processes created by an e10s-enabled
browser is a little trickier than debugging a single-process
browser, but it can be done.
Contributing to the Mozilla code base
project skills documentation/onboarding firefox
browser (core layers) c++ firefox developers documentation firefox (front-end) javascript and/or html/css firefox developers documentation devtools javascript and/or html/css contribute to devtools add-ons javascript and/or html/css contribute to add-ons firefox focus for android java contribute to firefox focus for android firefo...
...x for fire tv java contribute to firefox for fire tv firefox preview (mobile
browser, codename: "fenix") kotlin contribute to firefox preview firefox for ios swift contribute to firefox for ios firefox focus for ios swift contribute to firefox focus for ios mozilla hubs javascript and/or html/css, vr contribute to mozilla hubs servo rust contribute to servo there are even many ways to contribute to the mozilla mission without programming.
Frame script environment
the frame script's global is a contentframemessagemanager, giving it the following environment: content the dom window of the content loaded in the
browser.
... may be null (see below) docshell the nsidocshell associated with the
browser.
Limitations of frame scripts
examples of apis add-on authors should avoid in frame scripts: nsifileinputstream nsifileoutputstream constructing a file from a string or nsifile (but file objects can be sent via message manager) htmlinputelement.mozsetfilenamearray (alternative: mozsetfilearray) xul and
browser ui anything that tries to touch the
browser ui or anything to do with xul is likely to not work in the content process.
...the target property of the object passed into the message handler in the chrome process is the xul <
browser> receiving the message, and you can get the chrome window from that (note: i'm not really sure how...).
Limitations of frame scripts
for example: nsifileinputstream nsifileoutputstream constructing a file from a string or nsifile (but file objects can be sent via message manager) htmlinputelement.mozsetfilenamearray (alternative: mozsetfilearray) file: uris, see bug 1187099 <...> xul and
browser ui anything that tries to touch the
browser ui or anything to do with xul is likely not to work in the content process.
...the target property of the object passed into the message handler in the chrome process is the xul <
browser> receiving the message, and you can get the chrome window from that (i'm not sure how).
Firefox Operational Information Database: SQLite
a large amount of operational information about websites visited and
browser configuration is stored in relational databases in sqlite used by firefox.
... in the manager, select the 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 ...
HTMLIFrameElement.addNextPaintListener()
the addnextpaintlistener() method of the htmliframeelement is used to define a handler to listen for the next mozafterpaint event coming from the
browser <iframe>.
... examples var
browser = document.queryselector('iframe'); function onnextpaint() { console.log("paint has occured"); }
browser.addnextpaintlistener(onnextpaint); specification not part of any specification.
HTMLIFrameElement.getCanGoBack()
the getcangoback() method of the htmliframeelement interface is used to indicate whether it's possible to go back in the navigation history of the
browser <iframe>.
... 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."); } }); } specification not part of any specification.
HTMLIFrameElement.getCanGoForward()
the getcangoforward() method of the htmliframeelement is used to indicate whether it's possible to go forward in the navigation history of the
browser <iframe>.
... example function canmovefwd() {
browser.getcangoforward().then(function(result) { if (result) { fwd.disabled = false; console.log("it's possible to navigate the history forward."); } else { fwd.disabled = true; console.log("it's not possible to navigate the history forward."); } }); } specification not part of any specification.
HTMLIFrameElement.getManifest()
the getmanifest() method of the htmliframeelement interface retrieves the manifest of an app loaded in the
browser <iframe> and returns it as json.
... examples var
browser = document.queryselector('iframe');
browser.addeventlistener('moz
browserloadend',function() { var request =
browser.getmanifest().then(function(json) { console.log(json); }); }); specification not part of any specification.
HTMLIFrameElement.getScreenshot()
it won't wait more than 2000ms (this delay is defined by the gecko dom.
browserelement.maxscreenshotdelayms preference).
... examples var
browser = document.queryselector('iframe'); var request =
browser.getscreenshot(100, 100); request.onsuccess = function() { var blob = request.result; var url = url.createobjecturl(blob); } specification not part of any specification.
HTMLIFrameElement.getVolume()
the getvolume() method of the htmliframeelement gets the current volume of the
browser <iframe>.
... example callback version: var
browser = document.queryselector('iframe'); var request =
browser.getvolume(); request.onsuccess = function() { console.log('the current
browser volume is ' + request.result); } promise version: var
browser = document.queryselector('iframe');
browser.getvolume().then(function(volume) { console.log('the current
browser volume is ' + volume); }); specification not part of any specification.
HTMLIFrameElement.mute()
the mute() method of the htmliframeelement mute any audio playing in the
browser <iframe>.
... example var
browser = document.queryselector('iframe');
browser.mute(); specification not in a specification.
HTMLIFrameElement.reload()
parameters hardreload optional a boolean that indicates whether all the resources to reload must be revalidated (true) or may be taken directly from the
browser cache (false).
... examples stopreload.addeventlistener('touchend',function() { if(stopreload.textcontent === 'x') {
browser.stop(); } else {
browser.reload(); } }); specification not part of any specification.
HTMLIFrameElement.setVolume()
the setvolume() method of the htmliframeelement sets the current volume of the
browser <iframe>.
... example var
browser = document.queryselector('iframe');
browser.setvolume(0.5); specification not part of any specification.
HTMLIFrameElement.unmute()
the unmute() method of the htmliframeelement unmutes any audio playing in the
browser <iframe>.
... example var
browser = document.queryselector('iframe');
browser.unmute(); specification not part of any specification.
HTMLIFrameElement.zoom()
the zoom() method of the htmliframeelement interface changes the zoom factor of the
browser <iframe>'s content.
... examples var
browser = document.queryselector('iframe'); var zoomfactor = 1; zoomin.addeventlistener('touchend',function() { zoomfactor += 0.1;
browser.zoom(zoomfactor); }); zoomout.addeventlistener('touchend',function() { zoomfactor -= 0.1;
browser.zoom(zoomfactor); }); specification not part of any specification.
Embedding the editor
composer embedded in a native application in this application, the <iframe> on which the editor lives is embedded directly in the native application; this is equivalent to embedding the
browser via nsiweb
browser, but instead having an editable document.
...(this would be analogous to the nsiwebnavigation interface used for a
browser.) when we have one editor per docshell, loading a frameset document, or a page with an <iframe> in composer, will instantiate more than one low-level editor.
Embedding Mozilla
that means you can embed a web
browser inside a third-party application, open channels and streams through the network backend, walk through the dom and so on.
... roll your own
browser - an embedding howto a quick introduction to embedding mozilla.
Gecko
gecko is used in many applications, including a few
browsers such as firefox and seamonkey (for a complete list, please refer to wikipedia's article on gecko).
... documentation chrome this page contains information specific to
browser chrome (not google chrome) code running in gecko.
How to get a stacktrace with WinDbg
once the
browser crashes, you will see an error (such as "access violation") in the windbg command window.
...once the
browser has crashed or been stopped, continue with the steps below.
How to Report a Hung Firefox
another way to trigger a crash in a hung tab is to run the following script in the
browser console (opened after selecting the hung tab): let wm = cc["@mozilla.org/appshell/window-mediator;1"].
... getservice(ci.nsiwindowmediator); let win = wm.getmostrecentwindow("navigator:
browser"); let
browser = win.g
browser.selected
browser; if (
browser.isremote
browser) {
browser.messagemanager.loadframescript('data:,let appinfo = components.classes["@mozilla.org/xre/app-info;1"];if (appinfo && appinfo.getservice(components.interfaces.nsixulruntime).processtype != components.interfaces.nsixulruntime.process_type_default) {components.utils.import("resource://gre/modules/ctypes.jsm");var zero = new ctypes.intptr_t(8);var badptr = ctypes.cast(zero, ctypes.pointertype(ctypes.int32_t));var crash = badptr.contents;}', true); } other techniques on os x if you use a nightly build (>= firefox 16), you can use activity monitor's "sample process" feature to generate a sample.
Extending a Protocol
the tutorial is designed for
browser engineers who are implementing dom/web apis that need to, for example, send a message to the os or spin up something off the main thread - so it's biased towards supporting w3c/whatwg dom apis.
... we need to add the following things: at the top of the file: include protocol pecho; after "manager p
browser or pinprocess;", add: manages pecho; finally, under parent: add async pecho(); - this is the "constructor" part we talked about before, which will allow us to eventually send messages.
Implementing Download Resuming
(todo: document what web
browserpersist/exthandler do).
... note: in versions of firefox prior to 3.0 alpha 7, nsiweb
browserpersist cannot append to existing files (as opposed to overwriting them), and is therefore not usable for this task (see bug 129921).
Log.jsm
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.
...// use dots to create a hierarchy, this way you can later change // the log level of sets of loggers under some common root let log = log.repository.getlogger("myextension.myclass"); log.level = log.level.debug; // a console appender logs to the
browser console.
Translation phase
these are the mozilla application projects that are localized using the l10n tools above: firefox the award-winning firefox® web
browser has security, speed and new features that will change the way you use the web.
... 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.
Localization technical reviews
defines.inc the file for each app (like
browser/defines.inc) contains the names of all contributors that a localization team would like to credit the work to.
... check for bad migration of access keys in the past, it was common to find broken access keys for safari and camino in
browser/chrome/
browser/migration/migration.dtd.
Basics
a n n ] [ x1 x2 x3 : xn ] in mozilla, mathml runs inside the main
browser.
... so it responds to other
browser operations such as the zoom (try view -> text zoom), and you can do links a 2 + b 2 = c 2 , apply stylistic effects a 2 + b 2 = c 2 , or use color a 2 + b 2 = c 2 in very strange ways p(x) q(x) = a0 + a1x + a2 x2 + ...
Mozilla DOM Hacking Guide
other
browsers allow the history object to be used like an array, e.g.
...it is the name of the javascript object that will be available in the
browser through the dom.
Mozilla Web Services Security Model
please do not depend on anything in it being correct for security.) to prevent the
browser from being used as a tool for web sites to obtain priveleges that belong to the
browser's user (such as being behind a firewall or getting the benefits of the user's cookies), web
browsers restrict what web pages can do when accessing things in other domains.
... the delegate element a delegate element means that the
browser should delegate the access control to a web-scripts-access.xml file in the directory that the service is in.
Refcount tracing and balancing
warning: you should never use this without xpcom_mem_log_classes and/or xpcom_mem_log_objects, because without some filtering the logging will be completely useless due to how slow the
browser will run and how large the logs it produces will be.
...for example: env xpcom_mem_log_classes=nsdocshell xpcom_mem_refcnt_log=./refcounts.log ./mach run this will log the addref and release calls only for instances of nsdocshell while running the
browser using mach, to a file refcounts.log.
Debugging out-of-memory problems
out-of-memory exceptions from js setting memory.dump_reports_on_oom in about:config to true will cause the
browser to automatically write about:memory dumps to a temp file printed to the
browser console (note: not web console) when an oom crash is encountered.
... out-of-memory crashes in some cases, running out of memory causes the
browser to crash.
Firefox Sync
firefox sync synchronizes state and configuration data used by the
browser, such as bookmarks, history, preferences, bookmarks, and so forth among all your devices.
... the exact types of information synced is user-configurable in the
browser's preferences or options page.
Midas editor module security preferences
to enable these functions, you must modify your
browser preferences.
... warning: changing these preferences can leave your
browser insecure, especially if you grant permission to untrusted sites.
NSS Tools modutil
enabling fips compliance this example enables fips 140-2 compliance in communicator's internal module: modutil -dbdir "c:\databases" -fips true the security module database tool displays a warning: warning: performing this operation while the
browser is running could causecorruption of your security databases.
... if the
browser is currently running,you should exit
browser before continuing this operation.
Creating JavaScript tests
jstests run in both the shell and the
browser (although you can specify that the test should be run in only one of the two locations).
... it's also a good sanity check to run each new test against an unpatched shell or
browser.
JS_GetGlobalObject
although it may still work in some
browsers, its use is discouraged since it could be removed at any time.
...spidermonkey supports applications that have multiple global objects, such as the various window objects in a web
browser.
Shell global objects
similar to the dumpjsstack() function in the
browser.
... values: 0: (none) normal amount of collection (resets all modes) 1: (poke) collect when roots are added or removed 2: (alloc) collect when every n allocations (default: 100) 3: (framegc) collect when the window paints (
browser only) 4: (verifierpre) verify pre write barriers between instructions 5: (frameverifierpre) verify pre write barriers between paints 6: (stackrooting) verify stack rooting 7: (generationalgc) collect the nursery every n nursery allocations 8: (incrementalrootsthenfinish) incremental gc in two slices: 1) mark roots 2) finish collection 9: (incrementalmarkallthenfinish) incr...
Pinning violation reports
it allows site operators to specify who can issue valid certificates for them, rather than accepting any one of the hundreds of built-in root certificates that ship with your
browser.
... if a site makes use of key pinning, and your
browser sees a certificate chain for that site which does not match the pin, firefox will reject the connection and display an error page.
Secure Development Guidelines
ing 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 should only be [a-za-z0-9], enforce it cross site scripting (xss) xss is a type of code injection attack typically occurs in web applications injection of arbitrary data into an html document from another site victim’s
browser executes those html instructions could be used to steal user credentials think: webmail, online auction, cms, online banking...
...is exploitable (in some
browsers) with a simple request such as: http://www.victim.com?something=<script>alert('oops')</script> xss: prevention escape all dynamic input that will be sent back to the user html encoding & → & < → < > → > " → " ' → ' url encoding % encoding java/vbscript escaping depends on the context; in a single-quoted string, escaping ' would suffice sql injection occurs when un-trusted input is mixed with a sql string sql is a language used to interact with databases code injection attack that is similar to xss but targeted at sql rather than html and javascript if input is ...
Using the Places annotation service
uri's are easier to use for services that want to annotate a web page loaded in the
browser, while id's are easier to use for services already working with the places database.
... creating the annotation service the annotation contract id is @mozilla.org/
browser/annotation-service;1 var annotationservice = components.classes["@mozilla.org/
browser/annotation-service;1"] .getservice(components.interfaces.nsiannotationservice); note that the annotation service is not thread-safe.
extIApplication
windows readonly attribute nsivariant an array of
browser windows within the application.
... activewindow readonly attribute fueliwindow the currently active
browser window.
An Overview of XPCOM
the most important use of xpcom is within gecko, an open source, standards compliant, embeddable web
browser and toolkit for creating web
browsers and other applications.
... gecko is used in many internet applications, mostly
browsers and most notably mozilla firefox.
mozIRegistry
which explains how this information 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.
...it will also facilitate building a
browser-based application that will allow people to display and edit its contents.
nsIAccessibleProvider
for example now it is used by <xul:iframe>, <xul:
browser> and <xul:editor>.
...x00001024 xullistheader 0x00001025 xullistitem 0x0000100c xulmenubar 0x0000100d xulmenuitem 0x0000100e xulmenupopup 0x0000100f xulmenuseparator 0x00001010 xulpane 0x00001011 xulprogressmeter 0x00001012 xulscale 0x00001013 xulstatusbar 0x00001014 xulradiobutton 0x00001015 xulradiogroup 0x00001016 xultab 0x00001017 the single tab in a dialog or tab
browser/editor interface.
nsIClipboardDragDropHooks
return value true indicates to the operating system that if a drop does happen on this
browser, it will be accepted.
...onpasteordrop() provide an alternative action to the built-in behavior when something is dropped on the
browser or in an editor.
nsIContainerBoxObject
1.0 66 introduced gecko 1.9 inherits from: nsisupports last changed in gecko 1.9 (firefox 3) the boxobject belonging to a xul
browser, editor or iframe element implements this interface.
...the
browser.xml, editor.xml and general.xml bindings use this property to gain access to other properties such as webnavigation, contentdocument and contentwindow.
nsIContentFrameMessageManager
examples once you obtain the conten frame messge manager, you can send messages to listeners who registered with services.mm.addmessagelistener get content message manager from
browser this could would run in a nsidomwindow scope.
... var acfmm = g
browser.selected
browser._docshell.queryinterface(ci.nsiinterfacerequestor).getinterface(ci.nsicontentframemessagemanager); get content message manager from content window window here is a html window or any window inside a tab, this code would run from a framescript.
nsIDOMChromeWindow
x 4 / thunderbird 3.3 / seamonkey 2.1) method overview void beginwindowmove(in nsidomevent mousedownevent); void getattention(); void getattentionwithcyclecount(in long acyclecount); void maximize(); void minimize(); void notifydefaultbuttonloaded(in nsidomelement defaultbutton); void restore(); void setcursor(in domstring cursor); attributes attribute type description
browserdomwindow nsi
browserdomwindow the related nsi
browserdomwindow instance which provides access to yet another layer of utility functions by chrome script.
... it will be null for domwindows not corresponding to
browsers.
nsIDOMMozNetworkStatsManager
if true, return only browsing traffic, which is generated from the moz
browser iframe element within an app.
... if false or not set, the total traffic, which is generated from both the mozapp and moz
browser iframe elements, is returned.
nsIFaviconService
1.0 66 introduced gecko 1.8 inherits from: nsisupports last changed in gecko 22.0 (firefox 22.0 / thunderbird 22.0 / seamonkey 2.19) implemented by: @mozilla.org/
browser/favicon-service;1.
... to use this service, use: var faviconservice = components.classes["@mozilla.org/
browser/favicon-service;1"] .getservice(components.interfaces.nsifaviconservice); method overview void addfailedfavicon(in nsiuri afaviconuri); void expireallfavicons(); void getfavicondata(in nsiuri afaviconuri, out autf8string amimetype, [optional] out unsigned long adatalen, [array,retval,size_is(adatalen)] out octet adata); obsolete since gecko 22.0 astring getfavicondataasdataurl(in nsiuri afaviconuri); obsolete since gecko 22.0 nsiuri getfaviconforpage(in nsiuri apageuri); obsolete since gecko 22.0 nsiuri getfaviconimageforpage(in nsiuri apageuri); obsolete since gecko 22.0 nsiuri getfaviconlinkforicon(in nsiuri afaviconuri);...
nsILivemarkService
implemented by: @mozilla.org/
browser/livemark-service;2.
... to use this service, use: var livemarkservice = components.classes["@mozilla.org/
browser/livemark-service;2"] .getservice(components.interfaces.nsilivemarkservice); method overview long long createlivemark(in long long folder, in astring name, in nsiuri siteuri, in nsiuri feeduri, in long index); long long createlivemarkfolderonly(in long long folder, in astring name, in nsiuri siteuri, in nsiuri feeduri, in long index); nsiuri getfeeduri(in long long container); long long getlivemarkidforfeeduri(in nsiuri afeeduri); nsiuri getsiteuri(in long long container); boolean islivemark(in long long folder); void reloadalllivemarks(); void reloadlivemarkfolder(in long long folderid); void setfeedu...
nsILocalFileMac
although it may still work in some
browsers, its use is discouraged since it could be removed at any time.
...although it may still work in some
browsers, its use is discouraged since it could be removed at any time.
Component; nsIPrefBranch
for example, if this object is created with the root "
browser.startup.", the preferences "
browser.startup.page", "
browser.startup.homepage", and "
browser.startup.homepage_override" can be accessed by simply passing "page", "homepage", or "homepage_override" to the various get/set methods.
...(in string aprefname, in utf8string avalue); void setcomplexvalue(in string aprefname, in nsiidref atype, in nsisupports avalue); void setintpref(in string aprefname, in long avalue); void unlockpref(in string aprefname); attributes attribute type description root string called to get the root on which this branch is based, such as "
browser.startup." read only.
nsISHEntry
inherits from: nsihistoryentry last changed in gecko 6.0 (firefox 6.0 / thunderbird 6.0 / seamonkey 2.3) implemented by: @mozilla.org/
browser/session-history-entry;1.
... to create an instance, use: var shentry = components.classes["@mozilla.org/
browser/session-history-entry;1"] .createinstance(components.interfaces.nsishentry); method overview void addchildshell(in nsidocshelltreeitem shell); nsidocshelltreeitem childshellat(in long index); void clearchildshells(); nsishentry clone(); void create(in nsiuri uri, in astring title, in nsiinputstream inputstream, in nsilayouthistorystate layouthistorystate, in nsisupports cachekey, in acstring contenttype, in nsisupports owner, in unsigned long long docshellid, in boolean dynamiccreation); native code only!
nsITaggingService
1.0 66 introduced gecko 1.9 inherits from: nsisupports last changed in gecko 2.0 (firefox 4 / thunderbird 3.3 / seamonkey 2.1) implemented by: @mozilla.org/
browser/tagging-service;1.
... to use this service, use: var taggingsvc = components.classes["@mozilla.org/
browser/tagging-service;1"] .getservice(components.interfaces.nsitaggingservice); method overview void taguri(in nsiuri auri, in nsivariant atags); void untaguri(in nsiuri auri, in nsivariant atags); nsivariant geturisfortag(in astring atag); nsivariant gettagsforuri(in nsiuri auri, [optional] out unsigned long length, [retval, array, size_is(length)] out wstring atags); attributes attribute type description alltags nsivariant retrieves all tags used to tag uris in the data-base (sorted by name).
nsIVersionComparator
f a and b are two version being compared, and the return value is smaller than 0, then a < b equals 0 then version, then a==b is bigger than 0, then a > b example function compareversions(a,b) { var x = services.vc.compare(a,b); if(x == 0) return a + "==" + b; else if(x > 0) return a + ">" + b; return a + "<" + b; } dump(compareversions("1.0pre", "1.0")); example - compare current
browser version this example here uses nsixulappinfo component to get the version of the
browser that the code is running in.
... see here: nsixulappinfo components.utils.import("resource://gre/modules/services.jsm"); var curent
browserversion = services.appinfo.platformversion; //example: '31.*' var comparetothisversion = '25.*'; var compareresult = services.vc.compare(curent
browserversion, comparetothisversion); if (compareresult == -1) { //current
browserversion is less than '25.*' (comparetothisversion) } else if (compareresult == 0) { //current
browserversion is '25.*' (comparetothisversion) } else if (compareresult == 1) { //current
browserversion 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 ...
nsIWindowsShellService
browser/components/shell/public/nsiwindowsshellservice.idlscriptable please add a summary to this article.
... shortcutmaintenance() provides the shell service an opportunity to do some win7+ shortcut maintenance needed on initial startup of the
browser.
XUL Overlays
when plug-ins,
browser extensions, or other applications provide new ui elements to the
browser, these elements should be defined in overlay files.
...the chrome registry, which is a special rdf datasource into which user-specific information is persisted, or stored, contains information about the components or additional packages that have been installed with the
browser.
Testing Mozilla code
asan nightly projectthe asan nightly project involves building a firefox nightly
browser with the popular addresssanitizer tool and enhancing it with remote crash reporting capabilities for any errors detected.clang static analysisthis document is split in two parts.
...this type of coverage is only concerned with hit counts for lines and branches.the valgrind test jobthe valgrind test job builds the
browser and runs it under valgrind, which can detect various common memory-related errors.
Using Mozilla code in other projects
you can embed gecko, the layout engine used by firefox to process web pages, as a
browser within your own application.
... embedding mozilla for information on embedding a web
browser into your own application see embedding mozilla.
Blocking By Domain - Plugins
criteria in order to improve firefox security and performance, 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 performance 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.
Access debugging in add-ons - Firefox Developer Tools
the following items are accessible in the context of chrome://
browser/content/debugger.xul (or, in version 23 beta, chrome://
browser/content/devtools/debugger.xul): window.addeventlistener("debugger:editorloaded") - called when the read-only script panel loaded.
... window.addeventlistener("debugger:editorunloaded") relevant files: chrome://
browser/content/devtools/debugger-controller.js chrome://
browser/content/devtools/debugger-toolbar.js chrome://
browser/content/devtools/debugger-view.js chrome://
browser/content/devtools/debugger-panes.js unfortunately there is not yet any api to evaluate watches/expressions within the debugged scope, or highlight elements on the page that are referenced as variables in the debugged scope.
Source map errors - Firefox Developer Tools
source maps are json files providing a way to associate transformed sources, as seen by the
browser, with their original sources, as written by the developer.
... the fix here is to make sure the file is being served and is accessible to the
browser invalid source map the source map data can be invalid — either simply not a json file at all, or with an incorrect structure.
Deprecated tools - Firefox Developer Tools
description webide allowed you to connect the firefox developer tools to remote
browsers, such as firefox for android.
...features that are planned but not ported yet: remote
browser screenshots and edit remote
browser configuration.
Inspecting web sockets - Firefox Developer Tools
sent displays only messages sent by the
browser (by default, except control messages).
...this filter can be combined with the others, to display, for example, only messages for control frames sent by the
browser.
Network request details - Firefox Developer Tools
the
browser imposes a limit on the number of simultaneous connections that can be made to a single server.
...if all connections are in use, the
browser can't download more resources until a connection is released.
Network request list - Firefox Developer Tools
or you might see a red circle with a diagonal slash for responses that were blocked by the
browser or the server.
... blocking specific urls if you want to view your page as it would look without a resource (e.g., if it were blocked by the
browser or an extension), you can block requests matching patterns you specify.
Edit fonts - Firefox Developer Tools
this tool contains several useful features for viewing and manipulating fonts applied to any document loaded in the
browser including inspection of all fonts applied to the page, and precise adjustment of variable font axis values.
... they are applied to the element as part of the
browser's default styling (times new roman for most
browsers), and no author-defined font has been supplied.
Examine and edit HTML - Firefox Developer Tools
usually this white space seems to have no effect and no visual output, but in fact, when a
browser parses html it will automatically generate anonymous text nodes for elements not contained in a node.
... if these auto generated text nodes are inline level,
browsers will give them a non-zero width and height.
Work with animations - Firefox Developer Tools
if you click the icon, it enlarges and changes to color, and the name of the
browser appears.
...hovering over these selectors, we can see that those elements are, respectively, the
browser name "firefox developer edition" and the
browser icon.
Remote Debugging - Firefox Developer Tools
you can use the firefox developer tools on your desktop to debug web sites and web apps running in other
browsers or runtimes.
... the other
browser might be on the same device as the tools themselves or on a different device, such as a phone connected over usb.
Taking screenshots - Firefox Developer Tools
the screenshot is saved to your
browser's "downloads" directory: taking a screenshot of an element to take a screenshot of a single element in the page, activate the context menu on that element in the inspector's html pane, and select "screenshot node".
... the screenshot is saved to the
browser's "downloads" directory: copying screenshots to the clipboard from firefox 53, you can also copy the screenshot to the clipboard.
Toolbox - Firefox Developer Tools
docking mode by default, the toolbox appears docked to the bottom of the
browser window, but you can also dock it to the right-hand side of the window, or make it a standalone window, using buttons in the toolbar.
...lor from the page take a screenshot of the entire page: take a screenshot of the complete web page and saves it in your downloads directory toggle rulers for the page measure a portion of the page: measure a part of the website by selecting areas within the page toolbox controls finally there's a row of buttons to: close the window toggle the window between attached to the bottom of the
browser window, and attached to the side of the
browser window toggle the window between standalone and attached to the
browser window access developer tool settings settings see the separate page on the developer tools settings.
AbstractRange - Web APIs
first, after your page is loaded, the
browser simply isn't thinking in terms of html.
...rather than having to negotiate the dom figuring out what your global offset refers to, the user agent (
browser) can instead go directly to the node indicated by the starting position and start from there, working its way forward until it reaches the given offset into the ending node.
AddressErrors - Web APIs
request.onshippingaddresschange = handleaddresschange; // call show() to trigger the
browser's payment flow.
... note: if you have content blocking features enabled in your
browser, the example may not work inline below.
Ambient Light Events - Web APIs
light events when the light sensor of a device detects a change in the light level, it notifies the
browser of that change.
... when the
browser gets such a notification, it fires a devicelightevent event that provides information about the exact light intensity (in lux units).
AnalyserNode.AnalyserNode() - Web APIs
browser compatibility the compatibility table on this page is generated from structured data.
... if you'd like to contribute to the data, please check out https://github.com/mdn/
browser-compat-data and send us a pull request.
Animation.persist() - Web APIs
the persist() method of the web animations api's animation interface explicitly persists an animation, when it would otherwise be removed due to the
browser's automatically removing filling animations behavior.
...for this reason, modern
browsers automatically remove overriding forward filling animations.
Animation.replaceState - Web APIs
the value can be one of: active: the initial value of the animation's replace state; when the animation has been removed by the
browser's automatically removing filling animations behavior.
...for this reason, modern
browsers automatically remove overriding forward filling animations.
Animation - Web APIs
animation.persist() explicitly persists an animation, when it would otherwise be removed due to the
browser's automatically removing filling animations behavior.
...for this reason, modern
browsers have implemented the part of the web animations spec that automatically removes overriding forward filling animations, unless the developer explicitly specifies to keep them.
AudioBuffer() - Web APIs
browser compatibility the compatibility table on this page is generated from structured data.
... if you'd like to contribute to the data, please check out https://github.com/mdn/
browser-compat-data and send us a pull request.
AudioBufferSourceNode.AudioBufferSourceNode() - Web APIs
browser compatibility the compatibility table on this page is generated from structured data.
... if you'd like to contribute to the data, please check out https://github.com/mdn/
browser-compat-data and send us a pull request.
AudioContext() - Web APIs
usage notes the specification doesn't go into a lot of detail about things like how many audio contexts a user agent should support, or minimum or maximum latency requirements (if any), so these details can vary from
browser to
browser.
... in particular, the specification doesn't indicate a maximum or minimum number of audio contexts that must be able to be open at the same time, so this is left up to the
browser implementations to decide.
AudioContext.getOutputTimestamp() - Web APIs
browser compatibility the compatibility table on this page is generated from structured data.
... if you'd like to contribute to the data, please check out https://github.com/mdn/
browser-compat-data and send us a pull request.
AudioParam.cancelAndHoldAtTime() - Web APIs
browser compatibility the compatibility table on this page is generated from structured data.
... if you'd like to contribute to the data, please check out https://github.com/mdn/
browser-compat-data and send us a pull request.
AudioWorkletProcessor.process - Web APIs
if the combination of the return value and the state of the node causes the
browser to decide to stop the node, process() will not be called again.
... returning true forces the web audio api to keep the node alive, while returning false allows the
browser to terminate the node if it is neither generating new audio data nor receiving data through its inputs that it is processing.
BaseAudioContext.createConstantSource() - Web APIs
browser compatibility the compatibility table on this page is generated from structured data.
... if you'd like to contribute to the data, please check out https://github.com/mdn/
browser-compat-data and send us a pull request.
BaseAudioContext.currentTime - Web APIs
syntax var curtime = baseaudiocontext.currenttime; example var audiocontext = window.audiocontext || window.webkitaudiocontext; var audioctx = new audiocontext(); // older webkit/blink
browsers require a prefix ...
... console.log(audioctx.currenttime); reduced time precision to offer protection against timing attacks and fingerprinting, the precision of audioctx.currenttime might get rounded depending on
browser settings.
BaseAudioContext.sampleRate - Web APIs
try entering audioctx.samplerate into your
browser console.
... var audiocontext = window.audiocontext || window.webkitaudiocontext; var audioctx = new audiocontext(); // older webkit/blink
browsers require a prefix ...
BasicCardRequest.supportedNetworks - Web APIs
browser compatibility the compatibility table on this page is generated from structured data.
... if you'd like to contribute to the data, please check out https://github.com/mdn/
browser-compat-data and send us a pull request.
Using the Beacon API - Web APIs
if the
browser successfully queues the request for delivery, the method returns true and returns false otherwise.
...age from the worker myworker.onmessage = function(event) { var msg = event.data; // log worker's send status console.log("worker reply: sendbeacon() status = " + msg); }; } this code snippet is for the worker (worker-using.js): onmessage = function(event) { var msg = event.data; // split the url and data from the message var url = msg[0]; var data = msg[1]; // if the
browser supports worker sendbeacon(), then send the beacon; otherwise // return failure message to the global context if (self.navigator.sendbeacon) { var status = self.navigator.sendbeacon(url, data); postmessage(status ?
BiquadFilterNode() - Web APIs
browser compatibility the compatibility table on this page is generated from structured data.
... if you'd like to contribute to the data, please check out https://github.com/mdn/
browser-compat-data and send us a pull request.
BlobEvent.timecode - Web APIs
browser compatibility the compatibility table on this page is generated from structured data.
... if you'd like to contribute to the data, please check out https://github.com/mdn/
browser-compat-data and send us a pull request.
BluetoothCharacteristicProperties - Web APIs
browser compatibility the compatibility table on this page is generated from structured data.
... if you'd like to contribute to the data, please check out https://github.com/mdn/
browser-compat-data and send us a pull request.
characteristic - Web APIs
browser compatibility the compatibility table on this page is generated from structured data.
... if you'd like to contribute to the data, please check out https://github.com/mdn/
browser-compat-data and send us a pull request.
readValue() - Web APIs
browser compatibility the compatibility table on this page is generated from structured data.
... if you'd like to contribute to the data, please check out https://github.com/mdn/
browser-compat-data and send us a pull request.
uuid - Web APIs
browser compatibility the compatibility table on this page is generated from structured data.
... if you'd like to contribute to the data, please check out https://github.com/mdn/
browser-compat-data and send us a pull request.
value - Web APIs
browser compatibility the compatibility table on this page is generated from structured data.
... if you'd like to contribute to the data, please check out https://github.com/mdn/
browser-compat-data and send us a pull request.
writeValue() - Web APIs
browser compatibility the compatibility table on this page is generated from structured data.
... if you'd like to contribute to the data, please check out https://github.com/mdn/
browser-compat-data and send us a pull request.
BluetoothRemoteGATTDescriptor - Web APIs
browser compatibility the compatibility table on this page is generated from structured data.
... if you'd like to contribute to the data, please check out https://github.com/mdn/
browser-compat-data and send us a pull request.
ByteLengthQueuingStrategy - Web APIs
browser compatibility the compatibility table on this page is generated from structured data.
... if you'd like to contribute to the data, please check out https://github.com/mdn/
browser-compat-data and send us a pull request.
CSS.supports() - Web APIs
the css.supports() method returns a boolean value indicating if the
browser supports a given css feature, or not.
... return value true if the
browser supports the rule, otherwise false.
CSSPseudoElement - Web APIs
examples basic example using element.pseudo using pseudo-elements, most modern
browsers will automatically add quotation marks around text inside a <q> element.
... (a style rule may be needed to add quotation marks in older
browsers.) the example below demonstrates the basic properties of the csspseudoelement object representing the opening quotation mark.
CSSStyleSheet - Web APIs
notes in some
browsers, if a stylesheet is loaded from a different domain, accessing cssrules results in securityerror.
... a cssstylesheet object is created and inserted into the document's document.stylesheets list automatically by the
browser, when a stylesheet is loaded for a document.
Managing screen orientation - Web APIs
this lets content adjust its layout using css, based on whether the
browser window is in landscape mode (that is, its width is greater than its height) or portrait mode (its height is greater than its width).
... stick on the left */ @media screen and (orientation: landscape) { #toolbar { position: fixed; width: 2.65em; height: 100%; } p { margin-left: 2em; } li + li { margin-top: .5em; } } and here's the result portrait landscape note: the orientation media query actually applies based on the orientation of the
browser window (or iframe) not the orientation of the device.
Using the CSS Painting API - Web APIs
.fancy { background-image: paint(headerhighlight); } putting it together we can then add the fancy class to any element on the page to add a yellow box as a background: <h1 class="fancy">my cool header</h1> the following example will look like the image above in
browsers supporting the css painting api.
... in
browsers that support the css paint api, the example below should appear like the image above.
CSS Properties and Values API - Web APIs
interfaces css.registerproperty defines how a
browser should parse a css custom properties.
... @property defines how a
browser should parse a css custom properties.
Finale - Web APIs
more examples and tutorials there are a variety of demos and further explanations about canvas on these sites: codepen.io front end developer playground & code editor in the
browser.
...new technologies are constantly arriving to make it possible to develop better and more powerful games that can be run in any standards-compliant web
browser.
Hit regions and accessibility - Web APIs
</canvas> tags can be used as a fallback for
browsers which don't support canvas rendering.
...the api has the following three methods (which are still experimental in current web
browsers; check the
browser compatibility tables).
Optimizing canvas - Web APIs
ctx.drawimage(myimage, 0.3, 0.5); this forces the
browser to do extra calculations to create the anti-aliasing effect.
...this information can be used internally by the
browser to optimize rendering.
Using images - Web APIs
external images can be used in any format supported by the
browser, such as png, gif, or jpeg.
... if you try to call drawimage() before the image has finished loading, it won't do anything (or, in older
browsers, may even throw an exception).
ClipboardItem() - Web APIs
note: image format support varies by
browser.
... see the
browser compatibility table for the clipboard interface.
ConstantSourceNode - Web APIs
some
browsers' implementations of this event handler are part of the audioscheduledsourcenode interface.
... some
browsers' implementations of these methods are part of the audioscheduledsourcenode interface.
ConvolverNode() - Web APIs
browser compatibility the compatibility table on this page is generated from structured data.
... if you'd like to contribute to the data, please check out https://github.com/mdn/
browser-compat-data and send us a pull request.
CountQueuingStrategy - Web APIs
browser compatibility the compatibility table on this page is generated from structured data.
... if you'd like to contribute to the data, please check out https://github.com/mdn/
browser-compat-data and send us a pull request.
CrashReportBody - Web APIs
a crash report is generated when a document becomes unusable due to the
browser (or one of its processes) crashing.
...current possible reasons are: oom: the
browser ran out of memory.
DOMException() - Web APIs
browser compatibility the compatibility table on this page is generated from structured data.
... if you'd like to contribute to the data, please check out https://github.com/mdn/
browser-compat-data and send us a pull request.
DOMException.code - Web APIs
candidate recommendation
browser compatibility the compatibility table on this page is generated from structured data.
... if you'd like to contribute to the data, please check out https://github.com/mdn/
browser-compat-data and send us a pull request.
DOMException.message - Web APIs
candidate recommendation
browser compatibility the compatibility table on this page is generated from structured data.
... if you'd like to contribute to the data, please check out https://github.com/mdn/
browser-compat-data and send us a pull request.
DOMRectReadOnly.fromRect() - Web APIs
browser compatibility the compatibility table on this page is generated from structured data.
... if you'd like to contribute to the data, please check out https://github.com/mdn/
browser-compat-data and send us a pull request.
DataTransfer.files - Web APIs
this feature can be used to drag files from a user's desktop to the
browser.
... example there are two live examples of this interface: firefox only: http://jsfiddle.net/9c2ef/ all
browsers: https://jsbin.com/hiqasek/ specifications specification status comment html living standardthe definition of 'files' in that specification.
DelayNode() - Web APIs
browser compatibility the compatibility table on this page is generated from structured data.
... if you'd like to contribute to the data, please check out https://github.com/mdn/
browser-compat-data and send us a pull request.
DeprecationReportBody - Web APIs
anticipatedremoval a date object (rendered as a string) representing the date when the feature is expected to be removed from the current
browser.
...this typically matches the message a
browser will display in its devtools console when a deprecated feature is used, if one is available.
Detecting device orientation - Web APIs
orientation example this example will work on any
browser supporting the deviceorientation event and running on a device able to detect its orientation.
...90; y += 90; // 10 is half the size of the ball // it center the positioning point to the center of the ball ball.style.top = (maxy*y/180 - 10) + "px"; ball.style.left = (maxx*x/180 - 10) + "px"; } window.addeventlistener('deviceorientation', handleorientation); click here to open this example in a new window; because deviceorientation doesn't work in a cross-origin <iframe> in all
browsers.
DisplayMediaStreamConstraints.video - Web APIs
the value may be a single one of the following strings, or an array of them to allow the
browser flexibility in deciding what to do about the cursor.
...
browser the stream contains the contents of a single
browser tab selected by the user.
Document.createDocumentFragment() - Web APIs
you can also use the documentfragment constructor to create a new fragment: let fragment = new documentfragment(); example this example creates a list of major web
browsers in a documentfragment, then adds the new dom subtree to the document to be displayed.
... html <ul id="ul"> </ul> javascript var element = document.getelementbyid('ul'); // assuming ul exists var fragment = document.createdocumentfragment(); var
browsers = ['firefox', 'chrome', 'opera', 'safari', 'internet explorer'];
browsers.foreach(function(
browser) { var li = document.createelement('li'); li.textcontent =
browser; fragment.appendchild(li); }); element.appendchild(fragment); result specifications specification status comment domthe definition of 'document.createdocumentfragment()' in that specification.
Document.createElementNS() - Web APIs
for backwards compatibility with previous versions of the custom elements specification, some
browsers will allow you to pass a string here instead of an object, where the string's value is the custom element's tag name.
...custom elements are an experimental feature only available in some
browsers.
Document.fonts - Web APIs
working draft initial definition
browser compatibility the compatibility table on this page is generated from structured data.
... if you'd like to contribute to the data, please check out https://github.com/mdn/
browser-compat-data and send us a pull request.
Document.forms - Web APIs
browser compatibility the compatibility table on this page is generated from structured data.
... if you'd like to contribute to the data, please check out https://github.com/mdn/
browser-compat-data and send us a pull request.
Document.ononline - Web APIs
the document.online event is fired on the <body> of each page when the
browser switches between online and offline mode.
... window.navigator.online returns boolean true if the
browser is online and false if it is definitely offline (disconnected from the network).
DocumentFragment.querySelector() - Web APIs
browser compatibility the compatibility table in this page is generated from structured data.
... if you'd like to contribute to the data, please check out https://github.com/mdn/
browser-compat-data and send us a pull request.
DocumentOrShadowRoot.getSelection() - Web APIs
browser compatibility the compatibility table on this page is generated from structured data.
... if you'd like to contribute to the data, please check out https://github.com/mdn/
browser-compat-data and send us a pull request.
Using the W3C DOM Level 1 Core - Web APIs
due to the ubiquity of the dom, this api is supported in all major
browsers, including mozilla firefox and microsoft internet explorer, and serves as a base for scripting on the web.
...for example, the following document <html> <head> <title>my document</title> </head> <body> <h1>header</h1> <p>paragraph</p> </body> </html> has a dom tree that looks like this: (note that, although the above tree is similar to the above document's dom tree, it's not identical, as the actual dom tree preserves whitespace.) when a web
browser parses an html document, it builds a dom tree and then uses it to display the document.
DynamicsCompressorNode() - Web APIs
browser compatibility the compatibility table on this page is generated from structured data.
... if you'd like to contribute to the data, please check out https://github.com/mdn/
browser-compat-data and send us a pull request.
EffectTiming.easing - Web APIs
the
browser flips to a different static frame when each interval is reached, rather than animating smoothly.
...the
browser flips to a different static frame when each interval is reached, rather than animating smoothly.
Element.accessKey - Web APIs
the element.accesskey property is seldom used because of its multiple conflicts with already present key bindings in
browsers.
... to work around this,
browsers implement accesskey behavior if the keys are pressed with other "qualifying" keys (such as alt + accesskey).
Element.animate() - Web APIs
document.getelementbyid("tunnel").animate([ // keyframes { transform: 'translatey(0px)' }, { transform: '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.
... a single keyframe), and the
browser will infer the other end of the animation if it is able to.
Element.computedStyleMap() - Web APIs
lues, adding a <dt> and <dd> for each for (const [prop, val] of allcomputedstyles) { // properties const cssproperty = document.createelement('dt'); cssproperty.appendchild(document.createtextnode(prop)); styleslist.appendchild(cssproperty); // values const cssvalue = document.createelement('dd'); cssvalue.appendchild(document.createtextnode(val)); styleslist.appendchild(cssvalue); } in
browsers that support computedstylemap(), you'll see a list of all the css properties and values.
... in other
browsers you'll just see a link.
Element.getBoundingClientRect() - Web APIs
cross-
browser fallback scripts requiring high cross-
browser compatibility can use window.pagexoffset and window.pageyoffset instead of window.scrollx and window.scrolly.
... working draft initial definition notes the returned domrect object can be modified in modern
browsers.
Element.matches() - Web APIs
polyfill for
browsers that do not support element.matches() or element.matchesselector(), but include support for document.queryselectorall(), a polyfill exists: if (!element.prototype.matches) { element.prototype.matches = element.prototype.matchesselector || element.prototype.mozmatchesselector || element.prototype.msmatchesselector || element.prototype.omatchesselector || element.p...
...rototype.webkitmatchesselector || function(s) { var matches = (this.document || this.ownerdocument).queryselectorall(s), i = matches.length; while (--i >= 0 && matches.item(i) !== this) {} return i > -1; }; } however, given the practicality of supporting older
browsers, the following should suffice for most (if not all) practical cases (i.e.
Element.namespaceURI - Web APIs
if the namespaceuri returns the xul namespace and the localname returns "
browser", then the node is understood to be a xul <
browser/>.
... if (element.localname == "
browser" && element.namespaceuri == "http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul") { // this is a xul
browser } notes this is not a computed value that is the result of a namespace lookup based on an examination of the namespace declarations in scope.
Element.requestFullscreen() - Web APIs
check
browser compatibility in fullscreen for specifics on when each
browser made this change.
...the default value is "auto", which indicates that the
browser should decide what to do.
Element.scroll() - Web APIs
browser compatibility the compatibility table in this page is generated from structured data.
... if you'd like to contribute to the data, please check out https://github.com/mdn/
browser-compat-data and send us a pull request.
Element.scrollIntoViewIfNeeded() - Web APIs
the element.scrollintoviewifneeded() method scrolls the current element into the visible area of the
browser window if it's not already within the visible area of the
browser window.
... if the element is already within the visible area of the
browser window, then no scrolling takes place.
Element.scrollTo() - Web APIs
browser compatibility the compatibility table in this page is generated from structured data.
... if you'd like to contribute to the data, please check out https://github.com/mdn/
browser-compat-data and send us a pull request.
Element.setCapture() - Web APIs
warning: this interface never had much cross-
browser support and you probably looking for element.setpointercapture instead, from the pointer events api.
...style> <script type="text/javascript"> function init() { var btn = document.getelementbyid("mybutton"); if (btn.setcapture) { btn.addeventlistener("mousedown", mousedown, false); btn.addeventlistener("mouseup", mouseup, false); } else { document.getelementbyid("output").innerhtml = "sorry, there appears to be no setcapture support on this
browser"; } } function mousedown(e) { e.target.setcapture(); e.target.addeventlistener("mousemove", mousemoved, false); } function mouseup(e) { e.target.removeeventlistener("mousemove", mousemoved, false); } function mousemoved(e) { var output = document.getelementbyid("output"); output.innerhtml = "position: " + e.clientx + ", " + e.clienty;...
Element.slot - Web APIs
living standard
browser compatibility the compatibility table on this page is generated from structured data.
... if you'd like to contribute to the data, please check out https://github.com/mdn/
browser-compat-data and send us a pull request.
Event.cancelable - Web APIs
most
browser-native events that can be canceled are the ones that result from the user interacting with the page.
... example for example,
browser vendors are proposing that the wheel event can only be canceled the first time the listener is called — any following wheel events cannot be canceled.
Event.initEvent() - Web APIs
browser compatibility the compatibility table on this page is generated from structured data.
... if you'd like to contribute to the data, please check out https://github.com/mdn/
browser-compat-data and send us a pull request.
EventTarget.dispatchEvent() - Web APIs
browser compatibility the compatibility table on this page is generated from structured data.
... if you'd like to contribute to the data, please check out https://github.com/mdn/
browser-compat-data and send us a pull request.
FederatedCredential.protocol - Web APIs
browser compatibility the compatibility table in this page is generated from structured data.
... if you'd like to contribute to the data, please check out https://github.com/mdn/
browser-compat-data and send us a pull request.
FederatedCredential.provider - Web APIs
browser compatibility the compatibility table in this page is generated from structured data.
... if you'd like to contribute to the data, please check out https://github.com/mdn/
browser-compat-data and send us a pull request.
FetchEvent.navigationPreload - Web APIs
browser compatibility the compatibility table on this page is generated from structured data.
... if you'd like to contribute to the data, please check out https://github.com/mdn/
browser-compat-data and send us a pull request.
Using files from web applications - Web APIs
if you want to use the dom file api from extensions or other
browser chrome code, you can; however, note there are some additional features to be aware of.
...they can be used to display embedded pdf files or any other resources that can be displayed by the
browser.
File.webkitRelativePath - Web APIs
browser compatibility the compatibility table in this page is generated from structured data.
... if you'd like to contribute to the data, please check out https://github.com/mdn/
browser-compat-data and send us a pull request.
FileList - Web APIs
living standard
browser compatibility the compatibility table on this page is generated from structured data.
... if you'd like to contribute to the data, please check out https://github.com/mdn/
browser-compat-data and send us a pull request.
FileSystem.name - Web APIs
browser compatibility the compatibility table on this page is generated from structured data.
... if you'd like to contribute to the data, please check out https://github.com/mdn/
browser-compat-data and send us a pull request.
FileSystem.root - Web APIs
browser compatibility the compatibility table on this page is generated from structured data.
... if you'd like to contribute to the data, please check out https://github.com/mdn/
browser-compat-data and send us a pull request.
FileSystemDirectoryEntry.createReader() - Web APIs
browser compatibility the compatibility table on this page is generated from structured data.
... if you'd like to contribute to the data, please check out https://github.com/mdn/
browser-compat-data and send us a pull request.
FileSystemDirectoryEntry.getDirectory() - Web APIs
browser compatibility the compatibility table on this page is generated from structured data.
... if you'd like to contribute to the data, please check out https://github.com/mdn/
browser-compat-data and send us a pull request.
FileSystemDirectoryEntry.getFile() - Web APIs
browser compatibility the compatibility table on this page is generated from structured data.
... if you'd like to contribute to the data, please check out https://github.com/mdn/
browser-compat-data and send us a pull request.
FileSystemEntry.filesystem - Web APIs
browser compatibility the compatibility table on this page is generated from structured data.
... if you'd like to contribute to the data, please check out https://github.com/mdn/
browser-compat-data and send us a pull request.
FileSystemEntry.fullPath - Web APIs
browser compatibility the compatibility table on this page is generated from structured data.
... if you'd like to contribute to the data, please check out https://github.com/mdn/
browser-compat-data and send us a pull request.
FileSystemEntry.getParent() - Web APIs
browser compatibility the compatibility table on this page is generated from structured data.
... if you'd like to contribute to the data, please check out https://github.com/mdn/
browser-compat-data and send us a pull request.
FileSystemEntry.isDirectory - Web APIs
browser compatibility the compatibility table on this page is generated from structured data.
... if you'd like to contribute to the data, please check out https://github.com/mdn/
browser-compat-data and send us a pull request.
FileSystemEntry.isFile - Web APIs
browser compatibility the compatibility table on this page is generated from structured data.
... if you'd like to contribute to the data, please check out https://github.com/mdn/
browser-compat-data and send us a pull request.
FileSystemEntry.name - Web APIs
browser compatibility the compatibility table on this page is generated from structured data.
... if you'd like to contribute to the data, please check out https://github.com/mdn/
browser-compat-data and send us a pull request.
FileSystemFileEntry.file() - Web APIs
browser compatibility the compatibility table on this page is generated from structured data.
... if you'd like to contribute to the data, please check out https://github.com/mdn/
browser-compat-data and send us a pull request.
FileSystemFlags.create - Web APIs
browser compatibility the compatibility table on this page is generated from structured data.
... if you'd like to contribute to the data, please check out https://github.com/mdn/
browser-compat-data and send us a pull request.
FileSystemFlags.exclusive - Web APIs
browser compatibility the compatibility table on this page is generated from structured data.
... if you'd like to contribute to the data, please check out https://github.com/mdn/
browser-compat-data and send us a pull request.
FileSystemFlags - Web APIs
browser compatibility the compatibility table on this page is generated from structured data.
... if you'd like to contribute to the data, please check out https://github.com/mdn/
browser-compat-data and send us a pull request.
FontFaceSetLoadEvent.FontFaceSetLoadEvent() - Web APIs
browser compatibility the compatibility table on this page is generated from structured data.
... if you'd like to contribute to the data, please check out https://github.com/mdn/
browser-compat-data and send us a pull request.
FontFaceSetLoadEvent.fontfaces - Web APIs
browser compatibility the compatibility table on this page is generated from structured data.
... if you'd like to contribute to the data, please check out https://github.com/mdn/
browser-compat-data and send us a pull request.
FontFaceSetLoadEvent - Web APIs
browser compatibility the compatibility table on this page is generated from structured data.
... if you'd like to contribute to the data, please check out https://github.com/mdn/
browser-compat-data and send us a pull request.
FullscreenOptions - Web APIs
properties navigationuioptional a string controlling whether or not to keep
browser user interface elements visible while the element is in full-screen mode.
... the default, "auto", lets the
browser make this decision.
GainNode() - Web APIs
browser compatibility the compatibility table on this page is generated from structured data.
... if you'd like to contribute to the data, please check out https://github.com/mdn/
browser-compat-data and send us a pull request.
Gamepad.mapping - Web APIs
the gamepad.mapping property of the gamepad interface returns a string indicating whether the
browser has remapped the controls on the device to a known layout.
...if the
browser is able to map controls on the device to that layout the mapping property will be set to the string standard.
GlobalEventHandlers.onanimationcancel - Web APIs
in
browsers that support animationcancel, the event is fired and this handler is called.
... result assembled together, you get this: if your
browser supports animationcancel, hiding the box using the button will cause a message to be displayed about the event.
GlobalEventHandlers.onauxclick - Web APIs
note:
browser vendors are implementing this property as part of a plan to improve compatibility with regards to button behaviors.
...historically, click has generally fired for the click of any device input button, although with
browser behavior being somewhat inconsistent.
HTMLAnchorElement.download - Web APIs
the htmlanchorelement.download property is a domstring indicating that the linked resource is intended to be downloaded rather than displayed in the
browser.
...if the name is not a valid file name in the underlying os, the
browser will adjust it.
HTMLAnchorElement.referrerPolicy - Web APIs
browser compatibility the compatibility table on this page is generated from structured data.
... if you'd like to contribute to the data, please check out https://github.com/mdn/
browser-compat-data and send us a pull request.
HTMLAnchorElement - Web APIs
htmlanchorelement.download is a domstring indicating that the linked resource is intended to be downloaded rather than displayed in the
browser.
...if the name is not a valid filename of the underlying os,
browser will adapt it.
HTMLAreaElement.referrerPolicy - Web APIs
browser compatibility the compatibility table on this page is generated from structured data.
... if you'd like to contribute to the data, please check out https://github.com/mdn/
browser-compat-data and send us a pull request.
HTMLAreaElement - Web APIs
htmlareaelement.download is a domstring indicating that the linked resource is intended to be downloaded rather than displayed in the
browser.
...if the name is not a valid filename of the underlying os,
browser will adapt it.
HTMLBaseFontElement - Web APIs
the document text in the default style is rendered in the first font face that the client's
browser supports.
... if no font listed is installed on the local system, the
browser typically defaults to the proportional or fixed-width font for that system.
HTMLButtonElement - Web APIs
htmlbuttonelement.formmethod is a domstring reflecting the http method that the
browser uses to submit the form.
... with gecko-based
browser, use the :-moz-submit-invalid pseudo-class to style submit buttons based on the validation of a form.
HTMLCanvasElement - Web APIs
this is only supported in mozilla-based
browsers; use the standardized canvas.getcontext('2d', { alpha: false }) instead.
...this context is only available on
browsers that implement webgl.
inert - Web APIs
the boolean inert attribute, when present, may make the
browser "ignore" the element from assistive technologies, page search and text selection.
... polyfills currently,
browser support is lacking.
HTMLElement.offsetParent - Web APIs
working draft
browser compatibility the compatibility table on this page is generated from structured data.
... if you'd like to contribute to the data, please check out https://github.com/mdn/
browser-compat-data and send us a pull request.
HTMLFontElement.face - Web APIs
the document text, in the default style, is rendered as the first font face that the client's
browser supports.
... if no font listed is installed on the local system, the
browser typically defaults to the proportional or fixed-width font for that system.
HTMLFormElement - Web APIs
htmlformelement.autocomplete a domstring reflecting the value of the form's autocomplete html attribute, indicating whether the controls in this form can have their values automatically populated by the
browser.
... deprecated methods htmlformelement.requestautocomplete() triggers a native
browser interface to assist the user in completing the fields which have an autofill field name value that is not off or on.
HTMLIFrameElement.allowPaymentRequest - Web APIs
living standard
browser compatibility the compatibility table on this page is generated from structured data.
... if you'd like to contribute to the data, please check out https://github.com/mdn/
browser-compat-data and send us a pull request.
HTMLIFrameElement.csp - Web APIs
browser compatibility the compatibility table on this page is generated from structured data.
... if you'd like to contribute to the data, please check out https://github.com/mdn/
browser-compat-data and send us a pull request.
HTMLIFrameElement.referrerPolicy - Web APIs
living standard
browser compatibility the compatibility table on this page is generated from structured data.
... if you'd like to contribute to the data, please check out https://github.com/mdn/
browser-compat-data and send us a pull request.
HTMLIFrameElement.src - Web APIs
living standard
browser compatibility the compatibility table on this page is generated from structured data.
... if you'd like to contribute to the data, please check out https://github.com/mdn/
browser-compat-data and send us a pull request.
HTMLIFrameElement - Web APIs
htmliframeelement.scrolling is a domstring that indicates whether the
browser should provide scrollbars for the frame.
...via element.removeattribute()) causes about:blank to be loaded in the frame in firefox (from version 65), chromium-based
browsers, and safari/ios.
HTMLImageElement.align - Web APIs
recommendation
browser compatibility the compatibility table on this page is generated from structured data.
... if you'd like to contribute to the data, please check out https://github.com/mdn/
browser-compat-data and send us a pull request.
HTMLImageElement.border - Web APIs
recommendation
browser compatibility the compatibility table on this page is generated from structured data.
... if you'd like to contribute to the data, please check out https://github.com/mdn/
browser-compat-data and send us a pull request.
HTMLImageElement.complete - Web APIs
unknown
browser compatibility the compatibility table on this page is generated from structured data.
... if you'd like to contribute to the data, please check out https://github.com/mdn/
browser-compat-data and send us a pull request.
HTMLImageElement.crossOrigin - Web APIs
unknown
browser compatibility the compatibility table on this page is generated from structured data.
... if you'd like to contribute to the data, please check out https://github.com/mdn/
browser-compat-data and send us a pull request.
HTMLImageElement.height - Web APIs
living standard
browser compatibility the compatibility table on this page is generated from structured data.
... if you'd like to contribute to the data, please check out https://github.com/mdn/
browser-compat-data and send us a pull request.
HTMLImageElement.hspace - Web APIs
browser compatibility the compatibility table on this page is generated from structured data.
... if you'd like to contribute to the data, please check out https://github.com/mdn/
browser-compat-data and send us a pull request.
HTMLImageElement.longDesc - Web APIs
browser compatibility the compatibility table on this page is generated from structured data.
... if you'd like to contribute to the data, please check out https://github.com/mdn/
browser-compat-data and send us a pull request.
HTMLImageElement.lowSrc - Web APIs
browser compatibility the compatibility table on this page is generated from structured data.
... if you'd like to contribute to the data, please check out https://github.com/mdn/
browser-compat-data and send us a pull request.
HTMLImageElement.name - Web APIs
recommendation provides additional details not available in the html 5
browser compatibility the compatibility table on this page is generated from structured data.
... if you'd like to contribute to the data, please check out https://github.com/mdn/
browser-compat-data and send us a pull request.
HTMLImageElement.naturalHeight - Web APIs
living standard
browser compatibility the compatibility table on this page is generated from structured data.
... if you'd like to contribute to the data, please check out https://github.com/mdn/
browser-compat-data and send us a pull request.
HTMLImageElement.naturalWidth - Web APIs
living standard
browser compatibility the compatibility table on this page is generated from structured data.
... if you'd like to contribute to the data, please check out https://github.com/mdn/
browser-compat-data and send us a pull request.
HTMLImageElement.referrerPolicy - Web APIs
browser compatibility the compatibility table on this page is generated from structured data.
... if you'd like to contribute to the data, please check out https://github.com/mdn/
browser-compat-data and send us a pull request.
HTMLImageElement.useMap - Web APIs
living standard
browser compatibility the compatibility table on this page is generated from structured data.
... if you'd like to contribute to the data, please check out https://github.com/mdn/
browser-compat-data and send us a pull request.
HTMLImageElement.vspace - Web APIs
browser compatibility the compatibility table on this page is generated from structured data.
... if you'd like to contribute to the data, please check out https://github.com/mdn/
browser-compat-data and send us a pull request.
HTMLImageElement.width - Web APIs
living standard
browser compatibility the compatibility table on this page is generated from structured data.
... if you'd like to contribute to the data, please check out https://github.com/mdn/
browser-compat-data and send us a pull request.
HTMLImageElement.x - Web APIs
working draft
browser compatibility the compatibility table on this page is generated from structured data.
... if you'd like to contribute to the data, please check out https://github.com/mdn/
browser-compat-data and send us a pull request.
HTMLImageElement.y - Web APIs
working draft
browser compatibility the compatibility table on this page is generated from structured data.
... if you'd like to contribute to the data, please check out https://github.com/mdn/
browser-compat-data and send us a pull request.
HTMLLinkElement.as - Web APIs
browser compatibility the compatibility table on this page is generated from structured data.
... if you'd like to contribute to the data, please check out https://github.com/mdn/
browser-compat-data and send us a pull request.
HTMLMediaElement.autoplay - Web APIs
for a much more in-depth look at autoplay, autoplay blocking, and how to respond whena autoplay is blocked by the user's
browser, see our article autoplay guide for media and web audio apis.
... note: some
browsers offer users the ability to override autoplay in order to prevent disruptive audio or video from playing without permission or in the background.
HTMLMediaElement.controlsList - Web APIs
specifications specification status comment controls list api: solution outline
browser compatibility the compatibility table on this page is generated from structured data.
... if you'd like to contribute to the data, please check out https://github.com/mdn/
browser-compat-data and send us a pull request.
HTMLMediaElement.currentTime - Web APIs
for media without a known duration—such as media being streamed live—it's possible that the
browser may not be able to obtain parts of the media that have expired from the media buffer.
... example var video = document.createelement('video'); console.log(video.currenttime); usage notes reduced time precision to offer protection against timing attacks and fingerprinting,
browsers may round or otherwise adjust the value returned by currenttime.
HTMLMediaElement.onencrypted - Web APIs
browser compatibility the compatibility table on this page is generated from structured data.
... if you'd like to contribute to the data, please check out https://github.com/mdn/
browser-compat-data and send us a pull request.
HTMLMediaElement.onwaitingforkey - Web APIs
browser compatibility the compatibility table on this page is generated from structured data.
... if you'd like to contribute to the data, please check out https://github.com/mdn/
browser-compat-data and send us a pull request.
HTMLMediaElement.setMediaKeys() - Web APIs
browser compatibility the compatibility table on this page is generated from structured data.
... if you'd like to contribute to the data, please check out https://github.com/mdn/
browser-compat-data and send us a pull request.
HTMLElement.focus() - Web APIs
this object may contain the following property: preventscroll optional a boolean value indicating whether or not the
browser should scroll the document to bring the newly-focused element into view.
... a value of false for preventscroll (the default) means that the
browser will scroll the element into view after focusing it.
HTMLScriptElement.referrerPolicy - Web APIs
living standard
browser compatibility the compatibility table on this page is generated from structured data.
... if you'd like to contribute to the data, please check out https://github.com/mdn/
browser-compat-data and send us a pull request.
HTMLSlotElement.assignedElements() - Web APIs
living standard
browser compatibility the compatibility table on this page is generated from structured data.
... if you'd like to contribute to the data, please check out https://github.com/mdn/
browser-compat-data and send us a pull request.
HTMLSlotElement.name - Web APIs
living standard
browser compatibility the compatibility table on this page is generated from structured data.
... if you'd like to contribute to the data, please check out https://github.com/mdn/
browser-compat-data and send us a pull request.
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.
Using microtasks in JavaScript with queueMicrotask() - Web APIs
this event loop may be either the
browser's main event loop or the event loop driving a web worker.
...they're a highly specialized feature of modern
browser-based javascript development, allowing you to schedule code to jump in front of other things in the long set of things waiting to happen on the user's computer.
Recommended Drag Types - Web APIs
caution: all methods and properties in this document with a moz prefix, such as mozsetdataat(), will only work with gecko-based
browsers.
...for example: event.datatransfer.setdata("text/plain", "this is text to drag"); dragging text in textboxes and selections on web pages is done automatically by the
browser, so you do not need to handle it yourself.
History.replaceState() - Web APIs
title most
browsers currently ignore this parameter, although they may use it in the future.
...then suppose https://www.mozilla.org/bar.html executes the following javascript: history.replacestate(stateobj, '', 'bar2.html'); this will cause the url bar to display https://www.mozilla.org/bar2.html, but won't cause the
browser to load bar2.html or even check that bar2.html exists.
History.scrollRestoration - Web APIs
browser compatibility the compatibility table on this page is generated from structured data.
... if you'd like to contribute to the data, please check out https://github.com/mdn/
browser-compat-data and send us a pull request.
IDBCursor.advance() - Web APIs
recommendation
browser compatibility the compatibility table on this page is generated from structured data.
... if you'd like to contribute to the data, please check out https://github.com/mdn/
browser-compat-data and send us a pull request.
IDBCursor.continue() - Web APIs
recommendation
browser compatibility the compatibility table on this page is generated from structured data.
... if you'd like to contribute to the data, please check out https://github.com/mdn/
browser-compat-data and send us a pull request.
IDBCursor.delete() - Web APIs
recommendation
browser compatibility the compatibility table on this page is generated from structured data.
... if you'd like to contribute to the data, please check out https://github.com/mdn/
browser-compat-data and send us a pull request.
IDBCursor.direction - Web APIs
recommendation
browser compatibility the compatibility table on this page is generated from structured data.
... if you'd like to contribute to the data, please check out https://github.com/mdn/
browser-compat-data and send us a pull request.
IDBCursor.key - Web APIs
recommendation
browser compatibility the compatibility table on this page is generated from structured data.
... if you'd like to contribute to the data, please check out https://github.com/mdn/
browser-compat-data and send us a pull request.
IDBCursor.primaryKey - Web APIs
recommendation
browser compatibility the compatibility table on this page is generated from structured data.
... if you'd like to contribute to the data, please check out https://github.com/mdn/
browser-compat-data and send us a pull request.
IDBCursor.request - Web APIs
browser compatibility the compatibility table on this page is generated from structured data.
... if you'd like to contribute to the data, please check out https://github.com/mdn/
browser-compat-data and send us a pull request.
IDBCursor.source - Web APIs
recommendation
browser compatibility the compatibility table on this page is generated from structured data.
... if you'd like to contribute to the data, please check out https://github.com/mdn/
browser-compat-data and send us a pull request.
IDBCursor.update() - Web APIs
recommendation
browser compatibility the compatibility table on this page is generated from structured data.
... if you'd like to contribute to the data, please check out https://github.com/mdn/
browser-compat-data and send us a pull request.
IDBCursorWithValue.value - Web APIs
recommendation
browser compatibility the compatibility table on this page is generated from structured data.
... if you'd like to contribute to the data, please check out https://github.com/mdn/
browser-compat-data and send us a pull request.
IDBCursorWithValue - Web APIs
recommendation
browser compatibility the compatibility table on this page is generated from structured data.
... if you'd like to contribute to the data, please check out https://github.com/mdn/
browser-compat-data and send us a pull request.
IDBDatabase.close() - Web APIs
recommendation
browser compatibility the compatibility table on this page is generated from structured data.
... if you'd like to contribute to the data, please check out https://github.com/mdn/
browser-compat-data and send us a pull request.
IDBDatabase.name - Web APIs
recommendation
browser compatibility the compatibility table on this page is generated from structured data.
... if you'd like to contribute to the data, please check out https://github.com/mdn/
browser-compat-data and send us a pull request.
IDBDatabase.objectStoreNames - Web APIs
recommendation
browser compatibility the compatibility table on this page is generated from structured data.
... if you'd like to contribute to the data, please check out https://github.com/mdn/
browser-compat-data and send us a pull request.
IDBDatabase.onabort - Web APIs
recommendation
browser compatibility the compatibility table on this page is generated from structured data.
... if you'd like to contribute to the data, please check out https://github.com/mdn/
browser-compat-data and send us a pull request.
IDBDatabase.onclose - Web APIs
recommendation
browser compatibility the compatibility table on this page is generated from structured data.
... if you'd like to contribute to the data, please check out https://github.com/mdn/
browser-compat-data and send us a pull request.
IDBDatabase.onerror - Web APIs
recommendation
browser compatibility the compatibility table on this page is generated from structured data.
... if you'd like to contribute to the data, please check out https://github.com/mdn/
browser-compat-data and send us a pull request.
IDBDatabase.version - Web APIs
recommendation
browser compatibility the compatibility table on this page is generated from structured data.
... if you'd like to contribute to the data, please check out https://github.com/mdn/
browser-compat-data and send us a pull request.
IDBDatabase - Web APIs
recommendation
browser compatibility the compatibility table on this page is generated from structured data.
... if you'd like to contribute to the data, please check out https://github.com/mdn/
browser-compat-data and send us a pull request.
IDBFactory.cmp() - Web APIs
recommendation
browser compatibility the compatibility table on this page is generated from structured data.
... if you'd like to contribute to the data, please check out https://github.com/mdn/
browser-compat-data and send us a pull request.
IDBFactory.deleteDatabase() - Web APIs
browser compatibility the compatibility table on this page is generated from structured data.
... if you'd like to contribute to the data, please check out https://github.com/mdn/
browser-compat-data and send us a pull request.
IDBFactory - Web APIs
recommendation
browser compatibility the compatibility table on this page is generated from structured data.
... if you'd like to contribute to the data, please check out https://github.com/mdn/
browser-compat-data and send us a pull request.
IDBIndex.count() - Web APIs
recommendation
browser compatibility the compatibility table on this page is generated from structured data.
... if you'd like to contribute to the data, please check out https://github.com/mdn/
browser-compat-data and send us a pull request.
IDBIndex.getAllKeys() - Web APIs
if this value is null or missing, the
browser will use an unbound key range.
...if this value exceeds the number of records in the query, the
browser will only retrieve the first item.
IDBIndex.keyPath - Web APIs
recommendation
browser compatibility the compatibility table on this page is generated from structured data.
... if you'd like to contribute to the data, please check out https://github.com/mdn/
browser-compat-data and send us a pull request.
IDBIndex.multiEntry - Web APIs
recommendation
browser compatibility the compatibility table on this page is generated from structured data.
... if you'd like to contribute to the data, please check out https://github.com/mdn/
browser-compat-data and send us a pull request.
IDBIndex.name - Web APIs
recommendation
browser compatibility the compatibility table on this page is generated from structured data.
... if you'd like to contribute to the data, please check out https://github.com/mdn/
browser-compat-data and send us a pull request.
IDBIndex.objectStore - Web APIs
recommendation
browser compatibility the compatibility table on this page is generated from structured data.
... if you'd like to contribute to the data, please check out https://github.com/mdn/
browser-compat-data and send us a pull request.
IDBIndex.openCursor() - Web APIs
recommendation
browser compatibility the compatibility table on this page is generated from structured data.
... if you'd like to contribute to the data, please check out https://github.com/mdn/
browser-compat-data and send us a pull request.
IDBIndex.openKeyCursor() - Web APIs
recommendation
browser compatibility the compatibility table on this page is generated from structured data.
... if you'd like to contribute to the data, please check out https://github.com/mdn/
browser-compat-data and send us a pull request.
IDBIndex.unique - Web APIs
recommendation
browser compatibility the compatibility table on this page is generated from structured data.
... if you'd like to contribute to the data, please check out https://github.com/mdn/
browser-compat-data and send us a pull request.
IDBKeyRange.bound() - Web APIs
recommendation
browser compatibility the compatibility table on this page is generated from structured data.
... if you'd like to contribute to the data, please check out https://github.com/mdn/
browser-compat-data and send us a pull request.
IDBKeyRange.lower - Web APIs
recommendation
browser compatibility the compatibility table on this page is generated from structured data.
... if you'd like to contribute to the data, please check out https://github.com/mdn/
browser-compat-data and send us a pull request.
IDBKeyRange.lowerBound() - Web APIs
recommendation
browser compatibility the compatibility table on this page is generated from structured data.
... if you'd like to contribute to the data, please check out https://github.com/mdn/
browser-compat-data and send us a pull request.
IDBKeyRange.lowerOpen - Web APIs
recommendation
browser compatibility the compatibility table on this page is generated from structured data.
... if you'd like to contribute to the data, please check out https://github.com/mdn/
browser-compat-data and send us a pull request.
IDBKeyRange.only() - Web APIs
recommendation
browser compatibility the compatibility table on this page is generated from structured data.
... if you'd like to contribute to the data, please check out https://github.com/mdn/
browser-compat-data and send us a pull request.
IDBKeyRange.upper - Web APIs
recommendation
browser compatibility the compatibility table on this page is generated from structured data.
... if you'd like to contribute to the data, please check out https://github.com/mdn/
browser-compat-data and send us a pull request.
IDBKeyRange.upperBound() - Web APIs
recommendation
browser compatibility the compatibility table on this page is generated from structured data.
... if you'd like to contribute to the data, please check out https://github.com/mdn/
browser-compat-data and send us a pull request.
IDBKeyRange.upperOpen - Web APIs
recommendation
browser compatibility the compatibility table on this page is generated from structured data.
... if you'd like to contribute to the data, please check out https://github.com/mdn/
browser-compat-data and send us a pull request.
IDBKeyRange - Web APIs
browser compatibility the compatibility table on this page is generated from structured data.
... if you'd like to contribute to the data, please check out https://github.com/mdn/
browser-compat-data and send us a pull request.
IDBObjectStore.add() - Web APIs
recommendation
browser compatibility the compatibility table on this page is generated from structured data.
... if you'd like to contribute to the data, please check out https://github.com/mdn/
browser-compat-data and send us a pull request.
IDBObjectStore.autoIncrement - Web APIs
recommendation
browser compatibility the compatibility table on this page is generated from structured data.
... if you'd like to contribute to the data, please check out https://github.com/mdn/
browser-compat-data and send us a pull request.
IDBObjectStore.clear() - Web APIs
recommendation
browser compatibility the compatibility table on this page is generated from structured data.
... if you'd like to contribute to the data, please check out https://github.com/mdn/
browser-compat-data and send us a pull request.
IDBObjectStore.count() - Web APIs
recommendation
browser compatibility the compatibility table on this page is generated from structured data.
... if you'd like to contribute to the data, please check out https://github.com/mdn/
browser-compat-data and send us a pull request.
IDBObjectStore.delete() - Web APIs
recommendation
browser compatibility the compatibility table on this page is generated from structured data.
... if you'd like to contribute to the data, please check out https://github.com/mdn/
browser-compat-data and send us a pull request.
IDBObjectStore.get() - Web APIs
recommendation
browser compatibility the compatibility table on this page is generated from structured data.
... if you'd like to contribute to the data, please check out https://github.com/mdn/
browser-compat-data and send us a pull request.
IDBObjectStore.getKey() - Web APIs
recommendation initial definition
browser compatibility the compatibility table on this page is generated from structured data.
... if you'd like to contribute to the data, please check out https://github.com/mdn/
browser-compat-data and send us a pull request.
IDBObjectStore.index() - Web APIs
recommendation
browser compatibility the compatibility table on this page is generated from structured data.
... if you'd like to contribute to the data, please check out https://github.com/mdn/
browser-compat-data and send us a pull request.
IDBObjectStore.indexNames - Web APIs
recommendation
browser compatibility the compatibility table on this page is generated from structured data.
... if you'd like to contribute to the data, please check out https://github.com/mdn/
browser-compat-data and send us a pull request.
IDBObjectStore.keyPath - Web APIs
recommendation
browser compatibility the compatibility table on this page is generated from structured data.
... if you'd like to contribute to the data, please check out https://github.com/mdn/
browser-compat-data and send us a pull request.
IDBObjectStore.name - Web APIs
recommendation
browser compatibility the compatibility table on this page is generated from structured data.
... if you'd like to contribute to the data, please check out https://github.com/mdn/
browser-compat-data and send us a pull request.
IDBObjectStore.openCursor() - Web APIs
recommendation
browser compatibility the compatibility table on this page is generated from structured data.
... if you'd like to contribute to the data, please check out https://github.com/mdn/
browser-compat-data and send us a pull request.
IDBObjectStore.put() - Web APIs
recommendation
browser compatibility the compatibility table on this page is generated from structured data.
... if you'd like to contribute to the data, please check out https://github.com/mdn/
browser-compat-data and send us a pull request.
IDBObjectStore.transaction - Web APIs
recommendation
browser compatibility the compatibility table on this page is generated from structured data.
... if you'd like to contribute to the data, please check out https://github.com/mdn/
browser-compat-data and send us a pull request.
IDBObjectStore - Web APIs
recommendation
browser compatibility the compatibility table on this page is generated from structured data.
... if you'd like to contribute to the data, please check out https://github.com/mdn/
browser-compat-data and send us a pull request.
IDBOpenDBRequest.onupgradeneeded - Web APIs
recommendation
browser compatibility the compatibility table on this page is generated from structured data.
... if you'd like to contribute to the data, please check out https://github.com/mdn/
browser-compat-data and send us a pull request.
IDBRequest.error - Web APIs
recommendation
browser compatibility the compatibility table on this page is generated from structured data.
... if you'd like to contribute to the data, please check out https://github.com/mdn/
browser-compat-data and send us a pull request.
IDBRequest.onerror - Web APIs
recommendation
browser compatibility the compatibility table on this page is generated from structured data.
... if you'd like to contribute to the data, please check out https://github.com/mdn/
browser-compat-data and send us a pull request.
IDBRequest.onsuccess - Web APIs
recommendation
browser compatibility the compatibility table on this page is generated from structured data.
... if you'd like to contribute to the data, please check out https://github.com/mdn/
browser-compat-data and send us a pull request.
IDBRequest.readyState - Web APIs
recommendation
browser compatibility the compatibility table on this page is generated from structured data.
... if you'd like to contribute to the data, please check out https://github.com/mdn/
browser-compat-data and send us a pull request.
IDBRequest.result - Web APIs
recommendation
browser compatibility the compatibility table on this page is generated from structured data.
... if you'd like to contribute to the data, please check out https://github.com/mdn/
browser-compat-data and send us a pull request.
IDBRequest.source - Web APIs
recommendation
browser compatibility the compatibility table on this page is generated from structured data.
... if you'd like to contribute to the data, please check out https://github.com/mdn/
browser-compat-data and send us a pull request.
IDBRequest.transaction - Web APIs
recommendation
browser compatibility the compatibility table on this page is generated from structured data.
... if you'd like to contribute to the data, please check out https://github.com/mdn/
browser-compat-data and send us a pull request.
IDBTransaction.objectStoreNames - Web APIs
recommendation
browser compatibility the compatibility table on this page is generated from structured data.
... if you'd like to contribute to the data, please check out https://github.com/mdn/
browser-compat-data and send us a pull request.
IDBTransaction.abort() - Web APIs
recommendation
browser compatibility the compatibility table on this page is generated from structured data.
... if you'd like to contribute to the data, please check out https://github.com/mdn/
browser-compat-data and send us a pull request.
IDBTransaction.commit() - Web APIs
browser compatibility the compatibility table on this page is generated from structured data.
... if you'd like to contribute to the data, please check out https://github.com/mdn/
browser-compat-data and send us a pull request.
IDBTransaction.db - Web APIs
recommendation
browser compatibility the compatibility table on this page is generated from structured data.
... if you'd like to contribute to the data, please check out https://github.com/mdn/
browser-compat-data and send us a pull request.
IDBTransaction.error - Web APIs
recommendation
browser compatibility the compatibility table on this page is generated from structured data.
... if you'd like to contribute to the data, please check out https://github.com/mdn/
browser-compat-data and send us a pull request.
IDBTransaction.mode - Web APIs
recommendation
browser compatibility the compatibility table on this page is generated from structured data.
... if you'd like to contribute to the data, please check out https://github.com/mdn/
browser-compat-data and send us a pull request.
IDBTransaction.objectStore() - Web APIs
recommendation
browser compatibility the compatibility table on this page is generated from structured data.
... if you'd like to contribute to the data, please check out https://github.com/mdn/
browser-compat-data and send us a pull request.
IDBTransaction.onabort - Web APIs
recommendation
browser compatibility the compatibility table on this page is generated from structured data.
... if you'd like to contribute to the data, please check out https://github.com/mdn/
browser-compat-data and send us a pull request.
IDBTransaction.onerror - Web APIs
recommendation
browser compatibility the compatibility table on this page is generated from structured data.
... if you'd like to contribute to the data, please check out https://github.com/mdn/
browser-compat-data and send us a pull request.
IDBTransaction - Web APIs
recommendation
browser compatibility the compatibility table on this page is generated from structured data.
... if you'd like to contribute to the data, please check out https://github.com/mdn/
browser-compat-data and send us a pull request.
IDBVersionChangeEvent.newVersion - Web APIs
recommendation
browser compatibility the compatibility table on this page is generated from structured data.
... if you'd like to contribute to the data, please check out https://github.com/mdn/
browser-compat-data and send us a pull request.
IDBVersionChangeEvent.oldVersion - Web APIs
recommendation
browser compatibility the compatibility table on this page is generated from structured data.
... if you'd like to contribute to the data, please check out https://github.com/mdn/
browser-compat-data and send us a pull request.
IDBVersionChangeEvent - Web APIs
warning: while this property is still implemented in older
browsers, the latest specification replaces it with the oldversion and newversion attributes.
... see the compatibility table to know what
browsers support them.
IIRFilterNode() - Web APIs
browser compatibility the compatibility table on this page is generated from structured data.
... if you'd like to contribute to the data, please check out https://github.com/mdn/
browser-compat-data and send us a pull request.
ImageCapture.takePhoto() - Web APIs
browser compatibility the compatibility table on this page is generated from structured data.
... if you'd like to contribute to the data, please check out https://github.com/mdn/
browser-compat-data and send us a pull request.
Checking when a deadline is due - Web APIs
on
browsers that support type="number", you get a nice little up and down arrow number picker.
...this step is mainly for
browsers that don't support html form validation (i have used the required attribute in my html to force validation, in those that do.) else { var newitem = [ { tasktitle: title.value, hours : hours.value, minutes : minutes.value, day : day.value, month : month.value, year : year.value, notified : "no" } ]; ...
InputEvent.dataTransfer - Web APIs
browser compatibility the compatibility table on this page is generated from structured data.
... if you'd like to contribute to the data, please check out https://github.com/mdn/
browser-compat-data and send us a pull request.
InputEvent.getTargetRanges() - Web APIs
browser compatibility the compatibility table on this page is generated from structured data.
... if you'd like to contribute to the data, please check out https://github.com/mdn/
browser-compat-data and send us a pull request.
KeyboardEvent.initKeyEvent() - Web APIs
this method is based on early drafts of document object model (dom) level 2 events specification and is implemented in gecko-based
browsers; other
browsers implemented keyboardevent.initkeyboardevent based on early drafts of document object model (dom) level 3 events specification.
... favor the modern constructor structure as the only cross-
browser way of building events.
KeyframeEffect.setKeyframes() - Web APIs
implicit to/from keyframes in newer
browser versions, you are able to set a beginning or end state for an animation only (i.e.
... a single keyframe), and the
browser will infer the other end of the animation if it is able to.
LargestContentfulPaint - Web APIs
// catch errors since some
browsers throw when using the new `type` option.
... addeventlistener('visibilitychange', function fn() { if (lcp && document.visibilitystate === 'hidden') { console.log('lcp:', lcp); removeeventlistener('visibilitychange', fn, true); } }, true); } catch (e) { // do nothing if the
browser doesn't support this api.
LayoutShift - Web APIs
// catch errors since some
browsers throw when using the new `type` option.
... observer.takerecords(); observer.disconnect(); console.log('cls:', cumulativelayoutshiftscore); } }); } catch (e) { // do nothing if the
browser doesn't support this api.
MediaCapabilities - Web APIs
the mediacapabilities interface of the media capabilities api provides information about the decoding abilities of the device, system and
browser.
... the api can be used to query the
browser about the decoding abilities of the device based on codecs, profile, resolution, and bitrates.
MediaDeviceInfo.deviceId - Web APIs
browser compatibility the compatibility table on this page is generated from structured data.
... if you'd like to contribute to the data, please check out https://github.com/mdn/
browser-compat-data and send us a pull request.
MediaDeviceInfo.kind - Web APIs
browser compatibility the compatibility table on this page is generated from structured data.
... if you'd like to contribute to the data, please check out https://github.com/mdn/
browser-compat-data and send us a pull request.
MediaDevices.getSupportedConstraints() - Web APIs
example this example outputs a list of the constraints supported by your
browser.
... html <p>the following media constraints are supported by your
browser:</p> <ul id="constraintlist"> </ul> css body { font: 15px arial, sans-serif; } javascript let constraintlist = document.getelementbyid("constraintlist"); let supportedconstraints = navigator.mediadevices.getsupportedconstraints(); for (let constraint in supportedconstraints) { if (supportedconstraints.hasownproperty(constraint)) { let elem = document.createelement("li"); elem.innerhtml = "<code>" + constraint + "</code>"; constraintlist.appendchild(elem); } } result specifications specification status comment media capture and streamsthe definition of 'getsupportedconstraints()' in that specification.
MediaDevices - Web APIs
example 'use strict'; // put variables in global scope to make them available to the
browser console.
...eryselector('#errormsg'); navigator.mediadevices.getusermedia(constraints) .then(function(stream) { var videotracks = stream.getvideotracks(); console.log('got stream with constraints:', constraints); console.log('using video device: ' + videotracks[0].label); stream.onremovetrack = function() { console.log('stream ended'); }; window.stream = stream; // make variable available to
browser console video.srcobject = stream; }) .catch(function(error) { if (error.name === 'constraintnotsatisfiederror') { errormsg('the resolution ' + constraints.video.width.exact + 'x' + constraints.video.height.exact + ' px is not supported by your device.'); } else if (error.name === 'permissiondeniederror') { errormsg('permissions have not been granted to use your camera and ' ...
MediaKeyMessageEvent() - Web APIs
browser compatibility the compatibility table on this page is generated from structured data.
... if you'd like to contribute to the data, please check out https://github.com/mdn/
browser-compat-data and send us a pull request.
MediaKeyStatusMap.entries() - Web APIs
browser compatibility the compatibility table on this page is generated from structured data.
... if you'd like to contribute to the data, please check out https://github.com/mdn/
browser-compat-data and send us a pull request.
MediaKeyStatusMap.forEach() - Web APIs
browser compatibility the compatibility table on this page is generated from structured data.
... if you'd like to contribute to the data, please check out https://github.com/mdn/
browser-compat-data and send us a pull request.
MediaKeyStatusMap.get() - Web APIs
browser compatibility the compatibility table on this page is generated from structured data.
... if you'd like to contribute to the data, please check out https://github.com/mdn/
browser-compat-data and send us a pull request.
MediaKeyStatusMap.has() - Web APIs
browser compatibility the compatibility table on this page is generated from structured data.
... if you'd like to contribute to the data, please check out https://github.com/mdn/
browser-compat-data and send us a pull request.
MediaKeyStatusMap.keys() - Web APIs
browser compatibility the compatibility table on this page is generated from structured data.
... if you'd like to contribute to the data, please check out https://github.com/mdn/
browser-compat-data and send us a pull request.
MediaKeyStatusMap.size - Web APIs
browser compatibility the compatibility table on this page is generated from structured data.
... if you'd like to contribute to the data, please check out https://github.com/mdn/
browser-compat-data and send us a pull request.
MediaKeyStatusMap.values() - Web APIs
browser compatibility the compatibility table on this page is generated from structured data.
... if you'd like to contribute to the data, please check out https://github.com/mdn/
browser-compat-data and send us a pull request.
MediaMetadata.album - Web APIs
browser compatibility the compatibility table on this page is generated from structured data.
... if you'd like to contribute to the data, please check out https://github.com/mdn/
browser-compat-data and send us a pull request.
MediaMetadata.artist - Web APIs
browser compatibility the compatibility table on this page is generated from structured data.
... if you'd like to contribute to the data, please check out https://github.com/mdn/
browser-compat-data and send us a pull request.
MediaMetadata.artwork - Web APIs
browser compatibility the compatibility table on this page is generated from structured data.
... if you'd like to contribute to the data, please check out https://github.com/mdn/
browser-compat-data and send us a pull request.
MediaMetadata.title - Web APIs
browser compatibility the compatibility table on this page is generated from structured data.
... if you'd like to contribute to the data, please check out https://github.com/mdn/
browser-compat-data and send us a pull request.
MediaMetadata - Web APIs
browser compatibility the compatibility table on this page is generated from structured data.
... if you'd like to contribute to the data, please check out https://github.com/mdn/
browser-compat-data and send us a pull request.
MediaPositionState.duration - Web APIs
for example, a
browser might use this information along with the position property and the navigator.mediasession.playbackstate, as well as the session's metadata to provide an integrated common user interface showing the currently playing media as well as standard pause, play, forward, reverse, and other controls.
... example in this example, an app performing a live stream provides information to the
browser by preparing a mediapositionstate object and submitting it by calling navigator.mediasession.setpositionstate().
MediaRecorder.audioBitsPerSecond - Web APIs
browser compatibility the compatibility table in this page is generated from structured data.
... if you'd like to contribute to the data, please check out https://github.com/mdn/
browser-compat-data and send us a pull request.
MediaRecorder.mimeType - Web APIs
the mimetype read-only property returns the mime media type that was specified when creating the mediarecorder object, or, if none was specified, which was chosen by the
browser.
...see our media type and format guide for information about container and codec support across
browsers.
Media Session action types - Web APIs
this lets the
browser know it can take steps to optimize repeated operations, and is likely to result in improved performance.
... description a media session action may be generated by any media session action source; these sources include anything from ui widgets within the
browser itself to media control keys on the user's keyboard to buttons on the user's headset or earbuds.
MediaSessionActionDetails - Web APIs
this lets the
browser know it can take steps to optimize repeated operations, and is likely to result in improved performance.
... description a media session action may be generated by any media session action source; these sources include anything from ui widgets within the
browser itself to media control keys on the user's keyboard to buttons on the user's headset or earbuds.
MediaSource.isTypeSupported() - Web APIs
syntax var isitsupported = mediasource.istypesupported(mimetype); parameters mimetype the mime media type that you want to test support for in the current
browser.
... return value a boolean which is true if the
browser feels that it can probably play media of the specified type.
MediaStream.getTracks() - Web APIs
browser compatibility the compatibility table on this page is generated from structured data.
... if you'd like to contribute to the data, please check out https://github.com/mdn/
browser-compat-data and send us a pull request.
MediaStream.id - Web APIs
browser compatibility the compatibility table on this page is generated from structured data.
... if you'd like to contribute to the data, please check out https://github.com/mdn/
browser-compat-data and send us a pull request.
MediaStreamAudioSourceNode - Web APIs
as such, you can't easily rely on the order matching between any two
browsers or
browser versions.
...er.connect(audioctx.destination); // get new mouse pointer coordinates when mouse is moved // then set new gain value range.oninput = function() { biquadfilter.gain.value = range.value; } }) .catch(function(err) { console.log('the following gum error occured: ' + err); }); } else { console.log('getusermedia not supported on your
browser!'); } // dump script to pre element pre.innerhtml = myscript.innerhtml; note: as a consequence of calling createmediastreamsource(), audio playback from the media stream will be re-routed into the processing graph of the audiocontext.
MediaTrackConstraints.displaySurface - Web APIs
however, typically this is unnecessary since
browsers will simply ignore any constraints they're unfamiliar with.
...this value does not affect the list of display sources in the
browser's user interface.
MediaTrackSettings - Web APIs
properties some or all of the following will be included in the object, either because it's not supported by the
browser or because it's not available due to context.
...
browser the stream contains the contents of a single
browser tab selected by the user.
MediaTrackSupportedConstraints.autoGainControl - Web APIs
the autogaincontrol constraint indicates whether or not the
browser offers the ability to automatically control the gain (volume) on media tracks; this obviously is contingent on whether or not the individual device supports automatic gain control as well; it's typically a feature provided by microphones.
... example this example simply displays whether or not your
browser supports the autogaincontrol constraint.
MediaTrackSupportedConstraints.cursor - Web APIs
it adds the cursor constraint only if it is known to be supported by the
browser.
... async function capturewithcursor() { let supportedconstraints = navigator.mediadevices.getsupportedconstraints(); let displaymediaoptions = { video: { displaysurface: "
browser" }, audio: false; }; if (supportedconstraints.cursor) { displaymediaoptions.video.cursor = "always"; } try { videoelem.srcobject = await navigator.mediadevices.getdisplaymedia(displaymediaoptions); } catch(err) { /* handle the error */ } } specifications specification status comment screen capturethe definition of 'mediatracksupportedconstraints.cursor' in that specification.
MediaTrackSupportedConstraints.frameRate - Web APIs
example this simple example looks to see if your
browser supports constraining the frame rate when requesting video tracks.
... javascript let result = document.getelementbyid("result"); if (navigator.mediadevices.getsupportedconstraints().framerate) { result.innerhtml = "supported!"; } else { result.innerhtml = "not supported!"; } html <div id="result"> </div> css #result { font: 14px "arial", sans-serif; } result the output, showing if your
browser supports the framerate constraint, is: while this example is trivial, you can replace the simple output of "supported" vs.
MediaTrackSupportedConstraints.noiseSuppression - Web APIs
the noisesuppression constraint indicates whether or not the
browser offers the ability to automatically control the gain (volume) on media tracks; this obviously is contingent on whether or not the individual device supports automatic gain control as well.
... example this example simply displays whether or not your
browser supports the noisesuppression constraint.
Media Source API - Web APIs
creating assets that work with mse in modern
browsers is a laborious process, taking significant time, computing power, and energy.
...while
browser support for the various media containers with mse is spotty, usage of the h.264 video codec, aac audio codec, and mp4 container format is a common baseline.
Microdata DOM API - Web APIs
microdata were implemented in some
browsers for a long time.
... nowadays, they have been abandoned and removed from all
browsers and are therefore deprecated.
MimeTypeArray - Web APIs
the mimetypearray interface returns an array of mimetype instances, each of which contains information about a supported
browser plugins.
...} else { // notify the user that flash is being deprecated and they // should upgrade their
browser.
NavigationPreloadManager - Web APIs
browser compatibility the compatibility table in this page is generated from structured data.
... if you'd like to contribute to the data, please check out https://github.com/mdn/
browser-compat-data and send us a pull request.
Using Navigation Timing - Web APIs
unlike other tools or libraries, the navigation timing api lets you gather information that only the
browser can provide at a level of accuracy much improved over other techniques.
...performance.navigation.type indicates what kind of load operation took place: a navigation, a reload, or a shift through the
browser's history.
Navigator.buildID - Web APIs
returns the build identifier of the
browser.
... in modern
browsers this property now returns a fixed timestamp as a privacy measure, e.g.
Navigator.oscpu - Web APIs
syntax oscpuinfo = navigator.oscpu value a domstring providing a string which identifies the operating system on which the
browser is running.
...x or macos version x.y linux 64-bit (32-bit build) output of uname -s plus "i686 on x86_64" linux output of uname -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 universal
browserread privilege), it may get the value of the general.oscpu.override preference instead of the true platform.
navigator.hardwareConcurrency - Web APIs
the
browser may, however, choose to report a lower number of logical cores in order to represent more accurately the number of workers that can run at once, so don't treat this as an absolute measurement of the number of cores in the user's system.
... examples in this example, one worker is created for each logical processor reported by the
browser and a record is created which includes a reference to the new worker as well as a boolean value indicating whether or not we're using that worker yet; these objects are, in turn, stored into an array for later use.
NavigatorID.appCodeName - Web APIs
the value of the navigatorid.appcodename property is always "mozilla", in any
browser.
...all
browsers return "mozilla" as the value of this property.
NavigatorID.product - Web APIs
the value of the navigatorid.product property is always "gecko", in any
browser.
...all
browsers return "gecko" as the value of this property.
NavigatorOnLine - Web APIs
the navigatoronline interface contains methods and properties related to the connectivity status of the
browser.
... navigatoronline.online read only returns a boolean indicating whether the
browser is working online.
NavigatorPlugins.javaEnabled() - Web APIs
this method indicates whether the current
browser is java-enabled or not.
... syntax result = window.navigator.javaenabled() example if (window.navigator.javaenabled()) { //
browser has java } notes the return value for this method indicates whether the preference that controls java is on or off - not whether the
browser offers java support in general.
NavigatorPlugins.mimeTypes - Web APIs
returns a mimetypearray object, which contains a list of mimetype objects representing the mime types recognized by the
browser.
... note: named properties of mimetypearray objects are no longer enumerable in the latest
browser versions.
NavigatorStorage.storage - Web APIs
the navigatorstorage.storage read-only property returns the singleton storagemanager object used to access the overall storage capabilities of the
browser for the current site or app.
... the returned object lets you examine and configure persistence of data stores and learn approximately how much more space your
browser has available for local storage use.
Node.baseURI - Web APIs
the base url is used to resolve relative urls when the
browser needs to obtain an absolute url, for example when processing the html <img> element's src attribute or xml xlink:href attribute.
... details the base url of a document the base url of a document defaults to the document's address (as displayed by the
browser and available in window.location), but it can be changed: when an html <base> tag is found in the document when the document is new (created dynamically) see the base urls section of the html living standard for details.
Node.namespaceURI - Web APIs
if the namespaceuri returns the xul namespace and the localname returns "
browser", then the node is understood to be a xul <
browser/>.
... if (node.localname == "
browser" && node.namespaceuri == "http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul") { // this is a xul
browser } notes this is not a computed value that is the result of a namespace lookup based on an examination of the namespace declarations in scope.
NodeIterator.nextNode() - Web APIs
in old
browsers, as specified in old versions of the specifications, the method may throws the invalid_state_err domexception if this method is called after the nodeiterator.detach()method.
... recent
browsers never throw.
NodeIterator.previousNode() - Web APIs
in old
browsers, as specified in old versions of the specifications, the method may throws the invalid_state_err domexception if this method is called after the nodeiterator.detach()method.
... recent
browsers never throw.
NodeList - Web APIs
however, some older
browsers have not implemented nodelist.foreach() nor array.from().
... for...of loops will loop over nodelist objects correctly: const list = document.queryselectorall('input[type=checkbox]'); for (let checkbox of list) { checkbox.checked = true; } recent
browsers also support iterator methods (foreach()) as well as entries(), values(), and keys().
NonDocumentTypeChildNode.nextElementSibling - Web APIs
browser compatibility the compatibility table on this page is generated from structured data.
... if you'd like to contribute to the data, please check out https://github.com/mdn/
browser-compat-data and send us a pull request.
Notification.dir - Web APIs
possible values are: auto: adopts the
browser's language setting behaviour (the default.) ltr: left to right.
... note: most
browsers seem to ignore explicit ltr and rtl settings, and just go with the
browser-wide setting.
OVR_multiview2 - Web APIs
for more information, 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.
...however, the oculus
browser (6+) also supports multisampling using the oculus_multiview extension.
OfflineAudioCompletionEvent.renderedBuffer - Web APIs
browser compatibility the compatibility table on this page is generated from structured data.
... if you'd like to contribute to the data, please check out https://github.com/mdn/
browser-compat-data and send us a pull request.
PasswordCredential - Web APIs
in supporting
browsers, an instance of this class may be passed the credential from the init object for global fetch.
... <form id="form" method="post"> <input type="text" name="id" autocomplete="username" /> <input type="password" name="password" autocomplete="current-password" /> <input type="hidden" name="csrf_token" value="*****" /> </form> then, a reference to this form element, using it to create a passwordcredential object, and storing it in the
browser's password system.
PaymentAddress.toJSON() - Web APIs
browser compatibility the compatibility table on this page is generated from structured data.
... if you'd like to contribute to the data, please check out https://github.com/mdn/
browser-compat-data and send us a pull request.
PaymentAddress - Web APIs
obsolete properties the following properties are obsolete and should no longer be used, but may still be present in some
browser versions.
... // call show() to trigger the
browser's payment flow.
PaymentRequest.abort() - Web APIs
browser compatibility the compatibility table on this page is generated from structured data.
... if you'd like to contribute to the data, please check out https://github.com/mdn/
browser-compat-data and send us a pull request.
PaymentRequest.onshippingaddresschange - Web APIs
browser compatibility the compatibility table on this page is generated from structured data.
... if you'd like to contribute to the data, please check out https://github.com/mdn/
browser-compat-data and send us a pull request.
PaymentRequest.onshippingoptionchange - Web APIs
browser compatibility the compatibility table on this page is generated from structured data.
... if you'd like to contribute to the data, please check out https://github.com/mdn/
browser-compat-data and send us a pull request.
PaymentRequest.shippingAddress - Web APIs
browser compatibility the compatibility table on this page is generated from structured data.
... if you'd like to contribute to the data, please check out https://github.com/mdn/
browser-compat-data and send us a pull request.
PaymentRequest.shippingOption - Web APIs
browser compatibility the compatibility table on this page is generated from structured data.
... if you'd like to contribute to the data, please check out https://github.com/mdn/
browser-compat-data and send us a pull request.
PaymentRequest.shippingType - Web APIs
browser compatibility the compatibility table on this page is generated from structured data.
... if you'd like to contribute to the data, please check out https://github.com/mdn/
browser-compat-data and send us a pull request.
PaymentRequest.show() - Web APIs
note: in reality, despite the fact that the specification says this can't be done, some
browsers, including firefox, support multiple active payment requests at a time.
...the promise is resolved when the user accepts the payment request (such as by clicking a "pay" button in the
browser's payment sheet).
PaymentResponse.details - Web APIs
browser compatibility the compatibility table on this page is generated from structured data.
... if you'd like to contribute to the data, please check out https://github.com/mdn/
browser-compat-data and send us a pull request.
PaymentResponse.payerEmail - Web APIs
browser compatibility the compatibility table on this page is generated from structured data.
... if you'd like to contribute to the data, please check out https://github.com/mdn/
browser-compat-data and send us a pull request.
PaymentRequest.payerName - Web APIs
browser compatibility the compatibility table on this page is generated from structured data.
... if you'd like to contribute to the data, please check out https://github.com/mdn/
browser-compat-data and send us a pull request.
PaymentResponse.requestId - Web APIs
browser compatibility the compatibility table on this page is generated from structured data.
... if you'd like to contribute to the data, please check out https://github.com/mdn/
browser-compat-data and send us a pull request.
PaymentResponse.shippingAddress - Web APIs
browser compatibility the compatibility table on this page is generated from structured data.
... if you'd like to contribute to the data, please check out https://github.com/mdn/
browser-compat-data and send us a pull request.
PaymentResponse.shippingOption - Web APIs
browser compatibility the compatibility table on this page is generated from structured data.
... if you'd like to contribute to the data, please check out https://github.com/mdn/
browser-compat-data and send us a pull request.
Payment processing concepts - Web APIs
this is currently supported only by chrome and chromium-based
browsers.
...in addition, the payment handler api can be used to establish support for additional payment method providers, in
browsers that support it.
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 platforms to merchants that they want to pay for goods and services.
... detecting availability of the payment request api you can effectively detect support for the payment request api by checking if the user's
browser supports paymentrequest, i.e.
performance.measure() - Web APIs
the measure() method creates a named timestamp in the
browser's performance entry buffer between marks, the navigation start time, or the current time.
... return value void example the following example shows how measure() is used to create a new measure performance entry in the
browser's performance entry buffer.
performance.now() - Web APIs
it's important to keep in mind that to mitigate potential security threats such as spectre,
browsers typically round the returned value by some amount in order to be less predictable.
... reduced time precision to offer protection against timing attacks and fingerprinting, the precision of performance.now() might get rounded depending on
browser settings.
Performance.timeOrigin - Web APIs
recommendation
browser compatibility the compatibility table on this page is generated from structured data.
... if you'd like to contribute to the data, please check out https://github.com/mdn/
browser-compat-data and send us a pull request.
PerformanceEventTiming - Web APIs
(navigator.sendbeacon && navigator.sendbeacon('/analytics', body)) || fetch('/analytics', {body, method: 'post', keepalive: true}); } // use a try/catch instead of feature detecting `first-input` // support, since some
browsers throw when using the new `type` option.
... po.observe({ type: 'first-input', buffered: true, }); } catch (e) { // do nothing if the
browser doesn't support this api.
PerformanceLongTaskTiming.attribution - Web APIs
browser compatibility the compatibility table on this page is generated from structured data.
... if you'd like to contribute to the data, please check out https://github.com/mdn/
browser-compat-data and send us a pull request.
PerformanceLongTaskTiming - Web APIs
browser compatibility the compatibility table on this page is generated from structured data.
... if you'd like to contribute to the data, please check out https://github.com/mdn/
browser-compat-data and send us a pull request.
PerformanceNavigationTiming - Web APIs
the performancenavigationtiming interface provides methods and properties to store and retrieve metrics regarding the
browser's document navigation events.
... the interface also supports the following properties: performancenavigationtiming.domcomplete read only a domhighrestimestamp representing a time value equal to the time immediately before the
browser sets the current document readiness of the current document to complete.
PerformanceResourceTiming.domainLookupEnd - Web APIs
the domainlookupend read-only property returns the timestamp immediately after the
browser finishes the domain name lookup for the resource.
... syntax resource.domainlookupend; return value a domhighrestimestamp representing the time immediately after the
browser finishes the domain name lookup for the resource.
PerformanceResourceTiming.domainLookupStart - Web APIs
the domainlookupstart read-only property returns the timestamp immediately before the
browser starts the domain name lookup for the resource.
... syntax resource.domainlookupstart; return value a domhighrestimestamp immediately before the
browser starts the domain name lookup for the resource.
PerformanceResourceTiming.fetchStart - Web APIs
the fetchstart read-only property represents a timestamp immediately before the
browser starts to fetch the resource.
... syntax resource.fetchstart; return value a domhighrestimestamp immediately before the
browser starts to fetch the resource.
PerformanceResourceTiming.responseEnd - Web APIs
the responseend read-only property returns a timestamp immediately after the
browser receives the last byte of the resource or immediately before the transport connection is closed, whichever comes first.
... syntax resource.responseend; return value a domhighrestimestamp immediately after the
browser receives the last byte of the resource or immediately before the transport connection is closed, whichever comes first.
PerformanceResourceTiming.responseStart - Web APIs
the responsestart read-only property returns a timestamp immediately after the
browser receives the first byte of the response from the server, cache, or local resource.
... syntax resource.responsestart; return value a domhighrestimestamp immediately after the
browser receives the first byte of the response from the server.
PerformanceResourceTiming.secureConnectionStart - Web APIs
the secureconnectionstart read-only property returns a timestamp immediately before the
browser starts the handshake process to secure the current connection.
... syntax resource.secureconnectionstart; return value if the resource is fetched over a secure connection, a domhighrestimestamp immediately before the
browser starts the handshake process to secure the current connection.
Using the Performance API - Web APIs
however, if the
browser is unable to provide a time value accurate to 5 microseconds (because of hardware or software constraints, for example), the
browser can represent the value as a time in milliseconds accurate to a millisecond.
...erhtml += "<p>peformance.navigation = " + json.stringify(navigation) + "</p>"; } } specifications the interfaces described in this document are defined in the high resolution time standard which has two levels: high-resolution time level 2; editors draft; work in progress high-resolution time; w3c recommendation 17 december 2012 interoperability as shown in the performance interface's
browser compatibility table, most of the performance interfaces are broadly implemented by desktop
browsers.
Permissions.query() - Web APIs
an up-to-date list of permission names can be found in the spec under the permissionname enum, but bear in mind that the actual permissions supported by
browsers is currently much smaller than this.
... uservisibleonly: (push only, not supported in firefox — see the
browser support section below) indicates whether you want to show a notification for every message or be able to send silent push notifications.
PhotoCapabilities.fillLightMode - Web APIs
browser compatibility the compatibility table on this page is generated from structured data.
... if you'd like to contribute to the data, please check out https://github.com/mdn/
browser-compat-data and send us a pull request.
PhotoCapabilities.imageHeight - Web APIs
browser compatibility the compatibility table on this page is generated from structured data.
... if you'd like to contribute to the data, please check out https://github.com/mdn/
browser-compat-data and send us a pull request.
imageWidth - Web APIs
browser compatibility the compatibility table on this page is generated from structured data.
... if you'd like to contribute to the data, please check out https://github.com/mdn/
browser-compat-data and send us a pull request.
PhotoCapabilities.redEyeReduction - Web APIs
browser compatibility the compatibility table on this page is generated from structured data.
... if you'd like to contribute to the data, please check out https://github.com/mdn/
browser-compat-data and send us a pull request.
PhotoCapabilities - Web APIs
browser compatibility the compatibility table on this page is generated from structured data.
... if you'd like to contribute to the data, please check out https://github.com/mdn/
browser-compat-data and send us a pull request.
Plugin - Web APIs
the plugin interface provides information about a
browser plugin.
... note: own properties of plugin objects are no longer enumerable in the latest
browser versions.
PointerEvent.getCoalescedEvents() - Web APIs
browser compatibility the compatibility table on this page is generated from structured data.
... if you'd like to contribute to the data, please check out https://github.com/mdn/
browser-compat-data and send us a pull request.
PointerEvent.pointerType - Web APIs
if the device type cannot be detected by the
browser, the value can be an empty string ("").
... if the
browser supports pointer device types other than those listed above, the value should be vendor-prefixed to avoid conflicting names for different types of devices.
Multi-touch interaction - Web APIs
function pointermove_handler(ev) { // note: if the user makes more than one "simultaneous" touch, most
browsers // fire at least one pointermove event and some will fire several pointermoves.
... to prevent the
browser's default touch behavior from overriding this application's pointer handling, the touch-action property is applied to the <body> element.
PopStateEvent - Web APIs
the popstate event is only triggered by doing a
browser action such as a clicking on the back button (or calling history.back() in javascript).
... note:
browsers used to handle the popstate event differently on page load, but now they behave the same.
Proximity Events - Web APIs
proximity events when the device proximity sensor detects a change between the device and an object, it notifies the
browser of that change.
... when the
browser gets such a notification, it fires a deviceproximityevent for any change, and a userproximityevent event in the case of a more rough change.
PublicKeyCredential.getClientExtensionResults() - Web APIs
note: extensions are optional and different
browsers may recognize different extensions.
... all extensions are optional for the client to process them: if a
browser does not know of a given extension, that will not cause any failure.
PublicKeyCredentialCreationOptions.extensions - Web APIs
note: extensions are optional and different
browsers may recognize different extensions.
... all extensions are optional for the client to process them: if a
browser does not know a given extension, that will not cause any failure, the extension simply will not be processed.
PublicKeyCredentialRequestOptions.extensions - Web APIs
note: extensions are optional and different
browsers may recognize different extensions.
... all extensions are optional for the client to process them: if a
browser does not know a given extension, that will not cause any failure, the extension simply will not be processed.
PushEvent.PushEvent() - Web APIs
example var datainit = { data : 'some sample text' } var mypushevent = new pushevent('push', datainit); mypushevent.data.text(); // should return 'some sample text'
browser compatibility the compatibility table on this page is generated from structured data.
... if you'd like to contribute to the data, please check out https://github.com/mdn/
browser-compat-data and send us a pull request.
PushEvent.data - Web APIs
browser compatibility the compatibility table on this page is generated from structured data.
... if you'd like to contribute to the data, please check out https://github.com/mdn/
browser-compat-data and send us a pull request.
PushEvent - Web APIs
browser compatibility the compatibility table on this page is generated from structured data.
... if you'd like to contribute to the data, please check out https://github.com/mdn/
browser-compat-data and send us a pull request.
PushManager.hasPermission() - Web APIs
browser compatibility the compatibility table on this page is generated from structured data.
... if you'd like to contribute to the data, please check out https://github.com/mdn/
browser-compat-data and send us a pull request.
PushManager.subscribe() - Web APIs
note: this parameter is required in some
browsers like chrome and edge.
... calls should be done in response to a user gesture, such as clicking a button, for example: btn.addeventlistener('click', function() { serviceworkerregistration.pushmanager.subscribe(options) .then(function(pushsubscription) { // handle subscription }); }) this is not only best practice — you should not be spamming users with notifications they didn't agree to — but going forward
browsers will explicitly disallow notifications not triggered in response to a user gesture.
PushManager.supportedContentEncodings - Web APIs
browser compatibility the compatibility table on this page is generated from structured data.
... if you'd like to contribute to the data, please check out https://github.com/mdn/
browser-compat-data and send us a pull request.
PushMessageData.arrayBuffer() - Web APIs
browser compatibility the compatibility table on this page is generated from structured data.
... if you'd like to contribute to the data, please check out https://github.com/mdn/
browser-compat-data and send us a pull request.
PushMessageData.blob() - Web APIs
browser compatibility the compatibility table on this page is generated from structured data.
... if you'd like to contribute to the data, please check out https://github.com/mdn/
browser-compat-data and send us a pull request.
PushMessageData.json() - Web APIs
browser compatibility the compatibility table on this page is generated from structured data.
... if you'd like to contribute to the data, please check out https://github.com/mdn/
browser-compat-data and send us a pull request.
PushMessageData.text() - Web APIs
browser compatibility the compatibility table on this page is generated from structured data.
... if you'd like to contribute to the data, please check out https://github.com/mdn/
browser-compat-data and send us a pull request.
PushRegistrationManager - Web APIs
browser compatibility the compatibility table on this page is generated from structured data.
... if you'd like to contribute to the data, please check out https://github.com/mdn/
browser-compat-data and send us a pull request.
PushSubscription.expirationTime - Web APIs
browser compatibility the compatibility table on this page is generated from structured data.
... if you'd like to contribute to the data, please check out https://github.com/mdn/
browser-compat-data and send us a pull request.
PushSubscription.getKey() - Web APIs
browser compatibility the compatibility table on this page is generated from structured data.
... if you'd like to contribute to the data, please check out https://github.com/mdn/
browser-compat-data and send us a pull request.
PushSubscription.options - Web APIs
browser compatibility the compatibility table on this page is generated from structured data.
... if you'd like to contribute to the data, please check out https://github.com/mdn/
browser-compat-data and send us a pull request.
PushSubscription.subscriptionId - Web APIs
syntax var subid = pushsubscription.subscriptionid; specifications specification status comment push api working draft initial definition
browser compatibility the compatibility table on this page is generated from structured data.
... if you'd like to contribute to the data, please check out https://github.com/mdn/
browser-compat-data and send us a pull request.
RTCConfiguration.bundlePolicy - Web APIs
all current major
browsers are bundle compatible.
... let config = { iceservers: [ { urls: [ "stun:stun.example.com" ] }, ], bundlepolicy: "max-compat" }; let pc = new rtcpeerconnection(config); specifications specification status comment webrtc 1.0: real-time communication between
browsersthe definition of 'rtcconfiguration.bundlepolicy' in that specification.
RTCConfiguration.iceTransportPolicy - Web APIs
the agent—or the
browser itself—may still perform some form of ip filtering on the incoming candidates for reasons including privacy and security, as well as to simply limit the number of candidates.
... let config = { iceservers: [ { urls: [ "stun:stun.example.com" ] }, ], icetransportpolicy: "relay" }; let pc = new rtcpeerconnection(config); specifications specification status comment webrtc 1.0: real-time communication between
browsersthe definition of 'rtccandidate.icetransportpolicy' in that specification.
RTCConfiguration - Web APIs
all
browser implementations are bundle-aware.
... username: "louis@mozilla.com", credential: "webrtcdemo" }, { urls: ["stun:stun.example.com", "stun:stun-1.example.com"] }] }; var pc = new rtcpeerconnection(configuration); specifications specification status comment webrtc 1.0: real-time communication between
browsersthe definition of 'rtcconfiguration' in that specification.
RTCDTMFSender.insertDTMF() - Web APIs
the
browser will enforce a minimum value of 30 ms (that is, if you specify a lower value, 30 ms will be used instead); the default is 70 ms.
... example tbd specifications specification status comment webrtc 1.0: real-time communication between
browsersthe definition of 'rtcdtmfsender.insertdtmf()' in that specification.
RTCDataChannel.id - Web APIs
each rtcpeerconnection can therefore have up to a theoretical maximum of 65,534 data channels on it, although the actual maximum may vary from
browser to
browser.
... example var pc = new rtcpeerconnection(); var dc = pc.createdatachannel("my channel"); console.log("channel id: " + dc.id); specifications specification status comment webrtc 1.0: real-time communication between
browsersthe definition of 'rtcdatachannel.id' in that specification.
RTCDataChannel.onerror - Web APIs
syntax rtcdatachannel.onerror = function; value a function which the
browser will call to handle the error event when it occurs on the data channel.
...*/ specifications specification status comment webrtc 1.0: real-time communication between
browsersthe definition of 'rtcdatachannel.onerror' in that specification.
RTCDataChannel.onmessage - Web APIs
syntax rtcdatachannel.onmessage = function; value a function which the
browser will call to handle the message event.
... let pc = new rtcpeerconnection(); let dc = pc.createdatachannel(); dc.onmessage = function(event) { var el = document.createelement("p"); var txtnode = document.createtextnode(event.data); el.appendchild(txtnode); receivebox.appendchild(el); } specifications specification status comment webrtc 1.0: real-time communication between
browsersthe definition of 'rtcdatachannel.onmessage' in that specification.
RTCDataChannel.onopen - Web APIs
syntax rtcdatachannel.onopen = function; value a function which the
browser will call to handle the open event.
...nnection.createdatachannel("message channel"); dc.onopen = function(event) { let messagebox = document.getelementbyid("messagebox"); let sendbutton = document.getelementbyid("sendbutton"); messagebox.disabled = false; messagebox.focus(); sendbutton.disabled = false; } specifications specification status comment webrtc 1.0: real-time communication between
browsersthe definition of 'rtcdatachannel.onopen' in that specification.
RTCDataChannel.readyState - Web APIs
constant description "connecting" the user agent (
browser) is in the process of creating the underlying data transport; that is, whatever network level connection is used to link the two peers together is in the process of being set up.
...attempt to send while connection closed."); break; } } specifications specification status comment webrtc 1.0: real-time communication between
browsersthe definition of 'rtcdatachannel.readystate' in that specification.
RTCIceCandidateStats.networkType - Web APIs
unknown the user's
browser is unable or unwilling to identify the underlying connection technology used by the described connection.
... this may be because the
browser isn't able to determine the network type for some reason or it may be intentionally getting obscured for security reasons, such as to avoid device fingerprinting.
RTCIceServer.url - Web APIs
it was removed from the specification in june 2013 but is still broadly used in older examples and books, so we include documentation here to help adapt old code to new
browsers.
... this property has been removed from the specification; while it's still supported by many
browsers, it should no longer be used.
RTCPeerConnection.addIceCandidate() - Web APIs
when a web site or app using rtcpeerconnection receives a new ice candidate from the remote peer over its signaling channel, it delivers the newly-received candidate to the
browser's ice agent by calling rtcpeerconnection.addicecandidate().
... specifications specification status comment webrtc 1.0: real-time communication between
browsersthe definition of 'rtcpeerconnection.addicecandidate()' in that specification.
RTCPeerConnection.addStream() - Web APIs
if you are relying on the chrome behavior, note that other
browsers do not have it.
... was added to: stream.removetrack(track); if (pc.removetrack) { pc.removetrack(pc.getsenders().find(sender => sender.track == track)); } else { // if you have code listening for negotiationneeded events: settimeout(() => pc.dispatchevent(new event('negotiationneeded'))); } specifications specification status comment webrtc 1.0: real-time communication between
browsersthe definition of 'rtcpeerconnection.addstream()' in that specification.
RTCPeerConnection: addstream event - Web APIs
examples this example looks to determine if the user's
browser supports the track event.
... if (pc.addtrack !== undefined) { pc.ontrack = ev => { ev.streams.foreach(stream => doaddstream(stream)); } } else { pc.onaddstream = ev => { doaddstream(ev.stream); } } this calls a function doaddstream() once for each stream being added to the rtcpeerconnection, regardless of whether the
browser sends addstream or track.
RTCPeerConnection.canTrickleIceCandidates - Web APIs
a webrtc
browser will always support trickle ice.
...on); } }); }); }) .then(answer => sendanswertopeer(answer)) // signaling message .catch(e => handleerror(e)); pc.addeventlistener('icecandidate', e => { if (pc.cantrickleicecandidates) { sendcandidatetopeer(e.candidate); // signaling message } }); specifications specification status comment webrtc 1.0: real-time communication between
browsersthe definition of 'rtcpeerconnection.cantrickleicecandidates' in that specification.
RTCPeerConnection.close() - Web APIs
make sure that you delete all references to the previous rtcpeerconnection before attempting to create a new one that connects to the same remote peer, as not doing so might result in some errors depending on the
browser.
... dc.onmessage = function (event) { console.log("received: " + event.data); pc.close(); // we decided to close after the first received message }; dc.onopen = function () { console.log("datachannel open"); }; dc.onclose = function () { console.log("datachannel close"); }; specifications specification status comment webrtc 1.0: real-time communication between
browsersthe definition of 'rtcpeerconnection.close()' in that specification.
RTCPeerConnection.createAnswer() - Web APIs
the answer contains information about any media already attached to the session, codecs and options supported by the
browser, and any ice candidates already gathered.
... specifications specification status comment webrtc 1.0: real-time communication between
browsersthe definition of 'createanswer()' in that specification.
RTCPeerConnection.createOffer() - Web APIs
the sdp offer includes information 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.
... specifications specification status comment webrtc 1.0: real-time communication between
browsersthe definition of 'createoffer()' in that specification.
RTCPeerConnection.onconnectionstatechange - Web APIs
syntax rtcpeerconnection.onconnectionstatechange = eventhandler; value a function which is called by the
browser when the connectionstatechange event occurs on the rtcpeerconnection.
...ected": // the connection has become fully connected break; case "disconnected": case "failed": // one or more transports has terminated unexpectedly or in an error break; case "closed": // the connection has been closed break; } } specifications specification status comment webrtc 1.0: real-time communication between
browsersthe definition of 'rtcpeerconnection.onconnectionstatechange' in that specification.
RTCPeerConnection.onicecandidate - Web APIs
this lets the ice agent perform negotiation with the remote peer without the
browser itself needing to know any specifics about the technology being used for signaling; simply implement this method to use whatever messaging technology you choose to send the ice candidate to the remote peer.
... specifications specification status comment webrtc 1.0: real-time communication between
browsersthe definition of 'rtcpeerconnection.onicecandidate' in that specification.
RTCPeerConnection.setLocalDescription() - Web APIs
type of the description parameter the description is of type rtcsessiondescriptioninit, which is a serialized version of a rtcsessiondescription
browser object.
... specifications specification status comment webrtc 1.0: real-time communication between
browsersthe definition of 'rtcpeerconnection.setlocaldescription()' in that specification.
RTCPeerConnectionIceErrorEvent - Web APIs
if communication with the stun or turn server couldn't be established at all, this string will be a
browser-specific string explaining the error.
... examples tbd specifications specification status comment webrtc 1.0: real-time communication between
browsersthe definition of 'rtcpeerconnectioniceerrorevent' in that specification.
RTCRtpCapabilities - Web APIs
its properties are: the
browser will only report distinct capability combinations separately.
... specifications specification status comment webrtc 1.0: real-time communication between
browsersthe definition of 'rtcrtpcapabilities' in that specification.
RTCRtpStreamStats - Web APIs
check the
browser compatibility table to know if and when the name change was implemented in specific
browsers.
...see
browser compatibility in rtcrtpstreamstats.kind to determine when
browsers made the transition.
RTCRtpTransceiver.setCodecPreferences() - Web APIs
if any unsupported codecs are listed, the
browser will throw an invalidaccesserror exception when you call this method.
... var availsendcodecs = transceiver.sender.getcapabilities("video").codecs; var availreceivecodecs = transceiver.receiver.getcapabilities("video").codecs; specifications specification status comment webrtc 1.0: real-time communication between
browsersthe definition of 'rtcrtptransceiver.setcodecpreferences()' in that specification.
Range.compareNode() - Web APIs
although it may still work in some
browsers, its use is discouraged since it could be removed at any time.
... warning: this method has been removed from gecko 1.9 (firefox 3) and will not exist in future versions of firefox, which was the only
browser implementing it; you should switch to range.compareboundarypoints() as soon as possible.
ReadableStream - Web APIs
examples in the following example, an artificial response is created to stream html fragments fetched from another resource to the
browser.
... if (done) { // tell the
browser that we have finished sending data controller.close(); return; } // get the data and send it to the
browser via the controller controller.enqueue(value); push(); }); }; push(); } }); return new response(stream, { headers: { "content-type": "text/html" } }); }); specifications specification ...
ReadableStreamDefaultReader - Web APIs
examples in the following example, an artifical response is created to stream html fragments fetched from another resource to the
browser.
... if (done) { // tell the
browser that we have finished sending data controller.close(); return; } // get the data and send it to the
browser via the controller controller.enqueue(value); push(); }); }; push(); } }); return new response(stream, { headers: { "content-type": "text/html" } }); }); specifications specification ...
SVGAElement.target - Web APIs
recommendation
browser compatibility the compatibility table on this page is generated from structured data.
... if you'd like to contribute to the data, please check out https://github.com/mdn/
browser-compat-data and send us a pull request.
SVGAnimatedAngle - Web APIs
browser compatibility the compatibility table on this page is generated from structured data.
... if you'd like to contribute to the data, please check out https://github.com/mdn/
browser-compat-data and send us a pull request.
SVGAnimatedBoolean - Web APIs
browser compatibility the compatibility table on this page is generated from structured data.
... if you'd like to contribute to the data, please check out https://github.com/mdn/
browser-compat-data and send us a pull request.
SVGAnimatedEnumeration - Web APIs
browser compatibility the compatibility table on this page is generated from structured data.
... if you'd like to contribute to the data, please check out https://github.com/mdn/
browser-compat-data and send us a pull request.
SVGAnimatedInteger - Web APIs
browser compatibility the compatibility table on this page is generated from structured data.
... if you'd like to contribute to the data, please check out https://github.com/mdn/
browser-compat-data and send us a pull request.
SVGAnimatedLength - Web APIs
browser compatibility the compatibility table on this page is generated from structured data.
... if you'd like to contribute to the data, please check out https://github.com/mdn/
browser-compat-data and send us a pull request.
SVGAnimatedLengthList - Web APIs
browser compatibility the compatibility table on this page is generated from structured data.
... if you'd like to contribute to the data, please check out https://github.com/mdn/
browser-compat-data and send us a pull request.
SVGAnimatedNumber - Web APIs
browser compatibility the compatibility table on this page is generated from structured data.
... if you'd like to contribute to the data, please check out https://github.com/mdn/
browser-compat-data and send us a pull request.
SVGAnimatedNumberList - Web APIs
browser compatibility the compatibility table on this page is generated from structured data.
... if you'd like to contribute to the data, please check out https://github.com/mdn/
browser-compat-data and send us a pull request.
SVGAnimatedPoints - Web APIs
browser compatibility the compatibility table on this page is generated from structured data.
... if you'd like to contribute to the data, please check out https://github.com/mdn/
browser-compat-data and send us a pull request.
SVGAnimatedPreserveAspectRatio - Web APIs
browser compatibility the compatibility table on this page is generated from structured data.
... if you'd like to contribute to the data, please check out https://github.com/mdn/
browser-compat-data and send us a pull request.
SVGAnimatedRect - Web APIs
browser compatibility the compatibility table on this page is generated from structured data.
... if you'd like to contribute to the data, please check out https://github.com/mdn/
browser-compat-data and send us a pull request.
SVGAnimatedString.animVal - Web APIs
syntax var = object.animval specifications specification status comment scalable vector graphics (svg) 1.1 (second edition) recommendation scalable vector graphics (svg) 2 candidate recommendation
browser compatibility the compatibility table on this page is generated from structured data.
... if you'd like to contribute to the data, please check out https://github.com/mdn/
browser-compat-data and send us a pull request.
SVGAnimatedString.baseVal - Web APIs
specifications specification status comment scalable vector graphics (svg) 1.1 (second edition) recommendation scalable vector graphics (svg) 2 candidate recommendation
browser compatibility the compatibility table on this page is generated from structured data.
... if you'd like to contribute to the data, please check out https://github.com/mdn/
browser-compat-data and send us a pull request.
SVGAnimatedString - Web APIs
specifications specification status comment scalable vector graphics (svg) 1.1 (second edition) recommendation scalable vector graphics (svg) 2 candidate recommendation
browser compatibility the compatibility table on this page is generated from structured data.
... if you'd like to contribute to the data, please check out https://github.com/mdn/
browser-compat-data and send us a pull request.
SVGAnimatedTransformList - Web APIs
browser compatibility the compatibility table on this page is generated from structured data.
... if you'd like to contribute to the data, please check out https://github.com/mdn/
browser-compat-data and send us a pull request.
SVGCircleElement - Web APIs
recommendation initial definition
browser compatibility the compatibility table on this page is generated from structured data.
... if you'd like to contribute to the data, please check out https://github.com/mdn/
browser-compat-data and send us a pull request.
SVGLength - Web APIs
browser compatibility the compatibility table on this page is generated from structured data.
... if you'd like to contribute to the data, please check out https://github.com/mdn/
browser-compat-data and send us a pull request.
SVGLengthList - Web APIs
browser compatibility the compatibility table on this page is generated from structured data.
... if you'd like to contribute to the data, please check out https://github.com/mdn/
browser-compat-data and send us a pull request.
SVGNumberList - Web APIs
browser compatibility the compatibility table on this page is generated from structured data.
... if you'd like to contribute to the data, please check out https://github.com/mdn/
browser-compat-data and send us a pull request.
SVGPathElement - Web APIs
svgpathelement.gettotallength() returns a float representing the computed value for the total length of the path using the
browser's distance-along-a-path algorithm, as a distance in the current user coordinate system.
... svgpathelement.getpointatlength() returns an svgpoint representing the x and y coordinates in user space utilizing the
browser's distance-along-a-path algorithm.
SVGPreserveAspectRatio - Web APIs
browser compatibility the compatibility table on this page is generated from structured data.
... if you'd like to contribute to the data, please check out https://github.com/mdn/
browser-compat-data and send us a pull request.
SVGSVGElement - Web APIs
when the
browser is actually rendering the content, then the position and size values represent the actual values when rendering.
...when the
browser actually knows the physical size of a "screen unit", this float attribute will express that information; otherwise, user agents will provide a suitable default value (such as .28mm).
SVGStylable - Web APIs
browser compatibility the compatibility table on this page is generated from structured data.
... if you'd like to contribute to the data, please check out https://github.com/mdn/
browser-compat-data and send us a pull request.
SVGTransform - Web APIs
browser compatibility the compatibility table on this page is generated from structured data.
... if you'd like to contribute to the data, please check out https://github.com/mdn/
browser-compat-data and send us a pull request.
SVGTransformable - Web APIs
browser compatibility the compatibility table on this page is generated from structured data.
... if you'd like to contribute to the data, please check out https://github.com/mdn/
browser-compat-data and send us a pull request.
ScreenOrientation.angle - Web APIs
browser compatibility the compatibility table on this page is generated from structured data.
... if you'd like to contribute to the data, please check out https://github.com/mdn/
browser-compat-data and send us a pull request.
ScreenOrientation.lock() - Web APIs
browser compatibility the compatibility table on this page is generated from structured data.
... if you'd like to contribute to the data, please check out https://github.com/mdn/
browser-compat-data and send us a pull request.
ScreenOrientation.onchange - Web APIs
browser compatibility the compatibility table on this page is generated from structured data.
... if you'd like to contribute to the data, please check out https://github.com/mdn/
browser-compat-data and send us a pull request.
ScreenOrientation.type - Web APIs
browser compatibility the compatibility table on this page is generated from structured data.
... if you'd like to contribute to the data, please check out https://github.com/mdn/
browser-compat-data and send us a pull request.
ScreenOrientation.unlock() - Web APIs
browser compatibility the compatibility table on this page is generated from structured data.
... if you'd like to contribute to the data, please check out https://github.com/mdn/
browser-compat-data and send us a pull request.
ScreenOrientation - Web APIs
browser compatibility the compatibility table on this page is generated from structured data.
... if you'd like to contribute to the data, please check out https://github.com/mdn/
browser-compat-data and send us a pull request.
Screen Orientation API - Web APIs
browser compatibility screenorientation the compatibility table on this page is generated from structured data.
... if you'd like to contribute to the data, please check out https://github.com/mdn/
browser-compat-data and send us a pull request.
Selection.extend() - Web APIs
working draft current
browser compatibility the compatibility table on this page is generated from structured data.
... if you'd like to contribute to the data, please check out https://github.com/mdn/
browser-compat-data and send us a pull request.
Selection.removeAllRanges() - Web APIs
working draft current
browser compatibility the compatibility table on this page is generated from structured data.
... if you'd like to contribute to the data, please check out https://github.com/mdn/
browser-compat-data and send us a pull request.
Selection.removeRange() - Web APIs
working draft current
browser compatibility the compatibility table on this page is generated from structured data.
... if you'd like to contribute to the data, please check out https://github.com/mdn/
browser-compat-data and send us a pull request.
Selection.toString() - Web APIs
working draft current
browser compatibility the compatibility table on this page is generated from structured data.
... if you'd like to contribute to the data, please check out https://github.com/mdn/
browser-compat-data and send us a pull request.
ServiceWorkerRegistration.navigationPreload - Web APIs
browser compatibility the compatibility table in this page is generated from structured data.
... if you'd like to contribute to the data, please check out https://github.com/mdn/
browser-compat-data and send us a pull request.
ServiceWorkerRegistration - Web APIs
the
browser maintains a persistent list of active serviceworkerregistration objects.
... examples in this example, the code first checks whether the
browser supports service workers and if so registers one.
ShadowRoot - Web APIs
note that this is currently only implemented by chrome; other
browsers still implement them on the document interface.
...note that this is currently only implemented by chrome; other
browsers still implement them on the document interface.
SharedWorker() - Web APIs
note: there is disagreement among
browser manufacturers about whether a data uri is of the same origin or not.
... although gecko 10.0 (firefox 10.0 / thunderbird 10.0 / seamonkey 2.7) and later accept data uris, that's not the case in all other
browsers.
SharedWorkerGlobalScope.applicationCache - Web APIs
browser compatibility the compatibility table in this page is generated from structured data.
... if you'd like to contribute to the data, please check out https://github.com/mdn/
browser-compat-data and send us a pull request.
SharedWorkerGlobalScope.onconnect - Web APIs
living standard
browser compatibility the compatibility table in this page is generated from structured data.
... if you'd like to contribute to the data, please check out https://github.com/mdn/
browser-compat-data and send us a pull request.
Slottable: assignedSlot - Web APIs
browser compatibility the compatibility table on this page is generated from structured data.
... if you'd like to contribute to the data, please check out https://github.com/mdn/
browser-compat-data and send us a pull request.
Slottable - Web APIs
browser compatibility the compatibility table on this page is generated from structured data.
... if you'd like to contribute to the data, please check out https://github.com/mdn/
browser-compat-data and send us a pull request.
StereoPannerNode.StereoPannerNode() - Web APIs
browser compatibility the compatibility table on this page is generated from structured data.
... if you'd like to contribute to the data, please check out https://github.com/mdn/
browser-compat-data and send us a pull request.
StorageManager.persist() - Web APIs
browser compatibility the compatibility table on this page is generated from structured data.
... if you'd like to contribute to the data, please check out https://github.com/mdn/
browser-compat-data and send us a pull request.
Using the Storage Access API - Web APIs
usage notes the storage access api is designed to allow embedded content to request access to storage that would otherwise be blocked when a user’s
browser is set to block all third-party cookies.
...this is particularly true for document.cookie access, as
browsers will often return an empty cookie jar when third-party cookies are blocked.
TaskAttributionTiming.containerId - Web APIs
browser compatibility the compatibility table on this page is generated from structured data.
... if you'd like to contribute to the data, please check out https://github.com/mdn/
browser-compat-data and send us a pull request.
TaskAttributionTiming.containerType - Web APIs
browser compatibility the compatibility table on this page is generated from structured data.
... if you'd like to contribute to the data, please check out https://github.com/mdn/
browser-compat-data and send us a pull request.
HTMLSlotElement.assignedSlot - Web APIs
living standard
browser compatibility the compatibility table on this page is generated from structured data.
... if you'd like to contribute to the data, please check out https://github.com/mdn/
browser-compat-data and send us a pull request.
Touch.clientX - Web APIs
the touch.clientx property is the horizontal coordinate of a touch point relative to the
browser's viewport excluding any scroll offset.
... the touch.clienty property is the vertical coordinate of the touch point relative to the
browser's viewport excluding any scroll offset .
Touch - Web APIs
touch.clientx read only returns the x coordinate of the touch point relative to the left edge of the
browser viewport, not including any scroll offset.
... touch.clienty read only returns the y coordinate of the touch point relative to the top edge of the
browser viewport, not including any scroll offset.
URL.createObjectURL() - Web APIs
browsers will release object urls automatically when the document is unloaded; however, for optimal performance and memory usage, if there are safe times when you can explicitly unload them, you should do so.
...this is no longer necessary, and
browsers are removing support for doing this.
URLUtilsReadOnly.hash - Web APIs
browser compatibility the compatibility table in this page is generated from structured data.
... if you'd like to contribute to the data, please check out https://github.com/mdn/
browser-compat-data and send us a pull request.
URLUtilsReadOnly.host - Web APIs
browser compatibility the compatibility table in this page is generated from structured data.
... if you'd like to contribute to the data, please check out https://github.com/mdn/
browser-compat-data and send us a pull request.
URLUtilsReadOnly.hostname - Web APIs
browser compatibility the compatibility table in this page is generated from structured data.
... if you'd like to contribute to the data, please check out https://github.com/mdn/
browser-compat-data and send us a pull request.
URLUtilsReadOnly.href - Web APIs
browser compatibility the compatibility table in this page is generated from structured data.
... if you'd like to contribute to the data, please check out https://github.com/mdn/
browser-compat-data and send us a pull request.
URLUtilsReadOnly.pathname - Web APIs
browser compatibility the compatibility table in this page is generated from structured data.
... if you'd like to contribute to the data, please check out https://github.com/mdn/
browser-compat-data and send us a pull request.
URLUtilsReadOnly.port - Web APIs
browser compatibility the compatibility table in this page is generated from structured data.
... if you'd like to contribute to the data, please check out https://github.com/mdn/
browser-compat-data and send us a pull request.
URLUtilsReadOnly.protocol - Web APIs
browser compatibility the compatibility table in this page is generated from structured data.
... if you'd like to contribute to the data, please check out https://github.com/mdn/
browser-compat-data and send us a pull request.
URLUtilsReadOnly.search - Web APIs
browser compatibility the compatibility table in this page is generated from structured data.
... if you'd like to contribute to the data, please check out https://github.com/mdn/
browser-compat-data and send us a pull request.
URLUtilsReadOnly.toString() - Web APIs
syntax string = object.tostring(); examples // in a web worker, on the page https://developer.mozilla.org/urlutilsreadonly.href var result = window.self.tostring(); // returns:'https://developer.mozilla.org/urlutilsreadonly.href'
browser compatibility the compatibility table in this page is generated from structured data.
... if you'd like to contribute to the data, please check out https://github.com/mdn/
browser-compat-data and send us a pull request.
URLUtilsReadOnly - Web APIs
browser compatibility the compatibility table in this page is generated from structured data.
... if you'd like to contribute to the data, please check out https://github.com/mdn/
browser-compat-data and send us a pull request.
WEBGL_debug_renderer_info - Web APIs
depending on the privacy settings of the
browser, this extension might only be available to privileged contexts.
... availability: depending on the privacy settings of the
browser, this extension might only be available to privileged contexts or not work at all.
WaveShaperNode.WaveShaperNode() - Web APIs
browser compatibility the compatibility table on this page is generated from structured data.
... if you'd like to contribute to the data, please check out https://github.com/mdn/
browser-compat-data and send us a pull request.
A basic 2D WebGL animation example - Web APIs
your
browser doesn't support canvas!
...that's done here by calling requestanimationframe(), which asks that a callback function be executed the next time the
browser is ready to update the screen.
Basic scissoring - Web APIs
<p>result of of scissoring.</p> <canvas>your
browser does not seem to support html5 canvas.</canvas> body { text-align : center; } canvas { display : block; width : 280px; height : 210px; margin : auto; padding : 0; border : none; background-color : black; } window.addeventlistener("load", function setupwebgl (evt) { "use strict" window.removeeventlistener(evt.type, setupwebgl, false); var paragraph = document.querysel...
..." + "your
browser or device may not support webgl."; return; } gl.viewport(0, 0, gl.drawingbufferwidth, gl.drawingbufferheight); // enable scissoring operation and define the position and // size of the scissoring area.
Boilerplate 1 - Web APIs
]</button> <canvas>your
browser does not seem to support html5 canvas.</canvas> css body { text-align : center; } canvas { display : block; width : 280px; height : 210px; margin : auto; padding : 0; border : none; background-color : black; } button { display : block; font-size : inherit; margin : auto; padding : 0.6em; } javascript function getrenderingcontext() { var canvas = document.querys...
...elector("canvas"); canvas.width = canvas.clientwidth; canvas.height = canvas.clientheight; var gl = canvas.getcontext("webgl") || canvas.getcontext("experimental-webgl"); if (!gl) { var paragraph = document.queryselector("p"); paragraph.innerhtml = "failed to get webgl context." + "your
browser or device may not support webgl."; return null; } gl.viewport(0, 0, gl.drawingbufferwidth, gl.drawingbufferheight); gl.clearcolor(0.0, 0.0, 0.0, 1.0); gl.clear(gl.color_buffer_bit); return gl; } the source code of this example is also available on github.
Clearing by clicking - Web APIs
<p>a very simple webgl program that still shows some color and user interaction.</p> <p>you can repeatedly click the empty canvas or the button below to change color.</p> <canvas id="canvas-view">your
browser does not seem to support html5 canvas.</canvas> <button id="color-switcher">press here to switch color</button> body { text-align : center; } canvas { display : block; width : 280px; height : 210px; margin : auto; padding : 0; border : none; background-color : black; } button { display : inline-block; font-size : inherit; margin : auto; padding : 0.6em; } window.ad...
... if (!gl) { gl = canvas.getcontext("webgl") || canvas.getcontext("experimental-webgl"); if (!gl) { alert("failed to get webgl context.\n" + "your
browser or device may not support webgl."); return; } gl.viewport(0, 0, gl.drawingbufferwidth, gl.drawingbufferheight); } // get a random color value using a helper function.
Color masking - Web APIs
<p>tinting the displayed colors with color masking.</p> <canvas>your
browser does not seem to support html5 canvas.</canvas> <button id="red-toggle">on</button> <button id="green-toggle">on</button> <button id="blue-toggle">on</button> body { text-align : center; } canvas { display : block; width : 280px; height : 210px; margin : auto; padding : 0; border : none; background-color : black; } button { display : inline-block; font-family : serif; ...
...: blue; } window.addeventlistener("load", function setupanimation (evt) { "use strict" window.removeeventlistener(evt.type, setupanimation, false); var canvas = document.queryselector("canvas"); var gl = canvas.getcontext("webgl") || canvas.getcontext("experimental-webgl"); if (!gl) { document.queryselector("p").innerhtml = "failed to get webgl context." + "your
browser or device may not support webgl."; return; } gl.viewport(0, 0, gl.drawingbufferwidth, gl.drawingbufferheight); var timer = setinterval(drawanimation, 1000); var mask = [true, true, true]; var redtoggle = document.queryselector("#red-toggle"), greentoggle = document.queryselector("#green-toggle"), bluetoggle = document.queryselector("#blue-toggle"); redtoggle.addevent...
Hello vertex attributes - Web APIs
click on the canvas to change the horizontal position of the square.</p> <canvas>your
browser does not seem to support html5 canvas.</canvas> body { text-align : center; } canvas { width : 280px; height : 210px; margin : auto; padding : 0; border : none; background-color : black; } button { display : block; font-size : inherit; margin : auto; padding : 0.6em; } <script type="x-shader/x-vertex" id="vertex-shader"> #version 100 precision highp float; attribut...
...program(program); } function getrenderingcontext() { var canvas = document.queryselector("canvas"); canvas.width = canvas.clientwidth; canvas.height = canvas.clientheight; var gl = canvas.getcontext("webgl") || canvas.getcontext("experimental-webgl"); if (!gl) { var paragraph = document.queryselector("p"); paragraph.innerhtml = "failed to get webgl context." + "your
browser or device may not support webgl."; return null; } gl.viewport(0, 0, gl.drawingbufferwidth, gl.drawingbufferheight); gl.clearcolor(0.0, 0.0, 0.0, 1.0); gl.clear(gl.color_buffer_bit); return gl; } })(); the source code of this example is also available on github.
Simple color animation - Web APIs
<p>a simple webgl program that shows color animation.</p> <p>you can click the button below to toggle the color animation on or off.</p> <canvas id="canvas-view">your
browser does not seem to support html5 canvas.</canvas> <button id="animation-onoff"> press here to <strong>[verb goes here]</strong> the animation </button> body { text-align : center; } canvas { display : block; width : 280px; height : 210px; margin : auto; padding : 0; border : none; background-color : black; } button { display : inline-block; font-size : inherit; margi...
... stopanimation({type: "click"}); var gl; function drawanimation () { if (!gl) { var canvas = document.getelementbyid("canvas-view"); gl = canvas.getcontext("webgl") ||canvas.getcontext("experimental-webgl"); if (!gl) { clearinterval(timer); alert("failed to get webgl context.\n" + "your
browser or device may not support webgl."); return; } gl.viewport(0, 0, gl.drawingbufferwidth, gl.drawingbufferheight); } // get a random color value using a helper function.
Textures from code - Web APIs
simple demonstration of procedural texturing</p> <canvas>your
browser does not seem to support html5 canvas.</canvas> body { text-align : center; } canvas { width : 280px; height : 210px; margin : auto; padding : 0; border : none; background-color : black; } button { display : block; font-size : inherit; margin : auto; padding : 0.6em; } <script type="x-shader/x-vertex" id="vertex-shader"> #version 100 precision highp float; attribut...
...program(program); } function getrenderingcontext() { var canvas = document.queryselector("canvas"); canvas.width = canvas.clientwidth; canvas.height = canvas.clientheight; var gl = canvas.getcontext("webgl") || canvas.getcontext("experimental-webgl"); if (!gl) { var paragraph = document.queryselector("p"); paragraph.innerhtml = "failed to get webgl context." + "your
browser or device may not support webgl."; return null; } gl.viewport(0, 0, gl.drawingbufferwidth, gl.drawingbufferheight); gl.clearcolor(0.0, 0.0, 0.0, 1.0); gl.clear(gl.color_buffer_bit); return gl; } })(); the source code of this example is also available on github.
WebGL tutorial - Web APIs
webgl enables web content to use an api based on opengl es 2.0 to perform 3d rendering in an html <canvas> in
browsers that support it without the use of plug-ins.
...the <canvas> element and webgl are not supported in some older
browsers, but are supported in recent versions of all major
browsers.
WebRTC connectivity - Web APIs
see the individual articles on these properties and methods for more specifics, and codecs used by webrtc for information about codecs supported by webrtc and which are compatible with which
browsers.
...not all
browsers support ice over tcp, however.
Writing WebSocket client applications - Web APIs
the
browser may also output to its console a more descriptive error message as well as a closing code as defined in rfc 6455, section 7.4 through the closeevent.
...most
browsers now only allow secure websocket connections, and no longer support using them in insecure contexts.
Fundamentals of WebXR - Web APIs
as
browser developers built support for webvr and allowed developers to experiment, it became clear that in order to finish an api for virtual environments on the web, it would make more sense to start a new specification than to try to "fix" webvr.
...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.
Geometry and reference spaces in WebXR - Web APIs
all of this is the
browser's responsibility to handle, providing consistent behavior regardless of how capable each of the underlying reference spaces are.
...if the estimated floor level is non-zero, the
browser is expected to round it such a way as to avoid fingerprinting (likely to the nearest centimeter).
Inputs and input sources - Web APIs
the
browser delivers pointerdown events corresponding to the action.
... when the action is completed, the
browser deletes the transient input source, and any appropriate pointerup events are sent.
Keyframe Formats - Web APIs
implicit to/from keyframes in newer
browser versions, you are able to set a beginning or end state for an animation only (i.e.
... a single keyframe), and the
browser will infer the other end of the animation if it is able to.
Web audio spatialization basics - Web APIs
the boombox sits inside a room (defined by the edges of the
browser viewport), and in this demo, we can move and rotate it with the provided controls.
... note: there are slight differences in the way the audio spatialization sounds across different
browsers.
Web Crypto API - Web APIs
interfaces some
browsers implemented an interface called crypto without having it well defined or being cryptographically sound.
... in order to avoid confusion, methods and properties of this interface have been removed from
browsers implementing the web crypto api, and all web crypto api methods are available on a new interface: subtlecrypto.
window.cancelIdleCallback() - Web APIs
browser compatibility the compatibility table in this page is generated from structured data.
... if you'd like to contribute to the data, please check out https://github.com/mdn/
browser-compat-data and send us a pull request.
Window.console - Web APIs
the window.console property returns a reference to the console object, which provides methods for logging information to the
browser's console.
... currently there are many implementation differences among
browsers, but work is being done to bring them together and make them more consistent with one another.
Window.customElements - Web APIs
browser compatibility the compatibility table in this page is generated from structured data.
... if you'd like to contribute to the data, please check out https://github.com/mdn/
browser-compat-data and send us a pull request.
Window.event - Web APIs
browser compatibility the compatibility table on this page is generated from structured data.
... if you'd like to contribute to the data, please check out https://github.com/mdn/
browser-compat-data and send us a pull request.
Window.getComputedStyle() - Web APIs
shorthand names like font will not work with most
browsers.
...to avoid the “css history leak” security issue,
browsers may lie about the computed styles for a visited link, returning values as if the user never visited the linked url.
Window.localStorage - Web APIs
the read-only localstorage property allows you to access a storage object for the document's origin; the stored data is saved across
browser sessions.
...for example, the user may have their
browser configured to deny permission to persist data for the specified origin.
Window.ondragdrop - Web APIs
removed in firefox 50, and never implemented in any other
browser.
...note how event.stoppropagation(); prevents the
browser from loading the dropped tab, link or file.
Obsolete features - Web APIs
personalbar obsolete since gecko 76 if this feature is on, then the new secondary window renders the personal toolbar in netscape 6.x, netscape 7.x and mozilla
browser.
...in addition to the personal toolbar, mozilla
browser will render the site navigation bar if such toolbar is visible, present in the parent window.
Window.outerWidth - Web APIs
window.outerwidth read-only property returns the width of the outside of the
browser window.
... it represents the width of the whole
browser window including sidebar (if expanded), window chrome and window resizing borders/handles.
Window: pagehide event - Web APIs
the pagehide event is sent to a window when the
browser hides the current page in the process of presenting a different page from the session's history.
... for example, when the user clicks the
browser's back button, the current page receives a pagehide event before the previous page is shown.
Window: pageshow event - Web APIs
the pageshow event is sent to a window when the
browser displays the window's document due to navigation.
... this includes: initially loading the page navigating to the page from another page in the same window or tab restoring a frozen page on mobile oses returning to the page using the
browser's forward or back buttons during the initial page load, the pageshow event fires after the load event.
Window.prompt() - Web APIs
living standard
browser compatibility the compatibility table in this page is generated from structured data.
... if you'd like to contribute to the data, please check out https://github.com/mdn/
browser-compat-data and send us a pull request.
Window: resize event - Web APIs
bubbles no cancelable no interface uievent event handler property onresize in some earlier
browsers it was possible to register resize event handlers on any html element.
... <p>resize the
browser window to fire the <code>resize</code> event.</p> <p>window height: <span id="height"></span></p> <p>window width: <span id="width"></span></p> const heightoutput = document.queryselector('#height'); const widthoutput = document.queryselector('#width'); function reportwindowsize() { heightoutput.textcontent = window.innerheight; widthoutput.textcontent = window.innerwidth; } window.onresiz...
Window.restore() - Web APIs
this method is currently not working, but you can use: window.moveto(window.screenx, window.screeny);
browser compatibility the compatibility table in this page is generated from structured data.
... if you'd like to contribute to the data, please check out https://github.com/mdn/
browser-compat-data and send us a pull request.
Window.screenLeft - Web APIs
the window.screenleft read-only property returns the horizontal distance, in css pixels, from the left border of the user's
browser viewport to the left side of the screen.
... syntax leftwindowpos = window.screenleft returns a number equal to the number of css pixels from the left edge of the
browser viewport to the left edge of the screen.
Window.screenTop - Web APIs
the window.screentop read-only property returns the vertical distance, in css pixels, from the top border of the user's
browser viewport to the top side of the screen.
... syntax topwindowpos = window.screentop returns a number equal to the number of css pixels from the top edge of the
browser viewport to the top edge of the screen.
Window.scroll() - Web APIs
browser compatibility the compatibility table in this page is generated from structured data.
... if you'd like to contribute to the data, please check out https://github.com/mdn/
browser-compat-data and send us a pull request.
Window.scrollBy() - Web APIs
browser compatibility the compatibility table in this page is generated from structured data.
... if you'd like to contribute to the data, please check out https://github.com/mdn/
browser-compat-data and send us a pull request.
Window.scrollX - Web APIs
this value is subpixel precise in modern
browsers, meaning that it isn't necessarily a whole number.
... if (window.scrollx > 400) { window.scroll(0,0); } notes the pagexoffset property is an alias for the scrollx property: window.pagexoffset == window.scrollx; // always true for cross-
browser compatibility, use window.pagexoffset instead of window.scrollx.
Window.scrollY - Web APIs
this value is subpixel precise in modern
browsers, meaning that it isn't necessarily a whole number.
... the pageyoffset property is an alias for the scrolly property: window.pageyoffset === window.scrolly; // always true for cross-
browser compatibility, use window.pageyoffset instead of window.scrolly.
Worker() - Web APIs
note: that there is a disagreement among
browser manufacturers about whether a data uri is of the same origin or not.
... though gecko 10.0 (firefox 10.0 / thunderbird 10.0 / seamonkey 2.7) and later accept data uris, that's not the case in all other
browsers.
WorkerNavigator.permissions - Web APIs
browser support the compatibility table on this page is generated from structured data.
... if you'd like to contribute to the data, please check out https://github.com/mdn/
browser-compat-data and send us a pull request.
WritableStream - Web APIs
browser compatibility the compatibility table on this page is generated from structured data.
... if you'd like to contribute to the data, please check out https://github.com/mdn/
browser-compat-data and send us a pull request.
WritableStreamDefaultWriter.ready - Web APIs
browser compatibility the compatibility table on this page is generated from structured data.
... if you'd like to contribute to the data, please check out https://github.com/mdn/
browser-compat-data and send us a pull request.
Using XMLHttpRequest in IE6 - Web APIs
however, in ie7 and other
browsers xmlhttprequest is a native javascript object.
... in all modern
browsers, you can create a new xmlhttprequest object using the following code: var request = new xmlhttprequest() however, if you need to also support internet explorer 6 and older, you need to extend your code like this: if (window.xmlhttprequest) { //firefox, opera, ie7, and other
browsers will use the native object var request = new xmlhttprequest(); } else { //ie 5 and 6 will use the activex control var request = new activexobject("microsoft.xmlhttp"); } see also using xmlhttprequest ...
XRBoundedReferenceSpace.boundsGeometry - Web APIs
the specification recommends that
browsers shift the points to the nearest 5 centimeters (while avoiding going outside the physical limitations of the hardware).
...the
browser, however, should provide appropriate warnings to the user about any risks (such as the risk that they might run into a physical wall if they keep moving).
XRReferenceSpace - Web APIs
reset the reset event is sent to an xrreferencespace object when the
browser detects a discontinuity has occurred wherein the tracked object's origin relative to the user's environment or location.
...if the estimated floor level is non-zero, the
browser is expected to round it such a way as to avoid fingerprinting (likely to the nearest centimeter).
XSLT Basic Example - Web APIs
basic example this first example demonstrates the basics of setting up an xslt transformation in a
browser.
...ersion="1.0"?> <xsl:stylesheet version="1.0" xmlns:xsl="http://www.w3.org/1999/xsl/transform"> <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 alert role - Accessibility
description this technique demonstrates how to use the alert role and describes the effect it has on
browsers and assistive technology.
...when this role is added to an element, the
browser will send out an accessible alert event to assistive technology products which can then notify the user about it.
Using the group role - Accessibility
description this technique demonstrates how to use the group role and describes the effect it has on
browsers and assistive technology.
...when the role is added to an element, the
browser will send out an accessible group event to assistive technology products which can then notify the user about it.
Using the log role - Accessibility
description this technique demonstrates how to use the log role and describes the effect it has on
browsers and assistive technology.
...when this role is added to an element, the
browser will send out an accessible log event to assistive technology products which can then notify the user about it.
Using the status role - Accessibility
description this technique demonstrates how to use the status role and describes the effect it has on
browsers and assistive technology.
...when the role is added to an element, the
browser will send out an accessible status event to assistive technology products which can then notify the user about it.
ARIA: Complementary role - Accessibility
added benefits certain technologies such as
browser extensions can generate lists of all landmark roles present on a page, allowing non-screen reader users to also quickly identify and navigate to large sections of the document.
... landmarks
browser extension specifications specification status accessible rich internet applications (wai-aria) 1.1the definition of 'aria: complementary role' in that specification.
ARIA: contentinfo role - Accessibility
added benefits certain technologies such as
browser extensions can generate lists of all landmark roles present on a page, allowing non-screen reader users to also quickly identify and navigate to large sections of the document.
... landmarks
browser extension specifications specification status accessible rich internet applications (wai-aria) 1.1the definition of 'contentinfo landmark role' in that specification.
ARIA: form role - Accessibility
added benefits certain technologies such as
browser extensions can generate lists of all landmark roles present on a page, allowing non-screen reader users to also quickly identify and navigate to large sections of the document.
... landmarks
browser extension specifications specification status accessible rich internet applications (wai-aria) 1.1the definition of 'aria form role' in that specification.
ARIA: Main role - Accessibility
<body> <a href="#main-content">skip to main content</a> <!-- navigation and header content --> <div id="main-content" role="main"> <!-- main page content --> </div> </body> webaim: "skip navigation" links added benefits certain technologies such as
browser extensions can generate lists of all landmark roles present on a page, allowing non-screen reader users to also quickly identify and navigate to large sections of the document.
... landmarks
browser extension specifications specification status accessible rich internet applications (wai-aria) 1.1the definition of 'aria navigtion role' in that specification.
ARIA: Navigation Role - Accessibility
added benefits certain technologies such as
browser extensions can generate lists of all landmark roles present on a page, allowing non-screen reader users to also quickly identify and navigate to large sections of the document.
... landmarks
browser extension specifications specification status accessible rich internet applications (wai-aria) 1.1the definition of 'aria navigtion role' in that specification.
ARIA: Region role - Accessibility
added benefits certain technologies such as
browser extensions can generate lists of all landmark roles present on a page, allowing non-screen reader users to also quickly identify and navigate to large sections of the document.
... landmarks
browser extension specifications specification status accessible rich internet applications (wai-aria) 1.1the definition of 'aria region role' in that specification.
ARIA: search role - Accessibility
added benefits certain technologies such as
browser extensions can generate lists of all landmark roles present on a page, allowing non-screen reader users to also quickly identify and navigate to large sections of the document.
... landmarks
browser extension specifications specification status accessible rich internet applications (wai-aria) 1.1the definition of 'aria search role' in that specification.
ARIA: textbox role - Accessibility
description when an element has the textbox role, the
browser sends an accessible textbox event to assistive technologies, which can then notify the user about it.
...before using this technique, ensure that the
browsers you need to target currently support it.
An overview of accessible web applications and widgets - Accessibility
aria attributes are interpreted automatically by the
browser and translated to the operating system's native accessibility apis.
...--> <div id="ch1panel" role="tabpanel" aria-labelledby="ch1tab">chapter 1 content goes here</div> <div id="ch2panel" role="tabpanel" aria-labelledby="ch2tab">chapter 2 content goes here</div> <div id="quizpanel" role="tabpanel" aria-labelledby="quiztab">quiz content goes here</div> </div> aria is well supported by all major
browsers, including firefox, safari, opera, chrome, and internet explorer, and many assistive technologies.
Cognitive accessibility - Accessibility
don't alter or remove the
browser's default :focus styling, unless you're making focus even more obvious.
...similarly, don't change defaults like the
browser's back button.
Web accessibility for seizures and physical reactions - Accessibility
the epilepsy foundation's article "take advantage of media queries with <style> in setting up media queries, you are enabling controls by the user; these controls are made available in the
browser or in the os.
... prefers-reduced-motion support for prefers-reduced-motion in modern
browsers is growing.
Robust - Accessibility
browsers), but also with future ones too.
... success criteria how to conform 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.
-webkit-print-color-adjust - CSS: Cascading Style Sheets
the -webkit-print-color-adjust property is a non-standard css extension that can be used to force printing of background colors and images in
browsers based on the webkit engine.
... background colors and images are only printed if the user explicitly allows it in their
browser's print settings dialog.
:-webkit-autofill - CSS: Cascading Style Sheets
the :-webkit-autofill css pseudo-class matches when an <input> element has its value autofilled by the
browser.
... note: the user agent style sheets of many
browsers use !important in their :-webkit-autofill style declarations, making them non-overrideable by webpages without resorting to javascript hacks.
::-webkit-scrollbar - CSS: Cascading Style Sheets
::-webkit-scrollbar is only available in blink- and webkit-based
browsers (e.g., chrome, edge, opera, safari, all
browsers on ios, and others).
... css scrollbar selectors you can use the following pseudo elements to customize various parts of the scrollbar for webkit
browsers: ::-webkit-scrollbar — the entire scrollbar.
::first-letter (:first-letter) - CSS: Cascading Style Sheets
(this is poorly supported by
browsers; see the
browser compatibility table below.) a combination of the ::before pseudo-element and the content property may inject some text at the beginning of the element.
...
browsers also accept :first-letter, introduced in css2.
::slotted() - CSS: Cascading Style Sheets
browser compatibility the compatibility table on this page is generated from structured data.
... if you'd like to contribute to the data, please check out https://github.com/mdn/
browser-compat-data and send us a pull request.
:focus-visible - CSS: Cascading Style Sheets
(many
browsers show a “focus ring” by default in this case.) this selector is useful to provide a different focus indicator based on the user’s input modality (mouse vs.
... <custom-button tabindex="0" role="button">click me</custom-button> custom-button { display: inline-block; margin: 10px; } custom-button:focus { /* provide a fallback style for
browsers that don't support :focus-visible */ outline: none; background: lightgrey; } custom-button:focus:not(:focus-visible) { /* remove the focus indicator on mouse-focus for
browsers that do support :focus-visible */ background: transparent; } custom-button:focus-visible { /* draw a very noticeable focus style for keyboard-focus on
browsers that do support :focus-visibl...
:host-context() - CSS: Cascading Style Sheets
browser compatibility the compatibility table on this page is generated from structured data.
... if you'd like to contribute to the data, please check out https://github.com/mdn/
browser-compat-data and send us a pull request.
:host - CSS: Cascading Style Sheets
browser compatibility the compatibility table on this page is generated from structured data.
... if you'd like to contribute to the data, please check out https://github.com/mdn/
browser-compat-data and send us a pull request.
:read-only - CSS: Cascading Style Sheets
browser compatibility the compatibility table on this page is generated from structured data.
... if you'd like to contribute to the data, please check out https://github.com/mdn/
browser-compat-data and send us a pull request.
:read-write - CSS: Cascading Style Sheets
browser compatibility the compatibility table on this page is generated from structured data.
... if you'd like to contribute to the data, please check out https://github.com/mdn/
browser-compat-data and send us a pull request.
:scope - CSS: Cascading Style Sheets
browser compatibility the compatibility table on this page is generated from structured data.
... if you'd like to contribute to the data, please check out https://github.com/mdn/
browser-compat-data and send us a pull request.
:where() - CSS: Cascading Style Sheets
browser compatibility the compatibility table on this page is generated from structured data.
... if you'd like to contribute to the data, please check out https://github.com/mdn/
browser-compat-data and send us a pull request.
@font-feature-values - CSS: Cascading Style Sheets
browser compatibility the compatibility table on this page is generated from structured data.
... if you'd like to contribute to the data, please check out https://github.com/mdn/
browser-compat-data and send us a pull request.
-moz-device-pixel-ratio - CSS: Cascading Style Sheets
media: media/visual accepts min/max prefixes: yes examples basic compatibility example -moz-device-pixel-ratio may be used for compatibility with firefox older than 16, and alongside -webkit-device-pixel-ratio for compatibility with webkit-based
browsers that do not support dppx.
... example: @media (-webkit-min-device-pixel-ratio: 2), /* webkit-based
browsers */ (min--moz-device-pixel-ratio: 2), /* older firefox
browsers (prior to firefox 16) */ (min-resolution: 2dppx), /* the standard way */ (min-resolution: 192dpi) /* dppx fallback */ note: see this csswg article for compatibility good practices regarding resolution and dppx.
-webkit-transition - CSS: Cascading Style Sheets
it was never supported in
browsers not based on webkit or blink.
... note: you should not use this media feature; it was never specified, has never been widely implemented, and has been removed from all
browsers.
At-rules - CSS: Cascading Style Sheets
/* general structure */ @identifier (rule); /* example: tells
browser to use utf-8 character set */ @charset "utf-8"; there are several at-rules, designated by their identifiers, each with a different syntax: @charset — defines the character set used by the style sheet.
... @supports — a conditional group rule that will apply its content if the
browser meets the criteria of the given condition.
Box-shadow generator - CSS: Cascading Style Sheets
================ */ .group:before, .group:after { content: ""; display: table; } .group:after { clear:both; } .group { zoom: 1; /* for ie 6/7 (trigger haslayout) */ } /* grid column setup * ========================================================================== */ .col { display: block; float:left; margin: 1% 0 1% 1.6%; } .col:first-child { margin-left: 0; } /* all
browsers except ie6 and lower */ /* * ui slider */ .slidergroup { height: 20px; margin: 10px 0; font-family: "segoe ui", arial, helvetica, sans-serif; -moz-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...
...ss.prototype.setwidth = function setwidth(value) { this.width = value; this.node.style.width = this.width + 'px'; outputmanager.updateproperty(this.id, 'width', this.width + 'px'); } cssclass.prototype.setheight = function setheight(value) { this.height = value; this.node.style.height = this.height + 'px'; outputmanager.updateproperty(this.id, 'height', this.height + 'px'); } //
browser support cssclass.prototype.setrotate = function setrotate(value) { var cssvalue = 'rotate(' + value +'deg)'; this.node.style.transform = cssvalue; this.node.style.webkittransform = cssvalue; this.node.style.mstransform = cssvalue; if (value !== 0) { if (this.rotate === 0) { outputmanager.toggleproperty(this.id, 'transform', true); outputmanager.toggleproperty(this.id, '-we...
Box alignment for block, absolutely positioned and table layout - CSS: Cascading Style Sheets
this document details how the specification expects these properties to be implemented for completeness, and is likely to change as the specification and
browser implementations develop.
... aligning in these layout methods today as we do not currently have
browser support for box alignment in block layout, your options for alignment are either to use one of the existing alignment methods or, to make even a single item inside a container a flex item in order to use the alignment properties as specified in flexbox.
Basic Concepts of Multicol - CSS: Cascading Style Sheets
the
browser will then assign the correct amount of space to each column box to create the requested number of columns.
...if you declare a column-width, the
browser will work out how many columns of that width will fit into the multicol container and distribute any extra space equally between the columns.
Ordering Flex Items - CSS: Cascading Style Sheets
rning not to use reordering to fix issues in your source: “authors must not use order or the *-reverse values of flex-flow/flex-direction as a substitute for correct source ordering, as that can ruin the accessibility of the document.” note: for some years firefox had a bug whereby it would attempt to follow the visual order and not the source order, making it behave differently to other
browsers.
...especially when using newer layout methods you should ensure that your
browser testing includes testing the site using keyboard only, rather than a mouse or touchscreen.
Box alignment in CSS Grid Layout - CSS: Cascading Style Sheets
while the specification currently specifies alignment details for all layout methods,
browsers have not fully implemented all of the specification; however, the css grid layout method has been widely adopted.
... this behavior has now been clarified in the specification, with
browsers yet to implement the correct behavior.
CSS Grid Layout and Accessibility - CSS: Cascading Style Sheets
in the introduction to that section are details of what the specification expects
browsers to do when the content is visually reordered using grid layout.
...adrian roselli has also posted regarding tab order in various
browsers – although this was prior to grid support being fully implemented in firefox.
CSS Scrollbars - CSS: Cascading Style Sheets
baseline rules for scrollbar usability | adrian roselli
browser compatibility the compatibility table in this page is generated from structured data.
... if you'd like to contribute to the data, please check out https://github.com/mdn/
browser-compat-data and send us a pull request.
Overview of CSS Shapes - CSS: Cascading Style Sheets
if you do not have shapes support in the
browser, the user will see content flowing around the sides of a rectangular box as before.
... developer tools for shapes along with css shapes support in the
browser, firefox are shipping a shape path editor in the firefox devtools.
Comments - CSS: Cascading Style Sheets
a css comment is used to add explanatory notes to the code or to prevent the
browser from interpreting specific parts of the style sheet.
...however, when using the <style> element, you may use <!-- --> to hide css from older
browsers, although this is not recommended.
Privacy and the :visited selector - CSS: Cascading Style Sheets
to mitigate this problem,
browsers have limited the amount of information that can be obtained from visited links.
... little white lies to preserve users' privacy, firefox and other
browsers will lie to web applications under certain circumstances: the window.getcomputedstyle method, and similar functions such as element.queryselector, will always return values indicating that a user has never visited any of the links on a page.
Pseudo-elements - CSS: Cascading Style Sheets
however, since this distinction was not present in older versions of the w3c spec, most
browsers support both syntaxes for the original pseudo-elements.
... index of standard pseudo-elements ::after (:after) ::backdrop ::before (:before) ::cue ::cue-region ::first-letter (:first-letter) ::first-line (:first-line) ::grammar-error ::marker ::part() ::placeholder ::selection ::slotted() ::spelling-error
browser lowest version support of internet explorer 8.0 :pseudo-element 9.0 :pseudo-element ::pseudo-element firefox (gecko) 1.0 (1.0) :pseudo-element 1.0 (1.5) :pseudo-element ::pseudo-element opera 4.0 :pseudo-element 7.0 :pseudo-element ::pseudo-element safari (webkit) 1.0 (85) :pseudo-element ::pseudo-element specifications specification status comment css level 1 reco...
Specificity - CSS: Cascading Style Sheets
specificity is the means by which
browsers decide which css property values are the most relevant to an element and, therefore, will be applied.
... <div id="no-where-support"> ⚠️ your
browser doesn't support the <code><a href="/docs/web/css/:where" target="_top">:where()</a></code> pseudo-class.
Visual formatting model - CSS: Cascading Style Sheets
this includes continuous media such as a computer screen and paged media such as a book or document printed by
browser print functions.
... the role of the viewport in continuous media, the viewport is the viewing area of the
browser window.
animation-delay - CSS: Cascading Style Sheets
browser compatibility the compatibility table on this page is generated from structured data.
... if you'd like to contribute to the data, please check out https://github.com/mdn/
browser-compat-data and send us a pull request.
animation-direction - CSS: Cascading Style Sheets
browser compatibility the compatibility table on this page is generated from structured data.
... if you'd like to contribute to the data, please check out https://github.com/mdn/
browser-compat-data and send us a pull request.
attr() - CSS: Cascading Style Sheets
ch | em | ex | ic | lh | rlh | rem | vb | vi | vw | vh | vmin | vmax | mm | q | cm | in | pt | pc | px | deg | grad | rad | turn | ms | s | hz | khz | % examples content property html <p data-foo="hello">world</p> css [data-foo]::before { content: attr(data-foo) " "; } result <color> value html <div class="background" data-background="lime">background expected to be red if your
browser does not support advanced usage of attr()</div> css .background { height: 100vh; } .background { background-color: red; } .background[data-background] { background-color: attr(data-background color, red); } specifications specification status comment css values and units module level 4the definition of 'attr()' in that specification.
... these changes are experimental and may be dropped during the cr phase if
browser support is too small.
background-image - CSS: Cascading Style Sheets
if a specified image cannot be drawn (for example, when the file denoted by the specified uri cannot be loaded),
browsers handle it as they would a none value.
... accessibility concerns
browsers do not provide any special information on background images to assistive technology.
background-position - CSS: Cascading Style Sheets
browser compatibility the compatibility table in this page is generated from structured data.
... if you'd like to contribute to the data, please check out https://github.com/mdn/
browser-compat-data and send us a pull request.
border-bottom-width - CSS: Cascading Style Sheets
browser compatibility the compatibility table in this page is generated from structured data.
... if you'd like to contribute to the data, please check out https://github.com/mdn/
browser-compat-data and send us a pull request.
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">firefox</td> <td class="gk">gecko</td></tr> <tr><td class="ed">edge</td> <td class="tr">edgehtml</td></tr> <tr><td class="sa">safari</td> <td class="wk">webkit</td></tr> <tr><td class="ch">chrome</td> ...
...<td class="bk">blink</td></tr> <tr><td class="op">opera</td> <td class="bk">blink</td></tr> </tbody> </table> <table class="collapse"> <caption><code>border-collapse: collapse</code></caption> <tbody> <tr><th>
browser</th> <th>layout engine</th></tr> <tr><td class="fx">firefox</td> <td class="gk">gecko</td></tr> <tr><td class="ed">edge</td> <td class="tr">edgehtml</td></tr> <tr><td class="sa">safari</td> <td class="wk">webkit</td></tr> <tr><td class="ch">chrome</td> <td class="bk">blink</td></tr> <tr><td class="op">opera</td> <td class="bk">blink</td></tr> </tbody> </table> css .collapse { border-collapse: collapse; } .separate { border-collapse: separate; } table { display: inline-table; margin: 1em; border: dashed 5px; } table th, table td { b...
border-inline-end - CSS: Cascading Style Sheets
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
browser to anotherapplies toall elementsinheritednocomputed valueas each of the properties of the shorthand:border-width: as each of the properties of the shorthand:border-bottom-width: the absolute length or 0 if border-bottom-style is none or hiddenborder-left-width: 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...
...efinition 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
browser to anotherapplies toall elementsinheritednocomputed valueas each of the properties of the shorthand:border-width: as each of the properties of the shorthand:border-bottom-width: the absolute length or 0 if border-bottom-style is none or hiddenborder-left-width: 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...
border-left-style - CSS: Cascading Style Sheets
browser compatibility the compatibility table in this page is generated from structured data.
... if you'd like to contribute to the data, please check out https://github.com/mdn/
browser-compat-data and send us a pull request.
border-left - CSS: Cascading Style Sheets
recommendation initial definition
browser compatibility the compatibility table in this page is generated from structured data.
... if you'd like to contribute to the data, please check out https://github.com/mdn/
browser-compat-data and send us a pull request.
border-right-style - CSS: Cascading Style Sheets
browser compatibility the compatibility table in this page is generated from structured data.
... if you'd like to contribute to the data, please check out https://github.com/mdn/
browser-compat-data and send us a pull request.
border-right - CSS: Cascading Style Sheets
recommendation initial definition
browser compatibility the compatibility table in this page is generated from structured data.
... if you'd like to contribute to the data, please check out https://github.com/mdn/
browser-compat-data and send us a pull request.
border-top - CSS: Cascading Style Sheets
recommendation initial definition
browser compatibility the compatibility table in this page is generated from structured data.
... if you'd like to contribute to the data, please check out https://github.com/mdn/
browser-compat-data and send us a pull request.
border - CSS: Cascading Style Sheets
browser compatibility the compatibility table in this page is generated from structured data.
... if you'd like to contribute to the data, please check out https://github.com/mdn/
browser-compat-data and send us a pull request.
box-flex-group - CSS: Cascading Style Sheets
when dividing up the box's extra space, the
browser first considers all elements within the first flex group.
...ted 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-child(2) { -webkit-box-flex-group: 2; } this was only ever supported in webkit-based
browsers, with a prefix, and in subsequent versions of the spec this functionality does not have an equivalent.
clear - CSS: Cascading Style Sheets
recommendation initial definition
browser compatibility the compatibility table in this page is generated from structured data.
... if you'd like to contribute to the data, please check out https://github.com/mdn/
browser-compat-data and send us a pull request.
column-count - CSS: Cascading Style Sheets
browser compatibility the compatibility table in this page is generated from structured data.
... if you'd like to contribute to the data, please check out https://github.com/mdn/
browser-compat-data and send us a pull request.
conic-gradient() - CSS: Cascading Style Sheets
browsers supporting conic gradients also accept percent values, with 100% equaling 360 degrees, but this is not in the specification.
... accessibility concerns
browsers do not provide any special information on background images to assistive technology.
direction - CSS: Cascading Style Sheets
browser compatibility the compatibility table on this page is generated from structured data.
... if you'd like to contribute to the data, please check out https://github.com/mdn/
browser-compat-data and send us a pull request.
empty-cells - CSS: Cascading Style Sheets
browser compatibility the compatibility table on this page is generated from structured data.
... if you'd like to contribute to the data, please check out https://github.com/mdn/
browser-compat-data and send us a pull request.
font-family - CSS: Cascading Style Sheets
the
browser will select the first font in the list that is installed or that can be downloaded using a @font-face at-rule.
...this lets the
browser select an acceptable fallback font when necessary.
font-kerning - CSS: Cascading Style Sheets
values auto the
browser determines whether font kerning should be used or not.
... for example, some
browsers will disable kerning on small fonts, since applying it could harm the readability of text.
font-smooth - CSS: Cascading Style Sheets
auto - let the
browser decide (uses subpixel anti-aliasing when available; this is the default) none - turn font smoothing off; display text with jagged sharp edges.
... auto - allow the
browser to select an optimization for font smoothing, typically grayscale.
font-style - CSS: Cascading Style Sheets
if no oblique faces are available, the
browser will synthesize an oblique version of the font by slanting a normal face by the specified amount.
... for the example below to work, you'll need a
browser that supports the css fonts level 4 syntax in which font-style: oblique can accept an <angle>.
font-synthesis - CSS: Cascading Style Sheets
the font-synthesis css property controls which missing typefaces, bold or italic, may be synthesized by the
browser.
...in these cases, it may be desirable to switch off the
browser's default font-synthesis.
font-variant-position - CSS: Cascading Style Sheets
browser compatibility the compatibility table on this page is generated from structured data.
... if you'd like to contribute to the data, please check out https://github.com/mdn/
browser-compat-data and send us a pull request.
font-variant - CSS: Cascading Style Sheets
recommendation initial definition
browser compatibility the compatibility table on this page is generated from structured data.
... if you'd like to contribute to the data, please check out https://github.com/mdn/
browser-compat-data and send us a pull request.
<gradient> - CSS: Cascading Style Sheets
(be aware that older
browsers may not use this behavior when using the transparent keyword.) examples linear gradient example a simple linear gradient.
...note that this isn't supported widely across
browser as of yet.
initial - CSS: Cascading Style Sheets
browser compatibility the compatibility table on this page is generated from structured data.
... if you'd like to contribute to the data, please check out https://github.com/mdn/
browser-compat-data and send us a pull request.
letter-spacing - CSS: Cascading Style Sheets
browser compatibility the compatibility table on this page is generated from structured data.
... if you'd like to contribute to the data, please check out https://github.com/mdn/
browser-compat-data and send us a pull request.
mix-blend-mode - CSS: Cascading Style Sheets
candidate recommendation initial definition
browser compatibility the compatibility table in this page is generated from structured data.
... if you'd like to contribute to the data, please check out https://github.com/mdn/
browser-compat-data and send us a pull request.
object-fit - CSS: Cascading Style Sheets
candidate recommendation initial definition
browser compatibility the compatibility table on this page is generated from structured data.
... if you'd like to contribute to the data, please check out https://github.com/mdn/
browser-compat-data and send us a pull request.
object-position - CSS: Cascading Style Sheets
browser compatibility the compatibility table on this page is generated from structured data.
... if you'd like to contribute to the data, please check out https://github.com/mdn/
browser-compat-data and send us a pull request.
orphans - CSS: Cascading Style Sheets
browser compatibility the compatibility table on this page is generated from structured data.
... if you'd like to contribute to the data, please check out https://github.com/mdn/
browser-compat-data and send us a pull request.
outline-offset - CSS: Cascading Style Sheets
recommendation initial definition
browser compatibility the compatibility table in this page is generated from structured data.
... if you'd like to contribute to the data, please check out https://github.com/mdn/
browser-compat-data and send us a pull request.
overflow-anchor - CSS: Cascading Style Sheets
the overflow-anchor css property provides a way to opt out of the
browser's scroll anchoring behavior, which adjusts scroll position to minimize content shifts.
... scroll anchoring behavior is enabled by default in any
browser that supports it.
overflow-wrap - CSS: Cascading Style Sheets
the overflow-wrap css property applies to inline elements, setting whether the
browser should insert line breaks within an otherwise unbreakable string to prevent text from overflowing its line box.
... the property was originally a nonstandard and unprefixed microsoft extension called word-wrap, and was implemented by most
browsers with the same name.
paint() - CSS: Cascading Style Sheets
browser compatibility the compatibility table on this page is generated from structured data.
... if you'd like to contribute to the data, please check out https://github.com/mdn/
browser-compat-data and send us a pull request.
pointer-events - CSS: Cascading Style Sheets
browser compatibility the compatibility table on this page is generated from structured data.
... if you'd like to contribute to the data, please check out https://github.com/mdn/
browser-compat-data and send us a pull request.
repeating-conic-gradient() - CSS: Cascading Style Sheets
browsers supporting repeating conic gradients also accept percent values, with 100% equaling 360 degrees, but this is not in the specification.
... accessibility concerns
browsers do not provide any special information on background images to assistive technology.
right - CSS: Cascading Style Sheets
browser compatibility the compatibility table in this page is generated from structured data.
... if you'd like to contribute to the data, please check out https://github.com/mdn/
browser-compat-data and send us a pull request.
ruby-position - CSS: Cascading Style Sheets
working draft initial definition
browser compatibility the compatibility table on this page is generated from structured data.
... if you'd like to contribute to the data, please check out https://github.com/mdn/
browser-compat-data and send us a pull request.
<shape> - CSS: Cascading Style Sheets
browser compatibility the compatibility table on this page is generated from structured data.
... if you'd like to contribute to the data, please check out https://github.com/mdn/
browser-compat-data and send us a pull request.
text-combine-upright - CSS: Cascading Style Sheets
] examples digits the digits value requires less markup than the all value when digits are being combined, but it is currently not very widely supported by
browsers.
... html <p lang="ja" class="exampletext">平成20年4月16日に</p> css .exampletext { writing-mode: vertical-lr; text-combine-upright: digits 2; font: 36px serif; } results screenshotlive sample all the all value requires markup around every piece of horizontal text, but it is currently supported by more
browsers than the digits value.
text-decoration-skip-ink - CSS: Cascading Style Sheets
auto the default — the
browser may interrupt underlines and overlines so that they do not touch or closely approach a glyph.
... all the
browser must interrupt underlines and overlines so that they do not touch or closely approach a glyph.
Web Audio playbackRate explained - Developer guides
defaultplaybackrate and ratechange in addition to playbackrate, we also have a defaultplaybackrate property available, which lets us set the default playback rate: the playback rate to which the media resets; for example, if we change the source of the video, or (in some
browsers) when an ended event is generated.
...
browser support chrome 20+ ✔ firefox 20+ ✔ ie 9+ ✔ safari 6+ ✔ opera 15+ ✔ mobile chrome (android) ✖ mobile firefox 24+ ✔ ie mobile ✖ mobile safari 6+ (ios) ✔ opera mobile ✖ notes most
browsers stop playing audio outside playbackrate bounds of 0.5 and 4, leaving the video playing silently.
Audio and video manipulation - Developer guides
having native audio and video in the
browser means we can use these data streams with technologies such as <canvas>, webgl or web audio api to modify audio and video directly, for example adding reverb/compression effects to audio, or grayscale/sepia filters to video.
...for efficiency, you should consider using requestanimationframe() instead of settimeout() when running on
browsers that support it.
Block formatting context - Developer guides
the problem with using overflow to create a new bfc is that the overflow property is meant for telling the
browser how you want to deal with overflowing content.
... the value name of flow-root makes sense when you understand you are creating something that acts like the root element (<html> element in
browser) in terms of how it creates a new context for the flow layout inside it.
Creating and triggering events - Developer guides
such events are commonly called synthetic events, as opposed to the events fired by the
browser itself.
... this constructor is supported in most modern
browsers (with internet explorer being the exception).
Introduction to Web development - Developer guides
html elements reference guide — a comprehensive guide to html elements with details on how
browsers support them css getting started with css — an absolute beginners guide to css covers basic concepts and fundamentals css reference guide — a complete guide to css with details on the level of gecko/firefox support for each.
... sitepoint a reliable reference site for learning html, css and javascript which also mentions feature support across different
browsers and known
browser bugs.
A hybrid approach - Developer guides
using user-agent detection specifically for content and not layout also allows you to have a single url for each piece of content, so that the content can adapt its layout to the user’s
browser.
...for example, you may not even need to adjust your content based on what actual device a user is using — just knowing whether a feature is present on their
browser is often good enough.
HTML attribute: required - HTML: Hypertext Markup Language
note color and range don't support required, but type color defaults to #00000, and range defaults to the midpoint between min and max -- with min and max defaulting to 0 and 100 respectively in most
browsers if not declared -- so always has a value.
...assistive technology should inform the user that the form control in mandatory based on the required attribute, but adding aria-required="true" doesn't hurt, in case the
browser / screen reader combination does not support required yet.
<embed>: The Embed External Content element - HTML: Hypertext Markup Language
this content is provided by an external application or other source of interactive content such as a
browser plug-in.
... keep in mind that most modern
browsers have deprecated and removed support for
browser plug-ins, so relying upon <embed> is generally not wise if you want your site to be operable on the average user's
browser.
<font> - HTML: Hypertext Markup Language
the document text in the default style is rendered in the first font face that the client's
browser supports.
... if no font listed is installed on the local system, the
browser typically defaults to the proportional or fixed-width font for that system.
<hgroup> - HTML: Hypertext Markup Language
it is partially implemented in most
browsers, though, so is unlikely to go away.
... however, given that a key purpose of the <hgroup> element is to affect how headings are displayed by the outline algorithm defined in the html specification—but the html outline algorithm is not implemented in any
browsers—then the <hgroup> semantics are in practice only theoretical.
<input type="button"> - HTML: Hypertext Markup Language
in this example, s is specified as the access key (you'll need to press s plus the particular modifier keys for your
browser/os combination; see accesskey for a useful list of those).
...ton" value="button 2"> <input type="button" value="button 3"> </fieldset> const button = document.queryselector('input'); const fieldset = document.queryselector('fieldset'); button.addeventlistener('click', disablebutton); function disablebutton() { fieldset.disabled = true; window.settimeout(function() { fieldset.disabled = false; }, 2000); } note: firefox will, unlike other
browsers, by default, persist the dynamic disabled state of a <button> across page loads.
<input type="submit"> - HTML: Hypertext Markup Language
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 f...
... in this example, s is specified as the access key (you'll need to press s plus the particular modifier keys for your
browser/os combination.
<main> - HTML: Hypertext Markup Language
prefer using the <main> element over declaring role="main", unless there are legacy
browser support concerns.
... <body> <a href="#main-content">skip to main content</a> <!-- navigation and header content --> <main id="main-content"> <!-- main page content --> </main> </body> webaim: "skip navigation" links reader mode
browser reader mode functionality looks for the presence of the <main> element, as well as heading and content sectioning elements when converting content into a specialized reader view.
<menu> - HTML: Hypertext Markup Language
contextmenu="popup-menu"> right-click to see the adjusted context menu </div> <menu type="context" id="popup-menu"> <menuitem>action</menuitem> <menuitem>another action</menuitem> <hr/> <menuitem>separated action</menuitem> </menu> css div { width: 300px; height: 80px; background-color: lightgreen; } result menu button menu buttons haven't been implemented in any known
browsers yet.
...--> <button type="menu" menu="popup-menu"> dropdown </button> <menu type="context" id="popup-menu"> <menuitem>action</menuitem> <menuitem>another action</menuitem> <hr/> <menuitem>separated action</menuitem> </menu> result toolbar toolbar menus haven't been implemented in any known
browsers yet.
<optgroup> - HTML: Hypertext Markup Language
often
browsers grey out such control and it won't receive any browsing events, like mouse clicks or focus-related ones.
... label the name of the group of options, which the
browser can use when labeling the options in the user interface.
<rb>: The Ruby Base element - HTML: Hypertext Markup Language
the
browser can then fill in the full element in the rendered version.
...in this case we don't need to include <rb> elements: <ruby> 漢 <rp>(</rp><rt>kan</rt><rp>)</rp> 字 <rp>(</rp><rt>ji</rt><rp>)</rp> </ruby> <ruby> <rb>漢<rb>字 <rp>(</rp><rt>kan<rt>ji<rp>)</rp> </ruby> body { font-size: 22px; } the output looks like so: the html above might look something like this when rendered by a
browser without ruby support: 漢字 (kan ji) body { font-size: 22px; } note: see the article about the <ruby> element for further examples.
<rp>: The Ruby Fallback Parenthesis element - HTML: Hypertext Markup Language
the html ruby fallback parenthesis (<rp>) element is used to provide fall-back parentheses for
browsers that do not support display of ruby annotations using the <ruby> element.
... <ruby> 漢 <rp>(</rp><rt>kan</rt><rp>)</rp> 字 <rp>(</rp><rt>ji</rt><rp>)</rp> </ruby> css body { font-size: 22px; } the result looks like this in your
browser: the html above rendered by a
browser without ruby support might look like this: 漢 (kan) 字 (ji) body { font-size: 22px; } see the article about the <ruby> element for further examples.
<samp>: The Sample Output element - HTML: Hypertext Markup Language
its contents are typically rendered using the
browser's default monospaced font (such as courier or lucida console).
... usage notes you can use a css rule to override the
browser's default font face for the <samp> element; however, it's possible that the
browser's preferences may take precedence over any css you specify.
<spacer> - HTML: Hypertext Markup Language
however, <spacer> no longer supported by any major
browser and the same effects can now be achieved using simple css.
... firefox, which is the descendant of netscape's
browsers, removed support for <spacer> in version 4.
<strong>: The Strong Importance element - HTML: Hypertext Markup Language
browsers typically render the contents in bold type.
... it may help to realize that both are valid and semantic elements in html5 and that it's a coincidence that they both have the same default styling (boldface) in most
browsers (although some older
browsers actually underline <strong>).
<tr>: The Table Row element - HTML: Hypertext Markup Language
deprecated attributes the following attributes may still be implemented in
browsers but are no longer part of the html specification and may be missing or may not work as expected.
...not even the table section elements are used; instead, the
browser is allowed to determine this automatically.
<tt>: The Teletype Text element (obsolete) - HTML: Hypertext Markup Language
<p>enter the following at the telnet command prompt: <code>set localecho</code><br /> the telnet client should display: <tt>local echo is on</tt></p> result overriding the default font you can override the
browser's default font—if the
browser permits you to do so, which it isn't required to do—using css: css tt { font-family: "lucida console", "menlo", "monaco", "courier", monospace; } html <p>enter the following at the telnet command prompt: <code>set localecho</code><br /> the telnet client should display: <tt>local echo is on</tt></p> result usage notes the <tt> element i...
...s, by default, rendered using the
browser's default non-proportional font.
<ul>: The Unordered List element - HTML: Hypertext Markup Language
the interpretation of this attribute depends on the user agent, and it doesn't work in all
browsers.
...the values defined under html3.2 and the transitional version of html 4.0/4.01 are: circle disc square a fourth bullet type has been defined in the webtv interface, but not all
browsers support it: triangle.
<var>: The Variable element - HTML: Hypertext Markup Language
it's typically presented using an italicized version of the current typeface, although that behavior is
browser-dependent.
... <var> is commonly used include: <code>: the html code element <kbd>: the html keyboard input element <samp>: the html sample output element if you encounter code that is mistakenly using <var> for style purposes rather than semantic purposes, you should either use a <span> with appropriate css or, an appropriate semantic element among the following: <em> <i> <q> default style most
browsers apply font-style to "italic" when rendering <var>.
dir - HTML: Hypertext Markup Language
that way, the text will display correctly even on a
browser that doesn't support css or has the css deactivated.
...
browsers might allow users to change the directionality of <input> and <textarea>s in order to assist with authoring content.
draggable - HTML: Hypertext Markup Language
the draggable global attribute is an enumerated attribute that indicates whether the element can be dragged, either with native
browser behavior or the html drag and drop api.
... if this attribute is not set, its default value is auto, which means drag behavior is the default
browser behavior: only text selections, images, and links can be dragged.
HTML: Hypertext Markup Language
html uses "markup" to annotate text, images, and other content for display in a web
browser.
... preloading content with rel="preload" the preload value of the <link> element's rel attribute allows you to write declarative fetch requests in your html <head>, specifying resources that your pages will need very soon after loading, which you therefore want to start preloading early in the lifecycle of a page load, before the
browser's main rendering machinery kicks in.
Reason: CORS disabled - HTTP
a request that needs to use cors was attempted, but cors is disabled in the user's
browser.
... when this happens, the user needs to turn cors back on in their
browser.
CORS errors - HTTP
if the cors configuration isn't setup correctly, the
browser console will present an error like "cross-origin request blocked: the same origin policy disallows reading the remote resource at $somesite" indicating that the request was blocked due to violating the cors security rules.
...the only way to determine what specifically went wrong is to look at the
browser's console for details.
HTTP conditional requests - HTTP
besides the setting of the validators on the server side, this mechanism is transparent: all
browsers manage a cache and send such conditional requests without any special work to be done by web developers.
...once achieved, the
browser will serve the expected conditional requests.
Accept-Charset - HTTP
browsers usually don't send this header, as the default value for each resource is usually correct and transmitting it would allow fingerprinting.
...to guarantee better privacy through less configuration-based entropy, all
browsers omit the accept-charset header: internet explorer 8+, safari 5+, opera 11+, firefox 10+ and chrome 27+ no longer send it.
Accept-Ranges - HTTP
in presence of an accept-ranges header, the
browser may try to resume an interrupted download, rather than to start it from the start again.
... none no range unit is supported, this makes the header equivalent of its own absence and is therefore rarely used, though some
browsers, like ie9, it is used to disable or remove the pause buttons in the download manager.
CSP: base-uri - HTTP
some
browsers specifically exclude blob and filesystem from source directives.
...specifying nonce makes a modern
browser ignore 'unsafe-inline' which could still be set for older
browsers without nonce support.
CSP: child-src - HTTP
some
browsers specifically exclude blob and filesystem from source directives.
...specifying nonce makes a modern
browser ignore 'unsafe-inline' which could still be set for older
browsers without nonce support.
CSP: default-src - HTTP
some
browsers specifically exclude blob and filesystem from source directives.
...specifying nonce makes a modern
browser ignore 'unsafe-inline' which could still be set for older
browsers without nonce support.
CSP: font-src - HTTP
some
browsers specifically exclude blob and filesystem from source directives.
...specifying nonce makes a modern
browser ignore 'unsafe-inline' which could still be set for older
browsers without nonce support.
CSP: frame-ancestors - HTTP
setting this directive to 'none' is similar to x-frame-options: deny (which is also supported in older
browsers).
...some
browsers specifically exclude blob and filesystem from source directives.
CSP: frame-src - HTTP
some
browsers specifically exclude blob and filesystem from source directives.
...specifying nonce makes a modern
browser ignore 'unsafe-inline' which could still be set for older
browsers without nonce support.
CSP: img-src - HTTP
some
browsers specifically exclude blob and filesystem from source directives.
...specifying nonce makes a modern
browser ignore 'unsafe-inline' which could still be set for older
browsers without nonce support.
CSP: manifest-src - HTTP
some
browsers specifically exclude blob and filesystem from source directives.
...specifying nonce makes a modern
browser ignore 'unsafe-inline' which could still be set for older
browsers without nonce support.
CSP: media-src - HTTP
some
browsers specifically exclude blob and filesystem from source directives.
...specifying nonce makes a modern
browser ignore 'unsafe-inline' which could still be set for older
browsers without nonce support.
CSP: navigate-to - HTTP
some
browsers specifically exclude blob and filesystem from source directives.
...specifying nonce makes a modern
browser ignore 'unsafe-inline' which could still be set for older
browsers without nonce support.
CSP: object-src - HTTP
some
browsers specifically exclude blob and filesystem from source directives.
...specifying nonce makes a modern
browser ignore 'unsafe-inline' which could still be set for older
browsers without nonce support.
CSP: prefetch-src - HTTP
some
browsers specifically exclude blob and filesystem from source directives.
...specifying nonce makes a modern
browser ignore 'unsafe-inline' which could still be set for older
browsers without nonce support.
CSP: report-uri - HTTP
though the report-to directive is intended to replace the deprecated report-uri directive, report-to isn’t supported in most
browsers yet.
... so for compatibility with current
browsers while also adding forward compatibility when
browsers get report-to support, you can specify both report-uri and report-to: content-security-policy: ...; report-uri https://endpoint.com; report-to groupname in
browsers that support report-to, the report-uri directive will be ignored.
CSP: script-src-attr - HTTP
some
browsers specifically exclude blob and filesystem from source directives.
...specifying nonce makes a modern
browser ignore 'unsafe-inline' which could still be set for older
browsers without nonce support.
CSP: script-src-elem - HTTP
some
browsers specifically exclude blob and filesystem from source directives.
...specifying nonce makes a modern
browser ignore 'unsafe-inline' which could still be set for older
browsers without nonce support.
CSP: style-src-attr - HTTP
some
browsers specifically exclude blob and filesystem from source directives.
...specifying nonce makes a modern
browser ignore 'unsafe-inline' which could still be set for older
browsers without nonce support.
CSP: style-src-elem - HTTP
some
browsers specifically exclude blob and filesystem from source directives.
...specifying nonce makes a modern
browser ignore 'unsafe-inline' which could still be set for older
browsers without nonce support.
CSP: style-src - HTTP
some
browsers specifically exclude blob and filesystem from source directives.
...specifying nonce makes a modern
browser ignore 'unsafe-inline' which could still be set for older
browsers without nonce support.
CSP: worker-src - HTTP
some
browsers specifically exclude blob and filesystem from source directives.
...specifying nonce makes a modern
browser ignore 'unsafe-inline' which could still be set for older
browsers without nonce support.
Content-Security-Policy-Report-Only - HTTP
a
browser capable of enforcing csp will send the following violation report as a post request to http://example.com/_/csp-reports, when the document is visited: { "csp-report": { "document-uri": "http://example.com/signup.html", "referrer": "", "blocked-uri": "http://example.com/css/style.css", "violated-directive": "style-src cdn.example.com", "original-policy": "default-src 'none';...
...for example, when the signup.html would attempt to load css from http://anothercdn.example.com/stylesheet.css, the
browser would not include the full path but only the origin (http://anothercdn.example.com).
Content-Security-Policy - HTTP
though the report-to directive is intended to replace the deprecated report-uri directive, report-to is not supported in most
browsers yet.
... so for compatibility with current
browsers while also adding forward compatibility when
browsers get report-to support, you can specify both report-uri and report-to: content-security-policy: ...; report-uri https://endpoint.example.com; report-to groupname in
browsers that support report-to, the report-uri directive will be ignored.
Referrer-Policy - HTTP
there is effort from
browsers in moving to a stricter default value, namely strict-origin-when-cross-origin (see https://github.com/whatwg/fetch/pull/952), consider using this value (or a stricter one), if possible, when changing the referrer-policy.
...com/page https://example.com/otherpage https://example.com/page https://mozilla.org https://example.com/ http://example.org (no referrer) unsafe-url https://example.com/page?q=123 anywhere https://example.com/page?q=123 specifying a fallback policy if you want to specify a fallback policy in any case the desired policy hasn't got wide enough
browser support, use a comma-separated list with the desired policy specified last: referrer-policy: no-referrer, strict-origin-when-cross-origin in the above scenario, no-referrer will only be used if strict-origin-when-cross-origin is not supported by the
browser.
103 Early Hints - HTTP
syntax 103 early hints specifications specification status comments rfc 8297: 103 early hints ietf rfc initial definition
browser compatibility the compatibility table in this page is generated from structured data.
... if you'd like to contribute to the data, please check out https://github.com/mdn/
browser-compat-data and send us a pull request.
HTTP response status codes - HTTP
in the
browser, this means the url is not recognized.
...this response is used much more since some
browsers, like chrome, firefox 27+, or ie9, use http pre-connection mechanisms to speed up surfing.
HTTP
it was designed for communication between web
browsers and web servers, but it can also be used for other purposes.
... redbot tools to check your cache-related headers how
browsers work a very comprehensive article on
browser internals and request flow through http protocol.
Concurrency model and the event loop - JavaScript
the
browser mitigates this with the "a script is taking too long to run" dialog.
... adding messages in web
browsers, messages are added anytime an event occurs and there is an event listener attached to it.
Using Promises - JavaScript
error propagation you might recall seeing failurecallback three times in the pyramid of doom earlier, compared to only once at the end of the promise chain: dosomething() .then(result => dosomethingelse(result)) .then(newresult => dothirdthing(newresult)) .then(finalresult => console.log(`got the final result: ${finalresult}`)) .catch(failurecallback); if there's an exception, the
browser will look down the chain for .catch() handlers or onrejected.
...unterminated promise chains lead to uncaught promise rejections in most
browsers.
About the JavaScript reference - JavaScript
the javascript language is intended to be used within some larger environment, be it a
browser, server-side scripts, or similar.
... for the most part, this reference attempts to be environment-agnostic and does not target a web
browser environment.
SyntaxError: "x" is a reserved identifier - JavaScript
var colorenum = { red: 0, green: 1, blue: 2 }; var list = ["potatoes", "rice", "fries"]; update older
browsers if you are using an older
browser that does not yet implement let or class, for example, you should update to a more recent
browser version that does support these new language features.
... "use strict"; class docarchiver {} // syntaxerror: class is a reserved identifier // (throws in older
browsers only, e.g.
Functions - JavaScript
historically, this was left unspecified, and some
browsers would define zero whether the block executed or not.
... in strict mode, all
browsers that support es2015 handle this the same way: zero is defined only if shoulddefinezero is true, and only in the scope of the if-block.
Array.prototype[@@iterator]() - JavaScript
examples iteration using for...of loop html <ul id="letterresult"> </ul> javascript var arr = ['a', 'b', 'c']; var earr = arr[symbol.iterator](); var letterresult = document.getelementbyid('letterresult'); // your
browser must support for..of loop // and let-scoped variables in for loops // const and var could also be used for (let letter of earr) { letterresult.innerhtml += "<li>" + letter + "</li>"; } result alternative iteration var arr = ['a', 'b', 'c', 'd', 'e']; var earr = arr[symbol.iterator](); console.log(earr.next().value); // a console.log(earr.next().value); // b console.log(earr.next().value); ...
... function logiterable(it) { if (!(symbol.iterator in object.getprototypeof(it) /* or "symbol.iterator in object.__proto__" or "it[symbol.iterator]" */)) { console.log(it, ' is not an iterable object...'); return; } var iterator = it[symbol.iterator](); // your
browser must support for..of loop // and let-scoped variables in for loops // const and var could also be used for (let letter of iterator) { console.log(letter); } } // array logiterable(['a', 'b', 'c']); // a // b // c // string logiterable('abc'); // a // b // c logiterable(123); // 123 " is not an iterable object..." specifications specification ecmascript (ec...
Date() constructor - JavaScript
(these formats are ietf-compliant rfc 2822 timestamps, and also strings in a version of iso8601.) note: parsing of date strings with the date constructor (and date.parse(), which works the same way) is strongly discouraged due to
browser differences and inconsistencies.
... examples several ways to create a date object the following examples show several ways to create javascript dates: note: parsing of date strings with the date constructor (and date.parse, they are equivalent) is strongly discouraged due to
browser differences and inconsistencies.
Date.prototype.getTime() - JavaScript
for example, a client
browser in one timezone, gettime() will be the same as a client
browser in any other timezone.
... reduced time precision to offer protection against timing attacks and fingerprinting, the precision of new date().gettime() might get rounded depending on
browser settings.
Date.parse() - JavaScript
however, invalid values in date strings not recognized as simplified iso format as defined by ecma-262 may or may not result in nan, depending on the
browser and values provided, e.g.: // non-iso string with invalid date values new date('23/25/2014'); will be treated as a local date of 25 november, 2015 in firefox 30 and an invalid date in safari 7.
... however, if the string is recognized as an iso format string and it contains invalid values, it will return nan in all
browsers compliant with es5 and later: // iso string with invalid values new date('2014-25-23').toisostring(); // throws "rangeerror: invalid date" in all es5-compliant
browsers spidermonkey's implementation-specific heuristic can be found in jsdate.cpp.
Date.prototype.toLocaleString() - JavaScript
ate(date.utc(2012, 11, 12, 3, 0, 0)); // tolocalestring() without arguments depends on the // implementation, the default locale, and the default time zone console.log(date.tolocalestring()); // → "12/11/2012, 7:00:00 pm" if run in en-us locale with time zone america/los_angeles checking for support for locales and options arguments the locales and options arguments are not supported in all
browsers yet.
... most notably, the ie and edge
browsers insert bidirectional control characters around dates, so the output text will flow properly when concatenated with other text.
Error.prototype.stack - JavaScript
browsers using the v8 javascript engine (such as chrome, opera 15+, android
browser) and ie10+, on the other hand, uses a different format (see the archived msdn error.stack docs).
... different
browsers set this value at different times.
Error - JavaScript
some
browsers include the customerror constructor in the stack trace when using es2015 classes.
...ace(this, customerror) } this.name = 'customerror' // custom debugging information this.foo = foo this.date = new date() } } try { throw new customerror('baz', 'bazmessage') } catch(e) { console.error(e.name) //customerror console.error(e.foo) //baz console.error(e.message) //bazmessage console.error(e.stack) //stacktrace } es5 custom error object all
browsers include the customerror constructor in the stack trace when using a prototypal declaration.
Function.prototype.apply() - JavaScript
see below for
browser compatibility information.
... note: many older
browsers—including chrome <17 and internet explorer <9—don't accept array-like objects, and will throw an exception.
Function.prototype.bind() - JavaScript
polyfill because older
browsers are generally also slower
browsers, it is far more critical than most people recognize to create performance polyfills to make the browsing experience in outdated
browsers slightly less horrible.
...creating a bound function from the function, using the original object, neatly solves this problem: this.x = 9; // 'this' refers to global 'window' object here in a
browser const module = { x: 81, getx: function() { return this.x; } }; module.getx(); // returns 81 const retrievex = module.getx; retrievex(); // returns 9; the function gets invoked at the global scope // create a new function with 'this' bound to module // new programmers might confuse the // global variable 'x' with module's property 'x' const boundgetx = retrievex.bind(module); boundgetx...
Math.imul() - JavaScript
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 performant in current
browsers.
...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 performant 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.
Object.create() - JavaScript
if (typeof object.create !== "function") { object.create = function (proto, propertiesobject) { if (typeof proto !== 'object' && typeof proto !== 'function') { throw new typeerror('object prototype may only be an object: ' + proto); } else if (proto === null) { throw new error("this
browser's implementation of object.create is a shim and doesn't support 'null' as the first argument."); } if (typeof propertiesobject != 'undefined') { throw new error("this
browser's implementation of object.create is a shim and doesn't support a second argument."); } function f() {} f.prototype = proto; return new f(); }; } examples ...
...if support for older
browsers is necessary, jquery.extend() or _.assign() can be used.
Promise - JavaScript
console.log(`handle rejected promise (${reason}) here.`); }); // end log.insertadjacenthtml('beforeend', thispromisecount + ') promise made (sync code terminated)'); } if ("promise" in window) { let btn = document.getelementbyid("btn"); btn.addeventlistener("click",testpromise); } else { log = document.getelementbyid('log'); log.innerhtml = "live example not available as your
browser doesn't support the <code>promise<code> interface."; } this example is started by clicking the button.
... (you need a
browser that supports promise.
SharedArrayBuffer - JavaScript
depending on the system (the cpu, the os, the
browser) it can take a while until the change is propagated to all contexts.
...oss-origin-opener-policy: same-origin cross-origin-embedder-policy: require-corp to check if cross origin isolation has been successful, you can test against the crossoriginisolated property available to window and worker contexts: if (crossoriginisolated) { // post sharedarraybuffer } else { // do something else } see also planned changes to shared memory which is starting to roll out to
browsers (firefox 79, for example.) always use the new operator to create a sharedarraybuffer sharedarraybuffer constructors are required to be constructed with a new operator.
String.prototype.replace() - JavaScript
only available in
browser versions supporting named capturing groups.
... groups in
browser versions supporting named capturing groups, will be an object whose keys are the used group names, and whose values are the matched portions (undefined if not matched).
WebAssembly.CompileError() constructor - JavaScript
browser compatibility the compatibility table on this page is generated from structured data.
... if you'd like to contribute to the data, please check out https://github.com/mdn/
browser-compat-data and send us a pull request.
WebAssembly.CompileError - JavaScript
browser compatibility the compatibility table on this page is generated from structured data.
... if you'd like to contribute to the data, please check out https://github.com/mdn/
browser-compat-data and send us a pull request.
WebAssembly.Global() constructor - JavaScript
browser compatibility the compatibility table on this page is generated from structured data.
... if you'd like to contribute to the data, please check out https://github.com/mdn/
browser-compat-data and send us a pull request.
WebAssembly.Global - JavaScript
browser compatibility the compatibility table on this page is generated from structured data.
... if you'd like to contribute to the data, please check out https://github.com/mdn/
browser-compat-data and send us a pull request.
WebAssembly.Instance() constructor - JavaScript
browser compatibility the compatibility table on this page is generated from structured data.
... if you'd like to contribute to the data, please check out https://github.com/mdn/
browser-compat-data and send us a pull request.
WebAssembly.Instance.prototype.exports - JavaScript
browser compatibility the compatibility table on this page is generated from structured data.
... if you'd like to contribute to the data, please check out https://github.com/mdn/
browser-compat-data and send us a pull request.
WebAssembly.Instance - JavaScript
browser compatibility the compatibility table on this page is generated from structured data.
... if you'd like to contribute to the data, please check out https://github.com/mdn/
browser-compat-data and send us a pull request.
WebAssembly.LinkError() constructor - JavaScript
browser compatibility the compatibility table on this page is generated from structured data.
... if you'd like to contribute to the data, please check out https://github.com/mdn/
browser-compat-data and send us a pull request.
WebAssembly.LinkError - JavaScript
browser compatibility the compatibility table on this page is generated from structured data.
... if you'd like to contribute to the data, please check out https://github.com/mdn/
browser-compat-data and send us a pull request.
WebAssembly.Memory() constructor - JavaScript
browser compatibility the compatibility table on this page is generated from structured data.
... if you'd like to contribute to the data, please check out https://github.com/mdn/
browser-compat-data and send us a pull request.
WebAssembly.Memory.prototype.buffer - JavaScript
browser compatibility the compatibility table on this page is generated from structured data.
... if you'd like to contribute to the data, please check out https://github.com/mdn/
browser-compat-data and send us a pull request.
WebAssembly.Memory.prototype.grow() - JavaScript
browser compatibility the compatibility table on this page is generated from structured data.
... if you'd like to contribute to the data, please check out https://github.com/mdn/
browser-compat-data and send us a pull request.
WebAssembly.Memory - JavaScript
browser compatibility the compatibility table on this page is generated from structured data.
... if you'd like to contribute to the data, please check out https://github.com/mdn/
browser-compat-data and send us a pull request.
WebAssembly.Module.customSections() - JavaScript
browser compatibility the compatibility table on this page is generated from structured data.
... if you'd like to contribute to the data, please check out https://github.com/mdn/
browser-compat-data and send us a pull request.
WebAssembly.Module.exports() - JavaScript
browser compatibility the compatibility table on this page is generated from structured data.
... if you'd like to contribute to the data, please check out https://github.com/mdn/
browser-compat-data and send us a pull request.
WebAssembly.Module.imports() - JavaScript
browser compatibility the compatibility table on this page is generated from structured data.
... if you'd like to contribute to the data, please check out https://github.com/mdn/
browser-compat-data and send us a pull request.
WebAssembly.RuntimeError() constructor - JavaScript
browser compatibility the compatibility table on this page is generated from structured data.
... if you'd like to contribute to the data, please check out https://github.com/mdn/
browser-compat-data and send us a pull request.
WebAssembly.RuntimeError - JavaScript
browser compatibility the compatibility table on this page is generated from structured data.
... if you'd like to contribute to the data, please check out https://github.com/mdn/
browser-compat-data and send us a pull request.
WebAssembly.Table() constructor - JavaScript
browser compatibility the compatibility table on this page is generated from structured data.
... if you'd like to contribute to the data, please check out https://github.com/mdn/
browser-compat-data and send us a pull request.
WebAssembly.Table.prototype.get() - JavaScript
browser compatibility the compatibility table on this page is generated from structured data.
... if you'd like to contribute to the data, please check out https://github.com/mdn/
browser-compat-data and send us a pull request.
WebAssembly.Table.prototype.grow() - JavaScript
browser compatibility the compatibility table on this page is generated from structured data.
... if you'd like to contribute to the data, please check out https://github.com/mdn/
browser-compat-data and send us a pull request.
WebAssembly.Table.prototype.length - JavaScript
browser compatibility the compatibility table on this page is generated from structured data.
... if you'd like to contribute to the data, please check out https://github.com/mdn/
browser-compat-data and send us a pull request.
WebAssembly.Table.prototype.set() - JavaScript
browser compatibility the compatibility table on this page is generated from structured data.
... if you'd like to contribute to the data, please check out https://github.com/mdn/
browser-compat-data and send us a pull request.
WebAssembly.Table - JavaScript
browser compatibility the compatibility table on this page is generated from structured data.
... if you'd like to contribute to the data, please check out https://github.com/mdn/
browser-compat-data and send us a pull request.
WebAssembly.compile() - JavaScript
browser compatibility the compatibility table on this page is generated from structured data.
... if you'd like to contribute to the data, please check out https://github.com/mdn/
browser-compat-data and send us a pull request.
WebAssembly.compileStreaming() - JavaScript
browser compatibility the compatibility table on this page is generated from structured data.
... if you'd like to contribute to the data, please check out https://github.com/mdn/
browser-compat-data and send us a pull request.
WebAssembly.instantiate() - JavaScript
browser compatibility the compatibility table on this page is generated from structured data.
... if you'd like to contribute to the data, please check out https://github.com/mdn/
browser-compat-data and send us a pull request.
WebAssembly.instantiateStreaming() - JavaScript
browser compatibility the compatibility table on this page is generated from structured data.
... if you'd like to contribute to the data, please check out https://github.com/mdn/
browser-compat-data and send us a pull request.
WebAssembly.validate() - JavaScript
browser compatibility the compatibility table on this page is generated from structured data.
... if you'd like to contribute to the data, please check out https://github.com/mdn/
browser-compat-data and send us a pull request.
globalThis - JavaScript
you can also use function('return this')(), but environments that disable eval(), like csp in
browsers, prevent use of function in this way.
... html and the windowproxy in many engines globalthis will be a reference to the actual global object, but in web
browsers, due to iframe and cross-window security considerations, it references a proxy around the actual global object (which you can't directly access).
parseInt() - JavaScript
ecmascript 5 clarifies that 10 (decimal) should be used, but not all
browsers support this yet.
...and, because older
browsers must be supported, always specify a radix.
JavaScript shells - JavaScript
babel repl - a
browser-based repl for experimenting with future javascript.
... es6console.com - an open-source javascript console to test ecmascript 2015 code inside the
browser.
<mfenced> - MathML
it has been removed from the latest mathml standard and modern
browsers no longer support it.
... examples the last separator is repeated (,) sample rendering: rendering in your
browser: a b c d e <math> <mfenced open="{" close="}" separators=";;,"> <mi>a</mi> <mi>b</mi> <mi>c</mi> <mi>d</mi> <mi>e</mi> </mfenced> </math> all excess is ignored (,) sample rendering: rendering in your
browser: a b c d e <math> <mfenced open="[" close="]" separators="||||,"> <mi>a</mi> <mi>b</mi> <mi>c</mi> <mi>d</mi> <mi>e</mi> </mfenc...
MathML
mathml reference mathml element reference details about each mathml element and compatibility information for desktop and mobile
browsers.
...a contributors w3c math home www-math w3.org mail archive tools w3c validator mathzilla firefox add-on collection texzilla — javascript latex to mathml converter (live demo, firefox os webapp, firefox add-on, using in a web page, js program etc) latexml - convert latex documents into html+mathml web pages web equation - turn handwritten equations into mathml or latex mathjax - cross-
browser javascript display engine for mathematics.
CSS and JavaScript animation performance - Web Performance
the callback function of the method is called by the
browser before the next repaint on each frame.
... note: in nightly/developer edition, you should see that omta is enabled by default, so you might have to do the tests the other way around (test with it enabled first, then disable to test without omta.) summary
browsers are able to optimize rendering flows.
Graphic design for responsive sites - Progressive web apps (PWAs)
the downsides here are that css3 properties and svg don't work on old
browsers such as ie6-8 (although polyfills are available, and you could build in fallbacks), and svg isn't suitable for high detail images, such as photographs.
...these may not be supported in older
browsers like ie6-8, but they generally degrade gracefully, are fairly easy to write, and become much more flexible and powerful when combined with javascript and other technologies.
Applying SVG effects to HTML content - SVG: Scalable Vector Graphics
modern
browsers support using svg within css styles to apply graphical effects to html content.
...color-interpolation-filters:srgb"/> </filter> </svg> the five filters are applied using the following css: p.target { filter:url(#f3); } p.target:hover { filter:url(#f5); } b.target { filter:url(#f1); } b.target:hover { filter:url(#f4); } pre.target { filter:url(#f2); } pre.target:hover { filter:url(#f3); } view this example live example: blurred text in order to blur text, webkit based
browsers have a (prefixed) css filter called blur (see also css filter).
SVG Conditional Processing Attributes - SVG: Scalable Vector Graphics
externalresourcesrequired requiredextensions requiredfeatures systemlanguage attributes externalresourcesrequired deprecated since svg 2 if set to true, it indicates that the
browser must wait for all the external resources necessary to render that element to be loaded before processing the associated element.
... value: false|true; animatable: no requiredextensions list all the
browser specific capabilities that must be supported by the borwser to be allowed to render the associated element.
alignment-baseline - SVG: Scalable Vector Graphics
recommendation initial definition
browser compatibility the compatibility table on this page is generated from structured data.
... if you'd like to contribute to the data, please check out https://github.com/mdn/
browser-compat-data and send us a pull request.
baseline-shift - SVG: Scalable Vector Graphics
recommendation initial definition
browser compatibility the compatibility table on this page is generated from structured data.
... if you'd like to contribute to the data, please check out https://github.com/mdn/
browser-compat-data and send us a pull request.
clip-path - SVG: Scalable Vector Graphics
browser compatibility the compatibility table on this page is generated from structured data.
... if you'd like to contribute to the data, please check out https://github.com/mdn/
browser-compat-data and send us a pull request.
clip-rule - SVG: Scalable Vector Graphics
graphical elements »
browser compatibility the compatibility table on this page is generated from structured data.
... if you'd like to contribute to the data, please check out https://github.com/mdn/
browser-compat-data and send us a pull request.
color-interpolation-filters - SVG: Scalable Vector Graphics
recommendation initial definition
browser compatibility the compatibility table on this page is generated from structured data.
... if you'd like to contribute to the data, please check out https://github.com/mdn/
browser-compat-data and send us a pull request.
color-interpolation - SVG: Scalable Vector Graphics
recommendation initial definition
browser compatibility the compatibility table on this page is generated from structured data.
... if you'd like to contribute to the data, please check out https://github.com/mdn/
browser-compat-data and send us a pull request.
color - SVG: Scalable Vector Graphics
recommendation initial definition
browser compatibility the compatibility table on this page is generated from structured data.
... if you'd like to contribute to the data, please check out https://github.com/mdn/
browser-compat-data and send us a pull request.
fill-rule - SVG: Scalable Vector Graphics
le="evenodd" stroke="red" d="m110,0 h90 v90 h-90 z m130,20 h50 v50 h-50 z"/> <!-- effect of evenodd fill rule on a shape inside a shape with the path segment moving in opposite direction (one square drawn clockwise, the other anti-clockwise) --> <path fill-rule="evenodd" stroke="red" d="m210,0 h90 v90 h-90 z m230,20 v50 h50 v-50 z"/> </svg>
browser compatibility the compatibility table on this page is generated from structured data.
... if you'd like to contribute to the data, please check out https://github.com/mdn/
browser-compat-data and send us a pull request.
fill - SVG: Scalable Vector Graphics
recommendation initial definition for shapes and texts
browser compatibility the compatibility table on this page is generated from structured data.
... if you'd like to contribute to the data, please check out https://github.com/mdn/
browser-compat-data and send us a pull request.
filter - SVG: Scalable Vector Graphics
recommendation initial definition
browser compatibility the compatibility table on this page is generated from structured data.
... if you'd like to contribute to the data, please check out https://github.com/mdn/
browser-compat-data and send us a pull request.
font-family - SVG: Scalable Vector Graphics
recommendation initial definition
browser compatibility the compatibility table on this page is generated from structured data.
... if you'd like to contribute to the data, please check out https://github.com/mdn/
browser-compat-data and send us a pull request.
font-style - SVG: Scalable Vector Graphics
recommendation initial definition
browser compatibility the compatibility table on this page is generated from structured data.
... if you'd like to contribute to the data, please check out https://github.com/mdn/
browser-compat-data and send us a pull request.
font-weight - SVG: Scalable Vector Graphics
recommendation initial definition
browser compatibility the compatibility table on this page is generated from structured data.
... if you'd like to contribute to the data, please check out https://github.com/mdn/
browser-compat-data and send us a pull request.
letter-spacing - SVG: Scalable Vector Graphics
if the attribute value is a unitless number (like 128), the
browser processes it as a <length> in the current user coordinate system.
... if the attribute value has a unit identifier, such as .25em or 1%, then the
browser converts the <length> into its corresponding value in the current user coordinate system.
pointer-events - SVG: Scalable Vector Graphics
browser compatibility the compatibility table on this page is generated from structured data.
... if you'd like to contribute to the data, please check out https://github.com/mdn/
browser-compat-data and send us a pull request.
shape-rendering - SVG: Scalable Vector Graphics
recommendation initial definition
browser compatibility the compatibility table on this page is generated from structured data.
... if you'd like to contribute to the data, please check out https://github.com/mdn/
browser-compat-data and send us a pull request.
spreadMethod - SVG: Scalable Vector Graphics
recommendation initial definition for <lineargradient>
browser compatibility the compatibility table on this page is generated from structured data.
... if you'd like to contribute to the data, please check out https://github.com/mdn/
browser-compat-data and send us a pull request.
stroke-dasharray - SVG: Scalable Vector Graphics
browser compatibility the compatibility table on this page is generated from structured data.
... if you'd like to contribute to the data, please check out https://github.com/mdn/
browser-compat-data and send us a pull request.
stroke-dashoffset - SVG: Scalable Vector Graphics
browser compatibility the compatibility table on this page is generated from structured data.
... if you'd like to contribute to the data, please check out https://github.com/mdn/
browser-compat-data and send us a pull request.
stroke-linecap - SVG: Scalable Vector Graphics
zero length path --> <path d="m3,3 h0" stroke="black" stroke-linecap="square" /> <!-- the following pink lines highlight the position of the path for each stroke --> <path d="m1,1 h4" stroke="pink" stroke-width="0.025" /> <circle cx="1" cy="1" r="0.05" fill="pink" /> <circle cx="5" cy="1" r="0.05" fill="pink" /> <circle cx="3" cy="3" r="0.05" fill="pink" /> </svg>
browser compatibility the compatibility table on this page is generated from structured data.
... if you'd like to contribute to the data, please check out https://github.com/mdn/
browser-compat-data and send us a pull request.
stroke-linejoin - SVG: Scalable Vector Graphics
"#highlight" x="6" /> <use xlink:href="#highlight" x="12" /> <use xlink:href="#highlight" x="2" y="6" /> <use xlink:href="#highlight" x="8" y="6" /> </svg> usage context value arcs | bevel |miter | miter-clip | round default value miter animatable yes arcs note: the arcs value as been introduced in svg2 and it isn't widely supported yet, see
browser compatibility bellow for details.
... cy="5" r="0.05" fill="pink" /> <path d="m7,5 l0.75,-3 l0.75,3" stroke="pink" fill="none" stroke-width="0.025" /> <circle cx="7" cy="5" r="0.05" fill="pink" /> <circle cx="7.75" cy="2" r="0.05" fill="pink" /> <circle cx="8.5" cy="5" r="0.05" fill="pink" /> </g> </svg> miter-clip note: the miter-clip value as been introduced in svg2 and it isn't widely supported yet, see
browser compatibility bellow for details.
stroke-miterlimit - SVG: Scalable Vector Graphics
browser compatibility the compatibility table on this page is generated from structured data.
... if you'd like to contribute to the data, please check out https://github.com/mdn/
browser-compat-data and send us a pull request.
stroke-width - SVG: Scalable Vector Graphics
browser compatibility the compatibility table on this page is generated from structured data.
... if you'd like to contribute to the data, please check out https://github.com/mdn/
browser-compat-data and send us a pull request.
stroke - SVG: Scalable Vector Graphics
recommendation initial definition for shapes and texts
browser compatibility the compatibility table on this page is generated from structured data.
... if you'd like to contribute to the data, please check out https://github.com/mdn/
browser-compat-data and send us a pull request.
target - SVG: Scalable Vector Graphics
the target attribute should be used when there are multiple possible targets for the ending resource, such as when the parent document is embedded within an html or xhtml document, or is viewed with a tabbed
browser.
... this attribute specifies the name of the browsing context (e.g., a
browser tab or an (x)html iframe or object element) into which a document is to be opened when the link is activated: only one element is using this attribute: <a> html, body, svg { height: 100%; } text { font: 20px arial, helvetica, sans-serif; fill: blue; text-decoration: underline; } <svg viewbox="0 0 300 120" xmlns="http://www.w3.org/2000/svg"> <a href="https://developer.mozilla.org" target="_self"> <text x="0" y="20">open link within iframe</text> </a> <a href="https://developer.mozilla.org" target="_blank"> <text x="0" y="60">open link in new tab or window</text> </a> <a href="https://developer.mozilla.org" target="_top"> <text x="0" y="100">open link in this tab or window</text> </a> ...
text-anchor - SVG: Scalable Vector Graphics
recommendation initial definition
browser compatibility the compatibility table on this page is generated from structured data.
... if you'd like to contribute to the data, please check out https://github.com/mdn/
browser-compat-data and send us a pull request.
text-rendering - SVG: Scalable Vector Graphics
recommendation initial definition
browser compatibility the compatibility table on this page is generated from structured data.
... if you'd like to contribute to the data, please check out https://github.com/mdn/
browser-compat-data and send us a pull request.
word-spacing - SVG: Scalable Vector Graphics
an unqualified number such as 128), the
browser processes the <length> as a width value in the current user coordinate system.
....25em or 1%), then the
browser converts the <length> into a corresponding value in the current user coordinate system.
writing-mode - SVG: Scalable Vector Graphics
recommendation initial definition
browser compatibility the compatibility table on this page is generated from structured data.
... if you'd like to contribute to the data, please check out https://github.com/mdn/
browser-compat-data and send us a pull request.
<solidcolor> - SVG: Scalable Vector Graphics
note: this is an experimental technology, and not yet implemented in
browsers.
...--> <solidcolor id="mycolor" solid-color="gold" solid-opacity="0.8"/> <!-- lineargradient with a single color stop is a less elegant way to achieve the same effect, but it works in current
browsers.
<use> - SVG: Scalable Vector Graphics
for security reasons,
browsers may apply the same-origin policy on use elements and may refuse to load a cross-origin url in the href attribute.
...however, xlink:href can still be required in practice for cross-
browser compatibility (see the compatibility table below).
Scripting - SVG: Scalable Vector Graphics
one can override default
browser behaviors with the evt.preventdefault( ) method, add eventlisteners to objects with the syntax element.addeventlistener(event, function, usecapture), and set element properties with syntax svgelement.style.setproperty("fill-opacity", "0.0", "").
...or if you want to use the backspace key in your code, you want to override the
browser's default behavior when the backspace key is pressed, which is to go back to the previous page.
SVG fonts - SVG: Scalable Vector Graphics
« previousnext » when svg was specified, support for web fonts was not widespread in
browsers.
... svg fonts are currently supported only in safari and android
browser.
Using custom elements - Web Components
many modern
browsers implement an optimization for <style> tags either cloned from a common node or that have identical text, to allow them to share a single backing stylesheet.
...classes please note that es2015 classes cannot reliably be transpiled in babel 6 or typescript targeting legacy
browsers.
Transforming XML with XSLT - XSLT: Extensible Stylesheet Language Transformations
because a
browser provides a familiar and highly flexible interface, it is an ideal mechanism for delivering such presentation versions of xml content.
...xslt allows a stylesheet author to transform a primary xml document in two significant ways: manipulating and sorting the content, including a wholesale reordering of it if so desired, and transforming the content into a different format (and in the case of firefox, the focus is on converting it on the fly into html which can then be displayed by the
browser).
Caching compiled WebAssembly modules - WebAssembly
warning: experimental webassembly.module indexeddb serialization support is being removed from
browsers; see bug 1469395 and this spec issue.
...
browser support at the moment, this technique will work in firefox and edge, as they both have support for structured cloning of webassembly modules.
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 performance and provides languages such as c/c++ with a compilation target so that they can run on the web.
... 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.
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.
... we need to assemble this textual representation into the assembly language the
browser actually reads before we can use it.
Understanding WebAssembly text format - WebAssembly
this is an intermediate form designed to be exposed in text editors,
browser developer tools, etc.
...although the
browser compiles it to something more efficient, wasm execution is defined in terms of a stack machine where the basic idea is that every type of instruction pushes and/or pops a certain number of i32/i64/f32/f64 values to/from a stack.
Using the WebAssembly JavaScript API - WebAssembly
if you save your example code now and load it a
browser that supports webassembly, you’ll see this in action!
...for example, to write 42 directly into the first word of linear memory, you can do this: new uint32array(memory.buffer)[0] = 42; you can then return the same value using: new uint32array(memory.buffer)[0] try this now in your demo — save what you’ve added so far, load it in your
browser, then try entering the above two lines in your javascript console.
indexed-db - Archive of obsolete content
here's a complete add-on that adds two buttons to the
browser: the button labeled "add" adds the title of the current tab to a database, while the button labeled "list" lists all the titles in the database.
selection - Archive of obsolete content
private windows if your add-on has not opted into private browsing, then you won't see any selections made in tabs that are hosted by private
browser windows.
ui - Archive of obsolete content
if it's standalone, it appears in the toolbar at the top right of the
browser window: togglebutton a toggle button is a special kind of button that's for representing a binary on/off state, like a checkbox.
dev/panel - Archive of obsolete content
when the panel's created, the framework passes it a debuggee: this is a messageport object that you can use to exchange json messages with the
browser that the developer tools are currently debugging.
preferences/service - Archive of obsolete content
value : string preference value, a url to a properties file example: require("sdk/preferences/service").set("general.useragent.locale", "chrome://global/locale/intl.properties"); example: setting global preferences var { get, set } = require("sdk/preferences/service"); var { when: unload } = require("sdk/system/unload"); var oldvalue = get("
browser.urlbar.autofill"); set("
browser.urlbar.autofill", true); // by amo policy global preferences must be changed back to their original value unload(function() { set("
browser.urlbar.autofill", oldvalue); }); ...
system/events - Archive of obsolete content
var events = require("sdk/system/events"); var { ci } = require("chrome"); function listener(event) { var channel = event.subject.queryinterface(ci.nsihttpchannel); channel.setrequestheader("user-agent", "my
browser/1.0", false); } events.on("http-on-modify-request", listener); globals functions emit(type, event) send an event to observer service parameters type : string the event type.
Listen for Page Load - Archive of obsolete content
the following add-on listens to the tab's built-in ready event and just logs the url of each tab as the user loads it: require("sdk/tabs").on("ready", logurl); function logurl(tab) { console.log(tab.url); } you will find this console output in the
browser console, not the web console.
Localization - Archive of obsolete content
now when the
browser's locale is set to "en-us", users see this in the add-ons manager: when the
browser's locale is set to "fr", they see this: the menulist and the radio preference types have options.
Page Loading - Archive of obsolete content
page loading on page load how to execute code each time a new page is loaded in
browser/mail progress listeners progress listeners allow extensions to be notified of events associated with documents loading in the
browser and with tab switching events.
JavaScript Daemons Management - Archive of obsolete content
about the “callback arguments” polyfill in order to make this framework compatible with internet explorer (which doesn't support sending additional parameters to timers' callback function, neither with settimeout() or setinterval()) we included the ie-specific compatibility code (commented code), which enables the html5 standard parameters' passage functionality in that
browser for both timers (polyfill), at the end of the daemon.js module.
XML-related code snippets - Archive of obsolete content
how to create a dom tree using xmlhttprequest parsing and serializing xml using xpath jxon (lossless javascript xml object notation) xsl transforms xlink xinclude xml:id xml:base support in old
browsers xpointer svg namespaces, or why http://www.mozilla.org/keymaster/gat...re.is.only.xul is at the top of every xul document.
XPath - Archive of obsolete content
mespaceresolver,returntype,result); //contextnode should be used in the one in which it was created //add by mooring 2008-11-15 16:00 china var xhr = new ajax('post','demo.xml',parsexml,'xml'); //ajax is a class written by javascript which return responsexml object to parsexml function function parsexml(obj)//obj is the returnxml object now { if(!obj.documentelement) { alert("your
browser does't support this script!"); return; } var fields = [];//store the results if(window.activexobject) { var tobj = obj.documentelement.selectnodes("/root/field/item"); for(var i=0;i<tobj.length; i++) { fields.push(tobj[i].text); } } else { var tobj = obj.evaluate("/root/field/item",obj.documentelement,null, xpathresult.any_type, null); var tmp = tobj.iteratenext(); whi...
Chapter 2: Technologies used in developing extensions - Archive of obsolete content
nevertheless, the rise of web services like google maps, which used javascript and asynchronous communications, created an awareness of a set of technologies nicknamed ajax (asynchronous javascript and xml); that plus the advent of a number of libraries that paper over implementation differences between different web
browsers has more recently led to a re-evaluation of javascript as a programming language.
The Box Model - Archive of obsolete content
xulschoolhello.linkedtext.label = go to <html:a onclick="%s">our site</html:a> for more information to include html in a xul document, you need to add the namespace for it in the document root: <overlay id="xulschoolhello-
browser-overlay" xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul" xmlns:html="http://www.w3.org/1999/xhtml"> then you can have an html:p (paragraph) element where you insert the result of parsing the property string.
Overlay extensions - Archive of obsolete content
this page contains links to documentation for the approach to developing extensions for gecko-based applications which uses: xul overlays to specify the interface apis available to privileged code, such as tab
browser and javascript modules, to interact with the application and content.
Beginner tutorials - Archive of obsolete content
creating reusable content with css and xblthis page illustrates how you can use css in mozilla to improve the structure of complex applications, making code and resources more easily reusable.underscores in class and id namessummary: the use of the underscore character in css can lead to major display problems in multiple
browsers.
DOMSubtreeModified - Archive of obsolete content
this event has been deprecated in favor of the mutation observer api this event can cause infinite loops if you decide to change the dom inside the event handler, hence it has been disabled in a number of
browsers (see domattrmodified and domsubtreemodified events are no longer fired when style attribute is changed via cssom for example).
Misc top level - Archive of obsolete content
back in the early days, this approach worked, because
browsers would usually make a table cell exactly as wide and tall as an image it contained.no proxy for configurationthis document provides a comprehensive discussion of the manual proxy feature "no proxy for:", including configuration issues, testing and bugs.same-origin policy for file: urisin gecko 1.8 or earlier, any two file: uris are considered to be same-origin.
ActiveX Control for Hosting Netscape Plug-ins in IE - Archive of obsolete content
assuming you have cvs somewhere in your path, type this from a command prompt: c:\> set cvsroot=:pserver:anonymous@cvs-mirror.mozilla.org:/cvsroot c:\> set home=\temp c:\> cvs login (logging in to anonymous@cvs-mirror.mozilla.org) cvs password: anonymous c:\> cvs -z3 co mozilla/embedding/
browser/activex/src/pluginhostctrl this fetches the source for the control into mozilla\embedding\
browser\activex\src\pluginhostctrl.
Adding the structure - Archive of obsolete content
tusbarpanel-progress"> <progressmeter class="progressmeter-statusbar" id="statusbar-icon" mode="normal" value="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 informative messages about an application's state can be displayed.
Enabling the behavior - updating the status periodically - Archive of obsolete content
<!-- navigator --> <script type="application/javascript" src="chrome://navigator/content/
browser.js"/> <script type="application/javascript" src="chrome://navigator/content/navigator.js"/> <script type="application/javascript" src="chrome://navigator/content/navigatordd.js"/> <script type="application/javascript" src="chrome://navigator/content/sessionhistoryui.js"/> <script type="application/javascript" src="chrome://navigator/content/tinderstatus.js"/> <!-- hook f...
BundleLibrary - Archive of obsolete content
aol email : aolemail.webapp bbc radio player bbcradioplayer.webapp bloglines : bloglines.webapp bloglines beta: beta.bloglines.webapp chandler: chandler.webapp flash earth (integrates all major mapping sites) flashearth.webapp flickr: flickr.webapp gollum wikipedia
browser in english:gollum_en.webapp google notebook: gnote.webapp google page creator: google_pagecreator.webapp google reader + gtalk : prism-bundle-google-reader-with-gtalk.webapp google webmaster tools: google_webmastertools.webapp grandcentral inbox: grandc.webapp (note: grandcentral requires the flash plugin.
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 perform minor makefile surgery.
Static Analysis for Windows Code under Linux - Archive of obsolete content
you can obtain mozilla 2 code by: hg clone http://hg.mozilla.org/mozilla-central/ and compose a .mozconfig file for cross-compiling mozilla with static analysis hooked: #specify the cross compile cross_compile=1 ac_add_options --enable-application=
browser ac_add_options --host=i686-linux ac_add_options --target=i686-mingw32 ac_add_options --enable-default-toolkit=cairo-windows mk_add_options moz_objdir=@topsrcdir@/../mozilla-mingw # mozilla trunk uses many vista only features on windows, so we should disable some components to make it buildable with mingw32.
Supporting per-window private browsing - Archive of obsolete content
} } catch(e) { components.utils.reporterror(e); return; } } obtaining an nsiloadcontext for privacy-sensitive apis some apis (such as nsitransferable and nsiweb
browserpersist) take nsiloadcontext arguments that are used to determine whether they should be classed as private or not (for example, whether the uri being persisted by saveuri should be added to the permanent download history).
Elements - Archive of obsolete content
the following xul display types may be used:
browser, button, checkbox, description, editor, grippy, iframe, image, label, menu, menuitem, menubar, progressmeter, radio, resizer, scrollbar, scrollbox, spacer, splitter, titlebar, treechildren and treecol.
Creating XPI Installer Modules - Archive of obsolete content
not updating the mozilla ui to provide special access to this window (e.g., an item in the tasks menu or elsewhere), the measure of the success of the installation of the barley package is that the user can, as before, invoke our software by using a special startup option: mozilla -chrome chrome://barley/content this option tells mozilla to load a chrome other than the default, which is the main
browser window.
XPCOM Interfaces - Archive of obsolete content
an example is shown below: var bmarks = components.classes["@mozilla.org/
browser/bookmarks-service;1"].getservice(); bmarks.queryinterface(components.interfaces.nsibookmarksservice); bmarks.addbookmarkimmediately("http://www.mozilla.org","mozilla",0,null); first, the component "@mozilla.org/
browser/bookmarks-service;1" is retrieved and its service is placed in the variable bmarks.
Urlbar-icons - Archive of obsolete content
(the url bar is also known as the address bar and the navigation bar.) example the default contents of
browser.xul: <hbox id="urlbar-icons"> <button be="" chromedir="ltr" class="urlbar-icon" click="" for="" id="safebrowsing-urlbar-icon" img="" level="safe" might="" onclick="godocommand('safebrowsing-show-warning');" page="" style="-moz-user-focus:" tooltiptext="this" type="menu"> <img class="urlbar-icon" id="star-button" onclick="placesstarbutton.onclick(event);" /> <img address="" chromedir="ltr" class="urlbar-icon" id="go-button" in="" location="" on...
XML - Archive of obsolete content
humans read raw html often when they edit html documents, though this is changing as regular html editors are replaced by wysiwyg html editors, and so do html parsers, which use the markup to format the document in its presentational form in web
browsers.
resizer - Archive of obsolete content
eeny width height"> <hbox flex="1"> <vbox width="2" style="background-color: grey;"> <resizer dir="topleft" height="2" style="cursor: nw-resize;"/> <resizer dir="left" flex="1" style="cursor: w-resize;"/> <resizer dir="bottomleft" height="2" style="cursor: sw-resize;"/> </vbox> <vbox flex="1"> <resizer dir="top" height="2" style="background-color: grey; cursor: n-resize;"/> <
browser flex="1" id="
browser" type="content-primary"/> <resizer dir="bottom" height="2" style="background-color: grey; cursor: s-resize;"/> </vbox> <vbox width="2" style="background-color: grey; overflow: hidden;"> <resizer dir="topright" height="2" style="cursor: ne-resize;"/> <resizer dir="right" flex="1" style="cursor: e-resize;"/> <resizer dir="bottomright" height="2" style="cursor: s...
Building XULRunner with Python - Archive of obsolete content
using python in xul applications add the following to yourprefs.js during development 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); html <script> tags specify that python is used withtype="application/x-python" attribute.
MacFAQ - Archive of obsolete content
taking advantage of the core code "openurl" from "nscommandlineservicemac.cpp", you'll see that it looks for "
browser.chromeurl" before defaulting to navigator.xul, and this is called when an xulrunner app is already running, so: create a default preference of "
browser.chromeurl" that points to your new "hiddenwindow" as such: "chrome://myxul/content/hiddenwindow.xul" next take the code below and drop it in, to create the hiddenwindow.xul (note: the debug function and nsicommandline try/catch can be removed...
xulauncher - Archive of obsolete content
ion=1.9 ">$xulappini # create chrome.manifest file ############################################################################## echo " content $xulname file:$xulname/ ">$xulmanifest # create prefs.js file ############################################################################## echo " pref(\"toolkit.defaultchromeuri\", \"chrome://$xulname/content/$xulfile\"); /* 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); ">$xulprefs # copy xul file to right location and run it ############################################################################## cp $xulfile $xuldir xulrunner $x...
2006-10-13 - Archive of obsolete content
firefox
browser problem: width:30ex does not respect font discussion about a font rendering problem with firefox print on the firefox context menu user would like discussion about why the bug https://bugzilla.mozilla.org/show_bug.cgi?id=204519 is a wontfix.
2006-10-27 - Archive of obsolete content
./configure --prefix=/export/home/alex/thunderbird --enable-application=
browser --disable-tests --disable-debug -disable-auto-deps --disable-freetype2 -enable-official-branding --enable-default-toolkit=gtk2 --enable-optimize=-xo5 --enable-static --disable-shared --enable-xft --enable-svg the build tools that he used to build firefox 2 are listed in his posting along with the error that he receives when he tries to build it.
2006-11-03 - Archive of obsolete content
problems building
browser's trunk on windows using vs 2005 originally posted on october 29th: ricardo sixel is trying to retrieve the trunk source code using the
browser check out option.
2006-18-24 - Archive of obsolete content
summary: mozilla.dev.platform - 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 <tab
browser/> the javascript popup windows don't work out of the box and asks what needs to be implement.
2006-11-10 - Archive of obsolete content
discussions how to know the full height and width of a webpage discussion on how to determine the full height and width of a web page when embedding a
browser into an application.
2006-10-13 - Archive of obsolete content
discussions wxmozilla and ff1.5 xpcom problems updating wxmozilla to use it with firefox 1.5.7
browser elements, opening links in a new window using javascript to open window in new window.
NPVariant - Archive of obsolete content
javascript type to npvarianttype enumeration mapping when using npvariants to access javascript objects in the
browser, or vise versa, the mapping of javascript values to npvariants is as follows: javascript type npvarianttype undefined npvarianttype_void null npvarianttype_null boolean npvarianttype_bool number npvarianttype_int32 or npvarianttype_double string npvarianttype_string ...
Introduction to SSL - Archive of obsolete content
government restrictions on products that support anything stronger than 40-bit encryption, disabling support for all 40-bit ciphers effectively restricts access to network
browsers that are available only in the united states (unless the server involved has a special global server id that permits the international client to "step up" to stronger encryption).
TCP/IP Security - Archive of obsolete content
because all major web
browsers include support for tls, users who wish to use web-based applications that are protected by tls normally do not need to install any client software or reconfigure their systems.
References - Archive of obsolete content
web standards group from web standards group web page development: best practices from apple developer connection mozilla web author faq from henri sivonen making your web page compatible with mozilla from nicolás lichtmaier complete css guide from westciv.com css lessons and tutorials from alsacreations html and css lessons and tutorials from htmldog.com preparing for standard-compliant
browsers, part 1 from makiko itoh preparing for standard-compliant
browsers, part 2 from makiko itoh javascript best practices lists 15 of the most frequent coding practices which create problems for javascript and dhtml-driven webpages.
::-ms-thumb - Archive of obsolete content
see also ::-ms-track ::-ms-fill-upper ::-ms-fill-lower ::-webkit-slider-thumb ::-moz-range-thumb css-tricks: styling cross-
browser compatible range inputs with css quirksmode: styling and scripting sliders ...
::-ms-track - Archive of obsolete content
ackground-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 transform transform-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 ...
E4X for templating - Archive of obsolete content
while it may be obvious after a study of the basics of e4x that it can be used for this purpose, if one adds a few common purpose functions (especially along with the convenience of javascript 1.8 expression closures), the templates can function more dynamically, offering the power and readability of templating languages such as smarty for php (though admittedly without the currently wider cross-
browser support of xslt or the strictly-xml approach of phptal or seethrough templating).
ECMAScript 2016 to ES.Next support in Mozilla - Archive of obsolete content
irefox 52) asyncfunction (firefox 52) await (firefox 52) trailing commas in function parameter lists (firefox 52) ecmascript 2018 spread in object literals and rest parameters (firefox 55) for await...of (firefox 57) global_objects/sharedarraybuffer (firefox 57, with flags) global_objects/promise/finally (firefox 58) global_objects/regexp/dotall (not yet implemented; in other
browsers) regexp lookbehind assertions (not yet implemented; in other
browsers) regexp unicode property escapes (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 ...
ActiveXObject - Archive of obsolete content
for example, for the local intranet zone, you typically need to change a custom setting to "initialize and script activex controls not marked as safe for scripting." to identify members of an automation object that you can use in your code, you may need to use a com object
browser, such as the ole/com object viewer, if no reference documentation is available for the automation object.
@cc_on - Archive of obsolete content
it is strongly recommended that you use the @cc_on statement in a comment, so that
browsers that do not support conditional compilation will accept your script as valid syntax: an @if or @set statement outside of a comment also activates conditional compilation.
Doctype - MDN Web Docs Glossary: Definitions of Web-related terms
its sole purpose is to prevent a
browser from switching into so-called “quirks mode” when rendering a document; that is, the "<!doctype html>" doctype ensures that the
browser makes a best-effort attempt at following the relevant specifications, rather than using a different rendering mode that is incompatible with some specifications.
Function - MDN Web Docs Glossary: Definitions of Web-related terms
function loop(x) { if (x >= 10) return; loop(x + 1); }; //using ecmascript 2015 arrow notation const loop = x => { if (x >= 10) return; loop(x + 1); }; an immediately invoked function expressions (iife) is a function that is called directly after the function is loaded into the
browser’s compiler.
HTML - MDN Web Docs Glossary: Definitions of Web-related terms
you can extend html tags with attributes, which provide additional information 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.
MitM - MDN Web Docs Glossary: Definitions of Web-related terms
learn more owasp article: man-in-the-middle attack wikipedia: man-in-the-middle attack the public-key-pins header (hpkp) can significantly decrease the risk of mitm by instructing
browsers to require a whitelisted certificate for all subsequent connections to that website.
PAC - MDN Web Docs Glossary: Definitions of Web-related terms
a proxy auto-configuration file (pac file) is a file which contains a function, findproxyforurl(), which is used by the
browser to determine whether requests (including http, https, and ftp) should go directly to the destination or if they need to be forwarded through a web proxy server.
Prefetch - MDN Web Docs Glossary: Definitions of Web-related terms
the prefetch hints are sent in http headers: link: ; rel=dns-prefetch, ; as=script; rel=preload, ; rel=prerender, ; as=style; rel=preload prefetch attribute value
browsers will prefetch content when the prefetch <link> tag directs it to, giving the developer control over what resources should be prefetched.
WebIDL - MDN Web Docs Glossary: Definitions of Web-related terms
webidl is used in nearly every api specification for the web, and due to its standard format and syntax, the programmers who create web
browsers can more easily ensure that their
browsers are compatible with one another, regardless of how they choose to write the code to implement the api.
XInclude - MDN Web Docs Glossary: Definitions of Web-related terms
} else if (href.match(/#$/, '') || href.match(/^#/, '')) { alert('fragment identifiers are disallowed in an xinclude "href" attribute'); return false; } var j; var xincludeparent = xinclude.parentnode; try { netscape.security.privilegemanager.enableprivilege('universalxpconnect universal
browserread'); // necessary with file:///-located files trying to reach external sites if (href !== null) { var response, responsetype; var request = new xmlhttprequest(); request.open('get', href, false); request.setrequestheader('if-modified-since', 'thu, 1 jan 1970 00:00:00 gmt'); reques...
XLink - MDN Web Docs Glossary: Definitions of Web-related terms
specification xlink 1.0 xlink 1.1 (currently a working draft) see also xml in mozilla code snippets:getattributens - a wrapper for dealing with some
browsers not supporting this dom method code snippets:xml:base function - a rough attempt to find a full xlink-based on an xlink:href attribute (or <xi:include href=>) and its or an ancestor's xml:base.
Organizing your CSS - Learn web development
you may have used a css property in a specific way to get around older
browser incompatibilities, for example: .box { background-color: red; /* fallback for older
browsers that don't support gradients */ background-image: linear-gradient(to right, #ff0000, #aa0000); } perhaps you followed a tutorial to achieve something, and the css is a little non-obvious.
CSS building blocks - Learn web development
this article will give you guidance on how to go about debugging a css problem, and show you how the devtools included in all modern
browsers can help you find out what is going on.
Use CSS to solve common problems - Learn web development
common use cases basics how to apply css to the dom how to use whitespace in css how to write comments in css how to select elements via element name, class or id how to select elements via attribute name and content how to use pseudo-classes how to use pseudo-elements how to apply multiple selectors to the same rule how to specify colors in css how to debug css in the
browser css and text how to style text how to customize a list of elements how to style links how to add shadows to text boxes and layouts how to size css boxes how to control overflowing content how to control the part of a css box that the background is drawn under how do i define inline, block, and inline-block?
Styling lists - Learn web development
s.</dd> <dt>pita</dt> <dd>a soft, slightly leavened flatbread.</dd> <dt>halloumi</dt> <dd>a semi-hard, unripened, brined cheese with a higher-than-usual melting point, usually made from goat/sheep milk.</dd> <dt>green salad</dt> <dd>that green healthy stuff that many of us just use to garnish kebabs.</dd> </dl> if you go to the live example now and investigate the list elements using
browser developer tools, you'll notice a couple of styling defaults: the <ul> and <ol> elements have a top and bottom margin of 16px (1em) and a padding-left of 40px (2.5em.) the list items (<li> elements) have no set defaults for spacing.
What text editors are available? - Learn web development
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?
Multimedia and Embedding - Learn web development
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.
Test your skills: Conditionals - Learn web development
note: in the examples below, if there is an error in your code it will be outputted into the results panel on the page, to help you try to figure out the answer (or into the
browser's javascript console, in the case of the downloadable version).
Test your skills: Events - Learn web development
note: in the examples below, if there is an error in your code it will be outputted into the results panel on the page, to help you try to figure out the answer (or into the
browser's javascript console, in the case of the downloadable version).
Test your skills: Functions - Learn web development
note: in the examples below, if there is an error in your code it will be outputted into the results panel on the page, to help you try to figure out the answer (or into the
browser's javascript console, in the case of the downloadable version).
Test your skills: Arrays - Learn web development
note: in the examples below, if there is an error in your code it will be outputted into the results panel on the page, to help you try to figure out the answer (or into the
browser's javascript console, in the case of the downloadable version).
Test your skills: Math - Learn web development
note: in the examples below, if there is an error in your code it will be outputted into the results panel on the page, to help you try to figure out the answer (or into the
browser's javascript console, in the case of the downloadable version).
Test your skills: Strings - Learn web development
note: in the examples below, if there is an error in your code it will be outputted into the results panel on the page, to help you try to figure out the answer (or into the
browser's javascript console, in the case of the downloadable version).
Test your skills: variables - Learn web development
note: in the examples below, if there is an error in your code it will be outputted into the results panel on the page, to help you try to figure out the answer (or into the
browser's javascript console, in the case of the downloadable version).
Test your skills: JSON - Learn web development
note: in the example below, if there is an error in your code it will be outputted into the results panel on the page, to help you try to figure out the answer (or into the
browser's javascript console, in the case of the downloadable version).
Ember resources and troubleshooting - Learn web development
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 information render performance for general javascript debugging, check out our guides on javascript debugging as well as interacting with the
browser's other debugging tools.
Starting our Svelte Todo list app - Learn web development
with the following content: <h1>svelte to-do list</h1> change the title element in public/index.html to contain the text svelte to-do list: <title>svelte to-do list</title> open src/app.svelte and replace its contents with the following: <script> import todos from './components/todos.svelte' </script> <todos /> in development mode, svelte will issue a warning in the
browser console when specifying a prop that doesn't exist in the component; in this case we have a name prop being specified when we instantiate the app component inside src/main.js, which isn't used inside app.
Learn web development
tools and testing this topic covers the tools developers use to facilitate their work, such as cross-
browser testing tools, linters, formatters, transformation tools, version control systems, deployment tools, and client-side javascript frameworks.
Mozilla accessibility architecture
nsouterdocaccessible: used for elements such as <iframe>, <
browser> and <editor>, which spawn an entire new document, but don't actually have any child nodes in their own dom.
Mozilla's Section 508 Compliance
caveats: 1) although sidebar cannot be customized without a mouse, all sidebar functions that come with the
browser are available through other means 2) java and in-page plugins cannot be used with the keyboard, so they must not be installed for keyboard-only users additional features for the keyboard: 1) find as you type allows for quick navigation to links and convenient text searching 2) browse with caret (f7 key toggles) allows users to select arbitrary content with the keyboard and mo...
ZoomText
our main focus is on the
browser itself, so you you only need to install mailnews or address book if curious about the other apps.
Adding a new event
however, this feature shouldn't be implemented for compabitility with other
browsers since web applications should use event constructor.
Testopia
bugzilla 4.x mysql 5.0 or postgresql 8.3 mozilla compatible
browser ;-) additional perl modules: text::csv xml::schema validator xml::schema::parser (for importer) and json 2.10 todo user preferences notification emails more reports see the roadmap and bug list for more details.
Capturing a minidump
they are therefore much more likely to contain private information, if there is any in the
browser.
Debugging on Windows
some common options would be the url of the file you want the
browser to open as soon as it starts, starting the profile manager, or selecting a profile.
Interface Compatibility
web content apis which are visible to web content are not modified, except as a last resort when inherent security vulnerabilities or incompatibility with other
browsers make it the only option.
SVG Guidelines
although this kind of data is supported by the
browser, it can only be displayed when the svg is opened in a new tab.
mach
if it works, you can look at compiler warnings: $ ./mach warnings-list try running the program: $ ./mach run try running your program in a debugger: $ ./mach run --debug try running some tests: $ ./mach xpcshell-test services/common/tests/unit/ or run an individual test: $ ./mach mochitest
browser/base/content/test/general/
browser_pinnedtabs.js you run mach from the source directory, so you should be able to use your shell's tab completion to tab-complete paths to tests.
Frame script environment
the frame script's global is a contentframemessagemanager, giving it the following environment: content the dom window of the content loaded in the
browser may be null (see below) docshell the nsidocshell associated with the
browser.
Message manager
they are particularly useful for allowing chrome code, including the
browser's code and extension's code, to access web content while the
browser is running web content in a separate process.
Storage access policy: Block cookies from trackers
browser caches: the http cache, the image cache, and the alternative services (alt-svc) cache are all partitioned for tracking resources, such that each top-level origin will have a separate partition and tracking resources on different top-level origins will be cached separate from each other.
Firefox
firefox is mozilla's popular web
browser, available for multiple platforms including windows, macos, and linux on the desktop and all android and ios mobile devices.
HTMLIFrameElement.download()
examples var
browser = document.queryselector('iframe'); var request =
browser.download(foourl, { filename: 'foo.bin' }); request.onsuccess = function() { console.log("file downladed"); } request.onerror = function() { console.log("download error"); } specification not part of any specification.
HTMLIFrameElement.getContentDimensions()
examples var
browser = document.queryselector('iframe'); var request =
browser.getcontentdimensions(); request.onsuccess = function() { console.log("page size:", request.result.width + "x" + request.result.height); } request.onerror = function() { console.log("download error"); } specification not part of any specification.
HTMLIframeElement.removeNextPaintListener()
examples var
browser = document.queryselector('iframe'); function onnextpaint() { console.log("paint has occured"); }
browser.addnextpaintlistener(onnextpaint);
browser.removenextpaintlistener(onnextpaint); specification not part of any specification.
HTMLIFrameElement.setActive()
example var
browser = document.queryselector('iframe');
browser.setactive(); specification not part of any specification.
HTMLIFrameElement.stop()
examples stopreload.addeventlistener('touchend',function() { if(stopreload.textcontent === 'x') {
browser.stop(); } else {
browser.reload(); } }); specification not part of any specification.
Chrome-only API reference
browser apithe html
browser api is an extension of the html <iframe> element that allows web apps to implement
browsers or
browser-like applications.
MozBeforePaint
this is intentional, because modern operating systems and hardware won't let the
browser display more frames than that anyway.
Gecko's "Almost Standards" Mode
this means that sliced-images-in-tables layouts are less likely to fall apart in gecko-based
browsers based on the rendering engine found in mozilla 1.0.1 or later when in either "quirks" or "almost standards" mode.
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.
Creating a New Protocol
writing the tests protocols which are managed by p
browser must be tested using the mochitest-chrome test framework with a <
browser remote="true">.
Add-on Manager
rt("resource://gre/modules/addonmanager.jsm"); let addonids = addonmanager.getstartupchanges(addonmanager.startup_change_disabled); if (addonids.length > 0) { // addonids is now an array of the add-on ids that have been disabled alert("note: " + addonids.length + " add-ons have been disabled."); } open add-on manager tab the add-on manager tab can be opened programatically with the function
browseropenaddonsmgr which is available on chrome window of "navigator:
browser" type.
DownloadLastDir.jsm
file); to retrieve the path in firefox 26 or later, use getfileasync: downloadlastdir.getfileasync(uri, function (file) { // file is an nsifile console.log(file); }); deprecated since gecko 26.0 to retrieve the path in firefox 25 or earlier, use getfile: // file is an nsifile var file = gdownloadlastdir.getfile(uri); console.log(file); private browsing mode when browsing normally, the
browser uses the
browser.download.lastdir preference to store the last download directory path.
Downloads.jsm
to enable the new download manager : first you have to set the pref
browser.download.usejstransfer to true.
FxAccountsOAuthClient.jsm
the fxaccountsoauthclient.jsm javascript module provides a way for
browser services to authenticate with the firefox accounts oauth server.
Interfacing with the Add-on Repository
installing the add-on the shownotification() routine displays a notification box offering to install the recommended add-on, if one was found, or reports an error if the search failed: shownotification: function(prompt, button, installobj) { this.install = installobj; var box = popupnotifications.show(g
browser.selected
browser, "sample-popup", prompt, null, /* anchor id */ { label: button, accesskey: "i", callback: function() { if (popupnotifications.install) { popupnotifications.install.install(); } else { popupnotifications.remove(box); } } }...
Services.jsm
cessscriptloader global parent process message manager3 prefs nsiprefbranch nsiprefbranch2 nsiprefservice preferences service prompt nsipromptservice prompt service scriptloader mozijssubscriptloader javascript subscript loader service scriptsecuritymanager nsiscriptsecuritymanager script security manager search nsi
browsersearchservice
browser search service startup nsiappstartup 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 ...
Sqlite.jsm
it is possible to automatically close the connection when the
browser is closed with the shutdown hook: const conn = await sqlite.openconnection({ path: "mydatabase.sqlite", sharedmemorycache: false }); try { sqlite.shutdown.addblocker("my connection closing", async () => await conn.close()); } catch (e) { // it's too late to block shutdown, just close the connection.
Webapps.jsm
alid) getdefaultcspbylocalid: function(alocalid) getapplocalidbystoreid: function(astoreid) getappbylocalid: function(alocalid) getmanifesturlbylocalid: function(alocalid) getapplocalidbymanifesturl: function(amanifesturl) getcoreappsbasepath: function() getwebappsbasepath: function() _islaunchable: function(aapp) _notifycategoryandobservers: function(subject, topic, data, msg) register
browserelementparentforapp: function(amsg, amn) receiveappmessage: function(appid, message) _clearprivatedata: function(appid,
browseronly, msg) _sendprogressevent: function() updatestatechanged: function appobs_update(aupdate, astate) applicationcacheavailable: function appobs_cacheavail(aapplicationcache) ...
JavaScript code modules
log.jsm (formerly log4moz) provides a log4j style api for logging, log messages to various endpoints, such as the
browser console or a file on disk.
Encodings for localization files
browser/installer/installer.inc utf-8 toolkit/installer/unix/install.it utf-8 native windows encodings the following table lists native windows encodings, and the win_installer_charset and charset= values for each: encoding name win_installer_charset (charset.mk) charset= (windows/install.it) ansi_charset cp1252 0 baltic_charset ...
Localization content best practices
use ordered variables in string with multiple variables consider this string from /
browser: generalsiteidentity=this website is owned by %s\nthis has been verified by %s first thing: always add a localization comment explaining what these variables mean, even if it seems obvious.
Patching a Localization
hg diff
browser/chrome/
browser/
browser.dtd attach the patch to an existing bug for reference or review or create a new one if one doesn't currently exist.
Release phase
you can now visit http://hg.mozilla.org/releases/l10n-central/x-testing in your
browser to see the new changeset in the remote repository.
Extras
they are not portable and are meant to showcase a few interesting upshots from building natively upon the
browser environment.
Fonts for Mozilla's MathML engine
note that using the add-on is not optimal since it forces your gecko
browser to load a css stylesheet on each page you visit as well as web math fonts on all pages with mathml content.
Fonts for Mozilla 2.0's MathML engine
finally, include the mathml-fonts/resource/mathml.css style sheet in your web pages, for example by adding the following rule to the default style sheet of your web site: @import url('/path/to/resource/mathml.css');
browsers have default font-families in their user agent stylesheets.
Mozilla MathML Project
mathml extras - technology demonstration of some interesting upshots from building natively upon the
browser environment.
Mobile
learn how to make sure your web site works well on different
browsers.
Mozilla Development Tools
mxr you can browse the up-to-the-minute latest version of the source code online through a massively-hyperlinked source code
browser (based on lxr) that lets you cross-reference function and variable names.
BloatView
combining and sorting bloat logs you can view one or more bloat logs in your
browser by running the following program.
GC and CC logs
to set the environment variable, find the build
browserenv method in the python file for the test suite you are interested in, and add something like this code to the file:
browserenv["moz_cc_log_directory"] = os.environ["moz_upload_dir"]
browserenv["moz_cc_log_shutdown"] = "1" analyzing gc and cc logs there are numerous scripts that analyze gc and cc logs on github.
Intel Power Gadget
this feature has been used in energia, roberto vitillo's tool for systematically measuring differential power usage between different
browsers.
powermetrics
as well as the
browser processes, the windowserver and kernel tasks are shown because
browsers often trigger significant load in them.
Performance
best practices for front-end engineers tips for reducing impacts on
browser performance in front-end code.
Productization guide
mail and gmail), so that if the user happens to use one of these in the
browser, they don’t have to configure them.
L20n
l20n.org you can try l20n live in your
browser on the project page.
NSS FAQ
it provides a complete open-source implementation of the crypto libraries used by mozilla and other companies in the firefox
browser, aol instant messenger (aim), server products from red hat, and other products.
4.3.1 Release Notes
source may be viewed with a
browser (via the mxr tool) at http://mxr.mozilla.org/mozilla/source/security/jss/ the run time behavior of jss can be affected by the nss environment variables.
4.3 Release Notes
source may be viewed with a
browser (via the mxr tool) at http://mxr.mozilla.org/mozilla/source/security/jss/ the run time behavior of jss can be affected by the nss environment variables.
NSS_3.12_release_notes.html
bug 406647: libpkix does not use user defined revocation checkers bug 407064: pkix_pl_ldapcertstore_buildcrllist should not fail if a crl fails to be decoded bug 421216: libpkix test nss_thread leaks a test certificate bug 301259: signtool usage message is unhelpful bug 389781: nss should be built size-optimized in
browser builds on linux, windows, and mac bug 90426: use of obsolete typedefs in public nss headers bug 113323: the first argument to pk11_findcertfromnickname should be const.
PKCS11 FAQ
(many nss based server products will use temporary session objects, even for "private key op only" tokens.) if a session key is unwrapped and stays on a hardware token, is it sufficient to support just the usual decryption mechanisms for it, or is it assumed that such a symmetric key will always be extractable from the token into the
browser?
PKCS11 module installation
provisioning pkcs #11 modules using the pkcs11 api starting with firefox 58, extensions can use the pkcs11
browser extension api to enumerate pkcs #11 modules and make them accessible to the
browser as sources of keys and certificates.
sslfnc.html
the so-called 56-bit export
browsers and servers use these cipher suites.
NSS tools : signtool
when it is imported into
browser software such as communicator, it behaves like an object-signing ca and cannot be used to sign objects.
Installing Pork
ting-and-analysis/elsa ./configure make building mozilla with mcpp to build mozilla with mcpp to generate annotated .ii files, use the following configure command: ac_cv_visibility_hidden=no cc="gcc34 -save-temps -wp,-w0,-k" cxx="g++ -save-temps -wp,-w0,-k" cppflags=-dns_disable_literal_template $srcdir/configure --enable-debug --disable-optimize --disable-accessibility --enable-application=
browser --disable-crashreporter building will probably require disabling warnings_as_errors: make warnings_as_errors= "-wp,-w0,-k" are options that get passed to mcpp.
Rhino Debugger
note that this debugger will not work with javascript scripts run in the mozilla
browser since rhino is not the engine used in such environments.
Rhino overview
in
browser embeddings, this language version is selected using the language attribute of the script tag with values such as "javascript1.2".
The JavaScript Runtime
for example, in a
browser environment, the window and document objects are host objects.
Shumway
the simple method is to install the shumway extension (or run a
browser version with shumway included and enabled) and browse to your flash content with adobe flash player set "ask to activate" or "never activate" in firefox's add-ons menu (this will be listed as "shockwave flash" under the plugins tab).
Index
420 js_objectisdate date, jsapi reference, javascript, spidermonkey js_objectisdate() can be used to check if you are dealing with a date object, or a date object used across compartments (or windows or sites, in the
browser embedding).
Exact Stack Rooting
until the system described above has 100%
browser coverage, it is unsafe to enable it.
BOOLEAN_TO_JSVAL
although it may still work in some
browsers, its use is discouraged since it could be removed at any time.
jsint
although it may still work in some
browsers, its use is discouraged since it could be removed at any time.
Profiling SpiderMonkey
here's a sample mozconfig: mk_add_options moz_objdir=@topsrcdir@/ff-opt-libxul mk_add_options moz_make_flags=-j3 ac_add_options --enable-optimize ac_add_options --enable-libxul ac_add_options --enable-shark ac_add_options --enable-debugger-info-modules ac_add_options --enable-application=
browser 2.) you'll want to run shark on both the
browser and [xpcshell], since the host environments differ.
Setting up CDT to work on SpiderMonkey
give the project a name that you like ("spidermonkey" has a nice ring to it) and use the "
browser…" button to select your checkout's js/src folder for the "existing code location".
Split object
the inner window object is different for each page a
browser window visits.
TPS Bookmark Lists
bookmarks.delete - the bookmarks in this list are deleted from the
browser.
TPS Tab Lists
585b6/pages/page1.html", title: "crossweave test page 1", profile: "profile1" }, { uri: "data:text/html,<html><head><title>hello</title></head><body>hello</body></html>", title: "hello", profile: "profile1" } ]; tab lists and phase actions tabs cannot be modified or deleted, only added or verified with the following functions: tabs.add - opens the specified tabs in the
browser window.
Mozilla Projects
firefox sync firefox sync synchronizes state and configuration data used by the
browser, such as bookmarks, history, preferences, bookmarks, and so forth among all your devices.
Redis Tips
in the case where you want to do something akin to a join, like, say, associate an email and a remote url to store a
browserid assertion, just make a new key.
Exploitable crashes
these bugs cause the
browser to crash, but they do so in a predictable way, so they are not exploitable.
DocShell
nsweb
browser project page (outlines the design of nsweb
browser and docshell).
Manipulating bookmarks using Places
initiating the bookmarks service as is the case with nearly all interfaces, before you can use the bookmarks service, you need to get access to it: var bmsvc = components.classes["@mozilla.org/
browser/nav-bookmarks-service;1"] .getservice(components.interfaces.nsinavbookmarksservice); creating a bookmark folder creating a new bookmark folder is done using the nsinavbookmarksservice.createfolder() method.
Querying Places
the defaults for these objects will result in a query that returns all of your
browser history in a flat list: chromeutils.definemodulegetter(this, "placesutils", "resource://gre/modules/placesutils.jsm"); // no query options set will get all history, sorted in database order, // which is nsinavhistoryqueryoptions.sort_by_none.
Using the Places tagging service
initiating the tagging service before using the tagging service, you need to obtain a reference to an instance of it: var taggingsvc = components.classes["@mozilla.org/
browser/tagging-service;1"] .getservice(components.interfaces.nsitaggingservice); tagging a uri the nsitaggingservice.taguri() method tags a url with the given set of tags.
The Publicity Stream API
this library will detect whether native api support is enabled by the user's
browser, if not it will shim in a pure html implementation.
FUEL
objects extiapplication objects extiapplication exticonsole extieventitem extieventlistener extievents extiextension extiextensions extipreference extipreferencebranch extisessionstorage fueliapplication objects fueliannotations fueliapplication fuelibookmark fuelibookmarkfolder fuelibookmarkroots fueli
browsertab fueliwindow xpcom although the fuel application object is preloaded into xul scripts, it is not preloaded into javascript xpcom code.
SMILE
objects extiapplication objects exticonsole extieventitem extieventlistener extievents extiextension extiextensions extipreference extipreferencebranch extisessionstorage smileiapplication objects smileibookmarkroots smileiwindow smilei
browsertab smileiapplication xpcom although the extiapplication object is preloaded into xul scripts, it is not preloaded into javascript xpcom code.
XPCOM changes in Gecko 2.0
once that's done, the extensions can then be loaded by simply reading their manifests, loading their components, and continuing the startup process, all without having to restart the
browser.
Component Internals
a web
browser that embeds gecko, for example, may initialize xpcom at startup through the embedding apis.
Finishing the Component
you can of course improve this backend in many ways, but this example presents the basic creation of what is commonly referred to as a "
browser helper object" like weblock.
Using XPCOM Utilities to Make Things Easier
#include "nsigenericfactory.h" static const nsmodulecomponentinfo components[] = { { "pretty class name", sample_cid, "@company.com/sample", sampleconstructor } } ns_impl_nsgetmodule(nssamplemodule, components) most of the components in the mozilla
browser client use this approach.
Creating XPCOM components
gecko components interfaces interfaces and encapsulation the nsisupports base interface xpcom identifiers cid contract id factories xpidl and type libraries xpcom services xpcom types method types reference counting status codes variable mappings common xpcom error codes using xpcom components component examples cookie manager the web
browserfind component the weblock component component use in mozilla finding mozilla components using xpcom components in your cpp xpconnect: using xpcom components from script component internals creating components in cpp xpcom initialization xpcom registry manifests registration methods in xpcom autoregistration the shutdown process three parts of a xpcom component...
Receiving startup notifications
once that process is completed, extensions can then be loaded by simply reading their manifests, loading their components, and continuing with application startup, all without having to restart the
browser.
Components.utils.isXrayWrapper
example var isxray = components.utils.isxraywrapper(g
browser.contentwindow); // true var waived = components.utils.waivexrays(g
browser.contentwindow); isxray = components.utils.isxraywrapper(waived); // false ...
Components.utils.unwaiveXrays
the chrome code can then use unwaivexrays to restore xray protection: // chrome code // contentwindow is an xray var isxray = components.utils.isxraywrapper(g
browser.contentwindow); // true // expandos are not visible in xrays var foo = g
browser.contentwindow.foo; // undefined // you can waive xray vision for an object var waived = components.utils.waivexrays(g
browser.contentwindow); isxray = components.utils.isxraywrapper(waived); // false foo = waived.foo; ...
Components.utils.waiveXrays
example suppose a page script adds an expando to its global window: // page script foo = "i'm an expando"; by default, chrome code won't see foo, because it sees the content window with xray vision, but the chrome code can waive xray protection: // chrome code // contentwindow is an xray var isxray = components.utils.isxraywrapper(g
browser.contentwindow); // true // expandos are not visible in xrays var foo = g
browser.contentwindow.foo; // undefined // you can waive xray vision for an object var waived = components.utils.waivexrays(g
browser.contentwindow); isxray = components.utils.isxraywrapper(waived); // false foo = waived.foo; ...
mozIAsyncHistory
1.0 66 introduced gecko 24.0 inherits from: nsisupports last changed in gecko 24.0 (firefox 24.0 / thunderbird 24.0 / seamonkey 2.21) implemented by: @mozilla.org/
browser/history;1 as a service: var asynchistory = components.classes["@mozilla.org/
browser/history;1"] .getservice(components.interfaces.moziasynchistory); method overview void getplacesinfo(in jsval aplaceidentifiers, in mozivisitinfocallback acallback); void isurivisited(in nsiuri auri, in mozivisitedstatuscallback acallback); void updateplaces(in moziplaceinfo, [optional] in mozivisitinfocallback acallback); metho...
mozIPlacesAutoComplete
behavior_openpage 1 << 7 search for pages that have been marked as being opened, such as a tab in a tab
browser.
nsIAccessibleDocument
although it may still work in some
browsers, its use is discouraged since it could be removed at any time.
nsIAccessibleRole
the role is used by xul:
browsermessage, role="alert", xforms:message.
nsIAccessibleText
although it may still work in some
browsers, its use is discouraged since it could be removed at any time.
nsIAccessibleTreeCache
although it may still work in some
browsers, its use is discouraged since it could be removed at any time.
nsIAppStartup
if one has not been made, this will create a
browser window.
nsICacheService
although it may still work in some
browsers, its use is discouraged since it could be removed at any time.
nsICommandLine
preventdefault boolean there may be a command-line handler which performs a default action if there was no explicit action on the command line (open a default
browser window, for example).
nsICommandLineHandler
-line-handler b-jsdebug @mozilla.org/venkman/clh;1 command-line-handler c-extensions @mozilla.org/extension-manager/clh;1 command-line-handler m-edit @mozilla.org/composer/clh;1 command-line-handler m-irc @mozilla.org/chatzilla/clh;1 command-line-handler y-final @mozilla.org/
browser/clh-final;1 method overview void handle(in nsicommandline acommandline); attributes attribute type description helpinfo autf8string when the application is launched with the -help argument, this attribute is retrieved and displayed to the user (on stdout).
nsIContentPrefService
provides a way for extensions and
browser code to save preferences for specific websites.
nsIDOMFileError
although it may still work in some
browsers, its use is discouraged since it could be removed at any time.
nsIDOMHTMLSourceElement
example <video controls> <source src="foo.webm" type="video/webm; codecs="vp9, opus""> your
browser does not support the <code>video</code> element.
nsIDOMStorageEventObsolete
although it may still work in some
browsers, its use is discouraged since it could be removed at any time.
nsIDOMXULElement
gets or creates a box object for the element;
browser, editor, iframe, listbox, menu, menupopup, scrollbox, tooltip and tree elements receive specialized box objects allowing access to additional properties not normally available from script.
nsIDocumentLoader
although it may still work in some
browsers, its use is discouraged since it could be removed at any time.
nsIDragService
although it may still work in some
browsers, its use is discouraged since it could be removed at any time.
nsIEditorBoxObject
the editor.xml binding uses this property to gain access to the webnavigation, contentdocument, contentwindow, web
browserfind, editingsession and commandmanager properties.
nsIEditorSpellCheck
although it may still work in some
browsers, its use is discouraged since it could be removed at any time.
nsIEventTarget
although it may still work in some
browsers, its use is discouraged since it could be removed at any time.
nsIExternalProtocolService
omponents.interfaces.nsiioservice); var uritoopen = ioservice.newuri("http://www.example.com/", null, null); var extps = components.classes["@mozilla.org/uriloader/external-protocol-service;1"] .getservice(components.interfaces.nsiexternalprotocolservice); if (extps.externalprotocolhandlerexists("tlcxp")) { // handler for http:// urls exists } else { // suppress external-load warning for standard
browser schemes pref("network.protocol-handler.external.tlcxp", true); pref("network.protocol-handler.app.tlcxp, "lzx"); } </pre> getprotocolhandlerinfo() retrieve the handler for the given protocol.
nsIFocusManager
although it may still work in some
browsers, its use is discouraged since it could be removed at any time.
nsIFrameMessageListener
content/base/public/nsimessagemanager.idlscriptable implement this interface in a remote frame handling process to receive messages from the
browser process.
nsIHTTPHeaderListener
the
browser will then qi this streamlistener to see if it implements nsihttpheaderlistener.
nsIHttpServer
* * @param path * the path on the server (beginning with a "/") which is to be handled by * handler; this path must not include a query string or hash component; it * also should usually be canonicalized, since most
browsers will do so * before sending otherwise-matching requests * @param handler * an object which will handle any requests for the given path, or null to * remove any existing handler; if while the server is running the handler * throws an exception while responding to a request, an http 500 response * will be returned * @throws ns_error_invalid_arg * if path does no...
nsIHttpUpgradeListener
void ontransportavailable( in nsisockettransport atransport, in nsiasyncinputstream asocketin, in nsiasyncoutputstream asocketout ); parameters atransport the nsisockettransport describing the socket connection between the
browser and the server; this socket can now be used for the new protocol instead of http.
nsIIdleService
can be 0 if there is no valid idle time to report (this can happen if the user never interacted with the
browser at all, and if we are unable to poll for idle time manually).
nsILoginManagerStorage
this is called by the
browser sanitization feature when the user asks to clear all stored passwords.
nsIMessageListener
if the message was sent from a frame script using a nsicontentframemessagemanager, then this property is the xul <
browser> element for the frame from which the message was sent.
nsIMessenger
if this window contains a messagepane element (i think this may mean a xul:
browser element with its id set to "messagepane"?), then the nsidocshell will be used for future nsimessenger operations.
nsIMicrosummaryGenerator
localuri nsiuri for generators installed by the user or bundled with the
browser, the local uri points to the location of the local file containing the generator's xml.
nsINavHistoryResultViewer
although it may still work in some
browsers, its use is discouraged since it could be removed at any time.
nsIPushService
inherits from: nsisupports last changed in gecko 46.0 (firefox 46.0 / thunderbird 46.0 / seamonkey 2.43) push lets a remote server send payloads to a web site, add-on, or component running in the
browser.
nsISHistoryListener
entries can be removed from session history for various reasons; for example to control the
browser's memory usage, to prevent users from loading documents from history, to erase evidence of prior page loads, etc.
nsIScrollable
example var nsiscr = g
browser.selected
browser.docshell.queryinterface(components.interfaces.nsiscrollable); var v={}; var h={}; nsiscr.getscrollbarvisibility(v,h); v.value //returns true if the vertical scrollbar is displayed h.value //returns true if the horizontal scrollbar is displayed ...
nsISearchSubmission
netwerk/base/public/nsi
browsersearchservice.idlscriptable please add a summary to this article.
nsISecurityCheckedComponent
code that has the "universal
browserread" capability is allowed to perform certain actions that allow it to read information from the local system.
nsISelectionPrivate
although it may still work in some
browsers, its use is discouraged since it could be removed at any time.
nsISupports proxies
although it may still work in some
browsers, its use is discouraged since it could be removed at any time.
nsITextInputProcessor
although the rules to decide the keycode value are different on each web
browser, you should use same rules as gecko because your events are dispatched on gecko.
nsITraceableChannel
to xmlhttprequest or to the
browser tab that made the request) with your own implementation (see "implementing nsistreamlistener" below).
nsITreeView
although it may still work in some
browsers, its use is discouraged since it could be removed at any time.
nsIURIFixupInfo
potentially adding a prefix and/or suffix; set by the
browser.fixup.alternate.prefix and .suffix prefs, their defaults "www." and ".com", respectively.
nsIWebNavigation
inherits from: nsisupports last changed in gecko 1.9 (firefox 3) this interface is implemented by the following components: * @mozilla.org/
browser/shistory-internal;1 * @mozilla.org/
browser/shistory;1 * @mozilla.org/embedding/
browser/nsweb
browser;1 * @mozilla.org/docshell;1 gecko 1.9.2 note in gecko 1.9.2 (firefox 3.6), the @mozilla.org/webshell;1 component no longer exists; you need to use @mozilla.org/docshell;1 instead.
nsIWebSocketChannel
1001 close_going_away the endpoint is going away, either because of a server failure or because the
browser is navigating away from the page that opened the connection.
nsIWinTaskbar
example netscape.security.privilegemanager.enableprivilege("universalxpconnect"); var taskbar = components.classes["@mozilla.org/windows-taskbar;1"].getservice(components.interfaces.nsiwintaskbar); // get the docshell for the
browser var navigator2 = top.queryinterface(components.interfaces.nsiinterfacerequestor).getinterface(components.interfaces.nsiwebnavigation); var docshell = navigator2.queryinterface(components.interfaces.nsidocshell); // get the parent docshell; this is the top-level docshell var docshelltreeitem = docshell.queryinterface(components.interfaces.nsidocshelltreeitem); var parent = docshelltreeitem.pare...
nsIXMLHttpRequest
although it may still work in some
browsers, its use is discouraged since it could be removed at any time.
nsIXSLTProcessorObsolete
although it may still work in some
browsers, its use is discouraged since it could be removed at any time.
nsIXULAppInfo
example display the application and the gecko version in an alert box: var info = components.classes["@mozilla.org/xre/app-info;1"] .getservice(components.interfaces.nsixulappinfo); alert("application version: " + info.version + "\n" + "gecko version: " + info.platformversion); example this example here uses nsixulappinfo to get the version of the current
browser and then compares it: example - compare current
browser version see also using nsixulappinfo nsixulruntime get thunderbird version firefox code snippets ...
nsIXULRuntime
browsertabsremoteautostart boolean if true,
browser tabs may be opened by default in a different process from the main
browser ui.
nsIXULSortService
although it may still work in some
browsers, its use is discouraged since it could be removed at any time.
nsIXmlRpcFault
although it may still work in some
browsers, its use is discouraged since it could be removed at any time.
nsIZipWriter
recursively add all contents of a directory to zip file this example below can be copied and pasted into your scratchpad, set the environment to "
browser" and can run.
Performance
if the user shuts down the
browser soon after you do this type of operation, you can delay shutdown (possibly for many tens of seconds for large numbers of transactions and slow disks), making it look like the
browser is hung.
Storage
sqlite syntax query language understood by sqlite sqlite database
browser is a capable free tool available for many platforms.
Using the clipboard
// import the services module for future use, if we're not in // a
browser window where it's already loaded.
xptcall FAQ
but any
browser feature that relies on xpconnect will fail.
Mozilla technologies
the xml extras module is built by default on all platforms, and is included in the
browser installers so it is available in the nightly builds.xpcomxpcom is a cross platform component object model, similar to microsoft com.
The Valgrind Test Job
the valgrind test job builds the
browser and runs it under valgrind, which can detect various common memory-related errors.
Index
to test it 17 content tabs thunderbird content tabs enable thunderbird to display remote content in a tab, which users can browse in (mostly) the same way as with a
browser.
Building a Thunderbird extension 1: introduction
documentation thunderbird extensions (documentation overview) firefox addons developer guide (many topics are applicable to thunderbird) mozilla cross-reference source code
browser ("comm-central" contains the thunderbird code repository) community the thunderbird development community has a mailing list with an extensive searchable archive with an extensive searchable archive.
Theme Packaging
theme file layout thunderbird themes are packaged in an xpi file with the following structure: theme.xpi: install.rdf preview.png icon.png chrome/
browser/files communicator/files global/files mozapps/files ...
Thunderbird
thunderbird is built on the same technical platform as the firefox web
browser.
WebIDL bindings
callback interfaces are used to represent script objects that
browser code can call into.
Add to iPhoto
xof("/")+1); // build the path to download to var dest = components.classes["@mozilla.org/file/directory_service;1"] .getservice(components.interfaces.nsiproperties) .get("tmpd", components.interfaces.nsifile); dest.append(filename); dest.createunique(dest.normal_file_type, 0600); var wbp = components.classes['@mozilla.org/embedding/
browser/nsweb
browserpersist;1'] .createinstance(components.interfaces.nsiweb
browserpersist); var ios = components.classes['@mozilla.org/network/io-service;1'] .getservice(components.interfaces.nsiioservice); var uri = ios.newuri(src, document.characterset, g
browser.selected
browser.contentdocument.documenturiobject); wbp.persistflags &= ~components.interfaces.nsiweb
browserpe...
Declaring and Using Callbacks
if you don't, the gc might collect the relevant data structures, and the
browser will crash when native code attempts to invoke your callback.
Structures - Plugins
npstream represents a stream of data either produced by the
browser and consumed by the plug-in, or produced by the plug-in and consumed by the
browser.
Inspecting web app manifests - Firefox Developer Tools
yed, you'll get the following output shown: deploying a manifest to get a manifest deployed successfully, you need to include a <link> element in the <head> of your document that points to your .webmanifest file: <link rel="manifest" href="/manifest.webmanifest"> the .webmanifest extension is recommended in the spec, and should be served with an application/manifest+json mime type, although
browsers generally tend to support manifests with other appropriate extensions like .json (mime type: application/json).
Step through code - Firefox Developer Tools
if you want to turn this feature off, since firefox 71 you can do so by going to about:config in a new tab, setting the devtools.debugger.features.overlay pref to false, and restarting the
browser.
Set event listener breakpoints - Firefox Developer Tools
this is also useful when debugging code that you're unfamiliar with, to save time over hunting down your event handler within your code, or when trying to understand why a web site isn't working as expected in your
browser.
Debugger - Firefox Developer Tools
for example, an uncaught exception hook may have access to
browser-level features like the alert function, which this api’s implementation does not, making it possible to present debugger errors to the developer in a way suited to the context.) debugger handler functions each debugger instance inherits accessor properties with which you can store handler functions for spidermonkey to call when given events occur in debuggee code.
JSON viewer - Firefox Developer Tools
if you open a json file in the
browser, or view a remote url with the content-type set to application/json, it is parsed and given syntax highlighting.
Open the Inspector - Firefox Developer Tools
the inspector will appear at the bottom of the
browser window: you can also set the pane to appear at the left side of the
browser window: to the right side of the
browser window: or in a separate window: to start finding your way around the inspector, see the ui tour.
Debugging Firefox Desktop - Firefox Developer Tools
enable remote debugging first, you'll need to ensure that both debugger and debuggee have the "enable
browser chrome and add-on debugging toolboxes" and "enable remote debugging" settings checked in the developer tools settings.
Cookies - Firefox Developer Tools
delete all session cookies - deletes all cookies for the current host that are scheduled to be deleted when the
browser shuts down ...
Style Editor - Firefox Developer Tools
the toolbox will appear at the bottom of the
browser window, with the style editor activated: the style editor is divided into three main sections: the style sheet pane on the left the editor on the right the media sidebar.
Validators - Firefox Developer Tools
applications and services devedge web tune-up wizard this interface to w3c services guides beginning-to-intermediate web authors through the process of updating content to support netscape 7.x, mozilla and other
browsers that support w3c standards.
Web Console - Firefox Developer Tools
the toolbox appear at the bottom, left, or right of the
browser window (depending on your docking settings), with the web console activated (it's just called console in the devtools toolbar).
Animation.currentTime - Web APIs
echange.effect.timing.duration / 2; a more generic means of seeking to the 50% mark of an animation would be: animation.currenttime = animation.effect.getcomputedtiming().delay + animation.effect.getcomputedtiming().activeduration / 2; reduced time precision to offer protection against timing attacks and fingerprinting, the precision of animation.currenttime might get rounded depending on
browser settings.
Animation.startTime - Web APIs
waapicats.appendchild(newcat); } reduced time precision to offer protection against timing attacks and fingerprinting, the precision of animation.starttime might get rounded depending on
browser settings.
AnimationTimeline.currentTime - Web APIs
reduced time precision to offer protection against timing attacks and fingerprinting, the precision of animationtimeline.currenttime might get rounded depending on
browser settings.
Attr.namespaceURI - Web APIs
if the namespaceuri returns the xul namespace and the localname returns "
browser", then the node is understood to be a xul <
browser/>.
AudioContext.createMediaStreamSource() - Web APIs
er.connect(audioctx.destination); // get new mouse pointer coordinates when mouse is moved // then set new gain value range.oninput = function() { biquadfilter.gain.value = range.value; } }) .catch(function(err) { console.log('the following gum error occured: ' + err); }); } else { console.log('getusermedia not supported on your
browser!'); } // dump script to pre element pre.innerhtml = myscript.innerhtml; note: as a consequence of calling createmediastreamsource(), audio playback from the media stream will be re-routed into the processing graph of the audiocontext.
AudioContext.outputLatency - Web APIs
this is the time, in seconds, between the
browser passing an audio buffer out of an audio graph over to the host system's audio subsystem to play, and the time at which the first sample in the buffer is actually processed by the audio output device.
AudioContext - Web APIs
examples basic audio context declaration: var audioctx = new audiocontext(); cross
browser variant: var audiocontext = window.audiocontext || window.webkitaudiocontext; var audioctx = new audiocontext(); var oscillatornode = audioctx.createoscillator(); var gainnode = audioctx.creategain(); var finish = audioctx.destination; // etc.
AudioListener.dopplerFactor - Web APIs
note how we have used some feature detection to either give the
browser the newer property values (like audiolistener.forwardx) for setting position, etc.
AudioListener.forwardX - Web APIs
note how we have used some feature detection to either give the
browser the newer property values (like audiolistener.forwardx) for setting position, etc.
AudioListener.forwardY - Web APIs
note how we have used some feature detection to either give the
browser the newer property values (like audiolistener.forwardx) for setting position, etc.
AudioListener.forwardZ - Web APIs
note how we have used some feature detection to either give the
browser the newer property values (like audiolistener.forwardx) for setting position, etc.
AudioListener.positionX - Web APIs
note how we have used some feature detection to either give the
browser the newer property values (like audiolistener.forwardx) for setting position, etc.
AudioListener.positionY - Web APIs
note how we have used some feature detection to either give the
browser the newer property values (like audiolistener.forwardx) for setting position, etc.
AudioListener.positionZ - Web APIs
note how we have used some feature detection to either give the
browser the newer property values (like audiolistener.forwardx) for setting position, etc.
AudioListener.setPosition() - Web APIs
note how we have used some feature detection to either give the
browser the newer property values (like audiolistener.forwardx) for setting position, etc.
AudioListener.speedOfSound - Web APIs
note how we have used some feature detection to either give the
browser the newer property values (like audiolistener.forwardx) for setting position, etc.
AudioListener.upX - Web APIs
note how we have used some feature detection to either give the
browser the newer property values (like audiolistener.forwardx) for setting position, etc.
AudioListener.upY - Web APIs
note how we have used some feature detection to either give the
browser the newer property values (like audiolistener.forwardx) for setting position, etc.
AudioListener.upZ - Web APIs
note how we have used some feature detection to either give the
browser the newer property values (like audiolistener.forwardx) for setting position, etc.
AudioListener - Web APIs
note how we have used some feature detection to either give the
browser the newer property values (like audiolistener.forwardx) for setting position, etc.
BaseAudioContext.createGain() - Web APIs
navigator.mediadevices.getusermedia ( // constraints - only audio needed for this app { audio: true }, // success callback function(stream) { source = audioctx.createmediastreamsource(stream); }, // error callback function(err) { console.log('the following gum error occured: ' + err); } ); } else { console.log('getusermedia not supported on your
browser!'); } source.connect(gainnode); gainnode.connect(audioctx.destination); ...
BaseAudioContext.destination - Web APIs
var audiocontext = window.audiocontext || window.webkitaudiocontext; var audioctx = new audiocontext(); // older webkit/blink
browsers require a prefix var oscillatornode = audioctx.createoscillator(); var gainnode = audioctx.creategain(); oscillatornode.connect(gainnode); gainnode.connect(audioctx.destination); specifications specification status comment web audio apithe definition of 'destination' in that specification.
BaseAudioContext.listener - Web APIs
var audiocontext = window.audiocontext || window.webkitaudiocontext; var audioctx = new audiocontext(); // older webkit/blink
browsers require a prefix ...
BaseAudioContext - Web APIs
examples basic audio context declaration: const audiocontext = new audiocontext(); cross
browser variant: const audiocontext = window.audiocontext || window.webkitaudiocontext; const audiocontext = new audiocontext(); const oscillatornode = audiocontext.createoscillator(); const gainnode = audiocontext.creategain(); const finish = audiocontext.destination; specifications specification status comment web audio apithe definition of 'baseaudiocontext' in that specif...
BatteryManager.chargingTime - Web APIs
even if the time returned is precise to the second,
browsers round them to a higher interval (typically to the closest 15 minutes) for privacy reasons.
Blob - Web APIs
eturn url.createobjecturl(new blob([typedarray.buffer], {type: mimetype})) } const bytes = new uint8array(59); for(let i = 0; i < 59; i++) { bytes[i] = 32 + i; } const url = typedarraytourl(bytes, 'text/plain'); const link = document.createelement('a'); link.href = url; link.innertext = 'open the array url'; document.body.appendchild(link); result click the link in the example to see the
browser decode the object url.
CSS.registerProperty() - Web APIs
registering a custom property allows you to tell the
browser how the custom property should behave; what are allowed types, whether the custom property inherits its value, and what the default value of the custom property is.
CSSRule - Web APIs
cssrule.document_rule 13 cssdocumentrule cssrule.font_feature_values_rule 14 cssfontfeaturevaluesrule cssrule.viewport_rule 15 cssviewportrule cssrule.region_style_rule 16 cssregionstylerule cssrule.unknown_rule 0 cssunknownrule cssrule.charset_rule 2 csscharsetrule (removed in most
browsers.) an up-to-date informal list of constants can be found on the csswg wiki.
CSSStyleSheet.addRule() - Web APIs
usage notes this method is implemented by
browsers by constructing a string using the template literal `${selector}{${styleblock}}`, then passing it into the standard insertrule() method.
Cache.match() - Web APIs
if no fetch handlers call event.respondwith(), the request will be handled by the
browser as if there were no service worker involvement.
CanvasPattern.setTransform() - Web APIs
d'); var svg1 = document.getelementbyid('svg1'); var matrix = svg1.createsvgmatrix(); var img = new image(); img.src = 'https://mdn.mozillademos.org/files/222/canvas_createpattern.png'; img.onload = function() { var pattern = ctx.createpattern(img, 'repeat'); pattern.settransform(matrix.rotate(-45).scale(1.5)); ctx.fillstyle = pattern; ctx.fillrect(0, 0, 400, 400); }; note that newer
browser versions started to support dommatrix as an input to settransform(), so for example you could replace the svgmatrix in the above example with the following: const matrix = new dommatrix([1, .2, .8, 1, 0, 0]); edit the code below and see your changes update live in the canvas: playable code <canvas id="canvas" width="400" height="200" class="playable-canvas"></canvas> <svg id="svg1" style="di...
CanvasRenderingContext2D.addHitRegion() - Web APIs
(if you don't see the full smiley, check the
browser compatibility table to see if your current
browser supports hit regions already; you might need to activate a preference.) playable code <canvas id="canvas" width="400" height="200" class="playable-canvas"></canvas> <div class="playable-buttons"> <input id="edit" type="button" value="edit" /> <input id="reset" type="button" value="reset" /> </div> <textarea id="code" class="playable-code" ...
CanvasRenderingContext2D.drawWindow() - Web APIs
it is usually a bad idea to use any background other than pure white "rgb(255,255,255)" or transparent, as this is what all
browsers do, and many websites expect that transparent parts of their interface will be drawn on white background.
CanvasRenderingContext2D.putImageData() - Web APIs
+ ',' + (data[pos*4+3]/255) + ')'; ctx.fillrect(x + dx, y + dy, 1, 1); } } } // draw content onto the canvas ctx.fillrect(0, 0, 100, 100); // create an imagedata object from it var imagedata = ctx.getimagedata(0, 0, 100, 100); // use the putimagedata function that illustrates how putimagedata works putimagedata(ctx, imagedata, 150, 0, 50, 50, 25, 25); result data loss due to
browser optimization due to the lossy nature of converting to and from premultiplied alpha color values, pixels that have just been set using putimagedata() might be returned to an equivalent getimagedata() as different values.
A basic ray-caster - Web APIs
so there you are, fire up safari 1.3+ or firefox 1.5+ or some other
browser that supports the <canvas> element and enjoy!
Basic animations - Web APIs
requestanimationframe(callback) tells the
browser that you wish to perform an animation and requests that the
browser call a specified function to update an animation before the next repaint.
Drawing shapes with canvas - Web APIs
to simplify the code and to improve performance, the path2d object, available in recent versions of
browsers, lets you cache or record these drawing commands.
Canvas API - Web APIs
phaser is a fast, free and fun open source framework for canvas and webgl powered
browser games.
Clients - Web APIs
clients.openwindow() opens a new
browser window for a given url and returns a promise for the new windowclient.
Clipboard.read() - Web APIs
note: the asynchronous clipboard and permissions apis are still in the process of being integrated into most
browsers, so they often deviate from the official rules for permissions and the like.
Document.implementation - Web APIs
notes the w3c's dom level 1 recommendation only specified the hasfeature method, which is one way to determine if a dom module is supported by a
browser (see example above and what does your user agent claim to support?).
Document: keydown event - Web APIs
since firefox 65, the keydown and keyup events are now fired during ime composition, to improve cross-
browser compatibility for cjkt users (bug 354358, also see keydown and keyup events are now fired during ime composition for more useful details).
Document: keyup event - Web APIs
since firefox 65, the keydown and keyup events are now fired during ime composition, to improve cross-
browser compatibility for cjkt users (bug 354358, also see keydown and keyup events are now fired during ime composition for more useful details).
Document.open() - Web APIs
this call, for example opens github.com in a new window, with its opener set to null: document.open('https://www.github.com','', 'noopener=true') two-argument document.open()
browsers used to support a two-argument document.open(), with the following signature: document.open(type, replace) where type specified the mime type of the data you are writing (e.g.
DocumentOrShadowRoot.elementsFromPoint() - Web APIs
</div> javascript let output = document.getelementbyid("output"); if (document.elementsfrompoint) { let elements = document.elementsfrompoint(30, 20); for (var i = 0; i < elements.length; i++) { output.textcontent += elements[i].localname; if (i < elements.length - 1) { output.textcontent += " < "; } } } else { output.innerhtml = "<span style=\"color: red;\">" + "
browser does not support <code>document.elementsfrompoint()</code>" + "</span>"; } specifications specification status shadow domthe definition of 'elementsfrompoint()' in that specification.
DocumentOrShadowRoot.nodeFromPoint() - Web APIs
examples html content <div> <p>some text</p> </div> <p>top node at point 30, 20:</p> <div id="output"></div> javascript content var output = document.getelementbyid("output"); if (document.nodefrompoint) { var node = document.nodefrompoint(30, 20); output.textcontent += node.localname; } else { output.innerhtml = "<span style=\"color: red;\">" + "
browser does not support <code>document.nodefrompoint()</code>" + "</span>"; } specifications not part of any specification at present.
DocumentOrShadowRoot.nodesFromPoint() - Web APIs
d="output"></div> javascript content var output = document.getelementbyid("output"); if (document.nodesfrompoint) { var nodes = document.nodesfrompoint(30, 20); for(var i = 0; i < nodes.length; i++) { output.textcontent += nodes[i].localname; if (i < nodes.length - 1) { output.textcontent += " < "; } } } else { output.innerhtml = "<span style=\"color: red;\">" + "
browser does not support <code>document.nodesfrompoint()</code>" + "</span>"; } specifications not part of any specification at present.
DragEvent() - Web APIs
although this interface has a constructor, it is not possible to create a useful datatransfer object from script, since datatransfer objects have a processing and security model that is coordinated by the
browser during drag-and-drops.
DragEvent - Web APIs
constructors although this interface has a constructor, it is not possible to create a useful datatransfer object from script, since datatransfer objects have a processing and security model that is coordinated by the
browser during drag-and-drops.
EXT_disjoint_timer_query.getQueryObjectEXT() - Web APIs
ext.endqueryext(ext.time_elapsed_ext); // at some point in the future, after returning control to the
browser var available = ext.getqueryobjectext(query, ext.query_result_available_ext); var disjoint = gl.getparameter(ext.gpu_disjoint_ext); if (available && !disjoint) { // see how much time the rendering of the object took in nanoseconds.
EffectTiming.fill - Web APIs
in order to avoid leaking memory when many filling animations overlap, the
browser is required to remove overlapped animations which can lead to surprising results in some cases.
Element.attributes - Web APIs
it is a namednodemap, not an array, so it has no array methods and the attr nodes' indexes may differ among
browsers.
Element: auxclick event - Web APIs
bubbles yes cancelable yes interface mouseevent event handler property onauxclick preventing default actions for the vast majority of
browsers that map middle click to opening a link in a new tab, including firefox, it is possible to cancel this behavior by calling preventdefault() from within an auxclick event handler.
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 platforms.
Element.closest() - Web APIs
h the id=div-02 var r2 = el.closest("div div"); // returns the closest ancestor which is a div in div, here it is the div-03 itself var r3 = el.closest("article > div"); // returns the closest ancestor which is a div and has a parent article, here it is the div-01 var r4 = el.closest(":not(div)"); // returns the closest ancestor which is not a div, here it is the outmost article polyfill for
browsers that do not support element.closest(), but carry support for element.matches() (or a prefixed equivalent, meaning ie9+), a polyfill exists: if (!element.prototype.matches) { element.prototype.matches = element.prototype.msmatchesselector || element.prototype.webkitmatchesselector; } if (!element.prototype.closest) { element.prototype.closest = function(s) { var el = this; ...
Element: contextmenu event - Web APIs
as a result, the first paragraph will do nothing when right-clicked, while the second paragraph will show the standard context menu offered by your
browser.
Element.getAttribute() - Web APIs
non-existing attributes essentially all web
browsers (firefox, internet explorer, recent versions of opera, safari, konqueror, and icab, as a non-exhaustive list) return null when the specified attribute does not exist on the specified element; this is what the current dom specification draft specifies.
Element.innerHTML - Web APIs
for example, if you use innerhtml in a
browser extension and submit the extension to addons.mozilla.org, it will not pass the automated review process.
Element: keydown event - Web APIs
since firefox 65, the keydown and keyup events are now fired during ime composition, to improve cross-
browser compatibility for cjkt users (bug 354358, also see keydown and keyup events are now fired during ime composition for more useful details).
Element: keyup event - Web APIs
since firefox 65, the keyup and keydown events are now fired during ime composition, to improve cross-
browser compatibility for cjkt users (bug 354358, also see keydown and keyup events are now fired during ime composition for more useful details).
Encoding API - Web APIs
interfaces textdecoder textencoder textdecoderstream textencoderstream tutorials & tools a shim allowing to use this interface in
browsers that don't support it.
Event.returnValue - Web APIs
usage notes returnvalue was introduced into the dom by internet explorer 6, and due to that
browser's ubiquity became so commonly used that other
browsers eventually implemented it as well.
Event.timeStamp - Web APIs
</p> <p>timestamp: <span id="time">-</span></p> javascript function gettime(event) { var time = document.getelementbyid("time"); time.firstchild.nodevalue = event.timestamp; } document.body.addeventlistener("keypress", gettime); result reduced time precision to offer protection against timing attacks and fingerprinting, the precision of event.timestamp might get rounded depending on
browser settings.
EventTarget.removeEventListener() - Web APIs
element.removeeventlistener("mousedown", handlemousedown, { capture: true }); // fails element.removeeventlistener("mousedown", handlemousedown, { passive: false }); // succeeds element.removeeventlistener("mousedown", handlemousedown, false); // succeeds element.removeeventlistener("mousedown", handlemousedown, true); // fails it's worth noting that some
browser releases have been inconsistent on this, and unless you have specific reasons otherwise, it's probably wise to use the same values used for the call to addeventlistener() when calling removeeventlistener().
ExtendableEvent.waitUntil() - Web APIs
in service workers, waituntil() tells the
browser that work is ongoing until the promise settles, and it shouldn't terminate the service worker if it wants that work to complete.
ExtendableEvent - Web APIs
if waituntil() is called outside of the extendableevent handler, the
browser should throw an invalidstateerror; note also that multiple calls will stack up, and the resulting promises will be added to the list of extend lifetime promises.
FetchEvent() - Web APIs
typically, pressing the refresh button in a
browser is a reload, while clicking a link and pressing the back button is not.
FetchEvent.respondWith() - Web APIs
the respondwith() method of fetchevent prevents the
browser's default fetch handling, and allows you to provide a promise for a response yourself.
File.fileName - Web APIs
although it may still work in some
browsers, its use is discouraged since it could be removed at any time.
File.lastModified - Web APIs
[], 'file.bin', { lastmodified: new date(2017, 1, 1), }); console.log(filewithdate.lastmodified); //returns 1485903600000 const filewithoutdate = new file([], 'file.bin'); console.log(filewithoutdate.lastmodified); //returns current time reduced time precision to offer protection against timing attacks and fingerprinting, the precision of somefile.lastmodified might get rounded depending on
browser settings.
File.lastModifiedDate - Web APIs
"myfileinput"); // files is a filelist object (simliar to nodelist) var files = fileinput.files; for (var i = 0; i < files.length; i++) { alert(files[i].name + " has a last modified date of " + files[i].lastmodifieddate); } reduced time precision to offer protection against timing attacks and fingerprinting, the precision of somefile.lastmodifieddate.gettime() might get rounded depending on
browser settings.
File.type - Web APIs
ng the type of the file, for example "image/png" for png images example <input type="file" multiple onchange="showtype(this)"> function showtype(fileinput) { var files = fileinput.files; for (var i = 0; i < files.length; i++) { var name = files[i].name; var type = files[i].type; alert("filename: " + name + " , type: " + type); } } note: based on the current implementation,
browsers won't actually read the bytestream of a file to determine its media type.
FileError - Web APIs
don't run your app from file:// for security reasons,
browsers do not allow you to run your app from file://.
FormData.append() - Web APIs
note: if you specify a blob as the data to append to the formdata object, the filename that will be reported to the server in the "content-disposition" header used to vary from
browser to
browser.
FormData.set() - Web APIs
note: if you specify a blob as the data to append to the formdata object, the filename that will be reported to the server in the "content-disposition" header used to vary from
browser to
browser.
GainNode.gain - Web APIs
navigator.mediadevices.getusermedia ( // constraints - only audio needed for this app { audio: true }, // success callback function(stream) { source = audioctx.createmediastreamsource(stream); }, // error callback function(err) { console.log('the following gum error occured: ' + err); } ); } else { console.log('getusermedia not supported on your
browser!'); } source.connect(gainnode); gainnode.connect(audioctx.destination); ...
GainNode - Web APIs
navigator.mediadevices.getusermedia ( // constraints - only audio needed for this app { audio: true }, // success callback function(stream) { source = audioctx.createmediastreamsource(stream); }, // error callback function(err) { console.log('the following gum error occured: ' + err); } ); } else { console.log('getusermedia not supported on your
browser!'); } source.connect(gainnode); gainnode.connect(audioctx.destination); ...
Gamepad - Web APIs
gamepad.mapping read only a string indicating whether the
browser has remapped the controls on the device to a known layout.
GamepadEvent - Web APIs
working draft initial definition
browser compatibility desktopmobilechromeedgefirefoxinternet exploreroperasafariandroid webviewchrome for androidfirefox for androidopera for androidsafari on iossamsung internetgamepadeventchrome full support 35 full support 35 no support 21 — 34prefixed prefixed implemented with the ve...
Geolocation - Web APIs
be aware that each
browser has its own policies and methods for requesting this permission.
GlobalEventHandlers.onabort - Web APIs
while the standard for aborting a document load is defined, html issue #3525 suggests that
browsers should not currently fire the abort event on a window that would trigger onabort to be called.
GlobalEventHandlers.onplay - Web APIs
example <p>this example demonstrates how to assign an "onplay" event to a video element.</p> <video controls onplay="alertplay()"> <source src="mov_bbb.mp4" type="video/mp4"> <source src="mov_bbb.ogg" type="video/ogg"> your
browser does not support html5 video.
GlobalEventHandlers.onresize - Web APIs
examples window size logger <p>resize the
browser window to fire the <code>resize</code> event.</p> <p>window height: <span id="height"></span></p> <p>window width: <span id="width"></span></p> const heightoutput = document.queryselector('#height'); const widthoutput = document.queryselector('#width'); function resize() { heightoutput.textcontent = window.innerheight; widthoutput.textcontent = window.innerwidth; } window.onresize = resize; specificatio...
Audio() - Web APIs
if a url is specified, the
browser begins to asynchronously load the media resource before returning the new object.
HTMLDialogElement: close event - Web APIs
mple-dialog'); dialog.addeventlistener('close', (event) => { result.textcontent = 'dialog was closed'; }); const opendialog = document.queryselector('.open-dialog'); opendialog.addeventlistener('click', () => { if (typeof dialog.showmodal === 'function') { dialog.showmodal(); result.textcontent = ''; } else { result.textcontent = 'the dialog api is not supported by this
browser'; } }); const closebutton = document.queryselector('.close'); closebutton.addeventlistener('click', () => { dialog.close(); }); result specifications specification status html living standardthe definition of 'close' in that specification.
HTMLElement.dir - Web APIs
browsers might allow users to change the directionality of <input> and <textarea>s in order to assist with authoring content.
HTMLFormElement.name - Web APIs
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 'htmlformelement: name' in that specification.
HTMLHyperlinkElementUtils.origin - Web APIs
the htmlhyperlinkelementutils.origin read-only property is a usvstring containing the unicode serialization of the origin of the represented url; that is: for url using the http or https, the scheme followed by '://', followed by the domain, followed by ':', followed by the port (the default port, 80 and 443 respectively, if explicitely specified); for url using file: scheme, the value is
browser dependant; for url using the blob: scheme, the origin of the url following blob:.
HTMLInputElement.select() - Web APIs
in
browsers where it is not supported, it is possible to replace it with a call to htmlinputelement.setselectionrange() with parameters 0 and the input's value length: <input onclick="this.select();" value="sample text" /> <!-- equivalent to --> <input onclick="this.setselectionrange(0, this.value.length);" value="sample text" /> specifications specification status comment ht...
HTMLMediaElement.buffered - Web APIs
the htmlmediaelement.buffered read-only property returns a new timeranges object that indicates the ranges of the media source that the
browser has buffered (if any) at the moment the buffered property is accessed.
IDBDatabase: close event - Web APIs
this could happen, for example, if the underlying storage is removed or if the user clears the database in the
browser's history preferences.
IDBOpenDBRequest - Web APIs
ult; // run the displaydata() function to populate the task // listwith all the to-do list data already in the idb displaydata(); }; // this event handles the event whereby a new version of // the database needs to be created either one has not // been created before, or a new version number has been // submitted via the window.indexeddb.open line above // it is only implemented in recent
browsers dbopenrequest.onupgradeneeded = function(event) { var db = this.result; db.onerror = function(event) { note.innerhtml += '<li>error loading database.</li>'; }; // create an objectstore for this database var objectstore = db.createobjectstore("todolist", { keypath: "tasktitle" }); // define what data items the objectstore will contain objectstore.createindex("hours", "ho...
IdleDeadline.didTimeout - Web APIs
your callback will typically check the value of didtimeout if it needs to perform an action even if the
browser is too busy to grant you the time; you should react by performing 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.
enabled - Web APIs
example the following code uses the startsoftwareupdate method to unconditionally trigger a download from http://royalairways/royalpkg.xpi as long as software installation is enabled on the
browser: if (installtrigger.enabled() ) { installtrigger.startsoftwareupdate ("http://royalair.com/rasoft.xpi"); } ...
IntersectionObserver.rootMargin - Web APIs
the
browser is permitted to alter the values if rootmargin isn't specified when the object was instantiated, it defaults to the string "0px 0px 0px 0px", meaning that the intersection will be computed between the root element's unmodified bounds rectangle and the target's bounds.
KeyboardEvent.code - Web APIs
if the input device isn't a physical keyboard, but is instead a virtual keyboard or accessibility device, the returned value will be set by the
browser to match as closely as possible to what would happen with a physical keyboard, to maximize compatibility between physical and virtual input devices.
KeyboardEvent.key - Web APIs
ventlistener('input', (e) => { logmessage(`key "${e.data}" input [event: input]`); }); textarea.addeventlistener('keyup', (e) => { logmessage(`key "${e.key}" released [event: keyup]`); }); btnclearconsole.addeventlistener('click', (e) => { let child = consolelog.firstchild; while (child) { consolelog.removechild(child); child = consolelog.firstchild; } }); result note: on
browsers that don't fully implement the inputevent interface which is used for the beforeinput and input events, you may get incorrect output on those lines of the log output.
KeyboardEvent.keyCode - Web APIs
unfortunately, some
browsers still don't have it, so you'll have to be careful to make sure you use one which is supported on all target
browsers.
Keyboard API - Web APIs
the keyboard api provides methods for working with a physical keyboard that is attached to a device running a
browser.
Location: origin - Web APIs
the origin read-only property of the location interface is a usvstring containing the unicode serialization of the origin of the represented url; that is: for url using the http or https, the scheme followed by '://', followed by the domain, followed by ':', followed by the port (the default port, 80 and 443 respectively, if explicitely specified); for url using file: scheme, the value is
browser dependant; for url using the blob: scheme, the origin of the url following blob:.
Location: search - Web APIs
modern
browsers provide urlsearchparams and url.searchparams to make it easy to parse out the parameters from the querystring.
Location - Web APIs
modern
browsers provide urlsearchparams and url.searchparams to make it easy to parse out the parameters from the querystring.
MediaCapabilitiesInfo - Web APIs
browsers will report a supported media configuration as smooth and powerefficient until stats on this device have been recorded.
MediaDevices.ondevicechange - Web APIs
it displays in the
browser window two lists: one of audio devices and one of video devices, with both the device's label (name) and whether it's an input or an output device.
MediaError.message - Web APIs
r 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 on the htmlaudioelement represent...
MediaPositionState.position - Web APIs
for example, a
browser might use this information along with the position property and the navigator.mediasession.playbackstate, as well as the session's metadata to provide an integrated common user interface showing the currently playing media as well as standard pause, play, forward, reverse, and other controls.
MediaQueryList.onchange - Web APIs
the event object is a mediaquerylistevent instance, which is recognised as a medialistquery instance in older
browsers, for backwards compatibility purposes.
MediaQueryList.removeListener() - Web APIs
this is basically an alias for eventtarget.removeeventlistener(), for backwards compatibility purposes — in older
browsers you could use removeeventlistener() instead.
MediaRecorder() - Web APIs
options optional a dictionary object that can contain the following properties: mimetype: a mime type specifying the format for the resulting media; you may simply specify the container format (the
browser will select its preferred codecs for audio and/or video), or you may use the codecs parameter and/or the profiles parameter to provide detailed information about which codecs to use and how to configure them.
MediaRecorder.pause() - Web APIs
when a mediarecorder object’s pause()method is called, the
browser queues a task that runs the below steps: if mediarecorder.state is "inactive", raise a dom invalidstate error and terminate these steps.
MediaRecorder.requestData() - Web APIs
when the requestdata() method is invoked, the
browser queues a task that runs the following steps: if mediarecorder.state is not "recording", raise a dom invalidstate error and terminate these steps.
MediaRecorder.resume() - Web APIs
when the resume() method is invoked, the
browser queues a task that runs the following steps: if mediarecorder.state is "inactive", raise a dom invalidstate error and terminate these steps.
MediaRecorder.start() - Web APIs
note: if the
browser is unable to start recording or continue recording, it will raise a domerror event, followed by a mediarecorder.dataavailable event containing the blob it has gathered, followed by the mediarecorder.stop event.
MediaSession.metadata - Web APIs
this metadata is provided by the
browser to the device for presentation in any standard media control user interface the device might offer.
MediaSession - Web APIs
a
browser on that device might deliver the metadata provided by calling mediasession to the device in order to be controllable using the global user interface.
MediaSource.endOfStream() - Web APIs
this can be used to indicate that a parsing error has occured while fetching media data; maybe the data is corrupt, or is encoded using a codec that the
browser doesn't know how to decode.
MediaStream.onaddtrack - Web APIs
this event is fired when the
browser adds a track to the stream (such as when a rtcpeerconnection is renegotiated or a stream being captured using htmlmediaelement.capturestream() gets a new set of tracks because the media element being captured loaded a new source.
MediaStream.onremovetrack - Web APIs
this event is fired when the
browser removes a track from the stream (such as when a rtcpeerconnection is renegotiated or a stream being captured using htmlmediaelement.capturestream() gets a new set of tracks because the media element being captured loaded a new source.
MediaStreamAudioSourceNode() - Web APIs
video: false }).then(function(stream) { var options = { mediastream : stream } var source = new mediastreamaudiosourcenode(audioctx, options); source.connect(audioctx.destination); }).catch(function(err) { console.log('the following gum error occured: ' + err); }); } else { console.log('new getusermedia not supported on your
browser!'); } specifications specification status comment web audio apithe definition of 'mediastreamaudiosourcenode()' in that specification.
MediaStreamTrack - Web APIs
mediastreamtrack.id read only returns a domstring containing a unique identifier (guid) for the track; it is generated by the
browser.
MediaStreamTrackAudioSourceNode() - Web APIs
se }).then(function(stream) { let options = { mediastreamtrack: stream.getaudiotracks()[0]; } let source = new mediastreamtrackaudiosourcenode(audioctx, options); source.connect(audioctx.destination); }).catch(function(err) { console.log('the following gum error occured: ' + err); }); } else { console.log('new getusermedia not supported on your
browser!'); } specifications specification status comment web audio apithe definition of 'mediastreamtrackaudiosourcenode()' in that specification.
MediaStreamTrackAudioSourceNode - Web APIs
er.connect(audioctx.destination); // get new mouse pointer coordinates when mouse is moved // then set new gain value range.oninput = function() { biquadfilter.gain.value = range.value; } }) .catch(function(err) { console.log('the following gum error occured: ' + err); }); } else { console.log('getusermedia not supported on your
browser!'); } // dump script to pre element pre.innerhtml = myscript.innerhtml; note: as a consequence of calling createmediastreamsource(), audio playback from the media stream will be re-routed into the processing graph of the audiocontext.
MediaStreamTrackAudioSourceOptions.mediaStreamTrack - Web APIs
se }).then(function(stream) { let options = { mediastreamtrack: stream.getaudiotracks()[0]; } let source = new mediastreamtrackaudiosourcenode(audioctx, options); source.connect(audioctx.destination); }).catch(function(err) { console.log('the following gum error occured: ' + err); }); } else { console.log('new getusermedia not supported on your
browser!'); } specifications specification status comment web audio apithe definition of 'mediastreamtrackaudiosourceoptions.mediastream' in that specification.
Recording a media element - Web APIs
so by setting the download link's download attribute to "recordedvideo.webm", we tell the
browser that clicking the button should download a file named "recordedvideo.webm" whose contents are the recorded video.
MediaTrackSupportedConstraints.logicalSurface - Web APIs
it adds the logicalsurface constraint (requesting that only logical display surfaces—those which may not be entirely visible onscreen—be included among the options available to the user) only if it is known to be supported by the
browser.
MediaTrackSupportedConstraints - Web APIs
the mediatracksupportedconstraints dictionary establishes the list of constrainable properties recognized by the user agent or
browser in its implementation of the mediastreamtrack object.
Media Capture and Streams API (Media Stream) - Web APIs
capabilities, constraints, and settingsthe twin concepts of constraints and capabilities let the
browser and web site or app exchange information about what constrainable properties the
browser's implementation supports and what values it supports for each one.
Microsoft API extensions - Web APIs
microsoft
browsers (internet explorer, and in a few cases, microsoft edge) support a number of special microsoft extensions to the otherwise standard dom apis.
MimeType - Web APIs
for example, a
browser's content decryption module may appear in the plugin list but support more file extensions than can be anticipated.
MouseEvent.button - Web APIs
syntax var buttonpressed = instanceofmouseevent.button return value a number representing a given button: 0: main button pressed, usually the left button or the un-initialized state 1: auxiliary button pressed, usually the wheel button or the middle button (if present) 2: secondary button pressed, usually the right button 3: fourth button, typically the
browser back button 4: fifth button, typically the
browser forward button as noted above, buttons may be configured differently to the standard "left to right" layout.
MouseEvent.buttons - Web APIs
0 : no button or un-initialized 1 : primary button (usually the left button) 2 : secondary button (usually the right button) 4 : auxiliary button (usually the mouse wheel button or middle button) 8 : 4th button (typically the "
browser back" button) 16 : 5th button (typically the "
browser forward" button) example this example logs the buttons property when you trigger a mousedown event.
msSaveBlob - Web APIs
notes when a site calls this method, the behavior is the same as when windows internet explorer downloads a file with the following in the header, where x-download-options removes the file open button from the
browser file download dialog: content-length: <blob.size> content-type: <blob.type> content-disposition: attachment;filename=<defaultname> x-download-options: noopen specifications not part of any specifications.
Navigator.requestMediaKeySystemAccess() - Web APIs
notsupportederror either the specified keysystem isn't supported by the platform or the
browser, or none of the configurations specified by supportedconfigurations can be satisfied (if, for example, none of the codecs specified in contenttype are available).
Navigator.serviceWorker - Web APIs
syntax var workercontainerinstance = navigator.serviceworker; value serviceworkercontainer examples this code checks if the
browser supports service workers.
NavigatorConcurrentHardware - Web APIs
the
browser may, however, choose to reduce the number in order to represent more accurately the number of workers that can run at once properties navigatorconcurrenthardware.hardwareconcurrency read only returns the number of logical processors which may be available to the user agent.
NavigatorLanguage.language - Web APIs
the navigatorlanguage.language read-only property returns a string representing the preferred language of the user, usually the language of the
browser ui.
NavigatorLanguage.languages - Web APIs
the accept-language http header in every http request from the user's
browser uses the same value for the navigator.languages property except for the extra qvalues (quality values) field (e.g.
NavigatorLanguage - Web APIs
navigatorlanguage.language read only returns a domstring representing the preferred language of the user, usually the language of the
browser ui.
NetworkInformation.downlink - Web APIs
note that chrome-based
browsers do not conform to the specification, and arbitrarily cap the reported downlink at a maximum of 10 mbps as an anti-fingerprinting measure.
Node.nextSibling - Web APIs
syntax nextnode = node.nextsibling notes gecko-based
browsers insert text nodes into a document to represent whitespace in the source markup.
Node.previousSibling - Web APIs
syntax previousnode = node.previoussibling; example <img id="b0"> <img id="b1"> <img id="b2"> console.log(document.getelementbyid("b1").previoussibling); // <img id="b0"> console.log(document.getelementbyid("b2").previoussibling.id); // "b1" notes gecko-based
browsers insert text nodes into a document to represent whitespace in the source markup.
Node.rootNode - Web APIs
example running the following line in supporting
browsers should return a reference to the html/document node: console.log(document.body.rootnode); notes gecko-based
browsers insert text nodes into a document to represent whitespace in the source markup.
Notification.Notification() - Web APIs
it defaults to auto, which just adopts the
browser's language setting behavior, but you can override that behaviour by setting values of ltr and rtl (although most
browsers seem to ignore these settings.) lang: the notification's language, as specified using a domstring representing a bcp 47 language tag.
Notification.onclick - Web APIs
examples in the following example, we use an onclick handler to open a webpage in a new tab (specified by the inclusion of the '_blank' parameter) once a notification is clicked: notification.onclick = function(event) { event.preventdefault(); // prevent the
browser from focusing the notification's tab window.open('http://www.mozilla.org', '_blank'); } specifications specification status comment notifications apithe definition of 'onclick' in that specification.
Notification.permission - Web APIs
function notifyme() { // let's check if the
browser supports notifications if (!("notification" in window)) { console.log("this
browser does not support desktop notification"); } // let's check whether notification permissions have alredy been granted else if (notification.permission === "granted") { // if it's okay let's create a notification var notification = new notification("hi there!"); } // otherwise, we need to as...
Notifications API - Web APIs
this should be done in response to a user gesture, such as clicking a button, for example: btn.addeventlistener('click', function() { let promise = notification.requestpermission(); // wait for permission }) this is not only best practice — you should not be spamming users with notifications they didn't agree to — but going forward
browsers will explicitly disallow notifications not triggered in response to a user gesture.
OfflineAudioCompletionEvent - Web APIs
note: this interface is marked as deprecated; it is still supported for legacy reasons, but it will soon be superseded when the promise version of offlineaudiocontext.startrendering is supported in
browsers, which will no longer need it.
OscillatorNode.setPeriodicWave() - Web APIs
here, with createperiodicwave(), you specify the frequencies, and the
browser performs a an inverse fourier transform to get a time domain buffer for the frequency of the oscillator.
PageTransitionEvent - Web APIs
example html <!doctype html> <html> <body> </body> </html> javascript window.addeventlistener('pageshow', myfunction); function myfunction(event) { if (event.persisted) { alert("the page was cached by the
browser"); } else { alert("the page was not cached by the
browser"); } } specifications specification status comment html living standardthe definition of 'pagetransitionevent' in that specification.
PannerNode.distanceModel - Web APIs
note how we have used some feature detection to either give the
browser the newer property values (like audiolistener.forwardx) for setting position, etc.
PannerNode.maxDistance - Web APIs
note how we have used some feature detection to either give the
browser the newer property values (like audiolistener.forwardx) for setting position, etc.
PannerNode.panningModel - Web APIs
note how we have used some feature detection to either give the
browser the newer property values (like audiolistener.forwardx) for setting position, etc.
PannerNode.setOrientation() - Web APIs
note how we have used some feature detection to either give the
browser the newer property values (like audiolistener.forwardx) for setting position, etc.
PannerNode.setPosition() - Web APIs
note how we have used some feature detection to either give the
browser the newer property values (like audiolistener.forwardx) for setting position, etc.
PannerNode.setVelocity() - Web APIs
note how we have used some feature detection to either give the
browser the newer property values (like audiolistener.forwardx) for setting position, etc.
PannerNode - Web APIs
note how we have used some feature detection to either give the
browser the newer property values (like audiolistener.forwardx) for setting position, etc.
PaymentRequest: shippingaddresschange event - Web APIs
bubbles no cancelable no interface paymentrequestupdateevent event handler property onshippingaddresschange usage notes depending on the
browser, the shipping address information may be redacted for privacy reasons.
PaymentRequest - Web APIs
additionally, in some
browsers, the parts of the address will be redacted for privacy until the user indicates they are ready to complete the transaction (i.e., they hit "pay").
PaymentResponse.retry() - Web APIs
.payer) { // "payerdetailchange" fired at response object const promise = fixfield(response, "payerdetailchange", payervalidator); promisestofixthings.push(promise); } await promise.all([response.retry(errors), ...promisestofixthings]); await recursivevalidate(request, response); } function fixfield(requestorresponse, event, validator) { return new promise(resolve => { //
browser keeps calling this until promise resolves.
PerformanceEntry - Web APIs
example the following example checks all performanceentry properties to see if the
browser supports them and if so, write their values to the console.
PerformanceMark - Web APIs
entries of this type are created by calling performance.mark() to add a named domhighrestimestamp (the mark) to the
browser's performance timeline.
PerformanceMeasure - Web APIs
entries of this type are created by calling performance.measure() to add a named domhighrestimestamp (the measure) between two marks to the
browser's performance timeline.
PerformanceObserver - Web APIs
the performanceobserver interface is used to observe performance measurement events and be notified of new performance entries as they are recorded in the
browser's performance timeline.
PerformanceTiming.fetchStart - Web APIs
the legacy performancetiming.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.
PerformanceTiming.requestStart - Web APIs
the legacy performancetiming.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.
PerformanceTiming.responseEnd - Web APIs
the legacy performancetiming.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.
PerformanceTiming.responseStart - Web APIs
the legacy performancetiming.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.
PeriodicWave - Web APIs
here, with createperiodicwave(), you specify the frequencies, and the
browser performs an inverse fourier transform to get a time domain buffer for the frequency of the oscillator.
RTCDTMFSender.toneBuffer - Web APIs
example tbd specifications specification status comment webrtc 1.0: real-time communication between
browsersthe definition of 'rtcdtmfsender.tonebuffer' in that specification.
RTCDTMFSender: tonechange event - Web APIs
").innertext = tone; }, false); you can also just set the ontonechange event handler property directly: dtmfsender.ontonechange = function( ev ) { let tone = ev.tone; if (tone === "") { tone = "<none>" } document.getelementbyid("playingtone").innertext = tone; }; specifications specification status comment webrtc 1.0: real-time communication between
browsersthe definition of 'tonechange' in that specification.
RTCDTMFSender - Web APIs
specifications specification status comment webrtc 1.0: real-time communication between
browsersthe definition of 'rtcdtmfsender' in that specification.
RTCDTMFToneChangeEvent.tone - Web APIs
dtmfsender.ontonechange = function( ev ) { let tone = ev.tone; if (tone === "") { tone = "<none>" } document.getelementbyid("playingtone").innertext = tone; }; specifications specification status comment webrtc 1.0: real-time communication between
browsersthe definition of 'rtcdtmftonechangeevent.tone' in that specification.
RTCDTMFToneChangeEvent - Web APIs
dtmfsender.addeventlistener("change", function(event) { if (event.tone !== "") { dialstringbox.innertext += event.tone; } else { senddtmfbutton.disabled = false; } }, false); specifications specification status comment webrtc 1.0: real-time communication between
browsersthe definition of 'rtcdtmftonechangeevent' in that specification.
RTCDataChannel.binaryType - Web APIs
var dc = peerconnection.createdatachannel("binary"); dc.binarytype = "arraybuffer"; dc.onmessage = function(event) { let bytearray = new uint8array(event.data); let hexstring = ""; bytearray.foreach(function(byte) { hexstring += byte.tostring(16) + " "; }); }; specifications specification status comment webrtc 1.0: real-time communication between
browsersthe definition of 'rtcdatachannel.binarytype' in that specification.
RTCDataChannel.bufferedAmount - Web APIs
*/ function showbufferedamount(channel) { let el = document.getelementbyid("buffersize"); el.innerhtml = channel.bufferedamount + " bytes"; } specifications specification status comment webrtc 1.0: real-time communication between
browsersthe definition of 'rtcdatachannel.bufferedamount' in that specification.
RTCDataChannel.bufferedAmountLowThreshold - Web APIs
var dc = peerconnection.createdatachannel("file transfer"); dc.bufferedamountlowthreshold = 65535; dc.onbufferedamountlow = function() { /* use send() to queue more data to be sent */ }; specifications specification status comment webrtc 1.0: real-time communication between
browsersthe definition of 'rtcdatachannel.bufferedamountlowthreshold' in that specification.
RTCDataChannel: bufferedamountlow event - Web APIs
you can also set up a listener for bufferedamountlow using its event handler property, onbufferedamountlow: pc.onbufferedamountlow = ev => { if (source.position <= source.length) { dc.send(source.readfile(65536)); } } specifications specification status comment webrtc 1.0: real-time communication between
browsersthe definition of 'bufferedamountlow' in that specification.
RTCDataChannel.close() - Web APIs
specifications specification status comment webrtc 1.0: real-time communication between
browsersthe definition of 'rtcdatachannel.close()' in that specification.
RTCDataChannel: close event - Web APIs
you can also use the onclose event handler property to set a handler for close events: dc.onclose = ev => { messageinputbox.disabled = true; sendbutton.disabled = true; connectbutton.disabled = false; disconnectbutton.disabled = true; } specifications specification status comment webrtc 1.0: real-time communication between
browsersthe definition of 'close' in that specification.
RTCDataChannel.label - Web APIs
*/ document.getelementbyid("channel-name").innerhtml = "<span class='channelname'>" + dc.label + "</span>"; specifications specification status comment webrtc 1.0: real-time communication between
browsersthe definition of 'rtcdatachannel.label' in that specification.
RTCDataChannel: message event - Web APIs
nnel object's onmessage event handler property to set the event handler: dc.onmessage = ev => { let newparagraph = document.createelement("p"); let textnode = document.createtextnode(event.data); newparagraph.appendchild(textnode); document.body.appendchild(newparagraph); } specifications specification status comment webrtc 1.0: real-time communication between
browsersthe definition of 'the <code>message</code> event' in that specification.
RTCDataChannel.negotiated - Web APIs
if (datachannel.negotiated) { shutdownremotechannel(datachannel.id); } specifications specification status comment webrtc 1.0: real-time communication between
browsersthe definition of 'rtcdatachannel.negotiated' in that specification.
RTCDataChannel.ordered - Web APIs
example var pc = new rtcpeerconnection(); var dc = pc.createdatachannel("my channel"); if (!dc.ordered) { // handle unordered messaging } specifications specification status comment webrtc 1.0: real-time communication between
browsersthe definition of 'rtcdatachannel.ordered' in that specification.
RTCDataChannel.protocol - Web APIs
.createdatachannel("my channel", { protocol: "json" }); function handlechannelmessage(datachannel, msg) { switch(datachannel.protocol) { case "json": /* process json data */ break; case "raw": /* process raw binary data */ break; } } specifications specification status comment webrtc 1.0: real-time communication between
browsersthe definition of 'rtcdatachannel.protocol' in that specification.
RTCDataChannelEvent() - Web APIs
var event = new rtcdatachannelevent("datachannel", {"channel": dc}); specifications specification status comment webrtc 1.0: real-time communication between
browsersthe definition of 'rtcdatachannelevent' in that specification.
RTCDataChannelEvent.channel - Web APIs
pc.ondatachannel = function(event) { inbounddatachannel = event.channel; inbounddatachannel.onmessage = handleincomingmessage; inbounddatachannel.onopen = handlechannelopen; inbounddatachannel.onclose = handlechannelclose; } specifications specification status comment webrtc 1.0: real-time communication between
browsersthe definition of 'rtcdatachannelevent.channel' in that specification.
RTCDataChannelEvent - Web APIs
specifications specification status comment webrtc 1.0: real-time communication between
browsersthe definition of 'rtcdatachannelevent' in that specification.
RTCDtlsTransport.iceTransport - Web APIs
examples tbd specifications specification status comment webrtc 1.0: real-time communication between
browsersthe definition of 'rtcdtlstransport.icetransport' in that specification.
RTCDtlsTransport.state - Web APIs
specifications specification status comment webrtc 1.0: real-time communication between
browsersthe definition of 'rtcdtlstransport.state' in that specification.
RTCError - Web APIs
you can also use the rtcdatachannel object's onerror event handler property, like this: datachannel.onerror = (event) => { let error = event.error; /* and so forth */ }; specifications specification status comment webrtc 1.0: real-time communication between
browsersthe definition of 'rtcerror' in that specification.
RTCErrorEvent.error - Web APIs
you can also use the rtcdatachannel object's onerror event handler property, like this: datachannel.onerror = (event) => { let error = event.error; /* and so forth */ }; specifications specification status comment webrtc 1.0: real-time communication between
browsersthe definition of 'rtcerrorevent.error' in that specification.
RTCErrorEvent - Web APIs
specifications specification status comment webrtc 1.0: real-time communication between
browsersthe definition of 'rtcerrorevent' in that specification.
RTCIceCandidate.address - Web APIs
if (ipbanlist.includes(candidate.address)) { rejectcandidate(candidate); } else { acceptcandidate(candidate); } specifications specification status comment webrtc 1.0: real-time communication between
browsersthe definition of 'rtcicecandidate: address' in that specification.
RTCIceCandidate.candidate - Web APIs
this example could be simplified somewhat; you may more often see the code look something like this, taking advantage of more advanced ecmascript 2016 features: let handlenewicecandidate = candidatesdp => mypeerconnection.addicecandidate(new rtcicecandidate(candidatesdp)); specifications specification status comment webrtc 1.0: real-time communication between
browsersthe definition of 'rtcicecandidate.candidate' in that specification.
RTCIceCandidate.component - Web APIs
if (candidate.component == "rtp") { handlertpcandidate(candidate); } else if (candidate.component == "rtcp") { handlertcpcandidate(candidate); } else { handleunknowncandidate(candidate); } specifications specification status comment webrtc 1.0: real-time communication between
browsersthe definition of 'rtcicecandidate.component' in that specification.
RTCIceCandidate.foundation - Web APIs
if (candidate1.foundation == candidate2.foundation) { /* the two candidates are the same, even if they're on different transports */ } specifications specification status comment webrtc 1.0: real-time communication between
browsersthe definition of 'rtcicecandidate.foundation' in that specification.
RTCIceCandidate.port - Web APIs
var candidateloc = { address: candidate.ip, port: candidate.port } specifications specification status comment webrtc 1.0: real-time communication between
browsersthe definition of 'rtcicecandidate.port' in that specification.
RTCIceCandidate.priority - Web APIs
r bestcandidate = { candidate: "", sdpmid: null, sdpmlineindex: null, priority: 0 }; function handlecandidate(candidatestring) { var candidate = new rtcicecandidate(candidatestring); if (candidate.priority > bestcandidate.priority) { bestcandidate = candidate; } } specifications specification status comment webrtc 1.0: real-time communication between
browsersthe definition of 'rtcicecandidate.priority' in that specification.
RTCIceCandidate.protocol - Web APIs
if (candidate.protocol == "tcp") { if (candidate.tcptype == "so") { adjustforsimultaneousopen(candidate); } specifications specification status comment webrtc 1.0: real-time communication between
browsersthe definition of 'rtcicecandidate.protocol' in that specification.
RTCIceCandidate.relatedAddress - Web APIs
idate's base address is " + candidate.relatedaddress + "; reachable at " + candidate.ip); break; case "relay": console.log("relay candidate's address assigned by the turn server is " + candidate.relatedaddress + "; reachable at " + candidate.ip); break; } specifications specification status comment webrtc 1.0: real-time communication between
browsersthe definition of 'rtcicecandidate.relatedaddress' in that specification.
RTCIceCandidate.relatedPort - Web APIs
latedaddress; var relport = candidate.relatedport; if (relip && relport) { console.log("candidate type '" + type + "' -- contact address: " + ip + " " + port + ", related address: " + relip + " " + relport); } else { console.log("host candidate address is " + ip + " " + port); } specifications specification status comment webrtc 1.0: real-time communication between
browsersthe definition of 'rtcicecandidate.relatedport' in that specification.
RTCIceCandidate.sdpMLineIndex - Web APIs
specifications specification status comment webrtc 1.0: real-time communication between
browsersthe definition of 'rtcicecandidate.sdpmlineindex' in that specification.
RTCIceCandidate.sdpMid - Web APIs
specifications specification status comment webrtc 1.0: real-time communication between
browsersthe definition of 'rtcicecandidate.sdpmid' in that specification.
RTCIceCandidate.tcpType - Web APIs
if (candidate.protocol == "tcp" && candidate.tcptype == "so") { adjustforsimultaneousopen(candidate); } specifications specification status comment webrtc 1.0: real-time communication between
browsersthe definition of 'rtcicecandidate.tcptype' in that specification.
RTCIceCandidate. toJSON() - Web APIs
var jsonstring = candidate.tojson().stringify(); specifications specification status comment webrtc 1.0: real-time communication between
browsersthe definition of 'rtcicecandidate.tojson()' in that specification.
RTCIceCandidate.type - Web APIs
if (candidate.type == "host") { showhostcontrols(); } else { hidehostcontrols(); } specifications specification status comment webrtc 1.0: real-time communication between
browsersthe definition of 'rtcicecandidate.type' in that specification.
RTCIceCandidate - Web APIs
specifications specification status comment webrtc 1.0: real-time communication between
browsersthe definition of 'rtcicecandidate' in that specification.
RTCIceCandidateInit.candidate - Web APIs
that usage would change the above sample to look like this: function goticecandidatemessage(msg) { var icecandidate = new rtcicecandidate(msg.candidate); pc.addicecandidate(icecandidate).catch({ /* handle error */ }); } specifications specification status comment webrtc 1.0: real-time communication between
browsersthe definition of 'rtcicecandidateinit.candidate' in that specification.
RTCIceCandidateInit.sdpMid - Web APIs
specifications specification status comment webrtc 1.0: real-time communication between
browsersthe definition of 'rtcicecandidateinit.sdpmid' in that specification.
RTCIceCandidateInit - Web APIs
specifications specification status comment webrtc 1.0: real-time communication between
browsersthe definition of 'rtcicecandidateinit' in that specification.
RTCIceCandidatePair.local - Web APIs
specifications specification status comment webrtc 1.0: real-time communication between
browsersthe definition of 'rtcicecandidatepair.local' in that specification.
RTCIceCandidatePair.remote - Web APIs
specifications specification status comment webrtc 1.0: real-time communication between
browsersthe definition of 'rtcicecandidatepair.remote' in that specification.
RTCIceCandidatePair - Web APIs
telementbyid("remote-protocol"); icetransport.onselectedcandidatepairchange = function(event) { var pair = icetransport.getselectedcandidatepair(); localprotocol.innertext = pair.local.protocol.touppercase(); remoteprotocol.innertext = pair.remote.protocol.touppercase(); } specifications specification status comment webrtc 1.0: real-time communication between
browsersthe definition of 'rtcicecandidatepair' in that specification.
RTCIceCandidateType - Web APIs
specifications specification status comment webrtc 1.0: real-time communication between
browsersthe definition of 'rtcicecandidatetype' in that specification.
RTCIceComponent - Web APIs
specifications specification status comment webrtc 1.0: real-time communication between
browsersthe definition of 'rtcicecomponent' in that specification.
RTCIceCredentialType - Web APIs
specifications specification status comment webrtc 1.0: real-time communication between
browsersthe definition of 'rtcicecredentialtype' in that specification.
RTCIceGathererState - Web APIs
specifications specification status comment webrtc 1.0: real-time communication between
browsersthe definition of 'rtcicegathererstate' in that specification.
RTCIceParameters.password - Web APIs
syntax password = rtciceparameters.password; value a domstring containing the password that corresponds to the transport's usernamefragment string specifications specification status comment webrtc 1.0: real-time communication between
browsersthe definition of 'rtciceparameters.password' in that specification.
RTCIceParameters - Web APIs
specifications specification status comment webrtc 1.0: real-time communication between
browsersthe definition of 'rtciceparameters' in that specification.
RTCIceProtocol - Web APIs
specifications specification status comment webrtc 1.0: real-time communication between
browsersthe definition of 'rtciceprotocol' in that specification.
RTCIceRole - Web APIs
specifications specification status comment webrtc 1.0: real-time communication between
browsersthe definition of 'rtcicerole' in that specification.
RTCIceServer.credential - Web APIs
mypeerconnection = new rtcpeerconnection({ iceservers: [ { urls: "turn:turnserver.example.org", // a turn server username: "webrtc", credential: "turnpassword" } ] }); specifications specification status comment webrtc 1.0: real-time communication between
browsersthe definition of 'rtciceserver.credential' in that specification.
RTCIceServer.credentialType - Web APIs
mypeerconnection = new rtcpeerconnection({ iceservers: [ { urls: "turn:turnserver.example.org", // a turn server username: "webrtc", credential: "turnpassword", credentialtype: "password" } ] }); specifications specification status comment webrtc 1.0: real-time communication between
browsersthe definition of 'rtciceserver.credential' in that specification.
RTCIceServers.urls - Web APIs
specifications specification status comment webrtc 1.0: real-time communication between
browsersthe definition of 'rtciceserver.urls' in that specification.
RTCIceServer.username - Web APIs
mypeerconnection = new rtcpeerconnection({ iceservers: [ { urls: "turn:turnserver.example.org", // a turn server username: "webrtc", credential: "turnpassword" } ] }); specifications specification status comment webrtc 1.0: real-time communication between
browsersthe definition of 'rtciceserver.username' in that specification.
RTCIceTcpCandidateType - Web APIs
specifications specification status comment webrtc 1.0: real-time communication between
browsersthe definition of 'rtcicetcpcandidatetype' in that specification.
RTCIceTransport.component - Web APIs
specifications specification status comment webrtc 1.0: real-time communication between
browsersthe definition of 'rtcicetransport.component' in that specification.
RTCIceTransport.gatheringState - Web APIs
specifications specification status comment webrtc 1.0: real-time communication between
browsersthe definition of 'rtcicetransport.gatheringstate' in that specification.
RTCIceTransport: gatheringstatechange event - Web APIs
h(sender => { sender.transport.icetransport.ongatheringstatechange = ev => { let transport = ev.target; if (transport.gatheringstate === "complete") { /* this transport has finished gathering candidates, but others may still be working on it */ } }; }); specifications specification status comment webrtc 1.0: real-time communication between
browsersthe definition of 'gatheringstatechange' in that specification.
RTCIceTransport.getLocalCandidates() - Web APIs
var localcandidates = pc.getsenders()[0].transport.transport.getlocalcandidates(); localcandidates.foreach(function(candidate, index)) { console.log("candidate " + index + ": " + candidate.candidate); }); specifications specification status comment webrtc 1.0: real-time communication between
browsersthe definition of 'rtcicecandidate.getlocalcandidates()' in that specification.
RTCIceTransport.getRemoteCandidates() - Web APIs
var remotecandidates = pc.getsenders()[0].transport.transport.getremotecandidates(); remotecandidates.foreach(function(candidate, index)) { console.log("candidate " + index + ": " + candidate.candidate); }); specifications specification status comment webrtc 1.0: real-time communication between
browsersthe definition of 'rtcicecandidate.getremotecandidates()' in that specification.
RTCIceTransport.getSelectedCandidatePair() - Web APIs
telementbyid("remote-protocol"); icetransport.onselectedcandidatepairchange = function(event) { var pair = icetransport.getselectedcandidatepair(); localprotocol.innertext = pair.local.protocol.touppercase(); remoteprotocol.innertext = pair.remote.protocol.touppercase(); } specifications specification status comment webrtc 1.0: real-time communication between
browsersthe definition of 'rtcicetransport.getselectedcandidatepair()' in that specification.
RTCIceTransport.ongatheringstatechange - Web APIs
var icetransport = pc.getsenders()[0].transport.transport; icetransport.ongatheringstatechange = function(event) { if (icetransport.gatheringstate == "complete") { allcandidatesreceived(pc); } } specifications specification status comment webrtc 1.0: real-time communication between
browsersthe definition of 'rtcicetransport.ongatheringstatechange' in that specification.
RTCIceTransport.onselectedcandidatepairchange - Web APIs
telementbyid("remote-protocol"); icetransport.onselectedcandidatepairchange = function(event) { var pair = icetransport.getselectedcandidatepair(); localprotocol.innertext = pair.local.protocol.touppercase(); remoteprotocol.innertext = pair.remote.protocol.touppercase(); } specifications specification status comment webrtc 1.0: real-time communication between
browsersthe definition of 'rtcicetransport.onselectedcandidatepairchange' in that specification.
RTCIceTransport.onstatechange - Web APIs
var icetransport = pc.getsenders()[0].transport.icetransport; icetransport.onstatechange = function(event) { if (icetransport.state == "failed") { handlefailure(pc); } } specifications specification status comment webrtc 1.0: real-time communication between
browsersthe definition of 'rtcicetransport.onstatechange' in that specification.
RTCIceTransport.role - Web APIs
specifications specification status comment webrtc 1.0: real-time communication between
browsersthe definition of 'rtcicetransport.role' in that specification.
RTCIceTransport: selectedcandidatepairchange event - Web APIs
document.getelementbyid("remote-protocol"); icetransport.onselectedcandidatepairchange = ev => { let pair = icetransport.getselectedcandidatepair(); localprotoelem.innertext = pair.local.protocol.touppercase(); remoteprotoelem.innertext = pair.remote.protocol.touppercase(); } specifications specification status comment webrtc 1.0: real-time communication between
browsersthe definition of 'selectedcandidatepairchange' in that specification.
RTCIceTransport.state - Web APIs
specifications specification status comment webrtc 1.0: real-time communication between
browsersthe definition of 'rtcicetransportstate' in that specification.
RTCIceTransport: statechange event - Web APIs
failure(pc); } }, false); the same code, using the onstatechange event handler property, looks like this: let icetransport = pc.getsenders()[0].transport.icetransport; icetransport.onstatechange = ev => { if (icetransport.state === "failed") { handlefailure(pc); } }; specifications specification status comment webrtc 1.0: real-time communication between
browsersthe definition of 'statechange' in that specification.
RTCIceTransport - Web APIs
examples tbd specifications specification status comment webrtc 1.0: real-time communication between
browsersthe definition of 'rtcicetransport' in that specification.
RTCIceTransportState - Web APIs
specifications specification status comment webrtc 1.0: real-time communication between
browsersthe definition of 'rtcicerole' in that specification.
RTCIdentityAssertion - Web APIs
specifications specification status comment webrtc 1.0: real-time communication between
browsers candidate recommendation initial definition.
RTCInboundRtpStreamStats - Web APIs
examples specifications specification status comment webrtc 1.0: real-time communication between
browsersthe definition of 'rtcinboundrtpstreamstats' in that specification.
RTCOfferAnswerOptions - Web APIs
the default value is true, enabling this functionality specifications specification status comment webrtc 1.0: real-time communication between
browsersthe definition of 'rtcofferansweroptions' in that specification.
RTCOfferOptions.iceRestart - Web APIs
specifications specification status comment webrtc 1.0: real-time communication between
browsersthe definition of 'rtcofferoptions.icerestart' in that specification.
RTCOfferOptions - Web APIs
specifications specification status comment webrtc 1.0: real-time communication between
browsersthe definition of 'rtcofferoptions' in that specification.
RTCOutboundRtpStreamStats - Web APIs
examples specifications specification status comment webrtc 1.0: real-time communication between
browsersthe definition of 'rtcoutboundrtpstreamstats' in that specification.
RTCPeerConnection() - Web APIs
specifications specification status comment webrtc 1.0: real-time communication between
browsersthe definition of 'rtcpeerconnection()' in that specification.
RTCPeerConnection.addTrack() - Web APIs
specifications specification status comment webrtc 1.0: real-time communication between
browsersthe definition of 'rtcpeerconnection.addtrack()' in that specification.
RTCPeerConnection.connectionState - Web APIs
*/ var connectionstate = pc.connectionstate; specifications specification status comment webrtc 1.0: real-time communication between
browsersthe definition of 'rtcpeerconnection.connectionstate' in that specification.
RTCPeerConnection.currentLocalDescription - Web APIs
var pc = new rtcpeerconnection(); … var sd = pc.currentlocaldescription; if (sd) { alert("local session: type='" + sd.type + "'; sdp description='" + sd.sdp + "'"); } else { alert("no local session yet."); } specifications specification status comment webrtc 1.0: real-time communication between
browsersthe definition of 'rtcpeerconnection.currentlocaldescription' in that specification.
RTCPeerConnection.currentRemoteDescription - Web APIs
var pc = new rtcpeerconnection(); … var sd = pc.currentremotedescription; if (sd) { alert("local session: type='" + sd.type + "'; sdp description='" + sd.sdp + "'"); } else { alert("no local session yet."); } specifications specification status comment webrtc 1.0: real-time communication between
browsersthe definition of 'rtcpeerconnection.currentremotedescription' in that specification.
RTCPeerConnection: datachannel event - Web APIs
instead use the rtcpeerconnection interface's ondatachannel event handler property, like this: pc.ondatachannel = ev => { receivechannel = ev.channel; receivechannel.onmessage = myhandlemessage; receivechannel.onopen = myhandleopen; receivechannel.onclose = myhandleclose; } specifications specification status comment webrtc 1.0: real-time communication between
browsersthe definition of 'datachannel' in that specification.
RTCPeerConnection.generateCertificate() - Web APIs
example rtcpeerconnection.generatecertificate({ name: 'rsassa-pkcs1-v1_5', hash: 'sha-256', moduluslength: 2048, publicexponent: new uint8array([1, 0, 1]) }).then(function(cert) { var pc = new rtcpeerconnection({certificates: [cert]}); }); specifications specification status comment webrtc 1.0: real-time communication between
browsersthe definition of 'generatecertificate()' in that specification.
RTCPeerConnection.getReceivers() - Web APIs
example tbd specifications specification status comment webrtc 1.0: real-time communication between
browsersthe definition of 'rtcpeerconnection.getreceivers()' in that specification.
RTCPeerConnection.getSenders() - Web APIs
function setmuting(pc, muting) { let senderlist = pc.getsenders(); senderlist.foreach(sender) { sender.track.enabled = !muting; } } specifications specification status comment webrtc 1.0: real-time communication between
browsersthe definition of 'rtcpeerconnection.getsenders()' in that specification.
RTCPeerConnection.getTransceivers() - Web APIs
pc.gettransceivers().foreach(transceiver => { transceiver.stop(); }); specifications specification status comment webrtc 1.0: real-time communication between
browsersthe definition of 'rtcpeerconnection.gettransceivers()' in that specification.
RTCPeerConnection.iceConnectionState - Web APIs
example var pc = new rtcpeerconnection(); var state = pc.iceconnectionstate; specifications specification status comment webrtc 1.0: real-time communication between
browsersthe definition of 'rtcpeerconnection.iceconnectionstate' in that specification.
RTCPeerConnection: iceconnectionstatechange event - Web APIs
ryselector("#call-state"); stateelem.classname = `${pc.iceconnectionstate}-state`; }, false); this can also be written as: pc.oniceconnectionstatechange = ev => { let stateelem = document.queryselector("#call-state"); stateelem.classname = `${pc.iceconnectionstate}-state`; } specifications specification status comment webrtc 1.0: real-time communication between
browsersthe definition of 'iceconnectionstatechange' in that specification.
RTCPeerConnection.iceGatheringState - Web APIs
example var pc = new rtcpeerconnection(); var state = pc.icegatheringstate; specifications specification status comment webrtc 1.0: real-time communication between
browsersthe definition of 'rtcpeerconnection.icegatheringstate' in that specification.
RTCPeerConnection: icegatheringstatechange event - Web APIs
atheringstatechange", ev => { let connection = ev.target; switch(connection.icegatheringstate) { case "gathering": /* collection of candidates has begun */ break; case "complete": /* collection of candidates is finished */ break; } }, false); specifications specification status comment webrtc 1.0: real-time communication between
browsersthe definition of 'icecandidatestatechange' in that specification.
RTCPeerConnection: icecandidate event - Web APIs
idate", candidate: event.candidate }); } }, false); you can also set the onicecandidate event handler property directly: pc.onicecandidate = ev => { if (ev.candidate) { sendmessage({ type: "new-ice-candidate", candidate: event.candidate }); } }; specifications specification status comment webrtc 1.0: real-time communication between
browsersthe definition of 'icecandidate' in that specification.
RTCPeerConnection: identityresult event - Web APIs
bubbles no cancelable no interface rtcidentityevent event handler property onidentityresult specifications specification status comment webrtc 1.0: real-time communication between
browsersthe definition of 'identityresult' in that specification.
RTCPeerConnection.localDescription - Web APIs
var pc = new rtcpeerconnection(); … var sd = pc.localdescription; if (sd) { alert("local session: type='" + sd.type + "'; sdp description='" + sd.sdp + "'"); } else { alert("no local session yet."); } specifications specification status comment webrtc 1.0: real-time communication between
browsersthe definition of 'rtcpeerconnection.localdescription' in that specification.
RTCPeerConnection.ondatachannel - Web APIs
example pc.ondatachannel = function(ev) { console.log('data channel is created!'); ev.channel.onopen = function() { console.log('data channel is open and ready to be used.'); }; }; specifications specification status comment webrtc 1.0: real-time communication between
browsersthe definition of 'rtcpeerconnection.ondatachannel' in that specification.
RTCPeerConnection.onicegatheringstatechange - Web APIs
= function() { let label = "unknown"; switch(pc.icegatheringstate) { case "new": case "complete": label = "idle"; break; case "gathering": label = "determining route"; break; } document.getelementbyid("icestatus").innerhtml = label; } specifications specification status comment webrtc 1.0: real-time communication between
browsersthe definition of 'rtcpeerconnection.onicegatheringstatechange' in that specification.
RTCPeerConnection.onsignalingstatechange - Web APIs
pc.onsignalingstatechange = function(event) { if (pc.signalingstate === "have-local-pranswer") { // setlocaldescription() has been called with an answer } }; specifications specification status comment webrtc 1.0: real-time communication between
browsersthe definition of 'rtcpeerconnection.onsignalingstatechange' in that specification.
RTCPeerConnection.ontrack - Web APIs
specifications specification status comment webrtc 1.0: real-time communication between
browsersthe definition of 'rtcpeerconnection.ontrack' in that specification.
RTCPeerConnection.pendingLocalDescription - Web APIs
} else { // no description change pending } specifications specification status comment webrtc 1.0: real-time communication between
browsersthe definition of 'rtcpeerconnection.pendinglocaldescription' in that specification.
RTCPeerConnection.pendingRemoteDescription - Web APIs
} else { // no description change pending } specifications specification status comment webrtc 1.0: real-time communication between
browsersthe definition of 'rtcpeerconnection.pendingremotedescription' in that specification.
RTCPeerConnection.remoteDescription - Web APIs
var pc = new rtcpeerconnection(); … var sd = pc.remotedescription; if (sd) { alert("remote session: type='" + sd.type + "'; sdp description='" + sd.sdp + "'"); } else { alert("no remote session yet."); } specifications specification status comment webrtc 1.0: real-time communication between
browsersthe definition of 'rtcpeerconnection.remotedescription' in that specification.
RTCPeerConnection.removeTrack() - Web APIs
eo: true}, function(stream) { pc = new rtcpeerconnection(); var track = stream.getvideotracks()[0]; sender = pc.addtrack(track, stream); }); document.getelementbyid("closebutton").addeventlistener("click", function(event) { pc.removetrack(sender); pc.close(); }, false); specifications specification status comment webrtc 1.0: real-time communication between
browsersthe definition of 'rtcpeerconnection.removetrack()' in that specification.
RTCPeerConnection.restartIce() - Web APIs
specifications specification status comment webrtc 1.0: real-time communication between
browsersthe definition of 'rtcpeerconnection.restartice()' in that specification.
RTCPeerConnection.sctp - Web APIs
tachannel("mydata"); channel.onopen = function(event) { channel.send('sending a message'); } channel.onmessage = function(event) { console.log(event.data); } // determine the largest message size that can be sent var sctp = pc.sctp; var maxmessagesize = sctp.maxmessagesize; specifications specification status comment webrtc 1.0: real-time communication between
browsersthe definition of 'rtcpeerconnection.sctp' in that specification.
RTCPeerConnection.signalingState - Web APIs
example var pc = new rtcpeerconnection(configuration); var state = pc.signalingstate; specifications specification status comment webrtc 1.0: real-time communication between
browsersthe definition of 'rtcpeerconnection.signalingstate' in that specification.
RTCPeerConnection: signalingstatechange event - Web APIs
: updatestatus("ice negotiation complete"); break; } }, false); using onsignalingstatechange, it looks like this: pc.onsignalingstatechange = ev => { switch(pc.signalingstate) { case "stable": updatestatus("ice negotiation complete"); break; } }; specifications specification status comment webrtc 1.0: real-time communication between
browsersthe definition of 'signalingstatechange' in that specification.
RTCPeerConnection: track event - Web APIs
pc.ontrack = e => { videoelement.srcobject = e.streams[0]; hangupbutton.disabled = false; return false; } specifications specification status comment webrtc 1.0: real-time communication between
browsersthe definition of 'track' in that specification.
RTCPeerConnectionIceErrorEvent.address - Web APIs
pc.addeventlistener("icecandidateerror", (event) => { let networkinfo = `[local interface: ${event.address}:${event.port}`; let iceserverinfo = `[ice server: ${event.url}`; showmessage(errortext, iceserverinfo, networkinfo); }); specifications specification status comment webrtc 1.0: real-time communication between
browsersthe definition of 'rtcpeerconnectioniceerrorevent.address' in that specification.
RTCPeerConnectionIceEvent() - Web APIs
specifications specification status comment webrtc 1.0: real-time communication between
browsersthe definition of 'rtcpeerconnectioniceevent()' in that specification.
RTCPeerConnectionIceEvent.candidate - Web APIs
example pc.onicecandidate = function( ev ) { alert("the ice candidate (transport address: '" + ev.candidate.candidate + "') has been added to this connection."); } specifications specification status comment webrtc 1.0: real-time communication between
browsersthe definition of 'rtcpeerconnectioniceevent.candidate' in that specification.
RTCPeerConnectionIceEvent - Web APIs
examples pc.onicecandidate = function( ev ) { alert("the ice candidate (transport address: '" + ev.candidate.candidate + "') has been added to this connection."); } specifications specification status comment webrtc 1.0: real-time communication between
browsersthe definition of 'rtcpeerconnectioniceevent' in that specification.
RTCRtcpParameters - Web APIs
function getrtpcname(rtpobject) { let parameters = rtpobject.getparameters(); return parameters.rtcp.cname; } specifications specification status comment webrtc 1.0: real-time communication between
browsersthe definition of 'rtcrtcpparameters' in that specification.
RTCRtpCodecCapability - Web APIs
examples tbd specifications specification status comment webrtc 1.0: real-time communication between
browsersthe definition of 'rtcrtpcodeccapability' in that specification.
RTCRtpContributingSource - Web APIs
timestamp optional a domhighrestimestamp indicating the most recent time at which a frame originating from this source was delivered to the receiver's mediastreamtrack specifications specification status comment webrtc 1.0: real-time communication between
browsersthe definition of 'rtcrtpcontributingsource' in that specification.
RTCRtpEncodingParameters - Web APIs
specifications specification status comment webrtc 1.0: real-time communication between
browsersthe definition of 'rtcrtpencodingparameters' in that specification.
RTCRtpParameters - Web APIs
function getrtpcname(rtpobject) { let parameters = rtpobject.getparameters(); return parameters.rtcp.cname; } specifications specification status comment webrtc 1.0: real-time communication between
browsersthe definition of 'rtcrtpreceiveparameters' in that specification.
RTCRtpReceiveParameters - Web APIs
function getrtcpcname(receiver) { let parameters = receiver.getparameters(); return parameters.rtcp.cname; } specifications specification status comment webrtc 1.0: real-time communication between
browsersthe definition of 'rtcrtpreceiveparameters' in that specification.
RTCRtpReceiver.getParameters() - Web APIs
function getrtcpcname(receiver) { let parameters = receiver.getparameters(); return parameters.rtcp.cname; } specifications specification status comment webrtc 1.0: real-time communication between
browsersthe definition of 'rtcrtpreceiver.getparameters()' in that specification.
RTCRtpReceiver.getStats() - Web APIs
receiver.getstats().then(function(stats) { document.getelementbyid("lostpackets").innertext = stats.packetslost; }); specifications specification status comment webrtc 1.0: real-time communication between
browsersthe definition of 'rtcrtpreceiver.getstats()' in that specification.
RTCRtpReceiver.transport - Web APIs
specifications specification status comment webrtc 1.0: real-time communication between
browsersthe definition of 'rtcrtpreceiver.transport' in that specification.
RTCRtpReceiver - Web APIs
specifications specification status comment webrtc 1.0: real-time communication between
browsersthe definition of 'rtcrtpreceiver' in that specification.
RTCRtpSendParameters.encodings - Web APIs
specifications specification status comment webrtc 1.0: real-time communication between
browsersthe definition of 'rtcrtpsendparameters.encodings' in that specification.
RTCRtpSendParameters - Web APIs
specifications specification status comment webrtc 1.0: real-time communication between
browsersthe definition of 'rtcrtpsendparameters' in that specification.
RTCRtpSender.dtmf - Web APIs
only audio tracks can support dtmf, and typically only one audio track per rtcpeerconnection will have an associated rtcdtmfsender example tbd specifications specification status comment webrtc 1.0: real-time communication between
browsersthe definition of 'rtcrtpsender.dtmf' in that specification.
RTCRtpSender.getParameters() - Web APIs
function getsendertransactionid(sender) { let parameters = sender.getparameters(); return parameters.transactionid; } specifications specification status comment webrtc 1.0: real-time communication between
browsersthe definition of 'getparameters()' in that specification.
RTCRtpSender.getStats() - Web APIs
sender.getstats().then(function(stats) { document.getelementbyid("currentrtt").innertext = stats.roundtriptime; }); specifications specification status comment webrtc 1.0: real-time communication between
browsersthe definition of 'rtcrtpsender.getstats()' in that specification.
RTCRtpSender.replaceTrack() - Web APIs
) { var sender = pc.getsenders().find(function(s) { return s.track.kind == videotrack.kind; }); console.log('found sender:', sender); sender.replacetrack(videotrack); }); }) .catch(function(err) { console.error('error happens:', err); }); specifications specification status comment webrtc 1.0: real-time communication between
browsersthe definition of 'rtcrtpsender.replacetrack()' in that specification.
RTCRtpSender.setParameters() - Web APIs
specifications specification status comment webrtc 1.0: real-time communication between
browsersthe definition of 'rtcrtpsender.setparameters()' in that specification.
RTCRtpSender.setStreams() - Web APIs
specifications specification status comment webrtc 1.0: real-time communication between
browsersthe definition of 'rtcrtpsender.setstreams()' in that specification.
RTCRtpSender.track - Web APIs
specifications specification status comment webrtc 1.0: real-time communication between
browsersthe definition of 'track' in that specification.
RTCRtpSender.transport - Web APIs
specifications specification status comment webrtc 1.0: real-time communication between
browsersthe definition of 'rtcrtpsender.transport' in that specification.
RTCRtpSender - Web APIs
specifications specification status comment webrtc 1.0: real-time communication between
browsersthe definition of 'rtcrtpsender' in that specification.
RTCRtpStreamStats.ssrc - Web APIs
while not part of the standard, exactly, it is a good mechanism that may be used by some
browsers; others may use other methods, such as random number generators.
RTCRtpSynchronizationSource - Web APIs
specifications specification status comment webrtc 1.0: real-time communication between
browsersthe definition of 'rtcrtpsynchronizationsource' in that specification.
RTCRtpTransceiver.direction - Web APIs
for example, if the direction is specified as "sendrecv", the corresponding sdp a-line is: a=sendrecv specifications specification status comment webrtc 1.0: real-time communication between
browsersthe definition of 'rtcrtptransceiver.direction' in that specification.
RTCRtpTransceiver.mid - Web APIs
specifications specification status comment webrtc 1.0: real-time communication between
browsersthe definition of 'rtcrtptransceiver.mid' in that specification.
RTCRtpTransceiver.receiver - Web APIs
specifications specification status comment webrtc 1.0: real-time communication between
browsersthe definition of 'rtcrtptransceiver.receiver' in that specification.
RTCRtpTransceiver.sender - Web APIs
specifications specification status comment webrtc 1.0: real-time communication between
browsersthe definition of 'rtcrtptransceiver.sender' in that specification.
RTCRtpTransceiver.stop() - Web APIs
specifications specification status comment webrtc 1.0: real-time communication between
browsersthe definition of 'rtcrtptransceiver.stop()' in that specification.
RTCRtpTransceiver.stopped - Web APIs
specifications specification status comment webrtc 1.0: real-time communication between
browsersthe definition of 'rtcrtptransceiver.stopped' in that specification.
RTCRtpTransceiver - Web APIs
specifications specification status comment webrtc 1.0: real-time communication between
browsersthe definition of 'rtcrtptransceiver' in that specification.
RTCRtpTransceiverDirection - Web APIs
specifications specification status comment webrtc 1.0: real-time communication between
browsersthe definition of 'rtcrtptransceiverdirection' in that specification.
RTCRtpTransceiverInit - Web APIs
specifications specification status comment webrtc 1.0: real-time communication between
browsersthe definition of 'rtcrtptransceiverinit' in that specification.
RTCSctpTransport.state - Web APIs
specifications specification status comment webrtc 1.0: real-time communication between
browsersthe definition of 'rtcsctptransport.state' in that specification.
RTCSctpTransport - Web APIs
methods this interface has no methods, but inherits methods from: eventtarget example tbd specifications specification status comment webrtc 1.0: real-time communication between
browsersthe definition of 'rtcsctptransport' in that specification.
RTCSessionDescription() - Web APIs
}, error); }, error); } specifications specification status comment webrtc 1.0: real-time communication between
browsersthe definition of 'rtcsessiondescription()' in that specification.
RTCSessionDescription.sdp - Web APIs
e.com t=0 0 m=audio 49170 rtp/avp 0 a=rtpmap:0 pcmu/8000 m=video 51372 rtp/avp 31 a=rtpmap:31 h261/90000 m=video 53000 rtp/avp 32 a=rtpmap:32 mpv/90000 example // the remote description has been set previously on pc, an rtcpeerconnection alert(pc.remotedescription.sdp); specifications specification status comment webrtc 1.0: real-time communication between
browsersthe definition of 'rtcsessiondescription.sdp' in that specification.
RTCSessionDescription.toJSON() - Web APIs
specifications specification status comment webrtc 1.0: real-time communication between
browsersthe definition of 'rtcsessiondescription: tojson()' in that specification.
RTCSessionDescription.type - Web APIs
example // the remote description has been set previously on pc, a rtcpeerconnection alert(pc.remotedescription.type); specifications specification status comment webrtc 1.0: real-time communication between
browsersthe definition of 'rtcsessiondescription.type' in that specification.
RTCSessionDescription - Web APIs
d an offer, we need to answer if (pc.remotedescription.type == "offer") pc.createanswer(localdesccreated, logerror); }, logerror); else pc.addicecandidate(new rtcicecandidate(message.candidate), function () {}, logerror); }; specifications specification status comment webrtc 1.0: real-time communication between
browsersthe definition of 'rtcsessiondescription' in that specification.
RTCSessionDescriptionCallback - Web APIs
example var pc = new rtcpeerconnection(); var descriptioncallback = function(offer) { pc.setlocaldescription(offer); } pc.createoffer(descriptioncallback); specifications specification status comment webrtc 1.0: real-time communication between
browsersthe definition of 'rtcsessiondescriptioncallback' in that specification.
RTCStats.id - Web APIs
specifications specification status comment webrtc 1.0: real-time communication between
browsersthe definition of 'rtcstats.id' in that specification.
RTCStats.timestamp - Web APIs
specifications specification status comment webrtc 1.0: real-time communication between
browsersthe definition of 'rtcstats.timestamp' in that specification.
RTCStats.type - Web APIs
specifications specification status comment webrtc 1.0: real-time communication between
browsersthe definition of 'rtcstats.type' in that specification.
RTCStats - Web APIs
specifications specification status comment webrtc 1.0: real-time communication between
browsersthe definition of 'rtcstats' in that specification.
RTCStatsReport - Web APIs
specifications specification status comment webrtc 1.0: real-time communication between
browsersthe definition of 'rtcstatsreport' in that specification.
RTCTrackEvent() - Web APIs
specifications specification status comment webrtc 1.0: real-time communication between
browsersthe definition of 'rtctrackevent()' in that specification.
RTCTrackEvent.receiver - Web APIs
specifications specification status comment webrtc 1.0: real-time communication between
browsersthe definition of 'rtctrackevent.receiver' in that specification.
RTCTrackEvent.streams - Web APIs
specifications specification status comment webrtc 1.0: real-time communication between
browsersthe definition of 'rtctrackevent.streams' in that specification.
RTCTrackEvent.track - Web APIs
specifications specification status comment webrtc 1.0: real-time communication between
browsersthe definition of 'rtctrackevent.track' in that specification.
RTCTrackEvent.transceiver - Web APIs
specifications specification status comment webrtc 1.0: real-time communication between
browsersthe definition of 'rtctrackevent.transceiver' in that specification.
RTCTrackEvent - Web APIs
peerconnection.addeventlistener("track", e => { let videoelement = document.getelementbyid("videobox"); videoelement.srcobject = e.streams[0]; }, false); specifications specification status comment webrtc 1.0: real-time communication between
browsersthe definition of 'rtctrackevent' in that specification.
RTCTrackEventInit.receiver - Web APIs
specifications specification status comment webrtc 1.0: real-time communication between
browsersthe definition of 'rtctrackeventinit.receiver' in that specification.
RTCTrackEventInit.streams - Web APIs
specifications specification status comment webrtc 1.0: real-time communication between
browsersthe definition of 'rtctrackeventinit.streams' in that specification.
RTCTrackEventInit.track - Web APIs
specifications specification status comment webrtc 1.0: real-time communication between
browsersthe definition of 'rtctrackeventinit.track' in that specification.
RTCTrackEventInit.transceiver - Web APIs
specifications specification status comment webrtc 1.0: real-time communication between
browsersthe definition of 'rtctrackeventinit.transceiver' in that specification.
RTCTrackEventInit - Web APIs
specifications specification status comment webrtc 1.0: real-time communication between
browsersthe definition of 'rtctrackeventinit' in that specification.
ReadableStream.tee() - Web APIs
you might do this for example in a serviceworker if you want to fetch a response from the server and stream it to the
browser, but also stream it to the serviceworker cache.
RenderingContext - Web APIs
by using the shorthand renderingcontext, methods and properties which can make use of any of these interfaces can be specified and written more easily; since <canvas> supports several rendering systems, it's helpful from a specification and
browser implementation perspective to have a shorthand that means "one of these interfaces." as such, renderingcontext is an implementation detail, and isn't something web developers directly use.
ResizeObserverEntry.contentRect - Web APIs
this uses a simple feature detection test to see if the
browser supports the newer resizeobserverentry.contentboxsize property — if so, it uses that to get the sizing data it needs.
SVGPointList - Web APIs
browser compatibility desktop mobile chrome edge firefox internet explorer opera safari android webview chrome for android firefox for android opera for android safari on ios ...
SVGTests - Web APIs
methods svgtests.hasextension() read only returns true if the
browser supports the given extension, specified by a uri.
Screen.availHeight - Web APIs
you can similarly use screen.availwidth to get the number of pixels which are horizontally available to the
browser for its use.
Screen.height - Web APIs
widgets such as taskbars or other special application windows that integrate with the os (e.g., the spinner player minimized to act like an additional toolbar on windows) may reduce the amount of space available to
browser windows and other applications.
Screen.orientation - Web APIs
you should rotate your device to landscape"); } else if (orientation === undefined) { console.log("the orientation api isn't supported in this
browser :("); } specifications specification status comment screen orientation apithe definition of 'orientation' in that specification.
Screen - Web APIs
note that
browsers determine which screen to report as current by detecting which screen has the center of the
browser window.
Screen Wake Lock API - Web APIs
if ('wakelock' in navigator) { issupported = true; statuselem.textcontent = 'screen wake lock api supported!'; } else { wakebutton.disabled = true; statuselem.textcontent = 'wake lock is not supported by this
browser.'; } requesting a wake lock the following example demonstrates how to request a wakelocksentinel object.
ScriptProcessorNode - Web APIs
if the buffer size is not defined, which is recommended, the
browser will pick one that its heuristic deems appropriate.
Selection.addRange() - Web APIs
example currently only firefox supports multiple selection ranges, other
browsers will not add new ranges to the selection if it already contains one.
Streams API - Web APIs
this is something
browsers do anyway when receiving assets to be shown on webpages — videos buffer and more is gradually available to play, and sometimes you'll see images display gradually as more is loaded.
TextDecoder() - Web APIs
'hz-gb-2312' "big5", "big5-hkscs", "cn-big5", "csbig5", "x-x-big5" 'big5' "cseucpkdfmtjapanese", "euc-jp", "x-euc-jp" 'euc-jp' "csiso2022jp", "iso-2022-jp" note: firefox used to accept iso-2022-jp-2 sequences silently when an iso-2022-jp decoder was instantiated, however this was removed in version 56 to simplify the api, as no other
browsers support it and no pages seem to use it.
TextTrackList.length - Web APIs
var mediaelem = document.queryselector("video, audio"); var numtexttracks = 0; if (mediaelem.texttracks) { numtexttracks = mediaelem.texttracks.length; } note that this sample checks to be sure htmlmediaelement.texttracks is defined, to avoid failing on
browsers without support for texttrack.
UIEvent.pageX - Web APIs
this property was never part of any standard, and was only implemented across a subset of
browsers, and only for a limited number of versions.
URL.revokeObjectURL() - Web APIs
call this method when you've finished using an object url to let the
browser know not to keep the reference to the file any longer.
URL.search - Web APIs
modern
browsers provide the url.searchparams property to make it easy to parse out the parameters from the query string.
URL.search - Web APIs
modern
browsers provide the url.searchparams property to make it easy to parse out the parameters from the query string.
USVString - Web APIs
unpaired surrogate codepoints present in usvstring are converted by the
browser to unicode 'replacement character' u+fffd, (�).
UserDataHandler - Web APIs
although it may still work in some
browsers, its use is discouraged since it could be removed at any time.
validityState.badInput - Web APIs
the read-only badinput property of a validitystate object indicates if the user has provided input that the
browser is unable to convert.
ValidityState - Web APIs
badinput read only a boolean that is true if the user has provided input that the
browser is unable to convert.
VideoTrackList.length - Web APIs
var videoelem = document.queryselector("video"); var numvideotracks = 0; if (videoelem.videotracks) { numvideotracks = videoelem.videotracks.length; } note that this sample checks to be sure htmlmediaelement.videotracks is defined, to avoid failing on
browsers without support for videotrack.
WEBGL_debug_shaders - Web APIs
availability: depending on the privacy settings of the
browser, this extension might only be available to privileged contexts.
WakeLock.request() - Web APIs
the request() method is wrapped in a try...catch statement to account for if the
browser refuses the request for any reason.
WakeLock - Web APIs
the wakelock.request method is wrapped in a try...catch statement to account for if the
browser refuses the request for any reason.
WebGLRenderingContext.lineWidth() - Web APIs
because of these implementation defined limits it is not recommended to use line widths other than 1.0 since there is no guarantee any user's
browser will display any other width.
WebGLRenderingContext.pixelStorei() - Web APIs
glenum gl.
browser_default_webgl gl.
browser_default_webgl, gl.none webgl when using a webgl 2 context, the following values are available additionally: constant description type default value allowed values (for param) specified in gl.pack_row_length number of pixels in a row.
WebGL by example - Web APIs
canvas size and webgl the example explores the effect of setting (or not setting) the canvas size to its element size in css pixels, as it appears in the
browser window.
WebGL constants - Web APIs
8 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(), webglrenderingcontext.bindbuffer(), or webglrenderingcontext.getbufferparameter().
Animating objects with WebGL - Web APIs
adding the following code to the end of the main function var then = 0; // draw the scene repeatedly function render(now) { now *= 0.001; // convert to seconds const deltatime = now - then; then = now; drawscene(gl, programinfo, buffers, deltatime); requestanimationframe(render); } requestanimationframe(render); this code uses requestanimationframe to ask the
browser to call the function "render" on each frame.
WebRTC Statistics API - Web APIs
candidate recommendation compatibility for individual statistic types webrtc 1.0: real-time communication between
browsersthe definition of 'rtcstatsreport' in that specification.
WebXR permissions and security - Web APIs
inline presentation when you request an xrsession with the mode set to inline, and any features are required or requested, the
browser will only allow the session to be created if the call to requestsession() was made by code which is executing expressly due to user intent.
Web Animations API - Web APIs
concepts and usage the web animations api provides a common language for
browsers and developers to describe animations on dom elements.
Migrating from webkitAudioContext - Web APIs
this article attempts to summarize the areas where developers are likely to encounter these problems and provide examples on how to port such code to standards based audiocontext, which will work across different
browser engines.
Using IIR filters - Web APIs
browser support iir filters are supported well across modern
browsers, although they have been implemented more recently than some of the more longstanding web audio api features, like biquad filters.
Web Audio API - Web APIs
guides and tutorials advanced techniques: creating and sequencing audiowe've now got an instrument inside our
browser!
Web Locks API - Web APIs
note that such deadlocks only affect the locks themselves and code depending on them; the
browser, other tabs, and other script in the page is not affected.
Web Workers API - Web APIs
serviceworkers essentially act as proxy servers that sit between web applications, the
browser, and the network (when available).
WheelEvent - Web APIs
old versions of
browsers implemented the non-standard and non-cross-
browser-compatible mousewheelevent and mousescrollevent interfaces.
Window.close() - Web APIs
//global var to store a reference to the opened window var openedwindow; function openwindow() { openedwindow = window.open('moreinfo.htm'); } function closeopenedwindow() { openedwindow.close(); } closing the current window in the past, when you called the window object's close() method directly, rather than calling close() on a window instance, the
browser closed the frontmost window, whether your script created that window or not.
Window.external - Web APIs
the external property of the window api returns an instance of the external interface, which was intended to contain functions related to adding external search providers to the
browser.
Window.find() - Web APIs
" + window.find(text)); } html <p>apples, bananas, and oranges.</p> <button type="button" onclick='findstring("apples")'>search for apples</button> <button type="button" onclick='findstring("banana")'>search for banana</button> <button type="button" onclick='findstring("orange")'>search for orange</button> result notes in some
browsers, window.find() selects (highlights) the found content on the site.
Window.getDefaultComputedStyle() - Web APIs
in particular, to avoid the so called css history leak security issue,
browsers may expressly "lie" about the used value for a link and always return values as if a user has never visited the linked site, and/or limit the styles that can be applied using the :visited pseudo-selector.
Window.getSelection() - Web APIs
where display: none is set) firefox will return null, whereas other
browsers will return a selection object with selection.type set to none.
Window.home() - Web APIs
although it may still work in some
browsers, its use is discouraged since it could be removed at any time.
Window: offline event - Web APIs
the offline event of the window interface is fired when the
browser has lost access to the network and the value of navigator.online switches to false.
Window: online event - Web APIs
the online event of the window interface is fired when the
browser has gained access to the network and the value of navigator.online switches to true.
Window.opener - Web APIs
in modern
browsers, a rel="noopener noreferrer" attribute on the originating <a> element will prevent the window.opener reference from being set, in which case this property will return null.
Window.outerHeight - Web APIs
the window.outerheight read-only property returns the height in pixels of the whole
browser window, including any sidebar, window chrome, and window-resizing borders/handles.
Window.pageYOffset - Web APIs
there is slightly better support for pageyoffset than for scrolly in older
browsers, but if you're not concerned about
browsers more than a handful of years old, you can use either one.
Window.personalbar - Web APIs
<!doctype html> <html> <head> <title>various dom tests</title> <script> // changing bar states on the existing window netscape.security.privilegemanager.enableprivilege("universal
browserwrite"); window.personalbar.visible = !window.personalbar.visible; </script> </head> <body> <p>various dom tests</p> </body> </html> notes when you load the example page above, the
browser displays the following dialog: to toggle the visibility of these bars, you must either sign your scripts or enable the appropriate privileges, as in the example above.
Window.pkcs11 - Web APIs
although it may still work in some
browsers, its use is discouraged since it could be removed at any time.
window.postMessage() - Web APIs
oss-origin-opener-policy: same-origin cross-origin-embedder-policy: require-corp to check if cross origin isolation has been successful, you can test against the crossoriginisolated property available to window and worker contexts: if (crossoriginisolated) { // post sharedarraybuffer } else { // do something else } see also planned changes to shared memory which is starting to roll out to
browsers (firefox 79, for example).
Window.resizeBy() - Web APIs
creating and resizing an external window for security reasons, it's no longer possible in firefox for a website to change the default size of a window in a
browser if the window wasn’t created by window.open(), or contains more than one tab.
Window.setImmediate() - Web APIs
this method is used to break up long running operations and run a callback function immediately after the
browser has completed other operations such as events and display updates.
Window.status - Web APIs
the status property of the window interface was originally intended to set the text in the status bar at the bottom of the
browser window.
Window.statusbar - Web APIs
<!doctype html> <html lang="en"> <head> <meta charset="utf-8" /> <title>various dom tests</title> <script> // changing bar states on the existing window netscape.security.privilegemanager.enableprivilege("universal
browserwrite"); window.statusbar.visible=!window.statusbar.visible; </script> </head> <body> <p>various dom tests</p> </body> </html> notes when you load the example page above, the
browser displays the following dialog: to toggle the visibility of these bars, you must either sign your scripts or enable the appropriate privileges, as in the example above.
Window.toolbar - Web APIs
<!doctype html> <html> <head> <title>various dom tests</title> <script> // changing bar states on the existing window netscape.security.privilegemanager.enableprivilege("universal
browserwrite"); window.toolbar.visible=!window.toolbar.visible; </script> </head> <body> <p>various dom tests</p> </body> </html> notes when you load the example page above, the
browser displays the following dialog: to toggle the visibility of these bars, you must either sign your scripts or enable the appropriate privileges, as in the example above.
WindowEventHandlers.onpopstate - Web APIs
the popstate event is only triggered by performing a
browser action, such as clicking on the back button (or calling history.back() in javascript), when navigating between two history entries for the same document.
WindowOrWorkerGlobalScope.atob() - Web APIs
example const encodeddata = window.btoa('hello, world'); // encode a string const decodeddata = window.atob(encodeddata); // decode the string polyfill you can use a polifill from https://github.com/maxart2501/base64-js/blob/master/base64.js for
browsers that don't support it.
WindowOrWorkerGlobalScope.btoa() - Web APIs
y.length); for (let i = 0; i < bytes.length; i++) { bytes[i] = binary.charcodeat(i); } return string.fromcharcode(...new uint16array(bytes.buffer)); } const decoded = atob(encoded); const original = frombinary(decoded); console.log(original); // ☸☹☺☻☼☾☿ polyfill you can use a polifill from https://github.com/maxart2501/base64-js/blob/master/base64.js for
browsers that don't support it.
WindowOrWorkerGlobalScope - Web APIs
this lets your code run without interfering with other, possibly higher priority, code, but before the
browser runtime regains control, potentially depending upon the work you need to complete.
WorkerGlobalScope.dump() - Web APIs
for example, on mac os x you'd run it using something like this (assuming you are inside the applications folder): ./firefox.app/contents/macos/firefox-bin -profile /tmp -no-remote now go into about:config and enable the
browser.dom.window.dump.enabled pref.
XDomainRequest - Web APIs
it was removed in internet explorer 10 in favor of using xmlhttprequest with proper cors; if you are targeting internet explorer 10 or later, or wish to support any other
browser, you need to use standard http access control.
XMLHttpRequest() - Web APIs
const request = new xmlhttprequest(paramsdictionary); parameters (non-standard) objparameters there are two flags you can set: mozanon boolean: setting this flag to true will cause the
browser not to expose the origin and user credentials when fetching resources.
XMLHttpRequest.open() - Web APIs
note: synchronous requests on the main thread can be easily disruptive to the user experience and should be avoided; in fact, many
browsers have deprecated synchronous xhr support on the main thread entirely.
XMLHttpRequest.responseType - Web APIs
this restriction is designed in part to help ensure that synchronous operations aren't used for large transactions that block the
browser's main thread, thereby bogging down the user experience.
XMLHttpRequest.sendAsBinary() - Web APIs
polyfill since sendasbinary() is an experimental feature, here is a polyfill for
browsers that don't support the sendasbinary() method but support typed arrays.
XRInputSource.profiles - Web APIs
hyphen ("-") characters if the platform makes it available, the usb vendor and product id may be provided but cannot be relied upon does not uniquely identify a specific device; rather, it identifies a configuration that the product is capable of using does not provide information about handedness of the device, if applicable the webxr input profiles registry is used by device developers and
browser developers to attempt to ensure that a given device will report the same profile strings regardless of which
browser or other user agent you use.
XRPermissionStatus.granted - Web APIs
if the estimated floor level is non-zero, the
browser is expected to round it such a way as to avoid fingerprinting (likely to the nearest centimeter).
XRReferenceSpaceType - Web APIs
if the estimated floor level is non-zero, the
browser is expected to round it such a way as to avoid fingerprinting (likely to the nearest centimeter).
XRRenderState - Web APIs
baselayer read only the xrwebgllayer from which the
browser's compositing system obtains the image for the xr session.
XRSession.requestAnimationFrame() - Web APIs
the xrsession method requestanimationframe(), much like the window method of the same name, schedules a callback to be executed the next time the
browser is ready to paint the session's virtual environment to the xr display.
XRSessionMode - Web APIs
browsers may support either or both of these modes, but if webxr is available, the inline mode is always supported.
ARIA annotations - Accessibility
</p> <div id="comment-source">suggested by chris, <time datetime="2019-03-30t19:29">march 30 2019, 19:29</time></div>
browsers tend to provide a default black strikethrough for deletions, and a black underline for insertions, but you’ll probably want to use some more interesting styling of your own, for example: ins, [role="insertion"] { color: #0c0; text-decoration: underline; } del, [role="deletion"] { color: red; text-decoration: line-through; } ins, [role="insertion"], del, [role="deletion"] { text-de...
How to file ARIA-related bugs - Accessibility
tbd: add proper accessibility markup to table genre software where to file notes screen readers freedom scientific jaws jaws technical support form gw micro window eyes window-eyes comments, questions, and feedback (email) non visual desktop access (nvda) file nvda bugs discuss nvda issues
browsers apple safari file webkit.org bugs google chrome file chromium bugs microsoft internet explorer file ie bugs microsoft edge file ms edge bugs view existing ms edge aria bugs mozilla firefox file firefox bugs use component: disability access apis opera file opera bugs use ...
ARIA: alert role - Accessibility
<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: feed role - Accessibility
if the addition of articles occupies the main
browser thread, make sure to set aria-busy="true" on the feed itself, and make sure to set it back to false when processing ends, or the user may not see the updates.
ARIA: img role - Accessibility
this seems to work ok across some
browser/screenreader combinations, but some of them end up reading the label out twice.
ARIA: Suggestion role - Accessibility
</p> <div id="comment-source">suggested by chris, <time datetime="2019-03-30t19:29">march 30 2019, 19:29</time></div>
browsers tend to provide a default black strikethrough for deletions, and a black underline for insertions, but you’ll probably want to use accessibility concerns landmark roles are intended to be used sparingly, to identify larger overall sections of the document.
ARIA: button role - Accessibility
html <button type="button" onclick="handlebtnclick()" onkeydown="handlebtnkeydown()"> mute audio </button> <span role="button" tabindex="0" aria-pressed="false" onclick="handlebtnclick(event)" onkeydown="handlebtnkeydown(event)"> mute audio </span> <audio id="audio" src="https://udn.realityripple.com/samples/41/191d072707.mp3"> your
browser does not support the <code>audio</code> element.
ARIA: heading role - Accessibility
although theoretically you can go higher, and some screen readers may support it, the results can be unpredictable with other
browser/screen reader combinations.
Alerts - Accessibility
if this were a real live form, and the site was being visited by a
browser that does not yet support aria, we’d still want to give an indication that this is a required field.
Keyboard - Accessibility
standard focusable elements such as links and input fields are given special styling by the
browser by default, so you might not need to specify focus styling for such elements, unless you want the focus styling to be more distinctive.
Operable - Accessibility
this is usually a dotted or blue outline by default (depending on
browser, platform, etc.), but this can be overidden by css.
Accessibility
wai-aria is a technology that can help with such problems by adding in further semantics that
browsers and assistive technologies can recognize and use to let users know what is going on.
-moz-outline-radius-bottomleft - CSS: Cascading Style Sheets
0applies 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 if you are viewing this in a
browser other than firefox.
-moz-outline-radius-bottomright - CSS: Cascading Style Sheets
ation 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; outline: dotted red; -moz-outline-radius-bottomright: 2em; } result the example above will not display the desired effect if you are viewing this in a
browser other than firefox.
-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
edanimation 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; outline: dotted red; -moz-outline-radius-topright: 2em; } result the example above will not display the desired effect if you are viewing this in a
browser other than firefox.
-moz-outline-radius - CSS: Cascading Style Sheets
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
efinition 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
browser to anotherapplies toall elementsinheritedyespercentagesas each of the properties of the shorthand:-webkit-border-before-width: logical-width of containing blockcomputed valueas each of the properties of the shorthand:border-width: as each of the properties of the shorthand:border-bottom-width: the absolute length or 0 if border-bottom-style is none or hiddenborder-left-width: the absolute length ...
:any-link - CSS: Cascading Style Sheets
/* selects any element that would be matched by :link or :visited */ :any-link { color: green; } syntax :any-link examples html <a href="https://example.com">external link</a><br> <a href="#">internal target link</a><br> <a>placeholder link (won't get styled)</a> css a:any-link { border: 1px solid blue; color: orange; } /* webkit
browsers */ a:-webkit-any-link { border: 1px solid blue; color: orange; } result specifications specification status comment selectors level 4the definition of ':any-link' in that specification.
:blank - CSS: Cascading Style Sheets
syntax :blank examples simple :blank example in eventual supporting
browsers, the :blank pseudo-class will enable developers to highlight in some way input controls that are not required, but still have no content filled in, perhaps as a reminder to users.
:host() - CSS: Cascading Style Sheets
browser compatibility desktopmobilechromeedgefirefoxinternet exploreroperasafariandroid webviewchrome for androidfirefox for androidopera for androidsafari on iossamsung internet:host()chrome full support 54edge full support 79firefox full support 63 full...
:hover - CSS: Cascading Style Sheets
depending on the
browser, the :hover pseudo-class might never match, match only for a moment after touching an element, or continue to match even after the user has stopped touching and until the user touches another element.
@document - CSS: Cascading Style Sheets
@document is currently only supported in firefox; if you wanted to replicate using such functionality in your own non-firefox
browser, you could try using this polyfill by @an-error94, which uses a combination of a user script, data-* attributes, and attribute selectors.
unicode-range - CSS: Cascading Style Sheets
description the purpose of this descriptor is to allow the font resources to be segmented so that a
browser only needs to download the font resource needed for the text content of a particular page.
@keyframes - CSS: Cascading Style Sheets
valid keyframe lists if a keyframe rule doesn't specify the start or end states of the animation (that is, 0%/from and 100%/to),
browsers will use the element's existing styles for the start/end states.
inverted-colors - CSS: Cascading Style Sheets
if you're not, it should be red on light gray.</p> <p>if the text is gray, your
browser doesn't support the `inverted-colors` media feature.</p> css p { color: gray; } @media (inverted-colors: inverted) { p { background: black; color: yellow; } } @media (inverted-colors: none) { p { background: #eee; color: red; } } result specifications specification status comment media queries level 5the definition of 'inverted-colors...
orientation - CSS: Cascading Style Sheets
opening the soft keyboard on many devices in portrait orientation will cause the viewport to become wider than it is tall, thereby causing the
browser to use landscape styles instead of portrait.
Coordinate systems - CSS: Cascading Style Sheets
on a desktop computer, for example, the mouseevent.clientx and mouseevent.clienty properties indicate the position of the mouse cursor at the moment the event occurred, relative to the top-left corner of the
browser window.
CSS Animations - CSS: Cascading Style Sheets
reference css properties animation animation-delay animation-direction animation-duration animation-fill-mode animation-iteration-count animation-name animation-play-state animation-timing-function css at-rules @keyframes guides detecting css animation support describes a technique for detecting if a
browser supports css animations.
Border-image generator - CSS: Cascading Style Sheets
================ */ .group:before, .group:after { content: ""; display: table; } .group:after { clear:both; } .group { zoom: 1; /* for ie 6/7 (trigger haslayout) */ } /* grid column setup * ========================================================================== */ .col { display: block; float:left; margin: 1% 0 1% 1.6%; } .col:first-child { margin-left: 0; } /* all
browsers except ie6 and lower */ /* * ui component */ .ui-input-slider { height: 20px; font-family: "segoe ui", arial, helvetica, sans-serif; -moz-user-select: 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...
Border-radius generator - CSS: Cascading Style Sheets
================ */ .group:before, .group:after { content: ""; display: table; } .group:after { clear:both; } .group { zoom: 1; /* for ie 6/7 (trigger haslayout) */ } /* grid column setup * ========================================================================== */ .col { display: block; float:left; margin: 1% 0 1% 1.6%; } .col:first-child { margin-left: 0; } /* all
browsers except ie6 and lower */ /* * ui component */ .ui-input-slider-container { height: 20px; margin: 10px 0; font-family: "segoe ui", arial, helvetica, sans-serif; -moz-user-select: none; user-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: c...
CSS Display - CSS: Cascading Style Sheets
ox> <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 methods line-based placement grid template areas layout using named grid lines auto-placement in grid layout box alignment in grid...
CSS Flexible Box Layout - CSS: Cascading Style Sheets
backwards compatibility of flexbox
browser status of flexbox, interoperability issues and supporting older
browsers and versions of the spec specifications specification status comment css flexible box layout module candidate recommendation initial definition.
CSS Lists - CSS: Cascading Style Sheets
reference properties list-style-image list-style-type list-style-position list-style guides consistent list indentation explains how to achieve consistent list indentation across different
browsers.
CSS Scroll Snap - CSS: Cascading Style Sheets
ck scroll-padding-block-start scroll-padding-block-end css properties on children scroll-snap-align scroll-margin scroll-margin-top scroll-margin-right scroll-margin-bottom scroll-margin-left scroll-margin-inline scroll-margin-inline-start scroll-margin-inline-end scroll-margin-block scroll-margin-block-start scroll-margin-block-end guides basic concepts of css scroll snap
browser compatibility and scroll snap specification specification status comment css scroll snap module level 1 candidate recommendation initial definition ...
CSS Text Decoration - CSS: Cascading Style Sheets
be careful when removing the text decoration on anchors since users often depend on the underline to denote hyperlinks.</p> <p class="underover">this text has lines above <em>and</em> below it.</p> <p class="thick">this text has a really thick purple underline in supporting
browsers.</p> <p class="blink">this text might blink for you, depending on the
browser you use.</p> specifications specification status comment css text decoration module level 4 working draft css text decoration module level 3 candidate recommendation css level 2 (revision 1) recommendation css level 1 recommendation...
Cookbook template - CSS: Cascading Style Sheets
useful fallbacks or alternative methods if there are useful alternative methods for building the recipe, or fallback recipes to use if you have to support non-supporting
browsers, include them in separate sections down here.
Grid wrapper - CSS: Cascading Style Sheets
useful fallbacks or alternative methods when using this recipe at page level it can be useful to set a max-width along with left and right auto margins to center the content horizontally: .grid { max-width: 1200px; margin: 0 auto; // horizontally centers 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%; transform: translate3d(-50%, 0, 0); } this gives a good approximation of the l...
Media queries - CSS: Cascading Style Sheets
testing media queries programmatically describes how to use media queries in your javascript code to determine the state of a device, and to set up listeners that notify your code when the results of media queries change (such as when the user rotates the screen or resizes the
browser).
Mozilla CSS extensions - CSS: Cascading Style Sheets
utton-arrow-down button-arrow-next button-arrow-previous button-arrow-up button-bevel checkbox checkbox-container checkbox-label checkmenuitem dialog groupbox listbox menuarrow menucheckbox menuimage menuitem menuitemtext menulist menulist-button menulist-text menulist-textfield menupopup menuradio menuseparator -moz-mac-unified-toolbar -moz-win-borderless-glass -moz-win-
browsertabbar-toolbox -moz-win-communications-toolbox -moz-win-glass -moz-win-media-toolbox -moz-window-button-box -moz-window-button-box-maximized -moz-window-button-close -moz-window-button-maximize -moz-window-button-minimize -moz-window-button-restore -moz-window-titlebar -moz-window-titlebar-maximized progressbar progresschunk radio radio-container radio-label radiomenuitem resizer...
border-block-start - CSS: Cascading Style Sheets
efinition 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
browser to anotherapplies toall elementsinheritednocomputed valueas each of the properties of the shorthand:border-width: as each of the properties of the shorthand:border-bottom-width: the absolute length or 0 if border-bottom-style is none or hiddenborder-left-width: 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...
border-inline-start - CSS: Cascading Style Sheets
efinition 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
browser to anotherapplies toall elementsinheritednocomputed valueas each of the properties of the shorthand:border-width: as each of the properties of the shorthand:border-bottom-width: the absolute length or 0 if border-bottom-style is none or hiddenborder-left-width: 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...
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 valuevaries from one
browser to anotherapplies toall elements.
<custom-ident> - CSS: Cascading Style Sheets
also, quite a few predefined values are 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-informal, kannada, k...
float - CSS: Cascading Style Sheets
table-column block table-column-group block table-cell block table-caption block table-header-group block table-footer-group block inline-flex flex inline-grid grid other unchanged note: if you're referring to this property from javascript as a member of the htmlelement.style object, modern
browsers support float, but in older
browsers you have to spell it as cssfloat, with internet explorer versions 8 and older using stylefloat.
font - CSS: Cascading Style Sheets
prefixed system font keywords
browsers often implement several more, prefixed, keywords: gecko implements -moz-window, -moz-document, -moz-desktop, -moz-info, -moz-dialog, -moz-button, -moz-pull-down-menu, -moz-list, and -moz-field.
ime-mode - CSS: Cascading Style Sheets
/* keyword values */ ime-mode: auto; ime-mode: normal; ime-mode: active; ime-mode: inactive; ime-mode: disabled; /* global values */ ime-mode: inherit; ime-mode: initial; ime-mode: unset; the ime-mode property is only partially and inconsistently implemented in
browsers.
justify-content - CSS: Cascading Style Sheets
the css justify-content property defines how the
browser distributes space between and around content items along the main-axis of a flex container, and the inline axis of a grid container.
<length> - CSS: Cascading Style Sheets
when used within the root element font-size, it represents its initial value (a common
browser default is 16px, but user-defined preferences may modify this).
mask-border-mode - CSS: Cascading Style Sheets
when
browsers support it, it will specify the type of blending mode used for the mask border — luminance or alpha: mask-border-mode: luminance; mask-border-mode: alpha; specifications specification status comment css masking module level 1the definition of 'mask-border-mode' in that specification.
mask-border-outset - CSS: Cascading Style Sheets
mask-border-outset: 1rem; chromium-based
browsers support an outdated version of this property — mask-box-image-outset — with a prefix: -webkit-mask-box-image-outset: 1rem; note: the mask-border page features a working example (using the out-of-date prefixed border mask properties supported in chromium), so you can get an idea of the effect.
mask-border-repeat - CSS: Cascading Style Sheets
mask-border-repeat: round; chromium-based
browsers support an outdated version of this property — mask-box-image-repeat — with a prefix: -webkit-mask-box-image-repeat: round; note: the mask-border page features a working example (using the out-of-date prefixed border mask properties supported in chromium), so you can get an idea of the effect.
mask-border-slice - CSS: Cascading Style Sheets
mask-border-slice: 30 fill; chromium-based
browsers support an outdated version of this property — mask-box-image-slice — with a prefix: -webkit-mask-box-image-slice: 30 fill; note: the mask-border page features a working example (using the out-of-date prefixed border mask properties supported in chromium), so you can get an idea of the effect.
mask-border-source - CSS: Cascading Style Sheets
mask-border-source: url(image.jpg); chromium-based
browsers support an outdated version of this property — mask-box-image-source — with a prefix: -webkit-mask-box-image-source: url(image.jpg); note: the mask-border page features a working example (using the out-of-date prefixed border mask properties supported in chromium), so you can get an idea of the effect.
mask-border-width - CSS: Cascading Style Sheets
mask-border-width: 30 fill; chromium-based
browsers support an outdated version of this property — mask-box-image-width — with a prefix: -webkit-mask-box-image-width: 20px; note: the mask-border page features a working example (using the out-of-date prefixed border mask properties supported in chromium), so you can get an idea of the effect.
resize - CSS: Cascading Style Sheets
or 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.
table-layout - CSS: Cascading Style Sheets
syntax /* keyword values */ table-layout: auto; table-layout: fixed; /* global values */ table-layout: inherit; table-layout: initial; table-layout: unset; values auto by default, most
browsers use an automatic table layout algorithm.
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 formal syntax start | end | left | right | center | justify | match-parent examples left alignment html <p class="example"> integer elementum massa at nulla...
text-decoration - CSS: Cascading Style Sheets
be careful when removing the text decoration on anchors since users often depend on the underline to denote hyperlinks.</p> <p class="underover">this text has lines above <em>and</em> below it.</p> <p class="thick">this text has a really thick purple underline in supporting
browsers.</p> <p class="blink">this text might blink for you, depending on the
browser you use.</p> specifications specification status comment css text decoration module level 4 working draft adds text-decoration-thickness; note that this isn't yet officially part of the shorthand — this is as yet unspecified.
text-justify - CSS: Cascading Style Sheets
auto the
browser chooses the best type of justification for the current situation based on a balance between performance and quality, but also on what is most appropriate for the language of the text (e.g., english, cjk languages, etc.).
white-space - CSS: Cascading Style Sheets
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 html <div id="css-code" class="box"> p { white-space: <select> <option>normal</option> <option>nowrap</option> <option>pre</option> <option>pre-wrap</option> <option>pre-line</option> <option>break-spaces</option> </select> } </div> <div id="results" class="box"> <p> lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod temp...
word-spacing - CSS: Cascading Style Sheets
syntax /* keyword value */ word-spacing: normal; /* <length> values */ word-spacing: 3px; word-spacing: 0.3em; /* <percentage> values */ word-spacing: 50%; word-spacing: 200%; /* global values */ word-spacing: inherit; word-spacing: initial; word-spacing: unset; values normal the normal inter-word spacing, as defined by the current font and/or the
browser.
writing-mode - CSS: Cascading Style Sheets
rtical-rl; -ms-writing-mode: vertical-rl; } .example.text4 span, .example.text4 { writing-mode: sideways-lr; -webkit-writing-mode: sideways-lr; -ms-writing-mode: sideways-lr; } .example.text5 span, .example.text5 { writing-mode: sideways-rl; -webkit-writing-mode: sideways-rl; -ms-writing-mode: sideways-rl; } result this image shows what the output should look like, in case your
browser's support for writing-mode is incomplete: specifications specification status comment css writing modes level 4the definition of 'writing-mode' in that specification.
CSS: Cascading Style Sheets
css among the core languages of the open web and is standardized across web
browsers according to the w3c specification.
Demos of open web technologies
ansformations using foreignobject (visual effects and transforms) 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 transformers movie trailer a scanner darkly movie trailer (with built in controls) events firing and volume control dragable and sizable videos 3d graphics webgl web audio fireworks ioquake3 (source code) escher puzzle (source code) kai 'opua (source code) virtual reality the polar sea (source code) sechelt fly-through (source code) css c...
math:min() - EXSLT
specifications exslt - math:min
browser compatibility supported in gecko 1.9 and later.
Ajax - Developer guides
when these technologies are combined in the ajax model, web applications are able to make quick, incremental updates to the user interface without reloading the entire
browser page.
DOM onevent handlers - Developer guides
recommendation
browser compatibility detecting the presence of event handler properties you can detect the presence of an event handler property with the javascript in operator.
Graphics on the Web - Developer guides
webrtc the rtc in webrtc stands for real-time communications, a technology that enables audio/video streaming and data sharing between
browser clients (peers).
Content categories - Developer guides
note: the <hgroup> element was removed from the w3c html specification prior to html 5 being finalized, but is still part of the whatwg specification and is at least partially supported by most
browsers.
Rich-Text Editing in Mozilla - Developer guides
resources mozilla.org's rich-text editing specification mozilla.org's rich-text editing demo converting an app using document.designmode from ie to mozilla at mozilla.org designmode msdn: how to create an html editor application a closed source, cross-
browser rich-text editing demo xbdesignmode; a javascript helper class for easier cross-
browser development using designmode.
XHTML - Developer guides
instead, even though the documents are written to conform 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.
Printing - Developer guides
<link href="/path/to/print.css" media="print" rel="stylesheet" /> using media queries to improve layout detecting print requests some
browsers (including firefox 6 and later and internet explorer) send beforeprint and afterprint events to let content determine when printing may have occurred.
The Web Open Font Format (WOFF) - Developer guides
both proprietary and free software
browser vendors like the woff format, so it has the potential of becoming a truly universal, interoperable font format for the web, unlike other current font formats.
HTML attribute: accept - HTML: Hypertext Markup Language
ficedocument.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.
<dialog>: The Dialog element - HTML: Hypertext Markup Language
ox = document.queryselector('output'); var selectel = document.queryselector('select'); var confirmbtn = document.getelementbyid('confirmbtn'); // "update details" button opens the <dialog> modally updatebutton.addeventlistener('click', function onopen() { if (typeof favdialog.showmodal === "function") { favdialog.showmodal(); } else { alert("the <dialog> api is not supported by this
browser"); } }); // "favorite animal" input sets the value of the submit button selectel.addeventlistener('change', function onselect(e) { confirmbtn.value = selectel.value; }); // "confirm" button of form triggers "close" on dialog because of [method="dialog"] favdialog.addeventlistener('close', function onclose() { outputbox.value = favdialog.returnvalue + " button clicked - " + (new date()).tost...
<figure>: The Figure with Optional Caption element - HTML: Hypertext Markup Language
examples images <!-- just an image --> <figure> <img src="https://udn.realityripple.com/samples/6c/98485e5d8a.png" alt="the beautiful mdn logo."> </figure> <!-- image with a caption --> <figure> <img src="https://udn.realityripple.com/samples/6c/98485e5d8a.png" alt="the beautiful mdn logo."> <figcaption>mdn logo</figcaption> </figure> code snippets <figure> <figcaption>get
browser details using <code>navigator</code>.</figcaption> <pre> function navigatorexample() { var txt; txt = "
browser codename: " + navigator.appcodename + "; "; txt+= "
browser name: " + navigator.appname + "; "; txt+= "
browser version: " + navigator.appversion + "; "; txt+= "cookies enabled: " + navigator.cookieenabled + "; "; txt+= "platform: " + navigator.platform + "; "; txt+= "us...
<output>: The Output element - HTML: Hypertext Markup Language
<form oninput="result.value=parseint(a.value)+parseint(b.value)"> <input type="range" id="b" name="b" value="50" /> + <input type="number" id="a" name="a" value="10" /> = <output name="result" for="a b">60</output> </form> accessibility concerns many
browsers implement this element as an aria-live region.
<rt>: The Ruby Text element - HTML: Hypertext Markup Language
examples this simple example provides romaji transliteration for the kanji characters within the <ruby> element: <ruby> 漢 <rt>kan</rt> 字 <rt>ji</rt> </ruby> body { font-size: 22px; } the output looks like this in your
browser: on a
browser without ruby support, this example might look like this: 漢 kan 字 ji body { font-size: 22px; } specifications specification status comment html living standardthe definition of '<rt>' in that specification.
<wbr> - HTML: Hypertext Markup Language
the html <wbr> element represents a word break opportunity—a position within text where the
browser may optionally break a line, though its line-breaking rules would not otherwise create a break at that location.
title - HTML: Hypertext Markup Language
"">hovering here will show nothing.</p> </div> result accessibility concerns use of the title attribute is highly problematic for: people using touch-only devices people navigating with keyboards people navigating with assistive technology such as screen readers or magnifiers people experiencing fine motor control impairment people with cognitive concerns this is due to inconsistent
browser support, compounded by the additional assistive technology parsing of the
browser-rendered page.
translate - HTML: Hypertext Markup Language
although not all
browsers recognize this attribute, it is respected by automatic translation systems such as google translate, and may also be respected by tools used by human translators.
Link types: dns-prefetch - HTML: Hypertext Markup Language
the dns-prefetch keyword for the rel attribute of the <link> element is a hint to
browsers that the user is likely to need resources from the target resource's origin, and therefore the
browser can likely improve the user experience by preemptively performing dns resolution for that origin.
Link types: noopener - HTML: Hypertext Markup Language
the noopener keyword for the rel attribute of the <a>, <area>, and <form> elements instructs the
browser to navigate to the target resource without granting the new browsing context access to the document that opened it — by not setting the window.opener property on the opened window (it returns null).
Link types: noreferrer - HTML: Hypertext Markup Language
the noreferrer keyword for the rel attribute of the <a>, <area>, and <form> elements instructs the
browser, when navigating to the target resource, to omit the referer header and otherwise leak no referrer information — and additionally to behave as if the noopener keyword were also specified.
Link types: preconnect - HTML: Hypertext Markup Language
the preconnect keyword for the rel attribute of the <link> element is a hint to
browsers that the user is likely to need resources from the target resource's origin, and therefore the
browser can likely improve the user experience by preemptively initiating a connection to that origin.
Link types: prefetch - HTML: Hypertext Markup Language
the prefetch keyword for the rel attribute of the <link> element is a hint to
browsers that the user is likely to need the target resource for future navigations, and therefore the
browser can likely improve the user experience by preemptively fetching and caching the resource.
Link types: preload - HTML: Hypertext Markup Language
the preload keyword for the rel attribute of the <link> element indicates the user is highly likely to require the target resource for the current navigation, and therefore the
browser must preemptively fetch and cache the resource.
Link types: prerender - HTML: Hypertext Markup Language
the prerender keyword for the rel attribute of the <link> element is a hint to
browsers that the user might need the target resource for the next navigation, and therefore the
browser can likely improve the user experience by preemptively fetching and processing the resource — for example, by fetching its subresources or performing some rendering in the background offscreen.
Common MIME types - HTTP
browsers pay a particular care when manipulating these files, attempting to safeguard the user to prevent dangerous behaviors.
Accept-Language - HTTP
browsers set adequate values for this header according to their user interface language and even if a user can change it, this happens rarely (and is frowned upon as it leads to fingerprinting).
Accept - HTTP
browsers set adequate values for this header depending on the context where the request is done: when fetching a css stylesheet a different value is set for the request than when fetching an image, video or a script.
Access-Control-Request-Headers - HTTP
the access-control-request-headers request header is used by
browsers when issuing a preflight request, to let the server know which http headers the client might send when the actual request is made.
Server - HTTP
however, exposed apache versions helped
browsers work around a bug those versions had with content-encoding combined with range.
SourceMap - HTTP
the sourcemap http response header links generated code to a source map, enabling the
browser to reconstruct the original source and present the reconstructed original in the debugger.
Transfer-Encoding - HTTP
like the compress program, which has disappeared from most unix distributions, this content-encoding is used by almost no
browsers today, partly because of a patent issue (which expired in 2003).
Protocol upgrade mechanism - HTTP
other than the upgrade and connection headers, the rest are generally optional or handled for you by the
browser and server when they're talking to each other.
Proxy servers and tunneling - HTTP
proxy auto-configuration (pac) a proxy auto-configuration (pac) file is a javascript function that determines whether web
browser requests (http, https, and ftp) go directly to the destination or are forwarded to a web proxy server.
A typical HTTP session - HTTP
sending a client request once the connection is established, the user-agent can send the request (a user-agent is typically a web
browser, but can be anything else, a crawler, for example).
205 Reset Content - HTTP
status 205 reset content specifications specification title rfc 7231, section 6.3.6: 205 reset content hypertext transfer protocol (http/1.1): semantics and content compatibility notes
browser behavior differs if this response erroneously includes a body on persistent connections see 204 no content for more detail.
301 Moved Permanently - HTTP
a
browser redirects to this page and search engines update their links to the resource (in 'seo-speak', it is said that the 'link-juice' is sent to the new url).
302 Found - HTTP
a
browser redirects to this page but search engines don't update their links to the resource (in 'seo-speak', it is said that the 'link-juice' is not sent to the new url).
304 Not Modified - HTTP
many developer tools' network panels of
browsers create extraneous requests leading to 304 responses, so that access to the local cache is visible to developers.
308 Permanent Redirect - HTTP
a
browser redirects to this page and search engines update their links to the resource (in 'seo-speak', it is said that the 'link-juice' is sent to the new url).
407 Proxy Authentication Required - HTTP
the http 407 proxy authentication required client error status response code indicates that the request has not been applied because it lacks valid authentication credentials for a proxy server that is between the
browser and the server that can access the requested resource.
408 Request Timeout - HTTP
this response is used much more since some
browsers, like chrome, firefox 27+, and ie9, use http pre-connection mechanisms to speed up surfing.
416 Range Not Satisfiable - HTTP
content-range: bytes */12777 faced with this error,
browsers usually either abort the operation (for example, a download will be considered as non-resumable) or ask for the whole document again.
Numbers and dates - JavaScript
octal syntax isn't part of ecmascript 5, but it's supported in all
browsers by prefixing the octal number with a zero: 0644 === 420 and "\045" === "%".
Groups and ranges - JavaScript
== null); using named groups let personlist = `first_name: john, last_name: doe first_name: jane, last_name: smith`; let regexpnames = /first_name: (?<firstname>\w+), last_name: (?<lastname>\w+)/mg; let match = regexpnames.exec(personlist); do { console.log(`hello ${match.groups.firstname} ${match.groups.lastname}`); } while((match = regexpnames.exec(personlist)) !== null); note: not all
browsers support this feature; refer to the compatibility table.
Unicode property escapes - JavaScript
note: some unicode properties encompasses much more characters than some character classes (such as \w which matches only latin letters, a to z) but the latter is better supported among
browsers (as of january 2020).
Classes - JavaScript
support in
browsers is limited, but the feature can be used through a build step with systems like babel.
Warning: String.x is deprecated; use String.prototype.x instead - JavaScript
examples deprecated syntax var num = 15; string.replace(num, /5/, '2'); standard syntax var num = 15; string(num).replace(/5/, '2'); shim the following is a shim to provide support to non-supporting
browsers: /*globals define*/ // assumes all supplied string instance methods already present // (one may use shims for these if not available) (function() { 'use strict'; var i, // we could also build the array of methods with the following, but the // getownpropertynames() method is non-shimable: // object.getownpropertynames(string).filter(function(methodname) { // return type...
arguments[@@iterator]() - JavaScript
syntax arguments[symbol.iterator]() examples iteration using for...of loop function f() { // your
browser must support for..of loop // and let-scoped variables in for loops for (let letter of arguments) { console.log(letter); } } f('w', 'y', 'k', 'o', 'p'); specifications specification ecmascript (ecma-262)the definition of 'createunmappedargumentsobject' in that specification.
Array.prototype.map() - JavaScript
// in
browsers that support object.defineproperty, use the following: // object.defineproperty(a, k, { // value: mappedvalue, // writable: true, // enumerable: true, // configurable: true // }); // for best
browser support, use the following: a[k] = mappedvalue; } // d.
Atomics - JavaScript
(most
browsers will not allow wait() on the
browser's main thread.) atomics.xor() computes a bitwise xor on the value at the specified index of the array with the provided value.
Date.now() - JavaScript
engines which have not been updated to support this method can work around the absence of this method using the following shim: if (!date.now) { date.now = function now() { return new date().gettime(); }; } examples reduced time precision to offer protection against timing attacks and fingerprinting, the precision of date.now() might get rounded depending on
browser settings.
Date.prototype.toISOString() - JavaScript
this.getutcseconds()) + '.' + (this.getutcmilliseconds() / 1000).tofixed(3).slice(2, 5) + 'z'; }; })(); } examples using toisostring() let today = new date('05 october 2011 14:48 utc') console.log(today.toisostring()) // returns 2011-10-05t14:48:00.000z the above example uses parsing of a non–standard string value that may not be correctly parsed in non–mozilla
browsers.
Date.prototype.toLocaleDateString() - JavaScript
ew date(date.utc(2012, 11, 12, 3, 0, 0)); // tolocaledatestring() without arguments depends on the implementation, // the default locale, and the default time zone console.log(date.tolocaledatestring()); // → "12/11/2012" if run in en-us locale with time zone america/los_angeles checking for support for locales and options arguments the locales and options arguments are not supported in all
browsers yet.
Date.prototype.toLocaleTimeString() - JavaScript
ew date(date.utc(2012, 11, 12, 3, 0, 0)); // tolocaletimestring() without arguments depends on the implementation, // the default locale, and the default time zone console.log(date.tolocaletimestring()); // → "7:00:00 pm" if run in en-us locale with time zone america/los_angeles checking for support for locales and options arguments the locales and options arguments are not supported in all
browsers yet.
FinalizationRegistry - JavaScript
there are also situations where even implementations that normally call cleanup callbacks are unlikely to call them: when the javascript program shuts down entirely (for instance, closing a tab in a
browser).
Function - JavaScript
eatefunction1() { var x = 20; return new function('return x;'); // this |x| refers global |x| } function createfunction2() { var x = 20; function f() { return x; // this |x| refers local |x| above } return f; } var f1 = createfunction1(); console.log(f1()); // 10 var f2 = createfunction2(); console.log(f2()); // 20 while this code works in web
browsers, f1() will produce a referenceerror in node.js, as x will not be found.
Intl.Collator() constructor - JavaScript
mple demonstrates the different potential results for a string occurring before, after, or at the same level as another: console.log(new intl.collator().compare('a', 'c')); // → a negative value console.log(new intl.collator().compare('c', 'a')); // → a positive value console.log(new intl.collator().compare('a', 'a')); // → 0 note that the results shown in the code above can vary between
browsers and
browser versions.
Intl.Collator - JavaScript
mple demonstrates the different potential results for a string occurring before, after, or at the same level as another: console.log(new intl.collator().compare('a', 'c')); // → a negative value console.log(new intl.collator().compare('c', 'a')); // → a positive value console.log(new intl.collator().compare('a', 'a')); // → 0 note that the results shown in the code above can vary between
browsers and
browser versions.
Intl.DateTimeFormat - JavaScript
ormat(date)); // → "2:00:00.200 pm aedt" // sometimes even the us needs 24-hour time options = { year: 'numeric', month: 'numeric', day: 'numeric', hour: 'numeric', minute: 'numeric', second: 'numeric', hour12: false, timezone: 'america/los_angeles' }; console.log(new intl.datetimeformat('en-us', options).format(date)); // → "12/19/2012, 19:00:00" // to specify options but use the
browser's default locale, use 'default' console.log(new intl.datetimeformat('default', options).format(date)); // → "12/19/2012, 19:00:00" // sometimes it's helpful to include the period of the day options = {hour: "numeric", dayperiod: "short"}; console.log(new intl.datetimeformat('en-us', options).format(date)); // → 10 at night the used calendar and numbering formats can also be set independent...
JSON.stringify() - JavaScript
"quux", foo: "bar" }) //'{"baz":"quux","foo":"bar"}' console.log(a !== b) // true // some memoization functions use json.stringify to serialize arguments, // which may cause a cache miss when encountering the same object like above example of using json.stringify() with localstorage in a case where you want to store an object created by your user and allowing it to be restored even after the
browser has been closed, the following example is a model for the applicability of json.stringify(): // creating an example of json var session = { 'screens': [], 'state': true }; session.screens.push({ 'name': 'screena', 'width': 450, 'height': 250 }); session.screens.push({ 'name': 'screenb', 'width': 650, 'height': 350 }); session.screens.push({ 'name': 'screenc', 'width': 750, 'height': 120 }); ...
String.fromCodePoint() - JavaScript
polyfill the string.fromcodepoint() method has been added to ecmascript 2015 and may not be supported in all web
browsers or environments yet.
String.prototype.match() - JavaScript
using named capturing groups in
browsers which support named capturing groups, the following code captures "fox" or "cat" into a group named "animal": const paragraph = 'the quick brown fox jumps over the lazy dog.
String.prototype.repeat() - JavaScript
but anyway, most current (august 2014)
browsers can't handle // strings 1 << 28 chars or longer, so: if (str.length * count >= 1 << 28) throw new rangeerror('repeat count must not overflow maximum string size'); var maxcount = str.length * count; count = math.floor(math.log(count) / math.log(2)); while (count) { str += str; count--; } str += str.substring(0, maxcount - str.length); return s...
Symbol.toStringTag - JavaScript
torclass()); // "[object object]" custom tag with tostringtag now, with the help of tostringtag, you are able to set your own custom tag: class validatorclass { get [symbol.tostringtag]() { return 'validator'; } } object.prototype.tostring.call(new validatorclass()); // "[object validator]" tostringtag available on all dom prototype objects due to a webidl spec change in mid-2020,
browsers are adding a symbol.tostringtag property to all dom prototype objects.
TypedArray.prototype[@@iterator]() - JavaScript
examples iteration using for...of loop var arr = new uint8array([10, 20, 30, 40, 50]); // your
browser must support for..of loop // and let-scoped variables in for loops for (let n of arr) { console.log(n); } alternative iteration var arr = new uint8array([10, 20, 30, 40, 50]); var earr = arr[symbol.iterator](); console.log(earr.next().value); // 10 console.log(earr.next().value); // 20 console.log(earr.next().value); // 30 console.log(earr.next().value); // 40 console.log(earr.next().value); // 50 specifications specification ecmascr...
TypedArray.prototype.entries() - JavaScript
examples iteration using for...of loop var arr = new uint8array([10, 20, 30, 40, 50]); var earray = arr.entries(); // your
browser must support for..of loop // and let-scoped variables in for loops for (let n of earray) { console.log(n); } alternative iteration var arr = new uint8array([10, 20, 30, 40, 50]); var earr = arr.entries(); console.log(earr.next().value); // [0, 10] console.log(earr.next().value); // [1, 20] console.log(earr.next().value); // [2, 30] console.log(earr.next().value); // [3, 40] console.log(earr.
TypedArray.prototype.keys() - JavaScript
examples iteration using for...of loop var arr = new uint8array([10, 20, 30, 40, 50]); var earray = arr.keys(); // your
browser must support for..of loop // and let-scoped variables in for loops for (let n of earray) { console.log(n); } alternative iteration var arr = new uint8array([10, 20, 30, 40, 50]); var earr = arr.keys(); console.log(earr.next().value); // 0 console.log(earr.next().value); // 1 console.log(earr.next().value); // 2 console.log(earr.next().value); // 3 console.log(earr.next().value); // 4 speci...
TypedArray.prototype.toString() - JavaScript
compatibility if a
browser doesn't support the typedarray.prototype.tostring() method yet, javascript will call the tostring method of object: var numbers = new uint8array([2, 5, 8, 1, 4]) numbers.tostring(); // "[object uint8array]" specifications specification ecmascript (ecma-262)the definition of 'array.prototype.tostring' in that specification.
TypedArray.prototype.values() - JavaScript
examples iteration using for...of loop var arr = new uint8array([10, 20, 30, 40, 50]); var earray = arr.values(); // your
browser must support for..of loop // and let-scoped variables in for loops for (let n of earray) { console.log(n); } alternative iteration var arr = new uint8array([10, 20, 30, 40, 50]); var earr = arr.values(); console.log(earr.next().value); // 10 console.log(earr.next().value); // 20 console.log(earr.next().value); // 30 console.log(earr.next().value); // 40 console.log(earr.next().value); // 50 ...
undefined - JavaScript
in modern
browsers (javascript 1.8.5 / firefox 4+), undefined is a non-configurable, non-writable property, per the ecmascript 5 specification.
void operator - JavaScript
javascript uris when a
browser follows a javascript: uri, it evaluates the code in the uri and then replaces the contents of the page with the returned value, unless the returned value is undefined.
for...in - JavaScript
deleted, added, or modified properties a for...in loop iterates over the properties of an object in an arbitrary order (see the delete operator for more on why one cannot depend on the seeming orderliness of iteration, at least in a cross-
browser setting).
switch - JavaScript
block-scope variables within switch statements with ecmascript 2015 (es6) support made available in most modern
browsers, there will be cases where you would want to use let and const statements to declare block-scoped variables.
dir - Web app manifests
the dir member can be set to one of the following values: auto — text direction is determined by the user agent ltr — left to right rtl — right to left the directionality-capable members are: name short_name description note: if the value is omitted or set to auto, the
browser will use the unicode bidirectional algorithm to make a best guess about the text's direction.
scope - Web app manifests
if the user navigates outside the scope, it reverts to a normal web page inside a
browser tab or window.
Web app manifests
browsers generally support manifests with other appropriate extensions like .json (content-type: application/json).
<maction> - MathML
possible values are: statusline: if there is a click on the expression or the reader moves the pointer over it, the message is sent to the
browser's status line.
<menclose> - MathML
possible values are: value sample rendering rendering in your
browser description longdiv (default) a2 + b2 long division symbol actuarial a2 + b2 actuarial symbol radical a2 + b2 square root symbol.
<mfrac> - MathML
examples sample rendering: your
browser rendering: a b c d <math> <mfrac bevelled="true"> <mfrac> <mi> a </mi> <mi> b </mi> </mfrac> <mfrac> <mi> c </mi> <mi> d </mi> </mfrac> </mfrac> </math> specifications specification status comment mathml 3.0the definition of 'mfrac' in that specification.
<mmultiscripts> - MathML
examples using <mprescripts/> sample rendering: rendering in your
browser: x d c b a <math> <mmultiscripts> <mi>x</mi> <!-- base expression --> <mi>d</mi> <!-- postsubscript --> <mi>c</mi> <!-- postsuperscript --> <mprescripts /> <mi>b</mi> <!-- presubscript --> <mi>a</mi> <!-- presuperscript --> </mmultiscripts> </math> using <none/> sample rendering: rendering in your br...
<mover> - MathML
examples sample rendering: rendering in your
browser: x + y + z ⏞ <math> <mover accent="true"> <mrow> <mi> x </mi> <mo> + </mo> <mi> y </mi> <mo> + </mo> <mi> z </mi> </mrow> <mo> ⏞ <!--top curly bracket--> </mo> </mover> </math> specifications specification status comment mathml 3.0the definition of 'mover' in that specification.
<mphantom> - MathML
examples sample rendering: rendering in your
browser: x + y + z <math> <mrow> <mi> x </mi> <mo> + </mo> <mphantom> <mi> y </mi> <mo> + </mo> </mphantom> <mi> z </mi> </mrow> </math> specifications specification status comment mathml 3.0the definition of 'mphantom' in that specification.
<mroot> - MathML
examples sample rendering: rendering in your
browser: x 3 <math> <mroot> <mi>x</mi> <mn>3</mn> </mroot> </math> specifications specification status comment mathml 3.0the definition of 'mroot' in that specification.
<msqrt> - MathML
examples sample rendering: rendering in your
browser: x <math> <msqrt> <mi>x</mi> </msqrt> </math> specifications specification status comment mathml 3.0the definition of 'msqrt' in that specification.
<msub> - MathML
examples sample rendering: rendering in your
browser: x 1 <math> <msub> <mi>x</mi> <mn>1</mn> </msub> </math> specifications specification status comment mathml 3.0the definition of 'msub' in that specification.
<msubsup> - MathML
examples sample rendering: rendering in your
browser: ∫ 0 1 <math displaystyle="true"> <msubsup> <mo> ∫<!--integral --> </mo> <mn> 0 </mn> <mn> 1 </mn> </msubsup> </math> specifications specification status comment mathml 3.0the definition of 'msubsup' in that specification.
<msup> - MathML
examples sample rendering: rendering in your
browser: x 2 <math> <msup> <mi>x</mi> <mn>2</mn> </msup> </math> specifications specification status comment mathml 3.0the definition of 'msup' in that specification.
<munder> - MathML
examples sample rendering: rendering in your
browser: x + y + z ⏟ <math> <munder accentunder="true"> <mrow> <mi> x </mi> <mo> + </mo> <mi> y </mi> <mo> + </mo> <mi> z </mi> </mrow> <mo> ⏟ <!--bottom curly bracket--> </mo> </munder> </math> specifications specification status comment mathml 3.0the definition of 'munder' in that specification.
<munderover> - MathML
examples sample rendering: rendering in your
browser: ∫ 0 ∞ <math displaystyle="true"> <munderover > <mo> ∫ <!--integral--> </mo> <mn> 0 </mn> <mi> ∞ <!--infinity--> </mi> </munderover> </math> specifications specification status comment mathml 3.0the definition of 'munderover' in that specification.
<pattern> - SVG: Scalable Vector Graphics
value type: <url>; default value: none; animatable: yes note: for
browsers implementing href, if both href and xlink:href are set, xlink:href will be ignored and only href will be used.
<script> - SVG: Scalable Vector Graphics
while svg's script element is equivalent to the html <script> element, it has some discrepancies, like it uses the href attribute instead of src and it doesn't support ecmascript modules so far (see
browser compatibility below for details) html,body,svg { height:100% } <svg viewbox="0 0 10 10" xmlns="http://www.w3.org/2000/svg"> <script> // <![cdata[ window.addeventlistener('domcontentloaded', () => { function getcolor () { const r = math.round(math.random() * 255).tostring(16).padstart(2,'0') const g = math.round(math.random() * 255).tostring(16).padstart(2,'0') const b = math.round(math.random() * 255).tostring(16).padstart(2,'0') return `#${r}${g}${b}` } document.queryselec...
Linking - SVG: Scalable Vector Graphics
tml: <html> <body> <p>this is a svg button:</p> <object width="100" height="50" type="image/svg+xml" data="button.svg"/> </body> </html> button.svg: <?xml version="1.1" encoding="utf-8"?> <svg xmlns="http://www.w3.org/2000/svg"> <a xlink:href="page2.html" target="_top"> <g> <!-- button graphical elements here --> </g> </a> </svg> the specification says that the
browser should navigate to the html document page2.html when the button graphics are clicked.
Namespaces crash course - SVG: Scalable Vector Graphics
versions of svg viewers prior to the release of firefox 1.5 unfortunately paid scant attention to namespaces, but they are essential to multi-xml dialect supporting user agents such as gecko-based
browsers which must be very strict.
SVG as an Image - SVG: Scalable Vector Graphics
many
browsers support svg images in: html <img> or <svg> elements css background-image gecko-specific contexts additionally, gecko 2.0 (firefox 4 / thunderbird 3.3 / seamonkey 2.1) introduced support for using svg in these contexts: css list-style-image css content svg <image> element svg <feimage> element canvas drawimage function restrictions for security purposes, gecko places some restrictions on svg content when it's being used as an image: javascript is disabled.
Paths - SVG: Scalable Vector Graphics
this interactive demo might help understand the concepts behind svg arcs: http://codepen.io/lingtalfi/pen/yalwjg (tested in chrome and firefox only, might not work in your
browser) « previousnext » ...
Mixed content - Web security
malicious active content can steal the user's credentials, acquire sensitive data about the user, or attempt to install malware on the user's system (by leveraging vulnerabilities in the
browser or its plugins, for example).
Securing your site - Web security
the x-frame-options response header the x-frame-options: http response header can be used to indicate whether or not a
browser should be allowed to render a page in a <frame>.