Search completed in 1.89 seconds.
What is the difference between webpage, website, web server, and search engine? - Learn web development
in this article, we describe various
web-related concepts:
web pages,
websites,
web servers, and search engines.
... these terms are often confused by newcomers to the
web or are incorrectly used.
... objective: be able to describe the differences between a
web page, a
website, a
web server, and a search engine.
...And 36 more matches
The web and web standards - Learn web development
this article provides some useful background on the
web — how it came about, what
web standard technologies are, how they work together, why "
web developer" is a great career to choose, and what kinds of best practices you'll learn about through the course.
... brief history of the
web we'll keep this very brief, as there are many (more) detailed accounts of the
web's history out there, which we'll link to later on (also try searching for "history of the
web" in your favorite search engine and see what you get, if you are interested in more detail.) in the late 1960s, the us military developed a communication network called arpanet.
... this can be considered a forerunner of the
web, as it worked on packet switching, and featured the first implementation of the tcp/ip protocol suite.
...And 48 more matches
Web Video Text Tracks Format (WebVTT) - Web APIs
web video text tracks format (
webvtt) is a format for displaying timed text tracks (such as subtitles or captions) using the <track> element.
... the primary purpose of
webvtt files is to add text overlays to a <video>.
...
webvtt is a text based format, which must be encoded using utf-8.
...And 41 more matches
WebGL: 2D and 3D graphics for the web - Web APIs
webgl (
web graphics library) is a javascript api for rendering high-performance interactive 3d and 2d graphics within any compatible
web browser without the use of plug-ins.
...
webgl does so by introducing an api that closely conforms to opengl es 2.0 that can be used in html5 <canvas> elements.
... support for
webgl is present in firefox 4+, google chrome 9+, opera 12+, safari 5.1+, internet explorer 11+, and microsoft edge build 10240+; however, the user's device must also have hardware that supports these features.
...And 33 more matches
The WebSocket API (WebSockets) - Web APIs
the
websocket api is an advanced technology that makes it possible to open a two-way interactive communication session between the user's browser and a server.
... note: while a
websocket connection is functionally somewhat similar to standard unix-style sockets, they are not related.
... interfaces
websocket the primary interface for connecting to a
websocket server and then sending and receiving data on the connection.
...And 16 more matches
World Wide Web - MDN Web Docs Glossary: Definitions of Web-related terms
the world wide
web—commonly referred to as www, w3, or the
web—is an interconnected system of public
webpages accessible through the internet.
... the
web is not the same as the internet: the
web is one of many applications built on top of the internet.
... tim berners-lee proposed the architecture of what became known as the world wide
web.
...And 9 more matches
WEBGL_draw_buffers.drawBuffersWEBGL() - Web APIs
the
webgl_draw_buffers.drawbuffers
webgl() method is part of the
webgl api and allows you to define the draw buffers to which all fragment colors are written.
... this method is part of the
webgl_draw_buffers extension.
... note: when using
webgl2, this method is available as gl.drawbuffers() by default and the constants are named gl.color_attachment1 etc.
...And 6 more matches
WebKit - MDN Web Docs Glossary: Definitions of Web-related terms
webkit is a framework that displays properly-formatted
webpages based on their markup.
... apple safari depends on
webkit, and so do many mobile browsers (since
webkit is highly portable and customizable).
...
webkit began life as a fork of kde's khtml and kjs libraries, but many individuals and companies have since contributed (including kde, apple, google, and nokia).
...And 3 more matches
WebGL - MDN Web Docs Glossary: Definitions of Web-related terms
webgl (
web graphics library) is a javascript api that draws interactive 2d and 3d graphics.
... the khronos group maintains
webgl, which is based on opengl es 2.0.
... you can invoke
webgl within the html <canvas> element, which provides a rendering surface.
...And 2 more matches
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.
...
webdav is rarely used alone, but two extensions are very common: caldav (remote-access calendar) and carddav (remote-access address book).
...
webdav allows clients to add, delete, and retrieve
webpage metadata (e.g.
... author or creation date) link pages of any media type to related pages create sets of documents and retrieve hierarchical list copy and move
webpages lock a document from being edited by more than one person at a time learn more general knowledge
webdav on wikipedia technical reference rfc 2518 rfc 3253 rfc 3744 ...
WebSockets - MDN Web Docs Glossary: Definitions of Web-related terms
websocket is a protocol that allows for a persistent tcp connection between server and client so they can exchange data at any time.
... any client or server application can use
websocket, but principally
web browsers and
web servers.
... through
websocket, servers can pass data to a client without prior client request, allowing for dynamic content updates.
... learn more general knowledge
websocket on wikipedia technical reference
websocket reference on mdn learn about it writing
websocket client applications writing
websocket servers ...
Web standards - MDN Web Docs Glossary: Definitions of Web-related terms
web standards are rules established by international standards bodies and defining how how the
web works (and sometimes controlling the internet as well).
... several standards bodies are responsible for defining different aspects of the
web, and all the standards must coordinate to keep the
web maximally usable and accessible.
...
web standards also must evolve to improve the current status and adapt to new circumstances.
... 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 management, and user-interface design learn more general knowledge
web standards on wikipedia ...
Progressive web apps - MDN Web Docs Glossary: Definitions of Web-related terms
progressive
web apps is a term used to describe the modern state of
web app development.
... this involves taking standard
web sites/apps that enjoy all the best parts of the
web — such as discoverability via search engines, being linkable via urls, and working across multiple form factors — and supercharging them with modern apis (such as service workers and push) and features that confer other benefits more commonly attributed to native apps.
... learn more the app center on mdn progressive
web apps on google developers ...
WebIDL - MDN Web Docs Glossary: Definitions of Web-related terms
webidl is the interface description language used to describe the data types, interfaces, methods, properties, and other components which make up a
web application programming interface (api).
...
webidl is used in nearly every api specification for the
web, and due to its standard format and syntax, the programmers who create
web browsers can more easily ensure that their browsers are compatible with one another, regardless of how they choose to write the code to implement the api.
... learn more technical reference specification
webidl bindings
webidl ...
WebRTC - MDN Web Docs Glossary: Definitions of Web-related terms
webrtc (
web real-time communication) is an api that can be used by video-chat, voice-calling, and p2p-file-sharing
web apps.
...
webrtc consists mainly of these parts: getusermedia() grants access to a device's camera and/or microphone, and can plug in their signals to a rtc connection.
... learn more
webrtc on wikipedia
webrtc api on mdn browser support for
webrtc ...
Codecs used by WebRTC - Web media technologies
the
webrtc api makes it possible to construct
web sites and apps that let users communicate in real time, using audio and/or video as well as optional data and other information.
...this guide reviews the codecs that browsers are required to implement as well as other codecs that some or all browsers support for
webrtc.
... containerless media
webrtc uses bare mediastreamtrack objects for each track being shared from one peer to another, without a container or even a mediastream associated with the tracks.
...And 47 more matches
Starting up and shutting down a WebXR session - Web APIs
assuming you're already familiar with 3d graphics in general and
webgl in particular, taking that next bold step into mixed reality—the idea of presenting artificial scenery or objects in addition to or in place of the real world—is not overly complicated.
... before you can begin to render your augmented or virtual reality scenario, you need to create and set up the
webxr session, and you should know how to shut it down properly as well.
... accessing the
webxr api your app's access to the
webxr api begins with the xrsystem object.
...And 44 more matches
WebGL constants - Web APIs
the
webgl api provides several constants that are passed into or returned by functions.
... standard
webgl constants are installed on the
webglrenderingcontext and
webgl2renderingcontext objects, so that you use them as gl.constant_name: var canvas = document.getelementbyid('mycanvas'); var gl = canvas.getcontext('
webgl'); gl.getparameter(gl.line_width); some constants are also provided by
webgl extensions.
... var debuginfo = gl.getextension('
webgl_debug_renderer_info'); var vendor = gl.getparameter(debuginfo.unmasked_vendor_
webgl); the
webgl tutorial has more information, examples, and resources on how to get started with
webgl.
...And 42 more matches
Movement, orientation, and motion: A WebXR example - Web APIs
in this article, we'll make use of information introduced in the previous articles in our
webxr tutorial series to construct an example which animates a rotating cube around which the user can move freely using a vr headset, keyboard, and/or mouse.
... screenshot of this example in action the core of this example—the spinning, textured, lighted cube—is taken from our
webgl tutorial series; namely, the penultimate article in the series, covering lighting in
webgl.
... when rendering the left eye, the xr
webgllayer has its viewport configured to restrict drawing to the left half of the drawing surface.
...And 42 more matches
Web video codec guide - Web media technologies
this guide introduces the video codecs you're most likely to encounter or consider using on the
web, summaries of their capabilities and any compatibility and utility concerns, and advice to help you choose the right codec for your project's video.
... common codecs the following video codecs are those which are most commonly used on the
web.
... codec name (short) full codec name container support av1 aomedia video 1 mp4,
webm avc (h.264) advanced video coding 3gp, mp4,
webm h.263 h.263 video 3gp hevc (h.265) high efficiency video coding mp4 mp4v-es mpeg-4 video elemental stream 3gp, mp4 mpeg-1 mpeg-1 part 2 visual mpeg, quicktime mpeg-2 mpeg-2 part 2 visual mp4, mpeg, quicktime theora theora ogg vp8 video processor 8 3gp...
...And 42 more matches
Introduction to progressive web apps - Progressive web apps (PWAs)
overview: progressive
web apps next this article provides an introduction to progressive
web apps (pwas), discussing what they are and the advantages they offer over regular
web apps.
... what is a progressive
web app?
... the term "progressive
web app" isn't a formal or official name.
...And 40 more matches
Writing WebSocket servers - Web APIs
a
websocket server is nothing more than an application listening on any port of a tcp server that follows a specific protocol.
... the task of creating a custom server tends to scare people; however, it can be straightforward to implement a simple
websocket server on your platform of choice.
... a
websocket server can be written in any server-side programming language that is capable of berkeley sockets, such as c(++), python, php, or server-side javascript.
...And 39 more matches
WebXR Device API - Web APIs
webxr is a group of standards which are used together to support rendering 3d scenes to hardware designed for presenting virtual worlds (virtual reality, or vr), or for adding graphical imagery to the real world, (augmented reality, or ar).
... the
webxr device api implements the core of the
webxr feature set, managing the selection of output devices, render the 3d scene to the chosen device at the appropriate frame rate, and manage motion vectors created using input controllers.
...
webxr-compatible devices include fully-immersive 3d headsets with motion and orientation tracking, eyeglasses which overlay graphics atop the real world scene passing through the frames, and handheld mobile phones which augment reality by capturing the world with a camera and augment that scene with computer-generated imagery.
...And 38 more matches
Using the WebAssembly JavaScript API - WebAssembly
if you have already compiled a module from another language using tools like emscripten, or loaded and run the code yourself, the next step is to learn more about using the other features of the
webassembly javascript api.
... note: if you are unfamiliar with the basic concepts mentioned in this article and need more explanation, read
webassembly concepts first, then come back.
... some simple examples let’s run through some examples that explain how to use the
webassembly javascript api, and how to use it to load a wasm module in a
web page.
...And 37 more matches
WebGL best practices - Web APIs
webgl is a complicated api, and it's often not obvious what the recommended ways to use it are.
... general topics address and eliminate
webgl errors your application should run without generating any
webgl errors (as returned by geterror).
... every
webgl error is reported in the
web console as a javascript warning with a descriptive message.
...And 36 more matches
Introduction to web APIs - Learn web development
overview: client-side
web apis next first up, we'll start by looking at apis from a high level — what are they, how do they work, how to use them in your code, and how are they structured?
...they generally fall into two categories: browser apis are built into your
web browser and are able to expose data from the browser and surrounding computer environment and do useful complex things with it.
... for example, the
web audio api provides javascript constructs for manipulating audio in the browser — taking an audio track, altering its volume, applying effects to it, etc.
...And 35 more matches
What is a web server? - Learn web development
in this article, we explain what
web servers are, how
web servers work, and why they are important.
... prerequisites: you should already know how the internet works, and understand the difference between a
web page, a
web site, a
web server, and a search engine.
... objective: you will learn what a
web server is and gain a general understanding of how it works.
...And 34 more matches
Website security - Learn web development
previous overview: first steps
website security requires vigilance in all aspects of
website design and usage.
... this introductory article won't make you a
website security guru, but it will help you understand where threats come from, and what you can do to harden your
web application against the most common attacks.
... objective: to understand the most common threats to
web application security and what you can do to reduce the risk of your site being hacked.
...And 32 more matches
WebGLRenderingContext.getParameter() - Web APIs
the
webglrenderingcontext.getparameter() method of the
webgl api returns a value for the passed parameter name.
... parameter names
webgl 1 you can query the following pname parameters when using a
webglrenderingcontext.
... constant returned type description gl.active_texture glenum gl.aliased_line_width_range float32array (with 2 elements) gl.aliased_point_size_range float32array (with 2 elements) gl.alpha_bits glint gl.array_buffer_binding
webglbuffer gl.blend glboolean gl.blend_color float32array (with 4 values) gl.blend_dst_alpha glenum gl.blend_dst_rgb glenum gl.blend_equation glenum gl.blend_equation_alpha glenum gl.blend_equation_rgb glenum gl.blend_src_alpha glenum gl.blend_src_rgb glenum gl.blue_bits glint gl.color_clear_value float32a...
...And 29 more matches
Viewpoints and viewers: Simulating cameras in WebXR - Web APIs
the first and most important thing to understand when considering the code to manage point-of-view and cameras in your application is this:
webxr does not have cameras.
... there's no magic object provided by either the
webgl or the
webxr api that represents the viewer that you can simply rotate and move around to automatically change what's seen on the screen.
... in this guide we show how use
webgl to simulate camera movements without having a camera to move.
...And 29 more matches
Fundamentals of WebXR - Web APIs
webxr, with the
webxr device api at its core, provides the functionality needed to bring both augmented and virtual reality (ar and vr) to the
web.
... in this guide, we provide a fundamental overview of what
webxr is and how it works, as well as providing a foundation for what you'll need to know before you even begin to learn to develop augmented reality and virtual reality experiences for the
web.
... what
webxr is and isn't
webxr is an api for
web content and apps to use to interface with mixed reality hardware such as vr headsets and glasses with integrated augmented reality features.
...And 29 more matches
WebRTC API - Web APIs
webrtc (
web real-time communication) is a technology which enables
web applications and sites to capture and optionally stream audio and/or video media, as well as to exchange arbitrary data between browsers without requiring an intermediary.
... the set of standards that comprise
webrtc makes it possible to share data and perform teleconferencing peer-to-peer, without requiring that the user installs plug-ins or any other third-party software.
...
webrtc consists of several interrelated apis and protocols which work together to achieve this.
...And 27 more matches
Web fonts - Learn web development
in this article we will go further, exploring
web fonts in detail — these allow you to download custom fonts along with your
web page, to allow for more varied, custom text styling.
... objective: to learn how to apply
web fonts to a
web page, using either a third party service, or by writing your own code.
...this takes one or more font family names, and the browser travels down the list until it finds a font it has available on the system it is running on: p { font-family: helvetica, "trebuchet ms", verdana, sans-serif; } this system works well, but traditionally
web developers' font choices were limited.
...And 25 more matches
Publishing your website - Learn web development
previous overview: getting started with the
web next once you finish writing the code and organizing the files that make up your
website, you need to put it all online so people can find it.
... publishing a
website is a complex topic because there are many ways to go about it.
... getting hosting and a domain name to have more control over content and
website appearance, most people choose to buy
web hosting and a domain name:
web hosting is rented file space on a hosting company's
web server.
...And 24 more matches
Web Audio API - Web APIs
the
web audio api provides a powerful and versatile system for controlling audio on the
web, allowing developers to choose audio sources, add effects to audio, create audio visualizations, apply spatial effects (such as panning) and much more.
...
web audio concepts and usage the
web audio api involves handling audio operations inside an audio context, and has been designed to allow modular routing.
... audio nodes are linked into chains and simple
webs by their inputs and outputs.
...And 24 more matches
Structural overview of progressive web apps - Progressive web apps (PWAs)
while progressive
web apps (pwas) can do anything any
web content can do, they need to have a particular structure and include specific components in order to be recognized as a
web app that can be used both on the
web and installed and run as a local application.
... in this structural overview, we'll look at the features that make up a standard
web application, as well as some design patterns you can follow when building your pwa.
... architecture of an app there are two main, different approaches to rendering a
website — on the server or on the client.
...And 24 more matches
How the Web works - Learn web development
previous overview: getting started with the
web how the
web works provides a simplified view of what happens when you view a
webpage in a
web browser on your computer or phone.
... 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.
... clients and servers computers connected to the
web are called clients and servers.
...And 23 more matches
Geometry and reference spaces in WebXR - Web APIs
at a fundamental level, rendering of scenes for
webxr presentation in either augmented reality or virtual reality contexts is performed using
webgl, so the two apis share much of the same design language.
... however, in order to provide the ability to present scenes in true 3d using xr headsets and other such equipment,
webxr has additional concepts that must be understood.
... in this article, we introduce the ways in which
webxr expands upon the geometry of
webgl, and how the positions and orientations of objects—both physical and virtual—are described in relation to one another using spaces and, in particular, reference spaces.
...And 23 more matches
Migrating from webkitAudioContext - Web APIs
the
web audio api went through many iterations before reaching its current state.
... it was first implemented in
webkit, and some of its older parts were not immediately removed as they were replaced in the specification, leading to many sites using non-compatible code.
... in this article, we cover the differences in
web audio api since it was first implemented in
webkit and how to update your code to use the modern
web audio api.
...And 23 more matches
Progressive web app structure - Progressive web apps (PWAs)
previous overview: progressive
web apps next now that we know the theory behind pwas, let's look at the recommended structure of an actual app.
... architecture of an app there are two main, different approaches to rendering a
website — on the server or on the client.
... server-side rendering (ssr) means a
website is rendered on the server, so it offers quicker first load, but navigating between pages requires downloading new html content.
...And 23 more matches
Web audio codec guide - Web media technologies
for
web developers, an even bigger concern is the network bandwidth needed in order to transfer audio, whether for streaming or to download it for use during gameplay.
...in this article, we look at audio codecs used on the
web to compress and decompress audio, what their capabilities and use cases are, and offer guidance when choosing audio codecs to use for your content.
... additionally,
webrtc implementations generally use a subset of these codecs for their encoding and decoding of media, and may support additional codecs as well, for optimal cross-platform support of video and audio conferencing, and to integrate better with legacy telecommunication solutions.
...And 22 more matches
Rendering and the WebXR frame animation callback - Web APIs
once your
webxr environment has been set up and an xrsession created to represent an ongoing xr environment session, you need to provide frames of the scene to the xr device for rendering.
... before you can render the virtual environment, you need to establish a
webxr session by creating an xrsession using the navigator.xr.requestsession() method; you also need to associate the session with a framebuffer and perform other setup tasks.
... these setup tasks are described in the article setting up and shutting down a
webxr session.
...And 21 more matches
Compiling from Rust to WebAssembly - WebAssembly
if you have some rust code, you can compile it into
webassembly (wasm).
... this tutorial takes you through all you need to know to compile a rust project to wasm and use it in an existing
web app.
... rust and
webassembly use cases there are two main use cases for rust and
webassembly: to build an entire application — an entire
web app based in rust.
...And 21 more matches
Using the Web Audio API - Web APIs
let's take a look at getting started with the
web audio api.
... the
web audio api does not replace the <audio> media element, but rather complements it, just like <canvas> coexists alongside the <img> element.
...if you simply want to control playback of an audio track, the <audio> media element provides a better, quicker solution than the
web audio api.
...And 20 more matches
Document and website structure - Learn web development
previous overview: introduction to html next in addition to defining individual parts of your page (such as "a paragraph" or "an image"), html also boasts a number of block level elements used to define areas of your
website (such as "the header", "the navigation menu", "the main content column").
... this article looks into how to plan a basic
website structure, and write the html to represent this structure.
... objective: learn how to structure your document using semantic tags, and how to work out the structure of a simple
website.
...And 19 more matches
Web Authentication API - Web APIs
the
web authentication api is an extension of the credential management api that enables strong authentication with public key cryptography, enabling passwordless authentication and/or secure second-factor authentication without sms texts.
...
web authentication concepts and usage the
web authentication api (also referred to as
webauthn) uses asymmetric (public-key) cryptography instead of passwords or sms texts for registering, authenticating, and second-factor authentication with
websites.
... many
websites already have pages that allow users to register new accounts or sign in to an existing account, and the
web authentication api acts as a replacement or supplement to those on those existing
webpages.
...And 19 more matches
How much does it cost to do something on the Web? - Learn web development
getting involved on the
web isn't as cheap as it looks.
... prerequisites: you should already understand what software you need, the difference between a
webpage, a
website, etc., and what a domain name is.
... objective: review the complete process for creating a
website and find out how much each step can cost.
...And 18 more matches
How do I start to design my website? - Learn web development
prerequisites: none objective: learn to define goals to give direction to your
web project.
... summary when starting with a
web project, many people focus on the technical side.
... so when you get an idea and want to turn it into a
website, there are a few questions you should answer before anything else: what exactly do i want to accomplish?
...And 18 more matches
WebSocket - Web APIs
the
websocket object provides the api for creating and managing a
websocket connection to a server, as well as for sending and receiving data on the connection.
... to construct a
websocket, use the
websocket() constructor.
... constructor
websocket(url[, protocols]) returns a newly created
websocket object.
...And 18 more matches
Using the Web Animations API - Web APIs
the
web animations api lets us construct animations and control their playback with javascript.
... meet the
web animations api the
web animations api opens the browser’s animation engine to developers and manipulation by javascript.
...it is one of the most performant ways to animate on the
web, letting the browser make its own internal optimizations without hacks, coercion, or window.requestanimationframe().
...And 18 more matches
Getting started with the Web - Learn web development
getting started with the
web is a concise series introducing you to the practicalities of
web development.
... you'll set up the tools you need to construct a simple
webpage and publish your own simple code.
... the story of your first
website it's a lot of work to create a professional
website, so if you're new to
web development, we encourage you to start small.
...And 17 more matches
WebGL model view projection - Web APIs
this article explores how to take data within a
webgl project, and project it into the proper spaces to display it on the screen.
... the model, view, and projection matrices individual transformations of points and polygons in space in
webgl are handled by the basic transformation matrices like translation, scale, and rotation.
... clip space in a
webgl program, data is typically uploaded to the gpu with its own coordinate system and then the vertex shader transforms those points into a special coordinate system known as clip space.
...And 17 more matches
What software do I need to build a website? - Learn web development
in this article we lay out which software components you need when you're editing, uploading, or viewing a
website.
... prerequisites: you should already know the difference between
webpages,
websites,
web servers, and search engines.
... objective: learn which software components you need if you want to edit, upload, or view a
website.
...And 16 more matches
Writing WebSocket client applications - Web APIs
websocket client applications use the
websocket api to communicate with
websocket servers using the
websocket protocol.
... note: this feature is available in
web workers.
... note: the example snippets in this article are taken from our
websocket chat client/server sample.
...And 16 more matches
How do you make sure your website works properly? - Learn web development
in this article we go over various troubleshooting steps for a
website and some basic actions to take in order to solve these issues.
... prerequisites: you need to know how to upload files to a
web server.
... objective: you will learn how to diagnose and resolve some basic issues you can run into with your
website.
...And 15 more matches
Web performance - Learn web development
building
websites requires html, css, and javascript.
... to build
websites and applications people want to use, which attract and retain users, you need to create a good user experience.
...this is known as
web performance, and in this module you'll focus on the fundamentals of how to create performant
websites.
...And 15 more matches
WebGLRenderingContext.makeXRCompatible() - Web APIs
the
webglrenderingcontext method makexrcompatible() ensures that the rendering context described by the
webglrenderingcontext is ready to render the scene for the immersive
webxr device on which it will be displayed.
... if necessary, the
webgl layer may reconfigure the context to be ready to render to a different device than it originally was.
... syntax let makecompatpromise =
webglrenderingcontext.makexrcompatible(); parameters none.
...And 15 more matches
Adding 2D content to a WebGL context - Web APIs
« previousnext » once you've successfully created a
webgl context, you can start rendering into it.
... there are two shader functions run when drawing
webgl content: the vertex shader and the fragment shader.
... you write these in glsl and pass the text of the code into
webgl to be compiled for execution on the gpu.
...And 15 more matches
Using textures in WebGL - Web APIs
ew uint8array([0, 0, 255, 255]); // opaque blue gl.teximage2d(gl.texture_2d, level, internalformat, width, height, border, srcformat, srctype, pixel); const image = new image(); image.onload = function() { gl.bindtexture(gl.texture_2d, texture); gl.teximage2d(gl.texture_2d, level, internalformat, srcformat, srctype, image); //
webgl1 has different requirements for power of 2 images // vs non power of 2 images so check if the image is a // power of 2 in both dimensions.
...ge gl.texparameteri(gl.texture_2d, gl.texture_wrap_s, gl.clamp_to_edge); gl.texparameteri(gl.texture_2d, gl.texture_wrap_t, gl.clamp_to_edge); gl.texparameteri(gl.texture_2d, gl.texture_min_filter, gl.linear); } }; image.src = url; return texture; } function ispowerof2(value) { return (value & (value - 1)) == 0; } the loadtexture() routine starts by creating a
webgl texture object texture by calling the
webgl createtexture() function.
...
webgl1 can only use non power of 2 textures with filtering set to nearest or linear and it can not generate a mipmap for them.
...And 15 more matches
WebVR — Virtual Reality for the Web - Game development
the concept of virtual reality in itself isn't new, but now we have the technology to have it working as it should be, and a javascript api to make use of it in
web applications.
... this article introduced
webvr from the perspective of its use in games.
...there are many devices to chose from: desktop ones like oculus rift or htc vive, through consoles with playstation vr (which admittedly doesn't support
webvr at this time), to mobile experiences like gear vr or google cardboard.
...And 14 more matches
How do you upload your files to a web server? - Learn web development
prerequisites: you must know what a
web server is and how domain names work.
... you must also know how to set up a basic environment and how to write a simple
webpage.
... summary if you have built a simple
web page (see html basics for an example), you will probably want to put it online, on a
web server.
...And 14 more matches
What will your website look like? - Learn web development
previous overview: getting started with the
web next what will your
website look like?
... discusses the planning and design work you have to do for your
website before writing code, including "what information does my
website offer?", "what fonts and colors do i want?", and "what does my site do?" first things first: planning before doing anything, you need some ideas.
... what should your
website actually do?
...And 14 more matches
What is web performance? - Learn web development
previous overview: performance next
web performance is all about making
web sites fast, including making slow processes seem fast.
...this article provides a brief introduction to objective, measureable
web performance*, looking at what technologies, techniques, and tools are involved in
web optimization.
... prerequisites: basic computer literacy, basic software installed, and basic knowledge of client-side
web technologies.
...And 14 more matches
WebGLRenderingContext.texImage2D() - Web APIs
the
webglrenderingcontext.teximage2d() method of the
webgl api specifies a two-dimensional texture image.
... syntax //
webgl1: void gl.teximage2d(target, level, internalformat, width, height, border, format, type, arraybufferview?
...pixels); //
webgl2: void gl.teximage2d(target, level, internalformat, width, height, border, format, type, glintptr offset); void gl.teximage2d(target, level, internalformat, width, height, border, format, type, htmlcanvaselement source); void gl.teximage2d(target, level, internalformat, width, height, border, format, type, htmlimageelement source); void gl.teximage2d(target, level, internalformat, width, height...
...And 14 more matches
WebGLRenderingContext.vertexAttribPointer() - Web APIs
the
webglrenderingcontext.vertexattribpointer() method of the
webgl api binds the buffer currently bound to gl.array_buffer to a generic vertex attribute of the current vertex buffer object and specifies its layout.
...possible values: gl.byte: signed 8-bit integer, with values in [-128, 127] gl.short: signed 16-bit integer, with values in [-32768, 32767] gl.unsigned_byte: unsigned 8-bit integer, with values in [0, 255] gl.unsigned_short: unsigned 16-bit integer, with values in [0, 65535] gl.float: 32-bit ieee floating point number when using a
webgl 2 context, the following values are available additionally: gl.half_float: 16-bit ieee floating point number normalized a glboolean specifying whether integer data values should be normalized into a certain range when being cast to a float.
... a gl.invalid_operation error is thrown if no
webglbuffer is bound to the array_buffer target.
...And 14 more matches
Lifetime of a WebRTC session - Web APIs
webrtc lets you build peer-to-peer communication of arbitrary data, audio, or video—or any combination thereof—into a browser application.
... in this article, we'll look at the lifetime of a
webrtc session, from establishing the connection all the way through closing the connection when it's no longer needed.
... this article doesn't get into details of the actual apis involved in establishing and handling a
webrtc connection; it simply reviews the process in general with some information about why each step is required.
...And 14 more matches
The "why" of web performance - Learn web development
overview: performance next
web performance is all about making
websites fast, including making slow processes seem fast.
... this article provides an introduction into why
web performance is important to site visitors and for your business goals.
... prerequisites: basic computer literacy, basic software installed, and basic knowledge of client-side
web technologies.
...And 13 more matches
Web-based protocol handlers - Web APIs
background it's fairly common to find
web pages link to resources using non-http protocols.
... an example is the mailto: protocol: <a href="mailto:
webmaster@example.com">
web master</a>
web authors can use a mailto: link when they want to provide a convenient way for users to send an email, directly from the
webpage.
...
web-based protocol handlers allow
web-based applications to participate in the process too.
...And 13 more matches
Server-side website programming first steps - Learn web development
we then provide an overview of some of the most popular server-side
web frameworks, along with guidance on how to select the most suitable framework for creating your first site.
... finally, we provide a high-level introductory article about
web server security.
... prerequisites before starting this module, you don't need to have any knowledge of server-side
website programming, or indeed any other type of programming.
...And 12 more matches
WEBGL_draw_buffers - Web APIs
the
webgl_draw_buffers extension is part of the
webgl api and enables a fragment shader to write to several textures, which is useful for deferred shading, for example.
...
webgl extensions are available using the
webglrenderingcontext.getextension() method.
... for more information, see also using extensions in the
webgl tutorial.
...And 12 more matches
Loading and running WebAssembly code - WebAssembly
to use
webassembly in javascript, you first need to pull your module into memory before compilation/instantiation.
... this article provides a reference for the different mechanisms that can be used to fetch
webassembly bytecode, as well as how to compile/instantiate then run it.
...
webassembly is not yet integrated with <script type='module'> or es2015 import statements, thus there is not a path to have the browser fetch modules for you using imports.
...And 12 more matches
WebGLRenderingContext.bufferData() - Web APIs
the
webglrenderingcontext.bufferdata() method of the
webgl api initializes and creates the buffer object's data store.
... syntax //
webgl1: void gl.bufferdata(target, size, usage); void gl.bufferdata(target, arraybuffer?
... srcdata, usage); void gl.bufferdata(target, arraybufferview srcdata, usage); //
webgl2: void gl.bufferdata(target, arraybufferview srcdata, usage, srcoffset, length); parameters target a glenum specifying the binding point (target).
...And 11 more matches
WebGLRenderingContext.isEnabled() - Web APIs
the
webglrenderingcontext.isenabled() method of the
webgl api tests whether a specific
webgl capability is enabled or not for this context.
... syntax glboolean gl.isenabled(cap); parameters cap a glenum specifying which
webgl capability to test.
...see
webglrenderingcontext.blendfunc().
...And 11 more matches
WebGL tutorial - Web APIs
webgl enables
web content to use an api based on opengl es 2.0 to perform 3d rendering in an html <canvas> in browsers that support it without the use of plug-ins.
...
webgl programs consist of control code written in javascript and special effects code (shader code) that is executed on a computer's graphics processing unit (gpu).
...
webgl elements can be mixed with other html elements and composited with other parts of the page or page background.
...And 11 more matches
Spaces and reference spaces: Spatial tracking in WebXR - Web APIs
the
webxr apis used for implementing augmented and virtual reality is designed specifically to provide the ability to insert a human into a virtual environment.
...but
webxr goes beyond that by adding the ability to track the location, orientation, and motion of the input devices which generate data used to determine the position and movement of individual parts of the viewer's body (with appropriate equipment).
... in this guide, we'll explore how
webxr uses spaces and, more specifically, reference spaces, to track the positions, orientations, and movements of objects and of the user's body in the virtual world.
...And 11 more matches
Using Web Workers - Web APIs
web workers are a simple means for
web content to run scripts in background threads.
...this article provides a detailed introduction to using
web workers.
...
web workers api a worker is an object created using a constructor (e.g.
...And 11 more matches
Installing and uninstalling web apps - Progressive web apps (PWAs)
web application installation is a feature available in modern browsers that allows users to choose to easily and conveniently “install” a
web application on their device so they can access it in the same way they would any other installed app.
... depending on the device and features of the operating system and browser, this can result in what is essentially a fully featured application (for example, using
webapk on android) or as a shortcut added to their device’s screen.
... the option to install a
web application is part of the progressive
web app philosophy—giving
web apps the same user experience advantages as native apps so they can be competitive.
...And 11 more matches
Compiling an Existing C Module to WebAssembly - WebAssembly
a core use-case for
webassembly is to take the existing ecosystem of c libraries and allow developers to use them on the
web.
... as an example, let's compile an encoder for
webp to wasm.
... the source for the
webp codec is written in c and available on github as well as some extensive api documentation.
...And 11 more matches
Adding vector graphics to the Web - Learn web development
in this article we'll show you how to include one in your
webpage.
... objective: learn how to embed an svg (vector) image into a
webpage.
... note: this article doesn't intend to teach you svg; just what it is, and how to add it to
web pages.
...And 10 more matches
WebGLRenderingContext.getUniformLocation() - Web APIs
part of the
webgl api, the
webglrenderingcontext method getuniformlocation() returns the location of a specific uniform variable which is part of a given
webglprogram.
... the uniform variable is returned as a
webgluniformlocation object, which is an opaque identifier used to specify where in the gpu's memory that uniform variable is located.
... syntax
webgluniformlocation =
webglrenderingcontext.getuniformlocation(program, name); parameters program the
webglprogram in which to locate the specified uniform variable.
...And 10 more matches
Getting started with WebGL - Web APIs
next »
webgl enables
web content to use an api based on opengl es 2.0 to perform 2d and 3d rendering in an html canvas in browsers that support it without the use of plug-ins.
...
webgl programs consist of control code written in javascript and shader code (glsl) that is executed on a computer's graphics processing unit (gpu).
...
webgl elements can be mixed with other html elements and composited with other parts of the page or page background.
...And 10 more matches
Using WebGL extensions - Web APIs
webgl, like its sister apis (opengl and opengl es), supports extensions.
... a complete list of extensions is available in the khronos
webgl extension registry.
... note: in
webgl, unlike in other gl apis, extensions are only available if explicitly requested.
...And 10 more matches
Web Audio API best practices - Web APIs
in this article, we'll share a number of best practices — guidelines, tips, and tricks for working with the
web audio api.
... loading sounds/files there are four main ways to load sound with the
web audio api and it can be a little confusing as to which one you should use.
...you can see an example of how to use this with the
web audio api in the using the
web audio api tutorial.
...And 10 more matches
XRWebGLLayer.framebuffer - Web APIs
the read-only xr
webgllayer property framebuffer is an opaque
webglframebuffer which is used to buffer the rendered image if the xr compositor is being used.
...the opaque framebuffer is functionally nearly the same as a standard
webgl framebuffer, except for the differences covered in the section how opaque framebuffers are special below.
... syntax let framebuffer = xr
webgllayer.framebuffer; value a
webglframebuffer object representing the framebuffer into which the 3d scene is being rendered, or null if the xr compositor is disabled for the session.
...And 10 more matches
XRWebGLLayer - Web APIs
the xr
webgllayer interface of the
webxr device api provides a linkage between the
webxr device (or simulated xr device, in the case of an inline session) and a
webgl context used to render the scene for display on the device.
... in particular, it provides access to the
webgl framebuffer and viewport to ease access to the context.
... although xr
webgllayer is currently the only type of framebuffer layer supported by
webgl, it's entirely possible that future updates to the
webxr specification may allow for other layer types and corresponding image sources.
...And 10 more matches
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.
... most major
websites use some kind of server-side technology to dynamically display data as required.
... in the modern world of
web development, learning about server-side development is highly recommended.
...And 9 more matches
WebGLRenderingContext.disable() - Web APIs
the
webglrenderingcontext.disable() method of the
webgl api disables specific
webgl capabilities for this context.
... syntax void gl.disable(cap); parameters cap a glenum specifying which
webgl capability to disable.
...see
webglrenderingcontext.blendfunc().
...And 9 more matches
WebGLRenderingContext.enable() - Web APIs
the
webglrenderingcontext.enable() method of the
webgl api enables specific
webgl capabilities for this context.
... syntax void gl.enable(cap); parameters cap a glenum specifying which
webgl capability to enable.
...see
webglrenderingcontext.blendfunc().
...And 9 more matches
WebGLRenderingContext.getFramebufferAttachmentParameter() - Web APIs
the
webglrenderingcontext.getframebufferattachmentparameter() method of the
webgl api returns information about a framebuffer's attachment.
... when using a
webgl 2 context, the following values are available additionally: gl.draw_framebuffer: equivalent to gl.framebuffer.
... when using a
webgl 2 context, the following values are available additionally: gl.color_attachment1 gl.color_attachment2 gl.color_attachment3 gl.color_attachment4 gl.color_attachment5 gl.color_attachment6 gl.color_attachment7 gl.color_attachment8 gl.color_attachment9 gl.color_attachment10 gl.color_attachment11 gl.color_attachment12 gl.color_attac...
...And 9 more matches
Detect WebGL - Web APIs
« previousnext » this example demonstrates how to detect a
webgl rendering context and reports the result to the user.
... feature-detecting
webgl in this first example we are going to check whether the browser supports
webgl.
... to that end we will try to obtain the
webgl rendering context from a canvas element.
...And 9 more matches
Using WebRTC data channels - Web APIs
once you've established a
webrtc peer connection using the rtcpeerconnection interface, you're able to send and receive media data between the two peers on the connection.
... but there's a lot more you can do with
webrtc.
... since all
webrtc components are required to use encryption, any data transmitted on an rtcdatachannel is automatically secured using datagram transport layer security (dtls).
...And 9 more matches
Using the Web Speech API - Web APIs
the
web speech api provides two distinct areas of functionality — speech recognition, and speech synthesis (also known as text to speech, or tts) — which open up interesting new possibilities for accessibility, and control mechanisms.
... the
web speech api has a main controller interface for this — speechrecognition — plus a number of closely-related interfaces for representing grammar, results, etc.
... note: on some browsers, like chrome, using speech recognition on a
web page involves a server-based recognition engine.
...And 9 more matches
Front-end web developer - Learn web development
welcome to our front-end
web developer learning pathway!
... here we provide you with a structured course that will teach you all you need to know to become a front-end
web developer.
... subjects covered the subjects covered are: basic setup and learning how to learn
web standards and best practices (such as accessibility and cross-browser compatibility) html, the language that gives
web content structure and meaning css, the language used to style
web pages javascript, the scripting language used to create dynamic functionality on the
web tooling that is used to facilitate modern client-side
web development.
...And 8 more matches
Structuring the web with HTML - Learn web development
to build
websites, you should know about html — the fundamental technology used to define the structure of a
webpage.
... html is used to specify whether your
web content should be recognized as a paragraph, list, heading, link, image, multimedia player, form, or one of many other available elements or even a new element that you define.
... looking to become a front-end
web developer?
...And 8 more matches
The business case for web performance - Learn web development
previous overview: performance we've discussed the importance of
web performance.
... you've learned what you need to do to optimize for
web performance.
... prerequisites: basic computer literacy, basic knowledge of client-side
web technologies, and a basic understanding of
web performance optimization.
...And 8 more matches
Web Push API Notifications best practices - Web APIs
this article provides a useful summary of best practices to keep in mind when developing
web sites and applications that use push notifications for user engagement.
... overview of
web push notifications
web push notifications (created using a combination of the notifications, push, and service worker apis) are part of the rising noise that product developers and marketers are using to get attention for their sites.
... searching the
web for "
web push notifications," you'll find articles from marketing experts who believe you should use push to re-engage people who have left your site so they can complete a purchase, or be sent the latest news, or receive links to recommended products.
...And 8 more matches
WEBGL_depth_texture - Web APIs
the
webgl_depth_texture extension is part of the
webgl api and defines 2d depth and depth-stencil textures.
...
webgl extensions are available using the
webglrenderingcontext.getextension() method.
... for more information, see also using extensions in the
webgl tutorial.
...And 8 more matches
WebGLActiveInfo - Web APIs
the
webglactiveinfo interface is part of the
webgl api and represents the information returned by calling the
webglrenderingcontext.getactiveattrib() and
webglrenderingcontext.getactiveuniform() methods.
... properties
webglactiveinfo.name the read-only name of the requested variable.
...
webglactiveinfo.size the read-only size of the requested variable.
...And 8 more matches
WebGLRenderingContext.pixelStorei() - Web APIs
the
webglrenderingcontext.pixelstorei() method of the
webgl api specifies the pixel storage modes.
... glint 4 1, 2, 4, 8 opengl es 2.0 gl.unpack_flip_y_
webgl flips the source data along its vertical axis if true.
... glboolean false true, false
webgl gl.unpack_premultiply_alpha_
webgl multiplies the alpha channel into the other color channels glboolean false true, false
webgl gl.unpack_colorspace_conversion_
webgl default color space conversion or no color space conversion.
...And 8 more matches
WebGLRenderingContext.texSubImage2D() - Web APIs
the
webglrenderingcontext.texsubimage2d() method of the
webgl api specifies a sub-rectangle of the current texture.
... syntax //
webgl 1: void gl.texsubimage2d(target, level, xoffset, yoffset, width, height, format, type, arraybufferview?
...pixels); //
webgl 2: void gl.texsubimage2d(target, level, xoffset, yoffset, format, type, glintptr offset); void gl.texsubimage2d(target, level, xoffset, yoffset, width, height, format, type, htmlcanvaselement source); void gl.texsubimage2d(target, level, xoffset, yoffset, width, height, format, type, htmlimageelement source); void gl.texsubimage2d(target, level, xoffset, yoffset, width, height, format, type, ht...
...And 8 more matches
WebGL types - Web APIs
the following types are used in
webgl interfaces.
...
webgl 1 these types are used within a
webglrenderingcontext.
... type
web idl type description glenum unsigned long used for enums.
...And 8 more matches
Writing a WebSocket server in C# - Web APIs
introduction if you would like to use the
websocket api, it is useful if you have a server.
... first steps
websockets communicate over a tcp (transmission control protocol) connection.
...e.writeline("a client connected."); 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.
...And 8 more matches
Basic concepts behind Web Audio API - Web APIs
this article explains some of the audio theory behind how the features of the
web audio api work, to help you make informed decisions while designing how audio is routed through your app.
... it won't turn you into a master sound engineer, but it will give you enough background to understand why the
web audio api works like it does.
... audio graphs the
web audio api involves handling audio operations inside an audio context, and has been designed to allow modular routing.
...And 8 more matches
Autoplay guide for media and Web Audio APIs - Web media technologies
in this guide, we'll cover autoplay functionality in the various media and
web audio apis, including a brief overview of how to use autoplay and how to work with browsers to handle autoplay blocking gracefully.
... that means that both of the following are considered autoplay behavior, and are therefore subject to the browser's autoplay blocking policy: <audio src="/music.mp4" autoplay> and audioelement.play(); the following
web features and apis may be affected by autoplay blocking: the html <audio> and <video> elements the
web audio api from the user's perspective, a
web page or app that spontaneously starts making noise without warning can be jarring, inconvenient, or off-putting.
... for details, see the auto-play policies for google chrome and
webkit.
...And 8 more matches
Client-side web APIs - Learn web development
when writing client-side javascript for
web sites or applications, you will quickly encounter application programming interfaces (apis).
... apis are programming features for manipulating different aspects of the browser and operating system the site is running on, or manipulating data from other
web sites or services.
... looking to become a front-end
web developer?
...And 7 more matches
HTMLInputElement.webkitdirectory - Web APIs
the htmlinputelement.
webkitdirectory is a property that reflects the
webkitdirectory html attribute and indicates that the <input> element should let the user select directories instead of files.
...the selected file system entries can be obtained using the
webkitentries property.
... syntax htmlinputelement.
webkitdirectory = boolvalue value a boolean; true if the <input> element should allow picking only directories or false if only files should be selectable.
...And 7 more matches
WebGLRenderingContext.bindBuffer() - Web APIs
the
webglrenderingcontext.bindbuffer() method of the
webgl api binds a given
webglbuffer to a target.
... when using a
webgl 2 context, the following values are available additionally: gl.copy_read_buffer: buffer for copying from one buffer object to another.
... buffer a
webglbuffer to bind.
...And 7 more matches
WebGLRenderingContext.compressedTexImage[23]D() - Web APIs
the
webglrenderingcontext.compressedteximage2d() and
webgl2renderingcontext.compressedteximage3d() methods of the
webgl api specify a two- or three-dimensional texture image in a compressed format.
... compressed image formats must be enabled by
webgl extensions before using these methods.
... syntax //
webgl 1: void gl.compressedteximage2d(target, level, internalformat, width, height, border, arraybufferview?
...And 7 more matches
Establishing a connection: The WebRTC perfect negotiation pattern - Web APIs
because
webrtc doesn't mandate a specific transport mechanism for signaling during the negotiation of a new peer connection, it's highly flexible.
...this article introduces
webrtc perfect negotiation, describing how it works and why it's the recommended way to negotiate a
webrtc connection between peers, and provides sample code to demonstrate the technique.
... after the first deployments of
webrtc-capable browsers, it was realized that parts of the negotiation process were more complicated than they needed to be for typical use cases.
...And 7 more matches
Web Animations API Concepts - Web APIs
the
web animations api (waapi) provides javascript developers access to the browser’s animation engine and describes how animations should be implemented across browsers.
...to learn how to put the api to use, check out its sister article, using the
web animations api.
... the
web animations api fills the gap between declarative css animations and transitions, and dynamic javascript animations.
...And 7 more matches
Web Workers API - Web APIs
web workers makes it possible to run a script operation in a background thread separate from the main execution thread of a
web application.
...
web workers concepts and usage a worker is an object created using a constructor (e.g.
...but you can use a large number of items available under window, including
websockets, and data storage mechanisms like indexeddb.
...And 7 more matches
XRWebGLLayer() - Web APIs
the
webxr device api xr
webgllayer() constructor creates and returns a new xr
webgllayer object, providing the linkage between the
webxr device and the
webgl graphics layer used to render the 3d scene.
... syntax let gllayer = new xr
webgllayer(session, context, layerinit); parameters session an xrsession object specifying the
webxr session which will be rendered using the
webgl context.
... context a
webglrenderingcontext or
webgl2renderingcontext identifying the
webgl drawing context to use for rendering the scene for the specified
webxr session.
...And 7 more matches
XRWebGLLayer.getNativeFramebufferScaleFactor() static method - Web APIs
the static method xr
webgllayer.getnativeframebufferscalefactor() returns a floating-point scaling factor by which one can multiply the specified xrsession's resolution to get the native resolution of the
webxr device's frame buffer.
... this information can be used when creating a new xr
webgllayer to configure the xr
webgllayerinit property framebufferscalefactor in the options specified when calling the xr
webgllayer() constructor.
... syntax let nativescaling = xr
webgllayer.getnativeframebufferscalefactor(session); parameters session the xrsession for which to return the native framebuffer scaling factor.
...And 7 more matches
Styling web forms - Learn web development
previous overview: forms next in the previous few articles we looked at all the html you'll need to create and structure your
web forms.
...
website owners want form styles that fit in with their overall site design more than ever, and the
web platform has changed to make this more possible.
...this decision is yours to make, as the designer of your site, or
web application.
...And 6 more matches
WEBGL_debug_renderer_info - Web APIs
the
webgl_debug_renderer_info extension is part of the
webgl api and exposes two constants with information about the graphics driver for debugging purposes.
...generally, the graphics driver information should only be used in edge cases to optimize your
webgl content or to debug gpu problems.
... the
webglrenderingcontext.getparameter() method can help you to detect which features are supported and the failifmajorperformancecaveat context attribute lets you control if a context should be returned at all, if the performance would be dramatically slow.
...And 6 more matches
WebGLRenderingContext.compressedTexSubImage2D() - Web APIs
the
webglrenderingcontext.compressedtexsubimage2d() method of the
webgl api specifies a two-dimensional sub-rectangle for a texture image in a compressed format.
... compressed image formats must be enabled by
webgl extensions before using this method or a
webgl2renderingcontext must be used.
... syntax //
webgl 1: void gl.compressedtexsubimage2d(target, level, xoffset, yoffset, width, height, format, arraybufferview?
...And 6 more matches
A basic 2D WebGL animation example - Web APIs
in this
webgl example, we create a canvas and within it render a rotating square using
webgl.
... the standard
webgl global gl_position is then set to the transformed and rotated vertex's position.
... html the html consists solely of the <canvas> that we'll obtain a
webgl context on.
...And 6 more matches
Using DTMF with WebRTC - Web APIs
in order to more fully support audio/video conferencing,
webrtc supports sending dtmf to the remote peer on an rtcpeerconnection.
... this article offers a brief high-level overview of how dtmf works over
webrtc, then provides a guide for everyday developers about how to send dtmf over an rtcpeerconnection.
...
webrtc doesn't send dtmf codes as audio data.
...And 6 more matches
Improving compatibility using WebRTC adapter.js - Web APIs
while the
webrtc specification is relatively stable, not all browsers have fully implemented all of its features.
... in addition, some browsers still have prefixes on some or all
webrtc apis.
...the
webrtc organization provides on github the
webrtc adapter to work around compatibility issues in different browsers'
webrtc implementations.
...And 6 more matches
Exported WebAssembly functions - WebAssembly
exported
webassembly functions are how
webassembly functions are represented in javascript.
... exported
webassembly functions are basically just javascript wrappers that represent
webassembly functions in javascript.
... you can retrieve exported
webassembly functions in two ways: by calling table.prototype.get() on an existing table.
...And 6 more matches
What do common web layouts contain? - Learn web development
when designing pages for your
website, it's good to have an idea of the most common layouts.
... prerequisites: make sure you've already thought about what you want to accomplish with your
web project.
... objective: learn where to put things on your
webpages, and how to put them there.
...And 5 more matches
Web forms — Working with user data - Learn web development
this module provides a series of articles that will help you master the essentials of
web forms.
...
web forms are a very powerful tool for interacting with users — most commonly they are used for collecting data from users, or allowing them to control a user interface.
...in the articles listed below, we'll cover all the essential aspects of
web forms including marking up their html structure, styling form controls, validating form data, and submitting data to the server.
...And 5 more matches
DataTransferItem.webkitGetAsEntry() - Web APIs
if the item described by the datatransferitem is a file,
webkitgetasentry() returns a filesystemfileentry or filesystemdirectoryentry representing it.
... this function is implemented as
webkitgetasentry() in non-
webkit browsers including firefox at this time; it may be renamed to simply getasentry() in the future, so you should code defensively, looking for both.
... syntax datatransferitem.
webkitgetasentry(); parameters none.
...And 5 more matches
HTMLInputElement.webkitEntries - Web APIs
the read-only
webkitentries property of the htmlinputelement interface contains an array of file system entries (as objects based on filesystementry) representing files and/or directories selected by the user using an <input> element of type file, but only if that selection was made using drag-and-drop: selecting a file in the dialog will leave the property empty (bug 1326031).
... the array can only contain directories if the
webkitdirectory property is true.
... this property is called
webkitentries in the specification due to its origins as a google chrome-specific api.
...And 5 more matches
WEBGL_compressed_texture_atc - Web APIs
the
webgl_compressed_texture_atc extension is part of the
webgl api and exposes 3 atc compressed texture formats.
...
webgl extensions are available using the
webglrenderingcontext.getextension() method.
... for more information, see also using extensions in the
webgl tutorial.
...And 5 more matches
WEBGL_lose_context - Web APIs
the
webgl_lose_context extension is part of the
webgl api and exposes functions to simulate losing and restoring a
webglrenderingcontext.
...
webgl extensions are available using the
webglrenderingcontext.getextension() method.
... for more information, see also using extensions in the
webgl tutorial.
...And 5 more matches
WebGLRenderingContext.bindFramebuffer() - Web APIs
the
webglrenderingcontext.bindframebuffer() method of the
webgl api binds a given
webglframebuffer to a target.
... when using a
webgl 2 context, the following values are available additionally: gl.draw_framebuffer: equivalent to gl.framebuffer.
... framebuffer a
webglframebuffer object to bind.
...And 5 more matches
WebGLRenderingContext.bindTexture() - Web APIs
the
webglrenderingcontext.bindtexture() method of the
webgl api binds a given
webgltexture to a target (binding point).
... when using a
webgl 2 context, the following values are available additionally: gl.texture_3d: a three-dimensional texture.
... texture a
webgltexture object to bind.
...And 5 more matches
WebGLRenderingContext.checkFramebufferStatus() - Web APIs
the
webglrenderingcontext.checkframebufferstatus() method of the
webgl api returns the completeness status of the
webglframebuffer object.
... when using a
webgl 2 context, the following values are available additionally: gl.draw_framebuffer: equivalent to gl.framebuffer.
... when using a
webgl 2 context, the following values can be returned additionally: gl.framebuffer_incomplete_multisample: the values of gl.renderbuffer_samples are different among attached renderbuffers, or are non-zero if the attached images are a mix of renderbuffers and textures.
...And 5 more matches
WebGLRenderingContext.getActiveUniform() - Web APIs
the
webglrenderingcontext.getactiveuniform() method of the
webgl api returns a
webglactiveinfo object containing size, type, and name of a uniform attribute.
... syntax
webglactiveinfo
webglrenderingcontext.getactiveuniform(program, index); parameters program a
webglprogram specifying the
webgl shader program from which to obtain the uniform variable's information.
... return value a
webglactiveinfo object describing the uniform.
...And 5 more matches
WebGLRenderingContext.getTexParameter() - Web APIs
the
webglrenderingcontext.gettexparameter() method of the
webgl api returns information about the given texture.
... when using a
webgl 2 context, the following values are available additionally: gl.texture_3d: a three-dimensional texture.
...possible values: pname return type description possible return values available in a
webgl 1 context gl.texture_mag_filter glenum texture magnification filter gl.linear (default value), gl.nearest.
...And 5 more matches
WebGLRenderingContext.getUniform() - Web APIs
the
webglrenderingcontext.getuniform() method of the
webgl api returns the value of a uniform variable at a given location.
... syntax any gl.getuniform(program, location); parameters program a
webglprogram containing the uniform attribute.
... location a
webgluniformlocation object containing the location of the uniform attribute to get.
...And 5 more matches
WebGLRenderingContext.renderbufferStorage() - Web APIs
the
webglrenderingcontext.renderbufferstorage() method of the
webgl api creates and initializes a renderbuffer object's data store.
... gl.depth_stencil when using a
webgl 2 context, the following values are available additionally: gl.r8 gl.r8ui gl.r8i gl.r16ui gl.r16i gl.r32ui gl.r32i gl.rg8 gl.rg8ui gl.rg8i gl.rg16ui gl.rg16i gl.rg32ui gl.rg32i gl.rgb8 gl.rgba8 gl.srgb8_alpha8 (also available as an extension for
webgl 1, see below) gl.rgb10_a2 gl.rgba8ui gl.rgba8i gl.rgb10_a...
...2ui gl.rgba16ui gl.rgba16i gl.rgba32i gl.rgba32ui gl.depth_component24 gl.depth_component32f gl.depth24_stencil8 gl.depth32f_stencil8 when using the
webgl_color_buffer_float extension: ext.rgba32f_ext: rgba 32-bit floating-point type.
...And 5 more matches
WebGLRenderingContext.texParameter[fi]() - Web APIs
the
webglrenderingcontext.texparameter[fi]() methods of the
webgl api set texture parameters.
... when using a
webgl 2 context, the following values are available additionally: gl.texture_3d: a three-dimensional texture.
... pname description param available in
webgl 1 gl.texture_mag_filter texture magnification filter gl.linear (default value), gl.nearest.
...And 5 more matches
WebRTC connectivity - Web APIs
this article describes how the various
webrtc-related protocols interact with one another in order to create a connection and transfer data and/or media among peers.
... signaling unfortunately,
webrtc can’t create connections without some sort of server in the middle.
... session descriptions the configuration of an endpoint on a
webrtc connection is called a session description.
...And 5 more matches
Writing a WebSocket server in Java - Web APIs
introduction this example shows you how to create a
websocket api server using oracle java.
... although other server-side languages can be used to create a
websocket server, this example uses oracle java to simplify the example code.
... first steps
websockets communicate over a tcp (transmission control protocol) connection.
...And 5 more matches
WebXR application life cycle - Web APIs
in this guide, we'll get a birds-eye view of what's involved in creating and driving a
webxr application, without diving down to the code level in detail.
... this serves as preparation for the next few articles in these
webxr guides, which cover starting up and shutting down a
webxr session, geometry, simulating cameras, spatial tracking, and more.
... life cycle outline most applications using
webxr will follow a similar overall design pattern: check to see if the user's device and browser are both capable of presenting the xr experience you want to provide.
...And 5 more matches
Lighting a WebXR setting - Web APIs
because the
webxr device api relies on other technologies—namely,
webgl and frameworks based upon it—to perform all rendering, texturing, and lighting of a scene, the same general lighting concepts apply to
webxr settings or scenes as to any other
webgl-generated display.
...the
webgl shader program takes the color, directionality, brightness, and other factors for each light source and computes the final color of each pixel.
...the rate at which the brightness of a point light falls off is called attenuation, and is a configurable feature of the light source in
webgl and other lighting systems.
...And 5 more matches
How to fix a website with blocked mixed content - Web security
this page explains what you should be aware of as a
web developer.
... 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.
... consequently, your
website may appear broken to users (if iframes or plugins don't load, etc.).
...And 5 more matches
Compiling a New C/C++ Module to WebAssembly - WebAssembly
when you’ve written a new code module in a language like c/c++, you can compile it into
webassembly using a tool like emscripten.
...there are a number of options available when compiling with emscripten, but the main two scenarios we'll cover are: compiling to wasm and creating html to run our code in, plus all the javascript "glue" code needed to run the wasm in the
web environment.
... creating html and javascript this is the simplest case we'll look at, whereby you get emscripten to generate everything you need to run your code, as
webassembly, in the browser.
...And 5 more matches
Caching compiled WebAssembly modules - WebAssembly
warning: experimental
webassembly.module indexeddb serialization support is being removed from browsers; see bug 1469395 and this spec issue.
... caching is useful for improving the performance of an app — we can store compiled
webassembly modules on the client so they don't have to be downloaded and compiled every time.
... this includes compiled wasm modules (
webassembly.module javascript objects).
...And 5 more matches
Use JavaScript within a webpage - Learn web development
take your
webpages to the next level by harnessing javascript.
... about javascript javascript is a programming language mostly used client-side to make
webpages interactive.
... you can create amazing
webpages without javascript, but javascript opens up a whole new level of possibilities.
...And 4 more matches
File.webkitRelativePath - Web APIs
the file.
webkitrelativepath is a read-only property that contains a usvstring which specifies the file's path relative to the directory selected by the user in an <input> element with its
webkitdirectory attribute set.
... syntax relativepath = file.
webkitrelativepath value a usvstring containing the path of the file relative to the ancestor directory the user selected.
... html content <input type="file" id="filepicker" name="filelist"
webkitdirectory multiple /> <ul id="listing"></ul> javascript content document.getelementbyid("filepicker").addeventlistener("change", function(event) { let output = document.getelementbyid("listing"); let files = event.target.files; for (let i=0; i<files.length; i++) { let item = document.createelement("li"); item.innerhtml = files[i].
webkitrelativepath; output.appendchild(item); }; }, false); result specifications specification status comment ...
...And 4 more matches
WEBGL_color_buffer_float - Web APIs
the
webgl_color_buffer_float extension is part of the
webgl api and adds the ability to render to 32-bit floating-point color buffers.
...
webgl extensions are available using the
webglrenderingcontext.getextension() method.
... for more information, see also using extensions in the
webgl tutorial.
...And 4 more matches
WEBGL_debug_shaders - Web APIs
the
webgl_debug_shaders extension is part of the
webgl api and exposes a method to debug shaders from privileged contexts.
... this extension is not directly available to
web sites as the way of how the shader is translated may uncover personally-identifiable information to the
web page about the kind of graphics card in the user's computer.
...
webgl extensions are available using the
webglrenderingcontext.getextension() method.
...And 4 more matches
WebGL2RenderingContext.createTransformFeedback() - Web APIs
the
webgl2renderingcontext.createtransformfeedback() method of the
webgl 2 api creates and initializes
webgltransformfeedback objects.
... syntax
webgltransformfeedback gl.createtransformfeedback(); parameters none.
... return value a
webgltransformfeedback object.
...And 4 more matches
WebGL2RenderingContext.fenceSync() - Web APIs
the
webgl2renderingcontext.fencesync() method of the
webgl 2 api creates a new
webglsync object and inserts it into the gl command stream.
... syntax
webglsync gl.fencesync(condition, flags); parameters condition a glenum specifying the condition that must be met to set the sync object's state to signaled.
... return value a
webglsync object.
...And 4 more matches
WebGL2RenderingContext.isTransformFeedback() - Web APIs
the
webgl2renderingcontext.istransformfeedback() method of the
webgl 2 api returns true if the passed object is a valid
webgltransformfeedback object.
... syntax glboolean gl.istransformfeedback(transformfeedback); parameters transformfeedback a
webgltransformfeedback object to test.
... return value a glboolean indicating whether the given object is a valid
webgltransformfeedback object (true) or not (false).
...And 4 more matches
WebGLRenderingContext.enableVertexAttribArray() - Web APIs
the
webglrenderingcontext method enablevertexattribarray(), part of the
webgl api, turns on the generic vertex attribute array at the specified index into the list of attribute arrays.
... in
webgl, values that apply to a specific vertex are stored in attributes.
...others are assigned by the
webgl layer when you create the attributes.
...And 4 more matches
WebGLRenderingContext.framebufferRenderbuffer() - Web APIs
the
webglrenderingcontext.framebufferrenderbuffer() method of the
webgl api attaches a
webglrenderbuffer object to a
webglframebuffer object.
... when using a
webgl 2 context, the following values are available additionally: gl.draw_framebuffer: equivalent to gl.framebuffer.
... when using a
webgl 2 context, the following values are available additionally: gl.color_attachment1 gl.color_attachment2 gl.color_attachment3 gl.color_attachment4 gl.color_attachment5 gl.color_attachment6 gl.color_attachment7 gl.color_attachment8 gl.color_attachment9 gl.color_attachment10 gl.color_attachment11 gl.color_attachment12 gl.color_attac...
...And 4 more matches
WebGLRenderingContext.framebufferTexture2D() - Web APIs
the
webglrenderingcontext.framebuffertexture2d() method of the
webgl api attaches a texture to a
webglframebuffer.
... when using a
webgl 2 context, the following values are available additionally: gl.draw_framebuffer: equivalent to gl.framebuffer.
... when using a
webgl 2 context, the following values are available additionally: gl.depth_stencil_attachment: depth and stencil buffer.
...And 4 more matches
WebGLRenderingContext.getBufferParameter() - Web APIs
the
webglrenderingcontext.getbufferparameter() method of the
webgl api returns information about the buffer.
... when using a
webgl 2 context, the following values are available additionally: gl.copy_read_buffer: buffer for copying from one buffer object to another.
... when using a
webgl 2 context, the following values are available additionally: gl.static_read, gl.dynamic_read, gl.stream_read, gl.static_copy, gl.dynamic_copy, gl.stream_copy.
...And 4 more matches
WebGLRenderingContext.getExtension() - Web APIs
the
webglrenderingcontext.getextension() method enables a
webgl extension.
... syntax gl.getextension(name); parameters name a string for the name of the
webgl extension to enable.
... return value a
webgl extension object, or null if name does not match (case-insensitive) to one of the strings in
webglrenderingcontext.getsupportedextensions.
...And 4 more matches
WebGLRenderingContext.getSupportedExtensions() - Web APIs
the
webglrenderingcontext.getsupportedextensions() method returns a list of all the supported
webgl extensions.
... syntax gl.getsupportedextensions(); return value an array of strings with all the supported
webgl extensions.
... examples var canvas = document.getelementbyid('canvas'); gl = canvas.getcontext('
webgl'); var extensions = gl.getsupportedextensions(); // array [ 'angle_instanced_arrays', 'ext_blend_minmax', ...
...And 4 more matches
WebGLRenderingContext.getVertexAttrib() - Web APIs
the
webglrenderingcontext.getvertexattrib() method of the
webgl api returns information about a vertex attribute at a given position.
...possible values: gl.vertex_attrib_array_buffer_binding: returns the currently bound
webglbuffer.
... when using a
webgl 2 context, the following values are available additionally: gl.vertex_attrib_array_integer: returns a glboolean indicating whether or not an integer data type is in the vertex attribute array at the given index.
...And 4 more matches
WebGLShader - Web APIs
the
webglshader is part of the
webgl api and can either be a vertex or a fragment shader.
... a
webglprogram requires both types of shaders.
... description to create a
webglshader use
webglrenderingcontext.createshader, then hook up the glsl source code using
webglrenderingcontext.shadersource(), and finally invoke
webglrenderingcontext.compileshader() to finish and compile the shader.
...And 4 more matches
WebGL by example - Web APIs
next »
webgl by example is a series of live samples with short explanations that showcase
webgl concepts and capabilities.
... the examples are sorted according to topic and level of difficulty, covering the
webgl rendering context, shader programming, textures, geometry, user interaction, and more.
... instead of trying to juggle shaders, geometry, and working with gpu memory, already in the first program, the examples here explore
webgl in an incremental way.
...And 4 more matches
Web audio spatialization basics - Web APIs
as if its extensive variety of sound processing (and other) options wasn't enough, the
web audio api also includes facilities to allow you to emulate the difference in sound as a listener moves around a sound source, for example panning as you move around a sound source inside a 3d game.
... basics of spatialization in
web audio, complex 3d spatializations are created using the pannernode, which in layman's terms is basically a whole lotta cool maths to make audio appear in 3d space.
... it's really useful for
webxr and gaming.
...And 4 more matches
Functions and classes available to Web Workers - Web APIs
unknown no postmessage() yes, on dedicatedworkerglobalscope no no unknown no apis available in workers function functionality support in gecko (firefox) support in ie support in blink (chrome and opera) support in
webkit (safari) broadcast channel api allows simple communication between browsing contexts (that is windows, tabs, frames, or iframes) with the same origin (usually pages from the same site).
... 41 (41) (yes) (yes) (yes) console api provides access to the browser's debugging console (e.g., the
web console in firefox).
...manipulating such data can be a complex task better suited to be delegated to a
web worker.
...And 4 more matches
XRWebGLLayer.antialias - Web APIs
the read-only xr
webgllayer property antialias is a boolean value which is true if the rendering layer's frame buffer supports antialiasing.
...the specific antialiasing technique used is left to the user agent's discretion and cannot be specified by the
web site or
web app.
... syntax let antialiasingsupported = xr
webgllayer.antialias; value a boolean value which is true if the
webgl rendering layer's frame buffer is configured to support antialiasing.
...And 4 more matches
Using Web Standards in your Web Pages - Archive of obsolete content
the problem lies with designers and developers chained to the browser-quirk-oriented markup of the 1990s-often because they don't realize it is possible to support current standards while accommodating old browsers." -
web standards project this article provides an overview of the process for upgrading the content of your
web pages to conform to the world wide
web consortium (w3c)
web standards.
...how to upgrade a
webpage markup code to pass validation and how to implement css are addressed by providing recommendations, tutorials and references.
... the other sections address dom and dhtml coding practices which are at odds with the w3c
web standards and suggest replacements.
...And 3 more matches
API - MDN Web Docs Glossary: Definitions of Web-related terms
in
web development, an api is generally a set of code features (e.g.
... methods, properties, events, and urls) that a developer can use in their apps for interacting with components of a user's
web browser, or other software/hardware on the user's computer, or third party
websites and services.
... for example: the getusermedia api can be used to grab audio and video from a user's
webcam, which can then be used in any way the developer likes, for example, recording video and audio, broadcasting it to another user in a conference call, or capturing image stills from the video.
...And 3 more matches
Search engine - MDN Web Docs Glossary: Definitions of Web-related terms
a search engine is a software system that collects information from the world wide
web and presents it to users who are looking for specific information.
... a search engine conducts the following processes:
web crawling: searching
web sites by navigating hyperlinks on
web pages, both within a site, and from one site to another.
... a
web site owner can exclude areas of the site from being accessed by a search engine's
web crawler (or spider), by defining "robot exclusion" information in a file named robots.txt.
...And 3 more matches
Vendor Prefix - MDN Web Docs Glossary: Definitions of Web-related terms
browser vendors sometimes add prefixes to experimental or nonstandard css properties and javascript apis, so developers can experiment with new ideas while—in theory—preventing their experiments from being relied upon and then breaking
web developers' code during the standardization process.
...
web developers have been using them on production
web sites, despite their experimental nature.
... this has made it more difficult for browser vendors to ensure compatibility and to work on new features; it's also been harmful to smaller browsers who wind up forced to add other browsers' prefixes in order to load popular
web sites.
...And 3 more matches
MDN Web Docs Glossary: Definitions of Web-related terms
web technologies contain long lists of jargon and abbreviations that are used in documentation and coding.
... this glossary provides definitions of words and abbreviations you need to know to successfully understand and build for the
web.
... main axis main thread markup mathml media media (audio-visual presentation) media (css) metadata method microsoft edge microsoft internet explorer middleware mime mime type minification mitm mixin mobile first modem modern
web apps modularity mozilla firefox mutable mvc n namespace nan nat native navigation directive netscape navigator network throttling nntp node node (dom) node (networking) node.js non-normative normative null ...
...And 3 more matches
WebGLRenderingContext.blendEquationSeparate() - Web APIs
the
webglrenderingcontext.blendequationseparate() method of the
webgl api is used to set the rgb blend equation and alpha blend equation separately.
... the blend equation determines how a new pixel is combined with a pixel already in the
webglframebuffer.
... when using a
webgl 2 context, the following values are available additionally: gl.min: minimum of source and destination, gl.max: maximum of source and destination.
...And 3 more matches
WebGLRenderingContext.createProgram() - Web APIs
the
webglrenderingcontext.createprogram() method of the
webgl api creates and initializes a
webglprogram object.
... syntax
webglprogram gl.createprogram(); parameters none.
... return value a
webglprogram object that is a combination of two compiled
webglshaders consisting of a vertex shader and a fragment shader (both written in glsl).
...And 3 more matches
WebGLRenderingContext.getRenderbufferParameter() - Web APIs
the
webglrenderingcontext.getrenderbufferparameter() method of the
webgl api returns information about the renderbuffer.
... when using a
webgl 2 context, the following value is available additionally: gl.renderbuffer_samples: returns a glint indicating the number of samples of the image of the currently bound renderbuffer.
... examples gl.getrenderbufferparameter(gl.renderbuffer, gl.renderbuffer_width); specifications specification status comment
webgl 1.0the definition of 'getrenderbufferparameter' in that specification.
...And 3 more matches
WebGLShaderPrecisionFormat - Web APIs
the
webglshaderprecisionformat interface is part of the
webgl api and represents the information returned by calling the
webglrenderingcontext.getshaderprecisionformat() method.
... properties
webglshaderprecisionformat.rangemin read only the base 2 log of the absolute value of the minimum value that can be represented.
...
webglshaderprecisionformat.rangemax read only the base 2 log of the absolute value of the maximum value that can be represented.
...And 3 more matches
Matrix math for the web - Web APIs
matrices can be used to represent transformations of objects in space, and are used for performing many key types of computation when constructing images and visualizing data on the
web.
... while this article uses css to simplify explanations, matrices are a core concept used by many different technologies including
webgl, the
webxr (vr and ar) api, and glsl shaders.
...check out the
webgl model view projection article for a look into how it comes in handy.
...And 3 more matches
WebXR performance guide - Web APIs
webxr applications involve multiple technologies which can be highly sensitive to performance constraints.
... as such, you may find yourself needing to make adjustments or compromises to optimize the performance of your
webxr application to be as usable as possible on the broadest assortment of target devices.
... in this guide, we'll examine a variety of suggestions and recommendations that will help you make your
webxr app as performant as possible.
...And 3 more matches
Web Animations API - Web APIs
the
web animations api allows for synchronizing and timing changes to the presentation of a
web page, i.e.
... concepts and usage the
web animations api provides a common language for browsers and developers to describe animations on dom elements.
... to get more information on the concepts behind the api and how to use it, read using the
web animations api.
...And 3 more matches
Web Locks API - Web APIs
the
web locks api allows scripts running in one tab or worker to asynchronously acquire a lock, hold it while work is performed, then release it.
... while held, no other script executing in the same origin can acquire the same lock, which allows a
web app running in multiple tabs or workers to coordinate work and the use of resources.
...
web locks concepts and usage a lock is an abstract concept representing some potentially shared resource, identified by a name chosen by the
web app.
...And 3 more matches
Web Speech API - Web APIs
the
web speech api enables you to incorporate voice data into
web apps.
... the
web speech api has two parts: speechsynthesis (text-to-speech), and speechrecognition (asynchronous speech recognition.)
web speech concepts and usage the
web speech api makes
web apps able to handle voice data.
... for more details on using these features, see using the
web speech api.
...And 3 more matches
Web Storage API - Web APIs
the
web storage api provides mechanisms by which browsers can store key/value pairs, in a much more intuitive fashion than using cookies.
...
web storage concepts and usage the two mechanisms within
web storage are as follows: sessionstorage maintains a separate storage area for each given origin that's available for the duration of the page session (as long as the browser is open, including page reloads and restores) stores data only for a session, meaning that the data is stored until the browser (or tab) is closed.
...this has been done to avoid memory issues caused by excessive usage of
web storage.
...And 3 more matches
XRWebGLLayer.getViewport() - Web APIs
the xr
webgllayer interface's getviewport() method returns the xrviewport that should be used to render the specified xrview into the
webgl layer.
... for
webxr devices which use a single framebuffer for both the left and right eyes, the returned viewport represents the region of the framebuffer into which the scene should be rendered for the eye represented by the view.
... syntax let viewport = xr
webgllayer.getviewport(view); parameters view an xrview object indicating the view for which the viewport is to be returned.
...And 3 more matches
XRWebGLLayer.ignoreDepthValues - Web APIs
the read-only xr
webgllayer property ignoredepthvalues is a boolean value which is true if the session has been configured to ignore the values in the depth buffer while rendering the scene.
... the value of ignoredepthvalues can only be set when the xr
webgllayer is instantiated, by setting the corresponding value in the xr
webgllayerinit object specified as the constructor's layerinit parameter.
... syntax let ignoringdepthbuffer = xr
webgllayer.ignoredepthvalues; value a boolean value which is true if the
webgl context's depth buffer is being used while computing the locations of points in the 3d world.
...And 3 more matches
XRWebGLLayerInit.antialias - Web APIs
the boolean antialias property, if present and set to true in the xr
webgllayerinit object provided as the xr
webgllayer() constructor's layerinit parameter, requests that the new
webgl rendering layer support anti-aliasing.
... syntax let layerinit = { antialias: boolvalue }; let gllayer = new xr
webgllayer(xrsession, gl, layerinit); let gllayer = new xr
webgllayer(xrsession, gl, { antialias: boolvalue }); value a boolean value which can be set to true to request anti-aliasing support in the new
webgl rendering layer.
... usage notes the state of anti-aliasing for the context after being created can be read from the xr
webgllayer property antialias.
...And 3 more matches
XRWebGLLayerInit.framebufferScaleFactor - Web APIs
the xr
webgllayerinit dictionary's framebufferscalefactor property, when specified upon instantiating a new xr
webgllayer using its constructor, xr
webgllayer(), specifies the scaling factor to use when determining the size of the frame buffer to use when rendering the scene, relative to the default xr device display resolution.
...see managing rendering quality in
webxr performance guide for more information.
... you can determine the scaling factor that you would need to apply to match the default frame buffer resolution by using the xr
webgllayer.getnativeframebufferscalefactor() static function.
...And 3 more matches
XRWebGLLayerInit.ignoreDepthValues - Web APIs
the xr
webgllayerinit dictionary's boolean ignoredepthvalues property can be provided in the options passed into the xr
webgllayer() constructor to indicate that the depth buffer, if it exists, should be ignored while composing the scene.
... this property differs from depth in that depth requests a
webgl layer that does not have a depth buffer at all, while ignoredepthvalues merely asks that the depth layer be ignored.
... syntax let layerinit = { ignoredepthvalues: boolvalue }; let gllayer = new xr
webgllayer(xrsession, gl, layerinit); let gllayer = new xr
webgllayer(xrsession, gl, { ignoredepthvalues: boolvalue }); value a boolean value which can be set to true to disable the use of the depth buffer by the
webgl rendering layer created by the xr
webgllayer() constructor.
...And 3 more matches
WebGL2RenderingContext.texImage3D() - Web APIs
the
webglrenderingcontext.teximage3d() method of the
webgl api specifies a three-dimensional texture image.
... offset a glintptr byte offset into the
webglbuffer's data store.
... used to upload data to the currently bound
webgltexture from the
webglbuffer bound to the pixel_unpack_buffer target.
...And 2 more matches
WebGL2RenderingContext.texStorage2D() - Web APIs
the
webgl2renderingcontext.texstorage2d() method of the
webgl api specifies all levels of two-dimensional texture storage.
...possible values: gl.r8 gl.r16f gl.r32f gl.r8ui gl.rg8 gl.rg16f gl.rg32f gl.rg8ui gl.rgb8 gl.srgb8 gl.rgb565 gl.r11f_g11f_b10f gl.rgb9_e5 gl.rgb16f gl.rgb32f gl.rgb8ui gl.rgba8 gl.srgb8_aplha8 gl.rgb5_a1 gl.rgba4 gl.rgba16f gl.rgba32f gl.rgba8ui unlike opengl 3.0,
webgl 2 doesn't support the following etc2 and eac compressed texture formats (see section 5.37 in the
webgl 2 spec).
... you might be able to enable them via the
webgl_compressed_texture_etc extension, though.
...And 2 more matches
WebGL2RenderingContext.texSubImage3D() - Web APIs
the
webgl2renderingcontext.texsubimage3d() method of the
webgl api specifies a sub-rectangle of the current texture.
... offset a glintptr byte offset into the
webglbuffer's data store.
... used to upload data to the currently bound
webgltexture from the
webglbuffer bound to the pixel_unpack_buffer target.
...And 2 more matches
WebGLRenderingContext.blendEquation() - Web APIs
the
webglrenderingcontext.blendequation() method of the
webgl api is used to set both the rgb blend equation and alpha blend equation to a single equation.
... the blend equation determines how a new pixel is combined with a pixel already in the
webglframebuffer.
... when using a
webgl 2 context, the following values are available additionally: gl.min: minimum of source and destination, gl.max: maximum of source and destination.
...And 2 more matches
WebGLRenderingContext.bufferSubData() - Web APIs
the
webglrenderingcontext.buffersubdata() method of the
webgl api updates a subset of a buffer object's data store.
... syntax //
webgl1: void gl.buffersubdata(target, offset, arraybuffer srcdata); void gl.buffersubdata(target, offset, arraybufferview srcdata); //
webgl2: void gl.buffersubdata(target, dstbyteoffset, arraybufferview srcdata, srcoffset, length); parameters target a glenum specifying the binding point (target).
... when using a
webgl 2 context, the following values are available additionally: gl.copy_read_buffer: buffer for copying from one buffer object to another.
...And 2 more matches
WebGLRenderingContext.createTexture() - Web APIs
the
webglrenderingcontext.createtexture() method of the
webgl api creates and initializes a
webgltexture object.
... syntax
webgltexture gl.createtexture(); parameters none.
... return value a
webgltexture object to which images can be bound to.
...And 2 more matches
WebGLRenderingContext.getProgramInfoLog() - Web APIs
the
webglrenderingcontext.getprograminfolog returns the information log for the specified
webglprogram object.
... it contains errors that occurred during failed linking or validation of
webglprogram objects.
... syntax gl.getprograminfolog(program); parameters program the
webglprogram to query.
...And 2 more matches
WebGLRenderingContext.getProgramParameter() - Web APIs
the
webglrenderingcontext.getprogramparameter() method of the
webgl api returns information about the given program.
... syntax any gl.getprogramparameter(program, pname); parameters program a
webglprogram to get parameter information from.
... when using a
webgl 2 context, the following values are available additionally: gl.transform_feedback_buffer_mode: returns a glenum indicating the buffer mode when transform feedback is active.
...And 2 more matches
WebGLRenderingContext.readPixels() - Web APIs
the
webglrenderingcontext.readpixels() method of the
webgl api reads a block of pixels from a specified rectangle of the current color framebuffer into an arraybufferview object.
... syntax //
webgl1: void gl.readpixels(x, y, width, height, format, type, pixels); //
webgl2: void gl.readpixels(x, y, width, height, format, type, glintptr offset); void gl.readpixels(x, y, width, height, format, type, arraybufferview pixels, gluint dstoffset); parameters x a glint specifying the first horizontal pixel that is read from the lower left corner of a rectangular block of pixels.
...
webgl2 adds gl.red gl.rg gl.red_integer gl.rg_integer gl.rgb_integer gl.rgba_integer type a glenum specifying the data type of the pixel data.
...And 2 more matches
WebGLRenderingContext.validateProgram() - Web APIs
the
webglrenderingcontext.validateprogram() method of the
webgl api validates a
webglprogram.
... it checks if it is successfully linked and if it can be used in the current
webgl state.
... syntax void gl.validateprogram(program); parameters program a
webglprogram to validate.
...And 2 more matches
WebGLTransformFeedback - Web APIs
the
webgltransformfeedback interface is part of the
webgl 2 api and enables transform feedback, which is the process of capturing primitives generated by vertex processing.
... when working with
webgltransformfeedback objects, the following methods of the
webgl2renderingcontext are useful:
webgl2renderingcontext.createtransformfeedback()
webgl2renderingcontext.deletetransformfeedback()
webgl2renderingcontext.istransformfeedback()
webgl2renderingcontext.bindtransformfeedback()
webgl2renderingcontext.begintransformfeedback()
webgl2renderingcontext.endtransformfeedback()
webgl2renderingcontext.pausetransformfeedback()
webgl2renderingcontext.resumetransformfeedback()
webgl2renderingcontext.transformfeedbackvaryings()
webgl2renderingcontext.gettransformfeedbackvarying() examples creating a
webgltransformfeedback object in this example, gl must be...
... a
webgl2renderingcontext.
...And 2 more matches
Animating textures in WebGL - Web APIs
we need both of these checks because it will produce an error if you upload a video to
webgl that has no data available yet.
... checking for both of these events guarantees there is data available and it's safe to start uploading video to a
webgl texture.
... the video must be loaded from a secure source in order to be used to provide texture data to
webgl.
...And 2 more matches
WebRTC Statistics API - Web APIs
the
webrtc api has a vast array of statistics available, covering the entire breadth of the
webrtc connectivity system, from sender to receiver and peer to peer.
... collecting statistics you can collect statistics at various levels throughout the
webrtc hierarchy of objects.
...this has been obsoleted since the transition to
webrtc being track-based rather than stream-based.
...And 2 more matches
WebXR permissions and security - Web APIs
the
webxr device api has several areas of security to contend with, from establishing feature-policy to ensuring the user intends to use the mixed reality presentation before activating it.
... introduction the
webxr device api is subject to a number of permission and security controls.
... once that check is passed, the request to enter immersive-vr mode is allowed if all of the following are true: the requestsession() call was issued by code executing within the handler for a user event, or the from the startup code for a user-launched
web application.
...And 2 more matches
Using the Web Storage API - Web APIs
the
web storage api provides mechanisms by which browsers can securely store key/value pairs.
...these three lines all set the (same) colorsetting entry: localstorage.colorsetting = '#a4509b'; localstorage['colorsetting'] = '#a4509b'; localstorage.setitem('colorsetting', '#a4509b'); note: it's recommended to use the
web storage api (setitem, getitem, removeitem, key, length) to prevent the pitfalls associated with using plain objects as key-value stores.
... the two mechanisms within
web storage are as follows: sessionstorage maintains a separate storage area for each given origin that's available for the duration of the page session (as long as the browser is open, including page reloads and restores).
...And 2 more matches
XRWebGLLayerInit.depth - Web APIs
when using the xr
webgllayer() constructor to create a new
webgl rendering layer for
webxr, providing as the layerinit parameter an object whose depth property is false will request that the new layer be created without a depth buffer.
... syntax let layerinit = { depth: false }; let gllayer = new xr
webgllayer(xrsession, gl, layerinit); let gllayer = new xr
webgllayer(xrsession, gl, { depth: false }); value a boolean which can be set to false to specify that the new
webgl layer should not have a depth buffer.
... you can determine whether or not the depth buffer is being used by a given
webgl rendering layer during your xr session by checking the value returned by xr
webgllayer.ignoredepthvalues.
...And 2 more matches
CSS - MDN Web Docs Glossary: Definitions of Web-related terms
css (cascading style sheets) is a declarative language that controls how
webpages look in the browser.
...a style declaration contains the properties and their values, which determine how a
webpage looks.
... css is one of the three core
web technologies, along with html and javascript.
...this is a very important feature, since a complex
website can have thousands of css rules.
Cookie - MDN Web Docs Glossary: Definitions of Web-related terms
a cookie is a small piece of information left on a visitor's computer by a
website, via a
web browser.
... cookies are used to personalize a user’s
web experience with a
website.
... it may contain the user’s preferences or inputs when accessing that
website.
... a user can customize their
web browser to accept, reject, or delete cookies.
WCAG - MDN Web Docs Glossary: Definitions of Web-related terms
web content accessibility guidelines (wcag) are a recommendation published by the
web accessibility initiative group at the w3c.
... wcag uses three levels of conformance: priority 1:
web developers must satisfy these requirements, otherwise it will be impossible for one or more groups to access the
web content.
... priority 2:
web developers should satisfy these requirements, otherwise some groups will find it difficult to access the
web content.
... priority 3:
web developers may satisfy these requirements, in order to make it easier for some groups to access the
web content.
How to structure a web form - Learn web development
common html structures used with forms beyond the structures specific to
web forms, it's good to remember that form markup is just html.
... this means that you can use all the power of html to structure a
web form.
... summary you now have all the knowledge you'll need to properly structure your
web forms.
... see also a list apart: sensible forms: a form usability checklist previous overview: forms next in this module your first form how to structure a
web form basic native form controls the html5 input types other form controls styling
web forms advanced form styling ui pseudo-classes client-side form validation sending form data advanced topics how to build custom form controls sending forms through javascript property compatibility table for form widgets ...
Using files from web applications - Web APIs
using the file api, which was added to the dom in html5, it's now possible for
web content to ask the user to select local files and then read the contents of those files.
...(as of time of writing, firefox doesn’t show this visual cue for <input type="file"> elements.) selecting files using drag and drop you can also let the user drag and drop files into your
web application.
... example: showing thumbnails of user-selected images let's say you're developing the next great photo-sharing
website and want to use html to display thumbnail previews of images before the user actually uploads them.
... 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.ctrl.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.
WEBGL_debug_shaders.getTranslatedShaderSource() - Web APIs
the
webgl_debug_shaders.gettranslatedshadersource() method is part of the
webgl api and allows you to debug a translated shader.
... syntax gl.getextension('
webgl_debug_shaders').gettranslatedshadersource(shader); parameters shader a
webglshader to get the translated source from.
...an empty string is returned, if: no source has been defined or,
webglrenderingcontext.compileshader() has not yet been called or, the translation for the shader failed.
... examples var canvas = document.getelementbyid('canvas'); var gl = canvas.getcontext('
webgl'); var shader = gl.createshader(gl.fragment_shader); gl.shadersource(shader, 'void main() { gl_fragcolor = vec4(gl_fragcoord.x, 0.0, 0.0, 1.0); }'); gl.compileshader(shader); var src = gl.getextension('
webgl_debug_shaders').gettranslatedshadersource(shader); console.log(src); // "void main(){ // (gl_fragcolor = vec4(gl_fragcoord.x, 0.0, 0.0, 1.0)); // }" specifications specification status comment
webgl_debug_shadersthe definition of '
webgl_debug_shaders.gettranslatedshadersource' in that specification.
WebGL2RenderingContext.bindBufferBase() - Web APIs
the
webgl2renderingcontext.bindbufferbase() method of the
webgl 2 api binds a given
webglbuffer to a given binding point (target) at a given index.
... buffer a
webglbuffer which to bind to the binding point (target).
... examples gl.bindbufferbase(gl.transform_feedback_buffer, 0, buffer); specifications specification status comment
webgl 2.0the definition of 'bindbufferbase' in that specification.
... editor's draft initial definition for
webgl.
WebGL2RenderingContext.bindBufferRange() - Web APIs
the
webgl2renderingcontext.bindbufferrange() method of the
webgl 2 api binds a range of a given
webglbuffer to a given binding point (target) at a given index.
... buffer a
webglbuffer which to bind to the binding point (target).
... examples gl.bindbufferrange(gl.transform_feedback_buffer, 1, buffer, 0, 4); specifications specification status comment
webgl 2.0the definition of 'bindbufferrange' in that specification.
... editor's draft initial definition for
webgl.
WebGL2RenderingContext.bindTransformFeedback() - Web APIs
the
webgl2renderingcontext.bindtransformfeedback() method of the
webgl 2 api binds a passed
webgltransformfeedback object to the current gl state.
... transformfeedback a
webgltransformfeedback object to bind.
... examples var transformfeedback = gl.createtransformfeedback(); gl.bindtransformfeedback(gl.transform_feedback, transformfeedback); specifications specification status comment
webgl 2.0the definition of 'bindtransformfeedback' in that specification.
... editor's draft initial definition for
webgl.
WebGL2RenderingContext.createVertexArray() - Web APIs
the
webgl2renderingcontext.createvertexarray() method of the
webgl 2 api creates and initializes a
webglvertexarrayobject object that represents a vertex array object (vao) pointing to vertex array data and which provides names for different sets of vertex data.
... syntax
webglvertexarrayobject gl.createvertexarray(); parameters none.
... return value a
webglvertexarrayobject representing a vertex array object (vao) which points to vertex array data.
... specifications specification status comment
webgl 2.0the definition of 'createvertexarray' in that specification.
WebGL2RenderingContext.drawArraysInstanced() - Web APIs
the
webgl2renderingcontext.drawarraysinstanced() method of the
webgl 2 api renders primitives from array data like the gl.drawarrays() method.
... note: when using
webgl 1, the angle_instanced_arrays extension can provide this method, too.
... examples gl.drawarraysinstanced(gl.points, 0, 8, 4); specifications specification status comment
webgl 2.0the definition of 'drawarraysinstanced' in that specification.
... editor's draft initial definition for
webgl.
WebGL2RenderingContext.drawElementsInstanced() - Web APIs
the
webgl2renderingcontext.drawelementsinstanced() method of the
webgl 2 api renders primitives from array data like the gl.drawelements() method.
... note: when using
webgl 1, the angle_instanced_arrays extension can provide this method, too.
... examples gl.drawelementsinstanced(gl.points, 2, gl.unsigned_short, 0, 4); specifications specification status comment
webgl 2.0the definition of 'drawelementsinstanced' in that specification.
... editor's draft initial definition for
webgl.
WebGL2RenderingContext.getActiveUniformBlockName() - Web APIs
the
webgl2renderingcontext.getactiveuniformblockname() method of the
webgl 2 api retrieves the name of the active uniform block at a given index within a
webglprogram.
... syntax domstring gl.getactiveuniformblockname(program, uniformblockindex); parameters program a
webglprogram containing the uniform block.
... examples var blockname = gl.getactiveuniformblockname(program, 0); specifications specification status comment
webgl 2.0the definition of 'getactiveuniformblockname' in that specification.
... editor's draft initial definition for
webgl.
WebGL2RenderingContext.getActiveUniformBlockParameter() - Web APIs
the
webgl2renderingcontext.getactiveuniformblockparameter() method of the
webgl 2 api retrieves information about an active uniform block within a
webglprogram.
... syntax any gl.getactiveuniformblockparameter(program, uniformblockindex, pname); parameters program a
webglprogram containing the active uniform block.
... examples var blocksize = gl.getactiveuniformblockparameter(program, blockindex, gl.uniform_block_data_size); specifications specification status comment
webgl 2.0the definition of 'getactiveuniformblockparameter' in that specification.
... editor's draft initial definition for
webgl.
WebGL2RenderingContext.getActiveUniforms() - Web APIs
the
webgl2renderingcontext.getactiveuniforms() method of the
webgl 2 api retrieves information about active uniforms within a
webglprogram.
... syntax any gl.getactiveuniforms(program, uniformindices, pname); parameters program a
webglprogram containing the active uniforms.
... examples var uniformindices = gl.getuniformindices(program, ['ubored', 'ubogreen', 'uboblue']); var uniformoffsets = gl.getactiveuniforms(program, uniformindices, gl.uniform_offset); specifications specification status comment
webgl 2.0the definition of 'getactiveuniforms' in that specification.
... editor's draft initial definition for
webgl.
WebGL2RenderingContext.getQuery() - Web APIs
the
webgl2renderingcontext.getquery() method of the
webgl 2 api returns the currently active
webglquery for the target, or null.
... syntax
webglquery gl.getquery(target, pname); parameters target a glenum specifying the target of the query.
... return value a
webglquery object.
... examples var currentquery = gl.getquery(gl.any_samples_passed, gl.current_query); specifications specification status comment
webgl 2.0the definition of 'getquery' in that specification.
WebGL2RenderingContext.getSyncParameter() - Web APIs
the
webgl2renderingcontext.getsyncparameter() method of the
webgl 2 api returns parameter information of a
webglsync object.
... syntax any gl.getsyncparameter(sync, pname); parameters sync a
webglsync object.
... examples var sync = gl.fencesync(gl.sync_gpu_commands_complete, 0); gl.getsyncparameter(sync, gl.sync_status); specifications specification status comment
webgl 2.0the definition of 'getsyncparameter' in that specification.
... editor's draft initial definition for
webgl.
WebGL2RenderingContext.getUniformBlockIndex() - Web APIs
the
webgl2renderingcontext.getuniformblockindex() method of the
webgl 2 api retrieves the index of a uniform block within a
webglprogram.
... syntax gluint gl.getuniformblockindex(program, uniformblockname); parameters program a
webglprogram containing the uniform block.
... examples // assuming a shader with the following declaration: // uniform ubodata { // mat4 foo; // } instancename; // use the block name, not the instance name: var blockindex = gl.getuniformblockindex(program, 'ubodata'); specifications specification status comment
webgl 2.0the definition of 'getuniformblockindex' in that specification.
... editor's draft initial definition for
webgl.
WebGL2RenderingContext.getUniformIndices() - Web APIs
the
webgl2renderingcontext.getuniformindices() method of the
webgl 2 api retrieves the indices of a number of uniforms within a
webglprogram.
... syntax sequence<gluint> gl.getuniformindices(program, uniformnames); parameters program a
webglprogram containing uniforms whose indices to query.
... examples var uniformindices = gl.getuniformindices(program, ['ubored', 'ubogreen', 'uboblue']); specifications specification status comment
webgl 2.0the definition of 'getuniformindices' in that specification.
... editor's draft initial definition for
webgl.
WebGL2RenderingContext.isVertexArray() - Web APIs
the
webgl2renderingcontext.isvertexarray() method of the
webgl api returns true if the passed object is a valid
webglvertexarrayobject object.
... syntax glboolean gl.isvertexarray(vertexarray); parameters vertexarray a
webglvertexarrayobject (vao) object to test.
... return value a glboolean indicating whether the given object is a valid
webglvertexarrayobject object (true) or not (false).
... gl.isvertexarray(vao); specifications specification status comment
webgl 2.0the definition of 'isvertexarray' in that specification.
WebGL2RenderingContext.samplerParameter[if]() - Web APIs
the
webgl2renderingcontext.samplerparameter[if]() methods of the
webgl 2 api set
webglsampler parameters.
... syntax void gl.samplerparameteri(sampler, pname, param); void gl.samplerparameterf(sampler, pname, param); parameters sampler a
webglsampler object.
... desktopmobilechromeedgefirefoxinternet exploreroperasafariandroid
webviewchrome for androidfirefox for androidopera for androidsafari on iossamsung internetsamplerparameterichrome full support 56edge full support 79firefox full support 51ie no support noopera full support ...
... 43safari no support no
webview android full support 58chrome android full support 58firefox android full support 51opera android full support 43safari ios no support nosamsung internet android full support 7.0legend full support full support no support no support ...
WebGL2RenderingContext.transformFeedbackVaryings() - Web APIs
the
webgl2renderingcontext.transformfeedbackvaryings() method of the
webgl 2 api specifies values to record in
webgltransformfeedback buffers.
... syntax void gl.transformfeedbackvaryings(program, varyings, buffermode); parameters program a
webglprogram.
...sformfeedback = gl.createtransformfeedback(); gl.bindtransformfeedback(gl.transform_feedback, transformfeedback); var transformfeedbackoutputs = ['gl_position', 'anotheroutput']; gl.transformfeedbackvaryings(shaderprog, transformfeedbackoutputs, gl.interleaved_attribs); gl.linkprogram(shaderprog); specifications specification status comment
webgl 2.0the definition of 'transformfeedbackvaryings' in that specification.
... editor's draft initial definition for
webgl.
WebGL2RenderingContext.uniform[1234][uif][v]() - Web APIs
the
webgl2renderingcontext.uniform[1234][uif][v]() methods of the
webgl api specify values of uniform variables.
...orm4iv(location, data, optional srcoffset, optional srclength); void gl.uniform1uiv(location, data, optional srcoffset, optional srclength); void gl.uniform2uiv(location, data, optional srcoffset, optional srclength); void gl.uniform3uiv(location, data, optional srcoffset, optional srclength); void gl.uniform4uiv(location, data, optional srcoffset, optional srclength); parameters location a
webgluniformlocation object containing the location of the uniform attribute to modify.
... specifications specification status comment
webgl 2.0the definition of 'uniform' in that specification.
... editor's draft initial definition for
webgl.
WebGL2RenderingContext.uniformBlockBinding() - Web APIs
the
webgl2renderingcontext.uniformblockbinding() method of the
webgl 2 api assigns binding points for active uniform blocks.
... syntax void gl.uniformblockbinding(program, uniformblockindex, uniformblockbinding); parameters program a
webglprogram containing the active uniform block whose binding to assign.
... examples gl.uniformblockbinding(program, 0, 1); specifications specification status comment
webgl 2.0the definition of 'uniformblockbinding' in that specification.
... editor's draft initial definition for
webgl.
WebGL2RenderingContext.uniformMatrix[234]x[234]fv() - Web APIs
the
webgl2renderingcontext.uniformmatrix[234]x[234]fv() methods of the
webgl 2 api specify matrix values for uniform variables.
...l.uniformmatrix4x3fv(location, transpose, data, optional srcoffset, optional srclength); void gl.uniformmatrix2x4fv(location, transpose, data, optional srcoffset, optional srclength); void gl.uniformmatrix3x4fv(location, transpose, data, optional srcoffset, optional srclength); void gl.uniformmatrix4fv(location, transpose, data, optional srcoffset, optional srclength); parameters location a
webgluniformlocation object containing the location of the uniform attribute to modify.
... examples gl.uniformmatrix2x3fv(loc, false, [1, 2, 3, 4, 5, 6]); specifications specification status comment
webgl 2.0the definition of 'uniformmatrix' in that specification.
... editor's draft initial definition for
webgl.
WebGL2RenderingContext.vertexAttribDivisor() - Web APIs
the
webgl2renderingcontext.vertexattribdivisor() method of the
webgl 2 api modifies the rate at which generic vertex attributes advance when rendering multiple instances of primitives with gl.drawarraysinstanced() and gl.drawelementsinstanced().
... note: when using
webgl 1, the angle_instanced_arrays extension can provide this method, too.
... examples gl.vertexattribdivisor(0, 2); specifications specification status comment
webgl 2.0the definition of 'vertexattribdivisor' in that specification.
... editor's draft initial definition for
webgl.
WebGL2RenderingContext.vertexAttribIPointer() - Web APIs
the
webgl2renderingcontext.vertexattribipointer() method of the
webgl 2 api specifies integer data formats and locations of vertex attributes in a vertex attributes array.
... description very similar to
webglrenderingcontext.vertexattribpointer().
... bones[boneindices.s] * vec4(position, 1.0) * boneweights.s + bones[boneindices.t] * vec4(position, 1.0) * boneweights.t + bones[boneindices.p] * vec4(position, 1.0) * boneweights.p + bones[boneindices.q] * vec4(position, 1.0) * boneweights.q; gl_position = mvmatrix * skinnedposition; } </script> specifications specification status comment
webgl 2.0the definition of 'vertexattribipointer' in that specification.
... editor's draft initial definition for
webgl.
WebGL2RenderingContext.waitSync() - Web APIs
the
webgl2renderingcontext.waitsync() method of the
webgl 2 api returns immediately, but waits on the gl server until the given
webglsync object is signaled.
... syntax void gl.waitsync(sync, flags, timeout); parameters sync a
webglsync object on which to wait on.
... examples var sync = gl.fencesync(gl.sync_gpu_commands_complete, 0); gl.waitsync(sync, 0, gl.timeout_ignored); specifications specification status comment
webgl 2.0the definition of 'waitsync' in that specification.
... editor's draft initial definition for
webgl.
WebGLQuery - Web APIs
the
webglquery interface is part of the
webgl 2 api and provides ways to asynchronously query for information.
... when working with
webglquery objects, the following methods of the
webgl2renderingcontext are useful:
webgl2renderingcontext.createquery()
webgl2renderingcontext.deletequery()
webgl2renderingcontext.isquery()
webgl2renderingcontext.beginquery()
webgl2renderingcontext.endquery()
webgl2renderingcontext.getquery()
webgl2renderingcontext.getqueryparameter() examples creating a
webglquery object in this example, gl must be a
webgl2renderingcontext.
...
webglquery objects are not available in
webgl 1.
... var query = gl.createquery(); specifications specification status comment
webgl 2.0the definition of '
webglquery' in that specification.
WebGLRenderingContext.bindAttribLocation() - Web APIs
the
webglrenderingcontext.bindattriblocation() method of the
webgl api binds a generic vertex index to an attribute variable.
... syntax void gl.bindattriblocation(program, index, name); parameters program a
webglprogram object to bind.
...this name cannot start with "
webgl_" or "_
webgl_", as these are reserved for use by
webgl.
... examples gl.bindattriblocation(program, colorlocation, 'vcolor'); specifications specification status comment
webgl 1.0the definition of 'bindattriblocation' in that specification.
WebGLRenderingContext.bindRenderbuffer() - Web APIs
the
webglrenderingcontext.bindrenderbuffer() method of the
webgl api binds a given
webglrenderbuffer to a target, which must be gl.renderbuffer.
... renderbuffer a
webglrenderbuffer object to bind.
... examples binding a renderbuffer var canvas = document.getelementbyid('canvas'); var gl = canvas.getcontext('
webgl'); var renderbuffer = gl.createrenderbuffer(); gl.bindrenderbuffer(gl.renderbuffer, renderbuffer); getting current bindings to check the current renderbuffer binding, query the renderbuffer_binding constant.
... gl.getparameter(gl.renderbuffer_binding); specifications specification status comment
webgl 1.0the definition of 'bindrenderbuffer' in that specification.
WebGLRenderingContext.blendFunc() - Web APIs
the
webglrenderingcontext.blendfunc() method of the
webgl api defines which function is used for blending pixel arithmetic.
... examples to use the blend function, you first have to activate blending with
webglrenderingcontext.enable() with the argument gl.blend.
... gl.enable(gl.blend); gl.blendfunc(gl.src_color, gl.dst_color); gl.getparameter(gl.blend_src_rgb) == gl.src_color; // true specifications specification status comment
webgl 1.0the definition of 'blendfunc' in that specification.
... in
webgl, constant color and constant alpha cannot be used together as source and destination factors in the blend function.
WebGLRenderingContext.blendFuncSeparate() - Web APIs
the
webglrenderingcontext.blendfuncseparate() method of the
webgl api defines which function is used for blending pixel arithmetic for rgb and alpha components separately.
... examples to use the blend function, you first have to activate blending with
webglrenderingcontext.enable() with the argument gl.blend.
... gl.enable(gl.blend); gl.blendfuncseparate(gl.src_color, gl.dst_color, gl.one, gl.zero); gl.getparameter(gl.blend_src_rgb) == gl.src_color; // true specifications specification status comment
webgl 1.0the definition of 'blendfunc' in that specification.
... in
webgl, constant color and constant alpha cannot be used together as source and destination factors in the blend function.
WebGLRenderingContext.createBuffer() - Web APIs
the
webglrenderingcontext.createbuffer() method of the
webgl api creates and initializes a
webglbuffer storing data such as vertices or colors.
... syntax
webglbuffer gl.createbuffer(); parameters none.
... return value a
webglbuffer storing data such as vertices or colors.
... examples creating a buffer var canvas = document.getelementbyid('canvas'); var gl = canvas.getcontext('
webgl'); var buffer = gl.createbuffer(); specifications specification status comment
webgl 1.0the definition of 'createbuffer' in that specification.
WebGLRenderingContext.createFramebuffer() - Web APIs
the
webglrenderingcontext.createframebuffer() method of the
webgl api creates and initializes a
webglframebuffer object.
... syntax
webglframebuffer gl.createframebuffer(); parameters none.
... return value a
webglframebuffer object.
... examples creating a frame buffer var canvas = document.getelementbyid('canvas'); var gl = canvas.getcontext('
webgl'); var framebuffer = gl.createframebuffer(); specifications specification status comment
webgl 1.0the definition of 'createframebuffer' in that specification.
WebGLRenderingContext.createRenderbuffer() - Web APIs
the
webglrenderingcontext.createrenderbuffer() method of the
webgl api creates and initializes a
webglrenderbuffer object.
... syntax
webglrenderbuffer gl.createrenderbuffer(); parameters none.
... return value a
webglrenderbuffer object that stores data such an image, or can be source or target of an rendering operation.
... examples creating a render buffer var canvas = document.getelementbyid('canvas'); var gl = canvas.getcontext('
webgl'); var renderbuffer = gl.createrenderbuffer(); specifications specification status comment
webgl 1.0the definition of 'createrenderbuffer' in that specification.
WebGLRenderingContext.deleteBuffer() - Web APIs
the
webglrenderingcontext.deletebuffer() method of the
webgl api deletes a given
webglbuffer.
... syntax void gl.deletebuffer(buffer); parameters buffer a
webglbuffer object to delete.
... examples deleting a buffer var canvas = document.getelementbyid('canvas'); var gl = canvas.getcontext('
webgl'); var buffer = gl.createbuffer(); // ...
... gl.deletebuffer(buffer); specifications specification status comment
webgl 1.0the definition of 'deletebuffer' in that specification.
WebGLRenderingContext.deleteFramebuffer() - Web APIs
the
webglrenderingcontext.deleteframebuffer() method of the
webgl api deletes a given
webglframebuffer object.
... syntax void gl.deleteframebuffer(framebuffer); parameters framebuffer a
webglframebuffer object to delete.
... examples deleting a frame buffer var canvas = document.getelementbyid('canvas'); var gl = canvas.getcontext('
webgl'); var framebuffer = gl.createframebuffer(); // ...
... gl.deleteframebuffer(framebuffer); specifications specification status comment
webgl 1.0the definition of 'deleteframebuffer' in that specification.
WebGLRenderingContext.deleteProgram() - Web APIs
the
webglrenderingcontext.deleteprogram() method of the
webgl api deletes a given
webglprogram object.
... syntax void gl.deleteprogram(program); parameters program a
webglprogram object to delete.
... examples deleting a program var canvas = document.getelementbyid('canvas'); var gl = canvas.getcontext('
webgl'); var program = gl.createprogram(); // ...
... gl.deleteprogram(program); specifications specification status comment
webgl 1.0the definition of 'deleteprogram' in that specification.
WebGLRenderingContext.deleteRenderbuffer() - Web APIs
the
webglrenderingcontext.deleterenderbuffer() method of the
webgl api deletes a given
webglrenderbuffer object.
... syntax void gl.deleterenderbuffer(renderbuffer); parameters renderbuffer a
webglrenderbuffer object to delete.
... examples deleting a renderbuffer var canvas = document.getelementbyid('canvas'); var gl = canvas.getcontext('
webgl'); var renderbuffer = gl.createrenderbuffer(); // ...
... gl.deleterenderbuffer(renderbuffer); specifications specification status comment
webgl 1.0the definition of 'deleterenderbuffer' in that specification.
WebGLRenderingContext.deleteShader() - Web APIs
the
webglrenderingcontext.deleteshader() method of the
webgl api marks a given
webglshader object for deletion.
...this method has no effect if the shader has already been deleted, and the
webglshader is automatically marked for deletion when it is destroyed by the garbage collector.
... syntax void gl.deleteshader(shader); parameters shader a
webglshader object to delete.
... examples deleting a shader gl.deleteshader(shader); specifications specification status comment
webgl 1.0the definition of 'deleteshader' in that specification.
WebGLRenderingContext.deleteTexture() - Web APIs
the
webglrenderingcontext.deletetexture() method of the
webgl api deletes a given
webgltexture object.
... syntax void gl.deletetexture(texture); parameters texture a
webgltexture object to delete.
... examples deleting a texture var canvas = document.getelementbyid('canvas'); var gl = canvas.getcontext('
webgl'); var texture = gl.createtexture(); // ...
... gl.deletetexture(texture); specifications specification status comment
webgl 1.0the definition of 'deletetexture' in that specification.
WebGLRenderingContext.detachShader() - Web APIs
the
webglrenderingcontext.detachshader() method of the
webgl api detaches a previously attached
webglshader from a
webglprogram.
... syntax void gl.detachshader(program, shader); parameters program a
webglprogram.
... shader a fragment or vertex
webglshader.
... specifications specification status comment
webgl 1.0the definition of 'detachshader' in that specification.
WebGLRenderingContext.generateMipmap() - Web APIs
the
webglrenderingcontext.generatemipmap() method of the
webgl api generates a set of mipmaps for a
webgltexture object.
... when using a
webgl 2 context, the following values are available additionally: gl.texture_3d: a three-dimensional texture.
... examples gl.generatemipmap(gl.texture_2d); specifications specification status comment
webgl 1.0the definition of 'generatemipmap' in that specification.
... recommendation initial definition for
webgl.
WebGLRenderingContext.getActiveAttrib() - Web APIs
the
webglrenderingcontext.getactiveattrib() method of the
webgl api returns a
webglactiveinfo object containing size, type, and name of a vertex attribute.
... syntax
webglactiveinfo gl.getactiveattrib(program,index); parameters program a
webglprogram containing the vertex attribute.
... return value a
webglactiveinfo object.
... examples const numattribs = gl.getprogramparameter(program, gl.active_attributes); for (let i = 0; i < numattribs; ++i) { const info = gl.getactiveattrib(program, i); console.log('name:', info.name, 'type:', info.type, 'size:', info.size); } specifications specification status comment
webgl 1.0the definition of 'getactiveattrib' in that specification.
WebGLRenderingContext.getAttachedShaders() - Web APIs
the
webglrenderingcontext.getattachedshaders() method of the
webgl api returns a list of
webglshader objects attached to a
webglprogram.
... syntax sequence<
webglshader> gl.getattachedshaders(program); parameters program a
webglprogram object to get attached shaders for.
... return value an array of
webglshader objects that are attached to the given
webglprogram.
... examples var program = gl.createprogram(); // attach pre-existing shaders gl.attachshader(program, vertexshader); gl.attachshader(program, fragmentshader); gl.linkprogram(program); gl.getattachedshaders(program); specifications specification status comment
webgl 1.0the definition of 'getattachedshaders' in that specification.
WebGLRenderingContext.getContextAttributes() - Web APIs
the
webglrenderingcontext.getcontextattributes() method returns a
webglcontextattributes object that contains the actual context parameters.
... syntax gl.getcontextattributes(); return value a
webglcontextattributes object that contains the actual context parameters, or null if the context is lost.
... examples given this <canvas> element <canvas id="canvas"></canvas> and given this
webgl context var canvas = document.getelementbyid('canvas'); var gl = canvas.getcontext('
webgl'); gl.getcontextattributes(); the getcontextattributes method returns an object that describes the attributes set on this context, for example: { alpha: true, antialias: true, depth: true, failifmajorperformancecaveat: false, powerpreference: "default", premultipliedalpha: true, preservedrawingbuffer: false, stencil: false, desynchronized: false } the context attributes can be set when creating the context using the htmlcanvaselement.getcontext() method: canvas.getcontext('
webgl', { antialias: false, depth: false }); see getcontext() for more informati...
... specifications specification status comment
webgl 1.0the definition of '
webglrenderingcontext.getcontextattributes' in that specification.
WebGLRenderingContext.getShaderInfoLog() - Web APIs
the
webglrenderingcontext.getshaderinfolog returns the information log for the specified
webglshader object.
... syntax gl.getshaderinfolog(shader); parameters shader a
webglshader to query.
...when a
webglshader object is initially created, its information log will be a string of length 0.
...*/ gl.compileshader(shader); var message = gl.getshaderinfolog(shader); if (message.length > 0) { /* message may be an error or a warning */ throw message; } specifications specification status comment
webgl 1.0the definition of 'getshaderinfolog' in that specification.
WebGLRenderingContext.getShaderPrecisionFormat() - Web APIs
the
webglrenderingcontext.getshaderprecisionformat() method of the
webgl api returns a new
webglshaderprecisionformat object describing the range and precision for the specified shader numeric format.
... syntax
webglshaderprecisionformat gl.getshaderprecisionformat(shadertype, precisiontype); parameters shadertype either a gl.fragment_shader or a gl.vertex_shader.
... return value a
webglshaderprecisionformat object or null, if an error occurs.
... var canvas = document.getelementbyid('canvas'); var gl = canvas.getcontext('
webgl'); gl.getshaderprecisionformat(gl.vertex_shader, gl.medium_float); //
webglshaderprecisionformat { rangemin: 127, rangemax: 127, precision: 23 } specifications specification status comment
webgl 1.0the definition of 'getshaderprecisionformat' in that specification.
WebGLRenderingContext.hint() - Web APIs
the
webglrenderingcontext.hint() method of the
webgl api specifies hints for certain behaviors.
...possible values: gl.generate_mipmap_hint: quality of filtering when generating mipmap images with
webglrenderingcontext.generatemipmap().
... when using a
webgl 2 context, the following values are available additionally: gl.fragment_shader_derivative_hint: same as ext.fragment_shader_derivative_hint_oes mode sets the behavior.
... gl.hint(gl.generate_mipmap_hint, gl.fastest); specifications specification status comment
webgl 1.0the definition of 'hint' in that specification.
WebGLRenderingContext.isContextLost() - Web APIs
the
webglrenderingcontext.iscontextlost() method returns a boolean indicating whether or not the
webgl context has been lost and must be re-established before rendering can resume.
... usage notes there are several reasons why a
webgl context may be lost, making it necessary to re-establish the context before resuming rendering.
...this would cause every
webgl context to be lost throughout the entire browser.
... examples for example, when checking for program linking success, you could also check if the context is not lost: gl.linkprogram(program); if (!gl.getprogramparameter(program, gl.link_status) && !gl.iscontextlost()) { var info = gl.getprograminfolog(program); console.log('error linking program:\n' + info); } specifications specification status comment
webgl 1.0the definition of '
webglrenderingcontext.iscontextlost' in that specification.
WebGLRenderingContext.isProgram() - Web APIs
the
webglrenderingcontext.isprogram() method of the
webgl api returns true if the passed
webglprogram is valid, false otherwise.
... syntax glboolean gl.isprogram(program); parameters program a
webglprogram to check.
... examples checking a program var canvas = document.getelementbyid('canvas'); var gl = canvas.getcontext('
webgl'); var program = gl.createprogram(); // ...
... gl.isprogram(program); specifications specification status comment
webgl 1.0the definition of 'isprogram' in that specification.
WebGLRenderingContext.isShader() - Web APIs
the
webglrenderingcontext.isshader() method of the
webgl api returns true if the passed
webglshader is valid, false otherwise.
... syntax glboolean gl.isshader(shader); parameters shader a
webglshader to check.
... examples checking a shader var canvas = document.getelementbyid('canvas'); var gl = canvas.getcontext('
webgl'); var shader = gl.createshader(gl.vertex_shader); // ...
... gl.isshader(shader); specifications specification status comment
webgl 1.0the definition of 'isshader' in that specification.
WebGLRenderingContext.lineWidth() - Web APIs
the
webglrenderingcontext.linewidth() method of the
webgl api sets the line width of rasterized lines.
... the
webgl spec, based on the opengl es 2.0/3.0 specs points out that the minimum and maximum width for a line is implementation defined.
... as of january 2017 most implementations of
webgl only support a minimum of 1 and a maximum of 1 as the technology they are based on has these same limits.
... gl.getparameter(gl.aliased_line_width_range); specifications specification status comment
webgl 1.0the definition of 'linewidth' in that specification.
WebGLRenderingContext.linkProgram() - Web APIs
the
webglrenderingcontext interface's linkprogram() method links a given
webglprogram, completing the process of preparing the gpu code for the program's fragment and vertex shaders.
... syntax void gl.linkprogram(program); parameters program the
webglprogram to link.
... examples var program = gl.createprogram(); // attach pre-existing shaders gl.attachshader(program, vertexshader); gl.attachshader(program, fragmentshader); gl.linkprogram(program); if ( !gl.getprogramparameter( program, gl.link_status) ) { var info = gl.getprograminfolog(program); throw new error('could not compile
webgl program.
... \n\n' + info); } specifications specification status comment
webgl 1.0the definition of 'linkprogram' in that specification.
WebGLRenderingContext.uniform[1234][fi][v]() - Web APIs
the
webglrenderingcontext.uniform[1234][fi][v]() methods of the
webgl api specify values of uniform variables.
... many of the functions described here have expanded
webgl 2 interfaces, which can be found under
webgl2renderingcontext.uniform[1234][uif][v]().
...on, v0, v1); void gl.uniform2iv(location, value); void gl.uniform3f(location, v0, v1, v2); void gl.uniform3fv(location, value); void gl.uniform3i(location, v0, v1, v2); void gl.uniform3iv(location, value); void gl.uniform4f(location, v0, v1, v2, v3); void gl.uniform4fv(location, value); void gl.uniform4i(location, v0, v1, v2, v3); void gl.uniform4iv(location, value); parameters location a
webgluniformlocation object containing the location of the uniform attribute to modify.
... examples gl.uniform1f(u_alpha, 0.8); specifications specification status comment
webgl 1.0the definition of 'uniform' in that specification.
WebGLRenderingContext.viewport() - Web APIs
the
webglrenderingcontext.viewport() method of the
webgl api sets the viewport, which specifies the affine transformation of x and y from normalized device coordinates to window coordinates.
... examples when you first create a
webgl context, the size of the viewport will match the size of the canvas.
... however, if you resize the canvas, you will need to tell the
webgl context a new viewport setting.
...int32array[0, 0, 640, 480] specifications specification status comment
webgl 1.0the definition of 'viewport' in that specification.
WebGLSampler - Web APIs
the
webglsampler interface is part of the
webgl 2 api and stores sampling parameters for
webgltexture access inside of a shader.
... when working with
webglsampler objects, the following methods of the
webgl2renderingcontext are useful:
webgl2renderingcontext.createsampler()
webgl2renderingcontext.deletesampler()
webgl2renderingcontext.issampler()
webgl2renderingcontext.bindsampler()
webgl2renderingcontext.getsamplerparameter() examples creating a
webglsampler object in this example, gl must be a
webgl2renderingcontext.
...
webglsampler objects are not available in
webgl 1.
... var sampler = gl.createsampler(); specifications specification status comment
webgl 2.0the definition of '
webglsample' in that specification.
WebGLSync - Web APIs
the
webglsync interface is part of the
webgl 2 api and is used to synchronize activities between the gpu and the application.
... when working with
webglsync objects, the following methods of the
webgl2renderingcontext are useful:
webgl2renderingcontext.fencesync()
webgl2renderingcontext.deletesync()
webgl2renderingcontext.issync()
webgl2renderingcontext.clientwaitsync()
webgl2renderingcontext.waitsync()
webgl2renderingcontext.getsyncparameter() examples creating a
webglsync object in this example, gl must be a
webgl2renderingcontext.
...
webglsync objects are not available in
webgl 1.
... var sync = gl.fencesync(gl.sync_gpu_commands_complete, 0); specifications specification status comment
webgl 2.0the definition of '
webglsync' in that specification.
Canvas size and WebGL - Web APIs
« previousnext » this
webgl example explores the effect of setting (or not setting) the canvas size to its element size in css pixels, as it appears in the browser window.
... effect of canvas size on rendering with
webgl with scissor() and clear() we can demonstrate how the
webgl drawing buffer is affected by the size of the canvas.
...ckground-color : black; } window.addeventlistener("load", function() { "use strict" var firstcanvas = document.getelementsbytagname("canvas")[0], secondcanvas = document.getelementsbytagname("canvas")[1]; firstcanvas.width = firstcanvas.clientwidth; firstcanvas.height = firstcanvas.clientheight; [firstcanvas, secondcanvas].foreach(function(canvas) { var gl = canvas.getcontext("
webgl") || canvas.getcontext("experimental-
webgl"); if (!gl) { document.queryselector("p").innerhtml = "failed to get
webgl context.
... " + "your browser or device may not support
webgl."; return; } gl.viewport(0, 0, gl.drawingbufferwidth, gl.drawingbufferheight); gl.enable(gl.scissor_test); gl.scissor(30, 10, 60, 60); gl.clearcolor(1.0, 1.0, 0.0, 1.0); gl.clear(gl.color_buffer_bit); }); }, false); the source code of this example is also available on github.
Using shaders to apply color in WebGL - Web APIs
applying color to the vertices in
webgl objects are built using sets of vertices, each of which has a position and a color.
...to do this, we first need to create an array of vertex colors, then store it into a
webgl buffer.
...then a new
webgl buffer is allocated to store these colors, and the array is converted into floats and stored into the buffer.
... then, drawscene() can have the following added to it so it actually uses these colors when drawing the square: // tell
webgl how to pull out the colors from the color buffer // into the vertexcolor attribute.
WebRTC coding guide - Web APIs
once you have an overall understanding of what
webrtc does and how it works, your mind likely turns to implementation.
... how do you create a
web application that uses two-way video or data streams without having to do all the hard work of compressing frames, building streams, and so forth by yourself?
... this coding guide will explain in depth how
webrtc works, and will dive into actual code that uses
webrtc to do useful things.
... if you need to learn more about the fundamentals of how
webrtc and its protocols work, check out our high-level guides for
webrtc.
Taking still photos with WebRTC - Web APIs
this article shows how to use
webrtc to access the camera on a computer or mobile phone with
webrtc support and take a photo with it.
... the first panel on the left contains two components: a <video> element, which will receive the stream from
webrtc, and a <button> the user clicks to capture a video frame.
...this function's job is to request access to the user's
webcam, initialize the output <img> to a default state, and to establish the event listeners needed to receive each frame of video from the camera and react when the button is clicked to capture an image.
... fun with filters since we're capturing images from the user's
webcam by grabbing frames from a <video> element, we can very easily apply filters and fun effects to the video.
WebSocket() - Web APIs
the
websocket() constructor returns a new
websocket object.
... syntax var a
websocket = new
websocket(url [, protocols]); parameters url the url to which to connect; this should be the url to which the
websocket server will respond.
...these strings are used to indicate sub-protocols, so that a single server can implement multiple
websocket sub-protocols (for example, you might want one server to be able to handle different types of interactions depending on the specified protocol).
... specifications specification status comment html living standardthe definition of 'the
websocket constructor' in that specification.
Web Crypto API - Web APIs
the
web crypto api is an interface allowing a script to use cryptographic primitives in order to build systems using cryptography.
... warning: the
web crypto api provides a number of low-level cryptographic primitives.
...in order to avoid confusion, methods and properties of this interface have been removed from browsers implementing the
web crypto api, and all
web crypto api methods are available on a new interface: subtlecrypto.
... specifications specification status comment
web cryptography api recommendation initial definition ...
XRWebGLLayerInit.alpha - Web APIs
the alpha property is a boolean value which, if present and set to true in the xr
webgllayerinit dictionary passed into the xr
webgllayer() constructor, specifies that the new layer's color buffer is to include an alpha channel.
... syntax let layerinit = { alpha: boolvalue }; let gllayer = new xr
webgllayer(xrsession, gl, layerinit); let gllayer = new xr
webgllayer(xrsession, gl, { alpha: boolvalue }); value a boolean which can be set to true to request that the new
webgl layer for rendering the
webxr scene is to have an alpha channel.
... example in this example, a new xr
webgllayer is created for a
webxr session, xrsession, without an alpha channel.
... xrsession.updaterenderstate({ baselayer: new xr
webgllayer(xrsession, gl, { alpha: false }); }); specifications specification status comment
webxr device apithe definition of 'xr
webgllayerinit.alpha' in that specification.
XRWebGLLayerInit.stencil - Web APIs
when using the xr
webgllayer() constructor to create a new
webgl rendering layer for
webxr, providing as the layerinit parameter an object whose stencil property is false requests that the new layer be created without a stencil buffer.
... syntax let layerinit = { stencil: false }; let gllayer = new xr
webgllayer(xrsession, gl, layerinit); let gllayer = new xr
webgllayer(xrsession, gl, { stencil: false }); value a boolean which can be set to false to specify that the new
webgl layer should not include a stencil buffer.
... example in this example, a new xr
webgllayer is created for a
webxr session, xrsession, without a stencil buffer.
... xrsession.updaterenderstate({ baselayer: new xr
webgllayer(xrsession, gl, { stencil: false }); }); specifications specification status comment
webxr device apithe definition of 'xr
webgllayerinit.stencil' in that specification.
XRWebGLLayerInit - Web APIs
the
webxr device api's xr
webgllayerinit dictionary is used to provide configuration options when creating a new xr
webgllayer object with the xr
webgllayer() constructor.
...the static xr
webgllayer function xr
webgllayer.getnativeframebufferscalefactor() returns the scale that would result in a 1:1 pixel ratio, thereby ensuring that the rendering is occurring at the device's native resolution.
... examples given an xrsession, xrsession, and a
webgl rendering context, gl, this snippet sets the rendering layer for the session, specifying the ignoredepthvalues option, indicating that the depth buffer should not be used (or should not exist at all), and that the only source for distance information of any given point is its position relative to the viewer.
... const layeroptions = { ignoredepthvalues: true }; xrsession.updaterenderstate({ baselayer: new xr
webgllayer(xrsession, gl, layeroptions); }); specifications specification status comment
webxr device apithe definition of 'xr
webgllayerinit' in that specification.
Handling media support issues in web content - Web media technologies
one of the realities of working with audio and video presentation and manipulation on the
web is that there are a number of media formats available, of varying degrees of popularity and with a variety of capabilities.
...there is a drawback, however: because there are so many to choose from, with so many different kinds of licenses and design principles involved, each
web browser developer is left to its own devices when deciding which media file types and codecs to support.
... this places a small, but reasonably easily overcome, burden on the
web developer: to properly handle the situation when the user's browser can't handle a particular type of media.
... this guide covers techniques you can use to develop
web content that meets your media needs while providing the most broadly compatible experience possible.
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.
...ajax also lets you work asynchronously, meaning your code continues to run while the targeted part of your
web page is trying to reload (compared to synchronously, which blocks your code from running until that part of your page is done reloading).
... with interactive
websites and modern
web standards, ajax is gradually being replaced by functions within javascript frameworks and the official fetch api standard.
Accessibility - MDN Web Docs Glossary: Definitions of Web-related terms
web accessibility (a11y) refers to best practices for keeping a
website usable despite physical and technical restrictions.
...
web accessibility is formally defined and discussed at the w3c through the
web accessibility initiative (wai).
... learn more general knowledge accessibility resources at mdn
web accessibility on wikipedia learn
web accessibility learn accessibility on mdn
web accessibility in mind technical reference the aria documentation on mdn the
web accessibility initiative homepage the wai-aria recommendation ...
Apple Safari - MDN Web Docs Glossary: Definitions of Web-related terms
safari is a
web browser developed by apple and bundled with both macos and ios.
... it's based on the open source
webkit engine.
... learn more general knowledge safari on wikipedia safari on apple.com technical information the
webkit project
webkit nightly build reporting a bug for safari ...
Cross-site scripting - MDN Web Docs Glossary: Definitions of Web-related terms
cross-site scripting (xss) is a security exploit which allows an attacker to inject into a
website malicious client-side code.
...according to the open
web application security project, xss was the seventh most common
web app vulnerability in 2017.
... these attacks succeed if the
web app does not employ enough validation or encoding.
Global object - MDN Web Docs Glossary: Definitions of Web-related terms
in a
web browser, when scripts create global variables, they're created as members of the global object.
...for example: in a
web browser, any code which the script doesn't specifically start up as a background task has a window as its global object.
... this is the vast majority of javascript code on the
web.
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.
...this property makes it ideal for humans to read documents (
web sites) on the world wide
web.
... however, http can also be used as a basis for rest
web services from server to server or ajax requests within
web sites to make them more dynamic.
JavaScript - MDN Web Docs Glossary: Definitions of Web-related terms
summary javascript (or "js") is a programming language used most often for dynamic client-side scripts on
webpages, but it is also often used on the server-side, using a runtime such as node.js.
... javascript is primarily used in the browser, enabling developers to manipulate
webpage content through the dom, manipulate data with ajax and indexeddb, draw graphics with canvas, interact with the device running the browser through various apis, and more.
...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.
Keyword - MDN Web Docs Glossary: Definitions of Web-related terms
online keywords are used as queries for search engines or as words identifying content on
websites.
... when you use a search engine, you use keywords to specify what you are looking for, and the search engine returns relevant
webpages.
...
webpages also use keywords in a meta tag (in the <head> section) to describe page content, so search engines can better identify and organize
webpages.
MVC - MDN Web Docs Glossary: Definitions of Web-related terms
mvc on the
web as a
web developer, this pattern will probably be quite familiar even if you've never consciously used it before.
... in the early days of the
web, mvc architecture was mostly implemented on the server-side, with the client requesting updates via forms or links, and receiving updated views back to display in the browser.
...
web frameworks such as angularjs and ember.js all implement an mvc architecture, albeit in slightly different ways.
Network throttling - MDN Web Docs Glossary: Definitions of Web-related terms
in
web performance, network throttling, or network condition emulation, it is used to emulate low bandwidth conditions experienced by likely a large segment of a site's target user base.
...the internet speeds for developers creating
web applications in a corporate office building on a powerful computer are generally very fast.
...the network speeds of a mobile user accessing that
web application, possibly while traveling or in a remote area with poor data plan covereage, will likely be very slow, if they are able to get online at all.
SQL Injection - MDN Web Docs Glossary: Definitions of Web-related terms
sql injection takes advantage of
web apps that fail to validate user input.
... hackers can maliciously pass sql commands through the
web app for execution by a backend database.
... learn more general knowledge sql injection on wikipedia explanation of sql injection on owasp (open
web application security project) ...
Thread - MDN Web Docs Glossary: Definitions of Web-related terms
the main thread is the one used by the browser to handle user events, render and paint the display, and to run the majority of the code that comprises a typical
web page or app.
... because these things are all happening in one thread, a slow
website or app script slows down the entire browser; worse, if a site or app script enters an infinite loop, the entire browser will hang.
...this is done using technologies such as
web workers, which can be used to spin off a sub-program which runs concurrently with the main thread in a thread of its own.
Time to interactive - MDN Web Docs Glossary: Definitions of Web-related terms
time to interactive (tti) is a non-standardized
web performance 'progress' metric defined as the point in time when the last long task finished and was followed by 5 seconds of network and main thread inactivity.
... tti, proposed by the
web incubator community group in 2018, is intended to provide a metric that describes when a page or application contains useful content and the main thread is idle and free to respond to user interactions, including having event handlers registered.
...although available in some performance monitoring tools, tti is not a part of any official
web specification at the time of writing.
W3C - MDN Web Docs Glossary: Definitions of Web-related terms
the world wide
web consortium (w3c) is an international body that maintains
web-related rules and frameworks.
... it consists of over 350 member-organizations that jointly develop
web standards, run outreach programs, and maintain an open forum for talking about the
web.
... learn more general knowledge w3c
website w3c on wikipedia ...
Safe - MDN Web Docs Glossary: Definitions of Web-related terms
web crawlers also rely on calling safe methods.
... safe methods don't need to serve static files only; a server can generate an answer to a safe method on-the-fly, as long as the generating script guarantees safety: it should not trigger external effects, like triggering an order in an e-commerce
web site.
... it is the responsibility of the application on the server to implement the safe semantic correctly, the
webserver itself, being apache, nginx or iis, can't enforce it by itself.
Element: webkitmouseforcewillbegin event - Web APIs
safari for macos fires the non-standard
webkitmouseforcewillbegin event at an element before firing the initial mousedown event.
... to instruct macos not to engage any default force touch actions if the user apply enough pressure to activate a force touch event, call preventdefault() on the
webkitmouseforcewillbegin event object.
... bubbles unknown cancelable unknown interface mouseevent
webkitmouseforcewillbegin is a proprietary,
webkit-specific event.
HTMLCanvasElement: webglcontextcreationerror event - Web APIs
the
webglcontextcreationerror event of the
webgl api is fired if the user agent is unable to create a
webglrenderingcontext context.
... this event has a
webglcontextevent.statusmessage property, which can contain a platform dependent string with more information about the failure.
... bubbles yes cancelable yes interface
webglcontextevent event handler property none example var canvas = document.getelementbyid('canvas'); canvas.addeventlistener('
webglcontextcreationerror', function(e) { console.log(e.statusmessage || 'unknown error'); }, false); var gl = canvas.getcontext('
webgl'); // logs statusmessage or "unknown error" if unable to create
webgl context specifications specification status comment
webgl 1.0the definition of '
webglcontextcreationerror' in that specification.
HTMLCanvasElement: webglcontextlost event - Web APIs
the
webglcontextlost event of the
webgl api is fired if the user agent detects that the drawing buffer associated with a
webglrenderingcontext object has been lost.
... bubbles yes cancelable yes interface
webglcontextevent event handler property none example with the help of the
webgl_lose_context extension, you can simulate the
webglcontextlost event: const canvas = document.getelementbyid('canvas'); const gl = canvas.getcontext('
webgl'); canvas.addeventlistener('
webglcontextlost', (event) => { console.log(event); }); gl.getextension('
webgl_lose_context').losecontext(); // "
webglcontextlost" event is logged.
... specifications specification status comment
webgl 1.0the definition of '
webglcontextlost' in that specification.
MouseEvent.WEBKIT_FORCE_AT_FORCE_MOUSE_DOWN - Web APIs
do not use it on production sites facing the
web: it will not work for every user.
... mouseevent.
webkit_force_at_force_mouse_down is a proprietary,
webkit-specific, static numeric property whose value is the minimum force necessary for a force click.
... because
webkit_force_at_force_mouse_down is a static property of mouseevent, you always use it as mouseevent.
webkit_force_at_force_mouse_down, rather than as a property of a mouseevent instance.
MouseEvent.WEBKIT_FORCE_AT_MOUSE_DOWN - Web APIs
do not use it on production sites facing the
web: it will not work for every user.
... mouseevent.
webkit_force_at_mouse_down is a proprietary,
webkit-specific, static numeric property whose value is the minimum force necessary for a normal click.
... because
webkit_force_at_mouse_down is a static property of mouseevent, you always use it as mouseevent.
webkit_force_at_mouse_down, rather than as a property of a mouseevent instance.
WEBGL_lose_context.restoreContext() - Web APIs
the
webgl_lose_context.restorecontext() method is part of the
webgl api and allows you to simulate restoring the context of a
webglrenderingcontext object.
... syntax gl.getextension('
webgl_lose_context').restorecontext(); errors thrown invalid_operation if the context was not lost.
... examples with this method, you can simulate the
webglcontextrestored event: var canvas = document.getelementbyid('canvas'); var gl = canvas.getcontext('
webgl'); canvas.addeventlistener('
webglcontextrestored', function(e) { console.log(e); }, false); gl.getextension('
webgl_lose_context').restorecontext(); specifications specification status comment
webgl_lose_contextthe definition of '
webgl_lose_context.losecontext' in that specification.
WebGL2RenderingContext.beginQuery() - Web APIs
the
webgl2renderingcontext.beginquery() method of the
webgl 2 api starts an asynchronous query.
... query a
webglquery object for which to start the querying.
... specifications specification status comment
webgl 2.0the definition of 'beginquery' in that specification.
WebGL2RenderingContext.beginTransformFeedback() - Web APIs
the
webgl2renderingcontext.begintransformfeedback() method of the
webgl 2 api starts a transform feedback operation.
... examples var transformfeedback = gl.createtransformfeedback(); gl.bindtransformfeedback(gl.transform_feedback, transformfeedback); gl.begintransformfeedback(gl.triangles); gl.drawarrays(gl.triangles, 0, 3); specifications specification status comment
webgl 2.0the definition of 'begintransformfeedback' in that specification.
... editor's draft initial definition for
webgl.
WebGL2RenderingContext.bindSampler() - Web APIs
the
webgl2renderingcontext.bindsampler() method of the
webgl 2 api binds a passed
webglsampler object to the texture unit at the passed index.
... sampler a
webglsampler object to bind.
... examples var sampler = gl.createsampler(); gl.bindsampler(0, sampler); specifications specification status comment
webgl 2.0the definition of 'bindsampler' in that specification.
WebGL2RenderingContext.bindVertexArray() - Web APIs
the
webgl2renderingcontext.bindvertexarray() method of the
webgl 2 api binds a passed
webglvertexarrayobject object to the buffer.
... syntax void gl.bindvertexarray(vertexarray); parameters vertexarray a
webglvertexarrayobject (vao) object to bind.
... specifications specification status comment
webgl 2.0the definition of 'bindvertexarray' in that specification.
WebGL2RenderingContext.blitFramebuffer() - Web APIs
the
webgl2renderingcontext.blitframebuffer() method of the
webgl 2 api transfers a block of pixels from the read framebuffer to the draw framebuffer.
... examples gl.blitframebuffer(0, 0, canvas.width, canvas.height, 0, 0, canvas.width, canvas.height, gl.color_buffer_bit, gl.nearest); specifications specification status comment
webgl 2.0the definition of 'blitframebuffer' in that specification.
... editor's draft initial definition for
webgl.
WebGL2RenderingContext.clearBuffer[fiuv]() - Web APIs
the
webgl2renderingcontext.clearbuffer[fiuv]() methods of the
webgl 2 api clear buffers from the currently bound framebuffer.
... examples gl.clearbufferiv(gl.color, 0, new int32array([r, g, b, a])); gl.clearbufferuiv(gl.color, 0, new uint32array([r, g, b, a])); gl.clearbufferfv(gl.color, 0, new float32array([r, g, b, a])); gl.clearbufferfv(gl.color, 0, [0.0, 0.0, 0.0, 0.0]); gl.clearbufferfi(gl.depth_stencil, 0, 1.0, 0); specifications specification status comment
webgl 2.0the definition of 'clearbuffer[fiuv]()' in that specification.
... editor's draft initial definition for
webgl.
WebGL2RenderingContext.compressedTexSubImage3D() - Web APIs
the
webgl2renderingcontext.compressedtexsubimage3d() method of the
webgl api specifies a three-dimensional sub-rectangle for a texture image in a compressed format.
... examples gl.compressedtexsubimage3d(gl.texture_3d, 0, 0, 0, 512, 512, 512, gl.compressed_r11_eac, texturedata); specifications specification status comment
webgl 2.0the definition of 'compressedtexsubimage3d' in that specification.
... editor's draft initial definition for
webgl.
WebGL2RenderingContext.copyBufferSubData() - Web APIs
the
webgl2renderingcontext.copybuffersubdata() method of the
webgl 2 api copies part of the data of a buffer to another buffer.
...uffer(gl.array_buffer, srcbuffer); gl.bufferdata(gl.array_buffer, data, gl.static_draw); gl.bindbuffer(gl.copy_read_buffer, srcbuffer); gl.bindbuffer(gl.array_buffer, dstbuffer); gl.bufferdata(gl.array_buffer, new float32array(length), gl.static_draw); gl.copybuffersubdata(gl.copy_read_buffer, gl.array_buffer, 0, 0, length); specifications specification status comment
webgl 2.0the definition of 'copybuffersubdata' in that specification.
... editor's draft initial definition for
webgl.
WebGL2RenderingContext.deleteVertexArray() - Web APIs
the
webgl2renderingcontext.deletevertexarray() method of the
webgl 2 api deletes a given
webglvertexarrayobject object.
... syntax void gl.deletevertexarray(vertexarray); parameters vertexarray a
webglvertexarrayobject (vao) object to delete.
... gl.deletevertexarray(vao); specifications specification status comment
webgl 2.0the definition of 'deletevertexarray' in that specification.
WebGL2RenderingContext.drawBuffers() - Web APIs
the
webgl2renderingcontext.drawbuffers() method of the
webgl 2 api defines draw buffers to which fragment colors are written into.
... examples gl.drawbuffers([gl.none, gl.color_attachment1]); specifications specification status comment
webgl 2.0the definition of 'drawbuffers' in that specification.
... editor's draft initial definition for
webgl.
WebGL2RenderingContext.drawRangeElements() - Web APIs
the
webgl2renderingcontext.drawrangeelements() method of the
webgl api renders primitives from array data in a given range.
... examples gl.drawrangeelements(gl.points, 0, 7, 8, gl.unsigned_byte, 0); specifications specification status comment
webgl 2.0the definition of 'drawrangeelements' in that specification.
... editor's draft initial definition for
webgl.
WebGL2RenderingContext.endTransformFeedback() - Web APIs
the
webgl2renderingcontext.endtransformfeedback() method of the
webgl 2 api ends a transform feedback operation.
... examples var transformfeedback = gl.createtransformfeedback(); gl.bindtransformfeedback(gl.transform_feedback, transformfeedback); gl.begintransformfeedback(gl.triangles); gl.drawarrays(gl.triangles, 0, 3); gl.endtransformfeedback(); specifications specification status comment
webgl 2.0the definition of 'endtransformfeedback' in that specification.
... editor's draft initial definition for
webgl.
WebGL2RenderingContext.getFragDataLocation() - Web APIs
the
webgl2renderingcontext.getfragdatalocation() method of the
webgl 2 api returns the binding of color numbers to user-defined varying out variables.
... syntax glint gl.getfragdatalocation(program, name); parameters program a
webglprogram to query.
... examples // program is a linked
webglprogram gl.getfragdatalocation(program, 'fragcolor'); specifications specification status comment
webgl 2.0the definition of 'getfragdatalocation' in that specification.
WebGL2RenderingContext.getInternalformatParameter() - Web APIs
the
webgl2renderingcontext.getinternalformatparameter() method of the
webgl 2 api returns information about implementation-dependent support for internal formats.
... examples var samples = gl.getinternalformatparameter(gl.renderbuffer, gl.rgba8, gl.samples); specifications specification status comment
webgl 2.0the definition of 'getinternalformatparameter' in that specification.
... editor's draft initial definition for
webgl.
WebGL2RenderingContext.getQueryParameter() - Web APIs
the
webgl2renderingcontext.getqueryparameter() method of the
webgl 2 api returns parameter information of a
webglquery object.
... syntax any gl.getqueryparameter(query, pname); parameters query a
webglquery object.
... examples var query = gl.createquery(); gl.beginquery(gl.any_samples_passed, query); var result = gl.getqueryparameter(query, gl.query_result); specifications specification status comment
webgl 2.0the definition of 'getqueryparameter' in that specification.
WebGL2RenderingContext.getSamplerParameter() - Web APIs
the
webgl2renderingcontext.getsamplerparameter() method of the
webgl 2 api returns parameter information of a
webglsampler object.
... syntax any gl.getsamplerparameter(sampler, pname); parameters sampler a
webglsampler object.
... examples var sampler = gl.createsampler(); gl.getsamplerparameter(sampler, gl.texture_compare_func); specifications specification status comment
webgl 2.0the definition of 'getsamplerparameter' in that specification.
WebGL2RenderingContext.invalidateFramebuffer() - Web APIs
the
webgl2renderingcontext.invalidateframebuffer() method of the
webgl 2 api invalidates the contents of attachments in a framebuffer.
... examples gl.invalidateframebuffer(gl.read_framebuffer, [gl.color_attachment0, gl.color_attachment1]); specifications specification status comment
webgl 2.0the definition of 'invalidateframebuffer' in that specification.
... editor's draft initial definition for
webgl.
WebGL2RenderingContext.invalidateSubFramebuffer() - Web APIs
the
webgl2renderingcontext.invalidatesubframebuffer() method of the
webgl 2 api invalidates portions of the contents of attachments in a framebuffer.
... examples gl.invalidatesubframebuffer(gl.read_framebuffer, [gl.color_attachment0, gl.color_attachment1], 0, 0, 256, 256); specifications specification status comment
webgl 2.0the definition of 'invalidatesubframebuffer' in that specification.
... editor's draft initial definition for
webgl.
WebGL2RenderingContext.pauseTransformFeedback() - Web APIs
the
webgl2renderingcontext.pausetransformfeedback() method of the
webgl 2 api pauses a transform feedback operation.
...gl.resumetransformfeedback(); gl.drawarrays(gl.triangles, 0, 3); gl.endtransformfeedback(); specifications specification status comment
webgl 2.0the definition of 'pausetransformfeedback' in that specification.
... editor's draft initial definition for
webgl.
WebGL2RenderingContext.readBuffer() - Web APIs
the
webgl2renderingcontext.readbuffer() method of the
webgl 2 api selects a color buffer as the source for pixels for subsequent calls to copyteximage2d, copytexsubimage2d, copytexsubimage3d or readpixels.
... examples gl.readbuffer(gl.color_attachment0); specifications specification status comment
webgl 2.0the definition of 'readbuffer' in that specification.
... editor's draft initial definition for
webgl.
WebGL2RenderingContext.renderbufferStorageMultisample() - Web APIs
the
webgl2renderingcontext.renderbufferstoragemultisample() method of the
webgl 2 api returns creates and initializes a renderbuffer object's data store and allows specifying a number of samples to be used.
... examples gl.renderbufferstoragemultisample(gl.renderbuffer, 4, gl.rbga4, 256, 256); specifications specification status comment
webgl 2.0the definition of 'glrenderbufferstoragemultisample' in that specification.
... editor's draft initial definition for
webgl.
WebGL2RenderingContext.resumeTransformFeedback() - Web APIs
the
webgl2renderingcontext.resumetransformfeedback() method of the
webgl 2 api resumes a transform feedback operation.
...gl.resumetransformfeedback(); gl.drawarrays(gl.triangles, 0, 3); gl.endtransformfeedback(); specifications specification status comment
webgl 2.0the definition of 'resumetransformfeedback' in that specification.
... editor's draft initial definition for
webgl.
WebGL2RenderingContext.texStorage3D() - Web APIs
the
webgl2renderingcontext.texstorage3d() method of the
webgl api specifies all levels of a three-dimensional texture or two-dimensional array texture.
... examples gl.texstorage3d(gl.texture_3d, 1, gl.rgb8, 256, 256, 256); specifications specification status comment
webgl 2.0the definition of 'texstorage3d' in that specification.
... editor's draft initial definition for
webgl.
WebGL2RenderingContext.vertexAttribI4[u]i[v]() - Web APIs
the
webgl2renderingcontext.vertexattribi4[u]i[v]() methods of the
webgl 2 api specify integer values for generic vertex attributes.
... examples gl.vertexattribi4i(a_foobar, 10); specifications specification status comment
webgl 2.0the definition of 'vertexattribi' in that specification.
... editor's draft initial definition for
webgl.
WebGLBuffer - Web APIs
the
webglbuffer interface is part of the
webgl api and represents an opaque buffer object storing data such as vertices or colors.
... description the
webglbuffer object does not define any methods or properties of its own and its content is not directly accessible.
... when working with
webglbuffer objects, the following methods of the
webglrenderingcontext are useful:
webglrenderingcontext.bindbuffer()
webglrenderingcontext.createbuffer()
webglrenderingcontext.deletebuffer()
webglrenderingcontext.isbuffer() examples creating a buffer var canvas = document.getelementbyid('canvas'); var gl = canvas.getcontext('
webgl'); var buffer = gl.createbuffer(); specifications specification status comment
webgl 1.0the definition of '
webglbuffer' in that specification.
WebGLContextEvent.statusMessage - Web APIs
the read-only
webglcontextevent.statusmessage property contains additional event status information, or is an empty string if no additional information is available.
...this can occur, for example, if the
webglcontextcreationerror event is fired.
... var canvas = document.getelementbyid('canvas'); var gl = canvas.getcontext('
webgl'); canvas.addeventlistener('
webglcontextcreationerror', function(e) { console.log('
webgl context creation failed:' + e.statusmessage || 'unknown error'); }, false); specifications specification status comment
webgl 1.0the definition of '
webglcontextevent.statusmessage' in that specification.
WebGLFramebuffer - Web APIs
the
webglframebuffer interface is part of the
webgl api and represents a collection of buffers that serve as a rendering destination.
... description the
webglframebuffer object does not define any methods or properties of its own and its content is not directly accessible.
... when working with
webglframebuffer objects, the following methods of the
webglrenderingcontext are useful:
webglrenderingcontext.bindframebuffer()
webglrenderingcontext.createframebuffer()
webglrenderingcontext.deleteframebuffer()
webglrenderingcontext.isframebuffer() examples creating a frame buffer var canvas = document.getelementbyid('canvas'); var gl = canvas.getcontext('
webgl'); var buffer = gl.createframebuffer(); specifications specification status comment
webgl 1.0the definition of '
webglframebuffer' in that specification.
WebGLRenderbuffer - Web APIs
the
webglrenderbuffer interface is part of the
webgl api and represents a buffer that can contain an image, or can be source or target of an rendering operation.
... description the
webglrenderbuffer object does not define any methods or properties of its own and its content is not directly accessible.
... when working with
webglrenderbuffer objects, the following methods of the
webglrenderingcontext are useful:
webglrenderingcontext.bindrenderbuffer()
webglrenderingcontext.createrenderbuffer()
webglrenderingcontext.deleterenderbuffer()
webglrenderingcontext.isrenderbuffer() examples creating a render buffer var canvas = document.getelementbyid('canvas'); var gl = canvas.getcontext('
webgl'); var buffer = gl.createrenderbuffer(); specifications specification status comment
webgl 1.0the definition of '
webglrenderbuffer' in that specification.
WebGLRenderingContext.canvas - Web APIs
the
webglrenderingcontext.canvas property is a read-only reference to the htmlcanvaselement or offscreencanvas object that is associated with the context.
... examples canvas element given this <canvas> element: <canvas id="canvas"></canvas> you can get back a reference to it from the
webglrenderingcontext using the canvas property: var canvas = document.getelementbyid('canvas'); var gl = canvas.getcontext('
webgl'); gl.canvas; // htmlcanvaselement offscreen canvas example using the experimental offscreencanvas object.
... var offscreen = new offscreencanvas(256, 256); var gl = offscreen.getcontext('
webgl'); gl.canvas; // offscreencanvas specifications specification status comment
webgl 1.0the definition of '
webglrenderingcontext.canvas' in that specification.
WebGLRenderingContext.compileShader() - Web APIs
the
webglrenderingcontext.compileshader() method of the
webgl api compiles a glsl shader into binary data so that it can be used by a
webglprogram.
... syntax void gl.compileshader(shader); parameters shader a fragment or vertex
webglshader.
... examples var shader = gl.createshader(gl.vertex_shader); gl.shadersource(shader, shadersource); gl.compileshader(shader); specifications specification status comment
webgl 1.0the definition of 'compileshader' in that specification.
WebGLRenderingContext.createShader() - Web APIs
the
webglrenderingcontext method createshader() of the
webgl api creates a
webglshader that can then be configured further using
webglrenderingcontext.shadersource() and
webglrenderingcontext.compileshader().
... syntax
webglshader gl.createshader(type); parameters type either gl.vertex_shader or gl.fragment_shader examples see
webglshader for usage and examples.
... specifications specification status comment
webgl 1.0the definition of 'createshader' in that specification.
WebGLRenderingContext.depthRange() - Web APIs
the
webglrenderingcontext.depthrange() method of the
webgl api specifies the depth range mapping from normalized device coordinates to window or viewport coordinates.
... examples gl.depthrange(0.2, 0.6); to check the current depth range, query the depth_range constant which returns a float32array gl.getparameter(gl.depth_range); // float32array[0.2, 0.6] specifications specification status comment
webgl 1.0the definition of 'depthrange' in that specification.
...unlike opengl,
webgl requires znear and zfar values to be clamped to the range 0 to 1.
WebGLRenderingContext.getAttribLocation() - Web APIs
the
webglrenderingcontext.getattriblocation() method of the
webgl api returns the location of an attribute variable in a given
webglprogram.
... syntax glint gl.getattriblocation(program, name); parameters program a
webglprogram containing the attribute variable.
... examples gl.getattriblocation(program, 'vcolor'); specifications specification status comment
webgl 1.0the definition of 'getattriblocation' in that specification.
WebGLRenderingContext.getError() - Web APIs
the
webglrenderingcontext.geterror() method of the
webgl api returns error information.
... gl.context_lost_
webgl if the
webgl context is lost, this error is returned on the first call to geterror.
... examples gl.geterror(); // gl.no_error (0) gl.enable(gl.foobar); gl.geterror(); // gl.invalid_enum; specifications specification status comment
webgl 1.0the definition of 'geterror' in that specification.
WebGLRenderingContext.getShaderParameter() - Web APIs
the
webglrenderingcontext.getshaderparameter() method of the
webgl api returns information about the given shader.
... syntax any gl.getshaderparameter(shader, pname); parameters shader a
webglshader to get parameter information from.
... examples gl.getshaderparameter(shader, gl.shader_type); specifications specification status comment
webgl 1.0the definition of 'getshaderparameter' in that specification.
WebGLRenderingContext.getShaderSource() - Web APIs
the
webglrenderingcontext.getshadersource() method of the
webgl api returns the source code of a
webglshader as a domstring.
... syntax domstring gl.getshadersource(shader); parameters shader a
webglshader object to get the source code from.
... examples var shader = gl.createshader(gl.vertex_shader); gl.shadersource(shader, originalsource); var source = gl.getshadersource(shader); specifications specification status comment
webgl 1.0the definition of 'getshadersource' in that specification.
WebGLRenderingContext.isBuffer() - Web APIs
the
webglrenderingcontext.isbuffer() method of the
webgl api returns true if the passed
webglbuffer is valid and false otherwise.
... syntax glboolean gl.isbuffer(buffer); parameters buffer a
webglbuffer to check.
... examples creating a buffer var canvas = document.getelementbyid('canvas'); var gl = canvas.getcontext('
webgl'); var buffer = gl.createbuffer(); gl.isbuffer(buffer); specifications specification status comment
webgl 1.0the definition of 'isbuffer' in that specification.
WebGLRenderingContext.isFramebuffer() - Web APIs
the
webglrenderingcontext.isframebuffer() method of the
webgl api returns true if the passed
webglframebuffer is valid and false otherwise.
... syntax glboolean gl.isframebuffer(framebuffer); parameters framebuffer a
webglframebuffer to check.
... examples checking a frame buffer var canvas = document.getelementbyid('canvas'); var gl = canvas.getcontext('
webgl'); var framebuffer = gl.createframebuffer(); gl.isframebuffer(framebuffer); specifications specification status comment
webgl 1.0the definition of 'isframebuffer' in that specification.
WebGLRenderingContext.isRenderbuffer() - Web APIs
the
webglrenderingcontext.isrenderbuffer() method of the
webgl api returns true if the passed
webglrenderbuffer is valid and false otherwise.
... syntax glboolean gl.isrenderbuffer(renderbuffer); parameters renderbuffer a
webglrenderbuffer to check.
... examples checking a renderbuffer var canvas = document.getelementbyid('canvas'); var gl = canvas.getcontext('
webgl'); var renderbuffer = gl.createrenderbuffer(); gl.isrenderbuffer(renderbuffer); specifications specification status comment
webgl 1.0the definition of 'isrenderbuffer' in that specification.
WebGLRenderingContext.isTexture() - Web APIs
the
webglrenderingcontext.istexture() method of the
webgl api returns true if the passed
webgltexture is valid and false otherwise.
... syntax glboolean gl.istexture(texture); parameters texture a
webgltexture to check.
... examples checking a texture var canvas = document.getelementbyid('canvas'); var gl = canvas.getcontext('
webgl'); var texture = gl.createtexture(); gl.istexture(texture); specifications specification status comment
webgl 1.0the definition of 'istexture' in that specification.
WebGLRenderingContext.shaderSource() - Web APIs
the
webglrenderingcontext.shadersource() method of the
webgl api sets the source code of a
webglshader.
... syntax void gl.shadersource(shader, source); parameters shader a
webglshader object in which to set the source code.
... examples var shader = gl.createshader(gl.vertex_shader); gl.shadersource(shader, originalsource); var source = gl.getshadersource(shader); specifications specification status comment
webgl 1.0the definition of 'shadersource' in that specification.
WebGLRenderingContext.stencilMask() - Web APIs
the
webglrenderingcontext.stencilmask() method of the
webgl api controls enabling and disabling of both the front and back writing of individual bits in the stencil planes.
... the
webglrenderingcontext.stencilmaskseparate() method can set front and back stencil writemasks to different values.
... gl.getparameter(gl.stencil_writemask); // 110101 gl.getparameter(gl.stencil_back_writemask); // 110101 gl.getparameter(gl.stencil_bits); // 0 specifications specification status comment
webgl 1.0the definition of 'stencilmask' in that specification.
WebGLRenderingContext.stencilMaskSeparate() - Web APIs
the
webglrenderingcontext.stencilmaskseparate() method of the
webgl api controls enabling and disabling of front and/or back writing of individual bits in the stencil planes.
... the
webglrenderingcontext.stencilmask() method can set both, the front and back stencil writemasks to one value at the same time.
... gl.getparameter(gl.stencil_writemask); // 110101 gl.getparameter(gl.stencil_back_writemask); // 110101 gl.getparameter(gl.stencil_bits); // 0 specifications specification status comment
webgl 1.0the definition of 'stencilmaskseparate' in that specification.
WebGLRenderingContext.stencilOp() - Web APIs
the
webglrenderingcontext.stencilop() method of the
webgl api sets both the front and back-facing stencil test actions.
... gl.replace sets the stencil buffer value to the reference value as specified by
webglrenderingcontext.stencilfunc().
... gl.getparameter(gl.stencil_fail); gl.getparameter(gl.stencil_pass_depth_pass); gl.getparameter(gl.stencil_pass_depth_fail); gl.getparameter(gl.stencil_back_fail); gl.getparameter(gl.stencil_back_pass_depth_pass); gl.getparameter(gl.stencil_back_pass_depth_fail); gl.getparameter(gl.stencil_bits); specifications specification status comment
webgl 1.0the definition of 'stencilop' in that specification.
WebGLRenderingContext.stencilOpSeparate() - Web APIs
the
webglrenderingcontext.stencilopseparate() method of the
webgl api sets the front and/or back-facing stencil test actions.
... gl.replace sets the stencil buffer value to the reference value as specified by
webglrenderingcontext.stencilfunc().
... gl.getparameter(gl.stencil_fail); gl.getparameter(gl.stencil_pass_depth_pass); gl.getparameter(gl.stencil_pass_depth_fail); gl.getparameter(gl.stencil_back_fail); gl.getparameter(gl.stencil_back_pass_depth_pass); gl.getparameter(gl.stencil_back_pass_depth_fail); gl.getparameter(gl.stencil_bits); specifications specification status comment
webgl 1.0the definition of 'stencilopseparate' in that specification.
WebGLRenderingContext.uniformMatrix[234]fv() - Web APIs
the
webglrenderingcontext.uniformmatrix[234]fv() methods of the
webgl api specify matrix values for uniform variables.
... syntax
webglrenderingcontext.uniformmatrix2fv(location, transpose, value);
webglrenderingcontext.uniformmatrix3fv(location, transpose, value);
webglrenderingcontext.uniformmatrix4fv(location, transpose, value); parameters location a
webgluniformlocation object containing the location of the uniform attribute to modify.
... return value undefined examples gl.uniformmatrix2fv(loc, false, [2,1, 2,2]); specifications specification status comment
webgl 1.0the definition of 'uniformmatrix' in that specification.
WebGLRenderingContext.useProgram() - Web APIs
the
webglrenderingcontext.useprogram() method of the
webgl api sets the specified
webglprogram as part of the current rendering state.
... syntax void gl.useprogram(program); parameters program a
webglprogram to use.
... examples var program = gl.createprogram(); // attach pre-existing shaders gl.attachshader(program, vertexshader); gl.attachshader(program, fragmentshader); gl.linkprogram(program); gl.useprogram(program); specifications specification status comment
webgl 1.0the definition of 'useprogram' in that specification.
WebGLTexture - Web APIs
the
webgltexture interface is part of the
webgl api and represents an opaque texture object providing storage and state for texturing operations.
... description the
webgltexture object does not define any methods or properties of its own and its content is not directly accessible.
... when working with
webgltexture objects, the following methods of the
webglrenderingcontext are useful:
webglrenderingcontext.bindtexture()
webglrenderingcontext.createtexture()
webglrenderingcontext.deletetexture()
webglrenderingcontext.istexture() examples creating a texture var canvas = document.getelementbyid('canvas'); var gl = canvas.getcontext('
webgl'); var texture = gl.createtexture(); specifications specification status comment
webgl 1.0the definition of '
webgltexture' in that specification.
WebGLUniformLocation - Web APIs
the
webgluniformlocation interface is part of the
webgl api and represents the location of a uniform variable in a shader program.
... description the
webgluniformlocation object does not define any methods or properties of its own and its content is not directly accessible.
... when working with
webgluniformlocation objects, the following methods of the
webglrenderingcontext are useful:
webglrenderingcontext.getuniformlocation()
webglrenderingcontext.uniform() examples getting an uniform location var canvas = document.getelementbyid('canvas'); var gl = canvas.getcontext('
webgl'); var location = gl.getuniformlocation(
webglprogram, 'uniformname'); specifications specification status comment
webgl 1.0the definition of '
webgluniformlocation' in that specification.
WebGLVertexArrayObject - Web APIs
the
webglvertexarrayobject interface is part of the
webgl 2 api, represents vertex array objects (vaos) pointing to vertex array data, and provides names for different sets of vertex data.
... when working with
webglvertexarrayobject objects, the following methods are useful:
webgl2renderingcontext.createvertexarray()
webgl2renderingcontext.deletevertexarray()
webgl2renderingcontext.isvertexarray()
webgl2renderingcontext.bindvertexarray()
webgl 1: the oes_vertex_array_object extension allows you to use vertex array objects in a
webgl 1 context.
... specifications specification status comment
webgl 2.0the definition of '
webglvertexarrayobject' in that specification.
Lighting in WebGL - Web APIs
« previousnext » as should be clear by now,
webgl doesn't have much built-in knowledge.
...instead of discussing it in depth here, take a look at the article on phong shading at wikipedia, which provides a good overview of the most commonly used lighting model or if you'd like to see a
webgl based explanation see this artcle.
... then we add the code to drawscene() to bind the normals array to a shader attribute so the shader code can get access to it: // tell
webgl how to pull out the normals from // the normal buffer into the vertexnormal attribute.
WebSocket.binaryType - Web APIs
the
websocket.binarytype property returns the type of binary data being transmitted by the connection.
... syntax var binarytype = a
websocket.binarytype; value a domstring: "blob" if blob objects are used.
... specifications specification status comment html living standardthe definition of '
websocket: binarytype' in that specification.
WebSocket.bufferedAmount - Web APIs
the
websocket.bufferedamount read-only property returns the number of bytes of data that have been queued using calls to send() but not yet transmitted to the network.
... syntax var bufferedamount = a
websocket.bufferedamount; value an unsigned long.
... specifications specification status comment html living standardthe definition of '
websocket: bufferedamount' in that specification.
WebSocket.close() - Web APIs
the
websocket.close() method closes the
websocket connection or connection attempt, if any.
... syntax
websocket.close(); parameters code optional a numeric value indicating the status code explaining why the connection is being closed.
... specifications specification status comment html living standard the definition of '
websocket.close()' in that specification.
WebSocket: close event - Web APIs
the close event is fired when a connection with a
websocket is closed.
...given that you have a variable called examplesocket that refers to an opened
websocket, this handler would handle the situation where the socket has been closed.
...et.addeventlistener('close', (event) => { console.log('the connection has been closed successfully.'); )}; you can perform the same actions using the event handler property, like this: examplesocket.onclose = function (event) { console.log('the connection has been closed successfully.'); }; specifications specification status html living standardthe definition of '
websocket close' in that specification.
WebSocket.extensions - Web APIs
the
websocket.extensions read-only property returns the extensions selected by the server.
... syntax var extensions = a
websocket.extensions; value a domstring.
... specifications specification status comment html living standardthe definition of '
websocket: extensions' in that specification.
WebSocket: message event - Web APIs
the message event is fired when data is received through a
websocket.
... bubbles no cancelable no interface messageevent event handler property onmessage examples // create
websocket connection.
... const socket = new
websocket('ws://localhost:8080'); // listen for messages socket.addeventlistener('message', function (event) { console.log('message from server ', event.data); }); specifications specification status html living standardthe definition of '
websocket message' in that specification.
WebSocket.onclose - Web APIs
the
websocket.onclose property is an eventhandler that is called when the
websocket connection's readystate changes to closed.
... syntax a
websocket.onclose = function(event) { console.log("
websocket is closed now."); }; value an eventlistener.
... specifications specification status comment html living standardthe definition of '
websocket: onclose' in that specification.
Setting up your own test automation environment - Learn web development
previous overview: cross browser testing in this article, we will teach you how to install your own automation environment and run your own tests using selenium/
webdriver and a testing library such as selenium-
webdriver for node.
...there are other ways, but the best way to use selenium is via
webdriver, a powerful api that builds on top of selenium and makes calls to a browser to automate it, carrying out actions such as "open this
web page", "move over this element on the page", "click this link", "see whether the link opens this url", etc.
... how you install and use
webdriver depends on what programming environment you want to use to write and run your tests.
...And 44 more matches
IDBObjectStore - Web APIs
note: this feature is available in
web workers.
... desktopmobilechromeedgefirefoxinternet exploreroperasafariandroid
webviewchrome for androidfirefox for androidopera for androidsafari on iossamsung internetidbobjectstorechrome full support 24 full support 24 no support 23 — 57prefixed prefixed implemented with the vendor prefix:
webkitedge full support 1...
... full support 16 full support 16 no support 10 — 16prefixed prefixed implemented with the vendor prefix: mozie partial support 10opera full support 15safari full support 7
webview android full support yes full support yes no support ?
...And 43 more matches
Client-Server Overview - Learn web development
as most
website server-side code handles requests and responses in similar ways, this will help you understand what you need to do when writing most of your own code.
...a basic understanding of what a
web server is.
... objective: to understand client-server interactions in a dynamic
website, and in particular what operations need to be performed by server-side code.
...And 42 more matches
WebAssembly
webassembly is a new type of code that can be run in modern
web browsers — it is a low-level assembly-like language with a compact binary format that runs with near-native performance and provides languages such as c/c++, c# and rust with a compilation target so that they can run on the
web.
... in a nutshell
webassembly has huge implications for the
web platform — it provides a way to run code written in multiple languages on the
web at near native speed, with client apps running on the
web that previously couldn’t have done so.
...
webassembly is designed to complement and run alongside javascript — using the
webassembly javascript apis, you can load
webassembly modules into a javascript app and share functionality between the two.
...And 41 more matches
Client-side storage - Learn web development
previous overview: client-side
web apis modern
web browsers support a number of ways for
web sites to store data on the user's computer — with the user's permission — then retrieve it when necessary.
...most major modern
web sites are dynamic — they store data on the server using some kind of database (server-side storage), then run server-side code to retrieve needed data, insert it into static page templates, and serve the resulting html to the client to be displayed by the user's browser.
... saving
web application generated documents locally for use offline often client-side and server-side storage are used together.
...And 37 more matches
Introduction to client-side frameworks - Learn web development
a brief history when javascript debuted in 1996, it added occasional interactivity and excitement to a
web that was, up until then, composed of static documents.
... the
web became not just a place to read things, but to do things.
...this shared ecosystem of libraries helped shape the growth of the
web.
...And 36 more matches
The Business Benefits of Web Standards - Archive of obsolete content
introduction and context doing more with less seems to be the mission impossible for
web designers: addressing more customers, a broader audience, more diversity in terms of browsers, more accessibility, users asking for more speed, while spending less to maintain or redesign a
web site.
... caught between a rock and a hard place,
web designers face a formidable challenge.
... yet they are finding an unsuspected ally in the battle:
web standards.
...And 34 more matches
Aprender y obtener ayuda - Learn web development
there are also are times when you'll get stuck and feel frustrated — even professional
web developers feel like this regularly — and it pays to know about the most effective ways to try and get help so you can progress in your work.
... this article provides some hints and tips in both of these areas that will help you get more out of learning
web development, as well as further reading so you can find out more information about each sub-topic should you wish..
... textual articles you'll find a lot of written articles on the
web to teach you about
web design.
...And 34 more matches
Introduction to the server side - Learn web development
after reading this article you'll understand the additional power available to
websites through server-side coding.
...a basic understanding of what a
web server is.
... most large-scale
websites use server-side code to dynamically display different data when needed, generally pulled out of a database stored on a server and sent to the client to be displayed via some code (e.g.
...And 32 more matches
Progressive web apps (PWAs)
progressive
web apps are
web apps that use emerging
web browser apis and features along with traditional progressive enhancement strategy to bring a native app-like user experience to cross-platform
web applications.
... progressive
web apps are a useful design pattern, though they aren't a formalized standard.
... pwa can be thought of as similar to ajax or other similar patterns that encompass a set of application attributes, including use of specific
web technologies and techniques.
...And 32 more matches
WebAssembly - JavaScript
the
webassembly javascript object acts as the namespace for all
webassembly-related functionality.
... unlike most other global objects,
webassembly is not a constructor (it is not a function object).
... description the primary uses for the
webassembly object are: loading
webassembly code, using the
webassembly.instantiate() function.
...And 31 more matches
Common questions - Learn web development
how the
web works this section covers
web mechanics —questions relating to general knowledge of the
web ecosystem and how it works.
... the internet is the backbone of the
web, the technical infrastructure that makes the
web possible.
... what is the difference between
webpage,
website,
web server, and search engine?
...And 30 more matches
BluetoothCharacteristicProperties - Web APIs
the bluetoothcharacteristicproperties interface of the the
web bluetooth api provides the operations that are valid on the given bluetoothremotegattcharacteristic.
...aracteristic = await service.getcharacteristic('heart_rate_measurement'); if (characteristic.properties.notify) { characteristics.addeventlistener('characteristicvaluechanged', function(event) { console.log(`received heart rate measurement: ${event.target.value}`); } await characteristic.startnotifications(); } specifications specification status comment
web bluetooththe definition of 'bluetoothcharacteristicproperties' in that specification.
... desktopmobilechromeedgefirefoxinternet exploreroperasafariandroid
webviewchrome for androidfirefox for androidopera for androidsafari on iossamsung internetbluetoothcharacteristicproperties experimentalchrome full support 56notes full support 56notes notes chromeos and macos only.
...And 30 more matches
appearance (-moz-appearance, -webkit-appearance) - CSS: Cascading Style Sheets
the -moz-appearance and -
webkit-appearance properties are non-standard versions of this propery, used (respectively) by gecko (firefox) and by
webkit-based (e.g., safari) and blink-based (e.g., chrome, opera) browsers to achieve the same thing.
... note that firefox and edge also support -
webkit-appearance, for compatibility reasons.
... compatibility note: if you wish to use this property on
websites, you should test it very carefully.
...And 30 more matches
Fullscreen API - Web APIs
example in this example, a video is presented in a
web page.
...in a real-world deployment, at this time, you'll want to check for prefixed versions of this (mozfullscreenelement, msfullscreenelement, or
webkitfullscreenelement, for example).
... desktopmobilechromeedgefirefoxinternet exploreroperasafariandroid
webviewchrome for androidfirefox for androidopera for androidsafari on iossamsung internetfullscreen deprecatedchrome full support 71 full support 71 full support 15alternate name alternate name uses the non-standard name:
webkitisfullscreenedge full s...
...And 29 more matches
What is JavaScript? - Learn web development
objective: to gain familiarity with what javascript is, what it can do, and how it fits into a
web site.
... a high-level definition javascript is a scripting or programming language that allows you to implement complex features on
web pages — every time a
web page does more than just sit there and display static information for you to look at — displaying timely content updates, interactive maps, animated 2d/3d graphics, scrolling video jukeboxes, etc.
...it is the third layer of the layer cake of standard
web technologies, two of which (html and css) we have covered in much more detail in other parts of the learning area.
...And 28 more matches
Image file type and format guide - Web media technologies
in this guide, we'll cover the image file types generally supported by
web browsers, and provide insights that will help you select the most appropriate formats to use for your site's imagery.
...however, the ones listed below are generally recognized as usable on the
web, though bmp is generally not recommended as browser support is potentially constrained; it should usually be avoided for
web content.
...fox, internet explorer, opera, safari png portable network graphics image/png .png chrome, edge, firefox, internet explorer, opera, safari svg scalable vector graphics image/svg+xml .svg chrome, edge, firefox, internet explorer, opera, safari tiff tagged image file format image/tiff .tif, .tiff none built-in; add-ons required
webp
web picture format image/
webp .
webp chrome, edge, firefox, opera the abbreviation for each format links to a longer description of the format, its capabilities, and detailed browser compatibility information; including which versions introduced support and specific special features that may have been introduced later.
...And 28 more matches
nsIWebProgressListener
uriloader/base/nsi
webprogresslistener.idlscriptable this interface is implemented by clients wishing to listen in on the progress associated with the loading of asynchronous requests in the context of a nsi
webprogress instance as well as any child nsi
webprogress instances.
... inherits from: nsisupports last changed in gecko 15 (firefox 15 / thunderbird 15 / seamonkey 2.12) nsi
webprogress describes the parent-child relationship of nsi
webprogress instances.
... method overview void onlocationchange(in nsi
webprogress a
webprogress, in nsirequest arequest, in nsiuri alocation, [optional] in unsigned long aflags); void onprogresschange(in nsi
webprogress a
webprogress, in nsirequest arequest, in long acurselfprogress, in long amaxselfprogress, in long acurtotalprogress, in long amaxtotalprogress); void onsecuritychange(in nsi
webprogress a
webprogress, in nsirequest arequest, in unsigned long astate); void onstatechange(in nsi
webprogress a
webprogress, in nsirequest arequest, in unsigned long astateflags, in nsresult astatus); void onstatuschange(in nsi
webprogress a
webprogress, in nsirequest arequest, in nsresult astatus, in wstring amessage); constants state transition flags these flags indicate the v...
...And 27 more matches
IDBIndex - Web APIs
note: this feature is available in
web workers.
... desktopmobilechromeedgefirefoxinternet exploreroperasafariandroid
webviewchrome for androidfirefox for androidopera for androidsafari on iossamsung internetidbindexchrome full support 24 full support 24 no support 23 — 57prefixed prefixed implemented with the vendor prefix:
webkitedge full support 12firef...
... full support 16 full support 16 no support 10 — 16prefixed prefixed implemented with the vendor prefix: mozie partial support 10opera full support 15safari full support 7
webview android full support yes full support yes no support ?
...And 27 more matches
From object to iframe — other embedding technologies - Learn web development
previous overview: multimedia and embedding next by now you should really be getting the hang of embedding things into your
web pages, including images, video and audio.
... at this point we'd like to take somewhat of a sideways step, looking at some elements that allow you to embed a wide variety of content types into your
webpages: the <iframe>, <embed> and <object> elements.
... <iframe>s are for embedding other
web pages, and the other two allow you to embed pdfs, svg, and even flash — a technology that is on the way out, but which you'll still see semi-regularly.
...And 26 more matches
Web Console remoting - Firefox Developer Tools
introduction this document describes the way
web console remoting works.
... the
web console is split between a client with its user interface, and the server which has listeners for all the things that happen in the tab.
...this architecture allows you to connect a
web console client instance to a server running on b2g, fennec or some other firefox instance.
...And 26 more matches
IDBDatabase - Web APIs
note: this feature is available in
web workers.
... <div id="interfacediagram" style="display: inline-block; position: relative; width: 100%; padding-bottom: 11.666666666666666%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 70" preserveaspectratio="xminymin meet"><a xlink:href="/docs/
web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="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="2...
...5" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/
web/api/idbdatabase" target="_top"><rect x="151" y="1" width="110" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="206" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">idbdatabase</text></a></svg></div> a:hover text { fill: #0095dd; pointer-events: all;} properties idbdatabase.name read only a domstring that contains the name of the connected database.
...And 26 more matches
WebKit CSS extensions - CSS: Cascading Style Sheets
applications based on
webkit or blink, such as safari and chrome, support a number of special
webkit extensions to css.
... these extensions are generally prefixed with -
webkit-.
... most -
webkit- prefixed properties also work with an -apple- prefix.
...And 26 more matches
Choosing the right approach - Learn web development
browser compatibility desktopmobilechromeedgefirefoxinternet exploreroperasafariandroid
webviewchrome for androidfirefox for androidopera for androidsafari on iossamsung internetsettimeoutchrome full support 30edge full support 12firefox full support 1 full support 1 full support ...
... 52notes notes setinterval now defined on windoworworkerglobalscope mixin.ie full support 4opera full support 4safari full support 1
webview android full support 4.4chrome android full support 30firefox android full support 4 full support 4 full support 52notes notes setinterval now defined on windoworworkerglobalscope mixin.opera android full support 10.1safari ios ...
...
webview android full support yeschrome android full support yesfirefox android ?
...And 25 more matches
Handling common accessibility problems - Learn web development
when we say accessibility in the context of
web technology, most people immediately think of making sure
websites/apps are usable by people with disabilities, for example: visually impaired people using screen readers or magnification/zoom to access text people with motor function impairments using the keyboard (or other non-mouse features) to activate
website functionality.
...really, the aim of accessibility is to make your
websites/apps usable by as many people in as many contexts as possible, not just those users using high-powered desktop computers.
... that said, this article will cover cross browser and testing issues surrounding people with disabilities, and how they use the
web.
...And 25 more matches
Web Performance
web performance is the objective measurements and the perceived user experience of load time and runtime.
...
web performance is how long a site takes to load, become interactive and responsive, and how smooth the content is during user interactions - is the scrolling smooth?
...
web performance includes both objective measurements like time to load, frames per second, and time to become interactive, and subjective experiences of how long it felt like it took the content to load.
...And 25 more matches
Audio for Web games - Game development
web-based audio is maturing fast, but there are still many browser differences to navigate.
...this article provides a detailed guide to implementing audio for
web games, looking at what works currently across as wide a range of platforms as possible.
... mobile audio caveats by far the most difficult platforms to provide
web audio support for are mobile platforms.
...And 24 more matches
BluetoothRemoteGATTDescriptor - Web APIs
the bluetoothremotegattdescriptor interface of the
web bluetooth api provides a gatt descriptor, which provides further information about a characteristic’s value.
... specifications specification status comment
web bluetooththe definition of 'bluetoothremotegattdescriptor' in that specification.
... desktopmobilechromeedgefirefoxinternet exploreroperasafariandroid
webviewchrome for androidfirefox for androidopera for androidsafari on iossamsung internetbluetoothremotegattdescriptor experimentalchrome full support 57notes full support 57notes notes macos only.
...And 24 more matches
Signaling and video calling - Web APIs
webrtc allows real-time, peer-to-peer, media exchange between two devices.
...
webrtc is a fully peer-to-peer technology for the real-time exchange of audio, video, and data, with one central caveat.
... in this article, we will further enhance the
websocket chat first created as part of our
websocket documentation (this article link is forthcoming; it isn't actually online yet) to support opening a two-way video call between users.
...And 24 more matches
Inputs and input sources - Web APIs
a full
webxr experience isn't just about showing the user a wholly virtual scene or augmenting reality by adding to or altering the world around them.
...to that end,
webxr provides support for a variety of kinds of input devices.
... in this guide, we'll look at how to use
webxr's input device management features to determine what input sources are available and how to then monitor those sources for inputs in order to handle user interactivity with your virtual or augmented environment.
...And 24 more matches
What are hyperlinks? - Learn web development
prerequisites: you should know how the internet works and be familiar with the difference between a
webpage, a
website, a
web server, and a search engine.
... objective: learn about links on the
web and why they matter.
... summary hyperlinks, usually called links, are a foundational concept behind the
web.
...And 23 more matches
Video and audio content - Learn web development
previous overview: multimedia and embedding next now that we are comfortable with adding simple images to a
webpage, the next step is to start adding video and audio players to your html documents!
... objective: to learn how to embed video and audio content into a
webpage, and add captions/subtitles to video.
... video and audio on the
web web developers have wanted to use video and audio on the
web for a long time, ever since the early 2000s when we started to have bandwidth fast enough to support any kind of video (video files are much larger than text or even images.) in the early days, native
web technologies such as html didn't have the ability to embed video and audio on the
web, so proprietary (or plugin-based) technologies like flash (and later, silverlight) became popular for handling such content.
...And 23 more matches
IDBTransaction - Web APIs
note: this feature is available in
web workers.
... <div id="interfacediagram" style="display: inline-block; position: relative; width: 100%; padding-bottom: 11.666666666666666%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 70" preserveaspectratio="xminymin meet"><a xlink:href="/docs/
web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="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/idbt...
...you should code defensively in case the object is not available anymore: var myidbtransaction = window.idbtransaction || window.
webkitidbtransaction || { read_write: "readwrite" }; examples in the following code snippet, we open a read/write transaction on our database and add some data to an object store.
...And 23 more matches
WebAssembly.instantiate() - JavaScript
the
webassembly.instantiate() function allows you to compile and instantiate
webassembly code.
... this function has two overloads: the primary overload takes the
webassembly binary code, in the form of a typed array or arraybuffer, and performs both compilation and instantiation in one step.
... the returned promise resolves to both a compiled
webassembly.module and its first
webassembly.instance.
...And 23 more matches
Handling common JavaScript problems - Learn web development
when developers make use of new/nascent javascript features (for example ecmascript 6 / ecmascript next features, modern
web apis...) in their code, and find that such features don't work in older browsers.
... code editor plugins it is not very convenient to have to copy and paste your code over to a
web page to check its validity several times.
...for example, the following command installs jshint: npm install -g jshint you can then point these tools at javascript files you want to lint, for example: you can also use these tools with a task runner/build tool such as gulp or
webpack to automatically lint your javascript during development.
...And 22 more matches
nsIWebProgress
the nsi
webprogress interface is used to add or remove nsi
webprogresslistener instances to observe the loading of asynchronous requests (usually in the context of a dom window).
... nsi
webprogress instances may be arranged in a parent-child configuration, corresponding to the parent-child configuration of their respective dom windows.
... however, in some cases a nsi
webprogress instance may not have an associated dom window.
...And 22 more matches
Selection API - Web APIs
desktopmobilechromeedgefirefoxinternet exploreroperasafariandroid
webviewchrome for androidfirefox for androidopera for androidsafari on iossamsung internetselection experimentalchrome full support 1edge full support 12firefox full support 1notes full support 1notes notes the globalevent...
...handlers.onselectionchange and globaleventhandlers.onselectstart event handlers are supported as of firefox 52.ie full support 9opera full support 9safari full support 1
webview android full support 1chrome android full support 18firefox android full support 4notes full support 4notes notes the globaleventhandlers.onselectionchange and globaleventhandlers.onselectstart event handlers are supported as of firefox 52.opera android full support ...
... opera full support yessafari full support yes
webview android full support yeschrome android full support yesfirefox android full support yesopera android full support yessafari ios full support yessamsung internet android ...
...And 22 more matches
Media container formats (file types) - Web media technologies
in this guide, we'll look at the container formats used most commonly on the
web, covering basics about their specifications as well as their benefits, limitations, and ideal use cases.
...
webrtc does not use a container at all.
...see codecs used by
webrtc for information about codecs commonly used for making
webrtc calls, as well as browser compatibility information around codec support in
webrtc.
...And 22 more matches
What is accessibility? - Learn web development
overview: accessibility next this article starts the module off with a good look at what accessibility is — this overview includes what groups of people we need to consider and why, what tools different people use to interact with the
web, and how we can make accessibility part of our
web development workflow.
... objective: to gain familiarity with accessibility, including what it is, and how it affects you as a
web developer.
... accessibility is the practice of making your
websites usable by as many people as possible.
...And 21 more matches
What is a URL? - Learn web development
prerequisites: you need to first know how the internet works, what a
web server is and the concepts behind links on the
web.
... objective: you will learn what a url is and how it works on the
web.
... summary with hypertext and http, url is one of the key concepts of the
web.
...And 21 more matches
Client-side tooling overview - Learn web development
overview: understanding client-side tools next in this article we provide an overview of modern
web tooling, what kinds of tools are available and where you’ll meet them in the lifecycle of
web app development, and how to find help with individual tools.
... overview of modern tooling writing software for the
web has become more sophisticated through the ages.
... although it is still entirely reasonable to write html, css, and javascript "by hand" there is now a wealth of tools that developers can use to speed up the process of building a
web site, or app.
...And 21 more matches
Creating hyperlinks - Learn web development
previous overview: introduction to html next hyperlinks are really important — they are what makes the
web a
web.
... hyperlinks are one of the most exciting innovations the
web has to offer.
... they've been a feature of the
web since the beginning, and are what makes the
web a
web.
...And 20 more matches
Packaging WebLock
« previousnext » in this final part of the tutorial, we'll put all of the pieces of the
web locking component - the library itself, the type library, the header file, and the user interface resources - into a package that can be installed on other systems.
...the following sections describe the steps you can take to organize the
weblock component for distribution and installation.
...using xpinstall, you can create
web-based installations for gecko-based applications, mozilla extensions, or individual components.
...And 20 more matches
Guide to the Fullscreen API - Web APIs
let's consider this <video> element: <video controls id="myvideo"> <source src="somevideo.
webm"></source> <source src="somevideo.mp4"></source> </video> we can put that video into full-screen mode as follows: var elem = document.getelementbyid("myvideo"); if (elem.requestfullscreen) { elem.requestfullscreen(); } this code checks for the existence of the requestfullscreen() method before calling it.
... presentation differences it's worth noting a key difference here between the gecko and
webkit implementations at this time: gecko automatically adds css rules to the element to stretch it to fill the screen: "width: 100%; height: 100%".
...
webkit doesn't do this; instead, it centers the fullscreen element at the same size in a screen that's otherwise black.
...And 19 more matches
Permissions - Web APIs
desktopmobilechromeedgefirefoxinternet exploreroperasafariandroid
webviewchrome for androidfirefox for androidopera for androidsafari on iossamsung internetpermissionschrome full support 43edge full support 79firefox full support 46ie no support noopera full support ...
... yessafari no support no
webview android full support 43chrome android full support 43firefox android full support 46opera android full support yessafari ios no support nosamsung internet android full support 4.0accelerometer permissionchrome full support 62edge full support 79firefox ?
... safari no support no
webview android full support 62chrome android full support 62firefox android ?
...And 19 more matches
Dealing with files - Learn web development
previous overview: getting started with the
web next a
website consists of many files: text content, code, stylesheets, media content, and so on.
... when you're building a
website, you need to assemble these files into a sensible structure on your local computer, make sure they can talk to one another, and get all your content looking right before you eventually upload them to a server.
... dealing with files discusses some issues you should be aware of so you can set up a sensible file structure for your
website.
...And 18 more matches
Drawing graphics - Learn web development
previous overview: client-side
web apis next the browser contains some very powerful graphics programming tools, from the scalable vector graphics (svg) language, to apis for drawing on html <canvas> elements, (see the canvas api and
webgl).
... graphics on the
web as we talked about in our html multimedia and embedding module, the
web was originally just text, which was very boring, so images were introduced — first via the <img> element and later via css properties such as background-image, and svg.
...the
web still had no way to effectively create animations, games, 3d scenes, and other requirements commonly handled by lower level languages such as c++ or java.
...And 18 more matches
Working with Svelte stores - Learn web development
we will also see how to develop our own custom store to persist the todo information to
web storage, allowing our todos to persist over page reloads.
... in our case, just adding a role="alert" to the <div> container will do the trick, like this: <div role="alert" on:click={() => visible = false}> in general, testing your applications using screen readers is a good idea, not only to discover accessibility issues but also to get used to how visually impaired people use the
web.
... go back to your app, try adding some todos, then go your developer tools
web console.
...And 18 more matches
Handling common HTML and CSS problems - Learn web development
in the worst cases, javascript is used to generate the entire
web page content and style, which makes your pages inaccessible, and less performant (generating dom elements is expensive).
... however, it is not very convenient to have to copy and paste your code over to a
web page to check its validity several times.
...in general, most core html and css functionality (such as basic html elements, css basic colors and text styling) works across most browsers you'll want to support; more problems are uncovered when you start wanting to use newer features such as flexbox, or html5 video/audio, or even more nascent, css grids or -
webkit-background-clip: text.
...And 18 more matches
How to make PWAs installable - Progressive web apps (PWAs)
previous overview: progressive next in the last article, we read about how the example application, js13kpwa, works offline thanks to its service worker, but we can go even further and allow users to install the
web app on mobile and desktop browers that support doing so.
... the installed
web app can then be launched by users just as if it were any native app.
... this article explains how to achieve this using the
web app's manifest.
...And 18 more matches
Introduction to game development for the Web - Game development
the modern
web has quickly become a viable platform not only for creating stunning, high quality games, but also for distributing those games.
...with modern
web technologies and a recent browser, it's entirely possible to make stunning, top-notch games for the
web.
... the html5 game platform you can truly think of the
web as a better target platform for your game.
...And 17 more matches
CSS property compatibility table for form controls - Learn web development
rendering for each property there are two possible renderings: n (normal) indicates that the property is applied as it is t (tweaked) indicates that the property is applied with the extra rule below: * { /* turn off the native look and feel */ -
webkit-appearance: none; appearance: none; /* for internet explorer */ background: none; } compatibility tables global behaviors some behaviors are common to many browsers at a global level: border, background, border-radius, height using one of these properties can partially or fully turn off the native look & feel of widgets on some browsers.
... property n t note css box model width yes yes height partial[1][2] yes
webkit browsers (mostly on mac osx and ios) use the native look & feel for the search fields.
... therefore, it's required to use -
webkit-appearance:none to be able to apply this property to search fields.
...And 17 more matches
Responsive design - Learn web development
previous overview: css layout next in the early days of
web design, pages were built to target a particular screen size.
...as more diverse screen sizes became available, the concept of responsive
web design (rwd) appeared, a set of practices that allows
web pages to alter their layout and appearance to suit different screen widths, resolutions, etc.
... it is an idea that changed the way we design for a multi-device
web, and in this article, we'll help you understand the main techniques you need to know to master it.
...And 16 more matches
Installing basic software - Learn web development
overview: getting started with the
web next in installing basic software, we show you what tools you need to do simple
web development and how to install them properly.
...for serious
web development, it's better to invest in a desktop or laptop computer running windows, macos or linux.
...dreamweaver or
webstorm).
...And 16 more matches
Web Replay
web replay is no longer developed by mozilla; however, the work continues as a standalone project.
... learn more
web replay allows firefox content processes to record their behavior, replay it later, and rewind to earlier states.
... getting started to enable
web replay (macos and firefox nightly only), go to devtools settings and select "enable
webreplay".
...And 16 more matches
Introduction to the File and Directory Entries API - Web APIs
the file and directory entries api simulates a local file system that
web apps can navigate around.
...these apis are a giant evolutionary leap for
web apps, which can now cache and process large amounts of data.
...the synchronous api, on the other hand, allows for simpler programming model, but it must be used with
webworkers.
...And 16 more matches
Clearing with colors - Web APIs
« previousnext » an example showing how to clear a
webgl rendering context to a solid color.
... clearing the
webgl context with a solid color the simplest graphical
webgl program.
...note that css sets the background color of the canvas to black, so when the canvas turns green we know that
webgl's magic has worked.
...And 16 more matches
Accessibility Information for Web Authors - Accessibility
guidelines and regulations section 508 guidelines for
web authors these guidelines must be followed by u.s.
...
websites.
...
web content accessibility guidelines (wcag) 1.0 another important set of guidelines from the w3c
web accessibility initiative (wai).
...And 16 more matches
The "codecs" parameter in common media types - Web media technologies
as noted elsewhere, this format was once commonly used on the
web but no longer is, since it required a plugin to use.
... video/
webm; codecs="vp8, vorbis" a
webm file containing vp8 video and/or vorbis audio.
...the list may also contain codecs not present in the file.= codec options by container the containers below support extended codec options in their codecs parameters: 3gp av1 iso bmff mpeg-4 quicktime
webm several of the links above go to the same section; that's because those media types are all based on iso base media file format (iso bmff), so they share the same syntax.
...And 16 more matches
Populating the page: how browsers work - Web Performance
users want
web experiences with content that is fast to load and smooth to interact with.
...users want and expect
web experiences with content that is fast to load and smooth to interact with.
... two major issues in
web performance are understanding issues having to do with latency and issues having to do with the fact that for the most part, browsers are single threaded.
...And 16 more matches
New Security Model for Web Services - Archive of obsolete content
this policy has generally been successful in sandboxing javascript and java applets across the
web.
...this prevents a script from accessing
web services and data published from any domain besides its own.
...a white list is a good tool for including always-trusted domains, but on the
web, it is often a script from a relatively-untrusted domain that must be granted access to other untrusted domains, without compromising internal domains.
...And 15 more matches
Advanced form styling - Learn web development
appearance: controlling os-level styling in the previous article we said that historically, styling of
web form controls was largely taken from the underlying operating system, which is part of the problem with customizing the look of these controls.
... the appearance property was created as a way to control what os- or system-level styling was applied to
web form controls.
...newer implementations are more consistent in behavior; interestingly enough, both chromium-based browsers (chrome, opera, edge), safari, and firefox all support the -
webkit- prefixed version (-
webkit-appearance).
...And 15 more matches
Measuring performance - Learn web development
previous overview: performance next meauring performance provides an important metric to help you asses the success of your app, site, or
web service.
... this article introduces
web perfomrance metrics that you can use to measure and optimize your site's performance.
... prerequisites: basic computer literacy, basic software installed, and basic knowledge of client-side
web technologies.
...And 15 more matches
Window.open() - Web APIs
note on position and dimension error correction position if only one of them is specified, the behavior is implementation-dependent, and
web author should not rely on it.
... size if only one of them is specified, the behavior is implementation-dependent, and
web author should not rely on it.
... you can also parameterize the function to make it versatile, functional in more situations, therefore re-usable in scripts and
webpages: <script type="text/javascript"> var windowobjectreference = null; // global variable function openrequestedpopup(url, windowname) { if(windowobjectreference == null || windowobjectreference.closed) { windowobjectreference = window.open(url, windowname, "resizable,scrollbars,status"); } else { windowobjectreference.focus(); }; } </script> (...) <p><a href="http:...
...And 15 more matches
What’s in the head? Metadata in HTML - Learn web development
previous overview: introduction to html next the head of an html document is the part that is not displayed in the
web browser when the page is loaded.
...try going to some of your favorite
websites and use the developer tools to check out their head contents.
...this means that your
web page will be able to handle displaying any language; it's therefore a good idea to set this on every
web page you create!
...And 14 more matches
Command line crash course - Learn web development
if you're running any tooling for
web development there's a near-guaranteed chance that you'll have to pop open the command line and run some commands to use your chosen tools (you'll often see such tools referred to as cli tools — command line interface tools).
...many tutorials and tools that exist on the
web today support (and sadly assume) unix-based systems, but not to worry — they are available on most systems.
...ve files: mv delete files or directories: rm download files found at specific urls: curl search for fragments of text inside larger bodies of text: grep view a file's contents page by page: less, cat manipulate and transform streams of text (for example changing all the instances of <div>s in an html file to <article>): awk, tr, sed note: there are a number of good tutorials on the
web that go much deeper into the command line on the
web — this is only a brief introduction!
...And 14 more matches
Introducing a complete toolchain - Learn web development
you won't need to know react to follow this tutorial, but we've included this to give you an idea of how a non-native
web language could be integrated into a toolchain.
... all
web projects will be different, and you need to consider what parts of your toolchain are necessary and consider each part carefully.
... a couple of prerequisites besides the tools we're going to install that contribute to our toolchain, we mentioned two
web services in the above list of tools.
...And 14 more matches
Learn web development
this set of articles aims to provide complete beginners to
web development with all that they need to start coding
websites.
... if you are a complete beginner,
web development can be challenging — we will hold your hand and provide enough detail for you to feel comfortable and learn the topics properly.
... you should feel at home whether you are a student learning
web development (on your own or as part of a class), a teacher looking for class materials, a hobbyist, or someone who just wants to understand more about how
web technologies work.
...And 14 more matches
FileSystemEntry - Web APIs
window.requestfilesystem = window.requestfilesystem || window.
webkitrequestfilesystem; ...
... desktopmobilechromeedgefirefoxinternet exploreroperasafariandroid
webviewchrome for androidfirefox for androidopera for androidsafari on iossamsung internetfilesystementry experimentalchrome full support 8alternate name full support 8alternate name alternate name uses the non-standard name: entryedge full support 79prefixed ...
... full support 79prefixed prefixed implemented with the vendor prefix:
webkitfirefox full support 50ie no support noopera no support nosafari full support 11.1
webview android full support ≤37alternate name full support ≤37alternate name alternate name uses the non-standard name: entrychrome android full support 18alternate name full support 18alternate name alternate name uses the non-standard nam...
...And 14 more matches
3D games on the Web - Game development
for rich gaming experiences on the
web, the weapon of choice is
webgl, which is rendered on html <canvas>.
...
webgl is basically an opengl es 2.0 for the
web — it's a javascript api providing tools to build rich interactive animations and of course, also games.
... documentation and browser support the
webgl project documentation and specification is maintained by the khronos group, not the w3c as with most of the
web apis.
...And 13 more matches
WebRequest.jsm
the
webrequest module is new in firefox 41.
... the
webrequest module provides an api to add event listeners for the various stages of making an http request.
...you can use
webrequest.jsm in either the chrome or content processes.
...And 13 more matches
Mozilla Web Services Security Model
please do not depend on anything in it being correct for security.) to prevent the browser from being used as a tool for
web sites to obtain priveleges that belong to the browser's user (such as being behind a firewall or getting the benefits of the user's cookies),
web browsers restrict what
web pages can do when accessing things in other domains.
... these restrictions apply to
web services.
... however,
web services can be designed to be accessed from other domains, or even from any domain.
...And 13 more matches
WebAssembly.Memory() constructor - JavaScript
the
webassembly.memory() constructor creates a new memory object whose buffer property is a resizable arraybuffer or sharedarraybuffer that holds the raw bytes of memory accessed by a
webassembly instance.
... a memory created by javascript or in
webassembly code will be accessible and mutable from both javascript and
webassembly.
... syntax new
webassembly.memory(memorydescriptor); parameters memorydescriptor an object that can contain the following members: initial the initial size of the
webassembly memory, in units of
webassembly pages.
...And 13 more matches
WebAssembly.Memory - JavaScript
the
webassembly.memory object is a resizable arraybuffer or sharedarraybuffer that holds the raw bytes of memory accessed by a
webassembly instance.
... a memory created by javascript or in
webassembly code will be accessible and mutable from both javascript and
webassembly.
... constructor
webassembly.memory() creates a new memory object.
...And 13 more matches
Practical positioning examples - Learn web development
this includes information-heavy apps like strategy/war games, mobile versions of
websites where the screen is narrow and space is limited, and compact information boxes where you might want to make lots of information available without having it fill the whole ui.
... you might be thinking "why not just create the separate tabs as separate
webpages, and just have the tabs clicking through to the separate pages to create the effect?" this code would be simpler, yes, but then each separate "page" view would actually be a newly-loaded
webpage, which would make it harder to save information across views, and integrate this feature into a larger ui design.
... 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.
...And 12 more matches
Properly configuring server MIME types - Learn web development
background by default, many
web servers are configured to report a mime type of text/plain or application/octet-stream for unknown content types.
... as new content types are invented or added to
web servers,
web administrators may fail to add the new mime types to their
web server's configuration.
... this is a major source of problems for users of gecko-based browsers, which respect the mime types as reported by
web servers and
web applications.
...And 12 more matches
Introduction to the DOM - Web APIs
the document object model (dom) is the data representation of the objects that comprise the structure and content of a document on the
web.
...we'll look at how the dom represents an html or xml document in memory and how you use apis to create
web content and applications.
... a
web page is a document.
...And 12 more matches
IDBKeyRange - Web APIs
note: this feature is available in
web workers.
... desktopmobilechromeedgefirefoxinternet exploreroperasafariandroid
webviewchrome for androidfirefox for androidopera for androidsafari on iossamsung internetidbkeyrangechrome full support 24 full support 24 no support 23 — 57prefixed prefixed implemented with the vendor prefix:
webkitedge full support 12fi...
... full support 16 full support 16 no support 10 — 16prefixed prefixed implemented with the vendor prefix: mozie partial support 10opera full support 15safari full support 7
webview android full support yeschrome android full support yesfirefox android full support 22opera android full support 14safari ios full support 8samsung internet android ...
...And 12 more matches
RTCPeerConnection - Web APIs
the rtcpeerconnection interface represents a
webrtc connection between the local computer and a remote peer.
... <div id="interfacediagram" style="display: inline-block; position: relative; width: 100%; padding-bottom: 11.666666666666666%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 70" preserveaspectratio="xminymin meet"><a xlink:href="/docs/
web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="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="2...
...5" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/
web/api/rtcpeerconnection" target="_top"><rect x="151" y="1" width="170" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="236" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">rtcpeerconnection</text></a></svg></div> a:hover text { fill: #0095dd; pointer-events: all;} constructorrtcpeerconnection() the rtcpeerconnection() constructor returns a newly-created rtcpeerconnection, which represents a connection between the local device and a remote peer.propertiesalso inherits properties from: eventtargetcantrickleicecandidatesthe read-only rtcpeerconnection property cantrickleicecandidates returns a boolean which ...
...And 12 more matches
WebAssembly.Module - JavaScript
a
webassembly.module object contains stateless
webassembly code that has already been compiled by the browser — this can be efficiently shared with workers, and instantiated multiple times.
... constructor
webassembly.module() creates a new module object.
... static properties
webassembly.module.customsections() given a module and string, returns a copy of the contents of all custom sections in the module with the given string name.
...And 12 more matches
WebAssembly.Table - JavaScript
the
webassembly.table() object is a javascript wrapper object — an array-like structure representing a
webassembly table, which stores function references.
... a table created by javascript or in
webassembly code will be accessible and mutable from both javascript and
webassembly.
... constructor
webassembly.table() creates a new table object.
...And 12 more matches
Media type and format guide: image, audio, and video content - Web media technologies
since nearly its beginning, the
web has included support for some form of visual media presentation.
... originally, these capabilities were limited, and were expanded organically, with different browsers finding their own solutions to the problems around including still and video imagery on the
web.
... the modern
web has powerful features to support the presentation and manipulation of media, with several media-related apis supporting various types of content.
...And 12 more matches
What is CSS? - Learn web development
overview: first steps next css (cascading style sheets) allows you to create great-looking
web pages, but how does it work under the hood?
...these documents will be readable in a
web browser.
... however, the
web would be a boring place if all
websites looked like that.
...And 11 more matches
Fundamental text and font styling - Learn web development
objective: to learn the fundamental properties and techniques needed to style text on
web pages.
...the browser will only apply a font if it is available on the machine the
website is being accessed on; if not, it will just use a browser default font.
...
web safe fonts speaking of font availability, there are only a certain number of fonts that are generally available across all systems and can therefore be used without much worry.
...And 11 more matches
Introduction to events - Learn web development
for example, if the user selects a button on a
webpage, you might want to respond to that action by displaying an information box.
... in the case of the
web, events are fired inside the browser window, and tend to be attached to a specific item that resides in it — this might be a single element, set of elements, the html document loaded in the current tab, or the entire browser window.
... a
web page finishes loading.
...And 11 more matches
nsIWebSocketChannel
nsi
websocketchannel netwerk/protocol/
websocket/nsi
websocketchannel.idlscriptable provides support for
websocket channels.
...to create an instance, use: var
websocketchannel = components.classes["@mozilla.org/????????????????????????????"] .createinstance(components.interfaces.nsi
websocketchannel); method overview void asyncopen(in nsiuri auri, in acstring aorigin, in nsi
websocketlistener alistener, in nsisupports acontext); void close(in unsigned short acode, in autf8string areason); void sendbinarymsg(in acstring amsg); void sendmsg(in autf8string amsg); attributes attribute type description extensions acstring sec...
...-
websocket-extensions response header value.
...And 11 more matches
IDBFactory - Web APIs
note: this feature is available in
web workers.
...window.indexeddb = window.indexeddb || window.mozindexeddb || window.
webkitindexeddb || window.msindexeddb; // don't use "var indexeddb = ..." if you're not in a function.
... // moreover, you may need references to some window.idb* objects: window.idbtransaction = window.idbtransaction || window.
webkitidbtransaction || window.msidbtransaction; window.idbkeyrange = window.idbkeyrange || window.
webkitidbkeyrange || window.msidbkeyrange; // (mozilla has never prefixed these objects, so we don't need window.mozidb*) // let us open version 4 of our database var dbopenrequest = window.indexeddb.open("todolist", 4); // these two event handlers act on the database being opened successfully, or not dbopenrequest.onerror = function(event) { console.error("error loading database."); }; dbopenrequest.onsuccess = function(event) { console.info("database initialised."); // store the result of opening the database in the db variable.
...And 11 more matches
MSGestureEvent - Web APIs
desktopmobilechromeedgefirefoxinternet exploreroperasafariandroid
webviewchrome for androidfirefox for androidopera for androidsafari on iossamsung internetmsgestureevent non-standardchrome no support noedge no support 12 — 79firefox no support noie full support 10opera no support ...
... nosafari no support no
webview android no support nochrome android no support nofirefox android no support noopera android no support nosafari ios no support nosamsung internet android no support nomsgestureevent() constructor non-standardchrome no support noedge no support 12 — 79firefox no support noie full support ...
... 10opera no support nosafari no support no
webview android no support nochrome android no support nofirefox android no support noopera android no support nosafari ios no support nosamsung internet android no support noexpansion non-standardchrome no support noedge no support 12 — 79firefox no support noie ...
...And 11 more matches
Identifying resources on the Web - HTTP
the identity and the location of resources on the
web are mostly given by a single url (uniform resource locator, a kind of uri).
... urls and urns urls the most common form of uri is the uniform resource locator (url), which is known as the
web address.
...the
web requires one of these two, but browsers also know how to handle other protocols such as mailto: (to open a mail client) or ftp: to handle file transfer, so don't be surprised if you see such protocols.
...And 11 more matches
WebAssembly.CompileError - JavaScript
the
webassembly.compileerror object indicates an error during
webassembly decoding or validation.
... constructor
webassembly.compileerror() creates a new
webassembly.compileerror object.
... instance properties
webassembly.compileerror.prototype.message error message.
...And 11 more matches
WebAssembly.LinkError - JavaScript
the
webassembly.linkerror object indicates an error during module instantiation (besides traps from the start function).
... constructor
webassembly.linkerror() creates a new
webassembly.linkerror object.
... instance properties
webassembly.linkerror.prototype.message error message.
...And 11 more matches
WebAssembly.RuntimeError - JavaScript
the
webassembly.runtimeerror object is the error type that is thrown whenever
webassembly specifies a trap.
... constructor
webassembly.runtimeerror() creates a new
webassembly.runtimeerror object.
... instance properties
webassembly.runtimeerror.prototype.message error message.
...And 11 more matches
Add to Home screen - Progressive web apps (PWAs)
add to home screen (or a2hs for short) is a feature available in modern browsers that allows a user to "install" a
web app, ie.
... add a shortcut to their home screen representing their favorite
web app (or site) so they can subsequently access it with a single tap.
... a2hs is thought to be part of the progressive
web app philosophy — giving
web apps the same user experience advantages as native apps so they can compete in today's ecosystem wars.
...And 11 more matches
The building blocks of responsive design - Progressive web apps (PWAs)
for
web developers, it is now fairly common to be called upon to create a
web site or app that changes its user interface depending on the browser or device accessing the site to provide an optimized experience.
... we've written a simple-but-fun prototype for an application called snapshot, which takes a video stream from your
webcam (using getusermedia()) then allows you to capture stills from that video stream (using html5 <canvas>), and save them to a gallery.
... the markup is very simple: <x-deck selected-index="0"> <x-card> … </x-card> <x-card> … </x-card> <x-card> … </x-card> </x-deck> note: these weird x- elements may be unfamiliar; they are part of brick, mozilla's ui element library for mobile
web apps.
...And 11 more matches
Your first form - Learn web development
overview: forms next the first article in our series provides you with your very first experience of creating a
web form, including designing a simple form, implementing it using the right html form controls and other html elements, adding some very simple styling via css, and describing how data is sent to a server.
... objective: to gain familiarity with what
web forms are, what they are used for, how to think about designing them, and the basic html elements you'll need for simple cases.
... what are
web forms?
...And 10 more matches
Images in HTML - Learn web development
overview: multimedia and embedding next in the beginning, the
web was just text, and it was really quite boring.
... fortunately, it wasn't too long before the ability to embed images (and other more interesting types of content) inside
web pages was added.
... there are other types of multimedia to consider, but it is logical to start with the humble <img> element, used to embed a simple image in a
webpage.
...And 10 more matches
Fetching data from the server - Learn web development
previous overview: client-side
web apis next another very common task in modern
websites and applications is retrieving individual data items from the server to update sections of a
webpage without having to load an entire new page.
... prerequisites: javascript basics (see first steps, building blocks, javascript objects), the basics of client-side apis objective: to learn how to fetch data from the server and use it to update the contents of a
web page.
... originally page loading on the
web was simple — you'd send a request for a
website to a server, and as long as nothing went wrong, the assets that made the
web page would be downloaded and displayed on your computer.
...And 10 more matches
Multimedia: Images - Learn web development
previous overview: performance next media, namely images and video, account for over 70% of the bytes downloaded for the average
website.
...this article looks at optimizing image and video to improve
web performance.
... prerequisites: basic computer literacy, basic software installed, and basic knowledge of client-side
web technologies.
...And 10 more matches
nsIWebProgressListener2
an extended version of nsi
webprogresslistener.
... uriloader/base/nsi
webprogresslistener2.idlscriptable please add a summary to this article.
... last changed in gecko 1.9 (firefox 3) inherits from: nsi
webprogresslistener method overview void onprogresschange64(in nsi
webprogress a
webprogress, in nsirequest arequest, in long long acurselfprogress, in long long amaxselfprogress, in long long acurtotalprogress, in long long amaxtotalprogress); boolean onrefreshattempted(in nsi
webprogress a
webprogress, in nsiuri arefreshuri, in long amillis, in boolean asameuri); methods onprogresschange64() notification that the progress has changed for one of the requests associated with a
webprogress.
...And 10 more matches
The HTML DOM API - Web APIs
dragging and dropping of content on
webpages.
... access to the browser navigation history supporting and connective interfaces for other apis such as
web components,
web storage,
web workers,
websocket, and server-sent events.
...discussion of other areas, such as drag and drop,
websockets,
web storage, etc.
...And 10 more matches
Web media technologies
over the years, the
web's ability to present, create, and manage audio, video, and other media has grown at an increasing pace.
... <audio> the <audio> element is used to play audio in a
web context.
... <video> the <video> element is an endpoint for video content in a
web context.
...And 10 more matches
Index - WebAssembly
found 12 pages: # page tags and summary 1
webassembly landing,
webassembly, wasm
webassembly is a new type of code that can be run in modern
web browsers — it is a low-level assembly-like language with a compact binary format that runs with near-native performance and provides languages such as c/c++ with a compilation target so that they can run on the
web.
... 2 caching compiled
webassembly modules caching, indexeddb, javascript, module,
webassembly, compile, wasm caching is useful for improving the performance of an app — we can store compiled
webassembly modules on the client so they don't have to be downloaded and compiled every time.
... 3 compiling a new c/c++ module to
webassembly c, c++, compiling, emscripten,
webassembly, wasm when you’ve written a new code module in a language like c/c++, you can compile it into
webassembly using a tool like emscripten.
...And 10 more matches
CSS and JavaScript accessibility best practices - Learn web development
previous overview: accessibility next css and javascript, when used properly, also have the potential to allow for accessible
web experiences ...
... objective: to gain familiarity with using css and javascript appropriately in your
web documents to maximise accessibility and not detract from it.
... abbreviations an element that allows an abbreviation, acronym, or initialization to be associated with its expansion: <p>
web content is marked up using <abbr title="hypertext markup language">html</abbr>.</p> again, you might want to style it in some simple way: abbr { color: #a60000; } the recognised styling convention for abbreviations is a dotted underline, and it is unwise to significantly deviate from this.
...And 9 more matches
Mobile accessibility - Learn web development
previous overview: accessibility next with
web access on mobile devices being so popular and renowned platforms such as ios and android having full-fledged accessibility tools, it is important to consider the accessibility of your
web content on these platforms.
... accessibility on mobile devices the state of accessibility — and support for
web standards in general — is good in modern mobile devices.
... long gone are the days when mobile devices ran completely different
web technologies to desktop browsers, forcing developers to use browser sniffing and serve them completely separate sites (although quite a few companies still detect usage of mobile devices and serve them a separate mobile domain).
...And 9 more matches
WAI-ARIA basics - Learn web development
a whole new set of problems as
web apps started to get more complex and dynamic, a new set of accessibility features and problems started to appear.
...html5 provides special input types to render such controls: <input type="date"> <input type="range"> these are not well-supported across browsers, and it is also difficult to style them, making them not very useful for integrating with
website designs.
... enter wai-aria wai-aria (
web accessibility initiative - accessible rich internet applications) is a specification written by the w3c, defining a set of additional html attributes that can be applied to elements to provide additional semantics and improve accessibility wherever it is lacking.
...And 9 more matches
Accessibility - Learn web development
learning some html, css, and javascript is useful if you want to become a
web developer.
... beyond mechanical use, it's important to learn how to use these technologies responsibly so that all readers might use your creations on the
web.
... overview when someone describes a site as "accessible," they mean that any user can use all its features and content, regardless of how the user accesses the
web — even and especially users with physical or mental impairments.
...And 9 more matches
What is a Domain Name? - Learn web development
they provide a human-readable address for any
web server available on the internet.
... computers can handle such addresses easily, but people have a hard time finding out who's running the server or what service the
website offers.
...the most generic tlds (.com, .org, .net) don't require
web services to meet any particular criteria, but some tlds enforce stricter policies so it is clearer what their purpose is.
...And 9 more matches
Multimedia: video - Learn web development
previous overview: performance next as we learned in the previous section, media, namely images and video, account for over 70% of the bytes downloaded for the average
website.
...this article looks at optimizing video to improve
web performance.
... prerequisites: basic computer literacy, basic software installed, and basic knowledge of client-side
web technologies.
...And 9 more matches
Deployment and next steps - Learn web development
in this case, svelte won't lunch a
web server or keep watching for changes.
... note: there is also an official template for using
webpack and also many community-maintained plugins for other bundlers.
... deploying your svelte application from the point of view of a
web server, a svelte application is nothing more than a bunch of html, css, and javascript files.
...And 9 more matches
Introduction to cross browser testing - Learn web development
cross browser testing is the practice of making sure that the
web sites and
web apps you create work across an acceptable number of
web browsers.
... as a
web developer, it is your responsibility to make sure that not only do your projects work, but they work for all your users, no matter what browser, device, or additional assistive tools they are using.
... people with disabilities, who use the
web with the aid of assistive technologies like screenreaders, or don't use a mouse (some people use only the keyboard).
...And 9 more matches
nsIWebBrowser
embedding/browser/
webbrowser/nsi
webbrowser.idlscriptable this interface is implemented by
web browser objects.
... embedders use this interface during initialization to associate the new
web browser instance with the embedders chrome and to register any listeners.
...method overview void add
webbrowserlistener(in nsiweakreference alistener, in nsiidref aiid); void remove
webbrowserlistener(in nsiweakreference alistener, in nsiidref aiid); attributes attribute type description containerwindow nsi
webbrowserchrome the chrome object associated with the browser instance.
...And 9 more matches
URLUtilsReadOnly - Web APIs
desktopmobilechromeedgefirefoxinternet exploreroperasafariandroid
webviewchrome for androidfirefox for androidopera for androidsafari on iossamsung interneturlutilsreadonlychrome no support noedge no support nofirefox full support 57 full support 57 no support 3.
...5 — 57notes notes firefox has a bug whereby single quotes contained in urls are escaped when accessed via url apis (see bug 1386683).ie no support noopera no support nosafari no support no
webview android no support nochrome android no support nofirefox android full support 57 full support 57 no support 4 — 57notes notes firefox has a bug whereby single quotes contained in urls are escaped when accessed via url apis (see bug 1386683).opera android ...
...this has been fixed to match the spec.ie no support noopera no support nosafari no support no
webview android no support nochrome android no support nofirefox android full support 38 full support 38 no support 4 — 38notes notes before firefox 38, firefox returned the hash percent encoded.
...And 9 more matches
Compressed texture formats - Web APIs
the
webgl api provides methods to use compressed texture formats.
... usage unless otherwise specified, this article applies to both
webgl 1 and 2 contexts.
... as compressed textures require hardware support, therefore no specific formats are required by
webgl; instead, a context can make different formats available, depending on hardware support.
...And 9 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.
... 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.
...the attacker could also infer information about the user's activities by watching which images are served to the user; often images are only served on a specific page within a
website.
...And 9 more matches
CSS layout - Learn web development
looking to become a front-end
web developer?
...at the end of the lessons is an assessment to help you check your understanding of layout methods, by laying out a
webpage.
... normal flow elements on
webpages lay themselves out according to normal flow - until we do something to change that.
...And 8 more matches
What text editors are available? - Learn web development
in this article we highlight some things to think about when installing a text editor for
web development.
... prerequisites: you should already know about various software you need to build a
website.
... objective: learn how to choose a text editor that best suits your needs as a
web developer.
...And 8 more matches
Getting started with HTML - Learn web development
it is a markup language that tells
web browsers how to structure the
web pages you visit.
... it can be as complicated or as simple as the
web developer wants it to be.
...anchors can take a number of attributes, but several are as follows: href: this attribute's value specifies the
web address for the link.
...And 8 more matches
WebReplayRoadmap
this document describes existing, planned, and potential features for the firefox developer tools that are based on
web replay, along with their ui.
... we would like to use
web replay to radically improve not just the debugging experience but the entire
web development experience.
... dynamic analysis features an important but as-yet unexploited advantage of being able to exactly replay a
web replay recording is that the recording can be analyzed without overhead affecting the user's experience.
...And 8 more matches
EXT_disjoint_timer_query - Web APIs
the ext_disjoint_timer_query extension is part of the
webgl api and provides a way to measure the duration of a set of gl commands, without stalling the rendering pipeline.
...
webgl extensions are available using the
webglrenderingcontext.getextension() method.
... for more information, see also using extensions in the
webgl tutorial.
...And 8 more matches
Using IndexedDB - Web APIs
because it lets you create
web applications with rich query abilities regardless of network availability, your applications can work both online and offline.
...window.indexeddb = window.indexeddb || window.mozindexeddb || window.
webkitindexeddb || window.msindexeddb; // don't use "var indexeddb = ..." if you're not in a function.
... // moreover, you may need references to some window.idb* objects: window.idbtransaction = window.idbtransaction || window.
webkitidbtransaction || window.msidbtransaction || {read_write: "readwrite"}; // this line should only be needed if it is needed to support the object's constants for older browsers window.idbkeyrange = window.idbkeyrange || window.
webkitidbkeyrange || window.msidbkeyrange; // (mozilla has never prefixed these objects, so we don't need window.mozidb*) beware that implementations that use a prefix may be buggy, or incomplete, or following an old version of the specification.
...And 8 more matches
OffscreenCanvas.getContext() - Web APIs
note: this api is currently implemented for
webgl1 and
webgl2 contexts only.
... "
webgl" creates a
webglrenderingcontext object representing a three-dimensional rendering context.
... this context is only available on browsers that implement
webgl version 1 (opengl es 2.0).
...And 8 more matches
PasswordCredential - Web APIs
desktopmobilechromeedgefirefoxinternet exploreroperasafariandroid
webviewchrome for androidfirefox for androidopera for androidsafari on iossamsung internetpasswordcredential experimentalchrome full support 51edge full support ≤79firefox ?
...
webview android full support 51chrome android full support 51firefox android ?
...
webview android full support 51chrome android full support 51firefox android ?
...And 8 more matches
SubtleCrypto.importKey() - Web APIs
the importkey() method of the subtlecrypto interface imports a key: that is, it takes as input a key in an external, portable format and gives you a cryptokey object that you can use in the
web crypto api.
... jwk: json
web key format.
... keydata is an arraybuffer, a typedarray, a dataview, or a json
webkey object containing the key in the given format.
...And 8 more matches
WebAssembly.Global - JavaScript
a
webassembly.global object represents a global variable instance, accessible from both javascript and importable/exportable across one or more
webassembly.module instances.
... constructor
webassembly.global() creates a new global object.
...by default this is the
webassembly.global() constructor.
...And 8 more matches
WebAssembly.Table() constructor - JavaScript
the
webassembly.table() constructor creates a new table object of the given size and element type.
... syntax new
webassembly.table(tabledescriptor); parameters tabledescriptor an object that can contain the following members: element a string representing the type of value to be stored in the table.
... initial the initial number of elements of the
webassembly table.
...And 8 more matches
WebAssembly.instantiateStreaming() - JavaScript
the
webassembly.instantiatestreaming() function compiles and instantiates a
webassembly module directly from a streamed underlying source.
... syntax promise<resultobject>
webassembly.instantiatestreaming(source, importobject); parameters source a response object or a promise that will fulfill with one, representing the underlying source of a .wasm module you want to stream, compile, and instantiate.
... importobject optional an object containing the values to be imported into the newly-created instance, such as functions or
webassembly.memory objects.
...And 8 more matches
Performance fundamentals - Web Performance
in the context of open
web apps, this document explains in general what performance is, how the browser platform helps improve it, and what tools and processes you can use to test and improve it.
...from a developer's or user's perspective, this answers the question, "what does the platform do for you?"
web technologies the
web platform provides many tools, some better suited for particular jobs than others.
...high-level declarative languages), or use low-level imperative interfaces offered by the <canvas> element (which includes
webgl).
...And 8 more matches
Transport Layer Security - Web security
it was updated to ssl 3.0 not long after, and as its usage expanded, it became clear that a common, standard encryption technology needed to be specified to ensure interoperability among all
web browsers and servers.
... despite the fact that the
web now uses tls for encryption, many people still refer to it as "ssl" out of habit.
...tls-encrypted
web traffic is by convention exchanged on port 443 by default, while unencrypted http uses port 80 by default.
...And 8 more matches
The Basics of Web Services - Archive of obsolete content
summary: a current hot topic on the
web right now are
web services.
... this short guide will allow you to learn more about
web services.
... the basics
web services are not really anything that new, and actually, if you've ever used an rss or atom feed to pull news from a
website, you have an idea of how a
web service might work.
...And 7 more matches
HTML: A good basis for accessibility - Learn web development
previous overview: accessibility next a great deal of
web content can be made accessible just by making sure the correct hypertext markup language elements are used for the correct purpose at all times.
... objective: to gain familiarity with the features of html that have accessibility benefits and how to use them appropriately in your
web documents.
... out there on the
web, the truth is that people do some very strange things with html markup.
...And 7 more matches
HTML: A good basis for accessibility - Learn web development
previous overview: accessibility next a great deal of
web content can be made accessible just by making sure the correct hypertext markup language elements are used for the correct purpose at all times.
... objective: to gain familiarity with the features of html that have accessibility benefits and how to use them appropriately in your
web documents.
... out there on the
web, the truth is that people do some very strange things with html markup.
...And 7 more matches
How can we design for all types of users? - Learn web development
this article provides basic tips to help you design
websites for any kind of user.
... summary when you're building a
website, one top issue to consider is universal design: accommodating all users regardless of disability, technical constraints, culture, location, and so on.
... note: alternatively you can find a number of contrast checkers online, such as
webaim's color contrast checker.
...And 7 more matches
Tips for authoring fast-loading HTML pages - Learn web development
an optimized
web page not only provides for a more responsive site for your visitors but also reduces the load on your
web servers and internet connection.
... 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.
...too much time spent querying the last modified time of the referenced files can delay the initial display of the
web page, since the browser must check the modification time for each of these files, before rendering the page.
...And 7 more matches
Responsive images - Learn web development
prerequisites: you should already know the basics of html and how to add static images to a
web page.
... objective: learn how to use features like srcset and the <picture> element to implement responsive image solutions on
websites.
...a typical
website may contain a header image and some content images below the header.
...And 7 more matches
Multimedia and Embedding - Learn web development
we've looked at a lot of text so far in this course, but the
web would be really boring only using text.
... let's start looking at how to make the
web come alive with more interesting content!
... this module explores how to use html to include multimedia in your
web pages, including the different ways that images can be included, and how to embed video, audio, and even entire
webpages.
...And 7 more matches
Getting started with Svelte - Learn web development
svelte: a new approach to building rich user interfaces svelte provides a different approach to building
web apps than some of the other frameworks covered in this module.
... svelte sticks closely to the classic
web development model of html, css, and js, just adding a few extensions to html and javascript.
... nevertheless, svelte is particularly appropriate to tackle the following situations:
web applications intended for low power devices: applications built with svelte have smaller bundle sizes, which is ideal for devices with slow network connections and limited processing power.
...And 7 more matches
Package management basics - Learn web development
a
web project can have any number of dependencies, ranging from none to many, and your dependencies might include sub-dependencies that you didn't explicitly install — your dependencies may have their own dependencies.
... without modern build tools, dependencies like this might be included in your project using a simple <script> element, but this might not work right out of the box and you will likely need some modern tooling to bundle your code and dependencies together when they are released on the
web.
... a bundle is the term that’s generally used to refer to a single file on your
web server that contains all the javascript for your software — typically compressed as much as possible to help reduce the time it takes to get your software downloaded and displayed in your visitors’ browser.
...And 7 more matches
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).
... components.utils.import("resource://gre/modules/
webchannel.jsm"); constructor
webchannel(string
webchannelid, nsiuri originorpermission); 2nd argument is a valid origin that should be part of requests for this channel.
...
webchannel(string
webchannelid, string originorpermission); 2nd argument is a permission for which the permission manager will be checked to determine if the request is allowed.
...And 7 more matches
Creating localizable web applications
an important step of developing a
web application or creating
web content is making sure that it can be localized.
... note: most of the code snippets used in the examples below come from an early version of the getpersonas.com
website.
... simplify localized versions if necessary oftentimes, it is better to slightly simplify the localized version of your
web application than to serve a mix of localized and english content.
...And 7 more matches
Mozilla Web Developer FAQ
this document answers questions that
web authors ask frequently specifically in connection with firefox and other gecko-based browsers.
... there are links to more general
web authoring faqs at the end of this document.
...in the standards mode gecko aims to treat documents authored in compliance with the applicable
web format specifications.
...And 7 more matches
Inspecting web sockets - Firefox Developer Tools
since firefox 71, the network monitor has had the ability to inspect
web socket connections.
... this article explores what functionality the
web socket inspector makes available.
... accessing the inspector when you are inspecting a
web app that utilizes a
web socket connection, the
web socket requests are listed in the list of requests in the network monitor along with all other requests.
...And 7 more matches
FileReaderSync - Web APIs
desktopmobilechromeedgefirefoxinternet exploreroperasafariandroid
webviewchrome for androidfirefox for androidopera for androidsafari on iossamsung internetfilereadersyncchrome full support yesedge full support 12firefox full support 8ie full support yesopera full support ...
... yessafari full support yes
webview android full support yeschrome android full support yesfirefox android full support 8opera android full support yessafari ios full support yessamsung internet android full support yesreadasarraybufferchrome full support yesedge full support 12firefox full support 8ie full s...
...upport yesopera full support yessafari full support yes
webview android full support yeschrome android full support yesfirefox android full support 8opera android full support yessafari ios full support yessamsung internet android full support yesreadasbinarystringchrome full support yesedge full support 12firefox ...
...And 7 more matches
FileSystemDirectoryEntry - Web APIs
window.requestfilesystem = window.requestfilesystem || window.
webkitrequestfilesystem; window.directoryentry = window.directoryentry || window.
webkitdirectoryentry; ...
... desktopmobilechromeedgefirefoxinternet exploreroperasafariandroid
webviewchrome for androidfirefox for androidopera for androidsafari on iossamsung internetfilesystemdirectoryentry experimentalchrome full support 8alternate name full support 8alternate name alternate name uses the non-standard name: directoryentryedge full support ...
...79prefixed full support 79prefixed prefixed implemented with the vendor prefix:
webkitfirefox full support 50ie no support noopera full support yesprefixed full support yesprefixed prefixed implemented with the vendor prefix:
webkitsafari full support 11.1
webview android full support ≤37alternate name full support ≤37alternate name alternate name uses the non-standard name: directoryentrychrome android full support ...
...And 7 more matches
FileSystemFlags - Web APIs
note that these option flags currently don't have any useful meaning when used in the scope of
web content, where security precautions prevent the creation of new files or the replacement of existing ones.
... desktopmobilechromeedgefirefoxinternet exploreroperasafariandroid
webviewchrome for androidfirefox for androidopera for androidsafari on iossamsung internetfilesystemflags experimentalchrome full support 13prefixed full support 13prefixed prefixed implemented with the vendor prefix:
webkitedge full support ≤79prefixed ...
... full support ≤79prefixed prefixed implemented with the vendor prefix:
webkitfirefox full support 50ie no support noopera no support nosafari no support no
webview android full support yesprefixed full support yesprefixed prefixed implemented with the vendor prefix:
webkitchrome android full support yesprefixed full support yesprefixed prefixed implemented with the vendor prefix:
webkitfirefox android ...
...And 7 more matches
Using the Gamepad API - Web APIs
technologies like <canvas>,
webgl, <audio>, and <video>, along with javascript implementations, have matured to the point where they can now support many tasks previously requiring native code.
...doing so is often desirable for games or other interactive
web pages that need to know the state of a gamepad now vs.
... the navigator.getgamepads() method returns an array of all devices currently visible to the
webpage, as gamepad objects (the first value is always null, so null will be returned if there are no gamepads connected.) this can then be used to get the same information.
...And 7 more matches
HTMLCanvasElement.getContext() - Web APIs
"
webgl" (or "experimental-
webgl") which will create a
webglrenderingcontext object representing a three-dimensional rendering context.
... this context is only available on browsers that implement
webgl version 1 (opengl es 2.0).
... "
webgl2" which will create a
webgl2renderingcontext object representing a three-dimensional rendering context.
...And 7 more matches
Basic concepts - Web APIs
because it lets you create
web applications with rich query abilities regardless of network availability, these applications can work both online and offline.
...like most
web storage solutions, indexeddb follows a same-origin policy.
... indexeddb is an asynchronous api that can be used in most contexts, including
web workers.
...And 7 more matches
Key Values - Web APIs
the values below are derived in part form a number of consumer electronics technical specifications: dtv application software environment (part of the atsc specification) open cable application platform 1.1.3 ansi/cea-2014-b:
web-based protocol and framework for remote user interface on upnp™ networks and the internet android keyevent key code values note: remote controls typically include keys whose values are already defined elsewhere, such as under multimedia keys or audio control keys.
... gdk_key_excel (0x1008ff5c) qt::key_excel (0x010000d4) "launch
webbrowser" [4] the
web browser key.
... gdk_key_www (0x1008ff2e) qt::key_www (0x010000bb) keycode_explorer (64) "launch
webcam" [5] the
webcam key.
...And 7 more matches
OES_vertex_array_object - Web APIs
the oes_vertex_array_object extension is part of the
webgl api and provides vertex array objects (vaos) which encapsulate vertex array states.
...
webgl extensions are available using the
webglrenderingcontext.getextension() method.
... for more information, see also using extensions in the
webgl tutorial.
...And 7 more matches
PushRegistrationManager - Web APIs
pushregistrationmanager.getregistration() returns a promise that resolves the pushregistration associated with the current
webapp.
... pushregistrationmanager.haspermission() returns a promise that resolves to the pushpermissionstatus of the requesting
webapp.
... desktopmobilechromeedgefirefoxinternet exploreroperasafariandroid
webviewchrome for androidfirefox for androidopera for androidsafari on iossamsung internetpushregistrationmanager experimentaldeprecatedchrome no support noedge no support nofirefox ?
...And 7 more matches
SVGCircleElement - Web APIs
<div id="interfacediagram" style="display: inline-block; position: relative; width: 100%; padding-bottom: 20%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 700 140" preserveaspectratio="xminymin meet"><a xlink:href="/docs/
web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="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" y...
...2="25" stroke="#d4dde4"/><a xlink:href="/docs/
web/api/node" target="_top"><rect x="151" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="188.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">node</text></a><polyline points="226,25 236,20 236,30 226,25" stroke="#d4dde4" fill="none"/><line x1="236" y1="25" x2="266" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/
web/api/element" target="_top"><rect x="266" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="303.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">element</text></a><polyl...
...ine points="341,25 351,20 351,30 341,25" stroke="#d4dde4" fill="none"/><line x1="351" y1="25" x2="381" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/
web/api/svgelement" target="_top"><rect x="381" y="1" width="100" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="431" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">svgelement</text></a><polyline points="481,25 491,20 491,30 481,25" stroke="#d4dde4" fill="none"/><line x1="491" y1="25" x2="499" y2="25" stroke="#d4dde4"/><line x1="499" y1="25" x2="499" y2="90" stroke="#d4dde4"/><line x1="499" y1="90" x2="482" y2="90" stroke="#d4dde4"/><a xlink:href="/docs/
web/api/svggraphicselement" target="_top"><rect x="301" y="65" width="1...
...And 7 more matches
Basic scissoring - Web APIs
« previousnext » in this example, we see how to draw simple rectangles and squares using
webgl scissoring operations.
...a fragment refers to the pixel while it is being handled by the
webgl pipeline.
...scissoring is a distinct stage in the
webgl/opengl graphics pipeline (it occurs after color clearing, but before color masking).
...And 7 more matches
XRSystem: requestSession() - Web APIs
the xrsystem interface's requestsession() method returns a promise which resolves to an xrsession object through which you can manage the requested type of
webxr session.
... important: the immersive-ar mode is defined by the
webxr augmented reality module, which is not yet stable and should not be used other than for testing and experimentation.
...inline sessions don't require special hardware and should be avalable on any user agent offering
webxr api support.
...And 7 more matches
Web accessibility for seizures and physical reactions - Accessibility
this article introduces concepts behind making
web content accessibile for those with vestibular disorders, and how to measure and prevent content leading to seizures and / or other physical reactions.
...
web technologies that use video, animated gifs, animated pngs, animated svgs, canvas, and css or javascript animations are all capable of content that can induce seizures or other incapacitating physical reactions.
...for a great introduction on the topic of musicogenic seizures, visit epilepsy ontario's
web page on musicogenic seizures.
...And 7 more matches
Web Accessibility: Understanding Colors and Luminance - Accessibility
color, contrast, and luminance are among the most central and critical concepts to creating accessible
web content with color.
...currently, the rgb color space predominates as the space
web developers work in.
...
webgl is usually in the rgba format; see an example of how it is used in "clearing with colors".
...And 7 more matches
::-webkit-scrollbar - CSS: Cascading Style Sheets
the ::-
webkit-scrollbar css pseudo-element affects the style of the scrollbar of an element.
... ::-
webkit-scrollbar is only available in blink- and
webkit-based browsers (e.g., chrome, edge, opera, safari, all browsers on ios, and others).
... css scrollbar selectors you can use the following pseudo elements to customize various parts of the scrollbar for
webkit browsers: ::-
webkit-scrollbar — the entire scrollbar.
...And 7 more matches
WebAssembly.Instance - JavaScript
a
webassembly.instance object is a stateful, executable instance of a
webassembly.module.
... instance objects contain all the exported
webassembly functions that allow calling into
webassembly code from javascript.
... constructor
webassembly.instance() creates a new instance object.
...And 7 more matches
WebAssembly.compileStreaming() - JavaScript
the
webassembly.compilestreaming() function compiles a
webassembly.module directly from a streamed underlying source.
... this function is useful if it is necessary to a compile a module before it can be instantiated (otherwise, the
webassembly.instantiatestreaming() function should be used).
... syntax promise<
webassembly.module>
webassembly.compilestreaming(source); parameters source a response object or a promise that will fulfill with one, representing the underlying source of a .wasm module you want to stream and compile.
...And 7 more matches
Web security
ensuring that your
website or open
web application is secure is critical.
...the
web security-oriented articles listed here provide information that may help you secure your site and its code from attacks and data theft.
... http strict-transport-security the strict-transport-security: http header lets a
website specify that it may only be accessed using https.
...And 7 more matches
Web technology for developers
the open
web presents incredible opportunities for developers.
...below you'll find links to our
web technology documentation.
... documentation for
web developers
web developer reference a list of all references for
web technologies, including those for html, css, and so on.
...And 7 more matches
CSS FAQ - Learn web development
in this article, you'll find some frequently-asked questions (faqs) about css, along with answers that may help you on your quest to become a
web developer.
... browsers use the doctype declaration to choose whether to show the document using a mode that is more compatible with
web standards or with old browser bugs.
... modern browsers have two main rendering modes: quirks mode: also called backwards-compatibility mode, allows legacy
webpages to be rendered as their authors intended, following the non-standard rendering rules used by older browsers.
...And 6 more matches
What is accessibility? - Learn web development
this article introduces the basic concepts behind
web accessibility.
... summary because of physical or technical limitations, maybe your visitors can't experience your
website the way you hoped.
...what can the people in brazil do with your english
website?
...And 6 more matches
Client-side form validation - Learn web development
read
website security for an idea of what could happen; implementing server-side validation is somewhat beyond the scope of this module, but you should bear it in mind.
...when you enter data, the browser and/or the
web server will check to see that the data is in the correct format and within the constraints set by the application.
... we want to make filling out
web forms as easy as possible.
...And 6 more matches
Sending form data - Learn web development
client/server architecture at it's most basic, the
web uses a client/server architecture that can be summarized as follows.
... 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 6 more matches
CSS basics - Learn web development
previous overview: getting started with the
web next css (cascading style sheets) is the code that styles
web content.
...how do i make content display at a certain location in the (
webpage) layout?
... how do i decorate my
webpage with background images and colors?
...And 6 more matches
HTML basics - Learn web development
previous overview: getting started with the
web next html (hypertext markup language) is the code that is used to structure a
web page and its content.
...if they overlap as shown above, then your
web browser will try to make the best guess at what you were trying to say, which can lead to unexpected results.
...this contains all the content that you want to show to
web users when they visit your page, whether that's text, images, videos, games, playable audio tracks or whatever else.
...And 6 more matches
JavaScript basics - Learn web development
previous overview: getting started with the
web next javascript is a programming language that adds interactivity to your
website.
... javascript ("js" for short) is a full-fledged dynamic programming language that can add interactivity to a
website.
...these include: browser application programming interfaces (apis) built into
web browsers, providing functionality such as dynamically creating html and setting css styles; collecting and manipulating a video stream from a user's
webcam, or generating 3d graphics and audio samples.
...And 6 more matches
General asynchronous programming concepts - Learn web development
overview: asynchronous next in this article, we'll run through a number of important concepts relating to asynchronous programming, and how this looks in
web browsers and javascript.
... objective: to understand the basic concepts behind asynchronous programming, and how they manifest in
web browsers and javascript.
...it is up to the programming environment you are using (
web browsers, in the case of
web development) to provide you with apis that allow you to run such tasks asynchronously.
...And 6 more matches
Graceful asynchronous programming with Promises - Learn web development
this article shows you how promises work, how you'll see them in use with
web apis, and how to write your own.
... one of the most common engagements you'll have with promises is with
web apis that return a promise.
...it then calls getusermedia(), asking for a stream that has both video and audio tracks, then once that's been obtained, sets up a video element to show the stream coming from the camera as a "self view," then takes each of the stream's tracks and adds them to the
webrtc rtcpeerconnection representing a connection to another user.
...And 6 more matches
Manipulating documents - Learn web development
previous overview: client-side
web apis next when writing
web pages and apps, one of the most common things you'll want to do is manipulate the document structure in some way.
... objective: to gain familiarity with the core dom apis, and the other apis commonly associated with dom and document manipulation the important parts of a
web browser
web browsers are very complicated pieces of software with a lot of moving parts, many of which can't be controlled or manipulated by a
web developer using javascript.
...imagine if a
web site could get access to your stored passwords or other sensitive information, and log into
websites as if it were you?
...And 6 more matches
Third-party APIs - Learn web development
previous overview: client-side
web apis next the apis we've covered so far are built into the browser, but not all apis are.
... many large
websites and services such as google maps, twitter, facebook, paypal, etc.
... prerequisites: javascript basics (see first steps, building blocks, javascript objects), the basics of client-side apis objective: to learn how third-party apis work, and how to use them to enhance your
websites.
...And 6 more matches
JavaScript performance - Learn web development
previous overview: performance next while images and video account for over 70% of the bytes downloaded for the average
website, byte per byte, javascript has a greater negative impact on performance.
... this article looks to introduce performance issues caused by scripts and introduces tips and tricks for optimizing javascript for
web performance.
... prerequisites: basic computer literacy, basic software installed, and basic knowledge of client-side
web technologies.
...And 6 more matches
Introduction to automated testing - Learn web development
automation makes things easy throughout this module we have detailed loads of different ways in which you can test your
websites and apps, and explained the sort of scope your cross-browser testing efforts should have in terms of what browsers to test, accessibility considerations, and more.
...to update node, the most reliable way is to download and install an updated installer package from their
website (see link above).
...d; /* * define default task that can be called by just running `gulp` from cli */ exports.default = build; further ideas once this is all set up, you can run the gulp command inside your project directory, and you should get an output like this: you can then try out the files output by your automated tasks by looking at them inside the build directory, and loading build/index.html in your
web browser.
...And 6 more matches
Strategies for carrying out testing - Learn web development
this is not an accurate, scientific approach, but as someone who has experience with the
web industry you'll have a pretty good idea of at least some of the browsers you should test.
... you may also consider using open source and privacy focussed analytics platforms like open
web analytics and matomo.
... choose the google analytics (
web) option, and click the sign up button.
...And 6 more matches
Tools and testing - Learn web development
once you've started to become comfortable programming with core
web technologies (like html, css, and javascript), and you start to get more experience, read more resources, and learn more tips and tricks, you'll start to come across all kind of tools, from javascript frameworks, to testing and automation tools, and more besides.
... as your
web projects become larger and more complex, you'll want to start taking advantage of some of these tools, working out a reliable toolchain to give your development process superpowers.
... on top of that, we still need to keep cross-browser support in the forefront of our minds, and make sure that our code follows best practices that allow our projects to work across different browsers and devices that our users are using to browse the
web, and be usable by people with disabilities.
...And 6 more matches
amIWebInstallListener
toolkit/mozapps/extensions/ami
webinstalllistener.idlscriptable starts all installs.
... the registered ami
webinstalllistener is used to notify about new installs triggered by
websites.
... 1.0 66 introduced gecko 2.0 inherits from: nsisupports last changed in gecko 8.0 (firefox 8.0 / thunderbird 8.0 / seamonkey 2.5) method overview boolean on
webinstallblocked(in nsidomwindow awindow, in nsiuri auri, [array, size_is(acount)] in nsivariant ainstalls, [optional] in pruint32 acount); void on
webinstalldisabled(in nsidomwindow awindow, in nsiuri auri, [array, size_is(acount)] in nsivariant ainstalls, [optional] in pruint32 acount); boolean on
webinstallrequested(in nsidomwindow awindow, in nsiuri auri, [array, size_is(acount)] in nsivariant ainstalls, [optional] in pr...
...And 6 more matches
nsIWebContentHandlerRegistrar
xpfe/appshell/public/nsi
webcontenthandlerregistrar.idlscriptable applications wishing to use
web content handlers need to implement this interface.
... inherits from: nsisupports last changed in gecko 8.0 (firefox 8.0 / thunderbird 8.0 / seamonkey 2.5) implemented by @mozilla.org/embeddor.implemented/
web-content-handler-registrar;1 as a service: var nsiwchr = cc["@mozilla.org/embeddor.implemented/
web-content-handler-registrar;1"] .getservice(ci.nsi
webcontenthandlerregistrar); method overview void registercontenthandler(in domstring mimetype, in domstring uri, in domstring title, in nsidomwindow contentwindow) void registerprotocolhandler(in domstring protocol,in domstring uri, in domstring title, in nsidomwindow contentwindow) methods...
... examples register a
webmail service as mailto handler the following code aims to add "outlook.com live mail" to list of
webservice handlers.
...And 6 more matches
EXT_color_buffer_float - Web APIs
the ext_color_buffer_float extension is part of
webgl and adds the ability to render a variety of floating point formats.
...
webgl extensions are available using the
webglrenderingcontext.getextension() method.
... for more information, see also using extensions in the
webgl tutorial.
...And 6 more matches
Element - Web APIs
languages outside the realm of the
web platform, like xul through the xulelement interface, also implement element.
... <div id="interfacediagram" style="display: inline-block; position: relative; width: 100%; padding-bottom: 11.666666666666666%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 70" preserveaspectratio="xminymin meet"><a xlink:href="/docs/
web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="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/node...
...h="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="188.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">node</text></a><polyline points="226,25 236,20 236,30 226,25" stroke="#d4dde4" fill="none"/><line x1="236" y1="25" x2="266" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/
web/api/element" target="_top"><rect x="266" y="1" width="75" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="303.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">element</text></a></svg></div> a:hover text { fill: #0095dd; pointer-events: all;} properties inherits prope...
...And 6 more matches
HTMLCanvasElement - Web APIs
<div id="interfacediagram" style="display: inline-block; position: relative; width: 100%; padding-bottom: 20%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 120" preserveaspectratio="xminymin meet"><a xlink:href="/docs/
web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="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="2...
...5" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/
web/api/node" target="_top"><rect x="151" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="188.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">node</text></a><polyline points="226,25 236,20 236,30 226,25" stroke="#d4dde4" fill="none"/><line x1="236" y1="25" x2="266" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/
web/api/element" target="_top"><rect x="266" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="303.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">element</te...
...xt></a><polyline points="341,25 351,20 351,30 341,25" stroke="#d4dde4" fill="none"/><line x1="351" y1="25" x2="381" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/
web/api/htmlelement" target="_top"><rect x="381" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="436" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">htmlelement</text></a><polyline points="491,25 501,20 501,30 491,25" stroke="#d4dde4" fill="none"/><line x1="501" y1="25" x2="509" y2="25" stroke="#d4dde4"/><line x1="509" y1="25" x2="509" y2="90" stroke="#d4dde4"/><line x1="509" y1="90" x2="492" y2="90" stroke="#d4dde4"/><a xlink:href="/docs/
web/api/htmlcanvaselement" target="_top"><rect x="321" y...
...And 6 more matches
In depth: Microtasks and the JavaScript runtime environment - Web APIs
starting with the addition of timeouts and intervals as part of the
web api (settimeout() and setinterval()), the javascript environment provided by
web browsers has gradually advanced to include powerful features that enable scheduling of tasks, multi-threaded application development, and so forth.
... your
web site or app's code runs in the same thread, sharing the same event loop, as the user interface of the
web browser itself.
... this is the main thread, and in addition to running your site's main code body, it handles receiving and dispatching user and other events, rendering and painting
web content, and so forth.
...And 6 more matches
Slottable - Web APIs
desktopmobilechromeedgefirefoxinternet exploreroperasafariandroid
webviewchrome for androidfirefox for androidopera for androidsafari on iossamsung internetslottable experimentalchrome full support 53edge full support 79firefox full support 63 full support 63 no support ...
... 59 — 63disabled disabled from version 59 until version 63 (exclusive): this feature is behind the dom.
webcomponents.shadowdom.enabled preference (needs to be set to true).
...— 59disabled disabled until version 59 (exclusive): this feature is behind the dom.
webcomponents.enabled preference (needs to be set to true) and the dom.
webcomponents.shadowdom.enabled preference (needs to be set to true).
...And 6 more matches
Introduction to the Real-time Transport Protocol (RTP) - Web APIs
this article provides an overview of what rtp is and how it functions in the context of
webrtc.
... note:
webrtc actually uses srtp (secure real-time transport protocol) to ensure that the exchanged data is secure and authenticated as appropriate.
... keeping latency to a minimum is especially important for
webrtc, since face-to-face communication needs to be performed with as little latency as possible.
...And 6 more matches
XRPermissionDescriptor - Web APIs
user permissions in the
webxr device api are managed using the permissions api.
... to that end, the xrpermissiondescriptor dictionary is used to describe the
webxr features the app needs to use, as well as those features it would like ot use if permision is granted.
... the xrpermissiondescriptor's name must be set to xr in order to direct the permissions api to correctly handle the request as applying to
webxr.
...And 6 more matches
Mobile Web Development - Developer guides
this page provides an overview of some of the main techniques needed to design
web sites that work well on mobile devices.
...also see jason grlicky's guide to mobile-friendliness for
web developers.
... working with small screens responsive
web design is a term for a set of techniques that enables your
web site to adapt its layout as its viewing environment — most obviously, the size and orientation of the screen — changes.
...And 6 more matches
WebAssembly.Instance() constructor - JavaScript
the
webassembly.instance() constructor creates a new instance object which is a stateful, executable instance of a
webassembly.module.
... syntax important: since instantiation for large modules can be expensive, developers should only use the instance() constructor when synchronous instantiation is absolutely required; the asynchronous
webassembly.instantiatestreaming() method should be used at all other times.
... new
webassembly.instance(module, importobject); parameters module the
webassembly.module object to be instantiated.
...And 6 more matches
WebAssembly.Module.exports() - JavaScript
the
webassembly.module.exports() function returns an array containing descriptions of all the declared exports of the given module.
... syntax
webassembly.module.exports(module); parameters module a
webassembly.module object.
... exceptions if module is not a
webassembly.module object instance, a typeerror is thrown.
...And 6 more matches
WebAssembly.Table.prototype.set() - JavaScript
the set() prototype method of the
webassembly.table object mutates a reference stored at a given index to a different value.
...this must be an exported
webassembly function, a javascript wrapper for an underlying wasm function.
... if value is not an exported
webassembly function or null, a typeerror is thrown.
...And 6 more matches
WebAssembly.compile() - JavaScript
the
webassembly.compile() function compiles
webassembly binary code into a
webassembly.module object.
... this function is useful if it is necessary to a compile a module before it can be instantiated (otherwise, the
webassembly.instantiate() function should be used).
... syntax promise<
webassembly.module>
webassembly.compile(buffersource); parameters buffersource a typed array or arraybuffer containing the binary code of the .wasm module you want to compile.
...And 6 more matches
How to make PWAs re-engageable using Notifications and Push - Progressive web apps (PWAs)
allowing the user to install the
web app on their home screen is even better.
...this means that notifications can be displayed to the user even when they are not looking at the
web app, and the notifications look similar to ones displayed by native apps.
...see the
web push data encryption test page for detailed information about securing the server.
...And 6 more matches
Accessible multimedia - Learn web development
for example: <img src="dinosaur.png" alt="a red tyrannosaurus rex: a two legged dinosaur standing upright like a human, with small arms, and a large head with lots of sharp teeth."> accessible audio and video controls implementing controls for
web-based audio/video shouldn't be a problem, right?
...here is a <a href="viper.mp3">link to the audio</a> instead.</p> </audio> <br> <video controls> <source src="rabbit320.mp4" type="video/mp4"> <source src="rabbit320.
webm" type="video/
webm"> <p>your browser doesn't support html5 video.
... basic setup first, grab a copy of our custom-controls-start.html, custom-controls.css, rabbit320.mp4, and rabbit320.
webm files and save them in a new directory on your hard drive.
...And 5 more matches
Supporting older browsers - Learn web development
this will always be the case on the
web — as new features are developed, different browsers will prioritise different things.
... this article explains how to use modern
web techniques without locking out users of older technology.
... every
website is different in terms of target audience.
...And 5 more matches
How CSS is structured - Learn web development
you can link a single css file to multiple
web pages, styling all of them with the same css stylesheet.
... in the getting started with css, we linked an external stylesheet to our
web page.
...to apply uniform css styling to multiple pages using internal stylesheets, you must have an internal stylesheet in every
web page that will use the styling.
...And 5 more matches
How do you set up a local testing server? - Learn web development
prerequisites: you need to first know how the internet works, and what a
web server is.
... if the
web address path starts with file:// followed by the path to the file on your local hard drive, a local file is being used.
... 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.
...And 5 more matches
HTML text fundamentals - Learn web development
furthermore: users looking at a
web page tend to scan quickly to find relevant content, often just reading the headings to begin with.
... (we usually spend a very short time on a
web page.) if they can't see anything useful within a few seconds, they'll likely get frustrated and go somewhere else.
... severely visually impaired people often don't read
web pages; they listen to them instead.
...And 5 more matches
Getting started with Ember - Learn web development
introducing ember ember is a component-service framework that focuses on the overall
web application development experience, minimizing the trivial differences between applications — all while being a modern and light layer on top of native javascript.
... use cases generally, emberjs works well for building apps that desire either or both of the following traits: single page applications, including native-like
web apps, and progressive
web apps (pwas) ember works best when it is the entire front end of your application.
... examples include: prember: static
website rendering for blogs or marketing content.
...And 5 more matches
Deploying our app - Learn web development
the above tasks also break down into further tasks; note that most
web development teams will have their own terms and processes for at least some part of the post-development phase.
... netlify, amongst other things, also allows you to run pre-deployment tasks, which in our case means that all the production code build processes can be performed inside of netlify and if the build is successful, the
website changes will be deployed.
... the newly-created production code is placed in a new directory called dist, which contains all the files required to run the
website, ready for you to upload to a server.
...And 5 more matches
nsIWebBrowserPersist
embedding/components/
webbrowserpersist/nsi
webbrowserpersist.idlscriptable interface for persisting dom documents and uris to local or remote storage.
... inherits from: nsicancelable last changed in gecko 36.0 (firefox 36.0 / thunderbird 36.0 / seamonkey 2.33) implemented by: @mozilla.org/embedding/browser/ns
webbrowser;1 and @mozilla.org/embedding/browser/ns
webbrowserpersist;1.
... to create an instance, use: var
webbrowserpersist = components.classes["@mozilla.org/embedding/browser/ns
webbrowserpersist;1"] .createinstance(components.interfaces.nsi
webbrowserpersist); method overview void cancelsave(); void savechannel(in nsichannel achannel, in nsisupports afile); void savedocument(in nsidomdocument adocument, in nsisupports afile, in nsisupports adatapath, in string aoutputcontenttype, in unsigned long aencodingflags, in unsigned long awrapcolumn); void saveuri(in nsiuri auri, in nsisupports acachekey, in nsiuri areferrer, in long areferrerpolicy, in nsiinputstream apostdata, in string aextraheaders, in nsisupports afile, in nsiloadcontext aprivacycontext); void saveprivacyawareuri(in nsiuri auri...
...And 5 more matches
BasicCardResponse - Web APIs
desktopmobilechromeedgefirefoxinternet exploreroperasafariandroid
webviewchrome for androidfirefox for androidopera for androidsafari on iossamsung internetbasiccardresponsechrome no support noedge no support ≤18 — 79firefox full support 56notes disabled full support 56notes disabled notes available on...
...
webview android no support nochrome android full support 57firefox android full support 56notes disabled full support 56notes disabled notes available only in nightly builds.disabled from version 56: this feature is behind...
...
webview android no support nochrome android full support 57firefox android full support 56notes disabled full support 56notes disabled notes available only in nightly builds.disabled from version 56: this feature is behind...
...And 5 more matches
BudgetService - Web APIs
the budgetservice interface of the
web budget api provides a programmatic interface to the user agent’s budget service.
... desktopmobilechromeedgefirefoxinternet exploreroperasafariandroid
webviewchrome for androidfirefox for androidopera for androidsafari on iossamsung internetbudgetservice experimentaldeprecatednon-standardchrome full support 55edge full support ≤79firefox ?
...
webview android full support 55chrome android full support 55firefox android ?
...And 5 more matches
CanvasRenderingContext2D - Web APIs
non-standard apis blink and
webkit most of these apis are deprecated and were removed shortly after chrome 36.
... canvasrenderingcontext2d.
webkitlinedash use canvasrenderingcontext2d.getlinedash() and canvasrenderingcontext2d.setlinedash() instead.
... canvasrenderingcontext2d.
webkitlinedashoffset use canvasrenderingcontext2d.linedashoffset instead.
...And 5 more matches
EXT_float_blend - Web APIs
the
webgl api's ext_float_blend extension allows blending and draw buffers with 32-bit floating-point components.
...
webgl extensions are available using the
webglrenderingcontext.getextension() method.
... for more information, see also using extensions in the
webgl tutorial.
...And 5 more matches
MediaMetadata - Web APIs
the mediametadata interface of the the media session api provides allows a
web page to provide rich media metadata for display in a platform ui.
... desktopmobilechromeedgefirefoxinternet exploreroperasafariandroid
webviewchrome for androidfirefox for androidopera for androidsafari on iossamsung internetmediametadata experimentalchrome full support 57edge no support nofirefox full support 71ie no support noopera full s...
...
webview android no support nochrome android full support 57firefox android ?
...And 5 more matches
OES_texture_float - Web APIs
the oes_texture_float extension is part of the
webgl api and exposes floating-point pixel types for textures.
...
webgl extensions are available using the
webglrenderingcontext.getextension() method.
... for more information, see also using extensions in the
webgl tutorial.
...And 5 more matches
OES_texture_half_float - Web APIs
the oes_texture_half_float extension is part of the
webgl api and adds texture formats with 16- (aka half float) and 32-bit floating-point components.
...
webgl extensions are available using the
webglrenderingcontext.getextension() method.
... for more information, see also using extensions in the
webgl tutorial.
...And 5 more matches
Reporting API - Web APIs
the reporting api provides a generic reporting mechanism for
web applications to use to make reports available based on various platform features (for example content security policy, feature-policy, or feature deprecation reports) in a consistent manner.
... concepts and usage there are a number of different features and problems on the
web platform that generate information useful to
web developers when they are trying to fix bugs or improve their
websites in other ways.
... reports sent to endpoints can be retrieved independently of the running of the
websites they relate to, which is useful — a crash for example could bring down a
web site and stop anything running, but a report could still be obtained to give the developer some clues as to why it happened.
...And 5 more matches
Clearing by clicking - Web APIs
« previousnext » this example demonstrates how to combine user interaction with
webgl graphics operations by clearing the rendering context with a random color when the user clicks.
... clearing the rendering context with random colors this example provides a simple illustration of how to combine
webgl and user interaction.
... note how we embed the
webgl function calls inside the event handler function.
...And 5 more matches
Advanced techniques: Creating and sequencing audio - Web APIs
if you're familiar with these terms and you're looking for an introduction to their application within with the
web audio api, you've come to the right place.
... demo we're going to be looking at a very simple step sequencer: in practice this is easier to do with a library — the
web audio api was built to be built upon.
...the techniques we are using are: name of voice technique associated
web audio api feature "sweep" oscillator, periodic wave oscillatornode, periodicwave "pulse" multiple oscillators oscillatornode "noise" random noise buffer, biquad filter audiobuffer, audiobuffersourcenode, biquadfilternode "dial up" loading a sound sample to play audiocontext.decodeaudiodata(), audiobuffersourcenode note: this ...
...And 5 more matches
XRViewport - Web APIs
the
webxr device api's xrviewport interface provides properties used to describe the size and position of the current viewport within the xr
webgllayer being used to render the 3d scene.
... x read only the offset from the origin of the destination graphics surface (typically a xr
webgllayer) to the left edge of the viewport, in pixels.
... y read only the offset from the origin of the viewport to the bottom edge of the viewport;
webgl's coordinate system places (0, 0) at the bottom left corner of the surface.
...And 5 more matches
An overview of accessible web applications and widgets - Accessibility
the problem dynamic content on a
web page can be particularly problematic for users who, for whatever reason, are unable to view the screen.
...designed to fill the gap between standard html tags and the desktop-style controls found in dynamic
web applications, aria provides roles and states that describe the behavior of most familiar ui widgets.
... this provides a much more consistent user experience than was possible in the previous generation of
web applications, since assistive technology users can apply all of their knowledge of how desktop applications work when they are using
web-based applications.
...And 5 more matches
Understanding the Web Content Accessibility Guidelines - Accessibility
this set of articles provides quick explanations to help you understand the steps that need to be taken to conform to the recommendations outlined in the w3c
web content accessibility guidelines 2.0 or 2.1 (or just wcag, for the purposes of this writing).
... the wcag 2.0 and 2.1 provide a detailed set of guidelines for making
web content more accessible to people with a wide variety of disabilities.
... the four principles wcag is broadly broken down into four principles — major things that
web content must be to be considered accessible (see understanding the four principles of accessibility for the wcag definitions).
...And 5 more matches
WebAssembly.Memory.prototype.grow() - JavaScript
the grow() protoype method of the memory object increases the size of the memory instance by a specified number of
webassembly pages.
... syntax memory.grow(number); parameters number the number of
webassembly pages you want to grow the memory by (each one is 64kib in size).
... return value the previous size of the memory, in units of
webassembly pages.
...And 5 more matches
WebAssembly.Module() constructor - JavaScript
a
webassembly.module() constructor creates a new module object containing stateless
webassembly code that has already been compiled by the browser and can be efficiently shared with workers, and instantiated multiple times.
... the
webassembly.module() constructor function can be called to synchronously compile given
webassembly binary code.
... however, the primary way to get a module is through an asynchronous compilation function like
webassembly.compile().
...And 5 more matches
WebAssembly.Module.customSections() - JavaScript
the
webassembly.customsections() function returns a copy of the contents of all custom sections in the given module with the given string name.
... syntax
webassembly.module.customsections(module, sectionname); parameters module the
webassembly.module object whose custom sections are being considered.
... exceptions if module is not a
webassembly.module object instance, a typeerror is thrown.
...And 5 more matches
Web app manifests
web app manifests are part of a collection of
web technologies called progressive
web apps (pwas), which are
websites that can be installed to a device’s homescreen without an app store.
... unlike regular
web apps with simple homescreen links or bookmarks, pwas can be downloaded in advance and can work offline, as well as use regular
web apis.
... the
web app manifest provides information about a
web application in a json text file, necessary for the
web app to be downloaded and be presented to the user similarly to a native app (e.g., be installed on the homescreen of a device, providing users with quicker access and a richer experience).
...And 5 more matches
Digital audio concepts - Web media technologies
representing audio in digital form involves a number of steps and processes, with multiple formats available both for the raw audio and the encoded or compressed audio which is actually used on the
web.
... this guide is an overview examining how audio is represented digitally, and how codecs are used to encode and decode audio for use on the
web.
...some older audio file formats—which you won't find in use on the
web—used 8-bit integer samples.
...And 5 more matches
Optimizing startup performance - Web Performance
this article offers tips and suggestions to help you achieve that goal, both when writing a new app and when porting an app from another platform to the
web.
...instead, we're going to look at a more important issue when building
web apps: starting up as asynchronously as possible.
... instead, you should write your code so that your app creates a
web worker that does as much as possible in a background thread (for example, fetching and processing data.) then, anything that must be done on the main thread (such as user events and rendering ui) should be broken up into small pieces so that the app's event loop continues to cycle while it starts up.
...And 5 more matches
Progressive loading - Progressive web apps (PWAs)
previous overview: progressive
web apps in previous articles we covered apis that help us make our js13kpwa example a progressive
web app: service workers,
web manifests, notifications and push.
... bundling versus splitting many visitors won't go through every single page of a
website, yet the usual approach is to bundle every feature we have into one big file.
...during the few seconds between initial
website access and completion of loading, the user sees a blank page, which is a bad experience.
...And 5 more matches
Types of attacks - Web security
(click-jacking is sometimes called "user interface redressing", though this is a misuse of the term "redress".) cross-site request forgery (csrf) cross-site scripting (xss) cross-site scripting (xss) is a security exploit which allows an attacker to inject into a
website malicious client-side code.
...according to the open
web application security project, xss was the seventh most common
web app vulnerability in 2017.
... these attacks succeed if the
web app does not employ enough validation or encoding.
...And 5 more matches
Archived open Web documentation - Archive of obsolete content
the documentation listed below is archived, obsolete material about open
web topics.
... znerd 04 august 2009 browser detection and cross browser support improper browser detection can lead to
web maintenance nightmares.
... rethinking the basics of when and how to detect user agents is crucial to creating maintainable, cross browser
web content.
...And 4 more matches
Web Standards - Archive of obsolete content
web standards are carefully designed to deliver the greatest benefits to the greatest number of
web users while ensuring the long-term viability of any document published on the
web.
...[1] documentation migrate apps from internet explorer to mozilla ever have trouble getting your internet explorer-specific
web applications to work with mozilla?
... using
web standards in your
web pages this article provides an overview of the process for upgrading the content of your
web pages to conform to the w3c
web standards.
...And 4 more matches
Learn to style HTML using CSS - Learn web development
looking to become a front-end
web developer?
...in that module, you will learn about: css, starting with the introduction to css module more advanced html modules javascript, and how to use it to add dynamic functionality to
web pages once you understand the fundamentals of html, we recommend that you learn html and css at the same time, moving back and forth between the two topics.
... before starting this topic, you should also be familiar with using computers and using the
web passively (i.e., just looking at it, consuming the content).
...And 4 more matches
How does the Internet work? - Learn web development
prerequisites: none, but we encourage you to read the article on setting project goals first objective: you will learn the basics of the technical infrastructure of the
web and the difference between internet and the
web.
... summary the internet is the backbone of the
web, the technical infrastructure that makes the
web possible.
... internet and the
web as you might notice, when we browse the
web with a
web browser, we usually use the domain name to reach a
website.
...And 4 more matches
What are browser developer tools? - Learn web development
every modern
web browser includes a powerful suite of developer tools.
... note: before you run through the examples below, open the beginner's example site that we built during the getting started with the
web article series.
...three ways: keyboard: ctrl + shift + i, except internet explorer and edge: f12 macos: ⌘ + ⌥ + i menu bar: firefox: menu ➤
web developer ➤ toggle tools, or tools ➤
web developer ➤ toggle tools chrome: more tools ➤ developer tools safari: develop ➤ show
web inspector.
...And 4 more matches
Use HTML to solve common problems - Learn web development
how to create a basic html document how to divide a
webpage into logical sections how to set up a proper structure of headings and paragraphs basic text-level semantics html specializes in providing semantic information for a document, so html answers many questions you might have about how to get your message across best in your document.
... how to create a list of items with html how to stress or emphasize content how to indicate that text is important how to display computer code with html how to annotate images and graphics how to mark abbreviations and make them understandable how to add quotations and citations to
web pages how to define terms with html hyperlinks one of the main reasons for html is making navigation easy with hyperlinks, which can be used in many different ways: how to create a hyperlink how to create a table of contents with html images & multimedia how to add images to a
webpage how to add video content to a
webpage scripting & styling html only sets up document structure.
... how to use css within a
webpage how to use javascript within a
webpage embedded content how to embed a
webpage within another
webpage how to add flash content within a
webpage uncommon or advanced problems beyond the basics, html is very rich and offers advanced features for solving complex problems.
...And 4 more matches
Video and Audio APIs - Learn web development
previous overview: client-side
web apis next html5 comes with elements for embedding rich media in documents — <video> and <audio> — which in turn come with their own apis for controlling playback, seeking, etc.
... html5 video and audio the <video> and <audio> elements allow us to embed video and audio into
web pages.
... as we showed in video and audio content, a typical implementation looks like this: <video controls> <source src="rabbit320.mp4" type="video/mp4"> <source src="rabbit320.
webm" type="video/
webm"> <p>your browser doesn't support html5 video.
...And 4 more matches
JavaScript — Dynamic client-side scripting - Learn web development
javascript is a programming language that allows you to implement complex things on
web pages.
... every time a
web page does more than just sit there and display static information for you to look at—displaying timely content updates, interactive maps, animated 2d/3d graphics, scrolling video jukeboxes, or more—you can bet that javascript is probably involved.
... looking to become a front-end
web developer?
...And 4 more matches
Getting started with React - Learn web development
react is not a framework – it's not even exclusive to the
web.
... to build for the
web, developers use react in tandem with reactdom.
... react and reactdom are often discussed in the same spaces as — and utilized to solve the same problems as — other true
web development frameworks.
...And 4 more matches
amIWebInstaller
toolkit/mozapps/extensions/ami
webinstaller.idlscriptable this interface is used to allow
web pages to start installing add-ons.
... 1.0 66 introduced gecko 2.0 inherits from: nsisupports last changed in gecko 8.0 (firefox 8.0 / thunderbird 8.0 / seamonkey 2.5) method overview boolean installaddonsfrom
webpage(in astring amimetype, in nsidomwindow awindow, in nsiuri areferer, [array, size_is(ainstallcount)] in wstring auris, [array, size_is(ainstallcount)] in wstring ahashes, [array, size_is(ainstallcount)] in wstring anames, [array, size_is(ainstallcount)] in wstring aicons, [optional] in amiinstallcallback acallback, [optional] in pruint32 ainstallcount); boolean isinstallenabled(in astring amimetype, in nsiuri areferer); note: prior to gecko 8.0, all references to nsidomwindow used in this interface were nsidomwindow.
... methods installaddonsfrom
webpage() installs an array of add-ons at the request of a
webpage.
...And 4 more matches
nsIWebNavigationInfo
docshell/base/nsi
webnavigationinfo.idlscriptable exposes a way to get information on the capabilities of gecko
web navigation objects.
... 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) implemented by: @mozilla.org/
webnavigation-info;1 as a service: var
webnavigationinfo = components.classes["@mozilla.org/
webnavigation-info;1"] .getservice(components.interfaces.nsi
webnavigationinfo); method overview unsigned long istypesupported(in acstring atype, in nsi
webnavigation a
webnav); constants support type constants constant value description unsupported 0 returned by istypesupported() to indicate lack of support for a type.
... methods istypesupported() determines whether or not the specified mime type is supported by the given nsi
webnavigation object.
...And 4 more matches
nsIWebSocketListener
netwerk/protocol/
websocket/nsi
websocketlistener.idlscriptable implement this interface to receive
websocket traffic events asynchronously after calling nsi
websocketchannel.asyncopen().
...xt, in acstring amsg); void onmessageavailable(in nsisupports acontext, in autf8string amsg); void onserverclose(in nsisupports acontext, in unsigned short acode, in autf8string areason); void onstart(in nsisupports acontext); void onstop(in nsisupports acontext, in nsresult astatuscode); methods onacknowledge() called to acknowledge a message sent via nsi
websocketchannel.sendmsg() or nsi
websocketchannel.sendbinarymsg().
...no additional messages through onmessageavailable(), onbinarymessageavailable()() or onacknowledge()() will be delievered to the listener after onserverclose() is called, but outgoing messages can still be sent through the nsi
websocketchannel connection.
...And 4 more matches
nsIWebappsSupport
toolkit/components/
webapps/nsi
webappssupport.idlscriptable please add a summary to this article.
... 1.0 66 introduced gecko 2.0 inherits from: nsisupports last changed in gecko 2.0 (firefox 4 / thunderbird 3.3 / seamonkey 2.1) method overview void installapplication(in wstring title, in wstring uri, in wstring iconuri, in wstring icondata); boolean isapplicationinstalled(in wstring uri); methods installapplication() this method installs a
web application.
...uri the uri of the
web application.
...And 4 more matches
AudioNode - Web APIs
biquadfilternode or convolvernode), or volume control (like gainnode) <div id="interfacediagram" style="display: inline-block; position: relative; width: 100%; padding-bottom: 11.666666666666666%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 70" preserveaspectratio="xminymin meet"><a xlink:href="/docs/
web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="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="2...
...5" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/
web/api/audionode" target="_top"><rect x="151" y="1" width="90" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="196" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">audionode</text></a></svg></div> a:hover text { fill: #0095dd; pointer-events: all;} note: an audionode can be target of events, therefore it implements the eventtarget interface.
...the
web audio api will up-mix or down-mix the number of channels as required; check the
web audio spec for details.
...And 4 more matches
BudgetState - Web APIs
the budgetstate interface of the the
web budget api provides the amount of the user agent's processing budget at a specific point in time.
... desktopmobilechromeedgefirefoxinternet exploreroperasafariandroid
webviewchrome for androidfirefox for androidopera for androidsafari on iossamsung internetbudgetstate experimentaldeprecatednon-standardchrome full support 60edge full support ≤79firefox ?
...
webview android no support nochrome android full support 60firefox android ?
...And 4 more matches
DirectoryReaderSync - Web APIs
but directoryentrysync (as well as fileentrysync) is not a data type that you can pass between a calling app and
web worker thread.
... example in the following code snippet from html5rocks, we create
web workers and pass data from it to the main app.
... window.resolvelocalfilesystemurl = window.resolvelocalfilesystemurl || window.
webkitresolvelocalfilesystemurl; // create
web workers var worker = new worker('worker.js'); worker.onmessage = function(e) { var urls = e.data.entries; urls.foreach(function(url, i) { window.resolvelocalfilesystemurl(url, function(fileentry) { // print out file's name.
...And 4 more matches
EXT_blend_minmax - Web APIs
the ext_blend_minmax extension is part of the
webgl api and extends blending capabilities by adding two new blend equations: the minimum or maximum color components of the source and destination colors.
...
webgl extensions are available using the
webglrenderingcontext.getextension() method.
... for more information, see also using extensions in the
webgl tutorial.
...And 4 more matches
FileException - Web APIs
the added complexity of using
webworkers with this api makes debugging even more challenging.
... security_err 2 access to the files were denied for one of the following reasons: the files might be unsafe for access within a
web application.
... desktopmobilechromeedgefirefoxinternet exploreroperasafariandroid
webviewchrome for androidfirefox for androidopera for androidsafari on iossamsung internetfileexception deprecatednon-standardchrome no support 13 — 29prefixed no support 13 — 29prefixed prefixed implemented with the vendor prefix:
webkitedge no support nofirefox no support ...
...And 4 more matches
FileSystem - Web APIs
basic concepts there are two ways to get access to a filesystem object: you can directly ask for one representing a sandboxed file system created just for your
web app directly by calling window.requestfilesystem().
... desktopmobilechromeedgefirefoxinternet exploreroperasafariandroid
webviewchrome for androidfirefox for androidopera for androidsafari on iossamsung internetfilesystemchrome full support 7alternate name full support 7alternate name alternate name uses the non-standard name: domfilesystemedge full support ≤18prefixed notes ...
... full support ≤18prefixed notes prefixed implemented with the vendor prefix:
webkitnotes edge only supports this api in drag-and-drop scenarios using the the datatransferitem.
webkitgetasentry() method.
...And 4 more matches
FileSystemFileEntry - Web APIs
desktopmobilechromeedgefirefoxinternet exploreroperasafariandroid
webviewchrome for androidfirefox for androidopera for androidsafari on iossamsung internetfilesystemfileentrychrome full support 8alternate name full support 8alternate name alternate name uses the non-standard name: fileentryedge full support 79prefixed ...
... full support 79prefixed prefixed implemented with the vendor prefix:
webkitfirefox full support 50ie no support noopera no support nosafari full support 11.1
webview android full support ≤37alternate name full support ≤37alternate name alternate name uses the non-standard name: fileentrychrome android full support 18alternate name full support 18alternate name alternate name uses the non-standard name...
...full support 50opera android no support nosafari ios full support 11.3samsung internet android full support yesprefixed full support yesprefixed prefixed implemented with the vendor prefix:
webkitcreatewriter deprecatednon-standardchrome full support 8edge full support 79firefox no support 50 — 52notes no support 50 — 52notes notes while the createwriter() method existed, it immediately called errorcallback with the ns_error_dom_security_err ...
...And 4 more matches
GamepadEvent - Web APIs
working draft initial definition browser compatibility desktopmobilechromeedgefirefoxinternet exploreroperasafariandroid
webviewchrome for androidfirefox for androidopera for androidsafari on iossamsung internetgamepadeventchrome full support 35 full support 35 no support 21 — 34prefixed prefixed implemented with the vendor prefix:
webkitedge full support ≤...
...to change preferences in firefox, visit about:config.ie no support noopera full support 22 full support 22 no support 15 — 21prefixed prefixed implemented with the vendor prefix:
webkitsafari full support 10.1
webview android no support nochrome android full support yesfirefox android full support 32opera android full support 22 full suppor...
...t 22 no support 14 — 21prefixed prefixed implemented with the vendor prefix:
webkitsafari ios full support 10.3samsung internet android full support yesgamepadevent() constructorchrome full support 35edge full support 12firefox full support 29 full support 29 no support 24 — 28disabled disabled from version 24 until version 28 (exclusive): this feature is behind the dom.gamepad.enabled preference (needs to be set to true).
...And 4 more matches
GestureEvent - Web APIs
the gestureevent is a proprietary interface specific to
webkit which gives information regarding multi-touch gestures.
... desktopmobilechromeedgefirefoxinternet exploreroperasafariandroid
webviewchrome for androidfirefox for androidopera for androidsafari on iossamsung internetgestureevent non-standardchrome no support noedge no support nofirefox no support noie no support noopera no support ...
... nosafari full support 9
webview android no support nochrome android no support nofirefox android no support noopera android no support nosafari ios full support 2samsung internet android no support nogestureevent() constructor non-standardchrome no support noedge no support nofirefox no support noie no suppo...
...And 4 more matches
IDBCursorWithValue - Web APIs
note: this feature is available in
web workers.
... <div id="interfacediagram" style="display: inline-block; position: relative; width: 100%; padding-bottom: 11.666666666666666%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 70" preserveaspectratio="xminymin meet"><a xlink:href="/docs/
web/api/idbcursor" target="_top"><rect x="1" y="1" width="90" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="46" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">idbcursor</text></a><polyline points="91,25 101,20 101,30 91,25" stroke="#d4dde4" fill="none"/><line x1="101" y1="25" x2="131" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/
web/api/idbcursorwi...
... desktopmobilechromeedgefirefoxinternet exploreroperasafariandroid
webviewchrome for androidfirefox for androidopera for androidsafari on iossamsung internetidbcursorwithvaluechrome full support 24 full support 24 no support 23 — 57prefixed prefixed implemented with the vendor prefix:
webkitedge full support ...
...And 4 more matches
IndexedDB API - Web APIs
while
web storage is useful for storing smaller amounts of data, it is less useful for storing larger amounts of structured data.
... note: this feature is available in
web workers.
... note: like most
web storage solutions, indexeddb follows a same-origin policy.
...And 4 more matches
Navigator - Web APIs
navigator.xr read only returns xr object, which represents the entry point into the
webxr api.
...when this value is "yes", your
web site or application should not track the user.
... navigator.
webkitnotification returns a notification object you can use to deliver notifications to the user from your
web application.
...And 4 more matches
Using the Notifications API - Web APIs
note: this feature is available in
web workers.
... the notifications api lets a
web page or app send notifications that are displayed outside the page at the system level; this lets
web apps send information to a user even if the application is idle or in the background.
... examples one of the most obvious use cases for
web notifications is a
web-based mail or irc application that needs to notify the user when a new message is received, even if the user is doing something else with another application.
...And 4 more matches
OVR_multiview2 - Web APIs
the ovr_multiview2 extension is part of the
webgl api and adds support for rendering into multiple views simultaneously.
... this especially useful for virtual reality (vr) and
webxr.
... for more information, see also: multiview on
webxr three.js multiview demo multiview in babylon.js optimizing virtual reality: understanding multiview multiview
webgl rendering for oculus browser 6.0+
webgl extensions are available using the
webglrenderingcontext.getextension() method.
...And 4 more matches
RTCIceCandidate - Web APIs
the rtcicecandidate interface—part of the
webrtc api—represents a candidate internet connectivity establishment (ice) configuration which may be used to establish an rtcpeerconnection.
... an ice candidate describes the protocols and routing needed for
webrtc to be able to communicate with a remote device.
... when starting a
webrtc peer connection, typically a number of candidates are proposed by each end of the connection, until they mutually agree upon one which describes the connection they decide will be best.
...And 4 more matches
ScreenOrientation - Web APIs
desktopmobilechromeedgefirefoxinternet exploreroperasafariandroid
webviewchrome for androidfirefox for androidopera for androidsafari on iossamsung internetscreenorientationchrome full support 38edge full support 79firefox full support 43ie no support noopera full support ...
... 25safari no support no
webview android full support 38chrome android full support 38firefox android full support 43opera android full support 25safari ios no support nosamsung internet android full support 3.0anglechrome full support 38edge full support 79firefox full support 43ie no support ...
... noopera full support 25safari no support no
webview android full support 38chrome android full support 38firefox android full support 43opera android full support 25safari ios no support nosamsung internet android full support 3.0lockchrome full support 38edge full support 79firefox full support ...
...And 4 more matches
Screen Orientation API - Web APIs
desktopmobilechromeedgefirefoxinternet exploreroperasafariandroid
webviewchrome for androidfirefox for androidopera for androidsafari on iossamsung internetscreenorientationchrome full support 38edge full support 79firefox full support 43ie no support noopera full support ...
... 25safari no support no
webview android full support 38chrome android full support 38firefox android full support 43opera android full support 25safari ios no support nosamsung internet android full support 3.0anglechrome full support 38edge full support 79firefox full support 43ie no support ...
... noopera full support 25safari no support no
webview android full support 38chrome android full support 38firefox android full support 43opera android full support 25safari ios no support nosamsung internet android full support 3.0lockchrome full support 38edge full support 79firefox full support ...
...And 4 more matches
Color masking - Web APIs
« previousnext » this
webgl example modifies random colors by applying color masking to limit the range of displayed colors to specific shades.
...the color mask state of
webgl is preserved, so we do not need to call colormask() every frame to set up the color mask.
... this is an important aspect of the
webgl state machine.
...And 4 more matches
Using IIR filters - Web APIs
the iirfilternode interface of the
web audio api is an audionode processor that implements a general infinite impulse response (iir) filter; this type of filter can be used to implement tone control devices and graphic equalizers, and the filter response parameters can be specified, so that it can be tuned as needed.
... browser support iir filters are supported well across modern browsers, although they have been implemented more recently than some of the more longstanding
web audio api features, like biquad filters.
... the iirfilternode the
web audio api now comes with an iirfilternode interface.
...And 4 more matches
Window - Web APIs
<div id="interfacediagram" style="display: inline-block; position: relative; width: 100%; padding-bottom: 11.666666666666666%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 70" preserveaspectratio="xminymin meet"><a xlink:href="/docs/
web/api/window" target="_top"><rect x="1" y="1" width="75" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="38.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">window</text></a></svg></div> a:hover text { fill: #0095dd; pointer-events: all;} constructors see also the dom ...
... worker used for creating a
web worker.
... window.speechsynthesis read only returns a speechsynthesis object, which is the entry point into using
web speech api speech synthesis functionality.
...And 4 more matches
XRSession - Web APIs
the
webxr device api's xrsession interface represents an ongoing xr session, providing methods and properties used to interact with and control the session.
... to open a
webxr session, use the xrsystem interface's requestsession() method.
... note: environmentblendmode() is part of the
webxr augmented reality module, which has not been completed.
...And 4 more matches
XRSessionMode - Web APIs
the
webxr device api's xrsessionmode enumerated type defines the string values used to identify the possible kinds of session mode that can be used.
... important: the immersive-ar mode is defined by the
webxr augmented reality module, which is not yet stable and should not be used other than for testing and experimentation.
...inline sessions don't require special hardware and should be avalable on any user agent offering
webxr api support.
...And 4 more matches
Web APIs
when writing code for the
web, there are a large number of
web apis available.
... below is a list of all the apis and interfaces (object types) that you may be able to use while developing your
web app or site.
...
web apis are typically used with javascript, although this doesn't always have to be the case.
...And 4 more matches
-webkit-device-pixel-ratio - CSS: Cascading Style Sheets
the -
webkit-device-pixel-ratio is a non-standard boolean css media feature which is an alternative to the standard resolution media feature.
... note: this media feature is a
webkit feature.
... syntax the -
webkit-device-pixel-ratio feature is specified as a <number> value.
...And 4 more matches
WebAssembly.Global() constructor - JavaScript
a
webassembly.global() constructor creates a new global object representing a global variable instance, accessible from both javascript and importable/exportable across one or more
webassembly.module instances.
... syntax new
webassembly.global(descriptor, value); parameters descriptor a globaldescriptor dictionary object, which contains two properties: value: a usvstring representing the data type of the global.
... examples creating a new global instance the following example shows a new global instance being created using the
webassembly.global() constructor.
...And 4 more matches
WebAssembly.Instance.prototype.exports - JavaScript
the exports readonly property of the
webassembly.instance object prototype returns an object containing as its members all the functions exported from the
webassembly module instance, to allow them to be accessed and used by javascript.
... instance.exports examples using exports after fetching some
webassembly bytecode using fetch, we compile and instantiate the module using the
webassembly.instantiatestreaming() function, importing a javascript function into the
webassembly module in the process.
... we then call an exported
webassembly function that is exported by the instance.
...And 4 more matches
WebAssembly.Table.prototype.get() - JavaScript
the get() prototype method of the
webassembly.table() object retrieves a function reference stored at a given index.
... return value a function reference — this is an exported
webassembly function, a javascript wrapper for an underlying wasm function.
... examples using get the following example (see table.html on github, and view it live also) compiles and instantiates the loaded table.wasm byte code using the
webassembly.instantiatestreaming() method.
...And 4 more matches
Web Components
web components is a suite of different technologies allowing you to create reusable custom elements — with their functionality encapsulated away from the rest of your code — and utilize them in your
web apps.
...
web components aims to solve such problems — it consists of three main technologies, which can be used together to create versatile custom elements with encapsulated functionality that can be reused wherever you like without fear of code collisions.
... the basic approach for implementing a
web component generally looks something like this: create a class in which you specify your
web component functionality, using the ecmascript 2015 class syntax (see classes for more information).
...And 4 more matches
Floats - Learn web development
previous overview: css layout next originally for floating images inside blocks of text, the float property became one of the most commonly used tools for creating multiple column layouts on
webpages.
... prerequisites: html basics (study introduction to html), and an idea of how css works (study introduction to css.) objective: to learn how to create floated features on
webpages, and to use the clear property and other methods of clearing floats.
... the background of floats the float property was introduced to allow
web developers to implement simple layouts involving an image floating inside a column of text, with the text wrapping around the left or right of it.
...And 3 more matches
Introduction to CSS layout - Learn web development
css page layout techniques allow us to take elements contained in a
web page and control where they are positioned relative to their default position in normal layout flow, the other elements around them, their parent container, or the main viewport/window.
...this gives us the effect of text wrapped around that box, and is most of what you need to know about floats as used in modern
web design.
...you may still come across these methods on the
web; we will cover these in the lesson on legacy layout methods.
...And 3 more matches
HTML forms in legacy browsers - Learn web development
all
web developers learn very quickly (and sometimes painfully) that the
web is a very rough place for them.
...mdn has compatibility tables available for most elements, properties and apis that can be used in a
web page.
... there are other resources that can be amazingly helpful: browser vendor documentation mozilla: you're in the right place, just browse mdn microsoft: internet explorer standards support documentation
webkit: because there are several different editions of this engine, things are a little trickier.
...And 3 more matches
Advanced text formatting - Learn web development
for example, the following markup is taken from the mdn <blockquote> element page: <p>the <strong>html <code><blockquote></code> element</strong> (or <em>html block quotation element</em>) indicates that the enclosed text is an extended quotation.</p> to turn this into a block quote, we would just do this: <p>here below is a blockquote...</p> <blockquote cite="/docs/
web/html/element/blockquote"> <p>the <strong>html <code><blockquote></code> element</strong> (or <em>html block quotation element</em>) indicates that the enclosed text is an extended quotation.</p> </blockquote> browser default styling will render this as an indented paragraph, as an indicator that it is a quote; the paragraph above the quotation is there to demonstrate that.
...for example, the below bit of markup contains a quotation from the mdn <q> page: <p>the quote element — <code><q></code> — is <q cite="/docs/
web/html/element/q">intended for short quotations that don't require paragraph breaks.</q></p> browser default styling will render this as normal text put in quotes to indicate a quotation, like so: citations the content of the cite attribute sounds useful, but unfortunately browsers, screenreaders, etc.
...there is no reason however why you couldn't link the text inside <cite> to the quote source in some way: <p>according to the <a href="/docs/
web/html/element/blockquote"> <cite>mdn blockquote page</cite></a>: </p> <blockquote cite="/docs/
web/html/element/blockquote"> <p>the <strong>html <code><blockquote></code> element</strong> (or <em>html block quotation element</em>) indicates that the enclosed text is an extended quotation.</p> </blockquote> <p>the quote element — <code><q></code> — is <q cite="/docs/
web/html/el...
...And 3 more matches
Debugging HTML - Learn web development
note: html is parsed permissively because when the
web was first created, it was decided that allowing people to get their content published was more important than making sure the syntax was absolutely correct.
... the
web would probably not be as popular as it is today, if it had been more strict from the very beginning.
... the best strategy is to start by running your html page through the markup validation service — created and maintained by the w3c, the organization that looks after the specifications that define html, css, and other
web technologies.
...And 3 more matches
Introduction to HTML - Learn web development
looking to become a front-end
web developer?
... get started prerequisites before starting this module, you don't need any previous html knowledge, but you should have at least basic familiarity with using computers and using the
web passively (i.e., just looking at it and consuming content).
...both are parts of our getting started with the
web complete beginner's module.
...And 3 more matches
Learning area release notes - Learn web development
june 2020 our front-end
web developer learning pathway is officially launched!
...also see our hacks post — introducing the mdn
web docs front-end developer learning pathway — for more information about the rationale behind it.
... our
web forms learning module now has "test your skills" assessments accompanying the articles.
...And 3 more matches
Getting started with Vue - Learn web development
this will let you use advanced features of vue and take advantage of bundlers like
webpack.
... public: this directory contains static assets that are published, but not processed by
webpack during build (with one exception; index.html gets some processing).
...because these files are in the source directory, they can be processed by
webpack.
...And 3 more matches
nsIWebBrowserFind
embedding/components/find/public/nsi
webbrowserfind.idlscriptable searches for text in a
web browser.
... inherits from: nsisupports last changed in gecko 1.7 get one by doing a getinterface on an nsi
webbrowser.
... by default, the implementation will search the focused frame, or if there is no focused frame, the
web browser content area.
...And 3 more matches
Web Audio Editor - Firefox Developer Tools
with the
web audio api, developers create an audio context.
... the
web audio editor examines an audio context constructed in the page and provides a visualization of its graph.
... opening the
web audio editor the
web audio editor is not enabled by default in firefox 32.
...And 3 more matches
characteristic - Web APIs
specifications specification status comment
web bluetooththe definition of 'characteristic' in that specification.
... desktopmobilechromeedgefirefoxinternet exploreroperasafariandroid
webviewchrome for androidfirefox for androidopera for androidsafari on iossamsung internetcharacteristic experimentalchrome full support 57notes full support 57notes notes macos only.
... full support 57notes disabled notes linux and versions of windows earlier than 10.disabled from version 57: this feature is behind the #enable-experimental-
web-platform-features preference (needs to be set to enabled).
...And 3 more matches
readValue() - Web APIs
specifications specification status comment
web bluetooththe definition of 'readvalue()' in that specification.
... desktopmobilechromeedgefirefoxinternet exploreroperasafariandroid
webviewchrome for androidfirefox for androidopera for androidsafari on iossamsung internetreadvalue experimentalchrome full support 57notes full support 57notes notes macos only.
... full support 57notes disabled notes linux and versions of windows earlier than 10.disabled from version 57: this feature is behind the #enable-experimental-
web-platform-features preference (needs to be set to enabled).
...And 3 more matches
uuid - Web APIs
specifications specification status comment
web bluetooththe definition of 'uuid' in that specification.
... desktopmobilechromeedgefirefoxinternet exploreroperasafariandroid
webviewchrome for androidfirefox for androidopera for androidsafari on iossamsung internetuuid experimentalchrome full support 57notes full support 57notes notes macos only.
... full support 57notes disabled notes linux and versions of windows earlier than 10.disabled from version 57: this feature is behind the #enable-experimental-
web-platform-features preference (needs to be set to enabled).
...And 3 more matches
value - Web APIs
specifications specification status comment
web bluetooththe definition of 'value' in that specification.
... desktopmobilechromeedgefirefoxinternet exploreroperasafariandroid
webviewchrome for androidfirefox for androidopera for androidsafari on iossamsung internetvalue experimentalchrome full support 57notes full support 57notes notes macos only.
... full support 57notes disabled notes linux and versions of windows earlier than 10.disabled from version 57: this feature is behind the #enable-experimental-
web-platform-features preference (needs to be set to enabled).
...And 3 more matches
writeValue() - Web APIs
specifications specification status comment
web bluetooththe definition of 'writevalue()' in that specification.
... desktopmobilechromeedgefirefoxinternet exploreroperasafariandroid
webviewchrome for androidfirefox for androidopera for androidsafari on iossamsung internetwritevalue experimentalchrome full support 57notes full support 57notes notes macos only.
... full support 57notes disabled notes linux and versions of windows earlier than 10.disabled from version 57: this feature is behind the #enable-experimental-
web-platform-features preference (needs to be set to enabled).
...And 3 more matches
CloseEvent - Web APIs
a closeevent is sent to clients using
websockets when the connection is closed.
... this is delivered to the listener indicated by the
websocket object's onclose attribute.
...the following definitions are sourced from the iana
website [ref].
...And 3 more matches
EXT_color_buffer_half_float - Web APIs
the ext_color_buffer_half_float extension is part of the
webgl api and adds the ability to render to 16-bit floating-point color buffers.
...
webgl extensions are available using the
webglrenderingcontext.getextension() method.
... for more information, see also using extensions in the
webgl tutorial.
...And 3 more matches
EXT_sRGB - Web APIs
the ext_srgb extension is part of the
webgl api and adds srgb support to textures and framebuffer objects.
...
webgl extensions are available using the
webglrenderingcontext.getextension() method.
... for more information, see also using extensions in the
webgl tutorial.
...And 3 more matches
FederatedCredential - Web APIs
a federated identity provider is an entity that a
website trusts to correctly authenticate a user, and that provides an api for that purpose.
... desktopmobilechromeedgefirefoxinternet exploreroperasafariandroid
webviewchrome for androidfirefox for androidopera for androidsafari on iossamsung internetfederatedcredential experimentalchrome full support 51edge full support ≤79firefox ?
...
webview android full support 51chrome android full support 51firefox android ?
...And 3 more matches
FileList - Web APIs
it's also used for a list of files dropped into
web content when using the drag and drop api; see the datatransfer object for details on this usage.
... desktopmobilechromeedgefirefoxinternet exploreroperasafariandroid
webviewchrome for androidfirefox for androidopera for androidsafari on iossamsung internetfilelistchrome full support 1edge full support 12firefox full support 3ie full support 10opera full support ...
... 11.1safari full support 4
webview android full support 1chrome android full support 18firefox android full support 4opera android full support 11.1safari ios full support 3.2samsung internet android full support 1.0itemchrome full support yesedge full support 12firefox full support yesie ?
...And 3 more matches
FileSystemDirectoryReader.readEntries() - Web APIs
dropzone.addeventlistener("dragover", function(event) { event.preventdefault(); }, false); the event handler that kicks everything off, of course, is the handler for the drop event: dropzone.addeventlistener("drop", function(event) { let items = event.datatransfer.items; event.preventdefault(); listing.innerhtml = ""; for (let i=0; i<items.length; i++) { let item = items[i].
webkitgetasentry(); if (item) { scanfiles(item, listing); } } }, false); this fetches the list of datatransferitem objects representing the items dropped from event.datatransfer.items.
...for each one, we call its
webkitgetasentry() method to obtain a filesystementry representing the file.
... desktopmobilechromeedgefirefoxinternet exploreroperasafariandroid
webviewchrome for androidfirefox for androidopera for androidsafari on iossamsung internetreadentries deprecatednon-standardchrome full support 8edge ?
...And 3 more matches
FileSystemDirectoryReader - Web APIs
desktopmobilechromeedgefirefoxinternet exploreroperasafariandroid
webviewchrome for androidfirefox for androidopera for androidsafari on iossamsung internetfilesystemdirectoryreader deprecatednon-standardchrome full support 8alternate name full support 8alternate name alternate name uses the non-standard name: directoryreaderedge full support ...
... ≤18alternate name full support ≤18alternate name alternate name uses the non-standard name:
webkitdirectoryreaderfirefox full support 50ie no support noopera full support yesprefixed full support yesprefixed prefixed implemented with the vendor prefix:
webkitsafari full support 11.1
webview android full support ≤37alternate name full support ≤37alternate name alternate name uses the non-standard name: directoryreaderc...
...full support 50opera android no support nosafari ios full support 11.3samsung internet android full support yesprefixed full support yesprefixed prefixed implemented with the vendor prefix:
webkitreadentries deprecatednon-standardchrome full support 8edge ?
...And 3 more matches
FileSystemEntry.toURL() - Web APIs
example if you have a filesystemfileentry corresponding to an image file in a file system available to your
web site or app, you can call tourl() to get its url for use in html.
... 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.
...And 3 more matches
Force Touch events - Web APIs
do not use it on production sites facing the
web: it will not work for every user.
... events
webkitmouseforcewillbegin this event is fired before the mousedown event.
...
webkitmouseforcedown this event is fired after the mousedown event as soon as sufficient pressure has been applied for it to qualify as a "force click".
...And 3 more matches
HTMLMediaElement - Web APIs
<div id="interfacediagram" style="display: inline-block; position: relative; width: 100%; padding-bottom: 30%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 180" preserveaspectratio="xminymin meet"><a xlink:href="/docs/
web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="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="2...
...5" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/
web/api/node" target="_top"><rect x="151" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="188.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">node</text></a><polyline points="226,25 236,20 236,30 226,25" stroke="#d4dde4" fill="none"/><line x1="236" y1="25" x2="266" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/
web/api/element" target="_top"><rect x="266" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="303.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">element</te...
...xt></a><polyline points="341,25 351,20 351,30 341,25" stroke="#d4dde4" fill="none"/><line x1="351" y1="25" x2="381" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/
web/api/htmlelement" target="_top"><rect x="381" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="436" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">htmlelement</text></a><polyline points="491,25 501,20 501,30 491,25" stroke="#d4dde4" fill="none"/><line x1="501" y1="25" x2="509" y2="25" stroke="#d4dde4"/><line x1="509" y1="25" x2="509" y2="90" stroke="#d4dde4"/><line x1="509" y1="90" x2="492" y2="90" stroke="#d4dde4"/><a xlink:href="/docs/
web/api/htmlmediaelement" target="_top"><rect x="331" y=...
...And 3 more matches
HTMLSlotElement.name - Web APIs
a slot is a placeholder inside a
web component that users can fill with their own markup.
... desktopmobilechromeedgefirefoxinternet exploreroperasafariandroid
webviewchrome for androidfirefox for androidopera for androidsafari on iossamsung internetname experimentalchrome full support 53edge full support 79firefox full support 63 full support 63 no support ...
... 59 — 63disabled disabled from version 59 until version 63 (exclusive): this feature is behind the dom.
webcomponents.shadowdom.enabled preference (needs to be set to true).
...And 3 more matches
Drag Operations - Web APIs
the draggable attribute in a
web page, there are certain cases where a default drag behavior is used.
...to see this in effect, select an area of a
webpage, and then click and hold the mouse and drag the selection.
...similarly, when dragging a link on a
web page, the drag data item is the link's url.
...And 3 more matches
IDBEnvironment - Web APIs
note: this feature is available in
web workers.
... desktopmobilechromeedgefirefoxinternet exploreroperasafariandroid
webviewchrome for androidfirefox for androidopera for androidsafari on iossamsung internetidbenvironment deprecatednon-standardchrome full support 24 full support 24 no support 23 — 57prefixed prefixed implemented with the vendor prefix:
webkitedge full support ...
... full support 16 full support 16 no support 10 — 16prefixed prefixed implemented with the vendor prefix: mozie partial support 10opera full support 15safari full support 7
webview android full support yeschrome android full support 25firefox android full support 22opera android full support 14safari ios full support 8samsung internet android ...
...And 3 more matches
IDBFactory.open() - Web APIs
note: this feature is available in
web workers.
...window.indexeddb = window.indexeddb || window.mozindexeddb || window.
webkitindexeddb || window.msindexeddb; // don't use "var indexeddb = ..." if you're not in a function.
... // moreover, you may need references to some window.idb* objects: window.idbtransaction = window.idbtransaction || window.
webkitidbtransaction || window.msidbtransaction; window.idbkeyrange = window.idbkeyrange || window.
webkitidbkeyrange || window.msidbkeyrange; // (mozilla has never prefixed these objects, so we don't // need window.mozidb*) // let us open version 4 of our database var dbopenrequest = window.indexeddb.open("todolist", 4); // these two event handlers act on the database being opened // successfully, or not dbopenrequest.onerror = function(event) { note.innerhtml += '<li>error loading database.</li>'; }; dbopenrequest.onsuccess = function(event) { note.innerhtml += '<li>database initialised.</li>'; // store the result of opening the database in the db // va...
...And 3 more matches
IDBVersionChangeEvent.newVersion - Web APIs
note: this feature is available in
web workers.
...window.indexeddb = window.indexeddb || window.mozindexeddb || window.
webkitindexeddb || window.msindexeddb; // don't use "var indexeddb = ..." if you're not in a function.
... // moreover, you may need references to some window.idb* objects: window.idbtransaction = window.idbtransaction || window.
webkitidbtransaction || window.msidbtransaction; window.idbkeyrange = window.idbkeyrange || window.
webkitidbkeyrange || window.msidbkeyrange; // (mozilla has never prefixed these objects, // so we don't need window.mozidb*) // let us open version 4 of our database var dbopenrequest = window.indexeddb.open("todolist", 4); // these two event handlers act on the database being opened dbopenrequest.onerror = function(event) { note.innerhtml += '<li>error loading database.</li>'; }; dbopenrequest.onsuccess = function(event) { note.innerhtml += '<li>database initialised.</li>'; // store the result of opening the database in the db variable.
...And 3 more matches
Using the MediaStream Recording API - Web APIs
when used with navigator.mediadevices.getusermedia(), it provides an easy way to record from the user's input devices and instantly use the result in
web apps.
... a sample application:
web dictaphone to demonstrate basic usage of the mediarecorder api, we have built a
web-based dictaphone.
...it even gives you a visualization of your device's sound input, using the
web audio api.
...And 3 more matches
NavigationPreloadManager - Web APIs
desktopmobilechromeedgefirefoxinternet exploreroperasafariandroid
webviewchrome for androidfirefox for androidopera for androidsafari on iossamsung internetnavigationpreloadmanager experimentalchrome full support 62edge full support 18firefox no support nonotes no support nonotes notes i...
...
webview android full support 62chrome android full support 62firefox android no support nonotes no support nonotes notes implementation tracked in bug 1290958opera android full support 46safari ios ?
...
webview android full support 62chrome android full support 62firefox android no support nonotes no support nonotes notes implementation tracked in bug 1290958opera android full support ...
...And 3 more matches
OES_element_index_uint - Web APIs
the oes_element_index_uint extension is part of the
webgl api and adds support for gl.unsigned_int types to
webglrenderingcontext.drawelements().
...
webgl extensions are available using the
webglrenderingcontext.getextension() method.
... for more information, see also using extensions in the
webgl tutorial.
...And 3 more matches
OES_standard_derivatives - Web APIs
the oes_standard_derivatives extension is part of the
webgl api and adds the glsl derivative functions dfdx, dfdy, and fwidth.
...
webgl extensions are available using the
webglrenderingcontext.getextension() method.
... for more information, see also using extensions in the
webgl tutorial.
...And 3 more matches
Using the Payment Request API - Web APIs
in the following snippet, a merchant page performs this check, and if it returns true updates the checkout button to use paymentrequest instead of legacy
web forms.
...for example, redirect to // the legacy
web form checkout: window.location.href = '/legacy-
web-form-checkout'; }); // every click on the checkout button should use a new instance of // paymentrequest object, because paymentrequest.show() can be // called only once per instance.
...the
website does not know whether they can make // a fast payment, so pick a generic title.
...And 3 more matches
Payment Request API - Web APIs
advantages of using the payment request api with "basic-card" (card-based payments): fast purchase experience: users enter their details once into the browser and are then ready to pay for goods and services on the
web.
... accessibility: as the browser controls the input elements of the payment sheet, it can assure consistent keyboard and screen reader accessibility on every
website without developers needing to do anything.
... to request a payment, a
web page creates a paymentrequest object in response to a user action that initiates a payment, such as clicking a "purchase" button.
...And 3 more matches
PhotoCapabilities - Web APIs
desktopmobilechromeedgefirefoxinternet exploreroperasafariandroid
webviewchrome for androidfirefox for androidopera for androidsafari on iossamsung internetphotocapabilities experimentalchrome full support 59edge full support ≤79firefox ?
...
webview android full support 59chrome android full support 59firefox android ?
...
webview android full support 59chrome android full support 59firefox android ?
...And 3 more matches
RTCDTMFSender - Web APIs
the rtcdtmfsender interface provides a mechanism for transmitting dtmf codes on a
webrtc rtcpeerconnection.
... the primary purpose for
webrtc's dtmf support is to allow
webrtc-based communication clients to be connected to a public-switched telephone network (pstn) or other legacy telephone service, including extant voice over ip (voip) services.
... for that reason, dtmf can't be used between two
webrtc-based devices, because there is no mechanism provided by
webrtc for receiving dtmf codes.
...And 3 more matches
RTCIceServers.urls - Web APIs
syntax var iceserver = { urls = iceserverurl | [ url1, ..., urln ], username: "
webrtc", // optional credential: "turnpassword" // optional }; iceservers.push(iceserver); the value of this property may be specified as a single url or as an array of multiple urls.
...logging into the turn server will use the username "
webrtc" and the creative password "turnpassword".
... mypeerconnection = new rtcpeerconnection({ iceservers: [ { urls: "turn:turnserver.example.org", username: "
webrtc", credential: "turnpassword" } ] }); a single ice server with multiple urls the next example creates a new rtcpeerconnection which will use a single turn server which has multiple urls.
...And 3 more matches
RTCPeerConnection.createOffer() - Web APIs
the createoffer() method of the rtcpeerconnection interface initiates the creation of an sdp offer for the purpose of starting a new
webrtc connection to a remote peer.
... the sdp offer includes information about any mediastreamtracks already attached to the
webrtc session, codec, and options supported by the browser, and any candidates already gathered by the ice agent, for the purpose of being sent over the signaling channel to a potential peer to request a connection or to update the configuration of an existing connection.
...since all
webrtc connections are required to be secured, that results in an error.
...And 3 more matches
RTCPeerConnection.setLocalDescription() - Web APIs
if the description is omitted, the
webrtc runtime tries to automatically do the right thing.
... implicit description if you don't explicity provide a session description, the
webrtc runtime will try to handle it correctly.
... if the signaling state is one of stable, have-local-offer, or have-remote-pranswer, the
webrtc runtime automatically creates a new offer and sets that as the new local description.
...And 3 more matches
Boilerplate 1 - Web APIs
« previousnext » this example describes repeated pieces of code that will be hidden from now on, as well as defining a javascript utility function to make
webgl initialization easier.
... boilerplate code for setting up
webgl rendering context by now you are quite used to seeing the same pieces of html, css, and javascript repeated again and again.
...this would allow us to focus on the interesting pieces of code that are most relevant for learning
webgl.
...And 3 more matches
Scissor animation - Web APIs
« previousnext » a simple
webgl example in which we have some animation fun using scissoring and clearing operations.
...this is a nice demonstration of
webgl as a state machine.
...the clear color state of
webgl remains at the set value, until we change it again when a new square is created.
...And 3 more matches
Simple color animation - Web APIs
« previousnext » a very basic color animation created using
webgl, performed by clearing the drawing buffer with a different random color every second.
... color animation with clear this example provides a simple illustration of color animation with
webgl, as well as user interaction.
... this time we put the
webgl function calls within a timer event handler.
...And 3 more matches
Background audio processing using AudioWorklet - Web APIs
when the
web audio api was first introduced to browsers, it included the ability to use javascript code to create custom audio processors that would be invoked to perform real-time audio manipulations.
... the process of creating an audio processor using javascript, establishing it as an audio worklet processor, and then using that processor within a
web audio application is the topic of this article.
... it's worth noting that because audio processing can often involve substantial computation, your processor may benefit greatly from being built using
webassembly, which brings near-native or fully native performance to
web apps.
...And 3 more matches
Window.customElements - Web APIs
ver, it is usually shortened to something like the following: customelements.define('element-details', class extends htmlelement { constructor() { super(); const template = document .getelementbyid('element-details-template') .content; const shadowroot = this.attachshadow({mode: 'open'}) .appendchild(template.clonenode(true)); } } ); see our
web-components-examples repo for more usage examples.
... desktopmobilechromeedgefirefoxinternet exploreroperasafariandroid
webviewchrome for androidfirefox for androidopera for androidsafari on iossamsung internetcustomelementschrome full support 54edge full support 79firefox full support 63 full support 63 no support ...
...59 — 63disabled disabled from version 59 until version 63 (exclusive): this feature is behind the dom.
webcomponents.customelements.enabled preference (needs to be set to true).
...And 3 more matches
Window.requestFileSystem() - Web APIs
the non-standard window method requestfilesystem() method is a google chrome-specific method which lets a
web site or app gain access to a sandboxed file system for its own use.
... syntax this method is prefixed with
webkit in all browsers that implement it (that is, google chrome).
...specify window.temporary if it's acceptable for the browser to delete the files at its own discretion, such as if storage space runs low, or window.persistent if you need the files to remain in place unless the user or the
web site or app explicitly permit it.
...And 3 more matches
WritableStream - Web APIs
desktopmobilechromeedgefirefoxinternet exploreroperasafariandroid
webviewchrome for androidfirefox for androidopera for androidsafari on iossamsung internetwritablestream experimentalchrome full support 59edge full support 16firefox no support noie no support noopera full ...
...
webview android full support 59chrome android full support 59firefox android no support noopera android full support 44safari ios ?
...
webview android full support 59chrome android full support 59firefox android no support noopera android full support 44safari ios ?
...And 3 more matches
XRPermissionDescriptor.mode - Web APIs
the mode property of the xrpermissiondescriptor dictionary is a string taken from the xrsessionmode enumerated type, specifying which
web xr session mode (inline, immersive-vr, or immersive-ar) the described permissions will be used for.
... important: the immersive-ar mode is defined by the
webxr augmented reality module, which is not yet stable and should not be used other than for testing and experimentation.
...inline sessions don't require special hardware and should be avalable on any user agent offering
webxr api support.
...And 3 more matches
XRRenderState.baseLayer - Web APIs
the read-only baselayer property of the xrrenderstate interface returns the xr
webgllayer instance that is the source of bitmap images and a description of how the image is to be rendered in the device.
... syntax var xr
webgllayer = xrrenderstate.baselayer; value a xr
webgllayer object which is used as the source of the world's contents when rendering each frame of the scene.
... see the examples below to see how to use updaterenderstate() to set the current xr
webgllayer used for rendering the scene.
...And 3 more matches
XRViewerPose - Web APIs
the
webxr device api interface xrviewerpose represents the pose (the position and orientation) of a viewer's point of view on the scene.
... usage notes the xrviewerpose object is used to describe the state of a viewer of a
webxr scene as it's tracked by the user's xr hardware.
...by calling viewport() on the
webgl context, specifying the xrview as input, you can get the viewport to use when rendering in order to draw the frame for that eye into the correct part of the drawing surface.
...And 3 more matches
Web applications and ARIA FAQ - Accessibility
wai-aria is the accessible rich internet applications specification from the
web accessibility initiative at the w3c.
... aria provides a means to make
web applications and widgets more accessible to a diverse range of users, including those who use assistive technologies such as screen readers or magnifiers.
... for more information about how to create accessible widgets with aria, see the overview of accessible
web applications and widgets.
...And 3 more matches
-webkit-line-clamp - CSS: Cascading Style Sheets
the -
webkit-line-clamp css property allows limiting of the contents of a block container to the specified number of lines.
... it only works in combination with the display property set to -
webkit-box or -
webkit-inline-box and the -
webkit-box-orient property set to vertical.
... note: this property was originally implemented in
webkit and has some issues.
...And 3 more matches
-webkit-text-stroke - CSS: Cascading Style Sheets
the -
webkit-text-stroke css property specifies the width and color of strokes for text characters.
... this is a shorthand property for the longhand properties -
webkit-text-stroke-width and -
webkit-text-stroke-color.
... /* width and color values */ -
webkit-text-stroke: 4px navy; text-stroke: 4px navy; /* global values */ -
webkit-text-stroke: inherit; -
webkit-text-stroke: initial; -
webkit-text-stroke: unset; text-stroke: inherit; text-stroke: initial; text-stroke: unset; constituent properties this property is a shorthand for the following css properties: -
webkit-stroke-color -
webkit-stroke-width syntax values <length> the width of the stroke.
...And 3 more matches
-webkit-transform-2d - CSS: Cascading Style Sheets
the -
webkit-transform-2d boolean css media feature is a chrome extension whose value is true if vendor-prefixed css 2d transforms are supported.
... syntax -
webkit-transform-2d is a boolean css media feature whose value is true if the browser supports -
webkit prefixed css 2d transforms.
... values true the browser supports the 2d css transforms with the -
webkit prefix.
...And 3 more matches
-webkit-transform-3d - CSS: Cascading Style Sheets
the -
webkit-transform-3d boolean css media feature is a chrome extension whose value is true if vendor-prefixed css 3d transforms are supported.
... note: this media feature is only supported by
webkit and blink.
... syntax -
webkit-transform-3d is a boolean css media feature whose value is true if the browser supports -
webkit prefixed css 3d transforms.
...And 3 more matches
Live streaming web audio and video - Developer guides
key differences between streamed and static media in this case, we are using static media to describe media that is represented by a file, whether it be an mp3 or
webm file.
... note: you can find a guide to encoding hls and mpeg-dash for use on the
web at setting up adaptive streaming media sources.
... note: you can also use
webm with the mpeg dash adaptive streaming system.
...And 3 more matches
Introduction to Web development - Developer guides
whether you're just getting started with
web development, or are just expanding your horizons into new realms of
web awesomeness, the links here should help you get started.
... basic structure of a
web page — the doctype and document 'tree' fundamental html elements — structural, head, list, form elements and more, explained by category.
... the w3c introduction to styling with css — a brief guide to styling
web pages for beginners.
...And 3 more matches
WebAssembly.CompileError() constructor - JavaScript
the
webassembly.compileerror() constructor creates a new
webassembly compileerror object, which indicates an error during
webassembly decoding or validation.
... syntax new
webassembly.compileerror(message, filename, linenumber) parameters message optional human-readable description of the error.
... examples creating a new compileerror instance the following snippet creates a new compileerror instance, and logs its details to the console: try { throw new
webassembly.compileerror('hello', 'somefile', 10); } catch (e) { console.log(e instanceof compileerror); // true console.log(e.message); // "hello" console.log(e.name); // "compileerror" console.log(e.filename); // "somefile" console.log(e.linenumber); // 10 console.log(e.columnnumber); // 0 console.log(e.stack); // returns the location where the code was run } s...
...And 3 more matches
WebAssembly.LinkError() constructor - JavaScript
the
webassembly.linkerror() constructor creates a new
webassembly linkerror object, which indicates an error during module instantiation (besides traps from the start function).
... syntax new
webassembly.linkerror(message, filename, linenumber) parameters message optional human-readable description of the error.
... examples creating a new linkerror instance the following snippet creates a new linkerror instance, and logs its details to the console: try { throw new
webassembly.linkerror('hello', 'somefile', 10); } catch (e) { console.log(e instanceof linkerror); // true console.log(e.message); // "hello" console.log(e.name); // "linkerror" console.log(e.filename); // "somefile" console.log(e.linenumber); // 10 console.log(e.columnnumber); // 0 console.log(e.stack); // returns the location where the code was run } specifications ...
...And 3 more matches
WebAssembly.Module.imports() - JavaScript
the
webassembly.imports() function returns an array containing descriptions of all the declared imports of the given module.
... syntax
webassembly.module.imports(module); parameters module a
webassembly.module object.
... exceptions if module is not a
webassembly.module object instance, a typeerror is thrown.
...And 3 more matches
WebAssembly.RuntimeError() constructor - JavaScript
the
webassembly.runtimeerror() constructor creates a new
webassembly runtimeerror object — the type that is thrown whenever
webassembly specifies a trap.
... syntax new
webassembly.runtimeerror(message, filename, linenumber) parameters message optional human-readable description of the error.
... examples creating a new runtimeerror instance the following snippet creates a new runtimeerror instance, and logs its details to the console: try { throw new
webassembly.runtimeerror('hello', 'somefile', 10); } catch (e) { console.log(e instanceof runtimeerror); // true console.log(e.message); // "hello" console.log(e.name); // "runtimeerror" console.log(e.filename); // "somefile" console.log(e.linenumber); // 10 console.log(e.columnnumber); // 0 console.log(e.stack); // returns the location where the code was run } s...
...And 3 more matches
WebAssembly.validate() - JavaScript
the
webassembly.validate() function validates a given typed array of
webassembly binary code, returning whether the bytes form a valid wasm module (true) or not (false).
... syntax
webassembly.validate(buffersource); parameters buffersource a typed array or arraybuffer containing
webassembly binary code to be validated.
... fetch('simple.wasm').then(response => response.arraybuffer() ).then(function(bytes) { var valid =
webassembly.validate(bytes); console.log("the given bytes are " + (valid ?
...And 3 more matches
Graphic design for responsive sites - Progressive web apps (PWAs)
in 1996, many people involved in building the
web would have laughed at you if you had told them that less than 20 years in the future we would be developing
web sites that worked well on mobile phones, tablets, tvs, even cars and home lighting.
...most hi res devices apply a default zoom factor to the whole
web page so that the content is a bit more legible, but the downside of this is that the images in question start to look pixellated and ugly because they have been zoomed in.
... using fonts for icons another technique to consider is using
web fonts for icons.
...And 3 more matches
Using templates and slots - Web Components
this article explains how you can use the <template> and <slot> elements to create a flexible template that can then be used to populate the shadow dom of a
web component.
... the truth about templates when you have to reuse the same markup structures repeatedly on a
web page, it makes sense to use some kind of a template rather than repeating the same structure over and over again.
... using templates with
web components templates are useful on their own, but they work even better with
web components.
...And 3 more matches
Advanced styling effects - Learn web development
-
webkit-background-clip: text another feature we thought we'd mention briefly is the text value for background-clip.
... when used along with the proprietary -
webkit-text-fill-color: transparent; feature, this allows you to clip background images to the shape of the element's text, making for some nice effects.
...when used in this context, both of the properties would require a -
webkit- vendor prefix, even for non-
webkit/chrome-based browsers: .text-clip { -
webkit-background-clip: text; -
webkit-text-fill-color: transparent; } so why have other browsers implemented a -
webkit- prefix?
...And 2 more matches
Organizing your CSS - Learn web development
the
web community has also developed various tools and approaches that can help you to manage larger css projects.
...it's a pattern we see all over
websites for comments, listings, and so on.
... bem is widely used in larger
web projects and many people write their css in this way.
...And 2 more matches
CSS first steps - Learn web development
css (cascading style sheets) is used to style and lay out
web pages — for example, to alter the font, color, size, and spacing of your content, split it into multiple columns, or add animations and other decorative features.
... looking to become a front-end
web developer?
... get started prerequisites before starting this module, you should have: basic familiarity with using computers, and using the
web passively (i.e.
...And 2 more matches
Styling links - Learn web development
we also use background-size to specify the size we want the background image to be shown at — it is useful to have a larger icon and then resize it like this as needed for responsive
web design purposes.
... note: don't worry if you are not familiar with backgrounds and responsive
web design yet; these are explained in other places.
... in addition, links are quite commonly styled to look and behave like buttons in certain circumstances — a
website navigation menu is usually marked up as a list containing links, and this can be easily styled to look like a set of control buttons or tabs that provide the user with access to other parts of the site.
...And 2 more matches
How do I use GitHub Pages? - Learn web development
github has a very useful feature called github pages, which allows you to publish
website code live on the
web.
... preparing your code for upload you can store any code you like in a github repository, but to use the github pages feature to full effect, your code should be structured as a typical
website, e.g.
...to do this: point the command line to your test-site directory (or whatever you called the directory containing your
website).
...And 2 more matches
The HTML5 input types - Learn web development
because html form control appearance may be quite different from a designer's specifications,
web developers sometimes build their own custom form controls.
...read
website security for an idea of what could happen; implementing server-side validation is somewhat beyond the scope of this module, but you should bear it in mind.
... another feature worth noting is that the values of a search field can be automatically saved and re-used to offer auto-completion across multiple pages of the same
website; this tends to happen automatically in most modern browsers.
...And 2 more matches
Introducing asynchronous JavaScript - Learn web development
related to blocking), many
web api features now use asynchronous code to run, especially those that access or fetch some kind of resource from an external device, such as fetching a file from the network, accessing a database and returning data from it, accessing a video stream from a
web cam, or broadcasting the display to a vr headset.
... promises promises are the new style of async code that you'll see used in modern
web apis.
... note: for security reasons, you can't fetch() files from your local filesystem (or run other such operations locally); to run the above example locally you'll have to run the example through a local
webserver.
...And 2 more matches
Making decisions in your code — conditionals - Learn web development
<label for="theme">select theme: </label> <select id="theme"> <option value="white">white</option> <option value="black">black</option> </select> <h1>this is my
website</h1> const select = document.queryselector('select'); const html = document.queryselector('html'); document.body.style.padding = '10px'; function update(bgcolor, textcolor) { html.style.backgroundcolor = bgcolor; html.style.color = textcolor; } select.onchange = function() { ( select.value === 'black' ) ?
... update('black','white') : update('white','black'); } here we've got a <select> element to choose a theme (black or white), plus a simple <h1> to display a
website title.
...the
website's background color is set to the first provided color, and its text color is set to the second provided color.
...And 2 more matches
HTML performance features - Learn web development
complications can occur when, for example, the file size of a <video> embed is too large, or when a
webpage is not optimized for mobile devices.
... this module intends to walk you through the key html performance features that can drastically improve the quality of your
webpage.
... prerequisites: basic computer literacy, basic software installed, and basic knowledge of client-side
web technologies.
...And 2 more matches
Perceived performance - Learn web development
previous overview: performance next perceived performance is how fast a
website seems to the user.
... prerequisites: basic computer literacy, basic software installed, and basic knowledge of client-side
web technologies.
... objective: to gain basic familiarity of user perception of
web performance.
...And 2 more matches
Styling Vue components with CSS - Learn web development
files in this folder get processed by
webpack.
... /* resets */ *, *::before, *::after { box-sizing: border-box; } *:focus { outline: 3px dashed #228bec; } html { font: 62.5% / 1.15 sans-serif; } h1, h2 { margin-bottom: 0; } ul { list-style: none; padding: 0; } button { border: none; margin: 0; padding: 0; width: auto; overflow: visible; background: transparent; color: inherit; font: inherit; line-height: normal; -
webkit-font-smoothing: inherit; -moz-osx-font-smoothing: inherit; -
webkit-appearance: none; } button::-moz-focus-inner { border: 0; } button, input, optgroup, select, textarea { font-family: inherit; font-size: 100%; line-height: 1.15; margin: 0; } button, input { /* 1 */ overflow: visible; } input[type="text"] { border-radius: 0; } body { width: 100%; max-width: 68rem; marg...
...in: 0 auto; font: 1.6rem/1.25 "helvetica neue", helvetica, arial, sans-serif; background-color: #f5f5f5; color: #4d4d4d; -moz-osx-font-smoothing: grayscale; -
webkit-font-smoothing: antialiased; } @media screen and (min-width: 620px) { body { font-size: 1.9rem; line-height: 1.31579; } } /*end resets*/ next, in your src/main.js file, import the reset.css file like so: import './assets/reset.css'; this will cause the file to get picked up during the build step and automatically added to our site.
...And 2 more matches
Understanding client-side JavaScript frameworks - Learn web development
javascript frameworks are an essential part of modern front-end
web development, providing developers with tried and tested tools for building scalable, interactive
web applications.
...we want you to go forward and learn about frameworks in a pragmatic way that doesn't forget about
web platform fundamental best practices such as accessibility.
... get started now, with "introduction to client-side frameworks" prerequisites you should really learn the basics of the core
web languages first before attempting to move on to learning client-side frameworks — html, css, and especially javascript.
...And 2 more matches
Git and GitHub - Learn web development
the most popular vcs (at least among
web developers) is git, along with github, a site that provides hosting for your repositories and several tools for working with them.
...git is an example of a vcs, and github is a
web site + infrastructure that provides a git server plus a number of really useful tools for working with git repositories individually or in teams, such as reporting issues with the code, reviewing tools, project management features such as assigning tasks and task statuses, and more.
... looking to become a front-end
web developer?
...And 2 more matches
A Web PKI x509 certificate primer
three versions of the x509 standard have been defined for
web-pki.
... in this document we will be referring to the current standard in use for
web pki: x509 v3, which is described in detail in rfc 5280.
... extensions while rfc 5280 defines 16 extensions for
webpki in this document we will be describing the six extensions we considered critical for understanding.
...And 2 more matches
nsIWebBrowserChrome
embedding/browser/
webbrowser/nsi
webbrowserchrome.idlscriptable corresponds to the top-level, outermost window containing an embedded gecko
web browser.
...
webbrowser nsi
webbrowser the currently loaded
webbrowser.
... the browser chrome may be told to set the
webbrowser object to a new object by setting this attribute.
...And 2 more matches
nsIWebBrowserChrome2
embedding/browser/
webbrowser/nsi
webbrowserchrome2.idlscriptable an extension to nsi
webbrowserchrome.
... 1.0 66 introduced gecko 1.9 inherits from: nsi
webbrowserchrome last changed in gecko 1.9 (firefox 3) method overview void setstatuswithcontext(in unsigned long statustype, in astring statustext, in nsisupports statuscontext); methods setstatuswithcontext() called when the status text in the chrome needs to be updated.
... this method may be called instead of nsi
webbrowserchrome.setstatus().
...And 2 more matches
nsIWebBrowserFindInFrames
embedding/components/find/public/nsi
webbrowserfind.idlscriptable controls how find behaves when multiple frames or iframes are present.
... inherits from: nsisupports last changed in gecko 1.7 get an instance by doing a queryinterface from nsi
webbrowserfind.
...setting nsi
webbrowserfind.searchframes to true sets this to true.
...And 2 more matches
ANGLE_instanced_arrays - Web APIs
the angle_instanced_arrays extension is part of the
webgl api and allows to draw the same object, or groups of similar objects multiple times, if they share the same vertex data, primitive count and type.
...
webgl extensions are available using the
webglrenderingcontext.getextension() method.
... for more information, see also using extensions in the
webgl tutorial.
...And 2 more matches
AnalyserNode - Web APIs
eritance this interface inherits from the following parent interfaces: <div id="interfacediagram" style="display: inline-block; position: relative; width: 100%; padding-bottom: 11.666666666666666%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 70" preserveaspectratio="xminymin meet"><a xlink:href="/docs/
web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="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="2...
...5" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/
web/api/audionode" target="_top"><rect x="151" y="1" width="90" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="196" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">audionode</text></a><polyline points="241,25 251,20 251,30 241,25" stroke="#d4dde4" fill="none"/><line x1="251" y1="25" x2="281" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/
web/api/analysernode" target="_top"><rect x="281" y="1" width="120" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="341" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="midd...
... examples note: see the guide visualizations with
web audio api for more information on creating audio visualizations.
...And 2 more matches
AudioBufferSourceNode - Web APIs
<div id="interfacediagram" style="display: inline-block; position: relative; width: 100%; padding-bottom: 23.333333333333332%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 140" preserveaspectratio="xminymin meet"><a xlink:href="/docs/
web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="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="2...
...5" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/
web/api/audionode" target="_top"><rect x="151" y="1" width="90" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="196" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">audionode</text></a><polyline points="241,25 251,20 251,30 241,25" stroke="#d4dde4" fill="none"/><line x1="251" y1="25" x2="281" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/
web/api/audioscheduledsourcenode" target="_top"><rect x="281" y="1" width="240" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="401" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-basel...
...ine="middle">audioscheduledsourcenode</text></a><polyline points="521,25 531,20 531,30 521,25" stroke="#d4dde4" fill="none"/><line x1="531" y1="25" x2="561" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/
web/api/audiobuffersourcenode" target="_top"><rect x="561" y="1" width="210" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="666" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">audiobuffersourcenode</text></a></svg></div> a:hover text { fill: #0095dd; pointer-events: all;} an audiobuffersourcenode has no inputs and exactly one output, which has the same number of channels as the audiobuffer indicated by its buffer property.
...And 2 more matches
BaseAudioContext - Web APIs
the baseaudiocontext interface of the
web audio api acts as a base definition for online and offline audio-processing graphs, as represented by audiocontext and offlineaudiocontext respectively.
... <div id="interfacediagram" style="display: inline-block; position: relative; width: 100%; padding-bottom: 11.666666666666666%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 70" preserveaspectratio="xminymin meet"><a xlink:href="/docs/
web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="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="2...
...5" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/
web/api/baseaudiocontext" target="_top"><rect x="151" y="1" width="160" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="231" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">baseaudiocontext</text></a></svg></div> a:hover text { fill: #0095dd; pointer-events: all;} properties baseaudiocontext.audioworklet read only secure context returns the audioworklet object, which can be used to create and manage audionodes in which javascript code implementing the audioworkletprocessor interface are run in the background to process audio data.
...And 2 more matches
BeforeInstallPromptEvent - Web APIs
the beforeinstallpromptevent is fired at the window.onbeforeinstallprompt handler before a user is prompted to "install" a
web site to a home screen on mobile.
... <div id="interfacediagram" style="display: inline-block; position: relative; width: 100%; padding-bottom: 8.571428571428571%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-20 0 700 60" preserveaspectratio="xminymin meet"><a xlink:href="/docs/
web/api/event" target="_top"><rect x="1" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="38.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">event</text></a><polyline points="76,25 86,20 86,30 76,25" stroke="#d4dde4" fill="none"/><line x1="86" y1="25" x2="116" y2="25" stroke="#d4dde4"/...
...><a xlink:href="/docs/
web/api/beforeinstallpromptevent" target="_top"><rect x="116" y="1" width="240" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="236" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">beforeinstallpromptevent</text></a></svg></div> a:hover text { fill: #0095dd; pointer-events: all;} constructor beforeinstallpromptevent() creates a new beforeinstallpromptevent.
...And 2 more matches
Canvas API - Web APIs
the
webgl api, which also uses the <canvas> element, draws hardware-accelerated 2d and 3d graphics.
...ent.getelementbyid('canvas'); const ctx = canvas.getcontext('2d'); ctx.fillstyle = 'green'; ctx.fillrect(10, 10, 150, 100); result reference htmlcanvaselement canvasrenderingcontext2d canvasgradient canvasimagesource canvaspattern imagebitmap imagedata renderingcontext textmetrics offscreencanvas path2d imagebitmaprenderingcontext note: the interfaces related to the
webglrenderingcontext are referenced under
webgl.
... html5 canvas deep dive a hands-on, book-length introduction to the canvas api and
webgl.
...And 2 more matches
Credential Management API - Web APIs
the credential management api lets a
website store and retrieve user, federated, and public key credentials.
... credential management concepts and usage this api lets
websites interact with a user agent’s password system so that
websites can deal in a uniform way with site credentials and user agents can provide better assistance with the management of their credentials.
...to address these problems, the credential management api provides ways for a
website to store and retrieve different types of credentials.
...And 2 more matches
Document - Web APIs
the document interface represents any
web page loaded in the browser and serves as an entry point into the
web page's content, which is the dom tree.
... <div id="interfacediagram" style="display: inline-block; position: relative; width: 100%; padding-bottom: 11.666666666666666%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 70" preserveaspectratio="xminymin meet"><a xlink:href="/docs/
web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="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="2...
...5" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/
web/api/node" target="_top"><rect x="151" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="188.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">node</text></a><polyline points="226,25 236,20 236,30 226,25" stroke="#d4dde4" fill="none"/><line x1="236" y1="25" x2="266" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/
web/api/document" target="_top"><rect x="266" y="1" width="80" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="306" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">document<...
...And 2 more matches
EXT_frag_depth - Web APIs
the ext_frag_depth extension is part of the
webgl api and enables to set a depth value of a fragment from within the fragment shader.
...
webgl extensions are available using the
webglrenderingcontext.getextension() method.
... for more information, see also using extensions in the
webgl tutorial.
...And 2 more matches
EXT_shader_texture_lod - Web APIs
the ext_shader_texture_lod extension is part of the
webgl api and adds additional texture functions to the opengl es shading language which provide the shader writer with explicit control of lod (level of detail).
...
webgl extensions are available using the
webglrenderingcontext.getextension() method.
... for more information, see also using extensions in the
webgl tutorial.
...And 2 more matches
EXT_texture_filter_anisotropic - Web APIs
the ext_texture_filter_anisotropic extension is part of the
webgl api and exposes two constants for anisotropic filtering (af).
...
webgl extensions are available using the
webglrenderingcontext.getextension() method.
... for more information, see also using extensions in the
webgl tutorial.
...And 2 more matches
FileSystemDirectoryEntry.removeRecursively() - Web APIs
possible reasons include: the directory and/or its contents may not be safe to access from a
web application.
... desktopmobilechromeedgefirefoxinternet exploreroperasafariandroid
webviewchrome for androidfirefox for androidopera for androidsafari on iossamsung internetremoverecursively deprecatednon-standardchrome full support 8edge full support 79firefox no support 50 — 52notes no support 50 — 52notes notes while the removerecursi...
...vely() method existed, it immediately called the error callback with ns_error_dom_security_err.ie no support noopera no support nosafari no support no
webview android full support ≤37chrome android full support 18firefox android no support 50 — 52notes no support 50 — 52notes notes while the removerecursively() method existed, it immediately called the error callback with ns_error_dom_security_err.opera android no support nosafari ios no support ...
...And 2 more matches
FileSystemSync - Web APIs
desktopmobilechromeedgefirefoxinternet exploreroperasafariandroid
webviewchrome for androidfirefox for androidopera for androidsafari on iossamsung internetfilesystemsync non-standardchrome full support 13prefixed full support 13prefixed prefixed implemented with the vendor prefix:
webkitedge full support ≤79prefixed ...
... full support ≤79prefixed prefixed implemented with the vendor prefix:
webkitfirefox no support noie no support noopera full support 15prefixed full support 15prefixed prefixed implemented with the vendor prefix:
webkitsafari full support 6prefixed full support 6prefixed prefixed implemented with the vendor prefix:
webkit
webview android full support ≤37prefixed full support ≤37prefixed prefixed imp...
...lemented with the vendor prefix:
webkitchrome android full support 18prefixed full support 18prefixed prefixed implemented with the vendor prefix:
webkitfirefox android no support noopera android full support 14prefixed full support 14prefixed prefixed implemented with the vendor prefix:
webkitsafari ios full support 6prefixed full support 6prefixed prefixed implemented with the vendor prefix:
webkitsamsung internet android full support ...
...And 2 more matches
File and Directory Entries API support in Firefox - Web APIs
do not use it on production sites facing the
web: it will not work for every user.
...over time, a number of popular sites and
web applications came to use it, often without providing any means of falling back to standard apis or even checking to be sure the api is available before using it.
... this has caused a number of popular
web sites not to work properly on browsers other than chrome.
...And 2 more matches
File and Directory Entries API - Web APIs
the file and directory entries api simulates a local file system that
web apps can navigate within and access files in.
...only for accessing files which are selected by the user in a file <input> element (see htmlinputelement as well) or when a file or directory is provided to the
web site or app using drag and drop.
... getting access to a file system there are two ways to get access to file systems defined in the current specification draft: when handling a drop event for drag and drop, you can call datatransferitem.
webkitgetasentry() to get the filesystementry for a dropped item.
...And 2 more matches
HTMLInputElement - Web APIs
<div id="interfacediagram" style="display: inline-block; position: relative; width: 100%; padding-bottom: 20%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 120" preserveaspectratio="xminymin meet"><a xlink:href="/docs/
web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="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="2...
...5" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/
web/api/node" target="_top"><rect x="151" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="188.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">node</text></a><polyline points="226,25 236,20 236,30 226,25" stroke="#d4dde4" fill="none"/><line x1="236" y1="25" x2="266" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/
web/api/element" target="_top"><rect x="266" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="303.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">element</te...
...xt></a><polyline points="341,25 351,20 351,30 341,25" stroke="#d4dde4" fill="none"/><line x1="351" y1="25" x2="381" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/
web/api/htmlelement" target="_top"><rect x="381" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="436" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">htmlelement</text></a><polyline points="491,25 501,20 501,30 491,25" stroke="#d4dde4" fill="none"/><line x1="501" y1="25" x2="509" y2="25" stroke="#d4dde4"/><line x1="509" y1="25" x2="509" y2="90" stroke="#d4dde4"/><line x1="509" y1="90" x2="492" y2="90" stroke="#d4dde4"/><a xlink:href="/docs/
web/api/htmlinputelement" target="_top"><rect x="331" y=...
...And 2 more matches
HTMLMediaElement.onencrypted - Web APIs
<div id="interfacediagram" style="display: inline-block; position: relative; width: 100%; padding-bottom: 8.571428571428571%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-20 0 700 60" preserveaspectratio="xminymin meet"><a xlink:href="/docs/
web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="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="2...
...5" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/
web/api/node" target="_top"><rect x="151" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="188.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">node</text></a><polyline points="226,25 236,20 236,30 226,25" stroke="#d4dde4" fill="none"/><line x1="236" y1="25" x2="266" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/
web/api/element" target="_top"><rect x="266" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="303.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">element</te...
...xt></a><polyline points="341,25 351,20 351,30 341,25" stroke="#d4dde4" fill="none"/><line x1="351" y1="25" x2="381" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/
web/api/htmlelement" target="_top"><rect x="381" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="436" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">htmlelement</text></a><polyline points="491,25 501,20 501,30 491,25" stroke="#d4dde4" fill="none"/><line x1="501" y1="25" x2="509" y2="25" stroke="#d4dde4"/><line x1="509" y1="25" x2="509" y2="90" stroke="#d4dde4"/><line x1="509" y1="90" x2="492" y2="90" stroke="#d4dde4"/><a xlink:href="/docs/
web/api/htmlmediaelement" target="_top"><rect x="331" y=...
...And 2 more matches
HTMLMediaElement.onwaitingforkey - Web APIs
<div id="interfacediagram" style="display: inline-block; position: relative; width: 100%; padding-bottom: 8.571428571428571%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-20 0 700 60" preserveaspectratio="xminymin meet"><a xlink:href="/docs/
web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="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="2...
...5" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/
web/api/node" target="_top"><rect x="151" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="188.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">node</text></a><polyline points="226,25 236,20 236,30 226,25" stroke="#d4dde4" fill="none"/><line x1="236" y1="25" x2="266" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/
web/api/element" target="_top"><rect x="266" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="303.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">element</te...
...xt></a><polyline points="341,25 351,20 351,30 341,25" stroke="#d4dde4" fill="none"/><line x1="351" y1="25" x2="381" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/
web/api/htmlelement" target="_top"><rect x="381" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="436" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">htmlelement</text></a><polyline points="491,25 501,20 501,30 491,25" stroke="#d4dde4" fill="none"/><line x1="501" y1="25" x2="509" y2="25" stroke="#d4dde4"/><line x1="509" y1="25" x2="509" y2="90" stroke="#d4dde4"/><line x1="509" y1="90" x2="492" y2="90" stroke="#d4dde4"/><a xlink:href="/docs/
web/api/htmlmediaelement" target="_top"><rect x="331" y=...
...And 2 more matches
IDBIndex.name - Web APIs
note: this feature is available in
web workers.
... desktopmobilechromeedgefirefoxinternet exploreroperasafariandroid
webviewchrome for androidfirefox for androidopera for androidsafari on iossamsung internetnamechrome full support 24 full support 24 no support 23 — 24prefixed prefixed implemented with the vendor prefix:
webkitedge full support 12firefox ...
... full support 16 full support 16 no support 10 — 16prefixed prefixed implemented with the vendor prefix: mozie partial support 10opera full support 15safari full support 7
webview android full support yes full support yes no support ?
...And 2 more matches
IDBObjectStore.name - Web APIs
note: this feature is available in
web workers.
... desktopmobilechromeedgefirefoxinternet exploreroperasafariandroid
webviewchrome for androidfirefox for androidopera for androidsafari on iossamsung internetnamechrome full support 24 full support 24 no support 23 — 57prefixed prefixed implemented with the vendor prefix:
webkitedge full support 12firefox ...
... full support 16 full support 16 no support 10 — 16prefixed prefixed implemented with the vendor prefix: mozie partial support 10opera full support 15safari full support 7
webview android full support yes full support yes no support ?
...And 2 more matches
IDBRequest.error - Web APIs
note: this feature is available in
web workers.
... desktopmobilechromeedgefirefoxinternet exploreroperasafariandroid
webviewchrome for androidfirefox for androidopera for androidsafari on iossamsung interneterrorchrome full support 24 full support 24 no support 23 — 57prefixed prefixed implemented with the vendor prefix:
webkitedge full support 12firefox ...
... full support 16 full support 16 no support 10 — 16prefixed prefixed implemented with the vendor prefix: mozie partial support 10opera full support 15safari full support 7
webview android full support yes full support yes no support ?
...And 2 more matches
IDBTransaction.error - Web APIs
note: this feature is available in
web workers.
... desktopmobilechromeedgefirefoxinternet exploreroperasafariandroid
webviewchrome for androidfirefox for androidopera for androidsafari on iossamsung interneterrorchrome full support 24 full support 24 no support 23 — 57prefixed prefixed implemented with the vendor prefix:
webkitedge full support 12firefox ...
... full support 16 full support 16 no support 10 — 16prefixed prefixed implemented with the vendor prefix: mozie partial support 10opera full support 15safari full support 7
webview android full support yes full support yes no support ?
...And 2 more matches
IDBVersionChangeRequest.setVersion() - Web APIs
for older
webkit browsers, call this method before creating or deleting an object store.
... desktopmobilechromeedgefirefoxinternet exploreroperasafariandroid
webviewchrome for androidfirefox for androidopera for androidsafari on iossamsung internetsetversion deprecatednon-standardchrome no support noedge no support nofirefox no support noie no support noopera no ...
...support nosafari no support no
webview android no support nochrome android no support nofirefox android no support noopera android no support nosafari ios no support nosamsung internet android no support nolegend no support no supportnon-standard.
...And 2 more matches
IDBVersionChangeRequest - Web APIs
desktopmobilechromeedgefirefoxinternet exploreroperasafariandroid
webviewchrome for androidfirefox for androidopera for androidsafari on iossamsung internetidbversionchangerequest deprecatednon-standardchrome no support 12 — 23prefixed no support 12 — 23prefixed prefixed implemented with the vendor prefix:
webkitedge ?
... firefox no support noie no support noopera no support nosafari no support no
webview android no support nochrome android no support nofirefox android no support noopera android no support nosafari ios no support nosamsung internet android no support nosetversion deprecatednon-standardchrome no support ...
... noedge no support nofirefox no support noie no support noopera no support nosafari no support no
webview android no support nochrome android no support nofirefox android no support noopera android no support nosafari ios no support nosamsung internet android no support nolegend ...
...And 2 more matches
IIRFilterNode() - Web APIs
the iirfilternode() constructor of the
web audio api creates a new iirfilternode object which an audionode processor which implements a general infinite impulse response filter.
... unlike other nodes in the
web audio api, the options passed into the iir filter upon creation are not optional.
... examples let feedforward = [0.00020298, 0.0004059599, 0.00020298]; let feedbackward = [1.0126964558, -1.9991880801, 0.9873035442]; const audiocontext = window.audiocontext || window.
webkitaudiocontext; const audioctx = new audiocontext(); const iirfilter = new iirfilternode(audioctx, { feedforward: feedforward, feedback: feedbackward }); specifications specification status comment
web audio apithe definition of 'iirfilternode()' in that specification.
...And 2 more matches
Intersection Observer API - Web APIs
as the
web has matured, the need for this kind of information has grown.
... implementing "infinite scrolling"
web sites, where more and more content is loaded and rendered as you scroll, so that the user doesn't have to flip through pages.
... consider a
web page that uses infinite scrolling.
...And 2 more matches
LocalFileSystemSync - Web APIs
it is intended to be used with
webworkers.
... basic concepts you can request access to a sandboxed file system by requesting localfilesystemsync object from within a
web worker.
...calling window.requestfilesystemsync() for creates new storage for your
web app.
...And 2 more matches
Media Session API - Web APIs
it does this by providing metadata for display by the user agent of the media your
web app is playing, and allows you to create event handlers, to define your own behaviors for a user-agent playback controls.
... media session concepts and usage the mediametadata interface lets a
web site provide rich metadata to the platform ui for media that is playing.
...interaction with these elements even trigger handlers in the
web page, playing the media.
...And 2 more matches
Capabilities, constraints, and settings - Web APIs
historically, writing scripts for the
web that work intimately with
web apis has had a well-known challenge: often, your code needs to know whether or not an api exists and if so, what its limitations are on the user agent it's running on.
... the twin concepts of constraints and capabilities let the browser and
web site or app exchange information about what constrainable properties the browser's implementation supports and what values it supports for each one.
...the constraint exerciser lets you experiment with the results of different constraint sets being applied to the audio and video tracks coming from the computer's a/v input devices (such as its
webcam and microphone).
...And 2 more matches
Navigator.registerProtocolHandler() - Web APIs
the navigator method registerprotocolhandler() lets
web sites register their ability to open or handle particular url schemes (aka protocols).
... for example, this api lets
webmail sites open mailto: urls, or voip sites open tel: urls.
... a custom scheme may be registered as long as: the custom scheme's name begins with
web+ the custom scheme's name includes at least 1 letter after the
web+ prefix the custom scheme has only lowercase ascii letters in its name.
...And 2 more matches
Navigator.xr - Web APIs
the read-only xr property provided by the navigator or workernavigator interface returns an xr object which can be used to access the
webxr device api.
... syntax const xr = navigator.xr value the xr object used to interface with the
webxr device api in the current context.
...if the xr property exists and is non-null, you can use it to access the
webxr device api.
...And 2 more matches
NotificationEvent - Web APIs
desktopmobilechromeedgefirefoxinternet exploreroperasafariandroid
webviewchrome for androidfirefox for androidopera for androidsafari on iossamsung internetnotificationevent experimentalchrome full support 42edge full support ≤18firefox full support 44notes full support 44notes notes e...
...
webview android no support nochrome android full support 42firefox android full support 44opera android full support 37safari ios ?
...
webview android no support nochrome android full support 42firefox android full support 44opera android full support 37safari ios ?
...And 2 more matches
OES_fbo_render_mipmap - Web APIs
the oes_fbo_render_mipmap extension is part of the
webgl api and makes it possible to attach any level of a texture to a framebuffer object.
...
webgl extensions are available using the
webglrenderingcontext.getextension() method.
... for more information, see also using extensions in the
webgl tutorial.
...And 2 more matches
OES_texture_float_linear - Web APIs
the oes_texture_float_linear extension is part of the
webgl api and allows linear filtering with floating-point pixel types for textures.
...
webgl extensions are available using the
webglrenderingcontext.getextension() method.
... for more information, see also using extensions in the
webgl tutorial.
...And 2 more matches
OES_texture_half_float_linear - Web APIs
the oes_texture_half_float_linear extension is part of the
webgl api and allows linear filtering with half floating-point pixel types for textures.
...
webgl extensions are available using the
webglrenderingcontext.getextension() method.
... for more information, see also using extensions in the
webgl tutorial.
...And 2 more matches
PerformanceLongTaskTiming - Web APIs
<div id="interfacediagram" style="display: inline-block; position: relative; width: 100%; padding-bottom: 11.666666666666666%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 70" preserveaspectratio="xminymin meet"><a xlink:href="/docs/
web/api/performanceentry" target="_top"><rect x="1" y="1" width="160" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="81" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">performanceentry</text></a><polyline points="161,25 171,20 171,30 161,25" stroke="#d4dde4" fill="none"/><line x1="...
...171" y1="25" x2="201" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/
web/api/performancelongtasktiming" target="_top"><rect x="201" y="1" width="250" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="326" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">performancelongtasktiming</text></a></svg></div> a:hover text { fill: #0095dd; pointer-events: all;} properties performancelongtasktiming.attribution read only returns a sequence of taskattributiontiming instances.
... desktopmobilechromeedgefirefoxinternet exploreroperasafariandroid
webviewchrome for androidfirefox for androidopera for androidsafari on iossamsung internetperformancelongtasktiming experimentalchrome full support 58edge full support ≤79firefox no support nonotes no support nonotes not...
...And 2 more matches
RTCPeerConnection.setRemoteDescription() - Web APIs
note: the process of changing descriptions actually involves intermediary steps handled by the
webrtc layer to ensure that an active connection can be changed without losing the connection if the change does not succeed.
... see pending and current descriptions in
webrtc connectivity for more details on this process.
... note: earlier implementations of
webrtc would throw an exception if an offer was set outside a stable or have-remote-offer state.
...And 2 more matches
SVGEllipseElement - Web APIs
<div id="interfacediagram" style="display: inline-block; position: relative; width: 100%; padding-bottom: 23.333333333333332%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 140" preserveaspectratio="xminymin meet"><a xlink:href="/docs/
web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="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="2...
...5" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/
web/api/node" target="_top"><rect x="151" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="188.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">node</text></a><polyline points="226,25 236,20 236,30 226,25" stroke="#d4dde4" fill="none"/><line x1="236" y1="25" x2="266" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/
web/api/element" target="_top"><rect x="266" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="303.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">element</te...
...xt></a><polyline points="341,25 351,20 351,30 341,25" stroke="#d4dde4" fill="none"/><line x1="351" y1="25" x2="381" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/
web/api/svgelement" target="_top"><rect x="381" y="1" width="100" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="431" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">svgelement</text></a><polyline points="481,25 491,20 491,30 481,25" stroke="#d4dde4" fill="none"/><line x1="491" y1="25" x2="499" y2="25" stroke="#d4dde4"/><line x1="499" y1="25" x2="499" y2="90" stroke="#d4dde4"/><line x1="499" y1="90" x2="482" y2="90" stroke="#d4dde4"/><a xlink:href="/docs/
web/api/svggraphicselement" target="_top"><rect x="301" y=...
...And 2 more matches
SVGLineElement - Web APIs
<div id="interfacediagram" style="display: inline-block; position: relative; width: 100%; padding-bottom: 23.333333333333332%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 140" preserveaspectratio="xminymin meet"><a xlink:href="/docs/
web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="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="2...
...5" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/
web/api/node" target="_top"><rect x="151" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="188.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">node</text></a><polyline points="226,25 236,20 236,30 226,25" stroke="#d4dde4" fill="none"/><line x1="236" y1="25" x2="266" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/
web/api/element" target="_top"><rect x="266" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="303.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">element</te...
...xt></a><polyline points="341,25 351,20 351,30 341,25" stroke="#d4dde4" fill="none"/><line x1="351" y1="25" x2="381" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/
web/api/svgelement" target="_top"><rect x="381" y="1" width="100" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="431" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">svgelement</text></a><polyline points="481,25 491,20 491,30 481,25" stroke="#d4dde4" fill="none"/><line x1="491" y1="25" x2="499" y2="25" stroke="#d4dde4"/><line x1="499" y1="25" x2="499" y2="90" stroke="#d4dde4"/><line x1="499" y1="90" x2="482" y2="90" stroke="#d4dde4"/><a xlink:href="/docs/
web/api/svggraphicselement" target="_top"><rect x="301" y=...
...And 2 more matches
SVGPathElement - Web APIs
<div id="interfacediagram" style="display: inline-block; position: relative; width: 100%; padding-bottom: 23.333333333333332%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 140" preserveaspectratio="xminymin meet"><a xlink:href="/docs/
web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="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/node" target="_top"><rect x="151" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="188.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">node</text></a><polyline points="226,25 236,20 236,30 226,25" stroke="#d4dde4" fill="none"/><line x1="236" y1="25" x2="266" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/
web/api/element" target="_top"><rect x="266" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="303.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">element</text></a...
...><polyline points="341,25 351,20 351,30 341,25" stroke="#d4dde4" fill="none"/><line x1="351" y1="25" x2="381" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/
web/api/svgelement" target="_top"><rect x="381" y="1" width="100" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="431" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">svgelement</text></a><polyline points="481,25 491,20 491,30 481,25" stroke="#d4dde4" fill="none"/><line x1="491" y1="25" x2="499" y2="25" stroke="#d4dde4"/><line x1="499" y1="25" x2="499" y2="90" stroke="#d4dde4"/><line x1="499" y1="90" x2="482" y2="90" stroke="#d4dde4"/><a xlink:href="/docs/
web/api/svggraphicselement" target="_top"><rect x="301" y="65" w...
...And 2 more matches
SVGPolygonElement - Web APIs
<div id="interfacediagram" style="display: inline-block; position: relative; width: 100%; padding-bottom: 23.333333333333332%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 140" preserveaspectratio="xminymin meet"><a xlink:href="/docs/
web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="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="2...
...5" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/
web/api/node" target="_top"><rect x="151" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="188.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">node</text></a><polyline points="226,25 236,20 236,30 226,25" stroke="#d4dde4" fill="none"/><line x1="236" y1="25" x2="266" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/
web/api/element" target="_top"><rect x="266" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="303.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">element</te...
...xt></a><polyline points="341,25 351,20 351,30 341,25" stroke="#d4dde4" fill="none"/><line x1="351" y1="25" x2="381" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/
web/api/svgelement" target="_top"><rect x="381" y="1" width="100" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="431" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">svgelement</text></a><polyline points="481,25 491,20 491,30 481,25" stroke="#d4dde4" fill="none"/><line x1="491" y1="25" x2="499" y2="25" stroke="#d4dde4"/><line x1="499" y1="25" x2="499" y2="90" stroke="#d4dde4"/><line x1="499" y1="90" x2="482" y2="90" stroke="#d4dde4"/><a xlink:href="/docs/
web/api/svggraphicselement" target="_top"><rect x="301" y=...
...And 2 more matches
SVGPolylineElement - Web APIs
<div id="interfacediagram" style="display: inline-block; position: relative; width: 100%; padding-bottom: 23.333333333333332%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 140" preserveaspectratio="xminymin meet"><a xlink:href="/docs/
web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="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="2...
...5" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/
web/api/node" target="_top"><rect x="151" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="188.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">node</text></a><polyline points="226,25 236,20 236,30 226,25" stroke="#d4dde4" fill="none"/><line x1="236" y1="25" x2="266" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/
web/api/element" target="_top"><rect x="266" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="303.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">element</te...
...xt></a><polyline points="341,25 351,20 351,30 341,25" stroke="#d4dde4" fill="none"/><line x1="351" y1="25" x2="381" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/
web/api/svgelement" target="_top"><rect x="381" y="1" width="100" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="431" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">svgelement</text></a><polyline points="481,25 491,20 491,30 481,25" stroke="#d4dde4" fill="none"/><line x1="491" y1="25" x2="499" y2="25" stroke="#d4dde4"/><line x1="499" y1="25" x2="499" y2="90" stroke="#d4dde4"/><line x1="499" y1="90" x2="482" y2="90" stroke="#d4dde4"/><a xlink:href="/docs/
web/api/svggraphicselement" target="_top"><rect x="301" y=...
...And 2 more matches
SVGRectElement - Web APIs
<div id="interfacediagram" style="display: inline-block; position: relative; width: 100%; padding-bottom: 23.333333333333332%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 140" preserveaspectratio="xminymin meet"><a xlink:href="/docs/
web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="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="2...
...5" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/
web/api/node" target="_top"><rect x="151" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="188.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">node</text></a><polyline points="226,25 236,20 236,30 226,25" stroke="#d4dde4" fill="none"/><line x1="236" y1="25" x2="266" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/
web/api/element" target="_top"><rect x="266" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="303.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">element</te...
...xt></a><polyline points="341,25 351,20 351,30 341,25" stroke="#d4dde4" fill="none"/><line x1="351" y1="25" x2="381" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/
web/api/svgelement" target="_top"><rect x="381" y="1" width="100" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="431" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">svgelement</text></a><polyline points="481,25 491,20 491,30 481,25" stroke="#d4dde4" fill="none"/><line x1="491" y1="25" x2="499" y2="25" stroke="#d4dde4"/><line x1="499" y1="25" x2="499" y2="90" stroke="#d4dde4"/><line x1="499" y1="90" x2="482" y2="90" stroke="#d4dde4"/><a xlink:href="/docs/
web/api/svggraphicselement" target="_top"><rect x="301" y=...
...And 2 more matches
SVGTSpanElement - Web APIs
<div id="interfacediagram" style="display: inline-block; position: relative; width: 100%; padding-bottom: 20%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 120" preserveaspectratio="xminymin meet"><a xlink:href="/docs/
web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="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/node" target="_top"><rect x="151" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="188.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">node</text></a><polyline points="226,25 236,20 236,30 226,25" stroke="#d4dde4" fill="none"/><line x1="236" y1="25" x2="266" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/
web/api/element" target="_top"><rect x="266" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="303.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">element</text></a><polyline points="3...
...41,25 351,20 351,30 341,25" stroke="#d4dde4" fill="none"/><line x1="351" y1="25" x2="381" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/
web/api/svgelement" target="_top"><rect x="381" y="1" width="100" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="431" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">svgelement</text></a><polyline points="481,25 491,20 491,30 481,25" stroke="#d4dde4" fill="none"/><line x1="491" y1="25" x2="499" y2="25" stroke="#d4dde4"/><line x1="499" y1="25" x2="499" y2="90" stroke="#d4dde4"/><line x1="499" y1="90" x2="482" y2="90" stroke="#d4dde4"/><a xlink:href="/docs/
web/api/svggraphicselement" target="_top"><rect x="301" y="65" width="180" height="5...
...And 2 more matches
SVGTextElement - Web APIs
<div id="interfacediagram" style="display: inline-block; position: relative; width: 100%; padding-bottom: 23.333333333333332%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 140" preserveaspectratio="xminymin meet"><a xlink:href="/docs/
web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="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/node" target="_top"><rect x="151" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="188.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">node</text></a><polyline points="226,25 236,20 236,30 226,25" stroke="#d4dde4" fill="none"/><line x1="236" y1="25" x2="266" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/
web/api/element" target="_top"><rect x="266" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="303.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">element</text></...
...a><polyline points="341,25 351,20 351,30 341,25" stroke="#d4dde4" fill="none"/><line x1="351" y1="25" x2="381" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/
web/api/svgelement" target="_top"><rect x="381" y="1" width="100" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="431" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">svgelement</text></a><polyline points="481,25 491,20 491,30 481,25" stroke="#d4dde4" fill="none"/><line x1="491" y1="25" x2="499" y2="25" stroke="#d4dde4"/><line x1="499" y1="25" x2="499" y2="90" stroke="#d4dde4"/><line x1="499" y1="90" x2="482" y2="90" stroke="#d4dde4"/><a xlink:href="/docs/
web/api/svggraphicselement" target="_top"><rect x="301" y="65" ...
...And 2 more matches
SVGTextPathElement - Web APIs
<div id="interfacediagram" style="display: inline-block; position: relative; width: 100%; padding-bottom: 23.333333333333332%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 140" preserveaspectratio="xminymin meet"><a xlink:href="/docs/
web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="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="2...
...5" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/
web/api/node" target="_top"><rect x="151" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="188.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">node</text></a><polyline points="226,25 236,20 236,30 226,25" stroke="#d4dde4" fill="none"/><line x1="236" y1="25" x2="266" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/
web/api/element" target="_top"><rect x="266" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="303.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">element</te...
...xt></a><polyline points="341,25 351,20 351,30 341,25" stroke="#d4dde4" fill="none"/><line x1="351" y1="25" x2="381" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/
web/api/svgelement" target="_top"><rect x="381" y="1" width="100" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="431" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">svgelement</text></a><polyline points="481,25 491,20 491,30 481,25" stroke="#d4dde4" fill="none"/><line x1="491" y1="25" x2="499" y2="25" stroke="#d4dde4"/><line x1="499" y1="25" x2="499" y2="90" stroke="#d4dde4"/><line x1="499" y1="90" x2="482" y2="90" stroke="#d4dde4"/><a xlink:href="/docs/
web/api/svggraphicselement" target="_top"><rect x="301" y=...
...And 2 more matches
SVGTextPositioningElement - Web APIs
<div id="interfacediagram" style="display: inline-block; position: relative; width: 100%; padding-bottom: 20%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 120" preserveaspectratio="xminymin meet"><a xlink:href="/docs/
web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="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="2...
...5" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/
web/api/node" target="_top"><rect x="151" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="188.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">node</text></a><polyline points="226,25 236,20 236,30 226,25" stroke="#d4dde4" fill="none"/><line x1="236" y1="25" x2="266" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/
web/api/element" target="_top"><rect x="266" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="303.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">element</te...
...xt></a><polyline points="341,25 351,20 351,30 341,25" stroke="#d4dde4" fill="none"/><line x1="351" y1="25" x2="381" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/
web/api/svgelement" target="_top"><rect x="381" y="1" width="100" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="431" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">svgelement</text></a><polyline points="481,25 491,20 491,30 481,25" stroke="#d4dde4" fill="none"/><line x1="491" y1="25" x2="499" y2="25" stroke="#d4dde4"/><line x1="499" y1="25" x2="499" y2="90" stroke="#d4dde4"/><line x1="499" y1="90" x2="482" y2="90" stroke="#d4dde4"/><a xlink:href="/docs/
web/api/svggraphicselement" target="_top"><rect x="301" y=...
...And 2 more matches
Slottable: assignedSlot - Web APIs
desktopmobilechromeedgefirefoxinternet exploreroperasafariandroid
webviewchrome for androidfirefox for androidopera for androidsafari on iossamsung internetassignedslot experimentalchrome full support 53edge full support 79firefox full support 63 full support 63 no support ...
... 59 — 63disabled disabled from version 59 until version 63 (exclusive): this feature is behind the dom.
webcomponents.shadowdom.enabled preference (needs to be set to true).
...— 59disabled disabled until version 59 (exclusive): this feature is behind the dom.
webcomponents.enabled preference (needs to be set to true) and the dom.
webcomponents.shadowdom.enabled preference (needs to be set to true).
...And 2 more matches
Storage API - Web APIs
the storage standard defines a common, shared storage system to be used by all apis and technologies that store content-accessible data for individual
web sites.
... note: this feature is available in
web workers.
... site storage—the data stored for a
web site which is managed by the storage standard—includes: indexeddb databases cache api data service worker registrations
web storage api data managed using window.localstorage history state information saved using history.pushstate() application caches notification data other kinds of site-accessible, site-specific data that may be maintained site storage units the site storage system described by the storage standard and interacted with using the storage api consists of a single site storage unit for each origin.
...And 2 more matches
SubtleCrypto.exportKey() - Web APIs
jwk: json
web key format.
... /* 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.
...And 2 more matches
SubtleCrypto - Web APIs
the subtlecrypto interface of the
web crypto api provides a number of low-level cryptographic functions.
...you can import keys from other systems, and support for standard formats like pkcs #8 and json
web key helps you do this.
... storing keys cryptokey objects can be stored using the structured clone algorithm, meaning that you can store and retrieve them using standard
web storage apis.
...And 2 more matches
Raining rectangles - Web APIs
« previousnext » a simple
webgl game that demonstrates clearing with solid colors, scissoring, animation, and user interaction.
...it is a preview of a full graphical application that manipulates various phases of the
webgl graphics pipeline and state machine.
... in addition, the example demonstrates how to integrate the
webgl function calls within a game loop.
...And 2 more matches
Window.showModalDialog() - Web APIs
please fix your
web sites and applications.
... desktopmobilechromeedgefirefoxinternet exploreroperasafariandroid
webviewchrome for androidfirefox for androidopera for androidsafari on iossamsung internetshowmodaldialog deprecatednon-standardchrome no support ?
...— 43edge no support nofirefox no support 3 — 56ie full support 4opera no support nosafari full support 5.1notes full support 5.1notes notes see
webkit bug 151885 for possible future removal from safari.
webview android no support nochrome android no support nofirefox android no support noopera android no support nosafari ios no support ...
...And 2 more matches
Worklet - Web APIs
the worklet interface is a lightweight version of
web workers and gives developers access to low-level parts of the rendering pipeline.
... with worklets, you can run javascript and
webassembly code to do graphics rendering or audio processing where high performance is required.
... worklet types worklets are restricted to specific use cases; they cannot be used for arbitrary computations like
web workers.
...And 2 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.
...do not use synchronous requests outside
web workers.
... processing a responsetext property containing an html document if you use xmlhttprequest to get the content of a remote html
webpage, the responsetext property is a string containing the raw html.
...And 2 more matches
XMLHttpRequest - Web APIs
this enables a
web page to update just part of a page without disrupting what the user is doing.
... <div id="interfacediagram" style="display: inline-block; position: relative; width: 100%; padding-bottom: 23.076923076923077%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 650 150" preserveaspectratio="xminymin meet"><a xlink:href="/docs/
web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="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"/><line x1="411" y1="25" x2="441" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/
web/api/xmlhttprequest" target="_top"><rect x="441" y="1" width="140" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="511" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignme...
...And 2 more matches
XRSession.updateRenderState() - Web APIs
the updaterenderstate() method of the xrsession interface of
webxr api schedules changes to be applied to the active render state prior to rendering of the next frame.
... baselayer optional an xr
webgllayer object from which the
webxr compositor will obtain imagery.
... examples this example creates a
webgl context that is compatible with an immersive xr device and then uses it to create an xr
webgllayer.
...And 2 more matches
XRSystem: isSessionSupported() - Web APIs
the xrsystem method issessionsupported() returns a promise which resolves to true if the specified
webxr session mode is supported by the user's
webxr device.
... syntax var issupportedpromise = xr.issessionsupported(xrsessionmode) parameters xrsessionmode a domstring specifying the
webxr session mode for which support is to be checked.
... this string must be one of inline (to present the
webxr content inline within the context of an html document) or immersive-vr for a fully-immersive virtual experience.
...And 2 more matches
-webkit-border-before - CSS: Cascading Style Sheets
the -
webkit-border-before css property is a shorthand property for setting the individual logical block start border property values in a single place in the style sheet.
... /* border values */ -
webkit-border-before: 1px; -
webkit-border-before: 2px dotted; -
webkit-border-before: medium dashed blue; /* global values */ -
webkit-border-before: inherit; -
webkit-border-before: initial; -
webkit-border-before: unset; -
webkit-border-before can be used to set the values for one or more of: -
webkit-border-before-width, -
webkit-border-before-style, and -
webkit-border-before-color.
... it relates to -
webkit-border-after, -
webkit-border-start, and -
webkit-border-end, which define the other borders of the element.
...And 2 more matches
-webkit-text-stroke-color - CSS: Cascading Style Sheets
the -
webkit-text-stroke-color css property specifies the stroke color of characters of text.
... /* <color> values */ -
webkit-text-stroke-color: red; -
webkit-text-stroke-color: #e08ab4; -
webkit-text-stroke-color: rgb(200, 100, 0); /* global values */ -
webkit-text-stroke-color: inherit; -
webkit-text-stroke-color: initial; -
webkit-text-stroke-color: unset; syntax values <color> the color of the stroke.
...)where <alpha-value> = <number> | <percentage><hue> = <number> | <angle> examples varying the stroke color html <p>text with stroke</p> <input type="color" value="#ff0000"> css p { margin: 0; font-size: 4em; -
webkit-text-stroke-width: 3px; -
webkit-text-stroke-color: #ff0000; /* can be changed in the live sample */ } javascript var colorpicker = document.queryselector("input"); colorpicker.addeventlistener("change", function(evt) { document.queryselector("p").style.
webkittextstrokecolor = evt.target.value; }); results specifications specification status comment com...
...And 2 more matches
::-webkit-progress-bar - CSS: Cascading Style Sheets
the ::-
webkit-progress-bar css pseudo-element represents the entire bar of a <progress> element.
... normally it's only visible as the unfilled portion of the bar, since by default it's rendered below the ::-
webkit-progress-value pseudo-element.
... it is a child of the ::-
webkit-progress-inner-element pseudo-element and the parent of the ::-
webkit-progress-value pseudo-element.
...And 2 more matches
::-webkit-progress-inner-element - CSS: Cascading Style Sheets
the ::-
webkit-progress-inner-element css pseudo-element represents the outermost container of the <progress> element.
... it is the parent of the ::-
webkit-progress-bar pseudo-element.
... note: in order to let ::-
webkit-progress-value take effect, -
webkit-appearance needs to be set to none on the <progress> element.
...And 2 more matches
::-webkit-progress-value - CSS: Cascading Style Sheets
the ::-
webkit-progress-value css pseudo-element represents the filled-in portion of the bar of a <progress> element.
... it is a child of the ::-
webkit-progress-bar pseudo-element.
... note: in order to let ::-
webkit-progress-value take effect, -
webkit-appearance needs to be set to none on the <progress> element.
...And 2 more matches
-webkit-animation - CSS: Cascading Style Sheets
the -
webkit-animation boolean css media feature is a chrome extension whose value is true if vendor-prefixed css animations are supported.
... note: this media feature is only supported by
webkit.
... syntax the -
webkit-animation media feature is a boolean whose value is true if the vendor-prefixed css animation properties are supported.
...And 2 more matches
Writing Web Audio API code that works in every browser - Developer guides
you probably have already read the announcement on the
web audio api coming to firefox, and are totally excited and ready to make your until-now-
webkit-only sites work with firefox, which uses the unprefixed version of the spec.
... unfortunately, chrome, safari and opera still use the
webkitaudiocontext prefixed name.
...in addition, not all features of
web audio are already implemented in firefox yet.
...And 2 more matches
Graphics on the Web - Developer guides
websites and applications often need to present graphics, such as images.
... 3d graphics
webgl a guide to getting started with
webgl, the 3d graphics api for the
web.
... this technology lets you use standard opengl es in
web content.
...And 2 more matches
WebAssembly.Memory.prototype.buffer - JavaScript
the buffer prototype property of the
webassembly.memory object returns the buffer contained in the memory.
... examples using buffer the following example (see memory.html on github, and view it live also) fetches and instantiates the loaded memory.wasm byte code using the
webassembly.instantiatestreaming() method, while importing the memory created in the line above.
...
webassembly.instantiatestreaming(fetch('memory.wasm'), { js: { mem: memory } }) .then(obj => { var i32 = new uint32array(memory.buffer); for (var i = 0; i < 10; i++) { i32[i] = i; } var sum = obj.instance.exports.accumulate(0, 10); console.log(sum); }); specifications specification
webassembly javascript interfacethe definition of 'buffer' in that specification.
...And 2 more matches
WebAssembly.Table.prototype.grow() - JavaScript
the grow() prototype method of the
webassembly.table object increases the size of the table instance by a specified number of elements.
... examples using grow the following example creates a new
webassembly table instance with an initial size of 2 and a maximum size of 10.
... var table = new
webassembly.table({ element: "anyfunc", initial: 2, maximum: 10 }); you can then grow the table by 1 with the following: console.log(table.length); // "2" console.log(table.grow(1)); // "2" console.log(table.length); // "3" specifications specification
webassembly javascript interfacethe definition of 'grow()' in that specification.
...And 2 more matches
WebAssembly.Table.prototype.length - JavaScript
the length prototype property of the
webassembly.table object returns the length of the table, i.e.
... syntax table.length; examples using length the following example creates a new
webassembly table instance with an initial size of 2 and a maximum size of 10.
... var table = new
webassembly.table({ element: "anyfunc", initial: 2, maximum: 10 }); you can then grow the table by 1 with the following: console.log(table.length); // "2" console.log(table.grow(1)); // "2" console.log(table.length); // "3" specifications specification
webassembly javascript interfacethe definition of 'length' in that specification.
...And 2 more matches
scope - Web app manifests
type string mandatory no the scope member is a string that defines the navigation scope of this
web application's application context.
... it restricts what
web pages can be viewed while the manifest is applied.
... if the user navigates outside the scope, it reverts to a normal
web page inside a browser tab or window.
...And 2 more matches
Mapping the width and height attributes of media container elements to their aspect-ratio - Web media technologies
this article explains a change that has occured in the way sizes are worked out on
web documents when width and height attributes are set on them.
... jank problems when loading images in the olden days of
web development, it was always seen as a good practice to add width and height attributes to your html <img> elements, so that when browsers first loaded the page, they could put a correctly-sized placeholder box in the layout for each image to appear in when it finally loads.
...however, this caused a problem — a number of
web sites actually use the width and height attributes incorrectly, setting an aspect ratio of something other than the image’s intrinsic aspect ratio.
...And 2 more matches
Animation performance and frame rate - Web Performance
animation on the
web can be done via svg, javascript, including <canvas> and
webgl, css animation, <video>, animated gifs and even animated pngs and other image types.
...code based animations, be it css, svg, <canvas>,
webgl or other javascript animations, can cause performance issues even if the bandwidth footprint is small.
... transform opacity the css triggers
website shows how much of the waterfall is triggered for each css property, with information for most css properties by browser engine.
...And 2 more matches
Making PWAs work offline with Service workers - Progressive web apps (PWAs)
previous overview: progressive
web apps next now that we’ve seen what the structure of js13kpwa looks like and have seen the basic shell up and running, let's look at how the offline capabilities using service worker are implemented.
...they finally fix issues that front-end developers have struggled with for years — most notably how to properly cache the assets of a
website and make them available when the user’s device is offline.
...this introduces a different approach from traditional
web programming — the api is non-blocking, and can send and receive communication between different contexts.
...And 2 more matches
Web technology reference
the open
web is based on a number of technologies which, together, can be used to create everything from simple sites to powerful
web applications.
... if you're new to
web development, consider starting with our learning area, which is filled with step-by-step tutorials that will guide you from total
webdev newbie to at least semi-pro!
... html — structuring the
web hypertext markup language is used to define and describe semantically the content (markup) of a
web page in a well-structured format.
...And 2 more matches
Insecure passwords - Web security
websites that handle user data should use https to protect their users from attackers.
... if a
website uses http instead of https, it is trivial to steal user information (such as their login credentials).
... note on password reuse sometimes
websites require username and passwords but don't actually store data that is very sensitive.
...And 2 more matches
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.
...according to the open
web application security project, xss was the seventh most common
web app vulnerability in 2017.
... access control by configuring a
website it is the best way to secure your site.
...And 2 more matches
Well-Formed Web - Archive of obsolete content
getting started a guided tutorial that will help you get started with the well-formed
web rss module.
... the well-formed
web rss module provides facilities for <item> level commenting: for linking to comments contained in an external rss feed, and for posting new comments.
... documentation selected articles why well-formed
web rss module is popular - syndicating your comments charles iliya krempeaux talks about the rss well-formed
web module, why it is popular among some, and how it is used to link to your comments (2005-08-22).
... references rss well-formed
web module element list examples none available at this time community none available at this time tools none available at this time other resources well-formed
web spec rss, rdf, xml ...
WebRTC data channels - Game development
the
webrtc (
web real-time communications) api is primarily known for its support for audio and video communications; however, it also offers peer-to-peer data channels.
... a
webrtc data channel lets you send text or binary data over an active connection to a peer.
... we have documentation for using
webrtc.
... original document information author(s): alan kligman source article:
webrtc data channels for great multiplayer other contributors: robert nyman copyright information: alan kligman, 2013 ...
Cascade and inheritance - Learn web development
the effect of css location finally, it is also useful to note that the importance of a css declaration depends on what stylesheet it is specified in — it is possible for users to set custom stylesheets to override the developer's styles, for example the user might be visually impaired, and want to set the font size on all
web pages they visit to be double the normal size to allow for easier reading.
... normal declarations in author style sheets (these are the styles set by us, the
web developers).
... important declarations in author style sheets important declarations in user style sheets it makes sense for
web developers' stylesheets to override user stylesheets, so the design can be kept as intended, but sometimes users have good reasons to override
web developer styles, as mentioned above — this can be achieved by using !important in their rules.
...this is definitely the most complicated thing we've covered so far in the course, and is something that even professional
web developers sometimes find tricky.
Normal Flow - Learn web development
previous overview: css layout next this article explains normal flow, or the way that
webpage elements lay themselves out if you have not changed their layout.
... prerequisites: the basics of html (study introduction to html), and an idea of how css works (study introduction to css.) objective: to explain how browsers layout
web pages by default, before we begin to make changes.
... as detailed in the last lesson introducing layout, elements on a
webpage lay out in the normal flow, if you have not applied any css to change the way they behave.
...starting with a solid, well-structured document that is readable in normal flow is the best way to begin any
webpage.
Sending forms through JavaScript - Learn web development
a form is not always a form with progressive
web apps, single page apps, and framework based apps, it's common to use html forms to send data without loading a new document when response data is received.
... xhr.send( urlencodeddata ); } btn.addeventlistener( 'click', function() { senddata( {test:'ok'} ); } ) here's the live result: note: this use of xmlhttprequest is subject to the same-origin policy if you want to send data to a third party
web site.
... there are many sources for binary data, including filereader, canvas, and
webrtc.
...to learn more about the filereader api, see using files from
web applications.
HTML Cheatsheet - Learn web development
inline elements an "element" is a single part of a
webpage.
...by default, "inline elements" appear next to one another in a
webpage.
... block elements "block elements," on the other hand, take up the entire width of a
webpage.
... they also take up a full line of a
webpage; they do not fit together side-by-side.
Define terms with HTML - Learn web development
i'm feeling blue but we're constantly defining keywords informally, as here: firefox is the
web browser created by the mozilla foundation.
...note that <dfn> tags go around the word to be defined, not the definition (the definition consists of the entire paragraph): <p><dfn>firefox</dfn> is the
web browser created by the mozilla foundation.</p> another use for bold is to emphasize content.
... <p> <dfn><abbr>html</abbr> (hypertext markup language)</dfn> is a description language used to structure documents on the
web.
...if you want a more formal relationship, or your definition consists of only one sentence rather than the whole paragraph, you can use the aria-describedby attribute to associate a term more formally with its definition: <p> <span id="ff"> <dfn aria-describedby="ff">firefox</dfn> is the
web browser created by the mozilla foundation.
Structuring a page of content - Learn web development
prerequisites: before attempting this assessment you should have already worked through the rest of the course, with a particular emphasis on document and
website structure.
... objective: to test knowledge of
web page structures, and how to represent a prospective layout design in markup.
... project brief for this project, your task is to take the content for the homepage of a bird watching
website and add structural elements to it so it can have a page layout applied to it.
...metadata in html html text fundamentals creating hyperlinks advanced text formatting document and
website structure debugging html marking up a letter structuring a page of content ...
HTML table basics - Learn web development
tables are very commonly used in human society, and have been for a long time, as evidenced by this us census document from 1800: it is therefore no wonder that the creators of html provided a means by which to structure and present tabular data on the
web.
... be under no illusion; for tables to be effective on the
web, you need to provide some styling information with css, as well as good solid structure with html.
...unfortunately, a lot of people used to use html tables to lay out
web pages, e.g.
...this was commonly used because css support across browsers used to be terrible; table layouts are much less common nowadays, but you might still see them in some corners of the
web.
Cooperative asynchronous JavaScript: Timeouts and intervals - Learn web development
introduction for a long time, the
web platform has offered javascript programmers a number of functions that allow them to asynchronously execute code after a certain time interval has elapsed, and to repeatedly execute a block of code asynchronously until you tell it to stop.
... in any case, these functions are used for running constant animations and other background processing on a
web site or application.
... if, however, you are doing something more complex and involving objects that are not directly accessible inside the dom (such as 2d canvas api or
webgl objects), requestanimationframe() is the better option in most cases.
... since most screens have a refresh rate of 60hz, the fastest frame rate you can aim for is 60 frames per second (fps) when working with
web browsers.
Working with JSON - Learn web development
it is commonly used for transmitting data in
web applications (e.g., sending some data from the server to the client, so it can be displayed on a
web page, or vice versa).
... active learning: working through a json example so, let's work through an example to show how we could make use of some json data on a
website.
...this has led to more responsive
web pages, and sounds exciting, but it is beyond the scope of this article to teach it in much more detail.
...luckily, these two problems are so common in
web development that a built-in json object is available in browsers, which contains the following two methods: parse(): accepts a json string as a parameter, and returns the corresponding javascript object.
Framework main features - Learn web development
suppose you're building a
website for an online magazine, and you need to be sure that each contributing writer gets credit for their work.
...just like you can write html tags inside each other to build a
website, you can use components inside other components to build a
web application.
... routing as mentioned in the previous chapter, routing is an important part of the
web experience.
... testing all applications benefit from test coverage that ensures your software continues to behave in the way that you'd expect, and
web applications are no different.
TypeScript support in Svelte - Learn web development
previous overview: client-side javascript frameworks next in the last article we learned about svelte stores and even implemented our own custom store to persist the app's information to
web storage.
...this is how the contents will end up: // stores.ts import { writable } from 'svelte/store' import { localstore } from './localstore.js' import type { todotype } from './types/todo.type' export const alert = writable('welcome to the to-do list app!') const initialtodos: todotype[] = [ { id: 1, name: 'visit mdn
web docs', completed: true }, { id: 2, name: 'complete the svelte tutorial', completed: false }, ] export const todos = localstore('mdn-svelte-todo', initialtodos) remember to update the import statements in app.svelte, alert.svelte, and todos.svelte.
...the first one is easy — the key of our local
web storage should be a string.
... // save also to local storage as a string return set(value) }, update } } and thanks to generic type inference, typescript already knows that our $todos store should contain an array of todotype: once again, if we wanted to be explicit about it, we could do so in the stores.ts file like this: const initialtodos: todotype[] = [ { id: 1, name: 'visit mdn
web docs', completed: true }, { id: 2, name: 'complete the svelte tutorial', completed: false }, ] export const todos = localstore<todotype[]>('mdn-svelte-todo', initialtodos) that will do for our brief tour of typescript generics.
Advanced Svelte: Reactivity, lifecycle, accessibility - Learn web development
many
web frameworks use the virtual dom technique to update the page.
... basically, the virtual dom is an in-memory copy of the contents of the
web page.
...ame = '' let nameel // reference to the name input dom node if (autofocus) nameel.focus() now go back to the todos component, and pass the autofocus prop into the <newtodo> component call, like so: <!-- newtodo --> <newtodo autofocus on:addtodo={e => addtodo(e.detail)} /> if you try your app out now, you'll see that the page is now blank, and in your devtools
web console you'll see an error along the lines of: typeerror: nameel is undefined.
... note: all this is just standard
webapi functionality; nothing here is specific to svelte.
Creating localizable web content
if there are alternatives, use them by adding the $lang; parameter in the urls evaluate the impact of new pages on all our
web properties, especially links to community sites and redirects.
... use localized screenshots if possible screenshots are important informative graphics, often times explaining how to achieve something in a desktop or
web application.
... if the screenshot shows the application that the
website directly relates to (firefox on mozilla.com/firefox, personas on getpersonas.com), try to use screenshots from the localized version.
... if however the screenshot shows a third-party application or
website, it's acceptable to use the english version if it's not available in the target language.
Web Localizability
the following list contains links to pages that highlight steps that can be taken to make
web content localizable.
...how to create localizable
web applications.
... why localizability is important there are many reasons why you should start thinking about making your
web app localizable as soon as possible.
...extending you
web app to support new languages will be easy.
nsIWebNavigation
docshell/base/nsi
webnavigation.idlscriptable defines an interface for navigating the
web.
... inherits from: nsisupports last changed in gecko 1.9 (firefox 3) this interface is implemented by the following components: * @mozilla.org/browser/shistory-internal;1 * @mozilla.org/browser/shistory;1 * @mozilla.org/embedding/browser/ns
webbrowser;1 * @mozilla.org/docshell;1 gecko 1.9.2 note in gecko 1.9.2 (firefox 3.6), the @mozilla.org/
webshell;1 component no longer exists; you need to use @mozilla.org/docshell;1 instead.
... load_flags_bypass_cache 256 this flag specifies that the local
web cache should be bypassed, but an intermediate proxy cache could still be used to satisfy the load.
... sessionhistory nsishistory the session history object used by this
web navigation instance.
Web Console Helpers - Firefox Developer Tools
the commands the javascript command line provided by the
web console offers a few built-in helper functions that make certain tasks easier.
... --fullpage boolean if included, the full
webpage will be saved.
... with this parameter, even the parts of the
webpage which are outside the current bounds of the window will be included in the screenshot.
...in fact, this page you're reading right now has one, so you can open up the
web console and try this right now.
AnalyserNode.AnalyserNode() - Web APIs
the analysernode constructor of the
web audio api creates a new analysernode object instance.
... specifications specification status comment
web audio apithe definition of 'analysernode() constructor' in that specification.
... desktopmobilechromeedgefirefoxinternet exploreroperasafariandroid
webviewchrome for androidfirefox for androidopera for androidsafari on iossamsung internetanalysernode() constructorchrome full support 55edge full support ≤79firefox full support 53ie no support noopera full support 42safari ...
... full support 6
webview android full support 55chrome android full support 55firefox android full support 53opera android full support 42safari ios full support 6samsung internet android full support 6.0legend full support full support no support no support ...
AudioBuffer() - Web APIs
the audiobuffer constructor of the
web audio api creates a new audiobuffer object.
... specifications specification status comment
web audio apithe definition of 'audiobuffer' in that specification.
... desktopmobilechromeedgefirefoxinternet exploreroperasafariandroid
webviewchrome for androidfirefox for androidopera for androidsafari on iossamsung internetaudiobuffer() constructorchrome full support 55notes full support 55notes notes the context parameter was supported up until version 57, but has now been removed.edge full support ≤79firefox full support ...
...
webview android full support 55notes full support 55notes notes the context parameter was supported up until version 57, but has now been removed.chrome android full support 55notes full support 55notes notes the context parameter was supported up until version 57, but has now ...
AudioContext - Web APIs
<div id="interfacediagram" style="display: inline-block; position: relative; width: 100%; padding-bottom: 11.666666666666666%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 70" preserveaspectratio="xminymin meet"><a xlink:href="/docs/
web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="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="2...
...5" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/
web/api/audiocontext" target="_top"><rect x="151" y="1" width="120" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="211" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">audiocontext</text></a></svg></div> a:hover text { fill: #0095dd; pointer-events: all;} constructor audiocontext() creates and returns a new audiocontext object.
... examples basic audio context declaration: var audioctx = new audiocontext(); cross browser variant: var audiocontext = window.audiocontext || window.
webkitaudiocontext; var audioctx = new audiocontext(); var oscillatornode = audioctx.createoscillator(); var gainnode = audioctx.creategain(); var finish = audioctx.destination; // etc.
... specifications specification status comment
web audio apithe definition of 'audiocontext' in that specification.
AudioNode.connect() - Web APIs
var audiocontext = window.audiocontext || window.
webkitaudiocontext; var audioctx = new audiocontext(); var oscillator = audioctx.createoscillator(); var gainnode = audioctx.creategain(); oscillator.connect(gainnode); gainnode.connect(audioctx.destination); audioparam example in this example, we will be altering the gain value of a gainnode using an oscillatornode with a slow frequency value.
... var audiocontext = window.audiocontext || window.
webkitaudiocontext; var audioctx = new audiocontext(); // create an normal oscillator to make sound var oscillator = audioctx.createoscillator(); // create a second oscillator that will be used as an lfo (low-frequency // oscillator), and will control a parameter var lfo = audioctx.createoscillator(); // set the frequency of the second oscillator to a low number lfo.frequency.value = 2.0; // 2hz: two oscillations par second // create a gain whose gain audioparam will be controlled by the lfo var gain = audioctx.creategain(); // connect the lfo to the gain audioparam.
... specifications specification status comment
web audio apithe definition of 'connect() to an audionode' in that specification.
... working draft
web audio apithe definition of 'connect() to an audioparam' in that specification.
AudioParam.setTargetAtTime() - Web APIs
for the complete formula (which uses a first-order linear continuous time-invariant system), check the
web audio specification.
...rttime value 0 * timeconstant 0% 0.5 * timeconstant 39.3% 1 * timeconstant 63.2% 2 * timeconstant 86.5% 3 * timeconstant 95.0% 4 * timeconstant 98.2% 5 * timeconstant 99.3% n * timeconstant 1-e-n1 - e^{-n} examples in this example, we have a media source with two control buttons (see the
webaudio-examples repo for the source code, or view the example live.) when these buttons are pressed, settargetattime() is used to fade the gain value up to 1.0, and down to 0, respectively, with the effect starting after 1 second, and the length of time the effect lasts being controlled by the timeconstant.
... // create audio context var audiocontext = window.audiocontext || window.
webkitaudiocontext; var audioctx = new audiocontext(); // set basic variables for example var myaudio = document.queryselector('audio'); var pre = document.queryselector('pre'); var myscript = document.queryselector('script'); pre.innerhtml = myscript.innerhtml; var attimeplus = document.queryselector('.at-time-plus'); var attimeminus = document.queryselector('.at-time-minus'); // create a mediaelementaudiosourcenode // feed the htmlmediaelement into it var source = audioctx.createmediaelementsource(myaudio); // create a gain node and set it's gain value to 0.5 var gainnode = audioctx.creategain(); gainnode.gain.value = 0.5; var currgain = gainnode.gain.value; // connect the audiobuffersourcenode to the gainnode ...
...); gainnode.connect(audioctx.destination); // set buttons to do something onclick attimeplus.onclick = function() { currgain = 1.0; gainnode.gain.settargetattime(1.0, audioctx.currenttime + 1, 0.5); } attimeminus.onclick = function() { currgain = 0; gainnode.gain.settargetattime(0, audioctx.currenttime + 1, 0.5); } specifications specification status comment
web audio apithe definition of 'settargetattime' in that specification.
AuthenticatorAttestationResponse.attestationObject - Web APIs
the
webauthn specification defines a number of formats; however, formats may also be defined in other specifications and registered in an iana registry.
... formats defined by
webauthn are: "packed" "tpm" "android-key" "android-safetynet" "fido-u2f" "none" attstmt a an attestation statement that is of the format defined by "fmt".
... for now, see the
webauthn specification for details on each format.
...{ publickey }) .then(function (newcredentialinfo) { var attestationobj = newcredentialinfo.response.attestationobject; // this will be a cbor encoded arraybuffer // do something with the response // (sending it back to the relying party server maybe?) }).catch(function (err) { console.error(err); }); specifications specification status comment
web authentication: an api for accessing public key credentials level 1the definition of 'attestationobject' in that specification.
Background Tasks API - Web APIs
concepts and usage the main thread of a
web browser is centered around its event loop.
... because event handling and screen updates are two of the most obvious ways users notice performance issues, it's important for your code to be a good citizen of the
web and help to prevent stalls in the execution of the event loop.
...while the browser, your code, and the
web in general will continue to run normally if you go over the specified time limit (even if you go way over it), the time restriction is intended to ensure that you leave the system enough time to finish the current pass through the event loop and get on to the next one without causing other code to stutter or animation effects to lag.
... <p> demonstration of using <a href="/docs/
web/api/background_tasks_api"> cooperatively scheduled background tasks</a> using the <code>requestidlecallback()</code> method.
BiquadFilterNode() - Web APIs
the biquadfilternode() constructor of the
web audio api creates a new biquadfilternode object, which represents a simple low-order filter, and is created using the audiocontext.createbiquadfilter() method.
... specifications specification status comment
web audio apithe definition of 'biquadfilternode()' in that specification.
... desktopmobilechromeedgefirefoxinternet exploreroperasafariandroid
webviewchrome for androidfirefox for androidopera for androidsafari on iossamsung internetbiquadfilternode() constructorchrome full support 55notes full support 55notes notes before chrome 59, the default values were not supported.edge full support ≤79firefox full support 53ie ...
...
webview android full support 55notes full support 55notes notes before version 59, the default values were not supported.chrome android full support 55notes full support 55notes notes before chrome 59, the default values were not supported.firefox android full support 53opera andro...
BudgetService.getBudget() - Web APIs
desktopmobilechromeedgefirefoxinternet exploreroperasafariandroid
webviewchrome for androidfirefox for androidopera for androidsafari on iossamsung internetgetbudget experimentaldeprecatednon-standardchrome full support 55edge full support ≤79firefox ?
...
webview android full support 55chrome android full support 55firefox android ?
...not for use in new
websites.deprecated.
... not for use in new
websites.
BudgetService.getCost() - Web APIs
desktopmobilechromeedgefirefoxinternet exploreroperasafariandroid
webviewchrome for androidfirefox for androidopera for androidsafari on iossamsung internetgetcost experimentaldeprecatednon-standardchrome full support 55edge full support ≤79firefox ?
...
webview android full support 55chrome android full support 55firefox android ?
...not for use in new
websites.deprecated.
... not for use in new
websites.
BudgetService.reserve() - Web APIs
desktopmobilechromeedgefirefoxinternet exploreroperasafariandroid
webviewchrome for androidfirefox for androidopera for androidsafari on iossamsung internetreserve experimentaldeprecatednon-standardchrome full support 55edge full support ≤79firefox ?
...
webview android full support 55chrome android full support 55firefox android ?
...not for use in new
websites.deprecated.
... not for use in new
websites.
BudgetState.budgetAt - Web APIs
desktopmobilechromeedgefirefoxinternet exploreroperasafariandroid
webviewchrome for androidfirefox for androidopera for androidsafari on iossamsung internetbudgetat experimentaldeprecatednon-standardchrome full support 60edge full support ≤79firefox ?
...
webview android no support nochrome android full support 60firefox android ?
...not for use in new
websites.deprecated.
... not for use in new
websites.
BudgetState.time - Web APIs
desktopmobilechromeedgefirefoxinternet exploreroperasafariandroid
webviewchrome for androidfirefox for androidopera for androidsafari on iossamsung internettime experimentaldeprecatednon-standardchrome full support 60edge full support ≤79firefox ?
...
webview android no support nochrome android full support 60firefox android ?
...not for use in new
websites.deprecated.
... not for use in new
websites.
ByteLengthQueuingStrategy - Web APIs
desktopmobilechromeedgefirefoxinternet exploreroperasafariandroid
webviewchrome for androidfirefox for androidopera for androidsafari on iossamsung internetbytelengthqueuingstrategy experimentalchrome full support 59edge full support 16firefox full support 57disabled full support 57disab...
...
webview android full support 59chrome android full support 59firefox android full support 57disabled full support 57disabled disabled from version 57: this feature is behind the dom.streams.enabled preference (needs to be ...
...
webview android full support 59chrome android full support 59firefox android full support 57disabled full support 57disabled disabled from version 57: this feature is behind the dom.streams.enabled preference (needs to be ...
...
webview android full support 59chrome android full support 59firefox android full support 57disabled full support 57disabled disabled from version 57: this feature is behind the dom.streams.enabled preference (needs to be ...
CDATASection - Web APIs
<div id="interfacediagram" style="display: inline-block; position: relative; width: 100%; padding-bottom: 20%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 120" preserveaspectratio="xminymin meet"><a xlink:href="/docs/
web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="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="2...
...5" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/
web/api/node" target="_top"><rect x="151" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="188.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">node</text></a><polyline points="226,25 236,20 236,30 226,25" stroke="#d4dde4" fill="none"/><line x1="236" y1="25" x2="266" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/
web/api/characterdata" target="_top"><rect x="266" y="1" width="130" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="331" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">charac...
...terdata</text></a><polyline points="396,25 406,20 406,30 396,25" stroke="#d4dde4" fill="none"/><line x1="406" y1="25" x2="436" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/
web/api/text" target="_top"><rect x="436" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="473.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">text</text></a><polyline points="511,25 521,20 521,30 511,25" stroke="#d4dde4" fill="none"/><line x1="521" y1="25" x2="529" y2="25" stroke="#d4dde4"/><line x1="529" y1="25" x2="529" y2="90" stroke="#d4dde4"/><line x1="529" y1="90" x2="512" y2="90" stroke="#d4dde4"/><a xlink:href="/docs/
web/api/cdatasection" target="_top"><rect x="391" y="65" w...
... living standard re-added in issue #295 due to
web breakage dom4the definition of 'cdatasection' in that specification.
Finale - Web APIs
this knowledge will help you to make great 2d graphics on the
web.
...new technologies are constantly arriving to make it possible to develop better and more powerful games that can be run in any standards-compliant
web browser.
... other
web apis these apis might be useful when working further with canvas and graphics:
webgl advanced api for rendering complex graphics, including 3d.
...
web audio the
web audio api provides a powerful and versatile system for controlling audio on the
web, allowing developers to choose audio sources, add effects to audio, create audio visualizations, apply spatial effects (such as panning) and much more.
ConvolverNode() - Web APIs
the convolvernode() constructor of the
web audio api creates a new convolvernode object instance.
... specifications specification status comment
web audio apithe definition of 'convolvernode()' in that specification.
... desktopmobilechromeedgefirefoxinternet exploreroperasafariandroid
webviewchrome for androidfirefox for androidopera for androidsafari on iossamsung internetconvolvernode() constructorchrome full support 55edge full support ≤79firefox full support 53ie no support noopera full support 42safari ...
...
webview android full support 55chrome android full support 55firefox android full support 53opera android full support 42safari ios ?
CountQueuingStrategy - Web APIs
desktopmobilechromeedgefirefoxinternet exploreroperasafariandroid
webviewchrome for androidfirefox for androidopera for androidsafari on iossamsung internetcountqueuingstrategy experimentalchrome full support 59edge full support 16firefox full support 57disabled full support 57disabled d...
...
webview android full support 59chrome android full support 59firefox android full support 57disabled full support 57disabled disabled from version 57: this feature is behind the dom.streams.enabled preference (needs to be ...
...
webview android full support 59chrome android full support 59firefox android full support 57disabled full support 57disabled disabled from version 57: this feature is behind the dom.streams.enabled preference (needs to be ...
...
webview android full support 59chrome android full support 59firefox android full support 57disabled full support 57disabled disabled from version 57: this feature is behind the dom.streams.enabled preference (needs to be ...
Crypto - Web APIs
note: this feature is available in
web workers.
... the
web crypto api is accessed through the window.crypto property, which is a crypto object.
... usage notes you should avoid using the
web crypto api on insecure contexts, even though the crypto interface is present on insecure contexts, as is the window.crypto property.
... specifications specification status comment
web cryptography apithe definition of 'crypto' in that specification.
DelayNode() - Web APIs
the delaynode() constructor of the
web audio api creates a new delaynode object with a delay-line; an audionode audio-processing module that causes a delay between the arrival of an input data, and its propagation to the output.
... example const audioctx = new audiocontext(); const delaynode = new delaynode(audioctx, { delaytime: 0.5, maxdelaytime: 2, }); specifications specification status comment
web audio apithe definition of 'delaynode()' in that specification.
... desktopmobilechromeedgefirefoxinternet exploreroperasafariandroid
webviewchrome for androidfirefox for androidopera for androidsafari on iossamsung internetdelaynode() constructorchrome full support 55notes full support 55notes notes before version 59, the default values were not supported.edge full support ≤79firefox full support 53ie ...
...
webview android full support 55notes full support 55notes notes before version 59, the default values were not supported.chrome android full support 55notes full support 55notes notes before version 59, the default values were not supported.firefox android full support 53opera android full support 42safari ios ?
EXT_texture_compression_bptc - Web APIs
the ext_texture_compression_bptc extension is part of the
webgl api and exposes 4 bptc compressed texture formats.
...
webgl extensions are available using the
webglrenderingcontext.getextension() method.
... for more information, see also using extensions in the
webgl tutorial.
... this extension is available to both,
webgl1 and
webgl2 contexts.
EXT_texture_compression_rgtc - Web APIs
the ext_texture_compression_rgtc extension is part of the
webgl api and exposes 4 rgtc compressed texture formats.
...
webgl extensions are available using the
webglrenderingcontext.getextension() method.
... for more information, see also using extensions in the
webgl tutorial.
... this extension is available to both,
webgl1 and
webgl2 contexts.
Event.initEvent() - Web APIs
desktopmobilechromeedgefirefoxinternet exploreroperasafariandroid
webviewchrome for androidfirefox for androidopera for androidsafari on iossamsung internetinitevent deprecatedchrome full support yesedge full support 12firefox full support 17 full support 17 no support ...
...— 17notes notes before firefox 17, a call to this method after the dispatching of the event raised an exception instead of doing nothing.ie full support yesopera full support yessafari full support yes
webview android full support yeschrome android full support yesfirefox android full support 17 full support 17 no support ?
...not for use in new
websites.deprecated.
... not for use in new
websites.see implementation notes.see implementation notes.
File - Web APIs
the file interface provides information about files and allows javascript in a
web page to access their content.
... see using files from
web applications for more information and examples.
... <div id="interfacediagram" style="display: inline-block; position: relative; width: 100%; padding-bottom: 11.666666666666666%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 70" preserveaspectratio="xminymin meet"><a xlink:href="/docs/
web/api/blob" target="_top"><rect x="1" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="38.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">blob</text></a><polyline points="76,25 86,20 86,30 76,25" stroke="#d4dde4" fill="none"/><line x1="86" y1="25" x2="116" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/
web/api/file" target="_top"><r...
... file.prototype.
webkitrelativepath read only returns the path the url of the file is relative to.
FileSystemEntry.copyTo() - Web APIs
desktopmobilechromeedgefirefoxinternet exploreroperasafariandroid
webviewchrome for androidfirefox for androidopera for androidsafari on iossamsung internetcopyto experimentaldeprecatednon-standardchrome full support 8edge full support 79firefox no support noie no support noopera ...
... no support nosafari no support no
webview android full support ≤37chrome android full support 18firefox android no support noopera android no support nosafari ios no support nosamsung internet android full support yeslegend full support full support no support no supportexperimental.
...not for use in new
websites.deprecated.
... not for use in new
websites.
FileSystemEntry.getMetadata() - Web APIs
desktopmobilechromeedgefirefoxinternet exploreroperasafariandroid
webviewchrome for androidfirefox for androidopera for androidsafari on iossamsung internetgetmetadata experimentaldeprecatednon-standardchrome full support 8edge full support 79firefox no support noie no support noopera ...
... no support nosafari no support no
webview android full support ≤37chrome android full support 18firefox android no support noopera android no support nosafari ios no support nosamsung internet android full support yeslegend full support full support no support no supportexperimental.
...not for use in new
websites.deprecated.
... not for use in new
websites.
FileSystemEntry.moveTo() - Web APIs
desktopmobilechromeedgefirefoxinternet exploreroperasafariandroid
webviewchrome for androidfirefox for androidopera for androidsafari on iossamsung internetmoveto experimentaldeprecatednon-standardchrome full support 8edge full support 79firefox no support noie no support noopera ...
... no support nosafari no support no
webview android full support ≤37chrome android full support 18firefox android no support noopera android no support nosafari ios no support nosamsung internet android full support yeslegend full support full support no support no supportexperimental.
...not for use in new
websites.deprecated.
... not for use in new
websites.
FileSystemEntry.remove() - Web APIs
desktopmobilechromeedgefirefoxinternet exploreroperasafariandroid
webviewchrome for androidfirefox for androidopera for androidsafari on iossamsung internetremove experimentaldeprecatednon-standardchrome full support 8edge full support 79firefox no support noie no support noopera ...
... no support nosafari no support no
webview android full support ≤37chrome android full support 18firefox android no support noopera android no support nosafari ios no support nosamsung internet android full support yeslegend full support full support no support no supportexperimental.
...not for use in new
websites.deprecated.
... not for use in new
websites.
FileSystemFileEntry.createWriter() - Web APIs
desktopmobilechromeedgefirefoxinternet exploreroperasafariandroid
webviewchrome for androidfirefox for androidopera for androidsafari on iossamsung internetcreatewriter deprecatednon-standardchrome full support 8edge full support 79firefox no support 50 — 52notes no support 50 — 52notes notes while the createwriter() met...
...hod existed, it immediately called errorcallback with the ns_error_dom_security_err error.ie no support noopera no support nosafari no support no
webview android full support ≤37chrome android full support 18firefox android no support 50 — 52notes no support 50 — 52notes notes while the createwriter() method existed, it immediately called errorcallback with the ns_error_dom_security_err error.opera android no support nosafari ios no support ...
...not for use in new
websites.deprecated.
... not for use in new
websites.see implementation notes.see implementation notes.
FileSystemFlags.create - Web APIs
desktopmobilechromeedgefirefoxinternet exploreroperasafariandroid
webviewchrome for androidfirefox for androidopera for androidsafari on iossamsung internetcreate experimentalchrome full support 13prefixed full support 13prefixed prefixed implemented with the vendor prefix:
webkitedge full support ≤79prefixed ful...
...l support ≤79prefixed prefixed implemented with the vendor prefix:
webkitfirefox partial support 50notes partial support 50notes notes for security reasons, firefox does not support creating files.
... this option has no effect.ie no support noopera no support nosafari no support no
webview android full support yesprefixed full support yesprefixed prefixed implemented with the vendor prefix:
webkitchrome android full support yesprefixed full support yesprefixed prefixed implemented with the vendor prefix:
webkitfirefox android partial support 50notes partial support 50notes notes for security reasons, firefox does not support c...
...this option has no effect.opera android no support nosafari ios no support nosamsung internet android full support yesprefixed full support yesprefixed prefixed implemented with the vendor prefix:
webkitlegend full support full support partial support partial support no support no supportexperimental.
FileSystemFlags.exclusive - Web APIs
desktopmobilechromeedgefirefoxinternet exploreroperasafariandroid
webviewchrome for androidfirefox for androidopera for androidsafari on iossamsung internetexclusive experimentalchrome full support 13prefixed full support 13prefixed prefixed implemented with the vendor prefix:
webkitedge full support ≤79prefixed ...
...full support ≤79prefixed prefixed implemented with the vendor prefix:
webkitfirefox partial support 50notes partial support 50notes notes for security reasons, firefox does not support creating files.
... this option has no effect.ie no support noopera no support nosafari no support no
webview android full support yesprefixed full support yesprefixed prefixed implemented with the vendor prefix:
webkitchrome android full support yesprefixed full support yesprefixed prefixed implemented with the vendor prefix:
webkitfirefox android partial support 50notes partial support 50notes notes for security reasons, firefox does not support c...
...this option has no effect.opera android no support nosafari ios no support nosamsung internet android full support yesprefixed full support yesprefixed prefixed implemented with the vendor prefix:
webkitlegend full support full support partial support partial support no support no supportexperimental.
FontFaceSetLoadEvent - Web APIs
desktopmobilechromeedgefirefoxinternet exploreroperasafariandroid
webviewchrome for androidfirefox for androidopera for androidsafari on iossamsung internetfontfacesetloadevent experimentalchrome full support 35edge full support ≤79firefox full support yesie ?
...
webview android no support nochrome android full support 35firefox android full support yesopera android full support 22safari ios ?
...
webview android no support nochrome android full support 57firefox android ?
...
webview android no support nochrome android full support 35firefox android full support yesopera android full support 22safari ios ?
GainNode() - Web APIs
the gainnode() constructor of the
web audio api creates a new gainnode object which an audionode that represents a change in volume.
... specifications specification status comment
web audio apithe definition of 'gainnode()' in that specification.
... desktopmobilechromeedgefirefoxinternet exploreroperasafariandroid
webviewchrome for androidfirefox for androidopera for androidsafari on iossamsung internetgainnode() constructorchrome full support 55notes full support 55notes notes before chrome 59, the default values were not supported.edge full support ≤79firefox full support 53ie ...
...
webview android full support 55notes full support 55notes notes before chrome 59, the default values were not supported.chrome android full support 55notes full support 55notes notes before chrome 59, the default values were not supported.firefox android full support 53opera android full support 42safari ios ?
HTMLAudioElement - Web APIs
<div id="interfacediagram" style="display: inline-block; position: relative; width: 100%; padding-bottom: 20%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 120" preserveaspectratio="xminymin meet"><a xlink:href="/docs/
web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="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="2...
...5" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/
web/api/node" target="_top"><rect x="151" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="188.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">node</text></a><polyline points="226,25 236,20 236,30 226,25" stroke="#d4dde4" fill="none"/><line x1="236" y1="25" x2="266" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/
web/api/element" target="_top"><rect x="266" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="303.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">element</te...
...xt></a><polyline points="341,25 351,20 351,30 341,25" stroke="#d4dde4" fill="none"/><line x1="351" y1="25" x2="381" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/
web/api/htmlelement" target="_top"><rect x="381" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="436" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">htmlelement</text></a><polyline points="491,25 501,20 501,30 491,25" stroke="#d4dde4" fill="none"/><line x1="501" y1="25" x2="509" y2="25" stroke="#d4dde4"/><line x1="509" y1="25" x2="509" y2="90" stroke="#d4dde4"/><line x1="509" y1="90" x2="492" y2="90" stroke="#d4dde4"/><a xlink:href="/docs/
web/api/htmlmediaelement" target="_top"><rect x="331" y=...
...ght="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="411" y="94" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">htmlmediaelement</text></a><polyline points="331,89 321,84 321,94 331,89" stroke="#d4dde4" fill="none"/><line x1="321" y1="89" x2="291" y2="89" stroke="#d4dde4"/><a xlink:href="/docs/
web/api/htmlaudioelement" target="_top"><rect x="131" y="65" width="160" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="211" y="94" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">htmlaudioelement</text></a></svg></div> a:hover text { fill: #0095dd; pointer-events: all;} construc...
HTMLEmbedElement - Web APIs
<div id="interfacediagram" style="display: inline-block; position: relative; width: 100%; padding-bottom: 20%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 120" preserveaspectratio="xminymin meet"><a xlink:href="/docs/
web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="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="2...
...5" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/
web/api/node" target="_top"><rect x="151" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="188.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">node</text></a><polyline points="226,25 236,20 236,30 226,25" stroke="#d4dde4" fill="none"/><line x1="236" y1="25" x2="266" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/
web/api/element" target="_top"><rect x="266" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="303.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">element</te...
...xt></a><polyline points="341,25 351,20 351,30 341,25" stroke="#d4dde4" fill="none"/><line x1="351" y1="25" x2="381" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/
web/api/htmlelement" target="_top"><rect x="381" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="436" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">htmlelement</text></a><polyline points="491,25 501,20 501,30 491,25" stroke="#d4dde4" fill="none"/><line x1="501" y1="25" x2="509" y2="25" stroke="#d4dde4"/><line x1="509" y1="25" x2="509" y2="90" stroke="#d4dde4"/><line x1="509" y1="90" x2="492" y2="90" stroke="#d4dde4"/><a xlink:href="/docs/
web/api/htmlembedelement" target="_top"><rect x="331" y=...
... living standard adds two obsolete properties, name and align, to help with compatibility with old
web sites.
HTMLHRElement - Web APIs
<div id="interfacediagram" style="display: inline-block; position: relative; width: 100%; padding-bottom: 20%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 120" preserveaspectratio="xminymin meet"><a xlink:href="/docs/
web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="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="2...
...5" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/
web/api/node" target="_top"><rect x="151" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="188.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">node</text></a><polyline points="226,25 236,20 236,30 226,25" stroke="#d4dde4" fill="none"/><line x1="236" y1="25" x2="266" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/
web/api/element" target="_top"><rect x="266" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="303.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">element</te...
...xt></a><polyline points="341,25 351,20 351,30 341,25" stroke="#d4dde4" fill="none"/><line x1="351" y1="25" x2="381" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/
web/api/htmlelement" target="_top"><rect x="381" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="436" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">htmlelement</text></a><polyline points="491,25 501,20 501,30 491,25" stroke="#d4dde4" fill="none"/><line x1="501" y1="25" x2="509" y2="25" stroke="#d4dde4"/><line x1="509" y1="25" x2="509" y2="90" stroke="#d4dde4"/><line x1="509" y1="90" x2="492" y2="90" stroke="#d4dde4"/><a xlink:href="/docs/
web/api/htmlhrelement" target="_top"><rect x="361" y="65...
... living standard the color property has been added, as an obsolete property, to increase compatibility with the existing
web.
HTMLTrackElement - Web APIs
<div id="interfacediagram" style="display: inline-block; position: relative; width: 100%; padding-bottom: 20%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 120" preserveaspectratio="xminymin meet"><a xlink:href="/docs/
web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="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="2...
...5" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/
web/api/node" target="_top"><rect x="151" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="188.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">node</text></a><polyline points="226,25 236,20 236,30 226,25" stroke="#d4dde4" fill="none"/><line x1="236" y1="25" x2="266" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/
web/api/element" target="_top"><rect x="266" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="303.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">element</te...
...xt></a><polyline points="341,25 351,20 351,30 341,25" stroke="#d4dde4" fill="none"/><line x1="351" y1="25" x2="381" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/
web/api/htmlelement" target="_top"><rect x="381" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="436" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">htmlelement</text></a><polyline points="491,25 501,20 501,30 491,25" stroke="#d4dde4" fill="none"/><line x1="501" y1="25" x2="509" y2="25" stroke="#d4dde4"/><line x1="509" y1="25" x2="509" y2="90" stroke="#d4dde4"/><line x1="509" y1="90" x2="492" y2="90" stroke="#d4dde4"/><a xlink:href="/docs/
web/api/htmltrackelement" target="_top"><rect x="331" y=...
... usage notes loading of the track's text resource the
webvtt or ttml data describing the actual cues for the text track isn't loaded if the track's mode is initially in the disabled state.
HTMLVideoElement - Web APIs
<div id="interfacediagram" style="display: inline-block; position: relative; width: 100%; padding-bottom: 23.333333333333332%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 140" preserveaspectratio="xminymin meet"><a xlink:href="/docs/
web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="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="2...
...5" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/
web/api/node" target="_top"><rect x="151" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="188.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">node</text></a><polyline points="226,25 236,20 236,30 226,25" stroke="#d4dde4" fill="none"/><line x1="236" y1="25" x2="266" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/
web/api/element" target="_top"><rect x="266" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="303.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">element</te...
...xt></a><polyline points="341,25 351,20 351,30 341,25" stroke="#d4dde4" fill="none"/><line x1="351" y1="25" x2="381" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/
web/api/htmlelement" target="_top"><rect x="381" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="436" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">htmlelement</text></a><polyline points="491,25 501,20 501,30 491,25" stroke="#d4dde4" fill="none"/><line x1="501" y1="25" x2="509" y2="25" stroke="#d4dde4"/><line x1="509" y1="25" x2="509" y2="90" stroke="#d4dde4"/><line x1="509" y1="90" x2="492" y2="90" stroke="#d4dde4"/><a xlink:href="/docs/
web/api/htmlmediaelement" target="_top"><rect x="331" y=...
...ght="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="411" y="94" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">htmlmediaelement</text></a><polyline points="331,89 321,84 321,94 331,89" stroke="#d4dde4" fill="none"/><line x1="321" y1="89" x2="291" y2="89" stroke="#d4dde4"/><a xlink:href="/docs/
web/api/htmlvideoelement" target="_top"><rect x="131" y="65" width="160" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="211" y="94" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">htmlvideoelement</text></a></svg></div> a:hover text { fill: #0095dd; pointer-events: all;} properti...
IDBCursor.key - Web APIs
note: this feature is available in
web workers.
... desktopmobilechromeedgefirefoxinternet exploreroperasafariandroid
webviewchrome for androidfirefox for androidopera for androidsafari on iossamsung internetkeychrome full support 24 full support 24 no support 23 — 24prefixed prefixed implemented with the vendor prefix:
webkitedge full support 12firefox ...
... full support 16 full support 16 no support 10 — 16prefixed prefixed implemented with the vendor prefix: mozie partial support 10opera full support 15safari full support 7
webview android full support yeschrome android full support yesfirefox android full support 22opera android full support 14safari ios full support 8samsung internet android ...
... opera full support 45safari full support 10.1
webview android full support 58chrome android full support 58firefox android ?
IDBDatabase.createObjectStore() - Web APIs
note: this feature is available in
web workers.
...for older
webkit browsers, you must call first.
... desktopmobilechromeedgefirefoxinternet exploreroperasafariandroid
webviewchrome for androidfirefox for androidopera for androidsafari on iossamsung internetcreateobjectstorechrome full support 24 full support 24 no support 23 — 24prefixed prefixed implemented with the vendor prefix:
webkitedge full support ...
... full support 16 full support 16 no support 10 — 16prefixed prefixed implemented with the vendor prefix: mozie partial support 10opera full support 15safari full support 7
webview android full support yeschrome android full support 25firefox android full support 22opera android full support 14safari ios full support 8samsung internet android ...
IDBDatabase.deleteObjectStore() - Web APIs
note: this feature is available in
web workers.
...for older
webkit browsers, you must call first.
... desktopmobilechromeedgefirefoxinternet exploreroperasafariandroid
webviewchrome for androidfirefox for androidopera for androidsafari on iossamsung internetdeleteobjectstorechrome full support 24 full support 24 no support 23 — 24prefixed prefixed implemented with the vendor prefix:
webkitedge full support ...
... full support 16 full support 16 no support 10 — 16prefixed prefixed implemented with the vendor prefix: mozie partial support 10opera full support 15safari full support 7
webview android full support yeschrome android full support 25firefox android full support 22opera android full support 14safari ios full support 8samsung internet android ...
IDBDatabaseException - Web APIs
desktopmobilechromeedgefirefoxinternet exploreroperasafariandroid
webviewchrome for androidfirefox for androidopera for androidsafari on iossamsung internetidbdatabaseexception deprecatednon-standardchrome full support 12prefixed full support 12prefixed prefixed implemented with the vendor prefix:
webkitedge full support ≤79prefi...
...xed full support ≤79prefixed prefixed implemented with the vendor prefix:
webkitfirefox no support 4 — 14ie no support noopera no support nosafari no support no
webview android no support nochrome android no support nofirefox android no support 4 — 14opera android no support nosafari ios no support nosamsung internet android no support no...
...not for use in new
websites.deprecated.
... not for use in new
websites.requires a vendor prefix or different name for use.requires a vendor prefix or different name for use.
IDBFactory.cmp() - Web APIs
note: this feature is available in
web workers.
... desktopmobilechromeedgefirefoxinternet exploreroperasafariandroid
webviewchrome for androidfirefox for androidopera for androidsafari on iossamsung internetcmpchrome full support 24 full support 24 no support 23 — 24prefixed prefixed implemented with the vendor prefix:
webkitedge full support 12firefox ...
... full support 16 full support 16 no support 10 — 16prefixed prefixed implemented with the vendor prefix: mozie partial support 10opera full support 15safari full support 7
webview android full support yes full support yes no support ?
... — ?prefixed prefixed implemented with the vendor prefix:
webkitchrome android full support 25firefox android full support 22opera android full support 14safari ios full support 8samsung internet android full support 1.5legend full support full support partial support partial supportrequires a vendor prefix or different name for use.requires a vendor prefix or different name for use.
IDBFactory.deleteDatabase() - Web APIs
note: this feature is available in
web workers.
... desktopmobilechromeedgefirefoxinternet exploreroperasafariandroid
webviewchrome for androidfirefox for androidopera for androidsafari on iossamsung internetdeletedatabasechrome full support 24 full support 24 no support 23 — 24prefixed prefixed implemented with the vendor prefix:
webkitedge full support 1...
... full support 16 full support 16 no support 10 — 16prefixed prefixed implemented with the vendor prefix: mozie partial support 10opera full support 15safari full support 7
webview android full support yes full support yes no support ?
... — ?prefixed prefixed implemented with the vendor prefix:
webkitchrome android full support 25firefox android full support 22opera android full support 14safari ios full support 8samsung internet android full support 1.5legend full support full support partial support partial supportrequires a vendor prefix or different name for use.requires a vendor prefix or different name for use.
IDBIndex.count() - Web APIs
note: this feature is available in
web workers.
... desktopmobilechromeedgefirefoxinternet exploreroperasafariandroid
webviewchrome for androidfirefox for androidopera for androidsafari on iossamsung internetcountchrome full support 24 full support 24 no support 23 — 24prefixed prefixed implemented with the vendor prefix:
webkitedge full support 12firefox ...
... full support 16 full support 16 no support 10 — 16prefixed prefixed implemented with the vendor prefix: mozie partial support 10opera full support 15safari full support 7
webview android full support yes full support yes no support ?
... — ?prefixed prefixed implemented with the vendor prefix:
webkitchrome android full support 25firefox android full support 22opera android full support 14safari ios full support 8samsung internet android full support 1.5legend full support full support partial support partial supportrequires a vendor prefix or different name for use.requires a vendor prefix or different name for use.
IDBIndex.get() - Web APIs
note: this feature is available in
web workers.
... desktopmobilechromeedgefirefoxinternet exploreroperasafariandroid
webviewchrome for androidfirefox for androidopera for androidsafari on iossamsung internetgetchrome full support 24 full support 24 no support 23 — 24prefixed prefixed implemented with the vendor prefix:
webkitedge full support 12firefox ...
... full support 16 full support 16 no support 10 — 16prefixed prefixed implemented with the vendor prefix: mozie partial support 10opera full support 15safari full support 7
webview android full support yes full support yes no support ?
... — ?prefixed prefixed implemented with the vendor prefix:
webkitchrome android full support 25firefox android full support 22opera android full support 14safari ios full support 8samsung internet android full support 1.5legend full support full support partial support partial supportrequires a vendor prefix or different name for use.requires a vendor prefix or different name for use.
IDBIndex.getKey() - Web APIs
note: this feature is available in
web workers.
... desktopmobilechromeedgefirefoxinternet exploreroperasafariandroid
webviewchrome for androidfirefox for androidopera for androidsafari on iossamsung internetgetkeychrome full support 24 full support 24 no support 23 — 24prefixed prefixed implemented with the vendor prefix:
webkitedge full support 12firefox...
... full support 16 full support 16 no support 10 — 16prefixed prefixed implemented with the vendor prefix: mozie partial support 10opera full support 15safari full support 7
webview android full support yes full support yes no support ?
... — ?prefixed prefixed implemented with the vendor prefix:
webkitchrome android full support 25firefox android full support 22opera android full support 14safari ios full support 8samsung internet android full support 1.5legend full support full support partial support partial supportrequires a vendor prefix or different name for use.requires a vendor prefix or different name for use.
IDBIndex.keyPath - Web APIs
note: this feature is available in
web workers.
... desktopmobilechromeedgefirefoxinternet exploreroperasafariandroid
webviewchrome for androidfirefox for androidopera for androidsafari on iossamsung internetkeypathchrome full support 24 full support 24 no support 23 — 24prefixed prefixed implemented with the vendor prefix:
webkitedge full support 12firefo...
... full support 16 full support 16 no support 10 — 16prefixed prefixed implemented with the vendor prefix: mozie partial support 10opera full support 15safari full support 7
webview android full support yes full support yes no support ?
... — ?prefixed prefixed implemented with the vendor prefix:
webkitchrome android full support 25firefox android full support 22opera android full support 14safari ios full support 8samsung internet android full support 1.5legend full support full support partial support partial supportrequires a vendor prefix or different name for use.requires a vendor prefix or different name for use.
IDBIndex.multiEntry - Web APIs
note: this feature is available in
web workers.
... desktopmobilechromeedgefirefoxinternet exploreroperasafariandroid
webviewchrome for androidfirefox for androidopera for androidsafari on iossamsung internetmultientrychrome full support 24 full support 24 no support 23 — 24prefixed prefixed implemented with the vendor prefix:
webkitedge full support 12fir...
... full support 16 full support 16 no support 10 — 16prefixed prefixed implemented with the vendor prefix: mozie partial support 10opera full support 15safari full support 7
webview android full support yes full support yes no support ?
... — ?prefixed prefixed implemented with the vendor prefix:
webkitchrome android full support 25firefox android full support 22opera android full support 14safari ios full support 8samsung internet android full support 1.5legend full support full support partial support partial supportrequires a vendor prefix or different name for use.requires a vendor prefix or different name for use.
IDBIndex.objectStore - Web APIs
note: this feature is available in
web workers.
... desktopmobilechromeedgefirefoxinternet exploreroperasafariandroid
webviewchrome for androidfirefox for androidopera for androidsafari on iossamsung internetobjectstorechrome full support 24 full support 24 no support 23 — 24prefixed prefixed implemented with the vendor prefix:
webkitedge full support 12fi...
... full support 16 full support 16 no support 10 — 16prefixed prefixed implemented with the vendor prefix: mozie partial support 10opera full support 15safari full support 7
webview android full support yes full support yes no support ?
... — ?prefixed prefixed implemented with the vendor prefix:
webkitchrome android full support 25firefox android full support 22opera android full support 14safari ios full support 8samsung internet android full support 1.5legend full support full support partial support partial supportrequires a vendor prefix or different name for use.requires a vendor prefix or different name for use.
IDBIndex.openCursor() - Web APIs
note: this feature is available in
web workers.
... desktopmobilechromeedgefirefoxinternet exploreroperasafariandroid
webviewchrome for androidfirefox for androidopera for androidsafari on iossamsung internetopencursorchrome full support 24 full support 24 no support 23 — 24prefixed prefixed implemented with the vendor prefix:
webkitedge full support 12fir...
... full support 16 full support 16 no support 10 — 16prefixed prefixed implemented with the vendor prefix: mozie partial support 10opera full support 15safari full support 7
webview android full support yes full support yes no support ?
... — ?prefixed prefixed implemented with the vendor prefix:
webkitchrome android full support 25firefox android full support 22opera android full support 14safari ios full support 8samsung internet android full support 1.5legend full support full support partial support partial supportrequires a vendor prefix or different name for use.requires a vendor prefix or different name for use.
IDBIndex.openKeyCursor() - Web APIs
note: this feature is available in
web workers.
... desktopmobilechromeedgefirefoxinternet exploreroperasafariandroid
webviewchrome for androidfirefox for androidopera for androidsafari on iossamsung internetopenkeycursorchrome full support 24 full support 24 no support 23 — 24prefixed prefixed implemented with the vendor prefix:
webkitedge full support 12...
... full support 16 full support 16 no support 10 — 16prefixed prefixed implemented with the vendor prefix: mozie partial support 10opera full support 15safari full support 7
webview android full support yes full support yes no support ?
... — ?prefixed prefixed implemented with the vendor prefix:
webkitchrome android full support 25firefox android full support 22opera android full support 14safari ios full support 8samsung internet android full support 1.5legend full support full support partial support partial supportrequires a vendor prefix or different name for use.requires a vendor prefix or different name for use.
IDBIndex.unique - Web APIs
note: this feature is available in
web workers.
... desktopmobilechromeedgefirefoxinternet exploreroperasafariandroid
webviewchrome for androidfirefox for androidopera for androidsafari on iossamsung internetuniquechrome full support 24 full support 24 no support 23 — 24prefixed prefixed implemented with the vendor prefix:
webkitedge full support 12firefox...
... full support 16 full support 16 no support 10 — 16prefixed prefixed implemented with the vendor prefix: mozie partial support 10opera full support 15safari full support 7
webview android full support yes full support yes no support ?
... — ?prefixed prefixed implemented with the vendor prefix:
webkitchrome android full support 25firefox android full support 22opera android full support 14safari ios full support 8samsung internet android full support 1.5legend full support full support partial support partial supportrequires a vendor prefix or different name for use.requires a vendor prefix or different name for use.
IDBObjectStore.add() - Web APIs
note: this feature is available in
web workers.
... desktopmobilechromeedgefirefoxinternet exploreroperasafariandroid
webviewchrome for androidfirefox for androidopera for androidsafari on iossamsung internetaddchrome full support 24 full support 24 no support 23 — 57prefixed prefixed implemented with the vendor prefix:
webkitedge full support 12firefox ...
... full support 16 full support 16 no support 10 — 16prefixed prefixed implemented with the vendor prefix: mozie partial support 10opera full support 15safari full support 7
webview android full support yes full support yes no support ?
... — 57prefixed prefixed implemented with the vendor prefix:
webkitchrome android full support 25 full support 25 no support 25 — 57prefixed prefixed implemented with the vendor prefix:
webkitfirefox android full support 22opera android full support 14safari ios full support 8samsung internet android full support 1.5 full support 1.5 no support 1.5 — 7.0prefixed prefixed implemented with the vendor prefix:
webkitlegend ...
IDBObjectStore.autoIncrement - Web APIs
note: this feature is available in
web workers.
... desktopmobilechromeedgefirefoxinternet exploreroperasafariandroid
webviewchrome for androidfirefox for androidopera for androidsafari on iossamsung internetautoincrementchrome full support 24 full support 24 no support 23 — 57prefixed prefixed implemented with the vendor prefix:
webkitedge full support 12...
... full support 16 full support 16 no support 10 — 16prefixed prefixed implemented with the vendor prefix: mozie partial support 10opera full support 15safari full support 7
webview android full support yes full support yes no support ?
... — 57prefixed prefixed implemented with the vendor prefix:
webkitchrome android full support 25 full support 25 no support 25 — 57prefixed prefixed implemented with the vendor prefix:
webkitfirefox android full support 22opera android full support 14safari ios full support 8samsung internet android full support 1.5 full support 1.5 no support 1.5 — 7.0prefixed prefixed implemented with the vendor prefix:
webkitlegend ...
IDBObjectStore.clear() - Web APIs
note: this feature is available in
web workers.
... desktopmobilechromeedgefirefoxinternet exploreroperasafariandroid
webviewchrome for androidfirefox for androidopera for androidsafari on iossamsung internetclearchrome full support 24 full support 24 no support 23 — 57prefixed prefixed implemented with the vendor prefix:
webkitedge full support 12firefox ...
... full support 16 full support 16 no support 10 — 16prefixed prefixed implemented with the vendor prefix: mozie partial support 10opera full support 15safari full support 7
webview android full support yes full support yes no support ?
... — 57prefixed prefixed implemented with the vendor prefix:
webkitchrome android full support 25 full support 25 no support 25 — 57prefixed prefixed implemented with the vendor prefix:
webkitfirefox android full support 22opera android full support 14safari ios full support 8samsung internet android full support 1.5 full support 1.5 no support 1.5 — 7.0prefixed prefixed implemented with the vendor prefix:
webkitlegend ...
IDBObjectStore.count() - Web APIs
note: this feature is available in
web workers.
... desktopmobilechromeedgefirefoxinternet exploreroperasafariandroid
webviewchrome for androidfirefox for androidopera for androidsafari on iossamsung internetcountchrome full support 24 full support 24 no support 23 — 57prefixed prefixed implemented with the vendor prefix:
webkitedge full support 12firefox ...
... full support 16 full support 16 no support 10 — 16prefixed prefixed implemented with the vendor prefix: mozie partial support 10opera full support 15safari full support 7
webview android full support yes full support yes no support ?
... — 57prefixed prefixed implemented with the vendor prefix:
webkitchrome android full support 25 full support 25 no support 25 — 57prefixed prefixed implemented with the vendor prefix:
webkitfirefox android full support 22opera android full support 14safari ios full support 8samsung internet android full support 1.5 full support 1.5 no support 1.5 — 7.0prefixed prefixed implemented with the vendor prefix:
webkitlegend ...
IDBObjectStore.createIndex() - Web APIs
note: this feature is available in
web workers.
... desktopmobilechromeedgefirefoxinternet exploreroperasafariandroid
webviewchrome for androidfirefox for androidopera for androidsafari on iossamsung internetcreateindexchrome full support 24 full support 24 no support 23 — 57prefixed prefixed implemented with the vendor prefix:
webkitedge full support 12fi...
... full support 16 full support 16 no support 10 — 16prefixed prefixed implemented with the vendor prefix: mozie partial support 10opera full support 15safari full support 7
webview android full support yes full support yes no support ?
... — 57prefixed prefixed implemented with the vendor prefix:
webkitchrome android full support 25 full support 25 no support 25 — 57prefixed prefixed implemented with the vendor prefix:
webkitfirefox android full support 22opera android full support 14safari ios full support 8samsung internet android full support 1.5 full support 1.5 no support 1.5 — 7.0prefixed prefixed implemented with the vendor prefix:
webkitlegend ...
IDBObjectStore.delete() - Web APIs
note: this feature is available in
web workers.
... desktopmobilechromeedgefirefoxinternet exploreroperasafariandroid
webviewchrome for androidfirefox for androidopera for androidsafari on iossamsung internetdeletechrome full support 24 full support 24 no support 23 — 57prefixed prefixed implemented with the vendor prefix:
webkitedge full support 12firefox...
... full support 16 full support 16 no support 10 — 16prefixed prefixed implemented with the vendor prefix: mozie partial support 10opera full support 15safari full support 7
webview android full support yes full support yes no support ?
... — 57prefixed prefixed implemented with the vendor prefix:
webkitchrome android full support 25 full support 25 no support 25 — 57prefixed prefixed implemented with the vendor prefix:
webkitfirefox android full support 22opera android full support 14safari ios full support 8samsung internet android full support 1.5 full support 1.5 no support 1.5 — 7.0prefixed prefixed implemented with the vendor prefix:
webkitlegend ...
IDBObjectStore.deleteIndex() - Web APIs
note: this feature is available in
web workers.
... desktopmobilechromeedgefirefoxinternet exploreroperasafariandroid
webviewchrome for androidfirefox for androidopera for androidsafari on iossamsung internetdeleteindexchrome full support 24 full support 24 no support 23 — 57prefixed prefixed implemented with the vendor prefix:
webkitedge full support 12fi...
... full support 16 full support 16 no support 10 — 16prefixed prefixed implemented with the vendor prefix: mozie partial support 10opera full support 15safari full support 7
webview android full support yes full support yes no support ?
... — 57prefixed prefixed implemented with the vendor prefix:
webkitchrome android full support 25 full support 25 no support 25 — 57prefixed prefixed implemented with the vendor prefix:
webkitfirefox android full support 22opera android full support 14safari ios full support 8samsung internet android full support 1.5 full support 1.5 no support 1.5 — 7.0prefixed prefixed implemented with the vendor prefix:
webkitlegend ...
IDBObjectStore.get() - Web APIs
note: this feature is available in
web workers.
... desktopmobilechromeedgefirefoxinternet exploreroperasafariandroid
webviewchrome for androidfirefox for androidopera for androidsafari on iossamsung internetgetchrome full support 24 full support 24 no support 23 — 57prefixed prefixed implemented with the vendor prefix:
webkitedge full support 12firefox ...
... full support 16 full support 16 no support 10 — 16prefixed prefixed implemented with the vendor prefix: mozie partial support 10opera full support 15safari full support 7
webview android full support yes full support yes no support ?
... — 57prefixed prefixed implemented with the vendor prefix:
webkitchrome android full support 25 full support 25 no support 25 — 57prefixed prefixed implemented with the vendor prefix:
webkitfirefox android full support 22opera android full support 14safari ios full support 8samsung internet android full support 1.5 full support 1.5 no support 1.5 — 7.0prefixed prefixed implemented with the vendor prefix:
webkitlegend ...
IDBObjectStore.index() - Web APIs
note: this feature is available in
web workers.
... desktopmobilechromeedgefirefoxinternet exploreroperasafariandroid
webviewchrome for androidfirefox for androidopera for androidsafari on iossamsung internetindexchrome full support 24 full support 24 no support 23 — 57prefixed prefixed implemented with the vendor prefix:
webkitedge full support 12firefox ...
... full support 16 full support 16 no support 10 — 16prefixed prefixed implemented with the vendor prefix: mozie partial support 10opera full support 15safari full support 7
webview android full support yes full support yes no support ?
... — 57prefixed prefixed implemented with the vendor prefix:
webkitchrome android full support 25 full support 25 no support 25 — 57prefixed prefixed implemented with the vendor prefix:
webkitfirefox android full support 22opera android full support 14safari ios full support 8samsung internet android full support 1.5 full support 1.5 no support 1.5 — 7.0prefixed prefixed implemented with the vendor prefix:
webkitlegend ...
IDBObjectStore.indexNames - Web APIs
note: this feature is available in
web workers.
... desktopmobilechromeedgefirefoxinternet exploreroperasafariandroid
webviewchrome for androidfirefox for androidopera for androidsafari on iossamsung internetindexnameschrome full support 24 full support 24 no support 23 — 57prefixed prefixed implemented with the vendor prefix:
webkitedge full support 12fir...
... full support 16 full support 16 no support 10 — 16prefixed prefixed implemented with the vendor prefix: mozie partial support 10opera full support 15safari full support 7
webview android full support yes full support yes no support ?
... — 57prefixed prefixed implemented with the vendor prefix:
webkitchrome android full support 25 full support 25 no support 25 — 57prefixed prefixed implemented with the vendor prefix:
webkitfirefox android full support 22opera android full support 14safari ios full support 8samsung internet android full support 1.5 full support 1.5 no support 1.5 — 7.0prefixed prefixed implemented with the vendor prefix:
webkitlegend ...
IDBObjectStore.keyPath - Web APIs
note: this feature is available in
web workers.
... desktopmobilechromeedgefirefoxinternet exploreroperasafariandroid
webviewchrome for androidfirefox for androidopera for androidsafari on iossamsung internetkeypathchrome full support 24 full support 24 no support 23 — 57prefixed prefixed implemented with the vendor prefix:
webkitedge full support 12firefo...
... full support 16 full support 16 no support 10 — 16prefixed prefixed implemented with the vendor prefix: mozie partial support 10opera full support 15safari full support 7
webview android full support yes full support yes no support ?
... — 57prefixed prefixed implemented with the vendor prefix:
webkitchrome android full support 25 full support 25 no support 25 — 57prefixed prefixed implemented with the vendor prefix:
webkitfirefox android full support 22opera android full support 14safari ios full support 8samsung internet android full support 1.5 full support 1.5 no support 1.5 — 7.0prefixed prefixed implemented with the vendor prefix:
webkitlegend ...
IDBObjectStore.openCursor() - Web APIs
note: this feature is available in
web workers.
... desktopmobilechromeedgefirefoxinternet exploreroperasafariandroid
webviewchrome for androidfirefox for androidopera for androidsafari on iossamsung internetopencursorchrome full support 24 full support 24 no support 23 — 57prefixed prefixed implemented with the vendor prefix:
webkitedge full support 12fir...
... full support 16 full support 16 no support 10 — 16prefixed prefixed implemented with the vendor prefix: mozie partial support 10opera full support 15safari full support 7
webview android full support yes full support yes no support ?
... — 57prefixed prefixed implemented with the vendor prefix:
webkitchrome android full support 25 full support 25 no support 25 — 57prefixed prefixed implemented with the vendor prefix:
webkitfirefox android full support 22opera android full support 14safari ios full support 8samsung internet android full support 1.5 full support 1.5 no support 1.5 — 7.0prefixed prefixed implemented with the vendor prefix:
webkitlegend ...
IDBObjectStore.put() - Web APIs
note: this feature is available in
web workers.
... desktopmobilechromeedgefirefoxinternet exploreroperasafariandroid
webviewchrome for androidfirefox for androidopera for androidsafari on iossamsung internetputchrome full support 24 full support 24 no support 23 — 57prefixed prefixed implemented with the vendor prefix:
webkitedge full support 12firefox ...
... full support 16 full support 16 no support 10 — 16prefixed prefixed implemented with the vendor prefix: mozie partial support 10opera full support 15safari full support 7
webview android full support yes full support yes no support ?
... — 57prefixed prefixed implemented with the vendor prefix:
webkitchrome android full support 25 full support 25 no support 25 — 57prefixed prefixed implemented with the vendor prefix:
webkitfirefox android full support 22opera android full support 14safari ios full support 8samsung internet android full support 1.5 full support 1.5 no support 1.5 — 7.0prefixed prefixed implemented with the vendor prefix:
webkitlegend ...
IDBObjectStore.transaction - Web APIs
note: this feature is available in
web workers.
... desktopmobilechromeedgefirefoxinternet exploreroperasafariandroid
webviewchrome for androidfirefox for androidopera for androidsafari on iossamsung internettransactionchrome full support 24 full support 24 no support 23 — 57prefixed prefixed implemented with the vendor prefix:
webkitedge full support 12fi...
... full support 16 full support 16 no support 10 — 16prefixed prefixed implemented with the vendor prefix: mozie partial support 10opera full support 15safari full support 7
webview android full support yes full support yes no support ?
... — 57prefixed prefixed implemented with the vendor prefix:
webkitchrome android full support 25 full support 25 no support 25 — 57prefixed prefixed implemented with the vendor prefix:
webkitfirefox android full support 22opera android full support 14safari ios full support 8samsung internet android full support 1.5 full support 1.5 no support 1.5 — 7.0prefixed prefixed implemented with the vendor prefix:
webkitlegend ...
IDBOpenDBRequest.onblocked - Web APIs
note: this feature is available in
web workers.
... desktopmobilechromeedgefirefoxinternet exploreroperasafariandroid
webviewchrome for androidfirefox for androidopera for androidsafari on iossamsung internetonblockedchrome full support 24 full support 24 no support 23 — 57prefixed prefixed implemented with the vendor prefix:
webkitedge full support 12fire...
... full support 16 full support 16 no support 10 — 16prefixed prefixed implemented with the vendor prefix: mozie partial support 10opera full support 15safari full support 7
webview android full support yes full support yes no support ?
... — 57prefixed prefixed implemented with the vendor prefix:
webkitchrome android full support 25 full support 25 no support 25 — 57prefixed prefixed implemented with the vendor prefix:
webkitfirefox android full support 22opera android full support 14safari ios full support 8samsung internet android full support 1.5 full support 1.5 no support 1.5 — 7.0prefixed prefixed implemented with the vendor prefix:
webkitlegend ...
IDBOpenDBRequest.onupgradeneeded - Web APIs
note: this feature is available in
web workers.
... desktopmobilechromeedgefirefoxinternet exploreroperasafariandroid
webviewchrome for androidfirefox for androidopera for androidsafari on iossamsung internetonupgradeneededchrome full support 24 full support 24 no support 23 — 57prefixed prefixed implemented with the vendor prefix:
webkitedge full support ...
... full support 16 full support 16 no support 10 — 16prefixed prefixed implemented with the vendor prefix: mozie partial support 10opera full support 15safari full support 7
webview android full support yes full support yes no support ?
... — 57prefixed prefixed implemented with the vendor prefix:
webkitchrome android full support 25 full support 25 no support 25 — 57prefixed prefixed implemented with the vendor prefix:
webkitfirefox android full support 22opera android full support 14safari ios full support 8samsung internet android full support 1.5 full support 1.5 no support 1.5 — 7.0prefixed prefixed implemented with the vendor prefix:
webkitlegend ...
IDBTransaction.db - Web APIs
note: this feature is available in
web workers.
... desktopmobilechromeedgefirefoxinternet exploreroperasafariandroid
webviewchrome for androidfirefox for androidopera for androidsafari on iossamsung internetdbchrome full support 24 full support 24 no support 23 — 57prefixed prefixed implemented with the vendor prefix:
webkitedge full support 12firefox ...
... full support 16 full support 16 no support 10 — 16prefixed prefixed implemented with the vendor prefix: mozie partial support 10opera full support 15safari full support 7
webview android full support yes full support yes no support ?
... — 57prefixed prefixed implemented with the vendor prefix:
webkitchrome android full support 25 full support 25 no support 25 — 57prefixed prefixed implemented with the vendor prefix:
webkitfirefox android full support 22opera android full support 14safari ios full support 8samsung internet android full support 1.5 full support 1.5 no support 1.5 — 7.0prefixed prefixed implemented with the vendor prefix:
webkitlegend ...
IDBVersionChangeEvent.oldVersion - Web APIs
note: this feature is available in
web workers.
... desktopmobilechromeedgefirefoxinternet exploreroperasafariandroid
webviewchrome for androidfirefox for androidopera for androidsafari on iossamsung internetoldversionchrome full support 24 full support 24 no support 23 — 57prefixed prefixed implemented with the vendor prefix:
webkitedge full support 12fir...
... full support 16 full support 16 no support 10 — 16prefixed prefixed implemented with the vendor prefix: mozie partial support 10opera full support 15safari full support 7
webview android full support yes full support yes no support ?
... — 57prefixed prefixed implemented with the vendor prefix:
webkitchrome android full support 25 full support 25 no support 25 — 57prefixed prefixed implemented with the vendor prefix:
webkitfirefox android full support 22opera android full support 14safari ios full support 8samsung internet android full support 1.5 full support 1.5 no support 1.5 — 7.0prefixed prefixed implemented with the vendor prefix:
webkitlegend ...
IDBVersionChangeEvent.version - Web APIs
desktopmobilechromeedgefirefoxinternet exploreroperasafariandroid
webviewchrome for androidfirefox for androidopera for androidsafari on iossamsung internetversion deprecatednon-standardchrome full support 12edge full support ≤18firefox full support 16 full support 16 fu...
...ll support 10prefixed prefixed implemented with the vendor prefix: mozie no support noopera no support nosafari no support no
webview android full support yeschrome android full support 18firefox android full support 22opera android full support 22safari ios no support nosamsung internet android full support 1.0legend full support ...
...not for use in new
websites.deprecated.
... not for use in new
websites.requires a vendor prefix or different name for use.requires a vendor prefix or different name for use.
Browser storage limits and eviction criteria - Web APIs
there are a number of
web technologies that store data of one kind or another on the client-side (i.e., on your local disk).
... the process by which the browser works out how much space to allocate to
web data storage and what to delete when that limit is reached is not simple, and differs between browsers.
...we term them "quota clients" in this context: indexeddb asm.js caching cache api cookies note: in firefox,
web storage will soon start to use the same storage management tools too, as described in this document.
... in chrome/opera, the quota management api handles quota management for appcache, indexeddb,
websql, and file system api.
InstallTrigger - Web APIs
do not use it on production sites facing the
web: it will not work for every user.
...it is used for triggering the download and installation of an add-on (or anything packaged in an .xpi file) from a
web page, using javascript code to kick off the install process.
...in either case, you must trigger the installation process by creating a
web page script in which installtrigger methods download the specified xpi file and "trigger" the execution of the install.js script at the top level of that xpi.
...the following is a basic example of an install trigger on a
web page: xpi={'xpinstall dialog display name':'simple.xpi'}; installtrigger.install(xpi); you can also use the installtrigger object to install netscape 6/mozilla skins and language packs, and perform multiple-package installations with install.
MediaDevices.getUserMedia() - Web APIs
notreadableerror although the user granted permission to use the matching devices, a hardware error occurred at the operating system, browser, or
web page level which prevented access to the device.
...first, getusermedia() must always get user permission before opening any media gathering input such as a
webcam or microphone.
...if (navigator.mediadevices.getusermedia === undefined) { navigator.mediadevices.getusermedia = function(constraints) { // first get ahold of the legacy getusermedia, if present var getusermedia = navigator.
webkitgetusermedia || navigator.mozgetusermedia; // some browsers just don't implement it - return a rejected promise with an error // to keep a consistent interface if (!getusermedia) { return promise.reject(new error('getusermedia is not implemented in this browser')); } // otherwise, wrap the call to the old navigator.getusermedia with a promise return new promise(f...
... video.src = window.url.createobjecturl(stream); } video.onloadedmetadata = function(e) { video.play(); }; }) .catch(function(err) { console.log(err.name + ": " + err.message); }); frame rate lower frame-rates may be desirable in some cases, like
webrtc transmissions with bandwidth restrictions.
MediaRecorder.ignoreMutedMedia - Web APIs
desktopmobilechromeedgefirefoxinternet exploreroperasafariandroid
webviewchrome for androidfirefox for androidopera for androidsafari on iossamsung internetignoremutedmedia deprecatednon-standardchrome no support 49 — 57edge no support nofirefox ?
... ie no support noopera no support 36 — 44safari no support no
webview android no support 49 — 57chrome android no support 49 — 57firefox android ?
...not for use in new
websites.deprecated.
... not for use in new
websites.
MediaStreamAudioSourceNode - Web APIs
the mediastreamaudiosourcenode interface is a type of audionode which operates as an audio source whose media is received from a mediastream obtained using the
webrtc or media capture and streams apis.
... this media could be from a microphone (through getusermedia()) or from a remote peer on a
webrtc call (using the rtcpeerconnection's audio tracks).
... however, it's important to note that the rule establishing this ordering was added long after this interface was first introduced into the
web audio api.
... specification specification status comment
web audio apithe definition of 'mediastreamaudiosourcenode' in that specification.
Media Source API - Web APIs
the media source api, formally known as media source extensions (mse), provides functionality enabling plugin-free
web-based streaming media.
... media source extensions concepts and usage playing video and audio has been available in
web applications without plugins for a few years now, but the basic features offered have really only been useful for playing single whole tracks.
... live profile content can introduce latency due to its transcoding and broadcasting, so dash is not suitable for real time communication like
webrtc is.
... it can however support significantly more client connections than
webrtc.
Media Capture and Streams API (Media Stream) - Web APIs
the media capture and streams api, often called the media streams api or simply mediastream api, is an api related to
webrtc which provides support for streaming audio and video data.
...a non-local mediastream may be representing to a media element, like <video> or <audio>, a stream originating over the network, and obtained via the
webrtc rtcpeerconnection api, or a stream created using the
web audio api mediastreamaudiosourcenode.
...it can be a media elements, like <audio> or <video>, the
webrtc rtcpeerconnection api or a
web audio api mediastreamaudiosourcenode.
... capabilities, constraints, and settingsthe twin concepts of constraints and capabilities let the browser and
web site or app exchange information about what constrainable properties the browser's implementation supports and what values it supports for each one.
MessageEvent - Web APIs
web sockets (see the onmessage property of the
websocket interface).
...
webrtc data channels (see rtcdatachannel.onmessage).
... note: this feature is available in
web workers.
... <div id="interfacediagram" style="display: inline-block; position: relative; width: 100%; padding-bottom: 13.333333333333334%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 80" preserveaspectratio="xminymin meet"><a xlink:href="/docs/
web/api/event" target="_top"><rect x="1" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="38.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">event</text></a><polyline points="76,25 86,20 86,30 76,25" stroke="#d4dde4" fill="none"/><line x1="86" y1="25" x2="116" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/
web/api/messageevent" target...
Metadata - Web APIs
desktopmobilechromeedgefirefoxinternet exploreroperasafariandroid
webviewchrome for androidfirefox for androidopera for androidsafari on iossamsung internetmetadata experimentalnon-standardchrome full support 13prefixed full support 13prefixed prefixed implemented with the vendor prefix:
webkitedge full support ≤79prefixed ...
... full support ≤79prefixed prefixed implemented with the vendor prefix:
webkitfirefox no support noie no support noopera no support nosafari no support no
webview android no support nochrome android full support yesprefixed full support yesprefixed prefixed implemented with the vendor prefix:
webkitfirefox android no support noopera android no support nosa...
...fari ios no support nosamsung internet android full support yesprefixed full support yesprefixed prefixed implemented with the vendor prefix:
webkitmodificationtime experimentalnon-standardchrome full support 13edge full support ≤79firefox no support noie no support noopera no support nosafari no support no
webview android no support nochrome androi...
...-standardchrome full support 13edge full support ≤79firefox no support noie no support noopera no support nosafari no support no
webview android no support nochrome android full support yesfirefox android no support noopera android no support nosafari ios no support nosamsung internet android ...
MouseEvent - Web APIs
<div id="interfacediagram" style="display: inline-block; position: relative; width: 100%; padding-bottom: 11.666666666666666%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 70" preserveaspectratio="xminymin meet"><a xlink:href="/docs/
web/api/event" target="_top"><rect x="1" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="38.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">event</text></a><polyline points="76,25 86,20 86,30 76,25" stroke="#d4dde4" fill="none"/><line x1="86" y1="25" x2="116" y2="...
...25" stroke="#d4dde4"/><a xlink:href="/docs/
web/api/uievent" target="_top"><rect x="116" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="153.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">uievent</text></a><polyline points="191,25 201,20 201,30 191,25" stroke="#d4dde4" fill="none"/><line x1="201" y1="25" x2="231" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/
web/api/mouseevent" target="_top"><rect x="231" y="1" width="100" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="281" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">mouseevent</text...
... mouseevent.
webkitforce read only the amount of pressure applied when clicking mouseevent.x read only alias for mouseevent.clientx.
... mouseevent.y read only alias for mouseevent.clienty constants mouseevent.
webkit_force_at_mouse_down read only minimum force necessary for a normal click mouseevent.
webkit_force_at_force_mouse_down read only minimum force necessary for a force click methods this interface also inherits methods of its parents, uievent and event.
Navigator.share() - Web APIs
the navigator.share() method of the
web share api invokes the native sharing mechanism of the device.
... examples in our
web share test (see the source code) there is a button which, when clicked, invokes the
web share api to share mdn's url.
... 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 } }); sharing files to share files, first test for and call navigator.canshare().
...navigator.canshare({ files: filesarray })) { navigator.share({ files: filesarray, title: 'pictures', text: 'our pictures.', }) .then(() => console.log('share was successful.')) .catch((error) => console.log('sharing failed', error)); } else { console.log(`your system doesn't support sharing files.`); } specifications specification status comment
web share apithe definition of 'share()' in that specification.
Node - Web APIs
<div id="interfacediagram" style="display: inline-block; position: relative; width: 100%; padding-bottom: 11.666666666666666%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 70" preserveaspectratio="xminymin meet"><a xlink:href="/docs/
web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="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="2...
...5" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/
web/api/node" target="_top"><rect x="151" y="1" width="75" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="188.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">node</text></a></svg></div> a:hover text { fill: #0095dd; pointer-events: all;} properties in addition to the properties below, node inherits properties from its parent, eventtarget.
... node.baseuriobject read only (not available to
web content.) the nsiuri object representing the base uri for the element.
... realistic usage the following demonstrates a real-world use of the eachnode() function: searching for text on a
web-page.
OVR_multiview2.framebufferTextureMultiviewOVR() - Web APIs
the ovr_multiview2.framebuffertexturemultiviewovr() method of the
webgl api attaches a multiview texture to a
webglframebuffer.
... gl.color_attachment1 gl.color_attachment2 gl.color_attachment3 gl.color_attachment4 gl.color_attachment5 gl.color_attachment6 gl.color_attachment7 gl.color_attachment8 gl.color_attachment9 gl.color_attachment10 gl.color_attachment11 gl.color_attachment12 gl.color_attachment13 gl.color_attachment14 gl.color_attachment15 when using the
webgl_draw_buffers extension: ext.color_attachment0_
webgl (same as gl.color_attachment0) ext.color_attachment1_
webgl ext.color_attachment2_
webgl ext.color_attachment3_
webgl ext.color_attachment4_
webgl ext.color_attachment5_
webgl ext.color_attachment6_
webgl ext.color_attachment7_
webgl ext.color_attachment8_
webgl ext.color_attachment9_
webgl ext.
...color_attachment10_
webgl ext.color_attachment11_
webgl ext.color_attachment12_
webgl ext.color_attachment13_
webgl ext.color_attachment14_
webgl ext.color_attachment15_
webgl when using the
webgl_depth_texture extension: ext.depth_stencil_attachment: depth and stencil buffer data storage.
... texture a
webgltexture object whose image to attach.
OfflineAudioCompletionEvent.OfflineAudioCompletionEvent() - Web APIs
the offlineaudiocompletionevent() constructor of the
web audio api creates a new offlineaudiocompletionevent object instance.
... specifications specification status comment
web audio apithe definition of 'offlineaudiocompletionevent()' in that specification.
... desktopmobilechromeedgefirefoxinternet exploreroperasafariandroid
webviewchrome for androidfirefox for androidopera for androidsafari on iossamsung internetofflineaudiocompletionevent() constructorchrome full support 57notes full support 57notes notes before chrome 59, the default values were not supported.edge full support ≤79firefox full support ...
...
webview android full support 57notes full support 57notes notes before version 59, the default values were not supported.chrome android full support 57notes full support 57notes notes before chrome 59, the default values were not supported.firefox android full support 53opera android full support 42safari ios ?
OffscreenCanvas - Web APIs
this method returns an imagebitmap object, which can be used in a variety of
web apis and also in a second canvas without creating a transfer copy.
... var one = document.getelementbyid("one").getcontext("bitmaprenderer"); var two = document.getelementbyid("two").getcontext("bitmaprenderer"); var offscreen = new offscreencanvas(256, 256); var gl = offscreen.getcontext('
webgl'); // ...
... main.js (main thread code): var htmlcanvas = document.getelementbyid("canvas"); var offscreen = htmlcanvas.transfercontroltooffscreen(); var worker = new worker("offscreencanvas.js"); worker.postmessage({canvas: offscreen}, [offscreen]); offscreencanvas.js (worker code): onmessage = function(evt) { var canvas = evt.data.canvas; var gl = canvas.getcontext("
webgl"); // ...
...}; you can also use requestanimationframe in workers onmessage = function(evt) { const canvas = evt.data.canvas; const gl = canvas.getcontext("
webgl"); function render(time) { // ...
Page Visibility API - Web APIs
with tabbed browsing, there is a reasonable chance that any given
webpage is in the background and thus not visible to the user.
...for example, if your
web app is playing a video, it can pause the video when the user puts the tab into the background, and resume playback when the user returns to the tab.
... tabs running code that's using real-time network connections (
websockets and
webrtc) go unthrottled in order to avoid closing these connections timing out and getting unexpectedly closed.
...e name of the hidden property and the change event for visibility var hidden, visibilitychange; if (typeof document.hidden !== "undefined") { // opera 12.10 and firefox 18 and later support hidden = "hidden"; visibilitychange = "visibilitychange"; } else if (typeof document.mshidden !== "undefined") { hidden = "mshidden"; visibilitychange = "msvisibilitychange"; } else if (typeof document.
webkithidden !== "undefined") { hidden = "
webkithidden"; visibilitychange = "
webkitvisibilitychange"; } var videoelement = document.getelementbyid("videoelement"); // if the page is hidden, pause the video; // if the page is shown, play the video function handlevisibilitychange() { if (document[hidden]) { videoelement.pause(); } else { videoelement.play(); } } // warn if the brow...
Payment processing concepts - Web APIs
the payment request api makes it easy to handle payments in a
web site or app.
... payee (or merchant) the merchant—either a person or an organization—whose
web site or app wishes to receive money through the payment request api.
... payer the person or organization making a purchase using a
web site or app.
...in the end, the only thing that the
web site or app is responsible for is fetching the merchant's validation key and passing it into the event's complete() method.
PushEvent - Web APIs
desktopmobilechromeedgefirefoxinternet exploreroperasafariandroid
webviewchrome for androidfirefox for androidopera for androidsafari on iossamsung internetpushevent experimentalchrome full support 42edge full support 16disabled full support 16disabled disabled from version 16: this feature is behind the enable service workers pref...
... 44notes full support 44notes notes extended support releases (esr) before firefox 78 esr do not support service workers and the push api.ie no support noopera full support 37safari no support no
webview android no support nochrome android full support 42firefox android full support 44 full support 44 full support 48notes notes push enabled by default.opera android ...
... 44notes full support 44notes notes extended support releases (esr) before firefox 78 esr do not support service workers and the push api.ie no support noopera full support 37safari no support no
webview android no support nochrome android full support 42firefox android full support 44 full support 44 full support 48notes notes push enabled by default.opera android ...
... 44notes full support 44notes notes extended support releases (esr) before firefox 78 esr do not support service workers and the push api.ie no support noopera full support 44safari no support no
webview android no support nochrome android full support 57firefox android full support 44 full support 44 full support 48notes notes push enabled by default.opera android ...
RTCDataChannel: error event - Web APIs
a
webrtc error event is sent to an rtcdatachannel object's onerror error handler when an error occurs on the data channel.
...le to resolve address", "unrecognized sctp chunk type received", "invalid mandatory parameter", "unrecognized parameters", "no user data (sctp data chunk has no data)", "cookie received while shutting down", "restart of an association with new addresses", "user-initiated abort", "protocol 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": ...
...the error's name is rtcerror and the message is an error string specified by the
webrtc layer.
... specifications specification status comment
webrtc 1.0: real-time communication between browsersthe definition of 'error event' in that specification.
RTCDataChannel.negotiated - Web APIs
the read-only rtcdatachannel property negotiated indicates whether the rtcdatachannel's connection was negotiated by the
web app (true) or by the
webrtc layer (false).
... see creating a data channel in using
webrtc data channels for further information about this property.
... syntax var negotiated = adatachannel.negotiated; value true if the rtcdatachannel's connection was negotiated by the
web app itself; false if the negotiation was handled by the
webrtc layer.
... if (datachannel.negotiated) { shutdownremotechannel(datachannel.id); } specifications specification status comment
webrtc 1.0: real-time communication between browsersthe definition of 'rtcdatachannel.negotiated' in that specification.
RTCIceCandidate.usernameFragment - Web APIs
this avoids crosstalk among multiple ongoing ice sessions, but, more importantly, helps secure ice transactions (and all of
webrtc by extension) against attacks that might try to inject themselves into an ice exchange.
... example although the
webrtc infrastructure will filter out obsolete candidates for you after an ice restart, you can do it yourself if you're trying to absolutely minimize the number of messages going back and forth.
... when the
web app receives a message from the signaling server that includes a candidate to be added to the rtcpeerconnection, you can (and generally should) simply call addicecandidate().
... specifications specification status comment
webrtc 1.0: real-time communication between browsersthe definition of 'rtcicecandidate.usernamefragment' in that specification.
RTCRtpSender.setParameters() - Web APIs
in other words, setparameters() updates the configuration of the rtp transmission as well as the encoding configuration for a specific media track on the
webrtc connection.
...the available options are: degradationpreference specifies the preferred way the
webrtc layer should handle optimizing bandwidth against quality in constrained-bandwidth situations; the value comes from the rtcdegradationpreference enumerated string type, and the default is balanced.
... in addition, if a
webrtc error occurs while configuring or accessing the media, an rtcerror is thrown with its errordetail set to hardware-encoder-error.
... specifications specification status comment
webrtc 1.0: real-time communication between browsersthe definition of 'rtcrtpsender.setparameters()' in that specification.
RTCStats - Web APIs
the rtcstats dictionary is the basic statistics object used by
webrtc's statistics monitoring model, providing the properties required of all statistics data objects.
... the statistics type hierarchy the various dictionaries that are used to define the contents of the objects that contain each of the various types of statistics for
webrtc are structured in such a way that they build upon the core rtcstats dictionary, each layer adding more relevant information.
... rtcstats is the foundation of all
webrtc statistics objects rtcrtpstreamstats adds to rtcstats information that applies to all rtp endpoints (that is, both local and remote endpoints, and regardless of whether the endpoint is a sender or a receiver) rtcreceivedrtpstreamstats further adds statistics measured at the receiving end of an rtp stream, regardless of whether it's local or remote.
... specifications specification status comment
webrtc 1.0: real-time communication between browsersthe definition of 'rtcstats' in that specification.
RTCTrackEvent - Web APIs
the
webrtc api interface rtctrackevent represents the track event, which is sent when a new mediastreamtrack is added to an rtcrtpreceiver which is part of the rtcpeerconnection.
... this event is sent by the
webrtc layer to the
web site or application, so you will not typically need to instantiate an rtctrackevent yourself.
...you will probably not need to create new track events yourself, since they're typically created by the
webrtc infrastructure and sent to the connection's ontrack event handler.
... peerconnection.addeventlistener("track", e => { let videoelement = document.getelementbyid("videobox"); videoelement.srcobject = e.streams[0]; }, false); specifications specification status comment
webrtc 1.0: real-time communication between browsersthe definition of 'rtctrackevent' in that specification.
SVGAnimateElement - Web APIs
<div id="interfacediagram" style="display: inline-block; position: relative; width: 100%; padding-bottom: 23.333333333333332%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 140" preserveaspectratio="xminymin meet"><a xlink:href="/docs/
web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="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="2...
...5" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/
web/api/node" target="_top"><rect x="151" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="188.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">node</text></a><polyline points="226,25 236,20 236,30 226,25" stroke="#d4dde4" fill="none"/><line x1="236" y1="25" x2="266" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/
web/api/element" target="_top"><rect x="266" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="303.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">element</te...
...xt></a><polyline points="341,25 351,20 351,30 341,25" stroke="#d4dde4" fill="none"/><line x1="351" y1="25" x2="381" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/
web/api/svgelement" target="_top"><rect x="381" y="1" width="100" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="431" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">svgelement</text></a><polyline points="481,25 491,20 491,30 481,25" stroke="#d4dde4" fill="none"/><line x1="491" y1="25" x2="499" y2="25" stroke="#d4dde4"/><line x1="499" y1="25" x2="499" y2="90" stroke="#d4dde4"/><line x1="499" y1="90" x2="482" y2="90" stroke="#d4dde4"/><a xlink:href="/docs/
web/api/svganimationelement" target="_top"><rect x="291" y...
...="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="386" y="94" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">svganimationelement</text></a><polyline points="291,89 281,84 281,94 291,89" stroke="#d4dde4" fill="none"/><line x1="281" y1="89" x2="251" y2="89" stroke="#d4dde4"/><a xlink:href="/docs/
web/api/svganimateelement" target="_top"><rect x="81" y="65" width="170" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="166" y="94" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">svganimateelement</text></a></svg></div> a:hover text { fill: #0095dd; pointer-events: all;} propert...
SVGAnimateMotionElement - Web APIs
<div id="interfacediagram" style="display: inline-block; position: relative; width: 100%; padding-bottom: 23.333333333333332%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 140" preserveaspectratio="xminymin meet"><a xlink:href="/docs/
web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="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="2...
...5" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/
web/api/node" target="_top"><rect x="151" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="188.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">node</text></a><polyline points="226,25 236,20 236,30 226,25" stroke="#d4dde4" fill="none"/><line x1="236" y1="25" x2="266" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/
web/api/element" target="_top"><rect x="266" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="303.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">element</te...
...xt></a><polyline points="341,25 351,20 351,30 341,25" stroke="#d4dde4" fill="none"/><line x1="351" y1="25" x2="381" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/
web/api/svgelement" target="_top"><rect x="381" y="1" width="100" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="431" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">svgelement</text></a><polyline points="481,25 491,20 491,30 481,25" stroke="#d4dde4" fill="none"/><line x1="491" y1="25" x2="499" y2="25" stroke="#d4dde4"/><line x1="499" y1="25" x2="499" y2="90" stroke="#d4dde4"/><line x1="499" y1="90" x2="482" y2="90" stroke="#d4dde4"/><a xlink:href="/docs/
web/api/svganimationelement" target="_top"><rect x="291" y...
...="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="386" y="94" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">svganimationelement</text></a><polyline points="291,89 281,84 281,94 291,89" stroke="#d4dde4" fill="none"/><line x1="281" y1="89" x2="251" y2="89" stroke="#d4dde4"/><a xlink:href="/docs/
web/api/svganimatemotionelement" target="_top"><rect x="21" y="65" width="230" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="136" y="94" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">svganimatemotionelement</text></a></svg></div> a:hover text { fill: #0095dd; pointer-events: all;} ...
SVGAnimateTransformElement - Web APIs
<div id="interfacediagram" style="display: inline-block; position: relative; width: 100%; padding-bottom: 23.333333333333332%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 140" preserveaspectratio="xminymin meet"><a xlink:href="/docs/
web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="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="2...
...5" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/
web/api/node" target="_top"><rect x="151" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="188.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">node</text></a><polyline points="226,25 236,20 236,30 226,25" stroke="#d4dde4" fill="none"/><line x1="236" y1="25" x2="266" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/
web/api/element" target="_top"><rect x="266" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="303.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">element</te...
...xt></a><polyline points="341,25 351,20 351,30 341,25" stroke="#d4dde4" fill="none"/><line x1="351" y1="25" x2="381" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/
web/api/svgelement" target="_top"><rect x="381" y="1" width="100" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="431" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">svgelement</text></a><polyline points="481,25 491,20 491,30 481,25" stroke="#d4dde4" fill="none"/><line x1="491" y1="25" x2="499" y2="25" stroke="#d4dde4"/><line x1="499" y1="25" x2="499" y2="90" stroke="#d4dde4"/><line x1="499" y1="90" x2="482" y2="90" stroke="#d4dde4"/><a xlink:href="/docs/
web/api/svganimationelement" target="_top"><rect x="291" y...
...="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="386" y="94" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">svganimationelement</text></a><polyline points="291,89 281,84 281,94 291,89" stroke="#d4dde4" fill="none"/><line x1="281" y1="89" x2="251" y2="89" stroke="#d4dde4"/><a xlink:href="/docs/
web/api/svganimatetransformelement" target="_top"><rect x="-9" y="65" width="260" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="121" y="94" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">svganimatetransformelement</text></a></svg></div> a:hover text { fill: #0095dd; pointer-events: a...
SVGAnimatedString - Web APIs
desktopmobilechromeedgefirefoxinternet exploreroperasafariandroid
webviewchrome for androidfirefox for androidopera for androidsafari on iossamsung internetsvganimatedstringchrome full support yesedge full support ≤18firefox full support yesie no support noopera full sup...
...port yessafari full support yes
webview android full support yeschrome android no support nofirefox android full support yesopera android full support yessafari ios full support yessamsung internet android no support noanimvalchrome full support yesedge full support 12firefox full support yesie no support ...
... noopera full support yessafari full support yes
webview android full support yeschrome android no support nofirefox android full support yesopera android full support yessafari ios full support yessamsung internet android no support nobasevalchrome full support yesedge full support 12firefox full support ...
... yesie no support noopera full support yessafari full support yes
webview android full support yeschrome android no support nofirefox android full support yesopera android full support yessafari ios full support yessamsung internet android no support nolegend full support full support ...
SVGDefsElement - Web APIs
<div id="interfacediagram" style="display: inline-block; position: relative; width: 100%; padding-bottom: 23.333333333333332%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 140" preserveaspectratio="xminymin meet"><a xlink:href="/docs/
web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="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/node" target="_top"><rect x="151" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="188.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">node</text></a><polyline points="226,25 236,20 236,30 226,25" stroke="#d4dde4" fill="none"/><line x1="236" y1="25" x2="266" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/
web/api/element" target="_top"><rect x="266" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="303.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">element</text></a...
...><polyline points="341,25 351,20 351,30 341,25" stroke="#d4dde4" fill="none"/><line x1="351" y1="25" x2="381" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/
web/api/svgelement" target="_top"><rect x="381" y="1" width="100" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="431" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">svgelement</text></a><polyline points="481,25 491,20 491,30 481,25" stroke="#d4dde4" fill="none"/><line x1="491" y1="25" x2="499" y2="25" stroke="#d4dde4"/><line x1="499" y1="25" x2="499" y2="90" stroke="#d4dde4"/><line x1="499" y1="90" x2="482" y2="90" stroke="#d4dde4"/><a xlink:href="/docs/
web/api/svggraphicselement" target="_top"><rect x="301" y="65" w...
...t="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="391" y="94" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">svggraphicselement</text></a><polyline points="301,89 291,84 291,94 301,89" stroke="#d4dde4" fill="none"/><line x1="291" y1="89" x2="261" y2="89" stroke="#d4dde4"/><a xlink:href="/docs/
web/api/svgdefselement" target="_top"><rect x="121" y="65" width="140" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="191" y="94" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">svgdefselement</text></a></svg></div> a:hover text { fill: #0095dd; pointer-events: all;} properties ...
SVGFEFuncAElement - Web APIs
<div id="interfacediagram" style="display: inline-block; position: relative; width: 100%; padding-bottom: 23.333333333333332%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 140" preserveaspectratio="xminymin meet"><a xlink:href="/docs/
web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="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="2...
...5" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/
web/api/node" target="_top"><rect x="151" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="188.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">node</text></a><polyline points="226,25 236,20 236,30 226,25" stroke="#d4dde4" fill="none"/><line x1="236" y1="25" x2="266" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/
web/api/element" target="_top"><rect x="266" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="303.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">element</te...
...xt></a><polyline points="341,25 351,20 351,30 341,25" stroke="#d4dde4" fill="none"/><line x1="351" y1="25" x2="381" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/
web/api/svgelement" target="_top"><rect x="381" y="1" width="100" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="431" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">svgelement</text></a><polyline points="481,25 491,20 491,30 481,25" stroke="#d4dde4" fill="none"/><line x1="491" y1="25" x2="499" y2="25" stroke="#d4dde4"/><line x1="499" y1="25" x2="499" y2="90" stroke="#d4dde4"/><line x1="499" y1="90" x2="482" y2="90" stroke="#d4dde4"/><a xlink:href="/docs/
web/api/svgcomponenttransferfunctionelement" target="_top"...
...f" stroke="#d4dde4" stroke-width="2px" /><text x="306" y="94" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">svgcomponenttransferfunctionelement</text></a><polyline points="131,89 121,84 121,94 131,89" stroke="#d4dde4" fill="none"/><line x1="121" y1="89" x2="91" y2="89" stroke="#d4dde4"/><a xlink:href="/docs/
web/api/svgfefuncaelement" target="_top"><rect x="-79" y="65" width="170" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="6" y="94" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">svgfefuncaelement</text></a></svg></div> a:hover text { fill: #0095dd; pointer-events: all;} properti...
SVGFEFuncBElement - Web APIs
<div id="interfacediagram" style="display: inline-block; position: relative; width: 100%; padding-bottom: 23.333333333333332%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 140" preserveaspectratio="xminymin meet"><a xlink:href="/docs/
web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="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="2...
...5" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/
web/api/node" target="_top"><rect x="151" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="188.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">node</text></a><polyline points="226,25 236,20 236,30 226,25" stroke="#d4dde4" fill="none"/><line x1="236" y1="25" x2="266" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/
web/api/element" target="_top"><rect x="266" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="303.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">element</te...
...xt></a><polyline points="341,25 351,20 351,30 341,25" stroke="#d4dde4" fill="none"/><line x1="351" y1="25" x2="381" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/
web/api/svgelement" target="_top"><rect x="381" y="1" width="100" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="431" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">svgelement</text></a><polyline points="481,25 491,20 491,30 481,25" stroke="#d4dde4" fill="none"/><line x1="491" y1="25" x2="499" y2="25" stroke="#d4dde4"/><line x1="499" y1="25" x2="499" y2="90" stroke="#d4dde4"/><line x1="499" y1="90" x2="482" y2="90" stroke="#d4dde4"/><a xlink:href="/docs/
web/api/svgcomponenttransferfunctionelement" target="_top"...
...f" stroke="#d4dde4" stroke-width="2px" /><text x="306" y="94" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">svgcomponenttransferfunctionelement</text></a><polyline points="131,89 121,84 121,94 131,89" stroke="#d4dde4" fill="none"/><line x1="121" y1="89" x2="91" y2="89" stroke="#d4dde4"/><a xlink:href="/docs/
web/api/svgfefuncbelement" target="_top"><rect x="-79" y="65" width="170" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="6" y="94" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">svgfefuncbelement</text></a></svg></div> a:hover text { fill: #0095dd; pointer-events: all;} properti...
SVGFEFuncGElement - Web APIs
<div id="interfacediagram" style="display: inline-block; position: relative; width: 100%; padding-bottom: 23.333333333333332%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 140" preserveaspectratio="xminymin meet"><a xlink:href="/docs/
web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="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="2...
...5" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/
web/api/node" target="_top"><rect x="151" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="188.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">node</text></a><polyline points="226,25 236,20 236,30 226,25" stroke="#d4dde4" fill="none"/><line x1="236" y1="25" x2="266" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/
web/api/element" target="_top"><rect x="266" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="303.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">element</te...
...xt></a><polyline points="341,25 351,20 351,30 341,25" stroke="#d4dde4" fill="none"/><line x1="351" y1="25" x2="381" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/
web/api/svgelement" target="_top"><rect x="381" y="1" width="100" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="431" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">svgelement</text></a><polyline points="481,25 491,20 491,30 481,25" stroke="#d4dde4" fill="none"/><line x1="491" y1="25" x2="499" y2="25" stroke="#d4dde4"/><line x1="499" y1="25" x2="499" y2="90" stroke="#d4dde4"/><line x1="499" y1="90" x2="482" y2="90" stroke="#d4dde4"/><a xlink:href="/docs/
web/api/svgcomponenttransferfunctionelement" target="_top"...
...f" stroke="#d4dde4" stroke-width="2px" /><text x="306" y="94" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">svgcomponenttransferfunctionelement</text></a><polyline points="131,89 121,84 121,94 131,89" stroke="#d4dde4" fill="none"/><line x1="121" y1="89" x2="91" y2="89" stroke="#d4dde4"/><a xlink:href="/docs/
web/api/svgfefuncgelement" target="_top"><rect x="-79" y="65" width="170" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="6" y="94" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">svgfefuncgelement</text></a></svg></div> a:hover text { fill: #0095dd; pointer-events: all;} properti...
SVGFEFuncRElement - Web APIs
<div id="interfacediagram" style="display: inline-block; position: relative; width: 100%; padding-bottom: 23.333333333333332%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 140" preserveaspectratio="xminymin meet"><a xlink:href="/docs/
web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="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="2...
...5" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/
web/api/node" target="_top"><rect x="151" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="188.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">node</text></a><polyline points="226,25 236,20 236,30 226,25" stroke="#d4dde4" fill="none"/><line x1="236" y1="25" x2="266" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/
web/api/element" target="_top"><rect x="266" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="303.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">element</te...
...xt></a><polyline points="341,25 351,20 351,30 341,25" stroke="#d4dde4" fill="none"/><line x1="351" y1="25" x2="381" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/
web/api/svgelement" target="_top"><rect x="381" y="1" width="100" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="431" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">svgelement</text></a><polyline points="481,25 491,20 491,30 481,25" stroke="#d4dde4" fill="none"/><line x1="491" y1="25" x2="499" y2="25" stroke="#d4dde4"/><line x1="499" y1="25" x2="499" y2="90" stroke="#d4dde4"/><line x1="499" y1="90" x2="482" y2="90" stroke="#d4dde4"/><a xlink:href="/docs/
web/api/svgcomponenttransferfunctionelement" target="_top"...
...f" stroke="#d4dde4" stroke-width="2px" /><text x="306" y="94" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">svgcomponenttransferfunctionelement</text></a><polyline points="131,89 121,84 121,94 131,89" stroke="#d4dde4" fill="none"/><line x1="121" y1="89" x2="91" y2="89" stroke="#d4dde4"/><a xlink:href="/docs/
web/api/svgfefuncrelement" target="_top"><rect x="-79" y="65" width="170" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="6" y="94" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">svgfefuncrelement</text></a></svg></div> a:hover text { fill: #0095dd; pointer-events: all;} properti...
SVGForeignObjectElement - Web APIs
<div id="interfacediagram" style="display: inline-block; position: relative; width: 100%; padding-bottom: 23.333333333333332%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 140" preserveaspectratio="xminymin meet"><a xlink:href="/docs/
web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="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="2...
...5" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/
web/api/node" target="_top"><rect x="151" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="188.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">node</text></a><polyline points="226,25 236,20 236,30 226,25" stroke="#d4dde4" fill="none"/><line x1="236" y1="25" x2="266" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/
web/api/element" target="_top"><rect x="266" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="303.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">element</te...
...xt></a><polyline points="341,25 351,20 351,30 341,25" stroke="#d4dde4" fill="none"/><line x1="351" y1="25" x2="381" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/
web/api/svgelement" target="_top"><rect x="381" y="1" width="100" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="431" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">svgelement</text></a><polyline points="481,25 491,20 491,30 481,25" stroke="#d4dde4" fill="none"/><line x1="491" y1="25" x2="499" y2="25" stroke="#d4dde4"/><line x1="499" y1="25" x2="499" y2="90" stroke="#d4dde4"/><line x1="499" y1="90" x2="482" y2="90" stroke="#d4dde4"/><a xlink:href="/docs/
web/api/svggraphicselement" target="_top"><rect x="301" y=...
...t="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="391" y="94" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">svggraphicselement</text></a><polyline points="301,89 291,84 291,94 301,89" stroke="#d4dde4" fill="none"/><line x1="291" y1="89" x2="261" y2="89" stroke="#d4dde4"/><a xlink:href="/docs/
web/api/svgforeignobjectelement" target="_top"><rect x="31" y="65" width="230" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="146" y="94" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">svgforeignobjectelement</text></a></svg></div> a:hover text { fill: #0095dd; pointer-events: all;} ...
SVGGElement - Web APIs
<div id="interfacediagram" style="display: inline-block; position: relative; width: 100%; padding-bottom: 23.333333333333332%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 140" preserveaspectratio="xminymin meet"><a xlink:href="/docs/
web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="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/node" target="_top"><rect x="151" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="188.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">node</text></a><polyline points="226,25 236,20 236,30 226,25" stroke="#d4dde4" fill="none"/><line x1="236" y1="25" x2="266" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/
web/api/element" target="_top"><rect x="266" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="303.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">element</text></a><poly...
...line points="341,25 351,20 351,30 341,25" stroke="#d4dde4" fill="none"/><line x1="351" y1="25" x2="381" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/
web/api/svgelement" target="_top"><rect x="381" y="1" width="100" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="431" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">svgelement</text></a><polyline points="481,25 491,20 491,30 481,25" stroke="#d4dde4" fill="none"/><line x1="491" y1="25" x2="499" y2="25" stroke="#d4dde4"/><line x1="499" y1="25" x2="499" y2="90" stroke="#d4dde4"/><line x1="499" y1="90" x2="482" y2="90" stroke="#d4dde4"/><a xlink:href="/docs/
web/api/svggraphicselement" target="_top"><rect x="301" y="65" width="...
...t="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="391" y="94" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">svggraphicselement</text></a><polyline points="301,89 291,84 291,94 301,89" stroke="#d4dde4" fill="none"/><line x1="291" y1="89" x2="261" y2="89" stroke="#d4dde4"/><a xlink:href="/docs/
web/api/svggelement" target="_top"><rect x="151" y="65" width="110" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="206" y="94" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">svggelement</text></a></svg></div> a:hover text { fill: #0095dd; pointer-events: all;} properties this i...
SVGGeometryElement - Web APIs
<div id="interfacediagram" style="display: inline-block; position: relative; width: 100%; padding-bottom: 23.333333333333332%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 140" preserveaspectratio="xminymin meet"><a xlink:href="/docs/
web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="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="2...
...5" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/
web/api/node" target="_top"><rect x="151" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="188.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">node</text></a><polyline points="226,25 236,20 236,30 226,25" stroke="#d4dde4" fill="none"/><line x1="236" y1="25" x2="266" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/
web/api/element" target="_top"><rect x="266" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="303.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">element</te...
...xt></a><polyline points="341,25 351,20 351,30 341,25" stroke="#d4dde4" fill="none"/><line x1="351" y1="25" x2="381" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/
web/api/svgelement" target="_top"><rect x="381" y="1" width="100" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="431" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">svgelement</text></a><polyline points="481,25 491,20 491,30 481,25" stroke="#d4dde4" fill="none"/><line x1="491" y1="25" x2="499" y2="25" stroke="#d4dde4"/><line x1="499" y1="25" x2="499" y2="90" stroke="#d4dde4"/><line x1="499" y1="90" x2="482" y2="90" stroke="#d4dde4"/><a xlink:href="/docs/
web/api/svggraphicselement" target="_top"><rect x="301" y=...
...t="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="391" y="94" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">svggraphicselement</text></a><polyline points="301,89 291,84 291,94 301,89" stroke="#d4dde4" fill="none"/><line x1="291" y1="89" x2="261" y2="89" stroke="#d4dde4"/><a xlink:href="/docs/
web/api/svggeometryelement" target="_top"><rect x="81" y="65" width="180" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="171" y="94" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">svggeometryelement</text></a></svg></div> a:hover text { fill: #0095dd; pointer-events: all;} note...
SVGImageElement - Web APIs
<div id="interfacediagram" style="display: inline-block; position: relative; width: 100%; padding-bottom: 23.333333333333332%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 140" preserveaspectratio="xminymin meet"><a xlink:href="/docs/
web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="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" x...
...2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/
web/api/node" target="_top"><rect x="151" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="188.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">node</text></a><polyline points="226,25 236,20 236,30 226,25" stroke="#d4dde4" fill="none"/><line x1="236" y1="25" x2="266" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/
web/api/element" target="_top"><rect x="266" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="303.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">element</text><...
.../a><polyline points="341,25 351,20 351,30 341,25" stroke="#d4dde4" fill="none"/><line x1="351" y1="25" x2="381" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/
web/api/svgelement" target="_top"><rect x="381" y="1" width="100" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="431" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">svgelement</text></a><polyline points="481,25 491,20 491,30 481,25" stroke="#d4dde4" fill="none"/><line x1="491" y1="25" x2="499" y2="25" stroke="#d4dde4"/><line x1="499" y1="25" x2="499" y2="90" stroke="#d4dde4"/><line x1="499" y1="90" x2="482" y2="90" stroke="#d4dde4"/><a xlink:href="/docs/
web/api/svggraphicselement" target="_top"><rect x="301" y="65"...
...t="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="391" y="94" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">svggraphicselement</text></a><polyline points="301,89 291,84 291,94 301,89" stroke="#d4dde4" fill="none"/><line x1="291" y1="89" x2="261" y2="89" stroke="#d4dde4"/><a xlink:href="/docs/
web/api/svgimageelement" target="_top"><rect x="111" y="65" width="150" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="186" y="94" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">svgimageelement</text></a></svg></div> a:hover text { fill: #0095dd; pointer-events: all;} properties...
SVGLinearGradientElement - Web APIs
<div id="interfacediagram" style="display: inline-block; position: relative; width: 100%; padding-bottom: 23.333333333333332%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 140" preserveaspectratio="xminymin meet"><a xlink:href="/docs/
web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="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="2...
...5" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/
web/api/node" target="_top"><rect x="151" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="188.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">node</text></a><polyline points="226,25 236,20 236,30 226,25" stroke="#d4dde4" fill="none"/><line x1="236" y1="25" x2="266" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/
web/api/element" target="_top"><rect x="266" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="303.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">element</te...
...xt></a><polyline points="341,25 351,20 351,30 341,25" stroke="#d4dde4" fill="none"/><line x1="351" y1="25" x2="381" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/
web/api/svgelement" target="_top"><rect x="381" y="1" width="100" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="431" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">svgelement</text></a><polyline points="481,25 491,20 491,30 481,25" stroke="#d4dde4" fill="none"/><line x1="491" y1="25" x2="499" y2="25" stroke="#d4dde4"/><line x1="499" y1="25" x2="499" y2="90" stroke="#d4dde4"/><line x1="499" y1="90" x2="482" y2="90" stroke="#d4dde4"/><a xlink:href="/docs/
web/api/svggradientelement" target="_top"><rect x="301" y=...
...t="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="391" y="94" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">svggradientelement</text></a><polyline points="301,89 291,84 291,94 301,89" stroke="#d4dde4" fill="none"/><line x1="291" y1="89" x2="261" y2="89" stroke="#d4dde4"/><a xlink:href="/docs/
web/api/svglineargradientelement" target="_top"><rect x="21" y="65" width="240" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="141" y="94" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">svglineargradientelement</text></a></svg></div> a:hover text { fill: #0095dd; pointer-events: all;}...
SVGRadialGradientElement - Web APIs
<div id="interfacediagram" style="display: inline-block; position: relative; width: 100%; padding-bottom: 23.333333333333332%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 140" preserveaspectratio="xminymin meet"><a xlink:href="/docs/
web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="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="2...
...5" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/
web/api/node" target="_top"><rect x="151" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="188.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">node</text></a><polyline points="226,25 236,20 236,30 226,25" stroke="#d4dde4" fill="none"/><line x1="236" y1="25" x2="266" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/
web/api/element" target="_top"><rect x="266" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="303.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">element</te...
...xt></a><polyline points="341,25 351,20 351,30 341,25" stroke="#d4dde4" fill="none"/><line x1="351" y1="25" x2="381" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/
web/api/svgelement" target="_top"><rect x="381" y="1" width="100" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="431" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">svgelement</text></a><polyline points="481,25 491,20 491,30 481,25" stroke="#d4dde4" fill="none"/><line x1="491" y1="25" x2="499" y2="25" stroke="#d4dde4"/><line x1="499" y1="25" x2="499" y2="90" stroke="#d4dde4"/><line x1="499" y1="90" x2="482" y2="90" stroke="#d4dde4"/><a xlink:href="/docs/
web/api/svggradientelement" target="_top"><rect x="301" y=...
...t="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="391" y="94" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">svggradientelement</text></a><polyline points="301,89 291,84 291,94 301,89" stroke="#d4dde4" fill="none"/><line x1="291" y1="89" x2="261" y2="89" stroke="#d4dde4"/><a xlink:href="/docs/
web/api/svgradialgradientelement" target="_top"><rect x="21" y="65" width="240" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="141" y="94" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">svgradialgradientelement</text></a></svg></div> a:hover text { fill: #0095dd; pointer-events: all;}...
SVGSVGElement - Web APIs
<div id="interfacediagram" style="display: inline-block; position: relative; width: 100%; padding-bottom: 23.333333333333332%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 140" preserveaspectratio="xminymin meet"><a xlink:href="/docs/
web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="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="2...
...5" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/
web/api/node" target="_top"><rect x="151" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="188.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">node</text></a><polyline points="226,25 236,20 236,30 226,25" stroke="#d4dde4" fill="none"/><line x1="236" y1="25" x2="266" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/
web/api/element" target="_top"><rect x="266" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="303.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">element</te...
...xt></a><polyline points="341,25 351,20 351,30 341,25" stroke="#d4dde4" fill="none"/><line x1="351" y1="25" x2="381" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/
web/api/svgelement" target="_top"><rect x="381" y="1" width="100" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="431" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">svgelement</text></a><polyline points="481,25 491,20 491,30 481,25" stroke="#d4dde4" fill="none"/><line x1="491" y1="25" x2="499" y2="25" stroke="#d4dde4"/><line x1="499" y1="25" x2="499" y2="90" stroke="#d4dde4"/><line x1="499" y1="90" x2="482" y2="90" stroke="#d4dde4"/><a xlink:href="/docs/
web/api/svggraphicselement" target="_top"><rect x="301" y=...
...t="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="391" y="94" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">svggraphicselement</text></a><polyline points="301,89 291,84 291,94 301,89" stroke="#d4dde4" fill="none"/><line x1="291" y1="89" x2="261" y2="89" stroke="#d4dde4"/><a xlink:href="/docs/
web/api/svgsvgelement" target="_top"><rect x="131" y="65" width="130" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="196" y="94" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">svgsvgelement</text></a></svg></div> a:hover text { fill: #0095dd; pointer-events: all;} properties th...
SVGSetElement - Web APIs
<div id="interfacediagram" style="display: inline-block; position: relative; width: 100%; padding-bottom: 23.333333333333332%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 140" preserveaspectratio="xminymin meet"><a xlink:href="/docs/
web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="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="1...
...51" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/
web/api/node" target="_top"><rect x="151" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="188.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">node</text></a><polyline points="226,25 236,20 236,30 226,25" stroke="#d4dde4" fill="none"/><line x1="236" y1="25" x2="266" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/
web/api/element" target="_top"><rect x="266" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="303.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">element</text></a><...
...polyline points="341,25 351,20 351,30 341,25" stroke="#d4dde4" fill="none"/><line x1="351" y1="25" x2="381" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/
web/api/svgelement" target="_top"><rect x="381" y="1" width="100" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="431" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">svgelement</text></a><polyline points="481,25 491,20 491,30 481,25" stroke="#d4dde4" fill="none"/><line x1="491" y1="25" x2="499" y2="25" stroke="#d4dde4"/><line x1="499" y1="25" x2="499" y2="90" stroke="#d4dde4"/><line x1="499" y1="90" x2="482" y2="90" stroke="#d4dde4"/><a xlink:href="/docs/
web/api/svganimationelement" target="_top"><rect x="291" y="65" wi...
...="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="386" y="94" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">svganimationelement</text></a><polyline points="291,89 281,84 281,94 291,89" stroke="#d4dde4" fill="none"/><line x1="281" y1="89" x2="251" y2="89" stroke="#d4dde4"/><a xlink:href="/docs/
web/api/svgsetelement" target="_top"><rect x="121" y="65" width="130" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="186" y="94" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">svgsetelement</text></a></svg></div> a:hover text { fill: #0095dd; pointer-events: all;} properties th...
SVGSwitchElement - Web APIs
<div id="interfacediagram" style="display: inline-block; position: relative; width: 100%; padding-bottom: 23.333333333333332%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 140" preserveaspectratio="xminymin meet"><a xlink:href="/docs/
web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="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/node" target="_top"><rect x="151" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="188.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">node</text></a><polyline points="226,25 236,20 236,30 226,25" stroke="#d4dde4" fill="none"/><line x1="236" y1="25" x2="266" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/
web/api/element" target="_top"><rect x="266" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="303.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">element</text...
...></a><polyline points="341,25 351,20 351,30 341,25" stroke="#d4dde4" fill="none"/><line x1="351" y1="25" x2="381" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/
web/api/svgelement" target="_top"><rect x="381" y="1" width="100" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="431" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">svgelement</text></a><polyline points="481,25 491,20 491,30 481,25" stroke="#d4dde4" fill="none"/><line x1="491" y1="25" x2="499" y2="25" stroke="#d4dde4"/><line x1="499" y1="25" x2="499" y2="90" stroke="#d4dde4"/><line x1="499" y1="90" x2="482" y2="90" stroke="#d4dde4"/><a xlink:href="/docs/
web/api/svggraphicselement" target="_top"><rect x="301" y="6...
...t="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="391" y="94" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">svggraphicselement</text></a><polyline points="301,89 291,84 291,94 301,89" stroke="#d4dde4" fill="none"/><line x1="291" y1="89" x2="261" y2="89" stroke="#d4dde4"/><a xlink:href="/docs/
web/api/svgswitchelement" target="_top"><rect x="101" y="65" width="160" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="181" y="94" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">svgswitchelement</text></a></svg></div> a:hover text { fill: #0095dd; pointer-events: all;} properti...
SVGTextContentElement - Web APIs
<div id="interfacediagram" style="display: inline-block; position: relative; width: 100%; padding-bottom: 20%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 120" preserveaspectratio="xminymin meet"><a xlink:href="/docs/
web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="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="2...
...5" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/
web/api/node" target="_top"><rect x="151" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="188.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">node</text></a><polyline points="226,25 236,20 236,30 226,25" stroke="#d4dde4" fill="none"/><line x1="236" y1="25" x2="266" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/
web/api/element" target="_top"><rect x="266" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="303.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">element</te...
...xt></a><polyline points="341,25 351,20 351,30 341,25" stroke="#d4dde4" fill="none"/><line x1="351" y1="25" x2="381" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/
web/api/svgelement" target="_top"><rect x="381" y="1" width="100" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="431" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">svgelement</text></a><polyline points="481,25 491,20 491,30 481,25" stroke="#d4dde4" fill="none"/><line x1="491" y1="25" x2="499" y2="25" stroke="#d4dde4"/><line x1="499" y1="25" x2="499" y2="90" stroke="#d4dde4"/><line x1="499" y1="90" x2="482" y2="90" stroke="#d4dde4"/><a xlink:href="/docs/
web/api/svggraphicselement" target="_top"><rect x="301" y=...
...t="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="391" y="94" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">svggraphicselement</text></a><polyline points="301,89 291,84 291,94 301,89" stroke="#d4dde4" fill="none"/><line x1="291" y1="89" x2="261" y2="89" stroke="#d4dde4"/><a xlink:href="/docs/
web/api/svgtextcontentelement" target="_top"><rect x="51" y="65" width="210" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="156" y="94" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">svgtextcontentelement</text></a></svg></div> a:hover text { fill: #0095dd; pointer-events: all;} ...
SVGUseElement - Web APIs
<div id="interfacediagram" style="display: inline-block; position: relative; width: 100%; padding-bottom: 23.333333333333332%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 140" preserveaspectratio="xminymin meet"><a xlink:href="/docs/
web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="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="2...
...5" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/
web/api/node" target="_top"><rect x="151" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="188.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">node</text></a><polyline points="226,25 236,20 236,30 226,25" stroke="#d4dde4" fill="none"/><line x1="236" y1="25" x2="266" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/
web/api/element" target="_top"><rect x="266" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="303.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">element</te...
...xt></a><polyline points="341,25 351,20 351,30 341,25" stroke="#d4dde4" fill="none"/><line x1="351" y1="25" x2="381" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/
web/api/svgelement" target="_top"><rect x="381" y="1" width="100" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="431" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">svgelement</text></a><polyline points="481,25 491,20 491,30 481,25" stroke="#d4dde4" fill="none"/><line x1="491" y1="25" x2="499" y2="25" stroke="#d4dde4"/><line x1="499" y1="25" x2="499" y2="90" stroke="#d4dde4"/><line x1="499" y1="90" x2="482" y2="90" stroke="#d4dde4"/><a xlink:href="/docs/
web/api/svggraphicselement" target="_top"><rect x="301" y=...
...t="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="391" y="94" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">svggraphicselement</text></a><polyline points="301,89 291,84 291,94 301,89" stroke="#d4dde4" fill="none"/><line x1="291" y1="89" x2="261" y2="89" stroke="#d4dde4"/><a xlink:href="/docs/
web/api/svguseelement" target="_top"><rect x="131" y="65" width="130" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="196" y="94" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">svguseelement</text></a></svg></div> a:hover text { fill: #0095dd; pointer-events: all;} properties th...
Using the Screen Capture API - Web APIs
in this article, we will examine how to use the screen capture api and its getdisplaymedia() method to capture part or all of a screen for streaming, recording, or sharing during a
webrtc conference session.
... note: it may be useful to note that recent versions of the
webrtc adapter.js shim include implementations of getdisplaymedia() to enable screen sharing on browsers that support it but do not implement the current standard api.
...this ensures that
web applications can't force the user to share specific content by restricting the source list until only one item is left.
... capturing audio is always optional, and even when
web content requests a stream with both audio and video, the returned mediastream may still have only one video track, with no audio.
Server-sent events - Web APIs
traditionally, a
web page has to send a request to the server to receive new data; that is, the page requests data from the server.
... with server-sent events, it's possible for a server to send new data to a
web page at any time, by pushing messages to the
web page.
... these incoming messages can be treated as events + data inside the
web page.
... living standard see also tools eventsource polyfill for node.js remy sharp’s eventsource polyfill yaffle’s eventsource polyfill rick waldron’s jquery plugin intercooler.js declarative sse support related topics ajax javascript
websockets other resources a twitter like application powered by server-sent events and its code on github.
Using Service Workers - Web APIs
the premise of service workers one overriding problem that
web users have suffered with for years is loss of connectivity.
... the best
web app in the world will provide a terrible user experience if you can’t download it.
...this is already available with native apps, which is one of the main reasons native apps are often chosen over
web apps.
... chrome canary: go to chrome://flags and turn on experimental-
web-platform-features; restart browser (note that some features are now enabled by default in chrome.) opera: go to opera://flags and enable support for serviceworker; restart browser.
Service Worker API - Web APIs
service workers essentially act as proxy servers that sit between
web applications, the browser, and the network (when available).
...it takes the form of a javascript file that can control the
web-page/site that it is associated with, intercepting and modifying navigation and resource requests, and caching resources in a very granular fashion to give you complete control over how your app behaves in certain situations (the most obvious one being when the network is not available).
... in the future, service workers will be able to do a number of other useful things for the
web platform that will bring it closer towards native app viability.
...service worker messages will now use the messageevent interface, for consistency with other
web messaging features.
SpeechRecognition - Web APIs
the speechrecognition interface of the
web speech api is the controller interface for the recognition service; this also handles the speechrecognitionevent sent from the recognition service.
... note: on some browsers, like chrome, using speech recognition on a
web page involves a server-based recognition engine.
... your audio is sent to a
web service for recognition processing, so it won't work offline.
... document.queryselector('html'); document.body.onclick = function() { recognition.start(); console.log('ready to receive a color command.'); } recognition.onresult = function(event) { var color = event.results[0][0].transcript; diagnostic.textcontent = 'result received: ' + color; bg.style.backgroundcolor = color; } specifications specification status comment
web speech apithe definition of 'speechrecognition' in that specification.
StereoPannerNode.StereoPannerNode() - Web APIs
the stereopannernode() constructor of the
web audio api creates a new stereopannernode object which is an audionode that represents a simple stereo panner node that can be used to pan an audio stream left or right.
... specifications specification status comment
web audio apithe definition of 'stereopannernode()' in that specification.
... desktopmobilechromeedgefirefoxinternet exploreroperasafariandroid
webviewchrome for androidfirefox for androidopera for androidsafari on iossamsung internetstereopannernode() constructorchrome full support 55notes full support 55notes notes before chrome 59, the default values were not supported.edge full support ≤79firefox full support 53ie ...
... no support noopera full support 42safari no support no
webview android full support 55notes full support 55notes notes before chrome 59, the default values were not supported.chrome android full support 55notes full support 55notes notes before chrome 59, the default values were not supported.firefox android full support 53opera android full support 42safari ios no support ...
Storage Access API - Web APIs
as a consequence, users who wish to continue to interact with embedded content are forced to greatly relax their blocking policy for resources loaded from all embedded origins and possibly across all
websites.
...the embedding
website needs to add this to allow storage access requests to be successful, along with allow-scripts and allow-same-origin to allow it to call the api, and execute in an origin that can have cookies: <iframe sandbox="allow-storage-access-by-user-activation allow-scripts allow-same-origin"> ...
... safari implementation differences although the api surface is the same,
websites using the storage access api should expect differences in the level and extent of storage access they receive between firefox and safari.
... this includes access to apis such as
web storage, indexeddb, dom cache, and so on.
UIEvent.initUIEvent() - Web APIs
desktopmobilechromeedgefirefoxinternet exploreroperasafariandroid
webviewchrome for androidfirefox for androidopera for androidsafari on iossamsung internetinituievent deprecatednon-standardchrome full support yesedge full support 12firefox full support yesie ?
...
webview android full support yeschrome android full support yesfirefox android full support yesopera android full support yessafari ios ?
...not for use in new
websites.deprecated.
... not for use in new
websites.
WaveShaperNode.WaveShaperNode() - Web APIs
the waveshapernode() constructor of the
web audio api creates a new waveshapernode object which is an audionode that represents a non-linear distorter.
... specifications specification status comment
web audio apithe definition of 'waveshapernode()' in that specification.
... desktopmobilechromeedgefirefoxinternet exploreroperasafariandroid
webviewchrome for androidfirefox for androidopera for androidsafari on iossamsung internetwaveshapernode() constructorchrome full support 55notes full support 55notes notes before chrome 59, the default values were not supported.edge full support ≤79firefox full support 53ie ...
...
webview android full support 55notes full support 55notes notes before chrome 59, the default values were not supported.chrome android full support 55notes full support 55notes notes before chrome 59, the default values were not supported.firefox android full support 53opera android full support 42safari ios ?
Hello vertex attributes - Web APIs
« previousnext » this
webgl example demonstrates how to combine shader programming and user interaction by sending user input to the shader using vertex attributes.
... #version 100 precision highp float; attribute float position; void main() { gl_position = vec4(position, 0.0, 0.0, 1.0); gl_pointsize = 64.0; } </script> <script type="x-shader/x-fragment" id="fragment-shader"> #version 100 precision mediump float; void main() { gl_fragcolor = vec4(0.18, 0.54, 0.34, 1.0); } </script> ;(function(){ "use strict" window.addeventlistener("load", setup
webgl, false); var gl, program; function setup
webgl (evt) { window.removeeventlistener(evt.type, setup
webgl, false); if (!(gl = getrenderingcontext())) return; var source = document.queryselector("#vertex-shader").innerhtml; var vertexshader = gl.createshader(gl.vertex_shader); gl.shadersource(vertexshader,source); gl.compileshader(vertexshader); source = document.queryselector("...
..." + "error log: " + linkerrlog; return; } initializeattributes(); gl.useprogram(program); gl.drawarrays(gl.points, 0, 1); document.queryselector("canvas").addeventlistener("click", function (evt) { var clickxrelativtocanvas = evt.pagex - evt.target.offsetleft; var clickxin
webglcoords = 2.0 * (clickxrelativtocanvas- gl.drawingbufferwidth/2) / gl.drawingbufferwidth; gl.bufferdata(gl.array_buffer, new float32array([clickxin
webglcoords]), gl.static_draw); gl.drawarrays(gl.points, 0, 1); }, false); } var buffer; function initializeattributes() { gl.enablevertexattribarray(0); buffer = gl.createbuffer(); gl.bindbuffer(gl.ar...
... false, 0, 0); } window.addeventlistener("beforeunload", cleanup, true); function cleanup() { gl.useprogram(null); if (buffer) gl.deletebuffer(buffer); if (program) gl.deleteprogram(program); } function getrenderingcontext() { var canvas = document.queryselector("canvas"); canvas.width = canvas.clientwidth; canvas.height = canvas.clientheight; var gl = canvas.getcontext("
webgl") || canvas.getcontext("experimental-
webgl"); if (!gl) { var paragraph = document.queryselector("p"); paragraph.innerhtml = "failed to get
webgl context." + "your browser or device may not support
webgl."; return null; } gl.viewport(0, 0, gl.drawingbufferwidth, gl.drawingbufferheight); gl.clearcolor(0.0, 0.0, 0.0, 1.0); gl.clear(gl.color_buffer_bit); return...
Textures from code - Web APIs
« previousnext » this
webgl example provides a simple demonstration of procedural texturing with fragment shaders.
... that is, using code to generate textures for use in shading
webgl objects.
...x-shader/x-fragment" id="fragment-shader"> #version 100 precision mediump float; void main() { vec2 fragmentposition = 2.0*gl_pointcoord - 1.0; float distance = length(fragmentposition); float distancesqrd = distance * distance; gl_fragcolor = vec4( 0.2/distancesqrd, 0.1/distancesqrd, 0.0, 1.0 ); } </script> ;(function(){ "use strict" window.addeventlistener("load", setup
webgl, false); var gl, program; function setup
webgl (evt) { window.removeeventlistener(evt.type, setup
webgl, false); if (!(gl = getrenderingcontext())) return; var source = document.queryselector("#vertex-shader").innerhtml; var vertexshader = gl.createshader(gl.vertex_shader); gl.shadersource(vertexshader,source); gl.compileshader(vertexshader); source = document.queryselector("...
..., 0.0]), gl.static_draw); gl.vertexattribpointer(0, 2, gl.float, false, 0, 0); } function cleanup() { gl.useprogram(null); if (buffer) gl.deletebuffer(buffer); if (program) gl.deleteprogram(program); } function getrenderingcontext() { var canvas = document.queryselector("canvas"); canvas.width = canvas.clientwidth; canvas.height = canvas.clientheight; var gl = canvas.getcontext("
webgl") || canvas.getcontext("experimental-
webgl"); if (!gl) { var paragraph = document.queryselector("p"); paragraph.innerhtml = "failed to get
webgl context." + "your browser or device may not support
webgl."; return null; } gl.viewport(0, 0, gl.drawingbufferwidth, gl.drawingbufferheight); gl.clearcolor(0.0, 0.0, 0.0, 1.0); gl.clear(gl.color_buffer_bit); return...
High-level guides - Web APIs
webrtc (
web real-time communications) is a broad, multi-component system for setting up and operating complex audio, video, and data channels across networks among two or more peers on the
web.
... the high-level guides listed below introduce
webrtc technology from a top-down perspective, describing the overall architecture, the life cycle of a
webrtc connection, and basic security and technological issues you might run into as you explore and build
web content or apps using the
webrtc api.
... in addition, you'll find suggestions as to tools, libraries, and frameworks that might be helpful and compatibility information so you know which parts of the overall suite of
webrtc features can be safely used given your target audience.
... when you're ready to explore
webrtc in more depth, be sure to take a look at our low-level guide to
webrtc.
A simple RTCDataChannel sample - Web APIs
the rtcdatachannel interface is a feature of the
webrtc api which lets you open a channel between two peers over which you may send and receive arbitrary data.
... the api is intentionally similar to the
websocket api, so that the same programming model can be used for each.
... the
webrtc api makes heavy use of promises.
... next steps you should try out this example and take a look at the
webrtc-simple-datachannel source code, available on github.
Using bounded reference spaces - Web APIs
among the various reference spaces available in the
webxr set of apis, the bounded-floor reference space is somehwat unique.
...sionstarted(session) { xrsession = session; spacetype = "bounded-floor"; xrsession.requestreferencespace(spacetype) .then(onrefspacecreated) .catch(() => { spacetype = "local-floor"; xrsession.requestreferencespace(spacetype) .then(onrefspacecreated) .catch(handleerror); }); } function onrefspacecreated(refspace) { xrsession.updaterenderstate({ baselayer: new xr
webgllayer(xrsession, gl) }); // now set up matrices, create a secondary reference space to // transform the viewer's pose, and so forth.
... if upon attempting to create a local-floor reference space, the user's xr device doesn't have built-in support for determining floor level, the
webxr layer will still create a local-floor space.
... this would change the onrefspacecreated() method from the above snippet to: function onrefspacecreated(refspace) { xrsession.updaterenderstate({ baselayer: new xr
webgllayer(xrsession, gl) }); let startposition = vec3.fromvalues(0, 1.5, 0); const startorientation = vec3.fromvalues(0, 0, 1.0); xrreferencespace = xrreferencespace.getoffsetreferencespace( new xrrigidtransform(startposition, startorientation)); xrsession.requestanimationframe(ondrawframe); } in this code, executed after the reference space has been created, we create an xrr...
Attestation and Assertion - Web APIs
there are two different types of certificates used in
webauthn for registration and authentication.
... the attestation is returned through the
webauthn api as the authenticatorattestationresponse.
...the pre-defined attestation formats in
webauthn are: packed - a generic attestation format that is commonly used by devices whose sole function is as a
webauthn authenticator, such as security keys.
... the assertion is returned through the
webauthn api as the authenticatorassertionresponse.
Window.releaseEvents() - Web APIs
desktopmobilechromeedgefirefoxinternet exploreroperasafariandroid
webviewchrome for androidfirefox for androidopera for androidsafari on iossamsung internetreleaseevents deprecatednon-standardchrome full support yesedge full support 12firefox full support yesie ?
... opera full support yessafari full support yes
webview android full support yeschrome android full support yesfirefox android full support yesopera android full support yessafari ios full support yessamsung internet android full support yeslegend full support full support compatibility unknown compatibility unknownnon-standard...
...not for use in new
websites.deprecated.
... not for use in new
websites.
Window.routeEvent() - Web APIs
desktopmobilechromeedgefirefoxinternet exploreroperasafariandroid
webviewchrome for androidfirefox for androidopera for androidsafari on iossamsung internetrouteevent deprecatednon-standardchrome no support noedge no support nofirefox no support noie ?
...
webview android no support nochrome android no support nofirefox android no support noopera android ?
...not for use in new
websites.deprecated.
... not for use in new
websites.
XRPermissionDescriptor.requiredFeatures - Web APIs
the xrpermissiondescriptor dictionary's requiredfeatures property should be set prior to calling navigator.permissions.query() to a list of
webxr features which must be supported for the app to work.
... syntax xrpermissiondescriptor = { mode: xrsessionmode, requiredfeatures: reqfeaturelist, optionalfeatures: optfeaturelist }; xrpermissiondescriptor.requiredfeatures = reqfeaturelist; reqfeaturelist = xrpermissiondescriptor.requiredfeatures; value an array of strings indicating the
webxr features which must be available for use by the app or site.
...future editions of
webxr may add more recognized features.
...ssions.query(xrpermissiondesc).then(({state}) => { switch(state) { case "granted": setupxr(); break; case "prompt": promptandsetupxr(); break; default: /* do nothing otherwise */ break; } .catch(err) { console.log(err); } } else { setupxr(); } specifications specification status comment
webxr device apithe definition of 'xrpermissiondescriptor.requiredfeatures' in that specification.
XRReferenceSpace.getOffsetReferenceSpace() - Web APIs
implementing rotation based on non-xr inputs the input controls supported directly by
webxr are all dedicated vr or ar input devices.
... you can see code similar to this in use in our broader
webxr tutorial article called movement, orientation, and motion.
... in particular, check out the section called starting the
webxr session.
... specifications specification status comment
webxr device apithe definition of 'getoffsetreferencespace()' in that specification.
XRRenderState - Web APIs
the xrrenderstate interface of the
webxr device api contains configurable values which affect how the imagery generated by an xrsession gets composited.
... these properties include the range of distances from the viewer within which content should be rendered, the vertical field of view (for inline presentations), and a reference to the xr
webgllayer being used as the target for rendering the scene prior to it being presented on the xr device's display or displays.
... baselayer read only the xr
webgllayer from which the browser's compositing system obtains the image for the xr session.
... specifications specification status comment
webxr device apithe definition of 'xrrenderstate' in that specification.
XRRigidTransform.matrix - Web APIs
usage notes matrix format all 4x4 transform matrices used in
webgl are stored in 16-element float32arrays.
...)1-2(qx2+qy2)pz0001]\begin{bmatrix} 1 - 2(q_y^2 + q_z^2) & 2(q_xq_y - q_zq_w) & 2(q_xq_z + q_yq_w) & p_x\\ 2(q_xq_y + q_zq_w) & 1 - 2(q_x^2 + q_z^2) & 2(q_yq_z - q_xq_w) & p_y\\ 2(q_xq_z - q_yq_w) & 2(q_yq_z + q_xq_w) & 1 - 2(q_x^2 + q_y^2) & p_z\\ 0 & 0 & 0 & 1 \end{bmatrix} examples in this example, a transform is created to create a matrix which can be used as a transform during rendering of
webgl objects, in order to place objects to match a given offset and orientation.
... the matrix is then passed into a library function that uses
webgl to render an object matching a given name using the transform matrix specified to position and orient it.
... let transform = new xrrigidtransform( {x: 0, y: 0.5, z: 0.5}, {x: 0, y: -0.5, z: -0.5, w: 1}); drawglobject("magic-lamp", transform.matrix); specifications specification status comment
webxr device apithe definition of 'xrrigidtransform.matrix' in that specification.
XRSession.cancelAnimationFrame() - Web APIs
example in the example below we see code which starts up a
webxr session if immersive vr mode is supported.
... the pausexr() function shown at the bottom can be called to suspend the
webvr session, in essence, by canceling any pending animation frame callback.
... since each frame callback schedules the next one, removing the callback terminates updating of the
webxr scene.
...xr() { xrsession = xr.requestsession("immersive-vr"); if (xrsession) { stopbutton.onclick = stopxr; requesthandle = xrsession.requestanimationframe(framecallback); } } function pausexr() { if (xrsession && requesthandle) { xrsession.cancelanimationframe(requesthandle); requesthandle = null; } } specifications specification status comment
webxr device apithe definition of 'xrsession.cancelanimationframe' in that specification.
XRSession.requestAnimationFrame() - Web APIs
the callback receives as input two parameters: time a domhighrestimestamp indicating the time offset at which the updated viewer state was received from the
webxr device.
... note: a real application should check that the device and the user agent support
webxr api at all and then that they both support the desired session type via xr.issessionsupported().
... // obtain xr object const xr = navigator.xr // request a new xrsession xr.requestsession("inline").then((xrsession) => { xrsession.requestanimationframe((time, xrframe) => { let viewer = xrframe.getviewerpose(xrreferencespace) gl.bindframebuffer(xr
webgllayer.framebuffer) for (xrview of viewer.views) { let xrviewport = xr
webgllayer.getviewport(xrview) gl.viewport(xrviewport.x, xrviewport.y, xrviewport.width, xrviewport.height) //
webgl draw calls will now be rendered into the appropriate viewport.
... xrsession.requestanimationframe(onxranimationframe) }) } function onxrsessionended() { xrsession = null } specifications specification status comment
webxr device apithe definition of 'xrsession.requestanimationframe' in that specification.
XRSessionInit - Web APIs
the
webxr device api dictionary xrsessioninit specifies required and/or optional features when requesting a new xrsession by calling the navigator.xr.requestsession() method.
...at this time, all features are identified using strings from the xrreferencespacetype enumeration, but future updates to the
webxr standard may add more features.
...more features may be added in future updates to the
webxr standard.
... inline sessions all inline
webxr sessions support the viewer reference space.
XRSystem - Web APIs
the
webxr device api interface xrsystem provides methods which let you get access to an xrsession object representing a
webxr session.
... onsessionstarted(xrsession); }); } else { // shut down the already running xrsession xrsession.end() .then(() => xrsession = null); } } this code starts by checking to see if
webxr is available by looking for the navigator.xr property.
... if it's found, we know
webxr is present, so we proceed by establishing a handler for the button which the user can click to toggle immersive vr mode on and off.
... specifications specification status comment
webxr device apithe definition of 'xr' in that specification.
XRView - Web APIs
the
webxr device api's xrview interface provides information describing a single view into the xr scene for a specific frame, providing orientation and position information for the viewpoint.
... the destination rendering layer to render a frame, you just iterate over the xrviewerpose's views, rendering each of them into the appropriate viewport within the frame's xr
webgllayer.
... currently, the specification (and therefore all current implementations of
webxr) is designed around rendering every xrview into a single xr
webgllayer, which is then presented on the xr device with half used for the left eye and half for the right eye.
... specifications specification status comment
webxr device apithe definition of 'xrview' in that specification.
-webkit-mask-box-image - CSS: Cascading Style Sheets
-
webkit-mask-box-image sets the mask image for an element's border box.
... initial value: none applies to: all elements inherited: no media: visual computed value: as specified syntax -
webkit-mask-box-image: <mask-box-image> [<top> <right> <bottom> <left> <x-repeat> <y-repeat>] where: <mask-box-image> <uri> | <gradient> | none <top> <right> <bottom> <left> <length> | <percentage> <x-repeat> <y-repeat> repeat | stretch | round | space values <uri> the location of the image resource to be used as a mask image.
... <gradient> a -
webkit-gradient function to be used as a mask image.
... examples setting an image .exampleone { -
webkit-mask-box-image: url('mask.png'); } offsetting and filling an image .exampletwo { -
webkit-mask-box-image: url('logo.png') 100 100 0 0 round round; } specifications not part of any standard.
-webkit-mask-composite - CSS: Cascading Style Sheets
the -
webkit-mask-composite property specifies the manner in which multiple mask images applied to the same element are composited with one another.
... mask images are composited in the opposite order that they are declared with the -
webkit-mask-image property.
... /* keyword values */ -
webkit-mask-composite: clear; -
webkit-mask-composite: copy; -
webkit-mask-composite: source-over; -
webkit-mask-composite: source-in; -
webkit-mask-composite: source-out; -
webkit-mask-composite: source-atop; -
webkit-mask-composite: destination-over; -
webkit-mask-composite: destination-in; -
webkit-mask-composite: destination-out; -
webkit-mask-composite: destination-atop; -
webkit-mask-composite: xor; /* global values */ -
webkit-mask-composite: inherit; -
webkit-mask-composite: initial; -
webkit-mask-composite: unset; there is a standardized mask-composite property covering parts of this non-standard property using different keywords.
... formal definition initial valuesource-overapplies toall elementsinheritednocomputed valueas specifiedanimation typediscrete formal syntax <composite-style>#where <composite-style> = clear | copy | source-over | source-in | source-out | source-atop | destination-over | destination-in | destination-out | destination-atop | xor examples compositing with xor .example { -
webkit-mask-image: url(mask1.png), url('mask2.png'); -
webkit-mask-composite: xor, source-over; } specifications not part of any standard.
-webkit-text-fill-color - CSS: Cascading Style Sheets
the -
webkit-text-fill-color css property specifies the fill color of characters of text.
... /* <color> values */ -
webkit-text-fill-color: red; -
webkit-text-fill-color: #000000; -
webkit-text-fill-color: rgb(100, 200, 0); /* global values */ -
webkit-text-fill-color: inherit; -
webkit-text-fill-color: initial; -
webkit-text-fill-color: unset; syntax values <color> the foreground fill color of the element's text content.
...)where <alpha-value> = <number> | <percentage><hue> = <number> | <angle> examples changing the fill color css p { margin: 0; font-size: 3em; -
webkit-text-fill-color: green; } html <p>this text is green.</p> results specifications specification status comment compatibility standardthe definition of '-
webkit-text-fill-color' in that specification.
... living standard initial standardization safari css reference '-
webkit-text-fill-color' in that document.
-webkit-text-stroke-width - CSS: Cascading Style Sheets
the -
webkit-text-stroke-width css property specifies the width of the stroke for text.
... syntax /* keyword values */ -
webkit-text-stroke-width: thin; -
webkit-text-stroke-width: medium; -
webkit-text-stroke-width: thick; /* <length> values */ -
webkit-text-stroke-width: 2px; -
webkit-text-stroke-width: 0.1em; -
webkit-text-stroke-width: 1mm; -
webkit-text-stroke-width: 5pt; /* global values */ -
webkit-text-stroke-width: inherit; -
webkit-text-stroke-width: initial; -
webkit-text-stroke-width: unset; values <line-width> the width of the stroke.
... formal definition initial value0applies toall elementsinheritedyescomputed valueabsolute <length>animation typediscrete formal syntax <length> examples varying stroke widths css p { margin: 0; font-size: 4em; -
webkit-text-stroke-color: red; } #thin { -
webkit-text-stroke-width: thin; } #medium { -
webkit-text-stroke-width: 3px; } #thick { -
webkit-text-stroke-width: 1.5mm; } html <p id="thin">thin stroke</p> <p id="medium">medium stroke</p> <p id="thick">thick stroke</p> results specifications specification status comment compatibility standardthe definition of '-
webkit-text-stroke-width' in that specification.
... living standard initial standardization safari css reference '-
webkit-text-stroke-width' in that document.
::-webkit-meter-inner-element - CSS: Cascading Style Sheets
::-
webkit-meter-inner-element is a proprietary
webkit css pseudo-element for selecting and applying styles to to the outer containing element of a <meter> element.
... syntax ::-
webkit-meter-inner-element specifications not part of any standard.
... examples this will only work in
webkit and blink-based browsers, such as safari, chrome, and chromium-based versions of edge.
... html <meter min="0" max="10" value="6">score out of 10</meter> css meter { /* reset the default appearance */ -
webkit-appearance: none; -moz-appearance: none; appearance: none; } meter::-
webkit-meter-inner-element { -
webkit-appearance: inherit; box-sizing: inherit; border: 1px solid #aaa; } result ...
::-webkit-meter-optimum-value - CSS: Cascading Style Sheets
the ::-
webkit-meter-optimum-value css pseudo-element styles the <meter> element when its value is inside the low-high range.
... syntax ::-
webkit-meter-optimum-value specifications not part of any standard.
... examples this example will only work in browsers based on
webkit or blink.
... html <meter min="0" max="10" value="6">score out of 10</meter> css meter::-
webkit-meter-bar { /* required to get rid of the default background property */ background : none; background-color : whitesmoke; box-shadow : 0 5px 5px -5px #333 inset; } meter::-
webkit-meter-optimum-value { box-shadow: 0 5px 5px -5px #999 inset; } result ...
::-webkit-outer-spin-button - CSS: Cascading Style Sheets
the ::-
webkit-outer-spin-button css pseudo-element is used to style the outer part of the spinner button of number picker <input> elements.
... syntax ::-
webkit-outer-spin-button examples these examples only works on browsers based on
webkit or blink.
... hiding the spinner this example uses input::-
webkit-outer-spin-button to find <input> elements' spinner widgets and set their -
webkit-appearance to none, thus hiding them.
... html <input type="number"> css input::-
webkit-outer-spin-button { -
webkit-appearance: none; } result specifications not part of any standard.
-webkit-transition - CSS: Cascading Style Sheets
the -
webkit-transition boolean css media feature is a chrome extension whose value is true if the browsing context supports css transitions.
... it was never supported in browsers not based on
webkit or blink.
... syntax @media (-
webkit-transition) { /* css to use if transitions are supported */ } examples use @supports instead do not use the -
webkit-transition media feature.
... instead, test for transition support using the css @supports at-rule, like this: @supports (transition: initial) { /* css to use if transitions are supported */ } obsolete example before this became obsolete, you could use -
webkit-transition in your css like this: @media (-
webkit-transition) { /* css to use if transitions are supported */ } specifications not part of any standard.
Demos of open web technologies
mozilla supports a wide variety of exciting open
web technologies, and we encourage their use.
... if you know of a good demonstration or application of open
web technology, please add a link to the appropriate section here.
...mmer html image map creator (source code) video video 3d animation "mozilla constantly evolving" video 3d animation "floating dance" streaming anime, movie trailer and interview billy's browser firefox flick virtual barber shop transformers movie trailer a scanner darkly movie trailer (with built in controls) events firing and volume control dragable and sizable videos 3d graphics
webgl
web audio fireworks ioquake3 (source code) escher puzzle (source code) kai 'opua (source code) virtual reality the polar sea (source code) sechelt fly-through (source code) css css zen garden css floating logo "mozilla" paperfold css blockout rubik's cube pure css slides planetarium (source code) loader with blend modes text reveal with clip-path ambient shadow with cu...
...stom properties luminiscent vial css-based single page application (source code) transformations impress.js (source code) games ioquake3 (source code) kai 'opua (source code)
web apis notifications api html5 notifications (source code)
web audio api
web audio fireworks oscope.js - javascript oscilloscope html5
web audio showcase (source code) html5 audio visualizer (source code) graphical filter editor and visualizer (source code) file api slide my text - presentation from plain text files
web workers
web worker fractals photo editor coral generator raytracer hotcold touch typing ...
Guide to Web APIs - Developer guides
the
web includes a wide array of apis that can be used from javascript to build increasingly more powerful and capable applications, running either on the
web, locally, or through technology such as node.js, on a server.
... on this page you'll find a complete list of all of the apis provided by the full
web technology stack.
...
web apis from a to z aambient light eventsbbackground tasksbattery api beaconbluetooth apibroadcast channel apiccss counter stylescss font loading api cssomcanvas apichannel messaging apiconsole apicredential management apiddomeencoding apiencrypted media extensionsffetch apifile system api frame timing apifullscreen apiggamepad api geolocation apihhtml drag and drop apihigh resolution timehistory apiiimage capture apiindexeddbintersection observer apillong tasks api mmedia capabilities api media capture and streamsmedia session apimedia source extensions mediastream recordingnnavigation timingnetwork information api ppage visibility apipayment request apiperformance apiperformance timeline apipermissions apipointer eventspointer lock apiproximity events push api rresize obser...
...ver apiresource timing apisserver sent eventsservice workers apistoragestorage access apistreams ttouch eventsuurl apivvibration apivisual viewport w
web animations
web audio api
web authentication api
web crypto api
web notifications
web storage api
web workers api
webgl
webrtc
webvtt
webxr device api
websockets api ...
The Web Open Font Format (WOFF) - Developer guides
woff (the
web open font format) is a
web font format developed by mozilla in concert with type supply, letterror, and other organizations.
... many font vendors that are unwilling to license their truetype or opentype format fonts for use on the
web will license woff format fonts.
... both proprietary and free software browser vendors like the woff format, so it has the potential of becoming a truly universal, interoperable font format for the
web, unlike other current font formats.
... using woff you can use the @font-face css property to use woff fonts for text in
web content.
Writing forward-compatible websites - Developer guides
this page explains how to write
websites that do not break when new browser versions are released.
... this is especially important for intranets and other non-public
websites; if we can't see your code, we can't see that it broke.
... it's not always possible to follow all of these, but following as many of them as possible will help future-proof your
website.
... code hygiene avoid missing > passing a validator is one way to ensure this, but even if your
website doesn't validate entirely you should make sure all your > characters are present.
Sec-WebSocket-Accept - HTTP
the sec-
websocket-accept header is used in the
websocket opening handshake.
...that is, this is header is sent from server to client to inform that server is willing to initiate a
websocket connection.
... header type response header forbidden header name no syntax sec-
websocket-accept: <hashed key> directives <hashed key> the server takes the value of the sec-
websocket-key sent in the handshake request, appends 258eafa5-e914-47da-95ca-c5ab0dc85b11, takes sha-1 of the new value, and is then base64 encoded.
... examples sec-
websocket-accept: s3pplmbitxaq9kygzzhzrbk+xoo= specification specification title rfc 6455, section 11.3.3: sec-
websocket-accept the
websocket protocol ...
background_color - Web app manifests
therefore background_color should match the background-color css property in the site’s stylesheet for a smooth transition between launching the
web application and loading the site's content.
... note: the background_color member is only meant to improve the user experience while the main stylesheet is loading from the network or the storage media; it is not used by the user agent as the background-color css property when the progressive
web app stylesheet is available.
... examples "background_color": "red" specification specification status comment feedback
web app manifestthe definition of 'background_color' in that specification.
...
web app manifest working group drafts ...
iarc_rating_id - Web app manifests
type string mandatory no the iarc_rating_id member is a string that represents the international age rating coalition (iarc) certification code of the
web application.
... it is intended to be used to determine which ages the
web application is appropriate for.
... examples "iarc_rating_id": "e84b072d-71b3-4d3e-86ae-31a8ce4e53b7" specification specification status comment feedback
web app manifestthe definition of 'iarc_rating_id' in that specification.
...
web app manifest working group drafts ...
icons - Web app manifests
for example, they can be used to represent the
web application amongst a list of other applications, or to integrate the
web application with an os's task switcher and/or system preferences.
... examples "icons": [ { "src": "icon/lowres.
webp", "sizes": "48x48", "type": "image/
webp" }, { "src": "icon/lowres", "sizes": "48x48" }, { "src": "icon/hd_hi.ico", "sizes": "72x72 96x96 128x128 256x256" }, { "src": "icon/hd_hi.svg", "sizes": "72x72" } ] values image objects may contain the following values: member description sizes a string containing space-separated image dimensions.
... specification specification status comment feedback
web app manifestthe definition of 'icons' in that specification.
...
web app manifest working group drafts ...
prefer_related_applications - Web app manifests
type boolean mandatory no the prefer_related_applications member is a boolean value that specifies that applications listed in related_applications should be preferred over the
web application.
... if the prefer_related_applications member is set to true, the user agent might suggest installing one of the related applications instead of this
web app.
... examples "prefer_related_applications": true specification specification status comment feedback
web app manifestthe definition of 'prefer_related_applications' in that specification.
...
web app manifest working group drafts ...
related_applications - Web app manifests
such applications are intended to be alternatives to the manifest's
website that provides similar/equivalent functionality — like the native app equivalent.
... note: developer can specify that the native applications are preferred over the
web application by setting prefer_related_applications to true.
... specification specification status comment feedback
web app manifestthe definition of 'related_applications' in that specification.
...
web app manifest working group drafts ...
shortcuts - Web app manifests
type object mandatory no the shortcuts member defines an array of shortcuts or links to key tasks or pages within a
web app.
... a user agent can use these values to assemble a context menu to be displayed by the operating system when a user engages with the
web app's icon.
...is a list of shortcuts a calendar app might have: "shortcuts" : [ { "name": "today's agenda", "url": "/today", "description": "list of events planned for today" }, { "name": "new event", "url": "/create/event" }, { "name": "new reminder", "url": "/create/reminder" } ] specification specification status comment feedback
web app manifestthe definition of 'shortcuts' in that specification.
...
web app manifest working group drafts ...
Using images in HTML - Web media technologies
in this guide you'll find links to resources that deal with adding images to
websites.
... references these articles cover some of the html elements and css properties that are used to control how images are displayed on the
web.
... html <img> the html <img> element is used to embed an image in a
webpage.
... image file type and format guide a guide to the various image file types commonly supported by
web browsers including details about their individual use cases, capabilities, and compatibility factors.
PWA developer guide - Progressive web apps (PWAs)
in the articles listed here, you'll find guides about every aspect of development specific to the greation of progressive
web applications (pwas).
... for all other documentation about
web development, which generally pertains to pwas as well, see our primary
web development documentation.
...<<<---
web app basics introduction and getting started with pwa development some description installing and uninstalling
web apps an introductory guide to how a
web app can be installed on the user's device...
... using service workers to run offline description alerting the user using notifications description creating a
web app from an existing site description advanced topics pushing data from the server to your
web application some description resource management description integration with the host device description security and privacy description gaming topics for
web app developers description polishing
web apps
web api equivalents for common native apis some description platform-specific tips and issues description
web application performance guide description ensuring a good user experience description related topics some topic some description ...
Mobile first - Progressive web apps (PWAs)
this article offers some related ideas, looking at the concept of mobile first — the practice of designing a
website so that the default layout/configuration is for mobile devices, and layouts and features for desktop browsers are then layered on top of that default.
...volo has a number of useful commands available, of which we will just use a couple: volo server: starts a local
web server at localhost:8080 and runs your app through it: great for easy testing.
...try it out with tools >
web developer > responsive design view.
...imagine you wanted to include some kind of
webgl chart in the desktop version of the site requiring a
webgl library like three but didn't want it included in the mobile version?
Referer header: privacy and security concerns - Web security
the referrer problem the referer (sic) header contains the address of the previous
web page from which a link to the currently requested page was followed, which has lots of fairly innocent uses including analytics, logging, or optimized caching.
...this is becoming less useful in this context now that most of the
web is using https, but it is still a worthy consideration.
...social networking widgets embedded in <iframe>) from secure areas of your
website, like password reset pages, payment forms, login areas, etc.
...you should enlist the help of a
web security expert to write these requirements, and consider both user needs and welfare, as well as other issues like policy and regulation enforced by legislation such as the eu general data protection regulation (gdpr).
Features restricted to secure contexts - Web security
this reference lists the
web platform features available only in secure contexts — see secure contexts for a definition and more details.
... push api 42 17 not supported 44 reporting api supported not supported not supported behind flag since fx 65 service workers 40 17 11.1 44 storage api 55 not supported not supported 51
web authentication api 65 in preview (17) in development 60
web bluetooth 56 not supported not supported not supported
web midi (see midiaccess, for example) 43 not supported not supported not supported
web crypto api 60 79 not supported 75 secure context restrictions that vary by browser some browsers may decide to d...
... api chrome edge safari firefox application cache restricted to secure contexts planned in chrome 70 deprecation planning started in february 2018 public interest on deprecation
webkit bug 182442 restricted to secure contexts in firefox 62 geolocation restricted to secure contexts in 50 restricted to secure contexts in 10 restricted to secure contexts in 55 device orientaion / device motion deprecation warning deprecation warnings since 60.
...
web crypto api has been restricted to https since early days (api was visible in http as well but operations failed).
Using custom elements - Web Components
one of the key features of the
web components standard is the ability to create custom elements that encapsulate your functionality on an html page, rather than having to make do with a long, nested batch of elements that together provide a custom page feature.
... high-level view the controller of custom elements on a
web document is the customelementregistry object — this object allows you to register a custom element on the page, return information on what custom elements are registered, etc.
... next, we register the element using the define() method as before, except that this time it also includes an options object that details what element our custom element inherits from: customelements.define('expanding-list', expandinglist, { extends: "ul" }); using the built-in element in a
web document also looks somewhat different: <ul is="expanding-list"> ...
... libraries there are several libraries that are built on
web components with the aim of increasing the level of abstraction when creating custom elements.
Installing Extensions and Themes From Web Pages - Archive of obsolete content
there are a variety of ways you can install extensions and themes from
web pages, including direct linking to the xpi files and using the installtrigger object.
... extension and
web authors are encouraged to use the method described below to install xpis, as it provides the best experience to users.
...
web script example <script type="application/javascript"> <!-- function install (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.
Mozilla Web Developer Community - Archive of obsolete content
get news from developer.mozilla.org and connect with developers involved in cross-browser, standards-based
web development.
...l - 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 case for
web standards a list apart, for people who make
websites mozilla technology evangelism, get involved with mozilla evangelism you may also find helpful information on the w3c mailing lists newsletter there is no newsletter planned a...
...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.
Why Well-Formed Web RSS Module is Popular - Syndicating Your Comments - Archive of obsolete content
the rss well-formed
web module exists to fill this gap.
... an example using the most popular element of the well-formed
web rss module is shown below: <?xml version="1.0"> <rss version="2.0" xmlns:wfw="http://wellformed
web.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</gu...
...ss> </item> <item> <title>huh?!</title> <guid>d77d2e80-0487-4e8c-a35d-a93f12a0ff7d:article:54319</guid> <pubdate>sun, 15 may 2005 08:14:11 -0500</pubdate> <link>http://www.example.com/article/54319</link> <wfw:commentrss>http://www.example.com/feed/rss/54319/comments</wfw:commentrss> </item> </channel> </rss> the <wfw:commentrss> element is the reason that the well-formed
web rss module is popular.
Efficient animation for web games - Game development
this article covers techniques and advice for creating efficient animation for
web games, with a slant towards supporting lower end devices such as mobile phones.
...though it is possibly overkill for simple games, you may also want to consider using
web worker threads.
...puzzowl isn’t out yet, but here’s a little screencast of it running on a nexus 5: note: this article was originally written and published by chris lord, on his blog — see efficient animation for games on the (mobile)
web.
Handling different text directions - Learn web development
these physical dimensions map very neatly to content that is viewed horizontally, and by default the
web tends to support left-to-right languages (e.g.
...vertical text is common in graphic design, and can be a way to add a more interesting look and feel to your
web design.
...the
web is not just for languages that are displayed left-to-right!
Images, media, and form elements - Learn web development
form elements form elements can be a tricky issue when it comes to styling with css, and the
web forms module contains detailed guides to the trickier aspects of styling form elements, which i will not fully reproduce here.
... html5 also contains attributes that enable
web developers to indicate which fields are required, and even the type of content that needs to be entered.
... styling
web forms advanced form styling test your skills!
Overflowing content - Learn web development
website visitors may not notice.
... unwanted overflow in
web design modern layout methods (described in css layout) manage overflow.
... they largely work without assumptions or dependencies for how much content there will be on a
web page.
Sizing items in CSS - Learn web development
previous overview: building blocks next in the various lessons so far you have come across a number of ways to size items on a
web page using css.
... due to this problem of overflow, fixing the height of elements with lengths or percentages is something we need to do very carefully on the
web.
... summary this lesson has given you a rundown of some key issues that you might run into when sizing things on the
web.
CSS building blocks - Learn web development
looking to become a front-end
web developer?
... get started prerequisites before starting this module, you should have: basic familiarity with using computers, and using the
web passively (i.e.
... sizing items in css in the various lessons so far you have come across a number of ways to size items on a
web page using css.
Grids - Learn web development
previous overview: css layout next css grid layout is a two-dimensional layout system for the
web.
...they help us to create designs where elements don’t jump around or change width as we move from page to page, providing greater consistency on our
websites.
...a fairly basic fact about the
web is that you never really know how tall something is going to be; additional content or larger font sizes can cause problems with designs that attempt to be pixel perfect in every dimension.
Legacy layout methods - Learn web development
this is a valuable tool for responsive
web design.
...if you search for "css grid framework" on the
web, you will find a huge list of options to choose from.
... to get started visit the skeleton
website, and choose "download" to download the zip file.
Basic native form controls - Learn web development
previous overview: forms next in the previous article, we marked up a functional
web form example, introducing some form controls and common structural elements, and focusing on accessibility best practices.
...in this particular article we will look at the original set of form controls, available in all browsers since the early days of the
web.
... previous overview: forms next in this module your first form how to structure a
web form basic native form controls the html5 input types other form controls styling
web forms advanced form styling ui pseudo-classes client-side form validation sending form data advanced topics how to build custom form controls sending forms through javascript property compatibility table for form widgets ...
How to build custom form controls - Learn web development
aria stands for "accessible rich internet application", and it's a w3c specification specifically designed for what we are doing here: making
web applications and custom controls accessible.
...it likely makes more sense to use
web standards as the basis for custom controls instead of relying on frameworks to create elements with no native semantics.
... here are a few libraries you should consider before coding your own: jquery ui axe accessible custom select dropdowns msdropdown nice forms if you do create alternative controls via radio buttons, your own javascript, or with a 3rd party library, ensure it is accessible and feature-proof; that is, it needs to be able to work better with a variety of browsers whose compatibility with the
web standards they use vary.
Add a hitmap on top of an image - Learn web development
prerequisites: you should already know how to create a basic html document and how to add accessible images to a
webpage.
... image maps, and their drawbacks when you nest an image inside <a>, the entire image links to one
webpage.
... if your image map is wider than about 240px, you’ll need to make further adjustments to make your
website responsive.
Asynchronous JavaScript - Learn web development
looking to become a front-end
web developer?
... guides general asynchronous programming concepts in this article we'll run through a number of important concepts relating to asynchronous programming, and how this looks in
web browsers and javascript.
...this article shows you how promises work, where you'll see them in use in
webapis, and how to write your own.
JavaScript building blocks - Learn web development
looking to become a front-end
web developer?
...for example if the user clicks a button on a
webpage, you might want to respond to that action by displaying an information box.
... image gallery now that we've looked at the fundamental building blocks of javascript, we'll test your knowledge of loops, functions, conditionals and events by building a fairly common item you'll see on a lot of
websites — a javascript-powered image gallery.
Storing the information you need — Variables - Learn web development
previous overview: first steps next after reading the last couple of articles you should now know what javascript is, what it can do for you, how you use it alongside other
web technologies, and what its main features look like from a high level.
...try typing these lines into your
web browser's console.
...for example: myname = 'chris'; function logname() { console.log(myname); } logname(); var myname; note: this won't work when typing individual lines into a javascript console, just when running multiple lines of javascript in a
web document.
JavaScript First Steps - Learn web development
looking to become a front-end
web developer?
...you are advised to work through the following modules before starting on javascript: getting started with the
web (which includes a really basic javascript introduction).
... storing the information you need — variables after reading the last couple of articles you should now know what javascript is, what it can do for you, how you use it alongside other
web technologies, and what its main features look like from a high level.
Introducing JavaScript objects - Learn web development
looking to become a front-end
web developer?
... working with json data javascript object notation (json) is a standard text-based format for representing structured data based on javascript object syntax, which is commonly used for representing and transmitting data on
web sites (i.e.
... sending some data from the server to the client, so it can be displayed on a
web page).
Starting our Svelte Todo list app - Learn web development
it's important to be a good
web citizen and make make your pages accessible to the broadest possible userbase.
...efore, *::after { box-sizing: border-box; } *:focus { outline: 3px dashed #228bec; outline-offset: 0; } html { font: 62.5% / 1.15 sans-serif; } h1, h2 { margin-bottom: 0; } ul { list-style: none; padding: 0; } button { border: none; margin: 0; padding: 0; width: auto; overflow: visible; background: transparent; color: inherit; font: inherit; line-height: normal; -
webkit-font-smoothing: inherit; -moz-osx-font-smoothing: inherit; -
webkit-appearance: none; } button::-moz-focus-inner { border: 0; } button, input, optgroup, select, textarea { font-family: inherit; font-size: 100%; line-height: 1.15; margin: 0; } button, input { overflow: visible; } input[type="text"] { border-radius: 0; } body { width: 100%; max-width: 68rem; margin: 0 auto...
... margin: unset auto; } /* todo item styles */ .todo { display: flex; flex-direction: row; flex-wrap: wrap; } .todo > * { flex: 0 0 100%; } .todo-text { width: 100%; min-height: 4.4rem; padding: 0.4rem 0.8rem; border: 2px solid #565656; } .todo-text:focus { box-shadow: inset 0 0 0 2px; } /* checkbox styles */ .c-cb { box-sizing: border-box; font-family: arial, sans-serif; -
webkit-font-smoothing: antialiased; font-weight: 400; font-size: 1.6rem; line-height: 1.25; display: block; position: relative; min-height: 44px; padding-left: 40px; clear: left; } .c-cb > label::before, .c-cb > input[type="checkbox"] { box-sizing: border-box; top: -2px; left: -2px; width: 44px; height: 44px; } .c-cb > input[type="checkbox"] { -
webkit-font-smoothing: antia...
Implementing feature detection - Learn web development
let's recap and look at the example we touched on in our handling common javascript problems — the geolocation api (which exposes available location data for the device the
web browser is running on) has the main entry point for its use, a geolocation property available on the global navigator object.
...the problem here is browser support — @supports is not supported at all in ie, and only supported in very recent versions of safari/ios
webkit (9+/9.2+), whereas the javascript version should work in much older browsers (probably back to ie8 or 9, although older versions of ie will have additional problems, such as not supporting document.queryselector, and having a messed up box model).
...for example: modernizr.flexbox modernizr.
websqldatabase modernizr.xhr2 modernizr.fetch the console will return true/false values to indicate whether your browser supports those features or not.
Cross browser testing - Learn web development
this module focuses on testing
web projects across different browsers.
... looking to become a front-end
web developer?
... setting up your own test automation environment in this article, we will teach you how to install your own automation environment and run your own tests using selenium/
webdriver and a testing library such as selenium-
webdriver for node.
Webapps.jsm
the
webapps.jsm modules exposes the domapplicationregistry, which is responsible for managing all of the open
web apps.
... importing components.utils.import("resource://gre/modules/
webapps.jsm"); // exported symbol is domapplicationregistry method overview init: function() loadcurrentregistry: function() notifyappsregistrystart: function notifyappsregistrystart() 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) _registersystemm...
...rl: function(amanifesturl) getfullappbymanifesturl: function(amanifesturl, aentrypoint, alang) getmanifestcspbylocalid: function(alocalid) getdefaultcspbylocalid: function(alocalid) getapplocalidbystoreid: function(astoreid) getappbylocalid: function(alocalid) getmanifesturlbylocalid: function(alocalid) getapplocalidbymanifesturl: function(amanifesturl) getcoreappsbasepath: function() get
webappsbasepath: function() _islaunchable: function(aapp) _notifycategoryandobservers: function(subject, topic, data, msg) registerbrowserelementparentforapp: function(amsg, amn) receiveappmessage: function(appid, message) _clearprivatedata: function(appid, browseronly, msg) _sendprogressevent: function() updatestatechanged: function appobs_update(aupdate, astate) applicationcacheavailable: ...
nsIWebBrowserChrome3
embedding/browser/
webbrowser/nsi
webbrowserchrome3.idlscriptable an extension to nsi
webbrowserchrome2.
... 1.0 66 introduced gecko 2.0 inherits from: nsi
webbrowserchrome2 last changed in gecko 2.0 (firefox 4 / thunderbird 3.3 / seamonkey 2.1) method overview astring onbeforelinktraversal(in astring originaltarget, in nsiuri linkuri, in nsidomnode linknode, in prbool isapptab); methods onbeforelinktraversal() determines the appropriate target for a link.
...see also nsi
webbrowserchrome2 ...
Inspecting web app manifests - Firefox Developer Tools
when you open the application panel’s manifest view on a page that doesn't have an app manifest successfully deployed, you'll get the following output shown: deploying a manifest to get a manifest deployed successfully, you need to include a <link> element in the <head> of your document that points to your .
webmanifest file: <link rel="manifest" href="/manifest.
webmanifest"> the .
webmanifest extension is recommended in the spec, and should be served with an application/manifest+json mime type, although browsers generally tend to support manifests with other appropriate extensions like .json (mime type: application/json).
...you can test this using the
web manifest validator.
... list of manifest members we won't provide an exhaustive list of all the members that can appear in a
web manifest here; you can already find that in our
web manifest documentation.
Web Console - Firefox Developer Tools
the
web console: logs information associated with a
web page: network requests, javascript, css, security errors and warnings as well as error, warning and informational messages explicitly logged by javascript code running in the page context enables you to interact with a
web page by executing javascript expressions in the context of the page user interface of the
web console parts of the
web console ui.
... opening the
web console you open the
web console from a menu or with a keyboard shortcut: choose
web console from the
web developer submenu in the firefox menu (or tools menu if you display the menu bar or are on mac os x) press the ctrl+shift+k (command+option+k on os x) keyboard shortcut.
... the toolbox appear at the bottom, left, or right of the browser window (depending on your docking settings), with the
web console activated (it's just called console in the devtools toolbar).
AesGcmParams - Web APIs
the aesgcmparams dictionary of the
web crypto api represents the object that should be passed as the algorithm parameter into subtlecrypto.encrypt(), subtlecrypto.decrypt(), subtlecrypto.wrapkey(), or subtlecrypto.unwrapkey(), when using the aes-gcm algorithm.
... according to the
web crypto specification this must have one of the following values: 32, 64, 96, 104, 112, 120, or 128.
... specifications specification status comment
web cryptography apithe definition of 'subtlecrypto.aesgcmparams' in that specification.
Animation.onfinish - Web APIs
the animation interface's onfinish property (from the
web animations api) is the event handler for the finish event.
... examples animation.onfinish is used several times in the alice in
web animations api land growing/shrinking alice game.
...hide(endingui); // when the credits are later faded in, // we re-add the pointer events when they're done bringui.onfinish = function() { endingui.style.pointerevents = 'auto'; }; specifications specification status comment
web animationsthe definition of 'animation.onfinish' in that specification.
Animation.pause() - Web APIs
the pause() method of the
web animations api's animation interface suspends playback of the animation.
... example animation.pause() is used many times in the alice in
web animations api land growing/shrinking alice game, largely because animations created with the element.animate() method immediately start playing and must be paused manually if you want to avoid that: // animation of the cupcake slowly getting eaten up var nommingcake = document.getelementbyid('eat-me_sprite').animate( [ { transform: 'translatey(0)' }, { transform: 'translatey(-80%)' } ], ...
...cake.addeventlistener("mouseup", stopplayingalice, false); bottle.addeventlistener("mouseup", stopplayingalice, false); specifications specification status comment
web animationsthe definition of 'play()' in that specification.
Animation.playState - Web APIs
the animation.playstate property of the
web animations api returns and sets an enumerated value describing the playback state of an animation.
... previously,
web animations defined a pending value to indicate that some asynchronous operation such as initiating playback was yet to complete.
... tears.foreach(function(el) { el.pause(); el.currenttime = 0; }); specifications specification status comment
web animationsthe definition of 'playstate' in that specification.
Animation - Web APIs
the animation interface of the
web animations api represents a single animation player and provides playback controls and a timeline for an animation node or source.
...for this reason, modern browsers have implemented the part of the
web animations spec that automatically removes overriding forward filling animations, unless the developer explicitly specifies to keep them.
... designing safer
web animation for motion sensitivity · an a list apart article an introduction to the reduced motion media query | css-tricks responsive design for motion |
webkit mdn understanding wcag, guideline 2.2 explanations understanding success criterion 2.2.2 | w3c understanding wcag 2.0 specifications specification status comment
web animationsthe definition of 'animation'...
AudioBuffer - Web APIs
you can find the full source code at our
webaudio-examples repository; a running live version is also available.
... var audioctx = new (window.audiocontext || window.
webkitaudiocontext)(); // create an empty three-second stereo buffer at the sample rate of the audiocontext var myarraybuffer = audioctx.createbuffer(2, audioctx.samplerate * 3, audioctx.samplerate); // fill the buffer with white noise; // just random values between -1.0 and 1.0 for (var channel = 0; channel < myarraybuffer.numberofchannels; channel++) { // this gives us the actual array that contains the data var nowbuffering = myarraybuffer.getchanneldata(channel); for (var i = 0; i < myarraybuffer.length; i++) { // math.random() is in [0; 1.0] // audio needs to be in [-1.0; 1.0] nowbuffering[i] = math.random() * 2 - 1; } } // get an audiobuffersourcenode.
...e when we want to play an audiobuffer var source = audioctx.createbuffersource(); // set the buffer in the audiobuffersourcenode source.buffer = myarraybuffer; // connect the audiobuffersourcenode to the // destination so we can hear the sound source.connect(audioctx.destination); // start the source playing source.start(); specifications specification status comment
web audio apithe definition of 'audiobuffer' in that specification.
AudioBufferSourceNode.AudioBufferSourceNode() - Web APIs
specifications specification status comment
web audio apithe definition of 'audiobuffersourcenode()' in that specification.
... desktopmobilechromeedgefirefoxinternet exploreroperasafariandroid
webviewchrome for androidfirefox for androidopera for androidsafari on iossamsung internetaudiobuffersourcenode() constructorchrome full support 55notes full support 55notes notes before version 59, the default values were not supported.edge full support ≤79firefox full support 5...
...
webview android full support 55notes full support 55notes notes before version 59, the default values were not supported.chrome android full support 55notes full support 55notes notes before version 59, the default values were not supported.firefox android full support 53opera android full support 42safari ios ?
AudioContext.baseLatency - Web APIs
example // default latency ("interactive") const audioctx1 = new audiocontext(); console.log(audioctx1.baselatency); // 0.00 // higher latency ("playback") const audioctx2 = new audiocontext({ latencyhint: 'playback' }); console.log(audioctx2.baselatency); // 0.15 specifications specification status comment
web audio apithe definition of 'baselatency' in that specification.
... desktopmobilechromeedgefirefoxinternet exploreroperasafariandroid
webviewchrome for androidfirefox for androidopera for androidsafari on iossamsung internetbaselatency experimentalchrome full support 58edge full support ≤79firefox full support 70ie no support noopera full support 45safari ...
... no support no
webview android full support 58chrome android full support 58firefox android no support noopera android full support 43safari ios no support nosamsung internet android full support 7.0legend full support full support no support no supportexperimental.
AudioContext.getOutputTimestamp() - Web APIs
op(0); play.removeattribute('disabled'); cancelanimationframe(raf); }); // function to output timestamps function outputtimestamps() { let ts = audioctx.getoutputtimestamp() console.log('context time: ' + ts.contexttime + ' | performance time: ' + ts.performancetime); raf = requestanimationframe(outputtimestamps); } specifications specification status comment
web audio apithe definition of 'getoutputtimestamp()' in that specification.
... desktopmobilechromeedgefirefoxinternet exploreroperasafariandroid
webviewchrome for androidfirefox for androidopera for androidsafari on iossamsung internetgetoutputtimestamp experimentalchrome full support 57edge full support ≤79firefox full support 70ie no support noopera full support 44safari ...
... no support no
webview android full support 57chrome android full support 57firefox android no support noopera android full support 43safari ios no support nosamsung internet android full support 7.0legend full support full support no support no supportexperimental.
AudioParam.cancelAndHoldAtTime() - Web APIs
specifications specification status comment
web audio apithe definition of 'cancelandholdattime()' in that specification.
... desktopmobilechromeedgefirefoxinternet exploreroperasafariandroid
webviewchrome for androidfirefox for androidopera for androidsafari on iossamsung internetcancelandholdattimechrome full support 57 full support 57 no support ?
...— 43alternate name alternate name uses the non-standard name: cancelvaluesandholdattime()safari no support no
webview android full support 57 full support 57 no support ?
AudioParam.setValueAtTime() - Web APIs
examples this simple example features a media element source with two control buttons (see our
webaudio-examples repo for the source code, or view the example live).
... when the buttons are pressed, the currgain variable is incremented/decremented by 0.25, then the setvalueattime() method is used to set the gain value equal to currgain, one second from now (audioctx.currenttime + 1.) // create audio context var audiocontext = window.audiocontext || window.
webkitaudiocontext; var audioctx = new audiocontext(); // set basic variables for example var myaudio = document.queryselector('audio'); var pre = document.queryselector('pre'); var myscript = document.queryselector('script'); pre.innerhtml = myscript.innerhtml; var targetattimeplus = document.queryselector('.set-target-at-time-plus'); var targetattimeminus = document.queryselector('.set-target-at-time-minus'); // create a mediaelementaudiosourcenode // feed the htmlmediaelement into it var source = a...
...nect(audioctx.destination); // set buttons to do something onclick targetattimeplus.onclick = function() { currgain += 0.25; gainnode.gain.setvalueattime(currgain, audioctx.currenttime + 1); } targetattimeminus.onclick = function() { currgain -= 0.25; gainnode.gain.setvalueattime(currgain, audioctx.currenttime + 1); } specifications specification status comment
web audio apithe definition of 'setvalueattime' in that specification.
AudioParam.setValueCurveAtTime() - Web APIs
note: some early implementations of the
web audio api did not ensure this to be the case, causing unexpected results.
... examples in this example, we have a media source with a single button (see the
webaudio-examples repo for the source code, or view the example live.) when this button is pressed, setvaluecurveattime() is used to change the gain value between the values contained in the wavearray array: // create audio context var audiocontext = window.audiocontext || window.
webkitaudiocontext; var audioctx = new audiocontext(); // set basic variables for example var myaudio = document.queryselector('audio'); var pre = document.queryselector('pre'); var myscript = document.queryselector('script'); pre.innerhtml = myscript.innerhtml; var valuecurve = document.queryselector('.value-curve'); // create a mediaelementaudiosourcenode // feed the htmlmediaelement into it var source = audioctx.createmediaelem...
...nclick var wavearray = new float32array(9); wavearray[0] = 0.5; wavearray[1] = 1; wavearray[2] = 0.5; wavearray[3] = 0; wavearray[4] = 0.5; wavearray[5] = 1; wavearray[6] = 0.5; wavearray[7] = 0; wavearray[8] = 0.5; valuecurve.onclick = function() { gainnode.gain.setvaluecurveattime(wavearray, audioctx.currenttime, 2); } specifications specification status comment
web audio apithe definition of 'setvaluecurveattime' in that specification.
AudioParam - Web APIs
the
web audio api's audioparam interface represents an audio-related parameter, usually a parameter of an audionode (such as gainnode.gain).
... var audiocontext = window.audiocontext || window.
webkitaudiocontext; var audioctx = new audiocontext(); var gainnode = audioctx.creategain(); gainnode.gain.value = 0; next, an example showing a dynamicscompressornode having some param values maniuplated.
...reatedynamicscompressor(); compressor.threshold.setvalueattime(-50, audioctx.currenttime); compressor.knee.setvalueattime(40, audioctx.currenttime); compressor.ratio.setvalueattime(12, audioctx.currenttime); compressor.attack.setvalueattime(0, audioctx.currenttime); compressor.release.setvalueattime(0.25, audioctx.currenttime); specifications specification status comment
web audio apithe definition of 'audioparam' in that specification.
AudioWorklet - Web APIs
the audioworklet interface of the
web audio api is used to supply custom audio processing scripts that execute in a separate thread to provide very low latency audio processing.
... the worklet's code is run in the audioworkletglobalscope global execution context, using a separate
web audio thread which is shared by the worklet and other audio nodes.
... specifications specification status comment
web audio apithe definition of 'audioworklet' in that specification.
AudioWorkletNode - Web APIs
the audioworkletnode interface of the
web audio api represents a base class for a user-defined audionode, which can be connected to an audio routing graph along with other nodes.
... it has an associated audioworkletprocessor, which does the actual audio processing in a
web audio rendering thread.
... const audiocontext = new audiocontext() await audiocontext.audioworklet.addmodule('white-noise-processor.js') const whitenoisenode = new audioworkletnode(audiocontext, 'white-noise-processor') whitenoisenode.connect(audiocontext.destination) specifications specification status comment
web audio apithe definition of 'audioworkletnode' in that specification.
AudioWorkletProcessor - Web APIs
the audioworkletprocessor interface of the
web audio api represents an audio processing code behind a custom audioworkletnode.
... it lives in the audioworkletglobalscope and runs on the
web audio rendering thread.
... const audiocontext = new audiocontext() await audiocontext.audioworklet.addmodule('white-noise-processor.js') const whitenoisenode = new audioworkletnode(audiocontext, 'white-noise-processor') whitenoisenode.connect(audiocontext.destination) specifications specification status comment
web audio apithe definition of 'audioworkletprocessor' in that specification.
BaseAudioContext.createConstantSource() - Web APIs
specifications specification status comment
web audio apithe definition of 'createconstantsource()' in that specification.
... desktopmobilechromeedgefirefoxinternet exploreroperasafariandroid
webviewchrome for androidfirefox for androidopera for androidsafari on iossamsung internetcreateconstantsourcechrome full support 56edge full support ≤79firefox full support 53ie no support noopera full support 43safari ...
...no support no
webview android full support 56chrome android full support 56firefox android full support 53opera android full support 43safari ios no support nosamsung internet android full support 6.0legend full support full support no support no support ...
BaseAudioContext.createScriptProcessor() - Web APIs
note: as of the august 29 2014
web audio api spec publication, this feature has been marked as deprecated, and was replaced by audioworklet (see audioworkletnode).
... important:
webkit currently (version 31) requires that a valid buffersize be passed when calling this method.
...ire up play button playbutton.onclick = function() { source.connect(scriptnode); scriptnode.connect(audioctx.destination); source.start(); } // when the buffer source stops playing, disconnect everything source.onended = function() { source.disconnect(scriptnode); scriptnode.disconnect(audioctx.destination); } specifications specification status comment
web audio apithe definition of 'createscriptprocessor' in that specification.
BaseAudioContext.decodeAudioData() - Web APIs
this is the preferred method of creating an audio source for
web audio api from an audio track.
... note: you can run the example live (or view the source.) // define variables var audioctx = new (window.audiocontext || window.
webkitaudiocontext)(); var source; var pre = document.queryselector('pre'); var myscript = document.queryselector('script'); var play = document.queryselector('.play'); var stop = document.queryselector('.stop'); // use xhr to load an audio track, and // decodeaudiodata to decode it and stick it in a buffer.
...0); play.setattribute('disabled', 'disabled'); } stop.onclick = function() { source.stop(0); play.removeattribute('disabled'); } // dump script to pre element pre.innerhtml = myscript.innerhtml; new promise-based syntax ctx.decodeaudiodata(audiodata).then(function(decodeddata) { // use the decoded data here }); specifications specification status comment
web audio apithe definition of 'decodeaudiodata()' in that specification.
BaseAudioContext.listener - Web APIs
example note: for a full
web audio spatialization example, see our panner-node demo.
... var audiocontext = window.audiocontext || window.
webkitaudiocontext; var audioctx = new audiocontext(); // older
webkit/blink browsers require a prefix ...
... var mylistener = audioctx.listener; specifications specification status comment
web audio apithe definition of 'listener' in that specification.
BaseAudioContext.sampleRate - Web APIs
example note: for a full
web audio example implementation, see one of our
web audio demos on the mdn github repo, like panner-node.
... var audiocontext = window.audiocontext || window.
webkitaudiocontext; var audioctx = new audiocontext(); // older
webkit/blink browsers require a prefix ...
... console.log(audioctx.samplerate); specifications specification status comment
web audio apithe definition of 'samplerate' in that specification.
BeforeUnloadEvent - Web APIs
<div id="interfacediagram" style="display: inline-block; position: relative; width: 100%; padding-bottom: 20%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 120" preserveaspectratio="xminymin meet"><a xlink:href="/docs/
web/api/event" target="_top"><rect x="1" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="38.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">event</text></a><polyline points="76,25 86,20 86,30 76,25" stroke="#d4dde4" fill="none"/><line x1="86" y1="25" x2="116" y2="...
...25" stroke="#d4dde4"/><a xlink:href="/docs/
web/api/beforeunloadevent" target="_top"><rect x="116" y="1" width="170" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="201" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">beforeunloadevent</text></a></svg></div> a:hover text { fill: #0095dd; pointer-events: all;} bubbles no cancelable yes target objects defaultview interface event examples window.addeventlistener("beforeunload", function( event ) { event.returnvalue = "\o/"; }); // is equivalent to window.addeventlistener("beforeunload", function( event ) { event.preventdefault(); });
webkit-derived browsers d...
... window.addeventlistener("beforeunload", function (e) { var confirmationmessage = "\o/"; (e || window.event).returnvalue = confirmationmessage; // gecko + ie return confirmationmessage; /* safari, chrome, and other *
webkit-derived browsers */ }); specifications specification status comment html living standardthe definition of 'beforeunloadevent' in that specification.
Bluetooth.getAvailability() - Web APIs
the getavailability() method of bluetooth interface of
web bluetooth api interface exposes the bluetooth capabilities of the current device.
... note: user might not allow use of
web bluetooth api, even if getavailability() returned true (navigator.bluetooth.requestdevice() might not resolve with a bluetoothdevice).
...bluetooth is not supported"); }); specifications specification status comment
web bluetooththe definition of 'getavailability()' in that specification.
BluetoothDevice - Web APIs
the bluetoothdevice interface of the
web bluetooth api represents a bluetooth device inside a particular script execution environment.
... <div id="interfacediagram" style="display: inline-block; position: relative; width: 100%; padding-bottom: 11.666666666666666%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 70" preserveaspectratio="xminymin meet"><a xlink:href="/docs/
web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="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/blue...
... specifications specification status comment
web bluetooththe definition of 'bluetoothdevice' in that specification.
Managing screen orientation - Web APIs
and if a device is able to know its orientation, it's good to have the ability to control the screen orientation in order to preserve or adapt the interface of a
web application.
... screen.addeventlistener("orientationchange", function () { console.log("the orientation of the screen is: " + screen.orientation); }); preventing orientation change any
web application can lock the screen to suits its own needs.
... screen.lockorientation('landscape'); note: a screen lock is
web application dependent.
Cache - Web APIs
// (see /docs/
web/api/request/clone) return fetch(event.request.clone()).then(function(response) { console.log(' response for %s from network is: %o', event.request.url, response); if (response.status < 400 && response.headers.has('content-type') && response.headers.get('content-type').match(/^font\//i)) { // this avoids caching resp...
... // all of the google
web fonts are served off of a domain that supports cors, so that isn't an issue here.
... // (see /docs/
web/api/request/clone) console.log(' caching the response to', event.request.url); cache.put(event.request, response.clone()); } else { console.log(' not caching the response to', event.request.url); } // return the original response object, which will be used to fulfill the resource request.
CanvasRenderingContext2D.drawWindow() - Web APIs
this api cannot be used by
web content.
... it is usually a bad idea to use any background other than pure white "rgb(255,255,255)" or transparent, as this is what all browsers do, and many
websites expect that transparent parts of their interface will be drawn on white background.
... ted mielczarek's tab preview extension uses this technique in chrome to provide thumbnails of
web pages, and the source is available for reference.
Hit regions and accessibility - Web APIs
in general, you should avoid using canvas in an accessible
website or app.
... aria rules accessible rich internet applications (aria) defines ways to make
web content and
web applications more accessible to people with disabilities.
...the api has the following three methods (which are still experimental in current
web browsers; check the browser compatibility tables).
Using channel messaging - Web APIs
note: this feature is available in
web workers.
...such things are not so easy using conventional
web technology, because of the security models the
web uses.
... note: for more information and ideas, the ports as the basis of an object-capability model on the
web section of the spec is a useful read.
Comment - Web APIs
<div id="interfacediagram" style="display: inline-block; position: relative; width: 100%; padding-bottom: 11.666666666666666%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 70" preserveaspectratio="xminymin meet"><a xlink:href="/docs/
web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="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="2...
...5" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/
web/api/node" target="_top"><rect x="151" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="188.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">node</text></a><polyline points="226,25 236,20 236,30 226,25" stroke="#d4dde4" fill="none"/><line x1="236" y1="25" x2="266" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/
web/api/characterdata" target="_top"><rect x="266" y="1" width="130" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="331" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">charac...
...terdata</text></a><polyline points="396,25 406,20 406,30 396,25" stroke="#d4dde4" fill="none"/><line x1="406" y1="25" x2="436" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/
web/api/comment" target="_top"><rect x="436" y="1" width="75" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="473.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">comment</text></a></svg></div> a:hover text { fill: #0095dd; pointer-events: all;} properties this interface has no specific property, but inherits those of its parent, characterdata, and indirectly those of node.
Console.info() - Web APIs
the console.info() method outputs an informational message to the
web console.
... in firefox, a small "i" icon is displayed next to these items in the
web console's log.
... note: this feature is available in
web workers.
CredentialsContainer.get() - Web APIs
publickey: an publickeycredentialrequestoptions object containing requirements for returned
webauthn credentials.
... mediation: a string indicating whether the user will be required to log on for every visit to the
website.
...
web authentication: an api for accessing public key credentials level 1 recommendation initial definition.
DOMException() - Web APIs
example tbd specifications specification status comment
web idlthe definition of 'domexception()' in that specification.
... desktopmobilechromeedgefirefoxinternet exploreroperasafariandroid
webviewchrome for androidfirefox for androidopera for androidsafari on iossamsung internetdomexception() constructorchrome full support yesedge full support 79firefox ?
...
webview android full support yeschrome android full support yesfirefox android ?
DOMException.code - Web APIs
specifications specification status comment
web idlthe definition of 'code' in that specification.
... desktopmobilechromeedgefirefoxinternet exploreroperasafariandroid
webviewchrome for androidfirefox for androidopera for androidsafari on iossamsung internetcodechrome full support yesedge full support 12firefox full support 1ie ?
... opera full support yessafari full support yes
webview android full support yeschrome android full support yesfirefox android full support 4opera android full support yessafari ios full support yessamsung internet android full support yeslegend full support full support compatibility unknown ...
DOMException.message - Web APIs
specifications specification status comment
web idlthe definition of 'message' in that specification.
... desktopmobilechromeedgefirefoxinternet exploreroperasafariandroid
webviewchrome for androidfirefox for androidopera for androidsafari on iossamsung internetmessagechrome full support yesedge full support 12firefox full support 1ie ?
... opera full support yessafari full support yes
webview android full support yeschrome android full support yesfirefox android full support 4opera android full support yessafari ios full support yessamsung internet android full support yeslegend full support full support compatibility unknown ...
DOMException - Web APIs
the domexception interface represents an abnormal event (called an exception) that occurs as a result of calling a method or accessing a property of a
web api.
... this is basically how error conditions are described in
web apis.
... specifications specification status comment
web idlthe definition of 'constructor' in that specification.
DOMHighResTimeStamp - Web APIs
if the script's global object is a workerglobalscope (that is, the script is running as a
web worker), the time origin is the moment at which the worker was created.
... desktopmobilechromeedgefirefoxinternet exploreroperasafariandroid
webviewchrome for androidfirefox for androidopera for androidsafari on iossamsung internetdomhighrestimestampchrome full support 6edge full support 12firefox full support 7ie full support 9opera full support...
... 15safari full support 8
webview android full support yeschrome android full support 18firefox android full support 15opera android full support 14safari ios full support 9samsung internet android full support 1.0legend full support full support ...
DOMRect - Web APIs
for example, vreyeparameters.renderrect from the defunct
webvr api specified the viewport of a canvas into which visuals for one eye of a head mounted display should be rendered.
... <div id="interfacediagram" style="display: inline-block; position: relative; width: 100%; padding-bottom: 11.666666666666666%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 70" preserveaspectratio="xminymin meet"><a xlink:href="/docs/
web/api/domrectreadonly" target="_top"><rect x="1" y="1" width="150" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="76" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">domrectreadonly</text></a><polyline points="151,25 161,20 161,30 151,25" stroke="#d4dde4" fill="none"/><line x1="161" y1="25" x2="191" y2="...
...25" stroke="#d4dde4"/><a xlink:href="/docs/
web/api/domrect" target="_top"><rect x="191" y="1" width="75" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="228.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">domrect</text></a></svg></div> a:hover text { fill: #0095dd; pointer-events: all;} constructor domrect() creates a new domrect object.
DataTransferItem - Web APIs
datatransferitem.
webkitgetasentry() returns an object based on filesystementry representing the selected file's entry in its file system.
... recommendation w3c snapshot of whatwg file and directory entries apithe definition of 'datatransferitem.
webkitgetasentry()' in that specification.
... draft definition of
webkitgetasentry() as part of the file and directory entries api.
Detecting device orientation - Web APIs
increasingly,
web-enabled devices are capable of determining their orientation; that is, they can report data indicating changes to their orientation with relation to the pull of gravity.
... in particular, hand-held devices such as mobile phones can use this information to automatically rotate the display to remain upright, presenting a wide-screen view of the
web content when the device is rotated so that its width is greater than its height.
... the motion event contains four properties: devicemotionevent.acceleration devicemotionevent.accelerationincludinggravity devicemotionevent.rotationrate devicemotionevent.interval motion values explained the devicemotionevent objects provide
web developers with information about the speed of changes for the device's position and orientation.
DeviceOrientationEvent - Web APIs
the deviceorientationevent provides
web developers with information from the physical orientation of the device running the
web page.
... deviceorientationevent.
webkitcompassheading read only a number represents the difference between the motion of the device around the z axis of the world system and the direction of the north, express in degrees with values ranging from 0 to 360.
... deviceorientationevent.
webkitcompassaccuracy read only the accuracy of the compass means that the deviation is positive or negative.
Document.cookie - Web APIs
when user privacy is a concern, it's important that any
web app implementation invalidate cookie data after a certain timeout instead of relying on the browser to do it.
... cookies are often used in
web application to identify a user and their authenticated session.
... so stealing the cookie from a
web application, will lead to hijacking the authenticated user's session.
DocumentFragment - Web APIs
<div id="interfacediagram" style="display: inline-block; position: relative; width: 100%; padding-bottom: 11.666666666666666%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 70" preserveaspectratio="xminymin meet"><a xlink:href="/docs/
web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="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="2...
...5" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/
web/api/node" target="_top"><rect x="151" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="188.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">node</text></a><polyline points="226,25 236,20 236,30 226,25" stroke="#d4dde4" fill="none"/><line x1="236" y1="25" x2="266" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/
web/api/documentfragment" target="_top"><rect x="266" y="1" width="160" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="346" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">...
... this interface is also of great use with
web components: <template> elements contain a documentfragment in their htmltemplateelement.content property.
Using the W3C DOM Level 1 Core - Web APIs
due to the ubiquity of the dom, this api is supported in all major browsers, including mozilla firefox and microsoft internet explorer, and serves as a base for scripting on the
web.
...for example, the following document <html> <head> <title>my document</title> </head> <body> <h1>header</h1> <p>paragraph</p> </body> </html> has a dom tree that looks like this: (note that, although the above tree is similar to the above document's dom tree, it's not identical, as the actual dom tree preserves whitespace.) when a
web browser parses an html document, it builds a dom tree and then uses it to display the document.
...the easiest way for
web page authors to edit the dom of a document is to use javascript to access the document property of the global object.
DynamicsCompressorNode() - Web APIs
specifications specification status comment
web audio apithe definition of 'dynamicscompressornode()' in that specification.
... desktopmobilechromeedgefirefoxinternet exploreroperasafariandroid
webviewchrome for androidfirefox for androidopera for androidsafari on iossamsung internetdynamicscompressornode() constructorchrome full support 55notes full support 55notes notes before chrome 59, the default values were not supported.edge full support ≤79firefox full support 5...
...
webview android full support 55notes full support 55notes notes before version 59, the default values were not supported.chrome android full support 55notes full support 55notes notes before chrome 59, the default values were not supported.firefox android full support 53opera android full support 42safari ios ?
EXT_disjoint_timer_query.createQueryEXT() - Web APIs
the ext_disjoint_timer_query.createqueryext() method of the
webgl api creates and initializes
webglquery objects, which track the time needed to fully complete a set of gl commands.
... syntax
webgltimerqueryext ext.createqueryext(); parameters none.
... return value a
webglquery object.
EXT_disjoint_timer_query.isQueryEXT() - Web APIs
the ext_disjoint_timer_query.isqueryext() method of the
webgl api returns true if the passed object is a
webglquery object.
... syntax glboolean ext.isqueryext(query); parameters query a
webglquery object to test.
... return value a glboolean indicating whether the given object is a
webglquery object (true) or not (false).
EffectTiming.iterationStart - Web APIs
web animations api's effecttiming dictionary's iterationstart property specifies the repetition number which repetition the animation begins at and its progress through it.
...see issue 170 in the
web animations api specification's issue tracker for details and status of any changes to the specification in this regard.
... specifications specification status comment
web animationsthe definition of 'iterationstart' in that specification.
Element.animate() - Web APIs
examples in the demo down the rabbit hole (with the
web animation api), we use the convenient animate() method to immediately create and play an animation on the #tunnel element to make it flow upwards, infinitely.
... specifications specification status comment
web animations level 2the definition of 'keyframeanimationoptions.iterationcomposite' in that specification.
...
web animationsthe definition of 'animate()' in that specification.
Element: mousewheel event - Web APIs
this difference makes a serious issue for
web application developers.
... that is,
web developers cannot know if mousewheel event is caused by which device.
... see
webinputeventfactory::mousewheelevent of the chromium's source code for the detail.
Element.scroll() - Web APIs
desktopmobilechromeedgefirefoxinternet exploreroperasafariandroid
webviewchrome for androidfirefox for androidopera for androidsafari on iossamsung internetscrollchrome full support 45edge full support 79firefox full support 36ie no support noopera full support ...
... 32safari full support 10
webview android full support 45chrome android full support 45firefox android full support 36opera android full support 32safari ios no support nosamsung internet android full support 5.0scrolltooptions parameterchrome full support 45edge full support 79firefox full support yesie no support ...
... noopera full support 32safari no support no
webview android full support 45chrome android full support 45firefox android full support yesopera android full support 32safari ios no support nosamsung internet android full support 5.0legend full support full support no support no sup...
Element.scrollTo() - Web APIs
desktopmobilechromeedgefirefoxinternet exploreroperasafariandroid
webviewchrome for androidfirefox for androidopera for androidsafari on iossamsung internetscrolltochrome full support 45edge full support 79firefox full support 36ie no support noopera full support ...
... 32safari full support 10
webview android full support 45chrome android full support 45firefox android full support 36opera android full support 32safari ios no support nosamsung internet android full support 5.0scrolltooptions parameterchrome full support 45edge full support 79firefox full support yesie no support ...
... noopera full support 32safari no support no
webview android full support 45chrome android full support 45firefox android full support yesopera android full support 32safari ios no support nosamsung internet android full support 5.0legend full support full support no support no s...
Element.slot - Web APIs
a slot is a placeholder inside a
web component that users can fill with their own markup (see using templates and slots for more information).
... desktopmobilechromeedgefirefoxinternet exploreroperasafariandroid
webviewchrome for androidfirefox for androidopera for androidsafari on iossamsung internetslotchrome full support 53edge full support ≤79firefox full support 63ie ?
... opera full support yessafari full support 10
webview android full support 53chrome android full support 53firefox android full support 63opera android full support yessafari ios full support yessamsung internet android full support 6.0legend full support full support compatibility unknown c...
Comparison of Event Targets - Web APIs
event.explicitoriginaltarget event.
webidl if the event was retargeted for some reason other than an anonymous boundary crossing, this will be set to the target before the retargeting occurs.
... event.originaltarget event.
webidl the original target of the event, before any retargetings.
... event.composedtarget event.
webidl the original non-native target of the event before composition from shadow dom.
Event - Web APIs
(for example, a
webpage with an advertising-module and statistics-module both monitoring video-watching.) when there are many nested elements, each with its own handler(s), event processing can become very complicated—especially where a parent element receives the very same event as its child elements because "spatially" they overlap so the event technically occurs in both, and the processing order of such event...
...event mutationevent offlineaudiocompletionevent overconstrainederror pagetransitionevent paymentrequestupdateevent pointerevent popstateevent progressevent relatedevent rtcdatachannelevent rtcidentityerrorevent rtcidentityevent rtcpeerconnectioniceevent sensorevent storageevent svgevent svgzoomevent timeevent touchevent trackevent transitionevent uievent userproximityevent
webglcontextevent wheelevent constructor event() creates an event object, returning it to the caller.
...some other browsers are starting to support it for
web compatibility purposes.
EventSource - Web APIs
the eventsource interface is
web content's interface to server-sent events.
... unlike
websockets, server-sent events are unidirectional; that is, data messages are delivered in one direction, from the server to the client (such as a user's
web browser).
...for example, eventsource is a useful approach for handling things like social media status updates, news feeds, or delivering data into a client-side storage mechanism like indexeddb or
web storage.
EventTarget.addEventListener() - Web APIs
if true, the listener receives synthetic events dispatched by
web content (the default is false for browser chrome and true for regular
web pages).
... you can learn more from the article about eventlisteneroptions from the
web incubator community group.
... the attachevent() method could be paired with the onresize event to detect when certain elements in a
web page were resized.
FileEntrySync - Web APIs
desktopmobilechromeedgefirefoxinternet exploreroperasafariandroid
webviewchrome for androidfirefox for androidopera for androidsafari on iossamsung internetfileentrysync non-standardchrome full support 13prefixed full support 13prefixed prefixed implemented with the vendor prefix:
webkitedge full support ≤79prefixed ...
... full support ≤79prefixed prefixed implemented with the vendor prefix:
webkitfirefox no support noie no support noopera no support nosafari no support no
webview android full support 37prefixed full support 37prefixed prefixed implemented with the vendor prefix:
webkitchrome android full support 18prefixed full support 18prefixed prefixed implemented with the vendor prefix:
webkitfirefox android ...
... no support noopera android no support nosafari ios no support nosamsung internet android full support 1.0prefixed full support 1.0prefixed prefixed implemented with the vendor prefix:
webkitlegend full support full support no support no supportnon-standard.
FileError - Web APIs
a
web app could fail for various reasons, so you don't want to spend the rest of your day guessing what's going on and going through maddening troubleshooting.
...when you're just testing your app, and you don't want to set up a
web server, you can bypass the security restriction on chrome.
... security_err 2 access to the files were denied for one of the following reasons: the files might be unsafe for access within a
web application.
FileReader - Web APIs
the filereader object lets
web applications asynchronously read the contents of files (or raw data buffers) stored on the user's computer, using file or blob objects to specify the file or data to read.
... note: this feature is available in
web workers.
... see using files from
web applications for details and examples.
FileReaderSync.readAsArrayBuffer() - Web APIs
securityerror is raised when one of the following problematic situation is detected: the resource has been modified by a third party; too many read are performed simultaneously; the file pointed by the resource is unsafe for a use from the
web (like it is a system file).
... desktopmobilechromeedgefirefoxinternet exploreroperasafariandroid
webviewchrome for androidfirefox for androidopera for androidsafari on iossamsung internetreadasarraybufferchrome full support yesedge full support 12firefox full support 8ie full support yesopera full suppo...
...rt yessafari full support yes
webview android full support yeschrome android full support yesfirefox android full support 8opera android full support yessafari ios full support yessamsung internet android full support yeslegend full support full support ...
FileReaderSync.readAsBinaryString() - Web APIs
securityerror is raised when one of the following problematic situation is detected: the resource has been modified by a third party; too many read are performed simultaneously; the file pointed by the resource is unsafe for a use from the
web (like it is a system file).
... desktopmobilechromeedgefirefoxinternet exploreroperasafariandroid
webviewchrome for androidfirefox for androidopera for androidsafari on iossamsung internetreadasbinarystringchrome full support yesedge full support 12firefox full support 8ie full support yesopera full supp...
...ort yessafari full support yes
webview android full support yeschrome android full support yesfirefox android full support 8opera android full support yessafari ios full support yessamsung internet android full support yeslegend full support full support ...
FileReaderSync.readAsDataURL() - Web APIs
securityerror is raised when one of the following problematic situation is detected: the resource has been modified by a third party; too many read are performed simultaneously; the file pointed by the resource is unsafe for a use from the
web (like it is a system file).
... desktopmobilechromeedgefirefoxinternet exploreroperasafariandroid
webviewchrome for androidfirefox for androidopera for androidsafari on iossamsung internetreadasdataurlchrome full support yesedge full support 12firefox full support 8ie full support yesopera full support ...
... yessafari full support yes
webview android full support yeschrome android full support yesfirefox android full support 8opera android full support yessafari ios full support yessamsung internet android full support yeslegend full support full support ...
FileReaderSync.readAsText() - Web APIs
securityerror is raised when one of the following problematic situation is detected: the resource has been modified by a third party; too many read are performed simultaneously; the file pointed by the resource is unsafe for a use from the
web (like it is a system file).
... desktopmobilechromeedgefirefoxinternet exploreroperasafariandroid
webviewchrome for androidfirefox for androidopera for androidsafari on iossamsung internetreadastextchrome full support yesedge full support 12firefox full support 8ie full support yesopera full support ...
... yessafari full support yes
webview android full support yeschrome android full support yesfirefox android full support 8opera android full support yessafari ios full support yessamsung internet android full support yeslegend full support full support ...
FileSystemDirectoryEntry.getDirectory() - Web APIs
these options are currently not useful in
web contexts.
... desktopmobilechromeedgefirefoxinternet exploreroperasafariandroid
webviewchrome for androidfirefox for androidopera for androidsafari on iossamsung internetgetdirectory experimentalchrome full support 8edge full support 79firefox full support 50notes full support 50notes notes in firefox...
..., the errorcallback's input parameter is a domexception rather than a fileerror object.ie no support noopera no support nosafari full support 11.1
webview android full support ≤37chrome android full support 18firefox android full support 50notes full support 50notes notes in firefox, the errorcallback's input parameter is a domexception rather than a fileerror object.opera android no support nosafari ios full support ...
FileSystemDirectoryEntry.getFile() - Web APIs
these options are currently not useful in
web contexts.
... desktopmobilechromeedgefirefoxinternet exploreroperasafariandroid
webviewchrome for androidfirefox for androidopera for androidsafari on iossamsung internetgetfile experimentalchrome full support 8edge full support 79firefox full support 50notes full support 50notes notes in firefox, the...
... errorcallback's input parameter is a domexception rather than a fileerror object.ie no support noopera no support nosafari full support 11.1
webview android full support ≤37chrome android full support 18firefox android full support 50notes full support 50notes notes in firefox, the errorcallback's input parameter is a domexception rather than a fileerror object.opera android no support nosafari ios full support ...
Using FormData Objects - Web APIs
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.
... the field "
webmasterfile" is a blob.
Geolocation - Web APIs
it gives
web content access to the location of the device.
... this allows a
web site or app to offer customized results based on the user's location.
... note: for security reasons, when a
web page tries to access location information, the user is notified and asked to grant permission.
Geolocation API - Web APIs
the geolocation api allows the user to provide their location to
web applications if they so desire.
...
webextensions that wish to use the geolocation object must add the "geolocation" permission to their manifest.
... concepts and usage you will often want to retrieve a user's location information in your
web app, for example to plot their location on a map, or display personalized information relevant to their location.
GlobalEventHandlers - Web APIs
event handlers these event handlers are defined on the globaleventhandlers mixin, and implemented by htmlelement, document, window, as well as by workerglobalscope for
web workers.
...when the user starts to make a new text selection on a
web page.
...when the text selected on a
web page changes.
HTMLAnchorElement - Web APIs
<a> element; not to be confused with <link>, which is represented by htmllinkelement) <div id="interfacediagram" style="display: inline-block; position: relative; width: 100%; padding-bottom: 20%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 120" preserveaspectratio="xminymin meet"><a xlink:href="/docs/
web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="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="2...
...5" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/
web/api/node" target="_top"><rect x="151" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="188.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">node</text></a><polyline points="226,25 236,20 236,30 226,25" stroke="#d4dde4" fill="none"/><line x1="236" y1="25" x2="266" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/
web/api/element" target="_top"><rect x="266" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="303.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">element</te...
...xt></a><polyline points="341,25 351,20 351,30 341,25" stroke="#d4dde4" fill="none"/><line x1="351" y1="25" x2="381" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/
web/api/htmlelement" target="_top"><rect x="381" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="436" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">htmlelement</text></a><polyline points="491,25 501,20 501,30 491,25" stroke="#d4dde4" fill="none"/><line x1="501" y1="25" x2="509" y2="25" stroke="#d4dde4"/><line x1="509" y1="25" x2="509" y2="90" stroke="#d4dde4"/><line x1="509" y1="90" x2="492" y2="90" stroke="#d4dde4"/><a xlink:href="/docs/
web/api/htmlanchorelement" target="_top"><rect x="321" y...
HTMLAreaElement - Web APIs
<div id="interfacediagram" style="display: inline-block; position: relative; width: 100%; padding-bottom: 20%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 120" preserveaspectratio="xminymin meet"><a xlink:href="/docs/
web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="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="2...
...5" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/
web/api/node" target="_top"><rect x="151" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="188.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">node</text></a><polyline points="226,25 236,20 236,30 226,25" stroke="#d4dde4" fill="none"/><line x1="236" y1="25" x2="266" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/
web/api/element" target="_top"><rect x="266" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="303.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">element</te...
...xt></a><polyline points="341,25 351,20 351,30 341,25" stroke="#d4dde4" fill="none"/><line x1="351" y1="25" x2="381" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/
web/api/htmlelement" target="_top"><rect x="381" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="436" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">htmlelement</text></a><polyline points="491,25 501,20 501,30 491,25" stroke="#d4dde4" fill="none"/><line x1="501" y1="25" x2="509" y2="25" stroke="#d4dde4"/><line x1="509" y1="25" x2="509" y2="90" stroke="#d4dde4"/><line x1="509" y1="90" x2="492" y2="90" stroke="#d4dde4"/><a xlink:href="/docs/
web/api/htmlareaelement" target="_top"><rect x="341" y="...
HTMLBRElement - Web APIs
<div id="interfacediagram" style="display: inline-block; position: relative; width: 100%; padding-bottom: 20%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 120" preserveaspectratio="xminymin meet"><a xlink:href="/docs/
web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="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="2...
...5" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/
web/api/node" target="_top"><rect x="151" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="188.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">node</text></a><polyline points="226,25 236,20 236,30 226,25" stroke="#d4dde4" fill="none"/><line x1="236" y1="25" x2="266" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/
web/api/element" target="_top"><rect x="266" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="303.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">element</te...
...xt></a><polyline points="341,25 351,20 351,30 341,25" stroke="#d4dde4" fill="none"/><line x1="351" y1="25" x2="381" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/
web/api/htmlelement" target="_top"><rect x="381" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="436" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">htmlelement</text></a><polyline points="491,25 501,20 501,30 491,25" stroke="#d4dde4" fill="none"/><line x1="501" y1="25" x2="509" y2="25" stroke="#d4dde4"/><line x1="509" y1="25" x2="509" y2="90" stroke="#d4dde4"/><line x1="509" y1="90" x2="492" y2="90" stroke="#d4dde4"/><a xlink:href="/docs/
web/api/htmlbrelement" target="_top"><rect x="361" y="65...
HTMLBaseElement - Web APIs
<div id="interfacediagram" style="display: inline-block; position: relative; width: 100%; padding-bottom: 20%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 120" preserveaspectratio="xminymin meet"><a xlink:href="/docs/
web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="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="2...
...5" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/
web/api/node" target="_top"><rect x="151" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="188.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">node</text></a><polyline points="226,25 236,20 236,30 226,25" stroke="#d4dde4" fill="none"/><line x1="236" y1="25" x2="266" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/
web/api/element" target="_top"><rect x="266" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="303.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">element</te...
...xt></a><polyline points="341,25 351,20 351,30 341,25" stroke="#d4dde4" fill="none"/><line x1="351" y1="25" x2="381" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/
web/api/htmlelement" target="_top"><rect x="381" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="436" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">htmlelement</text></a><polyline points="491,25 501,20 501,30 491,25" stroke="#d4dde4" fill="none"/><line x1="501" y1="25" x2="509" y2="25" stroke="#d4dde4"/><line x1="509" y1="25" x2="509" y2="90" stroke="#d4dde4"/><line x1="509" y1="90" x2="492" y2="90" stroke="#d4dde4"/><a xlink:href="/docs/
web/api/htmlbaseelement" target="_top"><rect x="341" y="...
HTMLBodyElement - Web APIs
<div id="interfacediagram" style="display: inline-block; position: relative; width: 100%; padding-bottom: 20%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 120" preserveaspectratio="xminymin meet"><a xlink:href="/docs/
web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="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="2...
...5" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/
web/api/node" target="_top"><rect x="151" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="188.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">node</text></a><polyline points="226,25 236,20 236,30 226,25" stroke="#d4dde4" fill="none"/><line x1="236" y1="25" x2="266" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/
web/api/element" target="_top"><rect x="266" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="303.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">element</te...
...xt></a><polyline points="341,25 351,20 351,30 341,25" stroke="#d4dde4" fill="none"/><line x1="351" y1="25" x2="381" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/
web/api/htmlelement" target="_top"><rect x="381" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="436" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">htmlelement</text></a><polyline points="491,25 501,20 501,30 491,25" stroke="#d4dde4" fill="none"/><line x1="501" y1="25" x2="509" y2="25" stroke="#d4dde4"/><line x1="509" y1="25" x2="509" y2="90" stroke="#d4dde4"/><line x1="509" y1="90" x2="492" y2="90" stroke="#d4dde4"/><a xlink:href="/docs/
web/api/htmlbodyelement" target="_top"><rect x="341" y="...
HTMLButtonElement - Web APIs
<div id="interfacediagram" style="display: inline-block; position: relative; width: 100%; padding-bottom: 20%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 120" preserveaspectratio="xminymin meet"><a xlink:href="/docs/
web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="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="2...
...5" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/
web/api/node" target="_top"><rect x="151" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="188.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">node</text></a><polyline points="226,25 236,20 236,30 226,25" stroke="#d4dde4" fill="none"/><line x1="236" y1="25" x2="266" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/
web/api/element" target="_top"><rect x="266" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="303.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">element</te...
...xt></a><polyline points="341,25 351,20 351,30 341,25" stroke="#d4dde4" fill="none"/><line x1="351" y1="25" x2="381" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/
web/api/htmlelement" target="_top"><rect x="381" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="436" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">htmlelement</text></a><polyline points="491,25 501,20 501,30 491,25" stroke="#d4dde4" fill="none"/><line x1="501" y1="25" x2="509" y2="25" stroke="#d4dde4"/><line x1="509" y1="25" x2="509" y2="90" stroke="#d4dde4"/><line x1="509" y1="90" x2="492" y2="90" stroke="#d4dde4"/><a xlink:href="/docs/
web/api/htmlbuttonelement" target="_top"><rect x="321" y...
HTMLCanvasElement.toBlob() - Web APIs
qualityargument optional a number between 0 and 1 indicating image quality if the requested type is image/jpeg or image/
webp.
... if this argument is anything else, the default values 0.92 and 0.80 are used for image/jpeg and image/
webp respectively.
...load = iconname + '.ico'; a.href = window.url.createobjecturl(b); } } canvas.toblob(blobcallback('passthisstring'), 'image/vnd.microsoft.icon', '-moz-parse-options:format=bmp;bpp=32'); save toblob to disk with os.file (chrome/add-on context only) this technique saves it to the desktop and is only useful in firefox chrome context or add-on code as os apis are not present on
web sites.
HTMLDListElement - Web APIs
<div id="interfacediagram" style="display: inline-block; position: relative; width: 100%; padding-bottom: 20%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 120" preserveaspectratio="xminymin meet"><a xlink:href="/docs/
web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="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="2...
...5" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/
web/api/node" target="_top"><rect x="151" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="188.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">node</text></a><polyline points="226,25 236,20 236,30 226,25" stroke="#d4dde4" fill="none"/><line x1="236" y1="25" x2="266" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/
web/api/element" target="_top"><rect x="266" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="303.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">element</te...
...xt></a><polyline points="341,25 351,20 351,30 341,25" stroke="#d4dde4" fill="none"/><line x1="351" y1="25" x2="381" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/
web/api/htmlelement" target="_top"><rect x="381" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="436" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">htmlelement</text></a><polyline points="491,25 501,20 501,30 491,25" stroke="#d4dde4" fill="none"/><line x1="501" y1="25" x2="509" y2="25" stroke="#d4dde4"/><line x1="509" y1="25" x2="509" y2="90" stroke="#d4dde4"/><line x1="509" y1="90" x2="492" y2="90" stroke="#d4dde4"/><a xlink:href="/docs/
web/api/htmldlistelement" target="_top"><rect x="331" y=...
HTMLDataElement - Web APIs
<div id="interfacediagram" style="display: inline-block; position: relative; width: 100%; padding-bottom: 20%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 120" preserveaspectratio="xminymin meet"><a xlink:href="/docs/
web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="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="2...
...5" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/
web/api/node" target="_top"><rect x="151" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="188.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">node</text></a><polyline points="226,25 236,20 236,30 226,25" stroke="#d4dde4" fill="none"/><line x1="236" y1="25" x2="266" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/
web/api/element" target="_top"><rect x="266" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="303.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">element</te...
...xt></a><polyline points="341,25 351,20 351,30 341,25" stroke="#d4dde4" fill="none"/><line x1="351" y1="25" x2="381" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/
web/api/htmlelement" target="_top"><rect x="381" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="436" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">htmlelement</text></a><polyline points="491,25 501,20 501,30 491,25" stroke="#d4dde4" fill="none"/><line x1="501" y1="25" x2="509" y2="25" stroke="#d4dde4"/><line x1="509" y1="25" x2="509" y2="90" stroke="#d4dde4"/><line x1="509" y1="90" x2="492" y2="90" stroke="#d4dde4"/><a xlink:href="/docs/
web/api/htmldataelement" target="_top"><rect x="341" y="...
HTMLDataListElement - Web APIs
<div id="interfacediagram" style="display: inline-block; position: relative; width: 100%; padding-bottom: 20%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 120" preserveaspectratio="xminymin meet"><a xlink:href="/docs/
web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="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="2...
...5" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/
web/api/node" target="_top"><rect x="151" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="188.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">node</text></a><polyline points="226,25 236,20 236,30 226,25" stroke="#d4dde4" fill="none"/><line x1="236" y1="25" x2="266" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/
web/api/element" target="_top"><rect x="266" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="303.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">element</te...
...xt></a><polyline points="341,25 351,20 351,30 341,25" stroke="#d4dde4" fill="none"/><line x1="351" y1="25" x2="381" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/
web/api/htmlelement" target="_top"><rect x="381" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="436" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">htmlelement</text></a><polyline points="491,25 501,20 501,30 491,25" stroke="#d4dde4" fill="none"/><line x1="501" y1="25" x2="509" y2="25" stroke="#d4dde4"/><line x1="509" y1="25" x2="509" y2="90" stroke="#d4dde4"/><line x1="509" y1="90" x2="492" y2="90" stroke="#d4dde4"/><a xlink:href="/docs/
web/api/htmldatalistelement" target="_top"><rect x="301"...
HTMLDivElement - Web APIs
<div id="interfacediagram" style="display: inline-block; position: relative; width: 100%; padding-bottom: 20%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 120" preserveaspectratio="xminymin meet"><a xlink:href="/docs/
web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="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="2...
...5" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/
web/api/node" target="_top"><rect x="151" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="188.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">node</text></a><polyline points="226,25 236,20 236,30 226,25" stroke="#d4dde4" fill="none"/><line x1="236" y1="25" x2="266" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/
web/api/element" target="_top"><rect x="266" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="303.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">element</te...
...xt></a><polyline points="341,25 351,20 351,30 341,25" stroke="#d4dde4" fill="none"/><line x1="351" y1="25" x2="381" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/
web/api/htmlelement" target="_top"><rect x="381" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="436" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">htmlelement</text></a><polyline points="491,25 501,20 501,30 491,25" stroke="#d4dde4" fill="none"/><line x1="501" y1="25" x2="509" y2="25" stroke="#d4dde4"/><line x1="509" y1="25" x2="509" y2="90" stroke="#d4dde4"/><line x1="509" y1="90" x2="492" y2="90" stroke="#d4dde4"/><a xlink:href="/docs/
web/api/htmldivelement" target="_top"><rect x="351" y="6...
HTMLDocument - Web APIs
<div id="interfacediagram" style="display: inline-block; position: relative; width: 100%; padding-bottom: 11.666666666666666%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 70" preserveaspectratio="xminymin meet"><a xlink:href="/docs/
web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="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="2...
...5" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/
web/api/node" target="_top"><rect x="151" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="188.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">node</text></a><polyline points="226,25 236,20 236,30 226,25" stroke="#d4dde4" fill="none"/><line x1="236" y1="25" x2="266" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/
web/api/document" target="_top"><rect x="266" y="1" width="80" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="306" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">document</te...
...xt></a><polyline points="346,25 356,20 356,30 346,25" stroke="#d4dde4" fill="none"/><line x1="356" y1="25" x2="386" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/
web/api/htmldocument" target="_top"><rect x="386" y="1" width="120" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="446" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">htmldocument</text></a></svg></div> a:hover text { fill: #0095dd; pointer-events: all;} for the purposes of
web development, you can generally think of htmldocument as an alias for document, upon which htmldocument is based.
HTMLElement - Web APIs
<div id="interfacediagram" style="display: inline-block; position: relative; width: 100%; padding-bottom: 11.666666666666666%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 70" preserveaspectratio="xminymin meet"><a xlink:href="/docs/
web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="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="2...
...5" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/
web/api/node" target="_top"><rect x="151" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="188.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">node</text></a><polyline points="226,25 236,20 236,30 226,25" stroke="#d4dde4" fill="none"/><line x1="236" y1="25" x2="266" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/
web/api/element" target="_top"><rect x="266" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="303.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">element</te...
...xt></a><polyline points="341,25 351,20 351,30 341,25" stroke="#d4dde4" fill="none"/><line x1="351" y1="25" x2="381" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/
web/api/htmlelement" target="_top"><rect x="381" y="1" width="110" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="436" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">htmlelement</text></a></svg></div> a:hover text { fill: #0095dd; pointer-events: all;} properties inherits properties from its parent, element, and implements those from documentandelementeventhandlers, elementcssinlinestyle, globaleventhandlers, htmlorforeignelement and toucheventhandlers.
HTMLFieldSetElement - Web APIs
<div id="interfacediagram" style="display: inline-block; position: relative; width: 100%; padding-bottom: 20%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 120" preserveaspectratio="xminymin meet"><a xlink:href="/docs/
web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="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="2...
...5" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/
web/api/node" target="_top"><rect x="151" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="188.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">node</text></a><polyline points="226,25 236,20 236,30 226,25" stroke="#d4dde4" fill="none"/><line x1="236" y1="25" x2="266" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/
web/api/element" target="_top"><rect x="266" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="303.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">element</te...
...xt></a><polyline points="341,25 351,20 351,30 341,25" stroke="#d4dde4" fill="none"/><line x1="351" y1="25" x2="381" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/
web/api/htmlelement" target="_top"><rect x="381" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="436" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">htmlelement</text></a><polyline points="491,25 501,20 501,30 491,25" stroke="#d4dde4" fill="none"/><line x1="501" y1="25" x2="509" y2="25" stroke="#d4dde4"/><line x1="509" y1="25" x2="509" y2="90" stroke="#d4dde4"/><line x1="509" y1="90" x2="492" y2="90" stroke="#d4dde4"/><a xlink:href="/docs/
web/api/htmlfieldsetelement" target="_top"><rect x="301"...
HTMLFormElement - Web APIs
<div id="interfacediagram" style="display: inline-block; position: relative; width: 100%; padding-bottom: 20%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 120" preserveaspectratio="xminymin meet"><a xlink:href="/docs/
web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="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="2...
...5" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/
web/api/node" target="_top"><rect x="151" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="188.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">node</text></a><polyline points="226,25 236,20 236,30 226,25" stroke="#d4dde4" fill="none"/><line x1="236" y1="25" x2="266" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/
web/api/element" target="_top"><rect x="266" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="303.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">element</te...
...xt></a><polyline points="341,25 351,20 351,30 341,25" stroke="#d4dde4" fill="none"/><line x1="351" y1="25" x2="381" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/
web/api/htmlelement" target="_top"><rect x="381" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="436" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">htmlelement</text></a><polyline points="491,25 501,20 501,30 491,25" stroke="#d4dde4" fill="none"/><line x1="501" y1="25" x2="509" y2="25" stroke="#d4dde4"/><line x1="509" y1="25" x2="509" y2="90" stroke="#d4dde4"/><line x1="509" y1="90" x2="492" y2="90" stroke="#d4dde4"/><a xlink:href="/docs/
web/api/htmlformelement" target="_top"><rect x="341" y="...
HTMLHeadElement - Web APIs
<div id="interfacediagram" style="display: inline-block; position: relative; width: 100%; padding-bottom: 20%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 120" preserveaspectratio="xminymin meet"><a xlink:href="/docs/
web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="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="2...
...5" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/
web/api/node" target="_top"><rect x="151" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="188.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">node</text></a><polyline points="226,25 236,20 236,30 226,25" stroke="#d4dde4" fill="none"/><line x1="236" y1="25" x2="266" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/
web/api/element" target="_top"><rect x="266" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="303.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">element</te...
...xt></a><polyline points="341,25 351,20 351,30 341,25" stroke="#d4dde4" fill="none"/><line x1="351" y1="25" x2="381" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/
web/api/htmlelement" target="_top"><rect x="381" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="436" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">htmlelement</text></a><polyline points="491,25 501,20 501,30 491,25" stroke="#d4dde4" fill="none"/><line x1="501" y1="25" x2="509" y2="25" stroke="#d4dde4"/><line x1="509" y1="25" x2="509" y2="90" stroke="#d4dde4"/><line x1="509" y1="90" x2="492" y2="90" stroke="#d4dde4"/><a xlink:href="/docs/
web/api/htmlheadelement" target="_top"><rect x="341" y="...
HTMLHeadingElement - Web APIs
<div id="interfacediagram" style="display: inline-block; position: relative; width: 100%; padding-bottom: 20%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 120" preserveaspectratio="xminymin meet"><a xlink:href="/docs/
web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="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="2...
...5" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/
web/api/node" target="_top"><rect x="151" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="188.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">node</text></a><polyline points="226,25 236,20 236,30 226,25" stroke="#d4dde4" fill="none"/><line x1="236" y1="25" x2="266" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/
web/api/element" target="_top"><rect x="266" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="303.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">element</te...
...xt></a><polyline points="341,25 351,20 351,30 341,25" stroke="#d4dde4" fill="none"/><line x1="351" y1="25" x2="381" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/
web/api/htmlelement" target="_top"><rect x="381" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="436" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">htmlelement</text></a><polyline points="491,25 501,20 501,30 491,25" stroke="#d4dde4" fill="none"/><line x1="501" y1="25" x2="509" y2="25" stroke="#d4dde4"/><line x1="509" y1="25" x2="509" y2="90" stroke="#d4dde4"/><line x1="509" y1="90" x2="492" y2="90" stroke="#d4dde4"/><a xlink:href="/docs/
web/api/htmlheadingelement" target="_top"><rect x="311" ...
HTMLHtmlElement - Web APIs
<div id="interfacediagram" style="display: inline-block; position: relative; width: 100%; padding-bottom: 20%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 120" preserveaspectratio="xminymin meet"><a xlink:href="/docs/
web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="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="2...
...5" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/
web/api/node" target="_top"><rect x="151" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="188.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">node</text></a><polyline points="226,25 236,20 236,30 226,25" stroke="#d4dde4" fill="none"/><line x1="236" y1="25" x2="266" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/
web/api/element" target="_top"><rect x="266" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="303.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">element</te...
...xt></a><polyline points="341,25 351,20 351,30 341,25" stroke="#d4dde4" fill="none"/><line x1="351" y1="25" x2="381" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/
web/api/htmlelement" target="_top"><rect x="381" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="436" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">htmlelement</text></a><polyline points="491,25 501,20 501,30 491,25" stroke="#d4dde4" fill="none"/><line x1="501" y1="25" x2="509" y2="25" stroke="#d4dde4"/><line x1="509" y1="25" x2="509" y2="90" stroke="#d4dde4"/><line x1="509" y1="90" x2="492" y2="90" stroke="#d4dde4"/><a xlink:href="/docs/
web/api/htmlhtmlelement" target="_top"><rect x="341" y="...
HTMLIFrameElement - Web APIs
<div id="interfacediagram" style="display: inline-block; position: relative; width: 100%; padding-bottom: 20%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 120" preserveaspectratio="xminymin meet"><a xlink:href="/docs/
web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="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="2...
...5" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/
web/api/node" target="_top"><rect x="151" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="188.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">node</text></a><polyline points="226,25 236,20 236,30 226,25" stroke="#d4dde4" fill="none"/><line x1="236" y1="25" x2="266" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/
web/api/element" target="_top"><rect x="266" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="303.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">element</te...
...xt></a><polyline points="341,25 351,20 351,30 341,25" stroke="#d4dde4" fill="none"/><line x1="351" y1="25" x2="381" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/
web/api/htmlelement" target="_top"><rect x="381" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="436" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">htmlelement</text></a><polyline points="491,25 501,20 501,30 491,25" stroke="#d4dde4" fill="none"/><line x1="501" y1="25" x2="509" y2="25" stroke="#d4dde4"/><line x1="509" y1="25" x2="509" y2="90" stroke="#d4dde4"/><line x1="509" y1="90" x2="492" y2="90" stroke="#d4dde4"/><a xlink:href="/docs/
web/api/htmliframeelement" target="_top"><rect x="321" y...
HTMLImageElement.srcset - Web APIs
the srcset property, along with the sizes property, are a crucial component in designing responsive
web sites, as they can be used together to make pages that use appropriate images for the rendering situation.
... desktopmobilechromeedgefirefoxinternet exploreroperasafariandroid
webviewchrome for androidfirefox for androidopera for androidsafari on iossamsung internetsrcset experimentalchrome full support 34edge full support 12firefox full support 38 full support 38 no support ...
...to change preferences in firefox, visit about:config.ie no support noopera full support 21safari full support 8
webview android full support 37chrome android full support 34firefox android full support 38 full support 38 no support 32 — 52disabled disabled from version 32 until version 52 (exclusive): this...
HTMLImageElement.x - Web APIs
html in this example, we see a table showing information about users of a
web site, including their user id, their full name, and their avatar image.
... desktopmobilechromeedgefirefoxinternet exploreroperasafariandroid
webviewchrome for androidfirefox for androidopera for androidsafari on iossamsung internetxchrome full support 1edge full support 12firefox full support 14 full support 14 no support ?
... — 7ie no support noopera full support yessafari full support yes
webview android full support yeschrome android full support yesfirefox android full support 14 full support 14 no support ?
HTMLImageElement.y - Web APIs
html in this example, we see a table showing information about users of a
web site, including their user id, their full name, and their avatar image.
... desktopmobilechromeedgefirefoxinternet exploreroperasafariandroid
webviewchrome for androidfirefox for androidopera for androidsafari on iossamsung internetychrome full support 1edge full support 12firefox full support 14 full support 14 no support ?
... — 7ie no support noopera full support yessafari full support yes
webview android full support yeschrome android full support yesfirefox android full support 14 full support 14 no support ?
HTMLImageElement - Web APIs
<div id="interfacediagram" style="display: inline-block; position: relative; width: 100%; padding-bottom: 20%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 120" preserveaspectratio="xminymin meet"><a xlink:href="/docs/
web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="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="2...
...5" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/
web/api/node" target="_top"><rect x="151" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="188.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">node</text></a><polyline points="226,25 236,20 236,30 226,25" stroke="#d4dde4" fill="none"/><line x1="236" y1="25" x2="266" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/
web/api/element" target="_top"><rect x="266" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="303.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">element</te...
...xt></a><polyline points="341,25 351,20 351,30 341,25" stroke="#d4dde4" fill="none"/><line x1="351" y1="25" x2="381" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/
web/api/htmlelement" target="_top"><rect x="381" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="436" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">htmlelement</text></a><polyline points="491,25 501,20 501,30 491,25" stroke="#d4dde4" fill="none"/><line x1="501" y1="25" x2="509" y2="25" stroke="#d4dde4"/><line x1="509" y1="25" x2="509" y2="90" stroke="#d4dde4"/><line x1="509" y1="90" x2="492" y2="90" stroke="#d4dde4"/><a xlink:href="/docs/
web/api/htmlimageelement" target="_top"><rect x="331" y=...
HTMLLIElement - Web APIs
<div id="interfacediagram" style="display: inline-block; position: relative; width: 100%; padding-bottom: 20%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 120" preserveaspectratio="xminymin meet"><a xlink:href="/docs/
web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="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="2...
...5" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/
web/api/node" target="_top"><rect x="151" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="188.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">node</text></a><polyline points="226,25 236,20 236,30 226,25" stroke="#d4dde4" fill="none"/><line x1="236" y1="25" x2="266" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/
web/api/element" target="_top"><rect x="266" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="303.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">element</te...
...xt></a><polyline points="341,25 351,20 351,30 341,25" stroke="#d4dde4" fill="none"/><line x1="351" y1="25" x2="381" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/
web/api/htmlelement" target="_top"><rect x="381" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="436" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">htmlelement</text></a><polyline points="491,25 501,20 501,30 491,25" stroke="#d4dde4" fill="none"/><line x1="501" y1="25" x2="509" y2="25" stroke="#d4dde4"/><line x1="509" y1="25" x2="509" y2="90" stroke="#d4dde4"/><line x1="509" y1="90" x2="492" y2="90" stroke="#d4dde4"/><a xlink:href="/docs/
web/api/htmllielement" target="_top"><rect x="361" y="65...
HTMLLabelElement - Web APIs
<div id="interfacediagram" style="display: inline-block; position: relative; width: 100%; padding-bottom: 20%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 120" preserveaspectratio="xminymin meet"><a xlink:href="/docs/
web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="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="2...
...5" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/
web/api/node" target="_top"><rect x="151" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="188.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">node</text></a><polyline points="226,25 236,20 236,30 226,25" stroke="#d4dde4" fill="none"/><line x1="236" y1="25" x2="266" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/
web/api/element" target="_top"><rect x="266" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="303.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">element</te...
...xt></a><polyline points="341,25 351,20 351,30 341,25" stroke="#d4dde4" fill="none"/><line x1="351" y1="25" x2="381" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/
web/api/htmlelement" target="_top"><rect x="381" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="436" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">htmlelement</text></a><polyline points="491,25 501,20 501,30 491,25" stroke="#d4dde4" fill="none"/><line x1="501" y1="25" x2="509" y2="25" stroke="#d4dde4"/><line x1="509" y1="25" x2="509" y2="90" stroke="#d4dde4"/><line x1="509" y1="90" x2="492" y2="90" stroke="#d4dde4"/><a xlink:href="/docs/
web/api/htmllabelelement" target="_top"><rect x="331" y=...
HTMLLegendElement - Web APIs
<div id="interfacediagram" style="display: inline-block; position: relative; width: 100%; padding-bottom: 20%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 120" preserveaspectratio="xminymin meet"><a xlink:href="/docs/
web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="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="2...
...5" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/
web/api/node" target="_top"><rect x="151" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="188.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">node</text></a><polyline points="226,25 236,20 236,30 226,25" stroke="#d4dde4" fill="none"/><line x1="236" y1="25" x2="266" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/
web/api/element" target="_top"><rect x="266" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="303.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">element</te...
...xt></a><polyline points="341,25 351,20 351,30 341,25" stroke="#d4dde4" fill="none"/><line x1="351" y1="25" x2="381" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/
web/api/htmlelement" target="_top"><rect x="381" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="436" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">htmlelement</text></a><polyline points="491,25 501,20 501,30 491,25" stroke="#d4dde4" fill="none"/><line x1="501" y1="25" x2="509" y2="25" stroke="#d4dde4"/><line x1="509" y1="25" x2="509" y2="90" stroke="#d4dde4"/><line x1="509" y1="90" x2="492" y2="90" stroke="#d4dde4"/><a xlink:href="/docs/
web/api/htmllegendelement" target="_top"><rect x="321" y...
HTMLLinkElement - Web APIs
<div id="interfacediagram" style="display: inline-block; position: relative; width: 100%; padding-bottom: 20%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 120" preserveaspectratio="xminymin meet"><a xlink:href="/docs/
web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="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="2...
...5" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/
web/api/node" target="_top"><rect x="151" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="188.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">node</text></a><polyline points="226,25 236,20 236,30 226,25" stroke="#d4dde4" fill="none"/><line x1="236" y1="25" x2="266" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/
web/api/element" target="_top"><rect x="266" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="303.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">element</te...
...xt></a><polyline points="341,25 351,20 351,30 341,25" stroke="#d4dde4" fill="none"/><line x1="351" y1="25" x2="381" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/
web/api/htmlelement" target="_top"><rect x="381" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="436" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">htmlelement</text></a><polyline points="491,25 501,20 501,30 491,25" stroke="#d4dde4" fill="none"/><line x1="501" y1="25" x2="509" y2="25" stroke="#d4dde4"/><line x1="509" y1="25" x2="509" y2="90" stroke="#d4dde4"/><line x1="509" y1="90" x2="492" y2="90" stroke="#d4dde4"/><a xlink:href="/docs/
web/api/htmllinkelement" target="_top"><rect x="341" y="...
HTMLMapElement - Web APIs
<div id="interfacediagram" style="display: inline-block; position: relative; width: 100%; padding-bottom: 20%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 120" preserveaspectratio="xminymin meet"><a xlink:href="/docs/
web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="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="2...
...5" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/
web/api/node" target="_top"><rect x="151" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="188.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">node</text></a><polyline points="226,25 236,20 236,30 226,25" stroke="#d4dde4" fill="none"/><line x1="236" y1="25" x2="266" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/
web/api/element" target="_top"><rect x="266" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="303.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">element</te...
...xt></a><polyline points="341,25 351,20 351,30 341,25" stroke="#d4dde4" fill="none"/><line x1="351" y1="25" x2="381" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/
web/api/htmlelement" target="_top"><rect x="381" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="436" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">htmlelement</text></a><polyline points="491,25 501,20 501,30 491,25" stroke="#d4dde4" fill="none"/><line x1="501" y1="25" x2="509" y2="25" stroke="#d4dde4"/><line x1="509" y1="25" x2="509" y2="90" stroke="#d4dde4"/><line x1="509" y1="90" x2="492" y2="90" stroke="#d4dde4"/><a xlink:href="/docs/
web/api/htmlmapelement" target="_top"><rect x="351" y="6...
HTMLMediaElement.captureStream() - Web APIs
this can be used, for example, as a source for a
webrtc rtcpeerconnection.
... return value a mediastream object which can be used as a source for audio and/or video data by other media processing code, or as a source for
webrtc.
...the stream can then be used for other purposes—like a source for streaming over
webrtc, to allow sharing prerecorded videos with another person during a video call.
HTMLMediaElement.play() - Web APIs
usage notes although the term "autoplay" is usually thought of as referring to pages that immediately begin playing media upon being loaded,
web browsers' autoplay policies also apply to any script-initiated playback of media, including calls to play().
...
web sites should be prepared to handle this situation.
... for even more in-depth information about autoplay and autoplay blocking, see our article autoplay guide for media and
web audio apis.
HTMLMenuElement - Web APIs
<div id="interfacediagram" style="display: inline-block; position: relative; width: 100%; padding-bottom: 20%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 120" preserveaspectratio="xminymin meet"><a xlink:href="/docs/
web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="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="2...
...5" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/
web/api/node" target="_top"><rect x="151" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="188.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">node</text></a><polyline points="226,25 236,20 236,30 226,25" stroke="#d4dde4" fill="none"/><line x1="236" y1="25" x2="266" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/
web/api/element" target="_top"><rect x="266" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="303.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">element</te...
...xt></a><polyline points="341,25 351,20 351,30 341,25" stroke="#d4dde4" fill="none"/><line x1="351" y1="25" x2="381" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/
web/api/htmlelement" target="_top"><rect x="381" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="436" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">htmlelement</text></a><polyline points="491,25 501,20 501,30 491,25" stroke="#d4dde4" fill="none"/><line x1="501" y1="25" x2="509" y2="25" stroke="#d4dde4"/><line x1="509" y1="25" x2="509" y2="90" stroke="#d4dde4"/><line x1="509" y1="90" x2="492" y2="90" stroke="#d4dde4"/><a xlink:href="/docs/
web/api/htmlmenuelement" target="_top"><rect x="341" y="...
HTMLMenuItemElement - Web APIs
<div id="interfacediagram" style="display: inline-block; position: relative; width: 100%; padding-bottom: 20%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 120" preserveaspectratio="xminymin meet"><a xlink:href="/docs/
web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="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="2...
...5" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/
web/api/node" target="_top"><rect x="151" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="188.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">node</text></a><polyline points="226,25 236,20 236,30 226,25" stroke="#d4dde4" fill="none"/><line x1="236" y1="25" x2="266" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/
web/api/element" target="_top"><rect x="266" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="303.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">element</te...
...xt></a><polyline points="341,25 351,20 351,30 341,25" stroke="#d4dde4" fill="none"/><line x1="351" y1="25" x2="381" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/
web/api/htmlelement" target="_top"><rect x="381" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="436" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">htmlelement</text></a><polyline points="491,25 501,20 501,30 491,25" stroke="#d4dde4" fill="none"/><line x1="501" y1="25" x2="509" y2="25" stroke="#d4dde4"/><line x1="509" y1="25" x2="509" y2="90" stroke="#d4dde4"/><line x1="509" y1="90" x2="492" y2="90" stroke="#d4dde4"/><a xlink:href="/docs/
web/api/htmlmenuitemelement" target="_top"><rect x="301"...
HTMLMetaElement - Web APIs
<div id="interfacediagram" style="display: inline-block; position: relative; width: 100%; padding-bottom: 20%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 120" preserveaspectratio="xminymin meet"><a xlink:href="/docs/
web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="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="2...
...5" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/
web/api/node" target="_top"><rect x="151" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="188.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">node</text></a><polyline points="226,25 236,20 236,30 226,25" stroke="#d4dde4" fill="none"/><line x1="236" y1="25" x2="266" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/
web/api/element" target="_top"><rect x="266" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="303.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">element</te...
...xt></a><polyline points="341,25 351,20 351,30 341,25" stroke="#d4dde4" fill="none"/><line x1="351" y1="25" x2="381" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/
web/api/htmlelement" target="_top"><rect x="381" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="436" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">htmlelement</text></a><polyline points="491,25 501,20 501,30 491,25" stroke="#d4dde4" fill="none"/><line x1="501" y1="25" x2="509" y2="25" stroke="#d4dde4"/><line x1="509" y1="25" x2="509" y2="90" stroke="#d4dde4"/><line x1="509" y1="90" x2="492" y2="90" stroke="#d4dde4"/><a xlink:href="/docs/
web/api/htmlmetaelement" target="_top"><rect x="341" y="...
HTMLMeterElement - Web APIs
<div id="interfacediagram" style="display: inline-block; position: relative; width: 100%; padding-bottom: 20%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 120" preserveaspectratio="xminymin meet"><a xlink:href="/docs/
web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="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="2...
...5" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/
web/api/node" target="_top"><rect x="151" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="188.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">node</text></a><polyline points="226,25 236,20 236,30 226,25" stroke="#d4dde4" fill="none"/><line x1="236" y1="25" x2="266" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/
web/api/element" target="_top"><rect x="266" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="303.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">element</te...
...xt></a><polyline points="341,25 351,20 351,30 341,25" stroke="#d4dde4" fill="none"/><line x1="351" y1="25" x2="381" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/
web/api/htmlelement" target="_top"><rect x="381" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="436" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">htmlelement</text></a><polyline points="491,25 501,20 501,30 491,25" stroke="#d4dde4" fill="none"/><line x1="501" y1="25" x2="509" y2="25" stroke="#d4dde4"/><line x1="509" y1="25" x2="509" y2="90" stroke="#d4dde4"/><line x1="509" y1="90" x2="492" y2="90" stroke="#d4dde4"/><a xlink:href="/docs/
web/api/htmlmeterelement" target="_top"><rect x="331" y=...
HTMLModElement - Web APIs
<div id="interfacediagram" style="display: inline-block; position: relative; width: 100%; padding-bottom: 20%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 120" preserveaspectratio="xminymin meet"><a xlink:href="/docs/
web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="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="2...
...5" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/
web/api/node" target="_top"><rect x="151" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="188.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">node</text></a><polyline points="226,25 236,20 236,30 226,25" stroke="#d4dde4" fill="none"/><line x1="236" y1="25" x2="266" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/
web/api/element" target="_top"><rect x="266" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="303.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">element</te...
...xt></a><polyline points="341,25 351,20 351,30 341,25" stroke="#d4dde4" fill="none"/><line x1="351" y1="25" x2="381" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/
web/api/htmlelement" target="_top"><rect x="381" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="436" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">htmlelement</text></a><polyline points="491,25 501,20 501,30 491,25" stroke="#d4dde4" fill="none"/><line x1="501" y1="25" x2="509" y2="25" stroke="#d4dde4"/><line x1="509" y1="25" x2="509" y2="90" stroke="#d4dde4"/><line x1="509" y1="90" x2="492" y2="90" stroke="#d4dde4"/><a xlink:href="/docs/
web/api/htmlmodelement" target="_top"><rect x="351" y="6...
HTMLOListElement - Web APIs
<div id="interfacediagram" style="display: inline-block; position: relative; width: 100%; padding-bottom: 20%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 120" preserveaspectratio="xminymin meet"><a xlink:href="/docs/
web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="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="2...
...5" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/
web/api/node" target="_top"><rect x="151" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="188.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">node</text></a><polyline points="226,25 236,20 236,30 226,25" stroke="#d4dde4" fill="none"/><line x1="236" y1="25" x2="266" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/
web/api/element" target="_top"><rect x="266" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="303.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">element</te...
...xt></a><polyline points="341,25 351,20 351,30 341,25" stroke="#d4dde4" fill="none"/><line x1="351" y1="25" x2="381" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/
web/api/htmlelement" target="_top"><rect x="381" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="436" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">htmlelement</text></a><polyline points="491,25 501,20 501,30 491,25" stroke="#d4dde4" fill="none"/><line x1="501" y1="25" x2="509" y2="25" stroke="#d4dde4"/><line x1="509" y1="25" x2="509" y2="90" stroke="#d4dde4"/><line x1="509" y1="90" x2="492" y2="90" stroke="#d4dde4"/><a xlink:href="/docs/
web/api/htmlolistelement" target="_top"><rect x="331" y=...
HTMLObjectElement - Web APIs
<div id="interfacediagram" style="display: inline-block; position: relative; width: 100%; padding-bottom: 20%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 120" preserveaspectratio="xminymin meet"><a xlink:href="/docs/
web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="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="2...
...5" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/
web/api/node" target="_top"><rect x="151" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="188.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">node</text></a><polyline points="226,25 236,20 236,30 226,25" stroke="#d4dde4" fill="none"/><line x1="236" y1="25" x2="266" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/
web/api/element" target="_top"><rect x="266" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="303.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">element</te...
...xt></a><polyline points="341,25 351,20 351,30 341,25" stroke="#d4dde4" fill="none"/><line x1="351" y1="25" x2="381" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/
web/api/htmlelement" target="_top"><rect x="381" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="436" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">htmlelement</text></a><polyline points="491,25 501,20 501,30 491,25" stroke="#d4dde4" fill="none"/><line x1="501" y1="25" x2="509" y2="25" stroke="#d4dde4"/><line x1="509" y1="25" x2="509" y2="90" stroke="#d4dde4"/><line x1="509" y1="90" x2="492" y2="90" stroke="#d4dde4"/><a xlink:href="/docs/
web/api/htmlobjectelement" target="_top"><rect x="321" y...
HTMLOptGroupElement - Web APIs
<div id="interfacediagram" style="display: inline-block; position: relative; width: 100%; padding-bottom: 20%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 120" preserveaspectratio="xminymin meet"><a xlink:href="/docs/
web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="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="2...
...5" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/
web/api/node" target="_top"><rect x="151" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="188.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">node</text></a><polyline points="226,25 236,20 236,30 226,25" stroke="#d4dde4" fill="none"/><line x1="236" y1="25" x2="266" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/
web/api/element" target="_top"><rect x="266" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="303.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">element</te...
...xt></a><polyline points="341,25 351,20 351,30 341,25" stroke="#d4dde4" fill="none"/><line x1="351" y1="25" x2="381" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/
web/api/htmlelement" target="_top"><rect x="381" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="436" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">htmlelement</text></a><polyline points="491,25 501,20 501,30 491,25" stroke="#d4dde4" fill="none"/><line x1="501" y1="25" x2="509" y2="25" stroke="#d4dde4"/><line x1="509" y1="25" x2="509" y2="90" stroke="#d4dde4"/><line x1="509" y1="90" x2="492" y2="90" stroke="#d4dde4"/><a xlink:href="/docs/
web/api/htmloptgroupelement" target="_top"><rect x="301"...
HTMLOptionElement - Web APIs
<div id="interfacediagram" style="display: inline-block; position: relative; width: 100%; padding-bottom: 20%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 120" preserveaspectratio="xminymin meet"><a xlink:href="/docs/
web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="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="2...
...5" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/
web/api/node" target="_top"><rect x="151" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="188.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">node</text></a><polyline points="226,25 236,20 236,30 226,25" stroke="#d4dde4" fill="none"/><line x1="236" y1="25" x2="266" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/
web/api/element" target="_top"><rect x="266" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="303.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">element</te...
...xt></a><polyline points="341,25 351,20 351,30 341,25" stroke="#d4dde4" fill="none"/><line x1="351" y1="25" x2="381" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/
web/api/htmlelement" target="_top"><rect x="381" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="436" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">htmlelement</text></a><polyline points="491,25 501,20 501,30 491,25" stroke="#d4dde4" fill="none"/><line x1="501" y1="25" x2="509" y2="25" stroke="#d4dde4"/><line x1="509" y1="25" x2="509" y2="90" stroke="#d4dde4"/><line x1="509" y1="90" x2="492" y2="90" stroke="#d4dde4"/><a xlink:href="/docs/
web/api/htmloptionelement" target="_top"><rect x="321" y...
HTMLOutputElement - Web APIs
<div id="interfacediagram" style="display: inline-block; position: relative; width: 100%; padding-bottom: 20%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 120" preserveaspectratio="xminymin meet"><a xlink:href="/docs/
web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="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="2...
...5" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/
web/api/node" target="_top"><rect x="151" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="188.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">node</text></a><polyline points="226,25 236,20 236,30 226,25" stroke="#d4dde4" fill="none"/><line x1="236" y1="25" x2="266" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/
web/api/element" target="_top"><rect x="266" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="303.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">element</te...
...xt></a><polyline points="341,25 351,20 351,30 341,25" stroke="#d4dde4" fill="none"/><line x1="351" y1="25" x2="381" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/
web/api/htmlelement" target="_top"><rect x="381" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="436" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">htmlelement</text></a><polyline points="491,25 501,20 501,30 491,25" stroke="#d4dde4" fill="none"/><line x1="501" y1="25" x2="509" y2="25" stroke="#d4dde4"/><line x1="509" y1="25" x2="509" y2="90" stroke="#d4dde4"/><line x1="509" y1="90" x2="492" y2="90" stroke="#d4dde4"/><a xlink:href="/docs/
web/api/htmloutputelement" target="_top"><rect x="321" y...
HTMLParagraphElement - Web APIs
<div id="interfacediagram" style="display: inline-block; position: relative; width: 100%; padding-bottom: 20%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 120" preserveaspectratio="xminymin meet"><a xlink:href="/docs/
web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="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="2...
...5" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/
web/api/node" target="_top"><rect x="151" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="188.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">node</text></a><polyline points="226,25 236,20 236,30 226,25" stroke="#d4dde4" fill="none"/><line x1="236" y1="25" x2="266" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/
web/api/element" target="_top"><rect x="266" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="303.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">element</te...
...xt></a><polyline points="341,25 351,20 351,30 341,25" stroke="#d4dde4" fill="none"/><line x1="351" y1="25" x2="381" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/
web/api/htmlelement" target="_top"><rect x="381" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="436" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">htmlelement</text></a><polyline points="491,25 501,20 501,30 491,25" stroke="#d4dde4" fill="none"/><line x1="501" y1="25" x2="509" y2="25" stroke="#d4dde4"/><line x1="509" y1="25" x2="509" y2="90" stroke="#d4dde4"/><line x1="509" y1="90" x2="492" y2="90" stroke="#d4dde4"/><a xlink:href="/docs/
web/api/htmlparagraphelement" target="_top"><rect x="291...
HTMLParamElement - Web APIs
<div id="interfacediagram" style="display: inline-block; position: relative; width: 100%; padding-bottom: 20%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 120" preserveaspectratio="xminymin meet"><a xlink:href="/docs/
web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="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="2...
...5" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/
web/api/node" target="_top"><rect x="151" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="188.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">node</text></a><polyline points="226,25 236,20 236,30 226,25" stroke="#d4dde4" fill="none"/><line x1="236" y1="25" x2="266" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/
web/api/element" target="_top"><rect x="266" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="303.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">element</te...
...xt></a><polyline points="341,25 351,20 351,30 341,25" stroke="#d4dde4" fill="none"/><line x1="351" y1="25" x2="381" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/
web/api/htmlelement" target="_top"><rect x="381" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="436" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">htmlelement</text></a><polyline points="491,25 501,20 501,30 491,25" stroke="#d4dde4" fill="none"/><line x1="501" y1="25" x2="509" y2="25" stroke="#d4dde4"/><line x1="509" y1="25" x2="509" y2="90" stroke="#d4dde4"/><line x1="509" y1="90" x2="492" y2="90" stroke="#d4dde4"/><a xlink:href="/docs/
web/api/htmlparamelement" target="_top"><rect x="331" y=...
HTMLPictureElement - Web APIs
<div id="interfacediagram" style="display: inline-block; position: relative; width: 100%; padding-bottom: 20%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 120" preserveaspectratio="xminymin meet"><a xlink:href="/docs/
web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="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="2...
...5" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/
web/api/node" target="_top"><rect x="151" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="188.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">node</text></a><polyline points="226,25 236,20 236,30 226,25" stroke="#d4dde4" fill="none"/><line x1="236" y1="25" x2="266" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/
web/api/element" target="_top"><rect x="266" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="303.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">element</te...
...xt></a><polyline points="341,25 351,20 351,30 341,25" stroke="#d4dde4" fill="none"/><line x1="351" y1="25" x2="381" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/
web/api/htmlelement" target="_top"><rect x="381" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="436" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">htmlelement</text></a><polyline points="491,25 501,20 501,30 491,25" stroke="#d4dde4" fill="none"/><line x1="501" y1="25" x2="509" y2="25" stroke="#d4dde4"/><line x1="509" y1="25" x2="509" y2="90" stroke="#d4dde4"/><line x1="509" y1="90" x2="492" y2="90" stroke="#d4dde4"/><a xlink:href="/docs/
web/api/htmlpictureelement" target="_top"><rect x="311" ...
HTMLPreElement - Web APIs
<div id="interfacediagram" style="display: inline-block; position: relative; width: 100%; padding-bottom: 20%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 120" preserveaspectratio="xminymin meet"><a xlink:href="/docs/
web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="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="2...
...5" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/
web/api/node" target="_top"><rect x="151" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="188.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">node</text></a><polyline points="226,25 236,20 236,30 226,25" stroke="#d4dde4" fill="none"/><line x1="236" y1="25" x2="266" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/
web/api/element" target="_top"><rect x="266" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="303.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">element</te...
...xt></a><polyline points="341,25 351,20 351,30 341,25" stroke="#d4dde4" fill="none"/><line x1="351" y1="25" x2="381" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/
web/api/htmlelement" target="_top"><rect x="381" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="436" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">htmlelement</text></a><polyline points="491,25 501,20 501,30 491,25" stroke="#d4dde4" fill="none"/><line x1="501" y1="25" x2="509" y2="25" stroke="#d4dde4"/><line x1="509" y1="25" x2="509" y2="90" stroke="#d4dde4"/><line x1="509" y1="90" x2="492" y2="90" stroke="#d4dde4"/><a xlink:href="/docs/
web/api/htmlpreelement" target="_top"><rect x="351" y="6...
HTMLProgressElement - Web APIs
<div id="interfacediagram" style="display: inline-block; position: relative; width: 100%; padding-bottom: 20%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 120" preserveaspectratio="xminymin meet"><a xlink:href="/docs/
web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="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="2...
...5" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/
web/api/node" target="_top"><rect x="151" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="188.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">node</text></a><polyline points="226,25 236,20 236,30 226,25" stroke="#d4dde4" fill="none"/><line x1="236" y1="25" x2="266" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/
web/api/element" target="_top"><rect x="266" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="303.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">element</te...
...xt></a><polyline points="341,25 351,20 351,30 341,25" stroke="#d4dde4" fill="none"/><line x1="351" y1="25" x2="381" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/
web/api/htmlelement" target="_top"><rect x="381" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="436" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">htmlelement</text></a><polyline points="491,25 501,20 501,30 491,25" stroke="#d4dde4" fill="none"/><line x1="501" y1="25" x2="509" y2="25" stroke="#d4dde4"/><line x1="509" y1="25" x2="509" y2="90" stroke="#d4dde4"/><line x1="509" y1="90" x2="492" y2="90" stroke="#d4dde4"/><a xlink:href="/docs/
web/api/htmlprogresselement" target="_top"><rect x="301"...
HTMLQuoteElement - Web APIs
<div id="interfacediagram" style="display: inline-block; position: relative; width: 100%; padding-bottom: 20%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 120" preserveaspectratio="xminymin meet"><a xlink:href="/docs/
web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="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="2...
...5" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/
web/api/node" target="_top"><rect x="151" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="188.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">node</text></a><polyline points="226,25 236,20 236,30 226,25" stroke="#d4dde4" fill="none"/><line x1="236" y1="25" x2="266" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/
web/api/element" target="_top"><rect x="266" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="303.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">element</te...
...xt></a><polyline points="341,25 351,20 351,30 341,25" stroke="#d4dde4" fill="none"/><line x1="351" y1="25" x2="381" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/
web/api/htmlelement" target="_top"><rect x="381" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="436" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">htmlelement</text></a><polyline points="491,25 501,20 501,30 491,25" stroke="#d4dde4" fill="none"/><line x1="501" y1="25" x2="509" y2="25" stroke="#d4dde4"/><line x1="509" y1="25" x2="509" y2="90" stroke="#d4dde4"/><line x1="509" y1="90" x2="492" y2="90" stroke="#d4dde4"/><a xlink:href="/docs/
web/api/htmlquoteelement" target="_top"><rect x="331" y=...
HTMLScriptElement - Web APIs
<div id="interfacediagram" style="display: inline-block; position: relative; width: 100%; padding-bottom: 20%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 120" preserveaspectratio="xminymin meet"><a xlink:href="/docs/
web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="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="2...
...5" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/
web/api/node" target="_top"><rect x="151" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="188.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">node</text></a><polyline points="226,25 236,20 236,30 226,25" stroke="#d4dde4" fill="none"/><line x1="236" y1="25" x2="266" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/
web/api/element" target="_top"><rect x="266" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="303.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">element</te...
...xt></a><polyline points="341,25 351,20 351,30 341,25" stroke="#d4dde4" fill="none"/><line x1="351" y1="25" x2="381" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/
web/api/htmlelement" target="_top"><rect x="381" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="436" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">htmlelement</text></a><polyline points="491,25 501,20 501,30 491,25" stroke="#d4dde4" fill="none"/><line x1="501" y1="25" x2="509" y2="25" stroke="#d4dde4"/><line x1="509" y1="25" x2="509" y2="90" stroke="#d4dde4"/><line x1="509" y1="90" x2="492" y2="90" stroke="#d4dde4"/><a xlink:href="/docs/
web/api/htmlscriptelement" target="_top"><rect x="321" y...
HTMLSelectElement - Web APIs
<div id="interfacediagram" style="display: inline-block; position: relative; width: 100%; padding-bottom: 20%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 120" preserveaspectratio="xminymin meet"><a xlink:href="/docs/
web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="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="2...
...5" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/
web/api/node" target="_top"><rect x="151" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="188.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">node</text></a><polyline points="226,25 236,20 236,30 226,25" stroke="#d4dde4" fill="none"/><line x1="236" y1="25" x2="266" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/
web/api/element" target="_top"><rect x="266" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="303.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">element</te...
...xt></a><polyline points="341,25 351,20 351,30 341,25" stroke="#d4dde4" fill="none"/><line x1="351" y1="25" x2="381" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/
web/api/htmlelement" target="_top"><rect x="381" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="436" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">htmlelement</text></a><polyline points="491,25 501,20 501,30 491,25" stroke="#d4dde4" fill="none"/><line x1="501" y1="25" x2="509" y2="25" stroke="#d4dde4"/><line x1="509" y1="25" x2="509" y2="90" stroke="#d4dde4"/><line x1="509" y1="90" x2="492" y2="90" stroke="#d4dde4"/><a xlink:href="/docs/
web/api/htmlselectelement" target="_top"><rect x="321" y...
HTMLShadowElement - Web APIs
<div id="interfacediagram" style="display: inline-block; position: relative; width: 100%; padding-bottom: 20%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 120" preserveaspectratio="xminymin meet"><a xlink:href="/docs/
web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="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="2...
...5" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/
web/api/node" target="_top"><rect x="151" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="188.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">node</text></a><polyline points="226,25 236,20 236,30 226,25" stroke="#d4dde4" fill="none"/><line x1="236" y1="25" x2="266" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/
web/api/element" target="_top"><rect x="266" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="303.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">element</te...
...xt></a><polyline points="341,25 351,20 351,30 341,25" stroke="#d4dde4" fill="none"/><line x1="351" y1="25" x2="381" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/
web/api/htmlelement" target="_top"><rect x="381" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="436" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">htmlelement</text></a><polyline points="491,25 501,20 501,30 491,25" stroke="#d4dde4" fill="none"/><line x1="501" y1="25" x2="509" y2="25" stroke="#d4dde4"/><line x1="509" y1="25" x2="509" y2="90" stroke="#d4dde4"/><line x1="509" y1="90" x2="492" y2="90" stroke="#d4dde4"/><a xlink:href="/docs/
web/api/htmlshadowelement" target="_top"><rect x="321" y...
HTMLSourceElement - Web APIs
<div id="interfacediagram" style="display: inline-block; position: relative; width: 100%; padding-bottom: 20%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 120" preserveaspectratio="xminymin meet"><a xlink:href="/docs/
web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="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="2...
...5" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/
web/api/node" target="_top"><rect x="151" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="188.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">node</text></a><polyline points="226,25 236,20 236,30 226,25" stroke="#d4dde4" fill="none"/><line x1="236" y1="25" x2="266" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/
web/api/element" target="_top"><rect x="266" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="303.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">element</te...
...xt></a><polyline points="341,25 351,20 351,30 341,25" stroke="#d4dde4" fill="none"/><line x1="351" y1="25" x2="381" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/
web/api/htmlelement" target="_top"><rect x="381" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="436" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">htmlelement</text></a><polyline points="491,25 501,20 501,30 491,25" stroke="#d4dde4" fill="none"/><line x1="501" y1="25" x2="509" y2="25" stroke="#d4dde4"/><line x1="509" y1="25" x2="509" y2="90" stroke="#d4dde4"/><line x1="509" y1="90" x2="492" y2="90" stroke="#d4dde4"/><a xlink:href="/docs/
web/api/htmlsourceelement" target="_top"><rect x="321" y...
HTMLSpanElement - Web APIs
<div id="interfacediagram" style="display: inline-block; position: relative; width: 100%; padding-bottom: 20%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 120" preserveaspectratio="xminymin meet"><a xlink:href="/docs/
web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="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="2...
...5" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/
web/api/node" target="_top"><rect x="151" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="188.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">node</text></a><polyline points="226,25 236,20 236,30 226,25" stroke="#d4dde4" fill="none"/><line x1="236" y1="25" x2="266" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/
web/api/element" target="_top"><rect x="266" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="303.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">element</te...
...xt></a><polyline points="341,25 351,20 351,30 341,25" stroke="#d4dde4" fill="none"/><line x1="351" y1="25" x2="381" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/
web/api/htmlelement" target="_top"><rect x="381" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="436" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">htmlelement</text></a><polyline points="491,25 501,20 501,30 491,25" stroke="#d4dde4" fill="none"/><line x1="501" y1="25" x2="509" y2="25" stroke="#d4dde4"/><line x1="509" y1="25" x2="509" y2="90" stroke="#d4dde4"/><line x1="509" y1="90" x2="492" y2="90" stroke="#d4dde4"/><a xlink:href="/docs/
web/api/htmlspanelement" target="_top"><rect x="341" y="...
HTMLStyleElement - Web APIs
<div id="interfacediagram" style="display: inline-block; position: relative; width: 100%; padding-bottom: 20%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 120" preserveaspectratio="xminymin meet"><a xlink:href="/docs/
web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="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="2...
...5" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/
web/api/node" target="_top"><rect x="151" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="188.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">node</text></a><polyline points="226,25 236,20 236,30 226,25" stroke="#d4dde4" fill="none"/><line x1="236" y1="25" x2="266" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/
web/api/element" target="_top"><rect x="266" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="303.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">element</te...
...xt></a><polyline points="341,25 351,20 351,30 341,25" stroke="#d4dde4" fill="none"/><line x1="351" y1="25" x2="381" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/
web/api/htmlelement" target="_top"><rect x="381" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="436" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">htmlelement</text></a><polyline points="491,25 501,20 501,30 491,25" stroke="#d4dde4" fill="none"/><line x1="501" y1="25" x2="509" y2="25" stroke="#d4dde4"/><line x1="509" y1="25" x2="509" y2="90" stroke="#d4dde4"/><line x1="509" y1="90" x2="492" y2="90" stroke="#d4dde4"/><a xlink:href="/docs/
web/api/htmlstyleelement" target="_top"><rect x="331" y=...
HTMLTableCaptionElement - Web APIs
<div id="interfacediagram" style="display: inline-block; position: relative; width: 100%; padding-bottom: 20%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 120" preserveaspectratio="xminymin meet"><a xlink:href="/docs/
web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="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="2...
...5" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/
web/api/node" target="_top"><rect x="151" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="188.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">node</text></a><polyline points="226,25 236,20 236,30 226,25" stroke="#d4dde4" fill="none"/><line x1="236" y1="25" x2="266" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/
web/api/element" target="_top"><rect x="266" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="303.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">element</te...
...xt></a><polyline points="341,25 351,20 351,30 341,25" stroke="#d4dde4" fill="none"/><line x1="351" y1="25" x2="381" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/
web/api/htmlelement" target="_top"><rect x="381" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="436" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">htmlelement</text></a><polyline points="491,25 501,20 501,30 491,25" stroke="#d4dde4" fill="none"/><line x1="501" y1="25" x2="509" y2="25" stroke="#d4dde4"/><line x1="509" y1="25" x2="509" y2="90" stroke="#d4dde4"/><line x1="509" y1="90" x2="492" y2="90" stroke="#d4dde4"/><a xlink:href="/docs/
web/api/htmltablecaptionelement" target="_top"><rect x="...
HTMLTableCellElement - Web APIs
<div id="interfacediagram" style="display: inline-block; position: relative; width: 100%; padding-bottom: 20%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 120" preserveaspectratio="xminymin meet"><a xlink:href="/docs/
web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="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="2...
...5" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/
web/api/node" target="_top"><rect x="151" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="188.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">node</text></a><polyline points="226,25 236,20 236,30 226,25" stroke="#d4dde4" fill="none"/><line x1="236" y1="25" x2="266" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/
web/api/element" target="_top"><rect x="266" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="303.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">element</te...
...xt></a><polyline points="341,25 351,20 351,30 341,25" stroke="#d4dde4" fill="none"/><line x1="351" y1="25" x2="381" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/
web/api/htmlelement" target="_top"><rect x="381" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="436" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">htmlelement</text></a><polyline points="491,25 501,20 501,30 491,25" stroke="#d4dde4" fill="none"/><line x1="501" y1="25" x2="509" y2="25" stroke="#d4dde4"/><line x1="509" y1="25" x2="509" y2="90" stroke="#d4dde4"/><line x1="509" y1="90" x2="492" y2="90" stroke="#d4dde4"/><a xlink:href="/docs/
web/api/htmltablecellelement" target="_top"><rect x="291...
HTMLTableColElement - Web APIs
<div id="interfacediagram" style="display: inline-block; position: relative; width: 100%; padding-bottom: 20%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 120" preserveaspectratio="xminymin meet"><a xlink:href="/docs/
web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="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="2...
...5" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/
web/api/node" target="_top"><rect x="151" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="188.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">node</text></a><polyline points="226,25 236,20 236,30 226,25" stroke="#d4dde4" fill="none"/><line x1="236" y1="25" x2="266" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/
web/api/element" target="_top"><rect x="266" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="303.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">element</te...
...xt></a><polyline points="341,25 351,20 351,30 341,25" stroke="#d4dde4" fill="none"/><line x1="351" y1="25" x2="381" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/
web/api/htmlelement" target="_top"><rect x="381" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="436" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">htmlelement</text></a><polyline points="491,25 501,20 501,30 491,25" stroke="#d4dde4" fill="none"/><line x1="501" y1="25" x2="509" y2="25" stroke="#d4dde4"/><line x1="509" y1="25" x2="509" y2="90" stroke="#d4dde4"/><line x1="509" y1="90" x2="492" y2="90" stroke="#d4dde4"/><a xlink:href="/docs/
web/api/htmltablecolelement" target="_top"><rect x="301"...
HTMLTableElement - Web APIs
<div id="interfacediagram" style="display: inline-block; position: relative; width: 100%; padding-bottom: 20%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 120" preserveaspectratio="xminymin meet"><a xlink:href="/docs/
web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="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="2...
...5" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/
web/api/node" target="_top"><rect x="151" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="188.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">node</text></a><polyline points="226,25 236,20 236,30 226,25" stroke="#d4dde4" fill="none"/><line x1="236" y1="25" x2="266" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/
web/api/element" target="_top"><rect x="266" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="303.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">element</te...
...xt></a><polyline points="341,25 351,20 351,30 341,25" stroke="#d4dde4" fill="none"/><line x1="351" y1="25" x2="381" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/
web/api/htmlelement" target="_top"><rect x="381" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="436" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">htmlelement</text></a><polyline points="491,25 501,20 501,30 491,25" stroke="#d4dde4" fill="none"/><line x1="501" y1="25" x2="509" y2="25" stroke="#d4dde4"/><line x1="509" y1="25" x2="509" y2="90" stroke="#d4dde4"/><line x1="509" y1="90" x2="492" y2="90" stroke="#d4dde4"/><a xlink:href="/docs/
web/api/htmltableelement" target="_top"><rect x="331" y=...
HTMLTableRowElement - Web APIs
<div id="interfacediagram" style="display: inline-block; position: relative; width: 100%; padding-bottom: 20%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 120" preserveaspectratio="xminymin meet"><a xlink:href="/docs/
web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="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="2...
...5" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/
web/api/node" target="_top"><rect x="151" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="188.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">node</text></a><polyline points="226,25 236,20 236,30 226,25" stroke="#d4dde4" fill="none"/><line x1="236" y1="25" x2="266" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/
web/api/element" target="_top"><rect x="266" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="303.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">element</te...
...xt></a><polyline points="341,25 351,20 351,30 341,25" stroke="#d4dde4" fill="none"/><line x1="351" y1="25" x2="381" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/
web/api/htmlelement" target="_top"><rect x="381" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="436" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">htmlelement</text></a><polyline points="491,25 501,20 501,30 491,25" stroke="#d4dde4" fill="none"/><line x1="501" y1="25" x2="509" y2="25" stroke="#d4dde4"/><line x1="509" y1="25" x2="509" y2="90" stroke="#d4dde4"/><line x1="509" y1="90" x2="492" y2="90" stroke="#d4dde4"/><a xlink:href="/docs/
web/api/htmltablerowelement" target="_top"><rect x="301"...
HTMLTableSectionElement - Web APIs
<div id="interfacediagram" style="display: inline-block; position: relative; width: 100%; padding-bottom: 20%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 120" preserveaspectratio="xminymin meet"><a xlink:href="/docs/
web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="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="2...
...5" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/
web/api/node" target="_top"><rect x="151" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="188.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">node</text></a><polyline points="226,25 236,20 236,30 226,25" stroke="#d4dde4" fill="none"/><line x1="236" y1="25" x2="266" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/
web/api/element" target="_top"><rect x="266" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="303.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">element</te...
...xt></a><polyline points="341,25 351,20 351,30 341,25" stroke="#d4dde4" fill="none"/><line x1="351" y1="25" x2="381" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/
web/api/htmlelement" target="_top"><rect x="381" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="436" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">htmlelement</text></a><polyline points="491,25 501,20 501,30 491,25" stroke="#d4dde4" fill="none"/><line x1="501" y1="25" x2="509" y2="25" stroke="#d4dde4"/><line x1="509" y1="25" x2="509" y2="90" stroke="#d4dde4"/><line x1="509" y1="90" x2="492" y2="90" stroke="#d4dde4"/><a xlink:href="/docs/
web/api/htmltablesectionelement" target="_top"><rect x="...
HTMLTemplateElement - Web APIs
<div id="interfacediagram" style="display: inline-block; position: relative; width: 100%; padding-bottom: 20%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 120" preserveaspectratio="xminymin meet"><a xlink:href="/docs/
web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="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="2...
...5" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/
web/api/node" target="_top"><rect x="151" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="188.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">node</text></a><polyline points="226,25 236,20 236,30 226,25" stroke="#d4dde4" fill="none"/><line x1="236" y1="25" x2="266" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/
web/api/element" target="_top"><rect x="266" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="303.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">element</te...
...xt></a><polyline points="341,25 351,20 351,30 341,25" stroke="#d4dde4" fill="none"/><line x1="351" y1="25" x2="381" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/
web/api/htmlelement" target="_top"><rect x="381" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="436" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">htmlelement</text></a><polyline points="491,25 501,20 501,30 491,25" stroke="#d4dde4" fill="none"/><line x1="501" y1="25" x2="509" y2="25" stroke="#d4dde4"/><line x1="509" y1="25" x2="509" y2="90" stroke="#d4dde4"/><line x1="509" y1="90" x2="492" y2="90" stroke="#d4dde4"/><a xlink:href="/docs/
web/api/htmltemplateelement" target="_top"><rect x="301"...
HTMLTextAreaElement - Web APIs
<div id="interfacediagram" style="display: inline-block; position: relative; width: 100%; padding-bottom: 20%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 120" preserveaspectratio="xminymin meet"><a xlink:href="/docs/
web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="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="2...
...5" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/
web/api/node" target="_top"><rect x="151" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="188.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">node</text></a><polyline points="226,25 236,20 236,30 226,25" stroke="#d4dde4" fill="none"/><line x1="236" y1="25" x2="266" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/
web/api/element" target="_top"><rect x="266" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="303.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">element</te...
...xt></a><polyline points="341,25 351,20 351,30 341,25" stroke="#d4dde4" fill="none"/><line x1="351" y1="25" x2="381" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/
web/api/htmlelement" target="_top"><rect x="381" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="436" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">htmlelement</text></a><polyline points="491,25 501,20 501,30 491,25" stroke="#d4dde4" fill="none"/><line x1="501" y1="25" x2="509" y2="25" stroke="#d4dde4"/><line x1="509" y1="25" x2="509" y2="90" stroke="#d4dde4"/><line x1="509" y1="90" x2="492" y2="90" stroke="#d4dde4"/><a xlink:href="/docs/
web/api/htmltextareaelement" target="_top"><rect x="301"...
HTMLTimeElement - Web APIs
<div id="interfacediagram" style="display: inline-block; position: relative; width: 100%; padding-bottom: 20%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 120" preserveaspectratio="xminymin meet"><a xlink:href="/docs/
web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="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="2...
...5" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/
web/api/node" target="_top"><rect x="151" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="188.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">node</text></a><polyline points="226,25 236,20 236,30 226,25" stroke="#d4dde4" fill="none"/><line x1="236" y1="25" x2="266" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/
web/api/element" target="_top"><rect x="266" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="303.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">element</te...
...xt></a><polyline points="341,25 351,20 351,30 341,25" stroke="#d4dde4" fill="none"/><line x1="351" y1="25" x2="381" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/
web/api/htmlelement" target="_top"><rect x="381" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="436" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">htmlelement</text></a><polyline points="491,25 501,20 501,30 491,25" stroke="#d4dde4" fill="none"/><line x1="501" y1="25" x2="509" y2="25" stroke="#d4dde4"/><line x1="509" y1="25" x2="509" y2="90" stroke="#d4dde4"/><line x1="509" y1="90" x2="492" y2="90" stroke="#d4dde4"/><a xlink:href="/docs/
web/api/htmltimeelement" target="_top"><rect x="341" y="...
HTMLTitleElement - Web APIs
<div id="interfacediagram" style="display: inline-block; position: relative; width: 100%; padding-bottom: 20%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 120" preserveaspectratio="xminymin meet"><a xlink:href="/docs/
web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="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="2...
...5" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/
web/api/node" target="_top"><rect x="151" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="188.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">node</text></a><polyline points="226,25 236,20 236,30 226,25" stroke="#d4dde4" fill="none"/><line x1="236" y1="25" x2="266" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/
web/api/element" target="_top"><rect x="266" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="303.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">element</te...
...xt></a><polyline points="341,25 351,20 351,30 341,25" stroke="#d4dde4" fill="none"/><line x1="351" y1="25" x2="381" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/
web/api/htmlelement" target="_top"><rect x="381" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="436" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">htmlelement</text></a><polyline points="491,25 501,20 501,30 491,25" stroke="#d4dde4" fill="none"/><line x1="501" y1="25" x2="509" y2="25" stroke="#d4dde4"/><line x1="509" y1="25" x2="509" y2="90" stroke="#d4dde4"/><line x1="509" y1="90" x2="492" y2="90" stroke="#d4dde4"/><a xlink:href="/docs/
web/api/htmltitleelement" target="_top"><rect x="331" y=...
HTMLUListElement - Web APIs
<div id="interfacediagram" style="display: inline-block; position: relative; width: 100%; padding-bottom: 20%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 120" preserveaspectratio="xminymin meet"><a xlink:href="/docs/
web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="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="2...
...5" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/
web/api/node" target="_top"><rect x="151" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="188.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">node</text></a><polyline points="226,25 236,20 236,30 226,25" stroke="#d4dde4" fill="none"/><line x1="236" y1="25" x2="266" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/
web/api/element" target="_top"><rect x="266" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="303.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">element</te...
...xt></a><polyline points="341,25 351,20 351,30 341,25" stroke="#d4dde4" fill="none"/><line x1="351" y1="25" x2="381" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/
web/api/htmlelement" target="_top"><rect x="381" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="436" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">htmlelement</text></a><polyline points="491,25 501,20 501,30 491,25" stroke="#d4dde4" fill="none"/><line x1="501" y1="25" x2="509" y2="25" stroke="#d4dde4"/><line x1="509" y1="25" x2="509" y2="90" stroke="#d4dde4"/><line x1="509" y1="90" x2="492" y2="90" stroke="#d4dde4"/><a xlink:href="/docs/
web/api/htmlulistelement" target="_top"><rect x="331" y=...
HTMLUnknownElement - Web APIs
<div id="interfacediagram" style="display: inline-block; position: relative; width: 100%; padding-bottom: 20%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 120" preserveaspectratio="xminymin meet"><a xlink:href="/docs/
web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="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="2...
...5" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/
web/api/node" target="_top"><rect x="151" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="188.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">node</text></a><polyline points="226,25 236,20 236,30 226,25" stroke="#d4dde4" fill="none"/><line x1="236" y1="25" x2="266" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/
web/api/element" target="_top"><rect x="266" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="303.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">element</te...
...xt></a><polyline points="341,25 351,20 351,30 341,25" stroke="#d4dde4" fill="none"/><line x1="351" y1="25" x2="381" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/
web/api/htmlelement" target="_top"><rect x="381" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="436" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">htmlelement</text></a><polyline points="491,25 501,20 501,30 491,25" stroke="#d4dde4" fill="none"/><line x1="501" y1="25" x2="509" y2="25" stroke="#d4dde4"/><line x1="509" y1="25" x2="509" y2="90" stroke="#d4dde4"/><line x1="509" y1="90" x2="492" y2="90" stroke="#d4dde4"/><a xlink:href="/docs/
web/api/htmlunknownelement" target="_top"><rect x="311" ...
Recommended Drag Types - Web APIs
for example: event.datatransfer.setdata("text/plain", "this is text to drag"); dragging text in textboxes and selections on
web pages is done automatically by the browser, so you do not need to handle it yourself.
...non-privileged
web pages canot retrieve or modify data of this type.
...the data should be the url of the image, or a data: uri if the image is not stored on a
web site or disk.
History.scrollRestoration - Web APIs
the scrollrestoration property of history interface allows
web applications to explicitly set default scroll restoration behavior on history navigation.
... desktopmobilechromeedgefirefoxinternet exploreroperasafariandroid
webviewchrome for androidfirefox for androidopera for androidsafari on iossamsung internetscrollrestorationchrome full support 46edge full support 79firefox full support 46ie no support noopera full support ...
... 33safari full support yes
webview android no support nochrome android full support 46firefox android full support yesopera android full support yessafari ios full support yessamsung internet android full support 5.0legend full support full support no support no support ...
IDBCursor.advance() - Web APIs
note: this feature is available in
web workers.
... desktopmobilechromeedgefirefoxinternet exploreroperasafariandroid
webviewchrome for androidfirefox for androidopera for androidsafari on iossamsung internetadvancechrome full support 24 full support 24 no support 23 — 24prefixed prefixed implemented with the vendor prefix:
webkitedge full support 12firefo...
... full support 16 full support 16 no support 10 — 16prefixed prefixed implemented with the vendor prefix: mozie partial support 10opera full support 15safari full support 7
webview android full support yeschrome android full support yesfirefox android full support 22opera android full support 14safari ios full support 8samsung internet android ...
IDBCursor.continue() - Web APIs
note: this feature is available in
web workers.
... desktopmobilechromeedgefirefoxinternet exploreroperasafariandroid
webviewchrome for androidfirefox for androidopera for androidsafari on iossamsung internetcontinuechrome full support 24 full support 24 no support 23 — 24prefixed prefixed implemented with the vendor prefix:
webkitedge full support 12firef...
... full support 16 full support 16 no support 10 — 16prefixed prefixed implemented with the vendor prefix: mozie partial support 10opera full support 15safari full support 7
webview android full support yeschrome android full support yesfirefox android full support 22opera android full support 14safari ios full support 8samsung internet android ...
IDBCursor.delete() - Web APIs
note: this feature is available in
web workers.
... desktopmobilechromeedgefirefoxinternet exploreroperasafariandroid
webviewchrome for androidfirefox for androidopera for androidsafari on iossamsung internetdeletechrome full support 24 full support 24 no support 23 — 24prefixed prefixed implemented with the vendor prefix:
webkitedge full support 12firefox...
... full support 16 full support 16 no support 10 — 16prefixed prefixed implemented with the vendor prefix: mozie partial support 10opera full support 15safari full support 7
webview android full support yeschrome android full support yesfirefox android full support 22opera android full support 14safari ios full support 8samsung internet android ...
IDBCursor.direction - Web APIs
note: this feature is available in
web workers.
... desktopmobilechromeedgefirefoxinternet exploreroperasafariandroid
webviewchrome for androidfirefox for androidopera for androidsafari on iossamsung internetdirectionchrome full support 24 full support 24 no support 23 — 24prefixed prefixed implemented with the vendor prefix:
webkitedge full support 12fire...
... full support 16 full support 16 no support 10 — 16prefixed prefixed implemented with the vendor prefix: mozie partial support 10opera full support 15safari full support 7
webview android full support yeschrome android full support yesfirefox android full support 22opera android full support 14safari ios full support 8samsung internet android ...
IDBCursor.primaryKey - Web APIs
note: this feature is available in
web workers.
... desktopmobilechromeedgefirefoxinternet exploreroperasafariandroid
webviewchrome for androidfirefox for androidopera for androidsafari on iossamsung internetprimarykeychrome full support 24 full support 24 no support 23 — 24prefixed prefixed implemented with the vendor prefix:
webkitedge full support 12fir...
... full support 16 full support 16 no support 10 — 16prefixed prefixed implemented with the vendor prefix: mozie partial support 10opera full support 15safari full support 7
webview android full support yeschrome android full support yesfirefox android full support 22opera android full support 14safari ios full support 8samsung internet android ...
IDBCursor.request - Web APIs
note: this feature is available in
web workers.
... desktopmobilechromeedgefirefoxinternet exploreroperasafariandroid
webviewchrome for androidfirefox for androidopera for androidsafari on iossamsung internetrequestchrome full support 76edge full support 79firefox full support 77ie no support noopera full support ...
...
webview android full support 76chrome android full support 76firefox android no support noopera android full support 54safari ios ?
IDBCursor.source - Web APIs
note: this feature is available in
web workers.
... desktopmobilechromeedgefirefoxinternet exploreroperasafariandroid
webviewchrome for androidfirefox for androidopera for androidsafari on iossamsung internetsourcechrome full support 24 full support 24 no support 23 — 24prefixed prefixed implemented with the vendor prefix:
webkitedge full support 12firefox...
... full support 16 full support 16 no support 10 — 16prefixed prefixed implemented with the vendor prefix: mozie partial support 10opera full support 15safari full support 7
webview android full support yeschrome android full support yesfirefox android full support 22opera android full support 14safari ios full support 8samsung internet android ...
IDBCursor.update() - Web APIs
note: this feature is available in
web workers.
... desktopmobilechromeedgefirefoxinternet exploreroperasafariandroid
webviewchrome for androidfirefox for androidopera for androidsafari on iossamsung internetupdatechrome full support 24 full support 24 no support 23 — 24prefixed prefixed implemented with the vendor prefix:
webkitedge full support 12firefox...
... full support 16 full support 16 no support 10 — 16prefixed prefixed implemented with the vendor prefix: mozie partial support 10opera full support 15safari full support 7
webview android full support yeschrome android full support yesfirefox android full support 22opera android full support 14safari ios full support 8samsung internet android ...
IDBCursorWithValue.value - Web APIs
note: this feature is available in
web workers.
... desktopmobilechromeedgefirefoxinternet exploreroperasafariandroid
webviewchrome for androidfirefox for androidopera for androidsafari on iossamsung internetvaluechrome full support 24 full support 24 no support 23 — 24prefixed prefixed implemented with the vendor prefix:
webkitedge full support 12firefox ...
... full support 16 full support 16 no support 10 — 16prefixed prefixed implemented with the vendor prefix: mozie partial support 10opera full support 15safari full support 7
webview android full support yeschrome android full support yesfirefox android full support 22opera android full support 14safari ios full support 8samsung internet android ...
IDBDatabase.close() - Web APIs
note: this feature is available in
web workers.
... desktopmobilechromeedgefirefoxinternet exploreroperasafariandroid
webviewchrome for androidfirefox for androidopera for androidsafari on iossamsung internetclosechrome full support 24 full support 24 no support 23 — 24prefixed prefixed implemented with the vendor prefix:
webkitedge full support 12firefox ...
... full support 16 full support 16 no support 10 — 16prefixed prefixed implemented with the vendor prefix: mozie partial support 10opera full support 15safari full support 7
webview android full support yeschrome android full support 25firefox android full support 22opera android full support 14safari ios full support 8samsung internet android ...
IDBDatabase.name - Web APIs
note: this feature is available in
web workers.
... desktopmobilechromeedgefirefoxinternet exploreroperasafariandroid
webviewchrome for androidfirefox for androidopera for androidsafari on iossamsung internetnamechrome full support 24 full support 24 no support 23 — 24prefixed prefixed implemented with the vendor prefix:
webkitedge full support 12firefox ...
... full support 16 full support 16 no support 10 — 16prefixed prefixed implemented with the vendor prefix: mozie partial support 10opera full support 15safari full support 7
webview android full support yeschrome android full support 25firefox android full support 22opera android full support 14safari ios full support 8samsung internet android ...
IDBDatabase.objectStoreNames - Web APIs
note: this feature is available in
web workers.
... desktopmobilechromeedgefirefoxinternet exploreroperasafariandroid
webviewchrome for androidfirefox for androidopera for androidsafari on iossamsung internetobjectstorenameschrome full support 24 full support 24 no support 23 — 24prefixed prefixed implemented with the vendor prefix:
webkitedge full support ...
... full support 16 full support 16 no support 10 — 16prefixed prefixed implemented with the vendor prefix: mozie partial support 10opera full support 15safari full support 7
webview android full support yeschrome android full support 25firefox android full support 22opera android full support 14safari ios full support 8samsung internet android ...
IDBDatabase.onabort - Web APIs
note: this feature is available in
web workers.
... desktopmobilechromeedgefirefoxinternet exploreroperasafariandroid
webviewchrome for androidfirefox for androidopera for androidsafari on iossamsung internetonabortchrome full support 24 full support 24 no support 23 — 24prefixed prefixed implemented with the vendor prefix:
webkitedge full support 12firefo...
... full support 16 full support 16 no support 10 — 16prefixed prefixed implemented with the vendor prefix: mozie partial support 10opera full support 15safari full support 7
webview android full support yeschrome android full support 25firefox android full support 22opera android full support 14safari ios full support 8samsung internet android ...
IDBDatabase.onclose - Web APIs
note: this feature is available in
web workers.
... desktopmobilechromeedgefirefoxinternet exploreroperasafariandroid
webviewchrome for androidfirefox for androidopera for androidsafari on iossamsung internetonclosechrome full support 31notes full support 31notes notes approxedge full support ≤18firefox full support 50ie ...
... opera full support yessafari full support 10.1
webview android full support yeschrome android full support 31firefox android full support 50opera android full support yessafari ios full support 10.3samsung internet android full support 2.0legend full support full support compatibility unknown ...
IDBDatabase.onerror - Web APIs
note: this feature is available in
web workers.
... desktopmobilechromeedgefirefoxinternet exploreroperasafariandroid
webviewchrome for androidfirefox for androidopera for androidsafari on iossamsung internetonerrorchrome full support 24 full support 24 no support 23 — 24prefixed prefixed implemented with the vendor prefix:
webkitedge full support 12firefo...
... full support 16 full support 16 no support 10 — 16prefixed prefixed implemented with the vendor prefix: mozie partial support 10opera full support 15safari full support 7
webview android full support yeschrome android full support 25firefox android full support 22opera android full support 14safari ios full support 8samsung internet android ...
IDBDatabase.onversionchange - Web APIs
note: this feature is available in
web workers.
... desktopmobilechromeedgefirefoxinternet exploreroperasafariandroid
webviewchrome for androidfirefox for androidopera for androidsafari on iossamsung internetonversionchangechrome full support 24 full support 24 no support 23 — 24prefixed prefixed implemented with the vendor prefix:
webkitedge full support ...
... full support 16 full support 16 no support 10 — 16prefixed prefixed implemented with the vendor prefix: mozie partial support 10opera full support 15safari full support 7
webview android full support yeschrome android full support 25firefox android full support 22opera android full support 14safari ios full support 8samsung internet android ...
IDBDatabase.transaction() - Web APIs
note: this feature is available in
web workers.
... desktopmobilechromeedgefirefoxinternet exploreroperasafariandroid
webviewchrome for androidfirefox for androidopera for androidsafari on iossamsung internettransactionchrome full support 24 full support 24 no support 23 — 24prefixed prefixed implemented with the vendor prefix:
webkitedge full support 12fi...
... full support 16 full support 16 no support 10 — 16prefixed prefixed implemented with the vendor prefix: mozie partial support 10opera full support 15safari full support 7
webview android full support yeschrome android full support 25firefox android full support 22opera android full support 14safari ios full support 8samsung internet android ...
IDBDatabase.version - Web APIs
note: this feature is available in
web workers.
... desktopmobilechromeedgefirefoxinternet exploreroperasafariandroid
webviewchrome for androidfirefox for androidopera for androidsafari on iossamsung internetversionchrome full support 24 full support 24 no support 23 — 24prefixed prefixed implemented with the vendor prefix:
webkitedge full support 12firefo...
... full support 16 full support 16 no support 10 — 16prefixed prefixed implemented with the vendor prefix: mozie partial support 10opera full support 15safari full support 7
webview android full support yeschrome android full support 25firefox android full support 22opera android full support 14safari ios full support 8samsung internet android ...
databases - Web APIs
note: this feature is available in
web workers.
... desktopmobilechromeedgefirefoxinternet exploreroperasafariandroid
webviewchrome for androidfirefox for androidopera for androidsafari on iossamsung internetdatabases experimentalchrome full support 71edge full support 79firefox no support nonotes no support nonotes notes see bug 934640.i...
...e no support noopera full support 58safari no support no
webview android full support 71chrome android full support 71firefox android no support nonotes no support nonotes notes see bug 934640.opera android full support yessafari ios no support nosamsung internet android full support 10.0legend full support ...
IDBKeyRange.bound() - Web APIs
note: this feature is available in
web workers.
... desktopmobilechromeedgefirefoxinternet exploreroperasafariandroid
webviewchrome for androidfirefox for androidopera for androidsafari on iossamsung internetboundchrome full support 24 full support 24 no support 23 — 24prefixed prefixed implemented with the vendor prefix:
webkitedge full support 12firefox ...
... full support 16 full support 16 no support 10 — 16prefixed prefixed implemented with the vendor prefix: mozie partial support 10opera full support 15safari full support 7
webview android full support yeschrome android full support yesfirefox android full support 22opera android full support 14safari ios full support 8samsung internet android ...
IDBKeyRange.includes() - Web APIs
note: this feature is available in
web workers.
... desktopmobilechromeedgefirefoxinternet exploreroperasafariandroid
webviewchrome for androidfirefox for androidopera for androidsafari on iossamsung internetincludeschrome full support 52edge full support ≤18firefox full support 47ie ?
... opera full support 39safari full support 10.1
webview android full support 52chrome android full support 52firefox android full support yesopera android full support 41safari ios full support 10.3samsung internet android full support 6.0legend full support full support compatibility unknown ...
IDBKeyRange.lower - Web APIs
note: this feature is available in
web workers.
... desktopmobilechromeedgefirefoxinternet exploreroperasafariandroid
webviewchrome for androidfirefox for androidopera for androidsafari on iossamsung internetlowerchrome full support 24 full support 24 no support 23 — 24prefixed prefixed implemented with the vendor prefix:
webkitedge full support 12firefox ...
... full support 16 full support 16 no support 10 — 16prefixed prefixed implemented with the vendor prefix: mozie partial support 10opera full support 15safari full support 7
webview android full support yeschrome android full support yesfirefox android full support 22opera android full support 14safari ios full support 8samsung internet android ...
IDBKeyRange.lowerBound() - Web APIs
note: this feature is available in
web workers.
... desktopmobilechromeedgefirefoxinternet exploreroperasafariandroid
webviewchrome for androidfirefox for androidopera for androidsafari on iossamsung internetlowerboundchrome full support 24 full support 24 no support 23 — 24prefixed prefixed implemented with the vendor prefix:
webkitedge full support 12fir...
... full support 16 full support 16 no support 10 — 16prefixed prefixed implemented with the vendor prefix: mozie partial support 10opera full support 15safari full support 7
webview android full support yeschrome android full support yesfirefox android full support 22opera android full support 14safari ios full support 8samsung internet android ...
IDBKeyRange.lowerOpen - Web APIs
note: this feature is available in
web workers.
... desktopmobilechromeedgefirefoxinternet exploreroperasafariandroid
webviewchrome for androidfirefox for androidopera for androidsafari on iossamsung internetloweropenchrome full support 24 full support 24 no support 23 — 24prefixed prefixed implemented with the vendor prefix:
webkitedge full support 12fire...
... full support 16 full support 16 no support 10 — 16prefixed prefixed implemented with the vendor prefix: mozie partial support 10opera full support 15safari full support 7
webview android full support yeschrome android full support yesfirefox android full support 22opera android full support 14safari ios full support 8samsung internet android ...
IDBKeyRange.only() - Web APIs
note: this feature is available in
web workers.
... desktopmobilechromeedgefirefoxinternet exploreroperasafariandroid
webviewchrome for androidfirefox for androidopera for androidsafari on iossamsung internetonlychrome full support 24 full support 24 no support 23 — 24prefixed prefixed implemented with the vendor prefix:
webkitedge full support 12firefox ...
... full support 16 full support 16 no support 10 — 16prefixed prefixed implemented with the vendor prefix: mozie partial support 10opera full support 15safari full support 7
webview android full support yeschrome android full support yesfirefox android full support 22opera android full support 14safari ios full support 8samsung internet android ...
IDBKeyRange.upper - Web APIs
note: this feature is available in
web workers.
... desktopmobilechromeedgefirefoxinternet exploreroperasafariandroid
webviewchrome for androidfirefox for androidopera for androidsafari on iossamsung internetupperchrome full support 24 full support 24 no support 23 — 24prefixed prefixed implemented with the vendor prefix:
webkitedge full support 12firefox ...
... full support 16 full support 16 no support 10 — 16prefixed prefixed implemented with the vendor prefix: mozie partial support 10opera full support 15safari full support 7
webview android full support yeschrome android full support yesfirefox android full support 22opera android full support 14safari ios full support 8samsung internet android ...
IDBKeyRange.upperBound() - Web APIs
note: this feature is available in
web workers.
... desktopmobilechromeedgefirefoxinternet exploreroperasafariandroid
webviewchrome for androidfirefox for androidopera for androidsafari on iossamsung internetupperboundchrome full support 24 full support 24 no support 23 — 24prefixed prefixed implemented with the vendor prefix:
webkitedge full support 12fir...
... full support 16 full support 16 no support 10 — 16prefixed prefixed implemented with the vendor prefix: mozie partial support 10opera full support 15safari full support 7
webview android full support yeschrome android full support yesfirefox android full support 22opera android full support 14safari ios full support 8samsung internet android ...
IDBKeyRange.upperOpen - Web APIs
note: this feature is available in
web workers.
... desktopmobilechromeedgefirefoxinternet exploreroperasafariandroid
webviewchrome for androidfirefox for androidopera for androidsafari on iossamsung internetupperopenchrome full support 24 full support 24 no support 23 — 24prefixed prefixed implemented with the vendor prefix:
webkitedge full support 12fire...
... full support 16 full support 16 no support 10 — 16prefixed prefixed implemented with the vendor prefix: mozie partial support 10opera full support 15safari full support 7
webview android full support yeschrome android full support yesfirefox android full support 22opera android full support 14safari ios full support 8samsung internet android ...
IDBObjectStore.getKey() - Web APIs
note: this feature is available in
web workers.
... desktopmobilechromeedgefirefoxinternet exploreroperasafariandroid
webviewchrome for androidfirefox for androidopera for androidsafari on iossamsung internetgetkeychrome full support 48edge full support ≤79firefox full support 51ie ?
... opera full support 45safari full support 10.1
webview android full support 48chrome android full support 48firefox android full support 58opera android full support 43safari ios full support 10.3samsung internet android full support 5.0legend full support full support compatibility unknown ...
IDBOpenDBRequest - Web APIs
note: this feature is available in
web workers.
... <div id="interfacediagram" style="display: inline-block; position: relative; width: 100%; padding-bottom: 11.666666666666666%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 70" preserveaspectratio="xminymin meet"><a xlink:href="/docs/
web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="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/idbr...
...0" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="201" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">idbrequest</text></a><polyline points="251,25 261,20 261,30 251,25" stroke="#d4dde4" fill="none"/><line x1="261" y1="25" x2="291" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/
web/api/idbopendbrequest" target="_top"><rect x="291" y="1" width="160" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="371" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">idbopendbrequest</text></a></svg></div> a:hover text { fill: #0095dd; pointer-events: all;} propertie...
IDBRequest.onerror - Web APIs
note: this feature is available in
web workers.
... desktopmobilechromeedgefirefoxinternet exploreroperasafariandroid
webviewchrome for androidfirefox for androidopera for androidsafari on iossamsung internetonerrorchrome full support 24 full support 24 full support 23prefixed prefixed implemented with the vendor prefix:
webkitedge full support ...
... full support 16 full support 16 no support 10 — 16prefixed prefixed implemented with the vendor prefix: mozie partial support 10opera full support 15safari full support 7
webview android full support yeschrome android full support yesfirefox android full support 22opera android full support 14safari ios full support 8samsung internet android ...
IDBRequest.onsuccess - Web APIs
note: this feature is available in
web workers.
... desktopmobilechromeedgefirefoxinternet exploreroperasafariandroid
webviewchrome for androidfirefox for androidopera for androidsafari on iossamsung internetonsuccesschrome full support 24 full support 24 full support 23prefixed prefixed implemented with the vendor prefix:
webkitedge full support ...
... full support 16 full support 16 no support 10 — 16prefixed prefixed implemented with the vendor prefix: mozie partial support 10opera full support 15safari full support 7
webview android full support yeschrome android full support yesfirefox android full support 22opera android full support 14safari ios full support 8samsung internet android ...
IDBRequest.readyState - Web APIs
note: this feature is available in
web workers.
... desktopmobilechromeedgefirefoxinternet exploreroperasafariandroid
webviewchrome for androidfirefox for androidopera for androidsafari on iossamsung internetreadystatechrome full support 24 full support 24 full support 23prefixed prefixed implemented with the vendor prefix:
webkitedge full support ...
... full support 16 full support 16 no support 10 — 16prefixed prefixed implemented with the vendor prefix: mozie partial support 10opera full support 15safari full support 7
webview android full support yeschrome android full support yesfirefox android full support 22opera android full support 14safari ios full support 8samsung internet android ...
IDBRequest.result - Web APIs
note: this feature is available in
web workers.
... desktopmobilechromeedgefirefoxinternet exploreroperasafariandroid
webviewchrome for androidfirefox for androidopera for androidsafari on iossamsung internetresultchrome full support 24 full support 24 full support 23prefixed prefixed implemented with the vendor prefix:
webkitedge full support ...
... full support 16 full support 16 no support 10 — 16prefixed prefixed implemented with the vendor prefix: mozie partial support 10opera full support 15safari full support 7
webview android full support yeschrome android full support yesfirefox android full support 22opera android full support 14safari ios full support 8samsung internet android ...
IDBRequest.source - Web APIs
note: this feature is available in
web workers.
... desktopmobilechromeedgefirefoxinternet exploreroperasafariandroid
webviewchrome for androidfirefox for androidopera for androidsafari on iossamsung internetsourcechrome full support 24 full support 24 full support 23prefixed prefixed implemented with the vendor prefix:
webkitedge full support ...
... full support 16 full support 16 no support 10 — 16prefixed prefixed implemented with the vendor prefix: mozie partial support 10opera full support 15safari full support 7
webview android full support yeschrome android full support yesfirefox android full support 22opera android full support 14safari ios full support 8samsung internet android ...
IDBRequest.transaction - Web APIs
note: this feature is available in
web workers.
... desktopmobilechromeedgefirefoxinternet exploreroperasafariandroid
webviewchrome for androidfirefox for androidopera for androidsafari on iossamsung internettransactionchrome full support 24 full support 24 full support 23prefixed prefixed implemented with the vendor prefix:
webkitedge full support ...
... full support 16 full support 16 no support 10 — 16prefixed prefixed implemented with the vendor prefix: mozie partial support 10opera full support 15safari full support 7
webview android full support yeschrome android full support yesfirefox android full support 22opera android full support 14safari ios full support 8samsung internet android ...
IDBTransaction.abort() - Web APIs
note: this feature is available in
web workers.
... desktopmobilechromeedgefirefoxinternet exploreroperasafariandroid
webviewchrome for androidfirefox for androidopera for androidsafari on iossamsung internetabortchrome full support 24 full support 24 full support 23prefixed prefixed implemented with the vendor prefix:
webkitedge full support ...
... full support 16 full support 16 no support 10 — 16prefixed prefixed implemented with the vendor prefix: mozie partial support 10opera full support 15safari full support 7
webview android full support yeschrome android full support yesfirefox android full support 22opera android full support 14safari ios full support 8samsung internet android ...
IDBTransaction.commit() - Web APIs
note: this feature is available in
web workers.
... desktopmobilechromeedgefirefoxinternet exploreroperasafariandroid
webviewchrome for androidfirefox for androidopera for androidsafari on iossamsung internetcommitchrome full support 76edge full support 79firefox full support 74ie no support noopera full support ...
... 63safari no support no
webview android full support 76chrome android full support 76firefox android no support noopera android full support 54safari ios no support nosamsung internet android full support 12.0legend full support full support no support no support ...
IDBTransaction.mode - Web APIs
note: this feature is available in
web workers.
... desktopmobilechromeedgefirefoxinternet exploreroperasafariandroid
webviewchrome for androidfirefox for androidopera for androidsafari on iossamsung internetmodechrome full support 24 full support 24 full support 23prefixed prefixed implemented with the vendor prefix:
webkitedge full support ...
... full support 16 full support 16 no support 10 — 16prefixed prefixed implemented with the vendor prefix: mozie partial support 10opera full support 15safari full support 7
webview android full support yeschrome android full support yesfirefox android full support 22opera android full support 14safari ios full support 8samsung internet android ...
IDBTransaction.objectStore() - Web APIs
note: this feature is available in
web workers.
... desktopmobilechromeedgefirefoxinternet exploreroperasafariandroid
webviewchrome for androidfirefox for androidopera for androidsafari on iossamsung internetobjectstorechrome full support 24 full support 24 full support 23prefixed prefixed implemented with the vendor prefix:
webkitedge full support ...
... full support 16 full support 16 no support 10 — 16prefixed prefixed implemented with the vendor prefix: mozie partial support 10opera full support 15safari full support 7
webview android full support yeschrome android full support yesfirefox android full support 22opera android full support 14safari ios full support 8samsung internet android ...
IDBTransaction.onabort - Web APIs
note: this feature is available in
web workers.
... desktopmobilechromeedgefirefoxinternet exploreroperasafariandroid
webviewchrome for androidfirefox for androidopera for androidsafari on iossamsung internetonabortchrome full support 24 full support 24 full support 23prefixed prefixed implemented with the vendor prefix:
webkitedge full support ...
... full support 16 full support 16 no support 10 — 16prefixed prefixed implemented with the vendor prefix: mozie partial support 10opera full support 15safari full support 7
webview android full support yeschrome android full support yesfirefox android full support 22opera android full support 14safari ios full support 8samsung internet android ...
IDBTransaction.oncomplete - Web APIs
note: this feature is available in
web workers.
... desktopmobilechromeedgefirefoxinternet exploreroperasafariandroid
webviewchrome for androidfirefox for androidopera for androidsafari on iossamsung internetoncompletechrome full support 24 full support 24 full support 23prefixed prefixed implemented with the vendor prefix:
webkitedge full support ...
... full support 16 full support 16 no support 10 — 16prefixed prefixed implemented with the vendor prefix: mozie partial support 10opera full support 15safari full support 7
webview android full support yeschrome android full support yesfirefox android full support 22opera android full support 14safari ios full support 8samsung internet android ...
IDBTransaction.onerror - Web APIs
note: this feature is available in
web workers.
... desktopmobilechromeedgefirefoxinternet exploreroperasafariandroid
webviewchrome for androidfirefox for androidopera for androidsafari on iossamsung internetonerrorchrome full support 24 full support 24 full support 23prefixed prefixed implemented with the vendor prefix:
webkitedge full support ...
... full support 16 full support 16 no support 10 — 16prefixed prefixed implemented with the vendor prefix: mozie partial support 10opera full support 15safari full support 7
webview android full support yeschrome android full support yesfirefox android full support 22opera android full support 14safari ios full support 8samsung internet android ...
IDBVersionChangeEvent - Web APIs
note: this feature is available in
web workers.
...window.indexeddb = window.indexeddb || window.mozindexeddb || window.
webkitindexeddb || window.msindexeddb; // don't use "var indexeddb = ..." if you're not in a function.
... // moreover, you may need references to some window.idb* objects: window.idbtransaction = window.idbtransaction || window.
webkitidbtransaction || window.msidbtransaction; window.idbkeyrange = window.idbkeyrange || window.
webkitidbkeyrange || window.msidbkeyrange; // (mozilla has never prefixed these objects, so we don't need window.mozidb*) // let us open version 4 of our database var dbopenrequest = window.indexeddb.open("todolist", 4); // these two event handlers act on the database being opened successfully, or not dbopenrequest.onerror = function(event) { note.innerhtml += '<li>error loading database.</li>'; }; dbopenrequest.onsuccess = function(event) { note.innerhtml += '<li>database initialised.</li>'; // store the result of opening the database in the db variable.
KeyboardEvent - Web APIs
<div id="interfacediagram" style="display: inline-block; position: relative; width: 100%; padding-bottom: 11.666666666666666%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 70" preserveaspectratio="xminymin meet"><a xlink:href="/docs/
web/api/event" target="_top"><rect x="1" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="38.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">event</text></a><polyline points="76,25 86,20 86,30 76,25" stroke="#d4dde4" fill="none"/><line x1="86" y1="25" x2="116" y2="...
...25" stroke="#d4dde4"/><a xlink:href="/docs/
web/api/uievent" target="_top"><rect x="116" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="153.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">uievent</text></a><polyline points="191,25 201,20 201,30 191,25" stroke="#d4dde4" fill="none"/><line x1="201" y1="25" x2="231" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/
web/api/keyboardevent" target="_top"><rect x="231" y="1" width="130" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="296" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">keyboardevent...
...on those platforms, then, an auto-repeat key will generate the following sequence of events: keydown keypress keyup keydown keypress keyup <<repeating until the user releases the key>> keyup in these environments, unfortunately, there's no way for
web content to tell the difference between auto-repeating keys and keys that are just being pressed repeatedly.
Keyboard API - Web APIs
keyboard locking enables a
web page to capture keys that are normally reserved by the user agent or the underlying operating system.
... the intended use of the keyboard api is by
web applications such as games or remote access apps that provide a full-screen immersive experience.
...} keyboard locking richly interactive
web pages, games, and remote-streaming experiences often require access to special keys and keyboard shortcuts while in full-screen mode.
KeyframeEffect.KeyframeEffect() - Web APIs
the keyframeeffect() constructor of the
web animations api returns a new keyframeeffect object instance, and also allows you to clone an existing keyframe effect object instance.
...ictate how the white rabbit should animate down the hole: var rabbitdownkeyframes = new keyframeeffect( whiterabbit, // element to animate [ { transform: 'translatey(0%)' }, // keyframe { transform: 'translatey(100%)' } // keyframe ], { duration: 3000, fill: 'forwards' } // keyframe options ); specifications specification status comment
web animations level 2the definition of 'keyframeeffectoptions.iterationcomposite' in that specification.
...
web animationsthe definition of 'keyframeeffect()' in that specification.
KeyframeEffectOptions - Web APIs
the keyframeeffectoptions dictionary, part of the
web animations api, is used by element.animate(), keyframeeffectreadonly() and keyframeeffect() to describe timing properties for animation effects.
... specifications specification status comment
web animations level 2the definition of 'keyframeeffectoptions' in that specification.
...
web animationsthe definition of 'keyframeeffectoptions' in that specification.
LocalFileSystem - Web APIs
so to request storage, you need to do something like the following: var requestedbytes = 1024*1024*10; // 10mb navigator.
webkitpersistentstorage.requestquota ( requestedbytes, function(grantedbytes) { window.requestfilesystem(persistent, grantedbytes, oninitfs, errorhandler); }, function(e) { console.log('error', e); } ); your user must grant your app permission to store data locally before your app can use persistent storage.
... another api, the quota management api, lets you query an origin's current quota usage and allocation using window.
webkitpersistentstorage.queryusageandquota().
... //taking care of the browser-specific prefix window.requestfilesystem = window.requestfilesystem || window.
webkitrequestfilesystem; // the first parameter defines the type of storage: persistent or temporary // next, set the size of space needed (in bytes) // initfs is the success callback // and the last one is the error callback // for denial of access and other errors.
MIDIMessageEvent - Web APIs
the midimessageevent interface of the
web midi api represents the event passed to the onmidimessage event handler of the midiinput interface.
... note: even though the
web midi api specifies a receivedtime property that returns a domhighrestimestamp, chrome (the only implementation at the time of writing) does not support that property since the basic event.timestamp property already returns a domhighrestimestamp in chrome.
... examples // printing all messages to console navigator.requestmidiaccess().then(midiaccess => { array.from(midiaccess.inputs).foreach(input => { input[1].onmidimessage = console.log; }) }); specifications specification status comment
web midi apithe definition of 'midimessageevent' in that specification.
MediaStreamAudioSourceNode() - Web APIs
the
web audio api's mediastreamaudiosourcenode() constructor creates and returns a new mediastreamaudiosourcenode object which uses the first audio track of a given mediastream as its source.
... // define variables var audioctx = new (window.audiocontext || window.
webkitaudiocontext)(); // getusermedia block - grab stream // put it into a mediastreamaudiosourcenode if (navigator.mediadevices.getusermedia) { navigator.mediadevices.getusermedia ( // constraints: audio and video for this app { audio: true, video: false }).then(function(stream) { var options = { mediastream : stream } var s...
...ource = new mediastreamaudiosourcenode(audioctx, options); source.connect(audioctx.destination); }).catch(function(err) { console.log('the following gum error occured: ' + err); }); } else { console.log('new getusermedia not supported on your browser!'); } specifications specification status comment
web audio apithe definition of 'mediastreamaudiosourcenode()' in that specification.
MediaStreamTrackAudioSourceNode() - Web APIs
the
web audio api's mediastreamtrackaudiosourcenode() constructor creates and returns a new mediastreamtrackaudiosourcenode object whose audio is taken from the mediastreamtrack specified in the given options object.
... let audioctx = new (window.audiocontext || window.
webkitaudiocontext)(); if (navigator.mediadevices.getusermedia) { navigator.mediadevices.getusermedia ( { audio: true, video: false }).then(function(stream) { let options = { mediastreamtrack: stream.getaudiotracks()[0]; } let source = new mediastreamtrackaudiosourcenode(audioctx, options); source.connect(audioctx.destination); }).catch(func...
...tion(err) { console.log('the following gum error occured: ' + err); }); } else { console.log('new getusermedia not supported on your browser!'); } specifications specification status comment
web audio apithe definition of 'mediastreamtrackaudiosourcenode()' in that specification.
Recording a media element - Web APIs
ue }).then(stream => { preview.srcobject = stream; downloadbutton.href = stream; preview.capturestream = preview.capturestream || preview.mozcapturestream; return new promise(resolve => preview.onplaying = resolve); }).then(() => startrecording(preview.capturestream(), recordingtimems)) .then (recordedchunks => { let recordedblob = new blob(recordedchunks, { type: "video/
webm" }); recording.src = url.createobjecturl(recordedblob); downloadbutton.href = recording.src; downloadbutton.download = "recordedvideo.
webm"; log("successfully recorded " + recordedblob.size + " bytes of " + recordedblob.type + " media."); }) .catch(log); }, false); when a click event occurs, here's what happens: lines 2-4 navigator.mediadevices.getusermedia() is...
...the first thing we do is merge the chunks into a single blob whose mime type is "video/
webm" by taking advantage of the fact that the blob() constructor concatenates arrays of objects into one object.
...so by setting the download link's download attribute to "recordedvideo.
webm", we tell the browser that clicking the button should download a file named "recordedvideo.
webm" whose contents are the recorded video.
MediaStream Recording API - Web APIs
the mediastream recording api, sometimes simply referred to as the media recording api or the mediarecorder api, is closely affiliated with the media capture and streams api and the
webrtc api.
...var stream = canvas.capturestream(25); var recordedchunks = []; console.log(stream); var options = { mimetype: "video/
webm; codecs=vp9" }; mediarecorder = new mediarecorder(stream, options); mediarecorder.ondataavailable = handledataavailable; mediarecorder.start(); function handledataavailable(event) { console.log("data-available"); if (event.data.size > 0) { recordedchunks.push(event.data); console.log(recordedchunks); download(); } else { // ...
... } } function download() { var blob = new blob(recordedchunks, { type: "video/
webm" }); var url = url.createobjecturl(blob); var a = document.createelement("a"); document.body.appendchild(a); a.style = "display: none"; a.href = url; a.download = "test.
webm"; a.click(); window.url.revokeobjecturl(url); } // demo: to download after 9sec settimeout(event => { console.log("stopping"); mediarecorder.stop(); }, 9000); examining and controlling the recorder status you can also use the properties of the mediarecorder object to determine the state of the recording process, and its pause() and resume() methods to pause and resume recording of the source media.
Navigator.geolocation - Web APIs
the navigator.geolocation read-only property returns a geolocation object that gives
web content access to the location of the device.
... this allows a
web site or app to offer customized results based on the user's location.
... note: for security reasons, when a
web page tries to access location information, the user is notified and asked to grant permission.
Navigator.registerContentHandler() - Web APIs
allows
web sites to register themselves as possible handlers for content of a particular mime type.
... note:
web sites may only register content handlers for themselves.
... for security reasons, it's not possible for an extension or
web site to register content handlers targeting other sites.
Online and offline events - Web APIs
some browsers implement online/offline events from the whatwg
web applications 1.0 specification.
... overview in order to build a good offline-capable
web application, you need to know when your application is actually offline.
... references 'online/offline events' section from the whatwg
web applications 1.0 specification the bug tracking online/offline events implementation in firefox and a follow-up a simple test case an explanation of online/offline events ...
Network Information API - Web APIs
note: this feature is available in
web workers.
... var connection = navigator.connection || navigator.mozconnection || navigator.
webkitconnection; var type = connection.effectivetype; function updateconnectionstatus() { console.log("connection type changed from " + type + " to " + connection.effectivetype); type = connection.effectivetype; } connection.addeventlistener('change', updateconnectionstatus); preload large resources the connection object is useful for deciding whether to preload resources that take large amounts of bandwidth or memory.
... let preloadvideo = true; var connection = navigator.connection || navigator.mozconnection || navigator.
webkitconnection; if (connection) { if (connection.effectivetype === 'slow-2g') { preloadvideo = false; } } interfaces networkinformation provides information about the connection a device is using to communicate with the network and provides a means for scripts to be notified if the connection type changes.
NodeList.prototype.forEach() - Web APIs
specifications specification status comment
web idlthe definition of 'foreach' in that specification.
... desktopmobilechromeedgefirefoxinternet exploreroperasafariandroid
webviewchrome for androidfirefox for androidopera for androidsafari on iossamsung internetforeachchrome full support 51edge full support 16firefox full support 50ie no support noopera full support 38safari ...
... full support 10
webview android full support 51chrome android full support 51firefox android full support 50opera android full support 41safari ios full support 10samsung internet android full support 5.0legend full support full support no support no support ...
Notification.close() - Web APIs
note: this feature is available in
web workers.
...the user already read the notification on the
webpage in the case of a messaging app or the following song is already playing in a music app).
...at the end of the function, it also calls close() inside a addeventlistener() function to remove the notification when the relevant content has been read on the
webpage.
OES_vertex_array_object.createVertexArrayOES() - Web APIs
the oes_vertex_array_object.createvertexarrayoes() method of the
webgl api creates and initializes a
webglvertexarrayobject object that represents a vertex array object (vao) pointing to vertex array data and which provides names for different sets of vertex data.
... syntax
webglvertexarrayobjectoes ext.createvertexarrayoes(); parameters none.
... return value a
webglvertexarrayobject representing a vertex array object (vao) which points to vertex array data.
OES_vertex_array_object.isVertexArrayOES() - Web APIs
the oes_vertex_array_object.isvertexarrayoes() method of the
webgl api returns true if the passed object is a
webglvertexarrayobject object.
... syntax glboolean ext.isvertexarrayoes(arrayobject); parameters arrayobject a
webglvertexarrayobject (vao) object to test.
... return value a glboolean indicating whether the given object is a
webglvertexarrayobject object (true) or not (false).
OfflineAudioCompletionEvent.renderedBuffer - Web APIs
specifications specification status comment
web audio apithe definition of 'renderedbuffer' in that specification.
... desktopmobilechromeedgefirefoxinternet exploreroperasafariandroid
webviewchrome for androidfirefox for androidopera for androidsafari on iossamsung internetrenderedbufferchrome full support 14edge full support 12firefox full support 25ie no support noopera full support 15safari full supp...
...ort 6
webview android full support yeschrome android full support 18firefox android full support 26opera android full support 14safari ios full support yessamsung internet android full support 1.0legend full support full support no support no support ...
OfflineAudioContext - Web APIs
<div id="interfacediagram" style="display: inline-block; position: relative; width: 100%; padding-bottom: 11.666666666666666%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 70" preserveaspectratio="xminymin meet"><a xlink:href="/docs/
web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="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="2...
...5" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/
web/api/audiocontext" target="_top"><rect x="151" y="1" width="120" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="211" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">audiocontext</text></a><polyline points="271,25 281,20 281,30 271,25" stroke="#d4dde4" fill="none"/><line x1="281" y1="25" x2="311" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/
web/api/offlineaudiocontext" target="_top"><rect x="311" y="1" width="190" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="406" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-...
... { song.start(); } }).catch(function(err) { console.log('rendering failed: ' + err); // note: the promise should reject when startrendering is called a second time on an offlineaudiocontext }); }); } request.send(); } // run getdata to start the process off getdata(); specifications specification status comment
web audio apithe definition of 'offlineaudiocontext' in that specification.
PannerNode - Web APIs
this is why these values are not marked read only, which is how they appear in the
webidl.
... // set up listener and panner position information var width = window.innerwidth; var height = window.innerheight; var xpos = math.floor(width/2); var ypos = math.floor(height/2); var zpos = 295; // define other variables var audiocontext = window.audiocontext || window.
webkitaudiocontext; var audioctx = new audiocontext(); var panner = audioctx.createpanner(); panner.panningmodel = 'hrtf'; panner.distancemodel = 'inverse'; panner.refdistance = 1; panner.maxdistance = 10000; panner.rollofffactor = 1; panner.coneinnerangle = 360; panner.coneouterangle = 0; panner.coneoutergain = 0; if(panner.orientationx) { panner.orientationx.setvalueattime(1, audioctx.currentti...
... specifications specification status comment
web audio apithe definition of 'pannernode' in that specification.
PaymentAddress.toJSON() - Web APIs
specifications specification status comment
web idlthe definition of 'tojson()' in that specification.
... desktopmobilechromeedgefirefoxinternet exploreroperasafariandroid
webviewchrome for androidfirefox for androidopera for androidsafari on iossamsung internettojson()chrome full support 61disabled full support 61disabled disabled from version 61: this feature is behind the #
web-payments preference (needs to be set to enabled).
...to change preferences in firefox, visit about:config.ie no support noopera no support nosafari full support yes
webview android no support nochrome android full support 61disabled full support 61disabled disabled from version 61: this feature is behind the #
web-payments preference (needs to be set to enabled).
Performance.timeOrigin - Web APIs
note: this feature is available in
web workers.
... desktopmobilechromeedgefirefoxinternet exploreroperasafariandroid
webviewchrome for androidfirefox for androidopera for androidsafari on iossamsung internettimeorigin experimentalchrome full support 62edge full support 16firefox full support 53ie ?
... opera full support 49safari no support no
webview android full support 62chrome android full support 62firefox android full support 53opera android full support 46safari ios no support nosamsung internet android full support 8.0legend full support full support no support no support ...
PerformancePaintTiming - Web APIs
the performancepainttiming interface of the paint timing provides timing information about "paint" (also called "render") operations during
web page construction.
... <div id="interfacediagram" style="display: inline-block; position: relative; width: 100%; padding-bottom: 11.666666666666666%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 70" preserveaspectratio="xminymin meet"><a xlink:href="/docs/
web/api/performanceentry" target="_top"><rect x="1" y="1" width="160" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="81" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">performanceentry</text></a><polyline points="161,25 171,20 171,30 161,25" stroke="#d4dde4" fill="none"/><line x1="...
...171" y1="25" x2="201" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/
web/api/performancepainttiming" target="_top"><rect x="201" y="1" width="220" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="311" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">performancepainttiming</text></a></svg></div> a:hover text { fill: #0095dd; pointer-events: all;} properties this interface has no properties but it extends the following performanceentry properties (for "paint" performance entry types) by qualifying and constraining the properties as follows: performanceentry.entrytype returns "paint".
PerformanceTiming.domInteractive - Web APIs
this property can be used to measure the speed of loading
web sites that users feels.
... nevertheless there are a few caveats that happens if scripts are blocking rendering and not loaded asynchronously or with custom
web fonts.
... check if you are in one of these cases before using this property as a proxy for the user experience of a
web site's speed of loading.
Using the Performance API - Web APIs
a fundamental requirement of
web performance is a precise and consistent definition of time.
...
web performance interfaces are defined in a suite of standards.
...other
web performance guides (listed in the see also section) describe how to use additional methods and properties of the performance interface.
Using the Permissions API - Web APIs
let's face it, permissions on the
web are a necessary evil, and they are not much fun to deal with as developers.
... the only two apis currently recognized by the permissions api in chrome are geolocation and notification, with firefox also recognizing push and
webmidi.
... function revokepermission() { navigator.permissions.revoke({name:'geolocation'}).then(function(result) { report(result.state); }); } the revoke() function has been disabled by default starting in firefox 51, since its design has been brought into question in the
web applications security working group.
Pointer events - Web APIs
much of today's
web content assumes the user's pointing device will be a mouse.
...having a single event model for pointers can simplify creating
web sites and applications and provide a good user experience regardless of the user's hardware.
... #target { touch-action: pan-x; } compatibility with mouse events although the pointer event interfaces enable applications to create enhanced user experiences on pointer enabled devices, the reality is the vast majority of today's
web content is designed to only work with mouse input.
ProcessingInstruction - Web APIs
<div id="interfacediagram" style="display: inline-block; position: relative; width: 100%; padding-bottom: 10%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 700 70" preserveaspectratio="xminymin meet"><a xlink:href="/docs/
web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="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="2...
...5" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/
web/api/node" target="_top"><rect x="151" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="188.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">node</text></a><polyline points="226,25 236,20 236,30 226,25" stroke="#d4dde4" fill="none"/><line x1="236" y1="25" x2="266" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/
web/api/characterdata" target="_top"><rect x="266" y="1" width="130" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="331" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">charac...
...terdata</text></a><polyline points="396,25 406,20 406,30 396,25" stroke="#d4dde4" fill="none"/><line x1="406" y1="25" x2="436" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/
web/api/processinginstruction" target="_top"><rect x="436" y="1" width="210" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="541" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">processinginstruction</text></a></svg></div> a:hover text { fill: #0095dd; pointer-events: all;} properties target (domstring) read only a name identifying the application to which the instruction is targeted, specification specification status comment domthe definition of 'processingin...
PushManager.hasPermission() - Web APIs
the pushmanager.haspermission() method of the pushmanager interface returns a promise that resolves to the pushpermissionstatus of the requesting
webapp, which will be one of granted, denied, or default.
... desktopmobilechromeedgefirefoxinternet exploreroperasafariandroid
webviewchrome for androidfirefox for androidopera for androidsafari on iossamsung internethaspermission experimentalchrome full support 42edge full support 16disabled full support 16disabled disabled from version 16: this feature is behind the enable service workers ...
... 44notes full support 44notes notes extended support releases (esr) before firefox 78 esr do not support service workers and the push api.ie no support noopera full support 29safari no support no
webview android no support nochrome android full support 42firefox android full support 48notes full support 48notes notes push enabled by default.opera android full support 29s...
PushSubscription.getKey() - Web APIs
auth: an authentication secret, as described in message encryption for
web push.
... desktopmobilechromeedgefirefoxinternet exploreroperasafariandroid
webviewchrome for androidfirefox for androidopera for androidsafari on iossamsung internetgetkey()chrome full support 42edge full support 16firefox full support 44notes full support 44notes notes extended support releases ...
...(esr) before firefox 78 esr do not support service workers and the push api.ie no support noopera full support 29safari no support no
webview android no support nochrome android full support 42firefox android full support 48opera android full support 29safari ios no support nosamsung internet android full support 4.0legend full support full suppo...
RTCDTMFSender: tonechange event - Web APIs
the tonechange event is sent to an rtcdtmfsender by the
webrtc api to indicate when dtmf tones previously queued for sending (by calling rtcdtmfsender.insertdtmf()) begin and end.
... } document.getelementbyid("playingtone").innertext = tone; }, false); you can also just set the ontonechange event handler property directly: dtmfsender.ontonechange = function( ev ) { let tone = ev.tone; if (tone === "") { tone = "<none>" } document.getelementbyid("playingtone").innertext = tone; }; specifications specification status comment
webrtc 1.0: real-time communication between browsersthe definition of 'tonechange' in that specification.
... candidate recommendation definition for the
webrtc api ...
RTCDataChannel.id - Web APIs
in early versions of the
webrtc specification, this property's name was stream.
...additionally, known implementations of
webrtc use the same id on both peers.
... example var pc = new rtcpeerconnection(); var dc = pc.createdatachannel("my channel"); console.log("channel id: " + dc.id); specifications specification status comment
webrtc 1.0: real-time communication between browsersthe definition of 'rtcdatachannel.id' in that specification.
RTCDataChannel.send() - Web APIs
this will get less complicated over time, but for now, if you have questions, see understanding message size limits in using
webrtc data channels.
...for more information about message size restrictions, see understanding message size limits in using
webrtc data channels.
... var pc = new rtcpeerconnection(); var dc = pc.createdatachannel("backchannel"); function sendmessage(msg) { let obj = { "message": msg, "timestamp": new date() } dc.send(json.stringify(obj)); } specifications specification status comment
webrtc 1.0: real-time communication between browsersthe definition of 'rtcdatachannel.send()' in that specification.
RTCDataChannel - Web APIs
values allowed by the
websocket.binarytype property are also permitted here: "blob" if blob objects are being used or "arraybuffer" if arraybuffer objects are being used.
... read only the read-only rtcdatachannel property maxretransmits returns the maximum number of times the browser should try to retransmit a message before giving up, as set when the data channel was created, or null, which indicates that there is no maximum.negotiated read only the read-only rtcdatachannel property negotiated indicates whether the rtcdatachannel's connection was negotiated by the
web app (true) or by the
webrtc layer (false).ordered read only the read-only rtcdatachannel property ordered indicates whether or not the data channel guarantees in-order delivery of messages; the default is true, which indicates that the data channel is indeed ordered.protocol read only the read-only rtcdatachannel property protocol returns a domstring containing the name of the subprotocol in ...
... example var pc = new rtcpeerconnection(); var dc = pc.createdatachannel("my channel"); dc.onmessage = function (event) { console.log("received: " + event.data); }; dc.onopen = function () { console.log("datachannel open"); }; dc.onclose = function () { console.log("datachannel close"); }; specifications specification status comment
webrtc 1.0: real-time communication between browsersthe definition of 'rtcdatachannel' in that specification.
RTCError - Web APIs
the rtcerror interface describes an error which has occurred while handling
webrtc operations.
... properties in addition to the properties defined by the parent interface, domexception, rtcerror includes the following properties: errordetail read only a domstring specifying the
webrtc-specific error code identifying the type of error that occurred.
...you can also use the rtcdatachannel object's onerror event handler property, like this: datachannel.onerror = (event) => { let error = event.error; /* and so forth */ }; specifications specification status comment
webrtc 1.0: real-time communication between browsersthe definition of 'rtcerror' in that specification.
RTCErrorEvent.error - Web APIs
syntax let errorinfo = rtcerrorevent.error; value an rtcerror object whose properties provide details about the error which has occurred in the context of a
webrtc operation.
...additional properties defined by rtcerror are: errordetail read only a domstring specifying the
webrtc-specific error code identifying the type of error that occurred.
...you can also use the rtcdatachannel object's onerror event handler property, like this: datachannel.onerror = (event) => { let error = event.error; /* and so forth */ }; specifications specification status comment
webrtc 1.0: real-time communication between browsersthe definition of 'rtcerrorevent.error' in that specification.
RTCErrorEvent - Web APIs
the
webrtc api's rtcerrorevent interface represents an error sent to a
webrtc object.
... description there are other data types used for error events in
webrtc, as needed for errors with special information sharing requirements.
... specifications specification status comment
webrtc 1.0: real-time communication between browsersthe definition of 'rtcerrorevent' in that specification.
RTCIceCandidateInit - Web APIs
the
webrtc api's rtcicecandidateinit dictionary, which contains the information needed to fundamentally describe an rtcicecandidate.
...this string is generated by
webrtc at the beginning of the session, and at least 24 bits worth of the string contain random data.
... specifications specification status comment
webrtc 1.0: real-time communication between browsersthe definition of 'rtcicecandidateinit' in that specification.
RTCIceCandidatePairStats.nominated - Web APIs
the rtcicecandidatepairstats property nominated specifies whether or not the candidate pair described by the underlying rtcicecandidatepair has been nominated to be used as the configuration for the
webrtc connection.
... syntax nominated = rtcicecandidatepairstats.nominated; value a boolean value which is set to true by the ice layer if the controlling user agent has indicated that the candidate pair should be used to configure the
webrtc connection between the two peers.
... specifications specification status comment identifiers for
webrtc's statistics apithe definition of 'rtcicecandidatepairstats.nominated' in that specification.
RTCIceCandidatePairStats.priority - Web APIs
the higher the value, the more likely the
webrtc layer is to select the candidate pair when the time comes to establish (or re-establish) a connection between the two peers.
...the higher this value, the better the
webrtc layer thinks this pair of candidates is compared to the others, and the more likely a pair is to be selelcted for use.
... specifications specification status comment identifiers for
webrtc's statistics apithe definition of 'rtcicecandidatepairstats.priority' in that specification.
RTCIceCandidatePairStats - Web APIs
the
webrtc rtcicecandidatepairstats dictionary reports statistics which provide insight into the quality and performance of an rtcpeerconnection while connected and configured as described by the specified pair of ice candidates.
...for more information, see ice restart in lifetime of a
webrtc session.
... specifications specification status comment identifiers for
webrtc's statistics apithe definition of 'rtcicecandidatepairstats' in that specification.
RTCIceCandidateStats.priority - Web APIs
during ice negotiation while setting up a
webrtc peer connection, the priority values reported to the remote peer by a user agent are used to determine which candidates are considered "more desirable".
... determining priority the ice specification describes how user agents and other software using
webrtc should calculate the priority.
... specifications specification status comment identifiers for
webrtc's statistics apithe definition of 'rtcicecandidatestats.port' in that specification.
RTCIceCredentialType - Web APIs
the
webrtc api's rtcicecredentialtype enumerated string type defines the authentication method used to gain access to an ice server identified by an rtciceserver object.
... obsolete values the following values are no longer part of the
webrtc specification, but were in the past.
... specifications specification status comment
webrtc 1.0: real-time communication between browsersthe definition of 'rtcicecredentialtype' in that specification.
RTCPeerConnection.addIceCandidate() - Web APIs
when a
web site or app using rtcpeerconnection receives a new ice candidate from the remote peer over its signaling channel, it delivers the newly-received candidate to the browser's ice agent by calling rtcpeerconnection.addicecandidate().
...this is covered in more detail in the articles
webrtc connectivity and signaling and video calling.
... specifications specification status comment
webrtc 1.0: real-time communication between browsersthe definition of 'rtcpeerconnection.addicecandidate()' in that specification.
RTCPeerConnection.addStream() - Web APIs
syntax rtcpeerconnection.addstream(mediastream); parameters mediastream a mediastream object indicating the stream to add to the
webrtc peer connection.
...you can write
web compatible code using feature detection instead: // add a track to a stream and the peer connection said stream was added to: stream.addtrack(track); if (pc.addtrack) { pc.addtrack(track, stream); } else { // if you have code listening for negotiationneeded events: settimeout(() => pc.dispatchevent(new event('negotiationneeded'))); } // remove a track from a stream and the peer connectio...
...n said stream was added to: stream.removetrack(track); if (pc.removetrack) { pc.removetrack(pc.getsenders().find(sender => sender.track == track)); } else { // if you have code listening for negotiationneeded events: settimeout(() => pc.dispatchevent(new event('negotiationneeded'))); } specifications specification status comment
webrtc 1.0: real-time communication between browsersthe definition of 'rtcpeerconnection.addstream()' in that specification.
RTCPeerConnection.addTrack() - Web APIs
track = ev => { if (ev.streams && ev.streams[0]) { videoelem.srcobject = ev.streams[0]; } else { let inboundstream = new mediastream(ev.track); videoelem.srcobject = inboundstream; } } associating tracks with specific streams by specifying a stream and allowing rtcpeerconnection to create streams for you, the streams' track associations are automatically managed for you by the
webrtc infrastructure.
...once that succeeds, it uses mediadevices.getusermedia() to obtain access to the local
webcam and microphone.
... specifications specification status comment
webrtc 1.0: real-time communication between browsersthe definition of 'rtcpeerconnection.addtrack()' in that specification.
RTCPeerConnection.createAnswer() - Web APIs
the createanswer() method on the rtcpeerconnection interface creates an sdp answer to an offer received from a remote peer during the offer/answer negotiation of a
webrtc connection.
...in this case, a
websocket connection is used to send a json message with a type field with the value "video-answer" to the other peer, carrying the answer to the device which sent the offer to connect.
... specifications specification status comment
webrtc 1.0: real-time communication between browsersthe definition of 'createanswer()' in that specification.
RTCPeerConnection: icecandidateerror event - Web APIs
the
webrtc api event icecandidateerror is sent to an rtcpeerconnection if an error occurs while performing ice negotiations through a stun or turn server.
...there is one additional,
webrtc-specific, error which lies outside the valid stun error code range: 701.
... specifications specification status comment
webrtc 1.0: real-time communication between browsersthe definition of 'icecandidateerror' in that specification.
RTCPeerConnection.restartIce() - Web APIs
the
webrtc api's rtcpeerconnection interface offers the restartice() method to allow a
web application to easily request that ice candidate gathering be redone on both ends of the connection.
... for details about how ice restart works, see ice restart in lifetime of a
webrtc session and rfc 5245, section 9.1.1.1: ice specification.
... specifications specification status comment
webrtc 1.0: real-time communication between browsersthe definition of 'rtcpeerconnection.restartice()' in that specification.
RTCRtpCodecCapability - Web APIs
the
webrtc api's rtcrtpcodeccapability dictionary provides information describing the capabilities of a single media codec.
...see codecs used by
webrtc for details about potential codecs that might be referenced here.
... examples tbd specifications specification status comment
webrtc 1.0: real-time communication between browsersthe definition of 'rtcrtpcodeccapability' in that specification.
RTCRtpContributingSource.source - Web APIs
specifications specification status comment
webrtc 1.0: real-time communication between browsersthe definition of 'source' in that specification.
... desktopmobilechromeedgefirefoxinternet exploreroperasafariandroid
webviewchrome for androidfirefox for androidopera for androidsafari on iossamsung internetsourcechrome full support 59edge full support ≤79firefox full support 59disabled full support 59disabled disabled from version 59: this feature is behind the media.peerconnection.
...
webview android full support 59chrome android full support 59firefox android full support 59disabled full support 59disabled disabled from version 59: this feature is behind the media.peerconnection.rtpsourcesapi.enable preference (needs to be set to true).
RTCRtpReceiver.track - Web APIs
specifications specification status comment
webrtc 1.0: real-time communication between browsersthe definition of 'track' in that specification.
... desktopmobilechromeedgefirefoxinternet exploreroperasafariandroid
webviewchrome for androidfirefox for androidopera for androidsafari on iossamsung internettrackchrome full support 59edge full support 12firefox full support yesie no support noopera full support 46safari full s...
...upport yes
webview android full support 59chrome android full support 59firefox android full support yesopera android full support 43safari ios full support yessamsung internet android full support 7.0legend full support full support no support no support ...
RTCRtpSendParameters - Web APIs
the
webrtc api's rtcrtpsendparameters dictionary is used to specify the parameters for an rtcrtpsender when calling its setparameters() method.
... degradationpreference specifies the preferred way the
webrtc layer should handle optimizing bandwidth against quality in constrained-bandwidth situations; the value comes from the rtcdegradationpreference enumerated string type, and the default is balanced.
... specifications specification status comment
webrtc 1.0: real-time communication between browsersthe definition of 'rtcrtpsendparameters' in that specification.
SVGAnimationElement - Web APIs
<div id="interfacediagram" style="display: inline-block; position: relative; width: 100%; padding-bottom: 23.333333333333332%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 140" preserveaspectratio="xminymin meet"><a xlink:href="/docs/
web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="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="2...
...5" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/
web/api/node" target="_top"><rect x="151" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="188.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">node</text></a><polyline points="226,25 236,20 236,30 226,25" stroke="#d4dde4" fill="none"/><line x1="236" y1="25" x2="266" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/
web/api/element" target="_top"><rect x="266" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="303.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">element</te...
...xt></a><polyline points="341,25 351,20 351,30 341,25" stroke="#d4dde4" fill="none"/><line x1="351" y1="25" x2="381" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/
web/api/svgelement" target="_top"><rect x="381" y="1" width="100" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="431" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">svgelement</text></a><polyline points="481,25 491,20 491,30 481,25" stroke="#d4dde4" fill="none"/><line x1="491" y1="25" x2="499" y2="25" stroke="#d4dde4"/><line x1="499" y1="25" x2="499" y2="90" stroke="#d4dde4"/><line x1="499" y1="90" x2="482" y2="90" stroke="#d4dde4"/><a xlink:href="/docs/
web/api/svganimationelement" target="_top"><rect x="291" y...
SVGClipPathElement - Web APIs
<div id="interfacediagram" style="display: inline-block; position: relative; width: 100%; padding-bottom: 23.333333333333332%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 140" preserveaspectratio="xminymin meet"><a xlink:href="/docs/
web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="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="2...
...5" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/
web/api/node" target="_top"><rect x="151" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="188.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">node</text></a><polyline points="226,25 236,20 236,30 226,25" stroke="#d4dde4" fill="none"/><line x1="236" y1="25" x2="266" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/
web/api/element" target="_top"><rect x="266" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="303.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">element</te...
...xt></a><polyline points="341,25 351,20 351,30 341,25" stroke="#d4dde4" fill="none"/><line x1="351" y1="25" x2="381" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/
web/api/svgelement" target="_top"><rect x="381" y="1" width="100" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="431" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">svgelement</text></a><polyline points="481,25 491,20 491,30 481,25" stroke="#d4dde4" fill="none"/><line x1="491" y1="25" x2="499" y2="25" stroke="#d4dde4"/><line x1="499" y1="25" x2="499" y2="90" stroke="#d4dde4"/><line x1="499" y1="90" x2="482" y2="90" stroke="#d4dde4"/><a xlink:href="/docs/
web/api/svgclippathelement" target="_top"><rect x="301" y=...
SVGComponentTransferFunctionElement - Web APIs
<div id="interfacediagram" style="display: inline-block; position: relative; width: 100%; padding-bottom: 23.333333333333332%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 140" preserveaspectratio="xminymin meet"><a xlink:href="/docs/
web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="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="2...
...5" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/
web/api/node" target="_top"><rect x="151" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="188.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">node</text></a><polyline points="226,25 236,20 236,30 226,25" stroke="#d4dde4" fill="none"/><line x1="236" y1="25" x2="266" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/
web/api/element" target="_top"><rect x="266" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="303.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">element</te...
...xt></a><polyline points="341,25 351,20 351,30 341,25" stroke="#d4dde4" fill="none"/><line x1="351" y1="25" x2="381" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/
web/api/svgelement" target="_top"><rect x="381" y="1" width="100" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="431" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">svgelement</text></a><polyline points="481,25 491,20 491,30 481,25" stroke="#d4dde4" fill="none"/><line x1="491" y1="25" x2="499" y2="25" stroke="#d4dde4"/><line x1="499" y1="25" x2="499" y2="90" stroke="#d4dde4"/><line x1="499" y1="90" x2="482" y2="90" stroke="#d4dde4"/><a xlink:href="/docs/
web/api/svgcomponenttransferfunctionelement" target="_top"...
SVGCursorElement - Web APIs
<div id="interfacediagram" style="display: inline-block; position: relative; width: 100%; padding-bottom: 23.333333333333332%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 140" preserveaspectratio="xminymin meet"><a xlink:href="/docs/
web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="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="2...
...5" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/
web/api/node" target="_top"><rect x="151" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="188.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">node</text></a><polyline points="226,25 236,20 236,30 226,25" stroke="#d4dde4" fill="none"/><line x1="236" y1="25" x2="266" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/
web/api/element" target="_top"><rect x="266" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="303.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">element</te...
...xt></a><polyline points="341,25 351,20 351,30 341,25" stroke="#d4dde4" fill="none"/><line x1="351" y1="25" x2="381" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/
web/api/svgelement" target="_top"><rect x="381" y="1" width="100" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="431" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">svgelement</text></a><polyline points="481,25 491,20 491,30 481,25" stroke="#d4dde4" fill="none"/><line x1="491" y1="25" x2="499" y2="25" stroke="#d4dde4"/><line x1="499" y1="25" x2="499" y2="90" stroke="#d4dde4"/><line x1="499" y1="90" x2="482" y2="90" stroke="#d4dde4"/><a xlink:href="/docs/
web/api/svgcursorelement" target="_top"><rect x="321" y="6...
SVGDescElement - Web APIs
<div id="interfacediagram" style="display: inline-block; position: relative; width: 100%; padding-bottom: 23.333333333333332%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 140" preserveaspectratio="xminymin meet"><a xlink:href="/docs/
web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="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/node" target="_top"><rect x="151" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="188.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">node</text></a><polyline points="226,25 236,20 236,30 226,25" stroke="#d4dde4" fill="none"/><line x1="236" y1="25" x2="266" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/
web/api/element" target="_top"><rect x="266" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="303.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">element</text></a...
...><polyline points="341,25 351,20 351,30 341,25" stroke="#d4dde4" fill="none"/><line x1="351" y1="25" x2="381" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/
web/api/svgelement" target="_top"><rect x="381" y="1" width="100" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="431" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">svgelement</text></a><polyline points="481,25 491,20 491,30 481,25" stroke="#d4dde4" fill="none"/><line x1="491" y1="25" x2="499" y2="25" stroke="#d4dde4"/><line x1="499" y1="25" x2="499" y2="90" stroke="#d4dde4"/><line x1="499" y1="90" x2="482" y2="90" stroke="#d4dde4"/><a xlink:href="/docs/
web/api/svgdescelement" target="_top"><rect x="341" y="65" width...
SVGElement - Web APIs
<div id="interfacediagram" style="display: inline-block; position: relative; width: 100%; padding-bottom: 11.666666666666666%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 70" preserveaspectratio="xminymin meet"><a xlink:href="/docs/
web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="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="2...
...5" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/
web/api/node" target="_top"><rect x="151" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="188.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">node</text></a><polyline points="226,25 236,20 236,30 226,25" stroke="#d4dde4" fill="none"/><line x1="236" y1="25" x2="266" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/
web/api/element" target="_top"><rect x="266" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="303.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">element</te...
...xt></a><polyline points="341,25 351,20 351,30 341,25" stroke="#d4dde4" fill="none"/><line x1="351" y1="25" x2="381" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/
web/api/svgelement" target="_top"><rect x="381" y="1" width="100" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="431" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">svgelement</text></a></svg></div> a:hover text { fill: #0095dd; pointer-events: all;} properties also inherits properties from: documentandelementeventhandlers, element, elementcssinlinestyle, globaleventhandlers, htmlorforeignelement, svgelementinstance svgelement.datasetread only a domstringmap object which provides a list of key/v...
SVGFEBlendElement - Web APIs
<div id="interfacediagram" style="display: inline-block; position: relative; width: 100%; padding-bottom: 23.333333333333332%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 140" preserveaspectratio="xminymin meet"><a xlink:href="/docs/
web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="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="2...
...5" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/
web/api/node" target="_top"><rect x="151" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="188.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">node</text></a><polyline points="226,25 236,20 236,30 226,25" stroke="#d4dde4" fill="none"/><line x1="236" y1="25" x2="266" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/
web/api/element" target="_top"><rect x="266" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="303.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">element</te...
...xt></a><polyline points="341,25 351,20 351,30 341,25" stroke="#d4dde4" fill="none"/><line x1="351" y1="25" x2="381" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/
web/api/svgelement" target="_top"><rect x="381" y="1" width="100" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="431" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">svgelement</text></a><polyline points="481,25 491,20 491,30 481,25" stroke="#d4dde4" fill="none"/><line x1="491" y1="25" x2="499" y2="25" stroke="#d4dde4"/><line x1="499" y1="25" x2="499" y2="90" stroke="#d4dde4"/><line x1="499" y1="90" x2="482" y2="90" stroke="#d4dde4"/><a xlink:href="/docs/
web/api/svgfeblendelement" target="_top"><rect x="311" y="...
SVGFEColorMatrixElement - Web APIs
<div id="interfacediagram" style="display: inline-block; position: relative; width: 100%; padding-bottom: 23.333333333333332%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 140" preserveaspectratio="xminymin meet"><a xlink:href="/docs/
web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="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="2...
...5" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/
web/api/node" target="_top"><rect x="151" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="188.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">node</text></a><polyline points="226,25 236,20 236,30 226,25" stroke="#d4dde4" fill="none"/><line x1="236" y1="25" x2="266" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/
web/api/element" target="_top"><rect x="266" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="303.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">element</te...
...xt></a><polyline points="341,25 351,20 351,30 341,25" stroke="#d4dde4" fill="none"/><line x1="351" y1="25" x2="381" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/
web/api/svgelement" target="_top"><rect x="381" y="1" width="100" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="431" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">svgelement</text></a><polyline points="481,25 491,20 491,30 481,25" stroke="#d4dde4" fill="none"/><line x1="491" y1="25" x2="499" y2="25" stroke="#d4dde4"/><line x1="499" y1="25" x2="499" y2="90" stroke="#d4dde4"/><line x1="499" y1="90" x2="482" y2="90" stroke="#d4dde4"/><a xlink:href="/docs/
web/api/svgfecolormatrixelement" target="_top"><rect x="25...
SVGFEComponentTransferElement - Web APIs
<div id="interfacediagram" style="display: inline-block; position: relative; width: 100%; padding-bottom: 23.333333333333332%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 140" preserveaspectratio="xminymin meet"><a xlink:href="/docs/
web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="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="2...
...5" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/
web/api/node" target="_top"><rect x="151" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="188.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">node</text></a><polyline points="226,25 236,20 236,30 226,25" stroke="#d4dde4" fill="none"/><line x1="236" y1="25" x2="266" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/
web/api/element" target="_top"><rect x="266" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="303.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">element</te...
...xt></a><polyline points="341,25 351,20 351,30 341,25" stroke="#d4dde4" fill="none"/><line x1="351" y1="25" x2="381" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/
web/api/svgelement" target="_top"><rect x="381" y="1" width="100" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="431" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">svgelement</text></a><polyline points="481,25 491,20 491,30 481,25" stroke="#d4dde4" fill="none"/><line x1="491" y1="25" x2="499" y2="25" stroke="#d4dde4"/><line x1="499" y1="25" x2="499" y2="90" stroke="#d4dde4"/><line x1="499" y1="90" x2="482" y2="90" stroke="#d4dde4"/><a xlink:href="/docs/
web/api/svgfecomponenttransferelement" target="_top"><rect...
SVGFECompositeElement - Web APIs
<div id="interfacediagram" style="display: inline-block; position: relative; width: 100%; padding-bottom: 23.333333333333332%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 140" preserveaspectratio="xminymin meet"><a xlink:href="/docs/
web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="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="2...
...5" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/
web/api/node" target="_top"><rect x="151" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="188.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">node</text></a><polyline points="226,25 236,20 236,30 226,25" stroke="#d4dde4" fill="none"/><line x1="236" y1="25" x2="266" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/
web/api/element" target="_top"><rect x="266" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="303.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">element</te...
...xt></a><polyline points="341,25 351,20 351,30 341,25" stroke="#d4dde4" fill="none"/><line x1="351" y1="25" x2="381" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/
web/api/svgelement" target="_top"><rect x="381" y="1" width="100" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="431" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">svgelement</text></a><polyline points="481,25 491,20 491,30 481,25" stroke="#d4dde4" fill="none"/><line x1="491" y1="25" x2="499" y2="25" stroke="#d4dde4"/><line x1="499" y1="25" x2="499" y2="90" stroke="#d4dde4"/><line x1="499" y1="90" x2="482" y2="90" stroke="#d4dde4"/><a xlink:href="/docs/
web/api/svgfecompositeelement" target="_top"><rect x="271"...
SVGFEConvolveMatrixElement - Web APIs
<div id="interfacediagram" style="display: inline-block; position: relative; width: 100%; padding-bottom: 23.333333333333332%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 140" preserveaspectratio="xminymin meet"><a xlink:href="/docs/
web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="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="2...
...5" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/
web/api/node" target="_top"><rect x="151" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="188.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">node</text></a><polyline points="226,25 236,20 236,30 226,25" stroke="#d4dde4" fill="none"/><line x1="236" y1="25" x2="266" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/
web/api/element" target="_top"><rect x="266" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="303.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">element</te...
...xt></a><polyline points="341,25 351,20 351,30 341,25" stroke="#d4dde4" fill="none"/><line x1="351" y1="25" x2="381" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/
web/api/svgelement" target="_top"><rect x="381" y="1" width="100" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="431" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">svgelement</text></a><polyline points="481,25 491,20 491,30 481,25" stroke="#d4dde4" fill="none"/><line x1="491" y1="25" x2="499" y2="25" stroke="#d4dde4"/><line x1="499" y1="25" x2="499" y2="90" stroke="#d4dde4"/><line x1="499" y1="90" x2="482" y2="90" stroke="#d4dde4"/><a xlink:href="/docs/
web/api/svgfeconvolvematrixelement" target="_top"><rect x=...
SVGFEDiffuseLightingElement - Web APIs
<div id="interfacediagram" style="display: inline-block; position: relative; width: 100%; padding-bottom: 23.333333333333332%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 140" preserveaspectratio="xminymin meet"><a xlink:href="/docs/
web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="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="2...
...5" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/
web/api/node" target="_top"><rect x="151" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="188.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">node</text></a><polyline points="226,25 236,20 236,30 226,25" stroke="#d4dde4" fill="none"/><line x1="236" y1="25" x2="266" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/
web/api/element" target="_top"><rect x="266" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="303.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">element</te...
...xt></a><polyline points="341,25 351,20 351,30 341,25" stroke="#d4dde4" fill="none"/><line x1="351" y1="25" x2="381" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/
web/api/svgelement" target="_top"><rect x="381" y="1" width="100" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="431" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">svgelement</text></a><polyline points="481,25 491,20 491,30 481,25" stroke="#d4dde4" fill="none"/><line x1="491" y1="25" x2="499" y2="25" stroke="#d4dde4"/><line x1="499" y1="25" x2="499" y2="90" stroke="#d4dde4"/><line x1="499" y1="90" x2="482" y2="90" stroke="#d4dde4"/><a xlink:href="/docs/
web/api/svgfediffuselightingelement" target="_top"><rect x...
SVGFEDisplacementMapElement - Web APIs
<div id="interfacediagram" style="display: inline-block; position: relative; width: 100%; padding-bottom: 23.333333333333332%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 140" preserveaspectratio="xminymin meet"><a xlink:href="/docs/
web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="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="2...
...5" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/
web/api/node" target="_top"><rect x="151" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="188.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">node</text></a><polyline points="226,25 236,20 236,30 226,25" stroke="#d4dde4" fill="none"/><line x1="236" y1="25" x2="266" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/
web/api/element" target="_top"><rect x="266" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="303.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">element</te...
...xt></a><polyline points="341,25 351,20 351,30 341,25" stroke="#d4dde4" fill="none"/><line x1="351" y1="25" x2="381" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/
web/api/svgelement" target="_top"><rect x="381" y="1" width="100" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="431" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">svgelement</text></a><polyline points="481,25 491,20 491,30 481,25" stroke="#d4dde4" fill="none"/><line x1="491" y1="25" x2="499" y2="25" stroke="#d4dde4"/><line x1="499" y1="25" x2="499" y2="90" stroke="#d4dde4"/><line x1="499" y1="90" x2="482" y2="90" stroke="#d4dde4"/><a xlink:href="/docs/
web/api/svgfedisplacementmapelement" target="_top"><rect x...
SVGFEDistantLightElement - Web APIs
<div id="interfacediagram" style="display: inline-block; position: relative; width: 100%; padding-bottom: 23.333333333333332%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 140" preserveaspectratio="xminymin meet"><a xlink:href="/docs/
web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="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="2...
...5" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/
web/api/node" target="_top"><rect x="151" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="188.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">node</text></a><polyline points="226,25 236,20 236,30 226,25" stroke="#d4dde4" fill="none"/><line x1="236" y1="25" x2="266" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/
web/api/element" target="_top"><rect x="266" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="303.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">element</te...
...xt></a><polyline points="341,25 351,20 351,30 341,25" stroke="#d4dde4" fill="none"/><line x1="351" y1="25" x2="381" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/
web/api/svgelement" target="_top"><rect x="381" y="1" width="100" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="431" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">svgelement</text></a><polyline points="481,25 491,20 491,30 481,25" stroke="#d4dde4" fill="none"/><line x1="491" y1="25" x2="499" y2="25" stroke="#d4dde4"/><line x1="499" y1="25" x2="499" y2="90" stroke="#d4dde4"/><line x1="499" y1="90" x2="482" y2="90" stroke="#d4dde4"/><a xlink:href="/docs/
web/api/svgfedistantlightelement" target="_top"><rect x="2...
SVGFEDropShadowElement - Web APIs
<div id="interfacediagram" style="display: inline-block; position: relative; width: 100%; padding-bottom: 23.333333333333332%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 140" preserveaspectratio="xminymin meet"><a xlink:href="/docs/
web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="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="2...
...5" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/
web/api/node" target="_top"><rect x="151" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="188.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">node</text></a><polyline points="226,25 236,20 236,30 226,25" stroke="#d4dde4" fill="none"/><line x1="236" y1="25" x2="266" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/
web/api/element" target="_top"><rect x="266" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="303.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">element</te...
...xt></a><polyline points="341,25 351,20 351,30 341,25" stroke="#d4dde4" fill="none"/><line x1="351" y1="25" x2="381" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/
web/api/svgelement" target="_top"><rect x="381" y="1" width="100" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="431" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">svgelement</text></a><polyline points="481,25 491,20 491,30 481,25" stroke="#d4dde4" fill="none"/><line x1="491" y1="25" x2="499" y2="25" stroke="#d4dde4"/><line x1="499" y1="25" x2="499" y2="90" stroke="#d4dde4"/><line x1="499" y1="90" x2="482" y2="90" stroke="#d4dde4"/><a xlink:href="/docs/
web/api/svgfedropshadowelement" target="_top"><rect x="261...
SVGFEFloodElement - Web APIs
<div id="interfacediagram" style="display: inline-block; position: relative; width: 100%; padding-bottom: 23.333333333333332%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 140" preserveaspectratio="xminymin meet"><a xlink:href="/docs/
web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="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="2...
...5" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/
web/api/node" target="_top"><rect x="151" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="188.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">node</text></a><polyline points="226,25 236,20 236,30 226,25" stroke="#d4dde4" fill="none"/><line x1="236" y1="25" x2="266" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/
web/api/element" target="_top"><rect x="266" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="303.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">element</te...
...xt></a><polyline points="341,25 351,20 351,30 341,25" stroke="#d4dde4" fill="none"/><line x1="351" y1="25" x2="381" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/
web/api/svgelement" target="_top"><rect x="381" y="1" width="100" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="431" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">svgelement</text></a><polyline points="481,25 491,20 491,30 481,25" stroke="#d4dde4" fill="none"/><line x1="491" y1="25" x2="499" y2="25" stroke="#d4dde4"/><line x1="499" y1="25" x2="499" y2="90" stroke="#d4dde4"/><line x1="499" y1="90" x2="482" y2="90" stroke="#d4dde4"/><a xlink:href="/docs/
web/api/svgfefloodelement" target="_top"><rect x="311" y="...
SVGFEGaussianBlurElement - Web APIs
<div id="interfacediagram" style="display: inline-block; position: relative; width: 100%; padding-bottom: 23.333333333333332%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 140" preserveaspectratio="xminymin meet"><a xlink:href="/docs/
web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="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="2...
...5" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/
web/api/node" target="_top"><rect x="151" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="188.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">node</text></a><polyline points="226,25 236,20 236,30 226,25" stroke="#d4dde4" fill="none"/><line x1="236" y1="25" x2="266" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/
web/api/element" target="_top"><rect x="266" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="303.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">element</te...
...xt></a><polyline points="341,25 351,20 351,30 341,25" stroke="#d4dde4" fill="none"/><line x1="351" y1="25" x2="381" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/
web/api/svgelement" target="_top"><rect x="381" y="1" width="100" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="431" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">svgelement</text></a><polyline points="481,25 491,20 491,30 481,25" stroke="#d4dde4" fill="none"/><line x1="491" y1="25" x2="499" y2="25" stroke="#d4dde4"/><line x1="499" y1="25" x2="499" y2="90" stroke="#d4dde4"/><line x1="499" y1="90" x2="482" y2="90" stroke="#d4dde4"/><a xlink:href="/docs/
web/api/svgfegaussianblurelement" target="_top"><rect x="2...
SVGFEImageElement - Web APIs
<div id="interfacediagram" style="display: inline-block; position: relative; width: 100%; padding-bottom: 23.333333333333332%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 140" preserveaspectratio="xminymin meet"><a xlink:href="/docs/
web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="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="2...
...5" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/
web/api/node" target="_top"><rect x="151" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="188.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">node</text></a><polyline points="226,25 236,20 236,30 226,25" stroke="#d4dde4" fill="none"/><line x1="236" y1="25" x2="266" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/
web/api/element" target="_top"><rect x="266" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="303.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">element</te...
...xt></a><polyline points="341,25 351,20 351,30 341,25" stroke="#d4dde4" fill="none"/><line x1="351" y1="25" x2="381" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/
web/api/svgelement" target="_top"><rect x="381" y="1" width="100" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="431" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">svgelement</text></a><polyline points="481,25 491,20 491,30 481,25" stroke="#d4dde4" fill="none"/><line x1="491" y1="25" x2="499" y2="25" stroke="#d4dde4"/><line x1="499" y1="25" x2="499" y2="90" stroke="#d4dde4"/><line x1="499" y1="90" x2="482" y2="90" stroke="#d4dde4"/><a xlink:href="/docs/
web/api/svgfeimageelement" target="_top"><rect x="311" y="...
SVGFEMergeElement - Web APIs
<div id="interfacediagram" style="display: inline-block; position: relative; width: 100%; padding-bottom: 23.333333333333332%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 140" preserveaspectratio="xminymin meet"><a xlink:href="/docs/
web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="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="2...
...5" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/
web/api/node" target="_top"><rect x="151" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="188.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">node</text></a><polyline points="226,25 236,20 236,30 226,25" stroke="#d4dde4" fill="none"/><line x1="236" y1="25" x2="266" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/
web/api/element" target="_top"><rect x="266" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="303.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">element</te...
...xt></a><polyline points="341,25 351,20 351,30 341,25" stroke="#d4dde4" fill="none"/><line x1="351" y1="25" x2="381" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/
web/api/svgelement" target="_top"><rect x="381" y="1" width="100" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="431" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">svgelement</text></a><polyline points="481,25 491,20 491,30 481,25" stroke="#d4dde4" fill="none"/><line x1="491" y1="25" x2="499" y2="25" stroke="#d4dde4"/><line x1="499" y1="25" x2="499" y2="90" stroke="#d4dde4"/><line x1="499" y1="90" x2="482" y2="90" stroke="#d4dde4"/><a xlink:href="/docs/
web/api/svgfemergeelement" target="_top"><rect x="311" y="...
SVGFEMergeNodeElement - Web APIs
<div id="interfacediagram" style="display: inline-block; position: relative; width: 100%; padding-bottom: 23.333333333333332%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 140" preserveaspectratio="xminymin meet"><a xlink:href="/docs/
web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="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="2...
...5" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/
web/api/node" target="_top"><rect x="151" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="188.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">node</text></a><polyline points="226,25 236,20 236,30 226,25" stroke="#d4dde4" fill="none"/><line x1="236" y1="25" x2="266" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/
web/api/element" target="_top"><rect x="266" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="303.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">element</te...
...xt></a><polyline points="341,25 351,20 351,30 341,25" stroke="#d4dde4" fill="none"/><line x1="351" y1="25" x2="381" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/
web/api/svgelement" target="_top"><rect x="381" y="1" width="100" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="431" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">svgelement</text></a><polyline points="481,25 491,20 491,30 481,25" stroke="#d4dde4" fill="none"/><line x1="491" y1="25" x2="499" y2="25" stroke="#d4dde4"/><line x1="499" y1="25" x2="499" y2="90" stroke="#d4dde4"/><line x1="499" y1="90" x2="482" y2="90" stroke="#d4dde4"/><a xlink:href="/docs/
web/api/svgfemergenodeelement" target="_top"><rect x="271"...
SVGFEMorphologyElement - Web APIs
<div id="interfacediagram" style="display: inline-block; position: relative; width: 100%; padding-bottom: 23.333333333333332%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 140" preserveaspectratio="xminymin meet"><a xlink:href="/docs/
web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="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="2...
...5" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/
web/api/node" target="_top"><rect x="151" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="188.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">node</text></a><polyline points="226,25 236,20 236,30 226,25" stroke="#d4dde4" fill="none"/><line x1="236" y1="25" x2="266" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/
web/api/element" target="_top"><rect x="266" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="303.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">element</te...
...xt></a><polyline points="341,25 351,20 351,30 341,25" stroke="#d4dde4" fill="none"/><line x1="351" y1="25" x2="381" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/
web/api/svgelement" target="_top"><rect x="381" y="1" width="100" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="431" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">svgelement</text></a><polyline points="481,25 491,20 491,30 481,25" stroke="#d4dde4" fill="none"/><line x1="491" y1="25" x2="499" y2="25" stroke="#d4dde4"/><line x1="499" y1="25" x2="499" y2="90" stroke="#d4dde4"/><line x1="499" y1="90" x2="482" y2="90" stroke="#d4dde4"/><a xlink:href="/docs/
web/api/svgfemorphologyelement" target="_top"><rect x="261...
SVGFEOffsetElement - Web APIs
<div id="interfacediagram" style="display: inline-block; position: relative; width: 100%; padding-bottom: 23.333333333333332%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 140" preserveaspectratio="xminymin meet"><a xlink:href="/docs/
web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="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="2...
...5" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/
web/api/node" target="_top"><rect x="151" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="188.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">node</text></a><polyline points="226,25 236,20 236,30 226,25" stroke="#d4dde4" fill="none"/><line x1="236" y1="25" x2="266" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/
web/api/element" target="_top"><rect x="266" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="303.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">element</te...
...xt></a><polyline points="341,25 351,20 351,30 341,25" stroke="#d4dde4" fill="none"/><line x1="351" y1="25" x2="381" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/
web/api/svgelement" target="_top"><rect x="381" y="1" width="100" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="431" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">svgelement</text></a><polyline points="481,25 491,20 491,30 481,25" stroke="#d4dde4" fill="none"/><line x1="491" y1="25" x2="499" y2="25" stroke="#d4dde4"/><line x1="499" y1="25" x2="499" y2="90" stroke="#d4dde4"/><line x1="499" y1="90" x2="482" y2="90" stroke="#d4dde4"/><a xlink:href="/docs/
web/api/svgfeoffsetelement" target="_top"><rect x="301" y=...
SVGFEPointLightElement - Web APIs
<div id="interfacediagram" style="display: inline-block; position: relative; width: 100%; padding-bottom: 23.333333333333332%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 140" preserveaspectratio="xminymin meet"><a xlink:href="/docs/
web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="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="2...
...5" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/
web/api/node" target="_top"><rect x="151" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="188.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">node</text></a><polyline points="226,25 236,20 236,30 226,25" stroke="#d4dde4" fill="none"/><line x1="236" y1="25" x2="266" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/
web/api/element" target="_top"><rect x="266" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="303.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">element</te...
...xt></a><polyline points="341,25 351,20 351,30 341,25" stroke="#d4dde4" fill="none"/><line x1="351" y1="25" x2="381" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/
web/api/svgelement" target="_top"><rect x="381" y="1" width="100" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="431" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">svgelement</text></a><polyline points="481,25 491,20 491,30 481,25" stroke="#d4dde4" fill="none"/><line x1="491" y1="25" x2="499" y2="25" stroke="#d4dde4"/><line x1="499" y1="25" x2="499" y2="90" stroke="#d4dde4"/><line x1="499" y1="90" x2="482" y2="90" stroke="#d4dde4"/><a xlink:href="/docs/
web/api/svgfepointlightelement" target="_top"><rect x="261...
SVGFESpecularLightingElement - Web APIs
<div id="interfacediagram" style="display: inline-block; position: relative; width: 100%; padding-bottom: 23.333333333333332%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 140" preserveaspectratio="xminymin meet"><a xlink:href="/docs/
web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="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="2...
...5" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/
web/api/node" target="_top"><rect x="151" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="188.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">node</text></a><polyline points="226,25 236,20 236,30 226,25" stroke="#d4dde4" fill="none"/><line x1="236" y1="25" x2="266" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/
web/api/element" target="_top"><rect x="266" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="303.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">element</te...
...xt></a><polyline points="341,25 351,20 351,30 341,25" stroke="#d4dde4" fill="none"/><line x1="351" y1="25" x2="381" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/
web/api/svgelement" target="_top"><rect x="381" y="1" width="100" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="431" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">svgelement</text></a><polyline points="481,25 491,20 491,30 481,25" stroke="#d4dde4" fill="none"/><line x1="491" y1="25" x2="499" y2="25" stroke="#d4dde4"/><line x1="499" y1="25" x2="499" y2="90" stroke="#d4dde4"/><line x1="499" y1="90" x2="482" y2="90" stroke="#d4dde4"/><a xlink:href="/docs/
web/api/svgfespecularlightingelement" target="_top"><rect ...
SVGFESpotLightElement - Web APIs
<div id="interfacediagram" style="display: inline-block; position: relative; width: 100%; padding-bottom: 23.333333333333332%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 140" preserveaspectratio="xminymin meet"><a xlink:href="/docs/
web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="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="2...
...5" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/
web/api/node" target="_top"><rect x="151" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="188.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">node</text></a><polyline points="226,25 236,20 236,30 226,25" stroke="#d4dde4" fill="none"/><line x1="236" y1="25" x2="266" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/
web/api/element" target="_top"><rect x="266" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="303.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">element</te...
...xt></a><polyline points="341,25 351,20 351,30 341,25" stroke="#d4dde4" fill="none"/><line x1="351" y1="25" x2="381" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/
web/api/svgelement" target="_top"><rect x="381" y="1" width="100" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="431" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">svgelement</text></a><polyline points="481,25 491,20 491,30 481,25" stroke="#d4dde4" fill="none"/><line x1="491" y1="25" x2="499" y2="25" stroke="#d4dde4"/><line x1="499" y1="25" x2="499" y2="90" stroke="#d4dde4"/><line x1="499" y1="90" x2="482" y2="90" stroke="#d4dde4"/><a xlink:href="/docs/
web/api/svgfespotlightelement" target="_top"><rect x="271"...
SVGFETileElement - Web APIs
<div id="interfacediagram" style="display: inline-block; position: relative; width: 100%; padding-bottom: 23.333333333333332%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 140" preserveaspectratio="xminymin meet"><a xlink:href="/docs/
web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="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/node" target="_top"><rect x="151" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="188.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">node</text></a><polyline points="226,25 236,20 236,30 226,25" stroke="#d4dde4" fill="none"/><line x1="236" y1="25" x2="266" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/
web/api/element" target="_top"><rect x="266" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="303.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">element</text...
...></a><polyline points="341,25 351,20 351,30 341,25" stroke="#d4dde4" fill="none"/><line x1="351" y1="25" x2="381" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/
web/api/svgelement" target="_top"><rect x="381" y="1" width="100" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="431" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">svgelement</text></a><polyline points="481,25 491,20 491,30 481,25" stroke="#d4dde4" fill="none"/><line x1="491" y1="25" x2="499" y2="25" stroke="#d4dde4"/><line x1="499" y1="25" x2="499" y2="90" stroke="#d4dde4"/><line x1="499" y1="90" x2="482" y2="90" stroke="#d4dde4"/><a xlink:href="/docs/
web/api/svgfetileelement" target="_top"><rect x="321" y="65"...
SVGFETurbulenceElement - Web APIs
<div id="interfacediagram" style="display: inline-block; position: relative; width: 100%; padding-bottom: 23.333333333333332%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 140" preserveaspectratio="xminymin meet"><a xlink:href="/docs/
web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="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="2...
...5" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/
web/api/node" target="_top"><rect x="151" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="188.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">node</text></a><polyline points="226,25 236,20 236,30 226,25" stroke="#d4dde4" fill="none"/><line x1="236" y1="25" x2="266" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/
web/api/element" target="_top"><rect x="266" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="303.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">element</te...
...xt></a><polyline points="341,25 351,20 351,30 341,25" stroke="#d4dde4" fill="none"/><line x1="351" y1="25" x2="381" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/
web/api/svgelement" target="_top"><rect x="381" y="1" width="100" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="431" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">svgelement</text></a><polyline points="481,25 491,20 491,30 481,25" stroke="#d4dde4" fill="none"/><line x1="491" y1="25" x2="499" y2="25" stroke="#d4dde4"/><line x1="499" y1="25" x2="499" y2="90" stroke="#d4dde4"/><line x1="499" y1="90" x2="482" y2="90" stroke="#d4dde4"/><a xlink:href="/docs/
web/api/svgfeturbulenceelement" target="_top"><rect x="261...
SVGFilterElement - Web APIs
<div id="interfacediagram" style="display: inline-block; position: relative; width: 100%; padding-bottom: 23.333333333333332%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 140" preserveaspectratio="xminymin meet"><a xlink:href="/docs/
web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="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="2...
...5" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/
web/api/node" target="_top"><rect x="151" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="188.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">node</text></a><polyline points="226,25 236,20 236,30 226,25" stroke="#d4dde4" fill="none"/><line x1="236" y1="25" x2="266" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/
web/api/element" target="_top"><rect x="266" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="303.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">element</te...
...xt></a><polyline points="341,25 351,20 351,30 341,25" stroke="#d4dde4" fill="none"/><line x1="351" y1="25" x2="381" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/
web/api/svgelement" target="_top"><rect x="381" y="1" width="100" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="431" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">svgelement</text></a><polyline points="481,25 491,20 491,30 481,25" stroke="#d4dde4" fill="none"/><line x1="491" y1="25" x2="499" y2="25" stroke="#d4dde4"/><line x1="499" y1="25" x2="499" y2="90" stroke="#d4dde4"/><line x1="499" y1="90" x2="482" y2="90" stroke="#d4dde4"/><a xlink:href="/docs/
web/api/svgfilterelement" target="_top"><rect x="321" y="6...
SVGGradientElement - Web APIs
<div id="interfacediagram" style="display: inline-block; position: relative; width: 100%; padding-bottom: 23.333333333333332%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 140" preserveaspectratio="xminymin meet"><a xlink:href="/docs/
web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="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="2...
...5" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/
web/api/node" target="_top"><rect x="151" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="188.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">node</text></a><polyline points="226,25 236,20 236,30 226,25" stroke="#d4dde4" fill="none"/><line x1="236" y1="25" x2="266" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/
web/api/element" target="_top"><rect x="266" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="303.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">element</te...
...xt></a><polyline points="341,25 351,20 351,30 341,25" stroke="#d4dde4" fill="none"/><line x1="351" y1="25" x2="381" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/
web/api/svgelement" target="_top"><rect x="381" y="1" width="100" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="431" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">svgelement</text></a><polyline points="481,25 491,20 491,30 481,25" stroke="#d4dde4" fill="none"/><line x1="491" y1="25" x2="499" y2="25" stroke="#d4dde4"/><line x1="499" y1="25" x2="499" y2="90" stroke="#d4dde4"/><line x1="499" y1="90" x2="482" y2="90" stroke="#d4dde4"/><a xlink:href="/docs/
web/api/svggradientelement" target="_top"><rect x="301" y=...
SVGGraphicsElement - Web APIs
<div id="interfacediagram" style="display: inline-block; position: relative; width: 100%; padding-bottom: 20%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 120" preserveaspectratio="xminymin meet"><a xlink:href="/docs/
web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="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="2...
...5" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/
web/api/node" target="_top"><rect x="151" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="188.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">node</text></a><polyline points="226,25 236,20 236,30 226,25" stroke="#d4dde4" fill="none"/><line x1="236" y1="25" x2="266" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/
web/api/element" target="_top"><rect x="266" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="303.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">element</te...
...xt></a><polyline points="341,25 351,20 351,30 341,25" stroke="#d4dde4" fill="none"/><line x1="351" y1="25" x2="381" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/
web/api/svgelement" target="_top"><rect x="381" y="1" width="100" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="431" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">svgelement</text></a><polyline points="481,25 491,20 491,30 481,25" stroke="#d4dde4" fill="none"/><line x1="491" y1="25" x2="499" y2="25" stroke="#d4dde4"/><line x1="499" y1="25" x2="499" y2="90" stroke="#d4dde4"/><line x1="499" y1="90" x2="482" y2="90" stroke="#d4dde4"/><a xlink:href="/docs/
web/api/svggraphicselement" target="_top"><rect x="301" y=...
SVGMPathElement - Web APIs
<div id="interfacediagram" style="display: inline-block; position: relative; width: 100%; padding-bottom: 23.333333333333332%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 140" preserveaspectratio="xminymin meet"><a xlink:href="/docs/
web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="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" x...
...2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/
web/api/node" target="_top"><rect x="151" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="188.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">node</text></a><polyline points="226,25 236,20 236,30 226,25" stroke="#d4dde4" fill="none"/><line x1="236" y1="25" x2="266" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/
web/api/element" target="_top"><rect x="266" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="303.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">element</text><...
.../a><polyline points="341,25 351,20 351,30 341,25" stroke="#d4dde4" fill="none"/><line x1="351" y1="25" x2="381" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/
web/api/svgelement" target="_top"><rect x="381" y="1" width="100" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="431" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">svgelement</text></a><polyline points="481,25 491,20 491,30 481,25" stroke="#d4dde4" fill="none"/><line x1="491" y1="25" x2="499" y2="25" stroke="#d4dde4"/><line x1="499" y1="25" x2="499" y2="90" stroke="#d4dde4"/><line x1="499" y1="90" x2="482" y2="90" stroke="#d4dde4"/><a xlink:href="/docs/
web/api/svgmpathelement" target="_top"><rect x="331" y="65" wi...
SVGMaskElement - Web APIs
<div id="interfacediagram" style="display: inline-block; position: relative; width: 100%; padding-bottom: 23.333333333333332%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 140" preserveaspectratio="xminymin meet"><a xlink:href="/docs/
web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="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="2...
...5" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/
web/api/node" target="_top"><rect x="151" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="188.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">node</text></a><polyline points="226,25 236,20 236,30 226,25" stroke="#d4dde4" fill="none"/><line x1="236" y1="25" x2="266" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/
web/api/element" target="_top"><rect x="266" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="303.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">element</te...
...xt></a><polyline points="341,25 351,20 351,30 341,25" stroke="#d4dde4" fill="none"/><line x1="351" y1="25" x2="381" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/
web/api/svgelement" target="_top"><rect x="381" y="1" width="100" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="431" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">svgelement</text></a><polyline points="481,25 491,20 491,30 481,25" stroke="#d4dde4" fill="none"/><line x1="491" y1="25" x2="499" y2="25" stroke="#d4dde4"/><line x1="499" y1="25" x2="499" y2="90" stroke="#d4dde4"/><line x1="499" y1="90" x2="482" y2="90" stroke="#d4dde4"/><a xlink:href="/docs/
web/api/svgmaskelement" target="_top"><rect x="341" y="65"...
SVGMetadataElement - Web APIs
<div id="interfacediagram" style="display: inline-block; position: relative; width: 100%; padding-bottom: 23.333333333333332%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 140" preserveaspectratio="xminymin meet"><a xlink:href="/docs/
web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="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="2...
...5" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/
web/api/node" target="_top"><rect x="151" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="188.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">node</text></a><polyline points="226,25 236,20 236,30 226,25" stroke="#d4dde4" fill="none"/><line x1="236" y1="25" x2="266" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/
web/api/element" target="_top"><rect x="266" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="303.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">element</te...
...xt></a><polyline points="341,25 351,20 351,30 341,25" stroke="#d4dde4" fill="none"/><line x1="351" y1="25" x2="381" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/
web/api/svgelement" target="_top"><rect x="381" y="1" width="100" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="431" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">svgelement</text></a><polyline points="481,25 491,20 491,30 481,25" stroke="#d4dde4" fill="none"/><line x1="491" y1="25" x2="499" y2="25" stroke="#d4dde4"/><line x1="499" y1="25" x2="499" y2="90" stroke="#d4dde4"/><line x1="499" y1="90" x2="482" y2="90" stroke="#d4dde4"/><a xlink:href="/docs/
web/api/svgmetadataelement" target="_top"><rect x="301" y=...
SVGPatternElement - Web APIs
<div id="interfacediagram" style="display: inline-block; position: relative; width: 100%; padding-bottom: 23.333333333333332%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 140" preserveaspectratio="xminymin meet"><a xlink:href="/docs/
web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="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="2...
...5" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/
web/api/node" target="_top"><rect x="151" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="188.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">node</text></a><polyline points="226,25 236,20 236,30 226,25" stroke="#d4dde4" fill="none"/><line x1="236" y1="25" x2="266" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/
web/api/element" target="_top"><rect x="266" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="303.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">element</te...
...xt></a><polyline points="341,25 351,20 351,30 341,25" stroke="#d4dde4" fill="none"/><line x1="351" y1="25" x2="381" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/
web/api/svgelement" target="_top"><rect x="381" y="1" width="100" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="431" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">svgelement</text></a><polyline points="481,25 491,20 491,30 481,25" stroke="#d4dde4" fill="none"/><line x1="491" y1="25" x2="499" y2="25" stroke="#d4dde4"/><line x1="499" y1="25" x2="499" y2="90" stroke="#d4dde4"/><line x1="499" y1="90" x2="482" y2="90" stroke="#d4dde4"/><a xlink:href="/docs/
web/api/svgpatternelement" target="_top"><rect x="311" y="...
SVGScriptElement - Web APIs
<div id="interfacediagram" style="display: inline-block; position: relative; width: 100%; padding-bottom: 23.333333333333332%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 140" preserveaspectratio="xminymin meet"><a xlink:href="/docs/
web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="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="2...
...5" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/
web/api/node" target="_top"><rect x="151" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="188.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">node</text></a><polyline points="226,25 236,20 236,30 226,25" stroke="#d4dde4" fill="none"/><line x1="236" y1="25" x2="266" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/
web/api/element" target="_top"><rect x="266" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="303.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">element</te...
...xt></a><polyline points="341,25 351,20 351,30 341,25" stroke="#d4dde4" fill="none"/><line x1="351" y1="25" x2="381" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/
web/api/svgelement" target="_top"><rect x="381" y="1" width="100" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="431" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">svgelement</text></a><polyline points="481,25 491,20 491,30 481,25" stroke="#d4dde4" fill="none"/><line x1="491" y1="25" x2="499" y2="25" stroke="#d4dde4"/><line x1="499" y1="25" x2="499" y2="90" stroke="#d4dde4"/><line x1="499" y1="90" x2="482" y2="90" stroke="#d4dde4"/><a xlink:href="/docs/
web/api/svgscriptelement" target="_top"><rect x="321" y="6...
SVGStopElement - Web APIs
<div id="interfacediagram" style="display: inline-block; position: relative; width: 100%; padding-bottom: 23.333333333333332%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 140" preserveaspectratio="xminymin meet"><a xlink:href="/docs/
web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="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/node" target="_top"><rect x="151" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="188.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">node</text></a><polyline points="226,25 236,20 236,30 226,25" stroke="#d4dde4" fill="none"/><line x1="236" y1="25" x2="266" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/
web/api/element" target="_top"><rect x="266" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="303.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">element</text></a...
...><polyline points="341,25 351,20 351,30 341,25" stroke="#d4dde4" fill="none"/><line x1="351" y1="25" x2="381" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/
web/api/svgelement" target="_top"><rect x="381" y="1" width="100" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="431" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">svgelement</text></a><polyline points="481,25 491,20 491,30 481,25" stroke="#d4dde4" fill="none"/><line x1="491" y1="25" x2="499" y2="25" stroke="#d4dde4"/><line x1="499" y1="25" x2="499" y2="90" stroke="#d4dde4"/><line x1="499" y1="90" x2="482" y2="90" stroke="#d4dde4"/><a xlink:href="/docs/
web/api/svgstopelement" target="_top"><rect x="341" y="65" width...
SVGStyleElement - Web APIs
<div id="interfacediagram" style="display: inline-block; position: relative; width: 100%; padding-bottom: 23.333333333333332%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 140" preserveaspectratio="xminymin meet"><a xlink:href="/docs/
web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="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="2...
...5" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/
web/api/node" target="_top"><rect x="151" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="188.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">node</text></a><polyline points="226,25 236,20 236,30 226,25" stroke="#d4dde4" fill="none"/><line x1="236" y1="25" x2="266" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/
web/api/element" target="_top"><rect x="266" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="303.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">element</te...
...xt></a><polyline points="341,25 351,20 351,30 341,25" stroke="#d4dde4" fill="none"/><line x1="351" y1="25" x2="381" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/
web/api/svgelement" target="_top"><rect x="381" y="1" width="100" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="431" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">svgelement</text></a><polyline points="481,25 491,20 491,30 481,25" stroke="#d4dde4" fill="none"/><line x1="491" y1="25" x2="499" y2="25" stroke="#d4dde4"/><line x1="499" y1="25" x2="499" y2="90" stroke="#d4dde4"/><line x1="499" y1="90" x2="482" y2="90" stroke="#d4dde4"/><a xlink:href="/docs/
web/api/svgstyleelement" target="_top"><rect x="331" y="65...
SVGSymbolElement - Web APIs
<div id="interfacediagram" style="display: inline-block; position: relative; width: 100%; padding-bottom: 23.333333333333332%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 140" preserveaspectratio="xminymin meet"><a xlink:href="/docs/
web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="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/node" target="_top"><rect x="151" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="188.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">node</text></a><polyline points="226,25 236,20 236,30 226,25" stroke="#d4dde4" fill="none"/><line x1="236" y1="25" x2="266" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/
web/api/element" target="_top"><rect x="266" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="303.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">element</text...
...></a><polyline points="341,25 351,20 351,30 341,25" stroke="#d4dde4" fill="none"/><line x1="351" y1="25" x2="381" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/
web/api/svgelement" target="_top"><rect x="381" y="1" width="100" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="431" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">svgelement</text></a><polyline points="481,25 491,20 491,30 481,25" stroke="#d4dde4" fill="none"/><line x1="491" y1="25" x2="499" y2="25" stroke="#d4dde4"/><line x1="499" y1="25" x2="499" y2="90" stroke="#d4dde4"/><line x1="499" y1="90" x2="482" y2="90" stroke="#d4dde4"/><a xlink:href="/docs/
web/api/svgsymbolelement" target="_top"><rect x="321" y="65"...
SVGTitleElement - Web APIs
<div id="interfacediagram" style="display: inline-block; position: relative; width: 100%; padding-bottom: 23.333333333333332%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 140" preserveaspectratio="xminymin meet"><a xlink:href="/docs/
web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="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" x...
...2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/
web/api/node" target="_top"><rect x="151" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="188.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">node</text></a><polyline points="226,25 236,20 236,30 226,25" stroke="#d4dde4" fill="none"/><line x1="236" y1="25" x2="266" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/
web/api/element" target="_top"><rect x="266" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="303.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">element</text><...
.../a><polyline points="341,25 351,20 351,30 341,25" stroke="#d4dde4" fill="none"/><line x1="351" y1="25" x2="381" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/
web/api/svgelement" target="_top"><rect x="381" y="1" width="100" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="431" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">svgelement</text></a><polyline points="481,25 491,20 491,30 481,25" stroke="#d4dde4" fill="none"/><line x1="491" y1="25" x2="499" y2="25" stroke="#d4dde4"/><line x1="499" y1="25" x2="499" y2="90" stroke="#d4dde4"/><line x1="499" y1="90" x2="482" y2="90" stroke="#d4dde4"/><a xlink:href="/docs/
web/api/svgtitleelement" target="_top"><rect x="331" y="65" wi...
SVGTransformList - Web APIs
desktopmobilechromeedgefirefoxinternet exploreroperasafariandroid
webviewchrome for androidfirefox for androidopera for androidsafari on iossamsung internetsvgtransformlistchrome full support yesedge full support ≤18firefox full support yesie ?
... opera full support yessafari full support yes
webview android full support yeschrome android full support yesfirefox android full support yesopera android full support yessafari ios full support yessamsung internet android full support yeslength non-standardchrome full support yesedge full support ≤79firefox full suppor...
...
webview android full support yeschrome android full support yesfirefox android full support 9opera android full support yessafari ios ?
Selection.extend() - Web APIs
desktopmobilechromeedgefirefoxinternet exploreroperasafariandroid
webviewchrome for androidfirefox for androidopera for androidsafari on iossamsung internetextend experimentalchrome full support yesedge full support 12firefox full support yesie no support noopera full supp...
...ort yessafari full support yes
webview android no support nochrome android full support yesfirefox android full support yesopera android full support yessafari ios full support yessamsung internet android full support yesoffset parameter is optional experimentalchrome full support yesedge full support ≤79firefox full support ...
... 55ie no support noopera full support yessafari full support yes
webview android no support nochrome android full support yesfirefox android full support 55opera android full support yessafari ios full support yessamsung internet android full support yeslegend full support full support no sup...
Using server-sent events - Web APIs
developing a
web application that uses server-sent events is straightforward.
... you'll need a bit of code on the server to stream events to the front-end, but the client side code works almost identically to
websockets in part of handling incoming events.
...if this is specified, an event will be dispatched on the browser to the listener for the specified event name; the
website source code should use addeventlistener() to listen for named events.
SharedWorkerGlobalScope.applicationCache - Web APIs
don't use it to make offline
websites — consider using service workers instead.
... desktopmobilechromeedgefirefoxinternet exploreroperasafariandroid
webviewchrome for androidfirefox for androidopera for androidsafari on iossamsung internetapplicationcachechrome full support 4edge full support ≤79firefox full support 29ie no support noopera full support...
... 10.6safari no support no
webview android full support yeschrome android full support yesfirefox android full support 29opera android full support yessafari ios ?
StaticRange - Web APIs
abstractrange and staticrange are not available from
web workers.
... <div id="interfacediagram" style="display: inline-block; position: relative; width: 100%; padding-bottom: 11.666666666666666%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 70" preserveaspectratio="xminymin meet"><a xlink:href="/docs/
web/api/abstractrange" target="_top"><rect x="1" y="1" width="130" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="66" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">abstractrange</text></a><polyline points="131,25 141,20 141,30 131,25" stroke="#d4dde4" fill="none"/><line x1="141" y1="25" x2="171" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/
web/api/...
...this lets the user agent avoid a lot of work that is unnecessary if the
web app or site doesn't need a live-updating range.
StereoPannerNode - Web APIs
the stereopannernode interface of the
web audio api represents a simple stereo panner node that can be used to pan an audio stream left or right.
... var audioctx = new (window.audiocontext || window.
webkitaudiocontext)(); var myaudio = document.queryselector('audio'); var pancontrol = document.queryselector('.panning-control'); var panvalue = document.queryselector('.panning-value'); pre.innerhtml = myscript.innerhtml; // create a mediaelementaudiosourcenode // feed the htmlmediaelement into it var source = audioctx.createmediaelementsource(myaudio); // create a stereo panner var pannode = a...
...etvalueattime(pancontrol.value, audioctx.currenttime); panvalue.innerhtml = pancontrol.value; } // connect the mediaelementaudiosourcenode to the pannode // and the pannode to the destination, so we can play the // music and adjust the panning using the controls source.connect(pannode); pannode.connect(audioctx.destination); specifications specification status comment
web audio apithe definition of 'stereopannernode' in that specification.
Streams API concepts - Web APIs
the streams api adds a very useful set of tools to the
web platform, providing objects allowing javascript to programmatically access streams of data received over the network and process them as desired by the developer.
...examples include video streams and tcp/
web sockets.
...you can find more useful ideas and examples in the spec — see transform streams for ideas, and this
web sockets example.
SubtleCrypto.encrypt() - Web APIs
supported algorithms the
web crypto api provides four algorithms that support the encrypt() and decrypt() operations.
...the
web crypto api supports three different aes modes: ctr (counter mode) cbc (cipher block chaining) gcm (galois/counter mode) it's strongly recommended to use authenticated encryption, which includes checks that the ciphertext has not been modified by an attacker.
... textencoder(); return enc.encode(message); } function encryptmessage(key) { let encoded = getmessageencoding(); // iv will be needed for decryption iv = window.crypto.getrandomvalues(new uint8array(12)); return window.crypto.subtle.encrypt( { name: "aes-gcm", iv: iv }, key, encoded ); } specifications specification status comment
web cryptography apithe definition of 'subtlecrypto.encrypt()' in that specification.
SubtleCrypto.unwrapKey() - Web APIs
it decrypts the key and then imports it, returning a cryptokey object that can be used in the
web crypto api.
... jwk: json
web key format.
...ithm params for key encryption key name: "aes-gcm", iv: ivbuffer }, { // algorithm params for key to unwrap name: "rsa-pss", hash: "sha-256" }, true, // extractability of key to unwrap ["sign"] // key usages for key to unwrap ); } specifications specification status comment
web cryptography apithe definition of 'subtlecrypto.unwrapkey()' in that specification.
SubtleCrypto.wrapKey() - Web APIs
jwk: json
web key format.
...ow.crypto.subtle.generatekey( { name: "rsa-oaep", // consider using a 4096-bit key for systems that require long-term security moduluslength: 2048, publicexponent: new uint8array([1, 0, 1]), hash: "sha-256", }, true, ["encrypt", "decrypt"] ) .then((keypair) => { return wrapcryptokey(keypair.publickey); }) .then((wrappedkey) => { console.log(wrappedkey); }); json
web key import this code wraps an ecdsa private signing key.
... iv: iv } ); } /* generate a sign/verify key pair, then wrap the private key */ window.crypto.subtle.generatekey( { name: "ecdsa", namedcurve: "p-384" }, true, ["sign", "verify"] ) .then((keypair) => { return wrapcryptokey(keypair.privatekey); }) .then((wrappedkey) => { console.log(wrappedkey); }); specifications specification status comment
web cryptography apithe definition of 'subtlecrypto.wrapkey()' in that specification.
Text - Web APIs
<div id="interfacediagram" style="display: inline-block; position: relative; width: 100%; padding-bottom: 11.666666666666666%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 70" preserveaspectratio="xminymin meet"><a xlink:href="/docs/
web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="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="2...
...5" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/
web/api/node" target="_top"><rect x="151" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="188.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">node</text></a><polyline points="226,25 236,20 236,30 226,25" stroke="#d4dde4" fill="none"/><line x1="236" y1="25" x2="266" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/
web/api/characterdata" target="_top"><rect x="266" y="1" width="130" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="331" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">charac...
...terdata</text></a><polyline points="396,25 406,20 406,30 396,25" stroke="#d4dde4" fill="none"/><line x1="406" y1="25" x2="436" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/
web/api/text" target="_top"><rect x="436" y="1" width="75" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="473.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">text</text></a></svg></div> a:hover text { fill: #0095dd; pointer-events: all;} constructor text() returns a text node with the parameter as its textual content.
TouchEvent - Web APIs
<div id="interfacediagram" style="display: inline-block; position: relative; width: 100%; padding-bottom: 11.666666666666666%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 70" preserveaspectratio="xminymin meet"><a xlink:href="/docs/
web/api/event" target="_top"><rect x="1" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="38.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">event</text></a><polyline points="76,25 86,20 86,30 76,25" stroke="#d4dde4" fill="none"/><line x1="86" y1="25" x2="116" y2="...
...25" stroke="#d4dde4"/><a xlink:href="/docs/
web/api/uievent" target="_top"><rect x="116" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="153.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">uievent</text></a><polyline points="191,25 201,20 201,30 191,25" stroke="#d4dde4" fill="none"/><line x1="201" y1="25" x2="231" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/
web/api/touchevent" target="_top"><rect x="231" y="1" width="100" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="281" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">touchevent</text...
... the exception to this is chrome, starting with version 56 (desktop, chrome for android, and android
webview), where the default value for the passive option for touchstart and touchmove is true and calls to preventdefault() will have no effect.
Using Touch Events - Web APIs
today, most
web content is designed for keyboard and mouse input.
... however, devices with touch screens (especially portable devices) are mainstream and
web applications can either directly process touch-based input by using touch events or the application can use interpreted mouse events for the application input.
... examples and demos the following documents describe how to use touch events and include example code: touch events overview implement custom gestures introduction to touch events in javascript add touch screen support to your
website (the easy way) touch event demonstrations: paint program (by rick byers) touch/pointer tests and demos (by patrick h.
Transferable - Web APIs
the transferable interface represents an object that can be transfered between different execution contexts, like the main thread and
web workers.
...the functionality of transferable objects still exists, however, but is implemented at a more fundamental level (technically speaking, using the [transferable]
webidl extended attribute).
... living standard replaced transferable interface with [transferable]
web idl extended attribute.
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.
... desktopmobilechromeedgefirefoxinternet exploreroperasafariandroid
webviewchrome for androidfirefox for androidopera for androidsafari on iossamsung internethash experimentalchrome no support noedge no support nofirefox full support 38 full support 38 no support 3.5 — 38notes notes before firefox 38, firefox returned th...
...this has been fixed to match the spec.ie no support noopera no support nosafari no support no
webview android no support nochrome android no support nofirefox android full support 38 full support 38 no support 4 — 38notes notes before firefox 38, firefox returned the hash percent encoded.
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.
... desktopmobilechromeedgefirefoxinternet exploreroperasafariandroid
webviewchrome for androidfirefox for androidopera for androidsafari on iossamsung internethost experimentalchrome no support noedge no support nofirefox full support 3.5ie no support noopera no support nosafari no support...
... no
webview android no support nochrome android no support nofirefox android full support 4opera android no support nosafari ios no support nosamsung internet android no support nolegend full support full support no support no supportexperimental.
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.
... desktopmobilechromeedgefirefoxinternet exploreroperasafariandroid
webviewchrome for androidfirefox for androidopera for androidsafari on iossamsung internethostname experimentalchrome no support noedge no support nofirefox full support 3.5ie no support noopera no support nosafari no sup...
...port no
webview android no support nochrome android no support nofirefox android full support 4opera android no support nosafari ios no support nosamsung internet android no support nolegend full support full support no support no supportexperimental.
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.
... desktopmobilechromeedgefirefoxinternet exploreroperasafariandroid
webviewchrome for androidfirefox for androidopera for androidsafari on iossamsung internethref experimentalchrome no support noedge no support nofirefox full support 3.5ie no support noopera no support nosafari no support...
... no
webview android no support nochrome android no support nofirefox android full support 4opera android no support nosafari ios no support nosamsung internet android no support nolegend full support full support no support no supportexperimental.
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.
... desktopmobilechromeedgefirefoxinternet exploreroperasafariandroid
webviewchrome for androidfirefox for androidopera for androidsafari on iossamsung internetpathname experimentalchrome no support noedge no support nofirefox full support 3.5ie no support noopera no support nosafari no sup...
...port no
webview android no support nochrome android no support nofirefox android full support 4opera android no support nosafari ios no support nosamsung internet android no support nolegend full support full support no support no supportexperimental.
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.
... desktopmobilechromeedgefirefoxinternet exploreroperasafariandroid
webviewchrome for androidfirefox for androidopera for androidsafari on iossamsung internetport experimentalchrome no support noedge no support nofirefox full support 3.5ie no support noopera no support nosafari no support...
... no
webview android no support nochrome android no support nofirefox android full support 4opera android no support nosafari ios no support nosamsung internet android no support nolegend full support full support no support no supportexperimental.
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.
... desktopmobilechromeedgefirefoxinternet exploreroperasafariandroid
webviewchrome for androidfirefox for androidopera for androidsafari on iossamsung internetprotocol experimentalchrome no support noedge no support nofirefox full support 3.5ie no support noopera no support nosafari no sup...
...port no
webview android no support nochrome android no support nofirefox android full support 4opera android no support nosafari ios no support nosamsung internet android no support nolegend full support full support no support no supportexperimental.
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.
... desktopmobilechromeedgefirefoxinternet exploreroperasafariandroid
webviewchrome for androidfirefox for androidopera for androidsafari on iossamsung internetsearch experimentalchrome no support noedge no support nofirefox full support 3.5ie no support noopera no support nosafari no suppo...
...rt no
webview android no support nochrome android no support nofirefox android full support 4opera android no support nosafari ios no support nosamsung internet android no support nolegend full support full support no support no supportexperimental.
URL API - Web APIs
the url standard also defines concepts such as domains, hosts, and ip addresses, and also attempts to describe in a standard way the legacy application/x-www-form-urlencoded mime type used to submit
web forms' contents as a set of key/value pairs.
... let addr = new url("/docs/
web/api/url_api"); let host = addr.host; let path = addr.pathname; the snippet above creates a url object for the article you're reading right now, then fetches the host and pathname properties.
... in this case, those strings are developer.mozilla.org and /docs/
web/api/url_api, respectively.
VTTCue - Web APIs
the vttcue interface—part of the api for handling
webvtt (text tracks on media presentations)—describes and controls the text track associated with a particular <track> element.
... example html <video controls src="https://udn.realityripple.com/samples/c6/f8a3489533.
webm"></video> css video { width: 320px; height: 180px; } javascript let video = document.queryselector('video'); video.addeventlistener('loadedmetadata', () => { const track = video.addtexttrack("captions", "简体中文subtitles", "zh_cn"); track.mode = "showing"; const cuecn = new vttcue(0, 2.500, '字幕会在0至2.5秒间显示'); track.addcue(cuecn); const cueen = new vttcue...
... specifications specification status comment
webvtt: the
web video text tracks format candidate recommendation ...
Visual Viewport API - Web APIs
visual viewport concepts and usage the mobile
web contains two viewports, the layout viewport and the visual viewport.
... what happens when a
web page element needs to be visible on screen regardless of the visible portion of a
web page?
...the visual viewport lets
web developers solve this by positioning elements relative to what's shown on screen.
Hello GLSL - Web APIs
« previousnext » this
webgl example demonstrates a very basic glsl shader program that draws a solid color square.
...uto; padding : 0.6em; } <script type="x-shader/x-vertex" id="vertex-shader"> #version 100 void main() { gl_position = vec4(0.0, 0.0, 0.0, 1.0); gl_pointsize = 64.0; } </script> <script type="x-shader/x-fragment" id="fragment-shader"> #version 100 void main() { gl_fragcolor = vec4(0.18, 0.54, 0.34, 1.0); } </script> ;(function(){ "use strict" window.addeventlistener("load", setup
webgl, false); var gl, program; function setup
webgl (evt) { window.removeeventlistener(evt.type, setup
webgl, false); if (!(gl = getrenderingcontext())) return; var source = document.queryselector("#vertex-shader").innerhtml; var vertexshader = gl.createshader(gl.vertex_shader); gl.shadersource(vertexshader,source); gl.compileshader(vertexshader); source = document.queryselector("...
...gl.array_buffer, buffer); gl.vertexattribpointer(0, 1, gl.float, false, 0, 0); } function cleanup() { gl.useprogram(null); if (buffer) gl.deletebuffer(buffer); if (program) gl.deleteprogram(program); } function getrenderingcontext() { var canvas = document.queryselector("canvas"); canvas.width = canvas.clientwidth; canvas.height = canvas.clientheight; var gl = canvas.getcontext("
webgl") || canvas.getcontext("experimental-
webgl"); if (!gl) { var paragraph = document.queryselector("p"); paragraph.innerhtml = "failed to get
webgl context." + "your browser or device may not support
webgl."; return null; } gl.viewport(0, 0, gl.drawingbufferwidth, gl.drawingbufferheight); gl.clearcolor(0.0, 0.0, 0.0, 1.0); gl.clear(gl.color_buffer_bit); return...
Example and tutorial: Simple synth keyboard - Web APIs
this example makes use of the following
web api interfaces: audiocontext, oscillatornode, periodicwave, and gainnode.
... .keyboard { width: auto; padding: 0; margin: 0; } .key { cursor: pointer; font: 16px "open sans", "lucida grande", "arial", sans-serif; border: 1px solid black; border-radius: 5px; width: 20px; height: 80px; text-align: center; box-shadow: 2px 2px darkgray; display: inline-block; position: relative; margin-right: 3px; user-select: none; -moz-user-select: none; -
webkit-user-select: none; -ms-user-select: none; } .key div { position: absolute; bottom: 0; text-align: center; width: 100%; pointer-events: none; } .key div sub { font-size: 10px; pointer-events: none; } .key:hover { background-color: #eef; } .key:active { background-color: #000; color: #fff; } .octave { display: inline-block; padding: 0 6px 0 0; } .settingsbar { p...
... let audiocontext = new (window.audiocontext || window.
webkitaudiocontext)(); let osclist = []; let mastergainnode = null; audiocontext is set to reference the global audiocontext object (or
webkitaudiocontext if necessary).
WheelEvent - Web APIs
<div id="interfacediagram" style="display: inline-block; position: relative; width: 100%; padding-bottom: 11.666666666666666%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 70" preserveaspectratio="xminymin meet"><a xlink:href="/docs/
web/api/event" target="_top"><rect x="1" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="38.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">event</text></a><polyline points="76,25 86,20 86,30 76,25" stroke="#d4dde4" fill="none"/><line x1="86" y1="25" x2="116" y2="...
...25" stroke="#d4dde4"/><a xlink:href="/docs/
web/api/uievent" target="_top"><rect x="116" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="153.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">uievent</text></a><polyline points="191,25 201,20 201,30 191,25" stroke="#d4dde4" fill="none"/><line x1="201" y1="25" x2="231" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/
web/api/mouseevent" target="_top"><rect x="231" y="1" width="100" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="281" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">mouseevent</text></...
...a><polyline points="331,25 341,20 341,30 331,25" stroke="#d4dde4" fill="none"/><line x1="341" y1="25" x2="371" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/
web/api/wheelevent" target="_top"><rect x="371" y="1" width="100" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="421" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">wheelevent</text></a></svg></div> a:hover text { fill: #0095dd; pointer-events: all;} constructor wheelevent() creates a wheelevent object.
Window.content - Web APIs
do not use it on production sites facing the
web: it will not work for every user.
... note: since firefox 57 (initially nightly-only), both the content and _content variants are only available to chrome (privileged) code, and not available to the
web anymore.
... in unprivileged content (
webpages), content is normally equivalent to top (except in the case of a
webpage loaded in a sidebar, content still refers to the window of the currently selected tab).
window.postMessage() - Web APIs
(the other properties have their expected values.) it is not possible for content or
web context scripts to specify a targetorigin to communicate directly with an extension (either the background script or a content script).
...
web or content scripts can use window.postmessage with a targetorigin of "*" to broadcast to every listener, but this is discouraged, since an extension cannot be certain the origin of such messages, and other listeners (including those you do not control) can listen in.
...
web context scripts can use custom events to communicate with content scripts (with randomly generated event names, if needed, to prevent snooping from the guest page).
Window.scroll() - Web APIs
desktopmobilechromeedgefirefoxinternet exploreroperasafariandroid
webviewchrome for androidfirefox for androidopera for androidsafari on iossamsung internetscrollchrome full support 1edge full support 12firefox full support 1ie full support 4opera full support ...
... 3safari full support 1
webview android full support 1chrome android full support 18firefox android full support 4opera android full support 10.1safari ios full support 1samsung internet android full support 1.0scrolltooptions parameterchrome full support 45edge full support 79firefox full support yesie no support ...
... noopera full support 32safari no support no
webview android full support 45chrome android full support 45firefox android full support yesopera android full support 32safari ios no support nosamsung internet android full support 5.0legend full support full support no support no suppo...
Window.scrollBy() - Web APIs
desktopmobilechromeedgefirefoxinternet exploreroperasafariandroid
webviewchrome for androidfirefox for androidopera for androidsafari on iossamsung internetscrollbychrome full support 1edge full support 79 full support 79 no support 12 — 79notes notes only scrollby(x-coord, y-coord) is supported.firefox ...
... full support 1ie partial support 11notes partial support 11notes notes only scrollby(x-coord, y-coord) is supported.opera full support 3safari full support 1
webview android full support 1chrome android full support 18firefox android full support 4opera android full support 10.1safari ios full support 1samsung internet android full support 1.0sc...
...rameterchrome full support 45edge full support 79firefox full support yesie no support noopera full support 32safari no support no
webview android full support 45chrome android full support 45firefox android full support yesopera android full support 32safari ios no support nosamsung internet android ...
Window.setCursor() - Web APIs
this function is unavailable to
web pages, which can use the css cursor property instead.
... desktopmobilechromeedgefirefoxinternet exploreroperasafariandroid
webviewchrome for androidfirefox for androidopera for androidsafari on iossamsung internetsetcursor non-standardchrome no support noedge no support nofirefox no support noie ?
...
webview android no support nochrome android no support nofirefox android no support noopera android ?
Worker - Web APIs
the worker interface of the
web workers api represents a background task that can be created via script, which can send messages back to its creator.
...(note: nested workers are not yet implemented in
webkit).
... constructors worker() creates a dedicated
web worker that executes the script at the specified url.
WorkerNavigator.permissions - Web APIs
desktopmobilechromeedgefirefoxinternet exploreroperasafariandroid
webviewchrome for androidfirefox for androidopera for androidsafari on iossamsung internetpermissions experimentalchrome full support 43edge full support ≤79firefox no support noie ?
... opera full support 30safari no support no
webview android full support 43chrome android full support 43firefox android no support noopera android full support 30safari ios no support nosamsung internet android full support 4.0legend full support full support no support no support ...
... see also permissions api
web worker api ...
XMLDocument - Web APIs
<div id="interfacediagram" style="display: inline-block; position: relative; width: 100%; padding-bottom: 11.666666666666666%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 70" preserveaspectratio="xminymin meet"><a xlink:href="/docs/
web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="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="2...
...5" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/
web/api/node" target="_top"><rect x="151" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="188.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">node</text></a><polyline points="226,25 236,20 236,30 226,25" stroke="#d4dde4" fill="none"/><line x1="236" y1="25" x2="266" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/
web/api/document" target="_top"><rect x="266" y="1" width="80" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="306" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">document</te...
...xt></a><polyline points="346,25 356,20 356,30 346,25" stroke="#d4dde4" fill="none"/><line x1="356" y1="25" x2="386" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/
web/api/xmldocument" target="_top"><rect x="386" y="1" width="110" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="441" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">xmldocument</text></a></svg></div> a:hover text { fill: #0095dd; pointer-events: all;} property also inherits properties from: document xmldocument.async used with xmldocument.load() to indicate an asynchronous request.
How to check the security state of an XMLHTTPRequest over SSL - Web APIs
bug 867872 has been filed to implement this and // contains a documented tcperror.
webidl that maps all the error codes we use in // this file to slightly more readable explanations.
... + error.name + "\n"); } let secinfo = channel.securityinfo; // print general connection security state dump("security information:\n"); if (secinfo instanceof ci.nsitransportsecurityinfo) { secinfo.queryinterface(ci.nsitransportsecurityinfo); dump("\tsecurity state of connection: "); // check security state flags if ((secinfo.securitystate & ci.nsi
webprogresslistener.state_is_secure) == ci.nsi
webprogresslistener.state_is_secure) { dump("secure connection\n"); } else if ((secinfo.securitystate & ci.nsi
webprogresslistener.state_is_insecure) == ci.nsi
webprogresslistener.state_is_insecure) { dump("insecure connection\n"); } else if ((secinfo.securitystate & ci.nsi
webprogresslistener.state_is...
..._broken) == ci.nsi
webprogresslistener.state_is_broken) { dump("unknown\n"); dump("\tsecurity description: " + secinfo.shortsecuritydescription + "\n"); dump("\tsecurity error message: " + secinfo.errormessage + "\n"); } } else { dump("\tno security info available for this channel\n"); } // print ssl certificate details if (secinfo instanceof ci.nsisslstatusprovider) { var cert = secinfo.queryinterface(ci.nsisslstatusprovider) .sslstatus.queryinterface(ci.nsisslstatus).servercert; dump("\tcommon name (cn) = " + cert.commonname + "\n"); dump("\tissuer = " + cert.issuerorganization + "\n"); dump("\torganisation = " + cert.organization + "\n"); dump("\tsha1 f...
Synchronous and asynchronous requests - Web APIs
synchronous xhr requests often cause hangs on the
web.
...see using
web workers for examples and details.
...:( client.setrequestheader("content-type", "text/plain;charset=utf-8"); client.send(analyticsdata); } using the sendbeacon() method, the data will be transmitted asynchronously to the
web server when the user agent has had an opportunity to do so, without delaying the unload or affecting the performance of the next navigation.
XRBoundedReferenceSpace - Web APIs
the
webxr device api's xrboundedreferencespace interface describes a virtual world reference space which has preset boundaries.
...the specified bounds may, in fact, describe the shape and size of the room the user is located in, in order to let the
webxr site or application prevent the user from colliding with the walls or other obstacles in the real world.
... specifications specification status comment
webxr device apithe definition of 'xrboundedreferencespace' in that specification.
XRInputSource.profiles - Web APIs
note: the profiles list is always empty when the
webxr session is in inline mode.
...each string: has no spaces; instead, words are separated by hyphen ("-") characters if the platform makes it available, the usb vendor and product id may be provided but cannot be relied upon does not uniquely identify a specific device; rather, it identifies a configuration that the product is capable of using does not provide information about handedness of the device, if applicable the
webxr input profiles registry is used by device developers and browser developers to attempt to ensure that a given device will report the same profile strings regardless of which browser or other user agent you use.
... specifications specification status comment
webxr device apithe definition of 'xrinputsource.profiles' in that specification.
XRInputSource - Web APIs
the
webxr device api's xrinputsource interface describes a single source of control input which is part of the user's
webxr-compatible virtual or augmented reality system.
... note: while xrinputsource uses the gamepad interface from the gamepad api, this input device is strictly associated with the
webxr hardware and is not a general-purpose gaming device.
... specifications specification status comment
webxr device apithe definition of 'xrinputsource' in that specification.
XRInputSourceArray - Web APIs
the interface xrinputsourcearray represents a live list of
webxr input sources, and is used as the return value of the xrsession property inputsources.
... each entry is an xrinputsource representing one input device connected to the
webxr system.
... let sources = xrsession.inputsources; if (sources.length > 0) { handleinput(sources[0]); } examples specifications specification status comment
webxr device apithe definition of 'xrinputsourcearray' in that specification.
XRInputSourceEvent.frame - Web APIs
the read-only xrinputsourceevent property frame specifies an xrframe object representing the event frame during which a
webxr user input occurred.
... usage notes the event frame does not correspond to a visual frame as is delivered to the frame rendering callback function (see rendering and the
webxr frame rendering callback for details on the callback).
... xrsession.onselectstart = event => { let targetraypose = event.frame.getpose(event.inputsource.targetrayspace, myrefspace); if (targetraypose) { checkandhandlehit(targetraypose.transform); } }; specifications specification status comment
webxr device apithe definition of 'xrinputsourceevent.frame' in that specification.
XRInputSourceEvent - Web APIs
the
webxr device api's xrinputsourceevent interface describes an event which has occurred on a
webxr user input device such as a hand controller, gaze tracking system, or motion tracking system.
... to learn more about handling inputs in a
webxr project, see the article inputs and input sources.
... xrsession.addeventlistener("select", event => { let targetraypose = event.frame.getpose(event.inputsource.targetrayspace, myrefspace); if (targetraypose) { let hit = myhittest(targetraypose.transform); if (hit) { /* handle the hit */ } } }); specifications specification status comment
webxr device apithe definition of 'xrinputsourceevent' in that specification.
XRInputSourceEventInit.frame - Web APIs
these events are generated by and sent to you by the
webxr infrastructure.
... usage notes the event frame does not correspond to a visual frame as is delivered to the frame rendering callback function (see rendering and the
webxr frame rendering callback for details on the callback).
... let event = new xrinputsourceevent("select", { frame: eventframe, inputsource: source }; if (event) { xrsession.dispatchevent(event); } specifications specification status comment
webxr device apithe definition of 'xrinputsourceeventinit.frame' in that specification.
XRInputSourcesChangeEvent() - Web APIs
the xrinputsourceschangeevent() constructor creates and returns a new xrinputsourceschangeevent object, representing an update to the list of available
webxr input devices.
... you won't typically call this constructor yourself, as these events are created and sent to you by the
webxr system.
... let iscevent = new xrinputsourceschangeevent("inputsourceschange", { session: xrsession, added: [newinputsource], removed: [] }); specifications specification status comment
webxr device apithe definition of 'xrinputsourceschangeevent()' in that specification.
XRPermissionDescriptor.optionalFeatures - Web APIs
the xrpermissiondescriptor dictionary's optionalfeatures property is used to specify a list of
webxr features which your app or site would like to use but can operate without if permission isn't granted to use them.
...while further features may be defined in future editions of
webxr, currently all permitted values come from the xrreferencespacetype enumerated type, indicating reference spaces the app rquires to be available.
...ssions.query(xrpermissiondesc).then(({state}) => { switch(state) { case "granted": setupxr(); break; case "prompt": promptandsetupxr(); break; default: /* do nothing otherwise */ break; } .catch(err) { console.log(err); } } else { setupxr(); } specifications specification status comment
webxr device apithe definition of 'xrpermissiondescriptor.optionalfeatures' in that specification.
XRPermissionStatus.granted - Web APIs
the
webxr device api's xrpermissionstatus interface's granted property is an array of strings, each identifying one of the
webxr features for which permission has been granted as of the time at which the permission api's navigator.permissions.query() method was called.
... syntax grantedfeatures = xrpermissionstatus.granted; value an array of domstring objects, each identifying a single
webxr feature which the app or site has been granted permission to use.
... xrreferencespace usage notes examples specifications specification status comment
webxr device apithe definition of 'xrpermissionstatus.granted' in that specification.
XRReferenceSpace: reset event - Web APIs
in either case, the event is sent before any
webxr animation frames which make use of the new origin are executed.
... the
webxr infrastructure or hardware drivers detected that the device had temporarily lost tracking, causing the hardware and software to be out of sync on position and orientation.
...first, you can use the addeventlistener() method: viewerrefspace.addeventlistener("reset", (event) => { /* perform reset related tasks */ }); the second option is to set the xrreferencespace object's onreset event handler property: viewerrefspace.onreset = (event) => { /* perform reset related tasks */ }; specifications specification status comment
webxr device apithe definition of 'reset event' in that specification.
XRRigidTransform.position - Web APIs
example to create a reference space which can be used to place an object at eye level (assuming eye level is 1.5 meters): function onsessionstarted(xrsession) { xrsession.addeventlistener("end", onsessionended); gl = initgraphics(xrsession); let gllayer = new xr
webgllayer(xrsession, gl); xrsession.updaterenderstate({ baselayer: gllayer }); if (immersivesession) { xrsession.requestreferencespace("bounded-floor").then((refspace) => { refspacecreated(refspace); }).catch(() => { session.requestreferencespace("local-floor").then(refspacecreated); }); } else { session.requestreferencespace("viewer").then(refspacecreated); } } ...
... function refspacecreated(refspace) { if (immersivesession) { xrreferencespace = refspace; } else { xrreferencespace = refspace.getoffsetreferencespace( new xrrigidtransform({y: -1.5}); ); } xrsession.requestanimationframe(onframe); } after setting up the graphics context for
webxr use, this begins by looking to see if a variable immersivesession is true; if so, we first request a bounded-floor reference space.
... specifications specification status comment
webxr device apithe definition of 'xrrigidtransform.position' in that specification.
XRRigidTransform - Web APIs
the xrrigidtransform is a
webxr api interface that represents the 3d geometric transform described by a position and orientation.
... xrrigidtransform is used to specify transforms throughout the
webxr apis, including: the offset and orientation relative to the parent reference space to use when creating a new reference space with getoffsetreferencespace().
... xrsession.requestreferencespace(refspacetype) .then((refspace) => { xrreferencespace = refspace; xrreferencespace = xrreferencespace.getoffsetreferencespace( new xrrigidtransform(viewerstartposition, cubeorientation)); animationframerequestid = xrsession.requestanimationframe(drawframe); specifications specification status comment
webxr device apithe definition of 'xrrigidtransform' in that specification.
XRSession.onsqueeze - Web APIs
the xrsession interface's onsqueeze event handler property can be set to a function which is then invoked to handle the squeeze event that's sent when the user successfully completes a primary squeeze action on a
webxr input device.
... to learn more about how to use and handle
webxr controller inputs, see inputs and input sources.
... specifications specification status comment
webxr device apithe definition of 'xrsession.onsqueeze' in that specification.
XRSession.onsqueezestart - Web APIs
the xrsession interface's onsqueezestart event handler property can be set to a function which is then invoked to handle the squeezestart event that's sent when the user successfully begins a primary squeeze action on a
webxr input device.
... to learn more about how to use and handle
webxr controller inputs, see inputs and input sources.
... xrsession.onsqueezestart = event => { if (event.inputsource.handedness == user.handedness) { let targetraypose = event.frame.getpose(event.inputsource.targetrayspace, myrefspace; if (targetraypose) { user.heldobject = findobjectusingray(targetraypose.transform); } } }; specifications specification status comment
webxr device apithe definition of 'xrsession.onsqueezestart' in that specification.
XRSession.visibilityState - Web APIs
the read-only visibilitystate property of the xrsession interface is a string indicating whether the
webxr content is currently visible to the user, and if it is, whether it's the primary focus.
... usage notes it's important to keep in mind that because an immersive
webxr session is potentially being shown using a different display than the html document in which it's running (such as when being shown on a headset), the value of a session's visibilitystate may not necessarily be the same as the owning document's visibilitystate.
... specifications specification status comment
webxr device apithe definition of 'xrsession.visibilitystate' in that specification.
XRSpace - Web APIs
the xrspace interface of the
webxr device api is an abstract interface providing a common basis for every class which represents a virtual coordinate system within the virtual world, in which its origin corresponds to a physical location.
... spatial data in
webxr is always expressed relative to an object based upon one of the descendant interfaces of xrspace, at the time at which a given xrframe takes place.
... specifications specification status comment
webxr device apithe definition of 'xrspace' in that specification.
XRView.transform - Web APIs
currently,
webxr doesn't support more than two views per pose, although room has been left to extend the specification to support that in the future with some additions to the api.
... for each view, we obtain its viewport and pass that to
webgl using gl.viewport().
...<<<--- finish and add link --->>> specifications specification status comment
webxr device apithe definition of 'xrview.transform' in that specification.
XRViewerPose.views - Web APIs
(gl.framebuffer, gllayer.framebuffer); gl.clearcolor(0, 0, 0, 1); gl.cleardepth(1); gl.clear(gl.color_buffer_bit, gl.depth_buffer_bit); for (let view of pose.views) { let viewport = gllayer.getviewport(view); gl.viewport(viewport.x, viewport.y, viewport.width, viewport.height); /* render the scene for the eye view.eye */ } } passing each view to getviewport() returns the
webgl viewport to apply in order to cause the rendered output to be positioned correctly in the framebuffer for renderijng to the corresponding eye on the output device.
... this code is derived from drawing a frame in movement, orientation, and motion: a
webxr example.
... specifications specification status comment
webxr device apithe definition of 'xrviewerpose.views' in that specification.
XRViewport.y - Web APIs
the read-only xrviewport interface's y property indicates the offset from the bottom edge of the destination surface (typically a xr
webgllayer to the bottom edge of the viewport within the surface into which
webxr content is to be rendered.
... note: although other
web apis typically consider the y axis to begin at the top and grow larger progressing downward,
webgl reverses this, with y growing larger as it goes upward on the screen.
... specifications specification status comment
webxr device apithe definition of 'xrviewport.y' in that specification.
msWriteProfilerMark - Web APIs
do not use it on production sites facing the
web: it will not work for every user.
...this method is also available in the
web worker global scope.
... this method is useful to profile real
website performance by using the operating system metrics as a baseline.
-webkit-box-reflect - CSS: Cascading Style Sheets
the -
webkit-box-reflect css property lets you reflect the content of an element in one specific direction.
... /* direction values */ -
webkit-box-reflect: above; -
webkit-box-reflect: below; -
webkit-box-reflect: left; -
webkit-box-reflect: right; /* offset value */ -
webkit-box-reflect: below 10px; /* mask value */ -
webkit-box-reflect: below 0 linear-gradient(transparent, white); /* global values */ -
webkit-box-reflect: inherit; -
webkit-box-reflect: initial; -
webkit-box-reflect: unset; note: this feature is not intended to be used by
web sites.
... to achieve reflection on the
web, the standard way is to use the css element() function.
-webkit-mask-attachment - CSS: Cascading Style Sheets
if a -
webkit-mask-image is specified, -
webkit-mask-attachment determines whether the mask image's position is fixed within the viewport, or scrolls along with its containing block.
... /* keyword values */ -
webkit-mask-attachment: scroll; -
webkit-mask-attachment: fixed; -
webkit-mask-attachment: local; /* multiple values */ -
webkit-mask-attachment: scroll, local; -
webkit-mask-attachment: fixed, local, scroll; /* global values */ -
webkit-mask-attachment: inherit; -
webkit-mask-attachment: initial; -
webkit-mask-attachment: unset; syntax values scroll if scroll is specified, the mask image scrolls within the viewport along with the block that contains the mask image.
... formal definition initial valuescrollapplies toall elementsinheritednocomputed valueas specifiedanimation typediscrete formal syntax <attachment>#where <attachment> = scroll | fixed | local examples fixing a mask image to the viewport body { -
webkit-mask-image: url('images/mask.png'); -
webkit-mask-attachment: fixed; } specifications not part of any standard.
-webkit-mask-position-x - CSS: Cascading Style Sheets
the -
webkit-mask-position-x css property sets the initial horizontal position of a mask image.
... /* keyword values */ -
webkit-mask-position-x: left; -
webkit-mask-position-x: center; -
webkit-mask-position-x: right; /* <percentage> values */ -
webkit-mask-position-x: 100%; -
webkit-mask-position-x: -50%; /* <length> values */ -
webkit-mask-position-x: 50px; -
webkit-mask-position-x: -1cm; /* multiple values values */ -
webkit-mask-position-x: 50px, 25%, -3em; /* global values */ -
webkit-mask-position-x: inherit; -
webkit-mask-position-x: initial; -
webkit-mask-position-x: unset; initial value0%applies toall elementsinheritednopercentagesrefer to the size of the box itselfcomputed valuefor <length> the absolute value, otherwise a percentageanimation typediscrete syntax values <length-percentage> a length indicating the position of the left edge of the image relative to the box's left...
... formal definition initial value0%applies toall elementsinheritednopercentagesrefer to the size of the box itselfcomputed valuefor <length> the absolute value, otherwise a percentageanimation typediscrete formal syntax [ <length-percentage> | left | center | right ]#where <length-percentage> = <length> | <percentage> examples horizontally positioning a mask image .exampleone { -
webkit-mask-image: url(mask.png); -
webkit-mask-position-x: right; } .exampletwo { -
webkit-mask-image: url(mask.png); -
webkit-mask-position-x: 25%; } specifications not part of any standard.
-webkit-mask-position-y - CSS: Cascading Style Sheets
the -
webkit-mask-position-y css property sets the initial vertical position of a mask image.
... /* keyword values */ -
webkit-mask-position-y: top; -
webkit-mask-position-y: center; -
webkit-mask-position-y: bottom; /* <percentage> values */ -
webkit-mask-position-y: 100%; -
webkit-mask-position-y: -50%; /* <length> values */ -
webkit-mask-position-y: 50px; -
webkit-mask-position-y: -1cm; /* multiple values values */ -
webkit-mask-position-y: 50px, 25%, -3em; /* global values */ -
webkit-mask-position-y: inherit; -
webkit-mask-position-y: initial; -
webkit-mask-position-y: unset; initial value0%applies toall elementsinheritednopercentagesrefer to the size of the box itselfcomputed valuefor <length> the absolute value, otherwise a percentageanimation typediscrete syntax values <length-percentage> a length indicating the position of the top side of the image relative to the box's top p...
... formal definition initial value0%applies toall elementsinheritednopercentagesrefer to the size of the box itselfcomputed valuefor <length> the absolute value, otherwise a percentageanimation typediscrete formal syntax [ <length-percentage> | top | center | bottom ]#where <length-percentage> = <length> | <percentage> examples vertically positioning a mask image .exampleone { -
webkit-mask-image: url(mask.png); -
webkit-mask-position-y: bottom; } .exampletwo { -
webkit-mask-image: url(mask.png); -
webkit-mask-position-y: 25%; } specifications not part of any standard.
-webkit-mask-repeat-x - CSS: Cascading Style Sheets
the -
webkit-mask-repeat-x property specifies whether and how a mask image is repeated (tiled) horizontally.
... /* keyword values */ -
webkit-mask-repeat-x: repeat; -
webkit-mask-repeat-x: no-repeat; -
webkit-mask-repeat-x: space; -
webkit-mask-repeat-x: round; /* multiple values */ -
webkit-mask-repeat-x: repeat, no-repeat, space; /* global values */ -
webkit-mask-repeat-x: inherit; -
webkit-mask-repeat-x: initial; -
webkit-mask-repeat-x: unset; syntax values repeat the mask image is repeated both horizontally and vertically.
... formal definition initial valuerepeatapplies toall elementsinheritednocomputed valueas specifiedanimation typediscrete formal syntax repeat | no-repeat | space | round examples using a repeating or non-repeating mask image .exampleone { -
webkit-mask-image: url('mask.png'); -
webkit-mask-repeat-x: repeat; } .exampletwo { -
webkit-mask-image: url('mask.png'); -
webkit-mask-repeat-x: no-repeat; } using multiple mask images you can specify a different <repeat-style> for each mask image, separated by commas: .examplethree { -
webkit-mask-image: url('mask1.png'), url('mask2.png'); -
webkit-mask-repeat-x: repeat, space; } each i...
-webkit-mask-repeat-y - CSS: Cascading Style Sheets
the -
webkit-mask-repeat-y property sets whether and how a mask image is repeated (tiled) vertically.
... /* keyword values */ -
webkit-mask-repeat-y: repeat; -
webkit-mask-repeat-y: no-repeat; -
webkit-mask-repeat-y: space; -
webkit-mask-repeat-y: round; /* multiple values */ -
webkit-mask-repeat-y: repeat, no-repeat, space; /* global values */ -
webkit-mask-repeat-y: inherit; -
webkit-mask-repeat-y: initial; -
webkit-mask-repeat-y: unset; syntax values repeat the mask image is repeated vertically.
... formal definition initial valuerepeatapplies toall elementsinheritednocomputed valuefor <length> the absolute value, otherwise a percentageanimation typediscrete formal syntax repeat | no-repeat | space | round examples using a repeating or non-repeating mask image .exampleone { -
webkit-mask-image: url('mask.png'); -
webkit-mask-repeat-y: repeat; } .exampletwo { -
webkit-mask-image: url('mask.png'); -
webkit-mask-repeat-y: no-repeat; } using multiple mask images you can specify a different <repeat-style> for each mask image, separated by commas: .examplethree { -
webkit-mask-image: url('mask1.png'), url('mask2.png'); -
webkit-mask-repeat-y: repeat, space; } each i...
-webkit-print-color-adjust - CSS: Cascading Style Sheets
the -
webkit-print-color-adjust property is a non-standard css extension that can be used to force printing of background colors and images in browsers based on the
webkit engine.
... /* keyword values */ -
webkit-print-color-adjust: economy; -
webkit-print-color-adjust: exact; /* global values */ -
webkit-print-color-adjust: inherit; -
webkit-print-color-adjust: initial; -
webkit-print-color-adjust: unset; syntax the -
webkit-print-color-adjust property is specified as one of the keyword values listed below.
... examples forcing white-on-black printing article { -
webkit-print-color-adjust: exact; background: #222; color: #eee; } specifications not part of any standard, though there is a proposal in the csswg wiki to standardize it.
-webkit-tap-highlight-color - CSS: Cascading Style Sheets
-
webkit-tap-highlight-color is a non-standard css property that sets the color of the highlight that appears over a link while it's being tapped.
... -
webkit-tap-highlight-color: red; -
webkit-tap-highlight-color: transparent; /* for removing the highlight */ syntax values a <color value>.
...apple has a description in the safari
web content guide.
-webkit-text-security - CSS: Cascading Style Sheets
-
webkit-text-security is a non-standard css property that obfuscates characters in a <form> field (such as <input> or <textarea>) by replacing them with a shape.
... syntax -
webkit-text-security: circle; -
webkit-text-security: disc; -
webkit-text-security: square; -
webkit-text-security: none; formal definition value not found in db!
... html <label for="name">name:</label> <input type="text" name="name" id="name" /> css input { -
webkit-text-security: square; } result specifications not part of any standard.
-webkit-touch-callout - CSS: Cascading Style Sheets
the -
webkit-touch-callout css property controls the display of the default callout shown when you touch and hold a touch target.
... /* keyword values */ -
webkit-touch-callout: default; -
webkit-touch-callout: none; /* global values */ -
webkit-touch-callout: initial; -
webkit-touch-callout: inherit; -
webkit-touch-callout: unset; syntax values default the default callout is displayed.
... formal definition initial valuedefaultapplies toall elementsinheritedyescomputed valueas specifiedanimation typediscrete formal syntax default | none examples turn off touch callout .example { -
webkit-touch-callout: none; } specifications not part of any standard.
:-webkit-autofill - CSS: Cascading Style Sheets
the :-
webkit-autofill css pseudo-class matches when an <input> element has its value autofilled by the browser.
... note: the user agent style sheets of many browsers use !important in their :-
webkit-autofill style declarations, making them non-overrideable by
webpages without resorting to javascript hacks.
... syntax :-
webkit-autofill specifications not part of any standard.
::-webkit-file-upload-button - CSS: Cascading Style Sheets
the ::-
webkit-file-upload-button css pseudo-element represents the button of an <input> of type="file".
... this pseudo-element is non-standard and only supported in
webkit/blink compatible browsers like chrome, opera and safari (indicated by the -
webkit prefix).
... syntax selector::-
webkit-file-upload-button examples html <form> <label for="fileupload">upload file</label><br> <input type="file" id="fileupload"> </form> css input, label { display: block; } input[type=file]::-
webkit-file-upload-button { border: 1px solid grey; background: #fffaaa; } below is the example for you to try.
::-webkit-inner-spin-button - CSS: Cascading Style Sheets
the ::-
webkit-inner-spin-button css pseudo-element is used to style the inner part of the spinner button of number picker input elements.
... syntax ::-
webkit-inner-spin-button examples these examples work only in browsers based on
webkit and blink.
... html <input type="number"> css input[type=number]::-
webkit-inner-spin-button { cursor: pointer; } result specifications not part of any standard.
::-webkit-meter-bar - CSS: Cascading Style Sheets
the ::-
webkit-meter-bar css pseudo-class is a
webkit extension that represents the meter bar in a <meter> element.
... syntax ::-
webkit-meter-bar specifications not part of any standard.
... examples html <meter min="0" max="10" value="6">score out of 10</meter> css meter { /* reset the default appearance */ -
webkit-appearance: none; -moz-appearance: none; appearance: none; } meter::-
webkit-meter-bar { background: #eee; box-shadow: 0 2px 3px rgba(0, 0, 0, 0.2) inset; border-radius: 3px; } result ...
::-webkit-meter-even-less-good-value - CSS: Cascading Style Sheets
the ::-
webkit-meter-even-less-good-value gives a red color to a <meter> element when the value and the optimum attributes fall outside the low-high range, but in opposite zones.
... syntax ::-
webkit-meter-even-less-good-value specifications not part of any standard.
... examples html <meter min="0" max="10" value="6">score out of 10</meter> css meter::-
webkit-meter-even-less-good-value { background: linear-gradient(to bottom, #f77, #d44 45%, #d44 55%, #f77); height: 100%; box-sizing: border-box; } result ...
::-webkit-meter-suboptimum-value - CSS: Cascading Style Sheets
the ::-
webkit-meter-suboptimum-value pseudo-element gives a yellow color to the <meter> element when the value attribute falls outside of the low-high range.
... syntax ::-
webkit-meter-suboptimum-value examples this example will only work in browsers based on
webkit or blink.
... html <meter min="0" max="10" value="6">score out of 10</meter> css meter::-
webkit-meter-suboptimum-value { background: -
webkit-gradient linear, left top, left bottom; height: 100%; box-sizing: border-box; } result specifications not part of any standard.
::-webkit-search-cancel-button - CSS: Cascading Style Sheets
the ::-
webkit-search-cancel-button css pseudo-element represents a button (the "cancel button") at the edge of an <input> of type="search" which clears away the current value of the <input> element.
... this button and pseudo-element are non-standard, supported only in
webkit and blink, hence the vendor prefix.
... syntax selector::-
webkit-search-cancel-button specifications not part of any standard.
::-webkit-search-results-button - CSS: Cascading Style Sheets
the ::-
webkit-search-results-button css pseudo-element represents a button (the "search results button") at the left edge of an <input> of type="search" which when clicked displays a menu which allows the user to choose from previous recent search queries.
... this button and pseudo-element are non-standard, supported only in
webkit and blink, hence the vendor prefix.
... syntax selector::-
webkit-search-results-button specifications not part of any standard.
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.
... syntax feature-policy:
web-share <allowlist>; <allowlist> an allowlist is a list of origins that takes one or more of the following values, separated by spaces: *: the feature will be allowed in this document, and all nested browsing contexts (iframes) regardless of their origin.
...
web share api draft ...
categories - Web app manifests
note: categories are used only as hints for catalogs or stores listing
web applications.
... example "categories": ["books", "education", "medical"] specification specification status comment feedback
web app manifestthe definition of 'categories' in that specification.
...
web app manifest working group drafts ...
display - Web app manifests
type string mandatory no the display member is a string that determines the developers’ preferred display mode for the
website.
... (none) example "display": "standalone" specification specification status comment feedback
web app manifestthe definition of 'display' in that specification.
...
web app manifest working group drafts ...
name - Web app manifests
type string mandatory yes the name member is a string that represents the name of the
web application as it is usually displayed to the user (e.g., amongst a list of other applications, or as a label for an icon).
... examples simple name in left-to-right language: "name": "awesome application" right-to-left name in arabic: "dir": "rtl", "lang": "ar", "name": "!أنا من التطبيق" specification specification status comment feedback
web app manifestthe definition of 'name' in that specification.
...
web app manifest working group drafts ...
orientation - Web app manifests
type string mandatory no the orientation member defines the default orientation for all the
website's top-level browsing contexts.
... values orientation can take one of the following values: any natural landscape landscape-primary landscape-secondary portrait portrait-primary portrait-secondary examples "orientation": "portrait-primary" specification specification status comment feedback
web app manifestthe definition of 'orientation' in that specification.
...
web app manifest working group drafts ...
screenshots - Web app manifests
these images are intended to be used by progressive
web app stores.
... examples "screenshots" : [ { "src": "screenshot1.
webp", "sizes": "1280x720", "type": "image/
webp" }, { "src": "screenshot2.
webp", "sizes": "1280x720", "type": "image/
webp" } ] specification specification status comment feedback
web app manifestthe definition of 'screenshots' in that specification.
...
web app manifest working group drafts ...
short_name - Web app manifests
type string mandatory no the short_name member is a string that represents the name of the
web application displayed to the user if there is not enough space to display name (e.g., as a label for an icon on the phone home screen).
... examples simple short_name in left-to-right language: "name": "awesome application", "short_name": "awesome app" short_name in arabic, which will be displayed right-to-left: "dir": "rtl", "lang": "ar", "name": "تطبيق رائع", "short_name": "رائع" specification specification status comment feedback
web app manifestthe definition of 'short_name' in that specification.
...
web app manifest working group drafts ...
start_url - Web app manifests
type string mandatory no the start_url member is a string that represents the start url of the
web application — the prefered url that should be loaded when the user launches the
web application (e.g., when the user taps on the
web application's icon from a device's application menu or homescreen).
... "start_url": "../startpoint.html" specification specification status comment feedback
web app manifestthe definition of 'start_url' in that specification.
...
web app manifest working group drafts ...
Lazy loading - Web Performance
overview as the
web has evolved, we have come to see huge increases in the number and size of assets sent to users.
... it is possible to override the default behaviour and preload
web font resources using <link rel="preload">, the css font-display property, and the font loading api.
... see also: element link images and iframes very often,
webpages contain many images that contribute to data-usage and how fast a page can load.
Performance Monitoring: RUM vs synthetic monitoring - Web Performance
synthetic monitoring and real user monitoring (rum) are two approaches for monitoring and providing insight into
web performance.
...synthetic monitoring involves deploying scripts to simulate the path an end user might take through a
web application, reporting back the performance the simulator experiences.
... an example of synthetic monitoring is
webpagetest.org.
AesKeyGenParams - Web APIs
the aeskeygenparams dictionary of the
web crypto api represents the object that should be passed as the algorithm parameter into subtlecrypto.generatekey(), when generating an aes key: that is, when the algorithm is identified as any of aes-cbc, aes-ctr, aes-gcm, or aes-kw.
... specifications specification status comment
web cryptography apithe definition of 'subtlecrypto.aeskeygenparams' in that specification.
AnalyserNode.fftSize - Web APIs
var audioctx = new (window.audiocontext || window.
webkitaudiocontext)(); var analyser = audioctx.createanalyser(); ...
...i++) { var v = dataarray[i] / 128.0; var y = v * height/2; if(i === 0) { canvasctx.moveto(x, y); } else { canvasctx.lineto(x, y); } x += slicewidth; } canvasctx.lineto(canvas.width, canvas.height/2); canvasctx.stroke(); }; draw(); specifications specification status comment
web audio apithe definition of 'fftsize' in that specification.
AnalyserNode.frequencyBinCount - Web APIs
var audioctx = new (window.audiocontext || window.
webkitaudiocontext)(); var analyser = audioctx.createanalyser(); analyser.mindecibels = -90; analyser.maxdecibels = -10; ...
...ight); var barwidth = (width / bufferlength) * 2.5 - 1; var barheight; var x = 0; for(var i = 0; i < bufferlength; i++) { barheight = dataarray[i]; canvasctx.fillstyle = 'rgb(' + (barheight+100) + ',50,50)'; canvasctx.fillrect(x,height-barheight/2,barwidth,barheight/2); x += barwidth; } }; draw(); specifications specification status comment
web audio apithe definition of 'frequencybincount' in that specification.
AnalyserNode.getByteFrequencyData() - Web APIs
var audioctx = new (window.audiocontext || window.
webkitaudiocontext)(); var analyser = audioctx.createanalyser(); ...
... specifications specification status comment
web audio apithe definition of 'getbytefrequencydata()' in that specification.
AnalyserNode.getByteTimeDomainData() - Web APIs
const audioctx = new (window.audiocontext || window.
webkitaudiocontext)(); const analyser = audioctx.createanalyser(); ...
...; let x = 0; canvasctx.beginpath(); for(var i = 0; i < bufferlength; i++) { const v = dataarray[i]/128.0; const y = v * height/2; if(i === 0) canvasctx.moveto(x, y); else canvasctx.lineto(x, y); x += slicewidth; } canvasctx.lineto(width, height/2); canvasctx.stroke(); }; draw(); specifications specification status comment
web audio apithe definition of 'getbytetimedomaindata()' in that specification.
AnalyserNode.getFloatTimeDomainData() - Web APIs
var audioctx = new (window.audiocontext || window.
webkitaudiocontext)(); var analyser = audioctx.createanalyser(); ...
... specifications specification status comment
web audio apithe definition of 'getfloattimedomaindata()' in that specification.
AnalyserNode.maxDecibels - Web APIs
var audioctx = new (window.audiocontext || window.
webkitaudiocontext)(); var analyser = audioctx.createanalyser(); analyser.mindecibels = -90; analyser.maxdecibels = -10; ...
...ight); var barwidth = (width / bufferlength) * 2.5; var barheight; var x = 0; for(var i = 0; i < bufferlength; i++) { barheight = dataarray[i]; canvasctx.fillstyle = 'rgb(' + (barheight+100) + ',50,50)'; canvasctx.fillrect(x,height-barheight/2,barwidth,barheight/2); x += barwidth + 1; } }; draw(); specifications specification status comment
web audio apithe definition of 'maxdecibels' in that specification.
AnalyserNode.minDecibels - Web APIs
var audioctx = new (window.audiocontext || window.
webkitaudiocontext)(); var analyser = audioctx.createanalyser(); analyser.mindecibels = -90; analyser.maxdecibels = -10; ...
...ight); var barwidth = (width / bufferlength) * 2.5; var barheight; var x = 0; for(var i = 0; i < bufferlength; i++) { barheight = dataarray[i]; canvasctx.fillstyle = 'rgb(' + (barheight+100) + ',50,50)'; canvasctx.fillrect(x,height-barheight/2,barwidth,barheight/2); x += barwidth + 1; } }; draw(); specifications specification status comment
web audio apithe definition of 'mindecibels' in that specification.
AnalyserNode.smoothingTimeConstant - Web APIs
var audioctx = new (window.audiocontext || window.
webkitaudiocontext)(); var analyser = audioctx.createanalyser(); analyser.mindecibels = -90; analyser.maxdecibels = -10; analyser.smoothingtimeconstant = 0.85; ...
...ight); var barwidth = (width / bufferlength) * 2.5; var barheight; var x = 0; for(var i = 0; i < bufferlength; i++) { barheight = dataarray[i]; canvasctx.fillstyle = 'rgb(' + (barheight+100) + ',50,50)'; canvasctx.fillrect(x,height-barheight/2,barwidth,barheight/2); x += barwidth + 1; } }; draw(); specifications specification status comment
web audio apithe definition of 'smoothingtimeconstant' in that specification.
Animation() - Web APIs
the animation() constructor of the
web animations api returns a new animation object instance.
... examples in the follow the white rabbit example, the animation() constructor is used to create an animation for the rabbitdownkeyframes using the document's timeline: var rabbitdownanimation = new animation(rabbitdownkeyframes, document.timeline); specifications specification status comment
web animationsthe definition of 'animation()' in that specification.
Animation.cancel() - Web APIs
the
web animations api's cancel() method of the animation interface clears all keyframeeffects caused by this animation and aborts its playback.
... specifications specification status comment
web animationsthe definition of 'animation.cancel()' in that specification.
Animation.commitStyles() - Web APIs
the commitstyles() method of the
web animations api's animation interface commits the end styling state of an animation to the element being animated, even after that animation has been removed.
... examples const divelem = document.queryselector('div'); document.body.addeventlistener('mousemove', evt => { let anim = divelem.animate( { transform: `translate(${ evt.clientx}px, ${evt.clienty}px)` }, { duration: 500, fill: 'forwards' } ); anim.commitstyles(); }); specifications specification status comment
web animationsthe definition of 'commitstyles()' in that specification.
Animation.currentTime - Web APIs
the animation.currenttime property of the
web animations api returns and sets the current time value of the animation in milliseconds, whether running or paused.
... specifications specification status comment
web animationsthe definition of 'currenttime' in that specification.
Animation.effect - Web APIs
the animation.effect property of the
web animations api gets and sets the target effect of an animation.
... specifications specification status comment
web animationsthe definition of 'animation.effect' in that specification.
Animation.finish() - Web APIs
the finish() method of the
web animations api's animation interface sets the current playback time to the end of the animation corresponding to the current playback direction.
... elem.getanimations().foreach( function(animation){ return animation.finish(); } ); specifications specification status comment
web animationsthe definition of 'finish()' in that specification.
Animation.finished - Web APIs
the animation.finished read-only property of the
web animations api returns a promise which resolves once the animation has finished playing.
... examples the following code waits until all animations running on the element elem have finished, then deletes the element from the dom tree: promise.all( elem.getanimations().map( function(animation) { return animation.finished } ) ).then( function() { return elem.remove(); } ); specifications specification status comment
web animationsthe definition of 'animation.finished' in that specification.
Animation.id - Web APIs
the animation.id property of the
web animations api returns or sets a string used to identify the animation.
... examples in the follow the white rabbit example, you can assign the rabbitdownanimation an id like so: rabbitdownanimation.effect.id = "rabbitgo"; specifications specification status comment
web animationsthe definition of 'animation.id' in that specification.
Animation.oncancel - Web APIs
the oncancel property of the
web animations api's animation interface is the event handler for the cancel event.
... animation.oncancel = function() { animation.effect.target.remove(); }; specifications specification status comment
web animationsthe definition of 'animation.oncancel' in that specification.
Animation.onremove - Web APIs
the animation interface's onremove property (from the
web animations api) is the event handler for the remove event.
... specifications specification status comment
web animationsthe definition of 'animation.onremove' in that specification.
Animation.pending - Web APIs
the read-only animation.pending property of the
web animations api indicates whether the animation is currently waiting for an asynchronous operation such as initiating playback or pausing a running animation.
... specifications specification status comment
web animationsthe definition of 'pending' in that specification.
Animation.persist() - Web APIs
the persist() method of the
web animations api's animation interface explicitly persists an animation, when it would otherwise be removed due to the browser's automatically removing filling animations behavior.
... specifications specification status comment
web animationsthe definition of 'persist()' in that specification.
Animation.play() - Web APIs
the play() method of the
web animations api's animation interface starts or resumes playing of an animation.
...cake.addeventlistener("mousedown", growalice, false); cake.addeventlistener("touchstart", growalice, false); specifications specification status comment
web animationsthe definition of 'play()' in that specification.
Animation.playbackRate - Web APIs
the animation.playbackrate property of the
web animations api returns or sets the playback rate of the animation.
...te > .4) { redqueen_alice.playbackrate *= .9; } }, 3000); but clicking or tapping on them causes them to speed up by multiplying their playbackrate: var gofaster = function() { redqueen_alice.playbackrate *= 1.1; } document.addeventlistener("click", gofaster); document.addeventlistener("touchstart", gofaster); specifications specification status comment
web animationsthe definition of 'animation.playbackrate' in that specification.
Animation.ready - Web APIs
the read-only animation.ready property of the
web animations api returns a promise which resolves when the animation is ready to play.
... animation.pause(); animation.ready.then(function() { // displays 'running' alert(animation.playstate); }); animation.play(); specifications specification status comment
web animationsthe definition of 'animation.ready' in that specification.
Animation.replaceState - Web APIs
the read-only animation.replacestate property of the
web animations api returns the replace state of the animation.
... specifications specification status comment
web animationsthe definition of 'animation.replacestate' in that specification.
Animation.startTime - Web APIs
examples in the running on
web animations api example, the we can sync all new animated cats by giving them all the same starttime as the original running cat: var catrunning = document.getelementbyid ("withwaapi").animate(keyframes, timing); /* a function that makes new cats.
... specifications specification status comment
web animationsthe definition of 'animation.starttime' in that specification.
Animation.updatePlaybackRate() - Web APIs
the updateplaybackrate() method of the
web animations api's animation interface sets the speed of an animation after first synchronizing its playback position.
...les a speed selector component would benefit from smooth updating of updateplaybackrate(), as demonstrated below: speedselector.addeventlistener('input', evt => { cartoon.updateplaybackrate(parsefloat(evt.target.value)); cartoon.ready.then(() => { console.log(`playback rate set to ${cartoon.playbackrate}`); }); }); specifications specification status comment
web animationsthe definition of 'updateplaybackrate()' in that specification.
AnimationEffect - Web APIs
the animationeffect interface of the
web animations api defines current and future animation effects like keyframeeffect, which can be passed to animation objects for playing, and keyframeeffectreadonly (which is used by css animations and transitions).
... specifications specification status comment
web animationsthe definition of 'animationeffect' in that specification.
AnimationEvent - Web APIs
<div id="interfacediagram" style="display: inline-block; position: relative; width: 100%; padding-bottom: 11.666666666666666%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 70" preserveaspectratio="xminymin meet"><a xlink:href="/docs/
web/api/event" target="_top"><rect x="1" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="38.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">event</text></a><polyline points="76,25 86,20 86,30 76,25" stroke="#d4dde4" fill="none"/><line x1="86" y1="25" x2="116" y2="...
...25" stroke="#d4dde4"/><a xlink:href="/docs/
web/api/animationevent" target="_top"><rect x="116" y="1" width="140" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="186" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">animationevent</text></a></svg></div> a:hover text { fill: #0095dd; pointer-events: all;} constructor animationevent() creates an animationevent event with the given parameters.
AnimationPlaybackEvent.AnimationPlaybackEvent() - Web APIs
the animationplaybackevent() constructor of the
web animations api returns a new animationplaybackevent object instance.
... specifications specification status comment
web animationsthe definition of 'animationplaybackevent()' in that specification.
AnimationPlaybackEvent - Web APIs
the animationplaybackevent interface of the
web animations api represents animation events.
... specifications specification status comment
web animationsthe definition of 'animationplaybackevent' in that specification.
AnimationTimeline.currentTime - Web APIs
the currenttime read-only property of the
web animations api's animationtimeline interface returns the timeline's current time in milliseconds, or null if the timeline is inactive.
... specifications specification status comment
web animationsthe definition of 'currenttime' in that specification.
AnimationTimeline - Web APIs
the animationtimeline interface of the
web animations api represents the timeline of an animation.
... specifications specification status comment
web animationsthe definition of 'animationtimeline' in that specification.
Attr - Web APIs
<div id="interfacediagram" style="display: inline-block; position: relative; width: 100%; padding-bottom: 11.666666666666666%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 70" preserveaspectratio="xminymin meet"><a xlink:href="/docs/
web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="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="2...
...5" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/
web/api/node" target="_top"><rect x="151" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="188.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">node</text></a><polyline points="226,25 236,20 236,30 226,25" stroke="#d4dde4" fill="none"/><line x1="236" y1="25" x2="266" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/
web/api/attr" target="_top"><rect x="266" y="1" width="75" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="303.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">attr</text>...
AudioBuffer.getChannelData() - Web APIs
var audioctx = new (window.audiocontext || window.
webkitaudiocontext)(); var button = document.queryselector('button'); var pre = document.queryselector('pre'); var myscript = document.queryselector('script'); pre.innerhtml = myscript.innerhtml; // stereo var channels = 2; // create an empty two second stereo buffer at the // sample rate of the audiocontext var framecount = audioctx.samplerate * 2.0; var myarraybuffer = audioctx.createbuffer(2, f...
...t to play an audiobuffer var source = audioctx.createbuffersource(); // set the buffer in the audiobuffersourcenode source.buffer = myarraybuffer; // connect the audiobuffersourcenode to the // destination so we can hear the sound source.connect(audioctx.destination); // start the source playing source.start(); } specification specification status comment
web audio apithe definition of 'getchanneldata' in that specification.
AudioContext.createMediaElementSource() - Web APIs
var audioctx = new (window.audiocontext || window.
webkitaudiocontext)(); var myaudio = document.queryselector('audio'); var pre = document.queryselector('pre'); var myscript = document.queryselector('script'); pre.innerhtml = myscript.innerhtml; // create a mediaelementaudiosourcenode // feed the htmlmediaelement into it var source = audioctx.createmediaelementsource(myaudio); // create a gain node var gainnode = audioctx.creategain(); // create...
... specifications specification status comment
web audio apithe definition of 'createmediaelementsource()' in that specification.
AudioContext.createMediaStreamDestination() - Web APIs
the createmediastreamdestination() method of the audiocontext interface is used to create a new mediastreamaudiodestinationnode object associated with a
webrtc mediastream representing an audio stream, which may be stored in a local file or sent to another computer.
... specifications specification status comment
web audio apithe definition of 'createmediastreamdestination()' in that specification.
AudioContextOptions - Web APIs
the audiocontextoptions dictionary is used to specify configuration options when constructing a new audiocontext object to represent a graph of
web audio nodes.
... let musiccontext = new audiocontext({ latencyhint: "playback", samplerate: 48000 }); specifications specification status comment
web audio apithe definition of 'audiocontextoptions' in that specification.
AudioDestinationNode.maxChannelCount - Web APIs
example the following would set up a simple audio graph, featuring an audiodestinationnode with maxchannelcount of 2: var audioctx = new audiocontext(); var source = audioctx.createmediaelementsource(mymediaelement); source.connect(gainnode); audioctx.destination.maxchannelcount = 2; gainnode.connect(audioctx.destination); to see a more complete implementation, check out one of our mdn
web audio examples, such as voice-change-o-matic or violent theremin.
... specifications specification status comment
web audio apithe definition of 'maxchannelcount' in that specification.
AudioDestinationNode - Web APIs
their speakers), so you can get it hooked up inside an audio graph using only a few lines of code: var audioctx = new audiocontext(); var source = audioctx.createmediaelementsource(mymediaelement); source.connect(gainnode); gainnode.connect(audioctx.destination); to see a more complete implementation, check out one of our mdn
web audio examples, such as voice-change-o-matic or violent theremin.
... specifications specification status comment
web audio apithe definition of 'audiodestinationnode' in that specification.
AudioListener.forwardX - Web APIs
// set up listener and panner position information var width = window.innerwidth; var height = window.innerheight; var xpos = math.floor(width/2); var ypos = math.floor(height/2); var zpos = 295; // define other variables var audiocontext = window.audiocontext || window.
webkitaudiocontext; var audioctx = new audiocontext(); var panner = audioctx.createpanner(); panner.panningmodel = 'hrtf'; panner.distancemodel = 'inverse'; panner.refdistance = 1; panner.maxdistance = 10000; panner.rollofffactor = 1; panner.coneinnerangle = 360; panner.coneouterangle = 0; panner.coneoutergain = 0; if(panner.orientationx) { panner.orientationx.setvalueattime(1, audioctx.currentti...
... specifications specification status comment
web audio apithe definition of 'forwardx' in that specification.
AudioListener.forwardY - Web APIs
// set up listener and panner position information var width = window.innerwidth; var height = window.innerheight; var xpos = math.floor(width/2); var ypos = math.floor(height/2); var zpos = 295; // define other variables var audiocontext = window.audiocontext || window.
webkitaudiocontext; var audioctx = new audiocontext(); var panner = audioctx.createpanner(); panner.panningmodel = 'hrtf'; panner.distancemodel = 'inverse'; panner.refdistance = 1; panner.maxdistance = 10000; panner.rollofffactor = 1; panner.coneinnerangle = 360; panner.coneouterangle = 0; panner.coneoutergain = 0; if(panner.orientationx) { panner.orientationx.setvalueattime(1, audioctx.currentti...
... specifications specification status comment
web audio apithe definition of 'forwardy' in that specification.
AudioListener.forwardZ - Web APIs
// set up listener and panner position information var width = window.innerwidth; var height = window.innerheight; var xpos = math.floor(width/2); var ypos = math.floor(height/2); var zpos = 295; // define other variables var audiocontext = window.audiocontext || window.
webkitaudiocontext; var audioctx = new audiocontext(); var panner = audioctx.createpanner(); panner.panningmodel = 'hrtf'; panner.distancemodel = 'inverse'; panner.refdistance = 1; panner.maxdistance = 10000; panner.rollofffactor = 1; panner.coneinnerangle = 360; panner.coneouterangle = 0; panner.coneoutergain = 0; if(panner.orientationx) { panner.orientationx.setvalueattime(1, audioctx.currentti...
... specifications specification status comment
web audio apithe definition of 'forwardz' in that specification.
AudioListener.positionX - Web APIs
// set up listener and panner position information var width = window.innerwidth; var height = window.innerheight; var xpos = math.floor(width/2); var ypos = math.floor(height/2); var zpos = 295; // define other variables var audiocontext = window.audiocontext || window.
webkitaudiocontext; var audioctx = new audiocontext(); var panner = audioctx.createpanner(); panner.panningmodel = 'hrtf'; panner.distancemodel = 'inverse'; panner.refdistance = 1; panner.maxdistance = 10000; panner.rollofffactor = 1; panner.coneinnerangle = 360; panner.coneouterangle = 0; panner.coneoutergain = 0; if(panner.orientationx) { panner.orientationx.setvalueattime(1, audioctx.currentti...
... specifications specification status comment
web audio apithe definition of 'positionx' in that specification.
AudioListener.positionY - Web APIs
// set up listener and panner position information var width = window.innerwidth; var height = window.innerheight; var xpos = math.floor(width/2); var ypos = math.floor(height/2); var zpos = 295; // define other variables var audiocontext = window.audiocontext || window.
webkitaudiocontext; var audioctx = new audiocontext(); var panner = audioctx.createpanner(); panner.panningmodel = 'hrtf'; panner.distancemodel = 'inverse'; panner.refdistance = 1; panner.maxdistance = 10000; panner.rollofffactor = 1; panner.coneinnerangle = 360; panner.coneouterangle = 0; panner.coneoutergain = 0; if(panner.orientationx) { panner.orientationx.setvalueattime(1, audioctx.currentti...
... specifications specification status comment
web audio apithe definition of 'positiony' in that specification.
AudioListener.positionZ - Web APIs
// set up listener and panner position information var width = window.innerwidth; var height = window.innerheight; var xpos = math.floor(width/2); var ypos = math.floor(height/2); var zpos = 295; // define other variables var audiocontext = window.audiocontext || window.
webkitaudiocontext; var audioctx = new audiocontext(); var panner = audioctx.createpanner(); panner.panningmodel = 'hrtf'; panner.distancemodel = 'inverse'; panner.refdistance = 1; panner.maxdistance = 10000; panner.rollofffactor = 1; panner.coneinnerangle = 360; panner.coneouterangle = 0; panner.coneoutergain = 0; if(panner.orientationx) { panner.orientationx.setvalueattime(1, audioctx.currentti...
... specifications specification status comment
web audio apithe definition of 'positionz' in that specification.
AudioListener.setPosition() - Web APIs
// set up listener and panner position information var width = window.innerwidth; var height = window.innerheight; var xpos = math.floor(width/2); var ypos = math.floor(height/2); var zpos = 295; // define other variables var audiocontext = window.audiocontext || window.
webkitaudiocontext; var audioctx = new audiocontext(); var panner = audioctx.createpanner(); panner.panningmodel = 'hrtf'; panner.distancemodel = 'inverse'; panner.refdistance = 1; panner.maxdistance = 10000; panner.rollofffactor = 1; panner.coneinnerangle = 360; panner.coneouterangle = 0; panner.coneoutergain = 0; if(panner.orientationx) { panner.orientationx.setvalueattime(1, audioctx.currentti...
... specifications specification status comment
web audio apithe definition of 'setposition()' in that specification.
AudioListener.upX - Web APIs
// set up listener and panner position information var width = window.innerwidth; var height = window.innerheight; var xpos = math.floor(width/2); var ypos = math.floor(height/2); var zpos = 295; // define other variables var audiocontext = window.audiocontext || window.
webkitaudiocontext; var audioctx = new audiocontext(); var panner = audioctx.createpanner(); panner.panningmodel = 'hrtf'; panner.distancemodel = 'inverse'; panner.refdistance = 1; panner.maxdistance = 10000; panner.rollofffactor = 1; panner.coneinnerangle = 360; panner.coneouterangle = 0; panner.coneoutergain = 0; if(panner.orientationx) { panner.orientationx.setvalueattime(1, audioctx.currentti...
... specifications specification status comment
web audio apithe definition of 'upx' in that specification.
AudioListener.upY - Web APIs
// set up listener and panner position information var width = window.innerwidth; var height = window.innerheight; var xpos = math.floor(width/2); var ypos = math.floor(height/2); var zpos = 295; // define other variables var audiocontext = window.audiocontext || window.
webkitaudiocontext; var audioctx = new audiocontext(); var panner = audioctx.createpanner(); panner.panningmodel = 'hrtf'; panner.distancemodel = 'inverse'; panner.refdistance = 1; panner.maxdistance = 10000; panner.rollofffactor = 1; panner.coneinnerangle = 360; panner.coneouterangle = 0; panner.coneoutergain = 0; if(panner.orientationx) { panner.orientationx.setvalueattime(1, audioctx.currentti...
... specifications specification status comment
web audio apithe definition of 'upy' in that specification.
AudioListener.upZ - Web APIs
// set up listener and panner position information var width = window.innerwidth; var height = window.innerheight; var xpos = math.floor(width/2); var ypos = math.floor(height/2); var zpos = 295; // define other variables var audiocontext = window.audiocontext || window.
webkitaudiocontext; var audioctx = new audiocontext(); var panner = audioctx.createpanner(); panner.panningmodel = 'hrtf'; panner.distancemodel = 'inverse'; panner.refdistance = 1; panner.maxdistance = 10000; panner.rollofffactor = 1; panner.coneinnerangle = 360; panner.coneouterangle = 0; panner.coneoutergain = 0; if(panner.orientationx) { panner.orientationx.setvalueattime(1, audioctx.currentti...
... specifications specification status comment
web audio apithe definition of 'upz' in that specification.
AudioListener - Web APIs
// set up listener and panner position information var width = window.innerwidth; var height = window.innerheight; var xpos = math.floor(width/2); var ypos = math.floor(height/2); var zpos = 295; // define other variables var audiocontext = window.audiocontext || window.
webkitaudiocontext; var audioctx = new audiocontext(); var panner = audioctx.createpanner(); panner.panningmodel = 'hrtf'; panner.distancemodel = 'inverse'; panner.refdistance = 1; panner.maxdistance = 10000; panner.rollofffactor = 1; panner.coneinnerangle = 360; panner.coneouterangle = 0; panner.coneoutergain = 0; if(panner.orientationx) { panner.orientationx.setvalueattime(1, audioctx.currentti...
... specifications specification status comment
web audio apithe definition of 'audiolistener' in that specification.
AudioNodeOptions - Web APIs
the audionodeoptions dictionary of the
web audio api specifies options that can be used when creating new audionode objects.
...(see audionode.channelcountmode for more information including default values.) specifications specification status comment
web audio apithe definition of 'audionodeoptions' in that specification.
AudioParam.exponentialRampToValueAtTime() - Web APIs
this is pretty useful for fade in/fade out effects: // create audio context var audiocontext = window.audiocontext || window.
webkitaudiocontext; var audioctx = new audiocontext(); // set basic variables for example var myaudio = document.queryselector('audio'); var pre = document.queryselector('pre'); var myscript = document.queryselector('script'); pre.innerhtml = myscript.innerhtml; var exprampplus = document.queryselector('.exp-ramp-plus'); var exprampminus = document.queryselector('.exp-ramp-minus'); // create a me...
... specifications specification status comment
web audio apithe definition of 'exponentialramptovalueattime' in that specification.
AudioParam.linearRampToValueAtTime() - Web APIs
// create audio context var audiocontext = window.audiocontext || window.
webkitaudiocontext; var audioctx = new audiocontext(); // set basic variables for example var myaudio = document.queryselector('audio'); var pre = document.queryselector('pre'); var myscript = document.queryselector('script'); pre.innerhtml = myscript.innerhtml; var linearrampplus = document.queryselector('.linear-ramp-plus'); var linearrampminus = document.queryselector('.linear-ramp-minus'); //...
...ce.connect(gainnode); gainnode.connect(audioctx.destination); // set buttons to do something onclick linearrampplus.onclick = function() { gainnode.gain.linearramptovalueattime(1.0, audioctx.currenttime + 2); } linearrampminus.onclick = function() { gainnode.gain.linearramptovalueattime(0, audioctx.currenttime + 2); } specifications specification status comment
web audio apithe definition of 'linearramptovalueattime' in that specification.
AudioParam.value - Web APIs
the
web audio api's audioparam interface property value gets or sets the value of this audioparam at the current time.
... const audioctx = new audiocontext(); const gainnode = audioctx.creategain(); gainnode.gain.value = 0.4; //which is identical to: gainnode.gain.setvalueattime(0.4, audioctx.currenttime); specifications specification status comment
web audio apithe definition of 'value' in that specification.
AudioParamDescriptor - Web APIs
the audioparamdescriptor dictionary of the
web audio api specifies properties for an audioparam objects.
...(audiocontext, 'white-noise-processor') whitenoisenode.connect(audiocontext.destination) now we can change the gain on the node like this: const gainparam = whitenoisenode.parameters.get('customgain') gainparam.setvalueattime(0, audiocontext.currenttime) gainparam.linearramptovalueattime(0.5, audiocontext.currenttime + 0.5) specifications specification status comment
web audio apithe definition of 'audioparamdescriptor' in that specification.
AudioProcessingEvent - Web APIs
the
web audio api audioprocessingevent represents events that occur when a scriptprocessornode input buffer is ready to be processed.
... note: as of the august 29 2014
web audio api spec publication, this feature has been marked as deprecated, and is soon to be replaced by audioworklet.
AudioScheduledSourceNode - Web APIs
the audioscheduledsourcenode interface—part of the
web audio api—is a parent interface for several types of audio source node interfaces which share the ability to be started and stopped, optionally at specified times.
... specification specification status comment
web audio apithe definition of 'audioscheduledsourcenode' in that specification.
AudioWorkletGlobalScope - Web APIs
the audioworkletglobalscope interface of the
web audio api represents a global execution context for user-supplied code, which defines custom audioworkletprocessor-derived classes.
...we should see the output of console.log calls in the console: const audiocontext = new audiocontext() await audiocontext.audioworklet.addmodule('test-processor.js') const testnode = new audioworkletnode(audiocontext, 'test-processor') testnode.connect(audiocontext.destination) specifications specification status comment
web audio apithe definition of 'audioworkletglobalscope' in that specification.
AudioWorkletNodeOptions - Web APIs
the audioworkletnodeoptions dictionary of the
web audio api is used to specify configuration options when constructing a new audioworkletnode object for custom audio processing.
... examples // fill in example snippet specifications specification status comment
web audio apithe definition of 'audioworkletnodeoptions' in that specification.
AudioWorkletProcessor.process - Web APIs
returning true forces the
web audio api to keep the node alive, while returning false allows the browser to terminate the node if it is neither generating new audio data nor receiving data through its inputs that it is processing.
... // if we don't have any references to it in the main thread return true } // define the customgain parameter used in process method static get parameterdescriptors () { return [{ name: 'customgain', defaultvalue: 1, minvalue: 0, maxvalue: 1, automationrate: 'a-rate' }] } } specifications specification status comment
web audio apithe definition of 'process()' in that specification.
AuthenticatorAssertionResponse - Web APIs
the authenticatorassertionresponse interface of the
web authentication api is returned by credentialscontainer.get() when a publickeycredential is passed, and provides proof to a service that it has a key pair and that the authentication request is valid and approved.
...tions }) .then(function (credentialinfoassertion) { var assertionresponse = credentialinfoassertion.response; // do something specific with the response // send assertion response back to the server // to proceed with the control of the credential }).catch(function (err) { console.error(err); }); specifications specification status comment
web authentication: an api for accessing public key credentials level 1the definition of 'authenticatorassertionresponse interface' in that specification.
AuthenticatorAttestationResponse - Web APIs
the authenticatorattestationresponse interface of the
web authentication api is returned by credentialscontainer.create() when a publickeycredential is passed, and provides a cryptographic root of trust for the new key pair that has been generated.
...blic-key", alg: -7 } ] }; navigator.credentials.create({ publickey }) .then(function (newcredentialinfo) { var response = newcredentialinfo.response; // do something with the response // (sending it back to the relying party server maybe?) }).catch(function (err) { console.error(err); }); specifications specification status comment
web authentication: an api for accessing public key credentials level 1the definition of 'authenticatorattestationresponse interface' in that specification.
AuthenticatorResponse.clientDataJSON - Web APIs
properties after the clientdatajson object is converted from an arraybuffer to a javascript object, it will have the following properties: type a string which is either "
webauthn.get" when an existing credential is retrieved or "
webauthn.create" when a new credential is created.
... examples function arraybuffertostr(buf) { return string.fromcharcode.apply(null, new uint8array(buf)); } // pk is a publickeycredential that is the result of a create() or get() promise var clientdatastr = arraybuffertostr(pk.clientdatajson); var clientdataobj = json.parse(clientdatastr); console.log(clientdataobj.type); // "
webauthn.create" or "
webauthn.get" console.log(clientdataobj.challenge); // base64 encoded string containing the original challenge console.log(clientdataobj.origin); // the window.origin specifications specification status comment
web authentication: an api for accessing public key credentials level 1the definition of 'clientdatajson' in that specification.
AuthenticatorResponse - Web APIs
the authenticatorresponse interface of the
web authentication api is the base interface for interfaces that provide a cryptographic root of trust for a key pair.
...mple.com", displayname: "john doe" }, pubkeycredparams: [ { type: "public-key", alg: -7 } ] }; navigator.credentials.create({ publickey }) .then(function (newcredentialinfo) { var attestationresponse = newcredentialinfo.response; }).catch(function (err) { console.error(err); }); specifications specification status comment
web authentication: an api for accessing public key credentials level 1the definition of 'authenticatorresponse interface' in that specification.
BaseAudioContext.createAnalyser() - Web APIs
var audioctx = new (window.audiocontext || window.
webkitaudiocontext)(); var analyser = audioctx.createanalyser(); ...
...i++) { var v = dataarray[i] / 128.0; var y = v * height/2; if(i === 0) { canvasctx.moveto(x, y); } else { canvasctx.lineto(x, y); } x += slicewidth; } canvasctx.lineto(canvas.width, canvas.height/2); canvasctx.stroke(); }; draw(); specifications specification status comment
web audio apithe definition of 'createanalyser()' in that specification.
BaseAudioContext.createBiquadFilter() - Web APIs
var audioctx = new (window.audiocontext || window.
webkitaudiocontext)(); //set up the different audio nodes we will use for the app var analyser = audioctx.createanalyser(); var distortion = audioctx.createwaveshaper(); var gainnode = audioctx.creategain(); var biquadfilter = audioctx.createbiquadfilter(); var convolver = audioctx.createconvolver(); // connect the nodes together source = audioctx.createmediastreamsource(stream); source.connect(an...
... distortion.connect(biquadfilter); biquadfilter.connect(convolver); convolver.connect(gainnode); gainnode.connect(audioctx.destination); // manipulate the biquad filter biquadfilter.type = "lowshelf"; biquadfilter.frequency.setvalueattime(1000, audioctx.currenttime); biquadfilter.gain.setvalueattime(25, audioctx.currenttime); specifications specification status comment
web audio apithe definition of 'createbiquadfilter()' in that specification.
BaseAudioContext.createBuffer() - Web APIs
var audioctx = new (window.audiocontext || window.
webkitaudiocontext)(); // create an empty three-second stereo buffer at the sample rate of the audiocontext var myarraybuffer = audioctx.createbuffer(2, audioctx.samplerate * 3, audioctx.samplerate); // fill the buffer with white noise; // just random values between -1.0 and 1.0 for (var channel = 0; channel < myarraybuffer.numberofchannels; channel++) { // this gives us the actual arraybuffer th...
...o use when we want to play an audiobuffer var source = audioctx.createbuffersource(); // set the buffer in the audiobuffersourcenode source.buffer = myarraybuffer; // connect the audiobuffersourcenode to the // destination so we can hear the sound source.connect(audioctx.destination); // start the source playing source.start(); specifications specification status comment
web audio apithe definition of 'createbuffer()' in that specification.
BaseAudioContext.createBufferSource() - Web APIs
var audioctx = new (window.audiocontext || window.
webkitaudiocontext)(); var button = document.queryselector('button'); var pre = document.queryselector('pre'); var myscript = document.queryselector('script'); pre.innerhtml = myscript.innerhtml; // stereo var channels = 2; // create an empty two second stereo buffer at the // sample rate of the audiocontext var framecount = audioctx.samplerate * 2.0; var myarraybuffer = audioctx.createbuffer(2, f...
... to play an audiobuffer var source = audioctx.createbuffersource(); // set the buffer in the audiobuffersourcenode source.buffer = myarraybuffer; // connect the audiobuffersourcenode to the // destination so we can hear the sound source.connect(audioctx.destination); // start the source playing source.start(); } specifications specification status comment
web audio apithe definition of 'createbuffersource()' in that specification.
BaseAudioContext.createChannelMerger() - Web APIs
gainnode.connect(merger, 0, 1); splitter.connect(merger, 1, 0); var dest = ac.createmediastreamdestination(); // because we have used a channelmergernode, we now have a stereo // mediastream we can use to pipe the
web audio graph to
webrtc, // mediarecorder, etc.
... merger.connect(dest); }); specifications specification status comment
web audio apithe definition of 'createchannelmerger()' in that specification.
BaseAudioContext.createChannelSplitter() - Web APIs
gainnode.connect(merger, 0, 1); splitter.connect(merger, 1, 0); var dest = ac.createmediastreamdestination(); // because we have used a channelmergernode, we now have a stereo // mediastream we can use to pipe the
web audio graph to
webrtc, // mediarecorder, etc.
... merger.connect(dest); }); specifications specification status comment
web audio apithe definition of 'createchannelsplitter()' in that specification.
BaseAudioContext.createConvolver() - Web APIs
var audioctx = new (window.audiocontext || window.
webkitaudiocontext)(); var convolver = audioctx.createconvolver(); ...
... convolver.buffer = concerthallbuffer; specifications specification status comment
web audio apithe definition of 'createconvolver()' in that specification.
BaseAudioContext.createDelay() - Web APIs
var audiocontext = window.audiocontext || window.
webkitaudiocontext; var audioctx = new audiocontext(); var synthdelay = audioctx.createdelay(5.0); ...
... var delay1; rangesynth.oninput = function() { delay1 = rangesynth.value; synthdelay.delaytime.setvalueattime(delay1, audioctx.currenttime); } specifications specification status comment
web audio apithe definition of 'createdelay()' in that specification.
BaseAudioContext.createGain() - Web APIs
the below snippet wouldn't work as is — for a complete working example, check out our voice-change-o-matic demo (view source.) <div> <button class="mute">mute button</button> </div> var audioctx = new (window.audiocontext || window.
webkitaudiocontext)(); var gainnode = audioctx.creategain(); var mute = document.queryselector('.mute'); var source; if (navigator.mediadevices.getusermedia) { navigator.mediadevices.getusermedia ( // constraints - only audio needed for this app { audio: true }, // success callback function(stream) { source = audioctx.createmediastreamsource(stream); }, // error ca...
... gainnode.gain.setvalueattime(0, audioctx.currenttime); mute.id = "activated"; mute.innerhtml = "unmute"; } else { gainnode.gain.setvalueattime(1, audioctx.currenttime); mute.id = ""; mute.innerhtml = "mute"; } } specifications specification status comment
web audio apithe definition of 'creategain()' in that specification.
BaseAudioContext.createOscillator() - Web APIs
// create
web audio api context var audioctx = new (window.audiocontext || window.
webkitaudiocontext)(); // create oscillator node var oscillator = audioctx.createoscillator(); oscillator.type = 'square'; oscillator.frequency.setvalueattime(3000, audioctx.currenttime); // value in hertz oscillator.connect(audioctx.destination); oscillator.start(); specifications specification status comment ...
...
web audio apithe definition of 'createoscillator' in that specification.
BaseAudioContext.createPanner() - Web APIs
// set up listener and panner position information var width = window.innerwidth; var height = window.innerheight; var xpos = math.floor(width/2); var ypos = math.floor(height/2); var zpos = 295; // define other variables var audiocontext = window.audiocontext || window.
webkitaudiocontext; var audioctx = new audiocontext(); var panner = audioctx.createpanner(); panner.panningmodel = 'hrtf'; panner.distancemodel = 'inverse'; panner.refdistance = 1; panner.maxdistance = 10000; panner.rollofffactor = 1; panner.coneinnerangle = 360; panner.coneouterangle = 0; panner.coneoutergain = 0; if(panner.orientationx) { panner.orientationx.setvalueattime(1, audioctx.currentti...
... specifications specification status comment
web audio apithe definition of 'createpanner()' in that specification.
BaseAudioContext.createStereoPanner() - Web APIs
var audioctx = new (window.audiocontext || window.
webkitaudiocontext)(); var myaudio = document.queryselector('audio'); var pancontrol = document.queryselector('.panning-control'); var panvalue = document.queryselector('.panning-value'); pre.innerhtml = myscript.innerhtml; // create a mediaelementaudiosourcenode // feed the htmlmediaelement into it var source = audioctx.createmediaelementsource(myaudio); // create a stereo panner var pannode = a...
...etvalueattime(pancontrol.value, audioctx.currenttime); panvalue.innerhtml = pancontrol.value; } // connect the mediaelementaudiosourcenode to the pannode // and the pannode to the destination, so we can play the // music and adjust the panning using the controls source.connect(pannode); pannode.connect(audioctx.destination); specifications specification status comment
web audio apithe definition of 'createstereopanner()' in that specification.
BaseAudioContext.createWaveShaper() - Web APIs
var audioctx = new (window.audiocontext || window.
webkitaudiocontext)(); var distortion = audioctx.createwaveshaper(); ...
... distortion.curve = makedistortioncurve(400); distortion.oversample = '4x'; specifications specification status comment
web audio apithe definition of 'createwaveshaper()' in that specification.
BaseAudioContext.currentTime - Web APIs
syntax var curtime = baseaudiocontext.currenttime; example var audiocontext = window.audiocontext || window.
webkitaudiocontext; var audioctx = new audiocontext(); // older
webkit/blink browsers require a prefix ...
... specifications specification status comment
web audio apithe definition of 'currenttime' in that specification.
BaseAudioContext.destination - Web APIs
example note: for a full example implementation, see one of our
web audio demos on the mdn github repo, like voice-change-o-matic.
... var audiocontext = window.audiocontext || window.
webkitaudiocontext; var audioctx = new audiocontext(); // older
webkit/blink browsers require a prefix var oscillatornode = audioctx.createoscillator(); var gainnode = audioctx.creategain(); oscillatornode.connect(gainnode); gainnode.connect(audioctx.destination); specifications specification status comment
web audio apithe definition of 'destination' in that specification.
BasicCardRequest.supportedNetworks - Web APIs
desktopmobilechromeedgefirefoxinternet exploreroperasafariandroid
webviewchrome for androidfirefox for androidopera for androidsafari on iossamsung internetsupportednetworkschrome no support noedge no support ≤18 — 79firefox full support 56notes disabled full support 56notes disabled notes available on...
...
webview android no support nochrome android full support 57firefox android full support 56notes disabled full support 56notes disabled notes available only in nightly builds.disabled from version 56: this feature is behind the dom.payments.request.enabled preferen...
BasicCardResponse.billingAddress - Web APIs
desktopmobilechromeedgefirefoxinternet exploreroperasafariandroid
webviewchrome for androidfirefox for androidopera for androidsafari on iossamsung internetbillingaddresschrome no support noedge no support ≤18 — 79firefox full support 56notes disabled full support 56notes disabled notes available only ...
...
webview android no support nochrome android full support 57firefox android full support 56notes disabled full support 56notes disabled notes available only in nightly builds.disabled from version 56: this feature is behind the dom.payments.request.enabled preference ...
BasicCardResponse.cardNumber - Web APIs
desktopmobilechromeedgefirefoxinternet exploreroperasafariandroid
webviewchrome for androidfirefox for androidopera for androidsafari on iossamsung internetcardnumberchrome no support noedge no support ≤18 — 79firefox full support 56notes disabled full support 56notes disabled notes available only in n...
...
webview android no support nochrome android full support 57firefox android full support 56notes disabled full support 56notes disabled notes available only in nightly builds.disabled from version 56: this feature is behind the dom.payments.request.enabled preference (nee...
BasicCardResponse.cardSecurityCode - Web APIs
desktopmobilechromeedgefirefoxinternet exploreroperasafariandroid
webviewchrome for androidfirefox for androidopera for androidsafari on iossamsung internetcardsecuritycodechrome no support noedge no support ≤18 — 79firefox full support 56notes disabled full support 56notes disabled notes available onl...
...
webview android no support nochrome android full support 57firefox android full support 56notes disabled full support 56notes disabled notes available only in nightly builds.disabled from version 56: this feature is behind the dom.payments.request.enabled preferenc...
BasicCardResponse.cardholderName - Web APIs
desktopmobilechromeedgefirefoxinternet exploreroperasafariandroid
webviewchrome for androidfirefox for androidopera for androidsafari on iossamsung internetcardholdernamechrome no support noedge no support ≤18 — 79firefox full support 56notes disabled full support 56notes disabled notes available only ...
...
webview android no support nochrome android full support 57firefox android full support 56notes disabled full support 56notes disabled notes available only in nightly builds.disabled from version 56: this feature is behind the dom.payments.request.enabled preference ...
BasicCardResponse.expiryMonth - Web APIs
desktopmobilechromeedgefirefoxinternet exploreroperasafariandroid
webviewchrome for androidfirefox for androidopera for androidsafari on iossamsung internetexpirymonthchrome no support noedge no support ≤18 — 79firefox full support 56notes disabled full support 56notes disabled notes available only in ...
...
webview android no support nochrome android full support 57firefox android full support 56notes disabled full support 56notes disabled notes available only in nightly builds.disabled from version 56: this feature is behind the dom.payments.request.enabled preference (ne...
BasicCardResponse.expiryYear - Web APIs
desktopmobilechromeedgefirefoxinternet exploreroperasafariandroid
webviewchrome for androidfirefox for androidopera for androidsafari on iossamsung internetexpiryyearchrome no support noedge no support ≤18 — 79firefox full support 56notes disabled full support 56notes disabled notes available only in n...
...
webview android no support nochrome android full support 57firefox android full support 56notes disabled full support 56notes disabled notes available only in nightly builds.disabled from version 56: this feature is behind the dom.payments.request.enabled preference (nee...
Beacon API - Web APIs
the beacon interface is used to schedule an asynchronous and non-blocking request to a
web server.
... the beacon interface addresses the needs of analytics and diagnostics code that typically attempts to send data to a
web server before unloading the document.
BiquadFilterNode.Q - Web APIs
var audioctx = new (window.audiocontext || window.
webkitaudiocontext)(); //set up the different audio nodes we will use for the app var analyser = audioctx.createanalyser(); var distortion = audioctx.createwaveshaper(); var gainnode = audioctx.creategain(); var biquadfilter = audioctx.createbiquadfilter(); var convolver = audioctx.createconvolver(); // connect the nodes together source = audioctx.createmediastreamsource(stream); source.connect(an...
...convolver.connect(gainnode); gainnode.connect(audioctx.destination); // manipulate the biquad filter biquadfilter.type = "lowshelf"; biquadfilter.frequency.value = 1000; biquadfilter.gain.value = 25; biquadfilter.type = "peaking"; biquadfilter.frequency.value = 1000; biquadfilter.q.value = 100; biquadfilter.gain.value = 25; specifications specification status comment
web audio apithe definition of 'q' in that specification.
BiquadFilterNode.detune - Web APIs
var audioctx = new (window.audiocontext || window.
webkitaudiocontext)(); //set up the different audio nodes we will use for the app var analyser = audioctx.createanalyser(); var distortion = audioctx.createwaveshaper(); var gainnode = audioctx.creategain(); var biquadfilter = audioctx.createbiquadfilter(); var convolver = audioctx.createconvolver(); // connect the nodes together source = audioctx.createmediastreamsource(stream); source.connect(an...
...lyser.connect(distortion); distortion.connect(biquadfilter); biquadfilter.connect(convolver); convolver.connect(gainnode); gainnode.connect(audioctx.destination); // manipulate the biquad filter biquadfilter.type = "lowshelf"; biquadfilter.frequency.value = 1000; biquadfilter.gain.value = 25; biquadfilter.detune.value = 100; specifications specification status comment
web audio apithe definition of 'detune' in that specification.
BiquadFilterNode.frequency - Web APIs
var audioctx = new (window.audiocontext || window.
webkitaudiocontext)(); //set up the different audio nodes we will use for the app var analyser = audioctx.createanalyser(); var distortion = audioctx.createwaveshaper(); var gainnode = audioctx.creategain(); var biquadfilter = audioctx.createbiquadfilter(); var convolver = audioctx.createconvolver(); // connect the nodes together source = audioctx.createmediastreamsource(stream); source.connect(an...
...alyser); analyser.connect(distortion); distortion.connect(biquadfilter); biquadfilter.connect(convolver); convolver.connect(gainnode); gainnode.connect(audioctx.destination); // manipulate the biquad filter biquadfilter.type = "lowshelf"; biquadfilter.frequency.value = 1000; biquadfilter.gain.value = 25; specifications specification status comment
web audio apithe definition of 'frequency' in that specification.
BiquadFilterNode.gain - Web APIs
var audioctx = new (window.audiocontext || window.
webkitaudiocontext)(); //set up the different audio nodes we will use for the app var analyser = audioctx.createanalyser(); var distortion = audioctx.createwaveshaper(); var gainnode = audioctx.creategain(); var biquadfilter = audioctx.createbiquadfilter(); var convolver = audioctx.createconvolver(); // connect the nodes together source = audioctx.createmediastreamsource(stream); source.connect(an...
...alyser); analyser.connect(distortion); distortion.connect(biquadfilter); biquadfilter.connect(convolver); convolver.connect(gainnode); gainnode.connect(audioctx.destination); // manipulate the biquad filter biquadfilter.type = "lowshelf"; biquadfilter.frequency.value = 1000; biquadfilter.gain.value = 25; specifications specification status comment
web audio apithe definition of 'gain' in that specification.
BiquadFilterNode.type - Web APIs
var audioctx = new (window.audiocontext || window.
webkitaudiocontext)(); //set up the different audio nodes we will use for the app var analyser = audioctx.createanalyser(); var distortion = audioctx.createwaveshaper(); var gainnode = audioctx.creategain(); var biquadfilter = audioctx.createbiquadfilter(); var convolver = audioctx.createconvolver(); // connect the nodes together source = audioctx.createmediastreamsource(stream); source.connect(an...
...alyser); analyser.connect(distortion); distortion.connect(biquadfilter); biquadfilter.connect(convolver); convolver.connect(gainnode); gainnode.connect(audioctx.destination); // manipulate the biquad filter biquadfilter.type = "lowshelf"; biquadfilter.frequency.value = 1000; biquadfilter.gain.value = 25; specifications specification status comment
web audio apithe definition of 'type' in that specification.
BiquadFilterNode - Web APIs
var audioctx = new (window.audiocontext || window.
webkitaudiocontext)(); //set up the different audio nodes we will use for the app var analyser = audioctx.createanalyser(); var distortion = audioctx.createwaveshaper(); var gainnode = audioctx.creategain(); var biquadfilter = audioctx.createbiquadfilter(); var convolver = audioctx.createconvolver(); // connect the nodes together source = audioctx.createmediastreamsource(stream); source.connect(an...
... distortion.connect(biquadfilter); biquadfilter.connect(convolver); convolver.connect(gainnode); gainnode.connect(audioctx.destination); // manipulate the biquad filter biquadfilter.type = "lowshelf"; biquadfilter.frequency.setvalueattime(1000, audioctx.currenttime); biquadfilter.gain.setvalueattime(25, audioctx.currenttime); specifications specification status comment
web audio apithe definition of 'biquadfilternode' in that specification.
BlobEvent.timecode - Web APIs
desktopmobilechromeedgefirefoxinternet exploreroperasafariandroid
webviewchrome for androidfirefox for androidopera for androidsafari on iossamsung internettimecode experimentalchrome full support 57edge full support ≤79firefox ?
... ie no support noopera full support 44safari no support no
webview android full support 57chrome android full support 57firefox android ?
Bluetooth.getDevices() - Web APIs
the getdevices() method of bluetooth interface of
web bluetooth api exposes the bluetooth devices this origin is allowed to access.
... specifications specification status comment
web bluetooththe definition of 'getdevices()' in that specification.
Bluetooth - Web APIs
the bluetooth interface of the
web bluetooth api returns a promise to a bluetoothdevice object with the specified options.
... specifications specification status comment
web bluetooththe definition of 'bluetooth' in that specification.
BluetoothRemoteGATTCharacteristic - Web APIs
the bluetoothremotegattcharacteristic interface of the
web bluetooth api represents a gatt characteristic, which is a basic data element that provides further information about a peripheral’s service.
... specifications specification status comment
web bluetooththe definition of 'bluetoothremotegattcharacteristic' in that specification.
BluetoothRemoteGATTServer - Web APIs
the bluetoothremotegattserver interface of the
web bluetooth api represents a gatt server on a remote device.
... specifications specification status comment
web bluetooththe definition of 'bluetoothremotegattserver' in that specification.
BluetoothRemoteGATTService - Web APIs
the bluetoothremotegattservice interface of the
web bluetooth api represents a service provided by a gatt server, including a device, a list of referenced services, and a list of the characteristics of this service.
... specifications specification status comment
web bluetooththe definition of 'bluetoothremotegattservice' in that specification.
BroadcastChannel - Web APIs
note: this feature is available in
web workers.
... <div id="interfacediagram" style="display: inline-block; position: relative; width: 100%; padding-bottom: 11.666666666666666%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 70" preserveaspectratio="xminymin meet"><a xlink:href="/docs/
web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="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/broa...
CSSCounterStyleRule - Web APIs
eritance this interface inherits from the following parent interfaces: <div id="interfacediagram" style="display: inline-block; position: relative; width: 100%; padding-bottom: 11.666666666666666%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 70" preserveaspectratio="xminymin meet"><a xlink:href="/docs/
web/api/cssrule" target="_top"><rect x="1" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="38.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">cssrule</text></a><polyline points="76,25 86,20 86,30 76,25" stroke="#d4dde4" fill="none"/><line x1="86" y1="25" x2="116" ...
...y2="25" stroke="#d4dde4"/><a xlink:href="/docs/
web/api/csscounterstylerule" target="_top"><rect x="116" y="1" width="190" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="211" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">csscounterstylerule</text></a></svg></div> a:hover text { fill: #0095dd; pointer-events: all;} properties this interface also inherits properties from its parent cssrule.
CSSPrimitiveValue - Web APIs
<div id="interfacediagram" style="display: inline-block; position: relative; width: 100%; padding-bottom: 11.666666666666666%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 70" preserveaspectratio="xminymin meet"><a xlink:href="/docs/
web/api/cssvalue" target="_top"><rect x="1" y="1" width="80" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="41" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">cssvalue</text></a><polyline points="81,25 91,20 91,30 81,25" stroke="#d4dde4" fill="none"/><line x1="91" y1="25" x2="121" ...
...y2="25" stroke="#d4dde4"/><a xlink:href="/docs/
web/api/cssprimitivevalue" target="_top"><rect x="121" y="1" width="170" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="206" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">cssprimitivevalue</text></a></svg></div> a:hover text { fill: #0095dd; pointer-events: all;} properties inherits properties from its parent, cssvalue.
CSSStyleRule.selectorText - Web APIs
desktopmobilechromeedgefirefoxinternet exploreroperasafariandroid
webviewchrome for androidfirefox for androidopera for androidsafari on iossamsung internetselectortextchrome full support 1edge full support 12firefox full support 1ie full support 9opera full support ...
... yessafari full support 6
webview android full support 4.4chrome android full support 18firefox android full support 4opera android full support yessafari ios full support yessamsung internet android full support 1.0legend full support full support ...
CSSValueList - Web APIs
<div id="interfacediagram" style="display: inline-block; position: relative; width: 100%; padding-bottom: 11.666666666666666%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 70" preserveaspectratio="xminymin meet"><a xlink:href="/docs/
web/api/cssvalue" target="_top"><rect x="1" y="1" width="80" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="41" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">cssvalue</text></a><polyline points="81,25 91,20 91,30 81,25" stroke="#d4dde4" fill="none"/><line x1="91" y1="25" x2="121" ...
...y2="25" stroke="#d4dde4"/><a xlink:href="/docs/
web/api/cssvaluelist" target="_top"><rect x="121" y="1" width="120" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="181" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">cssvaluelist</text></a></svg></div> a:hover text { fill: #0095dd; pointer-events: all;} properties inherits properties from its parent, cssvalue.
Optimizing canvas - Web APIs
« previousnext » the <canvas> element is one of the most widely used tools for rendering 2d graphics on the
web.
... however, when
websites and apps push the canvas api to its limits, performance begins to suffer.
ChannelMergerNode - Web APIs
gainnode.connect(merger, 0, 1); splitter.connect(merger, 1, 0); var dest = ac.createmediastreamdestination(); // because we have used a channelmergernode, we now have a stereo // mediastream we can use to pipe the
web audio graph to
webrtc, // mediarecorder, etc.
... merger.connect(dest); }); specifications specification status comment
web audio apithe definition of 'channelmergernode' in that specification.
ChannelSplitterNode.ChannelSplitterNode() - Web APIs
the channelsplitternode() constructor of the
web audio api creates a new channelsplitternode object instance, representing a node that splits the input into a separate output for each of the source node's audio channels.
... example var ac = new audiocontext(); var options = { numberofoutputs : 2 } var mysplitter = new channelsplitternode(ac, options); specifications specification status comment
web audio apithe definition of 'channelsplitternode' in that specification.
ChannelSplitterNode - Web APIs
gainnode.connect(merger, 0, 1); splitter.connect(merger, 1, 0); var dest = ac.createmediastreamdestination(); // because we have used a channelmergernode, we now have a stereo // mediastream we can use to pipe the
web audio graph to
webrtc, // mediarecorder, etc.
... merger.connect(dest); }); specifications specification status comment
web audio apithe definition of 'channelsplitternode' in that specification.
CharacterData - Web APIs
<div id="interfacediagram" style="display: inline-block; position: relative; width: 100%; padding-bottom: 11.666666666666666%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 70" preserveaspectratio="xminymin meet"><a xlink:href="/docs/
web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="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="2...
...5" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/
web/api/node" target="_top"><rect x="151" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="188.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">node</text></a><polyline points="226,25 236,20 236,30 226,25" stroke="#d4dde4" fill="none"/><line x1="236" y1="25" x2="266" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/
web/api/characterdata" target="_top"><rect x="266" y="1" width="130" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="331" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">cha...
Clipboard - Web APIs
the clipboard api can be used to implement cut, copy, and paste features within a
web application.
... for
webextensions, you can request the clipboardread and clipboardwrite permissions to be able to use clipboard.readtext() and clipboard.writetext().
CompositionEvent - Web APIs
<div id="interfacediagram" style="display: inline-block; position: relative; width: 100%; padding-bottom: 11.666666666666666%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 70" preserveaspectratio="xminymin meet"><a xlink:href="/docs/
web/api/event" target="_top"><rect x="1" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="38.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">event</text></a><polyline points="76,25 86,20 86,30 76,25" stroke="#d4dde4" fill="none"/><line x1="86" y1="25" x2="116" y2="...
...25" stroke="#d4dde4"/><a xlink:href="/docs/
web/api/uievent" target="_top"><rect x="116" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="153.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">uievent</text></a><polyline points="191,25 201,20 201,30 191,25" stroke="#d4dde4" fill="none"/><line x1="201" y1="25" x2="231" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/
web/api/compositionevent" target="_top"><rect x="231" y="1" width="160" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="311" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">compositio...
console.debug() - Web APIs
the console method debug() outputs a message to the
web console at the "debug" log level.
... note: this feature is available in
web workers.
console.log() - Web APIs
the console method log() outputs a message to the
web console.
... note: this feature is available in
web workers.
Console.timeEnd() - Web APIs
note: this feature is available in
web workers.
...once stopped, the elapsed time is automatically displayed in the
web console along with an indicator that the time has ended.
DocumentTimeline - Web APIs
the documenttimeline interface of the the
web animations api represents animation timelines, including the default document timeline (accessed via document.timeline).
...animations: const cats = document.queryselectorall('.sharedtimelinecat'); const sharedtimeline = new documenttimeline({ origintime: 500 }); for (const cat of cats) { const catkeyframes = new keyframeeffect(cat, keyframes, timing); const catanimation = new animation(catkeyframes, sharedtimeline); catanimation.play(); } specifications specification status comment
web animationsthe definition of 'documenttimeline' in that specification.
DocumentType - Web APIs
<div id="interfacediagram" style="display: inline-block; position: relative; width: 100%; padding-bottom: 11.666666666666666%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 70" preserveaspectratio="xminymin meet"><a xlink:href="/docs/
web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="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" x...
...2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/
web/api/node" target="_top"><rect x="151" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="188.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">node</text></a><polyline points="226,25 236,20 236,30 226,25" stroke="#d4dde4" fill="none"/><line x1="236" y1="25" x2="266" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/
web/api/documenttype" target="_top"><rect x="266" y="1" width="120" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="326" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">document...
How to create a DOM tree - Web APIs
it applies to all gecko-based applications (such as firefox) both in privileged (extensions) and unprivileged (
web pages) code.
... 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.
How whitespace is handled by HTML, CSS, and in the DOM - Web APIs
�world!</span>◦◦◦</h1> after that, any space immediately following another space (even across two separate inline elements) is ignored, so we end up with: <h1>◦hello◦<span>world!</span>◦</h1> and finally, sequences of spaces at the beginning and end of a line are removed, so we finally get this: <h1>hello◦<span>world!</span></h1> this is why people visiting the
web page will simply see the phrase "hello world!" nicely written at the top of the page, rather than a weirdly indented "hello" followed but an even more weirdly indented "world!" on the line below that.
...people viewing the
web page see the words "hello" and "world!" on 2 separate lines as you’d expect 2 <div>s to be laid out.
EXT_disjoint_timer_query.getQueryEXT() - Web APIs
the ext_disjoint_timer_query.getqueryext() method of the
webgl api returns information about a query target.
... return value depends on pname: if pname is ext.current_query_ext: a
webglquery object, which is the currently active query for the given target.
EXT_disjoint_timer_query.getQueryObjectEXT() - Web APIs
the ext_disjoint_timer_query.getqueryobjectext() method of the
webgl api returns the state of a query object.
... syntax any ext.getqueryobjectext(query, pname); parameters query a
webglquery object from which to return information.
EXT_disjoint_timer_query.queryCounterEXT() - Web APIs
the ext_disjoint_timer_query.querycounterext() method of the
webgl api records the current time into the corresponding query object.
... syntax void ext.querycounterext(query, target); parameters query a
webglquery object for which to record the current time.
EcKeyGenParams - Web APIs
the eckeygenparams dictionary of the
web crypto api represents the object that should be passed as the algorithm parameter into subtlecrypto.generatekey(), when generating any elliptic-curve-based key pair: that is, when the algorithm is identified as either of ecdsa or ecdh.
... specifications specification status comment
web cryptography apithe definition of 'subtlecrypto.eckeygenparams' in that specification.
EcKeyImportParams - Web APIs
the eckeyimportparams dictionary of the
web crypto api represents the object that should be passed as the algorithm parameter into subtlecrypto.importkey() or subtlecrypto.unwrapkey(), when generating any elliptic-curve-based key pair: that is, when the algorithm is identified as either of ecdsa or ecdh.
... specifications specification status comment
web cryptography apithe definition of 'subtlecrypto.eckeyimportparams' in that specification.
EcdhKeyDeriveParams - Web APIs
the ecdhkeyderiveparams dictionary of the
web crypto api represents the object that should be passed as the algorithm parameter into subtlecrypto.derivekey(), when using the ecdh algorithm.
... specifications specification status comment
web cryptography apithe definition of 'subtlecrypto.ecdhkeyderiveparams' in that specification.
EcdsaParams - Web APIs
the ecdsaparams dictionary of the
web crypto api represents the object that should be passed as the algorithm parameter into subtlecrypto.sign() or subtlecrypto.verify() when using the ecdsa algorithm.
... specifications specification status comment
web cryptography apithe definition of 'subtlecrypto.ecdsaparams' in that specification.
EffectTiming.delay - Web APIs
the effecttiming dictionary's delay property in the
web animations api represents the number of milliseconds to delay the start of the animation.
...rs.foreach(function(el) { // animate each tear el.animate( tearsfalling, { delay: getrandommsrange(-1000, 1000), // randomized for each tear duration: getrandommsrange(2000, 6000), // randomized for each tear iterations: infinity, easing: "cubic-bezier(0.6, 0.04, 0.98, 0.335)" }); }); specifications specification status comment
web animationsthe definition of 'delay' in that specification.
EffectTiming.direction - Web APIs
the direction property of the
web animations api dictionary effecttiming indicates an animation's playback direction along its timeline, as well as its behavior when it reaches the end of an iteration element.animate(), keyframeeffectreadonly(), and keyframeeffect() all accept an object of timing properties including direction.
...down by passing her an alternate value for her direction property: // get alice's arm, and wave it up and down document.getelementbyid("alice_arm").animate([ { transform: 'rotate(10deg)' }, { transform: 'rotate(-40deg)' } ], { easing: 'steps(2, end)', iterations: infinity, direction: 'alternate', duration: 600 }); specifications specification status comment
web animationsthe definition of 'direction' in that specification.
EffectTiming.duration - Web APIs
the duration property of the dictionary effecttiming in the
web animations api specifies the duration in milliseconds that a single iteration (from beginning to end) the animation should take to complete.
....foreach(function(el) { // animate each tear el.animate( tearsfalling, { delay: getrandommsrange(-1000, 1000), // randomized for each tear duration: getrandommsrange(2000, 6000), // randomized for each tear iterations: infinity, easing: "cubic-bezier(0.6, 0.04, 0.98, 0.335)" }); }); specifications specification status comment
web animationsthe definition of 'duration' in that specification.
EffectTiming.easing - Web APIs
the effecttiming dictionary's easing property in the
web animations api specifies the timing function used to scale the time to produce easing effects, where easing is the rate of the animation's change over time.
... the red queen var redqueen_alice_sprite = document.getelementbyid('red-queen_and_alice_sprite'); // animate alice and the red queen using steps() var redqueen_alice = redqueen_alice_sprite.animate( spriteframes, { easing: 'steps(7, end)', direction: "reverse", duration: 600, playbackrate: 1, iterations: infinity }); specifications specification status comment
web animationsthe definition of 'easing' in that specification.
EffectTiming.endDelay - Web APIs
the enddelay property of the effecttiming dictionary (part of the
web animations api) indicates the number of milliseconds to delay after the active period of an animation sequence.
... specifications specification status comment
web animationsthe definition of 'enddelay' in that specification.
EffectTiming.fill - Web APIs
the
web animations api's effecttiming dictionary's fill property specifies a fill mode, which defines how the element to which the animation is applied should look when the animation sequence is not actively running, such as before the time specified by iterationstart or after animation's end time.
... animation.commitstyles(); animation.cancel(); }); specifications specification status comment
web animationsthe definition of 'fill' in that specification.
EffectTiming.iterations - Web APIs
the
web animations api dictionary effecttiming's iterations property specifies the number of times the animation should repeat.
...open by passing infinity as the value for her iterations property: // get alice's arm, and wave it up and down document.getelementbyid("alice_arm").animate([ { transform: 'rotate(10deg)' }, { transform: 'rotate(-40deg)' } ], { easing: 'steps(2, end)', iterations: infinity, direction: 'alternate', duration: 600 }); specifications specification status comment
web animationsthe definition of 'iterations' in that specification.
EffectTiming - Web APIs
the effecttiming dictionary, part of the
web animations api, is used by element.animate(), keyframeeffectreadonly(), and keyframeeffect() to describe timing properties for animation effects.
... specifications specification status comment
web animationsthe definition of 'effecttiming' in that specification.
Element.closest() - Web APIs
.closest(":not(div)"); // returns the closest ancestor which is not a div, here it is the outmost article polyfill for browsers that do not support element.closest(), but carry support for element.matches() (or a prefixed equivalent, meaning ie9+), a polyfill exists: if (!element.prototype.matches) { element.prototype.matches = element.prototype.msmatchesselector || element.prototype.
webkitmatchesselector; } if (!element.prototype.closest) { element.prototype.closest = function(s) { var el = this; do { if (element.prototype.matches.call(el, s)) return el; el = el.parentelement || el.parentnode; } while (el !== null && el.nodetype === 1); return null; }; } however, if you really do require ie 8 support, then the following polyfill will do the job...
...however, it will only support css 2.1 selectors in ie 8, and it can cause severe lag spikes in production
websites.
Element.currentStyle - Web APIs
desktopmobilechromeedgefirefoxinternet exploreroperasafariandroid
webviewchrome for androidfirefox for androidopera for androidsafari on iossamsung internetcurrentstyle non-standardchrome no support noedge no support nofirefox no support noie full support 6opera no support...
... nosafari no support no
webview android no support nochrome android no support nofirefox android no support noopera android no support nosafari ios no support nosamsung internet android no support nolegend full support full support no support no supportnon-standard.
Element.getAnimations() - Web APIs
note: this array includes css animations, css transitions, and
web animations.
... promise.all( elem.getanimations({ subtree: true }) .map(animation => animation.finished) ).then(() => elem.remove()); specifications specification status comment
web animationsthe definition of 'animatable.getanimations()' in that specification.
Element.innerHTML - Web APIs
security considerations it is not uncommon to see innerhtml used to insert text into a
web page.
... example this example uses innerhtml to create a mechanism for logging messages into a box on a
web page.
Element.matches() - Web APIs
not support element.matches() or element.matchesselector(), but include support for document.queryselectorall(), a polyfill exists: if (!element.prototype.matches) { element.prototype.matches = element.prototype.matchesselector || element.prototype.mozmatchesselector || element.prototype.msmatchesselector || element.prototype.omatchesselector || element.prototype.
webkitmatchesselector || function(s) { var matches = (this.document || this.ownerdocument).queryselectorall(s), i = matches.length; while (--i >= 0 && matches.item(i) !== this) {} return i > -1; }; } however, given the practicality of supporting older browsers, the following should suffice for most (if not all) practical cases (i.e.
... if (!element.prototype.matches) { element.prototype.matches = element.prototype.msmatchesselector || element.prototype.
webkitmatchesselector; } specification specification status comment domthe definition of 'element.prototype.matches' in that specification.
Element.runtimeStyle - Web APIs
desktopmobilechromeedgefirefoxinternet exploreroperasafariandroid
webviewchrome for androidfirefox for androidopera for androidsafari on iossamsung internetruntimestyle non-standardchrome no support noedge no support nofirefox no support noie full support 6opera no support...
... nosafari no support no
webview android no support nochrome android no support nofirefox android no support noopera android no support nosafari ios no support nosamsung internet android no support nolegend full support full support no support no supportnon-standard.
Element.scrollLeftMax - Web APIs
desktopmobilechromeedgefirefoxinternet exploreroperasafariandroid
webviewchrome for androidfirefox for androidopera for androidsafari on iossamsung internetscrollleftmax non-standardchrome no support noedge no support nofirefox full support 16ie no support noopera no suppo...
...rt nosafari no support no
webview android no support nochrome android no support nofirefox android full support 16opera android no support nosafari ios no support nosamsung internet android no support nolegend full support full support no support no supportnon-standard.
Element: scroll event - Web APIs
bubbles no cancelable no interface event event handler property onscroll note: in ios ui
webviews, scroll events are not fired while scrolling is taking place; they are only fired after the scrolling has completed.
...safari and wk
webviews are not affected by this bug.
ErrorEvent - Web APIs
<div id="interfacediagram" style="display: inline-block; position: relative; width: 100%; padding-bottom: 20%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 120" preserveaspectratio="xminymin meet"><a xlink:href="/docs/
web/api/event" target="_top"><rect x="1" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="38.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">event</text></a><polyline points="76,25 86,20 86,30 76,25" stroke="#d4dde4" fill="none"/><line x1="86" y1="25" x2="116" y2="...
...25" stroke="#d4dde4"/><a xlink:href="/docs/
web/api/errorevent" target="_top"><rect x="116" y="1" width="100" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="166" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">errorevent</text></a></svg></div> a:hover text { fill: #0095dd; pointer-events: all;} properties also inherits properties from its parent event.
EventTarget.dispatchEvent() - Web APIs
desktopmobilechromeedgefirefoxinternet exploreroperasafariandroid
webviewchrome for androidfirefox for androidopera for androidsafari on iossamsung internetdispatcheventchrome full support 4edge full support 12firefox full support 2ie full support 9 full support ...
... 9 no support 6 — 11notes alternate name notes older versions of ie supported an equivalent, proprietary eventtarget.fireevent() method.alternate name uses the non-standard name: fireeventopera full support 9safari full support 3.2
webview android full support 4chrome android full support 18firefox android full support 4opera android full support 10.1safari ios full support 3samsung internet android full support ...
EventTarget - Web APIs
<div id="interfacediagram" style="display: inline-block; position: relative; width: 100%; padding-bottom: 11.666666666666666%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 70" preserveaspectratio="xminymin meet"><a xlink:href="/docs/
web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="50" fill="#f4f7f8" 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></svg></div> a:hover text { fill: #0095dd; pointer-events: all;} constructor eventta...
... see also
webidl bindings.
ExtendableEvent - Web APIs
<div id="interfacediagram" style="display: inline-block; position: relative; width: 100%; padding-bottom: 8.571428571428571%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-20 0 700 60" preserveaspectratio="xminymin meet"><a xlink:href="/docs/
web/api/event" target="_top"><rect x="1" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="38.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">event</text></a><polyline points="76,25 86,20 86,30 76,25" stroke="#d4dde4" fill="none"/><line x1="86" y1="25" x2="116" y2="...
...25" stroke="#d4dde4"/><a xlink:href="/docs/
web/api/extendableevent" target="_top"><rect x="116" y="1" width="150" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="191" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">extendableevent</text></a></svg></div> a:hover text { fill: #0095dd; pointer-events: all;} note: this interface is only available when the global scope is a serviceworkerglobalscope.
FederatedCredential - Web APIs
desktopmobilechromeedgefirefoxinternet exploreroperasafariandroid
webviewchrome for androidfirefox for androidopera for androidsafari on iossamsung internetfederatedcredential() constructor non-standardchrome full support 51edge full support ≤79firefox ?
...
webview android full support 51chrome android full support 51firefox android ?
FederatedCredential.protocol - Web APIs
desktopmobilechromeedgefirefoxinternet exploreroperasafariandroid
webviewchrome for androidfirefox for androidopera for androidsafari on iossamsung internetprotocol experimentalchrome full support 51edge full support ≤79firefox ?
...
webview android full support 51chrome android full support 51firefox android ?
FederatedCredential.provider - Web APIs
desktopmobilechromeedgefirefoxinternet exploreroperasafariandroid
webviewchrome for androidfirefox for androidopera for androidsafari on iossamsung internetprovider experimentalchrome full support 51edge full support ≤79firefox ?
...
webview android full support 51chrome android full support 51firefox android ?
FetchEvent.navigationPreload - Web APIs
desktopmobilechromeedgefirefoxinternet exploreroperasafariandroid
webviewchrome for androidfirefox for androidopera for androidsafari on iossamsung internetnavigationpreload experimentalchrome full support 59edge full support ≤79firefox ?
... ie no support noopera full support 46safari no support no
webview android full support 59chrome android full support 59firefox android ?
FileSystem.name - Web APIs
desktopmobilechromeedgefirefoxinternet exploreroperasafariandroid
webviewchrome for androidfirefox for androidopera for androidsafari on iossamsung internetnamechrome full support 7edge full support ≤18firefox full support 50ie no support noopera full support ...
... 15safari full support 11.1
webview android full support ≤37chrome android full support 18firefox android full support 50opera android full support 14safari ios full support 11.3samsung internet android full support 1.0legend full support full support no support no support ...
FileSystem.root - Web APIs
desktopmobilechromeedgefirefoxinternet exploreroperasafariandroid
webviewchrome for androidfirefox for androidopera for androidsafari on iossamsung internetrootchrome full support 7edge full support ≤18firefox full support 50ie no support noopera full support ...
... 15safari full support 11.1
webview android full support ≤37chrome android full support 18firefox android full support 50opera android full support 14safari ios full support 11.3samsung internet android full support 1.0legend full support full support no support no support ...
FileSystemDirectoryEntry.createReader() - Web APIs
desktopmobilechromeedgefirefoxinternet exploreroperasafariandroid
webviewchrome for androidfirefox for androidopera for androidsafari on iossamsung internetcreatereader experimentalchrome full support 13edge full support 79firefox full support 50ie no support noopera no su...
...pport nosafari full support 11.1
webview android full support ≤37chrome android full support 18firefox android full support 50opera android no support nosafari ios full support 11.3samsung internet android full support yeslegend full support full support no support no supportexperimental.
FileSystemEntry.filesystem - Web APIs
desktopmobilechromeedgefirefoxinternet exploreroperasafariandroid
webviewchrome for androidfirefox for androidopera for androidsafari on iossamsung internetfilesystem experimentalchrome full support 8edge full support 79firefox full support 50ie no support noopera no suppo...
...rt nosafari full support 11.1
webview android full support ≤37chrome android full support 18firefox android full support 50opera android no support nosafari ios full support 11.3samsung internet android full support yeslegend full support full support no support no supportexperimental.
FileSystemEntry.fullPath - Web APIs
desktopmobilechromeedgefirefoxinternet exploreroperasafariandroid
webviewchrome for androidfirefox for androidopera for androidsafari on iossamsung internetfullpath experimentalchrome full support 8edge full support 79firefox full support 50ie no support noopera no support...
... nosafari full support 11.1
webview android full support ≤37chrome android full support 18firefox android full support 50opera android no support nosafari ios full support 11.3samsung internet android full support yeslegend full support full support no support no supportexperimental.
FileSystemEntry.getParent() - Web APIs
desktopmobilechromeedgefirefoxinternet exploreroperasafariandroid
webviewchrome for androidfirefox for androidopera for androidsafari on iossamsung internetgetparent experimentalchrome full support 8edge full support 79firefox no support noie no support noopera no support ...
... nosafari full support 11.1
webview android full support ≤37chrome android full support 18firefox android no support noopera android no support nosafari ios full support 11.3samsung internet android full support yeslegend full support full support no support no supportexperimental.
FileSystemEntry.isDirectory - Web APIs
desktopmobilechromeedgefirefoxinternet exploreroperasafariandroid
webviewchrome for androidfirefox for androidopera for androidsafari on iossamsung internetisdirectory experimentalchrome full support 8edge full support 79firefox full support 50ie no support noopera no supp...
...ort nosafari full support 11.1
webview android full support ≤37chrome android full support 18firefox android full support 50opera android no support nosafari ios full support 11.3samsung internet android full support yeslegend full support full support no support no supportexperimental.
FileSystemEntry.isFile - Web APIs
desktopmobilechromeedgefirefoxinternet exploreroperasafariandroid
webviewchrome for androidfirefox for androidopera for androidsafari on iossamsung internetisfile experimentalchrome full support 8edge full support 79firefox full support 50ie no support noopera no support ...
... nosafari full support 11.1
webview android full support ≤37chrome android full support 18firefox android full support 50opera android no support nosafari ios full support 11.3samsung internet android full support yeslegend full support full support no support no supportexperimental.
FileSystemEntry.name - Web APIs
desktopmobilechromeedgefirefoxinternet exploreroperasafariandroid
webviewchrome for androidfirefox for androidopera for androidsafari on iossamsung internetname experimentalchrome full support 8edge full support 79firefox full support 50ie no support noopera no support ...
... nosafari full support 11.1
webview android full support ≤37chrome android full support 18firefox android full support 50opera android no support nosafari ios full support 11.3samsung internet android full support yeslegend full support full support no support no supportexperimental.
FileSystemFileEntry.file() - Web APIs
desktopmobilechromeedgefirefoxinternet exploreroperasafariandroid
webviewchrome for androidfirefox for androidopera for androidsafari on iossamsung internetfilechrome full support 8edge full support 79firefox full support 50ie no support noopera no support ...
... nosafari full support 11.1
webview android full support ≤37chrome android full support 18firefox android full support 50opera android no support nosafari ios full support 11.3samsung internet android full support yeslegend full support full support no support no support ...
FileHandle API - Web APIs
do not use it on production sites facing the
web: it will not work for every user.
...discussions on public-
webapps led to the conclusion that the api would behave poorly in the case of different entities writing concurrently to the same file.
FocusEvent - Web APIs
<div id="interfacediagram" style="display: inline-block; position: relative; width: 100%; padding-bottom: 11.666666666666666%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 70" preserveaspectratio="xminymin meet"><a xlink:href="/docs/
web/api/event" target="_top"><rect x="1" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="38.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">event</text></a><polyline points="76,25 86,20 86,30 76,25" stroke="#d4dde4" fill="none"/><line x1="86" y1="25" x2="116" y2="...
...25" stroke="#d4dde4"/><a xlink:href="/docs/
web/api/uievent" target="_top"><rect x="116" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="153.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">uievent</text></a><polyline points="191,25 201,20 201,30 191,25" stroke="#d4dde4" fill="none"/><line x1="201" y1="25" x2="231" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/
web/api/focusevent" target="_top"><rect x="231" y="1" width="100" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="281" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">focusevent</text...
FontFace.display - Web APIs
desktopmobilechromeedgefirefoxinternet exploreroperasafariandroid
webviewchrome for androidfirefox for androidopera for androidsafari on iossamsung internetdisplay experimentalchrome full support 60edge full support 79firefox full support 58ie ?
... opera full support 47safari full support 11
webview android full support 60chrome android full support 60firefox android no support noopera android full support 44safari ios no support nosamsung internet android full support 8.0legend full support full support no support no support ...
FontFaceSetLoadEvent.FontFaceSetLoadEvent() - Web APIs
desktopmobilechromeedgefirefoxinternet exploreroperasafariandroid
webviewchrome for androidfirefox for androidopera for androidsafari on iossamsung internetfontfacesetloadevent() constructor experimentalchrome full support 57edge full support ≤79firefox ?
...
webview android no support nochrome android full support 57firefox android ?
FontFaceSetLoadEvent.fontfaces - Web APIs
desktopmobilechromeedgefirefoxinternet exploreroperasafariandroid
webviewchrome for androidfirefox for androidopera for androidsafari on iossamsung internetfontfaces experimentalchrome full support 35edge full support ≤79firefox full support yesie ?
...
webview android no support nochrome android full support 35firefox android full support yesopera android full support 22safari ios ?
GainNode.gain - Web APIs
the below snippet wouldn't work as is — for a complete working example, check out our voice-change-o-matic demo (view source.) <div> <button class="mute">mute button</button> </div> var audioctx = new (window.audiocontext || window.
webkitaudiocontext)(); var gainnode = audioctx.creategain(); var mute = document.queryselector('.mute'); var source; if (navigator.mediadevices.getusermedia) { navigator.mediadevices.getusermedia ( // constraints - only audio needed for this app { audio: true }, // success callback function(stream) { source = audioctx.createmediastreamsource(stream); }, // error ca...
... gainnode.gain.setvalueattime(0, audioctx.currenttime); mute.id = "activated"; mute.innerhtml = "unmute"; } else { gainnode.gain.setvalueattime(1, audioctx.currenttime); mute.id = ""; mute.innerhtml = "mute"; } } specifications specification status comment
web audio apithe definition of 'gain' in that specification.
GainNode - Web APIs
the below snippet wouldn't work as is — for a complete working example, check out our voice-change-o-matic demo (view source.) <div> <button class="mute">mute button</button> </div> var audioctx = new (window.audiocontext || window.
webkitaudiocontext)(); var gainnode = audioctx.creategain(); var mute = document.queryselector('.mute'); var source; if (navigator.mediadevices.getusermedia) { navigator.mediadevices.getusermedia ( // constraints - only audio needed for this app { audio: true }, // success callback function(stream) { source = audioctx.createmediastreamsource(stream); }, // error ca...
... gainnode.gain.setvalueattime(0, audioctx.currenttime); mute.id = "activated"; mute.innerhtml = "unmute"; } else { gainnode.gain.setvalueattime(1, audioctx.currenttime); mute.id = ""; mute.innerhtml = "mute"; } } specifications specification status comment
web audio apithe definition of 'gainnode' in that specification.
Gamepad.buttons - Web APIs
syntax readonly attribute gamepadbutton[] buttons; example the following code is taken from my gamepad api button demo (you can view the demo live, and find the source code on github.) note the code fork — in chrome navigator.getgamepads needs a
webkit prefix and the button values are stores as an array of double values, whereas in firefox navigator.getgamepads doesn't need a prefix, and the button values are stored as an array of gamepadbutton objects; it is the gamepadbutton.value or gamepadbutton.pressed properties of these we need to access, depending on what type of buttons they are.
... function gameloop() { if(navigator.
webkitgetgamepads) { var gp = navigator.
webkitgetgamepads()[0]; if(gp.buttons[0] == 1) { b--; } else if(gp.buttons[1] == 1) { a++; } else if(gp.buttons[2] == 1) { b++; } else if(gp.buttons[3] == 1) { a--; } } else { var gp = navigator.getgamepads()[0]; if(gp.buttons[0].value > 0 || gp.buttons[0].pressed == true) { b--; } else if(gp.buttons[1].value > 0 || gp.buttons[1].pressed == true) { a++; } else if(gp.buttons[2].value > 0 || gp.buttons[2].pressed == true) { b++; } else if(gp.buttons[3].value > 0 || gp.buttons[3].pressed == true) { a--; } } ball.style.left = a*2 + "px"; ball.style.top = b*2 + "px";...
GamepadButton - Web APIs
example the following code is taken from my gamepad api button demo (you can view the demo live, and find the source code on github.) note the code fork — in chrome navigator.getgamepads needs a
webkit prefix and the button values are stored as an array of double values, whereas in firefox navigator.getgamepads doesn't need a prefix, and the button values are stored as an array of gamepadbutton objects; it is the gamepadbutton.value or gamepadbutton.pressed properties of these we need to access, depending on what type of buttons they are.
... function gameloop() { if(navigator.
webkitgetgamepads) { var gp = navigator.
webkitgetgamepads()[0]; if(gp.buttons[0] == 1) { b--; } else if(gp.buttons[1] == 1) { a++; } else if(gp.buttons[2] == 1) { b++; } else if(gp.buttons[3] == 1) { a--; } } else { var gp = navigator.getgamepads()[0]; if(gp.buttons[0].value > 0 || gp.buttons[0].pressed == true) { b--; } else if(gp.buttons[1].value > 0 || gp.buttons[1].pressed == true) { a++; } else if(gp.buttons[2].value > 0 || gp.buttons[2].pressed == true) { b++; } else if(gp.buttons[3].value > 0 || gp.buttons[3].pressed == true) { a--; } } ball.style.left = a*2 + "px"; ball.style.top = b*2 + "px";...
HTMLAnchorElement.referrerPolicy - Web APIs
desktopmobilechromeedgefirefoxinternet exploreroperasafariandroid
webviewchrome for androidfirefox for androidopera for androidsafari on iossamsung internetreferrerpolicychrome full support 51edge full support 79firefox full support 50ie no support noopera full support ...
... 38safari full support 11.1
webview android full support 51chrome android full support 51firefox android full support 50opera android full support 41safari ios no support nosamsung internet android full support 7.2legend full support full support no support no support ...
HTMLAreaElement.referrerPolicy - Web APIs
desktopmobilechromeedgefirefoxinternet exploreroperasafariandroid
webviewchrome for androidfirefox for androidopera for androidsafari on iossamsung internetreferrerpolicychrome full support 51edge full support 79firefox full support 50ie no support noopera full support ...
... 38safari full support 11.1
webview android full support 51chrome android full support 51firefox android full support 50opera android full support 41safari ios no support nosamsung internet android full support 7.2legend full support full support no support no support ...
HTMLCanvasElement.toDataURL() - Web APIs
chrome also supports the image/
webp type.
... encoderoptions optional a number between 0 and 1 indicating the image quality to use for image formats that use lossy compression such as image/jpeg and image/
webp.
HTMLElement.offsetParent - Web APIs
desktopmobilechromeedgefirefoxinternet exploreroperasafariandroid
webviewchrome for androidfirefox for androidopera for androidsafari on iossamsung internetoffsetparentchrome full support 1edge full support 12firefox full support 1ie full support 8opera full support ...
... 8safari full support 3
webview android full support 1chrome android full support 18firefox android full support 4opera android full support 10.1safari ios full support 1samsung internet android full support 1.0legend full support full support ...
HTMLElement.offsetTop - Web APIs
desktopmobilechromeedgefirefoxinternet exploreroperasafariandroid
webviewchrome for androidfirefox for androidopera for androidsafari on iossamsung internetoffsettopchrome full support 1edge full support 12firefox full support 1ie full support 8opera full support ...
... 8safari full support 3
webview android full support 1chrome android full support 18firefox android full support 4opera android full support 10.1safari ios full support 1samsung internet android full support 1.0legend full support full support in compliance with the specification, this property will return null on
webkit if the element is hidden (the style.display of this element or any ancestor i...
HTMLFormControlsCollection - Web APIs
<div id="interfacediagram" style="display: inline-block; position: relative; width: 100%; padding-bottom: 11.666666666666666%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 70" preserveaspectratio="xminymin meet"><a xlink:href="/docs/
web/api/htmlcollection" target="_top"><rect x="1" y="1" width="140" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="71" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">htmlcollection</text></a><polyline points="141,25 151,20 151,30 141,25" stroke="#d4dde4" fill="none"/><line x1="151"...
... y1="25" x2="181" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/
web/api/htmlformcontrolscollection" target="_top"><rect x="181" y="1" width="260" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="311" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">htmlformcontrolscollection</text></a></svg></div> a:hover text { fill: #0095dd; pointer-events: all;} properties this interface inherits the properties of its parent, htmlcollection.
HTMLIFrameElement.allowPaymentRequest - Web APIs
desktopmobilechromeedgefirefoxinternet exploreroperasafariandroid
webviewchrome for androidfirefox for androidopera for androidsafari on iossamsung internetallowpaymentrequest experimentalchrome full support 60disabled full support 60disabled disabled from version 60: this feature is behind the #
web-payments preference (needs to be set to enabled).
...
webview android no support nochrome android full support 61disabled full support 61disabled disabled from version 61: this feature is behind the #
web-payments preference (needs to be set to enabled).
HTMLIFrameElement.csp - Web APIs
desktopmobilechromeedgefirefoxinternet exploreroperasafariandroid
webviewchrome for androidfirefox for androidopera for androidsafari on iossamsung internetcsp experimentalchrome full support 61edge full support ≤79firefox ?
...
webview android full support 61chrome android full support 61firefox android ?
HTMLIFrameElement.referrerPolicy - Web APIs
desktopmobilechromeedgefirefoxinternet exploreroperasafariandroid
webviewchrome for androidfirefox for androidopera for androidsafari on iossamsung internetreferrerpolicychrome full support 51edge full support 79firefox full support 50ie no support noopera full support ...
... 38safari full support 11.1
webview android full support 51chrome android full support 51firefox android full support 50opera android full support 41safari ios no support nosamsung internet android full support 5.0legend full support full support no support no support ...
HTMLIFrameElement.src - Web APIs
desktopmobilechromeedgefirefoxinternet exploreroperasafariandroid
webviewchrome for androidfirefox for androidopera for androidsafari on iossamsung internetsrcchrome full support 43edge full support 12firefox full support yesie ?
... opera full support yessafari full support 6
webview android full support yeschrome android full support yesfirefox android full support yesopera android full support yessafari ios full support yessamsung internet android full support yeslegend full support full support compatibility unknown ...
HTMLImageElement.align - Web APIs
desktopmobilechromeedgefirefoxinternet exploreroperasafariandroid
webviewchrome for androidfirefox for androidopera for androidsafari on iossamsung internetalignchrome full support 1edge full support 12firefox full support yesie ?
... opera full support yessafari full support yes
webview android full support yeschrome android full support yesfirefox android full support yesopera android ?
HTMLImageElement.alt - Web APIs
desktopmobilechromeedgefirefoxinternet exploreroperasafariandroid
webviewchrome for androidfirefox for androidopera for androidsafari on iossamsung internetaltchrome full support 1edge full support 12firefox full support yesie ?
... opera full support yessafari full support yes
webview android full support yeschrome android full support yesfirefox android full support yesopera android ?
HTMLImageElement.border - Web APIs
desktopmobilechromeedgefirefoxinternet exploreroperasafariandroid
webviewchrome for androidfirefox for androidopera for androidsafari on iossamsung internetborderchrome full support 1edge full support 12firefox full support yesie ?
... opera full support yessafari full support yes
webview android full support yeschrome android full support yesfirefox android full support yesopera android ?
HTMLImageElement.complete - Web APIs
desktopmobilechromeedgefirefoxinternet exploreroperasafariandroid
webviewchrome for androidfirefox for androidopera for androidsafari on iossamsung internetcompletechrome full support 1edge full support 12firefox full support yesie full support 8notes full support ...
... 8notes notes ie reports false for broken images.opera full support yessafari full support yes
webview android full support yeschrome android full support yesfirefox android full support yesopera android ?
HTMLImageElement.crossOrigin - Web APIs
desktopmobilechromeedgefirefoxinternet exploreroperasafariandroid
webviewchrome for androidfirefox for androidopera for androidsafari on iossamsung internetcrossoriginchrome full support 13edge full support 12firefox full support yesie full support 9opera full support ...
... yessafari full support yes
webview android full support yeschrome android full support yesfirefox android full support yesopera android ?
HTMLImageElement.currentSrc - Web APIs
desktopmobilechromeedgefirefoxinternet exploreroperasafariandroid
webviewchrome for androidfirefox for androidopera for androidsafari on iossamsung internetcurrentsrc experimentalchrome full support 45edge full support 13firefox full support 38 full support 38 no support ...
...to change preferences in firefox, visit about:config.ie no support noopera full support yessafari full support 10.1
webview android full support 45chrome android full support 45firefox android full support 38 full support 38 no support 32 — 52disabled disabled from version 32 until version 52 (exclusive): this...
HTMLImageElement.decoding - Web APIs
desktopmobilechromeedgefirefoxinternet exploreroperasafariandroid
webviewchrome for androidfirefox for androidopera for androidsafari on iossamsung internetdecodingchrome full support 65edge full support ≤79firefox full support 63ie no support noopera full support ...
... yessafari full support 11.1
webview android full support 65chrome android full support 65firefox android full support 63opera android ?
HTMLImageElement.height - Web APIs
desktopmobilechromeedgefirefoxinternet exploreroperasafariandroid
webviewchrome for androidfirefox for androidopera for androidsafari on iossamsung internetheightchrome full support 1edge full support 12firefox full support yesie .html?
... opera full support yessafari full support yes
webview android full support yeschrome android full support yesfirefox android full support yesopera android ?
HTMLImageElement.hspace - Web APIs
desktopmobilechromeedgefirefoxinternet exploreroperasafariandroid
webviewchrome for androidfirefox for androidopera for androidsafari on iossamsung internethspacechrome full support 1edge full support 12firefox full support yesie ?
... opera full support yessafari full support yes
webview android full support yeschrome android full support yesfirefox android full support yesopera android ?
HTMLOptionsCollection - Web APIs
<div id="interfacediagram" style="display: inline-block; position: relative; width: 100%; padding-bottom: 11.666666666666666%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 70" preserveaspectratio="xminymin meet"><a xlink:href="/docs/
web/api/htmlcollection" target="_top"><rect x="1" y="1" width="140" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="71" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">htmlcollection</text></a><polyline points="141,25 151,20 151,30 141,25" stroke="#d4dde4" fill="none"/><line x1="151"...
... y1="25" x2="181" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/
web/api/htmloptionscollection" target="_top"><rect x="181" y="1" width="210" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="286" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">htmloptionscollection</text></a></svg></div> a:hover text { fill: #0095dd; pointer-events: all;} properties name type description length unsigned long as optionally allowed by the spec, this property isn't read-only.
HTMLOrForeignElement.nonce - Web APIs
desktopmobilechromeedgefirefoxinternet exploreroperasafariandroid
webviewchrome for androidfirefox for androidopera for androidsafari on iossamsung internetnoncechrome full support 61edge full support 79firefox full support 75ie no support noopera full support ...
... yessafari full support 10
webview android full support 61chrome android full support 61firefox android no support noopera android full support yessafari ios full support 10samsung internet android full support 8.0legend full support full support no support no support ...
HTMLScriptElement.referrerPolicy - Web APIs
desktopmobilechromeedgefirefoxinternet exploreroperasafariandroid
webviewchrome for androidfirefox for androidopera for androidsafari on iossamsung internetreferrerpolicychrome full support 70edge full support ≤79firefox full support 65ie no support noopera full support ...
... yessafari no support no
webview android full support 70chrome android full support 70firefox android full support 65opera android full support yessafari ios no support nosamsung internet android full support 10.0legend full support full support no support no support ...
HTMLSlotElement.assignedElements() - Web APIs
desktopmobilechromeedgefirefoxinternet exploreroperasafariandroid
webviewchrome for androidfirefox for androidopera for androidsafari on iossamsung internetassignedelements experimentalchrome full support 65edge full support 79firefox full support 66ie no support noopera f...
...
webview android full support 65chrome android full support 65firefox android full support 66opera android full support yessafari ios ?
HTMLVideoElement.msHorizontalMirror - Web APIs
do not use it on production sites facing the
web: it will not work for every user.
... video perspective is flipped on a horizontal axis - this may be useful for playback of a
webcam video, providing the user with better mirroring of their real behaviors (ie.
File drag and drop - Web APIs
html drag and drop interfaces enable
web applications to drag and drop files on a
web page.
... this document describes how an application can accept one or more files that are dragged from the underlying platform's file manager and dropped on a
web page.
HashChangeEvent - Web APIs
<div id="interfacediagram" style="display: inline-block; position: relative; width: 100%; padding-bottom: 11.666666666666666%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 70" preserveaspectratio="xminymin meet"><a xlink:href="/docs/
web/api/event" target="_top"><rect x="1" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="38.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">event</text></a><polyline points="76,25 86,20 86,30 76,25" stroke="#d4dde4" fill="none"/><line x1="86" y1="25" x2="116" y2="...
...25" stroke="#d4dde4"/><a xlink:href="/docs/
web/api/hashchangeevent" target="_top"><rect x="116" y="1" width="150" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="191" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">hashchangeevent</text></a></svg></div> a:hover text { fill: #0095dd; pointer-events: all;} properties this interface also inherits the properties of its parent, event.
History.back() - Web APIs
desktopmobilechromeedgefirefoxinternet exploreroperasafariandroid
webviewchrome for androidfirefox for androidopera for androidsafari on iossamsung internetbackchrome full support yesedge full support 12firefox full support yesie full support 10opera full support ...
... yessafari full support yes
webview android full support yeschrome android full support yesfirefox android full support yesopera android full support yessafari ios full support yessamsung internet android full support yeslegend full support full support ...
History.forward() - Web APIs
desktopmobilechromeedgefirefoxinternet exploreroperasafariandroid
webviewchrome for androidfirefox for androidopera for androidsafari on iossamsung internetforwardchrome full support yesedge full support 12firefox full support yesie full support 10opera full support ...
... yessafari full support yes
webview android full support yeschrome android full support yesfirefox android full support yesopera android full support yessafari ios full support yessamsung internet android full support yeslegend full support full support ...
HkdfParams - Web APIs
the hkdfparams dictionary of the
web crypto api represents the object that should be passed as the algorithm parameter into subtlecrypto.derivekey(), when using the hkdf algorithm.
... specifications specification status comment
web cryptography apithe definition of 'subtlecrypto.hkdfparams' in that specification.
HmacImportParams - Web APIs
the hmacimportparams dictionary of the
web crypto api represents the object that should be passed as the algorithm parameter into subtlecrypto.importkey() or subtlecrypto.unwrapkey(), when generating a key for the hmac algorithm.
... specifications specification status comment
web cryptography apithe definition of 'subtlecrypto.hmacimportparams' in that specification.
HmacKeyGenParams - Web APIs
the hmackeygenparams dictionary of the
web crypto api represents the object that should be passed as the algorithm parameter into subtlecrypto.generatekey(), when generating a key for the hmac algorithm.
... specifications specification status comment
web cryptography apithe definition of 'subtlecrypto.hmackeygenparams' in that specification.
IDBCursorSync - Web APIs
important: the synchronous version of the indexeddb api was originally intended for use only with
web workers, and was eventually removed from the spec because its need was questionable.
... it may however be reintroduced in the future if there is enough demand from
web developers.
IDBDatabaseSync - Web APIs
important: the synchronous version of the indexeddb api was originally intended for use only with
web workers, and was eventually removed from the spec because its need was questionable.
... it may however be reintroduced in the future if there is enough demand from
web developers.
IDBEnvironmentSync - Web APIs
important: the synchronous version of the indexeddb api was originally intended for use only with
web workers, and was eventually removed from the spec because its need was questionable.
... it may however be reintroduced in the future if there is enough demand from
web developers.
IDBFactorySync - Web APIs
important: the synchronous version of the indexeddb api was originally intended for use only with
web workers, and was eventually removed from the spec because its need was questionable.
... it may however be reintroduced in the future if there is enough demand from
web developers.
IDBIndexSync - Web APIs
important: the synchronous version of the indexeddb api was originally intended for use only with
web workers, and was eventually removed from the spec because its need was questionable.
... it may however be reintroduced in the future if there is enough demand from
web developers.
IDBObjectStoreSync - Web APIs
important: the synchronous version of the indexeddb api was originally intended for use only with
web workers, and was eventually removed from the spec because its need was questionable.
... it may however be reintroduced in the future if there is enough demand from
web developers.
IDBRequest - Web APIs
note: this feature is available in
web workers.
... <div id="interfacediagram" style="display: inline-block; position: relative; width: 100%; padding-bottom: 11.666666666666666%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 70" preserveaspectratio="xminymin meet"><a xlink:href="/docs/
web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="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/idbr...
IDBTransaction.objectStoreNames - Web APIs
desktopmobilechromeedgefirefoxinternet exploreroperasafariandroid
webviewchrome for androidfirefox for androidopera for androidsafari on iossamsung internetobjectstorenameschrome full support 48edge full support ≤79firefox full support yesie ?
... opera full support 35safari full support yes
webview android full support 48chrome android full support 48firefox android full support yesopera android full support 35safari ios full support yessamsung internet android full support 5.0legend full support full support compatibility unknown c...
IDBTransactionSync - Web APIs
important: the synchronous version of the indexeddb api was originally intended for use only with
web workers, and was eventually removed from the spec because its need was questionable.
... it may however be reintroduced in the future if there is enough demand from
web developers.
IIRFilterNode - Web APIs
the iirfilternode interface of the
web audio api is a audionode processor which implements a general infinite impulse response (iir) filter; this type of filter can be used to implement tone control devices and graphic equalizers as well.
... specifications specification status comment
web audio apithe definition of 'iirfilternode' in that specification.
ImageCapture.takePhoto() - Web APIs
desktopmobilechromeedgefirefoxinternet exploreroperasafariandroid
webviewchrome for androidfirefox for androidopera for androidsafari on iossamsung internettakephoto experimentalchrome full support 60 full support 60 no support 59 — 60notes notes photosettings argument not supported.edge full support ≤7...
...
webview android full support 60 full support 60 no support 59 — 60notes notes photosettings argument not supported.chrome android full support 60 full support 60 no support 59 — 60notes notes photosettings argument not supported.
InputDeviceCapabilities API - Web APIs
to deal with this, developers make assumptions and use heuristics to normalize behavior on
web pages.
...for example, let's say we have a
web page that implements both a touchstart and a mousedown event.
InputEvent.dataTransfer - Web APIs
desktopmobilechromeedgefirefoxinternet exploreroperasafariandroid
webviewchrome for androidfirefox for androidopera for androidsafari on iossamsung internetdatatransfer experimentalchrome full support 60edge full support 79firefox full support 67ie no support noopera full ...
...support 47safari no support no
webview android full support 60chrome android full support 60firefox android full support 67opera android full support 44safari ios no support nosamsung internet android full support 8.0legend full support full support no support no supportexperimental.
InputEvent.getTargetRanges() - Web APIs
desktopmobilechromeedgefirefoxinternet exploreroperasafariandroid
webviewchrome for androidfirefox for androidopera for androidsafari on iossamsung internetgettargetranges experimentalchrome full support 60edge full support 79firefox no support noie no support noopera full...
... support 47safari full support 10.1
webview android full support 60chrome android full support 60firefox android no support noopera android full support 44safari ios full support 10.3samsung internet android full support 8.0legend full support full support no support no supportexperimental.
InputEvent - Web APIs
<div id="interfacediagram" style="display: inline-block; position: relative; width: 100%; padding-bottom: 11.666666666666666%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 70" preserveaspectratio="xminymin meet"><a xlink:href="/docs/
web/api/event" target="_top"><rect x="1" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="38.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">event</text></a><polyline points="76,25 86,20 86,30 76,25" stroke="#d4dde4" fill="none"/><line x1="86" y1="25" x2="116" y2="...
...25" stroke="#d4dde4"/><a xlink:href="/docs/
web/api/uievent" target="_top"><rect x="116" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="153.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">uievent</text></a><polyline points="191,25 201,20 201,30 191,25" stroke="#d4dde4" fill="none"/><line x1="201" y1="25" x2="231" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/
web/api/inputevent" target="_top"><rect x="231" y="1" width="100" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="281" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">inputevent</text...
InstallEvent - Web APIs
<div id="interfacediagram" style="display: inline-block; position: relative; width: 100%; padding-bottom: 8.571428571428571%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-20 0 700 60" preserveaspectratio="xminymin meet"><a xlink:href="/docs/
web/api/event" target="_top"><rect x="1" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="38.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">event</text></a><polyline points="76,25 86,20 86,30 76,25" stroke="#d4dde4" fill="none"/><line x1="86" y1="25" x2="116" y2="...
...25" stroke="#d4dde4"/><a xlink:href="/docs/
web/api/extendableevent" target="_top"><rect x="116" y="1" width="150" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="191" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">extendableevent</text></a><polyline points="266,25 276,20 276,30 266,25" stroke="#d4dde4" fill="none"/><line x1="276" y1="25" x2="306" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/
web/api/installevent" target="_top"><rect x="306" y="1" width="120" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="366" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle"...
KeyboardEvent.initKeyboardEvent() - Web APIs
gecko won't support this feature since implementing this method as experimental broke existing
web apps (see bug 999645).
...
web applications should use constructor instead of this if it's available.
KeyframeEffect - Web APIs
the keyframeeffect interface of the
web animations api lets us create sets of animatable properties and values, called keyframes.
...ictate how the white rabbit should animate down the hole: var rabbitdownkeyframes = new keyframeeffect( whiterabbit, // element to animate [ { transform: 'translatey(0%)' }, // keyframe { transform: 'translatey(100%)' } // keyframe ], { duration: 3000, fill: 'forwards' } // keyframe options ); specifications specification status comment
web animationsthe definition of 'keyframeeffect' in that specification.
MediaDevices.getDisplayMedia() - Web APIs
the resulting stream can then be recorded using the mediastream recording api or transmitted as part of a
webrtc session.
...the stream is then returned to the caller for use, perhaps for adding to a
webrtc call using rtcpeerconnection.addtrack() to add the video track from the stream.
MediaElementAudioSourceNode - Web APIs
var audioctx = new (window.audiocontext || window.
webkitaudiocontext)(); var myaudio = document.queryselector('audio'); var pre = document.queryselector('pre'); var myscript = document.queryselector('script'); pre.innerhtml = myscript.innerhtml; // create a mediaelementaudiosourcenode // feed the htmlmediaelement into it var source = audioctx.createmediaelementsource(myaudio); // create a gain node var gainnode = audioctx.creategain(); // create...
... specification specification status comment
web audio apithe definition of 'mediaelementaudiosourcenode' in that specification.
MediaKeyMessageEvent() - Web APIs
desktopmobilechromeedgefirefoxinternet exploreroperasafariandroid
webviewchrome for androidfirefox for androidopera for androidsafari on iossamsung internetmediakeymessageevent() constructor experimentalchrome full support 42edge full support ≤18firefox ?
...
webview android no support nochrome android full support 42firefox android ?
MediaKeyMessageEvent - Web APIs
<div id="interfacediagram" style="display: inline-block; position: relative; width: 100%; padding-bottom: 11.666666666666666%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 70" preserveaspectratio="xminymin meet"><a xlink:href="/docs/
web/api/event" target="_top"><rect x="1" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="38.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">event</text></a><polyline points="76,25 86,20 86,30 76,25" stroke="#d4dde4" fill="none"/><line x1="86" y1="25" x2="116" y2="...
...25" stroke="#d4dde4"/><a xlink:href="/docs/
web/api/mediakeymessageevent" target="_top"><rect x="116" y="1" width="200" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="216" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">mediakeymessageevent</text></a></svg></div> a:hover text { fill: #0095dd; pointer-events: all;} constructor mediakeymessageevent() creates a new instance of mediakeymessageevent.
MediaKeySession.onkeystatuseschange - Web APIs
<div id="interfacediagram" style="display: inline-block; position: relative; width: 100%; padding-bottom: 8.571428571428571%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-20 0 700 60" preserveaspectratio="xminymin meet"><a xlink:href="/docs/
web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="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="2...
...5" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/
web/api/mediakeysession" target="_top"><rect x="151" y="1" width="150" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="226" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">mediakeysession</text></a></svg></div> a:hover text { fill: #0095dd; pointer-events: all;} syntax mediakeysession.onkeystatuseschange = function(keystatuschange) { ...
MediaKeySession.onmessage - Web APIs
<div id="interfacediagram" style="display: inline-block; position: relative; width: 100%; padding-bottom: 8.571428571428571%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-20 0 700 60" preserveaspectratio="xminymin meet"><a xlink:href="/docs/
web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="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="2...
...5" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/
web/api/mediakeysession" target="_top"><rect x="151" y="1" width="150" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="226" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">mediakeysession</text></a></svg></div> a:hover text { fill: #0095dd; pointer-events: all;} syntax mediakeysession.onmessage = function(mediakeymessageevent) { ...
MediaKeyStatusMap.entries() - Web APIs
desktopmobilechromeedgefirefoxinternet exploreroperasafariandroid
webviewchrome for androidfirefox for androidopera for androidsafari on iossamsung internetentries experimentalchrome full support 42edge full support 16firefox ?
...
webview android full support 43chrome android full support 42firefox android ?
MediaKeyStatusMap.forEach() - Web APIs
desktopmobilechromeedgefirefoxinternet exploreroperasafariandroid
webviewchrome for androidfirefox for androidopera for androidsafari on iossamsung internetforeach experimentalchrome full support 42edge full support 13firefox ?
...
webview android full support 43chrome android full support 42firefox android ?
MediaKeyStatusMap.get() - Web APIs
desktopmobilechromeedgefirefoxinternet exploreroperasafariandroid
webviewchrome for androidfirefox for androidopera for androidsafari on iossamsung internetget experimentalchrome full support 42edge full support 13firefox full support yesie ?
...
webview android full support 43chrome android full support 42firefox android full support yesopera android full support 29safari ios ?
MediaKeyStatusMap.has() - Web APIs
desktopmobilechromeedgefirefoxinternet exploreroperasafariandroid
webviewchrome for androidfirefox for androidopera for androidsafari on iossamsung internethas experimentalchrome full support 42edge full support 13firefox full support yesie ?
...
webview android full support 43chrome android full support 42firefox android full support yesopera android full support 29safari ios ?
MediaKeyStatusMap.keys() - Web APIs
desktopmobilechromeedgefirefoxinternet exploreroperasafariandroid
webviewchrome for androidfirefox for androidopera for androidsafari on iossamsung internetkeys experimentalchrome full support 42edge full support 16firefox ?
...
webview android full support 43chrome android full support 42firefox android ?
MediaKeyStatusMap.size - Web APIs
desktopmobilechromeedgefirefoxinternet exploreroperasafariandroid
webviewchrome for androidfirefox for androidopera for androidsafari on iossamsung internetsize experimentalchrome full support 42edge full support 13firefox full support yesie ?
...
webview android full support 43chrome android full support 42firefox android full support yesopera android full support 29safari ios ?
MediaKeyStatusMap.values() - Web APIs
desktopmobilechromeedgefirefoxinternet exploreroperasafariandroid
webviewchrome for androidfirefox for androidopera for androidsafari on iossamsung internetvalues experimentalchrome full support 42edge full support 16firefox ?
...
webview android full support 43chrome android full support 42firefox android ?
MediaMetadata.album - Web APIs
desktopmobilechromeedgefirefoxinternet exploreroperasafariandroid
webviewchrome for androidfirefox for androidopera for androidsafari on iossamsung internetalbum experimentalchrome full support 57edge no support nofirefox full support 71ie no support noopera full support ...
...
webview android no support nochrome android full support 57firefox android ?
MediaMetadata.artist - Web APIs
desktopmobilechromeedgefirefoxinternet exploreroperasafariandroid
webviewchrome for androidfirefox for androidopera for androidsafari on iossamsung internetartist experimentalchrome full support 57edge no support nofirefox full support 71ie no support noopera full support ...
...
webview android no support nochrome android full support 57firefox android ?
MediaStreamTrackAudioSourceOptions.mediaStreamTrack - Web APIs
let audioctx = new (window.audiocontext || window.
webkitaudiocontext)(); if (navigator.mediadevices.getusermedia) { navigator.mediadevices.getusermedia ( { audio: true, video: false }).then(function(stream) { let options = { mediastreamtrack: stream.getaudiotracks()[0]; } let source = new mediastreamtrackaudiosourcenode(audioctx, options); source.connect(audioctx.destination); }).catch(func...
...tion(err) { console.log('the following gum error occured: ' + err); }); } else { console.log('new getusermedia not supported on your browser!'); } specifications specification status comment
web audio apithe definition of 'mediastreamtrackaudiosourceoptions.mediastream' in that specification.
MediaStreamTrackEvent - Web APIs
<div id="interfacediagram" style="display: inline-block; position: relative; width: 100%; padding-bottom: 11.666666666666666%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 70" preserveaspectratio="xminymin meet"><a xlink:href="/docs/
web/api/event" target="_top"><rect x="1" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="38.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">event</text></a><polyline points="76,25 86,20 86,30 76,25" stroke="#d4dde4" fill="none"/><line x1="86" y1="25" x2="116" y2="...
...25" stroke="#d4dde4"/><a xlink:href="/docs/
web/api/mediastreamtrackevent" target="_top"><rect x="116" y="1" width="210" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="221" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">mediastreamtrackevent</text></a></svg></div> a:hover text { fill: #0095dd; pointer-events: all;} the events based on this interface are addtrack and removetrack properties also inherits properties from its parent interface, event.
Using the Media Capabilities API - Web APIs
const videoconfiguration = { type: "file", video: { contenttype: "video/
webm;codecs=vp8", width: 800, height: 600, bitrate: 10000, framerate: 15 } }; had we been querying the decodability of an audio file, we would create an audio configuration including the number of channels and sample rate, leaving out the properties that apply only to video—namely, the dimensions and the frame rate: const audioconfiguration = { type: "file", audio...
...e.log('it worked') ).catch(error => console.log('it failed: ' + error) ); media capabilities live example css li { margin : 1em; } html <form> <p>select your video configuration and find out if this browser supports the codec, and whether decoding will be smooth and power efficient:</p> <ul> <li> <label for="codec">select a codec</label> <select id="codec"> <option>video/
webm; codecs=vp8</option> <option>video/
webm; codecs=vp9</option> <option>video/mp4; codecs=avc1</option> <option>video/mp4; codecs=avc1.420034</option> <option>video/ogg; codecs=theora</option> <option>invalid</option> </select> </li> <li> <label for="size">select a size</label> <select id="size"> <option>7680x4320</option> <option>3840x2160<...
Metadata.modificationTime - Web APIs
desktopmobilechromeedgefirefoxinternet exploreroperasafariandroid
webviewchrome for androidfirefox for androidopera for androidsafari on iossamsung internetmodificationtime experimentalnon-standardchrome full support 13edge full support ≤79firefox no support noie no support noopera ...
... no support nosafari no support no
webview android no support nochrome android full support yesfirefox android no support noopera android no support nosafari ios no support nosamsung internet android full support yeslegend full support full support no support no supportexperimental.
Metadata.size - Web APIs
desktopmobilechromeedgefirefoxinternet exploreroperasafariandroid
webviewchrome for androidfirefox for androidopera for androidsafari on iossamsung internetsize experimentalnon-standardchrome full support 13edge full support ≤79firefox no support noie no support noopera ...
...no support nosafari no support no
webview android no support nochrome android full support yesfirefox android no support noopera android no support nosafari ios no support nosamsung internet android full support yeslegend full support full support no support no supportexperimental.
msPlayToPreferredSourceUri - Web APIs
do not use it on production sites facing the
web: it will not work for every user.
...this enables
web pages and microsoft store apps to play digital rights management (drm) protected content.
MutationEvent - Web APIs
preface the mutation events have been marked as deprecated in the dom events specification, as the api's design is flawed (see details in the "dom mutation events replacement: the story so far / existing points of consensus" post to public-
webapps).
... cross-browser support these events are not implemented consistently across different browsers, for example: ie prior to version 9 didn't support the mutation events at all and does not implement some of them correctly in version 9 (for example, domnodeinserted)
webkit doesn't support domattrmodified (see
webkit bug 8191 and the workaround) "mutation name events", i.e.
NDEFMessage - Web APIs
the ndefmessage interface of the
web nfc api is an abstract interface that represents message that can be received or sent to a to compatible nfc devices, e.g.
... specifications specification status comment
web nfc, ndefmessage draft initial definition.
NDEFReader() - Web APIs
the ndefreader() constructor of the
web nfc api returns a newly constructed ndefreader object used to read ndef messages from compatiable nfc devices, e.g.
... specifications specification status comment
web nfc, ndefreader draft initial definition.
NDEFReader.onerror - Web APIs
the onerror property of ndefreader interface of the
web nfc api is called whenever an error occurs during reading of nfc tags, e.g.
... specifications specification status comment
web nfc, ndefreader.onerror draft initial definition.
NDEFReader.onreading - Web APIs
the onreading property of ndefreader interface of the
web nfc api is called whenever a new reading is available from compatible nfc devices, e.g.
... specifications specification status comment
web nfc, ndefreader.onreadig draft initial definition.
NDEFReader.scan() - Web APIs
notsupportederror there is no nfc adapter compatible with
web nfc, or a connection can not be established.
... specifications specification status comment
web nfc, scan() draft initial definition.
NDEFReader - Web APIs
the ndefreader interface of the
web nfc api is an abstract interface used to read data from compatible nfc devices, e.g.
... specifications specification status comment
web nfc, ndefreader draft initial definition.
NDEFRecord() - Web APIs
the ndefrecord() constructor of the
web nfc api returns a newly constructed ndefrecord object that represents data that can be read from or written to compatible nfc devices, e.g.
... specifications specification status comment
web nfc, ndefrecord draft initial definition.
NDEFRecord.id - Web APIs
web nfc does not sign the nfc content, thus record consumer should not make any assumptions about integrity or authenticity of the identifier or any other part of the records.
... specifications specification status comment
web nfc, ndefrecord draft initial definition.
PannerNode.distanceModel - Web APIs
// set up listener and panner position information var width = window.innerwidth; var height = window.innerheight; var xpos = math.floor(width/2); var ypos = math.floor(height/2); var zpos = 295; // define other variables var audiocontext = window.audiocontext || window.
webkitaudiocontext; var audioctx = new audiocontext(); var panner = audioctx.createpanner(); panner.panningmodel = 'hrtf'; panner.distancemodel = 'inverse'; panner.refdistance = 1; panner.maxdistance = 10000; panner.rollofffactor = 1; panner.coneinnerangle = 360; panner.coneouterangle = 0; panner.coneoutergain = 0; if(panner.orientationx) { panner.orientationx.setvalueattime(1, audioctx.currentti...
... specifications specification status comment
web audio apithe definition of 'distancemodel' in that specification.
PannerNode.maxDistance - Web APIs
// set up listener and panner position information var width = window.innerwidth; var height = window.innerheight; var xpos = math.floor(width/2); var ypos = math.floor(height/2); var zpos = 295; // define other variables var audiocontext = window.audiocontext || window.
webkitaudiocontext; var audioctx = new audiocontext(); var panner = audioctx.createpanner(); panner.panningmodel = 'hrtf'; panner.distancemodel = 'inverse'; panner.refdistance = 1; panner.maxdistance = 10000; panner.rollofffactor = 1; panner.coneinnerangle = 360; panner.coneouterangle = 0; panner.coneoutergain = 0; if(panner.orientationx) { panner.orientationx.setvalueattime(1, audioctx.currentti...
... specifications specification status comment
web audio apithe definition of 'maxdistance' in that specification.
PannerNode.panningModel - Web APIs
// set up listener and panner position information var width = window.innerwidth; var height = window.innerheight; var xpos = math.floor(width/2); var ypos = math.floor(height/2); var zpos = 295; // define other variables var audiocontext = window.audiocontext || window.
webkitaudiocontext; var audioctx = new audiocontext(); var panner = audioctx.createpanner(); panner.panningmodel = 'hrtf'; panner.distancemodel = 'inverse'; panner.refdistance = 1; panner.maxdistance = 10000; panner.rollofffactor = 1; panner.coneinnerangle = 360; panner.coneouterangle = 0; panner.coneoutergain = 0; if(panner.orientationx) { panner.orientationx.setvalueattime(1, audioctx.currentti...
... specifications specification status comment
web audio apithe definition of 'panningmodel' in that specification.
PannerNode.setOrientation() - Web APIs
// set up listener and panner position information var width = window.innerwidth; var height = window.innerheight; var xpos = math.floor(width/2); var ypos = math.floor(height/2); var zpos = 295; // define other variables var audiocontext = window.audiocontext || window.
webkitaudiocontext; var audioctx = new audiocontext(); var panner = audioctx.createpanner(); panner.panningmodel = 'hrtf'; panner.distancemodel = 'inverse'; panner.refdistance = 1; panner.maxdistance = 10000; panner.rollofffactor = 1; panner.coneinnerangle = 360; panner.coneouterangle = 0; panner.coneoutergain = 0; if(panner.orientationx) { panner.orientationx.setvalueattime(1, audioctx.currentti...
... specifications specification status comment
web audio apithe definition of 'setorientation()' in that specification.
PannerNode.setPosition() - Web APIs
// set up listener and panner position information var width = window.innerwidth; var height = window.innerheight; var xpos = math.floor(width/2); var ypos = math.floor(height/2); var zpos = 295; // define other variables var audiocontext = window.audiocontext || window.
webkitaudiocontext; var audioctx = new audiocontext(); var panner = audioctx.createpanner(); panner.panningmodel = 'hrtf'; panner.distancemodel = 'inverse'; panner.refdistance = 1; panner.maxdistance = 10000; panner.rollofffactor = 1; panner.coneinnerangle = 360; panner.coneouterangle = 0; panner.coneoutergain = 0; if(panner.orientationx) { panner.orientationx.setvalueattime(1, audioctx.currentti...
... specifications specification status comment
web audio apithe definition of 'setposition()' in that specification.
PaymentRequest.PaymentRequest() - Web APIs
syntax var paymentrequest = new paymentrequest(methoddata, details, [options]); parameters methoddata contains an array of identifiers for the payment methods the merchant
web site accepts and any associated payment method specific data.
... each item in the array contains the following fields: supportedmethods for early implementations of the spec, this was a sequence of identifiers for payment methods that the merchant
website accepts.
PaymentRequest.abort() - Web APIs
desktopmobilechromeedgefirefoxinternet exploreroperasafariandroid
webviewchrome for androidfirefox for androidopera for androidsafari on iossamsung internetabort()chrome full support 61edge full support 15firefox full support 55notes disabled full support 55notes disabled notes available...
...to change preferences in firefox, visit about:config.ie no support noopera no support nosafari full support 11.1
webview android no support nochrome android full support 53firefox android full support 55notes disabled full support 55notes disabled notes available only in nightly builds.disabled from version 55: this feature is behind the dom.
PaymentRequest.canMakePayment() - Web APIs
desktopmobilechromeedgefirefoxinternet exploreroperasafariandroid
webviewchrome for androidfirefox for androidopera for androidsafari on iossamsung internetcanmakepayment()chrome full support 61edge full support 16firefox full support 55notes disabled full support 55notes disabled notes ...
...to change preferences in firefox, visit about:config.ie no support noopera no support nosafari full support 11.1
webview android no support nochrome android full support 53firefox android full support 55notes disabled full support 55notes disabled notes available only in nightly builds.disabled from version 55: this feature is behind...
PaymentRequest.prototype.id - Web APIs
desktopmobilechromeedgefirefoxinternet exploreroperasafariandroid
webviewchrome for androidfirefox for androidopera for androidsafari on iossamsung internetidchrome full support 61edge full support 16firefox full support 55notes disabled full support 55notes disabled notes available only...
...to change preferences in firefox, visit about:config.ie no support noopera no support nosafari full support 11.1
webview android no support nochrome android full support 60firefox android full support 55notes disabled full support 55notes disabled notes available only in nightly builds.disabled from version 55: this feature is behind the dom.payme...
PaymentRequest.onshippingaddresschange - Web APIs
desktopmobilechromeedgefirefoxinternet exploreroperasafariandroid
webviewchrome for androidfirefox for androidopera for androidsafari on iossamsung internetonshippingaddresschangechrome full support 61edge full support 15firefox full support 55notes disabled full support 55notes disabled...
...to change preferences in firefox, visit about:config.ie no support noopera no support nosafari full support 11.1
webview android no support nochrome android full support 53firefox android full support 55notes disabled full support 55notes disabled notes available only in nightly builds.disabled from version 55: this feature is behind...
PaymentRequest.onshippingoptionchange - Web APIs
desktopmobilechromeedgefirefoxinternet exploreroperasafariandroid
webviewchrome for androidfirefox for androidopera for androidsafari on iossamsung internetonshippingoptionchangechrome full support 61edge full support 15firefox full support 55notes disabled full support 55notes disabled ...
...to change preferences in firefox, visit about:config.ie no support noopera no support nosafari full support 11.1
webview android no support nochrome android full support 53firefox android full support 55notes disabled full support 55notes disabled notes available only in nightly builds.disabled from version 55: this feature is behind...
PaymentRequest.shippingOption - Web APIs
desktopmobilechromeedgefirefoxinternet exploreroperasafariandroid
webviewchrome for androidfirefox for androidopera for androidsafari on iossamsung internetshippingoptionchrome full support 61edge full support 15firefox full support 55notes disabled full support 55notes disabled notes av...
...to change preferences in firefox, visit about:config.ie no support noopera no support nosafari full support 11.1
webview android no support nochrome android full support 53firefox android full support 55notes disabled full support 55notes disabled notes available only in nightly builds.disabled from version 55: this feature is behind t...
PaymentRequest.shippingType - Web APIs
desktopmobilechromeedgefirefoxinternet exploreroperasafariandroid
webviewchrome for androidfirefox for androidopera for androidsafari on iossamsung internetshippingtypechrome full support 61edge full support 15firefox full support 55notes disabled full support 55notes disabled notes avai...
...to change preferences in firefox, visit about:config.ie no support noopera no support nosafari full support 11.1
webview android no support nochrome android full support 55firefox android full support 55notes disabled full support 55notes disabled notes available only in nightly builds.disabled from version 55: this feature is behind the...
PaymentResponse.complete() - Web APIs
desktopmobilechromeedgefirefoxinternet exploreroperasafariandroid
webviewchrome for androidfirefox for androidopera for androidsafari on iossamsung internetcomplete()chrome full support 61edge full support 15firefox full support 56notes disabled full support 56notes disabled notes availa...
...to change preferences in firefox, visit about:config.ie no support noopera no support nosafari full support yes
webview android no support nochrome android full support 56 full support 56 no support 53 — 56disabled disabled from version 53 until version 56 (exclusive): this feature is behind the #
web-payments preference (needs to be set to enabled).
PaymentResponse.details - Web APIs
desktopmobilechromeedgefirefoxinternet exploreroperasafariandroid
webviewchrome for androidfirefox for androidopera for androidsafari on iossamsung internetdetailschrome full support 61edge full support 15firefox full support 56notes disabled full support 56notes disabled notes available...
...to change preferences in firefox, visit about:config.ie no support noopera no support nosafari full support yes
webview android no support nochrome android full support 56 full support 56 no support 53 — 56disabled disabled from version 53 until version 56 (exclusive): this feature is behind the #
web-payments preference (needs to be set to enabled).
PaymentResponse.payerEmail - Web APIs
desktopmobilechromeedgefirefoxinternet exploreroperasafariandroid
webviewchrome for androidfirefox for androidopera for androidsafari on iossamsung internetpayeremailchrome full support 61edge full support 15firefox full support 56notes disabled full support 56notes disabled notes availa...
...to change preferences in firefox, visit about:config.ie no support noopera no support nosafari full support yes
webview android no support nochrome android full support 56 full support 56 no support 53 — 56disabled disabled from version 53 until version 56 (exclusive): this feature is behind the #
web-payments preference (needs to be set to enabled).
PaymentRequest.payerName - Web APIs
desktopmobilechromeedgefirefoxinternet exploreroperasafariandroid
webviewchrome for androidfirefox for androidopera for androidsafari on iossamsung internetpayernamechrome full support 61edge full support 15firefox full support 56notes disabled full support 56notes disabled notes availab...
...to change preferences in firefox, visit about:config.ie no support noopera no support nosafari full support yes
webview android no support nochrome android full support 58firefox android full support 56notes disabled full support 56notes disabled notes available only in nightly builds.disabled from version 56: this feature is behind the dom...
PaymentResponse.requestId - Web APIs
desktopmobilechromeedgefirefoxinternet exploreroperasafariandroid
webviewchrome for androidfirefox for androidopera for androidsafari on iossamsung internetrequestidchrome full support 61edge full support 16firefox full support 56notes disabled full support 56notes disabled notes availab...
...to change preferences in firefox, visit about:config.ie no support noopera no support nosafari full support yes
webview android no support nochrome android full support 60firefox android full support 56notes disabled full support 56notes disabled notes available only in nightly builds.disabled from version 56: this feature is behind the dom...
PaymentResponse.shippingAddress - Web APIs
desktopmobilechromeedgefirefoxinternet exploreroperasafariandroid
webviewchrome for androidfirefox for androidopera for androidsafari on iossamsung internetshippingaddresschrome full support 61edge full support 15firefox full support 56notes disabled full support 56notes disabled notes a...
...to change preferences in firefox, visit about:config.ie no support noopera no support nosafari full support yes
webview android no support nochrome android full support 56 full support 56 no support 53 — 56disabled disabled from version 53 until version 56 (exclusive): this feature is behind the #
web-payments preference (needs to be set to enabled).
PaymentResponse.shippingOption - Web APIs
desktopmobilechromeedgefirefoxinternet exploreroperasafariandroid
webviewchrome for androidfirefox for androidopera for androidsafari on iossamsung internetshippingoptionchrome full support 61edge full support 15firefox full support 56notes disabled full support 56notes disabled notes av...
...to change preferences in firefox, visit about:config.ie no support noopera no support nosafari full support yes
webview android no support nochrome android full support 56 full support 56 no support 53 — 56disabled disabled from version 53 until version 56 (exclusive): this feature is behind the #
web-payments preference (needs to be set to enabled).
Pbkdf2Params - Web APIs
the pbkdf2params dictionary of the
web crypto api represents the object that should be passed as the algorithm parameter into subtlecrypto.derivekey(), when using the pbkdf2 algorithm.
... specifications specification status comment
web cryptography apithe definition of 'subtlecrypto.pbkdf2params' in that specification.
performance.clearResourceTimings() - Web APIs
note: this feature is available in
web workers.
... example function load_resource() { var image = new image(); image.src = "https://developer.mozilla.org/static/img/opengraph-logo.png"; } function clear_performance_timings() { if (performance === undefined) { log("browser does not support
web performance"); return; } // create a resource timing performance entry by loading an image load_resource(); var supported = typeof performance.clearresourcetimings == "function"; if (supported) { console.log("run: performance.clearresourcetimings()"); performance.clearresourcetimings(); } else { console.log("performance.clearresourcetimings() not supported"); return; } // getentrie...
performance.setResourceTimingBufferSize() - Web APIs
note: this feature is available in
web workers.
... example function setresourcetimingbuffersize(maxsize) { if (performance === undefined) { log("browser does not support
web performance"); return; } var supported = typeof performance.setresourcetimingbuffersize == "function"; if (supported) { log("...
PerformanceLongTaskTiming.attribution - Web APIs
desktopmobilechromeedgefirefoxinternet exploreroperasafariandroid
webviewchrome for androidfirefox for androidopera for androidsafari on iossamsung internetattribution experimentalchrome full support 58edge full support ≤79firefox no support noie ?
...
webview android full support 58chrome android full support 58firefox android no support noopera android full support yessafari ios ?
PerformanceMark - Web APIs
<div id="interfacediagram" style="display: inline-block; position: relative; width: 100%; padding-bottom: 11.666666666666666%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 70" preserveaspectratio="xminymin meet"><a xlink:href="/docs/
web/api/performanceentry" target="_top"><rect x="1" y="1" width="160" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="81" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">performanceentry</text></a><polyline points="161,25 171,20 171,30 161,25" stroke="#d4dde4" fill="none"/><line x1="...
...171" y1="25" x2="201" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/
web/api/performancemark" target="_top"><rect x="201" y="1" width="150" 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">performancemark</text></a></svg></div> a:hover text { fill: #0095dd; pointer-events: all;} properties this interface has no properties but it extends the following performanceentry properties by qualifying/constraining the properties as follows: performanceentry.entrytype returns "mark".
PerformanceMeasure - Web APIs
<div id="interfacediagram" style="display: inline-block; position: relative; width: 100%; padding-bottom: 11.666666666666666%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 70" preserveaspectratio="xminymin meet"><a xlink:href="/docs/
web/api/performanceentry" target="_top"><rect x="1" y="1" width="160" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="81" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">performanceentry</text></a><polyline points="161,25 171,20 171,30 161,25" stroke="#d4dde4" fill="none"/><line x1="...
...171" y1="25" x2="201" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/
web/api/performancemeasure" target="_top"><rect x="201" y="1" width="180" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="291" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">performancemeasure</text></a></svg></div> a:hover text { fill: #0095dd; pointer-events: all;} properties this interface has no properties but it extends the following performanceentry properties by qualifying/constrainting the properties as follows: performanceentry.entrytype returns "measure".
PerformanceNavigationTiming - Web APIs
<div id="interfacediagram" style="display: inline-block; position: relative; width: 100%; padding-bottom: 11.666666666666666%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 70" preserveaspectratio="xminymin meet"><a xlink:href="/docs/
web/api/performanceentry" target="_top"><rect x="1" y="1" width="160" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="81" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">performanceentry</text></a><polyline points="161,25 171,20 171,30 161,25" stroke="#d4dde4" fill="none"/><line x1="...
...171" y1="25" x2="201" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/
web/api/performancenavigationtiming" target="_top"><rect x="201" y="1" width="270" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="336" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">performancenavigationtiming</text></a></svg></div> a:hover text { fill: #0095dd; pointer-events: all;} properties this interface extends the following performanceentry properties for navigation performance entry types by qualifying and constraining them as follows: performanceentry.entrytype read only returns "navigation".
PerformanceResourceTiming - Web APIs
<div id="interfacediagram" style="display: inline-block; position: relative; width: 100%; padding-bottom: 11.666666666666666%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 70" preserveaspectratio="xminymin meet"><a xlink:href="/docs/
web/api/performanceentry" target="_top"><rect x="1" y="1" width="160" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="81" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">performanceentry</text></a><polyline points="161,25 171,20 171,30 161,25" stroke="#d4dde4" fill="none"/><line x1="...
...171" y1="25" x2="201" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/
web/api/performanceresourcetiming" target="_top"><rect x="201" y="1" width="250" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="326" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">performanceresourcetiming</text></a></svg></div> a:hover text { fill: #0095dd; pointer-events: all;} note: this feature is available in
web workers.
PeriodicWave.PeriodicWave() - Web APIs
the periodicwave() constructor of the
web audio api creates a new periodicwave object instance.
... example var real = new float32array(2); var imag = new float32array(2); var ac = new audiocontext(); real[0] = 0; imag[0] = 0; real[1] = 1; imag[1] = 0; var options = { real : real, imag : imag, disablenormalization : false } var wave = new periodicwave(ac, options); specifications specification status comment
web audio apithe definition of 'periodicwave' in that specification.
PhotoCapabilities.fillLightMode - Web APIs
desktopmobilechromeedgefirefoxinternet exploreroperasafariandroid
webviewchrome for androidfirefox for androidopera for androidsafari on iossamsung internetfilllightmode experimentalchrome full support 59edge full support ≤79firefox ?
...
webview android full support 59chrome android full support 59firefox android ?
PhotoCapabilities.imageHeight - Web APIs
desktopmobilechromeedgefirefoxinternet exploreroperasafariandroid
webviewchrome for androidfirefox for androidopera for androidsafari on iossamsung internetimageheight experimentalchrome full support 59edge full support ≤79firefox ?
...
webview android full support 59chrome android full support 59firefox android ?
imageWidth - Web APIs
desktopmobilechromeedgefirefoxinternet exploreroperasafariandroid
webviewchrome for androidfirefox for androidopera for androidsafari on iossamsung internetimagewidth experimentalchrome full support 59edge full support ≤79firefox ?
...
webview android full support 59chrome android full support 59firefox android ?
PhotoCapabilities.redEyeReduction - Web APIs
desktopmobilechromeedgefirefoxinternet exploreroperasafariandroid
webviewchrome for androidfirefox for androidopera for androidsafari on iossamsung internetredeyereduction experimentalchrome full support 59edge full support ≤79firefox ?
...
webview android full support 59chrome android full support 59firefox android ?
PointerEvent.getCoalescedEvents() - Web APIs
desktopmobilechromeedgefirefoxinternet exploreroperasafariandroid
webviewchrome for androidfirefox for androidopera for androidsafari on iossamsung internetgetcoalescedevents experimentalchrome full support 58edge full support 79firefox full support 59ie no support noopera ...
... full support 45safari no support no
webview android full support 58chrome android full support 58firefox android partial support 59disabled partial support 59disabled disabled from version 59: this feature is behind the dom.w3c_pointer_events.enabled preference (needs to be set to true).
ProgressEvent - Web APIs
<div id="interfacediagram" style="display: inline-block; position: relative; width: 100%; padding-bottom: 11.666666666666666%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 70" preserveaspectratio="xminymin meet"><a xlink:href="/docs/
web/api/event" target="_top"><rect x="1" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="38.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">event</text></a><polyline points="76,25 86,20 86,30 76,25" stroke="#d4dde4" fill="none"/><line x1="86" y1="25" x2="116" y2="...
...25" stroke="#d4dde4"/><a xlink:href="/docs/
web/api/progressevent" target="_top"><rect x="116" y="1" width="130" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="181" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">progressevent</text></a></svg></div> a:hover text { fill: #0095dd; pointer-events: all;} constructor progressevent() creates a progressevent event with the given parameters.
PromiseRejectionEvent - Web APIs
<div id="interfacediagram" style="display: inline-block; position: relative; width: 100%; padding-bottom: 20%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 120" preserveaspectratio="xminymin meet"><a xlink:href="/docs/
web/api/event" target="_top"><rect x="1" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="38.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">event</text></a><polyline points="76,25 86,20 86,30 76,25" stroke="#d4dde4" fill="none"/><line x1="86" y1="25" x2="116" y2="...
...25" stroke="#d4dde4"/><a xlink:href="/docs/
web/api/promiserejectionevent" target="_top"><rect x="116" y="1" width="210" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="221" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">promiserejectionevent</text></a></svg></div> a:hover text { fill: #0095dd; pointer-events: all;} constructor promiserejectionevent() creates a promiserejectionevent event, given the type of event (unhandledrejection or rejectionhandled) and other details.
PublicKeyCredential.isUserVerifyingPlatformAuthenticatorAvailable() - Web APIs
as of today (march 2019), this is basically indicating if windows hello may be used with the
web authentication api and that the user has accepted its use.
...available){ if(available){ // we can proceed with the creation of a publickeycredential // with this authenticator } else { // use another kind of authenticator or a classical login/password // workflow } }).catch(function(err){ // something went wrong console.error(err); }); specifications specification status comment
web authentication: an api for accessing public key credentials level 1the definition of 'isuserverifyingplatformauthenticatoravailable' in that specification.
PublicKeyCredential - Web APIs
it inherits from credential, and was created by the
web authentication api extension to the credential management api.
... challenge: new uint8array([/* bytes sent from the server */]) }; navigator.credentials.get({ "publickey": options }) .then(function (credentialinfoassertion) { // send assertion response back to the server // to proceed with the control of the credential }).catch(function (err) { console.error(err); }); specifications specification status comment
web authentication: an api for accessing public key credentials level 1the definition of 'publickeycredential interface' in that specification.
PublicKeyCredentialCreationOptions - Web APIs
the publickeycredentialcreationoptions dictionary of the
web authentication api holds options passed to navigators.credentials.create() in order to create a publickeycredential.
...nse; var clientextensionsoutputs = newcredentialinfo.getclientextensionsresults(); // send the response to the relying party server // it will verify the content and integrity before // creating a new credential }).catch(function (err) { // deal with any error properly console.error(err); });; specifications specification status comment
web authentication: an api for accessing public key credentials level 1the definition of 'publickeycredentialcreationoptions dictionary' in that specification.
PublicKeyCredentialRequestOptions - Web APIs
the publickeycredentialrequestoptions dictionary of the
web authentication api holds the options passed to navigator.credentials.get() in order to fetch a given publickeycredential.
...lse, txauthsimple: "could you please verify yourself?" } }; navigator.credentials.get({ "publickey": options }) .then(function (credentialinfoassertion) { // send assertion response back to the server // to proceed with the control of the credential }).catch(function (err) { console.error(err); }); specifications specification status comment
web authentication: an api for accessing public key credentials level 1the definition of 'publickeycredentialrequestoptions dictionary' in that specification.
PushEvent.PushEvent() - Web APIs
desktopmobilechromeedgefirefoxinternet exploreroperasafariandroid
webviewchrome for androidfirefox for androidopera for androidsafari on iossamsung internetpushevent() constructor experimentalchrome full support 42edge full support 16disabled full support 16disabled disabled from version 16: this feature is behind the enable servic...
... 44notes full support 44notes notes extended support releases (esr) before firefox 78 esr do not support service workers and the push api.ie no support noopera full support 37safari no support no
webview android no support nochrome android full support 42firefox android full support 44 full support 44 full support 48notes notes push enabled by default.opera android ...
PushEvent.data - Web APIs
desktopmobilechromeedgefirefoxinternet exploreroperasafariandroid
webviewchrome for androidfirefox for androidopera for androidsafari on iossamsung internetdata experimentalchrome full support 57edge full support 16disabled full support 16disabled disabled from version 16: this feature is behind the enable service workers preferenc...
... 44notes full support 44notes notes extended support releases (esr) before firefox 78 esr do not support service workers and the push api.ie no support noopera full support 44safari no support no
webview android no support nochrome android full support 57firefox android full support 44 full support 44 full support 48notes notes push enabled by default.opera android ...
PushManager.supportedContentEncodings - Web APIs
desktopmobilechromeedgefirefoxinternet exploreroperasafariandroid
webviewchrome for androidfirefox for androidopera for androidsafari on iossamsung internetsupportedcontentencodings experimentalchrome full support 60edge full support 16disabled full support 16disabled disabled from version 16: this feature is behind the enable serv...
... 44notes full support 44notes notes extended support releases (esr) before firefox 78 esr do not support service workers and the push api.ie no support noopera full support 47safari no support no
webview android no support nochrome android full support 60firefox android full support 48notes full support 48notes notes push enabled by default.opera android full support 44s...
PushMessageData.arrayBuffer() - Web APIs
desktopmobilechromeedgefirefoxinternet exploreroperasafariandroid
webviewchrome for androidfirefox for androidopera for androidsafari on iossamsung internetarraybuffer experimentalchrome full support 50edge full support ≤79firefox full support 44notes full support 44notes notes extende...
...d support releases (esr) before firefox 78 esr do not support service workers and the push api.ie no support noopera full support 37safari no support no
webview android no support nochrome android full support 50firefox android full support 48opera android full support 37safari ios no support nosamsung internet android full support 5.0legend full support ...
PushMessageData.blob() - Web APIs
desktopmobilechromeedgefirefoxinternet exploreroperasafariandroid
webviewchrome for androidfirefox for androidopera for androidsafari on iossamsung internetblob experimentalchrome full support 50edge full support ≤79firefox full support 44notes full support 44notes notes extended suppo...
...rt releases (esr) before firefox 78 esr do not support service workers and the push api.ie no support noopera full support 37safari no support no
webview android no support nochrome android full support 50firefox android full support 48opera android full support 37safari ios no support nosamsung internet android full support 5.0legend full support ...
RTCStatsReport - Web APIs
properties common to all statistic categories all
webrtc statistics objects are fundamentally based on the rtcstats dictionary, which provides the most fundamental information: the timestamp, the statistic type string, and an id uniquely identifying the source of the data: id a domstring which uniquely identifies the object which was inspected to produce this object based on rtcstats.
... specifications specification status comment
webrtc 1.0: real-time communication between browsersthe definition of 'rtcstatsreport' in that specification.
RTCTrackEvent() - Web APIs
in general, you won't need to use this constructor, as rtctrackevent objects are created by
webrtc and delivered to your rtcpeerconnector's ontrack event handler as appropriate.
... specifications specification status comment
webrtc 1.0: real-time communication between browsersthe definition of 'rtctrackevent()' in that specification.
RTCTrackEvent.streams - Web APIs
the
webrtc api interface rtctrackevent's read-only streams property specifies an array of mediastream objects, one for each of the streams that comprise the track being added to the rtcpeerconnection.
... specifications specification status comment
webrtc 1.0: real-time communication between browsersthe definition of 'rtctrackevent.streams' in that specification.
RTCTrackEvent.track - Web APIs
the
webrtc api interface rtctrackevent's read-only track property specifies the mediastreamtrack that has been added to the rtcpeerconnection.
... specifications specification status comment
webrtc 1.0: real-time communication between browsersthe definition of 'rtctrackevent.track' in that specification.
RTCTrackEvent.transceiver - Web APIs
the
webrtc api interface rtctrackevent's read-only transceiver property indicates the rtcrtptransceiver affiliated with the event's track.
... specifications specification status comment
webrtc 1.0: real-time communication between browsersthe definition of 'rtctrackevent.transceiver' in that specification.
RTCTrackEventInit - Web APIs
the
webrtc api's rtctrackeventinit dictionary is used to provide information describing an rtctrackevent when instantiating a new track event using new rtctrackevent().
... specifications specification status comment
webrtc 1.0: real-time communication between browsersthe definition of 'rtctrackeventinit' in that specification.
RadioNodeList - Web APIs
<div id="interfacediagram" style="display: inline-block; position: relative; width: 100%; padding-bottom: 11.666666666666666%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 70" preserveaspectratio="xminymin meet"><a xlink:href="/docs/
web/api/nodelist" target="_top"><rect x="1" y="1" width="80" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="41" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">nodelist</text></a><polyline points="81,25 91,20 91,30 81,25" stroke="#d4dde4" fill="none"/><line x1="91" y1="25" x2="121" ...
...y2="25" stroke="#d4dde4"/><a xlink:href="/docs/
web/api/radionodelist" target="_top"><rect x="121" y="1" width="130" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="186" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">radionodelist</text></a></svg></div> a:hover text { fill: #0095dd; pointer-events: all;} properties the radionodelist interface inherits the properties of nodelist.
RenderingContext - Web APIs
renderingcontext is a
webidl typedef which can refer to any one of the interfaces that represent a graphics rendering context within a <canvas> element: canvasrenderingcontext2d,
webglrenderingcontext, or
webgl2renderingcontext.
...he shorthand renderingcontext, methods and properties which can make use of any of these interfaces can be specified and written more easily; since <canvas> supports several rendering systems, it's helpful from a specification and browser implementation perspective to have a shorthand that means "one of these interfaces." as such, renderingcontext is an implementation detail, and isn't something
web developers directly use.
Resource Timing API - Web APIs
the properties which are returned as 0 by default when loading a resource from a domain other than the one of the
web page itself: redirectstart, redirectend, domainlookupstart, domainlookupend, connectstart, connectend, secureconnectionstart, requeststart, and responsestart.
... see also resource timing standard; w3c editor's draft caniuse data resource timing practical tips; steve souders; 2014 august 21 measuring network performance with resource timing api; ilya grigorik; 2013 december 11 a primer for
web performance timing apis; xiaoqian wu; w3c editor's draft ...
RsaHashedImportParams - Web APIs
the rsahashedimportparams dictionary of the
web crypto api represents the object that should be passed as the algorithm parameter into subtlecrypto.importkey() or subtlecrypto.unwrapkey(), when importing any rsa-based key pair: that is, when the algorithm is identified as any of rsassa-pkcs1-v1_5, rsa-pss, or rsa-oaep.
... specifications specification status comment
web cryptography apithe definition of 'subtlecrypto.rsahashedimportparams' in that specification.
RsaHashedKeyGenParams - Web APIs
the rsahashedkeygenparams dictionary of the
web crypto api represents the object that should be passed as the algorithm parameter into subtlecrypto.generatekey(), when generating any rsa-based key pair: that is, when the algorithm is identified as any of rsassa-pkcs1-v1_5, rsa-pss, or rsa-oaep.
... specifications specification status comment
web cryptography apithe definition of 'subtlecrypto.rsahashedkeygenparams' in that specification.
RsaOaepParams - Web APIs
the rsaoaepparams dictionary of the
web crypto api represents the object that should be passed as the algorithm parameter into subtlecrypto.encrypt(), subtlecrypto.decrypt(), subtlecrypto.wrapkey(), or subtlecrypto.unwrapkey(), when using the rsa_oaep algorithm.
... specifications specification status comment
web cryptography apithe definition of 'subtlecrypto.rsaoaepparams' in that specification.
RsaPssParams - Web APIs
the rsapssparams dictionary of the
web crypto api represents the object that should be passed as the algorithm parameter into subtlecrypto.sign() or subtlecrypto.verify(), when using the rsa-pss algorithm.
... specifications specification status comment
web cryptography apithe definition of 'subtlecrypto.rsapssparams' in that specification.
SVGAElement.target - Web APIs
desktopmobilechromeedgefirefoxinternet exploreroperasafariandroid
webviewchrome for androidfirefox for androidopera for androidsafari on iossamsung internettargetchrome full support yesedge full support 12firefox full support yesie full support 9opera full support ...
... yessafari full support yes
webview android full support yeschrome android full support yesfirefox android full support yesopera android full support yessafari ios full support yessamsung internet android full support yeslegend full support full support ...
SVGAnimatedAngle - Web APIs
desktopmobilechromeedgefirefoxinternet exploreroperasafariandroid
webviewchrome for androidfirefox for androidopera for androidsafari on iossamsung internetsvganimatedanglechrome full support yesedge full support ≤18firefox full support yesie ?
... opera full support yessafari full support 10
webview android no support nochrome android full support yesfirefox android full support yesopera android full support yessafari ios full support 3samsung internet android full support yeslegend full support full support no support no support ...
ScreenOrientation.lock() - Web APIs
desktopmobilechromeedgefirefoxinternet exploreroperasafariandroid
webviewchrome for androidfirefox for androidopera for androidsafari on iossamsung internetlockchrome full support 38edge full support 79firefox full support 43ie no support noopera full support ...
... 25safari no support no
webview android full support 38chrome android full support 38firefox android full support 43opera android full support 25safari ios no support nosamsung internet android full support 3.0legend full support full support no support no support ...
ScreenOrientation.onchange - Web APIs
desktopmobilechromeedgefirefoxinternet exploreroperasafariandroid
webviewchrome for androidfirefox for androidopera for androidsafari on iossamsung internetonchangechrome full support 38edge full support 79firefox full support 43ie no support noopera full support ...
... 25safari no support no
webview android full support 38chrome android full support 38firefox android full support 43opera android full support 25safari ios no support nosamsung internet android full support 3.0legend full support full support no support no support ...
ScreenOrientation.type - Web APIs
desktopmobilechromeedgefirefoxinternet exploreroperasafariandroid
webviewchrome for androidfirefox for androidopera for androidsafari on iossamsung internettypechrome full support 38edge full support 79firefox full support 43ie no support noopera full support ...
... 25safari no support no
webview android full support 38chrome android full support 38firefox android full support 43opera android full support 25safari ios no support nosamsung internet android full support 3.0legend full support full support no support no support ...
ScreenOrientation.unlock() - Web APIs
desktopmobilechromeedgefirefoxinternet exploreroperasafariandroid
webviewchrome for androidfirefox for androidopera for androidsafari on iossamsung internetunlockchrome full support 38edge full support 79firefox full support 43ie no support noopera full support ...
... 25safari no support no
webview android full support 38chrome android full support 38firefox android full support 43opera android full support 25safari ios no support nosamsung internet android full support 3.0legend full support full support no support no support ...
ScriptProcessorNode.bufferSize - Web APIs
note: as of the august 29 2014
web audio api spec publication, this feature has been marked as deprecated, and is soon to be replaced by audio workers.
... // wire up play button playbutton.onclick = function() { source.connect(scriptnode); scriptnode.connect(audioctx.destination); source.start(); } // when the buffer source stops playing, disconnect everything source.onended = function() { source.disconnect(scriptnode); scriptnode.disconnect(audioctx.destination); } specifications specification status comment
web audio apithe definition of 'buffersize' in that specification.
ScriptProcessorNode.onaudioprocess - Web APIs
note: as of the august 29 2014
web audio api spec publication, this feature has been marked as deprecated, and is soon to be replaced by audio workers.
...ire up play button playbutton.onclick = function() { source.connect(scriptnode); scriptnode.connect(audioctx.destination); source.start(); } // when the buffer source stops playing, disconnect everything source.onended = function() { source.disconnect(scriptnode); scriptnode.disconnect(audioctx.destination); } specifications specification status comment
web audio apithe definition of 'onaudioprocess' in that specification.
ScriptProcessorNode - Web APIs
note: as of the august 29 2014
web audio api spec publication, this feature has been marked as deprecated, and was replaced by audioworklet (see audioworkletnode).
... // wire up play button playbutton.onclick = function() { source.connect(scriptnode); scriptnode.connect(audioctx.destination); source.start(); } // when the buffer source stops playing, disconnect everything source.onended = function() { source.disconnect(scriptnode); scriptnode.disconnect(audioctx.destination); } specifications specification status comment
web audio apithe definition of 'scriptprocessornode' in that specification.
Selection.modify() - Web APIs
webkit and blink do.
...this makes the behavior more consistent, as well as making it work the same way
webkit used to work, but unfortunately they have recently changed their behavior.
Selection.removeAllRanges() - Web APIs
desktopmobilechromeedgefirefoxinternet exploreroperasafariandroid
webviewchrome for androidfirefox for androidopera for androidsafari on iossamsung internetremoveallranges experimentalchrome full support yesedge full support 12firefox full support yesie full support yesopera ...
... full support yessafari full support yes
webview android full support yeschrome android full support yesfirefox android full support yesopera android full support yessafari ios full support yessamsung internet android full support yeslegend full support full supportexperimental.
Selection.removeRange() - Web APIs
desktopmobilechromeedgefirefoxinternet exploreroperasafariandroid
webviewchrome for androidfirefox for androidopera for androidsafari on iossamsung internetremoverange experimentalchrome full support 58edge full support 12firefox full support yesie ?
... opera full support 45safari no support no
webview android full support 58chrome android full support 58firefox android full support yesopera android full support 43safari ios no support nosamsung internet android full support 7.0legend full support full support no support no support ...
Selection.toString() - Web APIs
desktopmobilechromeedgefirefoxinternet exploreroperasafariandroid
webviewchrome for androidfirefox for androidopera for androidsafari on iossamsung internettostring experimentalchrome full support 1edge full support ≤18firefox full support yesie ?
...
webview android full support yeschrome android full support yesfirefox android full support yesopera android full support yessafari ios ?
Sensor APIs - Web APIs
the sensor apis are a set of interfaces built to a common design that expose device sensors in a consistent way to the
web platform.
... sensor apis concepts and usage although the generic sensor api specification defines a sensor interface, as a
web developer you will never use it.
ServiceWorkerGlobalScope - Web APIs
<div id="interfacediagram" style="display: inline-block; position: relative; width: 100%; padding-bottom: 12.142857142857142%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-20 0 700 85" preserveaspectratio="xminymin meet"><a xlink:href="/docs/
web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="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="2...
...5" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/
web/api/workerglobalscope" target="_top"><rect x="151" y="1" width="170" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="236" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">workerglobalscope</text></a><polyline points="321,25 331,20 331,30 321,25" stroke="#d4dde4" fill="none"/><line x1="331" y1="25" x2="361" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/
web/api/serviceworkerglobalscope" target="_top"><rect x="361" y="1" width="240" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="481" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="mid...
ServiceWorkerRegistration.navigationPreload - Web APIs
desktopmobilechromeedgefirefoxinternet exploreroperasafariandroid
webviewchrome for androidfirefox for androidopera for androidsafari on iossamsung internetnavigationpreload experimentalchrome full support 59edge full support 17 full support 17 full support 16disabled disabled from versio...
... 44notes full support 44notes notes extended support releases (esr) before firefox 78 esr do not support service workers and the push api.ie no support noopera full support 46safari full support 11.1
webview android full support 59chrome android full support 59firefox android full support 44opera android full support 43safari ios full support 11.3samsung internet android ...
SharedWorkerGlobalScope.onconnect - Web APIs
desktopmobilechromeedgefirefoxinternet exploreroperasafariandroid
webviewchrome for androidfirefox for androidopera for androidsafari on iossamsung internetonconnectchrome full support 4edge full support ≤79firefox full support 29ie no support noopera full support ...
... 10.6safari no support no
webview android full support yeschrome android full support 18firefox android full support 29opera android full support yessafari ios ?
SourceBuffer - Web APIs
<div id="interfacediagram" style="display: inline-block; position: relative; width: 100%; padding-bottom: 11.666666666666666%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 70" preserveaspectratio="xminymin meet"><a xlink:href="/docs/
web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="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="2...
...5" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/
web/api/sourcebuffer" target="_top"><rect x="151" y="1" width="120" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="211" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">sourcebuffer</text></a></svg></div> a:hover text { fill: #0095dd; pointer-events: all;} properties sourcebuffer.appendwindowend controls the timestamp for the end of the append window.
SourceBufferList - Web APIs
<div id="interfacediagram" style="display: inline-block; position: relative; width: 100%; padding-bottom: 11.666666666666666%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 70" preserveaspectratio="xminymin meet"><a xlink:href="/docs/
web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="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="2...
...5" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/
web/api/sourcebufferlist" target="_top"><rect x="151" y="1" width="160" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="231" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">sourcebufferlist</text></a></svg></div> a:hover text { fill: #0095dd; pointer-events: all;} properties sourcebufferlist.length read only returns the number of sourcebuffer objects in the list.
SpeechGrammar - Web APIs
the speechgrammar interface of the
web speech api represents a set of words or patterns of words that we want the recognition service to recognize.
... specifications specification status comment
web speech apithe definition of 'speechgrammar' in that specification.
SpeechGrammarList - Web APIs
the speechgrammarlist interface of the
web speech api represents a list of speechgrammar objects containing words or patterns of words that we want the recognition service to recognize.
...u | 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; specifications specification status comment
web speech apithe definition of 'speechgrammarlist()' in that specification.
SpeechRecognition.abort() - Web APIs
the abort() method of the
web speech api stops the speech recognition service from listening to incoming audio, and doesn't attempt to return a speechrecognitionresult.
...ument.body.onclick = function() { recognition.start(); console.log('ready to receive a color command.'); } abortbtn.onclick = function() { recognition.abort(); console.log('speech recognition aborted.'); } recognition.onspeechend = function() { recognition.stop(); console.log('speech recognition has stopped.'); } specifications specification status comment
web speech apithe definition of 'abort()' in that specification.
SpeechRecognition: audioend event - Web APIs
the audioend event of the
web speech api is fired when the user agent has finished capturing audio for speech recognition.
... bubbles no cancelable no interface event event handler onaudioend examples you can use the audioend event in an addeventlistener method: var recognition = new
webkitspeechrecognition() || new speechrecognition(); recognition.addeventlistener('audioend', function() { console.log('audio capturing ended'); }); or use the onaudioend event handler property: recognition.onaudioend = function() { console.log('audio capturing ended'); } specifications specification status comment
web speech apithe definition of 'speech recognition events' in that specification.
SpeechRecognition: audiostart event - Web APIs
the audiostart event of the
web speech api is fired when the user agent has started to capture audio for speech recognition.
... bubbles no cancelable no interface event event handler onaudiostart examples you can use the audiostart event in an onaudiostart method: var recognition = new
webkitspeechrecognition() || new speechrecognition(); recognition.addeventlistener('audiostart', function() { console.log('audio capturing started'); }); or use the onaudiostart event handler property: recognition.onaudiostart = function() { console.log('audio capturing started'); } specifications specification status comment
web speech apithe definition of 'speech recognition events' in that specification.
SpeechRecognition: end event - Web APIs
the end event of the
web speech api speechrecognition object is fired when the speech recognition service has disconnected.
... bubbles no cancelable no interface event event handler property onend examples you can use the end event in an addeventlistener method: var recognition = new
webkitspeechrecognition() || new speechrecognition(); recognition.addeventlistener('end', function() { console.log('speech recognition service disconnected'); }); or use the onend event handler property: recognition.onend = function() { console.log('speech recognition service disconnected'); } specifications specification status comment
web speech apithe definition of 'speech recognition events' in that specification.
SpeechRecognition: error event - Web APIs
the error event of the
web speech api speechrecognition object is fired when a speech recognition error occurs.
... bubbles no cancelable no interface speechrecognitionerrorevent event handler property onerror examples you can use the error event in an addeventlistener method: var recognition = new
webkitspeechrecognition() || new speechrecognition(); recognition.addeventlistener('error', function(event) { console.log('speech recognition error detected: ' + event.error'); }); or use the onerror event handler property: recognition.onerror = function(event) { console.log('speech recognition error detected: ' + event.error'); } specifications specification status comment
web speech apithe definition of 'speech recognition events' in that specification.
SpeechRecognition: nomatch event - Web APIs
the nomatch event of the
web speech api is fired when the speech recognition service returns a final result with no significant recognition.
... bubbles no cancelable no interface speechrecognitionevent event handler property onnomatch examples you can use the nomatch event in an addeventlistener method: var recognition = new
webkitspeechrecognition() || new speechrecognition(); recognition.addeventlistener('nomatch', function() { console.log('speech not recognized'); }); or use the onnomatch event handler property: recognition.onnomatch = function() { console.log('speech not recognized'); } specifications specification status comment
web speech apithe definition of 'speech recognition events' in that specification.
SpeechRecognition: result event - Web APIs
the result event of the
web speech api is fired when the speech recognition service returns a result — a word or phrase has been positively recognized and this has been communicated back to the app bubbles no cancelable no interface speechrecognitionevent event handler property onresult examples this code is excerpted from our speech color changer example.
... you can use the result event in an addeventlistener method: var recognition = new
webkitspeechrecognition() || new speechrecognition(); recognition.addeventlistener('result', function(event) { var color = event.results[0][0].transcript; diagnostic.textcontent = 'result received: ' + color + '.'; bg.style.backgroundcolor = color; }); or use the onresult event handler property: recognition.onresult = function(event) { var color = event.results[0][0].transcript; diagnostic.textcontent = 'result received: ' + color + '.'; bg.style.backgroundcolor = color; } specifications specification status comment
web speech apithe definition of 'speech recognition events' in that specification.
SpeechRecognition: soundend event - Web APIs
the soundend event of the
web speech api is fired when any sound — recognisable speech or not — has stopped being detected.
... bubbles no cancelable no interface event event handler property onsoundend examples you can use the soundend event in an addeventlistener method: var recognition = new
webkitspeechrecognition() || new speechrecognition(); recognition.addeventlistener('soundend', function(event) { console.log('sound has stopped being received'); }); or use the onsoundend event handler property: recognition.onsoundend = function(event) { console.log('sound has stopped being received'); } specifications specification status comment
web speech apithe definition of 'speech recognition events' in that specification.
SpeechRecognition: soundstart event - Web APIs
the soundstart event of the
web speech api is fired when any sound — recognisable speech or not — has been detected.
... bubbles no cancelable no interface event event handler property onsoundstart examples you can use the soundstart event in an addeventlistener method: var recognition = new
webkitspeechrecognition() || new speechrecognition(); recognition.addeventlistener('soundstart', function() { console.log('some sound is being received'); }); or use the onsoundstart event handler property: recognition.onsoundstart = function() { console.log('some sound is being received'); } specifications specification status comment
web speech apithe definition of 'speech recognition events' in that specification.
SpeechRecognition: speechend event - Web APIs
the speechend event of the
web speech api is fired when speech recognized by the speech recognition service has stopped being detected.
... bubbles no cancelable no interface event event handler property onspeechend examples you can use the speechend event in an addeventlistener method: var recognition = new
webkitspeechrecognition() || new speechrecognition(); recognition.addeventlistener('speechend', function() { console.log('speech has stopped being detected'); }); or use the onspeechend event handler property: recognition.onspeechend = function() { console.log('speech has stopped being detected'); } specifications specification status comment
web speech apithe definition of 'speech recognition events' in that specification.
SpeechRecognition: speechstart event - Web APIs
the speechstart event of the
web speech api is fired when sound recognized by the speech recognition service as speech has been detected.
... bubbles no cancelable no interface event event handler property onspeechstart examples you can use the speechstart event in an addeventlistener method: var recognition = new
webkitspeechrecognition() || new speechrecognition(); recognition.addeventlistener('speechstart', function() { console.log('speech has been detected'); }); or use the onspeechstart event handler property: recognition.onspeechstart = function() { console.log('speech has been detected'); } specifications specification status comment
web speech apithe definition of 'speech recognition events' in that specification.
SpeechRecognition.start() - Web APIs
the start() method of the
web speech api starts the speech recognition service listening to incoming audio with intent to recognize grammars associated with the current speechrecognition.
...ument.body.onclick = function() { recognition.start(); console.log('ready to receive a color command.'); } abortbtn.onclick = function() { recognition.abort(); console.log('speech recognition aborted.'); } recognition.onspeechend = function() { recognition.stop(); console.log('speech recognition has stopped.'); } specifications specification status comment
web speech apithe definition of 'start()' in that specification.
SpeechRecognition: start event - Web APIs
the start event of the
web speech api speechrecognition object is fired when the speech recognition service has begun listening to incoming audio with intent to recognize grammars associated with the current speechrecognition.
... bubbles no cancelable no interface event event handler property onstart examples you can use the start event in an addeventlistener method: var recognition = new
webkitspeechrecognition() || new speechrecognition(); recognition.addeventlistener('start', function() { console.log('speech recognition service has started'); }); or use the onstart event handler property: recognition.onstart = function() { console.log('speech recognition service has started'); } specifications specification status comment
web speech apithe definition of 'speech recognition events' in that specification.
SpeechRecognition.stop() - Web APIs
the stop() method of the
web speech api stops the speech recognition service from listening to incoming audio, and attempts to return a speechrecognitionresult using the audio captured so far.
...ument.body.onclick = function() { recognition.start(); console.log('ready to receive a color command.'); } abortbtn.onclick = function() { recognition.abort(); console.log('speech recognition aborted.'); } recognition.onspeechend = function() { recognition.stop(); console.log('speech recognition has stopped.'); } specifications specification status comment
web speech apithe definition of 'stop()' in that specification.
SpeechRecognitionAlternative - Web APIs
the speechrecognitionalternative interface of the
web speech api represents a single word that has been recognised by the speech recognition service.
... // we then return the transcript property of the speechrecognitionalternative object var color = event.results[0][0].transcript; diagnostic.textcontent = 'result received: ' + color + '.'; bg.style.backgroundcolor = color; } specifications specification status comment
web speech apithe definition of 'speechrecognitionalternative' in that specification.
SpeechRecognitionError - Web APIs
the speechrecognitionerror interface of the
web speech api represents error messages from the recognition service.
... this speechrecognitionerror interface was renamed to speechrecognitionerrorevent in the
web speech api specification.
SpeechRecognitionErrorEvent - Web APIs
the speechrecognitionerrorevent interface of the
web speech api represents error messages from the recognition service.
... examples var recognition = new speechrecognition(); recognition.onerror = function(event) { console.log('speech recognition error detected: ' + event.error); console.log('additional information: ' + event.message); } specifications specification status comment
web speech apithe definition of 'speechrecognitionerrorevent' in that specification.
SpeechRecognitionEvent - Web APIs
the speechrecognitionevent interface of the
web speech api represents the event object for the result and nomatch events, and contains all the data associated with an interim or final speech recognition result.
... // we then return the transcript property of the speechrecognitionalternative object var color = event.results[0][0].transcript; diagnostic.textcontent = 'result received: ' + color + '.'; bg.style.backgroundcolor = color; } specifications specification status comment
web speech apithe definition of 'speechrecognitionevent' in that specification.
SpeechRecognitionResult - Web APIs
the speechrecognitionresult interface of the
web speech api represents a single recognition match, which may contain multiple speechrecognitionalternative objects.
... // we then return the transcript property of the speechrecognitionalternative object var color = event.results[0][0].transcript; diagnostic.textcontent = 'result received: ' + color + '.'; bg.style.backgroundcolor = color; } specifications specification status comment
web speech apithe definition of 'speechrecognitionresult' in that specification.
SpeechRecognitionResultList - Web APIs
the speechrecognitionresultlist interface of the
web speech api represents a list of speechrecognitionresult objects, or a single one if results are being captured in continuous mode.
... // we then return the transcript property of the speechrecognitionalternative object var color = event.results[0][0].transcript; diagnostic.textcontent = 'result received: ' + color + '.'; bg.style.backgroundcolor = color; } specifications specification status comment
web speech apithe definition of 'speechrecognitionresultlist' in that specification.
SpeechSynthesis: voiceschanged event - Web APIs
the voiceschanged event of the
web speech api is fired when the list of speechsynthesisvoice objects that would be returned by the speechsynthesis.getvoices() method has changed (when the voiceschanged event fires.) bubbles no cancelable no interface event event handler property onvoiceschanged examples this could be used to repopulate a list of voices that the user can choose between when the event fires.
...th.getvoices(); for(i = 0; i < voices.length ; i++) { var option = document.createelement('option'); option.textcontent = voices[i].name + ' (' + voices[i].lang + ')'; option.setattribute('data-lang', voices[i].lang); option.setattribute('data-name', voices[i].name); voiceselect.appendchild(option); } } specifications specification status comment
web speech apithe definition of 'speech synthesis events' in that specification.
SpeechSynthesis - Web APIs
the speechsynthesis interface of the
web speech api is the controller interface for the speech service; this can be used to retrieve information about the synthesis voices available on the device, start and pause speech, and other commands besides.
...value); var selectedoption = voiceselect.selectedoptions[0].getattribute('data-name'); for(i = 0; i < voices.length ; i++) { if(voices[i].name === selectedoption) { utterthis.voice = voices[i]; } } utterthis.pitch = pitch.value; utterthis.rate = rate.value; synth.speak(utterthis); inputtxt.blur(); } specifications specification status comment
web speech apithe definition of 'speechsynthesis' in that specification.
SpeechSynthesisErrorEvent - Web APIs
the speechsynthesiserrorevent interface of the
web speech api contains information about any errors that occur while processing speechsynthesisutterance objects in the speech service.
...ttribute('data-name'); for(i = 0; i < voices.length ; i++) { if(voices[i].name === selectedoption) { utterthis.voice = voices[i]; } } synth.speak(utterthis); utterthis.onerror = function(event) { console.log('an error has occurred with the speech synthesis: ' + event.error); } inputtxt.blur(); } specifications specification status comment
web speech apithe definition of 'speechsynthesiserrorevent' in that specification.
SpeechSynthesisEvent - Web APIs
the speechsynthesisevent interface of the
web speech api contains information about the current state of speechsynthesisutterance objects that have been processed in the speech service.
... var char = event.utterance.text.charat(event.charindex); console.log('speech paused at character ' + event.charindex + ' of "' + event.utterance.text + '", which is "' + char + '".'); } utterthis.onboundary = function(event) { console.log(event.name + ' boundary reached after ' + event.elapsedtime + ' milliseconds.'); } specifications specification status comment
web speech apithe definition of 'speechsynthesisevent' in that specification.
SpeechSynthesisUtterance: boundary event - Web APIs
the boundary event of the
web speech api is fired when the spoken utterance reaches a word or sentence boundary.
...deventlistener('boundary', function(event) { console.log(event.name + ' boundary reached after ' + event.elapsedtime + ' milliseconds.'); }); or use the onboundary event handler property: utterthis.onboundary = function(event) { console.log(event.name + ' boundary reached after ' + event.elapsedtime + ' milliseconds.'); } specifications specification status comment
web speech apithe definition of 'speech synthesis utterance events' in that specification.
SpeechSynthesisUtterance: end event - Web APIs
the end event of the
web speech api speechsynthesisutterance object is fired when the utterance has finished being spoken.
...is.addeventlistener('end', function(event) { console.log('utterance has finished being spoken after ' + event.elapsedtime + ' milliseconds.'); }); or use the onend event handler property: utterthis.onend = function(event) { console.log('utterance has finished being spoken after ' + event.elapsedtime + ' milliseconds.'); } specifications specification status comment
web speech apithe definition of 'speech synthesis utterance events' in that specification.
SpeechSynthesisUtterance: error event - Web APIs
the error event of the
web speech api speechsynthesisutterance object is fired when an error occurs that prevents the utterance from being succesfully spoken.
...entlistener method: utterthis.addeventlistener('error', function(event) { console.log('an error has occurred with the speech synthesis: ' + event.error'); }); or use the onerror event handler property: utterthis.onerror = function(event) { console.log('an error has occurred with the speech synthesis: ' + event.error'); } specifications specification status comment
web speech apithe definition of 'speech synthesis utterance events' in that specification.
SpeechSynthesisUtterance: mark event - Web APIs
the mark event of the
web speech api speechsynthesisutterance object is fired when the spoken utterance reaches a named ssml "mark" tag.
... onmark examples you can use the mark event in an addeventlistener method: utterthis.addeventlistener('mark', function(event) { console.log('a mark was reached: ' + event.name); }); or use the onmark event handler property: utterthis.onmark = function(event) { console.log('a mark was reached: ' + event.name); } specifications specification status comment
web speech apithe definition of 'speech synthesis utterance events' in that specification.
SpeechSynthesisUtterance: pause event - Web APIs
the pause event of the
web speech api speechsynthesisutterance object is fired when the utterance is paused part way through.
...n an addeventlistener method: utterthis.addeventlistener('pause', function(event) { console.log('speech paused after ' + event.elapsedtime + ' milliseconds.'); }); or use the onpause event handler property: utterthis.onpause = function(event) { console.log('speech paused after ' + event.elapsedtime + ' milliseconds.'); } specifications specification status comment
web speech apithe definition of 'speech synthesis utterance events' in that specification.
SpeechSynthesisUtterance: resume event - Web APIs
the resume event of the
web speech api speechsynthesisutterance object is fired when a paused utterance is resumed.
...addeventlistener method: utterthis.addeventlistener('resume', function(event) { console.log('speech resumed after ' + event.elapsedtime + ' milliseconds.'); }); or use the onresume event handler property: utterthis.onresume = function(event) { console.log('speech resumed after ' + event.elapsedtime + ' milliseconds.'); } specifications specification status comment
web speech apithe definition of 'speech synthesis utterance events' in that specification.
SpeechSynthesisUtterance: start event - Web APIs
the start event of the
web speech api speechsynthesisutterance object is fired when the utterance has begun to be spoken.
... addeventlistener method: utterthis.addeventlistener('start', function(event) { console.log('we have started uttering this speech: ' + event.utterance.text); }); or use the onstart event handler property: utterthis.onstart = function(event) { console.log('we have started uttering this speech: ' + event.utterance.text); } specifications specification status comment
web speech apithe definition of 'speech synthesis utterance events' in that specification.
SpeechSynthesisUtterance - Web APIs
the speechsynthesisutterance interface of the
web speech api represents a speech request.
...= voices[i].name + ' (' + voices[i].lang + ')'; option.value = i; voiceselect.appendchild(option); } inputform.onsubmit = function(event) { event.preventdefault(); var utterthis = new speechsynthesisutterance(inputtxt.value); utterthis.voice = voices[voiceselect.value]; synth.speak(utterthis); inputtxt.blur(); } specifications specification status comment
web speech apithe definition of 'speechsynthesisutterance' in that specification.
SpeechSynthesisVoice - Web APIs
the speechsynthesisvoice interface of the
web speech api represents a voice that the system supports.
...ch.value; utterthis.rate = rate.value; synth.speak(utterthis); utterthis.onpause = function(event) { var char = event.utterance.text.charat(event.charindex); console.log('speech paused at character ' + event.charindex + ' of "' + event.utterance.text + '", which is "' + char + '".'); } inputtxt.blur(); } specifications specification status comment
web speech apithe definition of 'speechsynthesisvoice' in that specification.
StereoPannerNode.pan - Web APIs
var audioctx = new (window.audiocontext || window.
webkitaudiocontext)(); var myaudio = document.queryselector('audio'); var pancontrol = document.queryselector('.panning-control'); var panvalue = document.queryselector('.panning-value'); pre.innerhtml = myscript.innerhtml; // create a mediaelementaudiosourcenode // feed the htmlmediaelement into it var source = audioctx.createmediaelementsource(myaudio); // create a stereo panner var pannode = a...
...etvalueattime(pancontrol.value, audioctx.currenttime); panvalue.innerhtml = pancontrol.value; } // connect the mediaelementaudiosourcenode to the pannode // and the pannode to the destination, so we can play the // music and adjust the panning using the controls source.connect(pannode); pannode.connect(audioctx.destination); specifications specification status comment
web audio apithe definition of 'pan' in that specification.
Storage.removeItem() - Web APIs
the storage interface of the
web storage api provides access to a particular domain's session or local storage.
... function populatestorage() { sessionstorage.setitem('bgcolor', 'red'); sessionstorage.setitem('font', 'helvetica'); sessionstorage.setitem('image', 'mycat.png'); sessionstorage.removeitem('image'); } note: to see this used within a real world example, see our
web storage demo.
Storage - Web APIs
the storage interface of the
web storage api provides access to a particular domain's session or local storage.
...getitem('image'); document.getelementbyid('bgcolor').value = currentcolor; document.getelementbyid('font').value = currentfont; document.getelementbyid('image').value = currentimage; htmlelem.style.backgroundcolor = '#' + currentcolor; pelem.style.fontfamily = currentfont; imgelem.setattribute('src', currentimage); } note: to see this running as a complete working example, see our
web storage demo.
StorageEstimate - Web APIs
properties quota secure context a numeric value in bytes which provides a conservative approximation of the total storage the user's device or computer has available for the site origin or
web app.
... usage secure context a numeric value in bytes approximating the amount of storage space currently being used by the site or
web app, out of the available space as indicated by quota.
StorageEvent - Web APIs
<div id="interfacediagram" style="display: inline-block; position: relative; width: 100%; padding-bottom: 11.666666666666666%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 70" preserveaspectratio="xminymin meet"><a xlink:href="/docs/
web/api/event" target="_top"><rect x="1" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="38.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">event</text></a><polyline points="76,25 86,20 86,30 76,25" stroke="#d4dde4" fill="none"/><line x1="86" y1="25" x2="116" y2="...
...25" stroke="#d4dde4"/><a xlink:href="/docs/
web/api/storageevent" target="_top"><rect x="116" y="1" width="120" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="176" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">storageevent</text></a></svg></div> a:hover text { fill: #0095dd; pointer-events: all;} method overview void initstorageevent( in domstring type, in boolean canbubble, in boolean cancelable, in domstring key, in domstring oldvalue, in domstring newvalue, in usvstring url, in storage storagearea ); attributes attribute type description key domstring represents the key changed.
StorageManager.persist() - Web APIs
desktopmobilechromeedgefirefoxinternet exploreroperasafariandroid
webviewchrome for androidfirefox for androidopera for androidsafari on iossamsung internetpersistchrome full support 52 full support 52 no support 48 — 52alternate name alternate name uses the non-standard name: requestpersistentedge full support ...
...
webview android full support 52 full support 52 no support 48 — 52alternate name alternate name uses the non-standard name: requestpersistentchrome android full support 52 full support 52 no support 48 — 52alternate name alternate name uses the non-standard name: requestpersistentfirefox android full support ...
SubtleCrypto.sign() - Web APIs
supported algorithms the
web crypto api provides four algorithms that can be used for signing and signature verification.
...*/ function getmessageencoding() { const messagebox = document.queryselector(".hmac #message"); let message = messagebox.value; let enc = new textencoder(); return enc.encode(message); } let encoded = getmessageencoding(); let signature = await window.crypto.subtle.sign( "hmac", key, encoded ); specifications specification status comment
web cryptography apithe definition of 'subtlecrypto.sign()' in that specification.
SyncEvent - Web APIs
<div id="interfacediagram" style="display: inline-block; position: relative; width: 100%; padding-bottom: 8.571428571428571%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-20 0 700 60" preserveaspectratio="xminymin meet"><a xlink:href="/docs/
web/api/event" target="_top"><rect x="1" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="38.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">event</text></a><polyline points="76,25 86,20 86,30 76,25" stroke="#d4dde4" fill="none"/><line x1="86" y1="25" x2="116" y2="...
...25" stroke="#d4dde4"/><a xlink:href="/docs/
web/api/extendableevent" target="_top"><rect x="116" y="1" width="150" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="191" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">extendableevent</text></a><polyline points="266,25 276,20 276,30 266,25" stroke="#d4dde4" fill="none"/><line x1="276" y1="25" x2="306" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/
web/api/syncevent" target="_top"><rect x="306" y="1" width="90" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="351" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">syn...
TaskAttributionTiming.containerId - Web APIs
desktopmobilechromeedgefirefoxinternet exploreroperasafariandroid
webviewchrome for androidfirefox for androidopera for androidsafari on iossamsung internetcontainerid experimentalchrome full support 58edge full support ≤79firefox no support noie ?
...
webview android full support 58chrome android full support 58firefox android no support noopera android full support yessafari ios ?
TaskAttributionTiming.containerType - Web APIs
desktopmobilechromeedgefirefoxinternet exploreroperasafariandroid
webviewchrome for androidfirefox for androidopera for androidsafari on iossamsung internetcontainertype experimentalchrome full support 58edge full support ≤79firefox no support noie ?
...
webview android full support 58chrome android full support 58firefox android no support noopera android full support yessafari ios ?
TaskAttributionTiming - Web APIs
<div id="interfacediagram" style="display: inline-block; position: relative; width: 100%; padding-bottom: 11.666666666666666%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 70" preserveaspectratio="xminymin meet"><a xlink:href="/docs/
web/api/performanceentry" target="_top"><rect x="1" y="1" width="160" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="81" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">performanceentry</text></a><polyline points="161,25 171,20 171,30 161,25" stroke="#d4dde4" fill="none"/><line x1="...
...171" y1="25" x2="201" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/
web/api/taskattributiontiming" target="_top"><rect x="201" y="1" width="210" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="306" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">taskattributiontiming</text></a></svg></div> a:hover text { fill: #0095dd; pointer-events: all;} properties taskattributiontiming.containertype read only returns the type of frame container, one of iframe, embed, or object.
HTMLSlotElement.assignedSlot - Web APIs
desktopmobilechromeedgefirefoxinternet exploreroperasafariandroid
webviewchrome for androidfirefox for androidopera for androidsafari on iossamsung internetassignedslotchrome full support 53edge full support ≤18firefox full support yesie ?
... opera full support 40safari full support 10.1
webview android full support 53chrome android full support 53firefox android full support yesopera android full support 41safari ios full support 10.3samsung internet android full support 6.0legend full support full support compatibility unknown ...
TextTrack.mode - Web APIs
when a text track is loaded in the disabled state, the corresponding
webvtt file is not loaded until the state changes to either showing or hidden.
... tracks whose kind is "chapters" are used by the user agent or the
web site or
web app to construct and present an interface for navigating the named chapters, where each cue in the list represents a chapter in the media.
TimeEvent - Web APIs
<div id="interfacediagram" style="display: inline-block; position: relative; width: 100%; padding-bottom: 11.666666666666666%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 70" preserveaspectratio="xminymin meet"><a xlink:href="/docs/
web/api/event" target="_top"><rect x="1" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="38.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">event</text></a><polyline points="76,25 86,20 86,30 76,25" stroke="#d4dde4" fill="none"/><line x1="86" y1="25" x2="116" y2="...
...25" stroke="#d4dde4"/><a xlink:href="/docs/
web/api/timeevent" target="_top"><rect x="116" y="1" width="90" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="161" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">timeevent</text></a></svg></div> a:hover text { fill: #0095dd; pointer-events: all;} properties timeevent.detail read only is a long that specifies some detail information about the event, depending on the type of the event.
UIEvent.layerX - Web APIs
desktopmobilechromeedgefirefoxinternet exploreroperasafariandroid
webviewchrome for androidfirefox for androidopera for androidsafari on iossamsung internetlayerx non-standardchrome full support yesedge full support 12firefox full support yesie full support 9opera full sup...
...port yessafari full support yes
webview android full support yeschrome android full support yesfirefox android full support yesopera android full support yessafari ios full support yessamsung internet android full support yeslegend full support full supportnon-standard.
sourceCapabilities - Web APIs
a device is considered "responsible" for an event only when that interaction is part of the abstraction provided by the
web platform.
... for example, many user agents allow a window to be resized with a mouse or a keyboard, but this detail is not exposed to the
web platform in any way, and so the sourcecapabilities of a resize event will typically be null.
UIEvent - Web APIs
<div id="interfacediagram" style="display: inline-block; position: relative; width: 100%; padding-bottom: 11.666666666666666%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 70" preserveaspectratio="xminymin meet"><a xlink:href="/docs/
web/api/event" target="_top"><rect x="1" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="38.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">event</text></a><polyline points="76,25 86,20 86,30 76,25" stroke="#d4dde4" fill="none"/><line x1="86" y1="25" x2="116" y2="...
...25" stroke="#d4dde4"/><a xlink:href="/docs/
web/api/uievent" target="_top"><rect x="116" y="1" width="75" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="153.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">uievent</text></a></svg></div> a:hover text { fill: #0095dd; pointer-events: all;} constructors uievent() creates a uievent object.
URL.hash - Web APIs
note: this feature is available in
web workers.
... examples const url = new url('/docs/
web/api/url/href#examples'); console.log(url.hash); // logs: '#examples' specifications specification status comment urlthe definition of 'url.hash' in that specification.
URL.host - Web APIs
note: this feature is available in
web workers.
... 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 of 'url.host' in that specification.
URL.hostname - Web APIs
note: this feature is available in
web workers.
... examples const url = new url('/docs/
web/api/url/hostname'); console.log(url.hostname); // logs: 'developer.mozilla.org' specifications specification status comment urlthe definition of 'url.hostname' in that specification.
URL.href - Web APIs
note: this feature is available in
web workers.
... examples const url = new url('/docs/
web/api/url/href'); console.log(url.href); // logs: '/docs/
web/api/url/href' specifications specification status comment urlthe definition of 'url.href' in that specification.
URL.password - Web APIs
note: this feature is available in
web workers.
... 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.
WaveShaperNode - Web APIs
var audioctx = new (window.audiocontext || window.
webkitaudiocontext)(); var distortion = audioctx.createwaveshaper(); ...
... distortion.curve = makedistortioncurve(400); distortion.oversample = '4x'; specifications specification status comment
web audio apithe definition of 'waveshapernode' in that specification.
Controlling multiple parameters with ConstantSourceNode - Web APIs
value="0.8" name="volume" id="volumecontrol"> </div> </div> <p>use the button above to start and stop the tones, and the volume control to change the volume of the notes e and g in the chord.</p> css .controls { width: 400px; position: relative; vertical-align: middle; height: 44px; } .button { font-size: 32px; cursor: pointer; user-select: none; -moz-user-select: none; -
webkit-user-select: none; -ms-user-select: none; -o-user-select: none; } .right { width: 50%; font: 14px "open sans", "lucida grande", "arial", sans-serif; position: absolute; right: 0; display: table-cell; vertical-align: middle; } .right span { vertical-align: middle; } .right input { vertical-align: baseline; } .left { width: 50%; position: absolute; left: 0; displa...
... function setup() { context = new (window.audiocontext || window.
webkitaudiocontext)(); playbutton = document.queryselector("#playbutton"); volumecontrol = document.queryselector("#volumecontrol"); playbutton.addeventlistener("click", toggleplay, false); volumecontrol.addeventlistener("input", changevolume, false); gainnode1 = context.creategain(); gainnode1.gain.value = 0.5; gainnode2 = context.creategain(); gainnode3 = context.creategain(); ...
Window: beforeunload event - Web APIs
bubbles no cancelable yes interface event event handler property onbeforeunload this event enables a
web page to trigger a confirmation dialog asking the user if they really want to leave the page.
... attaching an event handler/listener to window or document's beforeunload event prevents browsers from using in-memory page navigation caches, like firefox's back-forward cache or
webkit's page cache.
window.cancelIdleCallback() - Web APIs
desktopmobilechromeedgefirefoxinternet exploreroperasafariandroid
webviewchrome for androidfirefox for androidopera for androidsafari on iossamsung internetcancelidlecallback experimentalchrome full support 47edge full support 79firefox full support 55 full support 55 full...
...to change preferences in firefox, visit about:config.ie no support noopera full support yessafari no support no
webview android full support 47chrome android full support 47firefox android full support 55 full support 55 full support 53disabled disabled from version 53: this feature is beh...
Window.crypto - Web APIs
this object allows
web pages access to certain cryptographic related services.
...cument.getelementbyid("myrandtext"); randtext.innerhtml = "the random numbers are: " for (var i = 0; i < array.length; i++) { randtext.innerhtml += array[i] + " "; } } html <p id="myrandtext">the random numbers are: </p> <button type="button" onclick='genrandomnumbers()'>generate 10 random numbers</button> result specifications specification status comment
web cryptography apithe definition of 'window.crypto' in that specification.
Window.devicePixelRatio - Web APIs
desktopmobilechromeedgefirefoxinternet exploreroperasafariandroid
webviewchrome for androidfirefox for androidopera for androidsafari on iossamsung internetdevicepixelratiochrome full support 1edge full support 12firefox full support 18ie full support 11opera full support ...
... 11.1safari full support 3
webview android full support 1chrome android full support 18firefox android full support 18opera android full support 11.1safari ios full support 1samsung internet android full support 1.0legend full support full support ...
Window.event - Web APIs
desktopmobilechromeedgefirefoxinternet exploreroperasafariandroid
webviewchrome for androidfirefox for androidopera for androidsafari on iossamsung interneteventchrome full support 1edge full support 12firefox full support 63notes disabled full support 63notes disabled notes this was bri...
...to change preferences in firefox, visit about:config.ie full support 4opera full support 7safari full support 1.1
webview android full support 1chrome android full support 18firefox android full support 63notes disabled full support 63notes disabled notes this was briefly enabled by default in 65, then removed again while related comp...
Window.minimize() - Web APIs
desktopmobilechromeedgefirefoxinternet exploreroperasafariandroid
webviewchrome for androidfirefox for androidopera for androidsafari on iossamsung internetminimize non-standardchrome no support noedge no support nofirefox no support noie ?
...
webview android no support nochrome android no support nofirefox android no support noopera android ?
Window.navigator - Web APIs
if (susrag.indexof("firefox") > -1) { sbrowser = "mozilla firefox"; // "mozilla/5.0 (x11; ubuntu; linux x86_64; rv:61.0) gecko/20100101 firefox/61.0" } else if (susrag.indexof("samsungbrowser") > -1) { sbrowser = "samsung internet"; // "mozilla/5.0 (linux; android 9; samsung sm-g955f build/ppr1.180610.011) apple
webkit/537.36 (khtml, like gecko) samsungbrowser/9.4 chrome/67.0.3396.87 mobile safari/537.36 } else if (susrag.indexof("opera") > -1 || susrag.indexof("opr") > -1) { sbrowser = "opera"; // "mozilla/5.0 (macintosh; intel mac os x 10_14_0) apple
webkit/537.36 (khtml, like gecko) chrome/70.0.3538.102 safari/537.36 opr/57.0.3098.106" } else if (susrag.indexof("trident") > -1) { sbrowser = "microsof...
...t internet explorer"; // "mozilla/5.0 (windows nt 10.0; wow64; trident/7.0; .net4.0c; .net4.0e; zoom 3.6.0; wbx 1.0.0; rv:11.0) like gecko" } else if (susrag.indexof("edge") > -1) { sbrowser = "microsoft edge"; // "mozilla/5.0 (windows nt 10.0; win64; x64) apple
webkit/537.36 (khtml, like gecko) chrome/58.0.3029.110 safari/537.36 edge/16.16299" } else if (susrag.indexof("chrome") > -1) { sbrowser = "google chrome or chromium"; // "mozilla/5.0 (x11; linux x86_64) apple
webkit/537.36 (khtml, like gecko) ubuntu chromium/66.0.3359.181 chrome/66.0.3359.181 safari/537.36" } else if (susrag.indexof("safari") > -1) { sbrowser = "apple safari"; // "mozilla/5.0 (iphone; cpu iphone os 11_4 like mac os x) apple
webkit/605.1.15 (khtml, like gecko) version/11.0 mobile/15e148 safari/604.1 980x130...
Window: online event - Web APIs
note: this event shouldn't be used to determine the availability of a particular
website.
... network problems or firewalls might still prevent the
website from being reached.
Window.openDialog() - Web APIs
desktopmobilechromeedgefirefoxinternet exploreroperasafariandroid
webviewchrome for androidfirefox for androidopera for androidsafari on iossamsung internetopendialog non-standardchrome no support noedge no support nofirefox no support noie ?
...
webview android no support nochrome android no support nofirefox android no support noopera android ?
Window.print() - Web APIs
desktopmobilechromeedgefirefoxinternet exploreroperasafariandroid
webviewchrome for androidfirefox for androidopera for androidsafari on iossamsung internetprintchrome full support 1notes full support 1notes notes starting with chrome 46, this method is blocked inside an <iframe> unless its sandbox attribute has the value allow-modals.edge full support ...
... 1ie full support 5opera full support 6notes full support 6notes notes starting with opera 33, this method is blocked inside an <iframe> unless its sandbox attribute has the value allow-modals.safari full support 1.1
webview android full support 1notes full support 1notes notes starting with
webview 46, this method is blocked inside an <iframe> unless its sandbox attribute has the value allow-modals.chrome android full support 18notes full support ...
Window.prompt() - Web APIs
desktopmobilechromeedgefirefoxinternet exploreroperasafariandroid
webviewchrome for androidfirefox for androidopera for androidsafari on iossamsung internetpromptchrome full support 1notes full support 1notes notes starting with chrome 46, this method is blocked inside an <iframe> unless its sandbox attribute has the value allow-modals.edge full support ...
...desktop versions of ie do implement this function.opera full support 3notes full support 3notes notes starting with opera 33, this method is blocked inside an <iframe> unless its sandbox attribute has the value allow-modals.safari full support 1
webview android full support 1notes full support 1notes notes starting with
webview 46, this method is blocked inside an <iframe> unless its sandbox attribute has the value allow-modals.chrome android full support 18notes full support ...
window.requestIdleCallback() - Web APIs
desktopmobilechromeedgefirefoxinternet exploreroperasafariandroid
webviewchrome for androidfirefox for androidopera for androidsafari on iossamsung internetrequestidlecallback experimentalchrome full support 47edge full support 79firefox full support 55notes full support 55notes notes en...
... no support 53 — 55notes notes implemented but disabled by default.ie no support noopera full support 34safari no support no
webview android full support 47chrome android full support 47firefox android full support 55notes full support 55notes notes enabled by default.
Window.restore() - Web APIs
desktopmobilechromeedgefirefoxinternet exploreroperasafariandroid
webviewchrome for androidfirefox for androidopera for androidsafari on iossamsung internetrestorechrome no support noedge no support nofirefox no support noie ?
...
webview android no support nochrome android no support nofirefox android no support noopera android ?
Window.setImmediate() - Web APIs
it meets resistance both from gecko (firefox) and
webkit (google/apple).
... messagechannel can be used reliably inside of
web workers whereas the semantics of postmessage mean it cannot be used there.
Window.speechSynthesis - Web APIs
the speechsynthesis read-only property of the window object returns a speechsynthesis object, which is the entry point into using
web speech api speech synthesis functionality.
...ault(); var utterthis = new speechsynthesisutterance(inputtxt.value); var selectedoption = voiceselect.selectedoptions[0].getattribute('data-name'); for(i = 0; i < voices.length ; i++) { if(voices[i].name === selectedoption) { utterthis.voice = voices[i]; } } synth.speak(utterthis); inputtxt.blur(); } specifications specification status comment
web speech apithe definition of 'speechsynthesis' in that specification.
Window.stop() - Web APIs
desktopmobilechromeedgefirefoxinternet exploreroperasafariandroid
webviewchrome for androidfirefox for androidopera for androidsafari on iossamsung internetstopchrome full support yesedge full support 14firefox full support yesie no support noopera full support ...
... yessafari full support yes
webview android full support yeschrome android full support yesfirefox android full support yesopera android full support yessafari ios full support yessamsung internet android full support yeslegend full support full support no support no support ...
Window.updateCommands() - Web APIs
desktopmobilechromeedgefirefoxinternet exploreroperasafariandroid
webviewchrome for androidfirefox for androidopera for androidsafari on iossamsung internetupdatecommands non-standardchrome no support noedge no support nofirefox full support yesie ?
...
webview android no support nochrome android no support nofirefox android full support yesopera android ?
WindowOrWorkerGlobalScope.setInterval() - Web APIs
|*| |*| /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.ispol...
... 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.
WindowOrWorkerGlobalScope.setTimeout() - Web APIs
example the following example sets up two simple buttons in a
web page and hooks them to the settimeout() and cleartimeout() routines.
... firefox 50 no longer throttles background tabs if a
web audio api audiocontext is actively playing sound.
WorkerGlobalScope.navigator - Web APIs
orker scope, which can be referenced with workerglobalscope.self), you will get a workernavigator object written to the console — something like the following: object {online: true, useragent: "mozilla/5.0 (macintosh; intel mac os x 10_10_1) ap…ml, like gecko) chrome/40.0.2214.93 safari/537.36", product: "gecko", platform: "macintel", appversion: "5.0 (macintosh; intel mac os x 10_10_1) apple
webki…ml, like gecko) chrome/40.0.2214.93 safari/537.36"…} appcodename: "mozilla" appname: "netscape" appversion: "5.0 (macintosh; intel mac os x 10_10_1) apple
webkit/537.36 (khtml, like gecko) chrome/40.0.2214.93 safari/537.36" hardwareconcurrency: 4 online: true platform: "macintel" product: "gecko" useragent: "mozilla/5.0 (macintosh; intel mac os x 10_10_1) appl...
...e
webkit/537.36 (khtml, like gecko) chrome/40.0.2214.93 safari/537.36" __proto__: object you could use this navigator object to return more information about the runtime envinronment, as you might do with a normal navigator object.
WritableStreamDefaultWriter.ready - Web APIs
desktopmobilechromeedgefirefoxinternet exploreroperasafariandroid
webviewchrome for androidfirefox for androidopera for androidsafari on iossamsung internetready experimentalchrome full support 59edge full support 16firefox no support noie no support noopera full support ...
...
webview android full support 59chrome android full support 59firefox android no support noopera android full support 43safari ios ?
XMLHttpRequest.multipart - Web APIs
do not use it on production sites facing the
web: it will not work for every user.
...please use server-sent events,
web sockets, or responsetext from progress events instead.
XMLHttpRequestEventTarget - Web APIs
<div id="interfacediagram" style="display: inline-block; position: relative; width: 100%; padding-bottom: 11.666666666666666%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 70" preserveaspectratio="xminymin meet"><a xlink:href="/docs/
web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="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="2...
...5" 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;} properties xmlhttprequesteventtarget.onabort contains the function to call when a request is aborted and the abort event is received by this object.
XREnvironmentBlendMode - Web APIs
the
webxr api's enumerated type xrenvironmentblendmode defines strings used to identify if and how to blend the rendered virtual content with the real world.
... specifications specification status comment
webxr augmented reality modulethe definition of 'xrenvironmentblendmode' in that specification.
XRFrame.session - Web APIs
syntax var xrsession = xrframe.session; value a xrsession object representing the
webxr session for which this xrframe describes the object positions and orientations.
... specifications specification status comment
webxr device apithe definition of 'xrframe.session' in that specification.
XRFrame - Web APIs
a
webxr device api xrframe object is passed into the requestanimationframe() callback function and provides access to the information needed in order to render a single frame of animation for an xrsession describing a vr or ar sccene.
... specifications specification status comment
webxr device apithe definition of 'xrframe' in that specification.
XRFrameRequestCallback - Web APIs
the xrframerequestcallback is a callback function passed into xrsession.requestanimationframe (part of
webxr api) to obtain the current time and the current xrframe.
... specifications specification status comment
webxr device apithe definition of 'xrframerequestcallback' in that specification.
SVGFontFaceNameElement - Web APIs
<div id="interfacediagram" style="display: inline-block; position: relative; width: 100%; padding-bottom: 23.333333333333332%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 140" preserveaspectratio="xminymin meet"><a xlink:href="/docs/
web/api/svgfontfacenameelement" target="_top"><rect x="1" y="1" width="220" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="111" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">svgfontfacenameelement</text></a></svg></div> a:hover text { fill: #0095dd; pointer-events: all;} ...
SVGFontFaceSrcElement - Web APIs
<div id="interfacediagram" style="display: inline-block; position: relative; width: 100%; padding-bottom: 23.333333333333332%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 140" preserveaspectratio="xminymin meet"><a xlink:href="/docs/
web/api/svgfontfacesrcelement" target="_top"><rect x="1" y="1" width="210" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="106" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">svgfontfacesrcelement</text></a></svg></div> a:hover text { fill: #0095dd; pointer-events: all;} p...
SVGFontFaceUriElement - Web APIs
<div id="interfacediagram" style="display: inline-block; position: relative; width: 100%; padding-bottom: 23.333333333333332%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 140" preserveaspectratio="xminymin meet"><a xlink:href="/docs/
web/api/svgfontfaceurielement" target="_top"><rect x="1" y="1" width="210" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="106" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">svgfontfaceurielement</text></a></svg></div> a:hover text { fill: #0095dd; pointer-events: all;} p...
SVGGlyphElement - Web APIs
<div id="interfacediagram" style="display: inline-block; position: relative; width: 100%; padding-bottom: 11.666666666666666%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 70" preserveaspectratio="xminymin meet"><a xlink:href="/docs/
web/api/svgglyphelement" target="_top"><rect x="1" y="1" width="150" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="76" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">svgglyphelement</text></a></svg></div> a:hover text { fill: #0095dd; pointer-events: all;} warning: this...
SVGGlyphRefElement - Web APIs
<div id="interfacediagram" style="display: inline-block; position: relative; width: 100%; padding-bottom: 23.333333333333332%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 140" preserveaspectratio="xminymin meet"><a xlink:href="/docs/
web/api/svgglyphrefelement" target="_top"><rect x="1" y="1" width="180" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="91" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">svgglyphrefelement</text></a></svg></div> a:hover text { fill: #0095dd; pointer-events: all;} properti...
SVGHKernElement - Web APIs
<div id="interfacediagram" style="display: inline-block; position: relative; width: 100%; padding-bottom: 23.333333333333332%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 140" preserveaspectratio="xminymin meet"><a xlink:href="/docs/
web/api/svghkernelement" target="_top"><rect x="1" y="1" width="150" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="76" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">svghkernelement</text></a></svg></div> a:hover text { fill: #0095dd; pointer-events: all;} properties th...
SVGMeshElement - Web APIs
<div id="interfacediagram" style="display: inline-block; position: relative; width: 100%; padding-bottom: 23.333333333333332%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 140" preserveaspectratio="xminymin meet"><a xlink:href="/docs/
web/api/svgmeshelement" target="_top"><rect x="1" y="1" width="140" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="71" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">svgmeshelement</text></a></svg></div> a:hover text { fill: #0095dd; pointer-events: all;} properties this...
SVGMissingGlyphElement - Web APIs
<div id="interfacediagram" style="display: inline-block; position: relative; width: 100%; padding-bottom: 23.333333333333332%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 140" preserveaspectratio="xminymin meet"><a xlink:href="/docs/
web/api/svgmissingglyphelement" target="_top"><rect x="1" y="1" width="220" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="111" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">svgmissingglyphelement</text></a></svg></div> a:hover text { fill: #0095dd; pointer-events: all;} ...
SVGRect - Web APIs
<div id="interfacediagram" style="display: inline-block; position: relative; width: 100%; padding-bottom: 23.333333333333332%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 140" preserveaspectratio="xminymin meet"><a xlink:href="/docs/
web/api/svgrect" target="_top"><rect x="1" y="1" width="75" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="38.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">svgrect</text></a></svg></div> a:hover text { fill: #0095dd; pointer-events: all;} properties svgrect.x the ...
SVGRenderingIntent - Web APIs
<div id="interfacediagram" style="display: inline-block; position: relative; width: 100%; padding-bottom: 11.666666666666666%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 70" preserveaspectratio="xminymin meet"><a xlink:href="/docs/
web/api/svgrenderingintent" target="_top"><rect x="1" y="1" width="180" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="91" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">svgrenderingintent</text></a></svg></div> a:hover text { fill: #0095dd; pointer-events: all;} warning...
SVGSolidcolorElement - Web APIs
<div id="interfacediagram" style="display: inline-block; position: relative; width: 100%; padding-bottom: 23.333333333333332%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 140" preserveaspectratio="xminymin meet"><a xlink:href="/docs/
web/api/svgsolidcolorelement" target="_top"><rect x="1" y="1" width="200" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="101" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">svgsolidcolorelement</text></a></svg></div> a:hover text { fill: #0095dd; pointer-events: all;} pro...
SVGTRefElement - Web APIs
<div id="interfacediagram" style="display: inline-block; position: relative; width: 100%; padding-bottom: 23.333333333333332%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 140" preserveaspectratio="xminymin meet"><a xlink:href="/docs/
web/api/svgtrefelement" target="_top"><rect x="1" y="1" width="140" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="71" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">svgtrefelement</text></a></svg></div> a:hover text { fill: #0095dd; pointer-events: all;} properties this...
SVGURIReference - Web APIs
<div id="interfacediagram" style="display: inline-block; position: relative; width: 100%; padding-bottom: 11.666666666666666%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 70" preserveaspectratio="xminymin meet"><a xlink:href="/docs/
web/api/svgurireference" target="_top"><rect x="1" y="1" width="150" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="76" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">svgurireference</text></a></svg></div> a:hover text { fill: #0095dd; pointer-events: all;} properties ...
SVGUnitTypes - Web APIs
<div id="interfacediagram" style="display: inline-block; position: relative; width: 100%; padding-bottom: 11.666666666666666%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 70" preserveaspectratio="xminymin meet"><a xlink:href="/docs/
web/api/svgunittypes" target="_top"><rect x="1" y="1" width="120" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="61" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">svgunittypes</text></a></svg></div> a:hover text { fill: #0095dd; pointer-events: all;} constants ...
SVGVKernElement - Web APIs
<div id="interfacediagram" style="display: inline-block; position: relative; width: 100%; padding-bottom: 23.333333333333332%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 140" preserveaspectratio="xminymin meet"><a xlink:href="/docs/
web/api/svgvkernelement" target="_top"><rect x="1" y="1" width="150" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="76" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">svgvkernelement</text></a></svg></div> a:hover text { fill: #0095dd; pointer-events: all;} properties th...
Index - Archive of obsolete content
or for "reasons," your company is required to use very old software and you need to build
web content that runs on that software.
... 4 api api, archive archived documentation about obsolete
web standards apis.
... 13 content scripts add-on sdk many add-ons need to access and modify the content of
web pages.
...And 160 more matches
HTML documentation index - HTML: Hypertext Markup Language
found 237 pages: # page tags and summary 1 html: hypertext markup language html, html5, landing,
web, l10n:priority html (hypertext markup language) is the most basic building block of the
web.
... it defines the meaning and structure of
web content.
... other technologies besides html are generally used to describe a
web page's appearance/presentation (css) or functionality/behavior (javascript).
...And 145 more matches
HTTP Index - HTTP
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.
... it was designed for communication between
web browsers and
web servers, but it can also be used for other purposes.
... 2 a typical http session http in client-server protocols, like http, sessions consist of three phases: 3 an overview of http html, http, overview,
webmechanics, l10n:priority http isthe foundation of any data exchange on the
web and it is a client-server protocol, which means requests are initiated by the recipient, usually the
web browser.
...And 52 more matches
Index
this is useful for privileged code, such as add-on code, to access variables and apis defined in
web content.
... 36 components.utils.exportfunction api, add-ons, components, extensions, language bindings, method, mozilla, non-standard, reference,
webextensions, xpcom this function provides a safe way to expose a function from a privileged scope to a less-privileged scope.
... 42 components.utils.isxraywrapper when privileged javascript in gecko accesses objects belonging to less-privileged code (such as untrusted
web content), it does so, by default, with "xray vision": a mechanism that filters out certain changes to the objects that could cause them to behave in unexpected ways.
...And 51 more matches
Index - Firefox Developer Tools
found 158 pages: # page tags and summary 1 firefox developer tools developing mozilla, guide, tools,
web development,
web development:tools, l10n:priority firefox developer tools is a set of
web developer tools built into firefox.
... 2 3d view html, tools,
web development,
web development:tools when you click on the 3d view button, the page goes into 3d view mode; in this mode, you can see your page presented in a 3d view in which nested blocks of html are increasingly "tall," projecting outward from the bottom of the page.
... 4 color vision simulation accessibility, accessibility inspector, color blindness, devtools, guide, simulation, tools the simulator in the accessibility inspector in firefox developer tools lets you see what a
web page would look like to users with various forms of color vision deficiency (better known as "color blindness"), as well as contrast sensitivity loss.
...And 50 more matches
Browser Detection and Cross Browser Support - Archive of obsolete content
have a look to the more current article writing forward-compatible
websites to find modern informations.
... improper browser detection can lead to
web maintenance nightmares.
... rethinking the basics of when and how to detect user agents is crucial to creating maintainable, cross browser
web content.
...And 41 more matches
Gecko Compatibility Handbook - Archive of obsolete content
they are actually replaced by ''-(example removed)-'' the goal of this handbook is to help you update
websites to work with standards-based browsers and properly detect gecko.
... if you're new to standards, you may find using
web standards in your
web pages a helpful introduction.
...adhering to
web standards simplifies cross-browser
web development and enables accessibility.
...And 38 more matches
MathML Accessibility in Mozilla
in bug 1175269 and bug 1001641, we relied on the
webkit's nsaccessibility mathml tree to expose the main constructions.
... hence basic support is available in gecko 41.0 (firefox 41.0 / thunderbird 41.0 / seamonkey 2.38) and we are still trying to keep in sync with
webkit/voiceover.
...we try to keep in sync with
webkit/atk/orca developments.
...And 38 more matches
Inner-browsing extending the browser navigation paradigm - Archive of obsolete content
introduction when you click a link on a
web page, your
web browser makes a request to a
web server which usually results in a new
web page as a response.
...this model of
web navigation is so common that most internet users do little else.
...for
web developers, for example, it provides less fine-grained control over the experience, and it can strain bandwidth and other resources.
...And 36 more matches
Event reference
websocket events event name fired when open a
websocket connection has been established.
... message a message is received through a
websocket.
... error a
websocket connection has been closed with prejudice (some data couldn't be sent for example).
...And 36 more matches
Overview of Mozilla embedding APIs
much of the gecko functionality is exposed through a component called the ns
webbrowser.
...each
webbrowser instance represents the "client-area" of a typical browser window.
... the
webbrowser exposes a set of interfaces which allow the embedding application to control activity and respond to changes within this client area.
...And 33 more matches
Index - Developer guides
found 43 pages: # page tags and summary 1 developer guides api, guide, landing,
web these articles provide how-to information to help make use of specific
web technologies and apis.
... 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.
...you can find compatibility information in the guide to media types and formats on the
web.
...And 31 more matches
Protocol upgrade mechanism - HTTP
implementations can choose not to take advantage of an upgrade even if they support the new protocol, and in practice, this mechanism is used mostly to bootstrap a
websockets connection.
...this means that a typical request that includes upgrade would look something like: get /index.html http/1.1 host: www.example.com connection: upgrade upgrade: example/1, foo/2 other headers may be required depending on the requested protocol; for example,
websocket upgrades allow additional headers to configure details about the
websocket connection as well as to offer a degree of security in opening the connection.
... see upgrading to a
websocket connection for more details.
...And 30 more matches
MCD, Mission Control Desktop, AKA AutoConfig - Archive of obsolete content
for history, i've kept mozilla and netscape chapters, as certain points are complementary to the
web-based autoconfig file.
... objective the objective is to provide users with a mailer agent, a
web browser, and a news reader which are automatically configured (preferences) at startup to the current user connected on the computer.
...moz_ldap_xpcom=1 and moz_extensions_default="wallet spellcheck xmlextras pref
webservices universalcharset auth" are now present in the default configure script.
...And 27 more matches
Accessibility documentation index - Accessibility
found 105 pages: # page tags and summary 1 accessibility accessibility, landing accessibility (often abbreviated to a11y—as in "a" then 11 characters then "y") in
web development means enabling as many people as possible to use
web sites, even when those people's abilities are limited in some way.
... 2 aria aria, accessibility, html accessible rich internet applications (aria) is a set of attributes that define ways to make
web content and
web applications (especially those developed with javascript) more accessible to people with disabilities.
... 5 aria annotations aria, accessibility, wai-aria, annotations, comments, details, suggestions wai-aria version 1.3 sees the addition of a set of new features, collectively known as aria annotations, which allow the creation of accessible annotations inside
web documents.
...And 27 more matches
Index - Game development
found 74 pages: # page tags and summary 1 game development apps, game development, gamedev, games, html5 games, javascript games,
web gaming is one of the most popular computer activities.
... new technologies are constantly arriving to make it possible to develop better and more powerful games that can be run in any standards-compliant
web browser.
... 3 examples demos, example, games,
web this page lists a number of impressive
web technology demos for you to get inspiration from, and generally have fun with.
...And 24 more matches
Browser detection using the user agent - HTTP
serving different
web pages or services to different browsers is usually a bad idea.
... the
web is meant to be accessible to everyone, regardless of which browser or device they're using.
... there are ways to develop your
website to progressively enhance itself based on the availability of features rather than by targeting specific browsers.
...And 23 more matches
Using CSS transitions - CSS: Cascading Style Sheets
the
web author can define which property has to be animated and in which way.
...some user agents, like those based on gecko, implement this requirement and others, like those based on
webkit, are less strict.
... transition-duration: 0.5s <div class="parent"> <div class="box">lorem</div> </div> .parent { width: 250px; height:125px;} .box { width: 100px; height: 100px; background-color: red; font-size: 20px; left: 0px; top: 0px; position:absolute; -
webkit-transition-property: width height background-color font-size left top transform -
webkit-transform color; -
webkit-transition-duration: 0.5s; -
webkit-transition-timing-function: ease-in-out; transition-property: width height background-color font-size left top transform -
webkit-transform color; transition-duration: 0.5s; transition-timing-function: ease-in-out; } .box1{ t...
...And 22 more matches
Mozilla Application Framework in Detail - Archive of obsolete content
what this means to you as the developer is this: you can take advantage of skills you already have with xml or
web technologies to design and implement anything from a simple text editor to a comprehensive ide - complete with all of the interface widgets that you would find in virtually any major application framework.
...in addition, if the organization maintains sophisticated, interactive
websites, it will already possess a wealth of technical expertise that will be relevant for creating xul applications.
...xslt could be used to translate information from
web services, rss, soap, or other xml-based languages and convert them into a form that you might display in your user interface.
...And 21 more matches
CSUN Firefox Materials
it's a quick download, occupies very little disk space, and has a clean, no-nonsense interface." - pc magazine firefox 1.5 is a fast, free, standards compliant
web browser which is rapidly gaining recognition for its fresh, streamlined approach to browsing the
web.
... in addition to winning major awards such as pc world product of the year, firefox has attracted a huge following among savvy users who simply care enough about their
web browsing experience to download a new piece of software.
...
websites such as online magazines with sophisticated audiences are now reporting upwards of 25% firefox usage.
...And 21 more matches
Embedding Tips
get thensi
webnavigation interface on your
webbrowser and call the loaduri method with the appropriate uri and flags.
... implement the nsi
webprogresslistener interface and register it with the appropriate
web browser object via the nsi
webbrowser::add
webbrowserlistener() method.
... implement the nsiuricontentlistener interface, and register it with the appropriate
web browser object via the nsi
webbrowser::parenturicontentlistener attribute.
...And 21 more matches
Audio and Video Delivery - Developer guides
we can deliver audio and video on the
web in a number of ways, ranging from 'static' media files to adaptive live streams.
... this article is intended as a starting point for exploring the various delivery mechanisms of
web based media and compatibility with popular browsers.
...you can find compatibility information in the guide to media types and formats on the
web.
...And 21 more matches
Evolution of HTTP - HTTP
http (hypertext transfer protocol) is the underlying protocol of the world wide
web.
... invention of the world wide
web in 1989, while he was working at cern, tim berners-lee wrote a proposal to build a hypertext system over the internet.
... initially calling it the mesh, it was later renamed to world wide
web during its implementation in 1990.
...And 21 more matches
List of Mozilla-Based Applications - Archive of obsolete content
n linux version adwatch content management system uses xul and xpcom aicpcu/iia exam app exam delivery software aliwal geocoder geocoding & data on a map amarok xul remote remote control for amarok music player ample sdk javascript gui-framework aol instant messenger im client uses nss apache
web server doesn't use nss by default, but can be configured to use nss with mod_nss ssl module apicawatch site performance monitoring tool uses firefox as part of its monitoring package astyle css editor editing tool atmail
webmail client aviva for java mainframe connectivity product uses mozilla rhino babelgum internet tv ...
...service basilisk pre-servo xul-based
web browser uses most of the firefox 55 source code batik java-based toolkit uses mozilla rhino bitbox security focused browser seemingly based on firefox blackbird browser for african american community bluegriffon wysiwyg editor next generation version of composer buzzbird twitter client built on xulrunner camino browser 2.5m downloads and ~400,000 active users ...
... celtx media tool cenzic hailstorm vulnerability assessment and management tool uses gecko chatzilla irc client standalone version (xulrunner) chromium and google chrome
web browser uses mozilla nss and npapi libraries chromeless browser with html-based interface classilla mozilla browser for mac os 9 clines a clone of color lines (game) standalone version cloud
web operating system cloud browse iphone/ipad/ipod touch browser seems to be firefox running remotely on servers that people access through device conkeror keyboard-oriented browser convertigo enterprise mashup server server tool for transactional
web scraping and for ...
...And 20 more matches
Finishing the Component
(for
weblock, all you need are the headers for nsicontentpolicy and the nsicontentpolicy.idl.) then, using the same steps you used to create the
weblock.h, create a header from this idl file using the xpidl compiler.
... once you have these interface and header files, you can modify the
weblock class to implement the nsicontentpolicy interface.
... the
weblock class will then support four interfaces: nsisupports, nsiobserver, nsicontentpolicy, and i
weblock.
...And 20 more matches
Authoring MathML - MathML
html becomes verbose when your document contains advanced structures like lists or tables but fortunately there are many generators from simple notations, wysiwyg editors and other content management systems to help writing
web pages.
... note that by design, mathml is well-integrated in html5 and in particular you can use usual
web features like css, dom, javascript or svg.
... this is out of the scope of this document but anyone with basic knowledge of
web languages will easily be able to mix these features with mathml.
...And 20 more matches
Prism - Archive of obsolete content
prism is a simple xulrunner-based browser that hosts
web applications without the normal
web browser user interface.
...an ssb is designed to work exclusively with a single
web application.
... it doesn’t have the menus, toolbars and other accoutrements of a traditional
web browser.
...And 19 more matches
XULRunner Hall of Fame - Archive of obsolete content
conkeror a highly programmable
web browser with a leopard-oriented design inspired by emacs.
...source iedit
web a client/server based content manager and internet application suite.
... iedit
web users can add pages, images, forms, ecommerce many special effects and much more using the xulrunner based client.
...And 19 more matches
Visual typescript game engine - Game development
project : visual typescript game engine version: sunshine - 2019 2d canvas game engine based on matter.js 2d physics engine for the
web.
... npm install npm run build navigate in browser /build/app.html to see client app in action -the client part is a browser
web application.
...networking is based on
websocket full-duplex communication only.you must be conform with classic socket connection methodology.
...And 18 more matches
Accessibility Features in Firefox
keyboard support "mozilla firefox is a
web-browser with superior keyboard support." alan cantor, cantor access consulting firefox includes keyboard access to all of its amazing features: browse with caret allows users to select arbitrary content with the keyboard and move through content as if inside a read-only editor.
...these smart keywords can be setup via the context menu for the search field on the desired
website.
... integrated
web search via ctrl+k is much faster to use than first going to the search tool's
web site.
...And 18 more matches
Listening to events on all tabs
void onlocationchange( nsidomxulelement abrowser, nsi
webprogress a
webprogress, nsirequest arequest, nsiuri alocation [optional] in unsigned long aflags ); parameters abrowser the browser representing the tab whose location changed.
... a
webprogress the progress instance responsible for handling the events.
...void onprogresschange( nsidomxulelement abrowser, nsi
webprogress a
webprogress, nsirequest arequest, print32 acurselfprogress, print32 amaxselfprogress, print32 acurtotalprogress, print32 amaxtotalprogress ); parameters abrowser the browser representing the tab for which updated progress information is being provided.
...And 18 more matches
Debugger.Script - Firefox Developer Tools
debugger.script a debugger.script instance may refer to a sequence of bytecode in the debuggee or to a block of
webassembly code.
... debugger.script for
webassembly for debugger.script instances referring to a block of
webassembly code, they are distinguished by their format property being "wasm".
... currently only entire modules evaluated via new
webassembly.module are represented.
...And 18 more matches
HTML5 - Developer guides
it is a new version of the language html, with new elements, attributes, and behaviors, and a larger set of technologies that allows the building of more diverse and powerful
web sites and applications.
... designed to be usable by all open
web developers, this reference page links to numerous resources about html5 technologies, classified into several groups based on their function.
... offline and storage: allowing
webpages to store data on the client-side locally and operate offline more efficiently.
...And 18 more matches
Migrate apps from Internet Explorer to Mozilla - Archive of obsolete content
ge: mathml version 2.0 extensible markup language (xml): xml 1.0, namespaces in xml, associating style sheets with xml documents 1.0, fragment identifier for xml xsl transformations: xslt 1.0 xml path language: xpath 1.0 resource description framework: rdf simple object access protocol: soap 1.1 ecma-262, revision 3 (javascript 1.5): ecma-262 general cross-browser coding tips even though
web standards do exist, different browsers behave differently (in fact, the same browser may behave differently depending on the platform).
... before i go into the differences between mozilla and internet explorer, i'll cover some basic ways you can make a
web application extensible in order to add new browser support later.
... var elm; if (ns4) elm = document.layers["myid"]; else if (ie4) elm = document.all["myid"] the above code isn't extensible, so if you want it to support a new browser, you must update these blocks throughout the
web application.
...And 17 more matches
Storage access policy: Block cookies from trackers
report broken sites if you find a
website broken as a result of this change, file a bug under the tracking protection component within the firefox product on bugzilla.
... storage access grants in order to improve
web compatibility and permit third-party integrations that require storage access, firefox will grant storage access scoped to the first party for a particular third-party origin as described in this section.
... currently, firefox includes some
web compatibility heuristics that grant storage access to third-party resources classified as trackers when a user interacts with those third parties.
...And 17 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; } %inline-flex { @include inline-flex; } flexbox direction the flex-direction ...
... 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 == column-reverse { -
webkit-box-direction: reverse; -
webkit-box-orient: vertic...
...And 17 more matches
Adding captions and subtitles to HTML5 video - Developer guides
this article will take the same player and show how to add captions and subtitles to it, using the
webvtt format and the <track> element.
...
webvtt the files that contain the actual subtitle data are simple text files that follow a specified format, in this case the
web video text tracks (
webvtt) format.
... the
webvtt specification is still being worked on, but major parts of it are stable so we can use it today.
...And 17 more matches
Developer guides
these articles provide how-to information to help make use of specific
web technologies and apis.
... html learning area hypertext markup language (html) is the core language of nearly all
web content.
... audio and video delivery we can deliver audio and video on the
web in several ways, ranging from 'static' media files to adaptive live streams.
...And 17 more matches
An overview of HTTP - HTTP
it is the foundation of any data exchange on the
web and it is a client-server protocol, which means requests are initiated by the recipient, usually the
web browser.
...the messages sent by the client, usually a
web browser, are called requests and the messages sent by the server as an answer are called responses.
...http can also be used to fetch parts of documents to update
web pages on demand.
...And 16 more matches
2015 MDN Fellowship Program - Archive of obsolete content
2015 mdn fellowship program launching in q1 2015, the mozilla developer fellowship intends to accelerate the involvement of highly-skilled and experienced
web developers with the open
web.
... who
web and mobile developers with an established track record of contributions and expertise in a specific
web technology, function or domain who wish to increase the effectiveness of their teaching and communications.
... specific projects (we encourage you to target one of these in your application): testthe
webforward brief project description mozilla participates in an important w3c open testing initiative, testthe
webforward.com.
...And 15 more matches
Interaction between privileged and non-privileged pages - Archive of obsolete content
sending data from unprivileged document to chrome an easy way to send data from a
web page to an extension is by using custom dom events.
... var myextension = { mylistener: function(evt) { alert("received from
web page: " + evt.target.getattribute("attribute1") + "/" + evt.target.getattribute("attribute2")); } } document.addeventlistener("myextensionevent", function(e) { myextension.mylistener(e); }, false, true); // the last value is a mozilla-specific value to indicate untrusted content is allowed to trigger the event.
... the data from the
web page (unprivileged code) will be the values of attribute1 and attribute2.
...And 15 more matches
Debugger.Source - Firefox Developer Tools
debugger.source a debugger.source instance represents either a piece of javascript source code or the serialized text of a block of
webassembly code.
... debugger.source for
webassembly for a debugger.source instance representing the serialized text of a block of
webassembly code, its properties provide the serialized text as a string.
... currently only entire modules evaluated via new
webassembly.module are represented.
...And 15 more matches
<textarea> - HTML: Hypertext Markup Language
autocapitalize this is a non-standard attribute supported by
webkit on ios (therefore nearly all browsers running on ios, including safari, firefox, and chrome), which controls whether and how the text value should be automatically capitalized as it is entered/edited by the user.
... desktopmobilechromeedgefirefoxinternet exploreroperasafariandroid
webviewchrome for androidfirefox for androidopera for androidsafari on iossamsung internettextareachrome full support yesedge full support 12firefox full support yesnotes full support yesnotes notes before firefox 6, when ...
...ajor browsers place the insertion point at the beginning of the text.notes a default background-image gradient is applied to all <textarea> elements, which can be disabled using background-image: none.ie full support yesopera full support yessafari full support yes
webview android full support yeschrome android full support yesfirefox android full support yesnotes full support yesnotes notes before firefox 6, when a <textarea> was focused, the insertion point was placed at the end of...
...And 15 more matches
Index - HTTP
17 alt-svc draft, http, http header, needscompattable, needscontent, needsexample, reference the alt-svc header is used to list alternate ways to reach this
website.
... 20 clear-site-data http, http header, reference, header the clear-site-data header clears browsing data (cookies, storage, cache) associated with the requesting
website.
... it allows
web developers to have more control over the data stored locally by a browser for their origins.
...And 15 more matches
Creating the Component Code
in the subsequent chapters, we can begin to work on the example
weblock component functionality itself.
...once enabled, this "
weblock" mode is password protected and persists until it is turned off by the password holder.
...
web lock user interface shows the icon that is used to activate the
web lock mode (leftmost in the status bar) once you have installed the
weblock component and the extra user interface.
...And 14 more matches
:is() (:matches(), :any()) - CSS: Cascading Style Sheets
:is(header, main, footer) p:hover { color: red; cursor: pointer; } /* the above is equivalent to the following */ header p:hover, main p:hover, footer p:hover { color: red; cursor: pointer; } /* backwards-compatible version with :-*-any() and :matches() (it is not possible to group selectors into single rule, because presence of invalid selector would invalidate whole rule.) */ :-
webkit-any(header, main, footer) p:hover { color: red; cursor: pointer; } :-moz-any(header, main, footer) p:hover { color: red; cursor: pointer; } :matches(header, main, footer) p:hover { color: red; cursor: pointer; } syntax :is( <complex-selector-list> )where <complex-selector-list> = <complex-selector>#where <complex-selector> = <compound-selector> [ <combinator>?
...'='<attr-modifier> = i | s examples cross-browser example <header> <p>this is my header paragraph</p> </header> <main> <ul> <li><p>this is my first</p><p>list item</p></li> <li><p>this is my second</p><p>list item</p></li> </ul> </main> <footer> <p>this is my footer paragraph</p> </footer> :-
webkit-any(header, main, footer) p:hover { color: red; cursor: pointer; } :-moz-any(header, main, footer) p:hover { color: red; cursor: pointer; } :matches(header, main, footer) p:hover { color: red; cursor: pointer; } :is(header, main, footer) p:hover { color: red; cursor: pointer; } let matcheditems; try { matcheditems = document.queryselectorall(':is(header, main, footer) p...
...'); } catch(e) { try { matcheditems = document.queryselectorall(':matches(header, main, footer) p'); } catch(e) { try { matcheditems = document.queryselectorall(':-
webkit-any(header, main, footer) p'); } catch(e) { try { matcheditems = document.queryselectorall(':-moz-any(header, main, footer) p'); } catch(e) { console.log('your browser doesn\'t support :is(), :matches(), or :any()'); } } } } matcheditems.foreach(applyhandler); function applyhandler(elem) { elem.addeventlistener('click', function(e) { alert('this paragraph is inside a ' + e.target.parentnode.nodename); }); } simplifying list selectors the :is() pseudo-class can greatly simplify your css selectors.
...And 14 more matches
Applying color to HTML elements using CSS - HTML: Hypertext Markup Language
maybe that's why color is one of the first things people often want to experiment with when learning to develop
websites.
... other ways to use color css isn't the only
web technology that supports color.
... there are graphics technologies that are available on the
web which also support color.
...And 14 more matches
Cross-Origin Resource Sharing (CORS) - HTTP
cross-origin resource sharing (cors) is a mechanism that uses additional http headers to tell browsers to give a
web application running at one origin, access to selected resources from a different origin.
... 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.
...this means that a
web application using those apis can only request resources from the same origin the application was loaded from unless the response from other origins includes the right cors headers.
...And 14 more matches
Tutorials
whether you are just starting out, learning the basics, or are an old hand at
web development, you can find helpful resources here for best practices.
... these resources are created by forward-thinking companies and
web developers who have embraced open standards and best practices for
web development and that provide or allow translations, through an open content license such as creative commons.
... for complete beginners to the
web getting started with the
web getting started with the
web is a concise series introducing you to the practicalities of
web development.
...And 14 more matches
Using Remote XUL - Archive of obsolete content
xul is often used by desktop applications like mozilla but can also be loaded from a
web server and rendered inside the content pane of a compatible browser.
... xul loaded and rendered in this way is called remote xul and can be used for basic functions like
web site navigation as well as to build sophisticated
web-based applications.
... [***aw: we should have a screenshot here of a xul document loaded in a content window***] this tutorial walks you through the process of building xul-based navigation for the mozilla.org
web site.
...And 13 more matches
Archive of obsolete content
or for "reasons," your company is required to use very old software and you need to build
web content that runs on that software.
...material in this archived content zone should not be used for building new
web sites or apps for modern browsers.
...in general, it may be best to discuss it in the mdn
web docs room on matrix before moving content here.
...And 13 more matches
Translation phase
projects the mozilla projects and their l10n workflows are divided into these groups: mozilla applications, mozilla
websites, and add-ons.
... these are the l10n tools we use to localize mozilla applications: pootle a user-friendly
web portal built on the translate toolkit api.
... these are the mozilla application projects that are localized using the l10n tools above: firefox the award-winning firefox®
web browser has security, speed and new features that will change the way you use the
web.
...And 13 more matches
Migrating from Firebug - Firefox Developer Tools
that means, that when you open the devtools in a tab, they stay open even when you switch between different
websites.
...the network monitor can be opened via ctrl+shift+q / cmd+opt+q, the
web console via ctrl+shift+k / cmd+opt+k and the debugger via ctrl+shift+s / cmd+opt+s.
...
web console the
web console is the equivalent of firebug's console panel.
...And 13 more matches
min-width - CSS: Cascading Style Sheets
desktopmobilechromeedgefirefoxinternet exploreroperasafariandroid
webviewchrome for androidfirefox for androidopera for androidsafari on iossamsung internetmin-widthchrome full support 1edge full support 12firefox full support 1notes full support 1notes notes css 2.1 leaves the behavior ...
...opera supports applying min-width to table elements.safari full support 1
webview android full support 4.4chrome android full support 18firefox android full support 4notes full support 4notes notes css 2.1 leaves the behavior of min-width with table undefined.
...ntil the value was removed), used auto as the initial value for min-width.ie no support noopera full support 12.1notes full support 12.1notes notes opera uses auto as the initial value for min-width.safari no support no
webview android full support 37notes full support 37notes notes chrome uses auto as the initial value for min-width.chrome android full support 25notes full support 25notes notes chrome uses auto as the initial value for ...
...And 13 more matches
Intercepting Page Loads - Archive of obsolete content
« previousnext » there are several ways to detect and intercept loading of
web pages and their content, be it only to realize when it happens, modify their contents, or to block them and do something else instead.
...it is full of useful functions, so you should always keep it in mind when you want to handle tabs and
web content windows.
... http-on-examine-response called after a response has been received from the
webserver.
...And 12 more matches
Archived Mozilla and build documentation - Archive of obsolete content
bookmark keywords practically every
web surfer has bookmarks, of course, and power surfers usually have hundreds stuffed into folders within folders.
...
web pages can reference generators via <link rel="microsummary"> elements in their <head> elements.
...the extension will access tinderbox, mozilla.org's
webtool for tracking source code status, to get the status of the code.
...And 12 more matches
Back to the Server: Server-Side JavaScript On The Rise - Archive of obsolete content
by davey waterson, javascript architect, aptana there's no debate that javascript is the most widely used language client-side on the
web.
... regardless of how the back-ends of your
web applications are implemented, client side you're using javascript for everything from same form validations to full ajax applications.
... now imagine being able to develop
web apps using javascript server-side too.
...And 12 more matches
Plug-in Basics - Plugins
unlike a plug-in, a helper application runs separately from the browser in its own application space and does not interact with the browser or the
web.
... how plug-ins work the life cycle of a plug-in, unlike that of an application, is completely controlled by the
web page that calls it.
... the plug-in file type depends on the platform: ms windows: .dll (dynamic link library) files unix: .so or .dso (shared objects) files mac os x: ppc/x86/universal loadable mach-o bundle windowed and windowless plug-ins you can write plug-ins that are drawn in their own native windows or frames on a
web page.
...And 12 more matches
Box-shadow generator - CSS: Cascading Style Sheets
data-topic="element" data-name="element" data-prop="width height background-color position=[relative] box-shadow"> </div> <div class="output" data-topic="before" data-name="element:before" data-prop="content=[""] position=[absolute] width height top left z-index background-color box-shadow transform -
webkit-transform -ms-transform"> </div> <div class="output" data-topic="after" data-name="element:after" data-prop="content=[""] position=[absolute] width height top left z-index background-color box-shadow transform -
webkit-transform -ms-transform"> </div> </div> </div> <...
...ius: 3px; position: relative; top: -3px; left: 0%; } .ui-slider-btn-set { width: 25px; background-color: #2c9fc9; border-radius: 3px; color: #fff; font-weight: bold; text-align: center; } .ui-slider-btn-set:hover { background-color: #379b4a; cursor: pointer; } .ui-slider-input > input { margin: 0 10px; padding: 0; width: 50px; text-align: center; -moz-box-sizing: border-box; -
webkit-box-sizing: border-box; box-sizing: border-box; } /* * ui button */ /* checkbox */ .ui-checkbox { text-align: center; font-size: 16px; font-family: "segoe ui", arial, helvetica, sans-serif; line-height: 1.5em; color: #fff; -moz-user-select: none; -
webkit-user-select: none; -ms-user-select: none; user-select: none; } .ui-checkbox > input { display: none; } .ui-checkbox > lab...
...10px; } .ui-checkbox > 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 #...
...And 12 more matches
HTML: Hypertext Markup Language
html (hypertext markup language) is the most basic building block of the
web.
... it defines the meaning and structure of
web content.
... other technologies besides html are generally used to describe a
web page's appearance/presentation (css) or functionality/behavior (javascript).
...And 12 more matches
MIME types (IANA media types) - HTTP
important: browsers use the mime type, not the file extension, to determine how to process a url, so it's important that
web servers send the correct mime type in the response's content-type header.
...example can also be used as a subtype; for instance, in an example related to working with audio on the
web, the mime type audio/example can be used to indicate that the type is a placeholder and should be replaced with an appropriate one when using the code in the real world.
... important mime types for
web developers application/octet-stream this is the default for binary files.
...And 12 more matches
Introduction - JavaScript
what you should already know this guide assumes you have the following basic background: a general understanding of the internet and the world wide
web (www).
... where to find javascript information the javascript documentation on mdn includes the following: learn
web development provides information for beginners and introduces basic concepts of programming and the internet.
... javascript is a cross-platform, object-oriented scripting language used to make
webpages interactive (e.g., having complex animations, clickable buttons, popup menus, etc.).
...And 12 more matches
Bundles - Archive of obsolete content
webapp bundle in addition to passing simple command line parameters, prism can use a zipped bundle package to install a
webapp.
... the bundle can hold additional resources currently limited to: application ini settings application icon script for the application chrome, not the
web content installing a bundle when prism opens a
webapp bundle it will unpack it into the
webapps/{
webapp-id} folder.
... this folder is located in the application data folder of the user's home directory on windows, in the ~/.
webapps directory on linux and under ~/library on os x.
...And 11 more matches
Links and Resources
here are some useful links for those interested in
web accessibility as well as open source accessibility.
... wai -
web accessibility initiative
web content accessibility guidelines (wcag) 1.0 the first set of official guidelines from the w3c
web accessibility initiative (wai).
... wai interest group - discussion list for standards in
web accessibility.
...And 11 more matches
Using XPCOM Components
« previousnext » one of the best ways to begin working with xpcom - especially when you are designing the interface to a component that will be used by others, as we do in starting
weblock - is to look at how clients are already using xpcom components.
... this chapter demonstrates how mozilla uses some of these xpcom objects, such as the cookiemanager, and shows how access to the
weblock component will be defined.
... the
webbrowserfind component components are used all over - in high-level browser-like functionality such as ns
webbrowserfind, which provides find() and findnext() methods for finding content in
web pages, and in low-level tasks such as the manipulation of data.
...And 11 more matches
Mozilla
browser security an important aspect of developing code for any browser, including firefox, as well as any
web-oriented project, is its security.
... creating a firefox sidebar
web publishers can offer visitors a firefox sidebar to encourage their engagement.
... creating reftest-based unit tests the reftest harness compares the display of two
web pages.
...And 11 more matches
Console messages - Firefox Developer Tools
most of the
web console is occupied by the message display pane: each message is displayed as a separate row: time the time the message was recorded.
... js javascript errors contain a "learn more" link that takes you to the javascript error reference containing additional advice for fixing issues: source maps the
web console understands source maps.
...then any messages or errors your source generates will show up in the
web console with a link back to the original source, not the compressed version.
...And 11 more matches
ARIA: application role - Accessibility
this role should only be used to define very dynamic and desktop-like
web applications.
... description the application role indicates to assistive technologies that this part of the
web content contains elements that do not conform to any other known html element or wai-aria widget.
... any sort of special interpretation of html structures and widgets should be suspended, and control should be completely handed over to the browser and
web application to handle mouse, keyboard, or touch interaction.
...And 11 more matches
Cognitive accessibility - Accessibility
this document introduces cognitive accessibility and improving accessibility of the
web for people with cognitive and learning differences.
...these problems include difficulty with understanding content, remembering how to complete tasks, and confusion caused by inconsistent or non-traditional
web page layouts.
... in this document, we focus on steps developers should take to improve the cognitive accessibility of their
web sites and applications.
...And 11 more matches
Audio and video manipulation - Developer guides
the beauty of the
web is that you can combine technologies to create new forms.
... having native audio and video in the browser means we can use these data streams with technologies such as <canvas>,
webgl or
web audio api to modify audio and video directly, for example adding reverb/compression effects to audio, or grayscale/sepia filters to video.
... video and canvas the <canvas> element provides a surface for drawing graphics onto
web pages; it is very powerful and can be coupled tightly with video.
...And 11 more matches
Overview of events and handlers - Developer guides
this overview of events and event handling explains the code design pattern used to react to incidents occurring when a browser accesses a
web page, and it summarizes the types of such incidents modern
web browsers can handle.
... events and event handling provide a core technique in javascript for reacting to incidents occurring when a browser accesses a
web page, including events from preparing a
web page for display, from interacting with the content of the
web page, relating to the device on which the browser is running, and from many other causes such as media stream playback or animation timing.
... events and event handling become central to
web programming with the addition of the language to browsers, accompanying a switch in the rendering architecture of browsers from fetch and load page rendering to event driven, reflow based, page rendering.
...And 11 more matches
HTML elements reference - HTML: Hypertext Markup Language
element description <a> the html <a> element (or anchor element), with its href attribute, creates a hyperlink to
web pages, files, email addresses, locations in the same page, or anything else a url can address.
... scripting in order to create dynamic content and
web applications, html supports the use of scripting languages, most prominently javascript.
... element description <canvas> use the html <canvas> element with either the canvas scripting api or the
webgl api to draw graphics and animations.
...And 11 more matches
JavaScript modules - JavaScript
a background on modules javascript programs started off pretty small — most of its usage in the early days was to do isolated scripting tasks, providing a bit of interactivity to your
web pages where needed, so large scripts were generally not needed.
...node.js has had this ability for a long time, and there are a number of javascript libraries and frameworks that enable module usage (for example, other commonjs and amd-based module systems like requirejs, and more recently
webpack and babel).
... browser support use of native javascript modules is dependent on the import and export statements; these are supported in browsers as follows: import desktopmobileserverchromeedgefirefoxinternet exploreroperasafariandroid
webviewchrome for androidfirefox for androidopera for androidsafari on iossamsung internetnode.jsimportchrome full support 61edge full support 16 full support 16 full support 15disabled disabled from version 15: this featur...
...And 11 more matches
Chapter 3: Introduction to XUL—How to build a more intuitive UI - Archive of obsolete content
like
web pages, which display the same regardless of platform, applications marked up in xul will work the same in any environment where firefox runs.
... because html was originally conceived as a language for marking up documents, specifically
web pages, it is inevitably lacking in functionality for marking up applications.
... xul display methods xul is used almost exclusively in mozilla applications like firefox and thunderbird, and extensions for them, but other
web browsers based on firefox or the gecko engine, and even
web-based content also used xul.
...And 10 more matches
Security best practices in extensions - Archive of obsolete content
web content handling in general the best way to ensure that the browser is not compromised when you load content is to make sure it does not have those privileges.
... a more detailed explanation of this process is in displaying
web content in an extension without security issues.
...there are ways to get around the content/chrome security barrier, if for example, you want a
web page to send a notification to the add-on (or vice versa).
...And 10 more matches
Configuration - Archive of obsolete content
configuration a
webapp profile is a simple, ini-style text file that specifies some parameters about a
webapp.
... the profile can be used to launch the
webapp in prism.
...here is the list of parameters: id the unique name of this
web application.
...And 10 more matches
Anatomy of a video game - Game development
it helps beginners to the modern game development arena understand what is required when building a game and how
web standards like javascript lend themselves as tools.
... experienced game programmers who are new to
web development could also benefit, too.
...on the
web, window.requestanimationframe() will be the foundation of most well-programmed per-frame main loops.
...And 10 more matches
Using XPCOM Utilities to Make Things Easier
« previousnext » this chapter goes back over the code you've already created in the first part of the tutorial (see
weblock1.cpp in the previous chapter) and uses xpcom tools that make coding a lot easier and more efficient.
... to begin with, the first section describesc++ macros that can replace a lot of the code in
weblock1.cpp.
...but there are only a few places in that code that are unique to the
weblock component, and it was a lot of typing.
...And 10 more matches
nsIDownloadProgressListener
this interface works very similarly to the nsi
webprogress interface.
... method overview void ondownloadstatechange(in short astate, in nsidownload adownload); void onlocationchange(in nsi
webprogress a
webprogress, in nsirequest arequest, in nsiuri alocation, in nsidownload adownload); obsolete since gecko 1.9.1 void onprogresschange(in nsi
webprogress a
webprogress, in nsirequest arequest, in long long acurselfprogress, in long long amaxselfprogress, in long long acurtotalprogress, in long long amaxtotalprogress, in nsidownload adownload); void onsecuritychange(in nsi
webprogress a
webprogress, in nsirequest arequest, in unsigned long astate, in nsidownload adownload); ...
... void onstatechange(in nsi
webprogress a
webprogress, in nsirequest arequest, in unsigned long astateflags, in nsresult astatus, in nsidownload adownload); void onstatuschange(in nsi
webprogress a
webprogress, in nsirequest arequest, in nsresult astatus, in wstring amessage, in nsidownload adownload); obsolete since gecko 1.9.1 attributes attribute type description document nsidomdocument document the document of the download manager frontend.
...And 10 more matches
Browser Console - Firefox Developer Tools
the browser console is like the
web console, but applied to the whole browser rather than a single content tab.
... so it logs the same sorts of information as the
web console - network requests, javascript, css, and security errors and warnings, and messages explicitly logged by javascript code.
... if you also want to use the other
web developer tools in the regular
web toolbox with add-on or browser code, consider using the browser toolbox.
...And 10 more matches
Color picker tool - CSS: Cascading Style Sheets
<div id="canvas" data-tutorial="drop"> <div id="zindex" class="ui-input-slider" data-topic="z-index" data-info="z-index" data-max="20" data-sensivity="10"></div> </div> </div> css /* * color picker tool */ .ui-color-picker { width: 420px; margin: 0; border: 1px solid #ddd; background-color: #fff; display: table; -moz-user-select: none; -
webkit-user-select: none; -ms-user-select: none; user-select: none; } .ui-color-picker .picking-area { width: 198px; height: 198px; margin: 5px; border: 1px solid #ddd; position: relative; float: left; display: table; } .ui-color-picker .picking-area:hover { cursor: default; } /* hsv format - hue-saturation-value(brightness) */ .ui-color-picker .picking-area { background: url('https://m...
...dn.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-gradient(bottom, #000 0%, rgba(0, 0, 0, 0) 100%), -ms-linear-gradient(left, #fff 0%, rgba(255, 255, 255, 0) 100%); background: -o-linear-gradient(bottom, #000 0%, rgba(0, 0, 0, 0) 100%), -o-linear-gradient(left, #fff 0%, rgba(255, 255, 255, 0) 100%); background-color: #f00; } /* hsl format - hue-saturation-lightness */ .ui-color-picker[data-mode='hsl'] .picking-area { background: -moz-linear-gradie...
...nt(top, hsl(0, 0%, 100%) 0%, hsla(0, 0%, 100%, 0) 50%, hsla(0, 0%, 0%, 0) 50%, hsl(0, 0%, 0%) 100%), -moz-linear-gradient(left, hsl(0, 0%, 50%) 0%, hsla(0, 0%, 50%, 0) 100%); background: -
webkit-linear-gradient(top, hsl(0, 0%, 100%) 0%, hsla(0, 0%, 100%, 0) 50%, hsla(0, 0%, 0%, 0) 50%, hsl(0, 0%, 0%) 100%), -
webkit-linear-gradient(left, hsl(0, 0%, 50%) 0%, hsla(0, 0%, 50%, 0) 100%); background: -ms-linear-gradient(top, hsl(0, 0%, 100%) 0%, hsla(0, 0%, 100%, 0) 50%, hsla(0, 0%, 0%, 0) 50%, hsl(0, 0%, 0%) 100%), -ms-linear-gradient(left, hsl(0, 0%, 50%) 0%, hsla(0, 0%, 50%, 0) 100%); background: -o-linear-gradient(top, hsl(0, 0%, 100%) 0%, hsla(0, 0%, 100%, 0) 50%, hsla(0, 0%, 0%, 0) 50%, hsl(0, 0%, 0%) 100%), -o-linear-gradient(left, hsl(0...
...And 10 more matches
Linear-gradient Generator - CSS: Cascading Style Sheets
v> <div id="output"> <div class="css-property"> <span class="property">background:</span> <span class="value"></span> </div> </div> </div> css content /* * color picker tool */ .ui-color-picker { width: 420px; margin: 0; border: 1px solid #ddd; background-color: #fff; display: table; -moz-user-select: none; -
webkit-user-select: none; -ms-user-select: none; user-select: none; } .ui-color-picker .picking-area { width: 198px; height: 198px; margin: 5px; border: 1px solid #ddd; position: relative; float: left; display: table; } .ui-color-picker .picking-area:hover { cursor: default; } /* hsv format - hue-saturation-value(brightness) */ .ui-color-picker .picking-area { background: url("images/pi...
...cker_mask.png"); background: -moz-linear-gradient(bottom, #000 0%, rgba(0, 0, 0, 0) 100%), -moz-linear-gradient(left, #fff 0%, rgba(255, 255, 255, 0) 100%); background: -
webkit-linear-gradient(bottom, #000 0%, rgba(0, 0, 0, 0) 100%), -
webkit-linear-gradient(left, #fff 0%, rgba(255, 255, 255, 0) 100%); background: -ms-linear-gradient(bottom, #000 0%, rgba(0, 0, 0, 0) 100%), -ms-linear-gradient(left, #fff 0%, rgba(255, 255, 255, 0) 100%); background: -o-linear-gradient(bottom, #000 0%, rgba(0, 0, 0, 0) 100%), -o-linear-gradient(left, #fff 0%, rgba(255, 255, 255, 0) 100%); background-color: #f00; } /* hsl format - hue-saturation-lightness */ .ui-color-picker[data-mode='hsl'] .picking-area { background: -moz-linear-gradient(top, hsl(0, 0%, 100%) 0%, hsla(0, 0%, 100%, 0) 5...
...0%, hsla(0, 0%, 0%, 0) 50%, hsl(0, 0%, 0%) 100%), -moz-linear-gradient(left, hsl(0, 0%, 50%) 0%, hsla(0, 0%, 50%, 0) 100%); background: -
webkit-linear-gradient(top, hsl(0, 0%, 100%) 0%, hsla(0, 0%, 100%, 0) 50%, hsla(0, 0%, 0%, 0) 50%, hsl(0, 0%, 0%) 100%), -
webkit-linear-gradient(left, hsl(0, 0%, 50%) 0%, hsla(0, 0%, 50%, 0) 100%); background: -ms-linear-gradient(top, hsl(0, 0%, 100%) 0%, hsla(0, 0%, 100%, 0) 50%, hsla(0, 0%, 0%, 0) 50%, hsl(0, 0%, 0%) 100%), -ms-linear-gradient(left, hsl(0, 0%, 50%) 0%, hsla(0, 0%, 50%, 0) 100%); background: -o-linear-gradient(top, hsl(0, 0%, 100%) 0%, hsla(0, 0%, 100%, 0) 50%, hsla(0, 0%, 0%, 0) 50%, hsl(0, 0%, 0%) 100%), -o-linear-gradient(left, hsl(0, 0%, 50%) 0%, hsla(0, 0%, 50%, 0) 100%); backgrou...
...And 10 more matches
max-width - CSS: Cascading Style Sheets
desktopmobilechromeedgefirefoxinternet exploreroperasafariandroid
webviewchrome for androidfirefox for androidopera for androidsafari on iossamsung internetmax-widthchrome full support 1edge full support 12firefox full support 1notes full support 1notes notes css 2.1 leaves the behavior ...
...opera supports applying max-width to table elements.safari full support 1
webview android full support 4.4chrome android full support 18firefox android full support 4notes full support 4notes notes css 2.1 leaves the behavior of max-width with table undefined.
... full support 1samsung internet android full support 1.0fit-content experimentalchrome full support 46 full support 46 full support 25prefixed prefixed implemented with the vendor prefix: -
webkit-edge full support 79 full support 79 full support 79prefixed prefixed implemented with the vendor prefix: -
webkit-firefox partial support 3prefixed notes partial support 3prefixed notes prefixed implemented w...
...And 10 more matches
Event developer guide - Developer guides
events refers both to a design pattern used for the asynchronous handling of various incidents which occur in the lifetime of a
web page and to the naming, characterization, and use of a large number of incidents of different types.
... the overview page provides an introduction to the design pattern and a summary of the types of incidents which are defined and reacted to by modern
web browsers.
... the remaining pages describe how to use events of different kinds defined by
web browsers.
...And 10 more matches
DASH Adaptive Streaming for HTML 5 Video - HTML: Hypertext Markup Language
browser support firefox 21 includes an implementation of dash for html5
webm video which is turned off by default.
... firefox 23 removed support for dash for html5
webm video.
... using dash - server side first you'll need to convert your
webm video to a dash manifest with the accompanying video files in various bit rates.
...And 10 more matches
HTTP headers - HTTP
cookies, storage, cache) associated with the requesting
website.
...actual documentation can be found on the
website of the http working group.
... 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 10 more matches
browser - Archive of obsolete content
« xul reference home [ examples | attributes | properties | methods | related ] a xul <browser> element represents a frame which is expected to contain a view of a
web document.
... are you here looking for information about the firefox
web browser, or because you'd like to download the latest version of firefox?
...l, disablehistory, disableglobalhistory, disablesecurity, droppedlinkhandler, homepage, showcaret, src, type properties accessibletype, cangoback, cangoforward, contentdocument, contentprincipal, contenttitle, contentvieweredit, contentviewerfile, contentwindow, currenturi, docshell, documentcharsetinfo, homepage, markupdocumentviewer, messagemanager, preferences, 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"/> </gr...
...And 9 more matches
Experimental features in Firefox
these nightly builds of firefox typically include experimental or partially-implemented features, including those for proposed or cutting-edge
web platform standards.
...you can test your
web sites and applications before these features get released and ensure everything will still work with the latest
web technology capabilities.
... nightly 75 no developer edition 75 no beta 75 no release 75 no preference name layout.css.conic-gradient.enabled and gfx.
webrender.all pseudo-class: :focus-visible allows focus styles to be applied to elements like buttons and form controls, only when they are focused using the keyboard (e.g.
...And 9 more matches
Script security
like any
web browser, gecko can load javascript from untrusted and potentially hostile
web pages and run it on the user's computer.
... the security model for
web content is based on the same-origin policy, in which code gets full access to objects from its origin but highly restricted access to objects from a different origin.
...however, javascript is a highly dynamic, malleable language, and without help it's difficult to write system-privileged code that interacts safely with untrusted
web content.
...And 9 more matches
Using the viewport meta tag to control layout on mobile browsers
background the browser's viewport is the area of the window in which
web content can be seen.
... to mitigate this problem, apple introduced the "viewport meta tag" in safari ios to let
web developers control the viewport's size and scale.
... many other mobile browsers now support this tag, although it is not part of any
web standard.
...And 9 more matches
Firefox Developer Tools
firefox developer tools is a set of
web developer tools built into firefox.
... note: if you are just getting started with
web development and using developer tools, our learning docs will help you — see getting started with the
web and what are browser developer tools?
... the core tools you can open the firefox developer tools from the menu by selecting tools >
web developer > toggle tools or use the keyboard shortcut ctrl + shift + i or f12 on windows and linux, or cmd + opt + i on macos.
...And 9 more matches
Accessibility
accessibility (often abbreviated to a11y—as in "a" then 11 characters then "y") in
web development means enabling as many people as possible to use
web sites, even when those people's abilities are limited in some way.
...accessibility means developing content to be as accessible as possible no matter an individual's physical and cognitive abilities and no matter how they access the
web.
... "the
web is fundamentally designed to work for all people, whatever their hardware, software, language, culture, location, or physical or mental ability.
...And 9 more matches
max-height - CSS: Cascading Style Sheets
desktopmobilechromeedgefirefoxinternet exploreroperasafariandroid
webviewchrome for androidfirefox for androidopera for androidsafari on iossamsung internetmax-heightchrome full support 18edge full support 12firefox full support 1notes full support 1notes notes css 2.1 leaves the behavio...
...opera supports applying max-height to table elements.safari full support 1.3
webview android full support ≤37chrome android full support 18firefox android full support 4opera android full support 14safari ios full support 1samsung internet android ...
... full support 1.0fit-content experimentalchrome full support 46 full support 46 full support 25prefixed prefixed implemented with the vendor prefix: -
webkit-edge full support 79 full support 79 full support 79prefixed prefixed implemented with the vendor prefix: -
webkit-firefox partial support 3prefixed notes partial support 3prefixed notes prefixed implemented with the vendor prefix: -moz-notes firefox implements the definitions given i...
...And 9 more matches
HTTP caching - HTTP
the performance of
web sites and applications can be significantly improved by reusing previously fetched resources.
...
web caches reduce latency and network traffic and thus lessen the time needed to display a representation of a resource.
... by making use of http caching,
web sites become more responsive.
...And 9 more matches
HTTP response status codes - HTTP
102 processing (
webdav) this code indicates that the server has received and is processing the request, but no response is available yet.
... 207 multi-status (
webdav) conveys information about multiple resources, for situations where multiple status codes might be appropriate.
... 208 already reported (
webdav) used inside a <dav:propstat> response element to avoid repeatedly enumerating the internal members of multiple bindings to the same collection.
...And 9 more matches
JavaScript
while it is most well-known as the scripting language for
web pages, many non-browser environments also use it, such as node.js, apache couchdb and adobe acrobat.
... this section is dedicated to the javascript language itself, and not the parts that are specific to
web pages or other host environments.
... for information about api specifics to
web pages, please see
web apis and dom.
...And 9 more matches
Listening to events in Firefox extensions - Archive of obsolete content
standard behavior for
web pages is: user navigates to a page.
...
web progress listeners for more information about
web loads a
web progress listener can be used; these provide more details about the progress of loading data from the
web.
... both browser and tabbrowser elements support the following: var progresslistener = { // add nsi
webprogressimplementation here } b.addprogresslistener(progresslistener); where b is the browser or tabbrowser you want to listen to events for.
...And 8 more matches
Index of archived content - Archive of obsolete content
creating event targets creating reusable modules developing for firefox mobile display a popup getting started (jpm) getting started (cfx) list open tabs listen for page load listening for load and unload localization logging modifying
web pages based on url modifying the page hosted by a tab open a
web page troubleshooting unit testing using xpcom without chrome using third-party modules (jpm) bootstrapped extensions code snippets alerts and no...
... xpath getattributens common pitfalls communication between html and your extension creating custom firefox extensions with the mozilla build system custom about: urls default preferences deploying a plugin as an extension developing add-ons displaying
web content in an extension without security issues downloading json and javascript in extensions enhanced extension installation extension etiquette extension library extension packaging extension samples extension theming guidelines extension versioning, update and compatibility extensions support in seamonkey...
... 2 firefox addons developer guide hiding browser chrome hotfix extension how to convert an overlay extension to restartless inline options install manifests installing extensions and themes from
web pages interaction between privileged and non-privileged pages jetpack processes legacy add-ons legacy extensions for firefox for android api accounts.jsm browserapp addtab closetab deck getbrowserfordocument getbrowserforwindow gettabforbrowser gettabforid ...
...And 8 more matches
The Joy of XUL - Archive of obsolete content
web developers already familiar with dynamic html (dhtml) will learn xul quickly and can start building applications right away.
... key features and benefits powerful widget-based markup language the goal of xul is to build cross platform applications, in contrast with dhtml which is intended for developing
web pages.
... in fact, many developers invest a significant amount of effort to achieve these results in their dhtml
web applications but at the cost of complexity and performance and without any supporting standards.
...And 8 more matches
tabbrowser - Archive of obsolete content
« xul reference home [ examples | attributes | properties | methods | related ] this element is used for holding a set of read-only views of
web documents.
...ntcontextmenu, contenttooltip, handlectrlpageupdown, onbookmarkgroup, onnewtab, tabmodalpromptshowing properties browsers, cangoback, cangoforward, contentdocument, contenttitle, contentvieweredit, contentviewerfile, contentwindow, currenturi, docshell, documentcharsetinfo, homepage, markupdocumentviewer, securityui, selectedbrowser, selectedtab, sessionhistory, tabcontainer, tabs, visibletabs,
webbrowserfind,
webnavigation,
webprogress methods addprogresslistener, addtab, addtabsprogresslistener,appendgroup, getbrowseratindex, getbrowserindexfordocument, getbrowserfordocument, getbrowserfortab, geticon, getnotificationbox, gettabforbrowser, gettabmodalpromptbox, goback, gobackgroup, goforward, goforwardgroup, gohome, gotoindex, loadgroup, loadonetab, loadtabs, loaduri, loaduriwithflags, ...
...
webbrowserfind type: nsi
webbrowserfind this read-only property contains an nsi
webbrowserfind object which can be used to search for text in the document.
...And 8 more matches
Gecko info for Windows accessibility vendors
gecko is the internal engine that mozilla uses to render any kind of
web content.
... dom: document object model this is the w3c's specification for how
web content is exposed to javascript and other languages.
... 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.
...And 8 more matches
filter - CSS: Cascading Style Sheets
g alt="test_form_s.jpg" id="img4" class="internal default" src="/files/3711/test_form_2_s.jpg" style="width: 100%;" /></td> </tr> </tbody> </table> html { height:100%; } body { font: 14px/1.286 "lucida grande", "lucida sans unicode", "dejavu sans", lucida, arial, helvetica, sans-serif; color: rgb(51, 51, 51); height:100%; overflow:hidden; } #img2 { width:100%; height:auto; -
webkit-filter:blur(5px); -ms-filter:blur(5px); filter:blur(5px); } table.standard-table { border: 1px solid rgb(187, 187, 187); border-collapse: collapse; border-spacing: 0; margin: 0 0 1.286em; height: 100%; width: 85%; } table.standard-table th { border: 1px solid rgb(187, 187, 187); padding: 0px 5px; background: none repeat scroll 0% 0% rgb(238, 238, 238); text-align: left;...
..." id="img4" class="internal default" src="/files/3709/test_form_s.jpg" style="width: 100%;" /></td> </tr> </tbody> </table> html { height:100%; } body { font: 14px/1.286 "lucida grande","lucida sans unicode","dejavu sans",lucida,arial,helvetica,sans-serif; color: rgb(51, 51, 51); height:100%; overflow:hidden; } #img2 { width:100%; height:auto; -moz-filter:brightness(2); -
webkit-filter:brightness(2); -ms-filter:brightness(2); filter:brightness(2); } table.standard-table { border: 1px solid rgb(187, 187, 187); border-collapse: collapse; border-spacing: 0px; margin: 0px 0px 1.286em; height:100%; width: 85%; } table.standard-table th { border: 1px solid rgb(187, 187, 187); padding: 0px 5px; background: none repeat scroll 0% 0% rgb(238, 238, 238); ...
...d="img4" class="internal default" src="/files/3713/test_form_3_s.jpg" style="width: 100%;" /></td> </tr> </tbody> </table> html { height:100%; } body { font: 14px/1.286 "lucida grande","lucida sans unicode","dejavu sans",lucida,arial,helvetica,sans-serif; color: rgb(51, 51, 51); height:100%; overflow:hidden; } #img2 { width:100%; height:auto; -moz-filter:contrast(200%); -
webkit-filter:contrast(200%); -ms-filter:contrast(200%); filter:contrast(200%); } table.standard-table { border: 1px solid rgb(187, 187, 187); border-collapse: collapse; border-spacing: 0px; margin: 0px 0px 1.286em; width: 85%; height: 100%; } table.standard-table th { border: 1px solid rgb(187, 187, 187); padding: 0px 5px; background: none repeat scroll 0% 0% rgb(238, 238, 238)...
...And 8 more matches
Localizations and character encodings - Developer guides
the html specification recommends the use of the utf-8 encoding (which can represent all of unicode) and regardless of the encoding used requires
web content to declare what encoding was used.
... to specify that a page is using, for example, the utf-8 character encoding (as per the recommendation), simply place the following line in the <head> block: <meta charset="utf-8"> details and browser internals when the encoding is declared by
web content like the html specification requires, firefox will use that encoding for turning the bytes into the internal representation.
... unfortunately, using utf-8 and declaring that utf-8 was used was not always the prevalent way of offering
web content.
...And 8 more matches
A hybrid approach - Developer guides
silver bullets are hard to find in
web development — you’re more likely to come across strategies that make the best use of a variety of techniques given the circumstances.
... the good responsive
web design is great — right now it is the best technique available for making layouts look as good as possible in a variety of circumstances.
...for example, an often-criticized point about responsive
web design is that full-resolution images are sent to all devices, including phones that show the images scaled down anyway.
...And 8 more matches
<video>: The Video Embed element - HTML: Hypertext Markup Language
in safari, you can use x-
webkit-airplay="deny" as a fallback.
...if the media has no known end (such as for live streams of unknown duration,
web radio, media incoming from
webrtc, and so forth), this value is +infinity.
... <video controls> <source src="myvideo.mp4" type="video/mp4"> <source src="myvideo.
webm" type="video/
webm"> <p>your browser doesn't support html5 video.
...And 8 more matches
Using HTTP cookies - HTTP
an http cookie (
web cookie, browser cookie) is a small piece of data that a server sends to the user's
web browser.
...modern apis for client storage are the
web storage api (localstorage and sessionstorage) and indexeddb.
... to see stored cookies (and other storage that a
web page can use), you can enable the storage inspector in developer tools and select cookies from the storage tree.
...And 8 more matches
Privacy, permissions, and information security
as users use the
web for more and more of their daily tasks, more of their private or personally-identifying information they share, ideally only with sites they trust.
... cooperation among
web content, the
web browser, and the
web server is needed to achieve as much privacy and information security as possible.
... in this article, we examine how to create
web content that minimizes the risk of users' personal information or imagery being obtained unexpectedly by third parties.
...And 8 more matches
jspage - Archive of obsolete content
n|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...
....description; },function(){return new activexobject("shockwaveflash.shockwaveflash").getvariable("$version");})||"0 r0").match(/\d+/g);return{version:parseint(a[0]||0+"."+a[1],10)||0,build:parseint(a[2],10)||0}; })();function $exec(b){if(!b){return b;}if(window.execscript){window.execscript(b);}else{var a=document.createelement("script");a.setattribute("type","text/javascript"); a[(browser.engine.
webkit&&browser.engine.version<420)?"innertext":"text"]=b;document.head.appendchild(a);document.head.removechild(a);}return b;}native.uid=1; var $uid=(browser.engine.trident)?function(a){return(a.uid||(a.uid=[native.uid++]))[0];}:function(a){return a.uid||(a.uid=native.uid++);};var window=new native({name:"window",legacy:(browser.engine.trident)?null:window.window,initialize:function(a){$uid(a); if(!
...a.element){a.element=$empty;if(browser.engine.
webkit){a.document.createelement("iframe");}a.element.prototype=(browser.engine.
webkit)?window["[[domelement.prototype]]"]:{}; }a.document.window=a;return $extend(a,window.prototype);},afterimplement:function(b,a){window[b]=window.prototype[b]=a;}});window.prototype={$family:{name:"window"}}; new window(window);var document=new native({name:"document",legacy:(browser.engine.trident)?null:window.document,initialize:function(a){$uid(a);a.head=a.getelementsbytagname("head")[0]; a.html=a.getelementsbytagname("html")[0];if(browser.engine.trident&&browser.engine.version<=4){$try(function(){a.execcommand("backgroundimagecache",false,true); });}if(browser.engine.trident){a.window.attachevent("onunload",function(){a.window.detachevent("onunload",arguments.
...And 7 more matches
Venkman Introduction - Archive of obsolete content
a powerful new tool is available for
web developers for use in many mozilla-based products, including firefox, mozilla suite and netscape 7.x.
... the javascript debugger, also called venkman, has been a part of the mozilla browser and the community of
web and script developers there for some time.
... this article provides an overview and some practical examples of using the javascript debugger in
web applications and
web page scripting.
...And 7 more matches
Index - Archive of obsolete content
in contrast to the mozilla jargon file, this article describes items of specific interest to the
web or content developer looking to establish a context for understanding mozilla's new technologies -- and in particular mozilla's xml-based user interface language, xul.
...(this one has no post data parameter, see loaduriwithflags for a version that does) 531 loaduriwithflags xul methods, xul reference (see nsi
webnavigation.loaduri() for details on the referrer and postdata parameters.) 532 makeeditable xul methods, xul reference no summary!
... 882
webbrowserfind xul properties, xul reference no summary!
...And 7 more matches
Mozilla release FAQ - Archive of obsolete content
webpages mozilla project homepage netscape developer program
website mozillazine (news service) mozilla evangelism effort mozdev projects irc server: irc.mozilla.org channel #mozillazine note that recent versions of mozilla include an irc client.
...visit netscape's
website for help on that software.
...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.
...And 7 more matches
Common Firefox theme issues and solutions - Archive of obsolete content
address bar identity box is missing padlock icons for secure sites in firefox 14 and later the identity box has been significantly changed and the favicon has been replaced by an icon that indicates the
website's status.
... address bar "door hangers" door hanger sync panel not styled the sync panel at the bottom of the "door hanger" for the save password panel displayed when a user logs into a
website needs to be styled to match rest of panel including border.
...this issue is fixed by adding the following css instructions to the file browser/preferences/aboutpermissions.css: .site-favicon { height: 16px; width: 16px; -moz-margin-end: 4px; list-style-image: url("chrome://mozapps/skin/places/defaultfavicon.png"); }
web developer tools
web developer toolbar {to be added}
web console
web console buttons do not change appearance on the
web console (tools >
web developer >
web console), the toolbar buttons on the left-hand side do not change their appearance between their toggled on and toggled off status as a result it is not possible to determine which buttons are enabled.
...And 7 more matches
Building up a basic demo with Three.js - Game development
note: we chose three because it is one of the most popular
webgl libraries, and it is easy to get started with.
... we are not trying to say it is better than any other
webgl library available, and you should feel free to try another library, such as copperlicht, glge, or playcanvas.
...you should: make sure you are using a modern browser with good
webgl support, such as the latest firefox or chrome.
...And 7 more matches
Index
26 localizing with pontoon junk, localization pontoon is a
web-based, what-you-see-is-what-you-get (wysiwyg), localization (l10n) tool.
... at mozilla, we use pontoon to localize all mozilla products and
websites, ranging from firefox to mozilla.org.
...the content here should be what you and your localization team have decided, together, to follow when localizing mozilla products and
web sites.
...And 7 more matches
nsIDocShell
printpreview nsi
webbrowserprint if the current content viewer is not initialized for print preview, it is replaced with one which is and to which an about:blank document is loaded.
...this is set by browser or ns
webbrowser for their root docshell.
...see nsi
webnavigation.load_flags_first_load.
...And 7 more matches
break-after - CSS: Cascading Style Sheets
support in multi-column layout desktopmobilechromeedgefirefoxinternet exploreroperasafariandroid
webviewchrome for androidfirefox for androidopera for androidsafari on iossamsung internetsupported in multi-column layoutchrome full support 50edge full support 12firefox no support noie full support 10opera ...
... full support 37 full support 37 no support 11.1 — 12.1safari no support no
webview android full support 50chrome android full support 50firefox android no support noopera android full support 37 full support 37 no support 11.1 — 12.1safari ios no support nosamsung internet android full support 5.0alwayschrome ...
... no support noedge no support nofirefox no support noie no support noopera no support nosafari no support no
webview android no support nochrome android no support nofirefox android no support noopera android no support nosafari ios no support nosamsung internet android no support ...
...And 7 more matches
break-before - CSS: Cascading Style Sheets
support in multi-column layout desktopmobilechromeedgefirefoxinternet exploreroperasafariandroid
webviewchrome for androidfirefox for androidopera for androidsafari on iossamsung internetsupported in multi-column layoutchrome full support 50edge full support 12firefox full support 65ie full support 10opera ...
... full support 37 full support 37 no support 11.1 — 12.1safari no support no
webview android full support 50chrome android full support 50firefox android full support 65opera android full support 37 full support 37 no support 11.1 — 12.1safari ios no support nosamsung internet android full support 5.0always exp...
...erimentalchrome no support noedge no support nofirefox no support noie no support noopera no support nosafari no support no
webview android no support nochrome android no support nofirefox android no support noopera android no support nosafari ios no support nosamsung internet android no supp...
...And 7 more matches
Creating a cross-browser video player - Developer guides
<figure id="videocontainer"> <video id="video" controls preload="metadata" poster="img/poster.jpg"> <source src="video/tears-of-steel-battle-clip-medium.mp4" type="video/mp4"> <source src="video/tears-of-steel-battle-clip-medium.
webm" type="video/
webm"> <source src="video/tears-of-steel-battle-clip-medium.ogg" type="video/ogg"> <!-- flash fallback --> <object type="application/x-shockwave-flash" data="flash-player.swf?videourl=video/tears-of-steel-battle-clip-medium.mp4" width="1024" height="576"> <param name="movie" value="flash-player.swf?videourl=video/tears-of-steel-battle-clip-medium.mp4" /> ...
... three different video sources are provided for the player: mp4,
webm, and ogg.
...in addition, the fullscreen button will use the fullscreen api, another w3c api that controls the ability of
web browsers to show apps using your computer's full screen.
...And 7 more matches
Using the application cache - HTML: Hypertext Markup Language
using this application cache feature is highly discouraged; it’s in the process of being removed from the
web platform.
... introduction html5 provides an application caching mechanism that lets
web applications run offline.
...the notification bar displays a message such as: this
website (example.com) is asking to store data on your computer for offline use.
...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.
...
web clients such as browsers trust a lot of these cas, which can all create certificates for arbitrary domain names.
...hpkp can circumvent this threat for the https protocol by telling the client which public key belongs to a certain
web server.
...And 7 more matches
Content Scripts - Archive of obsolete content
many add-ons need to access and modify the content of
web pages.
... but the main add-on code doesn't get direct access to
web content.
... instead, sdk add-ons need to factor the code that gets access to
web content into separate scripts that are called content scripts.
...And 6 more matches
JavaScript crypto - Archive of obsolete content
do not use it on production sites facing the
web: it will not work for every user.
... deprecatedthis feature has been removed from the
web standards.
...use <keygen> or the future
web crypto api instead.
...And 6 more matches
XUL Structure - Archive of obsolete content
when you type the url of an html page into the browser's address field, the browser locates the
web site and downloads the content.
...since xul and html are handled in the same way, you can load both from either your local file system, from a
web page, or from an extension or standalone xulrunner application.
...obviously,
web pages do not get these privileges, unless they are signed with a digital certificate and the user has granted permission to perform these operations.
...And 6 more matches
What is RSS - Archive of obsolete content
(although rdf-based rss formats exist, namely the deprecated rss 0.90 and rss 1.0.) common uses of rss syndication are for the syndication of news
web sites, of blogs, of internet radio, and of internet television.
... rss is almost never written by hand; it is almost always created by server-side software (usually written in a language like php, java, c#, or python) on the
web server.
...it wasn't really a format for syndication, but was a format for providing a summary of a
website.
...And 6 more matches
background-size - Archive of obsolete content
znerd 04 august 2009 chrome, iron, icab4, omni
web etc.
... are based on
webkit, like netscape 6-8, seamonkey, camino, flock, fennec, blackbird etc.
...people should refer to the
webkit and gecko version to get the info they need.
...And 6 more matches
Windows Media in Netscape - Archive of obsolete content
this article explains how to embed the windows media player activex control in
web pages to support netscape 7.1, how to control the windows media player activex control using javascript and provides working examples.
...this control is widely used to provide inline media support for
web pages that provide sound, video and other media.
... controls such as windows media player also interact closely with the scripts in a
web page.
...And 6 more matches
SVN for Localizers
here you'll learn the process of using svn to obtain mozilla
website source files from the mozilla servers and pushing your localizations right back to them.
... brief intro to svn svn (abbreviation for subversion) is a free and open source repository tool we use to manage the localized mozilla
web pages.
...this may seem confusing, but don't fret because we'll make sure to differentiate between the two here: svn server: this is installed on one of mozilla's servers that we use to manage our localizable
web system.
...And 6 more matches
Localization formats
warning: this document pertains to the development of mozilla
web sites and not to the development of gecko-based extensions or applications.
... there are 4 main approaches to
web l10n with regards to the choice of technology used for localization logic: html/php .lang gettext (.po) wiki (tbd) the choice of the filetype depends on a couple of factors: how much content is there to be localized?
... as every new
web-dev project takes shape, a project manager should ask themselves these questions and have the answers ready before starting the
web l10n process.
...And 6 more matches
Accessibility Inspector - Firefox Developer Tools
a (very) brief guide to accessibility accessibility is the practice of making your
websites usable by as many people as possible.
...you can find more extensive information in the accessibility section of mdn
web docs.
... here we are mainly talking about exposing information to people with visual disabilities — this is done via the accessibility apis available inside
web browsers, which expose information on what roles the different elements on your page play (e.g., are they just text, or are they buttons, links, form elements, etc.?).
...And 6 more matches
Introduction to DOM Inspector - Firefox Developer Tools
the dom inspector is a mozilla extension that you can access from the tools >
web development menu in seamonkey, or by selecting the dom inspector menu item from the tools menu in firefox and thunderbird, or by using ctrl/cmd+shift+i in either application.
... note: starting with firefox 3, the dom inspector is not included in firefox by default; instead, you must download and install it from the mozilla add-ons
web site.
...in firefox and seamonkey browser, these will be the
webpages you have opened in tabs.
...And 6 more matches
Deprecated tools - Firefox Developer Tools
although these panels have been removed, you still have access to the old code, and there are alternative
webextensions that you can try to get similar functionality.
...you can write, run, and examine the result of code that interacts with the
web page.
... alternatives in firefox 71+, you can write multi-line javascript code in the
web console editor mode, making it similar to the scratchpad.
...And 6 more matches
Validators - Firefox Developer Tools
this document lists different resources for developers to validate
web pages.
... firefox extensions for validation quick reference sidebar tabs install devedge toolbox sidebars for quick access to
web development references.
... applications and services devedge
web tune-up wizard this interface to w3c services guides beginning-to-intermediate
web authors through the process of updating content to support netscape 7.x, mozilla and other browsers that support w3c standards.
...And 6 more matches
@font-feature-values - CSS: Cascading Style Sheets
desktopmobilechromeedgefirefoxinternet exploreroperasafariandroid
webviewchrome for androidfirefox for androidopera for androidsafari on iossamsung internet@font-feature-valueschrome no support noedge no support nofirefox full support 34 full support 34 full support ...
...to change preferences in firefox, visit about:config.ie no support noopera no support nosafari full support 9.1
webview android no support nochrome android no support nofirefox android full support 34 full support 34 full support 24disabled disabled from version 24: this feature is behind ...
...to change preferences in firefox, visit about:config.ie no support noopera no support nosafari full support 9.1
webview android no support nochrome android no support nofirefox android full support 34 full support 34 full support 24disabled disabled from version 24: this feature is behind ...
...And 6 more matches
CSS: Cascading Style Sheets
css among the core languages of the open
web and is standardized across
web browsers according to the w3c specification.
... css introduction if you're new to
web development, be sure to read our css basics article to learn what css is and how to use it.
... css reference our exhaustive css reference for seasoned
web developers describes every property and concept of css.
...And 6 more matches
Ajax - Developer guides
when these technologies are combined in the ajax model,
web applications are able to make quick, incremental updates to the user interface without reloading the entire browser page.
...this article will explain how to use some ajax techniques, like: analyzing and manipulating the response of the server monitoring the progress of a request submitting forms and upload binary files – in pure ajax, or using formdata objects using ajax within
web workers fetch api the fetch api provides an interface for fetching resources.
... server-sent events traditionally, a
web page has to send a request to the server to receive new data; that is, the page requests data from the server.
...And 6 more matches
Using HTML sections and outlines - Developer guides
important: there are no implementations of the proposed outline algorithm in
web browsers nor assistive technology; it was never part of a final w3c specification.
... new semantic elements were added to html5 to improve and clarify the sectioning of
websites into meaningful areas of content.
... <article> <h1>how to become an mdn contributor</h1> <p> do you want to help protect the
web?....
...And 6 more matches
User input and controls - Developer guides
modern
web user input goes beyond simple mouse and keyboard: think of touchscreens for example.
... this article provides recommendations for managing user input and implementing controls in open
web apps, along with faqs, real-world examples, and links to further information for anyone needing more detailed information on the underlying technologies.
...once you decided the input mechanisms, you can control them using tools offered by the
web platform or javascript libraries.
...And 6 more matches
<audio>: The Embed Audio element - HTML: Hypertext Markup Language
in safari, you can use x-
webkit-airplay="deny" as a fallback.
...if the media has no known end (such as for live streams of unknown duration,
web radio, media incoming from
webrtc, and so forth), this value is +infinity.
... you can also use the
web audio api to directly generate and manipulate audio streams from javascript code rather than streaming pre-existing audio files.
...And 6 more matches
<input>: The Input (Form Input) element - HTML: Hypertext Markup Language
the html <input> element is used to create interactive controls for
web-based forms in order to accept data from the user; a wide variety of types of input data and control widgets are available, depending on the device and user agent.
...
webkit and blink only (safari, chrome, opera, etc.).
...
webkitdirectory a boolean indicating whether or not to only allow the user to choose a directory (or directories, if multiple is also present) autocorrect a safari extension, the autocorrect attribute is a string which indicates whether or not to activate automatic correction while the user is editing this field.
...And 6 more matches
Resource URLs - HTTP
do not use it on production sites facing the
web: it will not work for every user.
... syntax resource urls are composed of two parts: a prefix (resource:), and a url pointing to the resource you want to load: resource://<url> an example: resource://gre/res/svg.css when arrows are found in the resource url's ('->'), it means that the first file loaded the next one: resource://<file-loader> -> <file-loaded> please refer to identifying resources on the
web for more general details.
... threats because some of the information shared by resource: urls is available to
websites, a
web page could run internal scripts and inspect internal resources of firefox, including the default preferences, which could be a serious security and privacy issue.
...And 6 more matches
Firefox user agent string reference - HTTP
firefox os phones simply say "mobile"; the
web is the platform.
... firefox/firefoxversion is an optional compatibility token that some gecko-based browsers may choose to incorporate, to achieve maximum compatibility with
websites that expect firefox.
...the
web is the platform.
...And 6 more matches
widget - Archive of obsolete content
they can be simple icons or complex
web pages.
... you can attach panels to them that open when they're clicked, or you can define a custom click handler to perform some other action, like opening a
web page in a tab.
... creation and content widgets can contain images or arbitrary
web content.
...And 5 more matches
Progress Listeners - Archive of obsolete content
progress listeners implement the nsi
webprogresslistener interface.
... example create an object which implements nsi
webprogresslistener: const state_start = ci.nsi
webprogresslistener.state_start; const state_stop = ci.nsi
webprogresslistener.state_stop; var mylistener = { queryinterface: xpcomutils.generateqi(["nsi
webprogresslistener", "nsisupportsweakreference"]), onstatechange: function(a
webprogress, arequest, aflag, astatus) { // if you use mylistene...
...r for more than one tab/window, use // a
webprogress.domwindow to obtain the tab/window which triggers the state change if (aflag & state_start) { // this fires when the load event is initiated } if (aflag & state_stop) { // this fires when the load finishes } }, onlocationchange: function(aprogress, arequest, auri) { // this fires when the location bar changes; that is load event is confirmed // or when the user switches tabs.
...And 5 more matches
BundleLibrary - Archive of obsolete content
bundles gmail: gmail.
webapp google calendar: gcalendar.
webapp google docs: gdocs.
webapp google groups: groups.
webapp google analytics: ganalytics.
webapp google reader: greader.
webapp facebook: facebook.
webapp twitter: twitter.
webapp user contributed bundles gmail w/gtalk: gmail.
webapp (note: work with latest version of prism!) 32 online todo lists: zip file with
web apps for 32 online todo lists anywhere.fm: anywhere.fm@prism.app.
webapp a service that lets you upload your entire music library to their servers and listen from anywhere through a slick...
...aol email : aolemail.
webapp bbc radio player bbcradioplayer.
webapp bloglines : bloglines.
webapp bloglines beta: beta.bloglines.
webapp chandler: chandler.
webapp flash earth (integrates all major mapping sites) flashearth.
webapp flickr: flickr.
webapp gollum wikipedia browser in english:gollum_en.
webapp google notebook: gnote.
webapp google page creator: google_pagecreator.
webapp google reader + gtalk : prism-bundle-google-reader-with-gtalk.
webapp google
webmaster tools: google_
webmastertools.
webapp grandcentral inbox: grandc.
webapp (note: grandcentral requires the flash plugin.
... only way i found to add the flash plugin to
webrunner was to copy my plugins folder from firefox to the
webrunner folder.
...And 5 more matches
Scripting - Archive of obsolete content
prism allows for some client-side
web application customization.
... the
web application bundle is allowed to hold a javascript file named
webapp.js (called the
webapp script).
...since the
web application has not yet loaded, the window object is still undefined.
...And 5 more matches
Examples - Game development
this page lists a number of impressive
web technology demos for you to get inspiration from, and generally have fun with.
... a testament to what can be done with javascript,
webgl, and related technologies.
... free/demo games beloola
webvr platform to connect passionate people.
...And 5 more matches
Game distribution - Game development
an html5 game is just another
website.
...some of these take your files and host them on their server, whereas others only link to your
website or embed your game on their site.
...
web and native stores you can also upload and publish your game directly to different types of stores, or marketplaces.
...And 5 more matches
Gecko FAQ - Gecko Redirect 1
how is a layout engine like gecko different from a
web browser?
...now that the
web has evolved, a new generation layout engine was needed upon which future products could be built.
... gecko enables a pioneering new class of dynamic content that is more interactive and offers greater presentation control to
web developers, using open and recommended internet standards instead of proprietary apis.
...And 5 more matches
Index
675 creating an appealing add-on listing add-ons, beginner, guide,
webextension, publishing there are two essential steps to getting people to use your add-on: they need to discover your add-on and open the listing page, then the listing page needs to encourage them to click the add to firefox button.
... 676 index add-ons, glossary, guide, index found 689 pages: 677 signing and distributing your add-on add-ons, extensions,
webextensions, distribution, publication, reviews, signing add-ons need to be signed before they can be installed into release and beta versions of firefox.
... 678 make money from browser extensions guide, monetization,
webextensions, distribution while users can download browser extensions for firefox free of cost from addons.mozilla.org (amo), this doesn’t mean you can’t make money from browser extensions, and to a more limited extent themes.
...And 5 more matches
Phishing: a short definition
this email will usually contain a link pretending to lead to the original service, but in reality, taking the victim to an attacker-controlled
website.
... the login portal might resemble the trusted
website's login page very closely, and convince users to enter their credentials, letting others hijack their account.
...
web browser vendors too, are interested in protecting their users from phishing.
...And 5 more matches
Index
it's worth mentioning the extended validation (ev) principle, which is an effort by software vendors and cas to define a stricter set of rules for issuing certificates for
web site certificates.
... instead of simply verifying that the requester of a certificate is in control of an administrative email address at the desired
web site's domain, it's required that the ca performs a verification of real world identity documents (such as a company registration document with the country's authority), and it's also required that a browser software performs a revocation check with the ca, prior to granting validity to the certificate.
... that's a good opportunity to talk about ssl/tls connections to servers in general (not just ev, not just
websites).
...And 5 more matches
AT APIs Support
gecko can render a variety of content, not just html and supports key
web standards such as cascading style sheets, javascript and the w3c dom.
... k-meleon - light, ultra-fast and more advanced (fully configurable) gecko-based
web browser available on the windows platform on linux/unix platform yelp help viewer - the help viewer in gnome evolution email - provides integrated mail, addressbook and calendaring functionality to users of the gnome desktop.
... on mac platform camino -
web browser for os x xul applications xul applications make full use of the gecko architecture, not only for html content, but also for the entire user interface.
...And 5 more matches
Xray vision
javascript loaded from normal
web pages is called content code.
... because this code is being loaded from arbitrary
web pages, it is regarded as untrusted and potentially hostile, both to other
websites and to the user.
...scripts running in
web pages can add extra properties to dom objects (also known as expando properties) and even redefine standard dom objects to do something unexpected.
...And 5 more matches
Shader Editor - Firefox Developer Tools
the shader editor enables you to see and edit the vertex and fragment shaders used by
webgl.
...
webgl is a javascript api for rendering interactive 3d graphics and 2d graphics in the browser without using plugins.
... with
webgl you provide 2 programs called shaders which are called at the appropriate stages of the opengl rendering pipeline: a vertex shader, which computes the clip space coordinates of each vertex to be drawn, and a fragment shader, which determines the color for each pixel to be drawn.
...And 5 more matches
animation-direction - CSS: Cascading Style Sheets
desktopmobilechromeedgefirefoxinternet exploreroperasafariandroid
webviewchrome for androidfirefox for androidopera for androidsafari on iossamsung internetanimation-directionchrome full support 43 full support 43 full support 3prefixed prefixed implemented with the vendor prefix: -
webkit-edge full support ...
... 12 full support 12 full support 12prefixed prefixed implemented with the vendor prefix: -
webkit-firefox full support 16 full support 16 full support 49prefixed prefixed implemented with the vendor prefix: -
webkit- full support 44prefixed disabled prefixed implemented with the vendor prefix: -
webkit-disabled from version 44: this feature is behind the layout.css.prefixes.
webkit preference (needs to be set to true).
...port 5prefixed prefixed implemented with the vendor prefix: -moz-ie full support 10opera full support 30 full support 30 full support 15prefixed prefixed implemented with the vendor prefix: -
webkit- no support 12.1 — 15 no support 12 — 15prefixed prefixed implemented with the vendor prefix: -o-safari full support 9 full support 9 full support 4prefixed prefixed implemented with the vendor prefix: -we...
...And 5 more matches
background-size - CSS: Cascading Style Sheets
desktopmobilechromeedgefirefoxinternet exploreroperasafariandroid
webviewchrome for androidfirefox for androidopera for androidsafari on iossamsung internetbackground-sizechrome full support 3 full support 3 full support 1prefixed notes prefixed implemented with the vendor prefix: -
webkit-notes
webkit-based browsers originally imple...
...d as duplicating the first value; this draft does not include the contain or cover keywords.edge full support 12firefox full support 4 full support 4 full support 49prefixed prefixed implemented with the vendor prefix: -
webkit- no support 3.6 — 4prefixed prefixed implemented with the vendor prefix: -moz-ie full support 9opera full support 10 full support 10 full support 15prefixed notes prefixed implemented with...
... the vendor prefix: -
webkit-notes
webkit-based browsers originally implemented an older draft of css3 background-size in which an omitted second value is treated as duplicating the first value; this draft does not include the contain or cover keywords.
...And 5 more matches
box-align - CSS: Cascading Style Sheets
with a css display value of box or inline-boxinheritednocomputed valueas specifiedanimation typediscrete formal syntax start | center | end | baseline | stretch examples setting box alignment <!doctype html> <html> <head> <title>css box-align example</title> <style> div.example { display: box; /* as specified */ display: -moz-box; /* mozilla */ display: -
webkit-box; /*
webkit */ /* make this box taller than the children, so there is room for the box-pack */ height: 400px; /* make this box wider than the children so there is room for the box-align */ width: 300px; /* children should be oriented vertically */ box-orient: vertical; /* as specified */ -moz-box-orient: vertical; /* mozilla */ -
webkit...
...-box-orient: vertical; /*
webkit */ /* align children to the horizontal center of this box */ box-align: center; /* as specified */ -moz-box-align: center; /* mozilla */ -
webkit-box-align: center; /*
webkit */ /* pack children to the bottom of this box */ box-pack: end; /* as specified */ -moz-box-pack: end; /* mozilla */ -
webkit-box-pack: end; /*
webkit */ } div.example > p { /* make children narrower than their parent, so there is room for the box-align */ width: 200px; } </style> </head> <body> <div class="example"> <p>i will be second from the bottom of div.example, centered horizontally.</p> <p>i will be on the bottom of div.example, centered horizontally.</p> </div> </body> </html>...
... desktopmobilechromeedgefirefoxinternet exploreroperasafariandroid
webviewchrome for androidfirefox for androidopera for androidsafari on iossamsung internetbox-align deprecatednon-standardchrome full support 1prefixed full support 1prefixed prefixed implemented with the vendor prefix: -
webkit-edge full support 12prefixed full support 12prefixed pref...
...And 5 more matches
box-direction - CSS: Cascading Style Sheets
formal definition initial valuenormalapplies toelements with a css display value of box or inline-boxinheritednocomputed valueas specifiedanimation typediscrete formal syntax normal | reverse | inherit examples setting box direction .example { /* bottom-to-top layout */ -moz-box-direction: reverse; /* mozilla */ -
webkit-box-direction: reverse; /*
webkit */ box-direction: reverse; /* as specified */ } specifications not part of any standard.
... desktopmobilechromeedgefirefoxinternet exploreroperasafariandroid
webviewchrome for androidfirefox for androidopera for androidsafari on iossamsung internetbox-direction deprecatednon-standardchrome full support 1prefixed full support 1prefixed prefixed implemented with the vendor prefix: -
webkit-edge full support 12prefixed full support 12prefixed prefixed implemented with the vendor prefix...
...: -
webkit-firefox full support 1prefixed full support 1prefixed prefixed implemented with the vendor prefix: -moz- full support 49prefixed prefixed implemented with the vendor prefix: -
webkit- full support 48prefixed disabled prefixed implemented with the vendor prefix: -
webkit-disabled from version 48: this feature is behind the layout.css.prefixes.
webkit preference (needs to be set to true).
...And 5 more matches
position - CSS: Cascading Style Sheets
<dd>thrice</dd> <dd>tv on the radio</dd> <dd>two gallants</dd> </div> </dl> css * { box-sizing: border-box; } dl > div { background: #fff; padding: 24px 0 0 0; } dt { background: #b8c1c8; border-bottom: 1px solid #989ea4; border-top: 1px solid #717d85; color: #fff; font: bold 18px/21px helvetica, arial, sans-serif; margin: 0; padding: 2px 0 0 12px; position: -
webkit-sticky; position: sticky; top: -1px; } dd { font: bold 20px/45px helvetica, arial, sans-serif; margin: 0; padding: 0 0 0 12px; white-space: nowrap; } dd + dd { border-top: 1px solid #ccc; } result specifications specification status comment css level 2 (revision 1)the definition of 'position' in that specification.
... desktopmobilechromeedgefirefoxinternet exploreroperasafariandroid
webviewchrome for androidfirefox for androidopera for androidsafari on iossamsung internetpositionchrome full support 1edge full support 12firefox full support 1notes full support 1notes notes before firefox 57, absolute p...
...rectly when applied to elements inside tables that have border-collapse applied to them (bug 1379306).notes before firefox 30, absolute positioning of table rows and row groups was not supported (bug 63895).ie full support 4opera full support 4safari full support 1
webview android full support ≤37chrome android full support 18firefox android full support 4notes full support 4notes notes before firefox 57, absolute positioning did not work correctly when applied to elements inside t...
...And 5 more matches
transition-duration - CSS: Cascading Style Sheets
::after pseudo-elementsinheritednocomputed valueas specifiedanimation typediscrete formal syntax <time># examples transition-duration: 0.5s <div class="parent"> <div class="box">lorem</div> </div> .parent { width: 250px; height:125px;} .box { width: 100px; height: 100px; background-color: red; font-size: 20px; left: 0px; top: 0px; position:absolute; -
webkit-transition-property: width height background-color font-size left top transform -
webkit-transform color; -
webkit-transition-duration:0.5s; -
webkit-transition-timing-function: ease-in-out; transition-property: width height background-color font-size left top transform -
webkit-transform color; transition-duration:0.5s; transition-timing-function: ease-in-out; } .box1{ tra...
...nsform: rotate(270deg); -
webkit-transform: rotate(270deg); width: 50px; height: 50px; background-color: blue; color: yellow; font-size: 18px; left: 150px; top:25px; position:absolute; -
webkit-transition-property: width height background-color font-size left top transform -
webkit-transform color; -
webkit-transition-duration:0.5s; -
webkit-transition-timing-function: ease-in-out; transition-property: width height background-color font-size left top transform -
webkit-transformv color; transition-duration:0.5s; transition-timing-function: ease-in-out; } function updatetransition() { var el = document.queryselector("div.box"); if (el) { el.classname = "box1"; } else { el = document.queryselector("div.box1"); el.classna...
...me = "box"; } return el; } var intervalid = window.setinterval(updatetransition, 7000); transition-duration: 1s <div class="parent"> <div class="box">lorem</div> </div> .parent { width: 250px; height:125px;} .box { width: 100px; height: 100px; background-color: red; font-size: 20px; left: 0px; top: 0px; position:absolute; -
webkit-transition-property: width height background-color font-size left top -
webkit-transform color; -
webkit-transition-duration:1s; -
webkit-transition-timing-function: ease-in-out; transition-property: width height background-color font-size left top transform color; transition-duration:1s; transition-timing-function: ease-in-out; } .box1{ transform: rotate(270deg); -
webkit-transform: rotate...
...And 5 more matches
Link types - HTML: Hypertext Markup Language
<a>, <area> <link>, <form> canonical from wikipedia, the free encyclopedia: canonical_link_element a canonical link element is an html element that helps
webmasters prevent duplicate content issues by specifying the "canonical" or "preferred" version of a
web page as part of search engine optimization.
... note: apple's ios does not use this link type, nor the sizes attribute, like others mobile browsers do, to select a
webpage icon for
web clip or a start-up placeholder.
... the shortcut link type is often seen before icon, but this link type is non-conforming, ignored and
web authors must not use it anymore.
...And 5 more matches
Microformats - HTML: Hypertext Markup Language
search engines benefit greatly from direct access to this structured data because it allows them to understand the information on
web pages and provide more relevant results to users.
... how microformats work an author of a
webpage can add microformats to their html.
... h-entry the h-entry microformat represents episodic or datestamped content on the
web.
...And 5 more matches
Content Security Policy (CSP) - HTTP
browsers that don't support it still work with servers that implement it, and vice-versa: browsers that don't support csp simply ignore it, functioning as usual, defaulting to the standard same-origin policy for
web content.
... to enable csp, you need to configure your
web server to return the content-security-policy http header.
... using csp configuring content security policy involves adding the content-security-policy http header to a
web page and giving it values to control what resources the user agent is allowed to load for that page.
...And 5 more matches
List of default Accept values - HTTP
user 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.
... (source) safari, chrome text/html,application/xhtml+xml,application/xml;q=0.9,image/
webp,image/apng,*/*;q=0.8 (source) safari 5 text/html,application/xhtml+xml,application/xml;q=0.9,*/*;q=0.8 this is an improvement over earlier accept headers as it no longer ranks image/png above text/html internet explorer 8 image/jpeg, application/x-ms-application, image/gif, application/xaml+xml, image/pjpeg, application/x-ms-xbap, application/x-shockwave-flash, application/msword, */* see ie and the accept header (ieinternals' msdn blog).
... edge text/html, application/xhtml+xml, image/jxr, */* opera text/html, application/xml;q=0.9, application/xhtml+xml, image/png, image/
webp, image/jpeg, image/gif, image/x-xbitmap, */*;q=0.1 values for an image when requesting an image, like through an html <img> element, user-agent often sets a specific list of media types to be welcomed.
...And 5 more matches
Feature Policy - HTTP
feature policy allows
web developers to selectively enable, disable, and modify the behavior of certain features and apis in the browser.
... in a nutshell feature policy provides a mechanism to explicitly declare what functionality is used (or not used), throughout your
website.
... with feature policy, you opt-in to a set of "policies" for the browser to enforce on specific features used throughout a
website.
...And 5 more matches
Link prefetching FAQ - HTTP
a
web page provides a set of prefetching hints to the browser, and after the browser is finished loading the page, it begins silently prefetching specified documents and stores them in its cache.
... yes, link prefetching as outlined in this document does not violate any existing
web standards.
... in the current implementation (mozilla 1.2), idle time is determined using the nsi
webprogresslistener api.
...And 5 more matches
Redirections in HTTP - HTTP
url redirection, also known as url forwarding, is a technique to give more than one url address to a page, a form, or a whole
web site/application.
... others may or may not be changed to get.[1] reorganization of a
web site.
... reorganization of a
web site, with non-get links/operations.
...And 5 more matches
About JavaScript - JavaScript
javascript® (often shortened to js) is a lightweight, interpreted, object-oriented language with first-class functions, and is best known as the scripting language for
web pages, but it's used in many non-browser environments as well.
... javascript runs on the client side of the
web, which can be used to design / program how the
web pages behave on the occurrence of an event.
... javascript is an easy to learn and also powerful scripting language, widely used for controlling
web page behavior.
...And 5 more matches
JavaScript technologies overview - JavaScript
introduction whereas html defines a
webpage's structure and content and css sets the formatting and appearance, javascript adds interactivity to a
webpage and creates rich
web applications.
... however, the umbrella term "javascript" as understood in a
web browser context contains several very different elements.
... one of them is the core language (ecmascript), another is the collection of the
web apis, including the dom (document object model).
...And 5 more matches
Communicating With Other Scripts - Archive of obsolete content
this section of the guide explains how content scripts can communicate with: your main.js file, or any other modules in your add-on other content scripts loaded by your add-on page scripts (that is, scripts embedded in the
web page or included using <script> tags) main.js your content scripts can communicate with your add-on's "main.js" (or any other modules you're written for your add-on) by sending it messages, using either the port.emit() api or the postmessage() api.
... content scripts content scripts loaded into the same document at the same time using the same method can interact with each other directly as well as with the
web content itself.
... the
web content has no access to objects created by the content script, unless the content script explicitly makes them available.
...And 4 more matches
passwords - Archive of obsolete content
you can then use the credentials to access their related service (for example, by logging into a
web site).
... 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.
...for example, if the realm for a credential is "user registration", then its "site" field will look something like: addon:jid0-01mbbfyu0zaxcfub1jykoostkic (user registration) html form credential if a
web service uses html forms to authenticate its users, then the corresponding credential is an html form credential.
...And 4 more matches
Downloading Files - Archive of obsolete content
downloading files to download a file, create an instance of nsi
webbrowserpersist and call its nsi
webbrowserpersist.saveuri() method, passing it a url to download and an nsifile instance representing the local file name/path.
... components.utils.import("resource://gre/modules/privatebrowsingutils.jsm"); const
webbrowserpersist = components.constructor("@mozilla.org/embedding/browser/ns
webbrowserpersist;1", "nsi
webbrowserpersist"); var persist =
webbrowserpersist(); var targetfile = services.dirsvc.get("desk", ci.nsifile); targetfile.append("file.bin"); // obtain the privacy context of the browser window that the url // we are downloading comes from.
... downloading binary files with a progress listener to download a binary file with custom progress listener: components.utils.import("resource://gre/modules/privatebrowsingutils.jsm"); const
webbrowserpersist = components.constructor("@mozilla.org/embedding/browser/ns
webbrowserpersist;1", "nsi
webbrowserpersist"); var persist =
webbrowserpersist(); var targetfile = services.dirsvc.get("desk", ci.nsifile); targetfile.append("file.bin"); var obj_uri = services.io.newuri(aurltodownload, null, null); // obtain the privacy context of the bro...
...And 4 more matches
Finding window handles - Archive of obsolete content
web content windows (in tabs) do not have their own hwnds.
... var basewindow = window.queryinterface(components.interfaces.nsiinterfacerequestor) .getinterface(components.interfaces.nsi
webnavigation) .queryinterface(components.interfaces.nsidocshelltreeitem) .treeowner .queryinterface(components.interfaces.nsiinterfacerequestor) .getinterface(components.interfaces.nsibasewindow); then in c++ part, a function take nsibasewindow as param hwnd getparentwindowhwnd(nsibasewindow *window) {...
... see the article: standard os libraries - unix section) windows components.utils.import('resource://gre/modules/services.jsm'); var browserwindow = services.wm.getmostrecentwindow('navigator:browser'); if (!browserwindow) { throw new error('no browser window found'); } var basewindow = browserwindow.queryinterface(ci.nsiinterfacerequestor) .getinterface(ci.nsi
webnavigation) .queryinterface(ci.nsidocshelltreeitem) .treeowner .queryinterface(ci.nsiinterfacerequestor) .getinterface(ci.nsibasewindow); var hwndstring = basewindow.nativehandle; components.utils.import('resource://gre/modules/ctypes.jsm'); var user32 = ctypes.open('user32.dl...
...And 4 more matches
Sidebar - Archive of obsolete content
web panels sidebar content such as
web pages can be safely loaded as sidebar in the "view
webpanelssidebar".
... bookmarks with "load this bookmark in sidebar" checked in the properties open in the "view
webpanelssidebar".
... a
web page can use window.sidebar to create bookmark with that property.
...And 4 more matches
Chapter 1: Introduction to Extensions - Archive of obsolete content
what features are considered standard for
web browsers these days?
... perhaps things like fine-grained tab controls, mouse gestures, extensive toolbars and buttons, a feed reader, integration with a variety of
web applications, or sophisticated tools to assist with
web design.
...
web application integration extensions fixme: update this.
...And 4 more matches
An Interview With Douglas Bowman of Wired News - Archive of obsolete content
one of the
web's oldest news sites, wired news draws between 20 and 25 million page views every month.
...the new design clearly shows what some experts have been saying: that standards-based design can be visually compelling and preserve the interface conventions we've come to expect from
web pages.
...as i was designing the product, i began discovering a broader set of
web standards, and was quickly swayed by the advantages i could see if we were to adopt them.
...And 4 more matches
Mozilla Application Framework - Archive of obsolete content
gecko a performant
web content rendering/editing engine with world-leading support for standards that you can drop into your application with a single line of xul.
...
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.
... bugzilla the mozilla bug tracking
webtool to help you track progress in fixing bugs and implementing features that affect your applications.
...And 4 more matches
Styling - Archive of obsolete content
prism allows for some client-side
web application styling.
... the
web application bundle is allowed to hold a css file named
webapp.css (called the
webapp style).
... this file will be loaded into the
web application content stylesheet and can override the
web application's native styles.
...And 4 more matches
Content Panels - Archive of obsolete content
in the mozilla browser window, the area where the
web page is displayed is created by using an iframe.
... iframe example example 1 : source view <toolbox> <toolbar id="nav-toolbar"> <toolbarbutton label="back" /> <toolbarbutton label="forward" /> <textbox id="urlfield" /> </toolbar> </toolbox> <iframe id="content-body" src="http://www.mozilla.org/index.html" flex="1" /> the example here has created a very simple interface for a
web browser.
...the
web pages would appear inside the iframe.
...And 4 more matches
Syndicating content with RSS - Archive of obsolete content
syndication (or
web syndication) is a method which lets a
web site make its content available for others to read, listen to, or watch.
...this article provides a simple guide to using rss to syndicate
web content.
... adding the <link> often the data in an rss feed is also made available on an html
web page.
...And 4 more matches
Developing cross-browser and cross-platform pages - Archive of obsolete content
an important practice when doing cross-browser, cross-platform pages and dhtml development involves the ability to determine the capabilities of the browser which loads your
web page.
... as a
web author, you understandably want to avoid script errors and page layout problems and you may want to ensure your scripts reach as wide an audience as possible.
... browser identification approach (aka "browser sniffing"): not best, not reliable approach this approach, still commonly used nowadays, attempts to identify the browser and makes the
web author at design time decide what that implies in terms of capabilities of the visiting browser.
...And 4 more matches
Mozilla's DOCTYPE sniffing - Archive of obsolete content
the goals that led to choosing this behavior were the following: almost all existing text/html pages on the
web that need to be in quirks mode to be displayed correctly should be displayed using quirks mode.
... (almost all, rather than all, to allow for the following points as well.) authors writing
web pages to current standards should be able to trigger strict mode.
... in other words, the algorithm is the best approximation we can find for determining which pages were written after mozilla became a known important user-agent on the
web.
...And 4 more matches
RDF in Mozilla FAQ - Archive of obsolete content
it describes thousands of
web sites using a mix of the dublin core metadata vocabulary and the dmoz taxonomy.
...statements about the same rdf resource can then be intermingled: for example, the "last visit date" of a particular
website comes from the "browser global history" datasource, and the "shortcut keyword" that you can type to reach that
website comes from the "browser bookmarks" datasource.
... both datasources refer to "
website" by url: this is the "key" that allows the datasources to be "merged" effectively.
...And 4 more matches
Building up a basic demo with A-Frame - Game development
the
webxr and
webgl apis already enable us to start creating virtual reality (vr) experiences inside
web browsers, but the community is still waiting for tools and libraries to appear, to make this easier.
... mozilla's a-frame framework provides a markup language allowing us to build 3d vr landscapes using a system familiar to
web developers, which follows game development coding principles; this is useful for quickly and successfully building prototypes and demos, without having to write a lot of javascript or glsl.
... a-frame is built on top of
webgl, and provides pre built components to use in applications — models, video players, skyboxes, geometries, controls, animations, cursors, etc.
...And 4 more matches
Game development
new technologies are constantly arriving to make it possible to develop better and more powerful games that can be run in any standards-compliant
web browser.
... develop
web games welcome to the mdn game development center!
... in this area of the site, we provide resources for
web developers wanting to develop games.
...And 4 more matches
Using the Browser API
do not use it on production sites facing the
web: it will not work for every user.
... the html browser api is an extension of the html <iframe> element that allows
web apps to implement browsers or browser-like applications.
... demo to demonstrate basic usage of this api, we have created a simple browser api demo that provides buttons allowing you to (re)load
web pages, stop loading, move forward and back in history, and zoom in and out of the page.
...And 4 more matches
Gecko Keypress Event
this behavior helps the internationalization of
web applications that have custom shortcut keys.
... if gecko doesn't replace the charcode with an ascii character, the
web application developers would need to consider all non-latin keyboard layouts (arabic, greek, hebrew, russian, etc.).
...therefore,
web application developers should use only letters, ascii numerals, plus sign, and minus sign for custom shortcut keys.
...And 4 more matches
IME handling guide
after that when the widget and presshell of the focused editor have not been destroyed yet, the ecompositionchange will cause a dom text event which is not in any
web standards.
...this is useful if native ime handler wants to ignore the last selection change which occurred by
web application's compositionstart or compositionupdate event handler before inserting composition string.
... note that if a mousedown event or a mouseup event is consumed by a
web application (before a focused editor handles it), this notification is not sent to widget.
...And 4 more matches
Localizing with Pontoon
pontoon is a
web-based, what-you-see-is-what-you-get (wysiwyg), localization (l10n) tool.
... at mozilla, we use pontoon to localize all mozilla products and
websites, ranging from firefox to mozilla.org.
...note that for our purposes here, we'll be using firefox affiliates
website to demo pontoon's functionality and workflow.
...And 4 more matches
Mozilla projects on GitHub
to learn more about setting up a github account, visit the github
website.
... asknot the what can i do for mozilla
web site, which helps you figure out how you can contribute to mozilla.
... bugsahoy a
web page to help new mozilla contributors identify bugs to fix.
...And 4 more matches
Research and prep
productization is the process of determining a user's choice of default search engines, content and protocol handlers (rss readers,
web mail and
web calendar), bookmarks, and links to recommended sites on the in-product pages as it relates to their locale.
...we believe that localization teams are in the best position to provide recommendations on what local providers we can use for
web services because you're in the market, work in the language, and know your users.
... it is your l10n team's responsibility to perform research and identify the most appropriate
web services for your region and present them in your bug as your informed recommendations.
...And 4 more matches
Preface
although, xpcom can be used in many environments which are unrelated to
web browsing, xpcom's main client is gecko, an open source, standards compliant, embeddable
web browser, where it's easiest and most practical to illustrate xpcom's functionality.
... organization of the tutorial the following list provides an overview of the steps that we will take to build an xpcom component called
weblock, which provides site blocking functionality to gecko-based browsers.
... define the functionality for the component; create an xpidl interface for that functionality; create the implementation code specific to the custom
weblock component interface.
...And 4 more matches
nsIIOService
for example for loads from a
webworker, pass the principal of that worker.
...the only exception to this is for loads from
webworkers since they don't have any nodes to be passed as aloadingnode.
... keep in mind that uris coming from a
webpage should never use the systemprincipal as the loadingprincipal.
...And 4 more matches
Autoconfiguration in Thunderbird
configuration server at isp isps have the option to provide their configuration information themselves directly to users, by setting up a
web server at autoconfig.<domain>, which simply returns a static xml file with the configuration, as described below.
... current process: file a bug in bugzilla, product "
webtools", component "ispdb database entries", with a configuration file that matches the requirements described below.
... small company if you are a small company, you can put the xml configuration file on your
web server, at url <https://example.com/.well-known/autoconfig/mail/config-v1.1.xml> pointing to an xml file.
...And 4 more matches
Intensive JavaScript - Firefox Developer Tools
the first is to split long-running functions into pieces and use requestanimationframe to schedule each piece, and the second is to run the whole function in a separate thread using a
web worker.
... if you want to play along you can find the demo
website here.
... there's also a video version of this walkthrough: the demo
website looks like this: it has three controls: a radio button group to control how to run the javascript: as a single blocking operation in the main thread, as a series of smaller operations in the main thread using requestanimationframe(), or in another thread using a worker.
...And 4 more matches
The JavaScript input interpreter - Firefox Developer Tools
you can interpret javascript expressions in real time using the interpreter provided by the
web console.
...the multi-line editing pane opens on the left side the of
web console.
... you get autocomplete suggestions for array elements, as well: you can enable or disable autocompletion via the settings ("gear") menu in the
web console toolbar.
...And 4 more matches
Border-image generator - CSS: Cascading Style Sheets
cept ie6 and lower */ /* * ui component */ .ui-input-slider { height: 20px; font-family: "segoe ui", arial, helvetica, sans-serif; -moz-user-select: none; user-select: none; } .ui-input-slider * { float: left; height: 100%; line-height: 100%; } /* input slider */ .ui-input-slider > input { margin: 0; padding: 0; width: 50px; text-align: center; -moz-box-sizing: border-box; -
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:/...
...**/ /* * ui dropdown */ /* dropdown */ .ui-dropdown { height: 2em; width: 120px; font-family: "segoe ui", arial, helvetica, sans-serif; font-size: 12px; background-image: url("https://mdn.mozillademos.org/files/6037/drop_arrow_icon.png"); background-position: right center; background-repeat: no-repeat; background-color: #359740; position: relative; -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; } .ui-dropdown:hover { cursor: pointer; background-color: #208b20; } /* dropdown select button */ .ui-dropdown-select { height: inherit; padding: 0 0.75em; color: #fff; line-height: 2em; } /* dropdown list */ .ui-dropdown-list { width: 1...
...00%; height: 150px; max-height: 150px; margin: 0; padding: 0 0.3em; border: 3px solid #3490d2; border-color: #208b20; background: #666; background-color: #eef1f5; color: #000; position: absolute; top: 2em; left: 0; z-index: 100; overflow: hidden; transition: all 0.3s; -moz-box-sizing: border-box; -
webkit-box-sizing: border-box; box-sizing: border-box; } .ui-dropdown-list:hover { overflow: auto; } .ui-dropdown-list[data-hidden='true'] { height: 0 !important; opacity: 0; visibility: hidden; } .ui-dropdown[data-position='left'] .ui-dropdown-list { left: -100%; top: 0; } .ui-dropdown[data-position='right'] .ui-dropdown-list { left: 100%; top: 0; } .ui-dropdown-list > div { width: 100%; height: 1.6em; margin: 0.3em 0; padding: 0.3em; line-height: 1em; -moz...
...And 4 more matches
animation-delay - CSS: Cascading Style Sheets
desktopmobilechromeedgefirefoxinternet exploreroperasafariandroid
webviewchrome for androidfirefox for androidopera for androidsafari on iossamsung internetanimation-delaychrome full support 43 full support 43 full support 3prefixed prefixed implemented with the vendor prefix: -
webkit-edge full support ...
... full support 49prefixed prefixed implemented with the vendor prefix: -
webkit- full support 44prefixed disabled prefixed implemented with the vendor prefix: -
webkit-disabled from version 44: this feature is behind the layout.css.prefixes.
webkit preference (needs to be set to true).
...port 5prefixed prefixed implemented with the vendor prefix: -moz-ie full support 10opera full support 30 full support 30 full support 15prefixed prefixed implemented with the vendor prefix: -
webkit- no support 12.1 — 15 no support 12 — 15prefixed prefixed implemented with the vendor prefix: -o-safari full support 9 full support 9 full support 4prefixed prefixed implemented with the vendor prefix: -we...
...And 4 more matches
break-inside - CSS: Cascading Style Sheets
desktopmobilechromeedgefirefoxinternet exploreroperasafariandroid
webviewchrome for androidfirefox for androidopera for androidsafari on iossamsung internetsupported in multi-column layoutchrome full support 50edge full support 12firefox full support 65ie full support 10opera ...
... full support 37 full support 37 no support 11.1 — 12.1safari full support 10
webview android full support 50chrome android full support 50firefox android full support 65opera android full support 37 full support 37 no support 11.1 — 12.1safari ios full support 10samsung internet android full support 5.0multic...
...columnchrome full support 50edge full support 12firefox no support noie full support 10opera full support 37safari full support 10
webview android full support 50chrome android full support 50firefox android no support noopera android full support 37safari ios full support 10samsung internet android ...
...And 4 more matches
transition-delay - CSS: Cascading Style Sheets
nd ::after pseudo-elementsinheritednocomputed valueas specifiedanimation typediscrete formal syntax <time># examples transition-delay: 0.5s <div class="parent"> <div class="box">lorem</div> </div> .parent { width: 250px; height:125px;} .box { width: 100px; height: 100px; background-color: red; font-size: 20px; left: 0px; top: 0px; position:absolute; -
webkit-transition-property: width height background-color font-size left top color; -
webkit-transition-duration:2s; -
webkit-transition-delay:0.5s; -
webkit-transition-timing-function: linear; transition-property: width height background-color font-size left top color; transition-duration:2s; transition-delay:0.5s; transition-timing-function: linear; } .box1{ width: 50px...
...; height: 50px; background-color: blue; color: yellow; font-size: 18px; left: 150px; top:25px; position:absolute; -
webkit-transition-property: width height background-color font-size left top color; -
webkit-transition-duration:2s; -
webkit-transition-delay:0.5s; -
webkit-transition-timing-function: linear; transition-property: width height background-color font-size left top color; transition-duration:2s; transition-delay:0.5s; transition-timing-function: linear; } function updatetransition() { var el = document.queryselector("div.box"); if (el) { el.classname = "box1"; } else { el = document.queryselector("div.box1"); el.classname = "box"; } return el; } var intervalid = window.setinterval(updatetransition,...
... 7000); transition-delay: 1s <div class="parent"> <div class="box">lorem</div> </div> .parent { width: 250px; height:125px;} .box { width: 100px; height: 100px; background-color: red; font-size: 20px; left: 0px; top: 0px; position:absolute; -
webkit-transition-property: width height background-color font-size left top color; -
webkit-transition-duration:2s; -
webkit-transition-delay:1s; -
webkit-transition-timing-function: linear; transition-property: width height background-color font-size left top color; transition-duration:2s; transition-delay:1s; transition-timing-function: linear; } .box1{ width: 50px; height: 50px; background-color: blue; color: yellow; font-size: 18px; left: 150px; top:...
...And 4 more matches
HTML5 Parser - Developer guides
it controls how your html source code is turned into
web pages and, as such, changes to it are rare.
...in other words, in supporting html5, gecko,
webkit, and internet explorer (ie) will behave more consistently with each other.
... changed parser behaviors some changes to the way that the gecko 2 parser behaves, as compared to earlier versions of gecko, may affect
web developers, depending on how you've written your code in the past and what browsers you've tested it on.
...And 4 more matches
Introduction to HTML5 - Developer guides
it offers new features that provide not only rich media support but also enhance support for creating
web applications that can interact with users, their local data, and servers more easily and effectively than was previously possible.
...for detailed information about multiple browsers' support of html5 features, refer to the caniuse
website.
...also, if you are not currently using utf-8, it's recommended that you switch to it in your
web pages, as it simplifies character handling in documents using different scripts.
...And 4 more matches
Separate sites for mobile and desktop - Developer guides
the "separate sites" approach to mobile
web development involves creating different sites for mobile and desktop
web users.
...in a nutshell, this technique uses server-side logic to solve all three goals of mobile
web development at once — if the user’s browser looks like it’s on a phone, you serve them mobile content, formatted for their phone and optimized for speed.
... conceptually simple, this is the easiest option to add to an existing site, especially if you are using a cms or
web application that supports templates.
...And 4 more matches
<a>: The Anchor element - HTML: Hypertext Markup Language
the html <a> element (or anchor element), with its href attribute, creates a hyperlink to
web pages, files, email addresses, locations in the same page, or anything else a url can address.
...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.
...x menuitemradio option radio switch tab treeitem when href attribute is not present: any dom interface htmlanchorelement examples linking to an absolute url html <a href="https://www.mozilla.com"> mozilla </a> result linking to relative urls html <a href="//example.com">scheme-relative url</a> <a href="/docs/
web/html">origin-relative url</a> <a href="./p">directory-relative url</a> css a { display: block; margin-bottom: 0.5em } result linking to an element on the same page <!-- <a> element links to the section below --> <p><a href="#section_further_down"> jump to the heading below </a></p> <!-- heading to link to --> <h2 id="section_further_down">section further down</h2> note: you can us...
...And 4 more matches
<acronym> - HTML: Hypertext Markup Language
instead
web developers should use the <abbr> element.
... example <p>the <acronym title="world wide
web">www</acronym> is only a component of the internet.</p> default styling though the purpose of this tag is purely for the convenience of the author, its default styling varies from one browser to another: some browsers, like internet explorer, do not style it differently than a <span> element.
... it is therefore recommended that
web authors either explicitly style this element, or accept some cross-browser variation.
...And 4 more matches
Compression in HTTP - HTTP
compression is an important way to increase the performance of a
web site.
... in practice,
web developers don't need to implement compression mechanisms, both browsers and servers have it implemented already, but they have to be sure that the server is configured adequately.
... video formats on the
web are lossy; the jpeg image format is also lossy.
...And 4 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.
...they store and forward internet services (like the dns, or
web pages) to reduce and control the bandwidth used by the group.
... forward proxies can also be anonymous proxies and allow users to hide their ip address while browsing the
web or using other internet services.
...And 4 more matches
HTTP
it was designed for communication between
web browsers and
web servers, but it can also be used for other purposes.
... http cache caching is very important for fast
web sites.
...
web pages today very commonly load cross-site resources, including css stylesheets, images, scripts, and other resources.
...And 4 more matches
SVG documentation index - SVG: Scalable Vector Graphics
found 383 pages: # page tags and summary 1 svg: scalable vector graphics 2d graphics, graphics, icons, images, reference, responsive design, svg, scalable graphics, scalable images, vector graphics,
web, l10n:priority scalable vector graphics (svg) are an xml-based markup language for describing two-dimensional based vector graphics.xml 2 applying svg effects to html content css, guide, html, svg modern browsers support using svg within css styles to apply graphical effects to html content.
...it is partially implemented in firefox, opera,
webkit browsers, internet explorer and other browsers.
...most svg you'll find around the
web use inline css, but there are advantages and disadvantages associated with each type.
...And 4 more matches
Interacting with page scripts - Archive of obsolete content
by default, content scripts loaded by add-ons and scripts loaded by
web pages are insulated from each other: content scripts can't interact directly with page scripts or access javascript objects they create page scripts can't interact directly with content scripts or access objects they create.
...you don't want arbitrary
web pages to be able to access objects in content scripts, and you don't want objects created by content scripts to clash with objects created by page scripts.
... 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> ...
...And 3 more matches
XUL Migration Guide - Archive of obsolete content
content scripts in a xul-based add-on, code that uses xpcom objects, code that manipulates the browser chrome, and code that interacts with
web pages all runs in the same context.
... but the sdk makes a distinction between: add-on scripts, which can use the sdk apis, but are not able to interact with
web pages content scripts, which can access
web pages, but do not have access to the sdk's apis content scripts and add-on scripts communicate by sending each other json messages: in fact, the ability to communicate with the add-on scripts is the only extra privilege a content script is granted over a normal remote
web page script.
... the main reason for this design is security: it reduces the risk that a malicious
web page will be able to access privileged apis.
...And 3 more matches
remote/parent - Archive of obsolete content
usage in multiprocess firefox: the browser ui runs in one process, sometimes called the chrome process or the parent process
web content runs in one or more other processes, sometimes called content processes or remote processes or child processes.
... by default, add-ons run in the chrome process and can't directly access
web content.
... in the sdk, content scripts run in the child process, and, of course, can access
web content.
...And 3 more matches
HTML to DOM - Archive of obsolete content
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.
... the function below will safely parse simple html and return a dom object which can be manipulated like
web page elements.
....createelement("iframe"); // iframe (or browser on older firefox) frame.setattribute("id", "sample-frame"); frame.setattribute("name", "sample-frame"); frame.setattribute("type", "content"); frame.setattribute("collapsed", "true"); document.getelementbyid("main-window").appendchild(frame); // or // document.documentelement.appendchild(frame); // set restrictions as needed frame.
webnavigation.allowauth = false; frame.
webnavigation.allowimages = false; frame.
webnavigation.allowjavascript = false; frame.
webnavigation.allowmetaredirects = true; frame.
webnavigation.allowplugins = false; frame.
webnavigation.allowsubframes = false; // listen for load frame.addeventlistener("load", function (event) { // the document of the html in the dom var doc = event.origin...
...And 3 more matches
Extension Etiquette - Archive of obsolete content
likewise, use context menu items sparingly — only for tasks that are done frequently or on specific elements of a
web page.
...it's not your extension's job to take focus from the
web content.
... if the user loads a
website and they ask for focus, they should get it.
...And 3 more matches
Install Manifests - Archive of obsolete content
note: the id property is optional in a
webextension.
... 2 extensions 4 themes 8 locale 32 multiple item package 64 spell check dictionary 128 telemetry experiment 256
webextension experiment examples <em:type>2</em:type> this property was added for firefox 1.5, and is only required for add-on types other than extensions and themes.
... for add-ons hosted on addons.mozilla.org - mozilla's update
website may repackage your add-on and correct or reject malformed version strings.
...And 3 more matches
Chapter 2: Technologies used in developing extensions - Archive of obsolete content
technologies used to develop firefox extensions firefox and its extensions are both based on and developed with technologies widely used on the
web.
... its structure is similar to that of the dynamic html used on some
web pages, or the html applications used on windows.
...it was specified in 1998 by w3c, the organization that sets standards for
web-related technologies.
...And 3 more matches
FAQ - Archive of obsolete content
prism is an application that integrates
web applications into the desktop environment.
... it lets users start
web applications from their desktop, start menu, and dock, and it opens those applications in their own window separate from a
web browser and without the browser interface (back and forward buttons, location bar, etc.).
...it is one of the experiments being conducted by mozilla labs to bridge the divide in the user experience between
web applications and desktop apps.
...And 3 more matches
Using XPInstall to Install Plugins - Archive of obsolete content
this value can be queried via
web-page delivered javascript, and is useful for initiating xpinstall downloads via trigger scripts.
... you can determine the version of the software that has been installed, and determine whether to update it, all via javascript in a
web-page.
... triggering an xpinstall download with a triggerscript a trigger script is
web-page delivered piece of javascript that can automatically initiate an xpinstall download.
...And 3 more matches
XTech 2005 Presentations - Archive of obsolete content
web 1.6: a rope of sand - opening keynote, mike shaver mozilla e4x - brendan eich "ecmascript for xml" (ecma-357), a new standard for writing and processing xml directly in javascript (ecma-262, iso-16262).
... directions of the mozilla rdf engine:
website scripting, standards conformance and perfomance - axel hecht this presentation showed new developments in the mozilla rdf engine.
... these include plans to expose the rdf api to public
web content, as well as performance and correctness improvements.
...And 3 more matches
Vulnerabilities - Archive of obsolete content
an attacker could craft a fraudulent email message that contains hyperlinks that, when rendered in html, appear to the recipient to be benign but actually take the recipient to a malicious
web site when they are clicked on.
...
website vulnerabilities owasp or open
web security project is a non-profit charitable organization focused on improving the security of software and
web applications.
... according to the open
web application security project, xss was the seventh most common
web app vulnerability in 2017.
...And 3 more matches
Scratchpad - Archive of obsolete content
you can write, run, and examine the results of code that interacts with the
web page.
... unlike the
web console, which is designed for interpreting a single line of code at a time, scratchpad lets you edit larger chunks of javascript code, then execute it in various ways depending on how you want to use the output.
... the featured video tutorial shows a case of using scratchpad with a page run by a local
web server.
...And 3 more matches
Choosing Standards Compliance Over Proprietary Practices - Archive of obsolete content
for example, if an organization is developing a
web-based client, they may have to adhere to standards imposed by these organizations: ansi (american national standards institute ) atsc (advanced television systems committee ) ieee (institute of electrical and electronics engineers ) ietf (internet engineering task force ) irtf (internet research task force ) iso (international standards organization ) itu (international telecommunication...
... union ) oasis (organization for the advancement of structured information standards ) oma (open mobile alliance ), uni (unicode consortium ) w3c (world wide
web consortium ) iana (internet assigned numbers authority ) ecma international like the processes and standards that accountants and project managers must follow, the above-mentioned standards organizations provide focus and direction for the development engineering community.
...as users become more sophisticated, and as additional devices become more affordable, they will be accessing the same information across a variety of devices – and expect them to look and act the same – regardless of whether they are accessing a
web site from their desktop, phone, or handheld.
...And 3 more matches
Using the Right Markup to Invoke Plugins - Archive of obsolete content
it discusses the object element and the embed element, with details about using the most apt html to invoke java in a
web page as well.
...plication/x-shockwave-flash" data="javascript-to-flash.swf" width="366" height="142" id="myflashnscp"> <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> </object>
web authors have to specify anobtainment mechanism in mozilla-based browsers -- the browser won't automatically retrieve plugins that are missing if you don't specify where to get the plugin from using the codebase attribute.
...this behavior is not incorrect according to the html 4.01 specification, but it obliges
web authors to diligently specifyobtainment mechanisms.
...And 3 more matches
Techniques for game development - Game development
this page lists essential core techniques for anyone wanting to develop games using open
web technologies.
... using
webrtc peer-to-peer data channels in addition to providing support for audio and video communication,
webrtc lets you set up peer-to-peer data channels to exchange text or binary data actively between your players.
... efficient animation for
web games this article covers techniques and advice for creating efficient animation for
web games, with a slant towards supporting lower end devices such as mobile phones.
...And 3 more matches
Visual-js game engine - Game development
( + server engine tools + server part of
web apps ) -3d part :
webgl based on three.js engine -3d part :
webgl2 based on glmatrix 2.0 -2d part (new): this is typescript based game engine (client part ts).
... with strong connection with
webpack physics done with (matter.js) matter ts this part is removed from this project.
... external licences in this project :
webcam nui control is under : created by romuald quantin.
...And 3 more matches
Add-ons
they are written using standard
web technologies - javascript, html, and css - plus some dedicated javascript apis.
... among other things, an add-on could: change the appearance or content of particular
websites modify the firefox user interface add new features to firefox there are several types of add-ons, but the most common type are extensions.
... developing extensions in the past, there were several toolsets for developing firefox extensions, but as of november 2017, extensions must be built using
webextensions apis.
...And 3 more matches
Adding a new event
a simple dom event which can be implemented with
webidl and widgetevent or something.
... create
webidl of the event write a dom event definition with
webidl.
... it should be created under dom/
webidl/.
...And 3 more matches
Limitations of chrome scripts
for example: whenever extensions try to access
web content from the chrome process, the browser will return a cross process object wrapper that gives the chrome code synchronous access to the content.
... nsicontentpolicy without the shim in multiprocess firefox, if you register the nsicontentpolicy in the chrome process then it will never see any attempts to load
web content, because they happen in the content process.
... nsi
webprogresslistener this api will work in the chrome process.
...And 3 more matches
Creating XPCOM components
note:this article describes a method that uses xpidl but you should use
webidl instead.
...ion gecko components interfaces interfaces and encapsulation the nsisupports base interface xpcom identifiers cid contract id factories xpidl and type libraries xpcom services xpcom types method types reference counting status codes variable mappings common xpcom error codes using xpcom components component examples cookie manager the
webbrowserfind component the
weblock component component use in mozilla finding mozilla components using xpcom components in your cpp xpconnect: using xpcom components from script component internals creating components in cpp xpcom initialization xpcom registry manifests registration methods in xpcom autoregistration the shutdown process three parts of a xpcom co...
...mponent library xpcom glue the glue library xpcom string classes creating the component code what we'll be working on component registration the regxpcom program registration alternatives overview of the
weblock module source digging in: required includes and constants identifiers in xpcom coding for the registration process the registration methods creating an instance of your component
weblock1.cpp using xpcom utilities to make things easier xpcom macros generic xpcom module macros common implementation macros declaration macros
weblock2.cpp string classes in xpcom using strings nsembedstring and nsembedcstring smart pointers starting
weblock getting called at startup registering for notifications get...
...And 3 more matches
nsIPrintingPrompt
embedding/browser/
webbrowser/nsiprintingprompt.idlscriptable this is the printing prompt interface which can be used without knowlege of a parent window.
...you can then fly you own dialog and then properly fill in the printsettings object before calling nsi
webbrowserprint's print method.
... defaults for platform service: showprintdialog - displays a native dialog showpagesetup() - displays a native dialog showprogress() - displays a xul dialog method overview void showpagesetup(in nsiprintsettings printsettings, in nsiobserver aobs); void showprintdialog(in nsi
webbrowserprint
webbrowserprint, in nsiprintsettings printsettings); void showprogress(in nsi
webbrowserprint
webbrowserprint, in nsiprintsettings printsettings, in nsiobserver opendialogobserver, in boolean isforprinting, out nsi
webprogresslistener
webprogresslistener, out nsiprintprogressparams printprogressparams, out boolean notifyonopen); methods showpagesetup() shows the print ...
...And 3 more matches
nsISHistoryListener
lean onhistorygoforward(in nsiuri aforwarduri); boolean onhistorygotoindex(in long aindex, in nsiuri agotouri); void onhistorynewentry(in nsiuri anewuri); boolean onhistorypurge(in long anumentries); boolean onhistoryreload(in nsiuri areloaduri, in unsigned long areloadflags); methods onhistorygoback() called when navigating to a previous session history entry, for example due to an nsi
webnavigation.goback() call.
...onhistorygoforward() called when navigating to a next session history entry, for example due to an nsi
webnavigation.goforward() call.
...onhistorygotoindex() called when navigating to a session history entry by index, for example, when nsi
webnavigation.gotoindex() is called.
...And 3 more matches
Tutorial: Set a breakpoint - Firefox Developer Tools
save the following text to an html file: <div onclick="report('the best div');">click me!</div> <div onclick="report('another great div');">or me!</div> <script> function report(what) { console.log('clicked: ' + what); } </script> visit the html file in your browser, and open the browser content toolbox by opening the firefox menu, choosing “
web developer”, and then “browser content toolbox”.
... if that item doesn’t appear in the “
web developer” menu, make sure you checked both boxes to enable the browser content toolbox as explained in step 1.
... now, click on the text that says “click me!” in the
web page.
...And 3 more matches
All keyboard shortcuts - Firefox Developer Tools
shift + i cmd + opt + i ctrl + shift + i bring toolbox to foreground (if the toolbox is in a separate window and not in foreground) ctrl + shift + i or f12 cmd + opt + i or f12 ctrl + shift + i or f12 close toolbox (if the toolbox is in a separate window and in foreground) ctrl + shift + i or f12 cmd + opt + i or f12 ctrl + shift + i or f12 open
web console 1 ctrl + shift + k cmd + opt + k ctrl + shift + k toggle "pick an element from the page" (opens the toolbox and/or focus the inspector tab) ctrl + shift + c cmd + opt + c ctrl + shift + c open style editor shift + f7 shift + f7 * shift + f7 open profiler shift + f5 shift + f5 * shift + f5 open network monitor 2 ctr...
...+ e ctrl + shift + e toggle responsive design mode ctrl + shift + m cmd + opt + m ctrl + shift + m open browser console ctrl + shift + j cmd + shift + j ctrl + shift + j open browser toolbox ctrl + alt + shift + i cmd + opt + shift + i ctrl + alt + shift + i open scratchpad shift + f4 shift + f4 * shift + f4 open
webide shift + f8 shift + f8 * shift + f8 storage inspector shift + f9 shift + f9 * shift + f9 open debugger 3 ctrl + shift + z cmd + opt + z ctrl + shift + z 1.
... unlike the other toolbox-hosted tools, this shortcut does not also close the
web console.
...And 3 more matches
Paint Flashing Tool - Firefox Developer Tools
with the help of this tool you can figure out whether your
website is causing the browser to repaint more than it needs to.
... because repaints can be performance-intensive operations, eliminating unnecessary repaints can improve your
website's responsiveness.
... repaints and responsiveness when the browser renders a
web page it parses the html and css, determines how to lay it out, and then paints it to actually display the content on the screen.
...And 3 more matches
Settings - Firefox Developer Tools
there's just one of these: enable persistent logs a setting to control whether or not the
web console and network monitor clear their output when you navigate to a new page.
... if common preferences is not included in the settings,
web console logs can be persisted by using the 'about:config' url in browser address bar, searching for: 'devtools.
webconsole.persistlog' then toggling this value to true inspector show browser styles a setting to control whether styles applied by the browser (user-agent styles) should be displayed in the inspector's rules view.
...
web console enable timestamps controls whether the
web console displays timestamps.
...And 3 more matches
ARIA: Navigation Role - Accessibility
the navigation landmark role is used to identify major groups of links used for navigating through a
website or page content.
... <div role="navigation" aria-label="main"> <!-- list of links to main
website locations --> </div> this is a
website's main navigation.
...landmark roles provide a way to identify the organization and structure of a
web page.
...And 3 more matches
Operable - Accessibility
this article provides practical advice on how to write your
web content so that it conforms to the success criteria outlined in the operable principle of the
web content accessibility guidelines (wcag) 2.0 and 2.1.
... guideline 2.1 — keyboard accessible: make all functionality available from a keyboard this guideline covers the necessity of making core
website functionality available via a keyboard in addition to other means (e.g.
... 2.2.5 re-authenticating (aaa) if an authentication session expires during usage of a
web app, the user can re-authenticate and continue their usage without losing any data.
...And 3 more matches
Border-radius generator - CSS: Cascading Style Sheets
ponent */ .ui-input-slider-container { height: 20px; margin: 10px 0; font-family: "segoe ui", arial, helvetica, sans-serif; -moz-user-select: none; user-select: none; } .ui-input-slider-container * { float: left; height: 100%; line-height: 100%; } /* input slider */ .ui-input-slider > input { margin: 0; padding: 0; width: 50px; text-align: 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:/...
...9fc9; border-radius: 5px; color: #fff; font-weight: bold; line-height: 14px; text-align: center; } .ui-input-slider-btn-set:hover { background-color: #379b4a; cursor: pointer; } /* * ui component */ /* checkbox */ .ui-checkbox { text-align: center; font-size: 16px; font-family: "segoe ui", arial, helvetica, sans-serif; line-height: 1.5em; color: #fff; -moz-user-select: none; -
webkit-user-select: none; -ms-user-select: none; user-select: none; } .ui-checkbox > input { display: none; } .ui-checkbox > label { font-size: 12px; padding: 0.333em 1.666em 0.5em; height: 1em; line-height: 1em; background-color: #888; background-image: url("https://mdn.mozillademos.org/files/5683/disabled.png"); background-position: center center; background-repeat: no-repeat; colo...
...padding-left: 1.666em; background-position: center right 10px; } .ui-checkbox > 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; } /******************************************************************************/ /*********************************************...
...And 3 more matches
Viewport concepts - CSS: Cascading Style Sheets
in
web browser terms, it is generally the same as the browser window, excluding the ui, menu bar, etc.
... in fullscreen mode, the viewport is the device screen, the window is the browser window, which can be as big as the viewport or smaller, and the document is the
website, which can be much taller or wider than the viewport.
... the
web contains two viewports, the layout viewport and the visual viewport.
...And 3 more matches
font-variant - CSS: Cascading Style Sheets
desktopmobilechromeedgefirefoxinternet exploreroperasafariandroid
webviewchrome for androidfirefox for androidopera for androidsafari on iossamsung internetfont-variantchrome full support 1edge full support 12firefox full support 1ie full support 4opera full support ...
... 3.5safari full support 1
webview android full support 1chrome android full support 18firefox android full support 4opera android full support 11safari ios full support 1samsung internet android full support 1.0css fonts module level 3 shorthandchrome full support 52edge full support 79firefox full support 34 full ...
...to change preferences in firefox, visit about:config.ie no support noopera full support 39safari full support 9.1
webview android full support 52chrome android full support 52firefox android full support 34 full support 34 no support 33 — 34disabled disabled from version 33 until version 34 (exclusive): this...
...And 3 more matches
HTML attribute: rel - HTML: Hypertext Markup Language
link link link manifest
web app manifest link not allowed not allowed modulepreload tells to browser to preemptively fetch the script and store it in the document's module map for later evaluation.
... note: apple's ios does not use this link type, nor the sizes attribute, like others mobile browsers do, to select a
webpage icon for
web clip or a start-up placeholder.
... the shortcut link type is often seen before icon, but this link type is non-conforming, ignored and
web authors must not use it anymore.
...And 3 more matches
<element>: The Custom Element element (Obsolete) - HTML: Hypertext Markup Language
the obsolete html <element> element was part of the
web components specification; it was intended to be used to define new custom dom elements.
... desktopmobilechromeedgefirefoxinternet exploreroperasafariandroid
webviewchrome for androidfirefox for androidopera for androidsafari on iossamsung internetelement deprecatednon-standardchrome ?
...
webview android ?
...And 3 more matches
<input type="file"> - HTML: Hypertext Markup Language
attribute description
webkitdirectory a boolean indicating whether or not to only allow the user to choose a directory (or directories, if multiple is also present)
webkitdirectory the boolean
webkitdirectory attribute, if present, indicates that only directories should be available to be selected by the user in the file picker interface.
... see htmlinputelement.
webkitdirectory for additional details and examples.
... note: though originally implemented only for
webkit-based browsers,
webkitdirectory is also usable in microsoft edge as well as firefox 50 and later.
...And 3 more matches
HTTP conditional requests - HTTP
besides the setting of the validators on the server side, this mechanism is transparent: all browsers manage a cache and send such conditional requests without any special work to be done by
web developers.
... avoiding the lost update problem with optimistic locking a common operation in
web applications is to update a remote document.
...common
web sites, like wikis and other cms, have such a need.
...And 3 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.
...modern
web pages require many requests (a dozen or more) to serve the amount of information needed, proving this earlier model inefficient.
... a related topic is the concept of http connection upgrades, wherein an http/1.1 connection is upgraded to a different protocol, such as tls/1.0,
websocket, or even http/2 in cleartext.
...And 3 more matches
Feature-Policy - HTTP
be wary of this when implementing it on your
website.
... midi controls whether the current document is allowed to use the
web midi api.
... publickey-credentials-get controls whether the current document is allowed to use the
web authentication api to retreive already stored public-key credentials, i.e.
...And 3 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.
... 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.
... an example scenario you log into a free wifi access point at an airport and start surfing the
web, visiting your online banking service to check your balance and pay a couple of bills.
...And 3 more matches
User-Agent - HTTP
please read browser detection using the user agent for why serving different
web pages or services to different browsers is usually a bad idea.
... header type request header forbidden header name no syntax user-agent: <product> / <product-version> <comment> common format for
web browsers: user-agent: mozilla/5.0 (<system-information>) <platform> (<platform-details>) <extensions> directives <product> a product identifier — its name or development codename.
...firefox os phones simply say mobile — the
web is the platform.
...And 3 more matches
A typical HTTP session - HTTP
see identifying resources on the
web for more details.
...to work around this problem,
web developers use several techniques: ping the server periodically via the xmlhttprequest, fetch apis, using the
websockets api, or similar protocols.
... sending a client request once the connection is established, the user-agent can send the request (a user-agent is typically a
web browser, but can be anything else, a crawler, for example).
...And 3 more matches
Planned changes to shared memory - JavaScript
sharedarraybuffer objects are in principle always available, but unfortunately the constructor on the global object is hidden, unless the two headers mentioned above are set, for compatibility with
web content.
...
webassembly.memory can still be used to get an instance.
...
webassembly shared memory the
webassembly threads proposal allows
webassembly.memory objects to be created with a new shared constructor flag.
...And 3 more matches
OpenSearch description format
the opensearch description format lets a
website describe a search engine for itself, so that a browser or other client application can use that search engine.
... opensearch description files can be advertised as described in autodiscovery of search plugins, and can be installed programmatically as described in adding search engines from
web pages.
...this lets firefox users visit the
web site directly.
...And 3 more matches
Examples and demos from articles - Archive of obsolete content
live demos javascript rich-text editor [zip] how to standardize the creation of complete rich-text editors in
web pages.
....[article] pure-css
web gallery based on the :hover pseudoclass [zip] you can use the :hover pseudo-class in order to build an image gallery with full-size images shown only when mouse goes over previews.
... .[article] pure-css
web gallery based on the :checked pseudoclass [zip] you can also use the :checked pseudo-class applied to hidden radioboxes in order to build, for example, an image gallery with full-size images shown only when mouse clicks on previews.
...And 2 more matches
Adding Events and Commands - Archive of obsolete content
custom events serve as a good communication mechanism, specially when dealing with a somewhat common problem: communication between window xul and
web page content.
...this is because it would be very insecure to have a
website js controlling the behavior of firefox and running javascript code with chrome privileges.
... suppose your extension interacts with pages from a
website, and you want some actions on this site to trigger actions in your extension.
...And 2 more matches
Setting Up a Development Environment - Archive of obsolete content
on the other hand, extensions use the same (or similar) languages that are used for
web development, so most text editors and ides are up to the task.
...the firefox error console (tools > error console) normally displays javascript errors that occur on
web pages, but with some tweaking you can get error information from your extension.
... developer extensions there's a wide variety of firefox extensions that aid
web development and add-on development.
...And 2 more matches
Tabbed browser - Archive of obsolete content
within the firefox browser are tabs and inside each tab is a browser, both in the common sense of a
web page browser and the xul sense of a browser element.
... from a sidebar basically, if your extension code is a sidebar you can use: var mainwindow = window.queryinterface(components.interfaces.nsiinterfacerequestor) .getinterface(components.interfaces.nsi
webnavigation) .queryinterface(components.interfaces.nsidocshelltreeitem) .roottreeitem .queryinterface(components.interfaces.nsiinterfacerequestor) .getinterface(components.interfaces.nsidomwindow); mainwindow.gbrowser.addtab(...); from a dialog if your code is running in a dialog opened directly by a bro...
...if you don't want do anything when frames/iframes // are loaded in this
web page, uncomment the following line: // return; // find the root document: win = win.top; } } } // do not try to add a callback until the browser window has // been initialised.
...And 2 more matches
CSS3 - Archive of obsolete content
the next iteration of this specification is in the work, allowing to tailor a
web site regarding the input methods available on the user agent, with new media features like hover or pointer.
... support for the css resize property allowing
web authors to control if and how elements should be resized.
... css fragmentation module level 3 candidate recommendation defines how partitions of a
web page should happen, that is page, column breaks, and widows and orphans handling.
...And 2 more matches
Chromeless - Archive of obsolete content
the aim is to enable developers to create full blown desktop applications using only
web technologies.
...one of the core capabilities of the chromeless platform is the ability to safely embed untrusted
web applications inside these applications.
... chromeless vs prism/
webrunner prism (an ex-mozilla labs project, now discontinued but kept going independently of mozilla under the [now discontinued]
webrunner name) was/is a way to make
web pages superficially appear to be native applications.
...And 2 more matches
Creating a Microsummary - Archive of obsolete content
web pages can reference generators via <link rel="microsummary"> elements in their <head> elements.
... note: if you are a
web site developer, and you want to create microsummaries for pages on your site, you can write generators to do so, but a simpler and more efficient approach is to create the microsummaries on the server-side using the same tools and languages you already use to generate pages.
...if we were the spread firefox
webmasters, we might simply reference the generator within the page itself by adding a <link rel="microsummary"> tag to its <head> element: <head> <link rel="microsummary" href="path/to/our/generator.xml"> </head> since we're not that site's
webmasters, however, we can specify the page to which the generator applies within the generator itself and then make the generator available for download a...
...And 2 more matches
Remotely debugging Firefox for Metro - Archive of obsolete content
connecting on the desktop on the desktop, open the
web developer menu and select "connect...".
... on the desktop next, the desktop shows you a dialog that looks something like this: this is asking whether you want to debug
web content running in a browser tab, or to debug the browser code itself.
... you'll see one entry under "available remote tabs" for each open tab, and clicking it will attach the debugging tools to the
web content hosted by that tab.
...And 2 more matches
Frequently Asked Questions - Archive of obsolete content
when you try to load svg files from some
websites you may get a dialogue asking you "what should firefox do with this file?".
... this is either because your browser doesn't support svg (you must have mozilla firefox 1.5 or newer), or because the
webpage/server isn't correctly telling mozilla that the file contains svg.
... for example,
webpages that embed svg using the <object> or <embed> tags must have a 'type' attribute assigned with the correct svg mime type of "image/svg+xml".
...And 2 more matches
The life of an HTML HTTP request - Archive of obsolete content
(1) the loading of the url is started in ns
webshell::doloadurl (called from some loadurl or loaduri variant in the
webshell).
... the
webshell then tells its documentloader to load (command "view") the specified url.
... [note: passes ns
webshell.mobserver as nsistreamobserver and the
webshell as nsicontentviewercontainer to the docloader.] (2) the document loader calls ns_openuri with the url to begin transfering the requested file.
...And 2 more matches
XML in Mozilla - Archive of obsolete content
several world wide
web consortium (w3c) recommendations and drafts from the xml family of specifications are supported, as well as other related technologies.
...dtds and other external entities mozilla does not load external entities from the
web.
... 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-rpc rdf w3c recommendations rdf svg w3c recommendation svg animation (smil) w3c recommendation mathml w3c recommendation mathml p3p (no longer supported) w3c recommendation...
...And 2 more matches
XTech 2006 Presentations - Archive of obsolete content
javascript 2 and the future of the
web - brendan eich javascript 2 will be finalised in 2007.
... layout algorithm improvements for
web user interfaces (slides, slides as one page) - david baron a discussion of problems with existing standards and potential improvements in two areas: layout systems for user interfaces (rather than documents) and mechanisms for reordering content to allow the author to use good markup and appropriate layout.
... microsummaries in firefox and on the
web - myk melez microsummaries are regularly-updated compilations of the most important and timely information on
web pages.
...And 2 more matches
The Implementation of the Application Object Model - Archive of obsolete content
rdf can suck up data from different places (like your bookmarks and history or another
web site), and it can combine them.
...because the file lives remotely, it can be updated whenever the owner of the
web site sees fit.
...it makes sense to maintain a clean separation between the
web application and the
web documents that the application contains.
...And 2 more matches
iframe - Archive of obsolete content
when used in this case, please see displaying
web content in an extension without security issues.
... 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.getelementbyid('...
...for instance, in a
web browser, this would be the element that displays the
web page.
...And 2 more matches
Plugins - Archive of obsolete content
mozilla encourages
website developers to avoid using plugins wherever possible and use standard
web apis instead.
... if there are plugin features which are not available in the
web platform, we encourage developers to post their use cases to mozilla.dev.platform project list, so that mozilla can prioritize
web platform work to make those use cases possible.
...for example, the adobe reader plugin lets the user open pdf files directly inside the browser, and the quicktime and realplayer plugins are used to play special format videos in a
web page.
...And 2 more matches
Confidentiality, Integrity, and Availability - Archive of obsolete content
if your bank records are posted on a public
website, everyone can know your bank account number, balance, etc., and that information can't be erased from their minds, papers, computers, and other places.
...imagine that you have a
website and you sell products on that site.
... now imagine that an attacker can shop on your
web site and maliciously alter the prices of your products, so that they can buy anything for whatever price they choose.
...And 2 more matches
Threats - Archive of obsolete content
website malware is a growing problem.
... business needs have changed the way
websites store sensistive data, with more usage of cloud services.
... but hackers may make out money, data and confidential information from your
website by infecting
website with malware.
...And 2 more matches
Building a Theme - Archive of obsolete content
you can use this to inspect any element in a
web page or an xul document, which makes it invaluable for themes.
... pick the first document with a
web page title, like "firefox start page" and select it.
...compare (chrome) to (http) which tells firefox to treat the uri as a
web page.
...And 2 more matches
References - Archive of obsolete content
<- previous section: summary of changes you can learn more on using
web standards from these sites (listed in no particular order): what are
web standards and why should i use them?
... what are the advantages of using
web standards?
... from
web standards project
web standards group from
web standards group
web page development: best practices from apple developer connection mozilla
web author faq from henri sivonen making your
web page compatible with mozilla from nicolás lichtmaier complete css guide from westciv.com css lessons and tutorials from alsacreations html and css lessons and tutorials from htmldog.com preparing for standard-compliant browsers, part 1 from makiko itoh preparing for standard-compliant browsers, part 2 from makiko itoh javascript best practices lists 15 of the most frequent coding practices which create problems for javascript and dhtml-driven
webpages.
...And 2 more matches
Server-Side JavaScript - Archive of obsolete content
here's a radical idea: use one language to write entire
web apps -- the same language which billions of
web pages already use, every day.
... sounds obvious, but for at least the first twelve years of the
web's evolution, developers have pretty much had to use different languages on the server from those available in the browser, leading to segregated teams, disparate and inconsistent know-how, and plenty of server-side string manipulation gymnastics to generate html or ajax pages.
...but back then, 350 mhz servers were the best you could buy, and mozilla was yet to emerge from the netscape organization to continue to advance the state of
web technologies.
...And 2 more matches
RDF in Fifty Words or Less - Archive of obsolete content
first, rdf is a graph-based model for describing internetresources (like
web pages and email messages), and how these resources relate to one another.
...right now, most
web browsers let you organize your bookmarks hierarchically intofolders.
... each bookmark is apointer to a
web page called a uri (uniform resource identifier).
...And 2 more matches
GLSL Shaders - Game development
note: remember that you don't have to use three.js or any other library to write your shaders — pure
webgl (
web graphics library) is more than enough.
...three.js and other 3d libraries abstract a lot of things for you — if you wanted to create such an example in raw
webgl, you'd have to write a lot of extra code to actually make it work.
... environment setup to start with the
webgl shaders you don't need much.
...And 2 more matches
Accessibility and Mozilla
however, many of the concepts were also used during the development of firevox, an at using iaccessible2.accessible toolkit checklistplease contact the mozilla accessibility community with questions or feedback.csun firefox materialsfirefox 1.5 is a fast, free, standards compliant
web browser which is rapidly gaining recognition for its fresh, streamlined approach to browsing the
web.
... in addition to winning major awards such as pc world product of the year, firefox has attracted a huge following among savvy users who simply care enough about their
web browsing experience to download a new piece of software.
...
websites such as online magazines with sophisticated audiences are now reporting upwards of 25% firefox usage.embedding api for accessibilityevent process procedurethis diagram outlines how events are processed within gecko.
...And 2 more matches
Debugging JavaScript
this document is intended to help developers writing javascript code in mozilla, mainly for mozilla itself, but it may also be useful for
web developers.
...
web console this is the first place to go when you're debugging a
web page; open the
web console using the
web console option in the
web developer menu.
...activate it through with the menu tools >
web developer > browser console.
...And 2 more matches
Message manager overview
these processes run
web content.
...if chrome code wants to run code in the content process so it can access
web content, this is usually the sort of message manager to use.
... frame message managers in multiprocess firefox, when chrome code needs to interact with
web content, it needs to: factor the code that needs direct access to content into separate scripts, which are called "frame scripts" use a frame message manager to load these frame scripts into the content process use the frame message manager api to communicate with the frame script some older articles on multiprocess firefox and the message manager might refer to "content scripts" instead ...
...And 2 more matches
Message manager overview
in the initial version of multiprocess firefox there are two processes: the chrome process, also called the parent process, runs the browser ui (chrome) code and code inserted by extensions the content processes, also called the child processes, run all
web content.
...if chrome code wants to run code in the content process so it can access
web content, this is usually the sort of message manager to use.
... frame message managers in multiprocess firefox, when chrome code needs to interact with
web content, it needs to: factor the code that needs direct access to content into separate scripts, which are called "frame scripts" use a frame message manager to load these frame scripts into the content process use the frame message manager api to communicate with the frame script some older articles on multiprocess firefox and the message manager might refer to "content scripts" instead ...
...And 2 more matches
Roll your own browser: An embedding how-to
it should include all of the base support that you need to get a
web browser started up.
...uses gtkmozembed widget, part of the kdebindings module and available from http://
websvn.kde.org/trunk/kde/kdebindings/xparts/.
...(screenshot) marbrow : mac port of x2
web (ja, ko) embedding mozilla.
...And 2 more matches
Extending a Protocol
the tutorial is designed for browser engineers who are implementing dom/
web apis that need to, for example, send a message to the os or spin up something off the main thread - so it's biased towards supporting w3c/whatwg dom apis.
... the
webidl for this will be: partial interface navigator { promise<domstring> echo(domstring somestring); }; learning goals are: extending an existing ipdl protocol.
... visually, it's going to look something like this (except for the operating system bit, which we are not actually going to do - just to illustrate what we could do): let's start by implementing the
webidl above.
...And 2 more matches
Internationalized Domain Names (IDN) Support in Mozilla Browsers
this ip address is then used to connect to the
web server in question.
... idn allows host/domain names with non-ascii characters for user input into a browser's location bar or url's embedded in
web pages.
...if end users input non-ascii characters as part of a domain name or if a
web page contains a link using a non-ascii domain name, the application must convert such input into a special encoded format using only the usual ascii subset characters.
...And 2 more matches
Mozilla Development Tools
it is our home-grown
web-based tool for watching the up-to-the-minute goings-on in our cvs repository (viewing checkins and log messages, reading diffs, etc.) tinderbox tinderbox is for knowing when the tree is in flames.
... it is our home-grown
web-based tool for watching the progress of the continuous builds that we run on multiple platforms.
... doctor doctor is a
web interface to cvs.
...And 2 more matches
Profiling with the Firefox Profiler
in addition to profiler.firefox.com, the firefox devtools have a simplified interface targeted towards
web developers, but does not include as much information as the firefox profiler
web app.
... it is available from the menu at tools >
web developer > performance.
... tip: threads that are annotated with "[default]" are in the parent (aka "ui", aka "browser chrome", aka "main") process and those annotated with "[tab]" are in the
web content (aka "child") processes.
...And 2 more matches
Mozilla Projects
generated from c/c++ using clang, or from another language) and compiles that into javascript, which can be run on the
web.
...
web replay
web replay allows firefox content processes to record their behavior, replay it later, and rewind to earlier states.
...
webreplayroadmap this document describes existing, planned, and potential features for the firefox developer tools that are based on
web replay, along with their ui.
...And 2 more matches
Observer Notifications
web-workers-shutdown called inside xpcom-shutdown.
... this shuts down all
web workers.
... content-document-global-created nsidomwindow origin sent immediately after a
web content document window has been set up, but before any script code has been executed.
...And 2 more matches
nsIProtocolHandler
uri_loadable_by_anyone 1<<6 anyone can load the uris for this protocol; for example, any
web site can load a uri for this protocol.
...
web-safe protocols such as http should use this flag.
... uri_dangerous_to_load 1<<7 uris using this protocol are unsafe if loaded by untrusted
web content and may only be loaded by privileged code (for example, code that has the system principal).
...And 2 more matches
nsITextInputProcessor
however, if the event is consumed by
web content, it returns false.
... return value if this couldn't insert the string when there is no composition (e.g., compositionstart is consumed by the
web contents), it returns false.
... return value when there is no composition which was created by the instance and if compositionstart is consumed by
web contents, i.e., failed to start new composition, this returns false.
...And 2 more matches
XPIDL
xpidl is expected to converge towards
webidl in the future.
...
webidl interfaces are also valid xpidl types.
... to declare a
webidl interface in xpidl, write
webidl interfacename;.
...And 2 more matches
DevTools API - Firefox Developer Tools
a target is usually a
web page (a tab), but can be other things (a chrome window, a remote tab,…).
... let def = { id: "my-tool", label: "my tool", icon: "chrome://browser/skin/devtools/tool-
webconsole.svg", url: "about:blank", istargetsupported: target => true, build: (window, toolbox) => new mytoolpanel(window, toolbox) }; // register it.
...for example, in the
web console, there are 2 views (network view and object view).
...And 2 more matches
Edit fonts - Firefox Developer Tools
the list is useful because you can easily determine whether a font is a
web font or a font hosted on your system.
... the url to the font file in the case of
web fonts not available on your system, or "system" in the case of fonts loaded from your computer (either default system fonts, or
web fonts that you've also got installed on your system).
... the @font-face descriptor that loads the font into the page, in the case of
web fonts.
...And 2 more matches
about:debugging - Firefox Developer Tools
in the tools >
web developer menu, click remote debugging.
... extensions loading a temporary extension with the load temporary add-on button you can temporarily load a
web extension from a directory on disk.
... note: it's recommended that you use the browser toolbox, not the add-on debugger, for debugging
webextensions.
...And 2 more matches
WAI-ARIA Roles - Accessibility
this role should only be used to define very dynamic and desktop-like
web applications.aria: article rolethe article role indicates a section of a page that could easily stand on its own on a page, in a document, or on a
website.
...if possible, use the html <aside> element instead.aria: contentinfo rolethe contentinfo landmark role is used to identify information repeated at the end of every page of a
website, including copyright information, navigation links, and privacy statements.
... this section is commonly called a footer.aria: dialog rolethe dialog role is used to mark up an html based application dialog or window that separates content or ui from the rest of the
web application or page.
...And 2 more matches
Understandable - Accessibility
this article provides practical advice on how to write your
web content so that it conforms to the success criteria outlined in the understandable principle of the
web content accessibility guidelines (wcag) 2.0 and 2.1.
... success criteria how to conform to the criteria practical resource 3.1.1 language of page (a) the default human language of each
web page should be detectable via code.
... guideline 3.2 — predictable: make
web pages appear and operate in predictable ways this guideline focuses on making user interfaces intuitive and understandable.
...And 2 more matches
@supports - CSS: Cascading Style Sheets
the following are both equivalent: @supports (transform-style: preserve) or (-moz-transform-style: preserve) or (-o-transform-style: preserve) or (-
webkit-transform-style: preserve) {} @supports (transform-style: preserve-3d) or ((-moz-transform-style: preserve-3d) or ((-o-transform-style: preserve-3d) or (-
webkit-transform-style: preserve-3d))) {} note: when using both and and or operators, the parentheses must be used to define the order in which they apply.
...='<attr-modifier> = i | s examples testing for the support of a given css property @supports (animation-name: test) { … /* css applied when animations are supported without a prefix */ @keyframes { /* other at-rules can be nested inside */ … } } testing for the support of a given css property or a prefixed version @supports ((perspective: 10px) or (-moz-perspective: 10px) or (-
webkit-perspective: 10px) or (-ms-perspective: 10px) or (-o-perspective: 10px)) { … /* css applied when 3d transforms, prefixed or not, are supported */ } testing for the non-support of a specific css property @supports not ((text-align-last: justify) or (-moz-text-align-last: justify)) { … /* css to provide fallback alternative for text-align-last: justify */ } testing for the s...
... desktopmobilechromeedgefirefoxinternet exploreroperasafariandroid
webviewchrome for androidfirefox for androidopera for androidsafari on iossamsung internet@supportschrome full support 28edge full support 12firefox full support 22 full support 22 no support 17 �...
...And 2 more matches
Backwards Compatibility of Flexbox - CSS: Cascading Style Sheets
flexbox was implemented in an experimental way in several
web browsers.
...the idea of these prefixes was to allow implementations of the spec to be tested and explored by browser engineers and
web developers alike without clashing with other implementations.
... uc browser, which still supports the 2009 display: box version only with the -
webkit- prefix.
...And 2 more matches
Introducing the CSS Cascade - CSS: Cascading Style Sheets
this article explains what the cascade is, the order in which css declarations cascade, and how this affects you, the
web developer.
...to simplify the development process,
web developers often use a css reset style sheet, forcing common properties values to a known state before beginning to make alterations to suit their specific needs.
...these are style sheets that define styles as part of the design of a given
web page or site.
...And 2 more matches
box-flex - CSS: Cascading Style Sheets
it does not match either the old css flexible box layout module drafts for 'box-flex' (which were based on this property) or the behavior of '-
webkit-box-flex' (which is based on those drafts).
... the -moz-box-flex and -
webkit-box-flex css properties specify how a -moz-box or -
webkit-box grows to fill the box that contains it, in the direction of the containing box's layout.
... /* <number> values */ -moz-box-flex: 0; -moz-box-flex: 2; -moz-box-flex: 3.5; -
webkit-box-flex: 0; -
webkit-box-flex: 2; -
webkit-box-flex: 3.5; /* global values */ -moz-box-flex: inherit; -moz-box-flex: initial; -moz-box-flex: unset; -
webkit-box-flex: inherit; -
webkit-box-flex: initial; -
webkit-box-flex: unset; syntax the box-flex property is specified as a <number>.
...And 2 more matches
column-count - CSS: Cascading Style Sheets
desktopmobilechromeedgefirefoxinternet exploreroperasafariandroid
webviewchrome for androidfirefox for androidopera for androidsafari on iossamsung internetcolumn-countchrome full support 50 full support 50 full support 1prefixed prefixed implemented with the vendor prefix: -
webkit-edge full support ...
... 12 full support 12 full support 12prefixed prefixed implemented with the vendor prefix: -
webkit-firefox full support 52 full support 52 no support 1.5 — 74prefixed notes prefixed implemented with the vendor prefix: -moz-notes prior to version 37, multiple columns didn't work with display: table-caption elements.ie full support 10opera full support 11.1 full support 11.1 full support 15prefixed prefix...
...ed implemented with the vendor prefix: -
webkit-safari full support 9 full support 9 full support 3prefixed prefixed implemented with the vendor prefix: -
webkit-
webview android full support 50 full support 50 full support ≤37prefixed prefixed implemented with the vendor prefix: -
webkit-chrome android full support 50 full support 50 full support 18prefixed prefixed implemented with the vendor pr...
...And 2 more matches
image-set() - CSS: Cascading Style Sheets
desktopmobilechromeedgefirefoxinternet exploreroperasafariandroid
webviewchrome for androidfirefox for androidopera for androidsafari on iossamsung internetimage-set()chrome full support 21prefixed full support 21prefixed prefixed implemented with the vendor prefix: -
webkit-edge full support 79prefixed full support...
... 79prefixed prefixed implemented with the vendor prefix: -
webkit-firefox no support nonotes no support nonotes notes see bug 1107646.ie no support noopera full support 15prefixed full support 15prefixed prefixed implemented with the vendor prefix: -
webkit-safari partial support 6prefixed notes partial support 6prefixed notes prefixed implemented with the vendor prefix: -
webkit-notes support for url images only and x is the only supported resolution unit.
... see bug 160934.
webview android full support 4.4prefixed full support 4.4prefixed prefixed implemented with the vendor prefix: -
webkit-chrome android full support 25prefixed full support 25prefixed prefixed implemented with the vendor prefix: -
webkit-firefox android no support nonotes no support nonotes notes see bug 1107646.opera android full support 14prefixed full support 14prefixed prefixed implemented with the vendor prefix: -
webk...
...And 2 more matches
outline-color - CSS: Cascading Style Sheets
in order to meet current
web content accessibility guidelines (wcag), a ratio of 4.5:1 is required for text content and 3:1 for larger text such as headings.
...
webaim: color contrast checker mdn understanding wcag, guideline 1.4 explanations understanding success criterion 1.4.3 | w3c understanding wcag 2.0 formal definition initial valueinvert, for browsers supporting it, currentcolor for the otherapplies toall elementsinheritednocomputed valuefor the keyword invert, the computed value is invert.
... desktopmobilechromeedgefirefoxinternet exploreroperasafariandroid
webviewchrome for androidfirefox for androidopera for androidsafari on iossamsung internetoutline-colorchrome full support 1edge full support 12firefox full support 1.5 full support 1.5 no support ...
...And 2 more matches
<shape> - CSS: Cascading Style Sheets
desktopmobilechromeedgefirefoxinternet exploreroperasafariandroid
webviewchrome for androidfirefox for androidopera for androidsafari on iossamsung internet<shape> deprecatedchrome full support 1edge full support 12firefox full support 1ie full support 5.5opera full suppor...
...t 9.5safari full support 1.3
webview android full support 37chrome android full support 18firefox android full support 4opera android full support 14safari ios full support 1samsung internet android full support 1.0rect() deprecatedchrome full support 1edge full support 12firefox full support 1ie full suppor...
...for internet explorer 8 and later versions, only the standard comma-separated syntax is supported.opera full support 9.5safari full support 1.3
webview android full support 37chrome android full support 18firefox android full support 4opera android full support 14safari ios full support 1samsung internet android ...
...And 2 more matches
transform-origin - CSS: Cascading Style Sheets
[ [ <length-percentage> | left | center | right ] && [ <length-percentage> | top | center | bottom ] ] <length>?where <length-percentage> = <length> | <percentage> examples code sample transform: none; <div class="box1"> </div> .box1 { margin: 0.5em; width: 3em; height: 3em; border: solid 1px; background-color: palegreen; transform: none; -
webkit-transform: none; } transform: rotate(30deg); <div class="box2"> </div> .box2 { margin: 0.5em; width: 3em; height: 3em; border: solid 1px; background-color: palegreen; transform: rotate(30deg); -
webkit-transform: rotate(30deg); } transform: rotate(30deg); transform-origin: 0 0; <div ...
...class="box3"> </div> .box3 { margin: 0.5em; width: 3em; height: 3em; border: solid 1px; background-color: palegreen; transform-origin: 0 0; -
webkit-transform-origin: 0 0; transform: rotate(30deg); -
webkit-transform: rotate(30deg); } transform: rotate(30deg); transform-origin: 100% 100%; <div class="box4"> </div> .box4 { margin: 0.5em; width: 3em; height: 3em; border: solid 1px; background-color: palegreen; transform-origin: 100% 100%; -
webkit-transform-origin: 100% 100%; transform: rotate(30deg); -
webkit-transform: rotate(30deg); } transform: rotate(30deg); transform-origin: -1em -3em; <div class="box5"> </div> .box5 { margin: 0.5em; width: 3em; height:...
... 3em; border: solid 1px; background-color: palegreen; transform-origin: -1em -3em; -
webkit-transform-origin: -1em -3em; transform: rotate(30deg); -
webkit-transform: rotate(30deg); } transform: scale(1.7); <div class="box6"> </div> .box6 { margin: 0.5em; width: 3em; height: 3em; border: solid 1px; background-color: palegreen; transform: scale(1.7); -
webkit-transform: scale(1.7); } transform: scale(1.7); transform-origin: 0 0; <div class="box7"> </div> .box7 { margin: 0.5em; width: 3em; height: 3em; border: solid 1px; background-color: palegreen; transform: scale(1.7); -
webkit-transform: scale(1.7); transform-origin: 0 0; -
webkit-transform-origin: 0 0; } ...
...And 2 more matches
Allowing cross-origin use of images and canvas - HTML: Hypertext Markup Language
this protects users from having private data exposed by using images to pull information from remote
web sites without permission.
...implementing this requires configuring the server as well as writing code for the
web site itself.
...
web server configuration the first thing we need is a server that's configured to host images with the access-control-allow-origin header configured to permit cross-origin access to image files.
...And 2 more matches
Standard metadata names - HTML: Hypertext Markup Language
standard metadata names defined in the html specification the html specification defines the following set of standard metadata names: application-name: the name of the application running in the
web page.
... simple
web pages shouldn't define an application-name.
... values for the content of <meta name="viewport"> value possible subvalues description width a positive integer number, or the text device-width defines the pixel width of the viewport that you want the
web site to be rendered at.
...And 2 more matches
<source>: The Media or Image Source element - HTML: Hypertext Markup Language
for information about image formats supported by
web browsers and guidance on selecting appropriate formats to use, see our image file type and format guide on the
web.
... for details on the video and audio media types, you can use, see the guide to media types formats used on the
web.
...be sure to reference our guide to media types and formats on the
web for details on what media file formats you can use and how well they're supported by browsers.
...And 2 more matches
Microdata - HTML: Hypertext Markup Language
microdata is part of the whatwg html standard and is used to nest metadata within existing content on
web pages.
... search engines and
web crawlers can extract and process microdata from a
web page and use it to provide a richer browsing experience for users.
... search engines benefit greatly from direct access to this structured data because it allows search engines to understand the information on
web pages and provide more relevant results to users.
...And 2 more matches
Choosing between www and non-www URLs - HTTP
a recurring question among
website owners is whether to choose non-www or www urls.
... so, do i have to choose one or the other for my
web site?
...it will make your
website appear more consistent to your users and to search engines.
...And 2 more matches
Clear-Site-Data - HTTP
the clear-site-data header clears browsing data (cookies, storage, cache) associated with the requesting
website.
... it allows
web developers to have more control over the data stored locally by a browser for their origins.
...depending on the browser, this might also clear out things like pre-rendered pages, script caches,
webgl shader caches, or address bar suggestions.
...And 2 more matches
Getting started - SVG: Scalable Vector Graphics
svg files on the
web can be displayed directly in the browser or embedded in html files via several methods: if the html is xhtml and is delivered as type application/xhtml+xml, the svg can be directly embedded in the xml source.
...avoid gzip-compressed svg except when you are publishing to a
webserver that you know will serve it correctly (see below).
... a word on
webservers now that you have an idea of how to create basic svg files, the next stage is to upload them to a
webserver.
...And 2 more matches
indexed-db - Archive of obsolete content
usage scripts running in
web pages can access indexeddb via the window object.
... for example: window.indexeddb = window.indexeddb || window.
webkitindexeddb || window.mozindexeddb || window.msindexeddb; var request = window.indexeddb.open("mydatabase"); request.onerror = function(event) { console.log("failure"); }; request.onsuccess = function(event) { console.log("success"); }; because your main add-on code can't access the dom, you can't do this.
... the database created will be unique and private per add-on, and is not linked to any
website database.
... the module cannot be used to interact with a given
website database.
Low-Level APIs - Archive of obsolete content
content/loader provides one of the building blocks for those modules that use content scripts to interact with
web content, such as panel and page-mod.
... content/symbiont used by sdk modules that can load
web content and attach content scripts to it.
... content/worker used in the internal implementation of sdk modules which use content scripts to interact with
web content.
... remote/child enables an sdk module loaded into a child process to access
web content in the child process and communicate with modules in the main process.
Tutorials - Archive of obsolete content
interact with the browser open a
web page open a
web page in a new browser tab or window using the tabs module, and access its content.
... listen for page load use the tabs module to get notified when new
web pages are loaded, and access their content.
... modify
web pages modify
web pages based on url create filters for
web pages based on their url: whenever a
web page whose url matches the filter is loaded, execute a specified script in it.
... modify the active
web page dynamically load a script into the currently active
web page.
Appendix: What you should know about open-source software licenses - Archive of obsolete content
netscape created it for its open-source
web browser.
...for example, if you are using an modified version of linux as the operating system for a
web server, it’s fine if you don’t release it.
... insert the license declaration in the top of every file in your source code; include the full text of the license in your source-code archive; place the source code on a
website or otherwise make it accessible; tell all your friends.
... the firefox
web browser, developed by the mozilla foundation, does not permit modifications of its name or trademarked icon.
Chapter 5: Let's build a Firefox extension - Archive of obsolete content
install extensions for firefox from the mozilla add-ons
website.
...for example, in the firefox browser window, everything other than the
web page being displayed in the content area is chrome.
...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> <e...
...download the files icon.png and icon-small.png from the resources
website and place them appropriately.
Connecting to Remote Content - Archive of obsolete content
it is an integral part of the modern
web, and all major browsers support it.
...xpath can also be used to extract information from
web pages once they load, along with the page load interception techniques discussed previously.
...you can discover some interesting things about firefox like this, such as the automatic update urls for extensions, and the behavior of
web applications such as gmail.
...this can be a lot of work because there is a lot of
web activity in a normal firefox window, so use it sparingly.
Add-ons - Archive of obsolete content
you can use various standard
web technologies: javascript, html, and css, to create the add-ons.
... firefox addons developer guide the original document is in japanese and distributed via the xuldev.org
website.
... so there may be still some reference to the xuldev
website (we want to host source code on mdc, not on xuldev), and to japanese things (like some specific locales, which have been translated to french since non-latin characters are not well supported).
... interaction between privileged and non-privileged pages an easy way to send data from a
web page to an extension is by using custom dom events.
JXON - Archive of obsolete content
there are no real standards for this conversion, but some conventions begin to appear on the
web.
... there are some cases in which the whole content of an xml document must be read from the javascript interpreter (like for
web-apps languages or settings xml documents, for example).
... note: on october 29th, 2013, the world wide
web consortium relased in a note on official algorithm for converting html5 microdata to json.
... resources the parker convention the badgerfish convention jxon: an architecture for schema and annotation driven json/xml bidirectional transformations converting html to other formats: json (the world wide
web consortium) jxon – a simple way to keep xml out of your life – dino gambone's blog
web reflection: jxon – lossless javascript to xml object notation convertion convert xml to json with javascript – david walsh blog http://goessner.net/download/prj/jsonxml/ – just another json2xml and xml2json conversion tool serialize javascript objects to xml (for use with ajax) – tawani's blog ...
List of Former Mozilla-Based Applications - Archive of obsolete content
applications that switched to another technology name description additional information angelsoft tools for startups, vcs, and angel investors switched from xulrunner-based client to a
web application autodesk maya 3d modeling tool switched off of gecko for help browser in version 8.5 blam feed reader switched to
webkit in version 1.8.6 boxee media center software switched to
webkit in version 1.0 epiphany browser switched from gecko to
webkit flock social browsing flock switched from being firefox-based to ...
...chromium-based when it released a new beta on june 16, 2010 jolicloud
web operating system as of march 2010, rw/w reports jolicloud is on chrome/chrome os joost tv over internet switched from xulrunner-based client to a
web application liferea news aggregator switched to
webkit in version 1.6 manyone browser browser originally mozilla-based but now i believe the have a
web-based tool (need reference for that) miro (formerly democracy player) video switched from xulrunner to
webkit in version 3.0.2 moblin browser browser when moblin became meego it switched from a custom gecko-based browser to chrome nautilus file manager hasn't used mozilla code since version 2.0 raptr client g...
...aming client was a xulrunner app initially but now uses adobe air rift technologies software installation over internet no longer using mozilla technology -- need confirmation and details second life virtual world desktop client switched from embedded mozilla browser to a plugin architecture with a qt
webkit plugin applications that are no longer being developed name description additional information aphrodite browser inactive aol client for mac internet software no longer available beonex communicator internet software last news item on site from 2004 chameleon theme builder inactive civil netizen p2p file delivery (email attachment replacement) site not updated ...
...orland embedded mozilla in kylix 2 mango im client last news item on site from january 2007 mobidvd dvd/vcd/cd ripping software site down mozilla suite internet application suite development shifted to firefox, thunderbird and seamonkey applications netscape navigator browser support for netscape ended on february 1, 2008 nvu
web authoring tool development stopped in 2005 and is being continued as an unofficial bugfix release by the kompozer project pogo browser from at&t site no longer accessible as of may 2009 pyro desktop desktop environment last news item on site from july 2007 script editor editor inactive skipstone gtk+ browser last news item on site fro...
Using XML Data Islands in Mozilla - Archive of obsolete content
internet explorer had an "xml data islands" feature that allows
web authors include xml data inline in html documents using the <xml> tag.
... this feature is not based on multi-vendor
web standards and is not supported in firefox (or other non-ie browsers).
...eitem> </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 tree using the domparser api: var parser = new domparser(); var doc = parser.parsefromstring(ordersource, "application/xml"); the html5 data block-based way shown here works in firefox, opera,
webkit-based browsers such as chrome and safari, and ie9 while ie's xml data islands work only in ie.
...the price of the first line item is " + firstprice + "."; } </script> </head> <body onload="rundemo()";> demo did not run </body> </html> the xml source text can be parsed into a dom tree using the domparser api: var parser = new domparser(); var doc = parser.parsefromstring(ordersource, "application/xml"); the html5 data block-based way shown here works in firefox, opera,
webkit-based browsers such as chrome and safari, and ie9 while ie's xml data islands work only in ie.
Editor Embedding Guide - Archive of obsolete content
in the beginning there is makeeditable given an nsi
webbrowser instance, get an nsidomwindow from the getcontentdomwindow call.
... then simply call nsi
webbrowser->do_getinterface on the nsi
webbrowser to retrieve the nsieditingsession from it.
...nscomptr<nsieditingsession> editingsession; nsi
webbrowser->do_getinterface(getter_addrefs(editingsession)); if (editingsession) editingsession->makewindoweditable(domwindow, "html", pr_true); the valid editor types are: "text" (similar to notepad or a textarea; does not allow for html) "textmail" (similar to "text" but html can be inserted; intended for plaintext mail usage and handling of citations) "html" (this is the default type if no t...
...get the nsicommandmanager from the nsi
webbrowser using do_getinterface: nscomptr<nsicommandmanager> commandmanager; nsi
webbrowser->do_getinterface(getter_addrefs(commandmgr)); 2.
Microsummary XML grammar reference - Archive of obsolete content
a microsummary generator is an xml document that describes how to pull specific information from a
web page to be presented in summary form as a bookmark whose title changes based on the content of the page it targets.
...generators installed from the
web via nssidebar::addmicrosummarygenerator are identified by the remote url from which they were downloaded, and firefox ignores the value of this attribute for them.
... the <template> element the <template> element contains the xslt stylesheet which transforms
web pages into their microsummaries.
...the following example identifies a generator as being able to summarize all pages on the www.example.com
web site except pages named about.html: <pages> <include> ^http://www\.example\.com/ </include> <exclude>/about\.html</exclude> </pages> note: regular expressions intended to match the beginnings of page urls should start with the caret (^) to ensure they do not inadvertently match urls which merely contain the urls they intend to match.
Installer - Archive of obsolete content
the installer should configure the os to associate *.
webapp files with prism.
... this means that when you double-click or launch a *.
webapp file, prism is launched and automatically opens the
web application.
... current windows and mac installs automatically associate *.
webapp with prism.
... one interesting side effect is that after this change, you can select a link to a .
webapp file in a
web page and you get it run by prism - in ie this runs anywhere, but this won't work in firefox unless the
webapp is being issued with an appropriate mime type on the server: application/x-
webapp works (see an example ).
SVG And Canvas In Mozilla - Archive of obsolete content
presentation view online download summary today's
web browsers offer somewhat limited graphics capabilities to
web developers.
...to realize this potential in
web applications, browsers must expose rich new graphics apis to
web content.
...this work provides additional benefits to
web developers such as the ability to apply svg effects to html content.
... questions and discussion rich
web: svg and canvas in mozilla - discussion ...
editor - Archive of obsolete content
xul applications loaded via a url from a
web server will not be able to access most of the features of the editor.
... attributes editortype, src, type properties accessibletype, commandmanager, contentdocument, contentwindow, docshell, editingsession, editortype,
webbrowserfind,
webnavigation methods geteditor, gethtmleditor, makeeditable examples this example shows how to made the editor editable by setting the designmode property of the loaded html document: <script language="javascript"> function initeditor(){ // this function is called to set up the editor var editor = document.getelementbyid("myeditor"); editor.contentdocument.designmode = 'on'; } </script> <editor id="myeditor" editortype="html" src="about:blank" flex="1" type="content-primary"/> once editable, the documen...
...
webbrowserfind type: nsi
webbrowserfind this read-only property contains an nsi
webbrowserfind object which can be used to search for text in the document.
...
webnavigation type: nsi
webnavigation this read-only property contains the nsi
webnavigation object for the document.
2006-12-01 - Archive of obsolete content
discussions firefox 2.0 should re-implement modal window.open to support
web 2.0 a plea to re-implement the option to show modal windows, using window.open(), from inside an untrusted script.
... basic feature that i think is a must in any
web broswer a discussion revolving around the idea of having firefox automatically convert mistaken non-english characters to english so that
web addresses will be completed.
... how do allow an internal
web site to have universalbrowserwrite?
... a question regarding having an internal
website use universalbrowserwrite on a local intranet.
NPAPI plugin developer guide - Archive of obsolete content
for example, the adobe flash plug-in is used to access flash content (including videos and certain interactive applications), and the quicktime and realplayer plugins are used to play special format videos in a
web page.
...mozilla encourages
website developers to avoid using plugins wherever possible.
... if there are plugin features which are not available in the
web platform, we encourage developers to post their use cases to mozilla.dev.platform project list, so that mozilla can prioritize
web platform work to make those use cases possible.
...to make your plugin scriptable from
web pages, use npruntime.
0.90 - Archive of obsolete content
it was created by netscape to be a metadata format providing a summary of a
website.
... 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/images/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 reorg...
...y/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 that here, rss is being used to list sections of the
web site.
... 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 ...
MSX Emulator (jsMSX) - Archive of obsolete content
since javascript currently is mostly an interpreted language in
web browsers, it is at least an order of magnitude slower than other languages such as c and java.
... therefore, jsmsx requires a very fast computer to emulate msx at the normal 50-60 interrupts per second inside a
web browser.
...the initial motivation was to find some interesting project to develop while exploring the possibilities of the <canvas> tag and javascript language in the most recent
web browsers like firefox 2.
...jsmsx can also be used to tightly integrate existing msx programs in
web page logic.
Standards-Compliant Authoring Tools - Archive of obsolete content
creating cross-browser code upfront will save you lots of time quality testing your
web content.
... html-kit is a full-featured, low priced editor designed to help html, xhtml and xml authors to edit, format, lookup help, validate, preview and publish
web pages.
...newer versions of microsoft frontpage™ have improved, however be sure not to rely on frontpage-specific extensions for critical
website content or functionality.
...always be sure to validate your
web pages.
Accessibility/LiveRegionDevGuide
event types the table for
web page mutation event types lists the two major event types associated with live regions, namely text-changed and object changed events.
... filtering events text changed events certain
web page mutation events, such as adding to a list, trigger both an object changed and a text changed event.
...however, many
web sites do not have proper aria markup so this cannot be used by itself.
...it was originally intended to give
web developers a means to force a live region message to go to a separate output device.
Creating a Firefox sidebar
web publishers can offer visitors a firefox sidebar to encourage their engagement.
...such kind of sidebar can be a simple
web panel or a full-featured extension that is completely integrated with the browser.
...a sample extension to add a
web panel is available as a starter.obsolete since gecko 57 if you'd like to have a deeper integration with the browser to offer more complex features, a traditional overlay extension can be an option.
...that means the ability to add a traditional sidebar panel is no longer available from
web content.
Performance best practices for Firefox front-end engineers
to repeat, only interruptible reflows in
web content can be interrupted.
...this feature is called “paint flashing,” and it can be activated for both
web content and the browser chrome.
... you can activate paint flashing for
web content by setting nglayout.debug.paint_flashing to true.
... indexeddb is preferable, as the api is asynchronous (all disk operations occur off of the main thread), and can be accessed from
web workers.
Site Identity Button
depending on the configuration of your
website, this button may display a number of different icons.
... if the site identity button on your site shows something you do not expect (for example, an orange warning triangle when you expect a green padlock) you can find out the cause of the problem by looking in the
web console in the firefox developer tools: ensure your
web console is displaying messages in the 'security' category force-refresh the page on your site that is causing problems watch for any security messages that may appear a downgraded security ui will be due to one of these three problems: mixed content - while your page has been served over tls, but subresources loaded for your page have not.
... in this case, expect to see a 'mixed content' message in the
web console.
... insecure renegotation - older versions of tls had a flaw in the basic design; if your server uses an affected version, the security ui will be downgraded but no
web console message will be displayed.
Gecko
gecko's function is to render
web content, such as html, css, xul, javascript, and render it on the user's screen or print it.
...products using the same version of gecko have identical support for
web standards.
... gecko event reference reference to events used within gecko and mozilla applications; for
web-standard dom events, see the dom event reference.
... view all… community view mozilla forums: mailing list newsgroup rss feed related topics
web standards xul embedding mozilla developing mozilla ...
FxAccountsOAuthClient.jsm
components.utils.import("resource://gre/modules/fxaccountsoauthclient.jsm"); creating a new fxaccountsoauthclient new fxaccountsoauthclient(object options); method overview launch
webflow(); teardown(); attributes parameters object returns the set of parameters that initialized the firefox accounts oauth flow.
...methods launch
webflow() opens a new tab at the firefox accounts oauth authorization url.
... registers a
webchannel listener and sets up a callback if needed.
...ing the fxaccountsoauthclient chrome code let parameters = { oauth_uri: oauth_server_endpoint, client_id: oauth_client_id, content_uri: content_server_url, state: oauth_state } let client = new fxaccountsoauthclient({ parameters: parameters }); client.oncomplete = function (tokendata) { // tokendata consists of two properties: "tokendata.state" and "tokendata.code" }; client.launch
webflow(); ...
Localization content best practices
example: this
web page at <span id='malware_sitename'/> has been reported as an attack page and has been blocked based on your security preferences.
... use ordered variables in string with multiple variables consider this string from /browser: generalsiteidentity=this
website is owned by %s\nthis has been verified by %s first thing: always add a localization comment explaining what these variables mean, even if it seems obvious.
... # localization note(generalsiteidentity): %1$s is the owner of the current
website, # %2$s is the name of the certification authority signing the certificate.
... generalsiteidentity=this
website is owned by %1$s\nthis has been verified by %2$s avoid concatenations, use placeholders instead consider this string: tos-text = by proceeding you accept the tos-link = terms of services most developers would consider this a good solution and display the concatenation of tos-text+tos-link, with an active link on the second part.
Setting up the infrastructure
first, make your project's file type decision (see localization formats for details): html/php .lang gettext (.po) assuming you chose gettext, you'll need to follow the steps below to set up the infrastructure for localizing your
web application.
... create a locale directory in your
website (usually something like docroot/locale).
... review the english content following the
web content localizability guidelines.
... review your code following the
web applications localizability guidelines.
powermetrics
780.19 330.52 0.00 kernel_task 0 109.97 0.00 0.20 0.00 779.47 330.35 0.00 launchd 1 18.88 2.44 0.00 0.00 0.40 0.20 0.00 com.apple.safari 488 90.60 108.58 56.48 26.65 com.apple.
webkit.
webcontent 84679 64.21 84.69 0.00 0.00 104.19 54.89 26.66 com.apple.
webkit.networking 84678 26.89 58.89 0.40 0.00 1.60 0.00 0.00 safari 84676 1.56 55.74 0.00 0.00 2.59 1.40 0.00 com.apple.safari.searchhelper 84690 0.15 49.49 0.00...
... 45.78 19.29 0.00 com.apple.windowserver 68 102.58 112.36 43.15 80.52 windowserver 141 103.03 58.19 60.48 6.40 112.36 43.15 80.53 com.apple.safari 499 267.19 110.53 46.05 1.69 com.apple.
webkit.
webcontent 67372 190.15 79.34 2.02 0.14 129.28 53.79 2.33 com.apple.
webkit.networking 67292 65.23 52.74 0.07 0.00 4.33 1.40 0.00 safari 67290 29.09 77.65 0.23 0.00 7.13 3.37 0.00 com.apple.safari.searchhelper 67371 13.88 91.18 0.00 ...
... 0.00 0.36 0.05 0.00 com.apple.
webkit.
webcontent 67297 0.81 56.84 0.10 0.00 2.20 1.30 0.00 com.apple.
webkit.
webcontent 67293 0.46 76.40 0.03 0.00 0.57 0.20 0.00 com.apple.
webkit.
webcontent 67295 0.24 67.72 0.00 0.00 0.90 0.37 0.00 com.apple.
webkit.
webcontent 67298 0.17 59.88 0.00 0.00 0.50 0.13 0.00 com.apple.
webkit.
webcontent 67296 0.07 43.51 0.00 0.00 0.10 0.03 0.00 kernel_coalition 1 111.76 724.80 213.09 0.12 kernel_task 0 107.06...
... 724.46 212.99 0.12 org.mozilla.firefox 498 92.17 212.69 75.67 1.81 firefox 63865 61.00 87.18 1.00 0.87 25.79 9.00 1.81 plugin-container 67269 31.49 72.46 1.80 0.00 186.90 66.68 0.00 com.apple.
webkit.plugin.64 67373 55.55 74.38 0.74 0.00 9.51 3.13 0.02 com.apple.terminal 109 6.22 0.40 0.23 0.00 terminal 208 6.25 92.99 0.00 0.00 0.33 0.20 0.00 the rapl output is first, then the powermetrics output.
Productization guide
the
web services that make up the productization of mozilla software are often specific to a local market.
...hence there is a need to customize the set of default
web services on a per-locale basis in order to ensure a good user experience across all locales.
... purpose of productization there are two main purposes of adding default
web services to mozilla products: provide users with useful and relevant content demonstrate certain features of the product the first one (provide users with useful and relevant content) is obvious: we want to improve our users’ experience on the
web, so we provide a couple of well-thought suggestions for different services.
...but we also suggest a few
web-based clients (like yahoo!
Notes on TLS - SSL 3.0 Intolerant Servers
cause there are some number of
web servers in production today which incorrectly implement the ssl 3.0 specification.
...) 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.
...
website administrators: how to avoid this problem?
... how to report an intolerant server optional:get the name of the ssl server software used by the
website.
Shumway
the whats and whys of shumway shumway is a renderer for adobe flash built entirely in
web standards (javascript,
webgl, and others).
...shumway is made with the same constraints as any
website.
... users who disable flash because of security or performance concerns can still see content through shumway because it cannot be forced to behave worse than javascript (and
webgl, etc.) allows.
...it can be run locally through a
web server or you can use the version hosted on mozilla's github.
JS::CompileOptions
the
web platform allows scripts to be loaded from arbitrary cross-origin sources.
... this allows an attack by which a malicious
website loads a sensitive file (say, a bank statement) cross-origin (using the user's cookies), and sniffs the generated syntax errors (via a window.onerror handler) for juicy morsels of its contents.
... in addition to above, the following are used in browser: "worker" - code loaded by calling the
web worker constructor—the worker's main script.
... "importscript" - code by calling importscripts in a
web worker.
An Overview of XPCOM
the brief sections in this chapter introduce the concepts at a very high level, so that we can discuss and use them with more familiarity in the tutorial itself, which describes the creation of a mozilla component called
weblock.
...the most important use of xpcom is within gecko, an open source, standards compliant, embeddable
web browser and toolkit for creating
web browsers and other applications.
...this simple macro declares a constant with the value of the cid: static ns_define_cid(k
webshellcid, ns_
web_shell_cid); a cid is sometimes also referred to as a class identifier.
...the section defining the
weblock interface in xpidl describes the xpidl syntax in detail.
Component Internals
read on to see how components are generally implemented in xpcom, or you can skip to the next chapter, where the
weblock component tutorial takes you step by step through the component creation process.
...a
web browser that embeds gecko, for example, may initialize xpcom at startup through the embedding apis.
...the nsiobserver interface that handles this notification is discussed in starting
weblock.
...
weblock restricts itself to using the simple nsembedstring family of classes.
Setting up the Gecko SDK
« previousnext » this chapter provides basic setup information for the gecko software development kit (sdk) used to build the
weblock component in this tutorial.
... the following four sections tell the developer how to download and organize the gecko sdk and create a new project in which components like
weblock can be created.
...the
weblock component was built with version 1.4a, which is no longer available.
... the
weblock component needs to link against the appropriate libraries to uses xpcom glue.
Components object
do not use it on production sites facing the
web: it will not work for every user.
...exposing the object to regular
web code was a mistake.
... if you use this object on your
web page, your site might break at any time!
...some properties of components require advanced privileges and may not work in
web pages.
nsIContentPrefObserver
void oncontentprefremoved( in astring agroup, in astring aname ); parameters agroup the group to which the removed preference belonged; this may be the uri of a
web site.
... this value is null if the preference was global, applying to all
web sites.
... void oncontentprefset( in astring agroup, in astring aname, in nsivariant avalue ); parameters agroup the group to which the preference belongs; this may be the uri of a
web site.
... this value is null if the preference is global, applying to all
web sites.
nsIDOMParser
note: if you're a
web developer, please refer to the domparser documentation instead.
... creating a domparser to create a domparser object from a
web page or a chrome script running in a window, simply use new domparser().
...(this section is only relevant to firefox extensions--not to
web content.) to create a document, the parser needs to specify a principal (see security check basics), a base uri (see document.baseuriobject), and a documenturi.
... parsing a string once you've created a domparser object, you can use its parsefromstring method to parse xml or html as described in the
web platform documentation.
nsIDocumentLoader
it is also responsible for sending nsi
webprogresslistener notifications.
... components.classes["@mozilla.org/docloaderservice;1"] .createinstance(components.interfaces.nsidocumentloader); method overview void clearparentdocloader(); obsolete since gecko 1.8 void createdocumentloader(out nsidocumentloader aninstance); obsolete since gecko 1.8 void destroy(); obsolete since gecko 1.8 void fireonlocationchange(in nsi
webprogress a
webprogress, in nsirequest arequest, in nsiuri auri); obsolete since gecko 1.8 void fireonstatuschange(in nsi
webprogress a
webprogress, in nsirequest arequest, in nsresult astatus, in wstring amessage); obsolete since gecko 1.8 void getcontentviewercontainer(in nsisupports adocumentid, out nsicontentviewercontainer aresult); native code only!
... fireonlocationchange() obsolete since gecko 1.8 (firefox 1.5 / thunderbird 1.5 / seamonkey 1.0) void fireonlocationchange( in nsi
webprogress a
webprogress, in nsirequest arequest, in nsiuri auri ); parameters a
webprogress arequest auri fireonstatuschange() obsolete since gecko 1.8 (firefox 1.5 / thunderbird 1.5 / seamonkey 1.0) void fireonstatuschange( in nsi
webprogress a
webprogress, in nsirequest arequest, in nsresult astatus, in wstring amessage ); parame...
...ters a
webprogress arequest astatus amessage native code only!getcontentviewercontainer obsolete since gecko 1.8 (firefox 1.5 / thunderbird 1.5 / seamonkey 1.0)this feature is obsolete.
nsIFaviconService
for pages where we don't have a favicon, this will be a chrome uri of the default icon for a
web page.
...for pages where we don't have a favicon, this will be a chrome uri of the default icon for a
web page.
...however, any favicons not associated with a visited
web page, bookmark, or "place:" uri will be expired when history cleanup is done.
...however, any favicons not associated with a visited
web page, a bookmark, or a "place:" uri will be expired when history cleanup is done * (typically at app shutdown, but also possibly if the user clears their * cache or history).
nsIWindowCreator
inherits from: nsisupports last changed in gecko 0.9.6 method overview nsi
webbrowserchrome createchromewindow(in nsi
webbrowserchrome parent, in pruint32 chromeflags); methods createchromewindow() create a new window.
...nsi
webbrowserchrome createchromewindow( in nsi
webbrowserchrome parent, in pruint32 chromeflags ); parameters parent the nsi
webbrowserchrome of the parent window, if any.
...chromeflags chrome features from nsi
webbrowserchrome.
... return value an nsi
webbrowserchrome for the new window.
nsIWindowWatcher
method overview nsi
webbrowserchrome getchromeforwindow(in nsidomwindow awindow); nsiauthprompt getnewauthprompter(in nsidomwindow aparent); nsiprompt getnewprompter(in nsidomwindow aparent); nsidomwindow getwindowbyname(in wstring atargetname, in nsidomwindow acurrentwindow); nsisimpleenumerator getwindowenumerator(); nsidomwindow openwindow(in nsidomwindow aparent, in strin...
... nsi
webbrowserchrome getchromeforwindow( in nsidomwindow awindow ); parameters awindow the nsidomwindow whose chrome window the caller needs.
... return value an nsi
webbrowserchrome object for the corresponding chrome window getnewauthprompter() return a newly created nsiauthprompt implementation.
...if it is impossible to get to an nsi
webbrowserchrome from aparent, this method will effectively act as if aparent were null.
XPCOM Interface Reference by grouping
xultemplatebuilder nsixultemplatequeryprocessor nsixultemplateresult bookmark livemark nsilivemarkservice nsinavbookmarkobserver nsinavbookmarksservice nsinavhistoryservice browser dom nsi
webbrowser nsi
webbrowserpersist cache nsicache nsicachedeviceinfo nsicacheentrydescriptor nsicacheentryinfo nsicachelistener nsicachemetadatavisitor nsicacheservice nsicachesession nsicachevisitor nsicachingchannel nsiselectionimageservice chrome ...
... nsisearchengine nsisearchsubmission nsi
webbrowserchrome nsiwindowcreator nsiwindowmediator nsiwindowwatcher clipboard nsiclipboard nsiclipboardcommands nsiclipboarddragdrophooklist nsiclipboarddragdrophooks nsiclipboardhelper nsiclipboardowner core action nsitransactionmanager process nsiprocess nsiprocess2 thread nsithread nsithreadeventfilter nsithreadinternal nsithreadmanager nsithreadobserver nsithreadpool nsithreadpoollistener n...
...nager geolocation nsigeolocationprovider nsigeolocationupdate orientation nsiacceleration nsiaccelerationlistener nsiaccelerometer misc nsisound nsiwifimonitor document nsi
webnavigation environment nsienvironment event nsieventlistenerinfo nsieventlistenerservice nsieventtarget exception nsiexception extention nsiextensionmanager nsiinstalllocation external nsiexternalprotocolservice frame ...
...r nsitimer nsitimercallback ui windows nsitaskbarpreview nsitaskbarpreviewbutton nsitaskbarpreviewcontroller nsitaskbarprogress nsitaskbartabpreview nsitaskbarwindowpreview nsiwintaskbar nsialertsservice nsi
webprogress nsi
webprogresslistener nsi
webprogresslistener2 update nsiupdate nsiupdatechecker nsiupdatechecklistener nsiupdateitem nsiupdatemanager nsiupdatepatch nsiupdateprompt nsiupdatetimermanager nsiprogramminglanguage thunderbird credentials nsimsg...
Color vision simulation - Firefox Developer Tools
the simulator in the accessibility inspector in firefox developer tools lets you see what a
web page would look like to users with various forms of color vision deficiency (better known as "color blindness"), as well as contrast sensitivity loss.
... to enable this feature, you must have
webrender enabled; it may be enabled by default, depending on your configuration of firefox.
... in the firefox configuration editor, make sure the gfx.
webrender.all option is set to true.
...however, they can give you a sense of what your
web site looks like to users with vision problems, and therefore help you judge whether you need to make adjustments in your color or contrast choices.
DOM Inspector - Firefox Developer Tools
the dom inspector (also known as domi) is a developer tool used to inspect, browse, and edit the document object model of documents - usually
web pages or xul windows.
... getting dom inspector firefox & thunderbird you may download and install the dom inspector from the amo
web site.
...or, build thunderbird yourself with the following options: ac_add_options --enable-extensions="default inspector" ac_add_options --enable-inspector-apis mozilla suite and seamonkey select tools >
web development > dom inspector.
... you can install the sidebar panel via edit > preferences > advanced > dom inspector, then simply open up the inspector panel and visit a
website.
Source map errors - Firefox Developer Tools
general source map error reporting if you do see a problem, a message will appear in the
webconsole.
...the message looks a little different in this case: in this case, the error will also be displayed in the source tab in the debugger: networkerror when attempting to fetch resource a bug in firefox prevents it from loading source maps for
web extensions.
... see bug 1437937:
webextensions doesn't find source maps for details.
... 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.
Network request list - Firefox Developer Tools
note: (starting in firefox 80) you can also block and unblock urls from the
web console, using the :block and :unblock helper commands.
... filtering requests you can filter requests by content type, by whether they are xmlhttprequests or
websocket requests, or by request properties.
...
websocket connections use the ws button in the toolbar.
... the third-party add-on
websocket sniffer may be helpful as well.
Work with animations - Firefox Developer Tools
it displays animations created using css transitions, css @keyframes rules, or the
web animations api.
... these animations are made using the
web animations api.
...the bar is: blue if a transition was used to animate a property orange if a @keyframes animation was used green if the
web animations api was used the bar contains a lightning bolt icon if the property was animated using the compositor thread (see more about the cost of animating different css properties).
... if you hover over the bar, a tooltip appears, giving you more detailed information about the animation or transition, including: the type of animation: css transition, css animation, or
web animations api the duration of the animation the animation's start and end delay the animation's easing (or timing function).
Frame rate - Firefox Developer Tools
frame rate is a measure of a
website's responsiveness.
...it's most familiar from film and gaming, but is now widely used as a performance measure for
websites and
web apps.
... in
web performance, a frame encapsulates the work the browser needs to do in order to update and repaint the screen.
... using the frame rate graph the great value of the frame rate graph is that, like the
web console, it gives you a quick indication of where your site might be having problems, enabling you to use the other tools for more in-depth analysis.
Responsive Design Mode - Firefox Developer Tools
responsive design is the practice of designing a
website so it looks and works properly on a range of different devices — particularly mobile phones and tablets as well as desktops and laptops.
...responsive design mode gives you a simple way to simulate these factors, to test how your
website will look and behave on different devices.
... toggling responsive design mode there are three ways to toggle responsive design mode: from the firefox menu: select responsive design mode from the
web developer submenu in the firefox menu (or tools menu if you display the menu bar or are on macos).
... controlling responsive design mode with responsive design mode enabled, the content area for
web pages is set to the screen size for a mobile device.
Taking screenshots - Firefox Developer Tools
taking screenshots with the
web console if you need to specify a different device-pixel-ratio, set a delay before taking the screenshot, or specify your own file name, starting in firefox 62 you can use the :screenshot helper function in the
web console.
... type :screenshot in the
web console to create a screenshot of the current page.
... --fullpage boolean if included, the full
webpage will be saved.
... with this parameter, even the parts of the
webpage which are outside the current bounds of the window will be included in the screenshot.
ARIA - Accessibility
accessible rich internet applications (aria) is a set of attributes that define ways to make
web content and
web applications (especially those developed with javascript) more accessible to people with disabilities.
... support like any other
web technology, there are varying degrees of support for aria.
... videos of screen readers using aria see both real and simplified examples from around the
web, including "before" and "after" aria videos.
... simple aria enhancements enhancing page navigation with aria landmarks a nice intro to using aria landmarks to improve
web page navigation for screen reader users.
:host() - CSS: Cascading Style Sheets
browser compatibility desktopmobilechromeedgefirefoxinternet exploreroperasafariandroid
webviewchrome for androidfirefox for androidopera for androidsafari on iossamsung internet:host()chrome full support 54edge full support 79firefox full support 63 full support 63 no support 61 — ...
...63disabled disabled from version 61 until version 63 (exclusive): this feature is behind the dom.
webcomponents.shadowdom.enabled preference (needs to be set to true).
..., visit about:config.ie no support noopera full support 41safari full support 10notes full support 10notes notes certain css selectors do not work (:host > .local-child) and styling slotted content (::slotted) is buggy.
webview android full support 54chrome android full support 54firefox android full support 63 full support 63 no support 61 — 63disabled disabled from version 61 until version 63 (exclusive): this...
... feature is behind the dom.
webcomponents.shadowdom.enabled preference (needs to be set to true).
:visited - CSS: Cascading Style Sheets
desktopmobilechromeedgefirefoxinternet exploreroperasafariandroid
webviewchrome for androidfirefox for androidopera for androidsafari on iossamsung internet:visitedchrome full support 1edge full support 12firefox full support 1ie full support 4opera full support ...
... 3.5safari full support 1
webview android full support 4.4chrome android full support 18firefox android full support 4opera android full support 10.1safari ios full support 1samsung internet android full support 1.0:visited no longer matches <link> elementschrome full support 1notes full support 1notes notes chromium has never matched <link> elements with link pseudo-classes.ed...
... full support 70ie no support noopera full support 15notes full support 15notes notes chromium has never matched <link> elements with link pseudo-classes.safari full support 12
webview android full support 4.4notes full support 4.4notes notes chromium has never matched <link> elements with link pseudo-classes.chrome android full support 18notes full support 18notes notes chromium has never match...
... privacychrome full support 6edge full support 12firefox full support 4ie full support 8opera full support 15safari full support 5
webview android full support 37chrome android full support 18firefox android full support 4opera android full support 14safari ios full support 4.2samsung internet android ...
@font-face - CSS: Cascading Style Sheets
syntax @font-face { font-family: "open sans"; src: url("/fonts/opensans-regular-
webfont.woff2") format("woff2"), url("/fonts/opensans-regular-
webfont.woff") format("woff"); } descriptors font-display determines how a font face is displayed based on whether and when it is downloaded and ready to use.
... by allowing authors to provide their own fonts, @font-face makes it possible to design content without being limited to the so-called "
web-safe" fonts (that is, the fonts which are so common that they're considered to be universally available).
... 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.
...iation-settings: <font-variation-settings>; ] | [ font-stretch: <font-stretch>; ] | [ font-weight: <font-weight>; ] | [ font-style: <font-style>; ] }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.
-moz-device-pixel-ratio - CSS: Cascading Style Sheets
note: this media feature is also implemented by
webkit and by ie 11 for windows phone 8.1 as -
webkit-device-pixel-ratio.
... the min and max prefixes as implemented by gecko are named min--moz-device-pixel-ratio and max--moz-device-pixel-ratio; but the same prefixes as implemented by
webkit are named -
webkit-min-device-pixel-ratio and -
webkit-max-device-pixel-ratio.
... media: media/visual accepts min/max prefixes: yes examples basic compatibility example -moz-device-pixel-ratio may be used for compatibility with firefox older than 16, and alongside -
webkit-device-pixel-ratio for compatibility with
webkit-based browsers that do not support dppx.
... example: @media (-
webkit-min-device-pixel-ratio: 2), /*
webkit-based browsers */ (min--moz-device-pixel-ratio: 2), /* older firefox browsers (prior to firefox 16) */ (min-resolution: 2dppx), /* the standard way */ (min-resolution: 192dpi) /* dppx fallback */ note: see this csswg article for compatibility good practices regarding resolution and dppx.
CSS Scrollbars - CSS: Cascading Style Sheets
scrollbar-width desktopmobilechromeedgefirefoxinternet exploreroperasafariandroid
webviewchrome for androidfirefox for androidopera for androidsafari on iossamsung internetscrollbar-widthchrome no support noedge no support nofirefox full support 64 full support 64 full support ...
...to change preferences in firefox, visit about:config.ie no support noopera no support nosafari no support no
webview android no support nochrome android no support nofirefox android full support 64 full support 64 full support 63disabled disabled from version 63: this feature is behind th...
... scrollbar-color desktopmobilechromeedgefirefoxinternet exploreroperasafariandroid
webviewchrome for androidfirefox for androidopera for androidsafari on iossamsung internetscrollbar-colorchrome no support noedge no support nofirefox full support 64notes full support 64notes notes on macos, you need to s...
...to change preferences in firefox, visit about:config.ie no support noopera no support nosafari no support no
webview android no support nochrome android no support nofirefox android full support 64 full support 64 full support 63disabled disabled from version 63: this feature is behind ...
Questions about CSS - CSS: Cascading Style Sheets
css gives more control over the appearance of a
web page to the page creator than to the browser designer or the viewer.
...in a
web page, the style element is placed between the title statement and the body statement.
... an imported style sheet, using the css @import notation to automatically import and merge an external style sheet with the current style sheet style attributes specified by the viewer to the browser the default style sheet assumed by the browser in general, the
web page creator's style sheet takes precedence, but it's recommended that browsers provide ways for the viewer to override the style attributes in some respects.
... since it's likely that different browsers will choose to implement css1 somewhat differently, the
web page creator must test the page with different browsers.
Privacy and the :visited selector - CSS: Cascading Style Sheets
before about 2010, the css :visited selector allowed
websites to uncover a user's browsing history and figure out what sites the user had visited.
...this process was quick to execute, and made it possible not only to determine where the user had been on the
web, but could also be used to guess a lot of information about the user's identity.
... little white lies to preserve users' privacy, firefox and other browsers will lie to
web applications under certain circumstances: the window.getcomputedstyle method, and similar functions such as element.queryselector, will always return values indicating that a user has never visited any of the links on a page.
...*/ } :visited { outline-color: orange; /* visited links have an orange outline */ background-color: green; /* visited links have a green background */ color: yellow; /* visited links have yellow colored text */ } impact on
web developers overall, these restrictions shouldn't affect
web developers too significantly.
background-position - CSS: Cascading Style Sheets
desktopmobilechromeedgefirefoxinternet exploreroperasafariandroid
webviewchrome for androidfirefox for androidopera for androidsafari on iossamsung internetbackground-positionchrome full support 1edge full support 12firefox full support 1ie full support 4opera full support...
... 3.5safari full support 1
webview android full support ≤37chrome android full support 18firefox android full support 4opera android full support 14safari ios full support 1samsung internet android full support 1.0multiple backgroundschrome full support 1edge full support 12firefox full support 3.6ie full s...
...upport 9opera full support 10.5safari full support 1.3
webview android full support ≤37chrome android full support 18firefox android full support 4opera android full support 14safari ios full support 1samsung internet android full support 1.0four-value syntax (support for offsets from any edge)chrome full support 25edge full support ...
... 12firefox full support 13ie full support 9opera full support 10.5safari full support 7
webview android full support ≤37chrome android full support 25firefox android full support 14opera android full support 14safari ios full support 7samsung internet android full support 1.5legend full support ...
caption-side - CSS: Cascading Style Sheets
desktopmobilechromeedgefirefoxinternet exploreroperasafariandroid
webviewchrome for androidfirefox for androidopera for androidsafari on iossamsung internetcaption-sidechrome full support 1edge full support 12firefox full support 1ie full support 8opera full support ...
... 4safari full support 1
webview android full support ≤37chrome android full support 18firefox android full support 4opera android full support 14safari ios full support 1samsung internet android full support 1.0non-standard values left, right, top-outside, and bottom-outside non-standardchrome no support noedge no support nofirefox full support ...
... 1ie no support noopera no support nosafari no support no
webview android no support nochrome android no support nofirefox android full support 4opera android no support nosafari ios no support nosamsung internet android no support notop and bottom are relative to the writing-mode valuechrome no support noedge no support...
... nofirefox full support 42ie no support noopera no support nosafari no support no
webview android no support nochrome android no support nofirefox android full support 42opera android no support nosafari ios no support nosamsung internet android no support nolegend full support ...
font-size-adjust - CSS: Cascading Style Sheets
desktopmobilechromeedgefirefoxinternet exploreroperasafariandroid
webviewchrome for androidfirefox for androidopera for androidsafari on iossamsung internetfont-size-adjustchrome full support 43disabled full support 43disabled disabled from version 43: this feature is behind the enable experimental
web platform features preference.
... to change preferences in chrome, visit chrome://flags.edge full support 79disabled full support 79disabled disabled from version 79: this feature is behind the enable experimental
web platform features preference.firefox full support 40 full support 40 full support 3notes notes before firefox 40, font-size-adjust: 0 was incorrectly interpreted as font-size-adjust: none (bug 1144885).
... full support 1notes notes before firefox 3, font-size-adjust was supported on windows only.ie no support noopera full support 30disabled full support 30disabled disabled from version 30: this feature is behind the enable experimental
web platform features preference.safari no support no
webview android no support nochrome android full support 43disabled full support 43disabled disabled from version 43: this feature is behind the enable experimental
web ...
...to change preferences in chrome, visit chrome://flags.firefox android full support 4opera android full support 30disabled full support 30disabled disabled from version 30: this feature is behind the enable experimental
web platform features preference.safari ios no support nosamsung internet android no support nolegend full support full support no support no supportsee implementation notes.see implementati...
image() - CSS: Cascading Style Sheets
the syntax looks like so: background-image: image('myimage.
webp#xywh=0,20,40,60'); the background image of the element will be the portion of the image myimage.
webp that starts at the coordinate 0px, 20px (the top left hand corner) and is 40px wide and 60px tall.
...while this can and should be done by including a background-color on every background image, the css image() function allows adding allows only including background colors should an image fail to load, which means you can add a fall back color should a transparent png/gif/
webp not load.
... providing fallback images .help::before { content: image("try.
webp", "try.svg", "try.gif"); } in this example, the browser will display an image as generated content before the content of the element with the class of help.
... the image displayed will be a
webp image, if
webp is supported.
ruby-position - CSS: Cascading Style Sheets
desktopmobilechromeedgefirefoxinternet exploreroperasafariandroid
webviewchrome for androidfirefox for androidopera for androidsafari on iossamsung internetruby-position experimentalchrome no support noedge no support 12 — 79firefox full support 38ie no support nonotes no support ...
...ort an old draft values: inline (equivalent of having display: inline on the ruby), and above (synonym of the modern over).opera no support nosafari no support nonotes no support nonotes notes safari implements a non-standard, prefixed, version of ruby-position, -
webkit-ruby-position: it has two properties: before and after (both equivalent, for ltr and rtl scripts to the standard over value used with ruby-align: start).
webview android no support nochrome android no support nofirefox android full support 38opera android ...
... no support nosafari ios no support nonotes no support nonotes notes safari implements a non-standard, prefixed, version of ruby-position, -
webkit-ruby-position: it has two properties: before and after (both equivalent, for ltr and rtl scripts to the standard over value used with ruby-align: start).samsung internet android no support nointer-character experimentalchrome no support noedge no support nofirefox no support noie no support noopera ...
... no support nosafari no support no
webview android no support nochrome android no support nofirefox android no support noopera android no support nosafari ios no support nosamsung internet android no support nolegend full support full support no support no supportexperimental.
user-select - CSS: Cascading Style Sheets
/* keyword values */ user-select: none; user-select: auto; user-select: text; user-select: contain; user-select: all; /* global values */ user-select: inherit; user-select: initial; user-select: unset; /* mozilla-specific values */ -moz-user-select: none; -moz-user-select: text; -moz-user-select: all; /*
webkit-specific values */ -
webkit-user-select: none; -
webkit-user-select: text; -
webkit-user-select: all; /* doesn't work in safari; use only "none" or "text", or else it will allow typing in the <html> container */ /* microsoft-specific values */ -ms-user-select: none; -ms-user-select: text; -ms-user-select: element; note: user-select is ...
...
webkit/chromium-based browsers do implement the property as inherited, which violates the behavior described in the spec, and this will bring some issues.
...finition initial valueautoapplies toall elementsinheritednocomputed valueas specifiedanimation typediscrete formal syntax auto | text | none | contain | all examples html <p>you should be able to select this text.</p> <p class="unselectable">hey, you can't select this text!</p> <p class="all">clicking once will select all of this text.</p> css .unselectable { -moz-user-select: none; -
webkit-user-select: none; -ms-user-select: none; user-select: none; } .all { -moz-user-select: all; -
webkit-user-select: all; -ms-user-select: all; user-select: all; } result specifications specification status comment css basic user interface module level 4the definition of 'user-select' in that specification.
...also defines -
webkit-user-select as a deprecated alias of user-select.
WAI ARIA Live Regions/API Support - Developer guides
events fired for
web page mutations what changed in document?
...see [#events_fired_for_
web_page_mutations the mutation events list] to match the type of event with this attribute's value, to determine whether the author believed the event should be presented to the user or not.
...determining if event was from user input all events will now provide information about whether the event was caused by user input, or was something that the
web page caused.
...if the screen reader automatically reads too much, then the
web page will be too annoying to use.
Setting up adaptive streaming media sources - Developer guides
mpeg-dash encoding mpeg-dash is an adaptive bitrate streaming technique that enables streaming of media content over the internet delivered from conventional http
web servers.
... <video src="my.mpd" type="application/dash+xml"></video> it might be wise to provide a fallback for browsers that don't yet support mpeg-dash: <video> <source src="my.mpd" type="application/dash+xml"> <!-- fallback --> <source src="my.mp4" type="video/mp4"> <source src="my.
webm" type="video/
webm"> </video> live profile a useful piece of software when dealing with mpeg-dash is dash encoder.
... note: if you use
webm you can use the methods shown in this tutorial dash adaptive streaming for html 5 video.
... once you have generated your mpd file you can reference as expected it from within the <video> element: <video src="my.mpd" type="application/dash+xml"></video> it might be wise to provide a fallback: <video> <source src="my.mpd" type="application/dash+xml"> <!-- fallback --> <source src="my.mp4" type="video/mp4"> <source src="my.
webm" type="video/
webm"> </video> note: mpeg-dash playback relies on dash.js and browser support for media source extensions, see the latest dash.js reference player.
Mobile-friendliness - Developer guides
goal #1 (presentation) “make
websites that work well on a variety of screen sizes.” these days, users can access the
web on devices in a wide range of form factors, including phones, tablets, and ereaders.
...a great example of this is alaska air’s
website.
...approaches to mobile
web development the following approaches aim to achieve each of these goals by different means.
... separate sites responsive design a hybrid approach original document information originally published on 4 may, 2011 on the mozilla
webdev blog as "approaches to mobile
web development part 1 - what is mobile friendliness?", by jason grlicky.
Optimization and performance - Developer guides
when building modern
web apps and sites, it's important to make your content perform well.
... there are several tools available to check the performance of a
website or blog.
... google pagespeed insights lighthouse
webpagetest browser developer tools the above resources also include
web performance best practices.
... making
web performance a priority by considering
web performance throughout the development process is important in ensuring users get the best user experience possible.
<img>: The Image Embed element - HTML: Hypertext Markup Language
a complete guide to image formats supported by
web browsers is available.
... below is a list of the image formats that are most commonly used on the
web, as well as some older formats that should no longer be used, despite existing content possibly still using them.
...fox, internet explorer, opera, safari png portable network graphics image/png .png chrome, edge, firefox, internet explorer, opera, safari svg scalable vector graphics image/svg+xml .svg chrome, edge, firefox, internet explorer, opera, safari tiff tagged image file format image/tiff .tif, .tiff none built-in; add-ons required
webp
web picture format image/
webp .
webp chrome, edge, firefox, opera the abbreviation for each format links to a longer description of the format, its capabilities, and detailed browser compatibility information; including which versions introduced support and specific special features that may have been introduced later.
... an alt decision tree • images • wai
web accessibility tutorials alt-texts: the ultimate guide — axess lab how to design great alt text: an introduction | deque mdn understanding wcag, guideline 1.1 explanations understanding success criterion 1.1.1 | w3c understanding wcag 2.0 the title attribute the title attribute is not an acceptable substitute for the alt attribute.
<input type="hidden"> - HTML: Hypertext Markup Language
<input> elements of type hidden let
web developers include data that cannot be seen or modified by users when a form is submitted.
... improving
website security hidden inputs are also used to store and submit security tokens or secrets, for the purposes of improving
website security.
... the basic idea is that if a user is filling in a sensitive form, such as a form on their banking
website to transfer some money to another account, the secret they would be provided with would prove that they are who they say they are, and that they are using the correct form to submit the transfer request.
...you need to use well-designed secrets to actually secure your
website.
<listing> - HTML: Hypertext Markup Language
desktopmobilechromeedgefirefoxinternet exploreroperasafariandroid
webviewchrome for androidfirefox for androidopera for androidsafari on iossamsung internetlisting deprecatedchrome no support noedge no support nofirefox no support nonotes no support nonotes notes before firefox 4, this e...
...lement implemented the htmlspanelement interface instead of the standard htmlelement interface.ie no support noopera no support nosafari no support no
webview android no support nochrome android no support nofirefox android no support nonotes no support nonotes notes before firefox 4, this element implemented the htmlspanelement interface instead of the standard htmlelement interface.opera android no support nosafari ios no...
...not for use in new
websites.deprecated.
... not for use in new
websites.see implementation notes.see implementation notes.
<shadow>: The obsolete Shadow Root element - HTML: Hypertext Markup Language
the html <shadow> element—an obsolete part of the
web components technology suite—was intended to be used as a shadow dom insertion point.
...for this code to work, the browser you display it in must support
web components.
... see enabling
web components in firefox.
... shadowroot2.innerhtml = '<shadow></shadow> <p>younger shadow root, displayed because it is the youngest.</p>'; </script> </body> </html> if you display this in a
web browser it should look like the following.
Quirks Mode and Standards Mode - HTML: Hypertext Markup Language
in the old days of the
web, pages were typically written in two versions: one for netscape navigator, and one for microsoft internet explorer.
... when the
web standards were made at w3c, browsers could not just start using them, as doing so would break most existing sites on the
web.
... there are now three modes used by the layout engines in
web browsers: quirks mode, almost standards mode, and full standards mode.
...this is essential in order to support
websites that were built before the widespread adoption of
web standards.
Basics of HTTP - HTTP
articles overview of http describes what http is and its role in
web architecture, including its position in the protocol stack.
... resources and uris a brief introduction to the concept of resources, identifiers, and locations on the
web.
... identifying resources on the
web describes how
web resources are referenced and how to locate them.
... separating identity and location of a resource: the alt-svc http header most of the time the identity and location of a
web resource are shared, this can be changed with the alt-svc header.
Configuring servers for Ogg media - HTTP
this guide covers a few server configuration changes that may be necessary for your
web server to correctly serve ogg media files.
... for apache, you can add the following to your configuration: addtype audio/ogg .oga addtype video/ogg .ogv addtype application/ogg .ogg you can find specific information about possible media file types and the codecs used within them in our comprehensive guide to media types and formats on the
web.
... preload is off by default, so if getting to video is the point of your
web page, your users may appreciate it if you include preload in your video elements.
... don't use http compression for media files one common way to reduce the load on a
web server is to use gzip or deflate compression when serving to a supporting
web browser.
Using Feature Policy - HTTP
be wary of this when implementing feature policy on your
website.
... enforcing best practices for good user experiences it's difficult to build a
website that uses all the latest best practices and provides great performance and user experiences.
... as the
website evolves, it can become even harder to maintain the user experience over time.
...these features include: layout-inducing animations unoptimized (poorly compressed) images oversized images synchronous scripts synchronous xmlhttprequest unsized media to avoid breaking existing
web content, the default for such policy-controlled features is to allow the functionality to be used by all origins.
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.
... child-src defines the valid sources for
web workers and nested browsing contexts loaded using elements such as <frame> and <iframe>.
...this directive is intended for
web sites with large numbers of insecure legacy urls that need to be rewritten.
... fix but wants to ensure resources are loaded only over https and to disable plugins: content-security-policy: default-src https: 'unsafe-eval' 'unsafe-inline'; object-src 'none' example: do not implement the above policy yet; instead just report violations that would have occurred: content-security-policy-report-only: default-src https:; report-uri /csp-violation-report-endpoint/ see mozilla
web security guidelines for more examples.
HTTP Messages - HTTP
web developers, or
webmasters, rarely craft these textual http messages themselves: software, a
web browser, proxy, or
web server, perform this action.
... get http://developer.mozilla.org/docs/
web/http/messages http/1.1 the authority component of a url, consisting of the domain name and optionally the port (prefixed by a ':'), is called the authority form.
... http frames are now transparent to
web developers.
...no changes are needed in the apis used by
web developers to utilize http frames; when available in both the browser and the server, http/2 is switched on and used.
HTTP resources and specifications - HTTP
proposed standard rfc 7538 the hypertext transfer protocol status code 308 (permanent redirect) proposed standard rfc 7725 an http status code to report legal obstacles on the standard track rfc 2397 the "data" url scheme proposed standard rfc 3986 uniform resource identifier (uri): generic syntax internet standard rfc 5988
web linking defines the link header proposed standard experimental spec hypertext transfer protocol (http) keep-alive header informational (expired) draft spec http client hints ietf draft rfc 7578 returning values from forms: multipart/form-data proposed standard rfc 6266 use of the content-disposition header field in the hypertext tran...
... proposed standard rfc 7239 forwarded http extension proposed standard rfc 6455 the
websocket protocol proposed standard rfc 5246 the transport layer security (tls) protocol version 1.2 this specification has been modified by subsequent rfcs, but these modifications have no effect on the http protocol.
... proposed standard rfc 6454 the
web origin concept proposed standard fetchthe definition of 'cors' in that specification.
... (hsts) proposed standard upgrade insecure requests upgrade insecure requests candidate recommendation content security policy 1.0 content security policy 1.0 csp 1.1 and csp 3.0 doesn't extend the http standard obsolete microsoft document specifying legacy document modes* defines x-ua-compatible note rfc 5689 http extensions for
web distributed authoring and versioning (
webdav) these extensions of the
web, as well as carddav and caldav, are out-of-scope for http on the
web.
JavaScript typed arrays - JavaScript
however, as
web applications become more and more powerful, adding features such as audio and video manipulation, access to raw data using
websockets, and so forth, it has become clear that there are times when it would be helpful for javascript code to be able to quickly and easily manipulate raw binary data.
... type value range size in bytes description
web idl type equivalent c type int8array -128 to 127 1 8-bit two's complement signed integer byte int8_t uint8array 0 to 255 1 8-bit unsigned integer octet uint8_t uint8clampedarray 0 to 255 1 8-bit unsigned integer (clamped) octet uint8_t int16array -32768 to 32767 2 16-bit two's complement signed intege...
...
web apis using typed arrays these are some examples of apis that make use of typed arrays; there are others, and more are being added all the time.
...this lets you, for example, interact with complex data structures from
webgl, data files, or c structures you need to use while using js-ctypes.
color-profile - SVG: Scalable Vector Graphics
desktopmobilechromeedgefirefoxinternet exploreroperasafariandroid
webviewchrome for androidfirefox for androidopera for androidsafari on iossamsung internetcolor-profile deprecatedchrome ?
...
webview android ?
...not for use in new
websites.deprecated.
... not for use in new
websites.
SVG: Scalable Vector Graphics
as such, it's a text-based, open
web standard for describing images that can be rendered cleanly at any size and are designed specifically to work well with other
web standards including css, dom, javascript, and smil.
... svg has been developed by the world wide
web consortium (w3c) since 1999.
...use svg to enhance a regular html page or
web application.
... some real eye-candy svg at svg-wow.org firefox extension (grafox) to add a subset of smil animation support interactive photos manipulation html transformations using svg's foreignobject mapping, charting, games & 3d experiments while a little svg can go a long way to enhanced
web content, here are some examples of heavy svg usage.
Two Types of Scripts - Archive of obsolete content
on the
web, javascript executes in the context of a
web page, and has access to that page's dom content.
... content scripts while your add-on will always have a "main.js" module, you will only need to write content scripts if your add-on needs to manipulate
web content.
... content scripts are injected into
web pages using apis defined by some of the sdk's modules such as page-mod and panel.
panel - Archive of obsolete content
in the sdk these scripts are called "content scripts" because they're explicitly used for interacting with
web content.
... panel limitations although panels can host html documents, they are not implemented as browser tabs, so many things that work in normal
web pages do not work inside panels: prior to firefox 33, you don't get a context menu.
...the context menu will be the same one that's displayed in
web pages.
High-Level APIs - Archive of obsolete content
modules listed on this page implement high-level apis for building add-ons: creating user interfaces, interacting with the
web, and interacting with the browser.
... page-mod run scripts in the context of
web pages whose url matches a given pattern.
... selection get and set text and html selections in the current
web page.
content/worker - Archive of obsolete content
used in the internal implementation of sdk modules which use content scripts to interact with
web content.
... the worker is similar to the
web worker interface defined by the w3c.
... but unlike "
web workers," these workers run in the same process as
web content and browser chrome, so code within workers can block the ui.
frame/hidden-frame - Archive of obsolete content
this is useful in the construction of apis that load
web content not intended to be directly seen or accessed by users, like page-worker.
... it is also useful in the construction of apis that load
web content for intermittent display, such as panel.
... 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 exam...
Modifying the Page Hosted by a Tab - Archive of obsolete content
the job of these scripts is to interact with
web content.
... then open any
web page in the browser window, and click the button .
... learning more to learn more about working with tabs in the sdk, see the open a
web page tutorial, the list open tabs tutorial, and the tabs api reference.
Add-on SDK - Archive of obsolete content
you can use various standard
web technologies: javascript, html, and css, to create the add-ons.
... interact with the browser open
web pages, listen for pages loading and list open pages.
... modify
web pages modify pages matching a url pattern or dynamically modify a particular tab.
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.
... you can use the nsinavbookmarksservice.changebookmarkuri() method to update the uri for a given bookmark item: var uri = ios.newuri("http://mozilla.com/", null, null); bmsvc.changebookmarkuri(newbkmkid, uri); this example changes the bookmark to refer to the mozilla
web site instead of google.
... var ios = components.classes["@mozilla.org/network/io-service;1"] .getservice(components.interfaces.nsiioservice); var uri = ios.newuri("http://mozilla.com/", null, null); if (!bmsvc.isbookmarked(uri)) { bmsvc.insertbookmark(bmsvc.toolbarfolder, uri, bmsvc.default_index, "mozilla"); } this example looks to see if the user already has a bookmark for the mozilla
web site, and, if not, creates one, adding it to the user's bookmarks toolbar.
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.
...fairly easy if the
webserver where the javascript is hosted were to be hijacked or compromised.
...downloading state from a remote
webserver using json is becoming extremely popular.
Enhanced Extension Installation - Archive of obsolete content
installation initiation when an item is installed from the
web, xpinstall is invoked and it calls into the extension system when it discovers that the xpi file contains an install.rdf manifest.
... installation from a file initiation when an item is installed from a file (such as, when an item is installed from the
web, via xpinstall, upgraded by xpinstall or dropped into a directory-based install location), the install manifest supplied by the item is expanded into a temporary location and read.
...when an item is being installed from a xpi file from the
web or from a drop in) the extension system checks to see if there is an existing version installed, and if so a special routine is called which sets a tobeupgraded flag on the configured item instead of the usual tobeinstalled flag.
How to convert an overlay extension to restartless - Archive of obsolete content
the resource:// protocol actually bleeds into content which allows
webpages to detect installed add-ons using the protocol, which is not particularly fantastic (just the static file contents, not any loaded script/data).
...you can use it in a
web page to fetch a file from your server and you can use it in your add-on to fetch a local file from your installation.
...you'd think such an important new javascript feature made available for
web content and chrome alike would at least have a way to set and keep track of endianness, but no, it doesn't.
Chapter 6: Firefox extensions and XUL applications - Archive of obsolete content
it works like typical debuggers, and is useful not only for developing extensions, but also for general
web development.
... when venkman first launches, it can only debug the file currently open in your
web browser.
... the next command will import the source code: gonzui-import.exe mozilla once the import process is complete, type the following command to launch the gonzui server: gonzui-server.exe now you can access gonzui from your
web browser by typing the following into your location bar : http://localhost:46984 this lets you browse all packages, click on links to traverse them, and take traversed-link locations as search starting points (figure a).
Chapter 4: Using XPCOM—Implementing advanced processes - Archive of obsolete content
due to deprecation of enableprivilege this functionality can not be used in
web pages.
...because ordinary
web pages and local files don't have privileges, it's impossible to actually try out the sample code in this chapter.
...ord=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'+ content; postdata.setdata(content, content.length); var flags = components.interfaces.nsi
webnavigation.load_flags_none; browser.loaduriwithflags('http://piro.sakura.ne.jp/', flags, referrer, null, postdata); « previousnext » ...
Appendix F: Monitoring DOM changes - Archive of obsolete content
dom mutation events were introduced to html several years ago in order to allow
web applications to monitor changes to the dom by other scripts.
...these requests can be tracked from chrome code using a variety of methods, including
web progress listeners, http observers, and content policies.
...while it is no longer possible for
web sites to use xbl directly, chrome code can still attach xbl bindings to
web content from stylesheets loaded via the stylesheet service.
Introduction - Archive of obsolete content
mozilla has spawned several products and projects, the most notable being the mozilla firefox
web browser.
... gecko the gecko engine is the part of firefox used to render
web pages and its own user interface.
... you can identify the level of compatibility of
web standards in gecko-based browsers looking at their user agent string, which should include the gecko version.
The Essentials of an Extension - Archive of obsolete content
all firefox windows can be seen as having two parts: (1) the chrome and (2) possibly a content area, like the one that displays
web pages in a firefox tab.
...the skin section has the files that define most of the look and feel of the ui (using css and images, just like
web pages).
...if your menu item fits in the
web developer section, it is recommended that you add it there.
Signing an XPI - Archive of obsolete content
i have hi-resolution scanned images of my passport and drivers license for these situations so i placed them on my
web-server temporarily in a hidden location and emailed unizeto certum with the details and location of the files.
... download the root ca and any intermediate certificates used to sign your certificate from the issuer; their
web site will have a link somewhere to their root cas and public certificates.
...i downloaded the certum root ca and certum level iii ca digital id for
web and ssl/tls servers, copied the text and saved them to the files c:\projects\codesigning\certum root ca.cer and c:\projects\codesigning\certum level iii ca.cer.
Creating a dynamic status bar extension - Archive of obsolete content
« previousnext » this article builds upon the article creating a status bar extension, which creates a static status bar panel in the firefox status bar, by dynamically updating its content with information fetched from the
web every few minutes.
...this object is used to configure and run an http request on a
web server, which we'll use to fetch the stock quote data.
...we then fetch the result returned by the
web server into the variable output from the xmlhttprequest.responsetext property.
cert_override.txt - Archive of obsolete content
the syntax is described on this
web site.
...the key and the
website are not valid: # psm certificate override settings file # this is a generated file!
...some.
website.com:443 oid.2.16.840.1.101.3.4.2.1 00:11:22:33:44:55:66:77:88:99:aa:bb:cc:dd:ee:ff:ff:ee:dd:cc:bb:aa:99:88:77:66:55:44:33:22:11:00 u aaaaaaaaaaaaaaabaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa aaaaaaaaaaaaaaaaaaaaaaaa aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa aaaaaaaaaaaaaaaaaaaaaaaaaa== fields fields are separated by a tab character.
Source code directories overview - Archive of obsolete content
docshell contains c interfaces and code for loading and displaying a single
web page (e.g.
...the [#seamonkey-
webshell
webshell] code wraps these interfaces according to the particular platform and way (e.g.
...
webshell contains c interfaces, c code, linux shell scripts and other files for embedding mozilla in other programs on various different platforms in various different ways (e.g.
Tinderbox - Archive of obsolete content
tinderbox is a
web tool for tracking the status of the mozilla source code.
... it consists of a set of client machines that continuously build and test mozilla and report their results back to a server that makes those results available via a
web page.
...while it isn't difficult to load the tinderbox
web page or sidebar, it would be useful to have an even quicker way to check tinderbox that doesn't require going to a
web page, changing sidebars, or even having the sidebar open.
In-Depth - Archive of obsolete content
a list of the different operating system colours can be found on the w3c's
web site.
...normal in english
web browsers items are displayed top to bottom and left to right.
...then open the dom inspector (tools->
web development->dom inspector).
Error Console - Archive of obsolete content
use the
web console instead, for
web content, or the browser console for chrome content.
... the error console is a tool available in most mozilla-based applications that is used for reporting errors in the application chrome and in
web pages user opens.
... related topics javascript, css
web development ...
CRMF Request object - Archive of obsolete content
do not use it on production sites facing the
web: it will not work for every user.
... deprecatedthis feature has been removed from the
web standards.
...use <keygen> or the future
web crypto api instead.
generateCRMFRequest() - Archive of obsolete content
do not use it on production sites facing the
web: it will not work for every user.
... deprecatedthis feature has been removed from the
web standards.
...use <keygen> or the future
web crypto api instead.
popChallengeResponse - Archive of obsolete content
do not use it on production sites facing the
web: it will not work for every user.
... deprecatedthis feature has been removed from the
web standards.
...use <keygen> or the future
web crypto api instead.
Microsummary topics - Archive of obsolete content
note: when
web sites install generators via window.sidebar.addmicrosummarygenerator(), firefox sets their uri attribute to urn:source:sourceurl, where sourceurl is the url from which the generator was downloaded.
...thus, to differentiate requests initiated manually by users for the purpose of viewing a
web page from those initiated automatically by firefox for the purpose of summarizing that page, check for the presence and value of the x-moz request header.
...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.
HostWindow - Archive of obsolete content
prism hosts
web applications in a simple, minimal window.
...sidebar - section of window area used to display ancillary
web content, including
web applications.
...to display the status bar, the statusbar option in
webapp.ini must be set to true.
Priority Content - Archive of obsolete content
dependant on: updating dhtml
web pages for next generation browsers on devedge the tune-up wizard (see below, in the wishlist section) mostly completed: popup window controls devedge article migrators: mathieu deaudelin there are inline examples on this page that cannot be migrated.
... started: using mozilla in testing and debugging
web sites original: using mozilla in testing and debugging
web sites wiki location: using mozilla in testing and debugging
web sites migrators: serge k.
...keller equivalents security developer central -> security plugins central -> plugins devedge community -> mozilla
web developer community notes from devmo wishlist devedge toolbox tools on devedge examples on devedge started: devedge sidebar completed: standards-compliant authoring tools on devedge mostly completed: tools:validators on devedge dependant on the sidebar tabs and the tune-up wizard.
Hacking wiki - Archive of obsolete content
to be able to hack the mdc wiki software, you'll need a local
webserver install, which can run mediawiki.
...it's done by navigating to <tt>/config/index.php</tt> in your
web browser.
...if you have problems with setting up the mdc wiki (and not the
web server or php or mediawiki), feel free to ask in #devmo.
New Skin Notes - Archive of obsolete content
your statement that "it looks odd when someone who uses devmo on regular basis sees some violet links just because he already worked with this site yesterday" holds true for every single place on the
web, yet visited links use different styling on most sites.
...thanks again --mmondor future fixes in l10n versions there all heading links are wrong - main link and documentation leads to english devmo, and devnews and
webwatch should be hidden or localized too.
...devnews and
webwatch are not currently being localised so shall remain as they are, with link to english wiki.
A XUL Bestiary - Archive of obsolete content
in contrast to the mozilla jargon file, this article describes items of specific interest to the
web or content developer looking to establish a context for understanding mozilla's new technologies -- and in particular mozilla's xml-based user interface language, xul.
...since any dynamic
web development is dependent upon programmatic access to the
web document (or xul interface), and since the dom is a standard and earlier notions of dynamic html were not, the term "dom" is used as a synonym for or instead of terms like "dynamic html" or "dhtml." the aom stands for the application object model, and is an extension of the dom up into the interface defined in xul.
...a loosely analogous relationship might be that xul, xptoolkit, and xpfe are to one another what html, the actual html tags, and an html
web page are to one another, respectively.
Code Samples - Archive of obsolete content
const path = "c:\\windows\\charmap.exe" var file = components .classes["@mozilla.org/file/local;1"] .createinstance(components.interfaces.nsilocalfile) file.initwithpath(path) file.launch() open a
web page if your button is in firefox or seamonkey, 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/" 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.
...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.
Trees and Templates - Archive of obsolete content
ent"> <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.
2006-10-13 - Archive of obsolete content
(user feels print belongs on the context menu along with back, reload, etc.) questions about programming for firefox a student questions how to create an extension that changes fonts, and how to capture
website content before it is displayed.
... firefox add-on wanted user is inquiring if there is such an application to automatically save pieces of a
webpage everytime is it updated.
... firefox 2.0 should re-implement modal window.open to support
web 2.0 user would like the option to show pop-up windows, using window.open(), from inside untrusted script, to be re-implemented.
2006-11-10 - Archive of obsolete content
event in firefox similar to ondownloadcomplete event in ie an inquiry about how to change the font of a
web page before it is displayed using an extenstion.
... firefox 2.0 - net accessed when bookmark properties viewed question about whether firefox 2.0 downlads the
web page again when the properties of the bookmark are viewed.
... improving the ue for content control suggestion about how to improve user experience with options controlling the appearance of
web content.
Adobe Flash - Archive of obsolete content
the focus of this article is to present tips on scripting flash within gecko™-based
web browsers.
...avoiding poorly-written or unnecessary flash content is crucial to ensuring the user has a positive experience on not just your site, but the entire
web.
...most of its functions can be reproduced using modern
web apis.
How RSS Works - Archive of obsolete content
a news
website would be at the server end of rss syndication.
...the mozilla firefox
web browser would be at the client end of the rss syndication.
...a
web-based rss aggregator would be at the client end of the rss syndication.
Why use RSS - Archive of obsolete content
there are too many desktop and
web-based rss aggregators out there to list them all.
... rss aggregators are everywhere one reason to use rss to syndicate is because there are an enormous amount of desktop and
web-based rss aggregators out there.
... (too many to list.) and if you syndicate using rss, then all those desktop and
web-based rss aggregators will be able to make use of and read your rss feed.
.htaccess ( hypertext access ) - Archive of obsolete content
common application url redirects & rewrite: htaccess files are often used to redirect traffic to a
web page to another or from traffic to a directory to another even between domains is possible.
... php_value auto_prepend_file "/real/path/to/file/functions.php" # adds function.php at the top of requested document php_value auto_append_file "/real/path/to/file/footer.php" # adds footer.html at bottom of requested document customized error responses : user can be directed to different pages depending on the error they caused or by the
webserver.
... cache control : .htaccess allows a server to control caching by
web browsers, helps load pages faster, and reduces the data transfer.
Introduction to Public-Key Cryptography - Archive of obsolete content
network interactions typically take place between a client, such as browser software running on a personal computer, and a server, such as the software and hardware used to host a
web site.
... example: internet sites that engage in electronic commerce (commonly known as e-commerce) usually support certificate-based server authentication, at a minimum, to establish an encrypted ssl session and to assure customers that they are dealing with a
web site identified with a particular company.
...for a more detailed description of the signature verification process in the context of ssl client and server authentication, see "introduction to ssl." managing certificates certificates are used in many applications, from encrypting email to accessing
websites.
Using the W3C DOM - Archive of obsolete content
ie-specific ways to access elements w3c
web standards replacements id_attribute_value document.getelementbyid() document.all.id_attribute_value document.getelementbyid() document.all[id_attribute_value] document.getelementbyid() formname.inputname.value document.forms["formname"].inputname.value or document.forms["formname"].elements["inputname"].value inputname.value document...
... manipulating document style and content changing an element's style using the dom the following table describes standards-based methods for accessing and updating style rules defined for various html elements in a
web page.
... the dom by david baron element.innerhtml speed and performance comparison between innerhtml attribute and dom's nodevalue when modifying the text data of a text node by gérard talbot interactive dom level 2 characterdata interface attributes and methods tests: other ways to modify (replace, delete, manipulate) efficiently text nodes in the dom by gérard talbot <- previous section: using
web standards: how next section: developing cross-browser pages -> ...
Browser Feature Detection - Archive of obsolete content
this article has generally never been more than a way to show off firefox
web compatibility, rather than something truly informative in a broader sense.
... it is clear from these test results that netscape 7.0x and mozilla firefox have the greatest dom support although internet explorer, safari, and opera have sufficient dom css 1 and dom level 1 & 2 document property and method support to enable cross browser
web development.
...cument, 'domcore1', 'document'); generatereport(document, 'domcore2', 'document'); generatereport(document, 'domhtml', 'document'); generatereport(document.body.style, 'domcss1', 'document.body.style'); generatereport(document.body.style, 'domcss2', 'document.body.style'); window.onerror = oldonerror; see also browser detection and cross browser support comparison of layout engines
web specifications supported in opera 9 what's new in internet explorer 7 (script) original document information author(s): (unknown) last updated date: updated march 16, 2003 copyright information: copyright © 2001-2003 netscape.
Styling Abbreviations and Acronyms - Archive of obsolete content
many authors are beginning to use the html elements abbr (abbreviation) and acronym in their
web pages.
... this is to be encouraged, and according to guideline 4 of the
web content accessibility guidelines, both elements should be given a title attribute to improve "readability of the
web for all people, including those with learning disabilities, cognitive disabilities, or people who are deaf." the problem authors have discovered that any abbr or acronym that has a title attribute is rendered with a dotted underline, per the following rule in resource://gre-resources/html.css abbr[title], acronym[title] { text-decoration: dotted underline; } the solution if authors wish to remove the underline from abbr and acronym elements, this can be done with the following rule: abbr[title], acronym[title] { text-decoration: none; } it may be better to lessen the visual weight of the border witho...
... related links
web content accessibility guidelines 1.0 original document information author(s): eric a.
Using the DOM File API in chrome code - Extensions
this only works from privileged code, so
web content can't do it.
... this protects users from the inherent security risks associated with allowing
web content free access to the contents of their disks.
... if you pass a path to the file constructor from unprivileged code (such as
web content), an exception will be thrown.
Game monetization - Game development
there are more and more portals interested in showing your games on their
websites.
...some publisher
websites have that information easily available, while some others are harder to find.
...check out tuts+ game development or similar
websites for writing opportunities.
Game promotion - Game development
website and blog you should definitely create your own
website containing all the information about your games, so people can see what you've worked on.
... while you can create your
website from scratch, there are also tools that can help make the process easier.
... manakeep is a
website builder made for indie game developers and provides a great starting point to create your
website.
Building up a basic demo with the PlayCanvas engine - Game development
you should start off by: making sure you are using a modern browser with good
webgl support, such as the latest firefox or chrome.
... note: in playcanvas, the color channel values are provided as floats in the range 0-1, instead of integers of 0-255 as you might be used to using on the
web.
... summary now you can continue reading the playcanvas editor article, go back to the building up a basic demo with playcanvas page, or go back a level higher to the main 3d games on the
web page.
Unconventional controls - Game development
but imagine going even further — in this article we will explore various unconventional ways to control your
web game, some more unconventional than others.
... leapmotion is becoming more and more popular due to very good integration with vr headsets — demoing rainbow membrane on an oculus rift with leap motion attached to it was voted one of the best
webvr experiences by javascript developers visiting demo booths at conferences around the world.
...you can also check out the tutorial about using leap motion plugin for kiwi.js, or the case study of building a
web game with leap motion and pixi.js.
Tools for game development - Game development
this is a great tool for porting applications to the
web!
... shumway shumway is a renderer for adobe flash built entirely in javascript,
webgl, etc., bridging the gap between flash and
web standards.
... toolchain for developing and debugging games how does this differ from normal
web app debugging?
2D breakout game using pure JavaScript - Game development
after working through this tutorial you should be able to build your own simple
web games.
... — and the different versions of the mdn breakout game we are building together — are available on github: create the canvas and draw on it move the ball bounce off the walls paddle and keyboard controls game over build the brick field collision detection track the score and win mouse controls finishing up starting with pure javascript is the best way to get a solid knowledge of
web game development.
... note: if you are interested in learning about 2d
web game development using a game library, consult this series' counterpart, 2d breakout game using phaser.
2D maze game with device orientation - Game development
ody> <script> (function() { var game = new phaser.game(320, 480, phaser.canvas, 'game'); game.state.add('boot', ball.boot); game.state.add('preloader', ball.preloader); game.state.add('mainmenu', ball.mainmenu); game.state.add('howto', ball.howto); game.state.add('game', ball.game); game.state.start('boot'); })(); </script> </body> </html> so far we have a simple html
website with some basic content in the <head> section: charset, title, css styling and the inclusion of the javascript files.
... var game = new phaser.game(320, 480, phaser.canvas, 'game'); the line above will initialize the phaser instance — the arguments are the width of the canvas, height of the canvas, rendering method (we're using canvas, but there are also
webgl and auto options available) and the optional id of the dom container we want to put the canvas in.
... html5 gives us raw tools, the frameworks built on top of it are getting faster and better, so now is a great time get into
web game development.
Visual JS GE - Game development
visual-js gameengine is a small but comprehensive canvas/
websocket-based game engine with gui source editor only for windows.
... the server is based on node.js vs mysql, the client made in four variant on a javascript frameworks for 2d canvas js , three.js ,
webgl2 vs glmatrix and 2d canvas with matter.js in typescript to complete the stack.
... after this has finished processing, restart the
web page by entering the following in the console: resource.test_res.
Mozilla’s UAAG evaluation report
software that renders
web content.
...this uaag evaluation report covers nightly builds of the mozilla
web browser itself, running on windows 2000, as of february 20, 2002.
...(p2) ni the
web page itself is currently responsible for letting the user know what accesskey's are available.
Frequently Asked Questions for Lightweight themes
lightweight themes are easy-to-install, easy-to-use skins that change the look of your firefox
web browser.
... in just a few seconds, you can install a theme and transform the look of your firefox
web browser.
...consider visiting the firefox support
website or the themes forum for more help.
Benchmarking
this setting reduces build times significantly but comes with a serious hit to runtime performance for any rust code (for example stylo and
webrender).
... flash plugin if you are profiling real
websites, you should disable the adobe flash plugin so you are testing firefox code and not flash jank problems.
... timer precision firefox reduces the precision of the performance apis and other clock and timer apis accessible to
web content.
Creating MozSearch plugins
for creating search plugins for installation from the
web, see creating opensearch plugins for firefox the plugin file the mozsearch format is similar to the opensearch format.
...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.
... example: searching mdc this plugin lets you easily search the mozilla developer center
web site.
HTTP logging
sometimes, while debugging your
web app (or client-side code using necko), it can be useful to log http traffic.
... note: the
web console also offers the ability to peek at http transactions within firefox.
...go to the
web site that is broken for you and make the bug happen in the browser) make a note of the value of "current log file".
The Firefox codebase: CSS Guidelines
in addition to this, firefox supports a variety of
webextension themes that can be installed from amo.
... for testing purposes, here is an example of a
webextension theme.
... never write css specially for the built-in light/dark theme in compacttheme.css unless that css isn't supposed to affect
webextension themes.
Contributing to the Mozilla code base
if getting involved in design, support, translation, testing, or other types of contributions sparks your interest please see community
webiste.
...there are plenty of resources available on the mdn
web docs!
...you've fixed your very first bug, and the open
web is stronger for it.
Multiple Firefox profiles
web developers might want a secondary profile for testing
websites, apps, or other projects on different firefox channels.
... for example, you might want to have some extensions installed for
web development, but not for general-purpose
web browsing.
...you can view previously viewed
web pages, and experiment with your profile.
Firefox and the "about" protocol
sing start page when opening a private window about:profiles display and manage firefox profiles about:protections privacy protections report consisting of enhanced tracking protection, firefox monitor and firefox lockwise data about:restartrequired a page users are sent to when firefox requires a restart due to an update about:reader indicates a
web page has firefox reader view turned on.
... see firefox reader view for clutter-free
web pages about:rights displays rights information about:robots special page showing notes about robots about:serviceworkers displays currently running service workers about:studies lists the shield studies that are installed about:sessionrestore session restoration (displayed after a firefox crash) about:support troubleshooting information (also available through firefox menu > ?
...ng information) about:sync-log displays a synchronization protocol related to the sync feature about:telemetry displays telemetry data collected and sent to mozilla while firefox is running (in case the user enabled telemetry) about:url-classifier displays the status of the url classifier services that firefox uses (for example for safe browsing) about:
webrtc information about
webrtc usage about:welcome page first displayed when firefox is installed about:welcomeback information page displayed after firefox is reset these urls are defined in docshell/base/nsaboutredirector.cpp within the kredirmap array.
Firefox
firefox is mozilla's popular
web browser, available for multiple platforms including windows, macos, and linux on the desktop and all android and ios mobile devices.
... with broad compatibility, the latest in
web technologies, and powerful development tools, firefox is a great choice for both
web developers and end users.
...the most useful is the url about:config, which displays preferences and settings that can be inspected and changed.firefox ui considerations for
web developersthere are a number of places within the firefox user interface where
web sites are listed for the user to choose a destination to visit or a site to manage in some way.
Browser API
the html browser api is an extension of the html <iframe> element that allows
web apps to implement browsers or browser-like applications.
...the following new events can be listened for: mozbrowseractivitydone sent when something inside the browser <iframe> triggers a
web activity, and that
web activity's message is consumed by the receiving app.
... mozbrowsermanifestchange sent when a the path to the app manifest changes, in the case of a browser <iframe> with an open
web app embedded in it.
ChromeWorker
do not use it on production sites facing the
web: it will not work for every user.
... see using
web workers for examples and details.
... see also using
web workers using workers in javascript code modules worker sharedworker
web workers specification workerglobalscope github :: chromeworker - a fully working demo addon using js-ctypes from a chrome worker.
Embedding the editor
composer embedded in a native application in this application, the <iframe> on which the editor lives is embedded directly in the native application; this is equivalent to embedding the browser via nsi
webbrowser, but instead having an editable document.
...(the current nseditorshell makes assumptions about the hosting xul document, which need to be broken.) composer embedded in a
web page (<htmlarea>) ie 5 supports the <htmlarea> element; if mozilla is to support something similar, editor needs to be embeddable to the extent that this can be done.
...(this would be analogous to the nsi
webnavigation interface used for a browser.) when we have one editor per docshell, loading a frameset document, or a page with an <iframe> in composer, will instantiate more than one low-level editor.
AddonManager
callback) void installaddonsfrom
webpage(in string mimetype, in nsidomwindow source, in nsiuri uri, in addoninstall installs[]) void addinstalllistener(in installlistener listener) void removeinstalllistener(in installlistener listener) promise?
... installaddonsfrom
webpage() starts installation of an array of addoninstall notifying the registered
web install listener of blocked or started installs.
... void installaddonsfrom
webpage( in string mimetype, in nsidomwindow source, in nsiuri uri, in addoninstall installs[] ) parameters mimetype the mimetype of add-ons being installed source the nsidomwindow that started the installs uri the nsiuri that started the installs installs the array of addoninstalls to be installed addinstalllistener() adds a new installlistener if the listener is not already registered.
Fonts for Mozilla's MathML engine
note that most of these instructions may as well apply to other
web rendering engines.
...note that using the add-on is not optimal since it forces your gecko browser to load a css stylesheet on each page you visit as well as
web math fonts on all pages with mathml content.
... asana math cambria math dejavu math tex gyre garamond math (under development) latin modern math libertinus math lucida bright math minion math stix math tex gyre bonum math tex gyre pagella math tex gyre schola math tex gyre termes math xits math fira math (sans-serif typeface, under development) gfs neohellenic math (sans-serif typeface) using mathematical fonts on
web pages starting with gecko 31.0 (firefox 31.0 / thunderbird 31.0 / seamonkey 2.28), it is now easy to set up the css style (and optional woff fonts) to use on your
web site.
Fonts for Mozilla 2.0's MathML engine
note that some
web sites may provide the required mathematical fonts as
web fonts.
...thml 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.
... finally, include the mathml-fonts/resource/mathml.css style sheet in your
web pages, for example by adding the following rule to the default style sheet of your
web site: @import url('/path/to/resource/mathml.css'); browsers have default font-families in their user agent stylesheets.
Mobile
mobile
web development mobile devices have very different hardware characteristics from desktop or laptop computers, and many of the apis used to work with them are still in the process of being standardized.
... read about how to develop
web sites that look good on mobile devices and take advantage of the new possibilities they offer.
... learn how to make sure your
web site works well on different browsers.
Power profiling overview
web browsers are popular applications and can be power-intensive, and therefore can significantly affect battery life.
...for example, it can be useful to gradually remove elements from a
web page and see how the power-related measurements change.
... if the problem manifests on a particular
website, try saving a local copy of the site and then manually removing html elements to see if a particular page feature is causing the problem many power problems are caused by either high cpu usage or high wakeup frequency.
browser.download.lastDir.savePerSite
browser.download.lastdir.savepersite controls whether the directory preselected in the file picker for saving a file download is being remembered on a per-
website (host) base.
... type:boolean default value:true exists by default: no application support:firefox 11.0 status: active; last updated 2012-02-15 introduction: pushed to nightly on 2011-12-11 bugs: bug 702748 values true (default) the last used directory for the
website (host) serving the file for download will be preselected in the file picker.
... if no download directory for the current
website has been stored, browser.download.lastdir will be used.
browser.pagethumbnails.capturing_disabled
the preference browser.pagethumbnails.capturing_disabled controls whether the application creates screenshots of visited pages which will be shown if the
web page is shown in the grid of the "new tab page" (about:newtab) which offers the most often visited pages for fast navigation.
... type:boolean default value:true exists by default: no application support: firefox 14.0 status: active; last updated 2012-09-17 introduction: pushed to nightly on 2012-04-13 bugs: bug 726347 values false the application creates screenshots of visited
web pages.
... true (default) the application doesn't create screenshots of visited
web pages.
dom.event.clipboardevents.enabled
dom.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.
... type:boolean default value:true exists by default: no application support: gecko 13.0 (firefox 13.0 / thunderbird 13.0 / seamonkey 2.10) status: active; last updated 2012-02-15 introduction: pushed to nightly on 2012-02-14 bugs: bug 542938 values true (default) the oncopy, oncut and onpaste events are enabled for
web content.
... false the oncopy, oncut and onpaste events are disabled for
web content.
Preference reference
changes require an application restart.browser.download.lastdir.savepersitebrowser.download.lastdir.savepersite controls whether the directory preselected in the file picker for saving a file download is being remembered on a per-
website (host) base.
... if set to true, the data is stored as content preference.browser.pagethumbnails.capturing_disabledthe preference browser.pagethumbnails.capturing_disabled controls whether the application creates screenshots of visited pages which will be shown if the
web page is shown in the grid of the "new tab page" (about:newtab) which offers the most often visited pages for fast navigation.browser.search.context.loadinbackgroundbrowser.search.context.loadinbackground controls whether a search from the context menu with "search <search engine> for <selected text>" opening a new tab will give focus to it and load it in the foreground or keep focus on the current tab and open it in the background.browser.urlbar.formatting.enabledthe preference browser.urlbar.formatting.enabled controls whether the domain n...
...ame 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.
Emscripten
generated from c/c++ using clang, or from another language) and compiles that into javascript, which can be run on the
web.
... emscripten makes native code immediately available on the
web: a platform that is standards-based, has numerous independent compatible implementations, and runs everywhere from pcs to ipads.
...
web developers also benefit, as they can use the many thousands of pre-existing native utilities and libraries in their sites.
L20n
it allows to adapt your
web application not only to languages and cultures, but also contextual data, user gender and screen dimensions.
..."> <about "about {{ brandname }}"> here is the same string being provided in slovenian: <brandname { nominative: "firefox", genitive: "firefoxa", dative: "firefoxu", accusative: "firefox", locative: "firefoxu", instrumental: "firefoxom" }> <about "o {{ brandname.locative }}"> for developers documentation for developers wanting to implement localization functionality on their
web apps using l20n.
... internationalization for your
web app first read for developers looking to use the l20n infrastructure.
An overview of NSS Internals
it's worth mentioning the extended validation (ev) principle, which is an effort by software vendors and cas to define a stricter set of rules for issuing certificates for
web site certificates.
... instead of simply verifying that the requester of a certificate is in control of an administrative email address at the desired
web site's domain, it's required that the ca performs a verification of real world identity documents (such as a company registration document with the country's authority), and it's also required that a browser software performs a revocation check with the ca, prior to granting validity to the certificate.
... that's a good opportunity to talk about ssl/tls connections to servers in general (not just ev, not just
websites).
NSS 3.16.3 release notes
:df:75:38:02:05:00:e1:25:f5:c8:36 cn = quovadis root ca 3 g3 sha1 fingerprint: 48:12:bd:92:3c:a8:c4:39:06:e7:30:6d:27:96:e6:a4:cf:22:2e:7d the trust bits were changed for the following ca certificates ou = class 3 public primary certification authority sha1 fingerprint: a1:db:63:93:91:6f:17:e4:18:55:09:40:04:15:c7:02:40:b0:ae:6b turned off
websites and code signing trust bits (1024-bit root) ou = class 3 public primary certification authority sha1 fingerprint: 74:2c:31:92:e6:07:e4:24:eb:45:49:54:2b:e1:bb:c5:3e:61:74:e2 turned off
websites and code signing trust bits (1024-bit root) ou = class 2 public primary certification authority - g2 sha1 fingerprint: b3:ea:c4:47:76:c9:c8:1c:ea:f2:9d...
... sha1 fingerprint: cb:a1:c5:f8:b0:e3:5e:b8:b9:45:12:d3:f9:34:a2:e9:06:10:d3:36 turned off
websites trust bit (change requested by ca) cn = netlock uzleti (class b) tanusitvanykiado sha1 fingerprint: 87:9f:4b:ee:05:df:98:58:3b:e3:60:d6:33:e7:0d:3f:fe: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.18.1 release notes
notable changes in nss 3.18.1 the following ca certificate had the
websites and code signing trust bits restored to their original state to allow more time to develop a better transition strategy for affected sites.
... the
websites and code signing trust bits were turned off in nss 3.18.
...so, to give
website administrators more time to update their
web servers, we reverted the trust bits back to being enabled.
NSS 3.34 release notes
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:e9:25:c1:d8:89:0a:6f:76:a8:7e:c1:6d:4d:7d:5f:29:ea:74:19:cf:20:12:3b:69 trust flags:
websites, email cn = ssl.com root certification authority ecc sha-256 fingerprint: 34:17:bb:06:cc:60:07:da:1b:96:1c:92:0b:8a:b4:ce:3f:ad:82:0e:4a:a3:0b:9a:cb:c4:a7:4e:bd...
...:ce:bc:65 trust flags:
websites, email cn = ssl.com ev root certification authority rsa r2 sha-256 fingerprint: 2e:7b:f1:6c:c2:24:85:a7:bb:e2:aa:86:96:75:07:61:b0:ae:39:be:3b:2f:e9:d0:cc:6d:4e:f7:34:91:42:5c trust flags:
websites cn = ssl.com ev root certification authority ecc sha-256 fingerprint: 22:a2:c1:f7:bd:ed:70:4c:c1:e7:01:b5:f4:08:c3:10:88:0f:e9:56:b5:de:2a:4a:44:f9:9c:87:3a:25:a7:c8 trust flags:
websites cn = trustcor rootcert ca-1 sha-256 fingerprint: d4:0e:9c:86:cd:8f:e4:68:c1:77:69:59:f4:9e:a7:74:fa:54:86:84:b6:c4:06:f3:90:92:61:f4:dc:e2:57:5c trust flags:
websites, email cn = trustcor rootcert ca-2 sha-256 fingerprint: 07:53:e9:40:37:8c:1b:d5:e3:83:6e:39:5d:ae:a5:cb:83:9e:...
...50:46:f1:bd:0e:ae:19:51:cf:10:fe:c7:c9:65 trust flags:
websites, email cn = trustcor eca-1 sha-256 fingerprint: 5a:88:5d:b1:9c:01:d9:12:c5:75:93:88:93:8c:af:bb:df:03:1a:b2:d4:8e:91:ee:15:58:9b:42:97:1d:03:9c trust flags:
websites, email the following ca certificates were removed: cn = certum ca, o=unizeto sp.
SpiderMonkey compartments
this has some important implications: all objects created by a
website reside in the same compartment and hence are located in the same memory region.
...in the new model most objects touched by a
website are tightly packed next to each other in memory, with no cross-origin objects in between.
...it means that a "google.com" object can never accidentally leak into an untrusted
website such as "evil.com".
JSAPI User Guide
once the functions are defined in global, any script that uses global as the global object can call them, just as any
web page can call alert.
...scripts from
web pages ("content") have very limited access.
... the same origin policy governs a script's access to data and functions from other
web pages.
Shell global objects
wasmissupported() returns a boolean indicating whether
webassembly is supported on the current device.
... wasmbinarytotext(bin) translates binary encoding to text format wasmextractcode(module) extracts generated machine code from
webassembly.module.
...as if it had been transferred to a
webworker.
Split object
the window object is the global object for scripts in
web pages.
... firefox has to maintain this for
web compatibility.
...but each
web page must load with fresh globals.
Security and the jar protocol
this article discusses security concerns with the jar: protocol, which only firefox has ever implemented for
web content.
... note: support for the jar: protocol was disabled by default for use from
web content beginning in firefox 45, but re-enabled again because it broke the experience of ibm inotes users.
...however, if a site allows file uploads, zip files are typically treated as relatively innocuous by
web sites in that situation, since they're not executable.
Browser security
an important aspect of developing code for any browser, including firefox, as well as any
web-oriented project, is its security.
... a
web pki x509 certificate primerx.509 (in this document referred as x509) is an itu standard to describe certificates.
... secure development guidelinesthe following content will likely see significant revision, though can be used as a reference for security best practices to follow when developing code for mozilla.security and the jar protocolthis article discusses security concerns with the jar: protocol, which only firefox has ever implemented for
web content.
DocShell
docshell is the second iteration of what originally started out as
webshell.
... at the moment, the transition from
webshell to docshell is not fully completed, but the long-term goal is to remove
webshell and switch over entirely to docshell.
... ns
webbrowser project page (outlines the design of ns
webbrowser and docshell).
Embedded Dialog API
posing gecko dialogs in embedding applications problem statement an application embedding gecko cannot tightly control its own windows and still allow gecko to be a fully functional
web browser.
...these new windows can be entire new browser windows opened in response to
web page script, or dialogs or alerts which may arise from script or merely during normal operation of the browser.
...the nsi
webbrowserchrome::chrome_openas_chrome flag deserves special mention.
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.
... you can use the nsinavbookmarksservice.changebookmarkuri() method to update the uri for a given bookmark item: var uri = ios.newuri("http://mozilla.com/", null, null); bmsvc.changebookmarkuri(newbkmkid, uri); this example changes the bookmark to refer to the mozilla
web site instead of google.
... var ios = components.classes["@mozilla.org/network/io-service;1"] .getservice(components.interfaces.nsiioservice); var uri = ios.newuri("http://mozilla.com/", null, null); if (!bmsvc.isbookmarked(uri)) { bmsvc.insertbookmark(bmsvc.toolbarfolder, uri, bmsvc.default_index, "mozilla"); } this example looks to see if the user already has a bookmark for the mozilla
web site, and, if not, creates one, adding it to the user's bookmarks toolbar.
Using the Places annotation service
the annotation service, provided by the nsiannotationservice interface, is designed to store arbitrary data about a
web page or about an item in the places database in firefox 3.
... it is usable from trusted firefox code such as extensions, but not from
web pages.
...uri's are easier to use for services that want to annotate a
web page loaded in the browser, while id's are easier to use for services already working with the places database.
nsIAppShellService
boolean createstartupstate(in long awindowwidth, in long awindowheight); obsolete since gecko 1.8 nsixulwindow createtoplevelwindow(in nsixulwindow aparent, in nsiuri aurl, in pruint32 achromemask, in long ainitialwidth, in long ainitialheight, in nsiappshell aappshell); nsi
webnav createwindowlessbrowser (in bool aischrome) void destroyhiddenwindow(); void doprofilestartup(in nsicmdlineservice acmdlineservice, in boolean caninteract); obsolete since gecko 1.8 void ensure1window(in nsicmdlineservice acmdlineservice); obsolete since gecko 1.8 void enterlastwindowclosingsurvivalarea(); obsolete since gecko 1.8 void exitlastwind...
...follow this bug - bugzilla - bug 1280028 nsi
webnav createwindowlessbrowser( in bool aischrome ); var
webnav = services.appshell.createwindowlessbrowser(true); var docshell =
webnav.queryinterface(ci.nsiinterfacerequestor).getinterface(ci.nsidocshell); var systemprincipal = cc["@mozilla.org/systemprincipal;1"].createinstance(ci.nsiprincipal); docshell.createaboutblankcontentviewer(systemprincipal); var contentwindow = docshell.contentview...
...er.domdocument.defaultview; // when you are done with it, destroy it if (
webnav.close) {
webnav.close() }; // only available in firefox 46+, and is needed for good measure
webnav = null; // in firefox <= 45 setting to null will cause it to get gc'ed which will destroy it registertoplevelwindow() add a window to the application's registry of windows.
nsIDragDropHandler
last changed in gecko 1.8 (firefox 1.5 / thunderbird 1.5 / seamonkey 1.0) inherits from: nsisupports method overview void detach(); void hookupto(in nsidomeventtarget attachpoint, in nsi
webnavigation navigator); methods detach() unregisters all handlers related to drag and drop.
...void hookupto( in nsidomeventtarget attachpoint, in nsi
webnavigation navigator ); parameters attachpoint the receiver to which to attach drag handlers.
... navigator the nsi
webnavigation object to handle the dropped urls.
nsIExternalProtocolService
uriloader/exthandler/nsiexternalprotocolservice.idlscriptable the external protocol service is used for finding and launching
web handlers (a la registerprotocolhandler in the html5 draft) or platform-specific applications for handling particular protocols.
...awindowcontext the window to parent the dialog against, and, if a
web handler is chosen, it is loaded in this window as well.
... this parameter may be ultimately passed nsiuriloader.openuri() in the case of a
web handler, and awindowcontext is null or not present,
web handlers will fail.
nsILivemarkService
getsiteuri() this method retrieves the uri of the
website associated with a livemark container.
... return value a nsiuri representing the uri of the
website; if the livemark container doesn't have a valid site uri, null will be returned.
... setsiteuri() this method sets the uri of the
website associated with a livemark container.
Using nsILoginManager
working with the login manager extensions often need to securely store passwords to external sites,
web applications, and so on.
...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="password...
nsIParserUtils
parser/html/nsiparserutils.idlscriptable provides non-
web html parsing functionality to firefox extensions and xulrunner applications.
... note: if -moz-binding is absent, properties that might be xss risks in other
web engines are preserved!
... note: if -moz-binding is not present, <style> elements and style attributes, and if sanitizerallowstyle is specified, the sanitized content may still be xss dangerous if loaded into a non-gecko
web engine!
nsISHistory
inherits from: nsisupports last changed in gecko 2.0 (firefox 4 / thunderbird 3.3 / seamonkey 2.1) in an embedded browser environment, the nsi
webbrowser object creates an instance of session history for each open window.
... a handle to the session history object can be obtained from nsi
webnavigation.
... in a non-embedded situation, the owner of the session history component must create a instance of it and set it in the nsi
webnavigation object.
nsISessionStore
return value a json string representing the current state of all windows in the
web browser.
... getwindowstate() returns the current state of one specified window in the
web browser.
... note on windows the nsisessionstore api stores state information for certain windows inside the
web brower.
nsIXULWindow
n boolean ascreen, in boolean aalert); nsixulwindow createnewwindow(in print32 achromeflags, in nsiappshell aappshell); nsidocshelltreeitem getcontentshellbyid(in wstring id); void removechildwindow(in nsixulwindow achild); void showmodal(); attributes attribute type description chromeflags pruint32 chromeflags are from nsi
webbrowserchrome.
...if arelative is null then relative to the screen of the opener window if it was initialized by passing it to ns
webshellwindow::initialize.
... nsixulwindow createnewwindow( in print32 achromeflags, in nsiappshell aappshell ); parameters achromeflags see nsi
webbrowserchrome.
Setting HTTP request headers
http is one of the core technologies behind the
web.
...einstance: function (outer, iid) { log("----------------------------> createinstance"); return new myhttplistener(); } }, canunload: function(compmgr) { return true; } }; function nsgetmodule(compmgr, filespec) { return mymodule; } privacy and security good practice a use case for setting specific a http request header is to have a specific
web site be able to check if a specific plugin / addon / extension is installed.
... the good practice is not to have this specific http header (for example "x-site.net-extension") sent all the time but only when doing requests with this specific
web sites.
Index
for example, invoking thunderbird's help | what's new menu option opens a tab that displays
web content.
... the thunderbird team can update this content via the
website at any time.
... 25 filelink providers thunderbird filelink is a thunderbird feature that makes it easy for users to upload large attachments to
web-based storage services such as hightail.
Mail composition back end
this can be nsnull if you want to do the delivery operation "blind" send
webpage the send
webpage method is a convenience function that will let the caller send a
web page by specifying a uri.
... ns_imethod send
webpage( nsimsgidentity *auseridentity, - the user identity for the person doing the send operation.
... compose - this program shows the use of the createandsendmessage interface (createandsendmessage) compose2 - this program shows the use of the createandsendmessage interface (sendmessagefile) sendlater - this program shows the use of the nsimsgsendlater interface sendpage - this program shows the use of the createandsendmessage interface (send
webpage) last modified: wed nov 1, 2000 rhp@netscape.com ...
Working with windows in chrome code
for example: // alerts the title of the document displayed in the content-primary widget alert(content.document.title); for example, you can use content.document in a browser.xul overlay to access the
web page in the selected tab in a firefox window.
...this can be done using the following statement: var mainwindow = window.queryinterface(components.interfaces.nsiinterfacerequestor) .getinterface(components.interfaces.nsi
webnavigation) .queryinterface(components.interfaces.nsidocshelltreeitem) .roottreeitem .queryinterface(components.interfaces.nsiinterfacerequestor) .getinterface(components.interfaces.nsidomwindow); this allows you to cross the chrome-content boundaries, and returns the main window object.
... note: if you want to pass data between privileged (chrome) and non-privileged (
web page) windows, or vice-versa, read this instead.
Zombie compartments
website) goes into its own compartment.
...in the results, you'll find a js-main-runtime-compartments tree (whcih you may need to expand further) that lists all system (firefox and add-ons) and user (
website) compartments, these compartments are also listed in more detail in the explicit allocations section.
... so it's common for multiple compartments to be created for a single
web page.
Drawing and Event Handling - Plugins
when it comes to determining the way a plug-in instance appears in a
web page, you (and the
web page author) have many options.
... the content provider who writes the
web page determines its display mode: whether the plug-in is embedded, or displayed in its own separate page.
... a windowed plug-in is drawn into its own native window (or portion of a native window) on a
web page.
Plugin Roadmap for Firefox - Plugins
npapi plugins are an obsolete technology, and mozilla has been moving toward a
web which doesn't need plugins.
... 2019 in september 2019, firefox 69 will remove the "always activate" flash option so we always ask for user permission before activating flash on a
website.
... see also mozilla firefox october 2015 - npapi plugins in firefox july 2016 - reducing adobe flash usage in firefox july 2017 - firefox roadmap for flash end-of-life adobe flash november 2015 - flash, html5 and open
web standards july 2017 - flash & the future of interactive content google chrome flash roadmap sep 2013 - saying goodbye to our old friend npapi may 2014 - update on npapi deprecation november 2014 - the final countdown for npapi august 2016 - flash and chrome december 2016 - roll-out plan for html5 by default july 2017 - saying goodbye to flash in chrome microsoft edge and internet ex...
Application - Firefox Developer Tools
the application panel provides tools for inspecting and debugging modern
web apps (also known as progressive
web apps).
... this includes inspection of service workers and
web app manifests.
... finding an example if you want to test this functionality and you don't have a handy pwa available, you can grab one of our simple examples to use: add to homescreen demo: shows pictures of foxes (source code | live version) js13kpwa demo: show information on entries to the js13k annual competition (source code | live version) how to debug service workers inspect
web app manifests ...
Debugger.Memory - Firefox Developer Tools
web developers need to know their pages’ actual memory consumption on real browsers, so it is correct for the tool to expose these behaviors, as long as it is done in a way that helps developers make decisions about their own code.
... this section covers some areas where firefox’s actual behavior deviates from what one might expect from the specified behavior of the
web platform.
... spidermonkey shares some strings amongst all
web pages and browser js.
Network request details - Firefox Developer Tools
the tabs at the top of this pane enable you to switch between the following pages: headers messages (only for
websocket items) cookies params response cache timings security (only for secure pages) stack trace (only when the request has a stack trace, e.g.
...if the response is html, js, or css, it will be shown as text: if the response is json, it will be shown as an inspectable object: if the response is an image, the tab displays a preview: for network responses that are initiated by a
websocket connection, the details pane shows any associated messages.
... for more information, see inspecting
web sockets.
Examine and edit HTML - Firefox Developer Tools
whitespace-only text nodes
web developers don’t write all their code in just one line of text.
... note: shadow dom inspection was implemented in firefox 61, but was hidden behind the dom.
webcomponents.shadowdom.enabled pref until firefox 63.
... scroll into view scrolls the
web page so the selected node is visible.
Animating CSS properties - Firefox Developer Tools
transform opacity the css triggers
website shows how much of the waterfall is triggered for each css property, with information for most css properties by browser engine.
... if you want to play along, the demo
website is here.
... animating using transform now switch the radio button in the
web page to "use transform", and make a new recording.
Tips - Firefox Developer Tools
via
web console command: screenshot <filename.png> --fullpage.
...
web console in all panels: esc opens the split console; useful when debugging, or inspecting nodes in the command line: $0 references the currently selected node.
...see
web console helpers for all parameters.
Toolbox - Firefox Developer Tools
there are a few different ways to open the toolbox: select "toggle tools" from the
web developer menu (under "tools" on os x and linux, or "firefox" on windows) click the wrench icon (), which is in the main toolbar or under the hamburger menu (), then select "toggle tools" activate any tool hosted in the toolbox (for example, the javascript debugger or the page inspector) press ctrl + shift + i on windows and linux, or cmd + opt + i on os x.
...the array may include the following tools:
web console javascript debugger page inspector style editor profiler network monitor note that not all the hosted tools are always listed here: only the tools actually available in this context are shown (for example, not all tools support remote debugging yet, so if the debugging target is not the firefox instance that launched the window, not all the hosted tools will be shown).
... the following tools are not included in the toolbar by default, but you can add them in the settings: highlight painted area 3d view (note that this is not available in firefox 40) scratchpad grab a color from the page take a screenshot of the entire page: take a screenshot of the complete
web page and saves it in your downloads directory toggle rulers for the page measure a portion of the page: measure a part of the
website by selecting areas within the page toolbox controls finally there's a row of buttons to: close the window toggle the window between attached to the bottom of the browser window, and attached to the side of the browser window toggle the window between stan...
about:debugging (before Firefox 68) - Firefox Developer Tools
in the tools >
web developer menu, click "service workers".
... select the
web developer menu under the hamburger menu (), then select "service workers".
... add-ons the add-ons section in about:debugging only supports restartless add-ons, including basic bootstrapped extensions, add-on sdk add-ons, and
webextensions.
Using the article role - Accessibility
examples of an article include
web log posts, newspaper or magazine articles and use-submitted comments.
... articles can be nested; for example, a
web log entry on a site that accepts user-submitted comments could represent the comments as articles nested within the article for the
web log entry.
... possible effects on user agents and assistive technology when the user navigates an element assigned the role of article, assistive technologies that typically intercept standard keyboard events should switch to document browsing mode, as opposed to passing keyboard events through to the
web application.
ARIA Test Cases - Accessibility
if it does not indicate separators by default in the operating system, it should honor this for
web applications, too.
.../a pass pass zoomtext - - - - orca - - - - other test cases application simple application with inner document with grid and menubar expected at behavior: if at supports virtual buffers (probably all windows screen readers), this should be automatically turned off and the user should interact via the keyboard commands built into the
web app.
...the run dialog), suggestions should be supported inside the
web app as well.
ARIA: timer role - Accessibility
description the timer role indicates to assistive technologies that this part of the
web content is a live region containing a timer listing the time remaining or elapsed time.
...all aspects of interaction, including returning to the regular
web content on other parts of the page, must be handled.
... 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: contentinfo role - Accessibility
the contentinfo landmark role is used to identify information repeated at the end of every page of a
website, including copyright information, navigation links, and privacy statements.
... <div role="contentinfo"> <h2>footer</h2> <!-- footer content --> </div> this is a
website footer.
... examples <body> <!-- other page content --> <div role="contentinfo"> <h2>mdn
web docs</h2> <ul> <li><a href="#">
web technologies</a></li> <li><a href="#">learn
web development</a></li> <li><a href="#">about mdn</a></li> <li><a href="#">feedback</a></li> </ul> <p>© 2005-2018 mozilla and individual contributors.
Accessibility: What users can do to browse more safely - Accessibility
this article discusses making
web content accessible for those with vestibular disorders, and those who support them, by taking advantage of personalization and accessibility settings built into the operating systems.
...to reverse it, you will have to change the value back to "normal" use browser extensions gif blocker for chrome, gif blocker is an extension available at the
web store.
...grayscale is enabled when the color filters button is toggled "on" see also accessibilty accessibility learning path
web accessibility for seizures and physical reactions color blindness discussion: "what is the “grayscale” setting for in accessibility options?" contributors many, many thanks to eric eggert from knowbility; for his discussions and huge help on this topic.
Keyboard-navigable JavaScript widgets - Accessibility
overview
web applications often use javascript to mimic desktop widgets such as menus, tree views, rich text fields, and tab panels.
... using tabindex by default, when people use the tab key to browse a
webpage, only interactive elements (like links, form controls) get focused.
...(for more information about aria, see this overview of accessible
web applications and widgets.) the aria-activedescendant property identifies the id of the descendent element that currently has the virtual focus.
Color contrast - Accessibility
it is good to have a cool design on your
website, but the design is worthless if your users can't read your content.
... background, which makes the text much harder to read: example2 <div class="bad"> bad contrast </div> div { font-family: sans-serif; text-align: center; font-size: 2rem; font-weight: bold; width: 250px; padding: 30px; border-radius: 20px; box-shadow: 1px 1px 1px black; } .bad { background-color: #400064; } solution when choosing a color scheme for your
website, choose foreground and background colors that have good contrast.
... to check your contrast as you make your color choices, use a tool such as
webaim's color contrast checker.
Perceivable - Accessibility
this article provides practical advice on how to write your
web content so that it conforms to the success criteria outlined in the perceivable principle of the
web content accessibility guidelines (wcag) 2.0 and 2.1.
... 1.2.2 provide captions for
web-based video (a) you should provide captions for video presented on the
web (e.g., html5 video).
... 1.2.3 provide text transcript or audio description for
web-based video (a) you should provide text transcripts or audio descriptions for video presented on the
web (e.g., html5 video.
Text labels and names - Accessibility
there are many situations in which a control, dialog, or other
website feature should be given a descriptive name or label to allow users of assistive technologies to understand what its purpose is and to be able to understand and operate it correctly.
... 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.
... <option>tyrannosaurus</option> <option>velociraptor</option> <option>deinonychus</option> </optgroup> <optgroup label="sauropods"> <option>diplodocus</option> <option>saltasaurus</option> <option>apatosaurus</option> </optgroup> </select> toolbars must be labeled when there is more than one toolbar if you define more than one toolbar in a
web application using the aria toolbar role, you must use the aria-label attribute to label each one so that it can be described by assistive technology.
::cue - CSS: Cascading Style Sheets
the ::cue css pseudo-element matches
webvtt cues within a selected element.
...d-repeat background-size color font font-family font-size font-stretch font-style font-variant font-weight line-height opacity outline outline-color outline-style outline-width ruby-position text-combine-upright text-decoration text-decoration-color text-decoration-line text-decoration-style text-decoration-thickness text-shadow visibility white-space examples styling
webvtt cues as white-on-black the following css sets the cue style so that the text is white and the background is a translucent black box.
... ::cue { color: #fff; background-color: rgba(0, 0, 0, 0.6); } specifications specification status comment
webvtt: the
web video text tracks formatthe definition of '::cue' in that specification.
::slotted() - CSS: Cascading Style Sheets
desktopmobilechromeedgefirefoxinternet exploreroperasafariandroid
webviewchrome for androidfirefox for androidopera for androidsafari on iossamsung internet::slottedchrome full support 50edge full support 79firefox full support 63 full support 63 no support 59 �...
...� 63disabled disabled from version 59 until version 63 (exclusive): this feature is behind the dom.
webcomponents.shadowdom.enabled preference (needs to be set to true).
... to change preferences in firefox, visit about:config.ie no support noopera full support 37safari full support 10
webview android full support 50chrome android full support 50firefox android full support 63 full support 63 no support 59 — 63disabled disabled from version 59 until version 63 (exclusive): this feature is behind the dom.
webcomponents.shadowdom.enabled preference (needs to be set to true).
:host - CSS: Cascading Style Sheets
desktopmobilechromeedgefirefoxinternet exploreroperasafariandroid
webviewchrome for androidfirefox for androidopera for androidsafari on iossamsung internet:hostchrome full support 54edge full support 79firefox full support 63 full support 63 no support 61 — 63...
...disabled disabled from version 61 until version 63 (exclusive): this feature is behind the dom.
webcomponents.shadowdom.enabled preference (needs to be set to true).
... to change preferences in firefox, visit about:config.ie no support noopera full support 41safari full support 10
webview android full support 54chrome android full support 54firefox android full support 63 full support 63 no support 61 — 63disabled disabled from version 61 until version 63 (exclusive): this feature is behind the dom.
webcomponents.shadowdom.enabled preference (needs to be set to true).
:scope - CSS: Cascading Style Sheets
desktopmobilechromeedgefirefoxinternet exploreroperasafariandroid
webviewchrome for androidfirefox for androidopera for androidsafari on iossamsung internet:scopechrome full support 27edge full support 79firefox full support 32notes full support 32notes notes firefox 55 removes support f...
...to change preferences in firefox, visit about:config.ie no support noopera full support 15safari full support 7
webview android full support ≤37chrome android full support 27firefox android full support 32notes full support 32notes notes firefox 55 removes support for <style scoped> but not for the :scope pseudo-class, which is st...
...orall()chrome full support 27edge full support 79firefox full support 32ie no support noopera full support 15safari full support 7
webview android full support ≤37chrome android full support 27firefox android full support 32opera android full support 15safari ios full support 7samsung internet android ...
@charset - CSS: Cascading Style Sheets
it must be the name of a
web-safe character encoding defined in the iana-registry, and must be double-quoted, following exactly one space character (u+0020), and immediately terminated with a semicolon.
... desktopmobilechromeedgefirefoxinternet exploreroperasafariandroid
webviewchrome for androidfirefox for androidopera for androidsafari on iossamsung internet@charsetchrome full support 2edge full support 12firefox full support 1.5notes full support 1.5notes notes firefox 1 supported an in...
... 5.5notes full support 5.5notes notes from internet explorer 5.5 to ie 7 (inclusive), internet explorer supported an invalid syntax where the character encoding is not between single or double quotes.opera full support 9safari full support 4
webview android full support 2chrome android full support 18firefox android full support 4opera android full support 10.1safari ios full support 4samsung internet android ...
display-mode - CSS: Cascading Style Sheets
this feature corresponds to the
web app manifest's display member.
...the feature query applies regardless of whether a
web app manifest is present.
... (none) examples @media all and (display-mode: fullscreen) { body { margin: 0; border: 5px solid black; } } specifications specification status comment
web app manifestthe definition of 'display-mode' in that specification.
Coordinate systems - CSS: Cascading Style Sheets
dimensions in the coordinate systems used by
web technologies, convention dictates that the horizontal offset is called the x-coordinate, where a negative value indicates a position to the left of the origin and a positive value is to the right of the origin.
... on the
web, the default origin is the top-left corner of a given context (with positive y-coordinate values being below the origin).
... .outer { width: 1000px; height: 200px; background-color: red; } .inner { position: relative; width: 500px; height: 150px; top: 25px; left: 100px; background-color: blue; color: white; cursor: crosshair; user-select: none; -moz-user-select: none; -ms-user-select: none; -
webkit-user-select: none; } .log { position: relative; width: 100%; text-align: center; } result here you can see the results in action.
Handling Overflow in Multicol - CSS: Cascading Style Sheets
more columns than will fit how overflowing columns are handled depends on whether you are in a fragmented media context, such as print, or a continuous media context, such as a
web page.
...on the
web this means that you will get a horizontal scrollbar.
... using vertical media queries one issue with multicol on the
web is that, if your columns are taller than the viewport, the reader will need to scroll up and down to read, which is not good user experience.
CSS Containment - CSS: Cascading Style Sheets
the aim of the css containment specification is to improve performance of
web pages by allowing developers to isolate a subtree of the page from the rest of the page.
... basic example many
webpages contain a number of sections which are independent of each other.
... this information is something that is usually known, and in fact quite obvious, to the
web developer creating the page.
Variable fonts guide - CSS: Cascading Style Sheets
if your operating system is not up to date, you will not be able to use variable fonts in
web pages or the firefox developer tools.
...for comparison, it is typical in a typographic system for a magazine to use 10–15 or more different weight and width combinations throughout the publication — giving a much wider range of styles than currently typical on the
web (or indeed practical for performance reasons alone).
... using a variable font: @font-face changes the syntax for loading variable fonts is very similar to any other
web font, with a few notable differences, which are provided via upgrades to the traditional @font-face syntax now available in modern browsers.
CSS Grid Layout and Accessibility - CSS: Cascading Style Sheets
those of us who have been doing
web development for more years than we care to remember might consider that css grid is a little bit like using “tables for layout”.
... back in the early days of
web design, the way we constructed page layout was to use html tables, then fragment our design into the cells of those tables in order to create a layout.
... the specification warns authors (the csswg term for
web developers) not to do this reordering.
aspect-ratio - CSS: Cascading Style Sheets
desktopmobilechromeedgefirefoxinternet exploreroperasafariandroid
webviewchrome for androidfirefox for androidopera for androidsafari on iossamsung internetaspect-ratio experimentalchrome partial support 79notes partial support 79notes notes chrome 79 adds internal support only for mapped valuesedge partial support 79notes partial support 79notes notes edge 79 ...
...to change preferences in firefox, visit about:config.ie no support noopera no support nosafari no support no
webview android partial support 79notes partial support 79notes notes
webview 79 adds internal support only for mapped valueschrome android partial support 79notes partial support 79notes notes chrome 79 adds internal support only for mapped valuesfirefox android no support ...
...to change preferences in firefox, visit about:config.ie no support noopera no support nosafari no support no
webview android full support 79chrome android full support 79firefox android no support noopera android no support nosafari ios no support nosamsung internet android ...
background-position-x - CSS: Cascading Style Sheets
desktopmobilechromeedgefirefoxinternet exploreroperasafariandroid
webviewchrome for androidfirefox for androidopera for androidsafari on iossamsung internetbackground-position-xchrome full support 1edge full support 12firefox full support 49ie full support 6opera full supp...
...ort 15safari full support 1
webview android full support ≤37chrome android full support 18firefox android full support 49opera android full support 18safari ios full support 1samsung internet android full support 1.0two-value syntax (support for offsets from any edge)chrome no support noedge no support 12 — 79firefox full support 49ie ...
... full support 9opera no support nosafari no support no
webview android no support nochrome android no support nofirefox android full support 49opera android no support nosafari ios no support nosamsung internet android no support nolegend full support full support no support ...
background-position-y - CSS: Cascading Style Sheets
desktopmobilechromeedgefirefoxinternet exploreroperasafariandroid
webviewchrome for androidfirefox for androidopera for androidsafari on iossamsung internetbackground-position-ychrome full support 1edge full support 12firefox full support 49ie full support 6opera full supp...
...ort 15safari full support 1
webview android full support ≤37chrome android full support 18firefox android full support 49opera android full support 14safari ios full support 1samsung internet android full support 1.0two-value syntax (support for offsets from any edge)chrome no support noedge no support 12 — 79firefox full support 49ie ...
... full support 9opera no support nosafari no support no
webview android no support nochrome android no support nofirefox android full support 49opera android no support nosafari ios no support nosamsung internet android no support nolegend full support full support no support ...
box-pack - CSS: Cascading Style Sheets
the -moz-box-pack and -
webkit-box-pack css properties specify how a -moz-box or -
webkit-box packs its contents in the direction of its layout.
... formal definition initial valuestartapplies toelements with a css display value of -moz-box, -moz-inline-box, -
webkit-box or -
webkit-inline-boxinheritednocomputed valueas specifiedanimation typediscrete formal syntax start | center | end | justify examples div.example { border-style: solid; display: -moz-box; /* mozilla */ display: -
webkit-box; /*
webkit */ /* make this box taller than the children, so there is room for the box-pack */ height: 300px; /* make this box wide enough to show...
... the contents are centered horizontally */ width: 300px; /* children should be oriented vertically */ -moz-box-orient: vertical; /* mozilla */ -
webkit-box-orient: vertical; /*
webkit */ /* align children to the horizontal center of this box */ -moz-box-align: center; /* mozilla */ -
webkit-box-align: center; /*
webkit */ /* pack children to the bottom of this box */ -moz-box-pack: end; /* mozilla */ -
webkit-box-pack: end; /*
webkit */ } div.example p { /* make children narrower than their parent, so there is room for the box-align */ width: 200px; } <div class="example"> <p>i will be second from the bottom of div.example, centered horizontally.</p> <p>i will be on the bottom of div.example, centered horizontally.</p> </div> s...
clear - CSS: Cascading Style Sheets
desktopmobilechromeedgefirefoxinternet exploreroperasafariandroid
webviewchrome for androidfirefox for androidopera for androidsafari on iossamsung internetclearchrome full support 1edge full support 12firefox full support 1ie full support 4opera full support ...
... 3.5safari full support 1
webview android full support 1chrome android full support 18firefox android full support 4opera android full support 10.1safari ios full support 1samsung internet android full support 1.0flow-relative values inline-start and inline-endchrome no support noedge no support nofirefox full support 55ie ...
... no support noopera no support nosafari no support no
webview android no support nochrome android no support nofirefox android full support 55opera android no support nosafari ios no support nosamsung internet android no support nolegend full support full support no support n...
content - CSS: Cascading Style Sheets
<image> an <image>, denoted by the <url> or <gradient> data type, or part of the
webpage, defined by the element() function, denoting the content to display.
... 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.
font-size - CSS: Cascading Style Sheets
choose the appropriate method based on the needs for the particular
web page.
... keywords keywords are a good way to set the size of fonts on the
web.
...for example, users with limited vision may wish to set the font size much larger than the size chosen by a
web designer.
letter-spacing - CSS: Cascading Style Sheets
desktopmobilechromeedgefirefoxinternet exploreroperasafariandroid
webviewchrome for androidfirefox for androidopera for androidsafari on iossamsung internetletter-spacingchrome full support 1edge full support 12firefox full support 1ie full support 4opera full support ...
... 3.5safari full support 1
webview android full support ≤37chrome android full support 18firefox android full support 4opera android full support 10.1safari ios full support 1samsung internet android full support 1.0svg supportchrome full support 1edge full support 12firefox full support 72ie full support ...
... 9opera full support 7safari full support 5.1
webview android full support ≤37chrome android full support 18firefox android no support noopera android full support 10.1safari ios full support 5.1samsung internet android full support 1.0legend full support full support no support no...
mix-blend-mode - CSS: Cascading Style Sheets
desktopmobilechromeedgefirefoxinternet exploreroperasafariandroid
webviewchrome for androidfirefox for androidopera for androidsafari on iossamsung internetmix-blend-modechrome full support 41edge full support 79firefox full support 32ie no support noopera full support ...
... 28safari full support 8
webview android full support 41chrome android full support 41firefox android full support 32opera android full support 28safari ios full support 8samsung internet android full support 4.0on svg elementschrome full support 41edge full support 79firefox full support 32ie no support ...
... noopera full support 28safari no support no
webview android no support nochrome android no support nofirefox android full support 32opera android no support nosafari ios no support nosamsung internet android no support nolegend full support full support no support no support see als...
object-position - CSS: Cascading Style Sheets
desktopmobilechromeedgefirefoxinternet exploreroperasafariandroid
webviewchrome for androidfirefox for androidopera for androidsafari on iossamsung internetobject-positionchrome full support 31edge full support 16firefox full support 36ie no support noopera full support ...
... 19 full support 19 full support 11.6prefixed prefixed implemented with the vendor prefix: -o-safari full support 10
webview android full support 4.4.3chrome android full support 31firefox android full support 36opera android full support 19 full support 19 full support 12prefixed prefixed implemented with the vendor prefix: -o-safari ios full support ...
...irefox no support 36 — 70ie no support noopera no support 19 — 55 no support 19 — 55 full support 11.6prefixed prefixed implemented with the vendor prefix: -o-safari full support 10
webview android no support 4.4.3 — 68chrome android no support 31 — 68firefox android full support 36opera android no support 19 — 48 no support 19 — 48 full support 12prefixed prefixed implemented wit...
pointer-events - CSS: Cascading Style Sheets
desktopmobilechromeedgefirefoxinternet exploreroperasafariandroid
webviewchrome for androidfirefox for androidopera for androidsafari on iossamsung internetpointer-eventschrome full support 1edge full support 12firefox full support 1.5ie full support 11opera full support ...
... 9safari full support 4
webview android full support 2chrome android full support 18firefox android full support 4opera android full support 14safari ios full support 3.2samsung internet android full support 1.0applies to html elements experimentalchrome full support 2edge full support 12firefox full support 3.6ie ...
... full support 11opera full support 15safari full support 4
webview android full support 37chrome android full support 18firefox android full support 4opera android full support 14safari ios full support 3.2samsung internet android full support 1.0legend full support full supportexperimental.
quotes - CSS: Cascading Style Sheets
desktopmobilechromeedgefirefoxinternet exploreroperasafariandroid
webviewchrome for androidfirefox for androidopera for androidsafari on iossamsung internetquoteschrome full support 11edge full support 12firefox full support 1.5ie full support 8opera full support ...
... 4safari full support 9
webview android full support 37chrome android full support 18firefox android full support 4opera android full support 14safari ios full support 9samsung internet android full support 1.0auto keywordchrome no support nonotes no support nonotes notes this value is not supported, but the default browser behavior is to choose appropriate quotes for the user...
...s notes this value is not supported, but the default browser behavior is to choose appropriate quotes for the user's language settingsafari no support nonotes no support nonotes notes this value is not supported, but the default browser behavior is to choose appropriate quotes for the user's language setting
webview android no support nonotes no support nonotes notes this value is not supported, but the default browser behavior is to choose appropriate quotes for the user's language settingchrome android no support nonotes no support ...
text-size-adjust - CSS: Cascading Style Sheets
/* keyword values */ text-size-adjust: none; text-size-adjust: auto; /* <percentage> value */ text-size-adjust: 80%; /* global values */ text-size-adjust: inherit; text-size-adjust: initial; text-size-adjust: unset; because many
websites have not been developed with small devices in mind, mobile browsers differ from desktop browsers in the way they render
web pages.
...the text-size-adjust property allows
web authors to disable or modify this behavior, as
web pages designed with small screens in mind do not need it.
...s toall elementsinheritedyespercentagesyes, refer to the corresponding size of the text fontcomputed valueas specifiedanimation typediscrete formal syntax none | auto | <percentage> examples basic disabling usage as hinted at above, on a properly designed responsive site the text-size-adjust behavior is not needed, so developers can elect to turn it off by specifying a vlaue of none: p { -
webkit-text-size-adjust: none; text-size-adjust: none; } specifications specification status comment css mobile text size adjustment module level 1the definition of 'text-size-adjust' in that specification.
Video player styling basics - Developer guides
simple :hover and :focus states are then set for each button that simply alters the opacity of the button: .controls button:hover, .controls button:focus { opacity:0.5; } to obtain appropriate button images, a set of free common control set icons was downloaded from the
web.
... progress bar the <progress> element has the following basic style set up: .controls progress { display:block; width:100%; height:81%; margin-top:0.125rem; border:none; color:#0095dd; -moz-border-radius:2px; -
webkit-border-radius:2px; border-radius:2px; } like the <button> elements, <progress> also has a default border, which is removed here.
... there are some browser-specific properties that need to be set to ensure that firefox and chrome use the required colour for the progress bar: .controls progress::-moz-progress-bar { background-color:#0095dd; } .controls progress::-
webkit-progress-value { background-color:#0095dd; } although the same properties are set to the same value, these rules need to be defined separately, otherwise chrome ignores it.
Mutation events - Developer guides
mutation events provide a mechanism for a
web page or an extension to get notified about changes made to the dom.
... preface the mutation events have been marked as deprecated in the dom events specification, as the api's design is flawed (see details in the "dom mutation events replacement: the story so far / existing points of consensus" post to public-
webapps).
... cross-browser support these events are not implemented consistently across different browsers, for example: ie prior to version 9 didn't support the mutation events at all and does not implement some of them correctly in version 9 (for example, domnodeinserted)
webkit doesn't support domattrmodified (see
webkit bug 8191 and the workaround) "mutation name events", i.e.
Constraint validation - Developer guides
the creation of
web forms has always been a complex task.
...even though far fewer invalid form requests are to be expected, invalid ones can still be sent by non-compliant browsers (for instance, browsers without html5 and without javascript) or by bad people trying to trick your
web application.
... visual styling of constraint validation apart from setting constraints,
web developers want to control what messages are displayed to the users and how they are styled.
<dl>: The Description List element - HTML: Hypertext Markup Language
examples single term and description <dl> <dt>firefox</dt> <dd> a free, open source, cross-platform, graphical
web browser developed by the mozilla corporation and hundreds of volunteers.
... </dd> <!-- other terms and descriptions --> </dl> multiple terms, single description <dl> <dt>firefox</dt> <dt>mozilla firefox</dt> <dt>fx</dt> <dd> a free, open source, cross-platform, graphical
web browser developed by the mozilla corporation and hundreds of volunteers.
... </dd> <!-- other terms and descriptions --> </dl> single term, multiple descriptions <dl> <dt>firefox</dt> <dd> a free, open source, cross-platform, graphical
web browser developed by the mozilla corporation and hundreds of volunteers.
<input type="search"> - HTML: Hypertext Markup Language
webkit and blink only (safari, chrome, opera, etc.).
... incremental the boolean attribute incremental is a
webkit and blink extension (so supported by safari, opera, chrome, etc.) which, if present, tells the user agent to process the input as a live search.
...arch</button> <span class="validity"></span> </div> </form> input { margin-right: 10px; } input:invalid ~ span:after { content: '✖'; padding-left: 5px; position: absolute; } input:valid ~ span:after { content: '✓'; padding-left: 5px; position: absolute; } this renders like so: examples you can see a good example of a search form used in context at our
website-aria-roles example (see it live).
<input type="url"> - HTML: Hypertext Markup Language
this can help avoid cases in which the user mis-types their
web site's address, or provides an invalid one.
... <input id="myurl" name="myurl" type="url" list="defaulturls"> <datalist id="defaulturls"> <option value="https://developer.mozilla.org/" label="mdn
web docs"> <option value="http://www.google.com/" label="google"> <option value="http://www.microsoft.com/" label="microsoft"> <option value="https://www.mozilla.org/" label="mozilla"> <option value="http://w3.org/" label="w3c"> </datalist> validation there are two levels of content validation available for url inputs.
...{ margin-bottom: 10px; position: relative; } input[type="number"] { width: 100px; } input + span { padding-right: 30px; } input:invalid+span:after { position: absolute; content: '✖'; padding-left: 5px; } input:valid+span:after { position: absolute; content: '✓'; padding-left: 5px; } <form> <div> <label for="myurl">enter the problem
website address:</label> <input id="myurl" name="myurl" type="url" required pattern=".*\.myco\..*" title="the url must be in a myco domain"> <span class="validity"></span> </div> <div> <label for="mycomment">what is the problem?</label> <input id="mycomment" name="mycomment" type="text" required> <span class="validity"></span> </div> <div> ...
<nextid>: The NeXT ID element (Obsolete) - HTML: Hypertext Markup Language
<nextid> is an obsolete html element that served to enable the next
web designing tool to generate automatic name labels for its anchors.
... it was generated by that
web editing tool automatically and was not to be adjusted or entered by hand.
...imagine the
web author opens the document for further editing.
<table>: The Table element - HTML: Hypertext Markup Language
mdn adding a caption to your table with <caption> caption & summary • tables • w3c wai
web accessibility tutorials scoping rows and columns the scope attribute on header elements is redundant in simple contexts, because scope is inferred.
... mdn tables for visually impaired users tables with two headers • tables • w3c wai
web accessibility tutorials tables with irregular headers • tables • w3c wai
web accessibility tutorials h63: using the scope attribute to associate header cells and data cells in data tables | w3c techniques for wcag 2.0 complicated tables assistive technology such as screen readers may have difficulty parsing tables that are so complex that header cells can’t be associated in a strictly ...
... mdn tables for visually impaired users tables with multi-level headers • tables • w3c wai
web accessibility tutorials h43: using id and headers attributes to associate data cells with header cells in data tables | techniques for w3c wcag 2.0 specifications specification status comment html living standardthe definition of 'table element' in that specification.
Common MIME types - HTTP
this table lists some important mime types for the
web: extension kind of document mime type .aac aac audio audio/aac .abw abiword document application/x-abiword .arc archive document (multiple files embedded) application/x-freearc .avi avi: audio video interleave video/x-msvideo .azw amazon kindle ebook format application/vnd.amazon.ebook .bin ...
.../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 vector graphics (svg) image/svg+xml .swf small
web format (swf) or adobe flash document application/x-shockwave-flash .tar tape archive (tar) application/x-tar .tif .tiff tagged image file format (tiff) image/tiff .ts mpeg transport stream video/mp2t .ttf truetype font font/ttf .txt text, (generally ascii or iso 8859-n) text/plain .vsd microsoft visio ...
... application/vnd.visio .wav waveform audio format audio/wav .
weba
webm audio audio/
webm .
webm
webm video video/
webm .
webp
webp image image/
webp .woff
web open font format (woff) font/woff .woff2
web open font format (woff) font/woff2 .xhtml xhtml application/xhtml+xml .xls microsoft excel application/vnd.ms-excel .xlsx microsoft excel (openxml) application/vnd.openxmlformats-officedocument.spreadsheetml.sheet .xml xml application/xml if not readable from casual users (rfc 3023, section 3) text/xml if readable from casual users (rfc 3023, section 3) .xul xul application/vnd.mozilla.xul+xml .zip zip archive applic...
Content negotiation - HTTP
compressing http messages is one of the most important ways to improve the performance of a
web site, it shrinks the size of the data transmitted and makes better use of the available bandwidth; browsers always send this header and the server should be configured to abide to it and to use compression.
... due to the configuration-based entropy increase, a modified value can be used to fingerprint the user, it is not recommended to change it and a
web site cannot trust this value to reflect the actual wish of the user.
... the vary response header in opposition to the previous accept-* headers which are sent by the client, the vary http header is sent by the
web server in its response.
CSP: connect-src - HTTP
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.
... examples violation cases given this csp header: content-security-policy: connect-src https://example.com/ the following connections are blocked and won't load: <a ping="https://not-example.com"> <script> var xhr = new xmlhttprequest(); xhr.open('get', 'https://not-example.com/'); xhr.send(); var ws = new
websocket("https://not-example.com/"); var es = new eventsource("https://not-example.com/"); navigator.sendbeacon("https://not-example.com/", { ...
Large-Allocation - HTTP
webassembly or asm.js applications can use large contiguous blocks of allocated memory.
...the large-allocation tells the browser that the
web content in the to-be-loaded page is going to want to perform a large contiguous memory allocation and the browser can react to this header by starting a dedicated process for the to-be-loaded document, for example.
...you'll encounter them in the
web console.
Referer - HTTP
the referer request header contains the address of the previous
web page from which a link to the currently requested page was followed.
... header type request header forbidden header name yes syntax referer: <url> directives <url> an absolute or partial address of the previous
web page from which a link to the currently requested page was followed.
... 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 ...
Concurrency model and the event loop - JavaScript
a downside of this model is that if a message takes too long to complete, the
web application is unable to process user interactions like click or scroll.
... adding messages in
web browsers, messages are added anytime an event occurs and there is an event listener attached to it.
...of 0 console.log('this is just a message'); settimeout(function cb1() { console.log('callback 2: this is a msg from call back'); }, 0); console.log('this is the end'); })(); // "this is the start" // "this is just a message" // "this is the end" // "callback 1: this is a msg from call back" // "callback 2: this is a msg from call back" several runtimes communicating together a
web worker or a cross-origin iframe has its own stack, heap, and message queue.
SharedArrayBuffer - JavaScript
description allocating and sharing memory to share memory using sharedarraybuffer objects from one agent in the cluster to another (an agent is either the
web page’s main program or one of its
web workers), postmessage and structured cloning is used.
... apis which use sharedarraybuffer objects
webglrenderingcontext.bufferdata()
webglrenderingcontext.buffersubdata()
webgl2renderingcontext.getbuffersubdata() security requirements shared memory and high-resolution timers were effectively disabled at the start of 2018 in light of spectre.
... examples creating a new sharedarraybuffer var sab = new sharedarraybuffer(1024); slicing the sharedarraybuffer sab.slice(); // sharedarraybuffer { bytelength: 1024 } sab.slice(2); // sharedarraybuffer { bytelength: 1022 } sab.slice(-2); // sharedarraybuffer { bytelength: 2 } sab.slice(0, 1); // sharedarraybuffer { bytelength: 1 } using it in a
webgl buffer const canvas = document.queryselector('canvas'); const gl = canvas.getcontext('
webgl'); const buffer = gl.createbuffer(); gl.bindbuffer(gl.array_buffer, buffer); gl.bufferdata(gl.array_buffer, sab, gl.static_draw); specifications specification ecmascript (ecma-262)the definition of 'sharedarraybuffer' in that specification.
MathML documentation index - MathML
found 40 pages: # page tags and summary 1 mathml landing, mathml, reference,
web, xml mathematical markup language (mathml) is a dialect of xml for describing mathematical notation and capturing both its structure and content.
...html becomes verbose when your document contains advanced structures like lists or tables but fortunately there are many generators from simple notations, wysiwyg editors and other content management systems to help writing
web pages.
... 3 examples beginner, example, guide, mathml, needsbeginnerupdate below you'll find some examples you can look at to help you to understand how to use mathml to display increasingly complex mathematical concepts in
web content.
Index - XSLT: Extensible Stylesheet Language Transformations
xslt/xpath reference: xslt elements, exslt functions, xpath functions, xpath axes found 54 pages: # page tags and summary 1 xslt: extensible stylesheet language transformations landing,
web, xslt extensible stylesheet language transformations (xslt) is an xml-based language used, in conjunction with specialized processing software, for the transformation of xml documents.
... 8 interface list needscontent, reference see xsltprocessor in the
web api documentation section.
...javascript can enable a
web application to load xml data, process it via xslt into a presentable form and then add it into an existing document.
For Further Reading - XSLT: Extensible Stylesheet Language Transformations
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 consort...
...ium is the body that publishes recommendations for a number of
web-based technologies, many of which become the de-facto standard.
...day location: http://www-106.ibm.com/developerwork...-hands-on-xsl/ understanding xslt author: jay greenspan location: http://hotwired.lycos.com/
webmonkey/...l?tw=authoring what is xslt?
simple-storage - Archive of obsolete content
this module works similarly to dom storage on the
web, except that it's only available for add-ons.
...for example: ss.storage.mylist = [ /* some long array */ ]; ss.on("overquota", function () { while (ss.quotausage > 1) ss.storage.mylist.pop(); }); private browsing if your storage is related to your users'
web history, personal information, or other sensitive data, your add-on should respect private browsing.
content/loader - Archive of obsolete content
provides one of the building blocks for those modules that use content scripts to interact with
web content, such as panel and page-mod.
... example: the following code creates a wrapper on a hidden frame that reloads a
web page in the frame every time the contenturl property is changed: var hiddenframes = require("sdk/frame/hidden-frame"); var { loader } = require("sdk/content/content"); var pageloader = loader.compose({ constructor: function pageloader(options) { options = options || {}; if (options.contenturl) this.contenturl = options.contenturl; this.on('propertychange', this._onchange = th...
dev/panel - Archive of obsolete content
individual built-in tools, such as the javascript debugger or the
web console, occupy "panels" in the toolbox.
...{ // in this function you can communicate // with the panel document } }); // export the constructor exports.mypanel = mypanel; // create a new tool, initialized // with the new constructor const mytool = new tool({ panels: { mypanel: mypanel } }); panel document environment the panel document loaded from the url property can of course include css and javascript just like a normal
web page: <html> <head> <meta charset="utf-8"> <link href="./my-panel.css"rel="stylesheet"></link> <script src="resource://sdk/dev/volcan.js"></script> </head> <body> <div id="content"></div> </body> <script src="./my-panel.js"></script> </html> it doesn't have access to any privileged apis, including the add-on sdk apis.
remote/child - Archive of obsolete content
enables an sdk module loaded into a child process to access
web content in the child process and communicate with modules in the main process.
...it provides two main things: access to
web content loaded into this child process port mechanisms to communicate with the main process interacting with
web content to interact with
web content, the sdk/remote/child module provides a frames property that's a list of all content frames loaded into this child process.
ui/frame - Archive of obsolete content
this toolbar might look something like: scripting frames to add scripts to frames, include them directly from the frame's html content, as with a normal
web page: <script type="text/javascript" src="frame.js"></script> as usual, the path to the script is relative to the html file's location.
...you can specify the frame's url property as the targetorigin: frame.postmessage(message, frame.url); this add-on listens for a frame script to send the "city changed" message above, and in response, updates all frames across all browser windows with that city's current weather (it just reads this from a dictionary, where in a real case it might ask a
web service): var { frame } = require("sdk/ui/frame"); var { toolbar } = require("sdk/ui/toolbar"); var weather = { "london" : "rainy", "toronto" : "snowy", "san francisco" : "foggy" } var frame = new frame({ url: "./city-info.html", onmessage: (e) => { updateweather(e.data); } }); var toolbar = toolbar({ name: "city-info", title: "city info", items: [frame] }); function up...
Basic form hints - Accessibility
wai-aria, the accessible rich internet applications specification from the w3c's
web accessibility initiative, provides the aria-labelledby attribute for these cases.
...
web developers typically use presentational strategies to indicate required or invalid fields.
Accessibility and Spacial Patterns - Accessibility
the
web developer can do something about this in the manner in which he displays math.
... see also mdn accessibiltity: what users can do to browse more safely
web accessibiltity for seizures and physical reactions
web accessibility: understanding colors and luminance braille part 3: a step-by-step guide to typesetting ada braille correctly in adobe illustrator spatial math in brailleblaster (4 of 5) government literature nasa: designing with blue math spatial reasoning: why math talk is about more than numbers scientific literature ...
Robust - Accessibility
this article provides practical advice on how to write your
web content so that it conforms to the success criteria outlined in the robust principle of the
web content accessibility guidelines (wcag) 2.0 and 2.1.
...this can generally be achieved by following
web standards and testing rigorously.
::cue-region - CSS: Cascading Style Sheets
the ::cue-region css pseudo-element matches
webvtt cues within a selected element.
... font-size font-stretch font-style font-variant font-weight line-height opacity outline outline-color outline-style outline-width ruby-position text-combine-upright text-decoration text-decoration-color text-decoration-line text-decoration-style text-decoration-thickness text-shadow visibility white-space specifications specification status comment
webvtt: the
web video text tracks formatthe definition of 'the ::cue-region pseudo-element' in that specification.
::placeholder - CSS: Cascading Style Sheets
in order to meet current
web content accessibility guidelines (wcag), a ratio of 4.5:1 is required for text content and 3:1 for larger text such as headings.
...
webaim: color contrast checker mdn understanding wcag, guideline 1.4 explanations understanding success criterion 1.4.3 | w3c understanding wcag 2.0 usability placeholder text with sufficient color contrast may be interpreted as entered input.
::selection - CSS: Cascading Style Sheets
to meet current
web content accessibility guidelines (wcag), text content must have a contrast ratio of 4.5:1, or 3:1 for larger text such as headings.
... (wcag defines large text as between 18.66px and 24px and bold, or 24px or larger.)
webaim: color contrast checker mdn understanding wcag, guideline 1.4 explanations understanding success criterion 1.4.3 | w3c understanding wcag 2.0 specifications specification status comment css pseudo-elements level 4the definition of '::selection' in that specification.
:checked - CSS: Cascading Style Sheets
desktopmobilechromeedgefirefoxinternet exploreroperasafariandroid
webviewchrome for androidfirefox for androidopera for androidsafari on iossamsung internet:checkedchrome full support 1notes full support 1notes notes on macos, styling <option&rt; elements has no effect.edge full support 12notes full support ...
... 9opera full support 9notes full support 9notes notes on macos, styling <option&rt; elements has no effect.safari full support 3.1notes full support 3.1notes notes styling <option&rt; elements has no effect.
webview android full support 2chrome android full support 18firefox android full support 4notes full support 4notes notes from firefox 56, <option&rt; elements cannot be styled.opera android full support ...
:defined - CSS: Cascading Style Sheets
desktopmobilechromeedgefirefoxinternet exploreroperasafariandroid
webviewchrome for androidfirefox for androidopera for androidsafari on iossamsung internet:definedchrome full support 54edge full support 79firefox full support 63ie no support noopera full support ...
... 41safari full support 10
webview android full support 54chrome android full support 54firefox android full support 63opera android full support 41safari ios full support 10samsung internet android full support 6.0legend full support full support no support no support ...
:has() - CSS: Cascading Style Sheets
desktopmobilechromeedgefirefoxinternet exploreroperasafariandroid
webviewchrome for androidfirefox for androidopera for androidsafari on iossamsung internet:has()chrome no support nonotes no support nonotes notes see bug 669058edge no support nonotes no support nonotes notes see bug 669...
...058firefox no support nonotes no support nonotes notes see bug 418039ie no support noopera no support nosafari no support no
webview android no support nochrome android no support nofirefox android no support nonotes no support nonotes notes see bug 418039opera android no support nosafari ios no support no...
:host-context() - CSS: Cascading Style Sheets
desktopmobilechromeedgefirefoxinternet exploreroperasafariandroid
webviewchrome for androidfirefox for androidopera for androidsafari on iossamsung internet:host-context()chrome full support 54edge full support 79firefox no support nonotes no support nonotes notes see bug 1082060.ie ...
... no support noopera full support 41safari no support no
webview android full support 54chrome android full support 54firefox android no support nonotes no support nonotes notes see bug 1082060.opera android full support 41safari ios no support nosamsung internet android full support 6.0legend full support ...
:link - CSS: Cascading Style Sheets
desktopmobilechromeedgefirefoxinternet exploreroperasafariandroid
webviewchrome for androidfirefox for androidopera for androidsafari on iossamsung internet:linkchrome full support 1edge full support 12firefox full support 1ie full support 3opera full support ...
... 3.5safari full support 1
webview android full support 1.5chrome android full support 18firefox android full support 4opera android full support 14safari ios full support 3.2samsung internet android full support 1.0legend full support full support ...
:read-only - CSS: Cascading Style Sheets
desktopmobilechromeedgefirefoxinternet exploreroperasafariandroid
webviewchrome for androidfirefox for androidopera for androidsafari on iossamsung internet:read-onlychrome full support 1edge full support 13firefox full support 78 full support 78 full support ...
... 1.5prefixed prefixed implemented with the vendor prefix: -moz-ie no support noopera full support 9safari full support 4
webview android full support ≤37chrome android full support 18firefox android full support 4prefixed full support 4prefixed prefixed implemented with the vendor prefix: -moz-opera android full support 10.1safari ios full support 3.2samsung internet android ...
:read-write - CSS: Cascading Style Sheets
desktopmobilechromeedgefirefoxinternet exploreroperasafariandroid
webviewchrome for androidfirefox for androidopera for androidsafari on iossamsung internet:read-writechrome full support 1edge full support 13firefox full support 78 full support 78 full support ...
... 1.5prefixed prefixed implemented with the vendor prefix: -moz-ie no support noopera full support 9safari full support 4
webview android full support ≤37chrome android full support 18firefox android full support 4prefixed full support 4prefixed prefixed implemented with the vendor prefix: -moz-opera android full support 10.1safari ios full support 3.2samsung internet android ...
:where() - CSS: Cascading Style Sheets
desktopmobilechromeedgefirefoxinternet exploreroperasafariandroid
webviewchrome for androidfirefox for androidopera for androidsafari on iossamsung internet:where()chrome full support 72disabled full support 72disabled disabled from version 72: this feature is behind the #enable-experimental-
web-platform-features preference (needs to be set to enabled).
...to change preferences in firefox, visit about:config.ie no support noopera no support nosafari no support no
webview android no support nochrome android full support 72disabled full support 72disabled disabled from version 72: this feature is behind the #enable-experimental-
web-platform-features preference (needs to be set to enabled).
background-color - CSS: Cascading Style Sheets
in order to meet current
web content accessibility guidelines (wcag), a ratio of 4.5:1 is required for text content and 3:1 for larger text such as headings.
...
webaim: color contrast checker mdn understanding wcag, guideline 1.4 explanations understanding success criterion 1.4.3 | w3c understanding wcag 2.0 formal definition initial valuetransparentapplies toall elements.
border-bottom-width - CSS: Cascading Style Sheets
desktopmobilechromeedgefirefoxinternet exploreroperasafariandroid
webviewchrome for androidfirefox for androidopera for androidsafari on iossamsung internetborder-bottom-widthchrome full support 1edge full support 12firefox full support 1ie full support 4opera full support...
... 3.5safari full support 1
webview android full support 2.3chrome android full support 18firefox android full support 4opera android full support 10.1safari ios full support 1samsung internet android full support 1.0legend full support full support see also the other border-width-related css properties: border-left-width, border-right-width, border-top-width, and border-width.
border-collapse - CSS: Cascading Style Sheets
se | separate examples a colorful table of browser engines html <table class="separate"> <caption><code>border-collapse: separate</code></caption> <tbody> <tr><th>browser</th> <th>layout engine</th></tr> <tr><td class="fx">firefox</td> <td class="gk">gecko</td></tr> <tr><td class="ed">edge</td> <td class="tr">edgehtml</td></tr> <tr><td class="sa">safari</td> <td class="wk">
webkit</td></tr> <tr><td class="ch">chrome</td> <td class="bk">blink</td></tr> <tr><td class="op">opera</td> <td class="bk">blink</td></tr> </tbody> </table> <table class="collapse"> <caption><code>border-collapse: collapse</code></caption> <tbody> <tr><th>browser</th> <th>layout engine</th></tr> <tr><td class="fx">firefox</td> <td class="gk">gecko</td></tr> <tr><td class="e...
...d">edge</td> <td class="tr">edgehtml</td></tr> <tr><td class="sa">safari</td> <td class="wk">
webkit</td></tr> <tr><td class="ch">chrome</td> <td class="bk">blink</td></tr> <tr><td class="op">opera</td> <td class="bk">blink</td></tr> </tbody> </table> css .collapse { border-collapse: collapse; } .separate { border-collapse: separate; } table { display: inline-table; margin: 1em; border: dashed 5px; } table th, table td { border: solid 3px; } .fx { border-color: orange blue; } .gk { border-color: black red; } .ed { border-color: blue gold; } .tr { border-color: aqua; } .sa { border-color: silver blue; } .wk { border-color: gold blue; } .ch { border-color: red yellow green blue; } .bk { border-color: navy blue teal aqua; } .op { border-color: red; } result spe...
border-left-style - CSS: Cascading Style Sheets
desktopmobilechromeedgefirefoxinternet exploreroperasafariandroid
webviewchrome for androidfirefox for androidopera for androidsafari on iossamsung internetborder-left-stylechrome full support 1edge full support 12firefox full support 1notes full support 1notes notes prior to firefox 50,...
...this has been fixed in firefox 50.ie full support 5.5opera full support 9.2safari full support 1
webview android full support 2.3chrome android full support 18firefox android full support 14notes full support 14notes notes prior to firefox 50, border styles of rounded corners (with border-radius) were always rendered as if border-bottom-style was solid.
border-left - CSS: Cascading Style Sheets
desktopmobilechromeedgefirefoxinternet exploreroperasafariandroid
webviewchrome for androidfirefox for androidopera for androidsafari on iossamsung internetborder-leftchrome full support 1edge full support 12firefox full support 1ie full support 4opera full support ...
... 3.5safari full support 1
webview android full support 1chrome android full support 18firefox android full support 4opera android full support 14safari ios full support 1samsung internet android full support 1.0legend full support full support ...
border-right-style - CSS: Cascading Style Sheets
desktopmobilechromeedgefirefoxinternet exploreroperasafariandroid
webviewchrome for androidfirefox for androidopera for androidsafari on iossamsung internetborder-right-stylechrome full support 1edge full support 12firefox full support 1notes full support 1notes notes prior to firefox 50...
...this has been fixed in firefox 50.ie full support 5.5opera full support 9.2safari full support 1
webview android full support ≤37chrome android full support 18firefox android full support 14notes full support 14notes notes prior to firefox 50, border styles of rounded corners (with border-radius) were always rendered as if border-bottom-style was solid.
border-right - CSS: Cascading Style Sheets
desktopmobilechromeedgefirefoxinternet exploreroperasafariandroid
webviewchrome for androidfirefox for androidopera for androidsafari on iossamsung internetborder-rightchrome full support 1edge full support 12firefox full support 1ie full support 5.5opera full support ...
... 9.2safari full support 1
webview android full support ≤37chrome android full support 18firefox android full support 14opera android full support 14safari ios full support 1samsung internet android full support 1.0legend full support full support ...
border-top - CSS: Cascading Style Sheets
desktopmobilechromeedgefirefoxinternet exploreroperasafariandroid
webviewchrome for androidfirefox for androidopera for androidsafari on iossamsung internetborder-topchrome full support 1edge full support 12firefox full support 1ie full support 4opera full support ...
... 3.5safari full support 1
webview android full support 1chrome android full support 18firefox android full support 4opera android full support 14safari ios full support 1samsung internet android full support 1.0legend full support full support ...
border - CSS: Cascading Style Sheets
desktopmobilechromeedgefirefoxinternet exploreroperasafariandroid
webviewchrome for androidfirefox for androidopera for androidsafari on iossamsung internetborderchrome full support 1edge full support 12firefox full support 1ie full support 4opera full support ...
... 3.5safari full support 1
webview android full support ≤37chrome android full support 18firefox android full support 4opera android full support 14safari ios full support 1samsung internet android full support 1.0legend full support full support ...
color - CSS: Cascading Style Sheets
in order to meet current
web content accessibility guidelines (wcag), a ratio of 4.5:1 is required for text content and 3:1 for larger text such as headings.
...
webaim: color contrast checker mdn understanding wcag, guideline 1.4 explanations understanding success criterion 1.4.3 | w3c understanding wcag 2.0 formal definition initial valuevaries from one browser to anotherapplies toall elements.
cross-fade() - CSS: Cascading Style Sheets
the original syntax is supported in safari and supported with the -
webkit- prefix in chrome, opera, and other blink-based browsers.
...percentage><angular-color-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 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 comme...
direction - CSS: Cascading Style Sheets
desktopmobilechromeedgefirefoxinternet exploreroperasafariandroid
webviewchrome for androidfirefox for androidopera for androidsafari on iossamsung internetdirectionchrome full support 2edge full support 12firefox full support 1ie full support 5.5opera full support ...
... 9.2safari full support 1
webview android full support 1chrome android full support 18firefox android full support 4opera android full support 10.1safari ios full support 1samsung internet android full support 1.0legend full support full support ...
Adapting to the new two-value syntax of display - CSS: Cascading Style Sheets
desktopmobilechromeedgefirefoxinternet exploreroperasafariandroid
webviewchrome for androidfirefox for androidopera for androidsafari on iossamsung internetmulti-keyword values experimentalchrome no support noedge no support nofirefox full support 70ie no support noopera n...
...o support nosafari no support no
webview android no support nochrome android no support nofirefox android no support noopera android no support nosafari ios no support nosamsung internet android no support nolegend full support full support no support no supportexperimental.
element() - CSS: Cascading Style Sheets
desktopmobilechromeedgefirefoxinternet exploreroperasafariandroid
webviewchrome for androidfirefox for androidopera for androidsafari on iossamsung internetelement() experimentalchrome no support noedge no support nofirefox full support 57prefixed full support 57prefixed prefixed impleme...
... no support 4 — 29prefixed notes prefixed implemented with the vendor prefix: -moz-notes -moz-element() is limited to background-image and background.ie no support noopera no support nosafari no support no
webview android no support nochrome android no support nofirefox android full support 60prefixed full support 60prefixed prefixed implemented with the vendor prefix: -moz- no support 29 — 60pref...
empty-cells - CSS: Cascading Style Sheets
desktopmobilechromeedgefirefoxinternet exploreroperasafariandroid
webviewchrome for androidfirefox for androidopera for androidsafari on iossamsung internetempty-cellschrome full support 1edge full support 12firefox full support 1ie full support 8opera full support ...
... 4safari full support 1.2
webview android full support 1chrome android full support 18firefox android full support 4opera android full support 10.1safari ios full support 3.1samsung internet android full support 1.0legend full support full support ...
font-smooth - CSS: Cascading Style Sheets
syntax /* keyword values */ font-smooth: auto; font-smooth: never; font-smooth: always; /* <length> value */ font-smooth: 2em;
webkit implements a similar property, but with different values: -
webkit-font-smoothing.
... for those of you not on a macos system, here is a screenshot (the live version appears later on): html <p>without font smoothing</p> <p class="smoothed">with font smoothing</p> css html { background-color: black; color: white; font-size: 3rem; } p { text-align: center; } .smoothed { -
webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } result specifications not part of any standard.
font-variant-caps - CSS: Cascading Style Sheets
desktopmobilechromeedgefirefoxinternet exploreroperasafariandroid
webviewchrome for androidfirefox for androidopera for androidsafari on iossamsung internetfont-variant-capschrome full support 52edge full support 79firefox full support 34 full support 34 no support ...
...to change preferences in firefox, visit about:config.ie no support noopera full support 39safari no support no
webview android full support 52chrome android full support 52firefox android full support 34 full support 34 no support 24 — 34disabled disabled from version 24 until version 34 (exclusive): this...
font-variant-position - CSS: Cascading Style Sheets
desktopmobilechromeedgefirefoxinternet exploreroperasafariandroid
webviewchrome for androidfirefox for androidopera for androidsafari on iossamsung internetfont-variant-positionchrome no support noedge no support nofirefox full support 34 full support 34 no support ...
...to change preferences in firefox, visit about:config.ie no support noopera no support nosafari no support no
webview android no support nochrome android no support nofirefox android full support 34 full support 34 no support 24 — 34disabled disabled from version 24 until version 34 (exclusive): this fea...
<image> - CSS: Cascading Style Sheets
syntax the <image> data type can be represented with any of the following: an image denoted by the <url> data type a <gradient> data type a part of the
webpage, defined by the element() function an image, image fragment or solid patch of color, defined by the image() function a blending of two or more images defined by the cross-fade() function.
... mdn understanding wcag, guideline 1.1 explanations understanding success criterion 1.1.1 | w3c understanding wcag 2.0 examples valid images url(test.jpg) /* a <url>, as long as test.jpg is an actual image */ linear-gradient(blue, red) /* a <gradient> */ element(#realid) /* a part of the
webpage, referenced with the element() function, if "realid" is an existing id on the page */ image(ltr 'arrow.png#xywh=0,0,16,16', red) /* a section 16x16 section of <url>, starting from the top, left of the original image as long as arrow.png is a supported image, otherwise a solid ...
ime-mode - CSS: Cascading Style Sheets
note: in general, it's not appropriate for a public
web site to change the ime mode.
... this property should only be used for private
web applications or to undo the property if it was previously set by legacy code.
initial - CSS: Cascading Style Sheets
desktopmobilechromeedgefirefoxinternet exploreroperasafariandroid
webviewchrome for androidfirefox for androidopera for androidsafari on iossamsung internetinitialchrome full support 1edge full support 13firefox full support 19 full support 19 no support 1 — 24...
...prefixed prefixed implemented with the vendor prefix: -moz-ie no support noopera full support 15safari full support 1.2
webview android full support 1chrome android full support 18firefox android full support 19 full support 19 no support 4 — 24prefixed prefixed implemented with the vendor prefix: -moz-opera android full support 14safari ios full support 1samsung inter...
<integer> - CSS: Cascading Style Sheets
desktopmobilechromeedgefirefoxinternet exploreroperasafariandroid
webviewchrome for androidfirefox for androidopera for androidsafari on iossamsung internet<integer>chrome full support 1edge full support 12firefox full support 1ie full support 3opera full support ...
... 3.5safari full support 1
webview android full support ≤37chrome android full support 18firefox android full support 4opera android full support 10.1safari ios full support 1samsung internet android full support 1.0legend full support full support ...
object-fit - CSS: Cascading Style Sheets
desktopmobilechromeedgefirefoxinternet exploreroperasafariandroid
webviewchrome for androidfirefox for androidopera for androidsafari on iossamsung internetobject-fitchrome full support 31edge full support 16notes full support 16notes notes edge supports object-fit on img elements only.
... 36ie no support noopera full support 19 full support 19 full support 11.6prefixed prefixed implemented with the vendor prefix: -o-safari full support 10
webview android full support 4.4.3chrome android full support 31firefox android full support 36opera android full support 19 full support 19 full support ...
opacity - CSS: Cascading Style Sheets
in order to meet current
web content accessibility guidelines (wcag), a ratio of 4.5:1 is required for text content and 3:1 for larger text such as headings.
...
webaim: color contrast checker mdn understanding wcag, guideline 1.4 explanations understanding success criterion 1.4.3 | w3c understanding wcag 2.0 formal definition initial value1.0applies toall elementsinheritednocomputed valuethe specified value, clipped in the range [0,1]animation typea number formal syntax <alpha-value>where <alpha-value> = <number> | <percentage> examples setting background opacity html <div class="light">you can barely see this.</div> <div class="medium">this is easier to see.</div> <div class="heavy">this is very easy to see.</div> css div { background-color: yellow; } .light { opacity: 0.2; /* barely see the text over the background */ } .medium { opacity: 0.5; /* see the te...
orphans - CSS: Cascading Style Sheets
desktopmobilechromeedgefirefoxinternet exploreroperasafariandroid
webviewchrome for androidfirefox for androidopera for androidsafari on iossamsung internetorphanschrome full support 25edge full support 12firefox no support noie full support 8opera full support ...
... 9.2safari full support 1.3
webview android full support ≤37chrome android full support 25firefox android no support noopera android full support 14safari ios full support 1samsung internet android full support 1.5legend full support full support no support no support see also widows paged media ...
outline-offset - CSS: Cascading Style Sheets
desktopmobilechromeedgefirefoxinternet exploreroperasafariandroid
webviewchrome for androidfirefox for androidopera for androidsafari on iossamsung internetoutline-offsetchrome full support 1edge full support 15firefox full support 1.5ie no support noopera full support ...
... 9.5safari full support 1.2
webview android full support 37chrome android full support 18firefox android full support 4opera android full support 14safari ios full support 1samsung internet android full support 1.0legend full support full support no support no support ...
Guide to scroll anchoring - CSS: Cascading Style Sheets
as a user of the
web, you are probably familiar with the problem that scroll anchoring solves.
... in bug 1584285 the layout.css.scroll-anchoring.suppressions.enabled flag was added to firefox nightly in order to allow the disabling of these triggers further reading explainer document on the wicg site scroll anchoring for
web developers on the chromium blog implement a pin-to-bottom scrolling element using scroll anchoring ...
page-break-after - CSS: Cascading Style Sheets
desktopmobilechromeedgefirefoxinternet exploreroperasafariandroid
webviewchrome for androidfirefox for androidopera for androidsafari on iossamsung internetpage-break-afterchrome full support 1edge full support 12firefox full support 1notes full support 1notes notes the values avoid, lef...
...t, and right are unsupported.ie full support 4opera full support 7safari full support 1.2
webview android full support 37chrome android full support 18firefox android full support 4notes full support 4notes notes the values avoid, left, and right are unsupported.opera android full support 14safari ios full support 1samsung internet android full support ...
page-break-before - CSS: Cascading Style Sheets
desktopmobilechromeedgefirefoxinternet exploreroperasafariandroid
webviewchrome for androidfirefox for androidopera for androidsafari on iossamsung internetpage-break-beforechrome full support 1edge full support 12firefox full support 1notes full support 1notes notes the values avoid, le...
...ft, and right are unsupported.ie full support 4opera full support 7safari full support 1.2
webview android full support 37chrome android full support 18firefox android full support 4notes full support 4notes notes the values avoid, left, and right are unsupported.opera android full support 14safari ios full support 1samsung internet android full support ...
paint() - CSS: Cascading Style Sheets
desktopmobilechromeedgefirefoxinternet exploreroperasafariandroid
webviewchrome for androidfirefox for androidopera for androidsafari on iossamsung internetpaint()chrome full support 65edge full support 79firefox no support noie no support noopera full support ...
... 52safari no support no
webview android full support 65chrome android full support 65firefox android no support noopera android full support 47safari ios no support nosamsung internet android full support 9.2legend full support full support no support no support see also paintworklet css painting api using the css painting api ...
right - CSS: Cascading Style Sheets
desktopmobilechromeedgefirefoxinternet exploreroperasafariandroid
webviewchrome for androidfirefox for androidopera for androidsafari on iossamsung internetrightchrome full support 1edge full support 12firefox full support 1ie full support 5.5opera full support ...
... 5safari full support 1
webview android full support 1chrome android full support 18firefox android full support 4opera android full support 14safari ios full support 1samsung internet android full support 1.0legend full support full support ...
shape-outside - CSS: Cascading Style Sheets
ear-color-hint> = <length-percentage><angular-color-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 funneling text html <div class="main"> <div class="left"></div> <div class="right"></div> <p> sometimes a
web page's text content appears to be funneling your attention towards a spot on the page to drive you to follow a particular link.
... </p> </div> css .main { width: 530px; } .left, .right { width: 40%; height: 12ex; background-color: lightgray; } .left { -
webkit-shape-outside: polygon(0 0, 100% 100%, 0 100%); shape-outside: polygon(0 0, 100% 100%, 0 100%); float: left; -
webkit-clip-path: polygon(0 0, 100% 100%, 0 100%); clip-path: polygon(0 0, 100% 100%, 0 100%); } .right { -
webkit-shape-outside: polygon(100% 0, 100% 100%, 0 100%); shape-outside: polygon(100% 0, 100% 100%, 0 100%); float: right; -
webkit-clip-path: polygon(100% 0, 100% 100%, 0 100%); clip-path: polygon(100% 0, 100% 100%, 0 100%); } p { text-align: center; } result specifications specification status comment css shapes module level 1the definition of 'shape...
text-rendering - CSS: Cascading Style Sheets
however, gecko and
webkit browsers let you apply this property to html and xml content on windows, macos, and linux.
... note:
webkit precisely applies the specified value, but gecko treats the value the same as optimizelegibility.
url() - CSS: Cascading Style Sheets
} @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).
... syntax values <string> <url> a url, which is a relative or absolute address, or pointer, to the
web resource to be included, or a data uri, optionally in single or double quotes.
writing-mode - CSS: Cascading Style Sheets
> </table> css some preparatory css just to make things look a little better: table { border-collapse:collapse; } td, th { border: 1px black solid; padding: 3px; } th { background-color: lightgray; } .example { height:75px; width:75px; } the css that adjusts the directionality of the content looks like this: .example.text1 span, .example.text1 { writing-mode: horizontal-tb; -
webkit-writing-mode: horizontal-tb; -ms-writing-mode: horizontal-tb; } .example.text2 span, .example.text2 { writing-mode: vertical-lr; -
webkit-writing-mode: vertical-lr; -ms-writing-mode: vertical-lr; } .example.text3 span, .example.text3 { writing-mode: vertical-rl; -
webkit-writing-mode: vertical-rl; -ms-writing-mode: vertical-rl; } .example.text4 span, .example.text4 { writing-m...
...ode: sideways-lr; -
webkit-writing-mode: sideways-lr; -ms-writing-mode: sideways-lr; } .example.text5 span, .example.text5 { writing-mode: sideways-rl; -
webkit-writing-mode: sideways-rl; -ms-writing-mode: sideways-rl; } result this image shows what the output should look like, in case your browser's support for writing-mode is incomplete: specifications specification status comment css writing modes level 4the definition of 'writing-mode' in that specification.
DOM onevent handlers - Developer guides
the
web platform provides several ways to be notified of dom events.
... when the event handler is invoked tbd (non-capturing listener) terminology the term event handler may refer to: any function or object that is registered to be notified of events or more specifically, to the mechanism of registering event listeners via on… attributes in html or properties in
web apis, such as <button onclick="alert(this)"> or window.onload = function() { … }.
Mouse gesture events - Developer guides
do not use it on production sites facing the
web: it will not work for every user.
... note: these gesture events are available to add-ons and other browser chrome code, but are never sent to regular
web page content.
Making content editable - Developer guides
by using some javascript event handlers, you can transform your
web page into a full and fast rich text editor.
...this is useful if your
web application expects the older firefox behavior, and you don't want to or don't have the time to update it to use the new behavior.
Printing - Developer guides
there may be times in which your
web site or application would like to improve the user's experience when printing content.
...this article provides tips and techniques for helping your
web content print better.
The HTML autocomplete attribute - HTML: Hypertext Markup Language
autocomplete lets
web developers specify what if any permission the user agent has to provide automated assistance in filling out form field values, as well as guidance to the browser as to the type of information expected in the field.
... "url" a url, such as a home page or company
web site address as appropriate given the context of the other fields in the form.
HTML attribute: crossorigin - HTML: Hypertext Markup Language
<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.
... <link rel="manifest" href="/app.
webmanifest" crossorigin="use-credentials"> specifications specification status comment html living standardthe definition of 'cors settings attributes' in that specification.
<h1>–<h6>: The HTML Section Heading elements - HTML: Hypertext Markup Language
headings • page structure • wai
web accessibility tutorials mdn understanding wcag, guideline 1.3 explanations understanding success criterion 1.3.1 | w3c understanding wcag 2.0 mdn understanding wcag, guideline 2.4 explanations understanding success criterion 2.4.1 | w3c understanding wcag 2.0 understanding success criterion 2.4.6 | w3c understanding wcag 2.0 understanding success criterion 2.4.10 | w3c understanding wcag 2.
... using the aria-labelledby attribute labeling regions • page structure • w3c wai
web accessibility tutorials specifications specification status comment html living standardthe definition of '<h1>, <h2>, <h3>, <h4>, <h5>, and <h6>' in that specification.
<button>: The Button element - HTML: Hypertext Markup Language
in order to meet current
web content accessibility guidelines (wcag), a ratio of 4.5:1 is required for text content and 3:1 for large text.
... (large text is defined as 18.66px and bold or larger, or 24px or larger.)
webaim: color contrast checker mdn understanding wcag, guideline 1.4 explanations understanding success criterion 1.4.3 | w3c understanding wcag 2.0 clicking and focus whether clicking on a <button> causes it to (by default) become focused varies by browser and os.