Qu'est-ce qu'une feuille de style d'agent utilisateur?

500

Je travaille sur une page Web dans Google Chrome. Il s'affiche correctement avec les styles suivants.

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

Il est important de noter que je n'ai pas défini ces styles. Dans les outils de développement Chrome, il indique la feuille de style de l'agent utilisateur à la place du nom du fichier CSS.

Maintenant, si je soumets un formulaire et qu'une erreur de validation se produit, j'obtiens la feuille de style suivante:

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;
}

Le font-sizede ces nouveaux styles perturbe ma conception. Existe-t-il un moyen de forcer mes feuilles de style et, si possible, d'écraser complètement la feuille de style par défaut de Chrome?

css google-chrome

— Kapil Sharma
source

2

chrome: comment désactiver les paramètres de feuille de style de l'agent utilisateur?

— givanse

7

Notez également que sur Chrome (51), vous n'obtenez que ces deux entrées de table lorsque vous n'avez pas de déclaration doctype. Sinon, vous n'obtenez que le second.

— John

Vider le cache Chrome dans plus d'outils -> Effacer les données de navigation

— doford

2

Article connexe ici . Comprendre en quoi la feuille de style utilisateur-agent (ou navigateur) est différente des feuilles de style utilisateur et auteur aidera à conceptualiser les choses facilement.

— RBT

251

Quels sont les navigateurs cibles? Différents navigateurs définissent différentes règles CSS par défaut. Essayez d'inclure une réinitialisation CSS, telle que la réinitialisation CSS meyerweb ou normaliser.css , pour supprimer ces valeurs par défaut. Google "CSS reset vs normaliser" pour voir les différences.

— Oliver Millington
source

19

Je réinitialise / normalise toujours mon CSS avant chaque projet, de cette façon vous avez un champ "presque" de niveau dans les navigateurs. Je n'ai jamais entendu parler d'un "effet secondaire" négatif en tant que tel, je suis sûr que si vous jetez un rapide coup d'œil sur Google, vous constaterez qu'il est recommandé.

— Oliver Millington

2

La réinitialisation des styles peut entraîner des résultats étranges avec les champs de formulaire, en particulier autour des bordures de champ ou des éléments en plusieurs parties comme type = "fichier".

— traitez bien vos mods

7

Même si réinitialiser / normaliser peut aider, cela ne répond pas vraiment à la question de savoir pourquoi la feuille de style de l'agent utilisateur change? J'ai le même problème où les styles UA deviennent différents pour les pages pré-rendues que j'utilise pour le référencement. Des idées sur pourquoi cela change?

— Yaron

5

Découvrez ce que Chrome définit par défaut sur la page Web: trac.webkit.org/browser/trunk/Source/WebCore/css/html.css

— Santosh Kumar

10

Ce n'est pas une réponse ... L'ajout <!DOCTYPE>est correct par @Sebas

— Amit Shah

141

S'il <!DOCTYPE>manque dans votre contenu HTML, vous pouvez constater que le navigateur donne la préférence à la "feuille de style de l'agent utilisateur" par rapport à votre feuille de style personnalisée. L'ajout du doctype corrige cela.

— Jesper Mygind
source

6

Voilà un excellent indice. Vous m'avez fait gagner du temps de recherche. Worth a noté que dans mon cas, j'avais cette déclaration doctype mais j'avais un script avant. Il semble que le DOCTYPE doit se produire en premier dans la page pour entrer en considération.

— Sebas

3

L'ajout de <! DOCTYPE> a résolu un problème d'alignement vertical tr / td très étrange que j'avais. Merci pour cette réponse.

— Ralph Tee

3

C'est tatillon, mais <! DOCTYPE html> a résolu le problème pour moi.

— Steve Zelaznik

8

J'avais <! DOCTYPE html> activé mais je devais encore normaliser.

— antikbd

1

@ChrisMorgan citant la spécification à laquelle vous avez lié: "Les DOCTYPE sont requis pour des raisons héritées. Lorsqu'ils sont omis, les navigateurs ont tendance à utiliser un mode de rendu différent qui est incompatible avec certaines spécifications. L'inclusion du DOCTYPE dans un document garantit que le navigateur crée un tenter au mieux de respecter les spécifications pertinentes ". Dans un monde idéal, DOCTYPE ne serait pas nécessaire. Mais prétendre que la réponse est "tout simplement pas vraie" est assez audacieux à mon humble avis, surtout compte tenu du nombre de votes positifs.

— Jesper Mygind

104

Concernant le concept de «feuille de style d'agent utilisateur», consultez la section Cascade dans la spécification CSS 2.1.

Les feuilles de style de l'agent utilisateur sont remplacées par tout ce que vous définissez dans votre propre feuille de style. Ils ne sont que le fond: en l'absence de feuilles de style fournies par la page ou par l'utilisateur, le navigateur doit toujours rendre le contenu d'une manière ou d'une autre , et la feuille de style de l'agent utilisateur décrit simplement cela.

Donc, si vous pensez que vous avez un problème avec une feuille de style d'agent utilisateur, vous avez vraiment un problème avec votre balisage, ou votre feuille de style, ou les deux (à propos desquels vous n'avez rien écrit).

— Jukka K. Korpela
source

@givanse, non, vous voyez des effets de feuille de style d'agent utilisateur lorsque vous ne les remplacez pas, et votre exemple de balisage ne fait pas exception. Il sera analysé comme un liélément contenant deux uléléments avec juste du contenu texte; ils sont stylisés par la feuille de style de l'agent utilisateur, mais ce style peut être remplacé. (Que le balisage soit invalide dépend du contexte et de la version HTML; mais cela n'affecte pas le style.)

— Jukka K. Korpela

@givanse, ce problème n'est pas pertinent pour la question «qu'est-ce qu'une feuille de style utilisateur». Si vous pensez que le problème est important, postez-le comme une nouvelle question, avec suffisamment de détails. Mais la puce de votre jsfiddle est simplement une puce pour l' liélément, et votre feuille de style ne la remplace pas.

— Jukka K. Korpela

47

Marquer le document comme HTML5 par le bon doctype sur la première ligne, a résolu mon problème.

<!DOCTYPE html>
<html>...

— Daniel
source

8

Pouvez-vous expliquer comment il est censé fonctionner exactement? Comment HTML 5 est-il associé à des styles non définis? Je vais confirmer, mais avez-vous un violon prêt à le confirmer?

— Kapil Sharma

28

Une feuille de style d'agent utilisateur est une «feuille de style par défaut» fournie par le navigateur (par exemple, Chrome, Firefox, Edge, etc.) afin de présenter la page d'une manière qui réponde aux «attentes générales de présentation». Par exemple, une feuille de style par défaut fournirait des styles de base pour des éléments tels que la taille de la police, les bordures et l'espacement entre les éléments. Il est courant d'utiliser une feuille de style réinitialisée pour traiter les incohérences entre les navigateurs.

De la spécification ...

La feuille de style par défaut d'un agent utilisateur doit présenter les éléments du langage du document de manière à satisfaire les attentes générales de présentation du langage du document. ~ La cascade .

Pour plus d'informations sur les agents utilisateurs en général, voir Agent utilisateur .

— Kenneth Stoddard
source

15

Répondre à la question dans le titre, quelle est la feuille de style de l'agent utilisateur, l'ensemble des styles par défaut dans le navigateur: Voici certains d'entre eux (et les plus pertinents également sur le Web d'aujourd'hui):

Gecko (Firefox): https://dxr.mozilla.org/mozilla-central/source/layout/style/res/html.css
Chrome (Chrome): https://chromium.googlesource.com/chromium/src/third_party/+/master/blink/renderer/core/html/resources/html.css
WebKit (Safari): https://trac.webkit.org/browser/trunk/Source/WebCore/css/html.css

Opinion personnelle: ne vous battez pas avec eux. Ils ont de bonnes valeurs par défaut, par exemple, dans les cas rtl / bidi et sont cohérents de nos jours. Réinitialisez ce que vous voyez non pertinent pour vous, pas tous en même temps.

— Ebrahim Byagowi
source

12

Définissez les valeurs que vous ne souhaitez pas utiliser à partir du style d'agent utilisateur de Chrome dans votre propre contenu CSS.

— BenM
source

4

Certains navigateurs utilisent leur propre méthode pour lire les fichiers .css. Donc, la bonne façon de battre ceci: Si vous tapez la ligne de commande directement dans le code source .html, cela bat le fichier .css, de cette façon, vous avez dit directement au navigateur ce qu'il faut faire et le navigateur est en position de ne pas lire les commandes du fichier .css. N'oubliez pas que les commandes écrites dans le fichier .html sont plus fortes que la commande dans le fichier .css.

— rollin_jeksun
source

1

J'ai eu le même problème qu'un de mes <div> avait la marge définie par le navigateur. C'était assez ennuyeux, mais j'ai compris, comme la plupart des gens l'ont dit, que c'était une erreur de balisage.

Je suis retourné et j'ai vérifié ma section <head> et mon lien CSS était comme ci-dessous:

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

Je l'ai inclus et l'ai typefait comme ci-dessous:

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

Mon problème a été résolu.

— Appy Sharma
source

0

Chaque navigateur fournit une feuille de style par défaut, appelée feuille de style de l'agent utilisateur, au cas où un fichier HTML n'en spécifierait pas. Les styles que vous spécifiez remplacent les valeurs par défaut.

Étant donné que vous n'avez pas spécifié de valeurs pour la zone de l'élément de tableau, les styles par défaut ont été appliqués.

— premier postcommentaire
source

0

Je voulais juste développer la réponse de @BenM sur la base de ce que j'ai lu ici d'Ire Aderinokun. Étant donné que la feuille de style de l'agent utilisateur fournit un style par défaut utile, réfléchissez-y à deux fois avant de la remplacer.

J'ai eu une erreur stupide lorsqu'un élément de bouton ne semblait pas bien dans Chrome. Je l'avais partiellement stylisé parce que je ne voulais pas qu'il ressemble à un bouton traditionnel. Cependant, j'ai omis des éléments de style comme la bordure, la couleur de la bordure, etc. Donc, Chrome intervenait pour fournir les pièces qu'il pensait me manquer.

Le problème a disparu une fois que j'ai ajouté des styles comme border: none, etc.

Donc, si quelqu'un d'autre rencontre ce problème, assurez-vous que vous remplacez explicitement tous les styles d'agent utilisateur par défaut applicables pour un élément si vous remarquez qu'il semble bancal, surtout si vous ne voulez pas réinitialiser complètement les styles d'agent utilisateur. Ça a marché pour moi.

— Brent Miller
source

Cela ne devrait-il pas être un commentaire plutôt qu'une réponse?

— Peter Mortensen

@PeterMortensen oui, mais je ne peux pas laisser de commentaires - pas assez de réputation.

— Brent Miller

-1

J'ai une solution. Vérifiez ça:

Erreur

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

Correct

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

— Vinkal Chandel
source

2

Veuillez modifier pour expliquer comment cela fonctionne et pourquoi cela aide.

— Yunnosch

-6

Mettez le code suivant dans votre fichier CSS:

table {
    font-size: inherit;
}

— Srikanth
source

2

Cela n'ajoute vraiment rien de nouveau à ce post. Il y a déjà une réponse acceptée, ainsi que 5 autres réponses, veuillez donc ne pas poster de réponses tardives.

— Kaspar Lee