CODEWITHSUNDEEP
css
stevenvh
stevenvh

Reputation: 3159

What's the use of the new "scoped CSS"?

I found this on caniuse.com, and I was wondering what kind of problems it solves which can't be done with the current in CSS. For example,

<div>
  <style scoped>
    h1 { color: FireBrick;   }
    p  { color: SaddleBrown; }
  </style>
  <h1>This is an H1 in a scoped div. 
      Regardless of global styles the text should be "FireBrick".
  </h1>
  <p>This is a paragraph in a scoped div. The text should be "SaddleBrown".</p>
</div>

<p>This is another paragraph, 
   that will unaffected by the scoped style and remain black.</p>

can easily be done as 

<style>
  div.scoped h1 { color: FireBrick; }
  div.scoped p  { color: SaddleBrown; }
</style>

<div class="scoped">
  <h1>This is an H1 without scoped div. 
      Regardless of global styles the text should be "FireBrick".
  </h1>
  <p>This is a paragraph without scoped div. 
     The text should be "SaddleBrown".</p>
</div>

<p>This is another paragraph, 
   that will unaffected by the scoped style and remain black.</p>

Or am I missing anything?

edit
Isn't this reintroducing inline styles, the least favored of the three ways of styling?

Upvotes: 0

Views: 200

Answers (2)

Christoph
Christoph

Reputation: 51241

The problem might get clearer, when you think about a huge framework, that consists of lot of separate modules, each introducing some html snippets which in the end are assembled into the final HTML.

When developing a module, you cannot possibly tell if perhaps another developer had the same idea and also used a class like in your example scoped to limit the scope of their CSS styles. Suddenly your module is overwriting the styles from a complete different module.

With the scoped attribute you can be sure, that the styles are limited to that part of the dom which you actually want to target.

Bad:

<head>
   <style>
     div.scoped p  { color: SaddleBrown; }
   </style>
</head>
<body>
   <div class="scoped module-1">
     <p>will be affected</p>
   </div>
   <!-- ... more markup -->
   <div class="module-2 scoped">
     <p>will also be affected</p>
   </div>

Good:

<head>
   <style>
     div p  { color: SaddleBrown; }
   </style>
</head>
<body>
   <div class="module-1">
     <p>will be SaddleBrown</p>
   </div>
   <!-- ... more markup -->
   <div class="module-2">
   <style scoped>
      /* appears later in the markup, so will override per law of cascading */
      div p  { color: #bada55; }
   </style>
     <p>will be #bada55 !</p>
   </div>

And no, these are not inline styles, because it's: 1) still a separate style block 2) obeying the same rules in terms of precedence like the other style declarations, thus you are still able to override them externally without much hassle.

Upvotes: 0

VAShhh
VAShhh

Reputation: 3504

as written HERE the new scoped css instruction is useful in case you need to include in your HTML some code from an external source and you don't want to risk that the CSS instructions that you bring in affect your current layout.

I.E. If you copy a block of HTML with a <style> tag that contains a class with the same name of yours included in the <head>, that class would be overwritten by the external code that you've included / injected

Using their words:

"A common use case is syndicated content: when you as a web author would like to incorporate content from a third party, including all its styles, but do not want to risk those styles “polluting” other, unrelated parts of the page. A great advantage here is the ability to combine content from other sites like yelp, twitter, ebay, etc. into a single page without needing to isolate them using an or on-the-fly editing the external content."

Upvotes: 1

Related Questions