Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

MVC Bundling breaking my calc CSS statements by removing spaces?

I have css statements like this:

margin-left: calc(50% - 480px); 

Which work fine unminified but as soon as I begin minifying, the statement gets changed to:

margin-left: calc(50%- 480px); 

Rendering all calc statements broken. Similar things happen with width, max-width, min-width, etc. Is there any way I can change the behavior of the bundle to leave those CSS properties alone?

Currently I'm just using bundles.Add(new Bundle()) to prevent minification entirely, but it would be nice if I could minify correctly.

like image 521
RobVious Avatar asked Jan 02 '14 17:01

RobVious


People also ask

Why we use bundling in MVC?

Bundling and minification techniques were introduced in MVC 4 to improve request load time. Bundling allows us to load the bunch of static files from the server in a single HTTP request. In the above figure, the browser sends two separate requests to load two different JavaScript file MyJavaScriptFile-1.

How does bundling increase performance in MVC?

Bundling and minification improves load time by reducing the number of requests to the server and reducing the size of requested assets (such as CSS and JavaScript.) Most of the current major browsers limit the number of simultaneous connections per each hostname to six.

What is minification and bundling?

Bundling and minification are two techniques you can use in ASP.NET to improve page load performance for your web application. Bundling combines multiple files into a single file. Minification performs a variety of different code optimizations to scripts and CSS, which results in smaller payloads.

How bundling and minification works in MVC?

Bundling and Minification are two performance improvement techniques that improves the request load time of the application. Most of the current major browsers limit the number of simultaneous connections per hostname to six. It means that at a time, all the additional requests will be queued by the browser.


2 Answers

This is an issue of the optimizer.

To avoid the miniffier to remove the whitespaces, group the affected element with parenthesis. That workarrounds the issue.

margin-left: calc((50%) - 480px); 
like image 171
wOOdy... Avatar answered Sep 22 '22 03:09

wOOdy...


In addition to the answer above: if you use:

margin-left: calc((50%) + 480px); 

You should rewrite it as:

margin-left: calc((50%) - -480px); 

Since it didn't seem to fix (50%)+ for me.

like image 28
kows Avatar answered Sep 23 '22 03:09

kows