0

Consider the following design...

enter image description here

Lets's assume that (scenario 1):

  • The outer design with grey sections, and blue & green buttons is Bootstrap
  • The inner design with purple and yellow sections is also Bootstrap, but a different stylesheet
  • The red box is imaginary. It only exists to demonstrate where the partitioning should occur.

Let's assume that (scenario 2):

  • The outer design with grey sections, and blue & green buttons is Bootstrap
  • The inner design with purple and yellow sections is Material
  • The red box is imaginary, as above.

Is it possible to partition CSS stylesheets like this, where one can only render up to an element, and the other can only render from that element (in this case, where the imaginary red box is)?

Matthew Layton
  • 39,871
  • 52
  • 185
  • 313
  • 1
    Well one lazy answer is to make the red box an iframe to a different page with its own styles ;) – Liftoff Sep 24 '21 at 21:23
  • On a more serious note, with strictly CSS...not really. You can use a preprocessor to modify all of the CSS rules' selectors for you and apply them just within part of the page, but that can be tricky if the red box is nested within the outer gray part as the outer rules can still affect the inner div. Similarly, you can rewrite all of the selectors yourself, but with the same outcome. To truly get this effect, you would have to be so strict with the selectors that I highly doubt it's what you actually want. Honestly, even though my first comment was a joke, iframes are probably your best bet. – Liftoff Sep 24 '21 at 21:27
  • 2
    [Here's a related question](https://stackoverflow.com/questions/26263616/link-external-css-file-only-for-specific-div) – Liftoff Sep 24 '21 at 21:28
  • A good reading about: https://www.quirksmode.org/blog/archives/2019/03/scope_in_css.html – Daniels118 Sep 24 '21 at 21:39
  • @David I suspect that using an iframe may not work either as I want to be able to dynamically modify the content in that element, but I'll investigate anyhow. It would be nice if there was a way that you could set the scope using an attribute on the link tag; for example `` – Matthew Layton Sep 24 '21 at 21:46
  • It is possible to modify an iframe from a parent page if you have access to the iframe's code and it's on the same domain. – Liftoff Sep 24 '21 at 21:49
  • "Is it possible to partition CSS stylesheets [...] where one can only render up to an element, [...]? [Not yet](https://drafts.csswg.org/css-cascade-6/#scoped-styles) – Alohci Sep 24 '21 at 22:13
  • @Alohci that's exactly what I'm looking for. Any idea of an ETA? – Matthew Layton Sep 24 '21 at 22:14
  • None at all I'm afraid. The level 6 draft was only created less than a couple of weeks ago. It will be a long time before there are implementations, and they may never come come to pass. – Alohci Sep 24 '21 at 22:19

0 Answers0