Permalink
Browse files

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.
  • Loading branch information...
necolas committed May 20, 2011
1 parent 362d0b7 commit e5e057e53815ed55f4ecfaef3057bf2940c7c0b2
Showing with 36 additions and 44 deletions.
  1. +3 −3 css/style.css
  2. +1 −3 demo/elements.html
  3. +30 −32 demo/hack2.css
  4. +1 −3 demo/tests.html
  5. +1 −3 index.html
View
@@ -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; }
/**
View
@@ -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">
View
@@ -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;}
View
@@ -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">
View
@@ -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">

0 comments on commit e5e057e

Please sign in to comment.