Well-deployed technologies
Content on the Web can be styled using CSS (Cascading Style Sheets); in particular, CSS3 (the third level of the specification) is built as a collection of specifications that define simple yet powerful features to create graphical effects, such as rounded corners, complex background images, shadow effects, rotated content (CSS Transforms, which also includes 3D effects).
Animations can be described declaratively via CSS Animations and CSS Transitions.
Scripted animations can be resource intensive, especially on constrained devices. The possibility offered by the Animation Frames to manage the rate of updates to animations can help to keep them under control.
CSS Flexbox introduces a new layout mode, designed for laying out more complex applications. Notably, CSS Flexbox makes it possible to preserve a clear separation between the content itself (HTML, SVG) and its layout by allowing re-ordering of elements on screen, without having to change the underlying HTML. This is particularly relevant on mobile devices where the user interface and user experience need to be adjusted to fit the screen and available interaction mechanisms (see also Device Adaptation).
Fonts play also an important role in building appealing graphical interfaces, but mobile devices are in general distributed with only a limited set of fonts. WOFF 1.0 (Web Open Font Format) addresses that limitation by making it easy to use fonts that are automatically downloaded through style sheets, while keeping the size of the downloaded fonts limited to what is actually needed to render the interface. The upcoming WOFF 2.0 update to that format promises 25%-smaller download sizes; on mobile, a 35% reduction in the time needed to download and display these fonts has been measured.
SVG, Scalable Vector Graphics, provides an XML-based markup language to describe two-dimensions vector graphics. Since these graphics are described as a set of geometric shapes, they can be zoomed at the user request, which makes them well-suited to create graphics on mobile devices where screen space is limited. They can also be easily animated, enabling the creation of very advanced and slick user interfaces.
The integration of SVG in HTML5 opens up new possibilities, for instance applying advanced graphic filters (through SVG filters) to multimedia content, including videos. SVG 2 is set to facilitate that integration and complete the set of features in SVG.
In complement to the declarative approach provided by SVG, the <canvas> element added in HTML5 enables a 2D programmatic API that is well-suited for processing graphics in a less memory intensive way.
Another important aspect in graphics-intensive applications (e.g. games) is the possibility to use the entire screen to display the said graphics; the work on a Fullscreen API to request and detect full screen display, now done in the WHATWG.
NB: a 3D graphic API for HTML5 canvas, called WebGL, has been developed outside of W3C, as part of the Khronos Group; this API has been built to be compatible with OpenGL ES, i.e. for embedded systems, and is intended to work on mobile devices. The GPU for the Web Community Group also started to design a new Web API to expose modern 3D graphics and computation capabilities in a performant, powerful and safe manner, with a goal to be agnostic of and compatible with existing native system platforms (such as Direct3D, Metal, or Vulkan).
| Feature | Specification | Maturity | Current implementations |
|---|---|---|---|
| Borders and background Effects | Rounded corners in CSS Backgrounds and Borders Module Level 3 |  | Shipped |
| Complex backgrounds in CSS Backgrounds and Borders Module Level 3 | | ||
| Box shadow effects in CSS Backgrounds and Borders Module Level 3 | | Shipped | |
| Transformation Effects | 2D effects in CSS Transforms Module Level 1 |  | Shipped |
| 3D effects in CSS Transforms Module Level 1 | | Shipped | |
| Animations | CSS Animations Level 1 | | Shipped |
| CSS Transitions | | Shipped | |
| requestAnimationFrame in HTML 5.1 |  | Shipped | |
| Complex layouts | CSS Flexible Box Layout Module Level 1 | | Shipped |
| Downloadable fonts | WOFF File Format 1.0 | | Shipped |
| WOFF File Format 2.0 | | Shipped | |
| 2D Vector Graphics | Scalable Vector Graphics (SVG) 1.1 Specification | | Shipped |
| Scalable Vector Graphics (SVG) 2 | | N/A | |
| 2D Programmatic API | HTML Canvas 2D Context | | Shipped |
Technologies in progress
Animations can also be managed via scripting through the API exposed in Web Animations.
To ensure optimal performance when animating parts of an app, authors can make use of the CSS will-change property to let browsers compute the animation ahead of its occurrence.
Given the time required for downloading fonts over mobile networks, authors need to adapt their content to the progressive availability of fonts; CSS Font Loading gives the necessary events to developers to enable that adaptation.
It is often useful to be able to lock the orientation of the screen; the Screen Orientation API allows not only to detect orientation change, but also to lock the orientation in a specific state.
| Feature | Specification | Maturity | Current implementations |
|---|---|---|---|
| Animations | Web Animations | | Under consideration Shipped |
| CSS Will Change Module Level 1 | | Under consideration Shipped | |
| Downloadable fonts | CSS Font Loading Module Level 3 |  | Shipped |
| Orientation Lock | The Screen Orientation API | | Shipped |