Quick Update: CSS/JS Auto-Minification in ASP.NET

I’ve been trying for weeks to write up a good technical article about a recent CSS/JavaScript minification handler for ASP.NET (ASHX/HttpHandler) that I whipped up, but our current release has been so busy, I haven’t had enough time to really put it all together.

Just wanted to post a quick update for everyone who mentioned they’d like to hear about it that I’ll be posting more info as soon as I can. =)

In the meantime, here are links to some of the articles that helped me construct the custom handler in the first place:

And, my own pride and joy (this damn code took me forever, only because I had to do all sorts of research and testing with Regex in C#), the function that will fix relative paths in the combined CSS files by replacing them with absolute paths based on your application root:

/// <summary>
/// CSS Only: Replaces relative paths in url(...) properties within the specified script.
/// </summary>
/// <param name="scriptBody">The pre-combined script, passed from CombineScripts().</param>
/// <param name="scriptPath">The relative path where scripts are located (ex: ~/CSS/).</param>
/// <param name="applicationPath">The absolute application path. (ex: /ApplicationRoot).</param>
/// <returns></returns>
private static String FixRelativePaths(String scriptBody, String scriptPath, String applicationPath)
{
 scriptPath = VirtualPathUtility.AppendTrailingSlash(scriptPath);
 String relativeRoot = VirtualPathUtility.Combine(applicationPath, scriptPath);

 Regex cssUrlReference = new Regex("(?<=url\\()(.+?)(?=\\))", RegexOptions.Singleline);
 Regex invalidPathChars = new Regex("[ '\"]+", RegexOptions.Singleline);

 MatchCollection urlMatches = cssUrlReference.Matches(scriptBody);
 foreach (Match m in urlMatches)
 {
 String oldPath = Regex.Replace(m.Value, "[ '\"]+", "");
 String newPath = VirtualPathUtility.Combine(relativeRoot, oldPath);
 newPath = VirtualPathUtility.ToAbsolute(newPath);
 scriptBody = scriptBody.Replace(m.Value, newPath);
 }

 return scriptBody;
}

I’d love to read your comments and/or questions about this code, so please feel free to post your thoughts in the comments on this post.

I’ll try to get you the full meal deal on this code as soon as I can. =)

Dev Tip: Preserve whitespace in HTML without using (nbsp)

If you want to preserve whitespace within an HTML element (div/span) without using non-breaking spaces (and therefore breaking word-wrap), add the following property to the CSS style(s) for that element:

white-space:pre-wrap;

There are more options available for this property as well:

http://www.w3.org/TR/CSS2/text.html#white-space-prop

jQuery fadeIn/fadeOut IE cleartype glitch

Thanks to Benjamin Michael Novakovic for this fix!

While using the jQuery  javascript library today at work, I noticed a glitch under IE7. When fading a html node with the .fadeIn() and .fadeOut() functions in jQuery, IE drops the windows Cleartype rendering; which results in very ugly text. This problem appears to be very common, but no one has a nice solution for the problem.

The most common way to solve this problem is by removing the filter CSS attribute. In normal javascript, it would look like this:

document.getElementById('node').style.removeAttribute('filter');

and in jQuery, it would look like this:

$('#node').fadeOut('slow', function() {
   this.style.removeAttribute('filter');
});

via Benjamin Michael Novakovic » jQuery fadeIn/fadeOut IE cleartype glitch.

NETTUTS: 10 Challenging But Awesome CSS Techniques

Very, very cool article for web designers:

header_logo

Most designers and web developers only scratch the surface of the potent language that is CSS. In terms of programming languages, CSS has a fairly simple learning curve. That doesn’t mean that CSS isn’t a powerful language. Sometimes it’s the small things that make a huge difference in a website design.

In this post we’re going to outline 10 awesome CSS techniques for web developers who know their stuff.

There are plenty of CSS techniques and hacks out there for beginning designers. Everyone knows about the routine tricks like:

These simple tricks are all fine and very important, but today we’re going to look at some CSS techniques that are a bit more challenging. They’re not the run-of-the-mill techniques you’d teach a CSS beginner. These 10 tricks are slightly more difficult, but if done well they can add an extra special something to your website layout.

(http://nettuts.com/html-css-techniques/10-challenging-but-awesome-css-techniques/)