Topic on Talk:Requests for comment/Scoping site CSS

I don't agree that Common.css is only for article styling, but ignoring that...

How can you use Less to enforce scoping?

What prevents someone from putting this in Common.css?

   }
   
   body {
       color: red;

or this?

   a.my_custom_navlink { position: absolute; top: -50px; left: -50px; }

The first example should set body text to red by closing the scope you wrapped it with. The second example should push a link above and to the left of the article content.

If you want to limit CSS, I think you need to parse it, whitelist specific properties and values, and prepend a content div selector to all selectors.

You could get round this by pre-parsing MediaWiki:Common.css and then wrapping it. The first example would then throw a LESS compiler error. I don't think the 2nd example is much of a problem. There is a limit to the sort of things you can do with this kind of selector. People should be able to do those if they really want.

It seems that there is interest (below) in splitting Common.css into Content.css and UI.css to make where rules apply more explicit.

Fair enough. As long as you don't consider it "secure".

More examples

In this example, the body text is turned green. Fiddle: http://jsfiddle.net/YbPRh/

Less:

   #content {
     @test: "}body{color:green;}/*";
     @test2: %('"%s', @test);
     a {a:@test2}
   }

CSS:

   #content a {
     a: ""}body{color:green;}/*";
   }

In this example, the body text is turned red. JavaScript is used here though and would have to be disabled anyways. Fiddle: http://jsfiddle.net/spEL5/

Less:

   #content {
     a {a:`'"}body{color:red;}/*'`}
   }

CSS:

   #content a {
     a: ""}body{color:red;}/*";
   }