In this post I want to address two issues I noticed with the script and css I created in my last blog post.
It doesn’t happen all the time, but this type race condition really annoys me! Now, I could quickly fix this by adding the heading anchor styles into the critical CSS that gets inlined. But that feels like a hack, since it isn’t critical to initial page layout and only applies once the user interacts with the headings.
Secondly, I noticed on my mobile phone that when I use the “Reader View” in Safari the injected links are visible.
This looks cluttered and unprofessional at best and could make the headings heard to read. For example, the
¶ next to an uppercase
I letter can be confusing depending on the font.
To do this I changed the script to only inject the HTML structure (an empty anchor tag) like so.
Then I used the CSS
content property with the
:before pseudo-element to insert the
The minor refactoring above fixed both issues by removing the race between markup and styling, and having CSS inject the link contents.
External stylesheets (included via
<link>tags) are render-blocking. Meaning the browser can’t paint content to the screen until the CSS is downloaded. ↩
Give Feedback via my AMA (ask me anything) project on GitHub. Published on by Daniel Lamb.