CSS Reset 5/01/2011
Rather than updating my CSS Reset post again, I figured I would post my updated CSS Reset with some of the changes highlighted.
Added the removing of quotes from blockquote & q which I had a few years back (left commented out for personal reasons, if you want it to remove the quotes un-comment it).
Added the hand cursor on clickable elements - Felt really foolish not having this included in the past as I started building more applications.
Altered a bit of my css to reflect some of the great ideas within the HTML5 Boilerplate - such as Normalizing monospace sizing, forcing the scrollbar in non-ie, accessible focus treatment,
Also discovered setting of sub/sup without affecting line-height (also within HTML5 Boilerplate) so I’ve added it to replace how I had my sub/sup which was via the vertical align - however I haven’t had a project which I’ve used sub/sup… yet.
Also I noticed in the inuit framework they did something which I must say is genius - setting some text styles to offset alt text.
/* -------------------------------------------------------------- Copyright © 2010-2011, Adrian D. Alvarez, http://www.adriandalvarez.com
License: Creative Commons Attribution-Share Alike 3.0 Unported License
http://creativecommons.org/licenses/by-sa/3.0/
version: 1.3.3
5/1/2011
-------------------------------------------------------------- */
/* --------------------------------------------------------------
Credit is left where credit is due. Based off the following resets - Eric Meyer, Blueprint, html5doctor, HTML5 ✰ Boilerplate, inuit, and YUI Reset. Deprecated elements have been removed. -------------------------------------------------------------- */
html, body, a, abbr, address,b, blockquote, caption, cite, code, dd, del, dfn, div, dl, dt, em, fieldset, form , h1, h2, h3, h4, h5, h6, i, iframe, img, input,ins, kbd, label, legend, li, object, ol, p, pre, q, samp, small, span, strong, sub, sup, table, tbody, td, textarea, tfoot, th, thead, tr, ul, var, article, aside, canvas, details, figcaption, figure, footer, header, hgroup, menu, nav, section, summary,time, mark, audio, video{border:0; font-size: 100.01%; /* 100.01 to fix some issues in older versions of Opera */ margin:0; padding:0; vertical-align:baseline; font-weight:normal;}
/* HTML 5 - Until Browsers support improves, it must be declared as a block in your CSS */ article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section {display:block;}
input,textarea,select{vertical-align:baseline; font-family: sans-serif;/* Font-family set due to IE using a different font for Password inputs which makes the length shorter */ font-size:1.2em;}
/* Hand cursor on clickable elements */ label, input[type=button], input[type=submit], input[type=image], button, a {cursor: pointer;}
a{text-decoration:none;/* text-decoration underline cuts into text, use border-bottom: instead */}
a img{border:none;}/* Remove annoying border on linked images. */
table{border-collapse:collapse;border-spacing:0;}
caption, th, td{text-align:left; font-weight:normal;}
table, td, th{vertical-align:top;}
/* Personally, I like the idea of q adding quotes, browsers that don't support it won't render it so I normally keep them in. Uncomment below if you want to remove the quotes from q & blockquotes. To each their own. */
/* blockquote, q {quotes: none;} blockquote:before, blockquote:after, q:before, q:after { content: ''; content: none;} */
nav ul{list-style:none;}
html{font-size:125%;}
body{font-size:50%; /* 125%/50% = 10px = 1em - Due to issues with px with I.E. */ line-height:1.5;}
abbr[title], dfn[title] {border-bottom:1px dotted; cursor:help;}
code,kbd,samp,pre{font-size:1em;font-family:monospace, sans-serif;} /* Normalize monospace sizing: en.wikipedia.org/wiki/MediaWiki_talk:Common.css/Archive_11#Teletype_style_fix_for_Chrome */
ins{background-color:#ff9;color:#000;text-decoration:none;}
del{text-decoration:line-through;}
/* Base styles. */
/* Always force a scrollbar in non-IE */ html {overflow-y: scroll;}
/* Accessible focus treatment: people.opera.com/patrickl/experiments/keyboard/test */ a:hover, a:active { outline: none; }
/* Set sub, sup without affecting line-height: gist.github.com/413930 */ sub, sup { font-size: 75%; line-height: 0; position: relative; } sup { top: -0.5em; } sub { bottom: -0.25em; }
pre {/* www.pathf.com/blogs/2008/05/formatting-quoted-code-in-blog-posts-css21-white-space-pre-wrap/ */ white-space: pre; white-space: pre-wrap; word-wrap: break-word; padding: 15px;}
/* Align checkboxes, radios, text inputs with their label by: Thierry Koblentz tjkdesign.com/ez-css/css/base.css */ input[type=radio] { vertical-align: text-bottom; } input[type=checkbox] { vertical-align: bottom; } .ie7 input[type=checkbox] { vertical-align: baseline; } .ie6 input { vertical-align: text-bottom; }
img{/* Give it some text styles to offset alt text */ font-style:italic; color:#c00;}
This is an update to CSS Reset - Updated 12/7/2010.
