A nuanced thing I keep forgetting: When using CSS custom properties and calc() with multiplication, one of the operands _needs_ to have a unit (easy to forget in your fallback values)pic.twitter.com/WwYtFl83Fi
This is the legacy version of twitter.com. We will be shutting it down on June 1, 2020. Please switch to a supported browser, or disable the extension which masks your browser. You can see a list of supported browsers in our Help Center.
I work on @ChromeDevTools & @v8js at Google and on ECMAScript through TC39.
JavaScript, HTML, CSS, HTTP, performance, security, Bash, Unicode, i18n, macOS.
You can add location information to your Tweets, such as your city or precise location, from the web and via third-party applications. You always have the option to delete your Tweet location history. Learn more
Add this Tweet to your website by copying the code below. Learn more
Add this video to your website by copying the code below. Learn more
By embedding Twitter content in your website or app, you are agreeing to the Twitter Developer Agreement and Developer Policy.
| Country | Code | For customers of |
|---|---|---|
| United States | 40404 | (any) |
| Canada | 21212 | (any) |
| United Kingdom | 86444 | Vodafone, Orange, 3, O2 |
| Brazil | 40404 | Nextel, TIM |
| Haiti | 40404 | Digicel, Voila |
| Ireland | 51210 | Vodafone, O2 |
| India | 53000 | Bharti Airtel, Videocon, Reliance |
| Indonesia | 89887 | AXIS, 3, Telkomsel, Indosat, XL Axiata |
| Italy | 4880804 | Wind |
| 3424486444 | Vodafone | |
| » See SMS short codes for other countries | ||
This timeline is where you’ll spend most of your time, getting instant updates about what matters to you.
Hover over the profile pic and click the Following button to unfollow any account.
When you see a Tweet you love, tap the heart — it lets the person who wrote it know you shared the love.
The fastest way to share someone else’s Tweet with your followers is with a Retweet. Tap the icon to send it instantly.
Add your thoughts about any Tweet with a Reply. Find a topic you’re passionate about, and jump right in.
Get instant insight into what people are talking about now.
Follow more accounts to get instant updates about topics you care about.
See the latest conversations about any topic instantly.
Catch up instantly on the best stories happening as they unfold.
A nuanced thing I keep forgetting: When using CSS custom properties and calc() with multiplication, one of the operands _needs_ to have a unit (easy to forget in your fallback values)pic.twitter.com/WwYtFl83Fi
To clarify, the first `invalid` in your screenshot should have been `valid`, right?
How is calc() relevant to what you're showing? This seems similarly invalid: * { padding-left: var(--some-variable, 0); } What am I missing?
Good question. I think my test cases weren’t quite comprehensive enough. I started something a little better here but it will need a bit more work https://codepen.io/zachleat/pen/BaaXKPg … Most interesting are these bits:pic.twitter.com/lFN2ufW4x1
E.g.
padding-left: 20px;
padding-left: var(--some-undefined-variable, 40);
That last declaration does not set padding-left to 40px, but it also doesn't have NO effect: it seems to undo the earlier value (20px) and reset the padding-left to 0. @tabatkins, plz halp!
We can't tell at parse time whether a declaration containing a var() is valid, and it's too expensive to keep around *all* declarations to rewind with, so if substitution would give an invalid value, it instead sets it to initial or inherit.
Oh wow—hmm. Kinda difficult to show the difference between 0 and 0px when the initial style is also 0. 
And to answer Mathias' question: calc is relevant because the special rule that unitless 0 can be treated as a length isn't valid inside calc. It doesn't have anything to do with var(), as Zach's other examples show: calc(0) is always a unitless number and never a length.
Thank you!
Twitter may be over capacity or experiencing a momentary hiccup. Try again or visit Twitter Status for more information.