Refresh CSS without refreshing your page

I've been using Visual Studio 2013 for several months now and one of the new features I was enjoying was Browser Link. Since I have been implementing the front end for a project, I have been using Web Essentials for VS 2013 with all the CSS built using LESS. While I have used more complex and advanced LESS compilers, it's got a nice integration into Visual Studio with pretty solid support, and the developer has been keeping it well updated. It's nice because I can play in my browser, move my changes into my "main.less" file right in VS, fire off a Shift+Alt+Y shortcut combo, and my LESS files are compiled into my "main.css" file. With Browser Link, the page detects the change and refreshes with the CSS updates. Voila!

Now, anyone who read that with a keen eye would have noticed the use of the word "was" in the opening sentence. A past progressive verb! This means I am not "enjoying" the feature anymore.
Why not? To be honest and simple: it got really annoying. I play in the browser console all the time and since Browser Link works on the principle of polling the "server" (localhost) it floods the browser console or Network tabs/views with all the requests. It really makes it a pain to keep track of your console logging or debugging.

What I really liked about Browser Link, though, was the easy refresh of my CSS without having to refresh my entire page. I am sure there are plenty of front-end, and even some back-end, developers who like to dabble in FireFox or Chrome with the Dev tools or FireBug and modify the UI. And they know too well that refreshing the page loses those changes. Oops.

Well, I am sure there are additional solutions out there, and probably some that are better, but I wanted to keep the functionality without enabling Browser Link anymore. And I didn't want a huge library or plug-in doing it for me so I came up with a quick and dirty simple solution.

And as an aside, for those of you who might have Browser Link enabled and want to disable it, check the screenshot. Next to your Debug drop-down on your toolbar you should find the Browser Link menu to uncheck the enabled option and disable it. Yay!

Now, for my solution. Instead of polling, I bound a keydown event to a handler that checks for a keycode of 89, which is the Y key. It also checks that the Shift and Alt keys are down at the same time. I have gotten used to Shift+Alt+Y being used to compile the LESS files in Web Essentials so I kept that shortcut combo since my muscle memory seems to like it. When that combination is pressed, I update my CSS path with an incremented "version" query parameter "?v=#" where # is the "version" I want to load in this instance. By adding a changing query parameter to a URL, the browser handles it as a unique URL and caches it separately allowing you to have a "clean version" loaded.

I also wanted to preserve the location of the CSS reference in the page because I don't want the hierarchy messed up, so a reference to the original element is saved and removed after the new one is added immediately after it. And to prevent this from all happening in production in case I missed removing it before launch (whoops) I have a simple check against the "location.hostname" to make sure it's my localhost.

	$(function () {
	var cssPath = '/Content/themes/default/css/main.css';
	$(document).keydown(function (e) {
	// i prefer to have it trigger only on localhost - if I forget to remove, no foul
	if (document.location.hostname == 'localhost') {
	// shift + alt + y is compile less in WebEssentials - it's natural now
	if (e.which == 89 && e.altKey && e.shiftKey) {
	e.preventDefault();
	// this needs to set or increment each keypress to prevent cache
	if (typeof (window.cssVar) != 'undefined') {
	window.cssVar++;
	}
	else { window.cssVar = 0; }
	// set our css with revision
	var cssRevPath = cssPath + '?v=' + window.cssVar;
	// keep reference to original one to maintain order
	var curCss = $('link[href*="' + cssPath + '"]');
	// add after and remove current - keeps propery css hierarchy
	curCss.after('<link rel="stylesheet" href="' + cssRevPath + '" />');
	curCss.remove();
	}
	}
	});
	});

view raw cssRefresh.js hosted with ❤ by GitHub

Again, it may not be the most elaborate and complex solution I could use, but if it does the trick with minimal effort, I call that a win. After all, isn't that our goal as developers?

Try it out if you want.