Re: [css-d] styles for hover effects and touch

2016-01-09 Thread Mike Manley 

Tom Livingston wrote:

List,

How do you handle hover events on touch devices?
Currently I don't.  Until you brought this to my attention, I hadn't 
considered how problematic the :hover property could be on touch screen 
devices.



For example, a button whose bg color changes on hover. On iOS, the
hover change happens on tap. Not really a big deal but I'm not a fan
of this personally.
At my site http://www.thetangos.com/ the main navigation links should 
only display a text color change on hover.  However after reading this 
post I noticed that for some reason yet to be discovered my Andriod 4.3 
device will also show a momentary background-color change as well as the 
text color change on tap.  I wasn't expecting to see the 
background-color change.

Is it just a matter of moving the hover styles to
a wider breakpoint? This seems simplistic, but technically would work
provided you don't mind hover effects not working if you narrowed your
browser window enough. I'd rather not add script just for this issue.
Am I missing another simple solution?

Thanks

I think how simple the solution will be depends on how the :hover 
property is used.  I found this interesting article this morning, 
http://www.prowebdesign.ro/how-to-deal-with-hover-on-touch-screen-devices/


Mike
__
css-discuss [css-d@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] styles for hover effects and touch

2016-01-09 Thread Isabel Santos 
Tom,

you cannot associate tap with small screen that way:
Not only do there are more and more devices with wide tappable screens,
but screens can have very different pixel dephts,
so two screens with the same pixel dimensions can have dramatically
different sizes.

Most browsers will interpret finger gestures as mouse gestures,
so an hover and a tap will render the same.
The only way I know to refine the feedback is by using javascript.

Eventually, for newer browsers you could use the css feature query
(@supports),
for a deeper css control, but I'm not sure how.

(http://caniuse.com/#search=supports)


regards,
isabel



___

On Fri, Jan 8, 2016 at 3:49 PM, Tom Livingston  wrote:

> List,
>
> How do you handle hover events on touch devices?
>
> For example, a button whose bg color changes on hover. On iOS, the
> hover change happens on tap. Not really a big deal but I'm not a fan
> of this personally. Is it just a matter of moving the hover styles to
> a wider breakpoint? This seems simplistic, but technically would work
> provided you don't mind hover effects not working if you narrowed your
> browser window enough. I'd rather not add script just for this issue.
> Am I missing another simple solution?
>
> Thanks
>
>
>
__
css-discuss [css-d@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] styles for hover effects and touch

2016-01-09 Thread Karl DeSaulniers 
You don't. 

You can but that is a little silly IMO.
Hover is a mouse event meant for interaction with a mouse.
Until the screen can detect your finger hovering over it, there is no need to 
set hover for mobile.
I know this statement may come with a backlash from some evangelicals, however 
think about it.
Do you put wings on a car just because you can? Just for looks?

Design for your device. Leave the mouse events for the mouse and the click 
events for mobile to turn into tap events.
If you really must have hover events on mobile, then javascript/jQuery is the 
way to go.
it includes setting a timeout to see if their finger has stayed on the screen 
for so long past a click.

Best,

Karl DeSaulniers
Design Drumm
http://designdrumm.com



On Jan 8, 2016, at 9:49 AM, Tom Livingston  wrote:

> List,
> 
> How do you handle hover events on touch devices?
> 
> For example, a button whose bg color changes on hover. On iOS, the
> hover change happens on tap. Not really a big deal but I'm not a fan
> of this personally. Is it just a matter of moving the hover styles to
> a wider breakpoint? This seems simplistic, but technically would work
> provided you don't mind hover effects not working if you narrowed your
> browser window enough. I'd rather not add script just for this issue.
> Am I missing another simple solution?
> 
> Thanks
> 
> -- 
> 
> Tom Livingston | Senior Front End Developer | Media Logic |
> ph: 518.456.3015x231 | fx: 518.456.4279 | medialogic.com
> 
> 
> #663399
> __
> css-discuss [css-d@lists.css-discuss.org]
> http://www.css-discuss.org/mailman/listinfo/css-d
> List wiki/FAQ -- http://css-discuss.incutio.com/
> List policies -- http://css-discuss.org/policies.html
> Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

__
css-discuss [css-d@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] styles for hover effects and touch

2016-01-09 Thread Georg 

How to further complicate matters...
http://caniuse.com/#feat=css-media-interaction
...once UAs and OSes are up to the tasks.

regards
Georg
__
css-discuss [css-d@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] styles for hover effects and touch

2016-01-09 Thread Karl DeSaulniers 
On Jan 9, 2016, at 9:12 PM, Karl DeSaulniers  wrote:

> You don't. 
> 
> You can but that is a little silly IMO.
> Hover is a mouse event meant for interaction with a mouse.
> Until the screen can detect your finger hovering over it, there is no need to 
> set hover for mobile.
> I know this statement may come with a backlash from some evangelicals, 
> however think about it.
> Do you put wings on a car just because you can? Just for looks?
> 
> Design for your device. Leave the mouse events for the mouse and the click 
> events for mobile to turn into tap events.
> If you really must have hover events on mobile, then javascript/jQuery is the 
> way to go.
> it includes setting a timeout to see if their finger has stayed on the screen 
> for so long past a click.
> 
> Best,
> 
> Karl DeSaulniers
> Design Drumm
> http://designdrumm.com
> 
> 
> 

In case anyone needs. Here is a jQuery function to handle touch. 

var clickTime = new Date() ;
var clickSP = 300 ;

$(your_link).bind("touchstart", function(e){
var nowTime = new Date(),
t = parseInt(nowTime.getTime() - clickTime.getTime());
if ((t < clickSP) && (e.originalEvent.touches.length == 1)) {
//fire off your hover event
}
clickTime = nowTime ;
});

It has more uses than just firing off hover events, just FYI. ;)

Best,

Karl DeSaulniers
Design Drumm
http://designdrumm.com

__
css-discuss [css-d@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] styles for hover effects and touch

2016-01-09 Thread D'Arcy J.M. Cain 
On Sat, 9 Jan 2016 21:12:02 -0600
Karl DeSaulniers  wrote:
> backlash from some evangelicals, however think about it. Do you put
> wings on a car just because you can? Just for looks?

Well, cars can't swim but we put fins on them in the fifties.

-- 
D'Arcy J.M. Cain
Vybe Networks Inc.
http://www.VybeNetworks.com/
IM:da...@vex.net VoIP: sip:da...@vybenetworks.com
__
css-discuss [css-d@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] styles for hover effects and touch

2016-01-09 Thread Sam Brown 
Saturday, January 9, 2016, 10:45:22 PM, Tom wrote:

TL> My point wasn't to mimic hover on mobile. I was asking how to set up hover
TL> for desktop but avoid having them fire on some mobile devices needlessly.
TL> Putting hover styles a a wide desktop breakpoint isn't foolproof but seems
TL> the least convoluted. Any other ideas?

Are you perhaps seeing the :active state that happens on click/tap? You could 
set the :active state on the mobile breakpoints to the same or similar to the 
:link and :visited states.

TL> On Saturday, January 9, 2016, Karl DeSaulniers  wrote:

>> You don't.

>> You can but that is a little silly IMO.
>> Hover is a mouse event meant for interaction with a mouse.
>> Until the screen can detect your finger hovering over it, there is no need
>> to set hover for mobile.
>> I know this statement may come with a backlash from some evangelicals,
>> however think about it.
>> Do you put wings on a car just because you can? Just for looks?

>> Design for your device. Leave the mouse events for the mouse and the click
>> events for mobile to turn into tap events.
>> If you really must have hover events on mobile, then javascript/jQuery is
>> the way to go.
>> it includes setting a timeout to see if their finger has stayed on the
>> screen for so long past a click.

>> Best,

>> Karl DeSaulniers
>> Design Drumm
>> http://designdrumm.com



>> On Jan 8, 2016, at 9:49 AM, Tom Livingston > > wrote:

>> > List,
>> >
>> > How do you handle hover events on touch devices?
>> >
>> > For example, a button whose bg color changes on hover. On iOS, the
>> > hover change happens on tap. Not really a big deal but I'm not a fan
>> > of this personally. Is it just a matter of moving the hover styles to
>> > a wider breakpoint? This seems simplistic, but technically would work
>> > provided you don't mind hover effects not working if you narrowed your
>> > browser window enough. I'd rather not add script just for this issue.
>> > Am I missing another simple solution?
>> >
>> > Thanks
>> >
>> > --
>> >
>> > Tom Livingston | Senior Front End Developer | Media Logic |
>> > ph: 518.456.3015x231 | fx: 518.456.4279 | medialogic.com

__
css-discuss [css-d@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] styles for hover effects and touch

2016-01-09 Thread Karl DeSaulniers 
Hey Tom,
I would take any styling off of the hover states of your links so they are 
blank on hover 
and then create a class from that hover state you previously had 
and with a jQuery helper function, add and remove the class if it is mobile.

I wrote up a quick example that works, or it works on my iPhone5 anyway. 
Don't have an Android device or tablet of any kind atm. 
View the source for the code.

http://designdrumm.com/NoHoverOnMobile.html

Best,

Karl DeSaulniers
Design Drumm
http://designdrumm.com



On Jan 9, 2016, at 9:45 PM, Tom Livingston  wrote:

> My point wasn't to mimic hover on mobile. I was asking how to set up hover 
> for desktop but avoid having them fire on some mobile devices needlessly. 
> Putting hover styles a a wide desktop breakpoint isn't foolproof but seems 
> the least convoluted. Any other ideas?
> 
> 
> 
> On Saturday, January 9, 2016, Karl DeSaulniers  wrote:
> You don't.
> 
> You can but that is a little silly IMO.
> Hover is a mouse event meant for interaction with a mouse.
> Until the screen can detect your finger hovering over it, there is no need to 
> set hover for mobile.
> I know this statement may come with a backlash from some evangelicals, 
> however think about it.
> Do you put wings on a car just because you can? Just for looks?
> 
> Design for your device. Leave the mouse events for the mouse and the click 
> events for mobile to turn into tap events.
> If you really must have hover events on mobile, then javascript/jQuery is the 
> way to go.
> it includes setting a timeout to see if their finger has stayed on the screen 
> for so long past a click.
> 
> Best,
> 
> Karl DeSaulniers
> Design Drumm
> http://designdrumm.com
> 
> 
> 
> On Jan 8, 2016, at 9:49 AM, Tom Livingston  wrote:
> 
> > List,
> >
> > How do you handle hover events on touch devices?
> >
> > For example, a button whose bg color changes on hover. On iOS, the
> > hover change happens on tap. Not really a big deal but I'm not a fan
> > of this personally. Is it just a matter of moving the hover styles to
> > a wider breakpoint? This seems simplistic, but technically would work
> > provided you don't mind hover effects not working if you narrowed your
> > browser window enough. I'd rather not add script just for this issue.
> > Am I missing another simple solution?
> >
> > Thanks
> >
> > --
> >
> > Tom Livingston | Senior Front End Developer | Media Logic |
> > ph: 518.456.3015x231 | fx: 518.456.4279 | medialogic.com
> >
> >
> > #663399
> > __
> > css-discuss [css-d@lists.css-discuss.org]
> > http://www.css-discuss.org/mailman/listinfo/css-d
> > List wiki/FAQ -- http://css-discuss.incutio.com/
> > List policies -- http://css-discuss.org/policies.html
> > Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
> 
> __
> css-discuss [css-d@lists.css-discuss.org]
> http://www.css-discuss.org/mailman/listinfo/css-d
> List wiki/FAQ -- http://css-discuss.incutio.com/
> List policies -- http://css-discuss.org/policies.html
> Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
> 
> 
> -- 
> 
> Tom Livingston | Senior Front End Developer | Media Logic |
> ph: 518.456.3015x231 | fx: 518.456.4279 | medialogic.com
> 
> 
> #663399
> 

__
css-discuss [css-d@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] styles for hover effects and touch

2016-01-09 Thread Karl DeSaulniers 
FYI, If this doesn't work, you will know by the green background on the link.
It will show on click and stay if you hit the back button on mobile. 

On desktop it should act as a normal hover should. LMK.

HTH,

Best,

Karl DeSaulniers
Design Drumm
http://designdrumm.com



On Jan 9, 2016, at 10:55 PM, Karl DeSaulniers  wrote:

> Hey Tom,
> I would take any styling off of the hover states of your links so they are 
> blank on hover 
> and then create a class from that hover state you previously had 
> and with a jQuery helper function, add and remove the class if it is mobile.
> 
> I wrote up a quick example that works, or it works on my iPhone5 anyway. 
> Don't have an Android device or tablet of any kind atm. 
> View the source for the code.
> 
> http://designdrumm.com/NoHoverOnMobile.html
> 
> Best,
> 
> Karl DeSaulniers
> Design Drumm
> http://designdrumm.com
> 
> 
> 
> On Jan 9, 2016, at 9:45 PM, Tom Livingston  wrote:
> 
>> My point wasn't to mimic hover on mobile. I was asking how to set up hover 
>> for desktop but avoid having them fire on some mobile devices needlessly. 
>> Putting hover styles a a wide desktop breakpoint isn't foolproof but seems 
>> the least convoluted. Any other ideas?
>> 
>> 
>> 
>> On Saturday, January 9, 2016, Karl DeSaulniers  wrote:
>> You don't.
>> 
>> You can but that is a little silly IMO.
>> Hover is a mouse event meant for interaction with a mouse.
>> Until the screen can detect your finger hovering over it, there is no need 
>> to set hover for mobile.
>> I know this statement may come with a backlash from some evangelicals, 
>> however think about it.
>> Do you put wings on a car just because you can? Just for looks?
>> 
>> Design for your device. Leave the mouse events for the mouse and the click 
>> events for mobile to turn into tap events.
>> If you really must have hover events on mobile, then javascript/jQuery is 
>> the way to go.
>> it includes setting a timeout to see if their finger has stayed on the 
>> screen for so long past a click.
>> 
>> Best,
>> 
>> Karl DeSaulniers
>> Design Drumm
>> http://designdrumm.com
>> 
>> 
>> 
>> On Jan 8, 2016, at 9:49 AM, Tom Livingston  wrote:
>> 
>>> List,
>>> 
>>> How do you handle hover events on touch devices?
>>> 
>>> For example, a button whose bg color changes on hover. On iOS, the
>>> hover change happens on tap. Not really a big deal but I'm not a fan
>>> of this personally. Is it just a matter of moving the hover styles to
>>> a wider breakpoint? This seems simplistic, but technically would work
>>> provided you don't mind hover effects not working if you narrowed your
>>> browser window enough. I'd rather not add script just for this issue.
>>> Am I missing another simple solution?
>>> 
>>> Thanks
>>> 
>>> --
>>> 
>>> Tom Livingston | Senior Front End Developer | Media Logic |
>>> ph: 518.456.3015x231 | fx: 518.456.4279 | medialogic.com
>>> 
>>> 
>>> #663399
>>> __
>>> css-discuss [css-d@lists.css-discuss.org]
>>> http://www.css-discuss.org/mailman/listinfo/css-d
>>> List wiki/FAQ -- http://css-discuss.incutio.com/
>>> List policies -- http://css-discuss.org/policies.html
>>> Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
>> 
>> __
>> css-discuss [css-d@lists.css-discuss.org]
>> http://www.css-discuss.org/mailman/listinfo/css-d
>> List wiki/FAQ -- http://css-discuss.incutio.com/
>> List policies -- http://css-discuss.org/policies.html
>> Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
>> 
>> 
>> -- 
>> 
>> Tom Livingston | Senior Front End Developer | Media Logic |
>> ph: 518.456.3015x231 | fx: 518.456.4279 | medialogic.com
>> 
>> 
>> #663399
>> 
> 
> __
> css-discuss [css-d@lists.css-discuss.org]
> http://www.css-discuss.org/mailman/listinfo/css-d
> List wiki/FAQ -- http://css-discuss.incutio.com/
> List policies -- http://css-discuss.org/policies.html
> Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

__
css-discuss [css-d@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] styles for hover effects and touch

2016-01-09 Thread Philippe Wittenbergh 

> On Jan 10, 2016, at 01:46, Isabel Santos  wrote:
> 
> Eventually, for newer browsers you could use the css feature query
> (@supports),
> for a deeper css control, but I'm not sure how.

You can’t use the @supports feature query in this case! It detects whether a 
browser actually supports a combination of `property:value`, for example:

@supports { display: flex; } {  E {property:value} }

but `hover` is a selector, not a property or value.

Interaction media queries [1] is the way to go, eventually (but what would 
happen on a touch device with a mouse attached, such as the latest Microsoft 
tablets, or the iPad Pro ?).

@media (pointer:fine) { /* for devices with a mouse or trackpad */
button:hover, input[type="button"]:hover { background: yellow; color: 
red; }
}

That is supported by the current crop of browsers, except Firefox (check 
Caniuse.com).
For Firefox you can work around (partly) by repeating your above selectors 
inside an @supports query]

@supports (-moz-appearance: none) {}

but that would trigger on (handheld, touch) Android devices as well.

> On Jan 9, 2016, at 00:49, Tom Livingston  wrote:
> 
>  Is it just a matter of moving the hover styles to
> a wider breakpoint?

That won't work, except if you also exclude a lot of common window sizes for 
desktop browsers . Have you checked the CSS-screen size of, e.g.  an iPad Pro? 
(hint: 1024 by 1327px or thereabout); my browser windows are rarely wider that 
1100px, esp on the MBA.

———
I rarely, if ever, use :hover effects (and when I do it is usually something 
very discreet) so I haven’t really thought about this. On top of this, in most 
cases, when the user presses / taps a button, either the user is taken to 
another screen, or something happens (JS at work) within the same screen that 
shifts the focus away from the button, in which case that persistent `:hover` 
state is removed. It may still persist when the user uses the back button, in 
which case, you could consider it a bonus :-) — an indication to the user what 
the last thing he/she did on that page / screen.

I do consider it a bit of a bug that it is the `:hover` state that triggers all 
this, not the `:focus` or `:active` state. Or maybe is yet another unfortunate 
side effect of web developers doing stupid things such as CSS-only menus, where 
mobile browsers then need to try to be ”web compatible”.

[1] http://www.w3.org/TR/mediaqueries-4/#mf-interaction
check this article by Patrick Lauke: 
https://dev.opera.com/articles/media-features/

Philippe
--
Philippe Wittenbergh
http://l-c-n.com/





__
css-discuss [css-d@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/