π§ͺ CSS Preview: Defining Your CSS Scope with @scope
#css #scope
β Article link: https://medium.com/@weijunext/css-preview-defining-your-css-scope-with-scope-47914ab319d3
#css #scope
β Article link: https://medium.com/@weijunext/css-preview-defining-your-css-scope-with-scope-47914ab319d3
π2
πDefining Scoped CSS with
#css #scope
@scope#css #scope
By default, the traditional CSS implementation styles web pages with a global scoping concept. Moreover, in the past, no CSS scoping feature was present with the style tag, every style tag was feasible for styling any HTML node, including the root regardless of the style tag position in the DOM tree. The HTML standard tried to support scoping with the scoped attribute, but it was deprecated before becoming a web standard. Now, the modern CSS specification introduced the `scope` at-rule for defining scoped CSS.
For example, you can create a scoped style tag for styling an HTML segment as follows:
<div>
<style>
@scope {
:scope {
background-color: #ddd;
padding: 12px;
}
h3 {
padding: 0 0 6px 0;
margin: 0;
border-bottom: solid 2px #eb7e3b;
}
}
</style>
<h3>Lorem ipsum dolor sit amet</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
</div>
The above style tag defines a scoped CSS content for the parent div element with @scope. Here, we targeted the scoped element using the :scope pseudo-class.
π1