Posted 15 days ago. Visible to the public. Linked content.

Do not use unitless zeros in CSS calc functions

While in CSS zero is usually referenced without specifying a unit (e.g. padding: 0), you must not use a unitless zero in calc functions.

You would probably not write something like calc(1rem + 0) yourself, but it might be the result of a CSS preprocessor (like Sass) or when using custom properties.

The following is invalid:

Copy
.example { --extra-padding: 0; padding: calc(1rem + var(--extra-padding)); }

That is simply because it is unsupported Archive , as per documentation:

Because <number-token>s are always interpreted as <number>s or <integer>s, "unitless 0" <length>s aren’t supported in calc(). That is, width: calc(0 + 5px); is invalid, even though both width: 0; and width: 5px; are valid.

An expression with an invalid calc value is ignored, so you might end up with missing or "random" behavior, depending on where you do this.

The above example is valid once you use zero with any allowed unit, e.g.

Copy
.example { --extra-padding: 0px; padding: calc(1rem + var(--extra-padding)); }

Does your version of Ruby on Rails still receive security updates?
Rails LTS provides security patches for unsupported versions of Ruby on Rails (2.3, 3.2, 4.2 and 5.2).

Owner of this card:

Avatar
Arne Hartherz
Last edit:
14 days ago
by Arne Hartherz
About this deck:
We are makandra and do test-driven, agile Ruby on Rails software development.
License for source code
Posted by Arne Hartherz to makandra dev
This website uses short-lived cookies to improve usability.
Accept or learn more