ASP.NET MVC Verify if Minification of CSS is Working Properly or Not?

In this article, we are discussing how to verify minification of CSS is working or not in Asp.Net MVC.

What is minification in Asp.Net?

Minification is the technique you can use in ASP.NET to improve request load time. Minification improves loading time by reducing the number of requests to the server. Hence it reduces the size of requested CSS and JavaScript.

Minification performs a lot of different coding optimizations to CSS, such as removing unnecessary white space, and comments and shortening variable names to one character.

Now, Our main issue is How to verify if the minification of CSS bundling is working properly or not.

To do this, you need to view the page source and find out the Link tag for the CSS bundle.

Example:

1. First of all, you have to open that CSS bundle URL.
2. Now, just look in your browser’s address bar.
   
3. When you open source code please notice that you can see that all CSS files are bundled in one single URL but on header part of a page you will see some errors which restrict minification. Find below list of errors which generally occurs on CSS minification in asp.net MVC./* Minification failed. Returning unminified contents.

   /* Minification failed. Returning unminified contents.
   (17483,98): run-time error CSS1034: Expected closing parenthesis, found ‘,’
   (17483,98): run-time error CSS1042: Expected function, found ‘,’
   (17483,137): run-time error CSS1062: Expected semicolon or closing curly-brace, found ‘)’
   (17484,63): run-time error CSS1034: Expected closing parenthesis, found ‘,’
   (17484,63): run-time error CSS1042: Expected function, found ‘,’
   (17484,92): run-time error CSS1062: Expected semicolon or closing curly-brace, found ‘)’
   (18824,98): run-time error CSS1034: Expected closing parenthesis, found ‘,’
   (18824,98): run-time error CSS1042: Expected function, found ‘,’
   (18824,137): run-time error CSS1062: Expected semicolon or closing curly-brace, found ‘)’
   (18825,63): run-time error CSS1034: Expected closing parenthesis, found ‘,’
   (18825,63): run-time error CSS1042: Expected function, found ‘,’
   (18825,92): run-time error CSS1062: Expected semicolon or closing curly-brace, found ‘)’
   */

4. Let’s try to understand how to read minification errors. For example check following line.(17483,98): run-time error CSS1034: Expected closing parenthesis, found ‘,’
5. Within round bracket, you can see a number 17483 which indicates line number on which there is a runtime error.The second number in bracket is 98 which indicates the exact position of character which produces an error on line number 17483.Now to find out this error location you need to open this file in notepad ++ which is my favorite text editor. And paste all content of your CSS bundle.
6. Note: Make sure that you need to remove Minification Error lines from notepad++ then go to 17483 line number as shown below.
   
7. Now you can move a cursor on line 17483 and go to 98th character. That’s where the error is!! Check screenshot which shows character position in notepad++.
   

I hope that this tiny blog will be helpful for all ASP.NET MVC Developers.