Created
August 11, 2016 00:55
-
-
Save lukebrooker/f452655e6338520310a16dc1c61cad0d to your computer and use it in GitHub Desktop.
First implementation of a CSS reset/normalize with inheritence.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
:root { | |
line-height: 1; | |
font-family: normal; | |
font-style: normal; | |
font-weight: inherit; | |
text-align: left; | |
appearance: none; | |
-webkit-appearance: none; | |
text-decoration: none; | |
box-sizing: border-box; | |
font-size: 100%; | |
} | |
/* Reset */ | |
*, | |
*:before, | |
*:after { | |
box-sizing: inherit; | |
margin: 0; | |
padding: 0; | |
font-size: inherit; | |
color: inherit; | |
background-color: inherit; | |
font-weight: inherit; | |
font-style: inherit; | |
font-family: inherit; | |
line-height: inherit; | |
text-align: inherit; | |
text-decoration: inherit; | |
border: 0; | |
outline: 0; | |
} | |
/** | |
* Prevent adjustments of font size after orientation changes in IE and iOS. | |
*/ | |
/* Document | |
========================================================================== */ | |
html { | |
-ms-text-size-adjust: 100%; | |
-webkit-text-size-adjust: 100%; | |
} | |
/* Sections | |
========================================================================== */ | |
/** | |
* Add the correct display in IE 9-. | |
*/ | |
article, | |
aside, | |
footer, | |
header, | |
nav, | |
section { | |
display: block; | |
} | |
/* Grouping content | |
========================================================================== */ | |
/** | |
* Add the correct display in IE 9-. | |
* 1. Add the correct display in IE. | |
*/ | |
figcaption, | |
figure, | |
main { /* 1 */ | |
display: block; | |
} | |
/** | |
* 1. Add the correct box sizing in Firefox. | |
* 2. Show the overflow in Edge and IE. | |
*/ | |
hr { | |
box-sizing: content-box; /* 1 */ | |
height: 0; /* 1 */ | |
overflow: visible; /* 2 */ | |
border-top: 1px solid; | |
} | |
/** | |
* Correct the odd `em` font sizing in all browsers. | |
*/ | |
pre { | |
font-size: 1em; | |
} | |
table { | |
border-collapse: collapse; | |
border-spacing: 0; | |
} | |
/* Text-level semantics | |
========================================================================== */ | |
/** | |
* 1. Remove the gray background on active links in IE 10. | |
* 2. Remove gaps in links underline in iOS 8+ and Safari 8+. | |
*/ | |
a { | |
background-color: transparent; /* 1 */ | |
-webkit-text-decoration-skip: objects; /* 2 */ | |
} | |
/** | |
* Remove the outline on focused links when they are also active or hovered | |
* in all browsers (opinionated). | |
*/ | |
a:active, | |
a:hover { | |
outline-width: 0; | |
} | |
/** | |
* 1. Remove the bottom border in Firefox 39-. | |
* Reset styles | |
*/ | |
abbr[title] { | |
border-bottom: none; /* 1 */ | |
text-decoration: none; | |
} | |
/** | |
* Correct the odd `em` font sizing in all browsers. | |
*/ | |
code, | |
kbd, | |
samp { | |
font-size: 1em; /* 2 */ | |
} | |
/** | |
* Prevent `sub` and `sup` elements from affecting the line height in | |
* all browsers. | |
*/ | |
sub, | |
sup { | |
font-size: 75%; | |
line-height: 0; | |
position: relative; | |
vertical-align: baseline; | |
} | |
sub { | |
bottom: -0.25em; | |
} | |
sup { | |
top: -0.5em; | |
} | |
/* Embedded content | |
========================================================================== */ | |
/** | |
* Add the correct display in IE 9-. | |
*/ | |
audio, | |
video { | |
display: inline-block; | |
} | |
/** | |
* Add the correct display in iOS 4-7. | |
*/ | |
audio:not([controls]) { | |
display: none; | |
height: 0; | |
} | |
/** | |
* Remove the border on images inside links in IE 10-. | |
*/ | |
img { | |
border-style: none; | |
} | |
/** | |
* Hide the overflow in IE. | |
*/ | |
svg:not(:root) { | |
overflow: hidden; | |
} | |
/* Forms | |
========================================================================== */ | |
/** | |
* Show the overflow in IE. | |
* 1. Show the overflow in Edge. | |
*/ | |
button, | |
input { /* 1 */ | |
overflow: visible; | |
} | |
/** | |
* Remove the inheritance of text transform in Edge, Firefox, and IE. | |
* 1. Remove the inheritance of text transform in Firefox. | |
*/ | |
button, | |
select { /* 1 */ | |
text-transform: none; | |
} | |
/** | |
* Reset buttons | |
*/ | |
button, | |
[type="button"], | |
[type="reset"], | |
[type="submit"] { | |
-webkit-appearance: none; | |
appearance: none; | |
} | |
/** | |
* Remove the inner border and padding in Firefox. | |
*/ | |
button::-moz-focus-inner, | |
[type="button"]::-moz-focus-inner, | |
[type="reset"]::-moz-focus-inner, | |
[type="submit"]::-moz-focus-inner { | |
border-style: none; | |
padding: 0; | |
} | |
/** | |
* Remove focus styles in Firefox | |
*/ | |
button:-moz-focusring, | |
[type="button"]:-moz-focusring, | |
[type="reset"]:-moz-focusring, | |
[type="submit"]:-moz-focusring { | |
outline: none; | |
} | |
/** | |
* Correct the text wrapping in Edge and IE. | |
*/ | |
legend { | |
display: table; | |
max-width: 100%; | |
white-space: normal; | |
} | |
/** | |
* 1. Add the correct display in IE 9-. | |
* 2. Add the correct vertical alignment in Chrome, Firefox, and Opera. | |
*/ | |
progress { | |
display: inline-block; /* 1 */ | |
vertical-align: baseline; /* 2 */ | |
} | |
/** | |
* Remove the default vertical scrollbar in IE. | |
*/ | |
textarea { | |
overflow: auto; | |
} | |
/** | |
* 1. Add the correct box sizing in IE 10-. | |
* 2. Remove the padding in IE 10-. | |
*/ | |
[type="checkbox"], | |
[type="radio"] { | |
box-sizing: border-box; /* 1 */ | |
padding: 0; /* 2 */ | |
} | |
/** | |
* Correct the cursor style of increment and decrement buttons in Chrome. | |
*/ | |
[type="number"]::-webkit-inner-spin-button, | |
[type="number"]::-webkit-outer-spin-button { | |
height: auto; | |
} | |
/** | |
* 1. Correct the odd appearance in Chrome and Safari. | |
* 2. Correct the outline style in Safari. | |
*/ | |
[type="search"] { | |
-webkit-appearance: textfield; /* 1 */ | |
outline-offset: -2px; /* 2 */ | |
} | |
/** | |
* Remove the inner padding and cancel buttons in Chrome and Safari on OS X. | |
*/ | |
[type="search"]::-webkit-search-cancel-button, | |
[type="search"]::-webkit-search-decoration { | |
-webkit-appearance: none; | |
} | |
/** | |
* 1. Correct the inability to style clickable types in iOS and Safari. | |
* 2. Change font properties to `inherit` in Safari. | |
*/ | |
::-webkit-file-upload-button { | |
-webkit-appearance: button; /* 1 */ | |
font: inherit; /* 2 */ | |
} | |
/** | |
* Reset all placeholders to use inherited color with opacity | |
*/ | |
::-webkit-input-placeholder { | |
color: inherit; | |
opacity: .5; | |
} | |
::-moz-placeholder { | |
color: inherit; | |
opacity: .5; | |
} | |
:-ms-input-placeholder { | |
color: inherit; | |
opacity: .5; | |
} | |
:-moz-placeholder { | |
color: inherit; | |
opacity: .5; | |
} | |
:placeholder { | |
color: inherit; | |
opacity: .5; | |
} | |
/* Interactive | |
========================================================================== */ | |
/* | |
* Add the correct display in IE 9-. | |
* 1. Add the correct display in Edge, IE, and Firefox. | |
*/ | |
details, /* 1 */ | |
menu { | |
display: block; | |
} | |
/* | |
* Add the correct display in all browsers. | |
*/ | |
summary { | |
display: list-item; | |
} | |
/* Scripting | |
========================================================================== */ | |
/** | |
* Add the correct display in IE 9-. | |
*/ | |
canvas { | |
display: inline-block; | |
} | |
/** | |
* Add the correct display in IE. | |
*/ | |
template { | |
display: none; | |
} | |
/* Hidden | |
========================================================================== */ | |
/** | |
* Add the correct display in IE 10-. | |
*/ | |
[hidden] { | |
display: none; | |
} |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment