CSSでHTMLタグの可視化
CSSのcontentで、insタグやdelタグの可視化ってのは少し前からやってたんだけど、
del:after{ content:"[DEL:" attr(datetime) "]"; } ins:after{ content:"[INS:" attr(datetime) "]"; } del:after, ins:after{ color:#888888; font-size:85%; }
より多くのタグを可視化してみた。まあ、ネタのひとつです。UserCSSにしてみる(http://gist.github.com/101046)と面白いけど、すごく重いしすごく崩れるのでお勧めはできない。
ただ、「可視化しても可読性を損なわない、むしろ読みやすくなるHTMLを心がける」というのは良いことだと思う。
さすがにpとliあたりはクドイので、その辺りは消した。
del:before{ content:"[del @datetime='" attr(datetime) "']"; } del:after{ content:"[/del]"; } ins:before{ content:"[ins @datetime='" attr(datetime) "']"; } ins:after{ content:"[/ins]"; } del:before, ins:before, del:after, ins:after{ color:#888888; font-size:85%; } .section ul:before,.section ul:after, .section ol:before,.section ol:after, .section dl:before,.section dl:after, .section dt:before,.section dt:after, .section dd:before,.section dd:after, .section li:before,.section li:after, .section h2:before,.section h2:after, .section h3:before,.section h3:after, .section h4:before,.section h4:after, .section h5:before,.section h5:after, .section h6:before,.section h6:after, .section blockquote:before,.section blockquote:after, .section section:before,.section section:after, .section p:before,.section p:after{ display:inline-block; color:#bbbbbb; font-size:85%; } .section pre span:before,.section pre span:after{ display:none; content:''; } .section li:before{ content:'[li]'; } .section li:after{ content:'[/li]'; } .section blockquote:before{ content:'[blockquote]'; } .section blockquote:after{ content:'[/blockquote]'; } .section dl:before{ content:'[dl]'; } .section dl:after{ content:'[/dl]'; } .section dt:before{ content:'[dt]'; } .section dt:after{ content:'[/dt]'; } .section dd:before{ content:'[dd]'; } .section dd:after{ content:'[/dd]'; } .section pre:before{ content:'[pre]'; display:block; } .section pre:after{ content:'[/pre]'; display:block; } .section code:before{ content:'[code]'; } .section code:after{ content:'[/code]'; } .section h1:before{ content:'[h1]'; } .section h1:after{ content:'[/h1]'; } .section h2:before{ content:'[h2]'; } .section h2:after{ content:'[/h2]'; } .section h3:before{ content:'[h3]'; } .section h3:after{ content:'[/h3]'; } .section h4:before{ content:'[h4]'; } .section h4:after{ content:'[/h4]'; } .section h5:before{ content:'[h5]'; } .section h5:after{ content:'[/h5]'; } .section h6:before{ content:'[h6]'; } .section h6:after{ content:'[/h6]'; } .section p:before{ content:'[p]'; } .section p:after{ content:'[/p]'; } .section ul:before{ content:'[ul]'; } .section ul:after{ content:'[/ul]'; } .section ol:before{ content:'[ol]'; } .section ol:after{ content:'[/ol]'; } .section header:before{ content:'[header]'; } .section header:after{ content:'[/header]'; } .section nav:before{ content:'[nav]'; } .section nav:after{ content:'[/nav]'; } .section aside:before{ content:'[aside]'; } .section aside:after{ content:'[/aside]'; } .section section:before{ content:'[section]'; } .section section:after{ content:'[/section]'; }