Change our conditional comments around the HTML tag to use a single .…

…oldie class. http://mathiasbynens.be/notes/safe-css-hacks We're doing this because that quadruple conditional comment <html> tag definition looks pretty scary and especially when combined with namespace augmenting stuff like Facebook's gross xmlns:fb="http://www.facebook.com/2008/fbml" bullshit. We are trying to simplify the markup we use in H5BP and a combination of conditional classnames with IE-specific hacks would be much simpler than the markup bloat we currently have. We'll target IE6 and IE7 specifically with attribute syntax hacks. http://paulirish.com/2009/browser-specific-css-hacks/ /* CLEAN NO HACKS */ div { color: blue; } /* HACKS FOR IE */ .oldie div { color: blue; /* IE 8 and below */ *color: blue; /* IE 7 and below */ _color: blue; /* IE 6 */ } /* IE6, IE7 - star hack */ .oldie div { *color: blue; } /* IE8 - winning hack */ .oldie div { color: blue\0/; } /* must be last declaration in the selector's ruleset */ Using these attribute hacks by themselves does not change the selector specificity. If you've worked with a large, long-term codebase, you'll know managing your specificity wisely is critical. Also watch Nicole Sullivan's talks.
tjschuck · May 20, 2011 · e5e057e · e5e057e
1 parent 362d0b7
commit e5e057e
Show file tree

Hide file tree

Showing 5 changed files with 36 additions and 44 deletions.
diff --git a/css/style.css b/css/style.css
@@ -104,7 +104,7 @@ pre {
   padding: 15px;
 }
 
-.ie6 legend, .ie7 legend { margin-left: -7px; } 
+.oldie legend { *margin-left: -7px; } 
 
 /* 1) Make inputs and buttons play nice in IE: www.viget.com/inspire/styling-the-button-element-in-internet-explorer/
    2) WebKit browsers add a 2px margin outside the chrome of form elements. 
@@ -129,9 +129,9 @@ input:valid, textarea:valid {  }
 input:invalid, textarea:invalid { border-radius: 1px; -moz-box-shadow: 0px 0px 5px red; -webkit-box-shadow: 0px 0px 5px red; box-shadow: 0px 0px 5px red; }
 .no-boxshadow input:invalid, .no-boxshadow textarea:invalid { background-color: #f0dddd; }
 
-/* Bicubic resizing for non-native sized IMG:
+/* Bicubic resizing in IE7 for non-native sized IMG:
    code.flickr.com/blog/2008/11/12/on-ui-quality-the-little-things-client-side-image-resizing/ */
-.ie7 img { -ms-interpolation-mode: bicubic; }
+.oldie img { -ms-interpolation-mode: bicubic; }
 
 
 /**

diff --git a/demo/elements.html b/demo/elements.html
@@ -1,8 +1,6 @@
 <!doctype html>  
 <!-- paulirish.com/2008/conditional-stylesheets-vs-css-hacks-answer-neither/ -->
-<!--[if lt IE 7]> <html class="no-js ie6" lang="en"> <![endif]-->
-<!--[if IE 7]>    <html class="no-js ie7" lang="en"> <![endif]-->
-<!--[if IE 8]>    <html class="no-js ie8" lang="en"> <![endif]-->
+<!--[if lt IE 9]>      <html class="no-js oldie" lang="en"> <![endif]-->
 <!--[if gt IE 8]><!--> <html class="no-js" lang="en"> <!--<![endif]-->
 <head>
   <meta charset="utf-8">

diff --git a/demo/hack2.css b/demo/hack2.css
@@ -1,33 +1,33 @@
 body { font:13px/1.231 sans-serif; *font-size:small; } /* hack retained to preserve specificity */
-		body, select, input, textarea { 
-			/* #444 looks better than black: twitter.com/H_FJ/statuses/11800719859 */ 
-			color: #444; 
-			/* set your base font here, to apply evenly 
-			/* font-family: Georgia, serif;  */   
-		}
-		
-		/* Headers (h1,h2,etc) have no default font-size or margin,
-		 you'll want to define those yourself. */ 
-		h1,h2,h3,h4,h5,h6 { font-weight: bold; }
-    h1 { font-size: 2em; }
-		select, input, textarea, button { font:99% sans-serif; }
-		
-		/* Accessible focus treatment: people.opera.com/patrickl/experiments/keyboard/test */
-		a:hover, a:active { outline: none; }
-
-    .current { background: #ccc; }
-    header span { padding: 0.2em 0.5em; display: inline-block; }
-    dd, h1, body, html { margin: 0;}
-    
-
-		a, a:active, a:visited { color: #607890; }
-		a:hover { color: #036; }
-		.wrapper {width:200px; border:1px solid red;}
-		
-		dl {margin:0 auto; width:900px;}
-		dt {background-color:#ccc; margin-bottom:20px; cursor:pointer; cursor:hand; padding:5px; font-weight:bold; }
-		dd {margin-bottom:30px;}
-		
+body, select, input, textarea { 
+    /* #444 looks better than black: twitter.com/H_FJ/statuses/11800719859 */ 
+    color: #444; 
+    /* set your base font here, to apply evenly 
+    /* font-family: Georgia, serif;  */   
+}
+
+/* Headers (h1,h2,etc) have no default font-size or margin,
+you'll want to define those yourself. */ 
+h1,h2,h3,h4,h5,h6 { font-weight: bold; }
+h1 { font-size: 2em; }
+select, input, textarea, button { font:99% sans-serif; }
+
+/* Accessible focus treatment: people.opera.com/patrickl/experiments/keyboard/test */
+a:hover, a:active { outline: none; }
+
+.current { background: #ccc; }
+header span { padding: 0.2em 0.5em; display: inline-block; }
+dd, h1, body, html { margin: 0;}
+
+
+a, a:active, a:visited { color: #607890; }
+a:hover { color: #036; }
+.wrapper {width:200px; border:1px solid red;}
+
+dl {margin:0 auto; width:900px;}
+dt {background-color:#ccc; margin-bottom:20px; cursor:pointer; cursor:hand; padding:5px; font-weight:bold; }
+dd {margin-bottom:30px;}
+
 #clear-demo {width:500px; border:1px solid black;}
 #clear-demo-l {width:200px; border:1px solid black; float:left;}
 #clear-demo-r {width:200px; border:1px solid black; float:right;}
@@ -36,6 +36,4 @@ body { font:13px/1.231 sans-serif; *font-size:small; } /* hack retained to prese
 header {text-align:center;}
 .show, .hide {color: #607890; cursor:pointer; cursor:hand;}
 
-body {
-  padding-bottom: 200px;
-}
+body {padding-bottom: 200px;}
diff --git a/demo/tests.html b/demo/tests.html
@@ -1,8 +1,6 @@
 <!doctype html>
 <!-- paulirish.com/2008/conditional-stylesheets-vs-css-hacks-answer-neither/ -->
-<!--[if lt IE 7]> <html class="no-js ie6" lang="en"> <![endif]-->
-<!--[if IE 7]>    <html class="no-js ie7" lang="en"> <![endif]-->
-<!--[if IE 8]>    <html class="no-js ie8" lang="en"> <![endif]-->
+<!--[if lt IE 9]>      <html class="no-js oldie" lang="en"> <![endif]-->
 <!--[if gt IE 8]><!--> <html class="no-js" lang="en"> <!--<![endif]-->
 <head>
   <meta charset="utf-8">

diff --git a/index.html b/index.html
@@ -1,8 +1,6 @@
 <!doctype html>
 <!-- paulirish.com/2008/conditional-stylesheets-vs-css-hacks-answer-neither/ -->
-<!--[if lt IE 7]> <html class="no-js ie6" lang="en"> <![endif]-->
-<!--[if IE 7]>    <html class="no-js ie7" lang="en"> <![endif]-->
-<!--[if IE 8]>    <html class="no-js ie8" lang="en"> <![endif]-->
+<!--[if lt IE 9]>      <html class="no-js oldie" lang="en"> <![endif]-->
 <!--[if gt IE 8]><!--> <html class="no-js" lang="en"> <!--<![endif]-->
 <head>
   <meta charset="utf-8">