Skip to content

adamlogic/auto_update_stylesheets

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

12 Commits
 
 
 
 
 
 
 
 
 
 

Repository files navigation

auto_update_stylesheets

What does it do?

It watches each of the external stylesheets included on a page. Whenever changes are detected, they are reflected in real-time on the page.

How do I use it?

Just include auto_update_stylesheets.js in your page, and call $.autoUpdateStylesheets() on dom-ready.

OR

Drag this link; to your bookmark toolbar. Click the bookmarklet once to activate it, again to toggle it off.

What are the restrictions/dependencies?

  • jQuery is required (NOT FOR THE BOOKMARKLET)
  • all stylesheets must be in the same domain as the page they are included on
  • you must have access to edit the source stylesheet

What’s the point of this?

My CSS workflow typically involves writing my stylesheets directly in Firefox using the Web Developer Toolbar. I like to see my changes in real-time without having to refresh the page. This has some major shortcomings since Web Deveoper Toolbar is not intended to be text editor. I’d much prefer to use my editor of choice and see the CSS rendering in real-time.

The second big win comes later when I need to fix my CSS in IE. With this script I can open IE, Firefox, and Safari and see how my changes affect each browser in real-time.

About

A bookmarklet that watches for stylesheet changes and reflects them in real-time

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published