W3C home > Mailing lists > Public > www-style@w3.org > July 2015

RE: [css-round-display][mediaqueries] Change of a 'device-radius' prop desc

From: Hyojin Song <hyojin22.song@lge.com>
Date: Tue, 28 Jul 2015 22:19:17 +0900
To: "'Florian Rivoal'" <florian@rivoal.net>
Cc: "'www-style'" <www-style@w3.org>
Message-ID: <006a01d0c938$01af1f70$050d5e50$@lge.com>
> On 17 Jul 2015, at 07:24 PM, Florian Rivoal <florian@rivoal.net> wrote: 
> Hi. Sorry for the late response. I wanted to get back to you earlier on
> topic.

Hi Florian,

I'm sorry for the late response and I'm very pleased to get your detailed

>> The css-round-display spec was slightly changed and I'm not sure
>> whether two values could be specified in 'device-radius' media feature
> or not.
> Based on the currently allowed syntax for media queries
> (http://dev.w3.org/csswg/mediaqueries/#mq-syntax), no, 2 values are not
> allowed.
> We could extend it so that they are, but I am not sure it would really
> help. I think I prefer the single value syntax. It needed some
> but with those clarification, it seems to me that it would have covered
> use cases.
>> Each
>> values mean a horizontal radius and a vertical radius respectively, so
>> that author can define an ellipse as a display shape with a pixel unit
>> in the mediaqueries.
> In my mind, there are 2 use cases for the device-radius media queries,
> and they are relatively similar:
> 1) you have one set of style rules that look good on a rectangular screen,
> and one that looks good on a rounded screen. If the screen is sufficiently
> rounded, you want to switch. This would be expressed like this:
> @media (min-device-radius: 25%) {
>   /*rules for somewhat rounded screens*/ } @media {device-radius: 50%) {
>   /*rules for fully rounded screens*/
> }
> Assuming we define % well, this would work with elliptical screens as
> If the screen is a "fully rounded rectangle", which is to say an ellipse,
> would match it.
> 2) You have elements in the corners which would be obscured if the
> corners were rounded by a certain number of pixels or more, so you want
> to switch some style rules to move that content somewhere else if they
> are. For that, you would do:
> @media (min-device-radius: 50px) {
>   /* rules for moving content that would normally
>      fall in the corners */
> }
> This would also apply with elliptical corners that have a 50px radius in
> one dimension and a 75px radius in the other, since we're using "min-". It
> would not for 50px/20px corners, but that's ok, since those hide less of
> the corner than a circular 50px corner.
> In neither case 1) or 2), double values are needed to work with ellipses.
> addition, it seems more complicated to make range evaluation work with
> double values, even though that is important.
> However, I may very well be missing some important use cases that
> actually call for this syntax and warrant dealing with the complications.
> think it would be very useful if you could share some example of
> situations where you would want to use the 2 value syntax. I do not only
> mean shape of screens that have elliptical corners, but examples of
> stylesheets that you would want to write, and could not do (or could not
> do well) unless you had the 2 value syntax.
>> I think it might be reasonable to express more display shapes and is
>> not complicated from the complexity point of view, but I'm not sure it
>> could be allowed in the mediaqueries convention to define two strings
>> as a media feature's value. The explanation of the 'device-radius' is
>> in the spec document[1] under the property description, and I'd like
>> to get comments about this topic.
> Media queries do not describe the device, they test it. I think the
> is subtle but important.
> For example, with the right definition, a device-radius media query with a
> single value could even be used effectively against corner shapes that are
> not rounded at all. For example, if we define (min-device-radius:10px) to
> be true for any shape that obscures at least all the pixels that a 10px
> radius rounded corner would hide, then it would not only also match for
> a 10px/20px elliptical corner, but also for a diagonal cut of the corner
> starting (at least) 10px away horizontally and vertically from the corner
> point. (min-device-radius:10px) does not describe this shape, but it can
> still successfully test it.

I agree completely with the feedback you mentioned. A percentage value of
'device-radius' media feature can describe an regular ellipse in proportion
to a width and a height of the screen respectively. It is also possible and
interesting to identify a diamond shape to test the display shape through
the 'device-radius' media feature syntax.

I think percentage value [1] should be mandatorily able to be specified for
'device-radius' in the Media queries, but I'm not sure whether this should
be written in mediaqueries [2] or css-round-display (a note section) [3].

I have just updated the css-round-display spec a while ago (rollback to 1
value of 'device-radius') and we have been developing the feature in blink
for the feasibility test based on a current version of the spec.

Hyojin Song

[1] https://drafts.csswg.org/css-values-3/#percentages
[2] https://drafts.csswg.org/mediaqueries/#mq-syntax
[3] https://drafts.csswg.org/css-round-display/#device-radius-media-feature
Received on Tuesday, 28 July 2015 13:19:50 UTC

This archive was generated by hypermail 2.4.0 : Monday, 23 January 2023 02:14:52 UTC