Che cos'è WebKit e in che modo è correlato ai CSS?

Più recentemente, ho visto domande con il tag "webkit". Tali domande di solito tendono ad essere domande basate sul Web relative a CSS, jQuery, layout, problemi di compatibilità tra browser, ecc ...

Cos'è questo "webkit" e come si collega ai CSS? Ho anche notato molte -webkit-...proprietà nel codice sorgente per vari siti Web. Questi due sono correlati?

Aggiornare

Quindi dalle risposte finora ... WebKit è un motore di rendering per browser Web HTML / CSS per Safari / Chrome. Esistono tali motori per IE / Opera / Firefox e quali sono le differenze, i vantaggi e gli svantaggi dell'utilizzo l'uno rispetto all'altro? Posso usare le funzionalità di WebKit in Firefox per esempio?

L'ultima domanda ... WebKit è supportato da IE?

Aggiornamento 2

Tutti i principali browser utilizzano motori di rendering diversi. Immagino che questo sia un grande motivo per cui ci sono così tanti problemi di compatibilità tra browser!

Quindi, esiste un qualche tipo di progetto o movimento verso un motore di rendering standard che TUTTI i browser useranno? HTML5 metterà fine ai problemi di compatibilità tra browser?

Aggiornamento: Apparentemente, WebKit è un motore di rendering per browser Web HTML / CSS per Safari / Chrome. Esistono tali motori per IE / Opera / Firefox e quali sono le differenze, i vantaggi e gli svantaggi dell'utilizzo l'uno rispetto all'altro? Posso usare le funzionalità di WebKit in Firefox per esempio?

Ogni browser è supportato da un motore di rendering per disegnare la pagina Web HTML / CSS.

• IE → Tridente (Fuori produzione)
• Bordo → EdgeHTML (fork di pulizia di Trident)(Edge è passato a Blink nel 2019)
• Firefox → Gecko
• Opera → Presto(non utilizza più Presto da febbraio 2013, considera Opera = Chrome, quindi Blink al giorno d'oggi)
• Safari → WebKit
• Chrome → Blink (un fork di Webkit ).

Vedere Confronto dei motori di browser Web per un elenco di confronti in diverse aree.

L'ultima domanda ... WebKit è supportato da IE?

Non nativamente.

Aggiunta a ciò che ha detto @KennyTM :

• IE
  • Motore: Tridente
  • CSS-prefix: -ms
• Bordo
  • Motore: EdgeHTML → Blink ³
  • CSS-prefix: -ms
• Firefox
  • Motore: Gecko
  • CSS-prefix: -moz
• musica lirica
  • Motore: Presto → Blink ¹
  • Prefisso CSS: -o(Presto) e -webkit(Blink)
• Safari
  • Motore: WebKit
  • CSS-prefix: -webkit
• Cromo
  • Motore: WebKit → Blink ²
  • CSS-prefix: -webkit

¹⁾ Il 12 febbraio 2013 Opera (versione 15+) annuncia che si stanno allontanando dal proprio motore Presto per WebKit chiamato Blink .

²⁾ Il 3 aprile 2013 Google (versione Chrome 28+) annuncia che utilizzerà il motore Blink basato su WebKit .

³⁾ Il 6 dicembre 2018 Microsoft (Microsoft Edge 79+ stabile) annuncia che utilizzerà il motore Blink basato su WebKit .

Webkit è un motore di rendering del browser Web utilizzato da Safari e Chrome (tra gli altri, ma questi sono quelli più popolari).

Il -webkitprefisso sui selettori CSS sono proprietà che solo questo motore è destinato a elaborare, molto simili alle -mozproprietà. Molti di noi sperano che questo scompaia, ad esempio -webkit-border-radiusverrà sostituito dallo standard border-radiuse non saranno necessarie più regole per la stessa cosa per più browser. Questo è davvero il risultato di funzionalità di "pre-specifica" che non intendono interferire con la versione standard quando si verifica.

Per il tuo aggiornamento: ... no, non è realmente correlato a IE, IE almeno prima di 9 utilizza un motore di rendering diverso chiamato Trident .

Questo è stato risposto e accettato, ma se qualcuno si sta ancora chiedendo perché oggi le cose sono un po 'incasinate, dovrai leggere questo:

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

Fornisce una buona idea di come si sono evoluti gecko, webkit e altri importanti motori di rendering e cosa ha portato allo stato attuale delle stringhe di user-agent incasinate.

Citando l'ultimo paragrafo per scopi TL; DR:

E poi Google ha creato Chrome e Chrome ha utilizzato Webkit, ed era come Safari, voleva pagine create per Safari, e quindi faceva finta di essere Safari. E così Chrome ha usato WebKit e ha fatto finta di essere Safari, e WebKit ha fatto finta di essere KHTML, e KHTML ha fatto finta di essere Gecko, e tutti i browser hanno fatto finta di essere Mozilla, e Chrome si è autodefinito 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, e la stringa dell'agente utente era un casino completo, e quasi inutile, e tutti fingevano di essere tutti gli altri, e la confusione abbondava.

-webkit-è semplicemente un gruppo in cui si inseriscono i browser Chrome, Safari, Opera e iOS. Tutti hanno un antenato comune, quindi spesso le loro capacità / limitazioni (quando si tratta di eseguire CSS e Javascript) sono limitate al gruppo.

Uno sviluppatore posizionerà -webkit-seguito da un codice, il che significa che il codice verrà eseguito solo su browser Chrome, Safari, Opera e iOS. Ecco un elenco completo:

-webkit- (Chrome, Safari, versioni più recenti di Opera, quasi tutti i browser iOS (incluso Firefox per iOS); in pratica, qualsiasi browser basato su WebKit)

-moz- (Firefox)

-o- (Vecchio, pre-WebKit, versioni di Opera)

-ms- (Internet Explorer e Microsoft Edge)

L'ultima domanda ... WebKit è supportato da IE?

Tipo. Dai un'occhiata a Chrome Frame , è un plug-in per Internet Explorer che lo utilizza con il motore Webkit. L'unica stranezza è che devi convincere i tuoi visitatori ad installare il plugin.

Aggiornare

Chrome Frame non è più gestito o supportato ...

WebKit è un motore di layout progettato per consentire ai browser Web di eseguire il rendering di pagine Web. Il motore WebKit fornisce una serie di classi per visualizzare il contenuto Web in Windows e implementa le funzionalità del browser come i seguenti collegamenti quando l'utente fa clic, gestisce un elenco di back-forward e gestisce una cronologia delle pagine visitate di recente.

WebKit è stato originariamente creato come fork di KHTML come motore di layout per Safari di Apple; è portatile per molte altre piattaforme di elaborazione. Viene utilizzato anche nel browser Chrome di Google.

I componenti WebCore e JavaScriptCore di WebKit sono disponibili con licenza GNU Lesser General Public License, mentre il resto di WebKit è disponibile con licenza in stile BSD.

Fonte Wikipedia

Per ulteriori informazioni sui motori di layout puoi consultare qui

Webkit è un motore di rendering HTML utilizzato da Chrome e Safari.

Supporta una serie di proprietà CSS personalizzate con prefisso -webkit-.

Webkit è il motore di rendering utilizzato nei browser più diffusi Safari e Chrome, oltre che in altri.

Webkit è il motore di rendering html / css utilizzato nel browser Safari di Apple e in Google Chrome. I prefissi dei valori CSS con -webkit- sono specifici di webkit, di solito sono CSS3 o altre funzionalità non standardizzate.

per rispondere all'aggiornamento 2 w3c è il corpo che cerca di standardizzare queste cose, scrivono le regole, quindi i programmatori scrivono il loro motore di rendering per interpretarle. Quindi sostanzialmente w3c afferma che i DIV dovrebbero funzionare "In questo modo" il motore-autore quindi utilizza quella regola per scrivere il proprio codice, eventuali bug o interpretazioni errate delle regole causano problemi di compatibilità.

Un problema comune che ho riscontrato come designer di siti Web è che molte persone usano IE6 +. Di solito non è un grosso problema, tranne che nei CSS devo aggiungere più sintassi di rendering per analizzare ogni richiesta, per browser. Sarebbe molto bello se ci fosse una configurazione di rendering universale per CSS che IE può leggere facilmente come Chrome / FF / Opera e webkit. Il problema con IE è che se NON uso TUTTI gli stili CSS e il rendering corretti, i miei siti Web sembrano e funzionano benissimo utilizzando tutti i browser tranne IE. Questo può rendere un cliente IE infelice e irriducibile.

L'esempio è questo: diciamo che ho bisogno di un bordo grigio 1px con un raggio del bordo del 10%. Per Chrome e altri, utilizzo la proprietà webkit. Ora, per IE, devo aggiungere stili CSS separati usando i semplici vecchi valori CSS di "border: 1px solid # E5E5E5" e "border-radius: 10%". Un risultato positivo non è sempre garantito su tutte le versioni del browser IE, ma per la maggior parte questo metodo funziona bene per me e molti altri.

Anche se si tratta di un post precedente, esiste anche un altro metodo di rendering per le versioni precedenti di Internet Explorer. -webkit pur essendo un prefisso fornitore CSS, puoi anche scaricare alcune applicazioni JS e posizionarle nella parte inferiore di HEAD dell'HTML.

Prova a utilizzare Modernizr, HTML5 Shiv e Respond.js. Questi sono fantastici script di polyfill compatibili con IE che usano i polyfill e altre risorse che aiuteranno a rendere meglio gli elementi HTML5 in IE9 e in basso.

Per utilizzare questi polyfill, aggiungi semplicemente la logica booleana HTML per posizionarli, SE il browser è inferiore alla versione desiderata di IE. Il codice di esempio è:

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

Una buona documentazione su WebEnginesspecialmente webKite sui suoi sviluppatori è possibile leggere su: WebKit

Webkit è il motore di rendering utilizzato nei popolari browser Safari e Chrome, oltre ad altri. Ogni browser è supportato da un motore di rendering per disegnare la pagina Web HTML / CSS.

IE → Trident (fuori produzione) Edge → EdgeHTML (clean-up fork di Trident) Firefox → Gecko Opera → Presto (non utilizza più Presto da febbraio 2013, considera Opera = Chrome al giorno d'oggi) Safari → WebKit Chrome → Blink (un fork di WebKit) .