Browsers' default CSS for HTML elements

It's different for each browser, so:

Firefox (Gecko): https://dxr.mozilla.org/mozilla-central/source/layout/style/res/html.css. Or, browse to resource://gre-resources/ and look at 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

Chrome (Blink): https://chromium.googlesource.com/chromium/blink/+/master/Source/core/css/html.css

Internet Explorer (Trident), older versions: http://web.archive.org/web/20170122223926/http://www.iecss.com/

You can also look at the HTML5 Boilerplate stylesheet, which "normalizes the display of a lot of stuff without being a reset in the traditional sense". It also fixes quite a few bugs/inconsistencies.

It's also worth looking at: https://github.com/necolas/normalize.css/blob/master/normalize.css

---

A GitHub repository of all W3C HTML spec and vendor default CSS stylesheets can be found here

Default Styles for Gecko / Firefox -- Default Styles for Internet Explorer -- Default Styles for Webkit / Safari -- Default Styles for Blink / Chrome -- Default Styles for Opera -- Default Styles for HTML4 (W3C spec) -- Default Styles for HTML5 (W3C spec) --

Sample, per the default 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 }
}

---

No one has mentioned any source for the CSS defaults in Edge. I looked, and I couldn't find anything authoritative, but I found this stylesheet that looks plausible: https://gist.github.com/jonathantneal/abc52743caa0a019d359ec4ba2ce965b

---

While this is an old cross browser problem, as each browsers has his own rendering and behavior with some html elements like medias and inputs elements, we can now in 2017 use pretty safely the css filters proprety on top of them.

This allow to give a color palette with the hue-rotate filter that will render pretty well cross browsers.

The following snippets show a way to use a input type color to render this effect in realtime on a video element with javascript.

To use only css, this is mandatory to use each one of this filters: sepia not at 0, high saturation, grayscale at 0, high contrast, and then give a color with the hue-rotate property, following my tests. The invert filter isn't mandatory, but is giving some deep effects.

As well, the drop-shadow filter is working pretty nicely cross browser. To be use like this: filter:drop-shadow(2px 20px 50px red) [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:

Can i use css filters:

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

A toolbar I made around css filters, from where are coming this notes:

https://github.com/webdev23/ponyFilters

A more complete codepen example:

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

---