Standard-CSS von Browsern für HTML-Elemente

146

Wo finde ich das Standard-CSS eines Browsers für HTML-Elemente?

Viele HTML-Elemente verfügen über einige Standard-CSS-Eigenschaften, die manchmal zu unbekanntem / unerwünschtem Verhalten führen können. Beispielsweise werden Eingabefelder in verschiedenen Browsern unterschiedlich angezeigt. Ich suche einen Ort, der die neuen CSS3-Eigenschaften und die neuen HTML5-Elemente abdeckt.

Ich habe in anderen (viel älteren) Fragen (wie den Standard-CSS-Stylesheets von Browsern ) Antworten gesehen, die eine Lösung für das Zurücksetzen von CSS vorschlagen. Diese Lösung ist manchmal nicht erwünscht, oft möchte ich tatsächlich einige der grundlegenden Eigenschaften beibehalten (z. B. das Hervorheben von Eingabefeldern in Chrome). Mit anderen Worten: Ich möchte Dinge nicht loswerden, nur weil ich nicht weiß, was sie tun .

So, Gibt es eine Website , die mir alle diese Informationen geben können (oder vielleicht die meisten)?

Nachshon Schwartz
quelle
3
Keine Site, aber in den Chrome Devleoper-Tools werden die geerbten CSS-Regeln angezeigt, und die mit "User Agent Stylesheet" gekennzeichneten Regeln zeigen die Chrome-Regeln an. Entschuldigung, ich könnte nicht mehr helfen. auch: dowebsitesneedtolookexactlythesameineverybrowser.com
James Khoury
2
Gute Frage! Ich bin damit einverstanden, dass es irgendwo einen Ort geben muss, an dem all diese Informationen verfügbar sind.
Nur eine Anmerkung, die reset.css stoppt nicht die grundlegenden Dinge. Ihre Eingabefelder werden in Chrome weiterhin hervorgehoben. Sie verlieren nur die zufälligen Padding-Unterschiede zwischen den Browsern. Sie können also in allen Browsern mit dem gleichen Verhalten beginnen (Auffüllen / Rand / ... weise).
Jules
1
@ James Khoury - Gilt auch für Firebug.
Rob
@ Rob natürlich! Ich habe Firebug vergessen
James Khoury

Antworten:

93

Ein GitHub-Repository aller W3C-HTML-Spezifikationen und Hersteller-Standard-CSS-Stylesheets finden Sie hier

1. Standardstile für Firefox

2. Standardstile für Internet Explorer

3. Standardstile für Chrome / Webkit

4. Standardstile für Opera

5. Standardstile für HTML4 (W3C-Spezifikation)

6. Standardstile für HTML5 (W3C-Spezifikation)

Beispiel gemäß der Standard-W3C-HTML4-Spezifikation:

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
quelle
Nebenbei bemerkt ist es interessant, Dinge wie das berüchtigte nobrTag im HTML5-Stylesheet des W3C zu sehen.
tomasz86
noch auf dem neuesten Stand?
Webwoman
Der Link für Firefox enthält nicht alle Standardeinstellungen. Beispielsweise enthält es nicht das Standard-CSS für den Textbereich. Sie finden dies in der Ressource: //gre-resources/forms.css. Durchsuchen Sie im Allgemeinen die Dateien in resource: // gre-resources, um alle Standardinformationen zu finden. Oder für alle Browser siehe html.spec.whatwg.org/multipage/rendering.html .
David Spector
117

Es ist für jeden Browser anders, also:

Sie können sich auch das HTML5 Boilerplate-Stylesheet ansehen , das "die Anzeige vieler Dinge normalisiert, ohne im herkömmlichen Sinne zurückgesetzt zu werden". Es behebt auch einige Fehler / Inkonsistenzen.

Es lohnt sich auch einen Blick darauf zu werfen : https://github.com/necolas/normalize.css/blob/master/normalize.css

dreißig Punkte
quelle
2
Was, komischerweise, meistens das gleiche ist, auf das ich in meiner Antwort auf die oben verlinkte Frage verwiesen habe, die anscheinend "veraltet" ist. Obwohl ich den IE-Link erst vor 2 Tagen hinzugefügt habe.
Robertc
1
@nayish Was gibt es Ihrer Meinung nach außer den Standardeinstellungen des Browsers noch?
Robertc
1
@nayish Es gibt keine separate Definition des Standard-CSS für HTML-Elemente außerhalb dessen, was Browser in ihren Standard-Stylesheets implementiert haben
robertc
1
@nayish Das ist für jede einzelne Eigenschaft in der Spezifikation angegeben , beachten Sie jedoch, dass die Deckkraft nicht im CSS-Sinne
vererbt wird
2
Nur eine Anmerkung, HTML5 Boilerplate ist viel mehr als die Normalisierung von CSS. Um nur CSS zu normalisieren, verwenden sie das Normalize-Tool: necolas.github.com/normalize.css
Warten auf Dev ...
0

Während dies ein altes browserübergreifendes Problem ist, da jeder Browser sein eigenes Rendering und Verhalten mit einigen HTML-Elementen wie Medien und Eingabeelementen hat , können wir 2017 die darüber liegenden CSS- Filter ziemlich sicher verwenden .

Dies ermöglicht es, eine Farbpalette mit dem Farbton-Dreh- Filter zu erstellen, die Browser-übergreifend gut wiedergibt.

Die folgenden Ausschnitte zeigen eine Möglichkeit, eine Farbe vom Typ Eingabe zu verwenden , um diesen Effekt in Echtzeit auf einem Videoelement mit Javascript zu rendern.

Um nur CSS zu verwenden, ist es obligatorisch, jeden dieser Filter zu verwenden: Sepia nicht bei 0, hohe Sättigung, Graustufen bei 0, hoher Kontrast, und dann nach meinen Tests eine Farbe mit der Eigenschaft "Farbton drehen" zu geben. Der Invertierungsfilter ist nicht obligatorisch, bietet jedoch einige tiefe Effekte.

Auch der Schlagschattenfilter funktioniert im Browser ziemlich gut. So zu verwenden: Filter: Schlagschatten (2 x 20 x 50 Pixel rot) [X, Y, RADIUS, FARBE]

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>

Kann ich CSS-Filter verwenden:

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

Eine Symbolleiste, die ich um CSS-Filter erstellt habe. Woher kommen diese Hinweise:

https://github.com/webdev23/ponyFilters

Ein vollständigeres Codepen-Beispiel:

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

NVRM
quelle
Es scheint ein bisschen beiseite zu sein, du hast recht! Dies war meine harte Arbeit zu diesem Zeitpunkt. Da dies nur CSS ist, ändert dies nichts am Verhalten der Browserelemente, kann jedoch eine Möglichkeit bieten, diese Art von Elementen in jedem Browser mit identischer Farbe / Helligkeit zu rendern, ohne für jedes Element einen speziellen Code zu schreiben. Dies war zum Zeitpunkt der Frage nicht möglich. Vielen Dank.
NVRM