Days on the Moon

結論からいうと、CSS の -webkit-line-clamp プロパティは使わないほうがいい。現状および今後の Web ブラウザでのサポートが望めないからである。

-webkit-line-clamp CSS プロパティとは何か

複数行でも3点リーダーをきかせることができるというもの。

このプロパティはどうやって使うか

-webkit-line-clamp プロパティ単体では効果を持たず、他のプロパティと組み合わせて使う。

selector {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
}

このプロパティは何のために存在するのか

おそらくは Apple 製アプリケーションでの内部的な利用のため。このプロパティは、Safari CSS Reference の Additional Unsupported Properties の項に記載がある。

WebKit provides partial support for a number of properties that are not supported for developer use. This list may include:

• Properties designed for Apple internal use, such as properties specific to the way Mail and other applications use WebKit.
• Properties that are in a very early stage of development and are not really usable yet.
• Properties that are used within WebKit itself and cannot be parsed in a CSS file.
• Properties that are parsed for historical reasons, but that are not actually used.

適当に訳すと、

WebKit は、開発者の使用に対してはサポートされないプロパティを、いくつか部分的にサポートしている。このリストには以下を含む:

• Apple の内部的な利用 (Mail など、WebKit を使うアプリケーションに固有のもの) のために設計されたプロパティ。
• 開発のごく初期段階であり、まだ実用に耐えないプロパティ。
• WebKit 内部で使われ、CSS ファイルからはパースできないプロパティ。
• 歴史的な理由でパースはされるが、実際には使われないプロパティ。

このプロパティの開発状況はどうなっているか

このプロパティは -webkit-box、すなわち旧式の flexbox (flexible box) と組み合わせる必要がある。現 flexbox 仕様とは相いれない。このことから、このプロパティは旧 flexbox 時代に内部利用のため、もしくは実験的に実装され、そのまま放置されたものではないかと推測される。実際に上述の文書ではこのプロパティが「サポートされない」ものとして挙げられている。

このプロパティをベンダ接頭辞なしで書く必要があるか

ない。display: -webkit-box というのは旧 flexbox 仕様の値にベンダ接頭辞をつけたものであり、そこからベンダ接頭辞を外して display: box と書いたところで、どのブラウザもサポートしていない。現 flexbox 仕様では display: flex という全く別の値を使うようになっている。なので、

selector {
  display: -webkit-box;
  display: box;
  -webkit-box-orient: vertical;
  box-orient: vertical;
  -webkit-line-clamp: 3;
  line-clamp: 3;
}

のようにベンダ接頭辞付きのプロパティを併記するのは無意味である。後述するように、line-clamp というプロパティが制定されることもない。

このプロパティは標準化されるのか

line-clamp というプロパティ名では標準化されない。2014 年 6 月の W3C CSS WG のミーティングにおいて、-webkit-line-clamp プロパティのことが議題に上がっている。そこでの結論としては、最大行数の指定とブロックに対する省略記号の問題は別々に議論していこうというものである。

-webkit-line-clamp プロパティの持つ、

• 最大行数の指定
• 最大行数をはみ出した内容の扱い
• 省略記号の表示

という機能は別々のプロパティや疑似要素として CSS Overflow Module で検討されていくことになると思われる。(該当 issue)

余談: ベンダ接頭辞について

開発者が -webkit- ベンダ接頭辞付きのプロパティ / 値しか書かないという状況が蔓延したため、ベンダ接頭辞は無意味なものとなった。今やモバイル向けブラウザの多くは (WebKit でなくとも) -webkit- ベンダ接頭辞付きのプロパティを解釈する。(そうしないとモバイル向け Web サイトがまともに機能しない)

挙句の果てには、――これは CSS ではなく DOM の話だが――webkit 接頭辞付きのメソッドがエイリアスとして仕様に取り込まれるという体たらくである。

これらの反省から、現在のブラウザ開発ベンダはベンダ接頭辞を使わず、開発版ブラウザを使っているときや、ユーザーが明示的にオプションを有効にしたときのみ仕様策定中の機能を有効にするという方針になっている。ベンダ接頭辞は、かつて試験的に実装されたプロパティにつけることはあっても、今後新規に実装されていくプロパティにつける必要はない。

ベンダ接頭辞をつけるにしても、手動でつけていくのではなく、Autoprefixerのようなツールを使って自動的につけていくのが確実である。

---

この記事は、はてなエンジニアアドベントカレンダー 2016 の 2 日目の記事として公開された。翌日の担当は id:wtatsuru である。