Does css hover work on mobile devices? I have a css hover class which works fine on a regular web browser, but doesn't work on mobile browsers.
The :hover pseudo-class needs a pointing (graphical input) device, capable of distinguishing the actions pointing and selecting/activating. Usually on mobile devices with a touch interface you don't have the former, only the latter. Also some pen interfaces only allow activating, not pointing.
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).
—W3C: CSS 2.1: Selectors, dynamic pseudo-classes
So, to answer your question: It depends on the device but likely no. And don't rely on it. With touch-screen devices quickly gaining in popularity you'll lose the entirety of pointing-only events.
Sigh. It seems like no-one answering this question actually tried it on a real device. In many cases it does work. The first click acts as a hover.
Some more info here: http://designshack.net/articles/css/are-hover-events-extinct/
What does the questioner mean by "Does css hover work on mobile devices?"?
He obviously doesn't mean it literally, because there is no such thing as hover on mobile devices so it cannot work.
If he means "On mobile devices if I tap on an object with a hover style does anything happen?" the answer is Yes, but what happens varies with the device/browser.
Specifically on iPhone/Safari and Android the response is as if you have written an OnClick() event handler with the style change in it, and this persists until you tap on another object. On Windows phone the style change occurs while your finger is pressed down on the phone and then reverts when you release it.
You can check your device at the test site I set up at davidleader.net/mobiledemo.html.
Not unless the device can detect when someone is hovering their finger over the screen, about to tap. :)
It depends upon the browser used in the mobile device. Refer to Quirks Mode for mobile devices and see if your browser / platform will implement it.
From my own experience, it works fine on my iphone4, whatever is the browser (safari or chrome), but does not works properly on my nexus10 with chrome...
I used :hover to implement menu. When I say "it works", I mean that the first touch behaves like an hover on a desktop, and a second touch will behaves like a click.
When I say "it does not work", I mean that a touch behaves like a click directly...
I would say no, as you do not hover in a mobile interface. You can just press, if on touch screen. Otherwise you just move through links.
won't do its magic on touchscreen devices, but it does work on mobiles where the user navigates by using some arrow keys (or on amazon kindle)
also works for blackberry storm 1 devices as they have touch, and click events due to their suedo-tactile screens.
Yes, it has. if you don't believe, try it.
i) Write Hover Css on Codepen or other stack which you had Account.
ii) Save your work. [it easy to see if you add 'border-bottom: 1px dotted black']
iii) Open it on your Mobile, Tablet or whatever you want to prove. [which your pen save, mind is CodePen]
As result, you'll get the answer. Don't believe the theory much, just practice and prove it.
:hover works with the android default browser, but it is really tricky (for the user) to trigger the hover without triggering a click at the same time.
Related
I'm making a web game which I'd like to be accessible, and I wonder whether to keep track of certain stats using the aria progressbar, since its name doesn't really imply it should be used for this sort of thing. However, the spec doesn't state that it shouldn't decrease, (as expected for things like HP and such) so I'm left scratching my head.
Could someone who is more well-informed in accessibility tell me whether I should use this role, or whether I'd be better off creating a generic live region that announces these changes?
Using a progressbar for HP is fine. You are making progress towards death, so to speak. But keep in mind that if a progressbar's value is updated, its new value is not announced to screen reader users unless the focus is on the progress bar. To have changes announced anytime the progressbar is updated (without focus), you'd need aria-live. (Note: <progress> is not natively focusable. It's treated like static text.)
The main purpose of using <progress> is for a visual affect. It seems to be supported on all browsers, https://caniuse.com/#search=progress, but is not supported with all screen readers. NVDA (pc) and VoiceOver (iOS) will annuonce its value when you navigate to it using the screen reader navigation keys, but JAWS (very popular screen reader on the pc) will ignore it.
Also, for screen readers that honor the <progress>, a percentage is announced for the value and not an actual value. So if you had <progress value="22" max="50">, the value would be announced as "44%" and not "22".
It's up to you if you want to hear a number or a percentage.
You could also consider a <meter> but Internet Explorer doesn't honor it, https://caniuse.com/#search=meter.
Personally, I think your best bet is to use an aria-live region, specifically, role='status', https://www.w3.org/TR/wai-aria-1.1/#status.
On mobile devices elements having hover class activates when a user taps on them.So they behave like the active class elements. Then what's the difference between these classes for touch screen devices. Do they differ in any manner? If yes then how, if no then which one should be used?
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
I have a general question regarding css:
i want to add media queries to adapt to different screen sizes. But how do I know what values to give the different queries if i cant see it on the respective screen size?
is there a way to do preview how my content will look?
You can google chrome's inspect tool by clicking right on a webpage and click the little phone icon in the top left corner to view your website on various device sizes.
You can enter Chrome's (or Opera's) dev tools and activate Device Mode to simulate different screen sices. I like to use the responsive mode that allows you to drag and resize to check the behavior across different sizes and the Media Query ruler that shows you the CSS break points.
Other browsers have similar tools, like Firefox's 'Responsive Design Mode' or Edge's 'Emulation', both accessed through Inspect Element.
Yet this simulations don't guarantee to behave 100% like the devices.
Most modern browsers have device emulators in their Developer Tools. For Chrome you can find the documentation here: https://developers.google.com/web/tools/chrome-devtools/device-mode/
For even more cross browser/device testing you can use: https://www.browserstack.com/screenshots
Still nothing beats setting up a device lab, where you can physically test on some of the most popular devices.
Hope that helps,
You can use tools like this, to test it in different devices size and resolution.
https://screenfly.org
Today I've learnt something new, that <select> element rendered completely different on a desktop and mobile browser. The problem that I haven't use it before and almost all stuff I've done, is by using Bootstrap's elements.
So my question is actually 2 questions are following:
Why <select> tag rendered differently on mobile chrome and desktop chrome when I debugging in mobile mode? Is it intended behaviour or I can consider it as bug? For example open following page http://www.w3schools.com/tags/tag_select.asp from desktop browser in dev mobile mode and on a hardware device, you will see the difference.
What is the best approach to achieve consistency across various devices? Can I be sure that in all new mobile devices <select> will be rendered "in a mobile way", or just implement my own select element based on Bootstrap modal combined with List group as I've done here: http://codepen.io/anatoly314/pen/EPBmrM?editors=1010 ?
DevTools Device Mode does not emulate mobile-specific UA handling of form elements. This is actually very tricky to do since those things are compiled for that platform build.
The best thing to do is know there will be a difference. In the case of select elements it really doesn't matter much. Since the mobile UX is a full screen scroll selector of the choices.
The absolute best thing, as always, is use Device Mode as a guideline. It is not absolute nor can it be. You will always need to do on-device testing to verify everything works as expected. DM simply gets you 85-90% of the way there without issue.
I'm trying to present my notecards in a web app style.
I'm not worried about caching, or making it work offline.
I just want it render well in the iOS browser.
Here's the link: http://kaninepete.com/flashcard/review.php?Sec=3
I want it to look the same as if you re-size your browser window to 320x480.
The problem is, it always renders a huge amount of blank space off to the side.
I want to lock the scrolling to only the vertical axis (like flipping through notecards),
but also have the text at a readable size.
You can use CSS media queries to set your template on a certain width/height model. This works well and can adjust specifically for iPhone screens.
As for the font size issue you'll probably need to just spend time testing. With that it's going to require some type of virtual simulator or a real iPhone where you can test the site. I just loaded it up onto my iPhone 4 and I see what you mean about additional space - this is just because of your page size. Try messing with CSS media queries I think you'll find the answer in there.
Here is a very handy Google search to hopefully get you started on the right track. CSS3 has a lot of new features. Many of them geared towards mobile :)
Reading your question again, here's some suggestions based on what I think you're looking for.
Make sure your document is valid HTML before you continue. Safari on iOS supports HTML 5, so I'd suggest targeting that, unless your platform targets something different already.
If you just want it to run well in iOS Safari, then code for that. If you want it to look similarly in other browsers, however, then it may be necessary to look at styles targeting the iOS device (via width/height). See http://davidbcalhoun.com/2010/using-mobile-specific-html-css-javascript (It seems hacky, but based on some research a week ago, this still seems to be the suggested route.)
You've got CSS that shouldn't be in there if you want to target multiple browsers. overflow:hidden and set pixel widths.
Generally, I'd say you'll want to tweak your markup as well. List items or headers would be much better than just simple breaks.
Maybe I'm just oversimplifying the question, but it looks to me like all you really need to do is wrap each notecard in a div, perhaps giving each div a <div class="notecard_wrapper">. then just attach a stylesheet that specifies the width and height you want for each card.
This page explains Safari's viewport and how to change it. It will probably fix the font size problem and maybe help with the page size.
Basically, Safari by default simulates a screen that's about 900px wide, when it's actually about 300px (so the page appears zoomed out). This makes pages designed for real computers render properly, but for a web app you usually don't want it to zoom the page at all. The viewport tag should let you control that.