I'm looking for an extension or tool that will enable me to edit CSS real time from the browser. I installed Stylebot which works well but whenever I save the new CSS, it only retains the stylesheet in the browser and not the CSS file or HTML file. I can't figure out how to make changes to the CSS file itself, and I'm not sure that's even a possibility with Stylebot.
Any suggestions would be much appreciated. Thanks.
this works for me http://tin.cr/
its really nice and as simple as installing the extension.
Happy coding :)
any changes you make are already added to the css file. kind of like an inverse livereload :)
Related
I want to optimize my page speed. I have checked with this link. I have solved js problems. But I didn't find any solution for external css like THIS which I added from others source.
How can I resolve this css problems? Please help me.
You need to use this css after download in your local and also with related fonts like
https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/fonts/glyphicons-halflings-regular.ttf
to optimize your page speed more, minify your styles and put them into one file using build tools like grunt and gulp, but if you are not comfortable working with them just copy and paste or use some online tools like shrinker, it will do both operations for you. Also, consider moving down your style (if it links to a large file) and script tags to the bottom of the html file.
What happened?, the console don´t show lines of document.css thanks.
I solve this problem.
The styles.css don´t show because I use the Prefix free plugin
In his limitations says : "Unprefixed linked stylesheets won’t work locally in Chrome and Opera."
I disable this plugin for local testing.
I faced same situation before, all i had to do is to remove a jQuery plugin. i don't remember the name but that was converting external style as internal styles.
Try removing links to your external JavaScript files and look which plugin cause the problem.
Hope this helps :)
I have been working on a site for a few days now and uploaded the site to test. In dreamweaver the site looks fine and the CSS styles are being applied. In a browser the CSS does not take. I have checked and re-checked the links and cannot understand where the disconnect is happening. Here is the test site
http://gbetza.mydomain.com/webservice2/test/Basso56/test/index.html
Thanks for your help
Each time I load the site, your site.css file seems to be getting larger. So I'm pretty sure this is a case of your site.css file not being up-to-date.
If you get this file to the correct version, all of your issues should be fixed.
Probably the cache. Try cachebusting technique. Eg : add css/site.css?v2
I am trying to use LESS CSS to write my CSS. I have imported the style.less and less.js file in that order.
Now i wanna extract the CSS that LESS generates.. is there any way i can do that ? i dont want to use the script to generate it dynamically in production. just for development.
You can extract the CSS using the Firebug extension in Firefox. The compiled CSS appears under the menu choice "inline" in the CSS tab.
http://incident57.com/less/ if you're fortunate enough to use OS X, and there's a ruby gem too http://rubygems.org/gems/less although this has been superseded by the node.js implementation installed through npm. Check http://lesscss.org/ for more information.
There's also http://www.dotlesscss.org/ for windows, but not sure how useful it is.
And in 2013 we have:
http://less2css.org/
Seems to work just fine for me. Just copy/paste.
Chances are you'll want to minify your CSS after this, so:
http://cssminifier.com/
For others who'd stumble here, in modern browser you can see it in the LocalStorage. I use Chrome and it's in the dev toolbar under Resources.
In my case we also want to save the css file automatically (we have a tool that generates a template), we can do it easily with javascript.
This returns the generated CSS, just replace it with the right path, as you see it under the Resources tab:
localStorage.getItem('http://domain.com/css/main.less');
Then we send that through Ajax to save it in a css file. When switching to production we remove the less and replace it by the generated css file.
I'm not a desktop applications developer so I was wondering if someone heard about an extension that actually writes on the file system. it would be great if you open firebug like extension and do some modifications e.g. adding CSS rules and they will be added automatically in the CSS file. how hard would it be to build such an extension?
The closest I've found is XRefresh which actively monitors files for changes, then automatically refreshes Firefox. It feels very similar to editing live with FireBug.
I think an extension like this would be possible, but it would be pretty hard to map DOM changes to a specific stylesheet.
You can could use the Web Developer Toolbar for this.
The changes you make in its CSS editor (CSS > Edit CSS) are applied to the page immediately (without saving to file), but it also has a Save... option, so you can overwrite the existing CSS file with it.
It's a pretty basic text field, though, that just displays the plain CSS file. It doesn't have any syntax highlighting nor organize the CSS rules according to the cascade etc. like Firebug does.
Also see this related question:
Why can’t I save CSS changes in FireBug?
Use Backfire. It's an open source solution I wrote that sends CSS changes back to the server and saves them. It has a working .NET server implementation example that is easily portable to any other platform.
http://blog.quplo.com/2010/08/backfire-save-css-changes-made-in-firebug/