Is there a plan to implement CSS calc()?

Right now using calc() results in exceptions thrown in the layout engine. It’d be really handy if you plan to add it at some point.

2 Likes

Unfortunately that’s not something planned for the moment, but some of it can be achieved by code if necessary. If there’s a specific case you have in mind and you can share with us to make a case to implement calc() please share, we’re always open to ideas :sunglasses:

This is useful if you are sizing your elements purely by percentage but need to make some adjustment in pixels. People might strictly use percentages to make elements responsive to the size of a container or screen resolution. If you’ve got an element that is 80% width but you need to adjust it by a fixed length i.e. 40 pixels, calc can do it: calc(80% - 40px)

Could do it in c#, but then you’ve got an element being styled through both c# and css and it’s a bit messy.

It will (in my opinion) find plenty of use if implemented.

1 Like

My desire as well is to keep all dimensions in my CSS file so I don’t have anything pixel sizes hard coded in C#. Is there a way I can read values from the style sheet? I keep thinks like standard margins and list item heights in a set a variables in the style sheet; right now I have to duplicate all those values in C# to support layout with computed values.

1 Like

Calc is also used in design systems on --primary colour values to create lighter and darker shades automatically.

example here https://www.smashingmagazine.com/2020/08/application-color-schemes-css-custom-properties/

1 Like