3

I am developing a CSS framework that relies on being simple, minimal and pure CSS as much as possible. What I want is to to make certain things like dropdowns open on hover, however I am uncertain how to go about implementing this with only CSS on mobile devices.

Having checked this answer previously, I confirmed what I partially knew to be true: that certain mobile browsers and devices will use the :hover pseudo-class when clicking an element, which will allow me to open dropdowns the way I want. Others say that :active works as well.

I am using both in one rule, as well as :focus to cover as many environments and cases as possible, however I am not certain this will work well across many devices. So my questions are:

  • Is there any way to make sure a hover-based dropdown component will work across devices?
  • Are there pseudo-classes or properties that I can use that might be browser-specific or something similar to make sure that most devices are covered?
  • Is there documentation about touchscreen, mobile device or mobile browser behaviour and how they handle hover events?
Community
  • 1
  • 1
Angelos Chalaris
  • 6,611
  • 8
  • 49
  • 75
  • 2
    From the marketing perspective, it is not a good practice to use hover on tap-devices. Common users don't know how to use it properly. It confuses them and they leave. Users like to tap on big colorful buttons. – cdm Sep 05 '16 at 07:34
  • @cdm what you say sounds very much correct and logical to me. Do you have anything better to suggest? Do you propose I turn my dropdowns into buttons that work by clicking (using the checkbox-hack to make them pure CSS or similar)? – Angelos Chalaris Sep 05 '16 at 07:35

1 Answers1

5

This is nearly a duplicate of a bunch of questions out there, but I want to address your main points:

  1. By "a hover based dropdown" you mean one that will appear as long as the user has their finger on it? As a mobile user, I can't picture this being a successful UX

  2. All pseudo-classes are here https://developer.mozilla.org/en-US/docs/Web/CSS/Pseudo-classes The ones I would consider "interactive" are :active, :checked, :focus, :hover. The trouble with :hover is, as you say, it isn't well supported and, again, it doesn't really fit the way users interact with mobile sites. The trouble with :checked is it relies on checkboxes, which puts pretty severe restrictions on the supported markup.

  3. Definitely mobile Safari doesn't support it, which means it's a big enough problem to matter.

The most common solution is to use javascript touchevents, but if you're going all-CSS that isn't going to work for you.

You may find something useful here Hover effects using CSS3 touch events or here :touch CSS pseudo-class or something similar?

Community
  • 1
  • 1
henry
  • 4,244
  • 2
  • 26
  • 37
  • 1
    As far as (1) is concerned I was thinking something like what Firefox for Android does, which is it applies a hover style on the first click. However, what you are describing definitely feels awkward and is exactly what I want to avoid, that's why I am asking how exactly mobile devices handle these kinds of events. As for the rest, I think that Safari's lack of support is a big enough no-no for me, so I should maybe try something different. I will check the links you provided, thank you very much! – Angelos Chalaris Sep 05 '16 at 07:56