Closed rinart73 closed 1 year ago
this is perfectly valid, according to https://developer.mozilla.org/en-US/docs/Web/CSS/length#syntax
Specifying the length unit is optional if the number is 0
"After a zero length, the unit identifier is optional." https://www.w3.org/TR/CSS22/syndata.html#length-units
Please check in real browsers.
This is Chrome:
Firefox:
Here is Mozilla docs: https://developer.mozilla.org/en-US/docs/Web/CSS/transition-delay https://developer.mozilla.org/en-US/docs/Web/CSS/time
The <time> data type consists of a <number> followed by one of the units listed below.
Units
s - Represents a time in seconds. Examples: 0s, 1.5s, -60s.
ms - Represents a time in milliseconds. Examples: 0ms, 150.25ms, -60000ms.
Although the number 0 is always the same regardless of unit, the unit may not be omitted. In other words, 0 is invalid and does not represent 0s or 0ms.
https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Types
Quantities such as length
, angle
can have unit omitted after 0.
While time
, frequency
and resolution
should always have unit. CSS specs are weird.
this seems like a bug to me. works perfectly fine in firefox but not in chrome based browsers
It's not a Chrome bug. I tested it in Firefox too on windows. The Mozilla specification states that certain value types can't omit unit from 0. I provided links above
you are right :)
Input CSS:
Code:
Output CSS:
border
andpadding
are valid, whiletransition
is not. It doesn't work in browsers and doesn't pass W3 Validator. From what I can seetransition
properties liketransition-duration
andtransition-delay
always require unit to be present, even if the value is 0. Not sure if there are other properties like this.