CSS Fallback for Comments Manipulation

by Pantun

HTML

<div id="comments">
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam <i rel="code">nonummy nibh euismod</i> tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in <i rel="code">&lt;html&gt;</i>:

<i rel="pre">$(function() {
    $('body').click(function() {
        $(this).remove(); // AAAAAAAAAAAAARRRRRRRGGHHHHHH LONG CODE HERE!!!        
    });
});</i>

<i rel="image">http://reader-download.googlecode.com/svn/trunk/images/no-image-72x72.png</i>

<a href="http://www.youtube.com/embed/-joKveiaabA"></a>
    
<b rel="quote">Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam...</b>

    <b rel="h1">Heading 1</b>
    <b rel="h2">Heading 2</b>
    <b rel="h3">Heading 3</b>
    <b rel="h4">Heading 4</b>
    <b rel="h5">Heading 5</b>
    <b rel="h6">Heading 6</b>
</div>


<br/><hr/>
<!-- with attribute only, not allowed on blogger comment :D -->

<i c>Lorem ipsum</i> dolor sit amet consectetuer adipiscing elit <i c>sed diam nonummy</i>

<i p>$(function(){
    $('html').click(function(){
        $(this).hide();
    });
});</i>

<b q>
Lorem ipsum dolor sit amet, amet sit dolor ipsum Lorem
</b>

CSS

#comments {padding:20px;}

#comments i[rel="code"], i[c] {
  font:normal 12px Monaco,Monospace !important;
  font-style:normal;
  color:blue;
}

#comments i[rel="pre"], i[p] {
  display:block;
  background-color:#333;
  font:normal 12px Monaco,Monospace !important;
  color:white;
  white-space:pre;
  word-wrap:normal !important;
  overflow:auto;
  padding:0.5em 1em;
  margin:10px 0px;    
}

#comments i[rel="image"],
a[href*="http://www.youtube.com/embed"] {
  display:block;
  margin:20px auto;
  width:120px;
  height:100px;
  border:2px solid black;
  position:relative;
  overflow:hidden;    
}

#comments i[rel="image"]:before,
a[href*="http://www.youtube.com/embed"]:before {
  content:"Please enable the JavaScript to see this image!";
  position:absolute;
  top:0px;
  right:0px;
  bottom:0px;
  left:0px;
  background-color:red;
  padding:10px;
  font:bold 12px Arial,Sans-Serif;
  color:white;
  text-decoration:none;      
}

a[href*="http://www.youtube.com/embed"]:before {
  content:"Please enable the JavaScript to see this video!";   
}

#comments b[rel="quote"], b[q] {
  font-weight:normal;
  display:block;
  background-color:pink;
  padding:10px 15px;
  margin:10px auto;    
}

#comments b[rel^="h"] {display:block;margin-bottom:10px;}

#comments b[rel="h1"] {font-size:240%;}
#comments b[rel="h2"] {font-size:200%;}
#comments b[rel="h3"] {font-size:140%;}
#comments b[rel="h4"] {font-size:120%;}
#comments b[rel="h5"] {font-size:100%;}
#comments b[rel="h6"] {font-size:60%; }