「気をそらす項目を非表示」機能はiOS18などで新しく追加された、webページ上の広告など非表示にするための機能です。

使い方

Safariの新機能、スゲェなｗこれはいかつい。
「気をそらす項目を非表示」#iOS18 pic.twitter.com/7SUwIgnWmJ
— ひで (@hidetoshitwitt) September 17, 2024

※選択を間違えた場合等は、アドレスバーに青い目がでている状態でメニューを開き「非表示の項目を表示」を選択すれば設定をクリアできます。

どうやって実現している？

macOS SequoiaのSafariで見てみました。
user-style内に、非表示にした要素のセレクタがdisplay: none !important;として追加されるようになっているようです。

user-styleはユーザーやブラウザによって指定されたスタイルで、その中で!importantを使って記載されたスタイルはサイト内のスタイルcssで上書きすることはできません。
!importantなどを付けて詳細度を上げても上書きできないので、一致するセレクタを登録された場合、表示することは不可能です。
また同オリジン(サイト)で使い回されるようなので他のページにも影響があります。

どのようなセレクタが使われる？

次のようなwebページを作り、それぞれの項目を非表示にした時に作成されるセレクタを見てみました。
※黒字が要素の内容、赤字が非表示要素に選んだ時に生成されたセレクタです。
[1]の多くの要素を含むもの？や[6]などのリストは選択できませんでした。

なんとなく分かったセレクタの規則性

idが最優先で、idがあるものはidのみとなる
クラス名があればすべて使われる
div以外のタグならばタグ名は使用される
特徴のない要素は他の特徴のある要素からの相対位置で指定される

これで少し問題がありそうなのは、[2]のHEADERとなっているセレクタでしょうか。後でもし他の所にheader要素を追加した場合、その要素も非表示になってしまいます。最低限の特徴しか無い要素のセレクタが追加されると、巻き添えに他の要素も非表示になっていまう場合があるかもしれません。
そのあたりは問題ないように対策されているかもしれませんが少し気になりました。

不安定な挙動な気がした

リロードしたり、ページをまたいだ時に、非表示になったり、ならなかったりした
user-style内のセレクタ項目が勝手に減っていた

非表示にされたくない場合

let time = Date.now();
let count = 0;
document.querySelectorAll('*').forEach(function(el){
	el.classList.add('time'+time+'-'+count++);
});

簡易的な回避策を考えてみました。上記の様なjsを実行し、全ての要素にtime83877748-6のような連番のクラス名を付与するようにしてみる。
連番が入っているのですべての要素に違うクラス名が付与されます。
また、これは現在時刻を含んでいるのでページの読み込み毎にクラス名は変わります。

結果

実際にjsを実行したページで「気をそらす項目」として選択した所

#test1 { display: none !important; }
#test2 { display: none !important; }
DIV.box.time1726750302438-22 { display: none !important; }
UL.box.list.time1726750302438-16 { display: none !important; }

このように一時的なクラス名が追加された。しかしidを持つ要素には追加されなかった。
リロードした所、id以外の要素は隠される事なく表示されました。

下記のような問題もあるので通常使うつもりはありませんが挙動は少し理解できました
・パフォーマンスが良くない
・idのある要素には使えない
・これを利用する前に、すでに「気をそらす項目」に登録されている場合に効果がない
・（このコードでは）実行後に追加された要素には対応してない

最後に

この様な機能をAppleが標準機能として搭載してきた影響は大きいかなと思います。
使用に手間もかからず気軽に使えるので、HTMLやセレクタをよく理解していない人が消して、他の場所の必要な要素も消えるケースが有るのか、またこの機能が多く使用されるのか気になりますね。

紹介

Xの人気ポストまとめが見られるサイトや

Youtubeのお気に入りチャンネルをまとめて見られるサイトを作っています。