I have a page that calls about 32 stylesheets. On another page, it calls < 30. In every other browser both pages look fine, but on the first page in IE (8, 7), the last 2 stylesheets aren't being called and it totally messes up the layout. I'm not really sure how to get around this in drupal.
EDIT:
Also, I understand that having more than 30 is not that great, but that is how our site was developed originally. We have a bunch of themes and modules that add syleshets using "drupal_add_css".
I tried compressing the css by going to admin/settings/performance but the stylesheet link doesn't work because we are using a port number for our test site (http://mysite:123) and the link generated is http://mysite/public/css/random_string.css
You can use admin/settings/performance and set Optimize CSS to true. This will put out 1 css instead of 32+. If you are developing and want this on to work in IE, you need to clear the cache after changing your css. We tend to leave this off in development & only turn it on to test in IE or for production.
All best,
ember
Answer to Alison's comment (too long for a comment block)
Hi AlisonC,
I've never tried using a port for a site with Drupal. I'd suggest making sure your settings.php for your site are setup correctly. There may need to be a special name for your folder (see the instructions at the top of settings.php) or you may need to check the $base_url and make sure it has the port.
If that doesn't work, there's a module for caching css while developing (http://drupal.org/project/ie_css_optimizer). I haven't used it, but it may work a little differently at least for your situation. (After typing this I noticed another user also recommended it).
I've been assuming you're still developing, and I would remove the ie css optimizer module (or at least turn it off) before going live, since it's primarily a developer helper. I think this is the limit of my knowledge. Good luck!
--Ember
This is a known limitation with IE - you cannot have more than 31 stylesheets on any given page.
References:
http://john.albin.net/css/ie-stylesheets-not-loading
http://social.msdn.microsoft.com/Forums/en-US/iewebdevelopment/thread/ad1b6e88-bbfa-4cc4-9e95-3889b82a7c1d/
http://blogs.msdn.com/b/ieinternals/archive/2011/05/14/internet-explorer-stylesheet-rule-selector-import-sheet-limit-maximum.aspx
The only real solution you have is to combine your stylesheets so you have fewer individual CSS files (use Drupal's "Optimize CSS" option). But I acknowledge this may be a pain if you're trying to debug your code, etc.
In fact, it is possible to load a lot more than 31 stylesheets into IE, but for any more than 31, you need to do it via an #import line inside another CSS file. This isn't really possible in the context of a Drupal site, where each stylesheet is added by a module, and you don't really have control of how Drupal adds them to the page.
How are they being loaded? 30 individual <link href="blahblah.css"> calls? Or from other stylesheets with #import directives? Remember that if there's a syntax error, further processing of a stylesheet will fail.
http://drupal.org/project/ie_css_optimizer
...is what we use. Theme debugging is a pain with CSS optimization turned on. D7 uses the #import method this module implements to get around the issue.
There is actually a module to deal with this. I haven't used it personally but it does have 5K+ users (Drupal 6).
Related
I have a ((very)) simple WP site with the above mentioned theme.
The theme loads a ton of external .css and .js files above the fold that causes render-blocking and I am sure I don't use half of them.
The header.php only includes a few directly and most are included via the php wp_head() -tag. I am struggling to find out, which .js and .css are in use and which aren't. Also how to get rid of them totally since I feel like using 'defer' or 'async' is only solving the problem partially.
My site is http://toptand.dk. Be aware, that I currently use WP Super cache for compressing and autooptimize to further minimize render-blocking etc. which might make the header look very different. I would rather get rid of it for real.
I have read many articles about how to prevent render-blocking, but non really explains how to deal with all the crap from a WP template.
The theme loads a ton of external .css and .js files above the fold
that causes render-blocking and I am sure I don't use half of them.
This is very typical of commercial WordPress themes; such themes load many files, as many are required for the "multipurpose" backend functions which provide short-codes, drag-and-drop features, custom post types, ecommerce, etc.
You sacrifice speed and page weight for all those features you use as well as the potential features you don't. If you need speed and a light-weight site, don't use a theme like that. You can go into that theme and wp_dequeue_script scripts and style sheets, but the features theme will break. See https://codex.wordpress.org/Function_Reference/wp_dequeue_script
Try a simpler, lighter weight (and free) theme from https://wordpress.org/themes/ and learn how themes work https://developer.wordpress.org/themes/getting-started/ in order to get features you want without all the extra code.
You can utilize Chrome Dev Tools' Audits tab.
I am struggling to find out, which .js and .css are in use and which
aren't
Upon selecting the Audits tab, include Network Utilization based on necessity but mandatorily check Web Page Performance option. Once the selection is done, either click on Audit Present State or Reload and audit.
Once the process is complete, the results will provide inputs on the number of unused CSS rules. This will give you an idea about the unused CSS.
Also how to get rid of them totally since I feel like using 'defer' or
'async' is only solving the problem partially.
The recent version of Chrome (59) has brought in a new feature called Coverage (you can find this under More Tools inside the dev tools). This helps in understanding the percentage of the CSS being used in the current page and clicking on one of the results redirects to the code and marks the portions of non-executed code in red and the executed ones in green.
These inputs should help you optimize your assets and remove the unused code.
Hope this helps!
I am building my own template in OpenCart by making a copy of the default one and then making my own.
When I edit the CSS in Chrome code inspector and copy it to my stylesheet. Is it "correct" (from a web standards/web developer view) to leave the old commented code in place or should it be completely removed.
I sometimes find that unticking features in code inspector and then copying over the block of code from the Chrome stylesheet is the quickest and easiest way of doing things.
Or maybe there are better "Live CSS" tools and extensions out there?
When you deploy for production you should remove comments, and also minify your CSS. You can add a minification tool to your build process which would remove the comments and whitespace for you.
The reason is that it makes a smaller file for the end user to download. Smaller file means less bandwidth use and a faster transfer. This is especially important for mobile device users.
It should ideally be removed (and then minified et cetera as mentioned by another answer). Best practice would be to use some version control software such as Git to keep track of what is removed and added and so forth.
My environment is Visual Studio 2010 with Resharper 6.0. I have a large website with many CSS files with many styles.
I would like to tidy these up as a lot of them are no longer used, I noticed that Resharper allows you to track usages but obviously this can miss out CSS class specifications in code-behind etc.
My only solution is to do a Find In Files in VS but obviously when you have a large amount of styles this proves too slow and cumbersome.
Has anyone had a similar predicament?
EDIT: It's worth mentioning that the site is a CMS comprising around 10,000 pages, so anything that requires browsing pages might also be a bit tricky.
There is a firefox extension called dust me selector that does this. You enable it and then navigate to each page. It keeps track of all used css. You spit out a new css file with all the tracked css styles.
The Web Essentials Visual Studio Extension has a BrowserLink feature which comes with a way to track unused css in your site while you browse around the site.
A way to do that is running your site in a headless browser like PhantomJS and inspecting the styles applied in order to remove the ones not being used.
Fortunately, there is a nice tool built on node called uncss doing exactly this:
https://github.com/giakki/uncss
I found it here:
http://addyosmani.com/blog/removing-unused-css/
About browsing all those pages, well, I dunno, if you can generate all the possible URL's then you can automate the process.
Give it a try and let me know if it helps.
I just worked out, by trial-and-error, that IE 7 has an upper limit of 32 stylesheet includes (i.e. tags).
I'm working on the front-end of a very large website, in which we wish to break our CSS into as many separate files as we wish, since this makes developing and debugging much easier.
Performance isn't a concern, as we do compress all these files into a single package prior to deployment.
The problem is on the development side. How can we work with more than 32 stylesheets if IE 7 has an upper limit of 32?
Is there any means of hacking around this?
I'm trying to come up with solutions, but it seems that even if I loaded the stylesheets via Ajax, I'd still be writing out tags, which would still count towards the 32-stylesheet limit.
Is this the case? Am I stuck with the 32-file limit or is there a way around it?
NOTE: I'm asking for a client-side solution to this. Obviousy a server-side solution isn't necessary as we already have a compression system in place. I just don't want to have to do a re-compress every time I make one little CSS change that I want to test.
Don't support IE7.
To avoid confusion: I'm not seriously suggesting this as a real solution.
Create CSS files on the server side and merge all files that are needed for this certain page.
If you are using Apache or Lighttp consider using mod_concat
Write your stylesheet into an existing style block with JavaScript using the cssText property, like this:
document.styleSheets[0].cssText += ourCss;
More info here:
https://bushrobot.blogspot.com/2012/06/getting-around-31-stylesheet-limit-in.html
At my last company we solved this by mashing all the CSS into one big document and inserting a URL in the web page that referenced that one-shot document. This was all done on-the-fly, just before returning the page to the client (we had a bunch of stuff going on behind the scenes that generated dynamic CSS).
You might be able to get your web server to do something similar, depending on your setup, otherwise it sounds like you're stuck with only 32 files.
Or you could just not support IE7 ;)
Having a problem at the moment that many of my pages load [using GooglePageSpeed] and seem to load a lot of unused CSS.
If I try and split the CSS - then I get the error that "too many CSS files". I am wondering whether there are any jquery plugins [or other] that are able to RENDER only the CSS for the page that is being loaded and ignore the rest ?
It's sort of like a dynamic CSS interchanger ? Would really help ....
Unless you are sending hundreds of kb of css then it shouldn't really matter.
A dynamic CSS changer would destroy the caching ability of the browser resulting in higher transfers.
I would suggest you to go for Dust-Me Selectors (addon of firefox) to check unused css and delete it for specific pages. Note this is not something allowing you to delete on-the-fly though.
There is a really handy plugin for Grunt called UnCSS. It will automatically remove unused CSS on the fly. Check out this link for more info:
Remove Unused CSS automatically
Seems to me, that it will be bad practice to optimize your css on the fly. Neither on server's side, nor on the client's because it will decrease performance of server/user's browser.
If CSS size is so important for you, it would be a better way to manually create some pre-optimized stylesheets for each global types of pages used in your web application and switch between them.
For this needs, there is one more useful addon for Firefox's Firebug, named CSS Coverage. It allows you to scan multiple pages of your site to see which CSS rules are actually used in your site per each page or per many.
Scaffold might help. It doesn't remove what you don't need, but it does compile it to one small file.
Removing unused CSS would need some JavaScript which would slow down more than the solution above.