¿Qué es WebKit y cómo se relaciona con CSS?

Más recientemente, he estado viendo preguntas con la etiqueta "webkit". Dichas preguntas suelen ser preguntas basadas en la web relacionadas con CSS, jQuery, diseños, problemas de compatibilidad entre navegadores, etc.

Entonces, ¿qué es este "webkit" y cómo se relaciona con CSS? También he notado muchas -webkit-...propiedades en el código fuente de varios sitios web. ¿Están estos dos relacionados?

Actualizar

Entonces, a partir de las respuestas hasta ahora ... WebKit es un motor de representación de navegador web HTML / CSS para Safari / Chrome. ¿Existen tales motores para IE / Opera / Firefox y cuáles son las diferencias, pros y contras de usar uno sobre el otro? ¿Puedo usar las características de WebKit en Firefox, por ejemplo?

La última pregunta ... ¿WebKit es compatible con IE?

Actualización 2

Todos los principales navegadores utilizan diferentes motores de representación. ¡Creo que esta es una gran razón por la que hay tantos problemas de compatibilidad entre navegadores!

Entonces, ¿hay algún tipo de proyecto o movimiento para un motor de renderizado estándar que TODOS los navegadores usarán? ¿HTML5 pondrá fin a los problemas de compatibilidad entre navegadores?

Actualización: aparentemente, WebKit es un motor de representación de navegador web HTML / CSS para Safari / Chrome. ¿Existen tales motores para IE / Opera / Firefox y cuáles son las diferencias, pros y contras de usar uno sobre el otro? ¿Puedo usar las características de WebKit en Firefox, por ejemplo?

Cada navegador está respaldado por un motor de renderizado para dibujar la página web HTML / CSS.

• IE → Tridente (interrumpido)
• Borde → EdgeHTML (bifurcación de limpieza de Trident)(Edge cambió a Blink en 2019)
• Firefox → Gecko
• Opera → Presto(ya no usa Presto desde febrero de 2013, considere Opera = Chrome, por lo tanto, Blink hoy en día)
• Safari → WebKit
• Chrome → Blink (un tenedor de Webkit ).

Consulte Comparación de motores de navegador web para obtener una lista de comparaciones en diferentes áreas.

La última pregunta ... ¿WebKit es compatible con IE?

No de forma nativa.

Además de lo que dijo @KennyTM :

• ES DECIR
  • Motor: tridente
  • Prefijo CSS: -ms
• Borde
  • Motor: EdgeHTML → Blink ³
  • Prefijo CSS: -ms
• Firefox
  • Motor: Gecko
  • Prefijo CSS: -moz
• Ópera
  • Motor: Presto → Parpadeo ¹
  • Prefijo CSS: -o(Presto) y -webkit(Blink)
• Safari
  • Motor: WebKit
  • Prefijo CSS: -webkit
• Cromo
  • Motor: WebKit → Parpadeo ²
  • Prefijo CSS: -webkit

¹⁾ El 12 de febrero de 2013, Opera (versión 15+) anuncia que se mudaron de su propio motor Presto a WebKit llamado Blink .

²⁾ El 3 de abril de 2013, Google (Chrome versión 28+) anuncia que utilizará el motor Blink basado en WebKit .

³⁾ El 6 de diciembre de 2018, Microsoft (Microsoft Edge 79+ estable) anuncia que usarán el motor Blink basado en WebKit .

Webkit es un motor de representación del navegador web utilizado por Safari y Chrome (entre otros, pero estos son los más populares).

El -webkitprefijo en los selectores CSS son propiedades que solo este motor está destinado a procesar, muy similares a las -mozpropiedades. Muchos de nosotros esperamos que esto desaparezca, por ejemplo -webkit-border-radius, será reemplazado por el estándar border-radiusy no necesitará múltiples reglas para lo mismo para múltiples navegadores. Este es realmente el resultado de las características de "preespecificación" que están destinadas a no interferir con la versión estándar cuando se produce.

Para su actualización: ... no, no está realmente relacionado con IE, IE al menos antes de las 9 usa un motor de renderizado diferente llamado Trident .

Esto ha sido respondido y aceptado, pero si alguien todavía se pregunta por qué las cosas están un poco desordenadas hoy, tendrá que leer esto:

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

Da una buena idea de cómo evolucionaron gecko, webkit y otros motores de renderizado importantes y qué condujo al estado actual de cadenas de agente de usuario en mal estado.

Citando el último párrafo para TL; DR propósitos:

Y luego Google construyó Chrome, y Chrome usó Webkit, y era como Safari, y quería páginas creadas para Safari, y fingió ser Safari. Y así, Chrome usó WebKit, y fingió ser Safari, y WebKit fingió ser KHTML, y KHTML fingió ser Gecko, y todos los navegadores fingieron ser Mozilla, y Chrome se llamó a sí mismo 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, y la cadena del agente de usuario era un completo desastre, y casi inútil, y todos fingieron ser todos los demás, y la confusión abundaba.

-webkit-es simplemente un grupo en el que caben los navegadores Chrome, Safari, Opera e iOS. Todos tienen un antepasado común, por lo que a menudo sus capacidades / limitaciones (cuando se trata de ejecutar CSS y Javascript) se limitan al grupo.

Un desarrollador colocará -webkit-seguido de algún código, lo que significa que el código solo se ejecutará en los navegadores Chrome, Safari, Opera e iOS. Aquí hay una lista completa:

-webkit- (Chrome, Safari, versiones más recientes de Opera, casi todos los navegadores iOS (incluido Firefox para iOS); básicamente, cualquier navegador basado en WebKit)

-moz- (Firefox)

-o- (Antiguo, pre-WebKit, versiones de Opera)

-ms- (Internet Explorer y Microsoft Edge)

La última pregunta ... ¿WebKit es compatible con IE?

Mas o menos. Echa un vistazo a Chrome Frame , es un complemento para Internet Explorer que hace que use el motor de Webkit. La única peculiaridad es que tienes que persuadir a tus visitantes para que instalen el complemento.

Actualizar

Chrome Frame ya no se mantiene ni se admite ...

WebKit es un motor de diseño diseñado para permitir que los navegadores web muestren páginas web. El motor de WebKit proporciona un conjunto de clases para mostrar contenido web en Windows e implementa funciones del navegador, como los siguientes enlaces cuando el usuario hace clic en ellas, administra una lista de retroceso y administra un historial de páginas visitadas recientemente.

WebKit se creó originalmente como una bifurcación de KHTML como motor de diseño para Safari de Apple; Es portátil a muchas otras plataformas informáticas. También se usa en el navegador Chrome de Google.

Los componentes WebCore y JavaScriptCore de WebKit están disponibles bajo la Licencia pública general menor de GNU, y el resto de WebKit está disponible bajo una licencia de estilo BSD.

Fuente Wikipedia

Para obtener más información sobre los motores de diseño, puede consultar aquí

Webkit es un motor de renderizado HTML utilizado por Chrome y Safari.

Admite una serie de propiedades CSS personalizadas con el prefijo -webkit-.

Webkit es el motor de renderizado utilizado en los populares navegadores Safari y Chrome, así como en otros.

Webkit es el motor de renderizado html / css utilizado en el navegador Safari de Apple y en Chrome de Google. Los prefijos de valores css con -webkit- son específicos de webkit, generalmente son CSS3 u otras características no estandarizadas.

para responder a la actualización 2 w3c es el cuerpo que intenta estandarizar estas cosas, escriben las reglas, luego los programadores escriben su motor de renderizado para interpretar esas reglas. Básicamente, w3c dice que los DIV deberían funcionar "De esta manera", el escritor del motor luego usa esa regla para escribir su código, cualquier error o mala interpretación de las reglas causa problemas de compatibilidad.

Un problema común con el que me he encontrado como diseñador de sitios web es que muchas personas usan IE6 +. Por lo general, no es gran cosa, excepto en CSS que tengo que agregar múltiples sintaxis de representación 'para analizar cada solicitud, por navegador. Sería muy bueno si hubiera una configuración de representación universal para CSS que IE pueda leer tan fácilmente como Chrome / FF / Opera y webkit. El problema con IE es que si NO uso TODOS los estilos y renderizados CSS adecuados, mis sitios web se ven y funcionan muy bien con todos los navegadores, excepto IE. Esto puede convertirse en un cliente IE infeliz y acérrimo.

El ejemplo es este: Digamos que necesito un borde gris de 1 px con un radio de borde del 10%. Para Chrome y otros, utilizo la propiedad webkit. Ahora, para IE, tengo que agregar estilos CSS separados usando los viejos valores CSS simples de "border: 1px solid # E5E5E5" y "border-radius: 10%". No siempre se garantiza un resultado positivo en todas las versiones del navegador IE, pero en su mayor parte este método funciona bien para mí y para muchos otros.

Aunque esta es una publicación anterior, también existe otro método para procesar versiones anteriores de Internet Explorer. -webkit siendo un Prefijo de Proveedor CSS, también puede descargar algunas aplicaciones JS y colocarlas en la parte inferior del HEAD del HTML.

Intente usar Modernizr, HTML5 Shiv y Respond.js. Estos son increíbles scripts de polyfill compatibles con IE que usan polyfills y otros recursos que ayudarán a representar mejor los elementos HTML5 en IE9 y a continuación.

Para usar estos polyfills, simplemente agregue lógica booleana HTML para colocarlos, SI el navegador es inferior a la versión IE deseada. El código de ejemplo es:

<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 buena documentación sobre WebEnginesespecialmente webKity sus desarrolladores puede leer en: WebKit

Webkit es el motor de renderizado utilizado en los populares navegadores Safari y Chrome, así como en otros. Cada navegador está respaldado por un motor de renderizado para dibujar la página web HTML / CSS.

IE → Trident (descontinuado) Edge → EdgeHTML (bifurcación de limpieza de Trident) Firefox → Gecko Opera → Presto (ya no usa Presto desde febrero de 2013, considere Opera = Chrome hoy en día) Safari → WebKit Chrome → Blink (una bifurcación de WebKit) .