I have looked into this time and again and have read solutions but they simply do not work.
Supposedly, one can bypass the cache in Chrome by hitting F12, clicking the gear in the bottom-right corner, and checking "Disable cache." This does not work for me. I still get a page with cached CSS. In Firefox, I go under Net and check "Disable Browser Cache" to no avail. HTML is not an issue, just the CSS and, possibly, JS.
IE, however, doesn't have this problem. I update the page's CSS and IE updates accordingly. For obvious reasons this is not an ideal situation.
I go to my-site.com/style.css in Chrome and Firefox and the file there is not the file I see with FTP/SSH/IE. If this looks like a bug (it does to me), then please let me know. If I'm just being dumb, then please tell me what I am missing. Please.
Thank you.
One way to avoid caching is to explicitly change the url in someway. What I would suggest is to append a querystring parameter to the css url like:
http://mysite.com/content/css/File.css?version=1234
and update the version or another way is to attach the DateTimeOffset instead of an auto incremented number.
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.
I've always used ff inspector to debug css and never had this issue before, I tried to check the css of this website https://www.duolingo.com (the issue occurs only when I'm logged in), but the inspector is not showing anything for any element on the webpage:
The inspector works fine on other websites though, not sure if the website developers intended to hide the css or not, but I found some strange css links seems to be using a proxy:
Is this some kind of new trick to hide CSS or is it a bug in firefox inspector? or is it something else?
I'm using Firefox version 45.0.1
I am pretty certain this is a known bug that has been fixed already.
I don't have an account on this website so I can't be sure, but we've had very similar problems in the recent past.
It could be either:
https://bugzilla.mozilla.org/show_bug.cgi?id=1255787
Which has been fixed in FF48 (it involved an inline stylesheet <style> which defined a sourcemap URL).
Or it could be:
https://bugzilla.mozilla.org/show_bug.cgi?id=1249888
Which has been fixed in FF47 and uplifted to FF46 too (it involved an incorrect CSS sourcemap URL).
You can verify this by tested again with these versions. If it still doesn't work, please feel free to file a new bug here: https://bugzilla.mozilla.org/enter_bug.cgi?product=Firefox&component=Developer%20Tools%3A%20CSS%20Rules%20Inspector with steps to reproduce and possibly, pasting the errors that may be present in the browser console (ctrl+shift+J).
In any case, this isn't a wanted behavior. In the rare cases where there are indeed no css rules to be shown on a given element, then the panel shows a message like "no valid element selected" or "no css rules found", I can't remember exactly which one. If the panel is just empty, then that's most definitely a bug.
I have seen this in Firefox 49 when inspecting my own site on the development server. When I went to the Style Editor tab the list was huge and the spinner keeps spinning.
I went to the dev tools settings and disabled "show original sources". The Style Editor tab now shows two files and I'm able to see the CSS rules (though not my less rules obviously).
I've found this already filed as https://bugzilla.mozilla.org/show_bug.cgi?id=1097834
I developed a website using code igniter, styled it with CSS, locally it works fine but online it looks like css is not loaded it picks up the old css style. I checked the link but it's correct. What gives?
Without more information (such as seeing the site in question), I can't give you a direct answer, but I can give you some pointers.
My suggestion is to use a tool like Firebug (in Firefox) or Chrome's Developer Tools, etc. These tools allow you to see full details of all requests being made by the browser.
(the exact instructions will differ according to the tool you're using, so I'll assume Firebug for simplicity).
Open your page in the browser, with Firebug open, and look at Firebug's "Net" tab (And make sure that the option below the tab is set to "All"). This will list all requests that are made by the browser.
The key thing for you is to look for any 404 errors. Since you say your CSS isn't working, it's a pretty good bet that your stylesheets are failing to load. The 404 errors listed in Firebug will show you why they're failing to load.
If you hover over the filenames, Firebug will expand it to show you the full URL that it attempted to load. This will almost certainly show you that you've got something wrong in your configuration, and it's trying to load the stylesheets (and possibly other files too) from the wrong location. This should show you what's going wrong and give you a enough clues to be able to work out how to fix it.
Hope this helps you solve the problem.
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 )
I've a problem which is most likely some ugly CSS mistake, but I just can't spot the solution (and a few changes I tried did not help).
Some of in-text hyperlinks (not all!) are shown by Internet Explorer without the following space.
here is the example
See the link WatchBot just below the Rationale title (and a few similar links deeper in the article). Firefox, Opera, Chrome, Konqueror - all display it properly: WatchBot can. IE (6.0 but IIRC also 7.0) displays it as **WatchBot***can*.
I am using Yui-reset and yui-base. Is it possible that those libraries cause the problem?
Do you have a script running on, and altering, the content in any way? I say this because the page loads normally initially, but looks as though it undergos some modification later in the loading lifecycle.
If you think reset or base are making this happen try removing them one at a time - I haven't had any experience of this error before however (I usually use the full whack: Reset, Grids, Base and Fonts).
What I did notice however is that the first WatchBot link of the page is simply this:
<p>Have you ever been curious how is
WatchBot
picking the games to observe and save? Here is the explanation.</p>
Where as the second link looks like this:
<span>Due to the FICS limitations </span>
WatchBot<span> can
I have no idea what that second span is doing there - might be something to check up on. (It validated fine however - so there's definitely an closing span somewhere).
I'd say a good place to start would be to but a space after the anchor but before the span, rather than right after the span start tag.
Current state of the things: as steve_c spotted first, and buti-oxa confirmed, it looks like the layout is being spoiled by javascript (and as Ross noted, some extra spans are injected). Thank you all, I missed it.
I am to make experiments and selectively disable those scripts (analytics and google ads) to check whether it helps (my current bet is that maybe I have some HTML error or naming conflict)
Did you try to disable pageTracker? It seems to be the only script on your page, and it looks fine to me in its static form.
EDIT: I wondered what span Ross was talking about - I did not see any. I viewed the source. I just learned that Firefox allows to see both source and generated source (Toos/Web Developer/View Source). Sure enough, generated source has additional span inserted.
Solution: my page was spoiled by the text-link-ads script (which, in fact I activated on English blog by mistake - this is script by adkontekst.wp.pl, Polish firm). After disabling it everything is OK.
Thanks for everybody who pointed me into the right direction.