Created
June 20, 2012 13:06
-
-
Save makingsnippets/2959808 to your computer and use it in GitHub Desktop.
CSS: Reset
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
// 1. Keeps page centred in all browsers regardless of content height | |
// 2. Prevents iOS text size adjust after orientation change, without disabling user zoom | |
// www.456bereastreet.com/archive/201012/controlling_text_size_in_safari_for_ios_without_disabling_user_zoom/ | |
html { | |
overflow-y: scroll; // 1 | |
-webkit-text-size-adjust: 100%; // 2 | |
-ms-text-size-adjust: 100%; // 2 | |
text-size-adjust: 100%; // 2 | |
} | |
// 1. Clear default browser margin | |
// 2. Default line-height inconsistent across browsers | |
body { | |
margin:0; // 1 | |
line-height:1; // 2 | |
} | |
// Forms | |
// ------------------------------------------------ | |
form { | |
margin:0; | |
} | |
fieldset { | |
margin:0; | |
padding:0; | |
border:0; | |
} | |
// 1. Corrects font size not being inherited in all browsers | |
// 2. Addresses margins set differently in IE6/7, F3/4, S5, Chrome | |
// 3. Improves appearance and consistency in all browsers | |
button, | |
input, | |
select, | |
textarea { | |
font-size: 100%; // 1 | |
font-family:inherit; // 1 | |
margin: 0; // 2 | |
padding:0; // 2 | |
vertical-align: baseline; // 3 | |
*vertical-align: middle; // 3 | |
} | |
// 1. Addresses FF3/4 setting line-height using !important in the UA stylesheet | |
// 2. Corrects inner spacing displayed oddly in IE6/7 | |
button, | |
input { | |
line-height: normal; // 1 | |
overflow: visible; // 2 | |
} | |
// 1. Removes default vertical scrollbar in IE6/7/8/9 | |
// 2. Improves readability and alignment in all browsers | |
textarea { | |
overflow:auto; | |
vertical-align:top; | |
padding:0; | |
} | |
// 1. Addresses appearance set to searchfield in S5, Chrome | |
// 2. Addresses box sizing set to border-box in S5, Chrome (include -moz to future-proof) | |
input[type="search"] { | |
-webkit-appearance: textfield; // 1 | |
-moz-box-sizing: content-box; | |
-webkit-box-sizing: content-box; // 2 | |
box-sizing: content-box; | |
} | |
// Corrects inner padding displayed oddly in S5, Chrome on OSX | |
input[type="search"]::-webkit-search-decoration { | |
-webkit-appearance: none; | |
} | |
// Remove the webkit glow | |
:focus { | |
outline:none; | |
} | |
// 1. Addresses box sizing set to content-box in IE8/9 | |
// 2. Addresses excess padding in IE8/9 | |
input[type="checkbox"], | |
input[type="radio"] { | |
box-sizing: border-box; // 1 | |
padding: 0; // 2 | |
} | |
// Corrects inner padding and border displayed oddly in FF3/4 | |
// www.sitepen.com/blog/2008/05/14/the-devils-in-the-details-fixing-dojos-toolbar-buttons/ | |
button::-moz-focus-inner, | |
input::-moz-focus-inner { | |
border: 0; | |
padding: 0; | |
} | |
// Images | |
// ------------------------------------------------ | |
// Chrome gives figures margin | |
figure { | |
margin:0; | |
} | |
// 1. Nicer image sizing in IE | |
// 2. Common default | |
img { | |
-ms-interpolation-mode: bicubic; // 1 | |
display:block; // 2 | |
} | |
// Lists | |
// ------------------------------------------------ | |
ol, | |
ul { | |
margin:0; | |
padding:0; | |
} | |
dl, | |
dd { | |
margin:0; | |
} | |
// Reset list items back to normal block display. | |
// This allows us to use lists for semantic markup | |
// without needing to set this each time. | |
// Lists only look like lists in blocks of copy. | |
li { | |
display: block; | |
padding: 0; | |
margin: 0; | |
list-style: none; | |
} | |
// Headings | |
// ------------------------------------------------ | |
// Resets all headings to look like normal text | |
h1, | |
h2, | |
h3, | |
h4, | |
h5, | |
h6 { | |
font-weight:inherit; | |
line-height:inherit; | |
font-size:inherit; | |
margin:0; | |
} | |
// Block Text | |
// ------------------------------------------------ | |
p { | |
margin:0; | |
} | |
blockquote { | |
margin:0; | |
} | |
// Improve the appearance of preformatted text | |
pre { | |
white-space: pre; | |
white-space: pre-wrap; | |
word-wrap: break-word; | |
margin:0; | |
font-family:inherit; | |
font-size:inherit; | |
} | |
// Inline Text | |
// ------------------------------------------------ | |
cite { | |
font-style:normal; | |
} | |
ins { | |
text-decoration:none; | |
} | |
dfn { | |
font-style:inherit; | |
} | |
del { | |
text-decoration:none; | |
} | |
mark { | |
background:none; | |
color:inherit; | |
} | |
address { | |
font-style:normal; | |
} | |
tt, code, kbd, samp { | |
font-family: inherit; | |
font-size:inherit; | |
} | |
b, | |
strong { | |
font-weight:inherit; | |
} | |
em { | |
font-style:inherit; | |
} | |
small { | |
font-size:100%; | |
} | |
q { | |
quotes: none; | |
} | |
q:before, | |
q:after { | |
content: ''; | |
content: none; | |
} | |
a { | |
font-weight:inherit; | |
color:inherit; | |
text-decoration:none; | |
} | |
a:hover, | |
a:active { | |
outline: none; | |
} | |
a img{ | |
border: none; | |
} | |
// Set sub, sup without affecting line-height: gist.github.com/413930 | |
sub,sup, .icon { | |
font-size: 75%; | |
line-height: 0; | |
position: relative; | |
} | |
sup { | |
top: -0.5em; | |
} | |
sub { | |
bottom: -0.25em; | |
} | |
// HTML 5 Block Elements | |
// ------------------------------------------------ | |
article, | |
aside, | |
details, | |
figcaption, | |
figure, | |
footer, | |
header, | |
hgroup, | |
menu, | |
nav, | |
section { | |
display:block; | |
} | |
// Tables | |
// ------------------------------------------------ | |
table { | |
border-collapse: collapse; | |
border-spacing: 0; | |
} | |
th { | |
font-weight:inherit; | |
} |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment