How large can CSS values be?


Tags: javascript,html,css,browser

Problem :

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.



Solution :

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


    CSS Howto..

    How do I get this div to cover flash control (jw player)?

    How to Jump-Start PhoneGap App Development [closed]

    How can I map 5 distinct zone on a draggable-vertical element?

    How do I make a play button for my full page video?

    How to get the current browser resolution in css?

    How to shrink the menu when mouse hover on a link using jquery

    How can I put element in the middle of vertical align?

    How to create a simple Modal Dialog Box in JQuery?

    How to center a span in a div

    How do you add a footer with css display: table?

    CSS media queries [how to transform to hyperlinks via media queries]

    How would can i keep horizontal divs (3 in a row) with margins inbetween them inline with wrapper?

    How can I center just one element within a container?

    How to make .less files to have .css syntax highlight in Vim?

    How to align two images in html/css

    IE11 dosen't show CSS-Content properly

    Can someone help me to know how I can make my layout work in small screen using css , css3?

    How to select nth sibling after specific class based on any number multiple with CSS? [duplicate]

    How to do grid of div elements?

    Page not displaying, error not shown in console?

    How to create a css rule for all elements except one class?

    How to do onclick in CSS to do transition on image?

    Bootstrap dropdown div not showing in non-collapsed view

    How to increase the distance between table columns in html?

    How can one select a parent element several levels above the child element utilizing the 'hover' selector and ':has()'?

    How to reload or rerender CSS for a single HTML element? [duplicate]

    How to change the slide picture when resize browser size

    How to fix smooth text in IE?

    How to make two tooltip ids independently close, and remember cookie?

    How to stack an overlay over html5 video