11月30日江沢民元国家主席が亡くなりました。中国の国営企業・大手メディアのWebサイトは追悼用画面(白黒表示)が表示されています。
気になったので、この白黒表示をどのように実装しているのか確認してみました。
中央気象台
週末の天気を確認するため「中央気象台」のサイトを開くと・・画面が白黒表示となっています。
▼PCのChromeブラウザで表示。
画像を含め全て白黒表示です。
▼どのように実装されているか確認するため、HTMLのソースを表示。
すると目立つ場所にHTMLタグのStyle設定が追加されています。（手動で変更しているのか、イベント発生時にバッチで記述を追加しているのかは不明）
filterプロパティにgrayscale(100%)を指定することで画面全体を白黒表示にしています。
▼Chromeブラウザの開発者ツールでfilterプロパティを無効化すると、白黒表示が解除されます。
また、filterプロパティはInternet Explorerには対応していないので、IEで開くと白黒表示されません。
百度
大手検索サイト「百度」のトップ画面も白黒表示です。
同じくソースを確認。
CSSに「big-event-gray」クラスの設定が用意されています。※予めビッグイベントが発生した際にグレーに表示できるように設定を用意している
内容は、filterプロパティにgrayscale(100%)を設定しており「中央気象台」と同じ。
今は、bodyタグに「big-event-gray」クラスが設定されているため、グレー表示用CSSが読み込まれています。
まとめ
各Webサイトの白黒表示をどのように実装しているのか気になったので調べてみました。各サイト対応方法はバラバラで、HTMLタグのfilterで対応したり、BODYタグだったり。
このブログでも追悼モードで表示するようボタンを追加しました。
↑を押すと白黒表示になるはず。
ボタン押下のJavascript処理は下記1行だけ。百度と同じようにBODYタグにクラスを追加して、白黒表示スタイルを適用しています。
document.body.classList.add("big-event-gray");
