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

Question

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

De nombreux éléments HTML sont fournis avec des propriétés CSS par défaut qui peuvent parfois donner lieu à un comportement inconnu ou indésirable. Par exemple, les zones de saisie s'affichent différemment selon les navigateurs. Je suis à la recherche d'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 Feuilles de style CSS par défaut des navigateurs ) réponses qui suggèrent une solution de remise à zéro des 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 de choses juste parce que je ne sais pas à quoi elles servent. .

Donc, Existe-t-il un site qui puisse me donner toutes ces informations (ou peut-être la plupart) ?

Answer 1

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

• Firefox (Gecko) : https://dxr.mozilla.org/mozilla-central/source/layout/style/res/html.css . Ou bien, naviguez jusqu'à resource://gre-resources/ et regarder html.css .
• Chrome/Safari (WebKit) : http://trac.webkit.org/browser/trunk/Source/WebCore/css/html.css
  • Chrome (Blink) : https://chromium.googlesource.com/chromium/blink/+/master/Source/core/css/html.css
• Internet Explorer (Trident) des versions plus anciennes : http://web.archive.org/web/20170122223926/http://www.iecss.com/

Vous pouvez également consulter le Feuille de style HTML5 Boilerplate qui "normalise l'affichage d'un grand nombre de choses sans être une réinitialisation au sens traditionnel du terme". Il corrige également un certain nombre de bogues et d'incohérences.

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

Answer 2

Un dépôt GitHub de toutes les feuilles de style CSS par défaut des spécifications HTML du W3C et des fournisseurs se trouve à l'adresse suivante aquí

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 du W3C)

Exemple, selon la spécification HTML4 du W3C :

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

Answer 3

Bien qu'il s'agisse d'un vieux problème lié au croisement des navigateurs, car chaque navigateur a son propre rendu et son propre comportement avec certains éléments html comme les médias et les éléments d'entrée, nous pouvons maintenant en 2017 utiliser de manière assez sûre le css filtres propriété sur eux.

Cela permet de donner une palette de couleurs avec le teinte-rotation qui s'affiche bien sur tous les navigateurs.

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

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

En outre, le filtre d'ombres portées fonctionne très bien d'un navigateur à l'autre. A utiliser comme ceci : filter:drop-shadow(2px 20px 50px red) [X,Y,RAYON,COULEUR]

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>

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ù proviennent ces notes :

https://github.com/webdev23/ponyFilters

Un exemple de codepen plus complet :

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

Answer 4

Personne n'a mentionné de source pour les valeurs par défaut CSS dans Edge. J'ai cherché, et je n'ai rien trouvé qui fasse autorité, mais j'ai trouvé cette feuille de style qui semble plausible : https://gist.github.com/jonathantneal/abc52743caa0a019d359ec4ba2ce965b