If i have some bad css in site.css file and this has been cached from the user's browser, is it then possible to simply rename the file with the fixed css in order to have the user's browser reload data that had been formerly cached?
If not, is there a way to mimick clearing a browser cache?
Thanks
If you simply add a dummy querystring value to the css reference the browser will get a fresh copy of the file since different url means different resource. For instance
styles.css?anything=1
Renaming the file would work too but that's not necessary.
Yes, you can save the new css file with a new name and edit all files that use the css file to use the new version.
A fake query string like
styles.css?revision=2
or
styles.css?lastchange=2012-09-21
in all files that use the css file also forces all caches to get the updated file.
The advantage is that the file name doesn't have to change.
The drawback is that you won't notice easily whether the old version is still in use somewhere (perhaps because you forgot to update a file). If you instead change the file name, you can leave the old file up for some time and check the logs if it's still accessed to give you this information.
Related
I would like to make a custom dark theme for a web client.
I tried everything but no matter what I changed I cannot get any changes to take effect. I found out this page in the documentation but I cannot get it to work:
https://afterlogic.com/docs/webmail-lite-8/developers-guide/creating-new-skin
Does anyone have some experience with this webmail client?
The recommended option for creating a new skin is to clone and rename one of the existing skins, and upon making changes to it, run gulp styles --themes YOUR_THEME_NAME command. Once this operation is performed, check static/styles/themes/YOUR_THEME_NAME and see if you get your changes reflected there. If the changes are in place, then it's probably browser cache causing it, try clearing it and see if that helps.
In fact, it's not required to deal with .less files, you can simply create a copy of an existing theme under static/styles/themes directory - but in either case, you need to make sure the new theme is listed in ThemeList section of data/settings/modules/CoreWebclient.config.json configuration file.
I am working on a drupal site locally. When I inspect the LIVE version of the site, the css file names are random names with letters and numbers like
css_Ogaf452VDr2oEkwk7Oe68.css.
I think this is a minification result of the original css files but is there any way to tell what the developer used to minify the code and why the random names?
It means that the CSS is aggregated. The same can happen for JS.
The settings are here:
/admin/config/development/performance
If it is enabled, basically it will combine CSS and JS and put them into files like you mentioned.
Generally this will be enabled on production to assist with caching and disabled on development so get a better idea of what's going on.
The following is the explanation given by drupal itself
Aggregates and optimizes CSS files into a cache file in the files
directory.
The file name for the CSS cache file is generated from the hash of the
aggregated contents of the files in $css. This forces proxies and
browsers to download new CSS when the CSS changes.
The cache file name is retrieved on a page load via a lookup variable
that contains an associative array. The array key is the hash of the
file names in $css while the value is the cache file name. The cache
file is generated in two cases. First, if there is no file name value
for the key, which will happen if a new file name has been added to
$css or after the lookup variable is emptied to force a rebuild of the
cache. Second, the cache file is generated if it is missing on disk.
Old cache files are not deleted immediately when the lookup variable
is emptied, but are deleted after a set period by
drupal_delete_file_if_stale(). This ensures that files referenced by a
cached page will still be available.
The CSS is cached. When you make a change to one of your style sheets it's not gong to be immediately displayed due to it being cached. Yo remedy this clear your cache.
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.
When I clear my theme registry Drupal runs off and builds out a nice consolidated css file, but it does this for different node/page types so that I get several instances of said file existing. I mentioned this in another question I asked (and answered), but my question is, how does Drupal deduce what css files it needs to add to the consolidated version? There must be numerous different places that control what modules appear on a particular node, so what constitutes a rule for another css file being built?
Well that wasn't an easy chain of functions to follow but I think I've got there...
Every time a page is 'refreshed' (i.e. built from scratch, not served from cache) all CSS files added with drupal_add_css() during that page build are aggregated and saved to a single file that is returned as the <link> tag for that page.
The following line in drupal_add_css() decides what the aggregated CSS file's name will be:
$filename = 'css_'. md5(serialize($types) . $query_string) .'.css';
$types in this context is an array of all of the CSS files added using drupal_add_css() during the current page build. The filename for the aggregated CSS contains a serialised string of $types, which essentially means that any other page that adds the same CSS files as that one will receive exactly the same file name and thus load the same CSS file.
So basically, the aggregation function is run for every single page build so all CSS added to that page will be aggregated every time. If certain pages happen to use the same modules then they will automatically be served the same CSS file as defined in the PHP snippet above. When you combine that with page caching you get the results you find in the HTML source on the different pages.
Hope that makes sense!
I'm creating a theme where i want it to have different widgets and plugins. Each plugin would ideally have it's own css file. However, this approach is not so good because i can end up having multiple files included in my header.
Is there an approach where i can sort of cache all different css files in a single one upon the first user request and then just use that ?
Just use only one css with all the different styles from each plugin in that single file. This way you'll end up having only one external css file and it will be cached, saving bandwitdh and decreasing loading times of the page.
Maybe look at things like yui compressor http://developer.yahoo.com/yui/compressor/
In case anyone is still interested, I created a PHP class that combines all the files .css or .js files of the specified folder into one and minimize it. It can be found in my public github. For using it, just do:
if (file_exists('minimize.php')) =
{
include 'minimize.php';
$Minimize = new Minimize();
$Minimize->folder('/path/to/the/folder/','.css','/path/to/the/resulting/file/style.css');
}
else
echo "The minimizer file was not found, please make sure it's in this folder";