UI Development

SCOPED CSS

With the commencement of HTML5 and CSS3, we have got a handful of new features, helping us target common website issues. The focus of these features is on providing us control on different levels in a page.

One of the new feature is Scoped CSS that aims at providing a complete new level of control. It is an attribute used with <style> element that targets a parent element and its children.Styles are added in the middle of the document with this attribute. The purpose of this attribute is to satisfy specific styling needs for limited set of elements on a page rather than the violation of the separation thing where the structure and styles should be kept in different files.

WHATWG (Web Hypertext Application Technology Working Group, a group of people involved in evolving HTML and related technologies) defines scoped attribute as:

“The scoped attribute is a Boolean attribute. If set, it indicates that the styles are intended just for the sub-tree rooted at the style element’s parent element, as opposed to the complete Document.”

Why?

People might thing that using a class or an ID would get the styling job done, so whats the need of using scoped CSS? Listed below are some of the many reasons why this attribute can be useful:

  • It provides portability. It helps transfer a whole block of HTML code from one document to another document, keeping the styles intact with the document.
  • When aggregating pages on other websites, this seems to be useful in customizing styles which otherwise would be out of reach of our global style sheet.
  • It allows to add user-defined styles to wiki or CMS(Content Management System) content where there is no accessibility to existing style sheets.
  • It also helps in adding theme-defined styles via CMS plugins.

Use Cases

  1. One very practical application of <style scoped> is the syndicated content. This use case refers to a scenario where the developer wants to consolidate the content coming from third parties without allowing the incoming styles to seep into the other parts of the page. This provides developer an upper-hand as he/she can place the content coming in form Facebook, twitter, amazon, etc. into one page without having to put then inside <iframe> or editing the external content on the fly.
  2. Encapsulation would be another use case. For instance, a side navigation menu with certain styles specific to it would be just great. The style rules would be content specific and will not affect other contents on the page.
  3. Scoped styles also come handy while using a CMS. CMS sending snippets that have to be clubbed together to build the final page is not an aberration and in that situation scoped styles acts as isolation cells which ensures that the styles don’t cross-fire.
  4. The most enthralling use case of scoped styles is web component development. While developing web components, the developer can bind the styles to components so that when a component is re-used by other developers – they’ll absorb only the styles of that component. Scoped styles should be used to make styles stick to a web component as using inline style falls under bad practice.

How does it work?

Firstly let’s have a look at the standard styling method:

Example –

<html>
<body>
  <div>First div! <span>First span!</span></div>
    <div>
      <style>
        div { color: red; }
        span { color: green; }
      </style>
      Second div! <span>Second span!</span>
    </div>
  <div>Third div! <span>Third span!</span></div>
</body>
</html>

Output –

Explanation-

The style that we applied here will be valid throughout the document. Any <div> would have its text color as red and any <span> would have its text color as green.

Lets now have a look at the implementation of scoping styles:

Syntax –

<style scoped>
    /* styles go here */
</style>

Example –

<html>
<body>
  <div>First div! <span>First span!</span></div>
    <div>
      <style scoped>
        div { color: red; }
        span { color: green; }
      </style>
      Second div! <span>Second span!</span>
    </div>
  <div>Third div! <span>Third span!</span></div>
</body>
</html>

Output –

Explanation-

Here the style rules are scoped to the <div> which is the parent container of the <style scoped> and anything that is wrapped inside it, that is, its children.

This attribute overwrites the global styles(wherein the text color would be black) and ensures that styles are applied to particular blocks without disturbing the entire page.

Browser Support

At present, the scoped attribute is not compatible with browsers. Since it is not backwards compatible, it will be difficult to use this feature until there’s a strong cross-browser support. In a non-supporting browser, the styles will be applied to the whole page which can turn out to be disastrous. Following is the browser support chart for scoped CSS:

Conclusion

The new scoped feature of HTML5 is very useful for CMS users, template creators and web authors in a position where they cannot access the main style sheet.

Scoped CSS is definitely a powerful tool but only if it is used wisely. Using a scoped style, where it has no browser compatibility, will affect the entire page. A proper polyfill is thus necessary for the usage of scoped styles. For this purpose, Simon Madine has created a jQuery Polyfill.

It will also turn out to be useful in Web Components for defining next generation web apps as proposed by W3C(World Wide Web Consortium).

This is all folks. I hope that this blog will be useful.Have a great day!

About The Author