Following is an extract from Requirejs documentation :
Ideally RequireJS could load CSS files as dependencies. However, there are issues knowing when a CSS file has been loaded, particularly in Gecko/Firefox when the file is loaded from another domain. Some history can be found in this Dojo ticket.
Can anyone please explain what is happening in Gecko/Firefox??? it says they load files from another domain??what does it mean???
please help
thanks
I believe they are just referring to when sites use cdns to host static content. Using a different usually cookie less domain to host their css, images and js files. Not that Gecko/Firefox is doing something to all css, images and js files. I'm not sure why Gecko is different from other browsers during these conditions they describe however.
Related
I'm using Chrome's Lighthouse audit to make some performance improvements to a website and there are some styles under the "Remove unused CSS' section that I cannot locate anywhere on the site.
The ones I am questioning are the 2 lines starting html, body etc.
They look a bit like reset styles but aren't the ones I have in the CSS file.
I've tried searching the theme files (this is a shopify site), the page source, turning off javascript and these styles don't show up anywhere.
Has anyone encountered this before?
Since it's a Shopify Site it's using the Shopify style CDN by default. Since it's a CDN the css files are not going to be found in your project directory but rather on Shopify's website. An example of a style CDN can be found here, this one is for bootstrap.It uses a URL to access style options that are stored on their servers so you don't have to download the CSS locally.
Here's more on CDNs.
As for your issue, it looks like your project is referencing these CDNs but you're not using them. If you can find where in your project these CDNs are linked and remove them/comment them out it should resolve the issue.
Here's a similar question about whether or not it's safe to remove unused/deferred styles for Shopify.
I have a requirement in my project to version image files which are called from css. I have been researching on 'how to' and found our very own stackoverflow.com is versioning images. I found below code from http://cdn.sstatic.net/stackoverflow/all.css
background-image:url("../Img/sprite-herobox.png?v=d173774f3a9f")
Can somebody tell me how it is done?
CSS file is not probably a static file but a php/asp file, just with (.css) an extension and css code within
I have an app which needs to work in several languages, and several different color schemes and I would rather not load all the CSS every time since a large amount of it is not necessary or relavant (rtl css for example) but meteor automaticaly loads all CSS files he can find.
is there a way to selectively load CSS files?
Thanks.
If you place a CSS file within the reach of Meteor compiler, it's merged into the main app and in the current release there's nothing you can do about this.
You can however put the file in /public directory. Meteor won't touch it there, and you will be able to load it at will by adding <link/> tag to your page head.
Please have a look at https://stackoverflow.com/a/26694517/1523072 which seems a quite elegant way to do this and also explains why you shouldn't do it.
One of my apps currently loads 2.6MB compressed Javascript and 300KB compressed CSS, which seems like a lot. However, after the first visit all the resources are cached by my browser, which means the only thing that is transferred between browser and server after that is pure data.
I need to edit a css file that manages the position of certain buttons for a block.
Using Google Chrome to inspect the element, Drupal only gives me this information about the css file name: DSFJHjdfkvwvSDFVSFbvnhsdjnvjsdnfjbvw.css
Wonderful... that doesn't exist. How am I suppose to pinpoint the exact location of a css file? I've torn apart the css files within the styles folder in themes.
So basically finding the source code for everything in drupal requires you to find the needle in the haystack. Is there a way to find exactly what css files my webpage is using by using the admin panel??
Drupal, for performance reasons , aggregates all CSS files into one generated file so only 1 request Is needed to load all necessary styles.
You can disable this (not recommended on a prd site) by going to the performance settings in drupal config and disabling js and CSS optimizations.
Clear the cache and now you will see the specific file the CSS rule lives in when inspecting in chrome tools.
As a side note, it is not recommended to edit anything in a contributed module unless you contribute it back. Otherwise, when you need to upgrade to the next version of the module, you will lose your previous changes. I would just apply CSS rules in your custom theme that override the modules CSS.
Sorry if there are typos. This was written on my phone and I will clean it up when I am at my desk.
I think in your drupal configuration you have enabled the "Aggregate and compress CSS files" settings. Try disabling it by going to Configuration > Development > Performance. It might solve you problem.
You can revert back the setting after you have made changes.
Turn of the caching and then clear the cache. You should then get the correct location of the CSS rules. Once you are done with this, enable caching again.
Recently we have experienced the problem of browsers caching the css files, so that when we move code to another web server we get unexpected and unwanted results.
Having read various solutions it occurred to me that the css file could be included in the template. Rather than write
<link href="/static/css/parentx.css" rel="stylesheet" type="text/css">
we could put
<style>{% include "static/css/parent.css" %}</style>
which would embed the css in the html. It has the added benefit of reducing the number of calls back to the server for the css file but the disadvantage of not caching the css at all and not allowing the web server to provide the static files. However, these files are quite small, typically about 12K.
I propose this as a temporary measure as I have just discovered the existence of asset management plugins that look to do a better job.
I have never seen the use of the 'include' template command to get css (and javascript) files so perhaps there is a drawback of which I am unaware?
Not caching the CSS file at all will slow page loading though it's unnecessary.
Cache your CSS as long as possible and necessary and when you need to invalidate cache, a sure way is to load another file, I mean the same file with another name. It could be parent1391234565.css or parent-v003.css or parent130307.css or parent-4e6ca1437f2d.css. If you told browsers to download parent-v002.css, you're pretty certain they don't have parent-v003.css in their cache!