Skip to content

Instantly share code, notes, and snippets.

@davidbgk
Last active October 22, 2021 12:38
  • Star 1 You must be signed in to star a gist
  • Fork 1 You must be signed in to fork a gist
Star You must be signed in to star a gist
Save davidbgk/259daf79d0b833a83dd1ba988f6a42aa to your computer and use it in GitHub Desktop.
Opening details tag on hash/anchor
<!doctype html><!-- This is a valid HTML5 document. -->
<!-- Screen readers, SEO, extensions and so on. -->
<html lang="en">
<!-- Has to be within the first 1024 bytes, hence before the `title` element
See: https://www.w3.org/TR/2012/CR-html5-20121217/document-metadata.html#charset -->
<meta charset="utf-8">
<!-- Why no `X-UA-Compatible` meta: https://stackoverflow.com/a/6771584 -->
<!-- The viewport meta is quite crowded and we are responsible for that.
See: https://codepen.io/tigt/post/meta-viewport-for-2015 -->
<meta name="viewport" content="width=device-width,initial-scale=1">
<!-- Required to make a valid HTML5 document. -->
<title>Opening details tag on hash/anchor</title>
<style type="text/css">
body {
font-size: 150%;
}
details {
font-size: 300%;
}
:target,
:target summary {
animation: target-fade 2s 1;
}
@keyframes target-fade {
0% {
background-color: rgba(255, 255, 221);
}
100% {
background-color: rgba(255, 255, 255);
}
}
</style>
<body>
<h2>Let’s have fun! (see below)</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<details id="first-details">
<summary>First: closed by default</summary>
<p>But open if <a href="#first-details">anchor</a>!</p>
<p>And open/scroll to the second <a href="#second-details">if we link to it</a>.</p>
</details>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<details id="second-details">
<summary>Second: closed by default too</summary>
<p>But open if <a href="#second-details">anchor</a>!</p>
</details>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<script type="text/javascript">
function getAnimationBehavior() {
// Respects users' preferences in terms of motion.
const isReduced =
window.matchMedia(`(prefers-reduced-motion: reduce)`) === true ||
window.matchMedia(`(prefers-reduced-motion: reduce)`).matches === true
return isReduced ? 'auto' : 'smooth'
}
function getAnchor() {
return document.location.hash ? document.location.hash.slice(1) : ''
}
function openDetailsIfAnchor() {
const currentAnchor = getAnchor()
if (currentAnchor) {
let elem = document.querySelector(`#${currentAnchor}`)
elem.closest('details').setAttribute('open', '')
elem.scrollIntoView({ behavior: getAnimationBehavior() })
}
}
openDetailsIfAnchor()
window.addEventListener('hashchange', openDetailsIfAnchor)
// Polyfills if you need to support IE9+ (see https://caniuse.com/element-closest)
// Comes from https://developer.mozilla.org/en-US/docs/Web/API/Element/closest#polyfill
if (!Element.prototype.matches) {
Element.prototype.matches =
Element.prototype.msMatchesSelector ||
Element.prototype.webkitMatchesSelector
}
if (!Element.prototype.closest) {
Element.prototype.closest = function(s) {
var el = this
do {
if (Element.prototype.matches.call(el, s)) return el
el = el.parentElement || el.parentNode
} while (el !== null && el.nodeType === 1)
return null
}
}
// End of polyfills.
</script>
</body>
</html>
@rik
Copy link

rik commented Oct 21, 2021

J'ai refait des modifications en plus sur l'animation:

  1. J'ai appelé l'animation par ce qu'elle fait (un flash) plutôt que le contexte de son utilisation (target-fade)
  2. J'ai enlevé la couleur de destination pour que cela s'adapte mieux à n'importe quel type de contenu (j'ai d'ailleurs rajouter du dark mode et un details en fond rouge pour le vérifier)
  3. J'ai enlevé la valeur par défaut de animation-iteration-count et j'ai changé 0% en from. Je n'aime pas avoir plus d'info que nécessaire et je préfère les mots aux nombres.

@davidbgk
Copy link
Author

@rik trop cool merci !

  1. Oui c'est l'auto-complete de SublimeText qui me fait ça, je pense savoir où le changer mais j'ai un peu la flemme. Est-ce qu'il y a un impact autre que l'inutilité ?
  2. Ah oui bien vu (j'ai pas testé avec un IE), il faudrait ajouter un truc du style.
  3. De mémoire ça pourrait être si window.matchMedia est undefined ?! 🤔 Mais autant le tester explicitement dans ce cas ? J'avais pris ça par ici mais c'est probablement inutile.
  4. Je trouvais ça intéressant de pouvoir distinguer le comportement juste pour ces élément dans le but de proposer un bout de script dont le périmètre est restreint, tout est parti de ce toot dont le lien n'ouvrait pas les réactions par défaut
  5. En effet 👍
  6. Super 🙌
  7. Mmmh, j'aurais plutôt dû enlever le :target global pour rester cohérent avec le 4.
  8. Nice 💅

@rik
Copy link

rik commented Oct 22, 2021

  1. Oui c'est l'auto-complete de SublimeText qui me fait ça, je pense savoir où le changer mais j'ai un peu la flemme. Est-ce qu'il y a un impact autre que l'inutilité ?

Non, aucun impact.

  1. Ah oui bien vu (j'ai pas testé avec un IE), il faudrait ajouter un truc du style.

Ce polyfill ne marche que pour les details/summary présent dans le DOM au moment de son exécution. Il doit y avoir des styles associés aussi je suppose ?

  1. J'ai enlevé le ternaire pour le hash car c'est toujours une chaine et on peut donc toujours faire slice(1) dessus.

@davidbgk
Copy link
Author

@nhoizey me pointe l'issue côté spec HTML et les suivis côté navigateurs.

@notabene remarque que ça n'est pas pour tout de suite côté Firefox.

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