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

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?

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

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.

Best regards,

Sebastian

Received on Wednesday, 27 January 2016 09:21:30 UTC