5

In combres file, I use defaultCssMinifierRef="msajax".

This minifier remove the units (px, em, ms) for all zero values. But 0ms is not the same as 0s. So, what I should do, if I need to save units after minification?

Marina Kolesnikova
  • 55
  • 5
  • 2
    What is the difference between `0` and `0ms`? – alex Feb 29 '16 at 12:48
  • 2
    There is no diffrence difference between 0em, 0px and 0. The correct syntax is 0 without unit. What makes you think they're different? – İbrahim Duran Feb 29 '16 at 12:49
  • 2
    Even though, units are not the same, a zero value still means.. zero, and in these cases, units are not relevant (whatever the unit is meant to mesure time or space). Does your design break after minification? Do you have a problem with that? Some more detailed description of your problem would help. – zeropaper Feb 29 '16 at 12:49
  • there's no difference except for frequency values: https://developer.mozilla.org/en-US/docs/Web/CSS/frequency – Fabrizio Calderan Feb 29 '16 at 12:52
  • Why is it a problem if the units are removed? Are you using JS which picks up the units from the CSS? – Andrea Feb 29 '16 at 13:07
  • @İbrahimDuran *The correct syntax is 0 without unit.* That statement is incorrect. The units are unnecessary, but optional. –  Feb 29 '16 at 13:27
  • If the minifier removes the `ms`, it's buggy, and you should find another one. –  Feb 29 '16 at 13:31
  • @fcalderan Incorrect. It's true that frequencies do require units, but don't misinterpret that as meaning that **only** frequencies require units. For instance, time requires units. –  Feb 29 '16 at 13:32
  • the transition property requires time value because it can be either ms or s, so it must be specified, even for 0. – Marina Kolesnikova Feb 29 '16 at 14:30
  • 1
    @Andrea CSS `calc()` also requires a unit on 0, else it fails. Seems like every minifier except Cloudflare has this issue ;) – dhaupin May 17 '17 at 18:46

2 Answers2

5

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.

Community
  • 1
  • 1
  • So, the best way to resolve the problem is change minifier? – Marina Kolesnikova Feb 29 '16 at 14:19
  • 1
    Yes. However, I haven't tested YUI compressor directly, but I did try some online version of it, and it **did not** remove the `ms`. Are you 100% sure it is removing `ms`, and not just length unit identifiers? –  Feb 29 '16 at 14:22
  • I'm sorry, I was wrong. I use msajax minificator. When I changed it to yui - issue was resolved. – Marina Kolesnikova Feb 29 '16 at 14:37
  • But I should use msajax minifier, can you advise me how I can do this? – Marina Kolesnikova Feb 29 '16 at 14:41
  • You are saying you are forced by company policy or something to use msajax minifier? Well, first, file a bug report. Then, try using `0.0000001ms`. –  Feb 29 '16 at 15:20
  • but I just downloaded it and it does **not** remove the time unit identifier. So could you please check again exactly what it is removing that you think it should not be? –  Feb 29 '16 at 15:25
  • The spec fails to mention that calc(0 + 24px) will fail in IE11. Some minifiers correct this issue by removing calc() from the final CSS (e.g. cssnano), but others do not (e.g. clean-css). See https://cssnano.co/optimisations/calc/ – Stevethemacguy Sep 12 '18 at 19:21
0

You don't ever need to save 0 values with a unit.

In CSS using a 0 without a unit means the same as as 0 with unit. You could use top: 20px and it would place the element 20px from the top depending on its position.

If you use top: 0 this gets translated to top: 0px by the browser so you simply don't have to worry about that.

Your compiler will only strip the units off of the values like 0px, 0em because they are redundant and can simply be used as 0 instead.

If it were to strip off the value off a top: 20px for instance, this would cause problems since the rendering engine wouldn't know if it were top: 20rem or top: 20px which are remarkably different when compared.

Stripping units from 0 values with units is actually a bit of an advantage as less bytes have to be sent over the network, this is only very minor but since it's an automatic process it doesn't really cost you anything as a developer (as in keeping into account that you'll manually have to strip 0 values with units from their unit).

There are however exceptions to this as @torazaburo pointed out in the comments. Times in CSS e.g. 100ms, 0.1s require a unit but as @torazaburo pointed out this is also automatically handled by the minifier by shortening something like 100ms to 0.1s to save bytes.

Community
  • 1
  • 1
SidOfc
  • 4,552
  • 3
  • 27
  • 50
  • According to [link](https://developer.mozilla.org/en-US/docs/Web/CSS/frequency):Zero values can be written without a unit only if there are values, not . ms is frequency, so I need unit for 0 in this case? – Marina Kolesnikova Feb 29 '16 at 13:10
  • This in incorrect. `transition-duration: 0;` is invalid, it is a time and needs a unit. –  Feb 29 '16 at 13:34
  • Also, your point about bytes on the network is irrelevant, since the minifier will strip/compress as necessary. For instance, a minifier will transform `0ms` into `0s` to save one byte while retaining the unit which is required for time. –  Feb 29 '16 at 13:35
  • @MarinaKolesnikova By the way, `ms` is **not** frequency, which something special (cycles/second), it is **time**. But time still needs a unit, such as `s` or `ms`. –  Feb 29 '16 at 13:36
  • @torazaburo thanks for pointing out the network issue, I've removed the incorrect comment and will edit the question with updated info. – SidOfc Feb 29 '16 at 13:48
  • @torazaburo thanks for clarification, this is realy what I need. – Marina Kolesnikova Feb 29 '16 at 14:17
  • 4
    There is also a flexbox-bug in IE 10 / 11 where you need to specify a unit for the flex-basis value. E.g. `flex: 1 0 0px;`. See: https://github.com/philipwalton/flexbugs#flexbug-4 – nils Feb 21 '18 at 12:10
  • Units are also required by calc(). In IE 11, calc(0 + 24px) will fail. Some minifiers correct this issue by removing calc() from the final CSS (e.g. cssnano), but others do not (e.g. clean-css). See https://cssnano.co/optimisations/calc/ – Stevethemacguy Sep 12 '18 at 19:26