:Touch CSS Pseudo-Class or Something Similar

:touch CSS pseudo-class or something similar?

There is no such thing as :touch in the W3C specifications, http://www.w3.org/TR/CSS2/selector.html#pseudo-class-selectors

:active should work, I would think.

Order on the :active/:hover pseudo class is important for it to function correctly.

Here is a quote from that above link

Interactive user agents sometimes change the rendering in response to user actions. CSS provides three pseudo-classes for common cases:

• The :hover pseudo-class applies while the user designates an element
  (with some pointing device), but does
  not activate it. For example, a visual
  user agent could apply this
  pseudo-class when the cursor (mouse
  pointer) hovers over a box generated
  by the element. User agents not
  supporting interactive media do not
  have to support this pseudo-class.
  Some conforming user agents supporting
  interactive media may not be able to
  support this pseudo-class (e.g., a pen
  device).
• The :active pseudo-class applies while an element is being activated by
  the user. For example, between the
  times the user presses the mouse
  button and releases it.
• The :focus pseudo-class applies while an element has the focus
  (accepts keyboard events or other
  forms of text input).

CSS :hover behaviour on touchscreen devices

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?

how do the hover psuedo class behaves on touch screen devices

Blocks with hover styles on touch devices are a bit of a complication.
In short, they don’t really exist on these devices. Creating fancy
:hover styles can really add to the browser experience and help
simplify your layout, but they simply will not work on a touch device.
When a tablet or smartphone user taps your hover-styled link elements,
the hover style shortly appears, and immediately the underlying link
is followed/activated.

for more information check here
https://knackforge.com/blog/karalmax/how-deal-hover-touch-screen-devices

Triggering the :active pseudo-class on a touchscreen

Assuming the CSS :active pseudo-class isn't working, you'll probably need to use DOM events.

Do the "mousedown" and "mouseup" events work with touchscreens? Assuming they do, you could try something like this:

addEventListener("mousedown", function (event) {
    if (event.target.setAttribute) {
        event.target.setAttribute("data-active", "");
    }
}, true);

addEventListener("mouseup", function (event) {
    if (event.target.removeAttribute) {
        event.target.removeAttribute("data-active");
    }
}, true);

Then within your CSS, replace :active with [data-active], like so:

div[data-active] {
    /* blah blah */
}

I don't think this will work quite the same... you may need to do some trickery to get child elements to work correctly, for instance.

Is styling of `:focus` pseudo-element of buttons and links is meaningful for touch devices?

:focus certainly applies to buttons and links/anchors, either on touch or non-touch devices.

Try the example below. When you click/tap on the button or link, the style changes until you click/tap somewhere else.

.button:focus,
.link:focus{
  color: red;
}

<button class="button">
Click me
</button>
<br/>
<a href="#" class="link">Link</a>

---

Related Topics