Scoped CSS

June 6, 2012

I found this one link on twitter to a blog post about some near-future html additions. I read through the post and one thing that kept nagging on in the back of my mind was the new <style scoped>.

I really can’t understand the real need for this addition. When would it be better to use the scoped version instead of inline object style or adding it as a child style to the container in the css at the <head> or in an external css file?

Anybody?

<!-- Scoped version -->
<div class="container">
	<style scoped>
		p { color: red; }
	</style>
	<p>This paragraph has red text.<p>
</div>
<p>This paragraph does not.</p>

<!-- Inline style -->
<div class="container">
	<p style="color:red;">This paragraph has red text.<p>
</div>
<p>This paragraph does not.</p>

<!-- Head style -->
<head>
	<style type="text/css">
		div.container p { color:red; }
	</style>
</head>
<body>
	<div class="container">
		<p>This paragraph has red text.<p>
	</div>
	<p>This paragraph does not.</p>

Tags