jonathan-vallet
commented
5 months ago Merci beaucoup pour le retour très complet!
Effectivement avec la méthode qu'on a utilisé il y a quelques nodes texte qui peuvent passer au travers. On n'était pas vraiment dans l'optique de masquer complètement le reste quand on active le "highlight" (plus tard on proposera à chacun de régler l'opacité comme il le souhaite dans des paramètres), mais l'idée est de conserver le contexte autour des éléments. À terme si les performances ne sont pas trop impactées, l'idée serait d'avoir un canvas par dessus la page avec un masque, et de "faire des trous" dedans aux emplacement de chaque éléments mis en avant. comme ça déjà on n'aurait plus du tout d'adhérence à modifier le style de la page (ce qui peut être problématique puisqu'on peut révéler des éléments qui étaient en "opacity: 0". Et ça peut être très performant puisqu'on peut trouer juste les éléments qui sont visibles dans le viewport plutot que toute la page, et ainsi mettre à jour le masque en temps réel au scroll/resize par exemple.
On a également une feature qui devrait arriver prochainement permettant de trouver un élément spécifique dans la page :)
On va creuser les idées suggérées en tout cas en attendant
PhilippeVay
Description du problème
La fonctionnalité highlight tente de distinguer les éléments audités par un critère du reste du contenu en ajoutant une opacité de 0.2 au reste du contenu mais pas aux éléments audités (ex: "les images" ou "les tableaux"). Pour les images, certains nœuds texte ne sont pas correctement estompés : les nœuds texte ayant un parent commun avec une image ne deviennent pas translucides et il n'est pas possible de leur ajouter une opacité à moins de les encapsuler dans un span (pas une bonne idée quand on ne connait rien de la page) ou d'également rendre translucide l'image en l'ajoutant sur le parent. Sur https://www.alsacreations.fr, les 4 images HTML5, etc sont estompées mais pas les p ou li ayant un span avec du texte.
Pistes...
Après avoir passé une journée à développer une solution JS, SVG et
mask-image, je viens d'en (re)trouver une autre en pur CSS ou presque...On peut en effet :
color: rgba(0, 0, 0, 0.2)👻 (et supprimer fonds, bordures, etc)overflow: hidden)@layeret!important🌋Pour la spécificité, j'avais remonté chez ffoodd ce que permettait
@layer(snippet d'exemple et lien vers l'article de référence de bram.us) avec 1 seule limitation bien rare.[^1]Solution proposée (CSS et JS) ⬇️
Placer le at-layer le plus tôt possible (JS)
Placer notre `@layer` nommé le plus tôt possible dans la page. Pas essentiel à moins de devoir écraser d'autres styles eux aussi dans un `@layer` et avec `!important`, ça fait beaucoup de conditions... ```js (function () { let e = document.createElement("style"); e.prepend("@layer rgaac-hl-img;"); document.head.querySelector("title").after(e); })() ```Highlight les images d'une page (CSS)
```css /* Highlight "images" in a page */ @layer rgaac-hl-img { * { filter: none !important; /* Images may have weird filters */ } /* Everything except images */ *:not(:where( img, [role="img"], area, svg, :where(input, object, embed)[type="image"])) { color: rgba(0, 0, 0, 0.2) !important; background: transparent !important; border-color: transparent !important; outline-color: transparent !important; text-shadow: none !important; } /* All type of images and then SVG. TODO:Tests
URLs de test :
::beforeet::afterpour des images de fond (à gauche de titres sur 3 colonnes) et couleur de fond (footer)text-shadow, carte avec multiples images. Rien de simple à faire pour le bouton de retour en haut car couleur de fond portée par un parentfilterspécialVu ailleurs
Du côté de la concurrence 🕵️♂️ :
En JS, il cible chaque élément qui n'est pas une image et applique
el.style.color="transparent";, etc Le texte est réduit à une taille de 1px aussi, pour ne garder que les images.Sur les images, pour les distinguer, un outline de 10px (offset de -10px) noir est ajouté.
[^1]: Cela écrase bien aussi les styles inline mais je viens de me rendre compte (ou bien j'avais oublié depuis) qu'un style inline avec
!importantaura toujours plus de spécificité que n'importe quel@layer. Mmh si j'en ai rencontré une fois, c'était il y a 10 ans dans du GG Maps embedded ou du temps d'IE6 et ça a disparu il y a bien longtemps. Bref c'est plus que rare et ça se détecte en CSS.