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

> 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
this
> topic.

Hi Florian,

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

>> 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
clarifications,
> but with those clarification, it seems to me that it would have covered
the
> 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
well.
> If the screen is a "fully rounded rectangle", which is to say an ellipse,
50%
> 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.
In
> 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.
I
> 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
different
> 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.

Thanks,
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