I've noticed that sometimes if an element has css rules defined for its :hover state on mobile browsers they are applied whenever an element has focus. Is this expected behavior?
According to W3, :hover is applied when "some pointing device" is placed over the element:
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).
W3 src
So, no, :hover might not, and is not on some, supported on mobile devices.
You should use :focus instead.
Does css hover work on mobile devices?
Related
When using Firefox on a mobile device, touching on an element triggers the :hover pseudo-class. However, when using Firefox on a PC in Responsive Design Mode with Touch Simulation active, the :hover is not triggered by clicking the mouse button on the element. If I turn off Touch Simulation, then hovering the mouse over the element will of course activate :hover, but isn't the point of Touch Simulation to translate mouse-inputs into their corresponding touch-events? If touching an element on a mobile browser activates :hover, then shouldn't clicking the mouse in Touch Simulation also trigger :hover?
Simple JSFiddle to illustrate - view both on PC Firefox in RDM and on mobile Firefox to see the difference.
Am I doing something wrong, or is it a deficiency with Firefox RDM or with my understanding of Touch Simulation?
As you said, :hover :focus :active are pseudo-classes, according to this link from mozilla :hover matches when the user interacts with an element with a pointing device and problematic on touchscreens. We can achieve same effect :hover does in touchscreen using :active pseudo-class. Or combination of both.
As you said simulation of touch for :hover class is not working in Firefox. There is no promise to support it in future. Touch and pointing device worked in a very different way so its better not to use :hover that need the position of pointer to activate. On the other hand touch screen have no record of position before touch, so :focus :active are better alternative.
I will be happy if it does any help to you. Thanks.
Accordingly to the example on https://developer.mozilla.org/en-US/docs/Web/CSS/:focus-visible (under basic example), clicking the input with the placeholder ":focus-visible only" with my mouse should not show the orange outline styles – but it does.
Caniuse.com tells me, my chrome version supports :focus-visible.
Any hints?
The working draft spec states that browsers manufacturers are free to choose their own criteria for matching :focus-visible as opposed to just regular old :focus, but the spec does recommend several suggestions to be used as a starting point, including this:
Any element which supports keyboard input (such as an input element...) should always match :focus-visible when focused.
To me, this says that ALL input elements should always match :focus-visible.
In the example that you referenced, you'll notice that the button behavior is as expected. If you click the button with a mouse, it does not match :focus-visible, but if you select it with keyboard navigation, then it does.
The css works for me
For desktop
.momsType:focus-visible{
outline:none!important;
}
For mobile
.momsType:focus{
outline:none!important;
}
I need write rules for pseudo elements specifically for Edge and IE, but It seems that both of these browsers are not showing ::after and ::before pseudo elements in their developer tools despite them being rendered on the page.
Is there way to edit them directly in browser, as it is possible on Chrome or Firefox?
Edge shows pseudo element styles on the given element, but after other (even inherited) styles....
So scroll down.
Here's my site. This is the last problem of a series of cross-browser discrepancies I've experienced and solved thanks to the community.
Basically, in Internet Explorer 8 and Internet Explorer 9 the :active styles are not applied to the menu. It should turn darker when pressed. Please let me know why and how to fix. Thanks in advance.
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. See W3 documentation.
But you are applying your :active selector to your <li> element, which cannot have an active state since it never really gets activated - only hovered. You should apply :active state to <a> <- True for IE 6.
UPDATE: Here's a test sample at jsFiddle as you can see it works ok on <a> element but not ok on <li>
Interesting info I found here
The :active pseudo-class applies while
a link is being selected by the user.
CSS1 was a little ambiguous on this
behavior: "An 'active' link is one
that is currently being selected (e.g.
by a mouse button press) by the
reader." Also, in CSS1, :active was
mutually exclusive from :link and
:visited. (And there was no :hover
pseudo-class.)
CSS2 changed things so that rules for
:active can apply at the same time as
:visited or :link. And the behavior
was explained a little better: "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."
IMO, FF et al comply with CSS2 better
than IE. But since a link is supposed
to load a new page, IE could
legitimately say the link is still
"active" while the new page is
loading, which is what happens.
You can see a similar
counter-intuitive behavior in FF by
clicking the link, but moving your
mouse off of the link while holding
the mouse-button down. The link is not
activated (a new page is not loaded),
but the link remains in the :active
state. On the other hand, Chrome and
Opera de-activate the link, but at
different times; Chrome as soon as the
mouse leaves the link area, Opera not
till the mouse button is released. IE
behaves the same as FF in this
example. (Hit enter after dragging
your mouse off the link, and you will
see more differences in behavior.)
I would not call any of these
differences "bugs", because of
ambiguities in the spec.
The only work-around I can offer is to
accept that you can't control every
aspect of browser behavior. Users of
different browsers have differing
expectations of behavior, and if you
start messing with user expectation,
you're on the wrong path.
Just for the sake of relevancy and to save anyone else the hassle of searching for a solution, I also found a "bug" in IE <= 10, where you cannot apply styles to an :active child, e.g;
a:active img {
position:absolute;
top:-30px;
}
The above won't change the position of the image in IE <= 10, in which case you would need to apply :active on the child element itself;
a:active img,
a img:active {
position:absolute;
top:-30px;
}
Which in most cases isn't a perfect solution as any text inside the anchor needs to have a higher z-index value than the image, meaning that the image will only change it's position based on clicking the image itself (giving the image the :active state)... which left me in a minor bind, but a bind none-the-less (for a css only solution).
So although this is not a fix, it is more of a note of "warning" for others about the downfall to the :active pseudo selector in IE. Rubbish. =(
I have created some fairly elaborate DOM elements with an :after pseudo-element, and I'd like to be able to inspect and tweak them in either Chrome Inspector or Firebug or equivalent.
Despite this feature being mentioned in this WebKit/Safari blog post (dated 2010), I can't find this feature at all in either Chrome or Safari. Chrome does at least have checkboxes to inspect :hover, :visited and :active states, but :before and :after are nowhere to be seen.
Additionally, this blog post (dated 2009!) mentions this capability exists in the IE dev tools, but I'm currently using Mac OS, so this is no help to me. Additionally, IE is not a browser I'm primarily targeting.
Is there any way of inspecting these pseudo-elements?
EDIT: In addition to being wrong about Firebug being unable to inspect these elements, I've found Opera to be pretty good at Inspecting :before and :after elements out of the box.
In Chrome's Dev tools, the styles of a pseudo-element are visible in the panel:
Otherwise, you can also input the following line in the JavaScript console, and inspect the returned CSSStyleDeclaration object:
getComputedStyle(document.querySelector('html > body'), ':before');
window.getComputedStyle
document.querySelector
As of Chrome 31 pseudo elements show in the elements panel as child elements of their parent as shown in the following image:
You can select them as you would a normal element but if you remove the content style then the pseudo element will also be removed and the devtools focus will change to it's parent.
It appears that inherited CSS styles are not viewable and you can't edit CSS content from the elements panel.
Chrome won't show :before and :after pseudo elements in the DOM-tree, if they miss "content" attribute. It should be set, even if it is set to nothing.
This won't show up:
:after {
background-color: red;
}
This will show up in the inspector:
:after {
content: "";
background-color: red;
}
Hope it helps.
At least since Chrome 62 there's a setting in DevTools to 'Show user agent shadow DOM' which displays additional pseudo-elements like input placeholders, which wouldn't show up in the DOM tree otherwise.
More information: https://stackoverflow.com/a/26853319/3963594
After a lot of frustration, I figured out that firefox doesn't show the pseudo elements in the document tree at all, but if you select the exact element which has pseudo element(s) defined, then the styles for its pseudo element(s) are shown in the style rules section on the right side. This is true for both firebug and the built-in inspect ("Q"), and I am shocked that nobody bothered to explain this clearly before.
Clearly, chrome/chromium's handling of pseudo elements is vastly superior, as they can be selected (both in the document tree and directly on the page) and inspected just like regular elements, with layout, properties and everything else, independent of their "owner".
Browser versions I'm using currently: Chromium 40.0.2214.91, Firefox 31.3.0.
Firefox has had this feature for awhile now, just right click, "inspect element", and see the before and after elements in the right panel of the inspector.
Select Element--> select hover checked ---> you can see ::before and after elements