WebKit nedir ve CSS ile nasıl ilişkilidir?

Son zamanlarda, "webkit" etiketiyle ilgili sorular görüyorum. Bu tür sorular genellikle CSS, jQuery, düzenler, tarayıcılar arası uyumluluk sorunları vb. İle ilgili web tabanlı sorular olma eğilimindedir.

Peki bu "webkit" nedir ve CSS ile ilişkisi nedir? Ayrıca -webkit-...çeşitli web siteleri için kaynak kodunda birçok özellik fark ettim . Bu ikisi birbiriyle ilişkili mi?

Güncelleme

Şimdiye kadar verilen yanıtlardan ... WebKit, Safari / Chrome için bir HTML / CSS web tarayıcısı oluşturma motorudur. IE / Opera / Firefox için böyle motorlar var mı ve birini diğerinin üzerinde kullanmanın farklılıkları, artıları ve eksileri nelerdir? Örneğin Firefox'ta WebKit özelliklerini kullanabilir miyim?

Nihai soru ... WebKit IE tarafından destekleniyor mu?

Güncelleme 2

Tüm büyük tarayıcılar farklı oluşturma motorları kullanır. Sanırım bu kadar çok tarayıcılar arası uyumluluk sorununun büyük bir nedeni var!

Peki, TÜM tarayıcıların kullanacağı standart bir oluşturma motoruna bir tür proje veya hareket var mı? HTML5, tarayıcılar arası uyumluluk sorunlarına bir son verecek mi?

Güncelleme: Görünüşe göre WebKit, Safari / Chrome için bir HTML / CSS web tarayıcısı oluşturma motorudur. IE / Opera / Firefox için böyle motorlar var mı ve birini diğerinin üzerinde kullanmanın farklılıkları, artıları ve eksileri nelerdir? Örneğin Firefox'ta WebKit özelliklerini kullanabilir miyim?

Her tarayıcı HTML / CSS web sayfasını çizmek için bir oluşturma motoru tarafından desteklenir.

• IE → Trident (Durdurulan)
• Kenar → EdgeHTML ( Trident'in temizleme çatalı)( 2019'da Edge Blink olarak değiştirildi )
• Firefox → Gecko
• Opera → Presto(artık Şubat 2013'ten beri Presto kullanmıyor, Opera = Chrome'u düşünün, bu nedenle bugünlerde göz kırpın )
• Safari → WebKit
• Chrome → Blink ( Webkit çatalı ).

Farklı bölgelerdeki karşılaştırmaların listesi için bkz . Web tarayıcısı motorlarının karşılaştırması.

Nihai soru ... WebKit IE tarafından destekleniyor mu?

Doğal olarak değil.

@KennyTM'in söylediklerine ek olarak :

• IE
  • Motor: Trident
  • CSS-öneki: -ms
• kenar
  • Motor: EdgeHTML → Blink ³
  • CSS-öneki: -ms
• Firefox
  • Motor: Gecko
  • CSS-öneki: -moz
• Opera
  • Motor: Presto → Blink ¹
  • CSS öneki: -o(Presto) ve -webkit(Göz kırpma)
• Safari
  • Motor: WebKit
  • CSS-öneki: -webkit
• Krom
  • Motor: WebKit → Blink ²
  • CSS-öneki: -webkit

¹⁾ 12 Şubat 2013'te Opera (sürüm 15+) , kendi motor Presto'larından Blink adlı WebKit'e taşındıklarını açıkladı .

²⁾ 3 Nisan 2013'te Google (Chrome 28+ sürümü) WebKit tabanlı Blink motorunu kullanacaklarını açıkladı .

³⁾ 6 Aralık 2018'de Microsoft (Microsoft Edge 79+ kararlı) WebKit tabanlı Blink motorunu kullanacaklarını açıkladı .

Webkit, Safari ve Chrome tarafından kullanılan bir web tarayıcısı oluşturma motorudur (diğerleri arasında, ancak bunlar popüler olanlardır).

-webkitCSS seçicileri üzerinde önek özellikleridir sadece bu motor çok benzer süreç, amaçlanan -mozözellikleri. Birçoğumuz bunun ortadan -webkit-border-radiuskalkacağını umuyoruz, örneğin standart ile değiştirilecek border-radiusve birden fazla tarayıcı için aynı şey için birden fazla kurala ihtiyacınız olmayacak . Bu gerçekten söz konusu olduğunda standart sürüme müdahale etmemesi amaçlanan "ön şartname" özelliklerinin sonucudur.

Güncellemeniz için: ... hayır gerçekten IE ile ilgili değil, IE en azından 9 önce Trident adlı farklı bir oluşturma motoru kullanıyor .

Bu yanıtlandı ve kabul edildi, ancak birileri bugün neden işler biraz dağınık olduğunu merak ediyorsa, bunu okumak zorundasınız:

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

Gecko, webkit ve diğer büyük oluşturma motorlarının nasıl geliştiği ve dağınık kullanıcı aracısı dizelerinin mevcut durumuna ne yol açtığı hakkında iyi bir fikir verir.

TL için son paragrafın alıntılanması; DR amaçları:

Sonra Google Chrome'u oluşturdu ve Chrome Webkit'i kullandı ve Safari gibiydi ve Safari için oluşturulmuş sayfalar istiyordu ve bu yüzden Safari gibi davrandı. Böylece Chrome WebKit kullandı ve Safari gibi davrandı ve WebKit KHTML gibi davrandı ve KHTML Gecko gibi davrandı ve tüm tarayıcılar Mozilla gibi davrandı ve Chrome kendini çağırdı Mozilla/5.0 (Windows; U; Windows NT 5.1; en-US) AppleWebKit/525.13 (KHTML, like Gecko) Chrome/0.2.149.27 Safari/525.13ve kullanıcı aracısı dizesi tam bir karmaşa oldu ve neredeyse işe yaramazdı ve herkes başka herkesmiş gibi davrandı ve kafa karışıklığı bolca oldu.

-webkit-yalnızca Chrome, Safari, Opera ve iOS tarayıcılarının sığabileceği bir gruptur. Hepsinin ortak bir atası vardır, bu nedenle genellikle yetenekleri / sınırlamaları (CSS ve Javascript çalıştırma söz konusu olduğunda) grupla sınırlıdır.

Bir geliştirici ve -webkit-ardından bir kod yerleştirir, yani kod yalnızca Chrome, Safari, Opera ve iOS tarayıcılarında çalışır. İşte tam bir liste:

-webkit- (Chrome, Safari, Opera'nın daha yeni sürümleri, neredeyse tüm iOS tarayıcıları (iOS için Firefox dahil); temel olarak, herhangi bir WebKit tabanlı tarayıcı)

-moz- (Firefox)

-o- (Eski, WebKit öncesi, Opera sürümleri)

-ms- (Internet Explorer ve Microsoft Edge)

Nihai soru ... WebKit IE tarafından destekleniyor mu?

Türü. Check out Chrome Frame , bunun Webkit motoru kullanmak yapar Internet Explorer için bir eklenti bulunmaktadır. Tek ilginç, ziyaretçilerinizi eklentiyi yüklemeye ikna etmeniz gerektiğidir.

Güncelleme

Chrome Frame artık korunmuyor veya desteklenmiyor…

WebKit, web tarayıcılarının web sayfaları oluşturmasına izin vermek için tasarlanmış bir düzen motorudur. WebKit motoru, web içeriğini pencerelerde görüntülemek için bir dizi sınıf sağlar ve kullanıcı tarafından tıklandığında aşağıdaki bağlantıları izlemek, bir geri ileri listesini yönetmek ve son ziyaret edilen sayfaların geçmişini yönetmek gibi tarayıcı özelliklerini uygular.

WebKit başlangıçta Apple Safari için düzen motoru olarak KHTML'nin bir çatal olarak oluşturuldu; diğer birçok bilgi işlem platformuna taşınabilir. Google'ın Chrome Tarayıcısında da kullanılır.

WebKit'in WebCore ve JavaScriptCore bileşenleri GNU Lesser General Public License altında bulunur ve WebKit'in geri kalanı BSD tarzı bir lisans altında bulunur.

Kaynak Wikipedia

Yerleşim motorları hakkında daha fazla bilgi için buraya

Webkit, Chrome ve Safari tarafından kullanılan bir HTML oluşturma motorudur.

Önde gelen bir dizi özel CSS özelliğini destekler -webkit-.

Webkit, popüler tarayıcılar Safari ve Chrome'da ve diğerlerinde kullanılan oluşturma motorudur.

Webkit, Apple'ın Safari tarayıcısında ve Google'ın Chrome'da kullanılan html / css oluşturma motorudur. -webkit- ile css değerleri önekleri webkit'e özgüdür, genellikle CSS3 veya diğer standart olmayan özelliklerdir.

Güncelleme 2'yi cevaplamak için w3c bu şeyleri standartlaştırmaya çalışan gövdedir, kuralları yazarlar, daha sonra programcılar bu kuralları yorumlamak için oluşturma motorlarını yazarlar. Temel olarak w3c, DIV'lerin "Bu şekilde" çalışması gerektiğini söylüyor, sonra motor yazarı bu kuralı kodlarını yazmak için kullanıyor, kuralların hataları veya yanlış yorumlamaları uyumluluk sorunlarına neden oluyor.

Bir web sitesi tasarımcısı olarak karşılaştığım ortak bir sorun, bir sürü insan IE6 + kullanmaktır. CSS dışında, tarayıcı başına her isteği ayrıştırmak için birden fazla oluşturma sözdizimi eklemek zorundayım. IE'nin Chrome / FF / Opera ve webkit kadar kolay okuyabileceği evrensel bir oluşturma kurulumu olsaydı çok güzel olurdu. IE ile sorun TÜM uygun CSS stilleri ve render kullanmazsanız, benim web siteleri bakmak ve IE dışında her tarayıcıyı kullanarak harika çalışıyor olmasıdır. Bu, mutsuz, zor bir IE müşterisi olabilir.

Örnek olarak şunu söyleyelim: Kenar yarıçapı% 10 olan 1 piksel gri bir kenarlığa ihtiyacım var. Chrome ve diğerleri için webkit özelliğini kullanıyorum. Şimdi, IE için, "border: 1px solid # E5E5E5" ve "border-radius: 10%" gibi basit eski CSS değerlerini kullanarak ayrı CSS stilleri eklemeliyim. Olumlu bir sonuç tüm IE tarayıcı sürümlerinde her zaman garanti edilmez, ancak çoğunlukla bu yöntem benim ve diğerleri için iyi çalışır.

Bu daha eski bir gönderi olsa da, Internet Explorer'ın eski sürümleri için oluşturmanın başka bir yöntemi de vardır. -webkit, bir CSS Satıcı Öneki olurken, birkaç JS uygulamasını da indirebilir ve HTML'nin HEAD'inin altına yerleştirebilirsiniz.

Modernizr, HTML5 Shiv ve Respond.js'yi kullanmayı deneyin. Bunlar, çoklu dolgular kullanan inanılmaz IE uyumlu çoklu dolgu komut dosyaları ve IE9 ve Aşağıda HTML5 öğelerini daha iyi oluşturmaya yardımcı olacak diğer kaynaklardır.

Bu çoklu dolguları kullanmak için, tarayıcı yerleştirmek IE sürümünden daha az ise, bunları yerleştirmek için HTML boole mantığı ekleyin. Örnek kod:

<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Özellikle webKitve geliştiricileri hakkında okuyabileceğiniz iyi bir dokümantasyon : WebKit

Webkit, popüler tarayıcılar Safari ve Chrome'da ve diğerlerinde kullanılan oluşturma motorudur Her tarayıcı, bir HTML / CSS web sayfası çizmek için bir oluşturma motoru tarafından desteklenir.

IE → Trident (üretilmiyor) Edge → EdgeHTML (Trident'in temizleme çatalı) Firefox → Gecko Opera → Presto (artık Şubat 2013'ten beri Presto kullanmıyor, Opera = Chrome'u bugün düşünün) Safari → WebKit Chrome → Göz kırpma (WebKit'in bir çatalı) .