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

Question

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

Demandé el 25 de Septembre, 2012: Quand la question a-t-elle été
87118 affichage: Nombre de visites la question a
5 Réponses: Nombre de réponses aux questions
Résolu: Situation réelle de la question

Je travaille sur une page web dans Google Chrome. Elle 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 de Chrome, il est indiqué 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;
}

El font-size de 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 ?

Demandé el 25 de Septembre, 2012 par Kapil Sharma

4 votes

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

Commenté el 30 de Avril, 2014 par givanse

10 votes

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

Commenté el 14 de Juin, 2016 par John

1 votes

Videz le cache de chrome dans plus d'outils -> Effacer les données de navigation.

Commenté el 4 de Mars, 2017 par doford

Afficher 1 autres commentaires

Answer 1

5 Réponses

Answer 2

303voto

deleted account Points 1386

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

Répondu el 25 de Septembre, 2012 par deleted account (1386 Points )

0 votes

Merci Oli. Y a-t-il un effet secondaire à la suppression des CSS par défaut du navigateur ? Je suppose que ce n'est pas recommandé, n'est-ce pas ? Je dois choisir entre votre réponse (réinitialisation) et la réponse de @BenM qui consiste à remplacer le style par le nôtre. Une idée de l'approche recommandée ?

Commenté el 25 de Septembre, 2012 par Kapil Sharma

21 votes

Je réinitialise/normalise toujours mon CSS avant chaque projet, de cette façon vous avez un terrain "presque" égal entre 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 faites une recherche rapide sur Google, vous trouverez que c'est recommandé.

Commenté el 25 de Septembre, 2012 par deleted account

2 votes

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

Commenté el 28 de Octobre, 2014 par phyzome

Afficher 5 autres commentaires

Answer 3

200voto

Jesper Mygind Points 2046

Si <!DOCTYPE> n'est pas présent dans votre contenu HTML, il se peut que le navigateur donne la préférence à la "feuille de style de l'agent utilisateur" plutôt qu'à votre feuille de style personnalisée. L'ajout du doctype corrige ce problème.

Répondu el 22 de Octobre, 2015 par Jesper Mygind (2046 Points )

11 votes

C'est un bon indice. Vous m'avez fait gagner du temps dans mes recherches. Il faut noter que dans mon cas, j'avais cette déclaration de doctype mais j'avais un script avant. Il semble que le DOCTYPE doit arriver en premier dans la page pour entrer en considération.

Commenté el 8 de Novembre, 2015 par Sebas

4 votes

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

Commenté el 16 de Juin, 2017 par Ralph Tee

4 votes

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

Commenté el 20 de Février, 2018 par Steve Zelaznik

Afficher 9 autres commentaires

Answer 4

139voto

Jukka K. Korpela Points 71599

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

Les feuilles de style des agents utilisateurs sont remplacées par tout ce que vous avez défini dans votre propre feuille de style. Elles ne sont que le point de départ : en l'absence de toute feuille de style fournie par la page ou par l'utilisateur, le navigateur doit toujours rendre le contenu. en quelque sorte et la feuille de style de l'agent utilisateur ne fait que le décrire.

Ainsi, si vous pensez avoir un problème avec la feuille de style d'un agent utilisateur, alors vous avez vraiment un problème avec votre balisage, ou votre feuille de style, ou les deux (sur lesquels vous n'avez rien écrit).

Répondu el 25 de Septembre, 2012 par Jukka K. Korpela (71599 Points )

1 votes

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

Commenté el 30 de Avril, 2014 par Jukka K. Korpela

0 votes

@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 balle dans votre jsfiddle est simplement une balle pour la feuille de style utilisateur. li et votre feuille de style ne le remplace pas.

Commenté el 30 de Avril, 2014 par Jukka K. Korpela

0 votes

Dans mon cas, il s'agissait d'un problème de spécification CSS, mais ces informations sur l'agent utilisateur étaient également utiles.

Commenté el 9 de Novembre, 2021 par Nora McDougall-Collins

Answer 5

59voto

Daniel Points 993

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

<!DOCTYPE html>
<html>...

Répondu el 13 de Août, 2015 par Daniel (993 Points )

14 votes

Pouvez-vous m'expliquer comment cela est censé fonctionner ? Comment HTML 5 est associé aux styles indéfinis ? Je vais confirmer mais avez-vous un truc prêt à être utilisé pour le confirmer ?

Commenté el 17 de Août, 2015 par Kapil Sharma

Answer 6

50voto

Kenneth Stoddard Points 626

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 satisfait aux "attentes générales en matière de présentation". Par exemple, une feuille de style par défaut fournit 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 réinitialiser pour gérer les incohérences entre les navigateurs.

Du cahier des charges...

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

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

Répondu el 20 de Février, 2016 par Kenneth Stoddard (626 Points )

0 votes

J'ai l'impression que cela répond plus à la question qu'à la réponse acceptée...

Commenté el 11 de Mai, 2021 par Erik

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

Réponses

Questions en vedette

Top Tags

Prograide.com

Powered by:

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

Réponses

Questions en vedette

Top Tags

Dans notre réseau

Prograide.com

Powered by: