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.
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.
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.
Chrome dev tools actually keeps versioning your changes and allows you to same them too! You probably already know that though…
*save
Relevant: http://remysharp.com/2012/12/21/my-workflow-never-having-to-leave-devtools/
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/
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.
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.
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.
+1 for codekit. The whole preprocessor process a million times easier.
Big tool! I use it all the time. Give a look at this pull request.
+1 for compass.app. If you’re into SASS, it’s a very good way to process your files and have LiveReload implementation. http://compass.handlino.com/
Another +1 for compass app and also FireSass for debugging scss
Another one, useful extension – Stylish.
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.
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.
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.
Hammer for Mac does a fantastic job at this.
http://hammerformac.com
http://help.hammerformac.com/features/autoreload.html
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
SoFresh
You can contribute on github.
:)
Mixture definitely handles this the best – it works in all browsers (even IE6) without any plugins, and you can hook up every testing platform so that their state follows a “leader” platform exactly. Unfortunately, it’s currently unuseable unless you switch to using a specific templating system (Liquid), which is a gigantic time investment.
@tome,
Glad you like the refresh, we are working on some cool updates for this.
We chose Liquid as it’s just HTML with some (very powerful) additional tags and it’s super easy to learn the basics and progress from there. I’m going to be doing some quick fire video tutorials very soon.
But, would be cool to know what else you would like to use for templates?
You can use basic HTML also, you would just call it with the extension in the url.
There’s Live.js for that as well. A JS plugin that checks for HTML, JS and CSS changes by doing continuous AJAX requests to the files and if changed, it loads the new CSS. See: LiveJS
Very useful tool, used it in quite a few occasions.
This. Is. Awesome.
I second that. The most simple setup, great results. Using it for years now.
Anyone know if there’s one with LESS and Linux support?
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 initand thenguard.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.
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.
The beta for the Brackets editor has a nice style injection functionality although it isn’t quite ready for heavy workflows.
Espresso DOES have a split pane. You just have to drag it out and it turns into a separate window so you can use it on a 2nd monitor. The thing I like about Espresso the most and the reason why I still use it when I can: CSS changes are super fast. Pretty much instant. I tried out LiveReload and others, but they still have a small delay.
The 2 problems that Espresso has: No Preprocessor support and the live Preview is based on Safari, thus doesn’t support the new Flexbox or other new stuff. So I started to switch around a bit. Chrome DevTools also start to look more interesting.
I still use Espresso also, and this is the biggest reason I haven’t switched to a different editor like ST2 . To be able to edit & inject styles locally or remotely is huge. Livereload was a deal breaker for me b/c you have to save to inject. Supposedly the developer said he’s making an extension to make this work with ST2, but that was almost a year ago he mentioned that.
I’m still looking/wishing there is tool that essentially works the same as Espresso but for ST2. The key is to be able to work local & remotely for me.
I tried Divvy, but went with Moom – http://manytricks.com/moom/
Brackets.io is useful too!
CodePen isn’t YET really for your actual web development workflow. It would be really nice!
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.
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 ;)
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.
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
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.
Adobe Has a great tool called Brackets . It has this feature too
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.
Great article. I do this style (Chrome+Sublime Text 2+Live reload) too. But I use Moom instead of your divvy.
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/
test
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.
Yes, I’m a fan of SoFresh that does the same: http://sofresh.redpik.net/
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
Great Post Thank You !
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 !
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 :)
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.
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)
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).
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
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.
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.
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.
Might be a bit late on this, but check out grunt-style-injector. Pretty awesome. It uses
Socket.ioand 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).Just threw up a quick post on my blog here.