Skip to content

Instantly share code, notes, and snippets.

@davidbgk

davidbgk/index.html

Last active October 22, 2021 12:38
Show Gist options
  • Save davidbgk/259daf79d0b833a83dd1ba988f6a42aa to your computer and use it in GitHub Desktop.
Save davidbgk/259daf79d0b833a83dd1ba988f6a42aa to your computer and use it in GitHub Desktop.
Download ZIP
Opening details tag on hash/anchor
Raw
index.html
<!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 •
edited
Loading

  1. type=text/css et type="text/javascript" sont inutiles.
  2. J'ai enlevé les polyfills parce que je ne crois pas qu'il y ait beaucoup de navigateurs dans la nature qui supportent details/summary mais pas closest/matches.
  3. Pourquoi le test window.matchMedia(`(prefers-reduced-motion: reduce)`) === true ? À ma connaissance, ça ne sera jamais égal puisque matchMedia retourne une MediaQueryList.
  4. Pourquoi seules les ancres dans des details/summary sont naviguées avec un défilement animé ? Je l'ai donc transformé en CSS pour toutes les ancres.
  5. Le code semble vouloir fonctionner pour des ancres à l'intérieur de details/summary (cf closest), j'ai donc rajouté un tel exemple dans le HTML.
  6. J'ai rajouté un lien vers une ancre hors de details/summary car le code émettait une erreur JS dans ce cas.
  7. Pourquoi rajouter target-fade aussi sur :target summary ? J'ai enlevé ça dans ma version mais j'ai ptet loupé un cas.
  8. J'ai renommé les fonctions et variables pour mieux correspondre aux noms des concepts qu'elles contiennent ou manipulent.

https://gist.github.com/rik/3b005371537223a28e24349fc1e92489

@rik
Copy link

rik commented Oct 21, 2021 •
edited
Loading

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