I haven't found a nice way to do this on both desktop/mobile. What I want is for every heading to have an anchor link that can be copied, similar to a hyperlink. I see a lot of sites do this with a [unicode chain symbol] which is present on hover, but that's not an option on mobile. Alternate option is to have it next to every heading (ugly), turn every heading into a hyperlink without styling, or make them look like regular hyperlinks which I think is confusing.
/* keep the icon hidden by default */
:is(h1, h2, h3, h4, h5, h6) .icon {
visibility: hidden;
}
/* show the icon on focus and hover */
:is(h1, h2, h3, h4, h5, h6):focus .icon,
:is(h1, h2, h3, h4, h5, h6):hover .icon {
visibility: visible;
}
/* show the icon on devices that don't have any accessory that can hover */
@media (pointer: coarse), (any-hover: none) {
:is(h1, h2, h3, h4, h5, h6) .icon {
visibility: visible;
}
}
The `pointer: coarse` media query checks if you are using a device with an input mechanism of limited accuracy (such as fingers on a touchscreen). The `any-hover: none` media query checks if none of the input mechanisms on your device support hover (such as a Surface tablet not attached with a keyboard).
Have an icon appear on hover, and make every heading a hyperlink (even without styling), and have a table of contents with links to each heading (with styling). No need to dumb down your interface just for smartphone users.
The anchor symbol can have JavaScript that copies the link to clipboard on click. And the heading can be a plain old link to itself. Gives a nice visual and interaction for desktop while providing a way for mobile users to get the link too (long-press the heading and copy link).
I don't think it looks that bad. My blog's anchors are hover-visible on desktop and always visible on mobile (with lower opacity). I used this query to check for hover event availability to decide whether they should be always-visible: `@media screen and (hover: none)`. I think it turned out pretty ok¹.
I haven't found a nice way to do this on both desktop/mobile. What I want is for every heading to have an anchor link that can be copied, similar to a hyperlink. I see a lot of sites do this with a [unicode chain symbol] which is present on hover, but that's not an option on mobile. Alternate option is to have it next to every heading (ugly), turn every heading into a hyperlink without styling, or make them look like regular hyperlinks which I think is confusing.