WebKit là gì và nó liên quan đến CSS như thế nào?

Gần đây, tôi đã thấy các câu hỏi với thẻ "webkit". Những câu hỏi như vậy thường có xu hướng là những câu hỏi dựa trên web liên quan đến CSS, jQuery, bố cục, vấn đề tương thích chéo, v.v ...

Vậy "webkit" này là gì và nó liên quan đến CSS như thế nào? Tôi cũng đã nhận thấy rất nhiều -webkit-...thuộc tính trong mã nguồn cho các trang web khác nhau. Hai cái này có liên quan không?

Cập nhật

Vì vậy, từ các câu trả lời cho đến nay ... WebKit là một công cụ kết xuất trình duyệt web HTML / CSS cho Safari / Chrome. Có các công cụ như vậy cho IE / Opera / Firefox không và sự khác biệt, ưu và nhược điểm của việc sử dụng cái này so với cái kia là gì? Tôi có thể sử dụng các tính năng WebKit trong Firefox không?

Câu hỏi cuối cùng ... WebKit có được IE hỗ trợ không?

Cập nhật 2

Tất cả các trình duyệt chính sử dụng các công cụ kết xuất khác nhau. Tôi đoán đây là một lý do lớn tại sao có quá nhiều vấn đề tương thích trình duyệt chéo!

Vì vậy, có một số loại dự án hoặc chuyển sang một công cụ kết xuất tiêu chuẩn mà TẤT CẢ các trình duyệt sẽ sử dụng? HTML5 sẽ chấm dứt các vấn đề tương thích giữa nhiều trình duyệt?

Cập nhật: Rõ ràng, WebKit là công cụ kết xuất trình duyệt web HTML / CSS cho Safari / Chrome. Có các công cụ như vậy cho IE / Opera / Firefox không và sự khác biệt, ưu và nhược điểm của việc sử dụng cái này so với cái kia là gì? Tôi có thể sử dụng các tính năng WebKit trong Firefox không?

Mỗi trình duyệt được hỗ trợ bởi một công cụ kết xuất để vẽ trang web HTML / CSS.

• IE → Cây đinh ba (ngưng)
• Cạnh → EdgeHTML (dọn sạch ngã ba của Trident)(Edge chuyển sang Blink vào năm 2019)
• Firefox → tắc kè
• Opera → Presto(không còn sử dụng Presto kể từ tháng 2 năm 2013, hãy xem xét Opera = Chrome, do đó, Blink ngày nay)
• Safari → WebKit
• Chrome → Blink (một nhánh của Webkit ).

Xem So sánh các công cụ trình duyệt web để biết danh sách so sánh ở các khu vực khác nhau.

Câu hỏi cuối cùng ... là WebKit được IE hỗ trợ?

Không phải nguyên bản.

Ngoài những gì @KennyTM đã nói:

• I E
  • Động cơ: Cây đinh ba
  • Tiền tố CSS: -ms
• Cạnh
  • Động cơ: EdgeHTML → Nhấp nháy ³
  • Tiền tố CSS: -ms
• Firefox
  • Động cơ: tắc kè
  • Tiền tố CSS: -moz
• Opera
  • Động cơ: Presto → Nhấp nháy ¹
  • Tiền tố CSS: -o(Presto) và -webkit(Blink)
• Safari
  • Động cơ: WebKit
  • Tiền tố CSS: -webkit
• Trình duyệt Chrome
  • Công cụ: WebKit → Nhấp nháy ²
  • Tiền tố CSS: -webkit

¹⁾ Vào ngày 12 tháng 2 năm 2013 Opera (phiên bản 15+) thông báo họ chuyển từ Presto engine của chính họ sang WebKit có tên Blink .

²⁾ Vào ngày 3 tháng 4 năm 2013, Google (phiên bản Chrome 28+) thông báo họ sẽ sử dụng công cụ Blink dựa trên WebKit .

³⁾ Vào ngày 6 tháng 12 năm 2018 Microsoft (Microsoft Edge 79+ ổn định) thông báo họ sẽ sử dụng công cụ Blink dựa trên WebKit .

Webkit là một công cụ kết xuất trình duyệt web được Safari và Chrome sử dụng (trong số những công cụ khác, nhưng đây là những công cụ phổ biến).

Các -webkittiền tố trên selectors CSS là tài sản mà chỉ có động cơ này được thiết kế để xử lý, rất giống với -moztài sản. Nhiều người trong chúng ta đang hy vọng điều này biến mất, ví dụ như -webkit-border-radiussẽ được thay thế bởi tiêu chuẩn border-radiusvà bạn sẽ không cần nhiều quy tắc cho cùng một điều cho nhiều trình duyệt. Đây thực sự là kết quả của các tính năng "đặc tả trước" nhằm mục đích không can thiệp vào phiên bản tiêu chuẩn khi nói đến.

Đối với bản cập nhật của bạn: ... không, nó thực sự không liên quan đến IE, IE ít nhất trước 9 sử dụng một công cụ kết xuất khác có tên là Trident .

Điều này đã được trả lời và chấp nhận, nhưng nếu ai đó vẫn đang tự hỏi tại sao mọi thứ hơi rối tung ngày hôm nay, bạn sẽ phải đọc điều này:

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

Nó đưa ra một ý tưởng tốt về cách tắc kè, webkit và các công cụ kết xuất chính khác phát triển và điều gì dẫn đến tình trạng hiện tại của các chuỗi tác nhân người dùng bị rối.

Trích dẫn đoạn cuối cho mục đích TL; DR:

Sau đó, Google đã xây dựng Chrome và Chrome đã sử dụng Webkit và nó giống như Safari và muốn các trang được xây dựng cho Safari và do đó giả vờ là Safari. Và do đó, Chrome đã sử dụng WebKit và giả vờ là Safari và WebKit giả vờ là KHTML và KHTML giả vờ là Gecko và tất cả các trình duyệt giả vờ là Mozilla và Chrome gọi chính nó Mozilla/5.0 (Windows; U; Windows NT 5.1; en-US) AppleWebKit/525.13 (KHTML, like Gecko) Chrome/0.2.149.27 Safari/525.13và chuỗi tác nhân người dùng là một mớ hỗn độn và gần như vô dụng, và mọi người giả vờ là những người khác, và sự nhầm lẫn ngày càng nhiều.

-webkit-chỉ đơn giản là một nhóm mà trình duyệt Chrome, Safari, Opera và iOS phù hợp. Tất cả họ đều có chung một tổ tiên, do đó, thường thì khả năng / giới hạn của họ (khi nói đến việc chạy CSS và Javascript) được giới hạn trong nhóm.

Một nhà phát triển sẽ đặt -webkit-theo sau một số mã, nghĩa là mã sẽ chỉ chạy trên các trình duyệt Chrome, Safari, Opera và iOS. Đây là một danh sách đầy đủ:

-webkit- (Chrome, Safari, các phiên bản Opera mới hơn, hầu hết tất cả các trình duyệt iOS (bao gồm cả Firefox cho iOS); về cơ bản, mọi trình duyệt dựa trên WebKit)

-moz- (Firefox)

-o- (Cũ, tiền WebKit, các phiên bản của Opera)

-ms- (Internet Explorer và Microsoft Edge)

Câu hỏi cuối cùng ... WebKit có được IE hỗ trợ không?

Loại. Thủ tục thanh toán Chrome Frame , đây là một plugin cho Internet Explorer giúp nó sử dụng công cụ Webkit. Điều khó hiểu duy nhất là bạn phải thuyết phục khách truy cập của mình để cài đặt plugin.

Cập nhật

Khung Chrome không còn được duy trì hoặc hỗ trợ

WebKit là một công cụ bố trí được thiết kế để cho phép các trình duyệt web hiển thị các trang web. Công cụ WebKit cung cấp một tập hợp các lớp để hiển thị nội dung web trong windows và thực hiện các tính năng của trình duyệt như các liên kết sau khi người dùng nhấp vào, quản lý danh sách lùi và quản lý lịch sử các trang đã truy cập gần đây.

WebKit ban đầu được tạo ra như một nhánh của KHTML làm công cụ bố trí cho Safari của Apple; nó có thể di chuyển đến nhiều nền tảng điện toán khác. Nó cũng được sử dụng trong Trình duyệt Chrome của Google.

Các thành phần WebCore và JavaScriptCore của WebKit có sẵn theo Giấy phép Công cộng Ít hơn GNU và phần còn lại của WebKit có sẵn theo giấy phép kiểu BSD.

Nguồn Wikipedia

Để biết thêm thông tin về công cụ bố trí, bạn có thể xem tại đây

Webkit là một công cụ kết xuất HTML được Chrome và Safari sử dụng.

Nó hỗ trợ một số thuộc tính CSS tùy chỉnh có tiền tố -webkit-.

Webkit là công cụ kết xuất được sử dụng trong các trình duyệt phổ biến Safari và Chrome, cũng như các trình duyệt khác.

Webkit là công cụ kết xuất html / css được sử dụng trong trình duyệt Safari của Apple và trong Chrome của Chrome. giá trị css tiền tố với -webkit- là dành riêng cho webkit, chúng thường là CSS3 hoặc các tính năng không được chuẩn hóa khác.

để trả lời cập nhật 2 w3c là phần thân cố gắng chuẩn hóa những thứ này, họ viết các quy tắc, sau đó các lập trình viên viết công cụ kết xuất của họ để diễn giải các quy tắc đó. Vì vậy, về cơ bản, w3c nói rằng các DIV nên hoạt động "Cách này", người viết động cơ sau đó sử dụng quy tắc đó để viết mã của họ, bất kỳ lỗi hoặc giải thích sai các quy tắc gây ra các vấn đề tương thích.

Một vấn đề phổ biến mà tôi gặp phải khi làm nhà thiết kế trang web là rất nhiều người sử dụng IE6 +. Không có vấn đề lớn thường, ngoại trừ trong CSS, tôi phải thêm nhiều cú pháp kết xuất 'để phân tích từng yêu cầu, trên mỗi trình duyệt. Sẽ rất tuyệt nếu có một thiết lập kết xuất phổ quát cho CSS mà IE có thể đọc dễ dàng như Chrome / FF / Opera và webkit. Vấn đề với IE là nếu tôi KHÔNG sử dụng TẤT CẢ các kiểu và kết xuất CSS thích hợp, thì các trang web của tôi trông và hoạt động tốt khi sử dụng mọi trình duyệt trừ IE. Điều này có thể làm cho một khách hàng IE không hài lòng, khó tính.

Ví dụ là thế này: Giả sử tôi cần viền 1px, màu xám với bán kính viền là 10%. Đối với Chrome và những người khác, tôi sử dụng thuộc tính webkit. Bây giờ, đối với IE, tôi phải thêm các kiểu CSS riêng biệt bằng cách sử dụng các giá trị CSS cũ đơn giản của "Border: 1px solid # E5E5E5" và "Border-radius: 10%". Một kết quả tích cực không phải lúc nào cũng được đảm bảo trên tất cả các phiên bản trình duyệt IE, nhưng đối với hầu hết các phần, phương pháp này hoạt động tốt với tôi và nhiều người khác.

Mặc dù đây là một bài viết cũ hơn, nhưng cũng có một phương pháp khác để kết xuất cho các phiên bản Internet Explorer cũ hơn. -webkit trong khi là Tiền tố nhà cung cấp CSS, bạn cũng có thể tải xuống một vài ứng dụng JS và đặt chúng ở dưới cùng của ĐẦU TIÊN của HTML.

Hãy thử sử dụng Modernizr, HTML5 Shiv và Respond.js. Đây là các tập lệnh polyfill tương thích IE tuyệt vời sử dụng polyfill và các tài nguyên khác sẽ giúp hiển thị tốt hơn các phần tử HTML5 trong IE9 và Dưới đây.

Để sử dụng các polyfill này, chỉ cần thêm logic boolean HTML để đặt chúng, NẾU trình duyệt ít hơn phiên bản IE mong muốn. Mã ví dụ là:

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

Một tài liệu tốt về WebEnginesđặc biệt webKitvà các nhà phát triển của nó bạn có thể đọc tại: WebKit

Webkit là công cụ kết xuất được sử dụng trong các trình duyệt phổ biến Safari và Chrome, cũng như các trình duyệt khác Mỗi trình duyệt được hỗ trợ bởi một công cụ kết xuất để vẽ trang web HTML / CSS.

IE → Trident (đã ngừng sử dụng) Edge → EdgeHTML (dọn sạch ngã ba của Trident) Firefox → Gecko Opera → Presto (không còn sử dụng Presto kể từ tháng 2 năm 2013, hãy xem xét Opera = Chrome hiện nay) Safari → WebKit Chrome → Blink (một ngã ba của WebKit) .