Comment by chrismorgan | Hacker News Reader

Comment by chrismorgan | Hacker News Reader

Some feedback:

• Don’t kill link underlines. They’re a very important affordance. If you’re not fond of the æsthetics of a strong underline, one technique I consider reasonable (and use on my own website) is to reduce the opacity of the underline with something like `text-decoration-color: #03c5` (unfortunately you’ll have to write it out each time you change the colour of a link; I really want color-mix(currentColor transparent 33%) from the CSS Color Module Level 5 draft).

• When styling :hover and :active, consider :focus as well. For example, where you’ve hidden link underlines, you’ve shown them on :hover and :active, but you should probably show them on :focus as well. (If you want to get fancy and recent, you could consider using :focus-visible instead of :focus; if you do, just make sure it’s in a separate rule set from the others so it doesn’t break older browsers.)

• On something like this, killing the purple colouring of visited links makes me sad. Please consider restoring it, it’s useful on content websites.

• The markup you use for heading anchors (<h2 id="foo"><a href="#foo">Foo</a></h2>) isn’t great, and precludes putting actual links in headings (which is normally not a good idea, but there are definitely cases where I’ve reckoned it worthwhile and done it). If you want heading anchor links, go for something like <h2 id="foo">Foo <a href="#foo" aria-hidden="true" tabindex="-1" title="Link to this heading">§</a></h2> (some of the most common characters used for this: # NUMBER SIGN, § SECTION SIGN, ¶ PILCROW SIGN, U+1F517 LINK SYMBOL), and show the anchor on hover only (but make sure it’s part of layout either the whole time (e.g. `visibility: hidden` when not hovered) or none of the time (e.g. `position: absolute`) in order to avoid layout flap). This will make life better for users of screen readers especially (so they’re not getting a spurious link). If anyone else has opinions on heading anchors, I’d be interested to hear them; don’t think I’ve ever seen a detailed analysis of all the techniques and their implications.

• One of your headings has a typo: <h2 id="Blockquote"><a href="#blockquote">Blockquote</a></h2>, id needs to be lower case (IDs are case sensitive).

• Good job on appropriate use of pre, code, samp and kbd.

Thank you for the detailed feedback. Some of the styling choices I have made in this CSS come from my own preferences and idiosyncrasies. After all, like I have mentioned in the README, I use this CSS while quickly developing new personal, hobby websites or web-pages which happen to be mostly text-based.

Having said that, your feedback is well-taken and I will indeed consider them during my next update to the CSS. In particular, I went ahead and added the style for :focus right away.

Thank you for noticing the incorrect case in <h2 id="Blockquote">. It was a typo caused by careless yank-and-copy. I have fixed it now.

His/her suggestion not to kill underlines is spot on. Making it a lighter color might be the solution.

Another update: In the example demo page, the section headings are no longer links to themselves. Instead the headings now have a hash symbol next to them which become visible on hover. These hash symbols are heading anchor links. See the demo at https://susam.github.io/spcss/#heading-anchor for more details.

> unfortunately you’ll have to write it out each time you change the colour of a link

Or you can just use CSS variables:

  <style>
  :root {
    --link-color: 0, 0, 0;
  }
  a {
    color: rgb(var(--link-color));
    text-decoration-color: rgba(var(--link-color), .2);
  }
  </style>
  <a href="#">Hello world</a>

I used to radically style my website.

After some time dog-fooding, I decided to do some improvement tweaks. One of them was a slightly different color for visited links. That feels good

Why are you suggesting the #foo header have a link to itself? That doesn't make sense. An id attribute value is supposed to be unique to a document, they also act like anchors. Your <h2 id="foo"> is already the #foo anchor target. You can add arbitrary anchors with the "<a name>" tag but if you've got elements with id attributes you're already good for anchors.

This is true of all elements with an id attribute, not just headers. They're unique in the document so they can be unique selectors in the DOM.

> Why are you suggesting the #foo header have a link to itself?

This is already the way that page is set up; grandparent was merely explaining a better way of doing it.

As for why you would want to do this – it’s very common for headers to include links to themselves so that readers can easily obtain a link to share with others. But as grandparent points out, it’s more common to do this with a symbol next to the heading rather than turn the entire heading into a link. This technique has been in use since about 2004:

https://www.tbray.org/ongoing/When/200x/2004/05/29/PurpleNum...

That makes sense but was poorly described in the GP comment. I've seen this plenty of times but the justification wasn't jumping out at me. I think the example of the blockquote having a header id of "blockquote" didn't really help with clarity, especially since there's multiple blockquotes.

It's so frustrating when you want a link to a specific heading but the site doesn't have these links. So much online documentation has the ids but not the links. How else are you supposed to find the ID to link to a heading? Guess? Open dev tools? I will do both, because I'm particular about it, but 99.9% of regular people I know don't care enough to try either. But if it's right there (and they know what it is and what to look for), then maybe there's a chance someone will give me a direct link to the specific part of the docs under question instead of another enormous pre-compiled single page document with vague instructions to search on the page for what turn out to be frequently used terms.

Please make linking to content headings easy on your site!

> If you want heading anchor links, go for something like[...]

...something like `a > h1`. Anchors wrapping block headings feels...wrong, but it's valid HTML5.

Most browsers will set the inner `h1` as display: block so the click/tap target for the `a` becomes larger. (`h1 > a` with `display: block` would have the same result though).

Also make sure that content isn't being duplicated for the user, `a` and `h1` are waypoints for users. `aria-` attributes can help you here.

`a > h1 > title text` has basically the same set of problems as `h1 > a > title text`. I’m saying that the anchor link should be separate from the title text, and largely hidden (from screen readers and keyboard navigators).

Reply on news.ycombinator.com