Separation of CSS contexts on same HTML page

Question

I'm building a demo page to compare styling options of page elements. Same page, identical UL each time, different styling rules... But with the same names for classes...

(Output from http://perfecticons.com works on fiddle! http://jsfiddle.net/4he2j52h/)

I'm stuck on the terms "separate context" just because I've used them before (^edited)

Question Is:

What is it really called when you do that to CSS?
Does it even exist?

I often can't solve a prob just because IDK what the right search terms are!

iframes do that, yep

That's what I'm doing but I've ended up attempting some amateurish framework for separation of something I'm not sure the name of using five different languages in ways they're sometimes deliberately designed to hinder!

The Question Is Still:

> What is it really called?

> Does it even exist?

For background, here's what I have:

(Really, this is just for background, in case someone wants to see code. The question is what's it called when you make one bit of a page separate from another as far as CSS is concerned)

pages/[integer]/index.php           (the pages that get iframed)
pages/[integer]/stylesheet.css      (styles generated by perfecticons.com)

fonts/[various font files, eot, svg, ttf & woff]   (also from perfecticons)

index.php                     (main page)
fn.php                        (functions)
iconsHTML.php                 (included in the pages that get iframed)
stylesInIframes.css
stylesOnMainPage.css

Each of the index.php files that are to be iframed into main index, and the main index.php itself, all have fn.php included which has:

To get ready:

include 'path/to/config.php'; // config file with HTML opener() and closer()
define('PAGESPATH', 'pages/');
define('ICONSHTML', '../../iconsHTML.php');

Function to make main page:

function mainPage() { 
    $pages = glob(PAGESPATH . "[0-9]*", GLOB_ONLYDIR);
    foreach ($pages as $p) {
        echo '<iframe src="' . $p . '"></iframe>';
    }
}

Function to make Demo pages:

function demoPage() {
    /* === Get the CSS for *this* demo === */
    $css = glob("*.css");
    /* Headings / Warning */
    if ($css[1]) { // There must be more than one stylesheet in there!
        $heading = "You uploaded too many stylesheets!";
    }else{
        $heading = basename($css[0]);
    }
    /* Fix it so I don't need the fonts duped for each demo */
    $css = file_get_contents($css[0]);
    $needle = 'PATH_TO';    // path perfecticons.com put in generated CSS
    $fontsPath = '../../socicon-font-files';
    $css = str_replace($needle, $fontsPath, $css);
    $css = '<style>' . $css . '</style>';
    /* === Now put it on the page === */
    opener('Social Network Icons Demos', 'basic');
    echo '<link rel="stylesheet" type="text/css" href="../../stylesInIframes.php" />';
    echo $css;
    echo '<span>' . $heading . '</span>';
    include ICONSHTML;
    closer();
}

I think [this](http://stackoverflow.com/questions/8554043/what-is-clearfix) might help — DevDonkey, Sep 14 '15 at 15:52
No cigar I'm afraid. I've edited the spurious reference you read so as not to mislead anyone else, thank you for helping me refine my question :) — Speckle, Sep 14 '15 at 15:57

feeela · Accepted Answer · 2015-09-14T16:10:36.283

Here are my two possible answers:

A) You want to output only the CSS that is used on the current page. In this case you can build a concatenated CSS file from the source modules for each page based on the contents. I wouldn't do that though, as I never know which kind of content an author is going to place on a specific page. (But there are tools as well to find out…)

B) You probably want “CSS scoping” – but this still is an experimental technology. The browser support is not good yet.

[…] There's a new element attribute that allows control over several elements: scoped. The style element's scoped attribute allows developers to apply styles to only the host element and descendant elements -- a new level of control that CSS hasn't seen in several years. […] Scoped styles apply to the current element and descendant elements.
– David Walsh

See:

This topic (“encapsulate CSS” or “limit CSS to a specific scope”) is also being discussed by some folks who already into Web Components. (see for example http://webcomponents.org/ or https://developer.mozilla.org/en-US/docs/Web/Web_Components)

That's nice! Exactly what I need, thanks :) Shame it's ONLY doable in Firefox but, given that the immediate need is for in-person demos, can make my apologies for that requirement at the time. — Speckle, Sep 14 '15 at 16:23
@Speckle I would expect that feature to be broadly available from 2017 on. — feeela, Sep 14 '15 at 16:36
Not sure I quite believe it but http://i.imgur.com/BFCw0lG.jpg No iframes. 10 lines, which I threw down within maybe 15 minutes of your post. Will be very handy for development if not production. <3 — Speckle, Sep 14 '15 at 17:21

Separation of CSS contexts on same HTML page

Question Is:

iframes do that, yep

The Question Is Still:

1 Answers1