Style Injection is for Winners

Published by Chris Coyier

By "style injection", I mean being able to see styling changes immediately after authoring them without having to manually refresh your browser window. This isn't a brand new concept, I just mention it now because it's so awesome that if it's not a part of your workflow you should consider updating yours to include it.

The Past

For a long time, Dreamweaver had the ability to show you a live preview of what you were building. CSS Edit also had a thing like that. Now that is built into Espresso and at a quick glance I saw it still does previews but not split pane editable previews.

But they used some built-in WebKit thing to do it, running who knows exactly what version. I like doing my testing in browsers that people use. And besides, those aren't going to work great when you're preprocessing CSS.

No offense if you use and these editors or working this way, it's just not for me.

New Style

The first to come along that I knew of was LiveReload. Through browser extensions, as you save files, the changes are injected automatically.

The name "LiveReload" implies that it reloads the page for you, which is true when you change HTML or JavaScript. Even that is handy, as it saves switching applications and manually refreshing the page. But when you change CSS (whether it is preprocessed or not) the styles are "injected" meaning they take effect on the page without a refresh.

I'm a fan of CodeKit which has now also been doing this for a good while. CodeKit only works with Safari and Chrome this way, but does so automatically without browser extensions.

If you're willing to put a script tag on your page, LiveReload works in Chrome, Safari, Firefox, Mobile Safari, and Opera (with finagling). Without the script tag you can get it working in Safari, Chrome, and Firefox.

Mixture is going to have live updating as well, but I haven't looked into how they are doing it just yet. Yeoman has refreshing but not injecting. It's open source so maybe someone could add it =).

Why is Style Injection cool?

Because the page doesn't refresh, you can style the page without affecting its state. Say you have a dialog box that pops up with a click and you want to style that dialog box. While using an app that does style injection, you can leave that dialog box open in the browser and author CSS that changes it and watch those changes happen immediately without refreshing the browser and losing that state. Not all states have a URL change associated with them. A dialog box is a common example of that.

Here's an example of that:

This gets more useful the more complex the state is. Imagine you're trying to style a rollover of a custom dropdown that appears in a panel that is by default closed. That's a lot of steps to reproduce that state for each minor styling change.

Screen Setup

I love using Divvy to super quickly snap my code editor to the right and the browser to the left and get started working right away. I have Divvy set up to only have left and right boxes, no complex grid.

For the Record

CodePen does as-you-type live updating as well as has a Live View mode. Pretty darn cool and useful I think, but CodePen isn't yet really for your actual web development workflow.