Trimming of white-spaces in CSS code

Omnis Lux · October 21, 2016

Hi all.
I posted this topic under bug-report but did not get any response, so I'll try here.

SmugMug apparently removes all white-spaces from the code in CSS content-blocks, and this has led to an unexpected problem to me.
I'm trying to use the calc()-function, e.g:

font-size: calc(2vw + 12px);

But when published, this code ends up as:

font-size:calc(2vw+12px);

and the browsers ignores the code. According to the CSS3 specification for the calc()-function, the "white space is required on both sides of the + and - operators. (The * and / operaters can be used without white space around them.)" - likely to differentiate between operators and signed numbers.

I realize that the removal of white-spaces in the CSS-code is not a bug, but intentional (to save space), but I'm not as sure that SmugMug is aware of the potential problems this can lead to with not complying to the CSS specifications under certain circumstances.

Any thoughts or ideas on this, as I really want to use the calc()-function with both '+' and '-' operators?

Hikin' Mike · October 21, 2016

I've never used that, so I tried to add it to a HTML/CSS block. It does strip the white spaces. I added the same code to my theme's site-wide CSS and it DOESN'T strip it.

A HTML/CSS Block:

.text{font-size:calc(2vw+12px)}

Theme's CSS:

.text {font-size: calc(2vw + 12px);}

Omnis Lux · October 21, 2016

Ok - Thanks Mike, did not think of that

I reckoned the white-space stripping was occuring on all CSS code, regardless.

I guess I'll have to move some of the code to the theme's site-wide CSS then. Two big thumbs up for you!

thumb

Trimming of white-spaces in CSS code

Comments