Permalink
Switch branches/tags
Nothing to show
Find file Copy path
Fetching contributors…
Cannot retrieve contributors at this time
682 lines (557 sloc) 18.8 KB
/*
HTML5 default styles.
By Christopher Boone: http://hypsometry.com/
Based on the examples in:
http://www.whatwg.org/specs/web-apps/current-work/multipage/rendering.html#the-css-user-agent-style-sheet-and-presentational-hints
Notes:
I've removed all references to elements and attributes that have been deprecated in HTML5.
There are additional rendering instructions in the spec that cannot be represented in abstract CSS.
Probably not all the CSS declared here is actually supported by browsers.
I've left out all the element bindings, since I believe only Mozilla supports that CSS property, and it currently
only supports it in a proprietary way.
I've added the details element to the list of those declared to be block level, since I think it must be, per the description: http://www.whatwg.org/specs/web-apps/current-work/multipage/interactive-elements.html#the-details-element
*/
@namespace url(http://www.w3.org/1999/xhtml);
/*
Display types
http://www.whatwg.org/specs/web-apps/current-work/multipage/rendering.html#display-types
*/
*[hidden], area, base, command, datalist, head,
input[type=hidden], link, menu[type=context], meta,
param, rp, script, source, style, title,
table > form, thead > form, tbody > form, tfoot > form, tr > form {
display: none;
}
address, article, aside, blockquote, body, details, dd, div, dl, dt,
figure, footer, form, h1, h2, h3, h4, h5, h6, header, hgroup, hr,
html, legend, menu, nav, ol, p, pre, section, ul {
display: block;
}
table {
display: table;
}
caption {
display: table-caption;
}
colgroup {
display: table-column-group;
}
col {
display: table-column;
}
thead {
display: table-header-group;
}
tbody {
display: table-row-group;
}
tfoot {
display: table-footer-group;
}
tr {
display: table-row;
}
td, th {
display: table-cell;
}
li {
display: list-item;
}
ruby {
display: ruby;
}
rt {
display: ruby-text;
}
/*
Margins and padding
http://www.whatwg.org/specs/web-apps/current-work/multipage/rendering.html#margins-and-padding
*/
blockquote, dl, figure, menu, ol, p, pre, ul {
margin-top: 1em;
margin-bottom: 1em;
}
dl dl, dl menu, dl ol, dl ul,
menu dl, menu menu, menu ol, menu ul,
ol dl, ol menu, ol ol, ol ul,
ul dl, ul menu, ul ol, ul ul {
margin-top: 0;
margin-bottom: 0;
}
h1 {
margin-top: 0.67em;
margin-bottom: 0.67em;
}
h2 {
margin-top: 0.83em;
margin-bottom: 0.83em;
}
h3 {
margin-top: 1.00em;
margin-bottom: 1.00em;
}
h4 {
margin-top: 1.33em;
margin-bottom: 1.33em;
}
h5 {
margin-top: 1.67em;
margin-bottom: 1.67em;
}
h6 {
margin-top: 2.33em;
margin-bottom: 2.33em;
}
/* Some of the following combinations might be unnecessary or impossible. */
article h1, aside h1, nav h1, section h1 {
margin-top: 0.83em;
margin-bottom: 0.83em;
}
article aside h1, article nav h1, article section h1,
aside article h1, aside nav h1, aside section h1,
nav article h1, nav aside h1, nav section h1,
section article h1, section aside h1, section nav h1, section section h1 {
margin-top: 1.00em;
margin-bottom: 1.00em;
}
article aside nav h1, article aside section h1,
article nav aside h1, article nav section h1,
article section aside h1, article section nav h1, article section section h1,
aside article nav h1, aside article section h1,
aside nav article h1, aside nav section h1,
aside section article h1, aside section nav h1, aside section section h1,
nav article aside h1, nav article section h1,
nav aside article h1, nav aside section h1,
nav section article h1, nav section aside h1, nav section section h1,
section article aside h1, section article nav h1, section article section h1,
section aside article h1, section aside nav h1, section aside section h1,
section nav article h1, section nav aside h1, section nav section h1,
section section article h1, section section aside h1, section section nav h1, section section section h1 {
margin-top: 1.33em;
margin-bottom: 1.33em;
}
article aside nav section h1, article aside section nav h1, article aside section section h1,
article nav aside section h1, article nav section aside h1, article nav section section h1,
article section aside nav h1, article section nav aside h1, article section section aside h1, article section section nav h1, article section section section h1,
aside article nav section h1, aside article section nav h1, aside article section section h1,
aside nav article section h1, aside nav section article h1, aside nav section section h1,
aside section article nav h1, aside section article section h1, aside section nav article h1, aside section nav section h1,
aside section section article h1, aside section section nav h1, aside section section section h1,
nav article aside section h1, nav article section aside h1, nav article section section h1,
nav aside article section h1, nav aside section article h1, nav aside section section h1,
nav section article aside h1, nav section article section h1, nav section aside article h1, nav section aside section h1,
nav section section article h1, nav section section aside h1, nav section section section h1,
section article aside nav h1, section article aside section h1,
section article nav aside h1, section article nav section h1,
section article section aside h1, section article section nav h1, section article section section h1,
section aside article nav h1, section aside article section h1,
section aside nav article h1, section aside nav section h1,
section aside section article h1, section aside section nav h1, section aside section section h1,
section nav article aside h1, section nav article section h1,
section nav aside article h1, section nav aside section h1,
section nav section article h1, section nav section aside h1, section nav section section h1,
section section article aside h1, section section article nav h1, section section article section h1,
section section aside article h1, section section aside nav h1, section section aside section h1,
section section nav article h1, section section nav aside h1, section section nav section h1,
section section section article h1, section section section aside h1, section section section nav h1, section section section section h1 {
margin-top: 1.67em;
margin-bottom: 1.67em;
}
article aside nav section section h1,
article aside section nav section h1,
article aside section section section h1,
article nav aside section h1,
article nav section aside section h1,
article nav section section section h1,
article section aside nav section h1,
article section nav aside section h1,
article section section aside section h1,
article section section nav section h1,
article section section section section h1,
aside article nav section section h1,
aside article section nav section h1,
aside article section section section h1,
aside nav article section section h1,
aside nav section article section h1,
aside nav section section section h1,
aside section article nav section h1,
aside section article section section h1,
aside section nav article section h1,
aside section nav section section h1,
aside section section article section h1,
aside section section nav section h1,
aside section section section section h1,
nav article aside section section h1,
nav article section aside section h1,
nav article section section section h1,
nav aside article section section h1,
nav aside section article section h1,
nav aside section section section h1,
nav section article aside section h1,
nav section article section section h1,
nav section aside article section h1,
nav section aside section section h1,
nav section section article section h1,
nav section section aside section h1,
nav section section section section h1,
section article aside nav section h1,
section article aside section section h1,
section article nav aside section h1,
section article nav section section h1,
section article section aside section h1,
section article section nav section h1,
section article section section section h1,
section aside article nav section h1,
section aside article section section h1,
section aside nav article section h1,
section aside nav section section h1,
section aside section article section h1,
section aside section nav section h1,
section aside section section section h1,
section nav article aside section h1,
section nav article section section h1,
section nav aside article section h1,
section nav aside section section h1,
section nav section article section h1,
section nav section aside section h1,
section nav section section section h1,
section section article aside section h1,
section section article nav section h1,
section section article section section h1,
section section aside article section h1,
section section aside nav section h1,
section section aside section section h1,
section section nav article section h1,
section section nav aside section h1,
section section nav section section h1,
section section section article section h1,
section section section aside section h1,
section section section nav section h1,
section section section section section h1 {
margin-top: 2.33em;
margin-bottom: 2.33em;
}
dd {
margin-left: 40px; /* LTR-specific: use 'margin-right' for rtl elements */
}
details > dd, figure > dd {
margin-left: 0; /* LTR-specific: use 'margin-right' for rtl elements */
}
menu, ol, ul {
padding-left: 40px; /* LTR-specific: use 'padding-right' for rtl elements */
}
blockquote, figure {
margin-left: 40px;
margin-right: 40px;
}
table {
border-spacing: 2px;
border-collapse: separate;
}
td, th {
padding: 1px;
}
/*
Alignment
http://www.whatwg.org/specs/web-apps/current-work/multipage/rendering.html#alignment
*/
thead, tbody, tfoot, table > tr {
vertical-align: middle;
}
tr, td, th {
vertical-align: inherit;
}
sub {
vertical-align: sub;
}
sup {
vertical-align: super;
}
th {
text-align: center;
}
/*
Fonts and colors
http://www.whatwg.org/specs/web-apps/current-work/multipage/rendering.html#fonts-and-colors
*/
* {
color: #000;
background-color: transparent;
}
body {
color: #000;
background-color: #fff;
}
address, cite, dfn, em, i, var {
font-style: italic;
}
b, strong, th {
font-weight: bold;
}
code, kbd, pre, samp, tt {
font-family: monospace;
}
h1 {
font-size: 2.00em;
font-weight: bold;
}
h2 {
font-size: 1.50em;
font-weight: bold;
}
h3 {
font-size: 1.17em;
font-weight: bold;
}
h4 {
font-size: 1.00em;
font-weight: bold;
}
h5 {
font-size: 0.83em;
font-weight: bold;
}
h6 {
font-size: 0.67em;
font-weight: bold;
}
small, sub, sup {
font-size: smaller;
}
sub, sup {
line-height: normal;
}
:link {
color: blue;
}
:visited {
color: purple;
}
mark {
background: yellow;
color: black;
}
table, td, th {
border-color: gray;
}
thead, tbody, tfoot, tr {
border-color: inherit;
}
/* Some of the following combinations might be unnecessary or impossible. */
article h1, aside h1, nav h1, section h1 {
font-size: 1.50em;
}
article aside h1, article nav h1, article section h1,
aside article h1, aside nav h1, aside section h1,
nav article h1, nav aside h1, nav section h1,
section article h1, section aside h1, section nav h1, section section h1 {
font-size: 1.17em;
}
article aside nav h1, article aside section h1,
article nav aside h1, article nav section h1,
article section aside h1, article section nav h1, article section section h1,
aside article nav h1, aside article section h1,
aside nav article h1, aside nav section h1,
aside section article h1, aside section nav h1, aside section section h1,
nav article aside h1, nav article section h1,
nav aside article h1, nav aside section h1,
nav section article h1, nav section aside h1, nav section section h1,
section article aside h1, section article nav h1, section article section h1,
section aside article h1, section aside nav h1, section aside section h1,
section nav article h1, section nav aside h1, section nav section h1,
section section article h1, section section aside h1, section section nav h1, section section section h1 {
font-size: 1.00em;
}
article aside nav section h1, article aside section nav h1, article aside section section h1,
article nav aside section h1, article nav section aside h1, article nav section section h1,
article section aside nav h1, article section nav aside h1, article section section aside h1, article section section nav h1, article section section section h1,
aside article nav section h1, aside article section nav h1, aside article section section h1,
aside nav article section h1, aside nav section article h1, aside nav section section h1,
aside section article nav h1, aside section article section h1, aside section nav article h1, aside section nav section h1,
aside section section article h1, aside section section nav h1, aside section section section h1,
nav article aside section h1, nav article section aside h1, nav article section section h1,
nav aside article section h1, nav aside section article h1, nav aside section section h1,
nav section article aside h1, nav section article section h1, nav section aside article h1, nav section aside section h1,
nav section section article h1, nav section section aside h1, nav section section section h1,
section article aside nav h1, section article aside section h1,
section article nav aside h1, section article nav section h1,
section article section aside h1, section article section nav h1, section article section section h1,
section aside article nav h1, section aside article section h1,
section aside nav article h1, section aside nav section h1,
section aside section article h1, section aside section nav h1, section aside section section h1,
section nav article aside h1, section nav article section h1,
section nav aside article h1, section nav aside section h1,
section nav section article h1, section nav section aside h1, section nav section section h1,
section section article aside h1, section section article nav h1, section section article section h1,
section section aside article h1, section section aside nav h1, section section aside section h1,
section section nav article h1, section section nav aside h1, section section nav section h1,
section section section article h1, section section section aside h1, section section section nav h1, section section section section h1 {
font-size: 0.83em;
}
article aside nav section section h1,
article aside section nav section h1,
article aside section section section h1,
article nav aside section h1,
article nav section aside section h1,
article nav section section section h1,
article section aside nav section h1,
article section nav aside section h1,
article section section aside section h1,
article section section nav section h1,
article section section section section h1,
aside article nav section section h1,
aside article section nav section h1,
aside article section section section h1,
aside nav article section section h1,
aside nav section article section h1,
aside nav section section section h1,
aside section article nav section h1,
aside section article section section h1,
aside section nav article section h1,
aside section nav section section h1,
aside section section article section h1,
aside section section nav section h1,
aside section section section section h1,
nav article aside section section h1,
nav article section aside section h1,
nav article section section section h1,
nav aside article section section h1,
nav aside section article section h1,
nav aside section section section h1,
nav section article aside section h1,
nav section article section section h1,
nav section aside article section h1,
nav section aside section section h1,
nav section section article section h1,
nav section section aside section h1,
nav section section section section h1,
section article aside nav section h1,
section article aside section section h1,
section article nav aside section h1,
section article nav section section h1,
section article section aside section h1,
section article section nav section h1,
section article section section section h1,
section aside article nav section h1,
section aside article section section h1,
section aside nav article section h1,
section aside nav section section h1,
section aside section article section h1,
section aside section nav section h1,
section aside section section section h1,
section nav article aside section h1,
section nav article section section h1,
section nav aside article section h1,
section nav aside section section h1,
section nav section article section h1,
section nav section aside section h1,
section nav section section section h1,
section section article aside section h1,
section section article nav section h1,
section section article section section h1,
section section aside article section h1,
section section aside nav section h1,
section section aside section section h1,
section section nav article section h1,
section section nav aside section h1,
section section nav section section h1,
section section section article section h1,
section section section aside section h1,
section section section nav section h1,
section section section section section h1 {
font-size: 0.67em;
}
/*
Punctuations and decorations
http://www.whatwg.org/specs/web-apps/current-work/multipage/rendering.html#punctuation-and-decorations
*/
:link, :visited, ins {
text-decoration: underline;
}
abbr[title] {
text-decoration: dotted underline;
}
del {
text-decoration: line-through;
}
q:before {
content: open-quote;
}
q:after {
content: close-quote;
}
br, pre {
white-space: pre;
}
ol {
list-style-type: decimal;
}
menu, ul {
list-style-type: disc;
}
menu dl, menu menu, menu ul,
ol dl, ol menu, ol ul,
ul dl, ul menu, ul ul {
list-style-type: circle;
}
menu menu dl, menu menu menu, menu menu ul,
menu ol dl, menu ol menu, menu ol ul,
menu ul dl, menu ul menu, menu ul ul,
ol menu dl, ol menu menu, ol menu ul,
ol ol dl, ol ol menu, ol ol ul,
ol ul dl, ol ul menu, ol ul ul,
ul menu dl, ul menu menu, ul menu ul,
ul ol dl, ul ol menu, ul ol ul,
ul ul dl, ul ul menu, ul ul ul {
list-style-type: square;
}
table {
border-style: outset;
}
td, th {
border-style: inset;
}
*[dir=ltr] {
direction: ltr;
unicode-bidi: embed;
}
*[dir=rtl] {
direction: rtl;
unicode-bidi: embed;
}
bdo[dir=ltr], bdo[dir=rtl] {
unicode-bidi: bidi-override;
}
/*
Resetting rules for inherited properties
http://www.whatwg.org/specs/web-apps/current-work/multipage/rendering.html#resetting-rules-for-inherited-properties
*/
table, input, select, option, optgroup, button, textarea, keygen {
text-indent: initial;
}
/*
The hr element
http://www.whatwg.org/specs/web-apps/current-work/multipage/rendering.html#the-hr-element-0
*/
hr {
color: gray;
border-style: inset;
border-width: 1px;
}
/*
The fieldset element
http://www.whatwg.org/specs/web-apps/current-work/multipage/rendering.html#the-fieldset-element-0
*/
fieldset {
margin-left: 2px;
margin-right: 2px;
border: groove 2px ThreeDFace;
padding: 0.35em 0.625em 0.75em;
}
/*
Replaced elements - embedded content
http://www.whatwg.org/specs/web-apps/current-work/multipage/rendering.html#embedded-content-2
*/
iframe {
border: 2px inset;
}