I am developing a site that uses Google Chrome as its browser.
(Yes - I do not need to be compatible with any other browser - I guess I'm lucky as this is a feature requested by the user of the system ;-)
I am working on the layout of the screen in VS2008 and am changing the CSS files all the time.
I do not want to change my browsers settings and do not want to clear the cache.
All I need is a browser extension (icon) that when it is clicked re applies the CSS to the page after fetching the CSS from the server.
This functionality exists in the Web Developer extension but it adds some extra clicks I am trying to avoid.
Any ideas will be much appreciated as I am getting tired of all the extra clicks.
Thanks and enjoy life, Julian
I've been looking around for a Chrome extension that reloads CSS from the server without making the page "flickering".
Here's what I found:
J CSS Reload actually does the best job in my opinion, although it flickers sometimes. You can even set a keyboard shortcut at the bottom of chrome://extensions/ by clicking on "Keyboard shortcuts" (although this seems to cause flickering constantly).
CSS Refresh refreshes CSS, but causes flickering (when hitting CSS reload, then all CSS is gone until the CSS is refreshed which makes it hard to spot the differences between before and after CSS reload).
CSS Reloader doesn't work for me.
Another option to consider is LiveReload.js which auto-reloads your web-app while developing (not only CSS but also HTML, etc.). There's a free Chrome extension and for Rack applications (like Ruby On Rails) there's the great Rack LiveReload gem.
CSS Reloader extension: https://chrome.google.com/extensions/detail/dnfpcpfijpdhabaoieccoclghgplmpbd, just press f9 to reload (obviously after installing it :P).
Also checkout Web Developer extention
https://chrome.google.com/webstore/detail/web-developer/bfbameneiokkgbdmiekhjnmfkcnldhhm
It has alot of great feature. One of them being able to reload the linked style sheets.
Related
We've been having an odd issue that I'm not sure how to tackle, and I think this may be related to a recent Google Chrome update, but I'd like some way of sanity checking myself before I open an issue on the bug tracker.
Problem
We have an internal web application that our users use Google Chrome to access. Starting sometime early last week, we've noticed that when users middle click links, one or more of our stylesheets gets unapplied to the page.
Weirdly enough, zooming in / out or opening Chrome's Devtools re-applies these stylesheets to the page. If you open the sources tab in the Devtools and watch the stylesheets that are loaded, when the layout is working, we're seeing the full list of stylesheets. When a user middle clicks on a link, the stylesheets area flashes and the CSS file is missing from the list. Zooming in / out re-adds the missing CSS file to that sources list and renders the page correctly.
Before Middle Click
After Middle Click
Troubleshooting
Thinking this was some JavaScript function doing this, I watched the elements to make sure there weren't any changes to the DOM (thinking we may be adding a class to our wrapper elements on accident). No DOM changes that I can see, and I'm not seeing inline styles applied to HTML elements.
Figuring that the previous step wasn't enough, I removed all the JavaScript on the page trying to narrow down what file is doing this. After removing all JS from the page, we're still seeing the same thing. Someone middle clicks a link, then the page's styles go crazy.
I double checked it in Incognito mode, figuring it was one of my extensions. It still happens in Incognito mode.
Thinking our Stylus compiler was going nuts, I double checked the stylesheets for any invalid CSS and couldn't find any. I removed the source maps from all our stylesheets thinking it may be related to that, but it didn't fix the issue either.
I've also checked for the stylesheet being affected having a disabled attribute set on it, but that doesn't seem to be happening.
Wrapup
All in all, I'm not sure what's causing this outside of a browser bug. This is something that had popped up late last week which coincides with the last upgrade of Google Chrome, which hints to me that this probably relates to that update.
That being said I've not seen this issue affect other websites, which also points to the website being the issue so I'm not sure.
Is there any other way I can narrow this down to being a Chrome issue? I've not had this happen on any other browsers I've tested. (Working on putting together a MVP of the issue that's happening now.)
Your problem sounds similar to this.
Chrome Bug: https://bugs.chromium.org/p/chromium/issues/detail?id=647151
Should be fixed shortly.
My asp.net MVC application use bundling to render stylesheet in my _Layout Page. Once my application deployed, I use Firefox and navigate to my login page and got this weird behavior I can't explain.
When I clear firefox cache to force reload stylesheet from server, I first see my page without any style applied. Then once the stylesheet is loaded, style are applied wich cause some unwanted 'flickering'. On chrome an IE, nothing is displayed before stylesheets are loaded, so no flickering here. I also have a really similar web app on my server for which, when I browse it with firefox, the 'flickering' problem doesn't occur. So I guess it must be something, maybe the order of code blocks in my page, that causes this behavior, not only the browser.
Is there a place where whe can look into your code? It's kinda hard to give an answer by just this question and information. The problem can be caused by alot of possibilities.
Did you try viewing the application on another computer? Sometimes that can be handy to determine if the issue is local (or is a general issue).
If there is a link to share, that would be great.
I am involved recently in a project to restyle a certain published website. I have no access to the code and the CSS files. what I can to do is to load my custom local CSS as a new "user stylesheet" into firefox or chrome using the extension Web developer toolbar which is available on chrome, opera and firefox.
For a reason, "Web developer toolbar" offer a great feature called [Add User Style Sheet] which enable me to load my local CSS and tweak it using firebug to restyle the page as needed.
but of course some tweaks are necessary to do over IE and there is no tool like "Web developer toolbar" over IE. I know there is a way to load a user style sheet from Internet options > accessibility. but it is very dummy, specially when switching from various IE versions using the built-in IE developer tool. and of course that user style sheet will be active only when restarting IE!! ... so it doesn't make sense doing modification on my CSS and restart to see the affected modification !!
Until the time we decide to eliminate IE forever, I am wondering. if there is a way/tool to load my custom CSS over IE and tweak it from outside IE and just reload it? or by refreshing the page[F5]?
Thank in advance.
It wont be easy or quick but the best solution for you r problem would be to do your css styling with IE code inspector. I know its not as good as Firefox or chrome but you will at least be able to see what works and what doesn't. You can ofcouse copy and paste directly out of IE code inspector into your stylesheet but if you refresh you would have to insert all the new styles again.
I'm trying to re-skin an existing site using CSS only. I will be taking one of their CSS files and redoing it to match a new design, without changing any HTML. I want a good way of continually updating and then testing, but I have to do it locally because they do not have a dev environment. The site itself is dynamic and authenticated, so I can't just download pages from the site and test the entire thing locally. I was hoping that there is a way to tell my browser (Firefox, preferably) to disable that specific remote CSS file and replace it with a local file.
I don't want to use something like Web Develop Toolbar or Firebug because that requires me to manually make the changes each time I load a page. I want something more seamless.
I was thinking one possibility is to load my new stylesheet in userContent.css, but I would still need a way of telling the browser not to load the original stylesheet from the server.
Any ideas?
UPDATE: I found this Mozilla bug report https://bugzilla.mozilla.org/show_bug.cgi?id=208641 discussing the issue of being able to change userContent.css without restarting Firefox. One of the posters (Simon Wilper) posted some files and info about adding a menu item to refresh userContent.css, but it talks about modifying browser.xul and I can't find that file on my system. This seems like the last piece of the puzzle.
You can use AdBlock Plus to create a custom filter to block that one particular stylesheet, so it will not load when you go to the site. This rule will always be in effect, so as you refresh the page, you will not have to do anything extra.
https://addons.mozilla.org/en-US/firefox/addon/adblock-plus/
As for adding your own stylesheet onto that external site, you can use Stylish, an add-on for adding your own stylesheets to particular domains. This, too, will always be present as you refresh the page.
https://addons.mozilla.org/en-US/firefox/addon/stylish/
The issues you will run into, I imagine, will be what to do with images you are intending on linking to in the CSS. You will have to upload them somewhere, reference them absolutely, and then once you are finished, replace the URLs with new locations on their server. Also, that editing Stylish stylesheets within their editor is pretty poor (no code colouring, no code completion.) Probably better to edit it in your editor of choice, and then paste it into the Stylish textarea. Hit save, then see your work (I believe you won't even have to refresh, but I might be wrong.)
Also, both these add-ons are available for Chrome too.
https://chrome.google.com/webstore/detail/adblock-plus/cfhdojbkjhnklbpkdaibdccddilifddb
https://chrome.google.com/webstore/detail/stylish/fjnbnpbmkenffdnngjfgmeleoegfcffe?hl=en
I am not sure why people are suggesting to install extensions for this simple task. I would suggest you to just follow these steps to disable whichever file you want from being loaded in your browser that you want. Just follow these few simple steps:
Hit Ctrl + Shift + C to open source inspection
Navigate to Network tab
Right Click on any file from the list and and click Block request URL
Now the file won't load. Cheers!
PS: Steps are same for Google Chrome and Mozilla Firefox browsers. Not tested on Opera and/or Safari.
Install web developer extension
http://chrispederick.com/work/web-developer/firefox/
And then it will create a menu under the Address bar, click on the css tab and then "Disable Styles" > Disable Individual Style Sheet" > then select the style sheet file you want to disable
after this, again click on the css tab and then "Add User Style Sheets" , next select your css file.
I hate Firefox, I really do, but as a web developer I'm chained to it b/c of the robust set of tools that Firebug offers. Recently Chrome and Safari's inspection tools allowed users to edit full chunks structural code (in a very buggy manner), but you still can't edit full stylesheets. Usually when someone brings this up, Chrome and Safari developers say "BUT YOU CAN EDIT CSS," and that's true, to an extent. You can edit CSS property-by-property (which takes forever if you have a lot of changes) in both browsers, but there is no way to see the full computed stylesheet, make edits within it, and immediately see the results. To date, only a full install of Firebug on Firefox allows you to do this.
Has there been any momentum in either of the Chrome or Safari camps to build a plugin to match this unparalleled function? Cheap plugins that allow you to insert CSS into the page are not the answer. It's really simple:
Have a list with the current stylesheets that are being referenced
Choose the one you want to edit, and click an edit button
See all the code in the stylesheet
Make changes and see them reflected on the page immediately
Is it really that hard to build something that does this? I think it must be, b/c why else would the developer communities of two browsers completely ignore it? If there's something out there that now offers this capability, I'd love to hear it; otherwise, maybe someone will step up to the plate and develop it for either Chrome or Safari. It seems like the guys who developed the CSS Edit app would be all over this.
Thanks to you I found it!
The Live Stylesheets extension for Chrome is what you are looking for. Be sure to restart Chrome after installation to use it.
You can edit external stylesheets in Chrome DevTools, too (since Chrome 15 or so). Just double-click the stylesheet contents in the Resources panel (or click the "Edit" button below), edit, Ctrl-S to commit a new revision, Esc to cancel editing. And it updates your page as you type!
You can edit your CSS files directly on Chrome without relying on any extension.
Here is how: Edit CSS files on the fly using Chrome DevTools
A different way to access it:
right click the page, select inspect
on the DevTools, click on "Sources"
locate the css on the "Network" pane and click it
change the css and save it ( by pressing ctrl+s )