CSS par défaut des navigateurs pour les éléments HTML

146

Où puis-je trouver le CSS par défaut d'un navigateur pour les éléments HTML?

De nombreux éléments HTML sont livrés avec des propriétés CSS par défaut qui peuvent parfois entraîner un comportement inconnu / indésirable. Par exemple, les zones de saisie s'affichent différemment dans différents navigateurs. Je recherche un endroit qui couvre les nouvelles propriétés CSS3 et les nouveaux éléments HTML5.

J'ai vu dans d'autres questions (beaucoup plus anciennes) (telles que les feuilles de style CSS par défaut des navigateurs ) des réponses qui suggèrent une solution de réinitialisation CSS. Cette solution n'est parfois pas souhaitée, souvent j'aimerais en fait conserver certaines des propriétés de base (comme la mise en évidence des zones de saisie dans Chrome). En d'autres termes: je ne veux pas me débarrasser des choses simplement parce que je ne sais pas ce qu'elles font .

Alors, y a-t-il un site qui peut me donner toutes ces informations (ou peut-être la plupart)?

html css cross-browser Nachshon Schwartz
la source
3
Ce n'est pas un site mais dans les outils de développement de chrome, il montre les règles css héritées et celles marquées "feuille de style de l'agent utilisateur" afficheront celles de chrome. Désolé, je ne pourrais pas être plus utile. aussi: dowebsitesneedtolookexactlythesameineverybrowser.com
James Khoury
2
Excellente question! Je suis d'accord, il doit y avoir quelque part où toutes ces informations sont disponibles.
Juste une note, le reset.css n'arrête pas les choses de base. Vos zones de saisie seront toujours mises en évidence dans Chrome. Vous perdrez simplement les différences de remplissage aléatoires entre les navigateurs. Vous pouvez donc commencer avec le même comportement dans tous les navigateurs (padding / margin / ... sage).
Jules
1
@James Khoury - Également vrai pour Firebug.
Rob
@Rob bien sûr! J'ai oublié Firebug
James Khoury

Réponses:

93

Un référentiel GitHub de toutes les spécifications HTML du W3C et des feuilles de style CSS par défaut du fournisseur peut être trouvé ici

1. Styles par défaut pour Firefox

2. Styles par défaut pour Internet Explorer

3. Styles par défaut pour Chrome / Webkit

4. Styles par défaut pour Opera

5. Styles par défaut pour HTML4 (spécification W3C)

6. Styles par défaut pour HTML5 (spécification W3C)

Exemple, conformément aux spécifications HTML4 du W3C par défaut:

html, address,
blockquote,
body, dd, div,
dl, dt, fieldset, form,
frame, frameset,
h1, h2, h3, h4,
h5, h6, noframes,
ol, p, ul, center,
dir, hr, menu, pre   { display: block; unicode-bidi: embed }
li              { display: list-item }
head            { display: none }
table           { display: table }
tr              { display: table-row }
thead           { display: table-header-group }
tbody           { display: table-row-group }
tfoot           { display: table-footer-group }
col             { display: table-column }
colgroup        { display: table-column-group }
td, th          { display: table-cell }
caption         { display: table-caption }
th              { font-weight: bolder; text-align: center }
caption         { text-align: center }
body            { margin: 8px }
h1              { font-size: 2em; margin: .67em 0 }
h2              { font-size: 1.5em; margin: .75em 0 }
h3              { font-size: 1.17em; margin: .83em 0 }
h4, p,
blockquote, ul,
fieldset, form,
ol, dl, dir,
menu            { margin: 1.12em 0 }
h5              { font-size: .83em; margin: 1.5em 0 }
h6              { font-size: .75em; margin: 1.67em 0 }
h1, h2, h3, h4,
h5, h6, b,
strong          { font-weight: bolder }
blockquote      { margin-left: 40px; margin-right: 40px }
i, cite, em,
var, address    { font-style: italic }
pre, tt, code,
kbd, samp       { font-family: monospace }
pre             { white-space: pre }
button, textarea,
input, select   { display: inline-block }
big             { font-size: 1.17em }
small, sub, sup { font-size: .83em }
sub             { vertical-align: sub }
sup             { vertical-align: super }
table           { border-spacing: 2px; }
thead, tbody,
tfoot           { vertical-align: middle }
td, th, tr      { vertical-align: inherit }
s, strike, del  { text-decoration: line-through }
hr              { border: 1px inset }
ol, ul, dir,
menu, dd        { margin-left: 40px }
ol              { list-style-type: decimal }
ol ul, ul ol,
ul ul, ol ol    { margin-top: 0; margin-bottom: 0 }
u, ins          { text-decoration: underline }
br:before       { content: "\A"; white-space: pre-line }
center          { text-align: center }
:link, :visited { text-decoration: underline }
:focus          { outline: thin dotted invert }

/* Begin bidirectionality settings (do not change) */
BDO[DIR="ltr"]  { direction: ltr; unicode-bidi: bidi-override }
BDO[DIR="rtl"]  { direction: rtl; unicode-bidi: bidi-override }

*[DIR="ltr"]    { direction: ltr; unicode-bidi: embed }
*[DIR="rtl"]    { direction: rtl; unicode-bidi: embed }

@media print {
  h1            { page-break-before: always }
  h1, h2, h3,
  h4, h5, h6    { page-break-after: avoid }
  ul, ol, dl    { page-break-before: avoid }
}
SW4
la source
En passant, il est intéressant de voir des choses comme la fameuse nobrbalise dans la feuille de style HTML5 du W3C.
tomasz86
toujours à jour?
Webwoman
Le lien pour Firefox ne contient pas toutes les valeurs par défaut. Par exemple, il ne contient pas le css par défaut pour textarea. Vous pouvez trouver cela dans resource: //gre-resources/forms.css. En général, parcourez les fichiers dans resource: // gre-resources pour trouver toutes les informations par défaut. Ou pour tous les navigateurs, voir html.spec.whatwg.org/multipage/rendering.html .
David Spector
117

C'est différent pour chaque navigateur, donc:

Vous pouvez également consulter la feuille de style HTML5 Boilerplate , qui "normalise l'affichage de beaucoup de choses sans être une réinitialisation au sens traditionnel du terme". Il corrige également pas mal de bogues / incohérences.

Cela vaut également la peine de regarder: https://github.com/necolas/normalize.css/blob/master/normalize.css

trentenaire
la source
2
Ce qui, curieusement, est principalement le même que celui auquel j'ai fait référence dans ma réponse à la question liée à ci-dessus qui est, apparemment, `` dépassée ''. Bien que je n'aie ajouté le lien IE à cela il y a 2 jours.
robertc
1
@nayish Que pensez-vous qu'il y a d'autre à part les paramètres par défaut du navigateur?
robertc
1
@nayish Il n'y a pas de définition distincte du CSS par défaut pour les éléments HTML en dehors de ce que les navigateurs ont implémenté dans leurs feuilles de style par défaut
robertc
1
@nayish Cela est spécifié pour chaque propriété individuelle dans la spécification , mais notez que l'opacité n'est pas héritée au sens CSS
robertc
2
Juste une note, HTML5 passe-partout est bien plus que normaliser CSS. Pour normaliser simplement le CSS, ils utilisent l'outil Normaliser: necolas.github.com/normalize.css
Waiting for Dev ...
0

Bien qu'il s'agisse d'un vieux problème de navigateur croisé, comme chaque navigateur a son propre rendu et son propre comportement avec certains éléments html tels que les médias et les éléments d'entrée, nous pouvons maintenant en 2017 utiliser en toute sécurité les filtres css par-dessus.

Cela permet de donner une palette de couleurs avec le filtre de rotation de teinte qui rendra assez bien les navigateurs croisés.

Les extraits de code suivants montrent un moyen d'utiliser une couleur de type d'entrée pour rendre cet effet en temps réel sur un élément vidéo avec javascript.

Pour n'utiliser que css, il est obligatoire d'utiliser chacun de ces filtres: sépia pas à 0, saturation élevée, niveaux de gris à 0, contraste élevé, puis donner une couleur avec la propriété hue-rotate, suite à mes tests. Le filtre inversé n'est pas obligatoire, mais donne des effets profonds.

De plus, le filtre d'ombre portée fonctionne assez bien dans tous les navigateurs. À utiliser comme ceci: filtre: ombre portée (2px 20px 50px rouge) [X, Y, RADIUS, COLOR]

function styloElem() {
  stylo.dataset.hue = ((parseInt(stylo.value.substring(1), 16))/46666).toFixed(0)
  
  media.style.cssText += ";filter:sepia(100%) saturate(1000%)grayscale(0)contrast(200%)hue-rotate("+ stylo.dataset.hue+"deg)invert("+(stylo.dataset.hue/3.6)+"%)"

}
styloElem()
body {
  text-align:center;
  background:#001;
  color: white
}
video {
  width:500px;max-width:500px
}
Colors: 
<input 
       type="color"
       id="stylo"
       oninput="styloElem()"
       class="media"
       data-hue="0" />

<br><br> 

<video 
       controls
       id="media"        
       onplay="this.removeAttribute('controls');this.style.all='unset'"     
       onpause="this.controls='controls';styloElem()"
       src="https://ia600206.us.archive.org/7/items/MysteresDarchives-Saison04/1944%2c%20Dans%20le%20maquis%20du%20Vercors.ogv"></video>
Développer l'extrait

Puis-je utiliser des filtres CSS:

http://caniuse.com/#feat=css-filters

Une barre d'outils que j'ai créée autour des filtres css, d'où viennent ces notes:

https://github.com/webdev23/ponyFilters

Un exemple de codepen plus complet:

http://codepen.io/Nico_KraZhtest/pen/bWExEB/

NVRM
la source
Cela semble être un peu à l'écart, vous avez raison! C'était mon travail acharné à cette date. Comme il ne s'agit que de css, cela ne changera pas le comportement des éléments du navigateur, mais peut donner un moyen de rendre ce type d'éléments avec une couleur / luminosité identique, dans n'importe quel navigateur, sans écrire de code spécial pour chacun d'eux. Ce n'était pas faisable au moment de la question. Merci.
NVRM