Randomize CSS Rules

Question

I was working on a website, and I thought of how funny it would be if I completely randomized the CSS rules on the page as a joke. (Not just the elements' styles, but the CSS rules themselves, because the website has a lot of dynamically created elements.) Each time you loaded the page the result would be completely different, and most of them would look terrible. So my question has two parts:

Using JavaScript/JQuery, How do you programmatically get a list of all CSS rules? As a sort of dictionary, with the rules paired to the selectors.

Then, after you have broken down the list and randomly assigned each rule to a different selector, how do you delete the previous rules and substitute in your own?

NOTE: I mean, using JavaScript/JQuery, how do you randomize the rules on the client side, not just a single CSS file.

and how do yo convince the user to press F5 to reload without cache. you probably need to change the name of the CSS file as well or put a ?v=randomnumber — Pleun, Jun 06 '13 at 19:06
Well, I was thinking that you would randomize it using JavaScript/jQuery instead of actually changing the CSS files. There's much less risk that way, and it's a more complete randomization anyway. — leviathanbadger, Jun 06 '13 at 19:08
No, I mean on the user's machine, I run something like `$(function() { randomizeRules(); });`. I just don't know how to `randomizeRules();`. — leviathanbadger, Jun 06 '13 at 19:12
Although it is completely useless, it's still very interesting... — Johnny5, Jun 06 '13 at 19:14
I think you have to draw a line between layout and visual-only stuff and just randomize the visual ones. — kleinfreund, Jun 06 '13 at 20:01

score 2 · Answer 1 · answered Jun 06 '13 at 19:19

2

You can access and traverse all the stylesheets with document.styleSheets. See the API documentation on MDN

answered Jun 06 '13 at 19:19

Barmar

741,623
53
500
612

this link may be useful : http://stackoverflow.com/questions/324486/how-do-you-read-css-rule-values-with-javascript – Johnny5 Jun 06 '13 at 19:43

score 1 · Answer 2 · answered Jun 06 '13 at 19:10

1

Mind you this is a bit psuedo-ey, also note that you can do this using pure JS.

foreach (var e in document.getElementsByTagName("*")) {
  foreach (var p in el.style) {
    var r = Math.random(0, 255);
    e.style[p] = r;
  }
}

also note that not all css properties take 0 - 255 so you might have to create your own algorithm, but this'll sure get you started.

answered Jun 06 '13 at 19:10

ddavison

28,221
15
85
110

This only changes the styles of the elements, not the rules themselves - it won't do anything to dynamically created content. – leviathanbadger Jun 06 '13 at 19:11
if you want it to happen to your page alone, then this answers the 1 question i am answering. if you want it globally as a joke, then you need to have some browser plugin to span across all websites. which it wouldn't be a passive joke anymore :P – ddavison Jun 06 '13 at 19:23
you could just randomized class on elements, and sort those class by themes. – G-Cyrillus Jun 06 '13 at 19:32
It's only for one page, but your answer doesn't randomize the CSS rules - it randomizes the elements' styles. Anything created using another script after yours runs is not affected at all. – leviathanbadger Jun 06 '13 at 19:32

score 0 · Answer 3 · answered Jun 06 '13 at 19:53

Looping through all the elements in the page would be trivial (document.getElementsByTagName('*')).

Looping through all the styles available for each element would be trivial (element.style).

Setting random values for any given style would be harder.

You would need to have hard-coded lists of styles and possible values for each of them, because the values that can be set vary so wildly. Some can be in a variety of different units (px, em, %). Some of them have pre-defined keywords as the possible values.

And a random value is no good at all if you don't have limits to it. Setting a random width sounds easy, but you have to know what ranges you're going to work to. width:5743731px isn't going to be very useful even for a randomised page.

And then you have the properties that can fetch external resources. A CSS background image is going to be virtually impossible to randomise, and fonts would need to be loaded in a separate @font-face declaration, so you would only be able to randomise fonts that you know are loaded.

And then you have to think about how randomised you're going to be. Are you going to randomise every possible style on every element? (crazy, but hey, this whole thing is crazy so why not) Or just one style per element?

Don't forget that a lot of styles work in conjunction with each other. So text-overflow:ellipsis does nothing unless you also have white-space:nowrap and overflow:hidden. And setting a border-color is pointless unless you've also set the other border attributes.

So yes, I think your first task here would be to go through the list of CSS styles and work out which ones could be randomised and what the possible randomised values for them could be. That's the difficult bit. Once you've got that, hard code it into your program, and the rest should be fairly simple.

Randomize CSS Rules

3 Answers3