Loading...Designers need to try out different CSS rules on webpages before finally obtaining a beautiful design. For example, if a text with a font size of 14px looks a bit bulkier on the page, testing with a lesser font size for example 12px and seeing the changes on the fly would be very handy. If you are looking for such a tool, CSS Terminal tool can be of great help.
CSS terminal can be very helpful for quick CSS development, prototyping and debugging. CSS terminal is a javascript bookmarklet rather than an addon; therefore it would work on any popular browser like Chrome, Opera, Firefox, Safari or Internet Explorer. You can install it by dragging this to your browser. To use CSS terminal, simply click on the bookmarklet while you are on a page. You will now see a terminal where you can apply your CSS rules. You can see the changes due to the CSS rules on the fly. But the custom CSS rules won’t apply upon refreshing the page. But if you want the terminal again, you can click on the bookmarklet and your earlier CSS rules will be applied again and you can continue editing the CSS rules.
What’s great about CSS terminal is that it also works on mobile browsers. To install the bookmarklet on your mobile, follow this link. Save this link in your bookmarks with the name CSS Terminal. Now edit this bookmark and delete everything upto # and save it again. Now whenever you want to test CSS on any page, open this bookmark from the bookmarks menu and you will be able to test CSS rules on the page.
If you want to hide the CSS terminal on a page, you can simply do so by hitting the ESC button. This will just hide the terminal; the CSS rules will still remain applied. If you want to bring back the terminal again, you can click on the bookmarklet again. Your CSS rules will be added as soon as you add a semicolon or hit Enter. You can apply a rule right away by hitting Control+Enter.
CSS terminal is indeed a great tool for web designers and web developers to debug and test CSS rules on a webpage.