WebKit คืออะไรและเกี่ยวข้องกับ CSS อย่างไร

เมื่อเร็ว ๆ นี้ฉันได้เห็นคำถามด้วยแท็ก "webkit" คำถามดังกล่าวมักจะเป็นคำถามทางเว็บที่เกี่ยวข้องกับ CSS, jQuery, เลย์เอาต์, ปัญหาความเข้ากันได้ของเบราว์เซอร์ข้าม ฯลฯ

ดังนั้น "webkit" นี้คืออะไรและเกี่ยวข้องกับ CSS อย่างไร ฉันได้สังเกตเห็น-webkit-...คุณสมบัติมากมายในซอร์สโค้ดสำหรับเว็บไซต์ต่างๆ ทั้งสองเกี่ยวข้องกันไหม?

ปรับปรุง

ดังนั้นจากคำตอบจนถึงตอนนี้ ... WebKit เป็นเครื่องมือแสดงผลเว็บเบราว์เซอร์ HTML / CSS สำหรับ Safari / Chrome มีเอ็นจิ้นดังกล่าวสำหรับ IE / Opera / Firefox และอะไรคือความแตกต่างข้อดีและข้อเสียของการใช้อันใดอันหนึ่ง? ฉันสามารถใช้คุณสมบัติ WebKit ใน Firefox ได้หรือไม่

คำถามสุดท้าย ... IE รองรับ WebKit หรือไม่

อัปเดต 2

เบราว์เซอร์หลักทั้งหมดใช้เอนจิ้นการแสดงผลที่แตกต่างกัน ฉันเดาว่านี่เป็นเหตุผลใหญ่ว่าทำไมมีปัญหาความเข้ากันได้ข้ามเบราว์เซอร์มากมาย!

ดังนั้นมีโปรเจ็กต์หรือการเคลื่อนไหวบางอย่างกับเอนจิ้นการแสดงผลมาตรฐานที่เบราว์เซอร์ทั้งหมดจะใช้หรือไม่? HTML5 จะจบลงด้วยปัญหาความเข้ากันได้ข้ามเบราว์เซอร์หรือไม่?

อัปเดต: เห็นได้ชัดว่า WebKit เป็นเครื่องมือแสดงผลเว็บเบราว์เซอร์ HTML / CSS สำหรับ Safari / Chrome มีเอ็นจิ้นดังกล่าวสำหรับ IE / Opera / Firefox และอะไรคือความแตกต่างข้อดีและข้อเสียของการใช้อันใดอันหนึ่ง? ฉันสามารถใช้คุณสมบัติ WebKit ใน Firefox ได้หรือไม่

เบราว์เซอร์ทุกตัวได้รับการสนับสนุนโดยเอ็นจิ้นการแสดงผลเพื่อวาดหน้าเว็บ HTML / CSS

• IE → ตรีศูล (หยุด)
• Edge → EdgeHTML (การล้างของตรีศูล)(Edge เปลี่ยนเป็นกะพริบในปี 2019)
• Firefox → Gecko
• Opera → Presto(ไม่ใช้ Presto อีกต่อไปตั้งแต่เดือนกุมภาพันธ์ 2013 ลองใช้ Opera = Chrome ดังนั้นจึงกะพริบในปัจจุบัน)
• Safari → WebKit
• Chrome → Blink (ส้อมของWebkit )

ดูการเปรียบเทียบเอนจิ้นเว็บเบราว์เซอร์สำหรับรายการการเปรียบเทียบในด้านต่างๆ

คำถามสุดท้าย ... WebKit รองรับ IE หรือเปล่า

ไม่ได้โดยกำเนิด

นอกจากสิ่งที่@KennyTMพูดไว้:

• IE
  • เครื่องยนต์: ตรีศูล
  • CSS คำนำหน้า: -ms
• ขอบ
  • เอ็นจิ้น : EdgeHTML → Blink ³
  • CSS คำนำหน้า: -ms
• Firefox
  • เครื่องยนต์: ตุ๊กแก
  • CSS คำนำหน้า: -moz
• อุปรากร
  • เครื่องยนต์: Presto → Blink ¹
  • CSS-prefix: -o(Presto) และ-webkit(กะพริบ)
• การแข่งรถวิบาก
  • เอ็นจิน: WebKit
  • CSS คำนำหน้า: -webkit
• โครเมียม
  • Engine: WebKit → Blink ²
  • CSS คำนำหน้า: -webkit

¹⁾เมื่อวันที่ 12 กุมภาพันธ์ 2013 โอเปร่า (เวอร์ชั่น 15+) ประกาศว่าพวกเขาจะย้ายออกไปจากเครื่องยนต์ของตัวเองที่จะ Presto WebKit ชื่อกะพริบตา

²⁾ในวันที่ 3 เมษายน 2013 Google (รุ่น Chrome 28+) ประกาศว่าพวกเขากำลังจะใช้โปรแกรมBlink ที่ใช้ WebKit

³⁾ในวันที่ 6 ธันวาคม 2018 Microsoft (Microsoft Edge 79+ มีเสถียรภาพ) ประกาศว่าพวกเขากำลังจะใช้โปรแกรมBlink ที่ใช้ WebKit

Webkit เป็นเครื่องมือแสดงผลเว็บเบราว์เซอร์ที่ใช้โดย Safari และ Chrome (รวมถึงเครื่องมืออื่น ๆ แต่เป็นที่นิยม)

-webkitคำนำหน้าในตัวเลือก CSS เป็นทรัพย์สินที่เพียงเครื่องมือนี้มีวัตถุประสงค์เพื่อกระบวนการคล้ายกับ-mozคุณสมบัติ พวกเราหลายคนหวังว่าสิ่งนี้จะหายไปตัวอย่างเช่น-webkit-border-radiusจะถูกแทนที่ด้วยมาตรฐานborder-radiusและคุณไม่จำเป็นต้องมีกฎหลายข้อสำหรับสิ่งเดียวกันสำหรับเบราว์เซอร์หลายตัว นี่เป็นผลของคุณสมบัติ "คุณสมบัติก่อนกำหนด" ที่มีวัตถุประสงค์เพื่อไม่รบกวนรุ่นมาตรฐานเมื่อมีการใช้งาน

สำหรับการปรับปรุงของคุณ: ... ไม่มันไม่ได้เกี่ยวข้องกับ IE จริงๆ IE อย่างน้อยก่อน 9 การใช้เครื่องมือการแสดงผลที่แตกต่างกันเรียกว่าตรีศูล

สิ่งนี้ได้รับคำตอบและได้รับการยอมรับ แต่ถ้ามีคนยังสงสัยว่าทำไมสิ่งต่าง ๆ เกิดความสับสนขึ้นในวันนี้คุณจะต้องอ่านสิ่งนี้:

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

มันให้ความคิดที่ดีว่าตุ๊กแกเว็บคิตและเครื่องมือเรนเดอร์หลักอื่น ๆ มีวิวัฒนาการอย่างไร

การอ้างถึงย่อหน้าสุดท้ายสำหรับวัตถุประสงค์ TL; DR:

จากนั้น Google ก็สร้าง Chrome และ Chrome ใช้ Webkit และมันก็เหมือนกับ Safari และต้องการหน้าเว็บที่สร้างขึ้นสำหรับ Safari และแสร้งทำเป็นเป็น Safari ดังนั้น Chrome จึงใช้ WebKit และแกล้งทำเป็น Safari และ WebKit แกล้งเป็น KHTML และ KHTML แกล้งทำเป็นตุ๊กแกและเบราว์เซอร์ทั้งหมดที่แกล้งทำเป็น 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 สำหรับ iOS) โดยทั่วไปแล้วเบราว์เซอร์ที่ใช้ WebKit ใด ๆ )

-moz- (Firefox)

-o- (เวอร์ชั่นเก่า pre-WebKit เวอร์ชันของ Opera)

-ms- (Internet Explorer และ Microsoft Edge)

คำถามสุดท้าย ... IE รองรับ WebKit หรือไม่

ชนิดของ ลองใช้Chrome Frameซึ่งเป็นปลั๊กอินสำหรับ Internet Explorer ที่ใช้เครื่องมือ Webkit สิ่งที่แปลกประหลาดอย่างเดียวคือคุณต้องโน้มน้าวให้ผู้เยี่ยมชมติดตั้งปลั๊กอิน

ปรับปรุง

Chrome Frame ไม่ได้รับการบำรุงรักษาหรือสนับสนุนอีกต่อไป ...

WebKit เป็นเอ็นจิ้นโครงร่างที่ออกแบบมาเพื่ออนุญาตให้เว็บเบราว์เซอร์แสดงผลหน้าเว็บ เอ็นจิ้น WebKit จัดเตรียมชุดคลาสเพื่อแสดงเนื้อหาเว็บใน windows และใช้คุณลักษณะของเบราว์เซอร์เช่นลิงก์ต่อไปนี้เมื่อคลิกโดยผู้ใช้การจัดการรายการย้อนหลังและการจัดการประวัติหน้าเว็บที่เพิ่งเยี่ยมชม

WebKit ถูกสร้างขึ้นเป็นทางแยกของ KHTML เป็นเอ็นจิ้นเค้าโครงสำหรับ Safari ของ Apple มันเป็นแบบพกพาไปยังแพลตฟอร์มคอมพิวเตอร์อื่น ๆ อีกมากมาย มันยังใช้ใน Chrome Browser ของ Google

องค์ประกอบ WebCore และ JavaScriptCore ของ WebKit นั้นมีอยู่ภายใต้สัญญาอนุญาตสาธารณะทั่วไปของ Lesser GNU และ WebKit ส่วนที่เหลือจะอยู่ภายใต้ใบอนุญาตแบบ BSD

แหล่งWikipedia

สำหรับข้อมูลเพิ่มเติมเกี่ยวกับเค้าโครงเอ็นจิ้นคุณสามารถดูได้ที่นี่

Webkit เป็นเครื่องมือการแสดงผล HTML ที่ใช้โดย Chrome และ Safari

มันสนับสนุนจำนวนของคุณสมบัติ CSS -webkit-ที่กำหนดเองที่นำหน้าด้วย

Webkit เป็นเครื่องมือเรนเดอร์ที่ใช้ในเบราว์เซอร์ยอดนิยม Safari และ Chrome รวมถึงอื่น ๆ

Webkit เป็นเครื่องมือการแสดงผล html / css ที่ใช้ในเบราว์เซอร์ Safari ของ Apple และใน Chrome ของ Google คำนำหน้าค่า css ด้วย -webkit- เป็น webkit-specific พวกเขามักจะเป็น CSS3 หรือคุณสมบัติที่ไม่ได้มาตรฐานอื่น ๆ

เพื่อตอบรับการอัพเดต 2 w3c เป็นเนื้อความที่พยายามสร้างมาตรฐานเหล่านี้พวกเขาเขียนกฎจากนั้นโปรแกรมเมอร์เขียนกลไกการเรนเดอร์เพื่อตีความกฎเหล่านั้น ดังนั้นโดยทั่วไปแล้ว w3c กล่าวว่า DIV ควรทำงาน "ด้วยวิธีนี้" จากนั้นผู้เขียนโปรแกรมจะใช้กฎนั้นเพื่อเขียนรหัสข้อบกพร่องหรือการตีความผิด ๆ ของกฎทำให้เกิดปัญหาความเข้ากันได้

ปัญหาทั่วไปที่ฉันพบในฐานะผู้ออกแบบเว็บไซต์คือมีคนจำนวนมากใช้ IE6 + ไม่มีเรื่องใหญ่ยกเว้นใน CSS ฉันต้องเพิ่มไวยากรณ์การแสดงผลหลายรายการเพื่อแยกแต่ละคำขอต่อเบราว์เซอร์ มันจะดีมากถ้ามีการตั้งค่าการแสดงผลสากลสำหรับ CSS ที่ IE สามารถอ่านได้อย่างง่ายดายเหมือน Chrome / FF / Opera และ webkit ปัญหากับ IE คือถ้าฉันไม่ได้ใช้สไตล์ CSS และการแสดงผลที่เหมาะสมทั้งหมดกว่าเว็บไซต์ของฉันดูและทำงานได้ดีโดยใช้เบราว์เซอร์ทุกตัวยกเว้น IE สิ่งนี้สามารถทำให้ลูกค้า IE ที่ไม่มีความสุขและตายยาก

ตัวอย่างคือสิ่งนี้: ให้เราบอกว่าฉันต้องการ 1px, ขอบสีเทาที่มีรัศมีเส้นขอบ 10% สำหรับ Chrome และอื่น ๆ ฉันใช้คุณสมบัติ webkit ตอนนี้สำหรับ IE ฉันต้องเพิ่มสไตล์ CSS แยกต่างหากโดยใช้ค่า CSS แบบเก่าของ "border: 1px solid # E5E5E5" และ "border-radius: 10%" ผลลัพธ์ที่เป็นบวกนั้นไม่ได้รับประกันตลอดทุกเวอร์ชั่นของเบราว์เซอร์ IE แต่ส่วนใหญ่วิธีนี้ใช้ได้ดีสำหรับฉันและคนอื่น ๆ

แม้ว่านี่จะเป็นการโพสต์ที่เก่ากว่า แต่ก็มีวิธีอื่นในการแสดงผลสำหรับ Internet Explorer รุ่นเก่า -webkit ในขณะที่เป็นคำนำหน้าผู้ขาย CSS คุณยังสามารถดาวน์โหลดแอปพลิเคชัน JS และวางไว้ที่ด้านล่างของส่วนหัวของ HTML

ลองใช้ Modernizr, HTML5 Shiv และ Respond.js เหล่านี้เป็นสคริปต์ polyfill ที่เข้ากันได้กับ IE ที่น่าอัศจรรย์ที่ใช้ polyfills และทรัพยากรอื่น ๆ ซึ่งจะช่วยให้แสดงองค์ประกอบ HTML5 ได้ดีขึ้นใน IE9 และด้านล่าง

ในการใช้โพลีฟิลล์เหล่านี้เพียงเพิ่มตรรกะบูลีน HTML เพื่อวางเบราว์เซอร์หากเบราว์เซอร์น้อยกว่ารุ่น IE ที่ต้องการ รหัสตัวอย่างคือ:

<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

IE →ตรีศูล (เลิกใช้แล้ว) Edge → EdgeHTML (การล้างของตรีศูล) Firefox → Gecko Opera → Presto (ไม่ใช้ Presto ตั้งแต่กุมภาพันธ์ 2013, พิจารณา Opera = Chrome ทุกวันนี้) Safari → WebKit Chrome → Blink (ส้อม WebKit) .