Add improvements from normalize.css; reduce number and detail of CSS comments

necolas · necolas · commit 54f1277d326b · 2011-06-01T19:52:49.000+01:00
diff --git a/css/default.css b/css/default.css
@@ -24,9 +24,9 @@ PRINT
 
 
 
-/* ============================================================================================================================ **
-**                                                      A L L   M E D I A
-** ============================================================================================================================ */
+/* ============================================================================================================= **
+**                                            A L L   M E D I A
+** ============================================================================================================= */
 
 /*
  * Styles affecting all viewport widths and print (keep linear and fluid)
@@ -35,11 +35,6 @@ PRINT
 
 /* ============================================================================================================= 1. HTML5 ELEMENT DISPLAY */
 
-/*
- * Add display for block-level HTML5 elements
- * Display not properly defined in IE6/7/8/9 & FF3
- */
-
 header, 
 section, 
 article, 
@@ -55,12 +50,7 @@ summary {
     display: block;
 }
 
-/*
- * Add display for embedded HTML5 elements
- * Display not properly defined in IE6/7/8/9 & FF3
- */
-
-audio,
+audio[controls],
 canvas,
 video {
     display: inline-block;
@@ -74,23 +64,21 @@ video {
 /* ============================================================================================================= 2. BASE */
 
 /*
- * 1. Add vertical scrollbar to <html> element
- *      Keeps page centred in all browsers regardless of content height
- * 2. Remove iOS tap highlight color to prevent entire container's being highlighted
- *      www.yuiblog.com/blog/2010/10/01/quick-tip-customizing-the-mobile-safari-tap-highlight-color/
- * 3. Remove iOS text size adjust without disabling user zoom
- *      www.456bereastreet.com/archive/201012/controlling_text_size_in_safari_for_ios_without_disabling_user_zoom/
+ * 1. Add font size to prevent text resizing oddly in IE6/7 when body font-size is set using em units
+ * 2. Add vertical scrollbar to keep page centred in all browsers regardless of content height
+ * 3. Remove Android and iOS tap highlight color to prevent entire container being highlighted
+ * 4. Remove iOS text size adjust without disabling user zoom
  */
 
 html {
-    overflow-y: scroll; /* 1 */
-    -webkit-tap-highlight-color: transparent; /* 2 */
-    -webkit-text-size-adjust: 100%; /* 3 */
-    -ms-text-size-adjust: 100%;
+    font-size: 100%; /* 1 */
+    overflow-y: scroll; /* 2 */
+    -webkit-tap-highlight-color: rgba(0,0,0,0); /* 3 */
+    -webkit-text-size-adjust: 100%; /* 4 */
+    -ms-text-size-adjust: 100%; /* 4 */
 }
 
 /*
- * Set the base font-size for the document without prevent text resizing in IE6/7
  * N.B. Remember to add a max-width to <body> or container elements as a fallback in certain desktop environments
  */
 
@@ -107,30 +95,27 @@ body {
  */
 
 body, 
-input, 
 button, 
-textarea, 
-select { 
+input,
+select,
+textarea { 
     font-family: sans-serif;
     color: #333; 
 }
 
 /*
- * 1. Prevent border in IE6/7 when <img> is within <a>
- * 2. Allow high quality bicubic image resampling for <img> element
- *    Improves readability when scaled in IE
- *    - (Read before using) http://code.flickr.com/blog/2008/11/12/on-ui-quality-the-little-things-client-side-image-resizing/
+ * Allow high quality bicubic image resampling for <img> element
+ * Improves readability when scaled in IE
  */
 
 img {
-    border: 0; /* 1 */
-    /* -ms-interpolation-mode: bicubic; */ /* 2 */
+    border: 0;
+    /* -ms-interpolation-mode: bicubic; */
 }
 
 /*
  * Selection highlight
- * 1. Remove text-shadow to ensure readability is not compromised
- *    - http://camendesign.com/design/
+ * Remove text-shadow to ensure readability is not compromised
  */
 
 ::-moz-selection { 
@@ -162,7 +147,6 @@ a:active {
 /*
  * Remove outline on <a> element when active or hovered
  * Improves readability when focused and then also mouse activated
- * - http://people.opera.com/patrickl/experiments/keyboard/test
  */
 
 a:hover, 
@@ -203,10 +187,6 @@ dd {
     margin: 0 0 0 40px;
 }
 
-/*
- * Remove margin and bullets from lists in <nav> elements
- */
-
 nav ul,
 nav li { 
     list-style: none;
@@ -216,66 +196,33 @@ nav li {
 
 /* ............................................................................................................. General typography */
 
-/*
- * Add a visual indication that an abbreviation's expansion is available
- * Styling not present in IE6/7/8/9, S4/5, Chrome
- */
-
 abbr[title] {
     border-bottom: 1px dotted;
 }
 
-/*
- * Remove default italic font-size from <address>
- */
-
 address { 
     font-style: normal; 
 }
 
-/*
- * Add bold font weight to <b> and <strong> elements
- * Fixes style set to 'bolder' in FF3/4, S4/5, Chrome
- */
-
 b, 
 strong { 
     font-weight: bold; 
 }
 
-
-/*
- * Consistent blockquote indentation
- */
-
 blockquote {
-    margin: 1.4em 0 1.4em 30px;
+    margin: 1.4em 40px;
 }
 
-/*
- * Add italic font style to <dfn> element
- * Styling not present in S5, Chrome
- */
-
 dfn {
     font-style: italic;
 }
-
-/*
- * Remove underline from <ins> so it is not confused with links
- */
  
 ins { 
     text-decoration: none; 
     color: #000;
     background-color: #ff9;
 }
 
-/*
- * Add yellow background and black text to <mark> element
- * Styling not present in IE6/7/8/9
- */
-
 mark { 
     font-weight: bold; 
     color: #000; 
@@ -296,16 +243,14 @@ pre {
 /*
  * Redeclare monospace font family and include a san-serif fallback
  * Fix so that these elements can then be given normal font size
- * - http://en.wikipedia.org/wiki/User:Davidgothberg/Test59
- * 1. Fixes monospace font family set oddly in IE6
  */
 
 pre, 
 code, 
 kbd, 
 samp { 
     font-family: monospace, monospace; 
-    _font-family: 'Courier New', monospace, monospace; /* 1 */
+    _font-family: 'Courier New', monospace;
     font-size: 1em;
 }
 
@@ -326,18 +271,13 @@ q:after {
     content: "";
 }
 
-/*
- * Define font-size and alignment for <small> element
- */
-
 small { 
     font-size: 75%;
 }
 
 /*
  * Position subscript and superscript content without affecting line-height
  * Fixes alignment within multi-line text displayed oddly in all browsers
- * - http://gist.github.com/413930
  */
 
 sup, 
@@ -368,31 +308,21 @@ fieldset {
     margin: 0;
 }
 
-/*
- * Correct left alignment of <legend> element in IE6/7
- */
-
 legend {
     *margin-left: -7px;
 }
 
 /*
  * Normalise form elements
  * 1. Remove extra inner space from <input> and <button> in IE6/7
- *    - http://jehiah.cz/a/button-width-in-ie
  * 2. Remove margins from form elements
- *     All elements have a 2px margin in Chrome10 & Safari5.
- *     All <textarea> have 1px vertical margins in Firefox.
- * 3. Make font-size equal to body default
+ * 3. Make font-size equal to ancestor's
  * 4. Have all browsers use the same line-height. 
- *     Firefox doesn't allow control of line-height for <input> and <button>.
- *     Corrects button line-height in IE6.
  * 5. Standardised vertical-align
- *     IE defaults to 'auto'. Firefox defaults to 'text-bottom' for <textarea>
  */
 
-input,
 button,
+input,
 select,
 textarea {
     overflow: visible;  /* 1 */
@@ -405,16 +335,14 @@ textarea {
 
 /*
  * 1. Display hand cursor for submission elements
- *      Improves usability and consistency of cursor style between image-type <input> and others
- * 2. Define consistent appearance for clickable form elements
- *      Fixes inability to style clickable <input> types in iOS
+ * 2. Fixes inability to style clickable <input> types in iOS
  */
 
+button,
 input[type="button"], 
-input[type="submit"], 
-button {
-    cursor: pointer;
-    -webkit-appearance: button;
+input[type="submit"] {
+    cursor: pointer; /* 1 */
+    -webkit-appearance: button; /* 2 */
 }
 
 
@@ -441,6 +369,15 @@ input[type="search"] {
     box-sizing: content-box;
 }
 
+/*
+ * Remove WebKit search decoration
+ * Addresses inner padding displaying oddly in S5 Chrome on OSX
+ */
+
+input[type="search"]::-webkit-search-decoration {
+    -webkit-appearance: none;
+}
+
 /*
  * Remove extra inner padding and border in FF3/4
  * - http://www.sitepen.com/blog/2008/05/14/the-devils-in-the-details-fixing-dojos-toolbar-buttons/
@@ -453,10 +390,8 @@ button::-moz-focus-inner {
 }
 
 /*
- * 1. Disable default horizontal scrollbar for <textarea> element
- *     Scrollbar displayed by default in IE6/7/8/9
+ * 1. Disable default horizontal scrollbar for <textarea> element in IE6/7/8/9
  * 2. Align <textarea> with top when inline
- *     Improves usability and corrects baseline inconsistency in Firefox 3/4
  */
 
 textarea { 
@@ -493,7 +428,6 @@ td {
  * Clear an element's floated children using generated content
  * Inclusion of :before consistently prevents margin collapse in modern browsers
  * Improves visual consistency between modern browsers and IE6/7
- * - http://nicolasgallagher.com/micro-clearfix-hack/
  */
 
 .cf { 
@@ -520,9 +454,9 @@ td {
 
 
 
-/* ============================================================================================================================ **
-**                                                       S C R E E N (480+)
-** ============================================================================================================================ */
+/* ============================================================================================================= **
+**                                              S C R E E N (480+)
+** ============================================================================================================= */
 
 @media only screen and (min-width: 480px) {
 
@@ -537,9 +471,9 @@ td {
 
 
 
-/* ============================================================================================================================ **
-**                                                       S C R E E N (768+)
-** ============================================================================================================================ */
+/* ============================================================================================================= **
+**                                              S C R E E N (768+)
+** ============================================================================================================= */
 
 @media only screen and (min-width: 768px) {
 
@@ -554,15 +488,14 @@ td {
 
 
 
-/* ============================================================================================================================ **
-**                                                       P R I N T
-** ============================================================================================================================ */
+/* ============================================================================================================= **
+**                                                P R I N T
+** ============================================================================================================= */
 
 @media print {
 
 /*
  * Print-only style adjustements inlined to avoid required HTTP connection
- * - http://www.phpied.com/delay-loading-your-print-css/
  */
 
 * { 
