Last modified: 2013-11-29 08:21:28 UTC
Enhancement request: Add <style scoped> to the set of HTML elements that can be used in wiki source. That would allow authors to specify styles for all child content of a particular part of a page (element). For example: <div id="terms"> <style scoped> ul: { display: table } li: { display: table-row } dfn: { display: table-cell } p.def { display: table-cell } </style> <ul> <li> <dfn id="scoped">scoped</dfn> <p.def>A attribute for the "style" element that allows you to include CSS rules within the body of an HTML document but scope those rules just to a particular portion of the document.</p> </li> </ul> </div>
<style scoped> is not yet supported by any browsers except for Firefox, and this attribute wouldn't degrade gracefully. It shouldn't be implemented anytime soon. http://caniuse.com/#feat=style-scoped
(In reply to comment #1) > <style scoped> is not yet supported by any browsers except for Firefox, > http://caniuse.com/#feat=style-scoped It's implemented in Chrome as well. There's a user option for enabling it. See the note at the bottom of that caniuse page. > and this attribute wouldn't degrade gracefully. All CSS degrades pretty gracefully. How gracefully the actual user experience degrades depends on how the content's authored. The example I gave in the description will degrade from being displayed as a table to being displayed as a normal bulleted list.
(In reply to comment #2) > (In reply to comment #1) > > <style scoped> is not yet supported by any browsers except for Firefox, > > http://caniuse.com/#feat=style-scoped > > It's implemented in Chrome as well. There's a user option for enabling it. > See the note at the bottom of that caniuse page. Yeah, so in other words it's not supported unless someone enables it. That still means it's not supported. (In reply to comment #2) > All CSS degrades pretty gracefully. How gracefully the actual user experience > degrades depends on how the content's authored. The example I gave in the > description will degrade from being displayed as a table to being displayed > as a normal bulleted list. When one disregards the fact that your HTML and CSS are malformatted (<p.def>, trailing colons on selectors) and uses its fixed version in a browser which doesn't support <style scoped>, the styles from it are applies to all elements on the page, even ones outside the scope. So no, it does not degrade gracefully.
(In reply to comment #3) > in a browser which > doesn't support <style scoped>, the styles from it are applies to all > elements on the page, even ones outside the scope. So no, it does not degrade > gracefully. Ah, yeah, you're right. Sorry for the noise -- I should have thought it through a little better.
It would be possible to emulate a scoped style for browser without support for scoped styles by changing the selectors to a specific element. wikicode <style> table.wikitable > tr > th, table.wikitable > * > tr > th { background-color: #fee; } </style> is converted to <style scoped> #mw-content-text table.wikitable > tr > th, #mw-content-text table.wikitable > * > tr > th { background-color: #fee; } </style>
