Detecting touch devices from css

Detecting touch devices from css

I have a web page where I use the :hover psuedo-class just a few places,
because I don't want to clutter the interface.
Obviously, on touch devices I must remove the :hover, so I do the following:
all.css:
.button {
display: block;
}
hover.css:
.button {
.display: none;
}
.frame:hover .button {
.display: block
}
Does CSS offer any way to activate the hover definitions only on touch
devices?
I know you can test for "TouchEvent" in JavaScript, or do crazy regular
expression matches on the User Agent string on the server, but can CSS do
it?
(If it is not possible with CSS, what would you do with JavaScript? Simply
append the hover definitions into the <style> tag after doing the test?)