Home > Developer > Web Develop
Chromium recently implemented a new feature of HTML5: The range style, also known as <style scoped>. Developers can restrict a style to only the child elements of the style tag by setting a style tag that adds the scoped attribute to the root element. This restricts the style to affect only the parent element of the style label and all of its descendant elements.
Example
Here's a simple page that uses 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> turn red,<span> 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>Then this style rule restriction makes them apply to the parent <div> element of the <style scoped> element and all elements inside 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're adventurous, you can add as many range styles as possible within a range style to get the finer possible style control granularity.
Use
What good is it?
A common use is content merging: When you as a website author want to embed content from third parties (translator note: Think about blogs), including all of its styling styles, but don't want these styles to "contaminate" the other unrelated parts of the page. One big advantage is the ability to combine content from other sites such as Yelp, Twitter, and ebay into a single page without having to isolate them with <iframe> or dynamically editing external content.
If you use a Content management system (CMS), it sends a number of tagged fragments to be integrated 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 presentation. You can add styles to your presentation at will without worrying about the effects on other content on the page.
Another use for it is simple encapsulation: for example, if your page has a side menu, it makes sense to encapsulate the style of the menu to the <style scoped> paragraph. These style rules will not have any effect on the rendering of other areas of the page, which can make it very well separated from the main content!
One of the most compelling uses it can use is on the Web Component model. The Web component will be a great way to build like sliders, menus, date selectors, and tab widgets. 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 in Chrome://flags with the experimental "Shadow DOM" flag.) In addition to the bad way of inline styling, 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 parent elements?
The most natural way is to include the parent element so that the <style scoped> rule can do something similar to setting the universal background color for the entire locale. It also allows for a "defensive" way to write a range style, providing an elegant downgrade to browsers that do not support <style scoped> by prefixing the ID or class selector.
<div id= "Menu" ><style scoped>#menu. Main {...}#menu. Sub {...}...This imitation can achieve a "range style" effect, but because more complex selectors have some runtime performance penalty. The advantage of this approach is that it takes an elegant downgrade method so that we can wait until <style scoped> is widely supported and the ID selector can simply be discarded.
State
Since the implementation of the range style is up-to-date, it is currently hidden in Chrome's run-time flag. To activate it, you need to download chrome (now chrome Canary) with version number 19 or higher, then find the "open <stylescoped>" option in Chrome://flags (near the end), click "Enable", Then restart the browser.
There are currently no known bugs, but the @keyframes and @-webkit-region zone-wide versions are still being implemented. In addition, @font-face is ignored because there is now a good chance to tweak this specification.
We encourage everyone who is interested in this feature to try and let us know your feedback: good, bad and (possibly) inadequate.
New features of HTML5: Range style, also known as <style scoped>
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
