W3C home > Mailing lists > Public > www-style@w3.org > April 2016

[css-round-display][media-queries] 'shape' media feature

From: Florian Rivoal <florian@rivoal.net>
Date: Sun, 17 Apr 2016 21:35:48 +0900
Message-Id: <1D5A35FB-994F-41F2-BA28-C87E04E6529D@rivoal.net>
To: www-style list <www-style@w3.org>
We've discussed the topic of media queries for round displays (and other non rectangular displays) a couple of times, and the conclusion was that we need two different media queries:

1) One that allows author to check whether elements placed in the corners (or potentially other parts of the screen) will be hidden due to the screen shape.

2) One that lets authors switch to a roundish design (round buttons, polar positioning, etc) when the screen is roundish, for stylistic reasons rather than visibility reasons.

We've also concluded that the current "device-radius" media query does not solve either problem well.

A solution for (1) was discussed at Sapporo, and at Sydney I was actioned to make a proposal for (2). Here it is, written to be ready to insert mostly as is (modulo proper markup) into the spec, should the WG approve.

shape : rect | round

This media feature allows the author to query about the general
shape of the targeted display area of the output device, in order
to adjust the styling of their document to match. This is not
intended to be an exhaustive and accurate categorization of
shapes, but rather a subjective grouping into broad shape
families for which distinctive designs are desirable.

- rect: the shape is an axis aligned rectangle or square,
  or a similar shape for which traditional designs are appropriate.

- round: the shape is a circle, an ellipse, an oval, or a similar
  shape for which distinctively rounded designs are appropriate.

When a shape does not strictly match any of the categories,
but is close enough to one of them that designs intended
for that category would be appropriate, it should be grouped
with that category. For example, a rectangle with small rounded
corners should match ''shape: rect''.

Note: Various shapes can be considered to lay ambiguously between
two categories. For example, it is not clear cut whether a rectangle
with large rounded corners is more rectangle-like or more round-like.
How to categorize such shapes is at the discretion of the UA,
to be decided depending on whether the device vendor or UA vendor
would like to favor roundish designs or squarish designs on that

If the shape does not match any of the values, then each of these
values must evaluate to ''false''. UAs must only do so for
radically different shapes (such as star-shaped screens), not for
minor variations (such as rectangles with small beveled corners).

If the UA does know have information about the shape of the screen,
all values must evaluate to ''unknown'' (See https://drafts.csswg.org/mediaqueries/#evaluating for how to
resolve the truth value of ''unknown'').

Note: This usage of ''unknown'' instead of ''false'' ensures
compatible semantics between UAs that do not support the
'shape' media features, those that do but do not have
information about the shape, and those that both support this
media feature and have sufficient information about the shape.

Note: At the time of writing, the only Operating System exposing
information through standard APIs about the display's shape is
Android with its ''isScreenRound()'' API (http://developer.android.com/intl/es/reference/android/content/res/Configuration.html#isScreenRound%28%29).
Given the semantics of this API, when isScreenRound() returns
''true'', ''shape: round'' should evaluate to ''true'' and
''shape: rect'' should evaluate to ''false''. When isScreenRound()
returns ''false'', both ''shape: round'' and ''shape: rect''
should evaluate to ''unknown''.

Note: There are cases when the UA may know the shape even in
the absence of OS APIs. For example, when rendering to PDF,
the shape is known to be a rectangle, so 'shape: rect' evaluates
to ''true'' while ''shape: round'' to ''false''.

  An author having designed a "traditional" design
  and a rounded one would use this media feature
  as follows:

    /* CSS for most screens and for UAs which do not implement 'shape' */
    @media (shape: round) {
      /* CSS for the rounded design */

  Authors should careful with other patterns, as they
  have different semantics:

    @media not (shape: round) {
      /* ... */
    @media (shape: round) {
      /* ... */
    /* On UAs which do not implement this media feature
       or on devices where the shape is uncertain,
       neither branch is applied. */

    @media (shape: rect) {
      /* ... */
    @media (shape: round) {
      /* ... */
    /* In addition to UAs that do not implement 'shape'
       and devices where the shape is uncertain,
       this will also fail to apply either branch
       if the shape is categorized by the UA as being
       neither rectangular nor round. */

As always, feedback welcome.

 - Florian
Received on Sunday, 17 April 2016 12:36:15 UTC

This archive was generated by hypermail 2.4.0 : Friday, 25 March 2022 10:09:02 UTC