Advanced Stylesheet CSS using Media Queries, And More

General Discussion
,
1

Hello everyone, long time viewer, first time caller.

I have become pretty versed in making Perspective applications in a manner that replicates how one would make the same project in Vision; large, inflexible facility maps with spartan styling, that are intended solely for use with a standard computer and mouse.

I am now trying to diversify my skill set and build an application that makes more use of the things Perspective offers over Vision, namely CSS, and also make the UX with a touchscreen not just work, but work well.

I only have one question for the moment, but have phrased this post in a manner to invite any tips or tricks that come to your mind that you think I could use to continue developing a solid product for use on a touchscreen.

I purchased a Phoenix Contact panel PC off eBay to simulate my application all the way up to a real installation. It's Windows 10 IoT, and I am opening the application in Microsoft Edge. I am finding that when I apply the following advanced stylesheet style to an object and then press on that object on the touchscreen, the transform scales the object up, but when I remove my finger from the screen the object does not scale back until I press elsewhere. It works as intended when using a mouse, however.

image
image300×177 2.63 KB

I've tried the following to try to specify the media type in an attempt to only call this transition on mice devices, but the advanced stylesheet doesn't seem to like the syntax, not recognizing the last closing brace.

Any thoughts? Am I on the right track? Is there a setting in Windows panel PCs regarding touch input I need to change?

image
image323×218 3.48 KB

Thanks in advance for your responses!

1 Like
2

What exactly are you wanting this element to do?
It sounds like you want it to scale on click and touch, but you are using hover in the CSS.

It is my understanding that CSS cannot by itself detect a click or touch event. You would need JavaScript in order to realize that function.

However, it can detect when an element is active. Try using active instead of hover and see what the results are. I would expect that it would work for both click and touch. Just a side note, in the web ui world a click and touch event are two separate things. There are media queries that can work with both and some cannot. I.e., it’s hard to hover on a touch screen.

3

Im pretty sure it still works regardless if it recognizes it.
Does it not? it seems correct.

Its probably a browser thing, most browsers register a long touch as hover, untill you press somewhere else on the screen. (this allows you to read hover popups without your finger still blocking the screen)