When I come down on touch devices I don't want the hover behavior. Is it possible to disable all hover effects at once for a whole website?
Given that you use Modernizr to detect touch and set the class.
This is what I came up with but it gives a lot of inconsistency:
html.touch *:hover {
color: inherit !important;
background: inherit !important;
}
Is there a way to do this with pure CSS? If not, how can it be done with javascript?
Update
This is now supported very decent across all mobile browsers, here is the Can I use link:
html.touch *:hover {
all:unset!important;
}
Old answer
This is good but not supported very well:
html.touch *:hover {
all:unset!important;
}
But this has a very good support:
html.touch *:hover {
pointer-events: none !important;
}
Works flawless for me, it makes all the hover effects be like when you have a touch on a button it will light up but not end up buggy as the initial hover effect for mouse events.
Try the all:unset or all:initial
html.touch *:hover {
all:unset!important;
}
Support is limited (https://developer.mozilla.org/en-US/docs/Web/CSS/all)
Attempting a catch-all solution is probably going to be tricky. I would just convert anywhere in your css where you defined a hover:
.thing:hover {}
to include the Modernizr class:
html.no-touch .thing:hover {}
Although you should be aware that any solution that uses Modernizr will not be a 'pure CSS solution', as Modernizr is javascript.
Related
I was able to transform a normal, non-fullscreen video element with this CSS-rule:
transform: rotate(9deg) !important;
However, when I put the video fullscreen, the rule gets magically overwritten by user-agent CSS-rules:
So I guess what I am asking is if I can somehow override even the user-agent rules? By the looks of it the transform property is overdriven as it is strikethrough, but yet the video won't rotate.
did you try specifying a css rule, similar to the one enforced by the browser? So, looking at the pasted code above, maybe something like this:
video:-webkit-full-scren {
transform: rotate(9deg) !important;
}
I did some similar stuff for range inputs, and I successfully overwrote the default browser styles. Maybe it works here too.
Furthermore, I also did some fullscreen tweaking of similar sorts. I wanted to remove the controls when in fullscreen, since I implemented my own. I just used this and it worked:
video::-webkit-media-controls {
display: none !important;
}
::-webkit-media-controls {
display:none !important;
}
I'm trying to make a blink effect on click (instantly set background and then fade out) but on second click removeClass is not removing it. Where is a mistake?
JS:
$('div').click(function() {
$(this).css({transition: '0s'}).addClass('qwe')
.delay(1).queue(function() {
$(this).css({transition: '2s'}).removeClass('qwe');
});
});
CSS:
div{
height: 100px;
width: 100px;
background: gray;
}
.qwe {
background: green;
}
Fiddle
The browsers are built to optimize consequent style changes by coalescing them. In case of CSS transitions they do it a bit over-zealously.
Currently there's no 'clean' way around it, the best you can do in current browsers is force restyle via window.getComputedStyle(document).color or similar before the applying the changes that would invoke transition (removeClass in your case).
See
Clean way to programmatically use CSS transitions from JS? for more information.
Solved it using jQuery UI
$('div').click(function() {
$(this).addClass('qwe').switchClass('qwe', '', 1000);
});
Is this possible? Short of converting all my hover styles into mouseover listeners is it possible to stop a touch device from triggering the CSS hover state?
I have an application that must work on both touch and pointer input, it works great but certain styles applied on hover just don't make sense on touch devices because they tend to retain the hover state indefinitely after a user has tapped an object.
Things to take into account:
Device width bears no correlation with touch enabled devices to me,
the touch screens we are using here are desktop size monitors.
I don't want to force a user to input via touch on a multi-input
device.
I had solved this problem following the approach shared in the link in the comments above. If you're not using it, consider using Modernizr in this scenario. Would like to hear some other approaches as well...
As user, Blender mentions, you can check against touch events like so:
html.touch {
/* Touch Device ~ No Hovers */
}
html.no-touch {
/* Not a Touch is disabled */
}
html.no-touch .element:hover {
opacity:.5;
}
My solution is to add hover-active css class to the HTML tag,
and use it on the beginning of all the CSS selectors with :hover
and remove that class on the first touchstart event.
http://codepen.io/Bnaya/pen/EoJlb
JS:
(function () {
'use strict';
if (!('addEventListener' in window)) {
return;
}
var htmlElement = document.querySelector('html');
function touchStart () {
document.querySelector('html').classList.remove('hover-active');
htmlElement.removeEventListener('touchstart', touchStart);
}
htmlElement.addEventListener('touchstart', touchStart);
}());
HTML:
<html class="hover-active">
CSS:
.hover-active .mybutton:hover {
box-shadow: 1px 1px 1px #000;
}
I included modernizr in my page, but how will I test that it's working in IE 6-7 if I don't have access to those browsers? Doing something similar to:
http://designshack.net/articles/css/build-a-freaking-awesome-pure-css-accordion/
The essential CSS:
.accslide {
height: 0px;
width: 0px;
overflow: hidden;
}
input[type="radio"]:checked+label ~ .accslide {
width: 100%;
height:auto;
}
If that second selector doesn't fire, the content will be invisible.
Is there a method to only load Modernizr if CSS3 is unsupported?
How do I test if Modernizr is working on my CSS selectors?
Modernizr doesn't add any functionality to the browser, simply checks for existing funcitionality. If you want to test for selector support you will need to add that. Here's a gist
However, even that isn't going to get you far for what you're trying to accomplish, which, I imagine, is showing the accslide element when you've checked the radio button. You will, most likely, need to use javascript if you expect to support IE6 & 7 -- IE6 doesn't even support the [type="radio"] selector, so you can't use that either.
You will need to add a click/change handler to the radio button and update it's container with a class to properly get your desired functionality, especially to support IE6.
Here's an example of what your CSS would look like:
#radioContainer .accslide {
height: 0px;
width: 0px;
overflow: hidden;
}
#radioContainer.on .accslide {
width: 100%;
height:auto;
}
Now, in javascript, when someone clicks/changes the radio button just add/remove an on class to the #radioContainer element. Note: I gave #radioContainer an ID b/c IE6 will not style an element from two css-class names (Ultimately, you would not be supporting IE6 and could simply provide .radio-container.on, which will not work for IE6)
Modernizr won't enable CSS features (like newer selectors) if the given browser doesn't support it. It's mainly a feature detection library.
Here is a picture of what I am working with:
I need the borders below the vertical menu bar (on the left) to fade out (the one going up and the one going down). How would I make these two borders fade out? It seems kind of blocky now. I prefer not to use JavaScript but I will probably do what is necessary (I'm trying to make the site as light weight as possible).
EDIT
By fade, I do mean over space, not time.
You can use two fade-out images as background-image
li.edge_top, li.edge_bottom {
background-position: right;
background-repeat: no-repeat;
}
li.edge_top {
background-image: url:('fadeout_top.png');
}
li.edge_bottom {
background-image: url:('fadeout_bottom.png');
}
You can make a bunch of 1px tall blocks with successively lighter border-right colors.
(Assume you mean "fade" as in over space, not time)
You could try the new CSS3 border-right-image attribute (http://www.css3.info/preview/border-image/) with a tall gradient PNG. However, this isn't going to be widely supported in most browsers. You're probably better off creating an image with the right gradient and setting it as the background-image on the .edge_bottom and .edge_top css classes (be sure to remove the existing border from those classes, too)
CSS3 gradients to the rescue!
Live Demo
Note: Gradients are only set up for Firefox. I can't test Webkit, but it should be pretty much the same.
This will remove it, these pseudo elements are not supported in older browsers
ul.vertical_menu > li:first-child {
border-right:none;
}
ul.vertical_menu > li:last-child {
border-right:none;
}
http://jsfiddle.net/5Ceb5/