Grow your CSS skills. Land your dream job.

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.

Comments

  1. I’ve been using Firebug for exactly this purpose for years. Of course, it doesn’t have the advantage of saving to my source files.

    • Sean
      Permalink to comment#

      I too like to use Firebug for this sort of thing and have been for a few years too. However, where I work we use Macs (much to my chagrin) and one of the tools my teammates like to use (but not me) is a program called Charles. It does the live update in the browser as you make changes. The reason I myself don’t really like it is because while you have it open and running, it doesn’t allow email to be delivered to you. At least here where I work it doesn’t. I haven’t talked to anybody else that’s used this program that works anyplace different so I can’t really say if this is a problem with Charles itself or just with how the network is set up where I work.

    • Andrew Sellenrick
      Permalink to comment#

      Chrome dev tools actually keeps versioning your changes and allows you to same them too! You probably already know that though…

    • Andrew Sellenrick
      Permalink to comment#

      *save

  2. Permalink to comment#

    You’re missing out on the easiest/cheapest way to change live CSS styles. If you install and use Chris Pedrick’s awesome Web Developer toolbar in Firefox to open a pane with editable CSS you can modify, freeze for page refreshes, and save to disk. I use it for every site I work on. http://chrispederick.com/work/web-developer/

    • David
      Permalink to comment#

      I’ve used this as well, but I’m not sure how well it would work with preprocessors now, as the page is just served CSS and not SCSS/LESS or whatever you’re using.

      Thanks for the article Chris, I’ve been playing with brackets.io for fun, however until they come out with a preprocessing version I’ll probably keep looking.

    • David Allen
      Permalink to comment#

      Another vote for The Web Developer toolbar in Firefox – it’s brilliant. You can even do things like alter the CSS for :hover whilst the mouse is hovering. I’ve learnt so much by being able to have a look at (and play with) the CSS on any site I come across.

  3. Steve
    Permalink to comment#

    Don’t forget the excellent Mac App Codekit, which offers preprocessor compilation and CSS injection. Also Compass.app from Handlino, for a multi-platform solution.

  4. Another one, useful extension – Stylish.

  5. Permalink to comment#

    Since a few years ago I use an extension to reload de css without having to reload the page https://addons.mozilla.org/en-US/firefox/addon/css-reloader/ you just to edit your file on your editor and press “f9″ to see the changes.

  6. I know it’s not incredibly helpful because it’s WebKit only, but you can edit SASS within Google Chrome for live reloading. Because Chrome lets you save and edit CSS files within the web inspector you just need to enable to SASS experiment to get the same functionality for SASS.

    Andy Osmani explains it in this YouTube video: http://youtu.be/PPXeWjWp-8Y?t=47s

    • I feel like an idiot, while you can edit the SASS files within Chrome it relies on Live Reload (or something of the like) for the changes to show up in the browser. Sorry about that.

  7. Wes Johnston
    Permalink to comment#

    This is already built in to the Firefox dev tools. Firefox Menu -> Dev Tools -> Style Editor. Create a new css file right there if you want (or use an already attached one). Edit and Save right from the box.

  8. Permalink to comment#

    I just wrote a bit of JS which I wanted to improve on but haven’t come back around to that reloads your CSS. I never could get it to play nice in chrome though for some reason. After a few minutes it would bug out. Never could make since of it but I assume it had something to do with memory handling at least partly.

    v1 simply added a new line with the href=”cssfile.css?randomNumberForCache so that it would just look at the new css file. I would then remove the (I originally tried just changing the href but that cause flashing in chrome). It would do this every couple of seconds which is what I am guessing cause Chrome to freak after a while.

    v2 I had planned to make it smarter so that the couple second ajax would just hit a php script that told you if the css had changed or not and if it had then perform the above action. This would cut down a lot on payload and hopefully keep Chrome from flipping out.

    If I get around to it, maybe I will pull out the code and work on it again

  9. Anyone know if there’s one with LESS and Linux support?

    • kuus
      Permalink to comment#

      hi Richard, there is no need for a specific LESS support (since you’ll compile LESS/SCSS in css).

      I use on Linux (ubuntustudio 12.10) guard with guard-livereload and the firefox and/or chrome extensions of LiveReload and it works wonderfully.

      You just go through the terminal to your web project folder and then give this command guard init and then guard.
      Once you have done that you enable the LiveReload extension on your browser by just clicking on the only button that these extensions provide.
      It will automatically reload every kind of file you have in the specified relative paths to your web project folder indicated in the automatically generated (by the command guard init) file called Guardfile (that you can even edit if you want other specific path you want to keep “guarding/watching”).

      Give it a try and tell me if you don’t get it working.

    • Permalink to comment#

      I don’t really like guard since its kinda buggy at times. Also for me you have to save the .less/.scss file twice for it to take effect. I would recommend Yeoman for live reload if you don’t nedd style injection. Also LiveJS is mentioned in the above comment so you can check that out.

  10. Permalink to comment#

    The beta for the Brackets editor has a nice style injection functionality although it isn’t quite ready for heavy workflows.

  11. James
    Permalink to comment#

    Brackets.io is useful too!

  12. Permalink to comment#

    CodePen isn’t YET really for your actual web development workflow. It would be really nice!

  13. Permalink to comment#

    Been using Firebug for so long now!
    How to make the damn thing save the changes to the source files too? Does anyone know that? If only that saving part could happen – it would be perfect for my workflow.

    • Eddie
      Permalink to comment#

      I actually installed a firebug plugin called Acebug which enhances the editor with color syntax and themes but also lets you save the CSS file ;)

  14. Cool article as usual.

    I personally love the way Sublime Text 2 and Livereload work together. A little review I wrote back this summer.

    For your info, I use Spectale to perfectly split my screen. Free mac app, works well, yet quite unknown.

  15. I use this chrome plugin to reload css https://chrome.google.com/webstore/detail/css-auto-reload/fiikhcfekfejbleebdkkjjgalkcgjoip good thing is it only reload the css not html and no change on the location page you were. I have tried live reload too but this is best for me

  16. JOSH MAROWITZ
    Permalink to comment#

    Using Pre-processors,(authoring in scss)the codekit/compass solution for working with live updating on SOURCE files has become a streamlined act. I’m confused why many of you are suggesting firebug as a solution. I use Sublime Text to edit my CSS not Firebug.

    Thanks for the nod to Divvy. That will be very very helpful.

  17. Permalink to comment#

    Adobe Has a great tool called Brackets . It has this feature too

  18. Permalink to comment#

    Ever since the web developer toolbar came out for Firefox I don’t think I’ve done any CSS editing that WASN’T “injected”. The whole idea of saving a file and reloading your browser every time you want to see a change sounds horribly painful to me. It’s one of the primary reasons I’ve stayed away from preprocessors. You might write a little less code, but the time savings of style injection are huge.

  19. Great article. I do this style (Chrome+Sublime Text 2+Live reload) too. But I use Moom instead of your divvy.

  20. Tekl
    Permalink to comment#

    PhpStorm and WebStorm also have Live CSS Injection via a Chrome Extension. Its not that snappy like Espresso, but it has a lot of other useful features. One benefit is, that if the preview (aka Chrome) crashes, it will not crash the editor.

    http://blog.jetbrains.com/webide/2012/08/liveedit-plugin-features-in-detail/

  21. test
    Permalink to comment#

    test

  22. Not to be a nag, but haven’t developers been doing this forever already in Firefox and Chrome? Editing on the fly in the development tools? I see the benefit to the article though of course as some people very well can be doing things the difficult way. Style injection is a massive time saver, and when you’re working in application environments to get to a nested/specific pages refreshing can quickly put a damper on your efficiency. The Divvy application to me is cool but if you’re a front end developer you should really be using at least two monitors for efficiency. (I actually recommend three if you or your company have the means).

    All in all the direction of this article is important and would love to see a more thorough follow-up article with additional/better solutions. I know for me Chrome Development Tools have proven invaluable.

  23. Yes, I’m a fan of SoFresh that does the same: http://sofresh.redpik.net/

  24. Pierre
    Permalink to comment#

    Great discussion. By some twist of fate I ran across tin.cr, a tool that does much of what was discussed on this post. Could be another alternative?

    The site says it does the following:
    – Live reload
    – Save changes from Chrome Developer Tools
    – Cross Platform (since it’s all in chrome)

    Haven’t had a chance to try it myself but I plan on doing so soon.

    Website:

    http://tin.cr/

    Cheers

  25. Permalink to comment#

    Great Post Thank You !

  26. Permalink to comment#

    I’m really fascinated by all the good stuff you share. I’m trying Espresso and and still now I’m really glad. Indeed it’s worth every penny and makes me win a lot of time. Thanks !

  27. This looks pretty cool, never used it before i always refreshed my browser, it will save me a lot of time if i can actually see the changes i make directly on the screen :)

  28. I’ve been using Sublime Text 2’s LiveReload plugin with Chrome’s companion extension. However, I recently decided to give Yeoman a shot for a new project. I just tweaked the quickstart generator a bit for my needs. So far, it’s working like a charm. For rapid prototyping at least, I can see it becoming a permanent fixture in my workflow, even more so as I’m starting to learn the JavaScript MV* framework design it was built for. Give it a try, I’d say.

  29. I love divvy!! When i switched over to OSX I was lost without Windows’ snap feature, Divvy filled that void and then some. It’s also occasional nagware (like ST2) so you don’t have to purchase, but it’s so great I did (it’s like $10).

    My setup is to use grunt as my build system, with the live reload task. I have two desktops set up, ST2 and the terminal on one, and chrome with inspector docked to right on the other (great for doing responsive design). Using grunt’s watch task, my LESS is processed on change and the output CSS changes are bubbled up to the browser automatically.

    Really sweet workflow after you get it setup (which actually isn’t a massive effort, just a bit daunting the first time round)

  30. Zymara
    Permalink to comment#

    Holy moly! I wish I tried this sooner! I had LiveReload on my radar as something to try but just hadn’t gotten around to it yet. Thanks for the info about it doing live injection as that tidbit pushed me over the edge to try it, and I can immediately see that I will never want to go back. I love that you can set it to watch a folder at the root of your site, and it will just work. It even reloads an ASP.Net MVC layout file with .cshtml extension with no problem (I didn’t expect that).

  31. Permalink to comment#

    A better (free) alternative to Divvy is the incredible spectacle app it works like windows 7s’ smart window management. Plus it’s OS and OS = <3’z

  32. I use adobe brackets and it has style injection built right in. It only works with google chrome right now but it is constantly improving. After using style injection you will never go back to any work flow that does not include it.

  33. I’ve been using the .js plugin called CSS Refresh. Just throw it in your .js folder, link it in your header and you’re gold. Your mobile devices will actually update right before your eyes without having to refresh as well. Probably something you only want to use in development stage.

  34. Permalink to comment#

    I realize it’s been quite a few months, but I’m curious if anyone has found a good way to do this yet. I haven’t given up CSSEdit because I feel like the live preview and code completion make writing CSS faster than writing SASS. But I’m feeling some pressure to start using SASS and am wondering if there is now a good way to use SASS and have a live preview.

    • Molly, I feel the same way you do. I have been using SASS for about 6 months now, but the workflow just does not feel as natural as when I use Espresso with the live editing. And since at my job we work directly on the server and not locally, there is really no way to emulate that live editing feel that I have found.

  35. Might be a bit late on this, but check out grunt-style-injector. Pretty awesome. It uses Socket.io and is platform/compiler agnostic; it just looks for the final (CSS) file and soft injects it. I’ve found it to be super awesome because it never fails a reload and never falsely reloads on partially compiled CSS (which I’ve found Livereload did a ton of times).

This comment thread is closed. If you have important information to share, you can always contact me.

*May or may not contain any actual "CSS" or "Tricks".