Chrome 57 で追加された 'text-decoration-color' についてのおさらい

2017年3月9日リリースの Chrome 57 に追加された 'text-decoration-color' というプロパティが何気に便利なのでその紹介です。

'text-decoration-color' とは

本来の名称は 'text-decoration-color' ではなく、W3Cの仕様書では 'CSS Text Decoration Module Level 3' という名称になっています。

いままでショートハンドでなかった 'text-decoration' が、 'text-decoration-line', 'text-decoration-style', 'text-decoration-color' という3つのショートハンドプロパティになります。

text-decoration - CSS | MDN

使い方

text-decoration-line

基本の線を引く位置を指定します。このプロパティは現状、いままでの 'text-decoration' プロパティの名前が変わっただけのはずです。
いままで指定していた、'text-decoration': underline; は 'text-decoration-line': underline; という意味になります。

他に使えるのは以下の3つです。（とはいえ全部お馴染みのものですね）

text-decoration-line: underline; /* 下線 */
text-decoration-line: overline;  /* 上線 */
text-decoration-line: line-through;  /* 打ち消し線 */

text-decoration-style

線のスタイルを指定するプロパティになります。border でいうと、border-style に相当するものです。
以下の5つのスタイルが使えます。

text-decoration-style: solid;  /* 傍線 */
text-decoration-style: double;  /* 二重線 */
text-decoration-style: dotted;  /* 点線 */
text-decoration-style: dashed;  /* 破線 */
text-decoration-style: wavy;  /* 波線 */

サンプル：傍線、二重線、点線、破線、波線

border で見かけたものが多いですが、wavy は今まで CSS になかった感じのやつですね。
かわいい感じの印象になるので女性向けサイトに使うといい感じに映えそうです。

text-decoration-color

最後に text-decoration-color です。名称通り text-decoration の色を変えるものとなります。

text-decoration-color: red;
text-decoration-color: #ff0000;
text-decoration-color: rgba(255, 128, 128, 0.5);

先程のサンプルに色をつけてみるとこんな感じ。

サンプル：傍線、二重線、点線、破線、波線

文字色と線の色を変更するだけの用途ならこれが最適ですね。border のように画像下にも線を引いてしまう問題はなくなるので便利です。

問題点

一通り紹介し終えたところで問題点の紹介です。
この仕様変更、ショートハンドじゃなかったものをショートハンドにするという大掛かりな仕様変更の為、面倒な互換性問題が発生します。

例えば、text-decoration: underline wavy #444; といった指定をすると対応ブラウザでは問題なく表示されるのに対して、非対応ブラウザでは無効な値と認識され、underline すらひかれなくなってしまいます。

ですので、基本的に text-decoration はショートハンドであると思わずに以下のような記述方法を取るのが現状では良いのかと思います。

text-decoration: underline;
text-decoration-style: wavy;
text-decoration-color: #444;
-webkit-text-decoration: underline wavy #444;

-webkit- のプレフィックスは Safari の対応となります。ショートハンドとして使う場合はもう一度 underline から指定する必要があることに注意してください。
-webkit- のプレフィックス付きということは、新 text-decoration 対応ということですので、互換性問題を気にする必要はありません。