Browsers' default CSS for HTML elements

156
votes

Where can I find a browser's default CSS for HTML elements?

Many HTML elements come with some default CSS properties which can sometimes result in unknown/unwanted behaviour. For example Input boxes are displayed differently in different browsers. I'm looking for a place that covers the new CSS3 properties and the new HTML5 elements.

I've seen in other (much older) questions (such as Browsers' default CSS stylesheets) answers that suggest a solution of CSS reset. This solution is sometimes not wanted, often I would actually like to keep some of the basic properties (such as the highlighting of input boxes in Chrome). In other words: I don't want to get rid of things just because I don't know what they do.

So, Is there a site that can give me all this information (or perhaps most)?

4
htmlcsscross-browser
Not a site but in the chrome devleoper tools it shows the inherited css rules and the ones marked "user agent stylesheet" will show the chrome ones. Sorry i couldn't be more help. also: dowebsitesneedtolookexactlythesameineverybrowser.com – James Khoury
Just a note, the reset.css does not stop the basic things. Your input boxes will still be highlighted in Chrome. You'll just lose the random padding-differences across the browsers. So you can start off with the same behavior in all browsers (padding/margin/... wise). – Jules
@James Khoury - Also true of Firebug. – Rob
@nayish: “For example Input boxes are displayed differently in different browsers.” — Specifically regarding form fields, their styles can’t be entirely described using CSS. See meyerweb.com/eric/thoughts/2007/05/15/formal-weirdness and webkit.org/blog/51/text-fields – Paul D. Waite
possible duplicate of How can I locate the default style sheet for a browser? – Piotr Dobrogost

4 Answers

108
votes

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

1. Default Styles for Firefox

2. Default Styles for Internet Explorer

3. Default Styles for Chrome / Webkit

4. Default Styles for Opera

5. Default Styles for HTML4 (W3C spec)

6. 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 }
}
120
votes

It's different for each browser, so:

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

1
votes

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

0
votes

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

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/