How large can CSS values be?

Question

I have a problem with CSS values larger than 2¹⁵ in Opera, such as width:32999px.
I want to know how large the values can be in CSS or HTML, depending on the browser.

Answer 1

There is two answers to this: the official CSSWG one, which will be a requirement in the upcoming CSS3 Values (that should reach CR very soon) and the practical one, what browsers, not necessary compliant with CSS3 Values implement.

Until CSS3 Values, they weren't a minimum max value for , so different browsers have a different limit: 32767 (2^15-1) for Opera, 2^20-1 for IE9, more for other…

That means that for the time being the practical max value that can be used is 32767. Values with higher number may be considered as 'invalid' or clamped, I don't know.

During the spec work of CSS3 Values, the idea to put a reasonable min value was discussed. In the March 2012 draft, 2^30-1 was set [3], then a first discussion lowered it to 2^24-1 and another proposal to lower it to the IE9 limit (2^20-1) was done [2], and finally the working group set for… 2^27-1. [1]

So officially this is the current value for CSS3-compliant values. But… the current editor draft [4](which should be the WIP of the CR) has no more value set. Maybe the decision was pushed to CSS4.

So the practical limit (2^15-1) is the current one to use. It is a minimal limit, meaning that browsers are free to have a higher one (don't count of higher values to be considered as invalid) and it will very likely be higher in a few years (between 2^20-1 and 2^31-1, with 2^24-1 and 2^27-1, being two other probable values).

The best page to watch to be kept up-to-date with the future limit is: https://developer.mozilla.org/en-US/docs/CSS/integer which is often updated, or to follow the mailing list of the CSSWG (verbose).

Sources: [1] Latest decision: http://lists.w3.org/Archives/Public/www-style/2012Apr/0633.html [2] Previous decision and counter proposal: http://lists.w3.org/Archives/Public/www-style/2012Apr/0530.html [3] March 2012 working's draft (2^30): http://www.w3.org/TR/2012/WD-css3-values-20120308/#integers [4] Latest editor's draft (content may be edited in the future, but at the time of this answer it doesn't contain a limit anymore): http://dev.w3.org/csswg/css3-values/#integers

Answer 2

I'm guessing you are doing this as a "hack" in order to hide something. So there are probably better ways to achieve what you want to achieve.

If you want something to be gone from the page both visually and semantically, use display: none. If you want something to be gone from the page visually but still take up space and still be there semantically (visible to non-visual user agents), use visibility: hidden. If you want something to be gone from the page visually but still be there semantically, but not to take up any space, you could try adding a position:absolute or a height: 0 or something else like that in addition to the visibility: hidden.

To answer your original question, the limit you're hitting is probably 2^15 - 1, or 32767 (and if you take rounding into account, take another few off that). This is the highest allowed number for a 16-bit signed integer. However, there is no standard that says this should be a limit; you're probably just hitting a browser-specific limitation.

Answer 3

Opera has a bug that limits CSS values to 32766. They use signed 16 bit integers which causes the limit. It is a known problem and hopefully they will fix it soon. Other browsers don't have the same limit and I couldn't find much on other browsers' limits, but they will be at least 65535, possibly more. There is a thread in the Opera forum at http://dev.opera.com/forums/topic/242545?t=1269270866&page=1