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

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:
 > > To support the last approach which is used in general nowadays and the best solution for scrolling in the round
display so far, I figured out an idea about a new type of pseudo-class, the regional pseudo-class.
 > > The regional pseudo-class is a functional pseudo class for selecting an element in a particular area of the round
display.
 > >
 > >    :region( [ center || left || top || right || bottom ]? )
 > >
 > > The pseudo-class can have keyword values for parameters like above.
 > >
 > > Meaning of each keyword is:
 > >    * center: matches if the element overlaps a center point of a containing block
 > >    * left: matches if the element touches a left edge of a containing block
 > >    * top: matches if the element touches a top edge of a containing block
 > >    * right: matches if the element touches a right edge of a containing block
 > >    * bottom: matches if the element touches a bottom edge of a containing block
 >
 > Should it really be the containing block or rather the viewport?

You are right. In this case, "viewport" is more suitable than "containing block".

 > Also I think, nowadays logical keywords are preferred over physical ones. This means, instead of (or additionally to)
top, right, bottom and left there would be block-start, block-end, inline-start and inline-end.

I also think logical keywords look good as values for the regional pseudo class.
block-start, block-end, inline-start and inline-end could be possible as keywords.

 > I believe it might be better to allow to specify the regions more precisely. This could be done by allowing to split
the containing block (or viewport) into different areas for more flexibility. That means the element must be loc
ated within that area for this pseudo-class to apply.
 >
 > This approach requires to define when the element is considered to be within an area. It could mean:
 >
 >  * One of the element's corners is within the region.
 >  * The element's center is within the region.
 >  * The whole element is within the region.
 >  * Most of the element (i.e. more than 50% of its area) is within the
 > region.
 >
 > 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?

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

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.

Thanks,
Jihye

Received on Sunday, 31 January 2016 07:10:50 UTC