Original source: http://blog.csdn.net/hfahe/article/details/7381141
Chromium recently implemented a new HTML5 feature: Range style, also known as <style scoped>. Developers can restrict a style to only the child elements of a style label by setting a style label for the root element that adds the scoped attribute. This restricts the style to affect only 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>It sets the style rules to make all <div> turn red,<span> to green:
A div! A span!
A div! A span!
A div! A span!However, if we set the scoped property 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 restriction allows them to be applied to the parent <div> element of the <style scoped> element and all elements within it. We call it "scope," and the results are as follows:
A div! A span!
A div! A span!
A div! A span!Of course we can use this tag anywhere. So if you like to take risks, you can add as many range styles within a range style as possible to get the finer possible style control granularity.
Use
What good is it.
A common use is content consolidation: When you as a website author want to embed content from third parties (think about blogs), including all of its style styles, but do not want to let these styles "pollute" the pages of other unrelated parts. A huge advantage is that other sites such as Yelp, Twitter, ebay, etc. can be merged into a single page without the need to isolate them using <iframe> or dynamic editing of external content.
If you use the Content Management system (CMS), it will send a number of tag fragments to consolidate into a final displayed page. So the range style is a great feature that ensures that each fragment is isolated from the style on any other page. This is also useful for wikis.
When you want to show some nice demo code on the page, it's easy to limit the style to just the demo content. You can add styles at random without worrying about the impact on other content on the page.
Another use of it is simple encapsulation: for example, if your Web page has a side menu, it makes sense to encapsulate the style of the menu in the <style scoped> paragraph. These style rules will have no effect on the rendering of other areas of the page, which allows it to be well separated from the main content.
One of the most compelling uses of it is in the Web Component model. The Web component will be a great way to build like sliders, menus, date selectors, and tab parts. By providing a range of styles, designers can build a component and package it into a separate unit that others can use and combine into a rich Web application. We plan to use a wide range of styles in Web Components and shadowdom, which can already be enabled with the experimental "Shadow DOM" flag in Chrome://flags. In addition to such bad ways as inline styles, there is no real good way to ensure that styles are limited to Web components, so the range style is 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 the universal background color for the entire locale. It also allows for a "defensive" way to write range styles, providing graceful demotion to browsers that do not support <style scoped> by prefixing IDs or class selectors.
<div id= "Menu" ><style scoped>#menu. Main {...}#menu. Sub {...}...This imitation can achieve the "scope style" effect, but because more complex selectors have some run-time performance loss. The advantage of this approach is that it employs an elegant downgrade method that allows us to wait until the <style scoped> is widely supported and the ID selector can be simply discarded.
State
Since the implementation of the range style is up to date, it is currently hidden in the Chrome runtime logo. To activate it, you need to download the version 19 or higher chrome (now Chrome Canary), then find the "Open <stylescoped>" option (near the end) in Chrome://flags, click "Enable", Then restart the browser.
There are no known bugs at this time, but the @keyframes and @-webkit-region zone-wide versions are still being implemented. In addition, @font-face has been overlooked because there is a good chance to adjust this specification now.
We encourage everyone who is interested in this feature to try and let us know your feedback: good, bad and (probably) inadequate.
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
