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

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)?

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

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

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

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

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

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>

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/