CSSでアイコンをデザインへの補足

追記でCSSでアイコンをデザインの対応ブラウザについてざっと書いておいたが、そこで「知らない」とか「書きたくない」とIE8のところで書いた。それをどうも意図した方向とは違う感じで捉えられてしまっているようだったので、すこしだけ補足する。すでに勢いに任せて某所でも書いてしまったがもうちょっとはっきりと書く。IE8でもこうやればできるよ！　とかいう話ではなく、もっとモヤッとした話。

そもそもIE8でもちゃんと見えるように「書きたくなかった」のは、ベンダー拡張プリフィックスすら書きたくないというような意識があるからに過ぎない。Operaでグラデーション対応するためのSVGとかももちろん書きたくはない(書いてみたら面白かったので書いちゃったけど)。実際書きたくなかっただけで、IE8でもあの程度のことならfilterプロパティで実現できる。filterプロパティには複数の背景画像を実現するのに使えるAlphaImageLoader()フィルタがあるし、二点間のグラデーションしかサポートしていないgradient()も適切に複数使えば反射させることもできるだろう(円形グラデーションは無理だけど、あのエントリでは出てこないので関係ない)。回転させたいならMatrix()フィルタがある(IE4から！)。労力としては統一されていないベンダー拡張プリフィックスをそれぞれ書いたり、代用のためのSVGを書いたりする労力とあまり変わらないはずだ。検索ビリティが低いとは言えMSDNでちゃんと文書化されているわけだし。IE8以下が他の現行ブラウザに比べて大きく劣るのはWeb標準のサポートに過ぎず、表現力ではない。

こう書くとIE8擁護的になってしまうが、もちろんIE8以下及びIE9においてすらWeb標準のサポート以外にも開発者にとって大きな問題は数多くある。数えたくもないくらい数多くだ。モードという史上最低の概念が拡充されたことはその最たるものだろう。関係ない話だが。

話を戻す。CSSでアイコンをデザインをコピペで使える実践的なテクニックかどうかという観点で判断するなら、適切にフォールバックされることを考慮したCSSの書き方ではないので間違いなく実践的ではない。多分、そういったことを踏まえて「趣味のサイトなら」とか「面白いとは思うけど」、挙句の果てには「IEは本当にクソ！！」などという反応がされたんだろうと思う。しかし、それはあのエントリのデモがそう書かれているだけの話で、IE6/7はともかくとしてIE8に対応させるのはそう難しい話ではない。filterプロパティでやってもいいだろうし、フォールバックというだけなら条件付きコメントを利用して角丸化したりしたアイコン化済みの画像をロードするCSSをIEだけに適用させたりしてもいいだろう。つまりそういう実践的な(枠線付きの吹き出しのような)テクニックとして書いたわけではなかったのだ。

あのエントリは「今すぐ使えるCSS3の実践テクニック」とか「CSS3のサポート足りなくてモダンじゃないよねー誰とは言わないけど」とかそういう話ではなく、単なる来るべき未来のブラウザの表現力についての話のつもりだった。実際、普通に書くとGoogle Chrome 10 betaや11 devとFirefox 4 betaでしかまともに表示されない。来るべき未来のブラウザの表現力、つまりCSSがもはや単に機械的に見た目を変化させる(文字を斜体にするとか点線で囲むとか)というだけのものではなく、その見た目に与える変化をまるでPhotoshopのように細かく制御できるようになる(数年前からそうなっていた)というようなある種の啓蒙活動のようなつもりだった。

具体的に列挙するとこうなる。エントリでは示唆しただけだが、画像では不可能な角丸を考慮したbox-shadowプロパティによるドロップシャドウやWebフォントでカスタムシェイプのような機能を実現する(HTMLおかしくなるからcontentプロパティで使ってね！)などもそうだ。

エントリでは文章としてこういったことを具体的に書かなかったので、残念ながらうまく伝わらなかった。タイトルも良くなかったかもしれない。