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

Más recientemente, he estado viendo preguntas con la etiqueta “webkit“. Tales preguntas generalmente tienden a ser preguntas basadas en la web relacionadas con CSS, jQuery, diseños, problemas de compatibilidad con navegadores cruzados, etc.

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

Actualizar

Entonces, de las respuestas hasta ahora … WebKit es un motor de renderizado de navegador web HTML / CSS para Safari / Chrome. ¿Hay motores para IE / Opera / Firefox y cuáles son las diferencias, los pros y los contras de usar uno sobre el otro? ¿Puedo usar las funciones de WebKit en Firefox, por ejemplo?

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

Actualización 2

Todos los principales navegadores usan diferentes motores de renderizado. ¡Supongo 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 en un motor de renderizado estándar que TODOS los navegadores usen? ¿Acabará HTML5 con los problemas de compatibilidad entre navegadores?

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

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

  • IE → Tridente (interrumpido)
  • Edge → EdgeHTML (limpieza de la horquilla de Trident)
  • Firefox → Gecko
  • Ópera → Prest (ya no usa Prest desde febrero de 2013, considere Opera = Chrome hoy en día)
  • Safari → WebKit
  • Chrome → Blink (un tenedor de WebKit).

Consulte Comparación de motores de navegadores 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
    • Prefijo CSS: -ms
  • Firefox
    • Motor: Gecko
    • Prefijo CSS: -moz
  • Ópera
    • Motor: Prest → Parpadeo 1
    • Prefijo CSS: -o (Prest) y -webkit (Parpadeo)
  • Safari
    • Motor: WebKit
    • Prefijo CSS: -webkit
  • Cromo
    • Motor: WebKit → Parpadeo 2
    • Prefijo CSS: -webkit

1) El 12 de febrero de 2013, Opera (versión 15+) anuncia que se alejarán de su propio motor, Prest, a WebKit, llamado Blink .

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

Webkit es un motor de renderizado de navegador web utilizado por Safari y Chrome (entre otros, pero estos son los populares).

El prefijo -webkit en los selectores de CSS son propiedades que solo este motor debe procesar, muy similar a las propiedades de -moz . Muchos de nosotros esperamos que esto desaparezca, por ejemplo, el -webkit-border-radius será reemplazado por el border-radius estándar y no necesitará varias reglas para lo mismo para múltiples navegadores. Esto es realmente el resultado de las características de “pre-especificación” que están destinadas a no interferir con la versión estándar cuando se trata.

Para su actualización: … no, no está relacionado con IE realmente, IE al menos antes de las 9 usa un motor de representación 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 principales y qué llevó al estado actual de las cadenas de usuario-agente en mal estado.

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

Y luego Google creó Chrome, y Chrome usó Webkit, y era como Safari, y quería páginas creadas para Safari, y así fingía 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 se hicieron pasar por Mozilla, y Chrome se llamó 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, casi inútil, y todos fingieron ser todos los demás, y la confusión abundó.

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

Mas o menos. Eche un vistazo a Chrome Frame , es un complemento para Internet Explorer que lo hace usar el motor Webkit. La única peculiaridad es que debes persuadir a tus visitantes para que instalen el complemento.

Actualizar

Chrome Frame ya no se mantiene ni es compatible …

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

WebKit fue creado originalmente como una bifurcación de KHTML como el motor de diseño para Safari de Apple; es portátil para 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 Reducida de GNU, y el rest de WebKit está disponible bajo una licencia de estilo BSD.

Fuente Wikipedia

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

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

Admite varias propiedades de CSS personalizadas con el prefijo -webkit- .

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

Webkit es el motor de renderizado html / css utilizado en el navegador Safari de Apple y en Google Chrome. Los prefijos de css values ​​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 progtwigdores escriben su motor de representación para interpretar esas reglas. Así que, básicamente, w3c dice que los DIV deberían funcionar “De esta forma” el motor-escritor 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 mucha gente usa IE6 +. No es un gran problema, salvo en CSS, tengo que agregar múltiples syntax de renderizado ‘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 CSS adecuados y el renderizado, mis sitios web se verán y funcionarán bien con todos los navegadores excepto IE. Esto puede ser un cliente de IE infeliz e intransigente.

El ejemplo es el siguiente: Digamos que necesito un borde gris de 1px con un radio de borde del 10%. Para Chrome y otros, uso 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%”. Un resultado positivo no siempre está garantizado en todas las versiones de IE Explorer, pero en su mayor parte este método funciona bien para mí y para muchos otros.

-webkit- es simplemente un grupo en el que caben los navegadores Chrome, Safari, Opera y iOS. Todos tienen un ancestro común, por lo que a menudo sus capacidades / limitaciones (cuando se trata de ejecutar CSS y Javascript) están confinadas 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 y iOS. Aquí hay una lista completa:

-webkit- (Chrome, Safari, versiones más nuevas 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)

Aunque esta es una publicación anterior, también hay otro método para renderizar para 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 de HEAD del HTML.

Intente utilizar Modernizr, HTML5 Shiv y Respond.js. Estos son sorprendentes scripts de polyfill compatibles con IE que usan polyfills y otros recursos que ayudarán a representar mejor los elementos HTML5 en IE9 y Below.

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

      

Una buena documentación sobre WebEngines especialmente webKit y sus desarrolladores se puede leer en: WebKit

Webkit es el motor de renderizado utilizado en los populares navegadores Safari y Chrome, y otros. Todos los navegadores están respaldados por un motor de representación para dibujar la página web HTML / CSS.

IE → Trident (descontinuado) Edge → EdgeHTML (limpieza de la horquilla de Trident) Firefox → Gecko Opera → Prest (ya no usa Prest desde febrero de 2013, considera Opera = Chrome hoy en día) Safari → WebKit Chrome → Blink (un tenedor de WebKit) .