Skip to content

Instantly share code, notes, and snippets.

@grassator

grassator/html-spec-titles.md

Last active May 29, 2020 18:37
Show Gist options
  • Star 1 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save grassator/e76ec7775da5b1c14d125bc68e9a630d to your computer and use it in GitHub Desktop.
Save grassator/e76ec7775da5b1c14d125bc68e9a630d to your computer and use it in GitHub Desktop.
Download ZIP
Add sticky section headers to html spec
Raw
html-spec-titles.md

1. Add the following URL to your bookmarks

javascript:(()%20%3D%3E%20%7B%20const%20style%20%3D%20document.createElement(%22style%22)%3B%20style.textContent%20%3D%20%22h5%20%7B%20position%3A%20sticky%3B%20top%3A%200%3B%20background%3A%20white%3B%20border-bottom%3A%201px%20solid%20%23eee%3B%20z-index%3A%20100%20%7D%20h6%20%7B%20position%3A%20sticky%3B%20top%3A%201.4em%3B%20background%3A%20white%3B%20border-bottom%3A%201px%20solid%20%23eee%3B%20z-index%3A%20101%20%7D%22%3B%20document.head.append(style)%3B%20%7D)()

To do that you can just bookmark current page and then change the bookmark URL to the javascript one above.

2. Go to https://html.spec.whatwg.org/multipage/parsing.html#determining-the-character-encoding

3. Click on the sticky headers bookmarklet you created

4. Enjoy sticky section headers!

@grassator
Copy link
Author

Capture

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment