web-dev-qa-db-ja.com

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

ごく最近、私はタグ "webkit"で質問を見ています。そのような質問は通常、CSS、jQuery、レイアウト、相互参照者の互換性の問題などに関するWebベースの質問です。

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

更新

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

最終的な質問... WebKitはIEでサポートされていますか？

アップデート2

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

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

csswebkitcross-browserrendering-engine
232
Hristo

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

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

  • IE→ トライデント （製造中止）
  • エッジ→ EdgeHTML （トライデントの片付けフォーク）
  • Firefox→ Gecko
  • オペラ→ プレスト （2013年2月からPrestoを使用しなくなりました。最近はOpera = Chromeを検討してください）
  • サファリ→ WebKit
  • Chrome→ 点滅 （WebKitのフォーク）。

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

最終的な質問は... WebKitはIEでサポートされていますか？

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

138
kennytm

何に加えて @ KennyTM は言った：

  • IE
  • エッジ
  • Firefox
    • エンジン： ヤモリ
    • CSSプレフィックス：-moz
  • オペラ
    • エンジン： プレスト → 点滅1
    • CSSプレフィックス：-o（Presto）と-webkit（Blink）
  • Safari
    • エンジン： WebKit
    • CSSプレフィックス：-webkit
  • Chrome
    • エンジン： WebKit → 点滅2
    • CSSプレフィックス：-webkit

1） 2013年2月12日、Opera（version 15+） 発表 彼らは自分たちのエンジンPrestoからWebKitへ Blink と名前を変更しました。

2） 2013年4月3日、Google（Chromeバージョン28以降） 発表 彼らはWebKitベースの Blink エンジンを使用する予定です。

3） 2018年12月6日、Microsoft（プレビュービルドは2019年初頭に完成予定） 発表 彼らはWebKitベースの Blink エンジンを使用することになる。

89
jerone

Webkitは、SafariとChromeで使用されているWebブラウザのレンダリングエンジンです（なかでも人気のあるものです）。

CSSセレクタの-webkit接頭辞は、のみこのエンジンが処理することを意図したプロパティで、-mozプロパティと非常によく似ています。 -webkit-border-radiusは標準のborder-radiusに置き換えられ、同じについて複数の規則は必要ないでしょう。複数のブラウザこれは実際のところ、標準バージョンが邪魔されないように意図された「事前仕様」機能の結果です。

あなたの更新のために：...いいえそれはIEとは無関係です、本当にIE少なくとも9以前 Trident という別のレンダリングエンジンを使用します。

34
Nick Craver

これは答えられて受け入れられました、しかし、誰かがまだなぜ事が少し混乱しているのか疑問に思うならば、あなたはこれを読む必要があります：

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

Gecko、Webkit、その他の主要なレンダリングエンジンがどのように進化したか、そして何が混乱したユーザーエージェント文字列の現状につながったのかについての良いアイデアを与えてくれます。

TLのための最後の段落の引用、DRの目的：

それからGoogleはChromeを構築し、ChromeはWebkitを使用しました、そしてそれはSafariのようでした、そしてSafariのために構築されたページを望んでいたので、Safariのふりをしました。したがってChromeはWebKitを使用し、Safariを装い、WebHTは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と呼び、ユーザーエージェント文字列は完全に混乱したそしてだれにも役に立たなくなり、誰もが他のみんなになるふりをし、混乱が多くなりました。

32
CodeExpress

最終的な質問... WebKitはIEでサポートされていますか？

やや。チェックアウトChrome Frame、これはInternet Explorer用のプラグインで、Webkitエンジンを使用します。唯一の気まぐれな点はあなたがあなたの訪問者にプラグインをインストールするように説得しなければならないということです。

更新

Chrome Frameはメンテナンスまたはサポートされなくなりました…

7
edgerunner

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

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

WebKitのWebCoreおよびJavaScriptCoreコンポーネントはGNU劣等一般公衆利用許諾契約書の下で利用可能であり、WebKitの残りの部分はBSDスタイルのライセンスの下で利用可能です。

出典 ウィキペディア

レイアウトエンジンの詳細については、あなたが見ることができます こちら

6
Sotiris

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

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

5
SLaks

-webkit-は、Chrome、Safari、Opera、iOSの各ブラウザに適したグループです。彼ら全員が共通の先祖を持っているので、しばしば彼らの能力/制限（CSSとJavascriptの実行に関して）はグループに限られています。

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

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

-moz-（Firefox）

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

-ms-（Internet ExplorerとMicrosoft Edge）

4
Tycholiz

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

4
recursive

Webkitは、AppleのSafariブラウザとGoogleのChromeで使用されているhtml/cssレンダリングエンジンです。 -webkit-で始まるcss値の接頭辞はWebキット固有のもので、通常はCSS 3またはその他の標準化されていない機能です。

update 2に答えるために、w3cはこれらのことを標準化しようとする団体です、彼らは規則を書き、そしてプログラマはそれらの規則を解釈するために彼らのレンダリングエンジンを書きます。それで基本的にw3cはDIVが「このように」動作するべきであると言います、そしてエンジン作家はそれからコードを書くためにその規則を使います、どんなバグまたは規則の誤った解釈も互換性問題を引き起こします。

4
JKirchartz

私がウェブサイトのデザイナーとして遭遇した共通の問題は、多くの人がIE6 +を使用しているということです。通常、CSSを除いて、ブラウザごとに各要求を解析するために複数のレンダリング構文を追加する必要があります。 IEがChrome/FF/Operaやwebkitと同じくらい簡単に読むことができるCSSのための普遍的なレンダリング設定があったなら、それは非常にいいでしょう。 IEの問題は、私のウェブサイトがIE以外のすべてのブラウザを使って見栄えよく機能するよりも、すべての適切なCSSスタイルとレンダリングを使用しない場合です。これは、不幸で、辛抱強いIEの顧客になる可能性があります。

例を示します。境界半径10％の1pxの灰色の境界線が必要だとしましょう。 Chromeなどでは、webkitプロパティを使います。さて、IEのために、私は "border：1px solid＃E5E5E5"と "border-radius：10％"の単純で古いCSS値を使って別々のCSSスタイルを追加しなければなりません。良い結果が常にすべてのIEブラウザバージョンで保証されるわけではありませんが、ほとんどの場合、この方法は私や他の多くの人にとってうまくいきます。

3
AJADMIN.COM

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

Modernizr、HTML 5 ShivおよびRespond.jsを使ってみてください。これらは、polyfillを使用する、驚くべきIE互換のpolyfillスクリプト、および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>
2
CoyoteCMS

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

0
Hamid FzM

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のフォーク） 。

0
Nabeel khan