CSS pseudo class for touch

Question

I try to create a redmine CSS only theme, that hides the attributes section and only shows it on mouse-click or touch.

I added the Pseudo Class :active which works fine on desktops, but on Android Chrome, it only activates for a fraction of a second and then it looses this attribute again (because it starts a selection for copy and paste then instead)

.details > .attributes {
        height:20px;
        overflow:hidden;
        display: block;
        cursor:pointer;
}
.details > .attributes:hover {
        background-color:#ddd;
}
.details > .attributes:active, .details > .attributes:focus {
        height:auto;
}

(here I added the :focus attribute as well, but that didn't change anything)

How can I bypass this without editing the html-code and without javascript?

is there anything in the html can can be used when on a mobile device? like a `.mobile` class on the `body` when viewed on a touch device? — atmd, Jun 02 '15 at 09:10
I think redmine doesn't have this. the problem is, `.attributes` is just a div with that class, and divs can't have a focus — rubo77, Jun 02 '15 at 09:18
you can disable focus/hover etc on touch devices which would fix your problem as well as boost perf on those devices, but you'd need something in the css to differentiate from desktop. [here is a js method, although I know you want a pure css solution](http://stackoverflow.com/questions/23885255/how-to-remove-ignore-hover-css-style-on-touch-devices) not sure how you'd do it if you can't differentiate — atmd, Jun 02 '15 at 09:20
You can use [modernizr](http://modernizr.com/) to detect if the device has touch events, and if it does have, you can additional markup. — Vucko, Jun 02 '15 at 09:25

score 0 · Answer 1 · answered Jun 02 '15 at 09:37

As a workaround, I added now a transition and keep it open on :hover:

.details > .attributes {
        height:20px;
        overflow:hidden;
        display: block;
        cursor:pointer;
}
.details > .attributes:hover {
        background-color:#ddd;
}
.details > .attributes:active, .details > .attributes:hover {
        height:120px;
        overflow:auto;
        transition: height 1.1s ease-in;
}

it is only a workaround, because this doesn't work with height:auto because there is no transition possible from height:20px to height:auto. I defined 120px which seems to be enough in most cases, but if it doesn't fit, the overflow: auto will show a sclŕollbar at the side of the div (which is acceptable)

CSS pseudo class for touch

1 Answers1