Re: [selectors4][css-round-display] Suggest a new type of pseudo class to support scrolling in rounded viewports

On 31 January 2016 at 08:10, 홍지혜 <jh.hong@lge.com> wrote:
> On 27 January 2016 at 6:21 PM, Sebastian Zartner < sebastianzartner@gmail.com > wrote:
>  > On 27 January 2016 at 03:46, Jihye Hong <jh.hong@lge.com> wrote:
>  > The syntax to defined block areas could be something like this:
>  >
>  >    :region( [ block-start | block-end | inline-start | inline-end | center ] [ <length> | <percentage> ]{1,2} )
>  >
>  > where:
>  >    [ block-start | block-end | inline-start | inline-end | center ]
>  > specifies the anchor of the region.
>  >    First [ <length> | <percentage> ] specifies the width or height of the region.
>  >    Second [ <length> | <percentage> ] specifies the offset from the anchor of the region.
>
> Then, if :region(center 100px), the size of a region would be width 100px and height 100px?
> And would the center point of that region be at the same position of the containing block's center?

'center' is actually a special case I didn't consider much before.
Because the other values define a line, it should probably rather be
split into 'block-center' and 'inline-center' to align it better with
them instead of letting it define a square.
Also, I missed to define previously that the first length or
percentage (the width) must of course be positive, of course, while
the second (the offset) also accepts negative values. Positive values
offset the region towards the block/inline-end, negative values to the
block/inline-start.

>  > Another solution would be to allow specifying arbitrary shapes:
>  >
>  >    :region( [ <url> | <basic-shape> ] )
>  >
>  > where:
>  >    <url> specifies a URL reference to an SVG element to be used as area.
>  >    <basic-shape> specifies a basic shape as defined in the CSS Shapes
>  > Module to be used as area.
>
> Yeah, I agree with you about the needs for specifying the region more precisely and flexible.

Actually, both methods could be joined, they don't exclude each other.
This would result in the following syntax (according to my previous
suggestion):

    :region( [[ block-start | block-center | block-end | inline-start
| inline-center | inline-end ] [ <length> | <percentage> ]{1,2} |
                <url> | <basic-shape>] )

This would make the pseudo-class most flexible, but makes it more
complex at the same time.

> For example, by the method that I suggested, we cannot choose the element which doesn't touch the top edge and the
> center point of a containing block.
>
> There could be another method that adding <position> value to specify the point matched with a target element the like
> below:
>
>    :region( [ center || left || top || right || bottom ]? [<position>]? )
>
> Maybe we can continue the discussion about which method is more appropriate.

Can you elaborate a bit more on that position value? Regarding your
suggested syntax it is not clear to me yet, how elements can be styled
(resized in your example) with smooth transitions.

Thinking more about this, the general use case is:
Style an element in relation to its position within the viewport of a
scroll container. This use case is not restricted to round displays,
it also applies to rectangular displays.

I can imagine a page, which displays the element in the middle opaque
and smoothly fades it away while scrolling up or down, drawing the
user's focus to the current element.

Sebastian

Received on Sunday, 31 January 2016 19:10:13 UTC