CSSで喪に服す

filter属性

喪に服すため黒い服を着る文化がどこから来たものなのかよく知らないが^[0]、少なくともタイにもそういう文化があるらしい。

先日(2016/10/13)タイ国王ラーマ9世の崩御でタイの/タイ国民向けのwebサイトが白黒(正確にはグレースケール)になっているようだが、どうやらこれがwebサイトの色使いを直していくとかでなく、追加のCSSスタイルで簡単に実現できるらしいと知った。

www.google.co.th のスクリーンショット — www.google.co.th, 2016-10-15 14:05 撮影

www.thaiairways.com のスクリーンショット — www.google.co.th, 2016-10-15 14:05 撮影

googleはロゴが変わっているだけなのでさておき。

他のwebサイトは写真などいろいろ使っているが、これらが全てグレースケールになっているのは、（最初からグレースケールの画像を用意している場合もあるが、）CSSにより適用された効果である。

        /* home.css */
#ls-canvas {
	filter: grayscale(100%);
}

/* HomePage_FarePromo_ClickNGo.css */
#ls-canvas
{
  filter: grayscale(100%);
  width:100%;
}

www.thaiairways.com のCSS

        <style>
body {
  /* IE */
  filter: progid:DXImageTransform.Microsoft.BasicImage(grayscale=1);

  /* Chrome, Safari */
  -webkit-filter: grayscale(1);

  /* Firefox */
  filter: grayscale(1);
}
</style>

www.mcot.net のHTML

なるほど、CSS3のfilterを使えばいいわけだ。 ……と思ったが、filterではIEで喪に服すことができない。

ちなみにGoogle chromeも、2016/10/15時点でSVG要素に対するfilterに対応していない。 喪に服したいならfirefoxだ！

IEでダイレクトに喪に服す (#字足らず)

さて問題は、IEがCSS標準のfilterに対応していないことである。よって、IEではfilter: grayscale(1);では喪に服せない。そこで必要になるのがDXImageTransformだ。 filter: progid:DXImageTransform.Microsoft.BasicImage(grayscale=1);によってIEでもfilter: grayscale(1);と同じ効果を得られる（ようだ）。

すなわち……IEで喪に服すにはDirectXが必要なのだ！タイのwebページのどの程度の割合がDirectXでの服喪に対応しているのか気になるところである。

その他

filterをうまく使えば、制限されたデバイスや視覚障害者対応などにも役立つかもしれないと思った。