There were / are / will be devices that support detecting hovering a finger or stylus away from the screen, so engineering-wise it's possible; it's just not included in the UX guidelines for the respective platforms.
The social icons are neat, but using filter would be shorter than manually setting normal and hover styles, at the cost of having inconsistent gray colors:
> Outline is a line outside of the element's border. Unlike other areas of the box, outlines don't take up space, so they don't affect the layout of the document in any way.
If you s/border/outline in the dev console on the image you get what you want.
You haven't noticed? Literally everything in web development has been in a constant cycle. Everything is reinvented and made significantly worse.
Next week: How to run your Docker React Node Babel Webpack Svelte grocery list application at the EDGE using Kubernetes on AWS serverless EC2 instances with Cloudflare workers.
A good hover style reminds me of how fast and responsive our computers can be, if we let them. For example, I add a thicker underline when you hover over a link on this site, and it appears/disappears almost instantly as I move my cursor around. It feels snappy; it makes me smile.
Sigh. We managed to raise a generation for which an instant interaction on a 1000+MHz multi-core gpu-accelerated 1000+MB/s io system feels snappy and that’s special. Good job, goob job.
you could add a negative margin to offset the border, or an always-on transparent border that only changes colour when you hover – but those can interfere with other CSS rules
The worst part of CSS is its globalness. You can’t have two paddings sourced from different subsystems, can’t name a border so you could address it specifically (e.g. as in el:border(myhover) {background: <gradient>}). CSS is so poor and antipattern and nobody bats an eye. You write an article like this and already see all these fragile hacks advices coming in, normalized by years of stockholming through even most basic layouts.
It's ironic because I'm sure this lament has been voiced in one way or another with every generation of developers.
Anyway, your comment feels like a straw man; I don't know anyone who actually believes what you're claiming, nor is this sentiment anywhere on HN. The closest things are discussions about whether your website should work with JS disabled whenever a too-clever website is linked.
As someone who experienced the rise of JavaScript, CSS and modern frontend frameworks, your comment gives me a chuckle because I'm pretty sure using JavaScript for hover effects pre-dates the ability to do that reliably using CSS.
I don’t see anything bad here, tbh (ignoring my acute allergy to react—alikes). The problem is not how they write. DX is a good thing. Interactivity too. The problem is what happens at runtime: fetch html, fetch script, fetch data multiple times. It should be fetch html which contains a script which contains all the necessary data and creates elements and sets handlers.
I can't really knock it when no one is ever going to ask them to do anything else. HTML might as well be assembly. It's starting to feel pretty vestigial at this point, it's all just different colored divs and aria labels. Elements on the screen as a human would perceive them stopped mapping to single elements ages ago.
For some "systems developers" this is literally how they create a program:
That’s why do you use `border-color: transparent` instead
That can make the image take up excessive space, or as the article says:
> ..., or an always-on transparent border that only changes colour when you hover – but those can interfere with other CSS rules
I really miss hover effects on mobile, wish there was a way for this !
There were / are / will be devices that support detecting hovering a finger or stylus away from the screen, so engineering-wise it's possible; it's just not included in the UX guidelines for the respective platforms.
It could also be implemented with eye tracking.
The social icons are neat, but using filter would be shorter than manually setting normal and hover styles, at the cost of having inconsistent gray colors:
SVG elements also support currentColor for the fill property, which is linked to CSS’s color property.
<svg><path d=“” fill=“currentColor” /></svg>
element { color: hsl(0 0% 0%) }
One advantage is that you can target the parent element and the SVG will change automatically.
You can also create multiple “shades” by having currentColor on multiple paths with different opacity.
> at the cost of having inconsistent gray colors
Which, to be fair, is a pretty high cost. The consistency of the greys that only differentiate on hover is half the aesthetic value of the effect.
Also this would not work for GitHub, for example, where the hover color is black, which is already "grayscale".
Why go for the simple method when you can instead simply hand-edit SVG code then add two extra HTML elements per icon?
Aren't you describing https://developer.mozilla.org/en-US/docs/Web/CSS/outline?
> Outline is a line outside of the element's border. Unlike other areas of the box, outlines don't take up space, so they don't affect the layout of the document in any way.
If you s/border/outline in the dev console on the image you get what you want.
Outline is used for :focus and :focus-visible, so box-shadow is nice to have for hover so you don't have to repurpose the outline for it.
like so
Always nice to see CSS on here, but we figured this out 15yrs ago. Are the kids rediscovering hover styles?
You haven't noticed? Literally everything in web development has been in a constant cycle. Everything is reinvented and made significantly worse.
Next week: How to run your Docker React Node Babel Webpack Svelte grocery list application at the EDGE using Kubernetes on AWS serverless EC2 instances with Cloudflare workers.
EDIT: I forgot we're gonna use Bootstrap too.
A good hover style reminds me of how fast and responsive our computers can be, if we let them. For example, I add a thicker underline when you hover over a link on this site, and it appears/disappears almost instantly as I move my cursor around. It feels snappy; it makes me smile.
Sigh. We managed to raise a generation for which an instant interaction on a 1000+MHz multi-core gpu-accelerated 1000+MB/s io system feels snappy and that’s special. Good job, goob job.
you could add a negative margin to offset the border, or an always-on transparent border that only changes colour when you hover – but those can interfere with other CSS rules
The worst part of CSS is its globalness. You can’t have two paddings sourced from different subsystems, can’t name a border so you could address it specifically (e.g. as in el:border(myhover) {background: <gradient>}). CSS is so poor and antipattern and nobody bats an eye. You write an article like this and already see all these fragile hacks advices coming in, normalized by years of stockholming through even most basic layouts.
We managed to raise a generation who think it's acceptable for JavaScript to be required in order to render a single page.
For some "web developers", this is literally how they create a page:
It's ironic because I'm sure this lament has been voiced in one way or another with every generation of developers.
Anyway, your comment feels like a straw man; I don't know anyone who actually believes what you're claiming, nor is this sentiment anywhere on HN. The closest things are discussions about whether your website should work with JS disabled whenever a too-clever website is linked.
As someone who experienced the rise of JavaScript, CSS and modern frontend frameworks, your comment gives me a chuckle because I'm pretty sure using JavaScript for hover effects pre-dates the ability to do that reliably using CSS.
I don’t see anything bad here, tbh (ignoring my acute allergy to react—alikes). The problem is not how they write. DX is a good thing. Interactivity too. The problem is what happens at runtime: fetch html, fetch script, fetch data multiple times. It should be fetch html which contains a script which contains all the necessary data and creates elements and sets handlers.
I can't really knock it when no one is ever going to ask them to do anything else. HTML might as well be assembly. It's starting to feel pretty vestigial at this point, it's all just different colored divs and aria labels. Elements on the screen as a human would perceive them stopped mapping to single elements ages ago.
For some "systems developers" this is literally how they create a program:
GTK/Unity/WinForms, everyone has their working level of abstraction.