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

0

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 対応ということですので、互換性問題を気にする必要はありません。

対応ブラウザ

Internet Explorer Edge Chrome Firefox Safari
◯ (-webkit-)

対応ブラウザこそそう広くないですが、装飾に関することなので非対応ブラウザはいっそ諦めてしまってもいいんじゃないでしょうか。
(更新終了したIEはまだしも、最近の Edge の足枷感すごい。。)

ということで新しい text-decoration の紹介でした。互換性問題が発生するのがたまにキズですが、新しい装飾が増えるとデザインの幅が広がっていいですね。

Grid Layout が注目されている Chrome 57 ですが、この子の事も一緒に覚えてあげてください。

参考リンク

Can I use - text-decoration styling

CSS Text Decoration Module Level 3

text-decoration - CSS | MDN

ミルコン@管理人

しがない学生の WordPress デベロッパー。最近は WordPress テーマの作成や翻訳などやってます。フロントが好き。Twitter: @mirucons

スポンサーリンク

シェアする

コメントを残す

メールアドレスが公開されることはありません。

スパム対策の為、日本語が含まれない投稿は無視されますのでご注意ください。