Improving online readability | Piccalilli

Where has this article been my whole life! Andy's posts are often brilliant, but this an absolute gold mine of information, from ideal character lengths to clever type-setting tricks. And I thought I knew at least a little bit about CSS 😂

On using the :not pseudo-class to pre-emptively use the cascade to stop future conflicts on broad rules e.g. a:not([class]) { ... } :

We qualify elements with the :not pseudo class because if you have a link that’s supposed to look like a button that has a .button class on it, you don’t want global link styling to get in the way of the styling that .button generates, so this approach helps that.

👆 This is one of those absolute AHA! moments. I generally don't find myself clashing with specificity in CSS, but I feel like this pattern might have prevented/fixed the few times it does happen. So long as there isn't a blank class, I guess, but it could be extended to a:not([class]), a[class=""] { ... }.

Andy also recommends setting classless anchor elements to use the currentColor keyword, thereby inheriting the styles of their containing text 🤯 e.g.

a:not([class]) {
  color: currentColor;
}

On providing high contrast text selection:

Lastly, selection styles! I like to add a high contrast selection style, personally. It’s a handy inclusion strategy because folks might find your colours hard to read, so giving them the inverse when they select it’s helpful.

And finally, just a really interesting usage of the em-dash:

globally, too—especially if your blog is just articles, but to keep things future-friendly, we’re

I've never seen an em-dash used like this, as a break and then immediate return to flow. It may be a typo, but it reads perfectly well. After my double-take to see if I'd missed a line, I re-read it and it just worked. If the pattern were more common, I don't think I'd question it. Not sure of the grammatical side of things, but I like it a lot.

Explore Other Notes

Newer

A movement to green the web

A powerful and insightful piece by Michelle on the direct environmental impact the tech sector has, the way in which tech workers can demand further accountability and action, and the reality that […]

Older

Life happens

There's a lot I like about the IndieWeb community, but one of the best elements is a constant determination to strive to be better. Their recent adoption of an official "Life Happens" policy […]
  • Where has this article been my whole life! Andy's posts are often brilliant, but this an absolute gold mine of information, from ideal character lengths to clever type-setting tricks. And I thought I […]
  • Murray Adcock.
Journal permalink

Made By Me, But Made Possible By:

CMS:

Build: Gatsby

Deployment: GitHub

Hosting: Netlify

Connect With Me:

Twitter Twitter

Instagram Instragram

500px 500px

GitHub GitHub

Keep Up To Date:

All Posts RSS feed.

Articles RSS feed.

Journal RSS feed.

Notes RSS feed.