WebKitとは何ですか？CSSとどのように関連していますか？

最近では、「webkit」というタグの付いた質問が表示されています。このような質問は通常、CSS、jQuery、レイアウト、クロスブラウザーの互換性の問題などに関連するWebベースの質問になる傾向があります。

それでは、この「ウェブキット」とは何であり、CSSとどのように関連していますか？また-webkit-...、さまざまなWebサイトのソースコードに多くのプロパティがあることに気づきました。これら2つは関連していますか？

更新

これまでの回答から... WebKitは、Safari / Chrome用のHTML / CSS Webブラウザーレンダリングエンジンです。IE / Opera / Firefox用のそのようなエンジンはありますか、また一方を使用することの違い、長所と短所は何ですか？たとえば、FirefoxでWebKit機能を使用できますか？

究極の質問... WebKitはIEでサポートされていますか？

アップデート2

主要なブラウザはすべて、異なるレンダリングエンジンを使用しています。これが、ブラウザ間の互換性の問題が非常に多い大きな理由だと思います。

それでは、すべてのブラウザが使用する標準のレンダリングエンジンへのプロジェクトや動きはありますか？HTML5は、ブラウザー間の互換性の問題に終止符を打つでしょうか？

更新：明らかに、WebKitはSafari / Chrome用のHTML / CSS Webブラウザーレンダリングエンジンです。IE / Opera / Firefox用のそのようなエンジンはありますか、また一方を使用することの違い、長所と短所は何ですか？たとえば、FirefoxでWebKit機能を使用できますか？

すべてのブラウザーは、HTML / CSS Webページを描画するためのレンダリングエンジンに支えられています。

• IE→ トライデント （廃止）
• エッジ→ EdgeHTML（Tridentのクリーンアップフォーク）（2019年にEdgeがBlinkに切り替えられました）
• Firefox→ Gecko
• オペラ→ プレスト（2013年2月以降、Prestoを使用しなくなりました。Opera= Chromeを検討してください。そのため、最近は点滅します）
• Safari→ WebKit
• Chrome→ Blink（Webkitのフォーク）。

さまざまな分野での比較のリストについては、Webブラウザーエンジンの比較を参照してください。

究極の質問... WebKitはIEでサポートされていますか？

ネイティブではありません。

@KennyTMの発言への追加：

• IE
  • エンジン：トライデント
  • CSSプレフィックス： -ms
• 縁
  • エンジン：EdgeHTML → Blink ³
  • CSSプレフィックス： -ms
• Firefox
  • エンジン：Gecko
  • CSSプレフィックス： -moz
• オペラ
  • エンジン：Presto → Blink ¹
  • CSS接頭辞：-o（Presto）および-webkit（Blink）
• サファリ
  • エンジン：WebKit
  • CSSプレフィックス： -webkit
• クロム
  • エンジン：WebKit → Blink ²
  • CSSプレフィックス： -webkit

^1） 2013年2月12日、Opera（バージョン15以降）は、独自のエンジンPrestoからBlinkという名前のWebKitに移行することを発表しました。

^2） 2013年4月3日、Google（Chromeバージョン28以降）は、WebKitベースのBlinkエンジンを使用することを発表しました。

^3） 2018年12月6日、Microsoft（Microsoft Edge 79+安定版）は、WebKitベースのBlinkエンジンを使用することを発表しました。

Webkitは、SafariとChromeで使用されているWebブラウザーのレンダリングエンジンです（他のものもありますが、これらは一般的なものです）。

-webkitCSSセレクターのプレフィックスは、このエンジンのみが処理することを目的とした-mozプロパティであり、プロパティと非常に似ています。私たちの多くは、これがなくなることを望んでいます。たとえば-webkit-border-radius、標準に置き換えられ、複数のブラウザーで同じものに対して複数のborder-radiusルールを必要としないでしょう。これは、実際には、標準バージョンに干渉しないように意図された「事前仕様」機能の結果です。

更新について： ...いいえ、それは実際にはIEとは関係ありません。少なくとも9より前のIEでは、Tridentと呼ばれる別のレンダリングエンジンを使用しています。

これは回答され、受け入れられましたが、誰かがまだ今日は少し混乱しているのか疑問に思っている場合は、これを読む必要があります。

http://webaim.org/blog/user-agent-string-history/

これは、gecko、webkit、およびその他の主要なレンダリングエンジンがどのように進化し、混乱したユーザーエージェント文字列の現在の状態に至ったのかについての良いアイデアを提供します。

TL; DRの目的で最後の段落を引用：

そして、GoogleはChromeを構築し、ChromeはWebkitを使用しました。これはSafariのようなもので、Safari用に構築されたページを望んでいたため、Safariのふりをしました。したがって、ChromeはWebKitを使用し、Safariのふりをし、WebKitはKHTMLのふりをし、KHTMLはGeckoのふりをし、すべてのブラウザーはMozillaのふりをし、Chromeはそれ自体を呼び出しMozilla/5.0 (Windows; U; Windows NT 5.1; en-US) AppleWebKit/525.13 (KHTML, like Gecko) Chrome/0.2.149.27 Safari/525.13、ユーザーエージェント文字列は完全に混乱していました。ほぼ役に立たず、誰もが他の人になりすまし、混乱がたくさんありました。

-webkit-Chrome、Safari、Opera、iOSの各ブラウザが適合するグループです。それらはすべて共通の祖先を持っているため、（CSSおよびJavaScriptの実行に関して）多くの場合、それらの機能/制限はグループに限定されます。

開発者は-webkit-いくつかのコードを続けて配置します。つまり、コードはChrome、Safari、Opera、iOSブラウザーでのみ実行されます。ここに完全なリストがあります：

-webkit- （Chrome、Safari、Operaの新しいバージョン、ほぼすべてのiOSブラウザー（Firefox for iOSを含む）、基本的に、WebKitベースのブラウザー）

-moz- （Firefox）

-o- （古い、WebKit以前のバージョンのOpera）

-ms- （Internet ExplorerおよびMicrosoft Edge）

究極の質問... WebKitはIEでサポートされていますか？

やや。Chrome Frameを確認してください。これは、Webkitエンジンを使用するInternet Explorerのプラグインです。唯一の癖は、プラグインをインストールするように訪問者を説得する必要があることです。

更新

Chrome Frameのメンテナンスやサポートは終了しました…

WebKitは、WebブラウザーがWebページをレンダリングできるように設計されたレイアウトエンジンです。WebKitエンジンは、ウィンドウにWebコンテンツを表示する一連のクラスを提供し、ユーザーがクリックしたときにリンクをたどる、バックフォワードリストの管理、最近アクセスしたページの履歴の管理などのブラウザー機能を実装します。

WebKitはもともと、AppleのSafariのレイアウトエンジンとしてKHTMLのフォークとして作成されました。他の多くのコンピューティングプラットフォームに移植可能です。また、GoogleのChromeブラウザでも使用されています。

WebKitのWebCoreおよびJavaScriptCoreコンポーネントは、GNU Lesser General Public Licenseの下で利用でき、残りのWebKitは、BSDスタイルのライセンスの下で利用できます。

ソースウィキペディア

レイアウトエンジンの詳細については、こちらをご覧ください。

Webkitは、ChromeとSafariで使用されるHTMLレンダリングエンジンです。

接頭辞がの付いた多数のカスタムCSSプロパティをサポートしています-webkit-。

Webkitは、人気のあるブラウザーのSafariやChrome、その他で使用されるレンダリングエンジンです。

Webkitは、AppleのSafariブラウザおよびGoogleのChromeで使用されるhtml / cssレンダリングエンジンです。-webkit-が付いたcss値の接頭辞はwebkit固有であり、通常はCSS3または他の非標準化機能です。

更新2に答えるw3cは、これらを標準化しようとする本体であり、ルールを記述してから、プログラマーがレンダリングエンジンを記述して、それらのルールを解釈します。つまり、基本的にw3cは、DIVは「このように」機能するはずであり、エンジン作成者はそのルールを使用してコードを記述します。ルールのバグや誤解により互換性の問題が発生します。

私がウェブサイトのデザイナーとして遭遇した一般的な問題は、多くの人々がIE6 +を使用していることです。通常は大したことはありませんが、CSSでは、ブラウザーごとに各要求を解析するために複数のレンダリング構文を追加する必要があります。IEがChrome / FF / Operaやwebkitと同じくらい簡単に読み取ることができるCSSのユニバーサルレンダリング設定があれば非常に便利です。IEの問題は、適切なCSSスタイルとレンダリングをすべて使用しないと、WebサイトがIE以外のすべてのブラウザーを使用して見栄えがよくなり、うまく機能することです。これは、不幸で死ぬほど強いIEの顧客になる可能性があります。

例は次のとおりです。border-radiusが10％の1pxの灰色のボーダーが必要だとします。Chromeなどでは、webkitプロパティを使用します。IEの場合は、「border：1px solid＃E5E5E5」と「border-radius：10％」という単純な古いCSS値を使用して、別のCSSスタイルを追加する必要があります。すべてのIEブラウザーバージョンで常に良い結果が保証されるとは限りませんが、ほとんどの場合、この方法は私や他の多くの人にとって問題なく機能します。

これは古い投稿ですが、古いバージョンのInternet Explorer用にレンダリングする別の方法もあります。-webkitは、CSSベンダープレフィックスでありながら、いくつかのJSアプリケーションをダウンロードして、HTMLのHEADの下部に配置することもできます。

Modernizr、HTML5 Shiv、Respond.jsを使用してみてください。これらは、ポリフィルを使用する驚くべきIE互換のポリフィルスクリプト、およびIE9以下でのHTML5要素のレンダリングを向上させるその他のリソースです。

これらのポリフィルを使用するには、ブラウザが目的のIEバージョンよりも小さい場合は、HTMLブールロジックを追加して配置します。コード例は次のとおりです。

<head>
<!-- HEAD Elements -->  
<script src="path/to/modernizr.js" type="text/javascript"></script>
<!--[if lt IE 6]>
  <script src="path/to/HTMLSiv.js" type="text/javascript">
  </script>
  <script src="path/to/respond.js" type="text/javascript">
  </script>
<![endif]-->
</head>

WebEngines特にwebKitあなたが読むことができるその開発者についての良いドキュメント： WebKit

Webkitは、一般的なブラウザーであるSafariやChromeなどで使用されるレンダリングエンジンです。すべてのブラウザーは、HTML / CSS Webページを描画するためのレンダリングエンジンに支えられています。

IE→Trident（廃止）Edge→EdgeHTML（Tridentのクリーンアップフォーク）Firefox→Gecko Opera→Presto（2013年2月以降、Prestoを使用しなくなりました。現在Opera = Chromeを検討してください）Safari→WebKit Chrome→Blink（WebKitのフォーク） 。