from リンクを出典アイコンにするUserCSS

display: none;とtext-indent: -9999px;は何が違う？

display: none とは何が違う？

display:none はその要素の存在を描画から抹消します

ユーザーは一切のインタラクションができなくなり、描画ボックスもないものとして扱われます

JavaScriptを使えばアクセスできますが、ユーザーはクリックや選択などの一切の関与ができなくなります

DOMからは抹消されませんが、描画からは抹消される、ということです

このルールは、この記法の効果がかかったテキストを子供に持つ要素を指定しています

Scrapboxには、たとえば文字選択など、テキストとユーザーのインタラクションを仮定した機能があります

その描画ボックスを抹消してしまうと例えばテキストを選択したときなどにイベントが発生せず困るということです

代わりにtext-indentであれば、描画ボックスを残しつつ、本来の表示を隠すことも可能です

今回は、幅ゼロの描画ボックスを「描画」しています

表示だけ消したいなら visibility: hidden; が素直なのでは？

たしかに

リンクを出典アイコンにするUserCSSでいくつか試してみましたが、同等の効果を得られました

visibility: hidden;とtext-indent: -9999px;との違い

screen readerで読まれるかどうかくらい？

試しに/scrasobox/チェックボックスになるタグ 2の該当部分を display: none に変えて実行してみたが、違いがわからなかった…

まぁ :not(.cursor-line) で、カーソルを合わせると効果がなくなるように設定されているので、違いはなかなかわかりにくいだろうなぁと思いますｗ

なるほど

カーソルを合わせると効果がなくなるように指定するのも、 diplay:none を使わないのも、設定者の安全策（ユーザーへの配慮）といえると思います

理解するための極端な例がほしいなら、 width:100px; とか指定してみれば、インデントと抹消の違いが一目瞭然です

結局リンクを出典アイコンにするUserCSSでは機能的な違いはない？

ですね