Cuándo utilizar el prefijo -webkit css
WebKit es un motor de navegación desarrollado por Apple que se utiliza principalmente en el navegador web Safari y otros navegadores web de iOS. El navegador de BlackBerry, las consolas PlayStation a partir de la PS3, los sistemas operativos móviles Tizen y un navegador incluido en el lector de libros electrónicos Amazon Kindle utilizan WebKit.
La propiedad CSS -webkit-appearance permite a los diseñadores web hacer que los componentes HTML se parezcan más a los controles nativos de la interfaz de usuario (UI). También es compatible con la propiedad CSS -webkit-appearance, que es una extensión propietaria de CSS. El prefijo -webkit- en las extensiones de WebKit indica que forman parte del marco de trabajo de código abierto de WebKit.
Basándose en la compatibilidad de los navegadores, CSS3 contiene una propiedad de apariencia que es igual a la propiedad -webkit-appearance. Por ejemplo, para Internet Explorer, -ms- se cambia por -moz- para Firefox, -o- para Opera, etc. Safari 3.0, iOS 1.0 y las versiones posteriores también son compatibles con el parámetro -webkit-appearance.
Tanto Safari como Chrome utilizan Webkit como motor de renderizado (entre otros, pero estos son los más populares). El prefijo -webkit en los selectores CSS denota las propiedades que están destinadas exclusivamente a ser procesadas por este motor, de forma análoga a las propiedades -moz. A continuación se comentan algunas de ellas:
Diferencia entre webkit y moz
Soy un principiante en CSS y cuando estaba mirando un código CSS el otro día, encontré estas líneas. En los tutoriales que he utilizado para aprender CSS, nunca he visto nada parecido a estas líneas. ¿Cuál es la explicación de estas líneas? ¿O hay alguna fuente donde pueda aprender a implementar líneas como éstas?
Estas son las propiedades prefijadas por el proveedor que ofrecen los motores de renderizado correspondientes (-webkit para Chrome, Safari; -moz para Firefox, -o para Opera, -ms para Internet Explorer). Suelen utilizarse para implementar características CSS nuevas o propias, antes de que el W3 las aclare o defina definitivamente.
Esto permite establecer propiedades específicas para cada navegador/motor de renderizado individual con el fin de que las inconsistencias entre las implementaciones se tengan en cuenta de forma segura. Los prefijos, con el tiempo, se eliminarán (al menos en teoría) a medida que se implemente la versión final de la propiedad en ese navegador.
Para ello, se considera una buena práctica especificar primero la versión prefijada por el proveedor y luego la versión no prefijada, para que la propiedad no prefijada anule la configuración de la propiedad prefijada por el proveedor una vez que se haya implementado; por ejemplo:
Webkit-flex
-webkit es para todos los navegadores basados en webkit, así que Chrome, Safari, navegadores IOS, etc. Extrañamente creo que Firefox para IOS es WebKit también. Los prefijos son [eran] una forma bastante horrible (aunque necesaria) de introducir características CSS en los navegadores, y no son realmente tan necesarios ahora, la mayoría de las cosas funcionan en todos los navegadores más nuevos, que todos se auto-actualizan. Además, deberían añadirse automáticamente, en lugar de manualmente, por lo que la necesidad de utilizarlas o no debería depender de una herramienta (que sería algo que utilizara la herramienta Autoprefixer)
Así que supongo que añadir o no estas cosas no afectará significativamente a mi diseño. Una cosa, señor, me puse un color de fondo específico a mi sitio web para mirar como plana … pero cuando eché un vistazo a él en mi teléfono el color era, OBVIAMENTE diferente, es más contrastada y la luz … los navegadores interpretar el código hexadecimal de manera diferente o la gran variedad de pantallas es el problema
Lo sé, puedo cambiar el color en la consulta de los medios de comunicación, pero no es necesario, ni el tiempo eficiente (porque tengo que probar en mi teléfono una y otra vez hasta que llegue el mismo color … y por último supongo, tamaños de pantalla no son el problema
Webkit css
Las nuevas características de CSS3 son una bendición para los desarrolladores web: con unas pocas líneas de código podemos hacer cosas que eran casi imposibles hace unos años. Pero estas características también son un verdadero dolor para nosotros: tenemos que escribir la misma propiedad muchas veces para diferentes navegadores.
Después de que el resolvedor de CSS averigüe el nombre de una propiedad que debe ser emitida, buscará su ocurrencia en catálogos especiales de proveedores. Estos catálogos se definen como entradas css.{vendor}Properties en las preferencias y pueden ser anuladas por el usuario. {vendor} es el prefijo del navegador, por ejemplo, webkit, moz, etc.
Por ejemplo, la propiedad border-radius está definida en css.webkitProperties y css.mozProperties por lo que esta propiedad se mostrará con los prefijos webkit y moz. Por otro lado, la propiedad foo no está definida en ninguna parte, por lo que se mostrará con todos los prefijos disponibles cuando se expanda la abreviatura -foo: webkit, moz, ms y o. Es especialmente útil para utilizar propiedades CSS de última generación que se han implementado recientemente.
Al escribir archivos CSS, puedes encontrar que una propiedad CSS3 “clara” es inútil sin sus variantes prefijadas por el proveedor. Esto hace que escribir abreviaturas con guiones como -trf (trf es un alias de la propiedad transform) sea un poco incómodo.