（いろいろな意味で）名前を出すのもはばかられる某サイトが、文字の半分で異なるカラーを指定する CSS のテクニックとかいう記事を上げていたので読んでみた。どうしてんのかと思ったら、独自データ属性に要素内のコンテンツとまったく同じ文章を仕込んで、::before 擬似要素で出力して 2 回重ねるんだそうで…えーと、スクリーンリーダーで同じ文章が 2 回読まれるのにはどう対処するつもりなのだろうか。ていうかそれ CSS だけじゃ機能しないし。
まあ、あのサイトは元からそういうところなので仕方がないとして、やっぱり個人的にはこういう実装はちょっとまずいと思うので、他の手段がないものかと考えてみた。現状ではちょっと難しそうだが、仕様が固まってブラウザの実装が進めば、白黒くらいなら backdrop-filter を使って簡単にできそうだった。
という訳でデモを置いておく。いまのところ Safari と「試験運用版のウェブ プラットフォームの機能」を有効にした Google Chrome しか動作しないけど。
やってることは簡単で、右半分に空の擬似要素を重ねて backdrop-filter: invert(100%) を掛けてるだけ。ただ、そのままだと右半分のテキストが選択できなくなるので、重ねた擬似要素に pointer-events: none を入れてマウスイベントを無効にしている。
今回のように単純な白黒じゃない場合は hue-rotate() など他の関数をつなげてがんばるか、自力で SVG filter を書くしかない。
お約束だけど、まだ仕様も実装も進んでないものなので、くれぐれも先走って実戦で投入しないよう、よろしくお願い申し上げます。