This is good to know. I've used JavaScript in the past to add a class to the body for touch devices which then activate CSS styles for those users. This is a lot cleaner and appears to have good browser coverage too.
Kevin you actually read my mind. I'm currently working on a therapy Web app that needs to be mobile responsive, and I was wondering the best way to replace hover animations if the user has a touchscreen. I literally couldn't do anything without this channel.
But anyway, personally I'd say using hover to display any useful information should be considered bad design. It's easy to trigger (or disengage) by accident and also doesn't always available. Just show the information or always ask for a click/touch to trigger. The only valid use should really be just to indicate you are pointing at a clickable element and nothing more.
While thats true, for some its not aesthetically pleasing. You can still go the "bad design" route just with the indication that the object can be hovered, for example using arrow icons etc to indulge interaction. You just gotta make things clear enough so the user understand what the ui does and how to use it. Think of it as bad design done well.
@@krazymeanie Personally never loved hover-over design even in the early 2000s, before iPhone made surfing Internet web page with touch screen popular. It was always, hey you are 1 px off the hover zone so we have to get rid of the whole thing for you. That was the era when animated objects can only be done in Javascript (rather than the GPU-accelerated CSS) so hover is either overly sensitive or very unresponsive.
Another solution for touch devices and hover is to make it clear that there's some hidden content by adding an after element with an arrow (or arrows) symbol hinting it is an accordion.
Just food for thought: Maybe intersectionObserver can give us a somewhat replacement for hover on small screens? On larger screens, you can see more elements at the same time, so hover is good to indicate where the user's attention is On smaller screens, the user usually sees just one element: the present one. So maybe we can do "hover" animations when the element appears on the screen What do you guys think? (disclaimer: it's a little off-topic. I know that devices with large screens can also have touch screens that doesn't support hover)
Kev, a very nice & easy way to solve problems with hover state. It def helps poeple to achieve a prompt resolution I agree, but sometimes what I'm also doing for a fancy effect is wrapping everything within an instance of intersection observer. When I'm scrolling the page then triggering a focus state for visible and centered elements (chosen selectors not everyone). This keeps all my animations working nice and effective.
I really was wondering how this can be done, I thought media query would be enough but since u mentioned touch desktop this makes more sense , Thank u Kevin!
Great solution... I thought I had a catch-all fix where the elements were display:none until their parent had focus-within. I enjoyed the experience on a touch device of tapping once to reveal and once to click... But that sucks because display:none removes it for screen readers too... I didn't think I could use visibility:hidden or opacity:0 because they're clickable but maybe a transform on the hidden element is the way to go. Of course if my hacks fail I will resort to your more appropriate advice!
Great! This should be included in our CSS-best-practices-guide and it head us to progressive enhancement or gracefull degradation. Either way it's a semantic behavior that we all want for our projects. Thank you Kevin!
Tried this with React using styled components. Using hover:hover and hover:none appeared to work fine in Chrome on a PC with developer tools. However, when I viewed the app on my A71 phone, it was not behaving correctly. I had to use pointer:fine and pointer: coarse and this worked perfectly. Cheers!
I just add 'ontouchstart' inside my opening body field ex: as a means to deal with this. This way, if a user touches anywhere on the screen where a hover effect may occur, it still happens. Same as if they're over a section and start to scroll with their finger, it'll fire off the hover effect. I find that this is how I personally would use a site so it works for me.
It is a good solution, although it would be highly interactive to get people to access the detail of the information by tapping, and go to the URL with the second tap
So the most effective approach is to start with mobile dimensions and no hover effects, then scale it up to full size adding the fancy stuff we want in "@media hover: hover". Correct?
It can be done responsive if some custom properties are set from js when (and after) the DOM is loaded. So, title may be multiple line text, as you know. I think it's time for you to introduce and use web components. Only way for complete solutions. Sync of web comp is last part of definitely frameworks removing. Let's say Lit is a compromise, maybe angular for webapp, maybe electron for native desktop app. But client side should become independent 100%.
So I'm still a student, but I've made a few websites and I am one of those people who actually love the language... A few months ago I moved from Firefox to Vivaldi (Chromium) And this video taught me that media queries could do more than just affect screens and sizes... so that's cool. but it also taught me where to find the touch no touch thing on Chrome... and that, I had given up on searching So thanks Kevin 😂
Hover: hover doesnt work if your browser supports long press to hover. It does work in the inspector but on a real device it ignores it (I have a OnePlus 8 Pro with Chrome and it still uses the hover:hover query). Pointer: coarse is better because this does work
hey kevin can you pls make a video of css animation.transition,transform,translate css properties cause i dont i have any knowledge about all that at all.This will very helpful.
can u tell me how to add auto hover in media max width 576px . the hover i added is only working when i tap the item . i need my hover when it is at the centre of the mobile screen
Is there a way to use the same in-card animations maybe when the user touches the card while scrolling ? I THOUGHT THAT WOULD BE THE ALTERNATIVE FOR A HOVER
Just a heads up that this media query doesnt work on most samsung devices. Weirdly enough they trigger the hover: hover query but not the hover: none. Until thats fixed I cant find this media query useful.
hi i have small problem when id did what you said it works for chome mobile (chrom mobile toch mode )but it didnt on my android phone use kast version of chrome do you have help ?
This kinda makes pages a bit bland on mobile. I'd rather give myself an aneurysm by fiddling with JS to have it function properly even on mobile Safari.
Great video! I have a project and I need to fill a hover object with data from a table. I want a user to hover over a name of a company and the website outputs data from a table, as that data is subject to updates Can I do this with CSS or do I need to know Java too. Where do I start
This is good to know. I've used JavaScript in the past to add a class to the body for touch devices which then activate CSS styles for those users. This is a lot cleaner and appears to have good browser coverage too.
Kevin you actually read my mind. I'm currently working on a therapy Web app that needs to be mobile responsive, and I was wondering the best way to replace hover animations if the user has a touchscreen. I literally couldn't do anything without this channel.
But anyway, personally I'd say using hover to display any useful information should be considered bad design. It's easy to trigger (or disengage) by accident and also doesn't always available. Just show the information or always ask for a click/touch to trigger. The only valid use should really be just to indicate you are pointing at a clickable element and nothing more.
perfect point
While thats true, for some its not aesthetically pleasing. You can still go the "bad design" route just with the indication that the object can be hovered, for example using arrow icons etc to indulge interaction. You just gotta make things clear enough so the user understand what the ui does and how to use it. Think of it as bad design done well.
@@krazymeanie Personally never loved hover-over design even in the early 2000s, before iPhone made surfing Internet web page with touch screen popular. It was always, hey you are 1 px off the hover zone so we have to get rid of the whole thing for you.
That was the era when animated objects can only be done in Javascript (rather than the GPU-accelerated CSS) so hover is either overly sensitive or very unresponsive.
That’s overly prescriptive.
You then just deny extra functionality to users who happen to use a mouse.
My whole website is hidden by a rollover. Guess I need a redesign.
I love pure css … Great Kevin 🤩✌🏻
Another solution for touch devices and hover is to make it clear that there's some hidden content by adding an after element with an arrow (or arrows) symbol hinting it is an accordion.
Just food for thought:
Maybe intersectionObserver can give us a somewhat replacement for hover on small screens?
On larger screens, you can see more elements at the same time, so hover is good to indicate where the user's attention is
On smaller screens, the user usually sees just one element: the present one.
So maybe we can do "hover" animations when the element appears on the screen
What do you guys think?
(disclaimer: it's a little off-topic. I know that devices with large screens can also have touch screens that doesn't support hover)
Are you suggesting something like use intersection observer to only show the details of the card in the middle of the screen or something like that?
@@nikilragav yep
Amazing video Kevin!
I really believe you should make a video about all the different types of media queries
This is very very neat. Never realized there is a media query for touch devices
Kev, a very nice & easy way to solve problems with hover state. It def helps poeple to achieve a prompt resolution I agree, but sometimes what I'm also doing for a fancy effect is wrapping everything within an instance of intersection observer. When I'm scrolling the page then triggering a focus state for visible and centered elements (chosen selectors not everyone). This keeps all my animations working nice and effective.
I never even knew about hover media query. Thanks!
I really was wondering how this can be done, I thought media query would be enough but since u mentioned touch desktop this makes more sense ,
Thank u Kevin!
That was exactly what I was looking for! Thank you for the video!
Great solution... I thought I had a catch-all fix where the elements were display:none until their parent had focus-within. I enjoyed the experience on a touch device of tapping once to reveal and once to click... But that sucks because display:none removes it for screen readers too... I didn't think I could use visibility:hidden or opacity:0 because they're clickable but maybe a transform on the hidden element is the way to go.
Of course if my hacks fail I will resort to your more appropriate advice!
Thanks Kevin for this incredibly important and helpful lesson. I found that on my Mac Command + Alt/Option + M toggled the mobile view on Firefox.
Great! This should be included in our CSS-best-practices-guide and it head us to progressive enhancement or gracefull degradation. Either way it's a semantic behavior that we all want for our projects. Thank you Kevin!
Tried this with React using styled components. Using hover:hover and hover:none appeared to work fine in Chrome on a PC with developer tools. However, when I viewed the app on my A71 phone, it was not behaving correctly. I had to use pointer:fine and pointer: coarse and this worked perfectly. Cheers!
This is just so mind blowing, learning new and very important things on this channel
❤ i like this implementation. You nailed it! I will use this for my future request or projects. This channel is on 🔥.
Did not even know about this. Thank you Kevin. Awesome as always!
Thank you Mr Powell 🙏 currently working on a project and I needed this!!! Legend.. 😎
I just add 'ontouchstart' inside my opening body field ex: as a means to deal with this. This way, if a user touches anywhere on the screen where a hover effect may occur, it still happens. Same as if they're over a section and start to scroll with their finger, it'll fire off the hover effect. I find that this is how I personally would use a site so it works for me.
Some new and cool stuff... once again. Gonna use it in my projects now. Thanks a lot!
awesome stuff again!! thanks!
It is a good solution, although it would be highly interactive to get people to access the detail of the information by tapping, and go to the URL with the second tap
Youuuuuu areeeeee the greatest, I sayyyyyyty it again you’re the greatest. You shaped me into a great front end designer thank you sooooooooo much
So the most effective approach is to start with mobile dimensions and no hover effects, then scale it up to full size adding the fancy stuff we want in "@media hover: hover". Correct?
It can be done responsive if some custom properties are set from js when (and after) the DOM is loaded. So, title may be multiple line text, as you know. I think it's time for you to introduce and use web components. Only way for complete solutions. Sync of web comp is last part of definitely frameworks removing. Let's say Lit is a compromise, maybe angular for webapp, maybe electron for native desktop app. But client side should become independent 100%.
Thanks mate! Keep making such videos
Earned a sub! Don’t let me down. Keep up the consumable content 👍
So I'm still a student, but I've made a few websites and I am one of those people who actually love the language...
A few months ago I moved from Firefox to Vivaldi (Chromium)
And this video taught me that media queries could do more than just affect screens and sizes... so that's cool.
but it also taught me where to find the touch no touch thing on Chrome... and that, I had given up on searching
So thanks Kevin 😂
Awesome! Kevin, thank you so much! 💛
Such a great CSS feature
My God, this is bonkers thanks for sharing!
Much appreciated ❤
Super helpful media query. I was wondering how to do this when building/designing SaaS apps.
Super usefull! Thanks!
thanks, very well explained
Thanks a lot Kevin, you never disappoint!
Kevin can make fully functional website with css without using html and java 😂😂
Hover: hover doesnt work if your browser supports long press to hover. It does work in the inspector but on a real device it ignores it (I have a OnePlus 8 Pro with Chrome and it still uses the hover:hover query). Pointer: coarse is better because this does work
Exactly what i was looking up a few weeks ago:)
Yes, yes! A mobile CSS video. Thanks
Always helpful and insightful. 🤘
Do a css series course videos
Wow this is amazing. Thank you!
thanks, excellent tutorial.
you're the best! thank you
Noticed that Kevin's wearing a dftba t-shirt! I'm a nerdfighter too!!
You the man bro, you're too epic at styling
Super helpful and useful, thanks!
KP you are my go to for css videos and I'm wondering how an elements title attribute works on a touch screen, or how you could make them work.
Thank you for this!
Thank you, this really solves some problems for me.
He just knows what I'm searching for this guy is a wizard
Many thanks for your video)
I already love CSS 🥰 nice to know this new trick
Just did it in very bad approach using is in my last project! I wish I knew it earlier
I learned something today.
This is why we call you: The King 👑 of CSS!
its really heapfull. thanks
wow its very useful thank you Kevin !
excellent!
Kelvin🤲🏾❤️ always happy once i see your videos
We love you Kevin ❤️❤️❤️
Awesome!
Cursor media query seems nice to condition the size of buttons
hey kevin can you pls make a video of css animation.transition,transform,translate css properties cause i dont i have any knowledge about all that at all.This will very helpful.
can u tell me how to add auto hover in media max width 576px . the hover i added is only working when i tap the item . i need my hover when it is at the centre of the mobile screen
Also for hover on mobile dragging from left to right or vice versa should work.
Is there a way to use the same in-card animations maybe when the user touches the card while scrolling ? I THOUGHT THAT WOULD BE THE ALTERNATIVE FOR A HOVER
muy bueno, gracias
Just a heads up that this media query doesnt work on most samsung devices. Weirdly enough they trigger the hover: hover query but not the hover: none. Until thats fixed I cant find this media query useful.
Super Awesome stuff 👍
Nice video
I love your content Kevin, keep it up! 🫶
That is a very useful tip thanks.
media hover and any-hover don't work in my Firefox 102. Does anyone have the same issue? Caniuse and MDN say it is supported by Firefox
Thanks!
thank u
So instead of using screen sizes, can we just use these media queries to check if were on mobile?
is there a way in css to do long touch press to then for example show title?..
Hey Kevin! Can you make a video on how to use a tag and styling it , its complete usage please😁😁
New knowledge!
amazing!
Wish I could have remember at least 20% of what I have seen in your videos...and even now it is awesome. Well done sir, like always.
Grazie.
I've been using pointer fine in my media queries for my hover effects. Would you recommend using hover hover instead?
This is soo cool
I wondered about this.
hi i have small problem when id did what you said it works for chome mobile (chrom mobile toch mode )but it didnt on my android phone use kast version of chrome do you have help ?
god I love this dude
Does anyone have this kind example card with responsive mansory design or similar? thx
greeeeeeeeeeeeat, you made my day
I thought the solution is when it scroll to that card the info will show with animations.
Okay, I can honestly say I respect @Kelvin so much that it is love. He is just an awesome human being from my perspective
I fondly remember how you could hover on the Samsung Galaxy S4.
I often wonder whilst watching to your videos: "This should not be free"
This kinda makes pages a bit bland on mobile. I'd rather give myself an aneurysm by fiddling with JS to have it function properly even on mobile Safari.
Great video!
I have a project and I need to fill a hover object with data from a table.
I want a user to hover over a name of a company and the website outputs data from a table, as that data is subject to updates
Can I do this with CSS or do I need to know Java too. Where do I start
Go with JavaScript
My mind is genuinely blown