La gomme magique de Safari existait déjà !
Amusons-nous.
La gomme magique ou Hide Distracting Items, qui va être disponible dans Safari version 18, existait déjà dans les versions précédentes du navigateur sur MacOS, mais sous une forme légèrement plus compliquée à mettre en œuvre.
Cette nouvelle fonctionnalité, qui fait peur aux publicitaires (voir cet article de L’Usine Digitale), vient d’arriver dans la pré-version de Safari 18 et permet de faire disparaître en un clic un bloc sur une page HTML d’un site et ceci de manière pérenne (ou presque).
Il y avait en fait depuis très longtemps dans Safari (peut être depuis sa première version) le moyen de faire cela en utilisant une feuille de style (CSS) personnalisée. Il suffit d’avoir quelques connaissances e, HTML et en CSS pour l’utiliser. Cette fonctionnalité permet d’appliquer les styles de votre choix à n’importe quel élément de la page d’un site.
Pour la mettre en œuvre, il faut créer un fichier texte contenant des propriétés CSS, puis indiquer à Safari de l’utiliser. Pour cela, il suffit dans les réglages de Safari et l’onglet Avancés, d’utiliser le menu Feuille de style pour sélectionner votre fichier de CSS.
Dans le fichier CSS, il faut ajouter des propriétés pour désigner les blocs de HTML que l’on veut faire disparaître.
Prenons pour exemple les publicités de Google avec ce code CSS :
[data-adsbygoogle-status],
[data-google-query-id] {
display: none !important;
}Ce code fait disparaître (display: none) les éléments HTML qui ont les attributs data-adsbygoogle-status ou data-adsbygoogle-status. Toutes les publicités Google ont au moins un de ces attributs (d’après nos constatations), donc elles ne seront plus affichées par Safari et ceci pour tous les sites Web !
Il est possible d’aller plus loin en cherchant à faire disparaître un paywall, ces boîtes de dialogue qui imposent de prendre un abonnement ou d’accepter les cookies (la bourse ou la vie ... numérique 🤣).
Prenons pour exemple le paywall de Didomi qui est utilisé par de nombreux sites, il est possible de le cacher avec ce code CSS :
#didomi-host {
display: none !important;
}
html body.didomi-popup-open,
.didomi-popup-open {
overflow: visible !important;
}Ce code fait disparaître l’élément HTML contenant le paywall et ayant l’identifiant didomi-host (c’est toujours le même quelque soit le site), mais en plus, force l’élément HTML ayant la classe didomi-popup-open (en général l’élément <body> de la page) à récupérer le scroll que la classe de Didomi bloque.
Avec ce morceau de code CSS, le site ne se rend pas compte que le paywall n’est plus là et fonctionne normalement, ceci sans que l’utilisateur ait accepté les cookies.
Cet exemple donne à penser que la gomme magique de Safari version 18 aura du mal à fonctionner avec ce genre de cas, le paywall pourra être masqué, mais comment le scroll pourra-t’il être rétabli ? À tester donc avec la version finale.
Ce qu’il sera également intéressant de voir, c’est l’impact en terme de chargement de ressources (images, scripts) en cachant une ou plusieurs publicités sur une page et donc si cette fonction a un intérêt dans une optique de numérique responsable. Avec la solution par CSS ce n’est pas formidable, la réduction de chargement n’est pas énorme, l’utilisation d’un bloqueur de publicité est probablement plus efficace, cela sera un sujet d’étude dans un prochain article.
Pour finir, nous mettons à disposition un fichier CSS avec les codes précédents et des propriétés CSS supplémentaires pour bloquer les publicités de quelques sites Web français afin que vous puissiez vous amuser 😃.
Le fichier est à télécharger ici.
Si vous modifiez le fichier, il est nécessaire de repasser par les réglages de Safari, sélectionner Pas de sélection dans le menu Feuille de style, puis re-sélectionner le fichier pour que les modifications soient prises en compte.
Il ne faut pas se leurrer, maintenant que cette astuce est révélée et avec la nouvelle fonctionnalité intégrée dans Safari, les sites et les publicitaires vont agir pour que cela ne fonctionne plus.
Par ailleurs, il n’y a que Safari qui dispose de cette fonction et uniquement sur MacOS, pas sur iOS. Pour les autres navigateurs, il existe des extensions qui permettent cela, comme cette extension pour les navigateurs sur base de Chromium ou cette autre pour Firefox.
La fonction Hide Distracting Items sera par contre disponible dans Safari pour MacOS, iOS et iPadOS.
Amusez-vous bien !