去年はCSSグラデーションを見限ったような気がする。CSSグラデーションは便利ではあるものの、実装の差がいまいち想像しづらく思ってもみない結果になることがよくある。SVGでやった方が結果からもテクスチャであるという面からも安定という印象だったため、去年からほとんど使わなくなった。今年はtext-shadowとletter-spacingプロパティー、そして::selection擬似要素を見限った。
text-shadowプロパティー
文字に影を付けるプロパティーだが、あまり有効に使える場面がない。エンボスやべベルの代わりにするには貧弱すぎることや透過しかできず合成モードを持たないことあたりが足を引っ張っている。もちろんいわゆるなんちゃってフラットデザインというレベルだと文字に影を付ける必要がほとんどないことも影響がある。
実際に今年作った・見たウェブサイトで使った・使われていたというのは記憶にない。代用できる手段がない(SVGでは影だけスケールさせないのはちょっと難しい)ことは気になるが、存在意義そのものが怪しいというような形だ。
letter-spacingプロパティー
これはもうWOFF(2)のみでよくなったウェブフォントのおかげだ。WOFF(2)だけなら無理やり詰める・詰めないを考える必要が少なくなったことが大きい。font-feature-settingsプロパティーがそれなりに機能するようになったことでなんちゃってカーニング目的でも不要になった。
文字だけで構成されたロゴのような場合にこのプロパティーを使って手を入れていたケースにはSVGで対応できるだろう。それほどコード量が多いとも思えないのでインラインSVGで良く、これといったペナルティーや欠点もないはずだ。
::selection擬似要素
色を変えてしまうと、選択しているのかどうかをユーザーが判断できなくなる。何度か自分でわからなくなることを体験したことで、思ったよりも大きな問題だと痛感した。カーソルを変えるのと同じくらいには危険だ。製作者としてわかりやすくしたつもりが、かえってわかりづらくなってしまう。書くのとデバッグが面倒くさいというのも少しだけある。テスタブルじゃないと言い換えても良いだろう。
そういう意味では良く利用するtext-overflow: ellipsisも危険度が高い。省略されているのはわかるが、そのままだと省略された先を知るすべがない。title属性でフォローすれば可能だという考え方もあるが、タッチデバイスではどうにもならないだろうし、そもそもコンテンツと同じ文章をtitle属性に仕込むのはしっくりこない。
逆にこれまであまり使っていなかったが使うようになったのはmin-heightプロパティーあたりのように思う。初期レンダリングできる範囲の意識と共に、無限にある縦方向のパフォーマンス的な限界への意識が高まった結果だろう。
みなさんは何か見限っただろうか？ CSSそのものは見限らないで欲しいところだ。