Repository with sources and generator of https://larlet.fr/david/ https://larlet.fr/david/
Nelze vybrat více než 25 témat Téma musí začínat písmenem nebo číslem, může obsahovat pomlčky („-“) a může být dlouhé až 35 znaků.

Surlignage.md 1.5KB

před 4 roky
123456789101112131415161718192021222324252627282930313233343536373839
  1. ## Surlignage
  2. J’ai cédé aux sirènes du surlignage avec l’élément HTML `mark` lors de [la dernière publication](/david/2020/02/14/), c’est un élément qui a l’air d’être populaire auprès des personnes que je suis en ce moment. Il y a des modes comme ça, l’année dernière c’était plutôt `hr` (j’avais cédé aussi !).
  3. Je me suis rendu compte en voulant le styler qu’il pouvait poser des [problèmes d’accessibilité](https://developer.mozilla.org/fr/docs/Web/HTML/Element/mark#Accessibilit%C3%A9), aussi je suis arrivé à la CSS suivante :
  4. ```
  5. mark {
  6. background: LightGoldenRodYellow;
  7. }
  8. mark::before,
  9. mark::after {
  10. clip-path: inset(100%);
  11. clip: rect(1px, 1px, 1px, 1px);
  12. height: 1px;
  13. overflow: hidden;
  14. position: absolute;
  15. white-space: nowrap;
  16. width: 1px;
  17. }
  18. mark::before {
  19. content: " [highlight start] ";
  20. }
  21. mark::after {
  22. content: " [highlight end] ";
  23. }
  24. *[lang=fr] mark::before {
  25. content: " [début du surlignage] ";
  26. }
  27. *[lang=fr] mark::after {
  28. content: " [fin du surlignage] ";
  29. }
  30. ```
  31. En espérant que cela puisse servir à d’autres. Si vous utilisez un lecteur d’écran je serais curieux de savoir si cela vous est utile.
  32. ---
  33. Note : je trouve que la balise `mark` est pertinente pour pointer un court passage dans une citation plus longue, et comme je fais pas mal de citations je compte m’en servir par la suite. J’espère que les styles par défaut de votre [agrégateur](/david/blog/2019/flux-rss/) ne sont pas trop agressifs…