diff --git a/.gitignore b/.gitignore new file mode 100644 index 000000000..fb7863593 --- /dev/null +++ b/.gitignore @@ -0,0 +1,2 @@ + +/.svn \ No newline at end of file diff --git a/README.md b/README.md index 69b9e7626..e606856a3 100644 --- a/README.md +++ b/README.md @@ -1,14 +1,19 @@ normalize.css ============= -normalize.css makes browsers render all elements consistently and in line with modern standards. Our goal is to make modern presentation standards available to all browsers, young and old. We currently support Mozilla Firefox 3+, Apple Safari 4+, Chrome 10+, Opera 10+, and Internet Explorer 6+. +Normalize.css is a customisable CSS file that makes browsers render all elements more consistently and in line with modern standards. We researched the differences between default browser styles in order to precisely target only the styles that need normalizing. We currently support Mozilla Firefox 3+, Apple Safari 4+, Chrome 10+, Opera 10+, and Internet Explorer 6+. Installation ----------- -Include this code somewhere in the HEAD of your document. +Include one of these in the HEAD of your document to use the latest **normalize.css**. - +```` + + +```` + +Good news, everyone! **normalize.min.css** gzipped is 947 bytes. Contributing ------------ @@ -18,6 +23,6 @@ Want to contribute? Great! Let me know with an Issue or a Pull Request. Links ------------ -[normalize.css on GoogleCode](https://normalize-css.googlecode.com/) +[normalize.css on GitHub](https://github.com/jonathantneal/normalize.css) -[normalize.css on GitHub](https://github.com/jonathantneal/normalize.css) \ No newline at end of file +[normalize.css on GoogleCode](https://normalize-css.googlecode.com/) \ No newline at end of file diff --git a/normalize.css b/normalize.css index b58f0d3eb..a7a472a79 100644 --- a/normalize.css +++ b/normalize.css @@ -1,7 +1,33 @@ +/* ============================================================================= + normalize.css + 2011-07-06T20:20 UTC + //github.com/jonathantneal/normalize.css + + Normalize.css is a customisable CSS file that makes browsers render all + elements more consistently and in line with modern standards. We researched + the differences between default browser styles in order to precisely target + only the styles that need normalizing. + + How comment documentation is written: + Comments: (anchor) (type of change) (summary of issue) in (affected browsers) + Url: (url related to above comment) + + To be concise, comments are restricted to a length of 77 characters or less. + + What 'types of change' mean: + Addresses: Changes involving downgrades for greater cross-browser consistency + Corrects: Bug fixes and corrections to unexpected visual quirks + Improves: Improvements based on popular usage and html5 recommendation + ========================================================================== */ + + +/* ============================================================================= + Base + ========================================================================== */ + /* - * Add display for HTML5 elements - * Fixes styling not present in IE6/7/8/9 FF3 -*/ + * Corrects block display not defined in IE6/7/8/9 & FF3 + */ article, aside, @@ -13,160 +39,130 @@ header, hgroup, nav, section { - display: block; + display: block; } /* - * Vertical align for display inline block elements - * Improves visual appearance in all browsers -*/ - -audio[controls], -button, -canvas, -img, -input, -select, -textarea, -video { - display: inline-block; - *display: inline; - vertical-align: top; - *zoom: 1; -} - -/* - * 1. - * Make normal cursor the default for element - * Improves visual focus of page during mouse movement in all browsers - * 2. - * Add vertical scrollbar to element - * Improves page center consistency regardless of content height in all browsers - * 3. - * Remove text size adjust tap color for element - * Fixes tap color displayed oddly in iOS -*/ + * 1. Improves visual focus of mouse in all browsers + * 2. Corrects text resizing oddly when font size is set using ems in IE6/7 + * http://clagnut.com/blog/348/#c790 + * 3. Corrects page centering in all browsers regardless of content height + * 4. Improves visual appearance of containers during a delegated click in mSaf + * www.yuiblog.com/blog/2010/10/01/quick-tip-customizing-the-mobile-safari-tap-highlight-color/ + * 5. Corrects text resizing oddly after orientation change in all handhelds + * www.456bereastreet.com/archive/201012/controlling_text_size_in_safari_for_ios_without_disabling_user_zoom/ + */ html { cursor: default; /* 1 */ - overflow-y: scroll; /* 2 */ - -webkit-tap-highlight-color: transparent; /* 3 */ + font-size: 100%; /* 2 */ + overflow-y: scroll; /* 3 */ + -webkit-tap-highlight-color: transparent; /* 4 */ + -ms-text-size-adjust: 100%; /* 5 */ + -webkit-text-size-adjust: 100%; /* 5 */ } -/* - * Remove margin and hide overflow from element - * Margin overflow displayed incorrectly in IE6/7 -*/ +/* + * 1. Addresses text resizing limitations in IE6/7 + * Improves text sizing inconsistency in all browsers + * Known issue: text sizing unnecessary for 'form' + * 2. Improves margins set oddly in IE6/7 FF3/4 S5 C10 + */ -body { - margin: 0; - overflow: hidden; +body, +form, +input, +button, +select, +textarea { + font-size: 100%; /* 1 */ + margin: 0; /* 2 */ } -/* - * 1. - * Make outline thin dotted for - * Fixes outline displayed oddly in C10 - * 2. - * Remove outline for element when active or hovered - * Improves readability when focused and also mouse hovered in all browsers -*/ -/* 1 */ +/* ============================================================================= + Links + ========================================================================== */ -a:focus { - outline: thin dotted; -} - -/* 2 */ +/* + * Improves appearance when active or hovered in all browsers + * people.opera.com/patrickl/experiments/keyboard/test + */ +a, a:active, a:hover { outline: none; } /* - * Make display based on controls for element in all browsers - * 2. - * Allow high quality bicubic image resampling for element - * Improves readability when scaled in IE7 -*/ + * Corrects styling not present in IE6/7/8/9 S5 C10 + */ -img { - border: 0; /* 1 */ - -ms-interpolation-mode: bicubic; /* 2 */ +abbr { + _border-bottom: expression(this.title ? '1px dotted' : 'none'); } -/* - * Add bottom border to element - * Fixes styling not present in IE6/7/8/9 C10 S5 -*/ - abbr[title] { border-bottom: 1px dotted; } -abbr { - _border-bottom: expression(this.title ? '1px dotted' : 'none'); +/* + * Corrects style set incorrectly as 'bolder' in FF3/4 S4/5 C10 +*/ + +b, +strong { + font-weight: bold; } /* - * Add italic font style to element - * Fixes styling not present in C10 S5 -*/ + * Corrects styling not present in S5 C10 + */ dfn { font-style: italic; } /* - * Add yellow background and black text to element - * Fixes styling not present in IE6/7/8/9 -*/ + * Corrects styling not present in IE6/7/8/9 + */ mark { - background-color: #FF0; + background: #FF0; color: #000; } /* - * Redeclare monospace font family to 
    elements
- * 1.
- * Fixes font family set oddly in C10 S5
- * 2.
- * Fixes monospace font family set oddly in IE6
- * 3.
- * Fixes monospace line-height overflow in iOS
-*/
+ * Corrects font family displayed oddly in IE6 S5 C10
+ * en.wikipedia.org/wiki/User:Davidgothberg/Test59
+ */
 
 pre,
 code,
 kbd,
 samp {
-	font-family: monospace, sans-serif; /* 1 */
-	_font-family: 'Courier New', monospace, sans-serif;/* 2 */
-	vertical-align: top; /* 3 */
+	font-family: monospace, monospace;
+	_font-family: 'courier new', monospace;
+	font-size: 1em;
 }
 
 /*
- * Allow line wrapping for 
 element
  * Improves readability of pre-formatted text in all browsers
-*/
+ */
 
 pre {
 	white-space: pre;
@@ -175,20 +171,16 @@ pre {
 }
 
 /*
- * Remove quotes from  element
- * 1.
  * Addresses CSS quotes not supported in IE6/7
- * 2.
- * Addresses quote attributes not supported in S4
-*/
-
-/* 1 */
+ */
 
 q {
 	quotes: none;
 }
 
-/* 2 */
+/*
+ * Addresses quote property not supported in S4
+ */
 
 q:before,
 q:after {
@@ -197,21 +189,25 @@ q:after {
 }
 
 /*
- * Define alignment for	   elements
- * Fixes alignment within multi-line text displayed oddly in all browsers
-*/
+ * Improves appearance in all browsers
+ */
 
-small {
+small,
+sub,
+sup {
 	font-size: 75%;
-	line-height: 1;
 }
 
+/*
+ * Improves appearance in all browsers
+ * gist.github.com/413930
+ */
+
 sub,
 sup {
-	font-size: 75%;
 	line-height: 0;
 	position: relative;
-	vertical-align: middle;
+	vertical-align: baseline;
 }
 
 sup {
@@ -219,45 +215,146 @@ sup {
 }
 
 sub {
-	bottom: -0.5em;
+	bottom: -0.25em;
+}
+
+
+/* =============================================================================
+   Lists
+   ========================================================================== */
+
+/*
+ * Improves appearance of navigation-specific lists
+ */
+
+nav ul {
+	list-style: none;
 }
 
+/* =============================================================================
+   Embedded content
+   ========================================================================== */
+
 /*
- * Define alignment for  element
- * Fixes alignment displayed oddly in IE6/7
-*/
+ * Corrects display not defined in IE6/7/8/9 & FF3
+ */
+
+audio[controls],
+canvas,
+video {
+	display: inline-block;
+	*display: inline;
+}
+
+audio {
+	display: none;
+	_display: expression(this.controls ? 'inline' : 'none');
+	*zoom: 1;
+}
+
+audio[controls] {
+	display: inline-block;
+}
+
+/*
+ * 1. Improves readability when inside 'a' in all browsers
+ * 2. Improves visual appearance when scaled in IE7
+ *    code.flickr.com/blog/2008/11/12/on-ui-quality-the-little-things-client-side-image-resizing/
+ */
+
+img {
+	border: 0; /* 1 */
+	-ms-interpolation-mode: bicubic; /* 2 */
+}
+
+/*
+ * Corrects overflow displayed oddly in IE9 
+ */
+
+svg:not(:root) {
+    overflow: hidden;
+}
+
+
+/* =============================================================================
+   Forms
+   ========================================================================== */
+
+/*
+ * Corrects alignment displayed oddly in IE6/7
+ */
 
 legend {
 	*margin-left: -7px;
 }
 
 /*
- * Remove margin from form elements
- * Fixes margin displayed oddly in C10 S5
-*/
+ * Improves appearance in all browsers
+ */
 
 button,
 input,
 select,
 textarea {
-	margin: 0;
+	-webkit-appearance: none;
+	border-radius: 0;
+	vertical-align: baseline;
+	*vertical-align: middle;
 }
 
 /*
- * Define inner-spacing for button elements
- * Targeting all inputs is harmless to non-button elements
- * 1. Fixes spacing displayed oddly in IE6/7
- * 2. Fixes border and padding displayed oddly in FF3/4
-*/
-
-/* 1 */
+ * 1. Corrects FF3/4 setting it using !important in the UA stylesheet
+ * 2. Corrects spacing displayed oddly in IE6/7
+ * 3. Corrects inability to style clickable 'input' types in iOS
+ */
 
 button,
 input {
-	*overflow: visible; 
+	line-height: normal; /* 1 */
+	_overflow: expression(this.type == 'button|reset|submit' ? 'visible' : ''); /* 2 */
+}
+
+/* 3 */
+
+button,
+input[type="button"], 
+input[type="reset"], 
+input[type="submit"] {
+	overflow: visible;
+}
+
+/*
+ * Addresses box sizing forced to border-box in IE6/7
+ */
+
+input[type="checkbox"],
+input[type="radio"] {
+	box-sizing: border-box;
+}
+
+/*
+ * Addresses sizing set oddly to searchfield in S5 iOS C10
+ * Known issue: -moz included to future-proof
+ */
+
+input[type="search"] {
+	-moz-box-sizing: content-box;
+	-webkit-box-sizing: content-box;
+	box-sizing: content-box;
 }
 
-/* 2 */
+/*
+ * Addresses inner padding displayed oddly in S5 C10 on OSX
+ */
+
+input[type="search"]::-webkit-search-decoration {
+    -webkit-appearance: none;
+}
+
+/*
+ * Corrects appearance 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 {
@@ -266,34 +363,24 @@ input::-moz-focus-inner {
 }
 
 /*
- * Disable default vertical scrollbar for