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

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

beaucoup D'éléments HTML viennent avec quelques propriétés CSS par défaut qui peuvent parfois entraîner un comportement inconnu/indésirable. Par exemple, les boîtes de saisie sont affichées différemment dans différents navigateurs. Je cherche un endroit qui couvre les nouvelles propriétés CSS3 et les nouveaux éléments HTML5.

j'ai vu dans d'autres (beaucoup plus anciennes) questions (telles que Browsers 'default CSS stylesheets ) des réponses qui suggèrent une solution de reset 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 boîtes d'entrée dans Chrome). En d'autres termes: Je ne veux pas me débarrasser des choses juste parce que je ne sais pas ce qu'ils font .

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

115
demandé sur Community 2011-07-29 04:08:18

3 réponses

un dépôt GitHub de toutes les spécifications HTML du W3C et des feuilles de style CSS par défaut du vendeur peut être trouvé ici

1. les Styles par Défaut de 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. Default Styles for HTML4 (W3C spec)

6. Default Styles for HTML5 (W3C spec)

Exemple, pour la valeur par défaut du W3C HTML4 spec: 

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 }
}
60
répondu SW4 2017-07-20 23:18:14

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

vous pouvez également regarder la HTML5 Boilerplate stylesheet , qui " normalise l'affichage de beaucoup de choses sans être une réinitialisation au sens traditionnel". Elle corrige également quelques bugs/incohérences.

il est également intéressant de regarder: https://github.com/necolas/normalize.css/blob/master/normalize.css

102
répondu thirtydot 2017-07-20 23:16:19

bien qu'il s'agisse d'un vieux problème de navigateur croisé, car chaque navigateur a son propre rendu et comportement avec certains éléments html comme medias et éléments d'entrées, nous pouvons maintenant en 2017 utiliser assez en toute sécurité le CSS filtres proprety sur le dessus d'eux.

cela permet de donner une palette de couleurs avec le filtre hue-rotate qui va rendre assez bien les navigateurs croisés.

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

pour utiliser uniquement css, Il est obligatoire d'utiliser chacun de ces filtres: sépia pas à 0, saturation élevée, échelle de gris à 0, contraste élevé, puis donner une couleur avec la propriété huue-rotate, en suivant mes tests. Le filtre inversé n'est pas obligatoire, mais il produit des effets profonds.

aussi, le filtre goutte-ombre fonctionne plutôt bien croix-navigateur. Pour être utilisé comme ceci: filtre: drop-shadow (2px 20px 50px rouge) [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 fait autour des filtres css, d'où viennent ces notes:

https://github.com/webdev23/ponyFilters

exemple de code plus complet:

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

0
répondu Cryptopat 2017-04-20 03:21:46