A handy way to develop websites and debug them is to have live CSS editing. Add the code, get the result. It can also be a fast way to create prototypes, and even play around with code on someone else’s work to learn new techniques (or simply goof-around and play jokes on others).
With CSS Terminal, you can do this with a simple click of a bookmarklet!
CSS Terminal
Visit the URL you want to edit, click on the CSS Terminal bookmarklet, and you’re on your way.
Using CSS Terminal is really easy to use. CSS rules are automatically added when you enter a semicolon or hit the Enter key:
You can also hit Ctrl+Enter for a PC or Command+Enter on a Mac to apply your rule right away.
Hitting ESC or Tab will collapse the terminal, but your new rules will remain applied on the page.
To pull CSS Terminal back up, click your bookmark again or click the mini CSS Terminal icon at the top right corner of your page.
If you want to remove your changes, simply refresh your website. However, when you reactivate CSS Terminal, the last set of rules are then reapplied and you may resume editing. CSS Terminal will remember the custom CSS rules for each site. So, for example, the custom rules applied for churchm.ag are kept separate from the custom rules from www.tentblogger.com.
CSS Terminal will work in browsers that support DOM Level 2 Events and fixed positioning of elements, so the recent versions of these browsers should serve you well:
- Opera
- Mozilla Firefox
- Google Chrome
- Apple Safari
- Microsoft Internet Explorer 9+
You can learn more about CSS Terminal, check out the source documentation, download the code, drag and drop the bookmarklet on your browser to start using it, all, on the CSS Terminal GitHub page.
Michael Hyatt says
Is the functionality of this different from Firebug? Thanks.
Eric Dye says
A Firebug tool will show you the current code of the site, whereas this is adding code like a child-theme or custom.css file. When you apply new rules to an element, it overrides it. So, when you begin with CSS Terminal, there is NO code. You add it yourself.
Many designers (like myself )use Firebug or Chrome Developer Tools to edit CSS on the fly, but these interfaces are not always easiest to use if you have to do a lot of editing (also, accidentally deleting what you’ve done is a little too easy if you’re making a lot of changes).
I hope that answers your question 🙂