{"id":230047,"date":"2022-11-20T19:56:00","date_gmt":"2022-11-20T16:56:00","guid":{"rendered":"https:\/\/wordpress.mediadoma.com\/?p=230047"},"modified":"2022-11-09T19:51:36","modified_gmt":"2022-11-09T16:51:36","slug":"un-conseil-rapide-pour-masquer-les-superpositions-dextensions-de-navigateur","status":"publish","type":"post","link":"https:\/\/wordpress.mediadoma.com\/fr\/un-conseil-rapide-pour-masquer-les-superpositions-dextensions-de-navigateur\/","title":{"rendered":"Un conseil rapide pour masquer les superpositions d&rsquo;extensions de navigateur"},"content":{"rendered":"\n<p>D&rsquo;apr\u00e8s mon exp\u00e9rience, la plupart des superpositions d&rsquo;extensions de navigateur utilisent un arri\u00e8re-plan avec le type de <strong>data:image\/svg+xml<\/strong>. De plus, chacune de ces superpositions utilise des styles en ligne (plut\u00f4t que des feuilles de style externes) pour rendre leurs boutons (ou les contr\u00f4les qu&rsquo;ils choisissent de rendre).<\/p>\n<p>Cela signifie que nous pouvons utiliser certaines techniques JavaScript pour trouver des \u00e9l\u00e9ments avec ces attributs, puis basculer leur visibilit\u00e9.<\/p>\n<p>Mais d&rsquo;abord, pourquoi prendrions-nous m\u00eame soin de les cacher ?<\/p>\n<h2>Masquer les superpositions d&rsquo;extensions de navigateur<\/h2>\n<p>De mani\u00e8re g\u00e9n\u00e9rale, chaque fois que ces superpositions sont affich\u00e9es, c&rsquo;est pour les enregistrer dans un service de bookmarking, que ce soit Pinterest, Buffer, Pocket ou autre chose.<\/p>\n<h3>Cas d&rsquo;utilisation pertinents<\/h3>\n<p>De plus, au moins dans le cas dont je parle, ils s&rsquo;affichent chaque fois que le curseur passe sur une image. Mais que faire si nous ne voulons pas que cela se produise.<\/p>\n<p>Exemple\u00a0:<\/p>\n<ul>\n<li>Nous travaillons peut-\u00eatre sur un plugin qui d\u00e9clenchera sa superposition, et nous voulons masquer d&rsquo;autres pop-ups.<\/li>\n<li>Ou peut-\u00eatre que nous d\u00e9clenchons une autre fen\u00eatre contextuelle contenant des images et que nous ne voulons pas que les superpositions apparaissent sur ces images.<\/li>\n<\/ul>\n<p>Quoi qu&rsquo;il en soit, voici une fa\u00e7on de masquer les superpositions en fonction de vos besoins.<\/p>\n<h3>Le processus<\/h3>\n<p>\u00c9tant donn\u00e9 que WordPress inclut jQuery par d\u00e9faut, je vais l&rsquo;utiliser comme biblioth\u00e8que de choix. Mais cela pourrait tout aussi bien \u00eatre utilis\u00e9 en trouvant tous les \u00e9l\u00e9ments par un nom de classe sp\u00e9cifi\u00e9 et en les parcourant (si vous choisissez d&rsquo;utiliser du JavaScript vanille).<\/p>\n<p>Tout d&rsquo;abord, nous voulons commencer par l&rsquo;\u00a0 \u00e9l\u00e9ment <strong>body<\/strong>, puis examiner, disons, tous les\u00a0 \u00e9l\u00e9ments <strong>span<\/strong> (car ceux-ci ont tendance \u00e0 \u00eatre les \u00e9l\u00e9ments les plus populaires &#8211; encore une fois, juste d&rsquo;apr\u00e8s mon exp\u00e9rience &#8211; et nous <a href=\"https:\/\/gist.github.com\/tommcfarlin\/7102c06915c5c55421d42778be7954e1#file-00-function-setup-js\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external external_icon\">pr\u00e9parer \u00e0 les parcourir<\/a> ):<\/p>\n<pre><code>var hideExtensions = function() {\n    $('body')\n      .children('span')\n      .each(function() {\n      });\n};<\/code><\/pre>\n<p>Ensuite, nous voulons v\u00e9rifier la pr\u00e9sence de <strong>data:image\/svg+xml<\/strong> dans l&rsquo;attribut de style en ligne. Et, s&rsquo;il est trouv\u00e9, alors <a href=\"https:\/\/gist.github.com\/tommcfarlin\/7102c06915c5c55421d42778be7954e1#file-01-check-for-inline-styles-js\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external external_icon\">changez la visibilit\u00e9 de l&rsquo;\u00e9l\u00e9ment<\/a> :<\/p>\n<pre><code>if (-1 !== $(this).attr('style').indexOf('data:image\/svg+xml;')) {\n  if ('hidden' !== $(this).css('visibility')) {\n    $(this).css('visibility', 'hidden');\n  }\n}<\/code><\/pre>\n<p>Si vous souhaitez basculer la visibilit\u00e9 de l&rsquo;\u00e9l\u00e9ment, vous devrez configurer une deuxi\u00e8me clause qui supprimera la\u00a0 valeur <strong>masqu\u00e9e<\/strong> si n\u00e9cessaire. Si vous voulez faire cela, vous pouvez facilement <a href=\"https:\/\/gist.github.com\/tommcfarlin\/7102c06915c5c55421d42778be7954e1#file-02-toggle-visibility-js\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external external_icon\">ajouter ceci<\/a> :<\/p>\n<pre><code>if (-1 !== $(this).attr('style').indexOf('data:image\/svg+xml;')) {\n    if ('hidden' !== $(this).css('visibility')) {\n        $(this).css('visibility', 'hidden');\n    }\n} else {\n    $(this).css('visibility', 'visible');\n}<\/code><\/pre>\n<p>La fonction finale peut ressembler <a href=\"https:\/\/gist.github.com\/tommcfarlin\/7102c06915c5c55421d42778be7954e1#file-03-hideextensions-js\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external external_icon\">\u00e0 ceci<\/a> :<\/p>\n<pre><code>var hideExtensions = function() {\n\n  $('body')\n      .children('span')\n      .each(function() {\n          if (-1 !== $(this).attr('style').indexOf('data:image\/svg+xml;')) {\n              if ('hidden' !== $(this).css('visibility')) {\n                  $(this).css('visibility', 'hidden');\n              }\n          } else {\n              $(this).css('visibility', 'visible');\n          }\n      });\n};\n<\/code><\/pre>\n<p>Ensuite, il vous suffit d&rsquo;appeler <code>hideExtensions();<\/code>en cas de besoin.<\/p>\n<h2>Un mot sur les performances<\/h2>\n<p>Parce que nous analysons un sous-ensemble d&rsquo;\u00e9l\u00e9ments dans le DOM, cela peut devenir un probl\u00e8me de performances, surtout s&rsquo;il y a beaucoup d&rsquo;\u00e9l\u00e9ments d&rsquo;un m\u00eame type.<\/p>\n<p><div id=\"PostUnique_PostSource\" style=\"padding-top: 50px\">Source d&rsquo;enregistrement:  <a target=\"_blank\" rel=\"noopener nofollow\" href=\"\/\/tommcfarlin.com\" class=\"external external_icon\">tommcfarlin.com<\/a><\/div><\/p>\n","protected":false},"excerpt":{"rendered":"<p>Voici une astuce rapide pour masquer les superpositions d&rsquo;extensions de navigateur telles que Pinterest, Buffer et autres utilisant JavaScript.<\/p>\n","protected":false},"author":1,"featured_media":165108,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":"","_wp_rev_ctl_limit":""},"categories":[893,832,728,841],"tags":[1167],"class_list":["post-230047","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-code-2","category-guide-pour-les-debutants","category-javascript-3","category-tutoriels","tag-affiai-fr"],"_links":{"self":[{"href":"https:\/\/wordpress.mediadoma.com\/fr\/wp-json\/wp\/v2\/posts\/230047","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/wordpress.mediadoma.com\/fr\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/wordpress.mediadoma.com\/fr\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/fr\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/fr\/wp-json\/wp\/v2\/comments?post=230047"}],"version-history":[{"count":0,"href":"https:\/\/wordpress.mediadoma.com\/fr\/wp-json\/wp\/v2\/posts\/230047\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/fr\/wp-json\/wp\/v2\/media\/165108"}],"wp:attachment":[{"href":"https:\/\/wordpress.mediadoma.com\/fr\/wp-json\/wp\/v2\/media?parent=230047"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/fr\/wp-json\/wp\/v2\/categories?post=230047"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/fr\/wp-json\/wp\/v2\/tags?post=230047"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}