CCDzine
2/11/2016 - 2:25 AM

CSS Reset/Normalize blend plus a responsive embed <div>

CSS Reset/Normalize blend plus a responsive embed

/* CCD BROWSER RESET + VIDEO DIV

Font size is set to 62.5% in the html element for using rem (root em) units as 1rem = 1px. This works for pixel replacement for all selectors in modern browsers (margin, padding, border, etc).) IE 9 & IE 10 do not support rem units when used in the font shorthand property (the entire declaration is ignored) or when used on pseudo elements. IE 8 does not support rem units at all, so if you need to style for IE 8, use a specific style sheet or use fallbacks. Example: font-size: 16px; font-size: 1.6rem;

Container for responsive video/embeds is set to padding-bottom: 56.25% for 16:9 aspect ratio. For other aspect ratios divide the height by the width to get the proper padding. Example: for 4:3 aspect ratio 3/4 = .75 so padding should be 75%

-------------------------------------------------------------------------------*/

html, body, body div, span, object, iframe, h1, h2, h3, h4, h5, h6, p, a, blockquote, pre, abbr, address, cite, code, del, dfn, em, img, ins, kbd, q, samp, small, strong, sub, sup, var, b, i, dl, dt, dd, ol, ul, li, fieldset, form, button, input, select, textarea, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, figure, footer, header, hgroup, menu, nav, section, summary, time, mark, audio, video { margin: 0; padding: 0; border: 0; outline: 0; vertical-align: baseline; background: transparent; }
article, aside, details, figcaption, figure, footer, header, hgroup, main, menu, nav, section, summary { display: block; }
audio, canvas, progress, video { display: inline-block; vertical-align: baseline; }
html { box-sizing: border-box; height: 100%; overflow-y: scroll; font-size: 62.5%; -ms-text-size-adjust: 100%; -webkit-text-size-adjust: 100%; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }
*, *:before, *:after { box-sizing: inherit; -webkit-backface-visibility: hidden; backface-visibility: hidden; }
*:before, *:after { content: '';  font-size: inherit; }
img, object, embed { max-width: 100%; }
img { display: block; height: auto; -ms-interpolation-mode: bicubic; border: 0; font-size: 0.5em; }
hr { display: block; clear: both; box-sizing: content-box; height: 0px; border: 0; border-top: 1px solid #ccc; margin: 1em 0; padding: 0; }
a, a:hover, a:active, a:focus { outline: none; background-color: transparent; }
small { font-size: 85%; }
ol { list-style-type: decimal; }
ol ol { list-style-type: lower-alpha; }
input { line-height: normal; }
input[type="number"]::-webkit-inner-spin-button, input[type="number"]::-webkit-outer-spin-button { height: auto; }
input[type="search"] { -webkit-appearance: textfield; }
input[type="search"]::-webkit-search-cancel-button, input[type="search"]::-webkit-search-decoration { -webkit-appearance: none; }
::-webkit-input-placeholder, :-moz-placeholder, ::-moz-placeholder, :-ms-input-placeholder { color: #888; }
::-moz-placeholder { opacity: 1; }
textarea { overflow: auto; }
button, input, optgroup, select, textarea { color: inherit; font: inherit; margin: 0; }
button { overflow: visible; }
button, html input[type="button"], input[type="reset"], input[type="submit"] { -webkit-appearance: none; cursor: pointer; }
button[disabled], html input[disabled] { cursor: default; }
button::-moz-focus-inner, input::-moz-focus-inner { border: 0; padding: 0; }
table { font-size: inherit; font: 100%; border-collapse: collapse; border-spacing: 0; }
td, th { padding: 0; }
th { font-weight: bold;	vertical-align: middle; }
td, td img { font-weight: normal; vertical-align: top; }
abbr[title], dfn[title] { border-bottom: 1px dotted; cursor: help; }
dfn { font-style: italic; }
del { text-decoration: line-through; }
blockquote { quotes: none; }
blockquote:before { content: '\201C'; }
blockquote:after { content: '\201D'; }
q, cite { font-style: italic; }
audio:not([controls]) { display: none; height: 0; }
svg:not(:root) { overflow: hidden; }
[hidden], template { display: none; }
sub, sup { font-size: 75%; line-height: 0; position: relative; vertical-align: baseline; }
sup { top: -0.5em; }
sub { bottom: -0.25em; }
pre { overflow: auto; white-space: pre;	white-space: pre-wrap; white-space: pre-line; word-wrap: break-word; }
pre, code, kbd, samp { font-family: 'Courier New', Courier, monospace; }
b, strong, optgroup { font-weight: bold; }
/* .clearfix class for clearing floats */
div.clearfix { clear: both; display: block; height: 0; overflow: hidden; zoom: 1; }
/* .embed-container class for responsive embeds */
div.embed-container { position: relative; padding-bottom: 56.25%; height: 0; overflow: hidden; height: auto; }
div.embed-container iframe, .embed-container object, .embed-container embed { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }

Controlled Chaos CSS Reset

The CSS that I generally start with