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.
Related
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.
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 am building up a website using MVC architecture. It takes a lot of css with it. I require atleast 20 css files to store within it each associated with some unique views. I want to know where can I store the css files? Either in a single root css directory or shall I store it with a particular view. Also linking these files within the common template file would be tedious enough. I mean it would show up 20 different tags. Is there any alternative way to do this? Please help. I am using codeigniter framework by the way.
What I do is store it all in a css folder inside the public folder (the one that houses your index.php file). I also have a helper method that generates the actual link tags, so in the template files, I just have something like:
<?= stylesheet('sheet1','sheet2','sheet3') ?>
The helper method that calls would then make the links (and assumes that they're in the public/css directory).
That cleans up the raw template files, though it does still make multiple tags in the files themselves. I use partial views, so there's a master view that has the main CSS file(s) that are used on every page (or almost every page), then add in on each template the ones that are unique to the view.
If you have 20 CSS files, you might want to go through and see what you can tidy up and make more generic. Any place where you have more than one of the same styles (even across files) is up for the chopping block. Any extra files should be relatively small and provide only overrides for the exception pages (and if you can genericize those more, so you use a file for more than one page, then that's even better).
I would recommend you to combine all the CSS files in a single file. Its easier to maintain and you will have only one request to the server. Having so many css files will only increase the loading time of your page. Also gzip the css files to increase the page speed.
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";
in direct regards to my last question.
my css files are located in the app_themes directory.
so im not the one adding the reference to them in the master page.
so how can i implement the solution they gave me in my last question?
thank you!
CSS Files in the app_themes directory has been a thorn in my side as well for this reason, and also because of not being able to control the load order.
I am not sure how to access them programmatically, at least not as objects.
The load order is alphabetical, so I have in the past just put a number in front of all of the style sheets to indicate load order, like I would name the files 1_Stylesheet.css, 2_Stylesheet.css, and so on.
You could do the same thing, and just build the version number into the file name to force the cache to get the new files, so each time you have a new version you just rename the file 1_Stylesheet_v1.css, 1_Stylesheet_v2.css and so on. Since they are added automatically changing the names themselves should not break anything.
This is not the ideal solution, I would love to see a better one, that is not overly complicated.