Kilian Valkhof

Front-end & user experience developer, Jedi.

Maximum number of supported classes per element?

CSS & HTML, 27 March 2008

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 2x, So for every loop, we add 2i-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.)

Thanks for Reading!

I am Kilian Valkhof, a front-end and user experience developer from the Netherlands.
Contact me or ping me on twitter.

  1. Knowing how computer limits work (usually base 2 numbers, unless something is specifically set by the programmer), the limit is probably something like 65,536, or 2^16. Don’t ask me to expound on that number, I just see it as a common limit for computers :) it all depends on how many bits the browser uses to keep track of the classes.

  2. Testing in Firefox can be easier if you modify http://kb.mozillazine.org/Dom.max_script_run_time to a higher value (don’t set time to 0 as the script will probably run forever!)

  3. […] Valkhof finds out with some javascript. Opera and Safari, 4000ish. FF and IE7, 2000ish. So the answer: Way more than we’ll ever […]

  4. […] verträgt der durchschnittliche Browser. Das hat jedenfalls hat Kilian Valkhof im Experiment herausgefunden. Die Zahl wäre vermutlich noch höher, aber ab 2000 beginnen die ersten Prozessoren Einspruch […]

  5. […] http://kilianvalkhof.com/ An interesting experiment to determine just how many CSS classes can be applied to a single element. […]

  6. […] fear no more. Using JavaScript, Kilian Valkhof has uncovered a relieving (and surprising) conclusion. I don’t want to steal his thunder, but there is nothing to worry about; add all the classes […]

  7. cmoslim

    “Way more than you’ll ever need.” lol, now I have an answer for my snarky little interns when I’m teaching them the finer points of markup and css, thanks for this .’)

  8. By adding classes in exponential numbers, you’re seriously affecting the accuracy of your test. By the time you reach 2000+ classes, you don’t know whether the browser will fail to accept 2001 classes or 4000 classes.

  9. Andy

    I’m working on a jQuery project that use’s many classes to sort products. Does anybody know if jQuery might set a maximum number of classes?

  10. […] 2000 Klassen, die man pro Element auf alle Fälle vergeben kann, sollten jedem reichen. Opera, Safari (und Chrome?!) vertragen […]

  11. Thank you for doing this testing! It helps me out with my current project. :)

  12. Karthick

    I am checking with adding classes to DOM elements such that I could do sorting and I wondered to what extent I can add classes. This helped me. Thanks A Lot !!!