読者です 読者をやめる 読者になる 読者になる

CSSでHTMLタグの可視化

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]';
}