solo que para navegador moz detectar chrome css webkit cross-browser rendering-engine

que - safari css



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

Más recientemente, he estado viendo preguntas con la etiqueta "webkit". Estas preguntas generalmente tienden a ser preguntas basadas en la web relacionadas con CSS, jQuery, diseños, problemas de compatibilidad de 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

Por lo tanto, desde las respuestas hasta ahora ... WebKit es un motor de renderizado de navegador web HTML / CSS para Safari / Chrome. ¿Existen tales motores para IE / Opera / Firefox y cuáles son las diferencias, ventajas y desventajas de usar uno sobre el otro? ¿Puedo usar las características de WebKit en Firefox, por ejemplo?

La pregunta final ... ¿WebKit es compatible con IE?

Actualización 2

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

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

Actualización: al parecer, WebKit es un motor de renderizado de navegador web HTML / CSS para Safari / Chrome. ¿Existen tales motores para IE / Opera / Firefox y cuáles son las diferencias, ventajas y desventajas 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 → Trident (interrumpido)
  • Edge → EdgeHTML (limpieza tenedor de Trident)
  • Firefox → Gecko
  • Opera → Presto (Ya no usa Presto desde febrero de 2013, considera Opera = Chrome 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 pregunta final ... ¿WebKit es compatible con IE?

No de forma nativa.

La pregunta final ... ¿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 Webkit. El único inconveniente es que tienes que persuadir a tus visitantes para que instalen el complemento.

Actualizar

Chrome Frame ya no se mantiene ni admite ...

WebKit es un motor de diseño diseñado para permitir a los navegadores web representar páginas web. El motor WebKit proporciona un conjunto de clases para mostrar contenido web en Windows e implementa funciones de navegador como los siguientes enlaces cuando el usuario hace clic en él, gestiona una lista hacia atrás y gestiona un historial de páginas visitadas recientemente.

WebKit fue creado 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 utiliza en el navegador Chrome de Google.

Los componentes WebCit 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 WebKit

Para más información sobre los motores de maquetación puede consultar here

Además de lo que dijo @KennyTM :

  • ES DECIR
  • Borde
  • Firefox
    • Motor: Gecko
    • CSS-prefijo: -moz
  • Ópera
    • Motor: Presto → Blink 1
    • CSS-prefijo: -o (Presto) y -webkit (Parpadeo)
  • Safari
    • Motor: WebKit
    • CSS-prefijo: -webkit
  • Cromo

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

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

Aunque se trata de una publicación anterior, también hay otro método para renderizar versiones anteriores de Internet Explorer. -webkit mientras es un prefijo de proveedor CSS, también puede descargar algunas aplicaciones JS y colocarlas en la parte inferior de la HEAD del HTML.

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

Para usar estos polyfills, simplemente agregue la lógica booleana HTML para colocarlos, SI el navegador es menor que la versión de 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>

Esto ha sido respondido y aceptado, pero si alguien todavía se pregunta por qué las cosas están un poco arruinadas 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 representación importantes y lo que condujo 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 construyó Chrome, y Chrome usó Webkit, y era como Safari, y quería que las páginas se construyeran para Safari, y así se hizo pasar por Safari. Y así, Chrome usó WebKit y se hizo pasar por Safari, y WebKit se hizo pasar por KHTML, y KHTML se hizo pasar por Gecko, y todos los navegadores se hicieron pasar por 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 de agente de usuario fue un completo desastre, casi inútil, y todos fingieron ser todos los demás, y la confusión abundó.

Un problema común que me he encontrado como diseñador de sitios web es que muchas personas usan IE6 +. Por lo general, no es un gran problema, excepto en CSS Tengo que agregar una sintaxis de representación múltiple 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 y la representación adecuados, mis sitios web se ven y funcionan bien con todos los navegadores, excepto IE. Esto puede hacer que un cliente de IE infeliz e insensible.

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 utilizando los valores antiguos de CSS "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.

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

Webkit es el motor de renderización html / css utilizado en el navegador Safari de Apple y en Chrome de Google. Los prefijos de valores de css con -webkit- son específicos del 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. Así que, básicamente, w3c dice que los DIV deberían funcionar "De esta manera" el motor-escritor luego usa esa regla para escribir su código, cualquier error o mala interpretación de las reglas causan los problemas de compatibilidad.

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

Webkit es el motor de renderizado utilizado en los populares navegadores Safari y Chrome, entre otros. Todos los navegadores están respaldados 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 → Parpadeo (una bifurcación de WebKit) .

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

El prefijo -webkit en los selectores de CSS son propiedades que solo este motor está destinado a procesar, muy similares a las propiedades de -moz . Muchos de nosotros esperamos que esto desaparezca, por ejemplo, -webkit-border-radius será reemplazado por el border-radius estándar y no necesitará múltiples reglas para la misma cosa para múltiples navegadores. Este 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 produce.

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

Webkit es un motor de representación HTML utilizado por Chrome y Safari.

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

-webkit- es simplemente un grupo al que encajan los navegadores Chrome, Safari, Opera e iOS. Todos ellos 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 y iOS. Aquí está 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- (Old, pre-WebKit, versiones de Opera)

-ms- (Internet Explorer y Microsoft Edge)