Sylvain Galineau | 19 Jun 2012 23:17
Picon
Favicon

[css3-background] Corner clipping and mouse events

In section 5.3 [1] css3-background specifies that border-radius trims the 
hit testing area, specifically:

# The content of replaced elements is always trimmed to the content edge 
# curve. Also, the area outside the curve of the border edge does not accept 
# mouse events on behalf of the element.

In our experience this behavior has proven to be of particular interest to 
application design in a touch environment. While the UI guidelines for various 
platforms recommend minimum touch target sizes for interactive elements those 
generally assume square or rectangular control shapes. Thus, rounding elements 
sized at or close to those guidelines can have an impact on real world hit-testing 
with touch devices; in particular when creating a custom circular control such as 
back or forward navigation buttons.

I suggest:

1. Adding a note for authors such as:

# As border-radius reduces the interactive area of an element authors should make
# sure the remaining hit-testing area conforms to recommended minima for the 
# platforms they target; in particular, conforming to recommended minimum touch
# target sizes may require larger widths and heights.

2. Update 5.3. to change 'mouse events' to a less device-specific name. Pointer
events?  Hit-testing events?

[1] http://dev.w3.org/csswg/css3-background/#corner-clipping

(Continue reading)

Brad Kemper | 20 Jun 2012 16:54
Picon

Re: [css3-background] Corner clipping and mouse events

On Jun 19, 2012, at 2:17 PM, Sylvain Galineau <sylvaing <at> microsoft.com> wrote:

> In section 5.3 [1] css3-background specifies that border-radius trims the 
> hit testing area, specifically:
> 
> # The content of replaced elements is always trimmed to the content edge 
> # curve. Also, the area outside the curve of the border edge does not accept 
> # mouse events on behalf of the element.
> 
> In our experience this behavior has proven to be of particular interest to 
> application design in a touch environment. While the UI guidelines for various 
> platforms recommend minimum touch target sizes for interactive elements those 
> generally assume square or rectangular control shapes. Thus, rounding elements 
> sized at or close to those guidelines can have an impact on real world hit-testing 
> with touch devices; in particular when creating a custom circular control such as 
> back or forward navigation buttons.
> 
> I suggest:
> 
> 1. Adding a note for authors such as:
> 
> # As border-radius reduces the interactive area of an element authors should make
> # sure the remaining hit-testing area conforms to recommended minima for the 
> # platforms they target; in particular, conforming to recommended minimum touch
> # target sizes may require larger widths and heights.
> 
> 2. Update 5.3. to change 'mouse events' to a less device-specific name. Pointer
> events?  Hit-testing events?
> 
> 
(Continue reading)

fantasai | 22 Jun 2012 01:23

Re: [css3-background] Corner clipping and mouse events

On 06/20/2012 07:54 AM, Brad Kemper wrote:
> On Jun 19, 2012, at 2:17 PM, Sylvain Galineau<sylvaing <at> microsoft.com>  wrote:
>
>> I suggest:
>>
>> 1. Adding a note for authors such as:
>>
>> # As border-radius reduces the interactive area of an element authors should make
>> # sure the remaining hit-testing area conforms to recommended minima for the
>> # platforms they target; in particular, conforming to recommended minimum touch
>> # target sizes may require larger widths and heights.
>>
>> 2. Update 5.3. to change 'mouse events' to a less device-specific name. Pointer
>> events?  Hit-testing events?
>>
>> [1] http://dev.w3.org/csswg/css3-background/#corner-clipping
>
> I'm fine with both of those editorial changes. "Pointer events" sounds good, and I think captures the
original intent.

Spec updated:
   http://dev.w3.org/csswg/css3-background/#corner-clipping

I tweaked the wording a bit, but it's mostly the same.

~fantasai

Sylvain Galineau | 22 Jun 2012 02:46
Picon
Favicon

RE: [css3-background] Corner clipping and mouse events


[fantasia:]
> 
> On 06/20/2012 07:54 AM, Brad Kemper wrote:
> > On Jun 19, 2012, at 2:17 PM, Sylvain Galineau<sylvaing <at> microsoft.com>
> wrote:
> >
> >> I suggest:
> >>
> >> 1. Adding a note for authors such as:
> >>
> >> # As border-radius reduces the interactive area of an element authors
> >> should make # sure the remaining hit-testing area conforms to
> >> recommended minima for the # platforms they target; in particular,
> >> conforming to recommended minimum touch # target sizes may require
> larger widths and heights.
> >>
> >> 2. Update 5.3. to change 'mouse events' to a less device-specific
> >> name. Pointer events?  Hit-testing events?
> >>
> >> [1] http://dev.w3.org/csswg/css3-background/#corner-clipping
> >
> > I'm fine with both of those editorial changes. "Pointer events" sounds
> good, and I think captures the original intent.
> 
> Spec updated:
>    http://dev.w3.org/csswg/css3-background/#corner-clipping
> 
> I tweaked the wording a bit, but it's mostly the same.
> 
(Continue reading)


Gmane