Results 41 - 60 of 63

Using flexbox to lay out web applications

Using flexbox can help you design compelling layouts in web applications that scale better from desktop to mobile. Put an end to floating <div> elements, absolute positioning, and JavaScript hacks, and start building horizontal and vertical flowing layouts in just a few lines of CSS. Some basic example use cases:
Advanced CSS CSS Flexible Boxes Example Guide Web

Implementing image sprites in CSS

Image sprites are used in numerous web apps where multiple images are used. Rather than include each image as a separate image file, it is much more memory and bandwidth-friendly to send them as a single image, so the number of HTTP requests is reduced.
Advanced CSS CSS Image Graphics Guide NeedsContent Sprites Web

Using CSS gradients

CSS gradients are new types of <image> added in the CSS3 Image Module. Using CSS gradients lets you display smooth transitions between two or more specified colors. This lets you avoid using images for these effects, thereby reducing download time and bandwidth usage. In addition, because the gradient is generated by the browser, objects with gradients look better when zoomed, and you can adjust your layout much more flexibly.
Advanced CSS CSS Image Example Guide NeedsLiveSample NeedsUpdate Web

Using CSS counters

CSS counters are, in essence, variables maintained by CSS whose values may be incremented by CSS rules to track how many times they're used. This lets you adjust the appearance of content based on its placement in the document. CSS counters are an implementation of Automatic counters and numbering in CSS 2.1.
Advanced CSS CSS List CSS Value Guide Layout Reference Web

Understanding CSS z-index

Usually HTML pages can be considered two-dimensional, because text, images and other elements are arranged on the page without overlapping. There is a single rendering flow, and all elements are aware of the space taken by others. The z-index attribute lets you adjust the order of the layering of objects when rendering content.
Advanced CSS Guide Understanding_CSS_z-index Web

The stacking context

Stacking context is the three-dimensional conceptualization of HTML elements along an imaginary z-axis relative to the user who is assumed to be facing the viewport or the webpage. HTML elements occupy this space in priority order based on element attributes.
Advanced CSS Example Guide Understanding_CSS_z-index Web

Using media queries

A media query consists of an optional media type and zero or more expressions that limit the style sheets' scope by using media features, such as width, height, and color. Media queries, added in CSS3, let the presentation of content be tailored to a specific range of output devices without having to change the content itself.
Advanced CSS Guide Media Queries NeedsBrowserCompatibility NeedsMobileBrowserCompatibility Responsive Design Web

HTML Drag and Drop API

HTML Drag and Drop interfaces enable applications to use drag and drop features in Firefox and other browsers. For example, with these features, the user can select draggable elements with a mouse, drag the elements to a droppable element, and drop those elements by releasing the mouse button. A translucent representation of the draggable elements follows the mouse pointer during the drag operation.
Advanced drag and drop events Events Guide HTML5 Overview XUL

IndexedDB API

IndexedDB is a low-level API for client-side storage of significant amounts of structured data, including files/blobs. This API uses indexes to enable high performance searches of this data. While DOM Storage is useful for storing smaller amounts of data, it is less useful for storing larger amounts of structured data. IndexedDB provides a solution. This is the main landing page for MDN's IndexedDB coverage — here we provide links to the full API reference and usage guides, browser support details, and some explanation of key concepts.
Advanced API Database IndexedDB Landing Reference storage Storage

Using IndexedDB

This tutorial walks you through using the asynchronous API of IndexedDB. If you are not familiar with IndexedDB, you should first read Basic Concepts About IndexedDB.
Advanced API Database Guide IndexedDB Storage storage Tutorial


MutationObserver provides developers a way to react to changes in a DOM. It is designed as a replacement for Mutation Events defined in the DOM3 Events specification.
Advanced API DOM DOM Reference NeedsContent NeedsUpdate Reference

Pointer Lock API

The Pointer Lock API (formerly called Mouse Lock API) provides input methods based on the movement of the mouse over time (i.e., deltas), not just the absolute position of the mouse cursor in the viewport. It gives you access to raw mouse movement, locks the target of mouse events to a single element, eliminates limits on how far mouse movement can go in a single direction, and removes the cursor from view. It is ideal for first person 3D games, for example.
Advanced API Games mouse lock pointer lock Reference Référence

Taking still photos with WebRTC

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. Try this sample, then read on to learn how it works.
Advanced API Example Sample code Video webcam WebRTC

Using XMLHttpRequest

XMLHttpRequest makes sending HTTP requests very easy.  You simply create an instance of the object, open a URL, and send the request.  The HTTP status of the result, as well as the result's contents, are available in the request object when the transaction is completed. This page outlines some of the common, and even slightly obscure, use cases for this powerful JavaScript object.
Advanced AJAX AJAXfile DOM JXON MakeBrowserAgnostic NeedsCompatTable XML XMLHttpRequest

Using HTML sections and outlines

The HTML5 specification brings several new elements to web developers allowing them to describe the structure of a web document with standard semantics. This document describes these elements and how to use them to define the desired outline for any document.
Advanced Example Guide HTML HTML5 Outlines Overview Sections sections Web

Using the application cache

HTML5 provides an application caching mechanism that lets web-based applications run offline. Developers can use the Application Cache (AppCache) interface to specify resources that the browser should cache and make available to offline users. Applications that are cached load and work correctly even if users click the refresh button when they are offline.
Advanced App appcache application cache Cache Guide HTML web cache

Media Capture and Streams API (Media Streams)

The Media Capture and Streams API, often called the Media Stream API or the Stream API,  is an API related to WebRTC which supports streams of audio or video data, the methods for working with them, the constraints associated with the type of data, the success and error callbacks when using the data asynchronously, and the events that are fired during the process.
Advanced API Audio audio Guide Media Capture and Streams API Media Streams API NeedsContent video Video