DotNetSurfers Blog

Most of you might have seen that while working on a Website project, the CSS gets harder to maintain as the site ages. This might be due to new developers coming in to the project, removal of UI elements (but not the corresponding CSS), refactoring and so on. I think it is a good idea to revisit and clean your css every few weeks before it becomes totally unmanageable. In this post, i am going to outline 2 ways to do so
There is a great Firefox plugin called Dust-Me Selectors which can test individual web pages or spider your Website to find unused CSS selectors. As you navigate from page to page in your Website, it maintains a list of unused CSS selectors that you can remove.
If for some reason you cannot use the plugin, or would like to be more sure, I have also created a small utility (for personal use) that can parse a CSS file to create a list of defined classes and go through the code base to determine which of those classes are actually being used. This utility usually gives me a list of unused CSS classes with an accuracy of greater than 95%. It cannot give a 100% accurate output in cases where the css classes are being assigned dynamically in JavaScript or server side code (it catches some of them, but not all). But it gives you a great starting point. I normally search my codebase for the CSS class name before commenting it out from the CSS file to be sure its not being used in the code anywhere. I delete the commented out CSS classes after a couple of releases if I do not see any issues.
You can download the utility (named CssCleaner) from here. Please remember that this does not come with any kind of warranty, I am just sharing this so that it can be helpful to somebody in a situation similar to mine.
CssCleaner is pretty simple to use. Download the app, unzip it to a folder on your system. You should see 2 files - CssCleaner.exe and CssCleaner.exe.config. The config file is needed by the application and is present to make a couple of things configurable. I'll talk more about it in a second.

After you run the application, click on "Choose Application Folder" and choose the code base folder for your Website. Click on "Choose CSS File" and select the CSS file that you want to analyze. Change the File Filter if you would like to process files different from the default types. Leaving that textbox blank processes all files. Click on "Process" to run the utility. The unused classes get loaded on the right hand side. In my use, the tool has been pretty fast.
If anybody is interested in the implementation, i use a parser/scanner to parse the CSS file similar to this. Then I go through all the files in the code base, building a list of  used CSS classes using a regular expression. The regular expression is picked up from the config file, so you can tweak it as you find suitable. The other thing picked up from the config file is the list of default file types to search for. It then compares the used CSS class list against the available CSS classes and displays the unused classes list.
If you have any suggestions for the tool, or find any bugs, please leave a comment or email me (latish.sehgal at gmail dot com) and I'll try my best to implement it. I hope that you find this tool helpful.

As web application developers, we depend on the Session to store data pertaining to the user. It's a common scenario that the user might take a half an hour break to take a phone call or a meal while using the application and come back to find out the site behaving in an unexpected manner because his session would have expired (default value for session timeout is 20 minutes). As a developer, it's a good practice to check a session variable for null value before using it, but you can create a much more user friendly environment by redirecting the user to a web page indicating that his session has timed out. The best way to do this is by creating a user control that you can just drop on your master or content page as desired.
I looked around for such solutions, and I have described below 2 such good implementations that should cover most scenarios.
Implementation 1
You can create a web control similar to what Peter Bromberg has outlined here.
This control checks for the HttpSessionState's IsNewSession property and the presence of the ASP.NET_SessionId cookie to determine if the user session has expired. It redirects the user to a timeout page if the session has expired. All you need to do is drop the control on your page and assign the RedirectURL property to your timeout page. The control works for both synchronous and aynchronous postbacks (for those of you using Asp.Net Ajax), and the only downfall for this method is that there's no way to warn the user that his page is about to timeout.
Implementation 2
If you would like to warn the user before his session actually times out, you can create an Asp.net AJAX friendly control similar to what Travis Collin's solution.
This control pops up a warning to the user some time before his session times out and gives him a chance to save his session. You can configure the UI of the warning and the time for warning and timeout while using the control. The only thing to watch out for here is that the developer has to make sure the session (and form) timeout value are in sync with the one configured on the control. I faced a small issue in this implementation because it was not recognizing asynchronous postbacks as user activity. To fix this, all i had to do was add a client side handler for page load and reset the timeout there as well.
    initialize : function() 
    {  
        ....
        Sys.Application.add_load(Function.createDelegate(this, this._handlePageLoaded));
        .....
    },
        _handlePageLoaded: function(sender, e)
    {
        this._resetTimeout();
    },

We noticed gaps in the borders for some of our controls while using the RoundedCorners Extender. This was a big headache since it seemed to work fine on some pages. I have included a sample image below.

We finally figured out that on the pages where it was not working, we were injecting some diagnostic information into our html as comments. Since this was being inserted before the doctype, it was sending IE into quirks mode and that was causing the trouble. Updating the code to insert comments after Doctype declaration fixed the issue.

Hope this helps somebody out there:).

-Latish Sehgal

You can follow me here.

Check out the Silverlight implementation of John Conway's game of Life.

Keep an eye on your browser CPU Usage :).

Get it here.

This kit includes presentations, labs and demos.

Now only if I could find time to go through this :(.