O que é uma folha de estilo do agente do usuário?

499

Estou trabalhando em uma página da web no Google Chrome. É exibido corretamente com os seguintes estilos.

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

É importante notar que eu não defini esses estilos. Nas ferramentas de desenvolvedor do Chrome, diz a folha de estilo do agente do usuário no lugar do nome do arquivo CSS.

Agora, se eu enviar um formulário e ocorrer algum erro de validação, recebo a seguinte folha 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;
}

A font-sizepartir desses novos estilos está perturbando meu design. Existe uma maneira de forçar minhas folhas de estilo e, se possível, sobrescrever completamente a folha de estilo padrão do Chrome?

css google-chrome Kapil Sharma
fonte
2
chrome: como desativar as configurações da folha de estilo do agente do usuário?
givanse
7
Observe também que no Chrome (51) você obtém apenas essas duas entradas da tabela quando não possui uma declaração de tipo de documento. Caso contrário, você obtém apenas o segundo.
John
Limpe o cache do Chrome em mais ferramentas -> Limpar dados de navegação
doford 4/17/17
2
Post relacionado aqui . Compreender como as folhas de estilo do agente do usuário (ou navegador) é diferente das folhas de estilo do usuário e do autor ajudará a conceber as coisas facilmente.
RBT

Respostas:

251

Quais são os navegadores de destino? Navegadores diferentes definem regras CSS padrão diferentes. Tente incluir uma redefinição de CSS, como o redefinição de CSS meyerweb ou normalize.css , para remover esses padrões. Google "CSS reset vs normalize" para ver as diferenças.

Oliver Millington
fonte
19
Eu sempre redefino / normalizo meu CSS antes de cada projeto, dessa forma você tem um campo de nível "quase" entre navegadores. Eu nunca ouvi falar de um "efeito colateral" negativo, como tal, tenho certeza que se você der uma olhada rápida no Google, verá que é recomendado.
Oliver Millington
2
A redefinição de estilos pode causar resultados estranhos com os campos do formulário, principalmente em torno das bordas do campo ou dos elementos com várias partes, como type = "file".
trate seus mods bem
7
Embora a redefinição / normalização possa ajudar, ela realmente não responde à pergunta: por que a folha de estilo do agente do usuário está mudando? Eu tenho o mesmo problema em que os estilos de UA se tornam diferentes para páginas pré-renderizadas que eu uso para SEO. Alguma idéia de por que isso muda?
Yaron
5
Veja o que conjuntos Chrome por padrão para o site: trac.webkit.org/browser/trunk/Source/WebCore/css/html.css
Santosh Kumar
10
Esta não é uma resposta ... Adicionando <!DOCTYPE>é correto por @Sebas
Amit Shah
141

Se <!DOCTYPE>estiver faltando no seu conteúdo HTML, você pode perceber que o navegador dá preferência à "folha de estilo do agente do usuário" em vez da sua folha de estilo personalizada. Adicionar o doctype corrige isso.

Jesper Mygind
fonte
6
Essa é uma ótima dica. Você me salvou algum tempo de pesquisa. Worth observou que, no meu caso, eu tinha essa declaração de tipo de documento, mas eu tinha um script antes. Parece que o DOCTYPE deve acontecer primeiro na página para ser considerado.
Sebas
3
Adicionar <! DOCTYPE> resolveu um problema muito estranho de alinhamento vertical tr / td que eu tinha. Obrigado por esta resposta.
Ralph Tee
3
Isso é muito simples, mas o <! DOCTYPE html> corrigiu o problema para mim.
Steve Zelaznik 20/02/19
8
Eu tinha o <! DOCTYPE html> ativado, mas ainda precisava normalizar.
Antikbd
1
@ChrisMorgan citando a especificação à qual você vinculou: "DOCTYPEs são necessários por motivos herdados. Quando omitidos, os navegadores tendem a usar um modo de renderização diferente que é incompatível com algumas especificações. A inclusão do DOCTYPE em um documento garante que o navegador faça uma tentativa de melhor esforço para seguir as especificações relevantes ". Em um mundo ideal, o DOCTYPE não seria necessário. Mas reivindicar a resposta "simplesmente não é verdade" é IMHO bastante ousado, especialmente considerando o número de votos positivos.
Jesper Mygind
104

Em relação ao conceito “folha de estilo do agente do usuário”, consulte a seção Cascade na especificação do CSS 2.1.

As folhas de estilo do agente do usuário são substituídas por qualquer coisa que você definir em sua própria folha de estilo. Eles são apenas o ponto mais baixo: na ausência de folhas de estilo fornecidas pela página ou pelo usuário, o navegador ainda precisa renderizar o conteúdo de alguma forma , e a folha de estilos do agente do usuário apenas descreve isso.

Portanto, se você acha que tem um problema com uma folha de estilos de agente de usuário, realmente tem um problema com sua marcação, ou com sua folha de estilos, ou com ambas (sobre a qual você não escreveu nada).

Jukka K. Korpela
fonte
@givanse, não, você vê os efeitos da folha de estilos do agente do usuário quando não os substitui, e sua marcação de amostra não é exceção. Será analisado como um lielemento contendo dois ulelementos com apenas conteúdo de texto; eles são estilizados pela folha de estilos do agente do usuário, mas esse estilo pode ser substituído. (Se a marcação for inválido depende do contexto e na versão HTML, mas isso não afeta o estilo.)
Jukka K. Korpela
@givanse, esse problema não é relevante para a pergunta "o que é uma folha de estilo do usuário". Se você acha que o problema é importante, publique-o como uma nova pergunta, com detalhes suficientes. Mas o marcador no seu jsfiddle é um marcador simples para o lielemento, e sua folha de estilos não o substitui.
Jukka K. Korpela
47

A marcação do documento como HTML5 pelo tipo de documento adequado na primeira linha resolveu meu problema.

<!DOCTYPE html>
<html>...
Daniel
fonte
8
Você pode, por favor, explicar como exatamente isso deve funcionar? Como o HTML 5 está associado a estilos indefinidos? Vou confirmar, mas você tem algum violino pronto para confirmar?
Kapil Sharma
28

Uma folha de estilo do agente do usuário é uma "folha de estilo padrão" fornecida pelo navegador (por exemplo, Chrome, Firefox, Edge etc.) para apresentar a página de uma maneira que satisfaça as "expectativas gerais de apresentação". Por exemplo, uma folha de estilos padrão forneceria estilos de base para itens como tamanho da fonte, bordas e espaçamento entre os elementos. É comum empregar uma folha de estilo de redefinição para lidar com inconsistências entre navegadores.

A partir da especificação ...

A folha de estilos padrão de um agente de usuário deve apresentar os elementos do idioma do documento de maneira a satisfazer as expectativas gerais de apresentação do idioma do documento. ~ A cascata .

Para obter mais informações sobre agentes do usuário em geral, consulte agente do usuário .

Kenneth Stoddard
fonte
15

Respondendo à pergunta no título, qual é a folha de estilo do agente do usuário, o conjunto de estilos padrão no navegador: Aqui estão alguns deles (e os mais relevantes também na web de hoje):

Opinião pessoal: não lute com eles. Eles têm bons valores padrão, por exemplo, em casos de RTL / bidi e são consistentes hoje em dia. Redefina o que você acha irrelevante para você, nem todos de uma vez.

Ebrahim Byagowi
fonte
12

Defina os valores que você não deseja que sejam usados ​​no estilo de agente do usuário do Chrome em seu próprio conteúdo CSS.

BenM
fonte
4

Alguns navegadores usam sua própria maneira de ler arquivos .css. Portanto, o caminho certo para superar isso: se você digitar a linha de comando diretamente no código-fonte .html, isso excederá o arquivo .css. Dessa forma, você disse diretamente ao navegador o que fazer e o navegador está em posição de não ler. os comandos do arquivo .css. Lembre-se de que os comandos gravados no arquivo .html são mais fortes que o comando no .css.

rollin_jeksun
fonte
1

Eu tive o mesmo problema que um dos meus <div> 's teve a margem definida pelo navegador. Foi muito chato, mas então eu descobri que, como a maioria das pessoas disse, é um erro de marcação.

Voltei e verifiquei minha seção <head> e meu link CSS era como abaixo:

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

Eu incluí typenele e fiz como abaixo:

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

Meu problema foi resolvido.

Appy Sharma
fonte
0

Cada navegador fornece uma folha de estilo padrão, chamada folha de estilo do agente do usuário, caso um arquivo HTML não especifique uma. Os estilos que você especificar substituem os padrões.

Como você não especificou valores para a caixa do elemento da tabela, os estilos padrão foram aplicados.

firstpostcommenter
fonte
0

Eu só queria expandir a resposta do @BenM com base no que li aqui de Ire Aderinokun. Como a folha de estilo do agente do usuário fornece um estilo padrão útil, pense duas vezes antes de substituí-la.

Ocorreu um erro estúpido em que um elemento de botão não parecia certo no Chrome. Eu o tinha parcialmente estilizado porque não queria que parecesse um botão tradicional. No entanto, deixei de fora elementos de estilo, como borda, cor da borda etc. Então o Chrome estava entrando para fornecer as peças que achava que estavam faltando.

O problema desapareceu depois que adicionei estilos como border: none etc.

Portanto, se alguém tiver esse problema, verifique se você está substituindo explicitamente todos os estilos padrão de agente do usuário aplicáveis ​​a um elemento, se perceber que ele parece instável, especialmente se você não deseja redefinir completamente os estilos do agente do usuário. Funcionou para mim.

Brent Miller
fonte
Isso não deveria ser um comentário em vez de uma resposta?
Peter Mortensen
@PeterMortensen sim, mas não posso deixar comentários - não há reputação suficiente.
Brent Miller
-1

Eu tenho uma solução Verifique isto:

Erro

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

Corrigir 

<link href="assets/css/bootstrap.min.css" rel="stylesheet" type="text/css">
Vinkal Chandel
fonte
2
Edite para explicar como isso funciona e por que ajuda.
Yunnosch 16/01
-6

Coloque o seguinte código no seu arquivo CSS:

table {
    font-size: inherit;
}
Srikanth
fonte
2
Isso realmente não adiciona nada de novo a esta postagem. Já existe uma resposta aceita, além de outras 5, portanto, não poste respostas tardias.
Kaspar Lee