Kilian Valkhof

Maximum number of supported classes per element?

I recently worked on a website where I used 4 classes on each of a number of elements. Interested to know what the maximum was, I consulted the specifications. They didn’t name a specific maximum, and just left it at “multiple”. A google search on browser-specific maximums gave no results either. So I decided to go test it myself.

I expected to find a number of 32 or something near that. Turns out I was quite mistaken, the real number, in all browsers, is well over 2000 classes!

The Script #

The script I used to test this is this bit:

$(document).ready(function(){
	i=0;
	var head = $('head');
	var testdiv=$("div");
	var info=$("p");
	var dummies;

	while(testdiv.width() == i) {
		i++;
		head.append("<style type='text/css'> .class"+i+" {width:"+i+"px;} </style>");
		for(a=1;a<=(Math.pow(2,i)-1);a++) {
			dummies +=" dummy"+a;
		}
		testdiv.addClass(dummies+" class"+i);
		info.html("classes: "+(Math.pow(2,i)) + "<br />testdiv.width() = " + testdiv.width() + "<br />i = " + i);
	};
});

(powered by jQuery)

The workings #

What this does is, it calls a group of DOM elements and stores them into variables. This is, as they say, "cheaper" than calling the DOM elements every loop. A good suggestion by Sander on #fronteers (Dutch) . Then, for every loop I make a new class with a width that's 1px wider than the last class, and add the new class to the div. That means that when a new class get's added, but the div's size isn't the same as the total amounth of classes anymore, We know that it didn't apply the last added class and that we've reached the limit of classes.

Now, just that would mean that we would have to check for support from 1 class all the way to the maximum amount of classes. It's a bit silly to check for every number in between. Anne suggested that the maximum number would probably be 2^x, So for every loop, we add 2ⁱ-1 (where i is the number of the loop) dummy classes in between. This means we start with 2 classes, then add 4, then 8, then 16, et cetera.

This script will slow down your browser tremendously, consider yourself warned.
You can test the script yourself, here: Class support Test.

As usual, IE support. #

With that in place, Opera, Safari supported well over 4000 classes, and Firefox at least 2000 classes. However IE(7) refused to run my script. Jamal discovered that IE didn't like adding to a <style>. He suggested I change the script to add new <style> elements instead of adding the classes to the existing one. And indeed that works. Testing in IE7 also gave, surprisingly, support for at least 2000 classes.

At least? #

You might've noticed that I've used "over 2000 classes" and "at least 2000 classes". That's because I never got to the maximum. Opera and Safari have faster Javascript engines and were able to get well over 4000. The problem is, however, that this script uses a lot of CPU so in all browsers you have to click on "continue script" for it to, you guessed it, continue.

When all browsers turned out to support well over 2000 classes, I figured that was enough information, anyway. I could probably have continues clicking "Yes, continue" all day, but really, the practical use of that many classes is virtually none. So we have to be content with the answer:

Way more than we'll ever need.

(And that's that.)