The 'view-mode' Media Feature

W3C Candidate Recommendation 24 June 2010

This version:
Latest published version:
Latest editor's draft:
Previous version:
Robin Berjon, Vodafone


This specification defines a media feature to match the different visual presentation modes that can be applied to web applications and thereby apply different styling based on these different modes using CSS Media Queries [MEDIAQ].

Status of This Document

This section describes the status of this document at the time of its publication. Other documents may supersede this document. A list of current W3C publications and the latest revision of this technical report can be found in the W3C technical reports index at http://www.w3.org/TR/.

Implementation feedback based on any aspect of this specification is welcome and encouraged.

User agents that wish to extend this specification in any way are encouraged to discuss their extensions on a public forum, such as public-webapps, so their extensions can be considered for standardisation.

The Last Call review period for this specification ended on 18 May 2010, for which a disposition of comments is available. The Web Applications Working Group hopes to request that the Director advance this document to Proposed Recommendation once the Working Group has demonstrated at least two interoperable implementations (interoperable meaning at least two implementations that pass each mandatory test in the test suite) as documented in an Implementation Report.

This document was published by the Web Applications WG as a Candidate Recommendation. This document is intended to become a W3C Recommendation. If you wish to make comments regarding this document, please send them to public-webapps@w3.org (subscribe, archives). W3C publishes a Candidate Recommendation to indicate that the document is believed to be stable and to encourage implementation by the developer community. This Candidate Recommendation is expected to advance to Proposed Recommendation on 01 August 2010. All feedback is welcome.

Publication as a Candidate Recommendation does not imply endorsement by the W3C Membership. This is a draft document and may be updated, replaced or obsoleted by other documents at any time. It is inappropriate to cite this document as other than work in progress.

This document was produced by a group operating under the 5 February 2004 W3C Patent Policy. W3C maintains a public list of any patent disclosures made in connection with the deliverables of the group; that page also includes instructions for disclosing a patent. An individual who has actual knowledge of a patent which the individual believes contains Essential Claim(s) must disclose the information in accordance with section 6 of the W3C Patent Policy.

Table of Contents

1. Introduction

This section is non-normative.

Web applications, be they widgets or in-browser, can on most platforms be run in multiple visual modes. At times they may occupy the entire screen, at others they may be minimised to a specific docking area; at times they may have chrome that matches the operating system's style while at others they may be providing their own controls in order to provide for a more immersive experience.

The user is generally in control of at least several aspects of these modalities, and it is therefore important for authors to be able to react to these in order to provide different styling to their applications. In order to achieve this, this specification defines a media feature that allows different CSS style rules to be applied depending on whether a given media query [MEDIAQ] matches.

1.1 Design Goals and Requirements

This section is non-normative.

The design goals and requirements for this specification are documented in the Widgets 1.0 Requirements [WIDGETS-REQS] document.

This document addresses one requirement from "User Experience":

  1. Display Modes

2. Conformance

As well as sections marked as non-normative, all authoring guidelines, diagrams, examples, and notes in this specification are non-normative. Everything else in this specification is normative.

The key words must, must not, required, should, should not, recommended, may, and optional in this specification are to be interpreted as described in [RFC2119].

This specification defines conformance criteria that apply to a single product: user agents that implement the interfaces that it contains.

3. Security considerations

Application could be designed to trick users into performing actions they do not wish to or to capture data that they did not intend to provide. Examples of situations in which the user could be tricked include, but are not limited to:

Implementers are encouraged to take these issues into consideration and to provide limitations to what a Web application may do in order to ensure that the user is exposed to minimal risk.

4. Definitions

View mode
The view mode is the manner in which a Web application is presented to a user that corresponds to the metaphors and functionalities in use on a given platform. This specification defines a number of view modes that a user agent is expected to match to comparable platform-specific situations.
The chrome comprises the visible parts of the user agent that do not depend on the content (e.g. window decorations, tool bars, title bars, menus).
A user interface is said to be immersive when its controls and components are created to match the specific style of the application instead of using the chrome and widgets of the platform.
Media feature
The term media feature is defined in [MEDIAQ].
Screen area
The area of the screen that is generally available for applications, excluding parts that the system generally keeps to itself (e.g. a bar at the top for menus, time, or context, or at the bottom with a list of running applications).
Web application
A Web application is an application built and shipped using Web technology that may be running inside of a browser, as a widget, or in another type of container designed for this purpose.
The term widget is defined in [WIDGETS].
The term viewport is defined in [CSS21].

5. The 'view-mode' media feature

The view-mode media feature describes the mode in which the Web application is being shown as a running application on the platform.

windowed | floating | fullscreen | maximized | minimized
Applies to:
visual media types
Accepts min/max prefixes:

A user agent should make a best-effort attempt at matching the great variety of platform conventions in which it may be running a Web application to the list of view modes defined in this specification so that the view-mode media feature may describe common situations in a manner that is useful to authors. Each view mode is defined to be exclusive of the others.

5.1 View modes

The view-mode media feature accepts the following enumerated values:

Describes a Web application running in a windowed manner, which is to say with chrome and without occupying the entire screen area.
Describes a Web application providing a more immersive interface, running in a windowed manner but without chrome, and with the viewport's initial background being transparent such that other system items (other applications, the display's background...) can be seen through parts of the viewport that are not being painted to.
Describes a Web application that is occupying the entirety of the display, including the parts normally excluded from the screen area (e.g. a fullscreen video) and without any chrome.
Describes a Web application that is occupying the entirety of the screen area but with chrome.
Describes a Web application docked or otherwise minimised, but with a dynamic graphical representation being available nevertheless (i.e. the application isn't entirely hidden, or maybe its icon is still shown and it has control over what it contains). This may correspond for instance to a thumbnail of the application's content being shown.

5.2 Examples

A simple example in CSS:

@media handheld and (view-mode: floating) and (orientation: landscape) {
    // ...
@media tv and (view-mode: windowed) {
    // ...
@media handheld and (view-mode: fullscreen) {
    // ...

6. Acknowledgements

This section is non-normative.

The following people provided highly influential input: Daniel Herzog and Jochen Cichon.

The editors would also like to thank the following people for their contributions to this specification:

Arve Bersvendsen, Marcos Cáceres, Arthur Barstow, Jochen Cichon, Sebastian Markbåge, Cameron McCormack, David Rogers, Richard Tibbett, Scott Wilson, Boris Zbarsky, Kenneth Christiansen, Daniel Glazman, Tab Atkins Jr, Josh Soresh, Marcin Hanclik, the CSS WG.

A. References

A.1 Normative references

Håkon Wium Lie; et al. Media Queries. 15 September 2009. W3C Candidate Recommendation. (Work in progress.) URL: http://www.w3.org/TR/2009/CR-css3-mediaqueries-20090915/
S. Bradner. Key words for use in RFCs to Indicate Requirement Levels. Internet RFC 2119. URL: http://www.ietf.org/rfc/rfc2119.txt

A.2 Informative references

Bert Bos; et al. Cascading Style Sheets Level 2 Revision 1 (CSS 2.1) Specification. 08 September 2009. W3C Candidate Recommendation. (Work in progress.) URL: http://www.w3.org/TR/2009/CR-CSS2-20090908
Marcos Caceres. Widget Packaging and Configuration. 01 December 2009. W3C Candidate Recommendation. (Work in progress.) URL: http://www.w3.org/TR/2009/CR-widgets-20091201/
Marcos Caceres. Widgets 1.0: Requirements. 30 April 2009. W3C Working Draft. (Work in progress.) URL: http://www.w3.org/TR/2009/WD-widgets-reqs-20090430