Chromium recently implemented a new HTML5 feature: range style, also known as <style scoped>. Developers can set a style label with the scoped attribute for the root element to restrict the style to only apply to the child element of the style label. This limits the style to only affect the parent element of the style label and all its descendant elements.
Example
The following is a simple page with a standard style:
<body><div>a div! <span>a span!</span></div><div><style>div { color: red; }span { color: green; }</style>a div! <span>a span!</span></div><div>a div! <span>a span!</span></div></body>The style rules it sets will make all <div> Red and <span> Green:
A Div! A span!
A Div! A span!
A Div! A span!However, if we set the scoped attribute for the <style> element:
<body><div>a div! <span>a span!</span></div><div><style scoped>div { color: red; }span { color: green; }</style>a div! <span>a span!</span></div><div>a div! <span>a span!</span></div></body>This style rule applies to the <style scoped> element's parent <div> element and all its internal elements. The result is as follows:
A Div! A span!
A Div! A span!
A Div! A span!Of course we can use this label anywhere. So if you like adventure, you can add as many range styles as possible in a range style to get as detailed as possible style control granularity.
Purpose
What are its advantages?
A common purpose is content merging: When you, as the author of a website, want to embed content from a third party (Translator's note: Think about blog), including all its style styles, but you don't want these styles to "pollute" other unrelated parts of the page. One of its major advantages is that it can merge content from other websites, such as Yelp, Twitter, and eBay, into a single page, you do not need to use <IFRAME> or dynamically edit external content to isolate them.
If you use the Content Management System (CMS), it will send many tag fragments to integrate into a final displayed page. Therefore, range styles are a great feature that ensures that each clip is isolated from any style on any other page. This is also useful for wiki.
When you want to display some beautiful DEMO code on the page, it is easy to restrict the style to only apply to the demo content. You can add styles at will in the demo without worrying about the impact on other content on the page.
Another purpose is simple encapsulation. For example, if your webpage has a side menu, it makes sense to encapsulate the style pointing to the menu into the <style scoped> section. These style rules will not affect rendering of other areas of the page, which can be well separated from the main content!
One of its most notable uses is to use the Web component model. Web components will be a great way to build widgets like slider, menu, date selector, and Tab widgets. By providing a style within the scope, the designer can build a component and package it into an independent unit. Others can use this component and combine it into a rich web application. We plan to use a wide range of styles in the Web Components and shadowdom (the experimental "shadow Dom" flag can already be enabled in chrome: // flags. In addition to the poor way such as inline styles, there is no really good way to ensure that styles are restricted in Web components, so range styles are a perfect solution.
Why include the parent element?
The most natural way is to include the parent element so that the <style scoped> rule can be used to set a general background color for the entire region. It also allows the use of "defensive" to write the range style, by adding a prefix to the ID or class selector to the browser that does not support <style scoped> to provide an elegant downgrade.
<div id=”menu”><style scoped>#menu .main { … }#menu .sub { … }…This kind of imitation can achieve the effect of "range style", but the more complex selector may cause some performance loss during runtime. The advantage of this approach is that it uses an elegant degradation method so that we can wait until the <style scoped> is widely supported and the ID selector can be simply discarded.
Status
Since the implementation of the range style is the latest, it is currently hidden in the runtime logo of chrome. To activate it, you need to download Chrome with version 19 or higher (now chrome canary), and then in chrome: // find the Enable <stylescoped> Option in flags (close to the end), click Enable, and restart the browser.
Currently, no bugs are known, but the versions of @ keyframes and @-WebKit-region are still being implemented. In addition, @ font-face is ignored because there is a good opportunity to adjust this specification.
We encourage everyone interested in this sexiness to try it and let us know your feedback: Good, bad, and (possibly) insufficient.
Translation: http://updates.html5rocks.com/2012/03/A-New-Experimental-Feature-style-scoped
Reprinted Please note: Jiang Yujie's blog
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
