Device 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.

Media Queries Level 4 adds the availability and type of a pointing device, as well as the ability to hover over elements, to the list of capabilities that may be used to adapt the layout and behavior of a Web page. Moreover, Media Queries Level 5 lets developers specify media queries that react to the ambient luminosity and to script-defined variables, making it easier to cater for more complex adaptation rules in the overall logic of the application.

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:

• The <template> element allows to declare fragments of HTML that can be cloned and inserted in the document by script.
• Custom elements provides a way for authors to build their own fully-featured DOM elements.
• Integration with the JavaScript module system lets authors leverage JavaScript modules in components.
• The shadow DOM allows the web browser to render DOM elements without putting them into the main DOM document tree.
• 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.

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.

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.