Well-deployed technologies

CSS-based adaptation

CSS Media Queries defines a mechanism that allows adapting the layout and behavior of a Web page based on some of the characteristics of the device, most notably based on the screen resolution.

The viewport-relative CSS units vw, vh, vmin and vmax represent a percentage of the current viewport dimensions and let developers design layouts that automatically adapt to viewport dimensions changes.

Responsive images

The Responsive Images Community Group (RICG) developed an extension to HTML, known as the picture element, that allows authors define what image to load depending on device capabilities and/or other media features.

As a complementary approach, the srcset attribute, specified by the WHATWG and also published as an extension to HTML, let Web developers define the various device pixel ratios of an image, letting the browser pick the best choice for the pixel density of the screen.

SVG, which lets define images that can be scaled up and down without any loss of quality, is another critical tool to the development of Web applications that adapt to the resolution of the underlying device.

JS-based adaptation

Web components are a set of features that together allow applications to encapsulate their logic in re-usable components. Primary technologies used to create Web components:

FeatureSpecification / GroupMaturityCurrent implementations
Select browsers…
CSS-based adaptationMedia Queries Level 3
CSS Working Group
Recommendation
viewport-percentage lengths in CSS Values and Units Module Level 3
CSS Working Group
Candidate Recommendation
Responsive imagespicture element in HTML Standard
WHATWG
Living Standard
srcset attribute in HTML Standard
WHATWG
Living Standard
Scalable Vector Graphics (SVG) 1.1 (Second Edition)
SVG Working Group
Recommendation
JS-based adaptationThe template element in HTML Standard
WHATWG
Living Standard
Custom elements in HTML Standard
WHATWG
Living Standard
Integration with the JavaScript module system in HTML Standard
WHATWG
Living Standard
Shadow tree in DOM Standard
WHATWG
Living Standard

Technologies in progress

CSS-based adaptation

CSS Device Adaptation defines a set of CSS directives to define the size on which this layout should be based, relatively to the size of the underlying device — specifying what has been implemented using the <meta name="viewport"> element so far.

CSS Mobile Text Size Adjustment lets text adapt to zoomed parts of a page.

CSS Media Queries Level 4 and 5 add several relevant hooks to adapt the user interface in mobile contexts, including:

  • The availability and type of a pointing device through the pointer feature (and its companion any-pointer feature).
  • The ability to hover elements through the hover feature.
  • The ability to react to ambient luminosity changes or to follow users' preferences for a light or dark theme through the prefers-contrast and prefers-color-scheme features.
  • The need to reduce the amount of animations in the page, e.g. to save battery, through the prefers-reduced-motion feature.
  • The ability to react to script-defined variables, making it easier to cater for more complex adaptation rules in the overall logic of the application.

JS-based adaptation

Specific CSS technologies can target and style Web components:

  • CSS Scoping lets authors define default styles for custom elements.
  • CSS Shadow Parts enables flagging elements in a shadow tree and styling them in the outside page, thus providing an easy-to-use mechanism to customize styles of custom elements as needed.
  • Constructable Stylesheet Objects provides an API for creating stylesheet objects from script without needing style elements, making adding styles to web components more convenient and performant.

As described in Use Cases and Requirements for Element Queries, developers need to control the layout of an individual element relative to the size of its container to create complex responsive applications that adapt to a wide variety of devices and contexts. Media queries and the resize event on the window element only allow developers to adjust the layout of a component relative to the viewport size. Resize Observer defines an interface for observing changes to an element's size and responding to these changes, allowing to design responsive Web components that can be used across applications and devices.

Server-side adaptation

A common approach to content adaptation on mobile devices is to have the server deliver the content that fits the user's device right away. This approach avoids sending content to the client that the client does not need, preserving network bandwidth, and it avoids running the adaptation logic on the client itself, preserving CPU and memory. Server-side adaptation used to rely on sniffing the User-Agent string and mapping it to a database of devices to extract relevant capabilities. This mechanism is error-prone and requires continuous maintenance of the database of devices. Through the HTTP Client Hints mechanism, developed by the IETF HTTP Working Group, clients and servers may now opt-in to exchange relevant capabilities for efficient content adaptation. The Web Performance Working Group has started to work on a Device Memory specification that extends these hints to surface the memory available on the device. The specification also defines an API to surface that information to the Web application running on the client.

Media Capture Capabilities

The Media Capture and Streams API exposes some specific information on capabilities of camera and microphones to make it possible to take advantage of the large variety of media capturing devices provided on mobile phones.

FeatureSpecification / GroupMaturityCurrent implementations
Select browsers…
CSS-based adaptationCSS Device Adaptation Module Level 1
CSS Working Group
Working Draft
CSS Mobile Text Size Adjustment Module Level 1
CSS Working Group
Editor's Draft
pointer feature in Media Queries Level 5
CSS Working Group
Working Draft
hover feature in Media Queries Level 5
CSS Working Group
Working Draft
prefers-contrast in Media Queries Level 5
CSS Working Group
Working Draft
prefers-color-scheme feature in Media Queries Level 5
CSS Working Group
Working Draft
prefers-reduced-motion feature in Media Queries Level 5
CSS Working Group
Working Draft
JS-based adaptationCSS Scoping Module Level 1
CSS Working Group
Working Draft
CSS Shadow Parts
CSS Working Group
Working Draft
Constructable stylesheets in CSS Object Model (CSSOM)
CSS Working Group
Working Draft
Resize Observer
CSS Working Group
Working Draft
Server-side adaptationDevice Memory
Web Performance Working Group
Working Draft
Media Capture CapabilitiesSource capabilities in Media Capture and Streams
WebRTC Working Group
Candidate Recommendation

Exploratory work

JS-based adaptation

Most mobile devices feature on-screen keyboards for user input. They also commonly let the user pinch-zoom into a page. Both of these features preserve the layout viewport (what the web page uses when laying out its user interface), so as not to clutter the screen with position: fixed elements. The Visual Viewport API provides developers with a way to query and interact with the properties of the visual viewport (the box on the page that the user can currently see), and to be notified when these properties change.

Server-side adaptation

The User-Agent Client Hints proposal defines a set of client hints that provide developers with the ability to perform agent-based content negotiation when necessary, while avoiding the historical baggage and passive fingerprinting surface exposed by the User-Agent header, which was at the basis of server-side adaptation.

FeatureSpecification / GroupImplementation intents
Select browsers…
JS-based adaptationVisual Viewport API
Web Platform Incubator Community Group
Server-side adaptationUser-Agent Client Hints
Web Platform Incubator Community Group