Size of Zero Pixels in CSS with or Without 'Px' Suffix

Size of zero pixels in CSS with or without 'px' suffix?

They are identical.

Use width: 0, because it is shorter and more readable.

Especially when you have, for example:

padding: 0px 0px 9px 8px

vs

padding: 0 0 9px 8px

See the specs:

The format of a length value (denoted
by <length> in this specification) is
a <number> (with or without a decimal
point) immediately followed by a unit
identifier (e.g., px, em, etc.).
After a zero length, the unit identifier is optional.

---

The minor problem with '0' is that if
you change it to some non-zero value,
you might forget to add the 'px'. And
when making a value '0', you may
forget to remove the 'px'

This does not happen once you get into the habit of writing 0 without the unit identifier.

property: 0' or 'property: 0px' in CSS?

While the unit is optional when the value is 0, I tend to leave it in, as I can then tweak the values with Chrome's Developer Tools by clicking on the value and pressing the up/down arrow keys. Without a unit, that isn't really possible.

Also, CSS minifiers strip the units off of 0 values anyways, so it won't really matter in the end.

CSS size declarations

No disadvantages, you can use 0 without "px".

A zero length may be represented instead as the ‘0’. (In
other words, for zero lengths the unit identifier is optional.)

http://www.w3.org/TR/css3-values/#lengths

Edit: also this question have been asked already

• Size of zero pixels in CSS with or without 'px' suffix?
• When specifying a 0 value in CSS, should I explicitly mark the units or omit?

Get a number for a style value WITHOUT the px; suffix

parseInt gives you the numerical value:

var tmp = parseInt(document.getElementById(nameVar).style.left, 10);
console.log(tmp);

or, as @PeteWilson suggests in the comments, use parseFloat

CSS minificator removes units for zero values (px, ms, em)

The unit identifier can be omitted only for lengths of zero. Other units require the unit identifier even for values of zero. Lengths include em, px, etc. There is some debate over whether it is better to include it or not (see this question and this one). A minifier will and should remove the unit identifier on lengths of zero. See the spec here:

for zero lengths the unit identifier is optional

Non-lengths require unit identifiers, whether zero or not. If a minifier removes the unit identifier of a non-length, such as the ms in the time given as the value of the property transition-duration, it is a bug in the minifier.

Fallback for CSS attributes without unit

I don't see a doctype declaration in your HTML, so I can only assume your test page is being rendered in quirks mode.

1. Why would it fallback to px? Is pixel always a preferred unit? Is there any rule defined in W3C working draft or recommendation?

   It will only fall back to px in quirks mode (and I believe only for certain properties). And yes, px is the preferred fallback unit. This harks back to the legacy HTML width and height attributes which accepted pixel lengths as unitless numbers.

2. Is there a rule which makes it mandatory for a UA to fallback to a preferred unit?

   No, hence the inconsistent behavior you observe. In standards mode, though, a UA needs to ignore length values without units; the unit is not optional, as mentioned in Microsoft Connect which you quote.

   In CSS2.1, all non-zero length values must have units.

3. Given the above example, which of the following is a correct behavior:

   • Internet Explorer: In Quirks mode (IE6,5,4..) width and border-width used to fallback to px. Since IE7 (till present, IE10RP) it ignores the whole rule if unit is missing. Therefore both rules were ignored.
   • Firefox 13: In the above example width fallback to px, but border-width was ignored.
   • Chrome 19, Opera 12, Safari 5.1.2: Both width and border-width fallback to px.

   Again, based on the assumption that your page is in quirks mode, I can only say that while the specifications make a mention of quirky behavior, the specific details of such quirky behavior aren't defined in the specifications (for both obvious and not-so-obvious reasons).

   I'm guessing Microsoft changed the quirks-mode behavior in IE7+ to reflect standards behavior for unitless values, as quirks mode exists in all browsers (except IE < 6) and is triggered with the same improper doctype or lack of a doctype. The behavior in standards mode has not changed, though, as far as I'm aware.

Is size of a pixel relative to the screen size?

No. It is not. If you want to scale your web app, you should use relative units like %, vw, or vh.

You can read more about it here.

And you can study how to view your web app on different sized viewports here.

Get line-height of element without 'px'

Parse it as an integer with parseInt

parseInt($('#example').css('line-height'), 10);

Outputs:

18

As an integer. The other solutions maintain the String type.

EDIT

For values that may contain decimal points, you can use parseFloat()

parseFloat($('#example').css('line-height'));

Outputs:

18.4

With CSS properties, which is more work for the browser?

In my opinion you should specify a unit like 0px all the time even when you're using 0, to avoid forgetting to add the unit on when you change the value to something non-zero, but that's a matter of personal preference.

As for the browser, those are all equivalent. It takes negligible time for the browser to understand any of those relative to the download time of the css. For that reason margin: 0px; is the best because it is only 12 bytes compared to the longest version you posted which (with `px) units added on) is 69 bytes so nearly 6x the amount of data to download.

60 bytes isn't much anyways, but if you repeat that a lot, then when it's down to the wire, the shorter syntax is faster. It's also nicer to read :)

---

Related Topics