¿Qué es una hoja de estilo de agente de usuario?

500

Estoy trabajando en una página web en Google Chrome. Se muestra correctamente con los siguientes estilos.

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 para desarrolladores de Chrome, dice la hoja de estilo del agente de usuario en lugar del nombre del archivo CSS.

Ahora, si envío un formulario y se produce algún error de validación, obtengo la 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-sizede estos nuevos estilos está perturbando mi diseño. ¿Hay alguna manera de forzar mis hojas de estilo y, si es posible, sobrescribir completamente la hoja de estilo predeterminada de Chrome?

css google-chrome Kapil Sharma
fuente
2
Chrome: ¿cómo desactivar la configuración de la hoja de estilo del agente de usuario?
givanse
77
Tenga en cuenta también que en Chrome (51) solo obtiene esas dos entradas de tabla cuando no tiene una declaración doctype. De lo contrario, solo obtienes el segundo.
John
Borre el caché de Chrome en más herramientas -> Borrar datos de navegación
doford
2
Publicación relacionada aquí . Comprender cómo la hoja de estilo agente de usuario (o navegador) es diferente de las hojas de estilo de usuario y autor ayudará a conceptualizar las cosas fácilmente.
RBT

Respuestas:

251

¿Cuáles son los navegadores de destino? Los diferentes navegadores establecen diferentes reglas CSS predeterminadas. Intente incluir un restablecimiento de CSS, como el restablecimiento de CSS de meyerweb o normalize.css , para eliminar esos valores predeterminados. Google "restablecer CSS vs normalizar" para ver las diferencias.

Oliver Millington
fuente
19
Siempre reinicio / normalizo mi CSS antes de cada proyecto, de esa manera tiene un campo de "casi" nivel en todos los navegadores. Nunca he oído hablar de un "efecto secundario" negativo como tal, estoy seguro de que si echa un vistazo rápido a Google, encontrará que es recomendable.
Oliver Millington
2
Restablecer estilos puede causar resultados extraños con campos de formulario, particularmente alrededor de los bordes de campo o elementos de varias partes como type = "file".
trata bien tus modificaciones el
77
Aunque restablecer / normalizar podría ayudar, en realidad no responde la pregunta, ¿por qué está cambiando la hoja de estilo del agente de usuario? Tengo el mismo problema en el que los estilos de UA se vuelven diferentes para las páginas pre-renderizadas que uso para SEO. ¿Alguna idea de por qué cambia?
Yaron
55
Vea lo que Chrome establece de forma predeterminada en la página web: trac.webkit.org/browser/trunk/Source/WebCore/css/html.css
Santosh Kumar
10
Esta no es una respuesta ... Agregar <!DOCTYPE>es correcto por @Sebas
Amit Shah
141

Si <!DOCTYPE>falta en su contenido HTML, puede experimentar que el navegador da preferencia a la "hoja de estilo de agente de usuario" sobre su hoja de estilo personalizada. Agregar el doctype corrige esto.

Jesper Mygind
fuente
66
Esa es una gran pista. Me ahorraste algo de tiempo de investigación. Vale la pena señalar que en mi caso tenía esa declaración doctype pero tenía un script antes. Parece que el DOCTYPE debe suceder primero en la página para entrar en consideración.
Sebas
3
Agregar <! DOCTYPE> resolvió un problema de alineación vertical tr / td muy extraño que tenía. Gracias por esta respuesta
Ralph Tee
3
Esto es una trampa, pero <! DOCTYPE html> me solucionó el problema.
Steve Zelaznik
8
Tenía <! DOCTYPE html> habilitado pero aún tenía que normalizar.
antikbd
1
@ChrisMorgan citando la especificación a la que se ha vinculado: "Los DOCTYPE son necesarios por razones heredadas. Cuando se omiten, los navegadores tienden a usar un modo de representación diferente que es incompatible con algunas especificaciones. La inclusión del DOCTYPE en un documento garantiza que el navegador realice un intento de mejor esfuerzo para seguir las especificaciones pertinentes ". En un mundo ideal, DOCTYPE no sería necesario. Pero afirmar que la respuesta es "simplemente no es cierto" es bastante audaz en mi humilde opinión, especialmente teniendo en cuenta el número de votos a favor.
Jesper Mygind, el
104

Con respecto al concepto "hoja de estilo de agente de usuario", consulte la sección Cascada 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 estilos. Son solo el fondo: en ausencia de hojas de estilo proporcionadas por la página o por el usuario, el navegador todavía tiene que presentar el contenido de alguna manera , y la hoja de estilo del agente de usuario simplemente describe esto.

Entonces, si cree que tiene un problema con una hoja de estilo de agente de usuario, entonces realmente tiene un problema con su marcado, su hoja de estilo o ambas (sobre las cuales no escribió nada).

Jukka K. Korpela
fuente
@givanse, no, ve efectos de hoja de estilo de agente de usuario cuando no los anula, y su marcado de muestra no es una excepción. Se analizará como un lielemento que contiene dos ulelementos con solo contenido de texto; están diseñados por una hoja de estilo de agente de usuario, pero este estilo puede anularse. (Si el marcado no es válido depende del contexto y de la versión HTML; pero esto no afecta el estilo.)
Jukka K. Korpela
@givanse, ese problema no es relevante para la pregunta “¿Qué es una hoja de estilo de usuario?”. Si cree que el problema es importante, publíquelo como una nueva pregunta, con suficientes detalles. Pero la viñeta en su jsfiddle es simple una viñeta para el lielemento, y su hoja de estilo no lo anula.
Jukka K. Korpela
47

Marcar el documento como HTML5 por el doctype adecuado en la primera línea, resolvió mi problema.

<!DOCTYPE html>
<html>...
Daniel
fuente
8
¿Puede explicar cómo se supone que debe funcionar exactamente? ¿Cómo se asocia HTML 5 con estilos indefinidos? Lo confirmaré pero ¿tienes algún violín listo para confirmarlo?
Kapil Sharma
28

Una hoja de estilo de agente de usuario es una "hoja de estilo predeterminada" proporcionada por el navegador (por ejemplo, Chrome, Firefox, Edge, etc.) para presentar la página de una manera que satisfaga las "expectativas generales de presentación". Por ejemplo, una hoja de estilo predeterminada proporcionaría estilos base para elementos como tamaño de fuente, bordes y espaciado entre elementos. Es común emplear una hoja de estilo de reinicio para tratar las inconsistencias entre los navegadores.

De la especificación ...

La hoja de estilo predeterminada de un agente de usuario debe presentar los elementos del idioma del documento de manera que satisfagan las expectativas generales de presentación del idioma del documento. ~ La cascada .

Para obtener más información sobre los agentes de usuario en general, consulte agente de usuario .

Kenneth Stoddard
fuente
15

Respondiendo a la pregunta en el título, ¿cuál es la hoja de estilo del agente de usuario, el conjunto de estilos predeterminados en el navegador? Estos son algunos de ellos (y los más relevantes también en la web de hoy):

Opinión personal: no pelees con ellos. Tienen buenos valores predeterminados, por ejemplo, en casos rtl / bidi y son consistentes hoy en día. Restablece lo que ves irrelevante para ti, no todos a la vez.

Ebrahim Byagowi
fuente
12

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

BenM
fuente
4

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

rollin_jeksun
fuente
1

Tuve el mismo problema ya que uno de mis <div> tenía el margen establecido por el navegador. Fue bastante molesto, pero luego descubrí que, como decía la mayoría de la gente, es un error de marcado.

Regresé y revisé mi sección <head> y mi enlace CSS era el siguiente:

<link rel="stylesheet" href="ex.css">

Lo incluí typey lo hice como a continuación:

<link rel="stylesheet" type="text/css" href="ex.css">

Mi problema fue resuelto.

Appy Sharma
fuente
0

Cada navegador proporciona una hoja de estilo predeterminada, llamada hoja de estilo del agente de usuario, en caso de que un archivo HTML no especifique una. Los estilos que especifique anulan los valores predeterminados.

Como no ha especificado valores para el cuadro del elemento de tabla, se han aplicado los estilos predeterminados.

primer comentarista
fuente
0

Solo quería ampliar la respuesta de @BenM en base a lo que leí aquí de Ire Aderinokun. Dado que la hoja de estilo agente de usuario proporciona un estilo predeterminado útil, piénselo dos veces antes de anularlo.

Tuve un error tonto donde un elemento del botón no se veía bien en Chrome. Lo había diseñado parcialmente porque no quería que se viera como un botón tradicional. Sin embargo, omití elementos de estilo como borde, color de borde, etc. Así que Chrome intervino para proporcionar las partes que creía que me faltaban.

El problema desapareció una vez que agregué estilos como border: none, etc.

Por lo tanto, si alguien más tiene este problema, asegúrese de anular explícitamente todos los estilos de agente de usuario predeterminados aplicables para un elemento si nota que parece inestable, especialmente si no desea restablecer completamente los estilos de agente de usuario. Funcionó para mi.

Brent Miller
fuente
¿No debería ser esto un comentario en lugar de una respuesta?
Peter Mortensen
@PeterMortensen sí, pero no puedo dejar comentarios, no hay suficiente reputación.
Brent Miller
-1

Tengo una solución. Mira esto:

Error

<link href="assets/css/bootstrap.min.css" rel="text/css" type="stylesheet">

Correcto 

<link href="assets/css/bootstrap.min.css" rel="stylesheet" type="text/css">
Vinkal Chandel
fuente
2
Edite para explicar cómo funciona esto y por qué ayuda.
Yunnosch
-6

Pon el siguiente código en tu archivo CSS:

table {
    font-size: inherit;
}
Srikanth
fuente
2
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.
Kaspar Lee