Apa itu WebKit dan bagaimana kaitannya dengan CSS?

Baru-baru ini, saya telah melihat pertanyaan dengan tag "webkit". Pertanyaan semacam itu biasanya cenderung pertanyaan berbasis web yang berkaitan dengan CSS, jQuery, tata letak, masalah kompatibilitas lintas-peramban, dll ...

Jadi apa ini "webkit" dan bagaimana hubungannya dengan CSS? Saya juga memperhatikan banyak -webkit-...properti dalam kode sumber untuk berbagai situs web. Apakah keduanya terkait?

Memperbarui

Jadi dari jawaban sejauh ini ... WebKit adalah mesin rendering browser web HTML / CSS untuk Safari / Chrome. Apakah ada mesin seperti untuk IE / Opera / Firefox dan apa perbedaan, pro dan kontra dari menggunakan satu di atas yang lain? Bisakah saya menggunakan fitur WebKit di Firefox misalnya?

Pertanyaan pamungkas ... Apakah WebKit didukung oleh IE?

Perbarui 2

Semua browser utama menggunakan mesin rendering yang berbeda. Saya kira ini adalah alasan utama mengapa ada banyak masalah kompatibilitas lintas-browser!

Jadi, apakah ada semacam proyek atau perpindahan ke mesin rendering standar yang SEMUA browser akan gunakan? Akankah HTML5 mengakhiri masalah kompatibilitas lintas-browser?

Pembaruan: Jadi tampaknya, WebKit adalah mesin rendering browser web HTML / CSS untuk Safari / Chrome. Apakah ada mesin seperti untuk IE / Opera / Firefox dan apa perbedaan, pro dan kontra dari menggunakan satu di atas yang lain? Bisakah saya menggunakan fitur WebKit di Firefox misalnya?

Setiap browser didukung oleh mesin render untuk menggambar halaman web HTML / CSS.

• IE → Trident (dihentikan)
• Tepi → EdgeHTML (garpu pembersihan Trident)(Edge beralih ke Blink pada 2019)
• Firefox → Gecko
• Opera → Presto(tidak lagi menggunakan Presto sejak Februari 2013, pertimbangkan Opera = Chrome, oleh karena itu Blink sekarang)
• Safari → WebKit
• Chrome → Blink (garpu Webkit ).

Lihat Perbandingan mesin peramban web untuk daftar perbandingan di berbagai bidang.

Pertanyaan pamungkas ... adalah WebKit didukung oleh IE?

Tidak secara asli.

Tambahan untuk apa yang dikatakan @KennyTM :

• YAITU
  • Mesin: Trisula
  • CSS-awalan: -ms
• Tepi
  • Mesin: EdgeHTML → Blink ³
  • CSS-awalan: -ms
• Firefox
  • Mesin: Tokek
  • CSS-awalan: -moz
• Opera
  • Mesin: Presto → Blink ¹
  • CSS-awalan: -o(Presto) dan -webkit(Berkedip)
• Safari
  • Mesin: WebKit
  • CSS-awalan: -webkit
• Chrome
  • Mesin: WebKit → Blink ²
  • CSS-awalan: -webkit

¹⁾ Pada 12 Februari 2013 Opera (versi 15+) mengumumkan mereka pindah dari mesin Presto mereka sendiri ke WebKit bernama Blink .

²⁾ Pada 3 April 2013 Google (Chrome versi 28+) mengumumkan mereka akan menggunakan mesin Blink berbasis WebKit .

³⁾ Pada 6 Desember 2018 Microsoft (Microsoft Edge 79+ stable) mengumumkan bahwa mereka akan menggunakan mesin Blink berbasis WebKit .

Webkit adalah mesin rendering browser web yang digunakan oleh Safari dan Chrome (antara lain, tetapi ini adalah yang populer).

The -webkitprefix pada CSS adalah sifat yang hanya mesin ini dimaksudkan untuk proses, sangat mirip dengan -mozproperti. Banyak dari kita berharap ini hilang, misalnya -webkit-border-radiusakan digantikan oleh standar border-radiusdan Anda tidak akan memerlukan banyak aturan untuk hal yang sama untuk banyak browser. Ini benar-benar hasil dari fitur "pra-spesifikasi" yang dimaksudkan untuk tidak mengganggu versi standar ketika hal itu terjadi.

Untuk pembaruan Anda: ... tidak, itu tidak terkait dengan IE, IE setidaknya sebelum 9 menggunakan mesin rendering yang berbeda yang disebut Trident .

Ini telah dijawab dan diterima, tetapi jika seseorang masih bertanya-tanya mengapa hal-hal agak kacau hari ini, Anda harus membaca ini:

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

Ini memberikan ide yang bagus tentang bagaimana tokek, webkit, dan mesin rendering utama lainnya berevolusi dan apa yang menyebabkan kondisi saat ini dari string agen pengguna yang kacau.

Mengutip paragraf terakhir untuk tujuan TL; DR:

Dan kemudian Google membangun Chrome, dan Chrome menggunakan Webkit, dan itu seperti Safari, dan ingin halaman yang dibuat untuk Safari, dan dengan demikian berpura-pura menjadi Safari. Dan dengan demikian Chrome menggunakan WebKit, dan berpura-pura menjadi Safari, dan WebKit berpura-pura menjadi KHTML, dan KHTML berpura-pura menjadi Gecko, dan semua browser berpura-pura sebagai Mozilla, dan Chrome menyebut dirinya 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, dan string agen pengguna adalah kekacauan total, dan hampir tidak berguna, dan semua orang berpura-pura menjadi orang lain, dan kebingungan melimpah.

-webkit-hanyalah sebuah grup yang cocok dengan browser Chrome, Safari, Opera dan iOS. Mereka semua memiliki leluhur yang sama, sehingga seringkali kemampuan / keterbatasan mereka (ketika harus menjalankan CSS dan Javascript) terbatas pada grup.

Pengembang akan menempatkan -webkit-diikuti oleh beberapa kode, yang berarti bahwa kode hanya akan berjalan di browser Chrome, Safari, Opera dan iOS. Berikut daftar lengkapnya:

-webkit- (Chrome, Safari, Opera versi terbaru, hampir semua browser iOS (termasuk Firefox untuk iOS); pada dasarnya, browser berbasis WebKit apa saja)

-moz- (Firefox)

-o- (Tua, pra-WebKit, versi Opera)

-ms- (Internet Explorer dan Microsoft Edge)

Pertanyaan pamungkas ... Apakah WebKit didukung oleh IE?

Agak. Lihat Chrome Frame , ini adalah plugin untuk Internet Explorer yang membuatnya menggunakan mesin Webkit. Satu-satunya kekhasan adalah Anda harus meyakinkan pengunjung Anda untuk menginstal plugin.

Memperbarui

Chrome Frame tidak lagi dipertahankan atau didukung ...

WebKit adalah mesin tata letak yang dirancang untuk memungkinkan peramban web merender halaman web. Mesin WebKit menyediakan serangkaian kelas untuk menampilkan konten web di windows, dan mengimplementasikan fitur browser seperti tautan berikut ketika diklik oleh pengguna, mengelola daftar back-forward, dan mengelola riwayat halaman yang baru saja dikunjungi.

WebKit awalnya dibuat sebagai garpu KHTML sebagai mesin tata letak untuk Safari Apple; itu portabel untuk banyak platform komputasi lainnya. Ini juga digunakan di Browser Chrome Google.

Komponen WebCore dan JavaScriptCore WebKit tersedia di bawah GNU Lesser General Public License, dan sisanya dari WebKit tersedia di bawah lisensi gaya BSD.

Sumber Wikipedia

Untuk informasi lebih lanjut tentang tata letak mesin Anda dapat melihat di sini

Webkit adalah mesin rendering HTML yang digunakan oleh Chrome dan Safari.

Ini mendukung sejumlah properti CSS khusus yang diawali oleh -webkit-.

Webkit adalah mesin rendering yang digunakan di browser populer Safari dan Chrome, serta yang lainnya.

Webkit adalah mesin rendering html / css yang digunakan di browser Safari Apple, dan di Google Chrome. awalan nilai css dengan -webkit- adalah spesifik webkit, biasanya CSS3 atau fitur non-standar lainnya.

untuk menjawab pembaruan 2 w3c adalah badan yang mencoba untuk membakukan hal-hal ini, mereka menulis aturan, kemudian programmer menulis mesin rendering mereka untuk menafsirkan aturan itu. Jadi pada dasarnya w3c mengatakan DIV harus bekerja "Dengan cara ini" penulis mesin kemudian menggunakan aturan itu untuk menulis kode mereka, bug atau kesalahan interpretasi aturan menyebabkan masalah kompatibilitas.

Masalah umum yang saya temui sebagai perancang situs web adalah banyak orang menggunakan IE6 +. Bukan masalah besar biasanya, kecuali dalam CSS saya harus menambahkan beberapa sintaks rendering 'untuk mem-parsing setiap permintaan, per browser. Akan sangat bagus jika ada pengaturan render universal untuk CSS yang dapat dibaca IE semudah Chrome / FF / Opera dan webkit. Masalah dengan IE adalah bahwa jika saya TIDAK menggunakan SEMUA gaya CSS yang tepat dan rendering, dari situs web saya terlihat dan bekerja sangat baik menggunakan setiap browser kecuali IE. Ini bisa membuat pelanggan IE yang tidak bahagia dan mati-keras.

Contohnya adalah ini: Katakanlah saya memerlukan 1px, batas abu-abu dengan batas-radius 10%. Untuk Chrome dan lainnya, saya menggunakan properti webkit. Sekarang, untuk IE, saya harus menambahkan gaya CSS terpisah menggunakan nilai-nilai CSS lama sederhana dari "border: 1px solid # E5E5E5" dan "border-radius: 10%". Hasil positif tidak selalu dijamin di atas semua versi browser IE, tetapi sebagian besar metode ini berfungsi dengan baik untuk saya dan banyak lainnya.

Meskipun ini adalah posting yang lebih lama, ada juga metode lain untuk rendering untuk versi Internet Explorer yang lebih lama. -webkit saat menjadi awalan Vendor CSS, Anda juga dapat mengunduh beberapa aplikasi JS dan menempatkannya di bagian bawah HEAD HTML.

Coba gunakan Modernizr, HTML5 Shiv dan Respond.js. Ini adalah skrip polyfill kompatibel IE yang luar biasa yang menggunakan polyfill, dan sumber daya lainnya yang akan membantu membuat elemen HTML5 yang lebih baik di IE9 dan Bawah.

Untuk menggunakan polyfill ini, cukup tambahkan logika boolean HTML untuk menempatkannya, JIKA browser kurang dari keinginan versi IE. Kode contoh adalah:

<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>

Dokumentasi yang baik tentang WebEngineskhususnya webKitdan pengembangnya dapat Anda baca di: WebKit

Webkit adalah mesin rendering yang digunakan di browser populer Safari dan Chrome, serta yang lainnya. Setiap browser didukung oleh mesin rendering untuk menggambar halaman web HTML / CSS.

IE → Trident (tidak melanjutkan) Edge → EdgeHTML (garpu pembersihan Trident) Firefox → Gecko Opera → Presto (tidak lagi menggunakan Presto sejak Februari 2013, pertimbangkan Opera = Chrome saat ini) Safari → WebKit Chrome → Blink (fork dari WebKit) .