【iOS18】Safari「気をそらす項目を非表示」の仕様を調査
iOS18でSafariに「気をそらす項目を非表示」という機能が追加されました｡
要は､手動による広告ブロック機能です｡
簡単に使い方を説明すると
サイトを開いた状態でアドレスバー左側をタップし「気をそらす項目を非表示」をタップ
非表示にしたい項目をタップし「非表示」をタップ｡ 最後に「完了」をタップします｡
ザワーっというアニメーションとともに広告が非表示になりました｡
項目を非表示にすると､アドレスバー左側に青い目のアイコンが表示されます｡
ちなみに､非表示状態をもとに戻すには､もう一度同じメニューを開き
「非表示の項目を表示」をタップします｡
いちブログ発信者としては広告が収入源なので複雑な思いではありますが､多くの人にとっては便利機能なのではないでしょうか｡
ここからは少し技術的な話､どの要素が非表示の対象なのか？どのように非表示にしているのか？
少し調査してみたので解説します｡
目次
どの要素が非表示の対象なのか？
おそらく､非表示の項目の対象となるのは､HTMLにおけるすべてのブロック要素です｡
見出し(h2)やpタグ
ul liタグやdivタグなどが選択できます｡
ulタグ丸ごと選択したり､liタグ個別の選択もできました｡ div内のpにおいても同様です｡
どのように非表示にしているのか？
非表示にしたところを､Macから検証ツールで見てみます｡
試しにこのdivタグを非表示にしてみます｡
非表示になりました｡
検証ツールで見てみると､該当のタグがdisplay:none!important;されてました｡ (それにしてもすごいセレクタ...)
じゃあCSSで非表示にしてるだけ？と思い､このdisplay:none!important;を消してみると...
なんか､divタグの領域だけ現れました｡ 中身が現れず...
子要素も他にスタイルは当たってないっぽいし､色々こねくり回したものの現れず...｡
やっぱりCSSだけではなく､システム的に消しているのでしょうか｡
ここでは､CSSだけで強制に表示させることはできない､と結論づけさせていただきます｡
実機確認用
実機確認用に主要なHTML要素を置いておきます｡
p (段落) タグ
この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。
ul li (リスト) タグ
- この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。
- この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。
- この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。
divタグ
3つのpタグをdivタグで囲っています｡これは1つ目のpタグです｡
3つのpタグをdivタグで囲っています｡これは2つ目のpタグです｡
3つのpタグをdivタグで囲っています｡これは3つ目のpタグです｡
sectionタグ
見出しとpタグ2つをsectionタグで囲っています｡
この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。
追従要素
お役に立てましたら応援をお待ちしております！
頂いた応援は子育てに活用させていただきます｡
または以下のボタンからなにか買って応援 (PR)