Today I Learned - Rocky Kev

TIL Scroll Margin for anchor links

POSTED ON:

TAGS: css html

When you use anchor links, it jumps to the content with the assigned ID.

Example:
website.com/#title2

will take you to the element
<h2 id="title2">IM TITLE 2</h2>

Unfortunately, when the site jumps to it, it's pretty awful. It jumps PAST the content.

We can now use this little snippet to control that jump.

[id] {
  scroll-margin-top: 2ex;
}

For one site, I actually modified it to

[id] {
  scroll-margin-top: 25ex;
}

Your milage will vary.

REFERENCE:
https://www.smashingmagazine.com/2021/02/things-you-can-do-with-css-today/

Related TILs

Tagged: css

TIL the alternate keyword

If 'alternate' appears along with the stylesheet keyword, the linked file is an alternative stylesheet. It won’t be applied to the document, but it will be ready for when we need it.

TIL Logical Properties

For that sweet sweet Internationalization you want to avoid directional words like 'left', 'right', 'top', and 'bottom'.

TIL Using pseudo-classes in your querySelector!

let notTuna = document.querySelectorAll('.sandwich:not(.tuna)')