Zenn
🤔

CSSでたまに見かける、-webkit-って何だろう...？

2022/01/10に公開
CSS
tech

こんにちは！

最近、表示する行数を指定し、それを超える行数の場合には3点リーダ(...)を実装する機会がありました。
なぜかいつも忘れてしまうので、また調べてしまった訳なのですが、1つ疑問が浮かびました。

私：「あれ...、この-webkit-って何だっけ...？」

そこで今回は、この-webkit-とは何なのかを調べてみたので、まとめていこうと思います。

※もし、記事への補足・改善点(修正点)などアドバイスがあれば、コメント頂けますと嬉しいです！

事の発端！！

冒頭でもお話ししたように、事の発端は、複数行に対応した3点リーダ(...)を実装しているときです。
ちなみに、複数行に対応した3点リーダ(...)を実装するコードは以下です。今回の主題ではないので、詳しくは紹介致しません。

display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 4; // 4行目まで表示。コンテンツを指定した行数に制限できる。
overflow: hidden; // 5行目以上は隠す。

今回は、4行目まで表示して、5行目以上がある場合は3点リーダ(...)を4行目の末尾に表示して省略するようにしました。
上記コードの最後のoverflow: hidden;はわかりました。

しかし！
「-webkit-ってついてる値とかプロパティとかあるけど...-webkit-って何なん!?」
...このように思ったので、早速正体を調べてみました。

-webkit-って何？

この-webkit-の正体は、ベンダープレフィックス(Vendor Prefix) というものでした！

ベンダープレフィックス(Vendor Prefix)とは？

ベンダープレフィックス(Vendor Prefix)とは何なのでしょうか？
公式ドキュメントでは以下のように説明されています。

ブラウザーベンダー (提供元) は、時に試験的または非標準な CSS プロパティおよび JavaScript API に接頭辞を追加することがあります。

標準化されていないCSSプロパティやJavaScript APIに使用されるものだと言うことがわかりました。

ブラウザによって、いくつか種類があるようです。

プレフィックス ブラウザ
-webkit- WebKitベースのブラウザ(Chrome/Safari/ほとんどのiOSブラウザ)
-ms- Internet Explorer/Microsoft Edge
-moz- Firefox

それぞれのプレフィックスに対して、対応しているブラウザが異なります。

ブラウザ(もしくはブラウザベンダー)ごとに、独自のCSS拡張機能が開発されていたり、共通で利用できたりします。プレフィックスを付けることによって、それらの拡張機能を利用することができるようになります！

WebKitとは？

では、-webkit-のプレフィックスに対応しているブラウザ、WebKitベースのブラウザとは何なのでしょうか。
WebKitについて、Wikipediaで以下のような記述を発見しました。(公式もWikipedia参照しているので、今回は参照しても問題ないと判断しました。)

WebKit（ウェブキット）は、Appleが中心となって開発されているオープンソースのHTMLレンダリングエンジン群の総称である。HTML、CSS、JavaScript、SVG、MathMLなどを解釈する。

Appleが開発したことはわかりました。
Appleが中心となって開発を進めていて、その後、Googleも開発に加わったことで、Chromeでも採用されたという経緯があるようです。

...ところで、HTMLレンダリングエンジンって何？

HTMLレンダリングエンジンとは？

HTMLレンダリングエンジンとは、HTMLやCSS、XMLなどを解釈して、見た目を整形した上で表示するプログラムです。

HTMLレンダリングエンジンの主な種類は以下です。

HTMLレンダリングエンジン 対象ブラウザ
Trident Internet Explorer
Gecko Firefox
WebKit2 Safari
Blink Chrome/Microsoft Edge/Operaなど
Edge Microsoft Edge

Blinkは、WebKitをベースにしたHTMLレンダリングエンジンです。
Microsoft EdgeのHTMLレンダリングエンジンは、2020年以降はChromeと同じくBlinkを採用しています。

Webkitは、HTMLなどを解釈し見た目を整えた上でブラウザ上に表示してくれるプログラムの1種なんですね！

おわりに

ここまで、-webkit-とは何なのかについて、さまざまな用語を学びながら調べてきました。

その結果、以下のことがわかりました。

  • -webkit-は、ベンダープレフィックス(接頭辞)　の1つ。他にも-moz-や-ms-がある。

  • ベンダープレフィックスは、CSSなどにおける正式な・標準的なプロパティではなく、拡張機能などの非標準な機能を利用するときにつける。

  • -webkit-は、主にWebKitベースのブラウザに対応している。

  • WebKitは、HTMLやCSSを解釈して整形して画面に表示するHTMLレンダリングエンジンの1種。

このトピックについて調べていると、次々に知らないワードが出てきたりして、調べ甲斐がありましたし、とても楽しかったです！

お読みくださり、ありがとうございました！

※ちなみに、複数行に対応して3点リーダを実装する際、-webkit-line-clampプロパティで行数指定をして3点リーダを表示させることができますが、このプロパティが有効になるのは、display: -webkit-box;と-webkit-box-orient: vertical;の両方が指定されている場合です。そのため、最初に示したようなコードになっておりました。(以下、コード再掲。)

display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 4;
overflow: hidden;

参考資料

MDN公式 Vendor Prefix(ベンダー接頭辞)
MDN公式 WebKit
Wikipedia WebKit
@IT HTMLレンダリングエンジン
MDN公式 WebKitのCSS拡張
MDN公式 Microsoft CSS拡張
MDN公式 MozillaのCSS拡張
Webブラウザ、レンダリングエンジン、JavaScriptエンジンを整理して図視化してみた

GitHubで編集を提案

Discussion