web-dev-qa-db-fra.com

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 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 questions (beaucoup plus anciennes) (telles que des réponses aux feuilles de style CSS par défaut des navigateurs ) suggérer une solution de réinitialisation CSS. Cette solution n’est parfois pas souhaitée, mais j’aimerais souvent conserver certaines des propriétés de base (telles que la mise en surbrillance des zones de saisie dans Chrome). En d'autres termes: je ne veux pas me débarrasser de choses simplement parce que je ne sais pas ce qu'elles font.

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

htmlcsscross-browser
121
Nayish

Vous trouverez un référentiel GitHub contenant toutes les feuilles de style CSS par défaut des spécifications HTML et du fournisseur W3C 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éc. W3C)

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

Exemple, conforme aux spécifications W3C HTML4 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 }
}
68
SW4

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

Vous pouvez également consulter/ HTML5 Boilerplate stylesheet , qui "normalise l’affichage de nombreuses choses sans être une réinitialisation au sens traditionnel du terme". Cela corrige également pas mal de bugs/incohérences.

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

106
thirtydot

Bien qu’il s’agisse d’un vieux problème de navigation croisée, étant donné que chaque navigateur a son propre rendu et comportement avec certains éléments html tels que les éléments médias et les éléments d’entrée, nous pouvons dès à présent utiliser en 2017 avec assez de sécurité la propriété css filters qui les surmonte.

Cela permet de donner une palette de couleurs avec le filtre hue-rotate qui rendra assez bien les navigateurs.

Les extraits suivants montrent comment utiliser une couleur de type input pour restituer cet effet en temps réel sur un élément vidéo avec javascript.

Pour utiliser uniquement les fichiers 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 à la suite de mes tests. Le filtre d'inversion n'est pas obligatoire, mais donne des effets profonds.

De plus, le filtre ombre portée fonctionne assez bien dans plusieurs navigateurs . Pour être utilisé comme ceci: filtre: ombre portée (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 les filtres CSS:

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

Une barre d’outils que j’ai faite autour des filtres css, d’où viennent ces notes:

https://github.com/webdev23/ponyFilters

Un exemple de code plus complet:

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

0
Cryptopat