¿Qué es la hoja de estilo del agente de usuario

339

Estoy trabajando en una página web en Google Chrome. Se muestra correctamente con los siguientes estilos.¿Qué es la hoja de estilo del agente de usuario

table { 
    display: table; 
    border-collapse: separate; 
    border-spacing: 2px; 
    border-color: gray; 
}

Es importante tener en cuenta que no definí estos estilos. En las herramientas de desarrollo de Chrome, dice hoja de estilos de agente de usuario en lugar del nombre de archivo CSS.

Ahora si presento un formulario y se produce algún error de validación, me sale el siguiente hoja de estilo:

table { 
    white-space: normal; 
    line-height: normal; 
    font-weight: normal; 
    font-size: medium; 
    font-variant: normal; 
    font-style: normal; 
    color: -webkit-text; 
    text-align: -webkit-auto; 
} 
table { 
    display: table; 
    border-collapse: separate; 
    border-spacing: 2px; 
    border-color: gray; 
}

El font-size de estos nuevos estilos es preocupante mi diseño. ¿Hay alguna forma de forzar mis hojas de estilo y, si es posible, sobrescribir por completo la hoja de estilo predeterminada de Chrome?

Fuente

2012-09-25 Kapil Sharma

[chrome:? Cómo desactivar la configuración de agente de hojas de estilo de usuario] (http://stackoverflow.com/ preguntas/18006356) – givanse

Tenga en cuenta también que en Chrome (51) solo obtiene esas dos entradas de tabla cuando no tiene una declaración de tipo de documento. De lo contrario, solo obtendrás el segundo. – John

Borre la memoria caché de Chrome en más herramientas -> Borrar datos de navegación – doford

177

¿Cuál es el navegador de destino? Los diferentes navegadores establecen diferentes reglas de CSS predeterminadas. Intente incluir un reset.css o un normalise.css (Google para cualquiera de los dos o para "restablecer frente a normalizar" para ver las diferencias) para eliminar esos valores predeterminados.

Fuente

2012-09-25 12:12:15

Gracias Oli. ¿Hay algún efecto secundario de eliminar el CSS predeterminado del navegador? Supongo que no es recomendable, ¿verdad? Necesito decidir entre su respuesta ans (reset) o @BenM anular con nuestro propio estilo. ¿Alguna idea de cuál es el enfoque recomendado? –

+16

Siempre reinicio/normalizo mi CSS antes de cada proyecto, de esa manera tiene un campo de nivel "casi" en todos los navegadores. Nunca he oído hablar de un "efecto secundario" negativo como tal, estoy seguro de que si miras rápidamente en Google, encontrarás que es recomendable. –

Restablecer estilos puede causar resultados extraños con campos de formulario, particularmente alrededor de bordes de campo o elementos de varias partes como type = "file". – phyzome

Defina los valores que no desea utilizar desde el estilo de agente de usuario de Chrome en su propio CSS.

Fuente

2012-09-25 12:07:29 BenM

En cuanto al concepto "hoja de estilo de agente de usuario", consulte la sección Cascade en la especificación CSS 2.1.

Las hojas de estilo del agente de usuario se anulan por cualquier cosa que establezca en su propia hoja de estilo. Son simplemente el fondo: a falta de hojas de estilo proporcionadas por la página o por el usuario, el navegador todavía tiene que representar el contenido de alguna manera, y la hoja de estilo del agente de usuario solo describe esto.

Así que si crees que tienes un problema con una hoja de estilo de agente de usuario, entonces realmente tienes un problema con tu marcado, tu hoja de estilo o ambos (sobre los cuales no escribiste nada).

Fuente

2012-09-25 16:25:51

@givanse, no, usted ve los efectos de hoja de estilo del agente de usuario cuando no los reemplaza, y su marcado de muestra no es una excepción. Será analizado como un elemento 'li' que contiene dos elementos' ul' con solo contenido de texto; se diseñan mediante una hoja de estilo de agente de usuario, pero este estilo se puede anular. (Si el marcado no es válido depende del contexto y de la versión HTML, pero esto no afecta el estilo.) –

@givanse, ese problema no es relevante para la pregunta "¿qué es una hoja de estilo de usuario?". Si crees que el problema es importante, publícalo como una nueva pregunta, con suficientes detalles. Pero la viñeta de su jsfiddle es una simple bala para el elemento 'li', y su hoja de estilo no la anula. –

¡Simplemente "hizo clic", gracias! – givanse

Algunos navegadores usan su propia forma de leer archivos .css. Así que la forma correcta de superar esto: Si escribe la línea de comando directamente en el código fuente .html, esto supera el archivo .css, de esa manera, le dijo al navegador directamente qué hacer y el navegador está en posición no para leer los comandos del archivo .css. Recuerde que los comandos escritos en el archivo .html son más fuertes que el comando en .css.

Fuente

2014-03-08 17:50:04

Marcar el documento como HTML5 con el tipo de documento correcto en la primera línea, solucionó mi problema.

<!DOCTYPE html> 
<html>...

Fuente

2015-08-13 07:45:56 Daniel

¿Puede explicar cómo se supone que funciona exactamente? ¿Cómo HTML 5 está asociado con estilos indefinidos? Confirmaré pero ¿tienes algún violín listo para confirmarlo? –

Si <!DOCTYPE> no se encuentra en su html puede experimentar que el navegador da preferencia al "agente de usuario de estilo" sobre su hoja de estilo personalizado. Agregar el doctype corrige esto.

Fuente

2015-10-22 14:11:03

Esa es una gran pista. Me salvaste un tiempo de investigación. Worth notó que en mi caso tenía esa declaración de doctype, pero antes tenía un guión. Parece que el DOCTYPE debe suceder primero en la página para entrar en consideración. – Sebas

Multimillonario $ respuesta ... –

Agregar resolvió un problema de alineación vertical tr/td muy extraño que tuve. Gracias por esta respuesta. –

-7

poner el siguiente código en su archivo CSS

table { 
    font-size: inherit; 
}

Fuente

2016-02-08 10:38:43 Srikanth

Esto realmente no agrega nada nuevo a esta publicación. Ya hay una respuesta aceptada, así como otras 5 respuestas, así que no publique respuestas tardías. – Druzion

Básicamente, una hoja de estilo por defecto que proporciona el navegador. A partir de la especificación ...

hoja de estilo predeterminada de un agente de usuario debe presentar los elementos del lenguaje del documento de manera que satisfagan las expectativas generales de presentación para el idioma del documento. ~ The Cascade.

Asimismo, consulte para más detalles de agente de usuario en general ...

https://www.w3.org/TR/UAAG20/#def-user-agent

Fuente

2016-02-20 17:45:24

¿Qué es la hoja de estilo del agente de usuario

Respuesta

Cuestiones relacionadas