Drupal + CSS = fail
Finbarr - September 24, 2009 - 23:16
<link type="text/css" rel="stylesheet" media="all" href="/drupal/sites/all/modules/views/css/views.css?F" />
<link type="text/css" rel="stylesheet" media="all" href="/drupal/modules/node/node.css?F" />
<link type="text/css" rel="stylesheet" media="all" href="/drupal/modules/system/defaults.css?F" />
<link type="text/css" rel="stylesheet" media="all" href="/drupal/modules/system/system.css?F" />
<link type="text/css" rel="stylesheet" media="all" href="/drupal/modules/system/system-menus.css?F" />
<link type="text/css" rel="stylesheet" media="all" href="/drupal/modules/user/user.css?F" />
<link type="text/css" rel="stylesheet" media="all" href="/drupal/sites/all/modules/cck/theme/content-module.css?F" />
<link type="text/css" rel="stylesheet" media="all" href="/drupal/sites/all/modules/date/date.css?F" />
<link type="text/css" rel="stylesheet" media="all" href="/drupal/sites/all/modules/extlink/extlink.css?F" />
<link type="text/css" rel="stylesheet" media="all" href="/drupal/sites/all/modules/filefield/filefield.css?F" />
<link type="text/css" rel="stylesheet" media="all" href="/drupal/sites/all/modules/jquerymenu/jquerymenu.css?F" />
<link type="text/css" rel="stylesheet" media="all" href="/drupal/sites/all/modules/logintoboggan/logintoboggan.css?F" />
<link type="text/css" rel="stylesheet" media="all" href="/drupal/sites/all/modules/thickbox/thickbox.css?F" />
<link type="text/css" rel="stylesheet" media="all" href="/drupal/sites/all/modules/thickbox/thickbox_ie.css?F" />
<link type="text/css" rel="stylesheet" media="all" href="/drupal/sites/all/modules/ubercart/shipping/uc_quote/uc_quote.css?F" />
<link type="text/css" rel="stylesheet" media="all" href="/drupal/sites/all/modules/ubercart/uc_attribute/uc_attribute.css?F" />
<link type="text/css" rel="stylesheet" media="all" href="/drupal/sites/all/modules/ubercart/uc_order/uc_order.css?F" />
<link type="text/css" rel="stylesheet" media="all" href="/drupal/sites/all/modules/ubercart/uc_product/uc_product.css?F" />
<link type="text/css" rel="stylesheet" media="all" href="/drupal/sites/all/modules/ubercart/uc_store/uc_store.css?F" />
<link type="text/css" rel="stylesheet" media="all" href="/drupal/sites/all/modules/ubercart/uc_catalog/uc_catalog.css?F" />
<link type="text/css" rel="stylesheet" media="all" href="/drupal/sites/all/modules/ubercart/uc_cart/uc_cart_block.css?F" />
<link type="text/css" rel="stylesheet" media="all" href="/drupal/sites/all/themes/basic/css/default.css?F" />
<link type="text/css" rel="stylesheet" media="all" href="/drupal/sites/all/themes/basic/css/tabs.css?F" />
<link type="text/css" rel="stylesheet" media="all" href="/drupal/sites/all/themes/basic/css/layout.css?F" />
<link type="text/css" rel="stylesheet" media="all" href="/drupal/sites/all/themes/basic/css/style.css?F" />
<link type="text/css" rel="stylesheet" media="all" href="/drupal/sites/all/themes/basic/css/bilsland.css?F" />
<link type="text/css" rel="stylesheet" media="print" href="/drupal/sites/all/themes/basic/css/print.css?F" />So, with various forms of caching enabled on my site(s), viewing the source of the home page as an anonymous user reveals....... a spew worthy and unnecessary amount of CSS files. Honestly, it seems to me that lots of drupal code writers just shove their css into every page regardless of whether it is required or not.
Can we not do something about this? It's pretty disgusting.
You could have looked around
You could have looked around a little more and gone to your admin/settings/performance page and enabled 'CSS aggregation' instead of complaining about the way Drupal is modularized. And it's up to the modules to only include CSS when they need to. It's not automatically a 'OMG I HAVE CSS ADD IT!' kind of deal.
Drupal freelance developer | http://www.davereid.net/ | Help sponsor me to get to DrupalCon SF 2010!
I don't see any option in
I don't see any option in performance for css aggregation. Anyway, I don't really care whether it's one file or 20 files, it's still far more css than is required.
I don't think someone sat
I don't think someone sat there writing all that CSS for no reason - it all does stuff.
Chill
1. Many modules have a buncha extra CSS that is not really needed all the time
2. Using CSS aggregation makes this not as impactful.
3. If you've downloaded the css file once, you won't have to redownload it with each new page.
---------------------
"He's said to be outspoken, but nobody's actually seen anyone do it"
Yes Exactly,
I'm not using half those modules on the front page.
All I was trying to say is there could be better control of when a module's css file is included - ie only when necessary.
aggregate, but...
Yes, obviously you just turn on css aggregation and you end up with one file.
Best practice (IMO) is for modules to call their drupal_add_css() only when they detect that they are rendering something that needs their theming. It's not too tricky, we just do it inside our own theme_* functions and maybe the form_* function if needed. Not in hook_startup or whatever. If you identify a module that seems to be a bit gratuitous about that, let them know in the issue queue.
Looks to me like lots of those listed are pretty generic. extlink for example acts client-side, and may need to be invoked from any page on the site. Logontoboggon may be needed on any landing page, I think. Thickbox is also client-side AFAIK, do you think it could do a better job of detecting whether you really wanted to be able to use thickbox on that page? Usually better to err on the side of caution.
But unless you are actually on a page that is directly related to ubercart, they could probably be more selective. Not sure. Was there no shopping items or shopping cart on that page?
A good test will be to just disable the css you have decided is unneccessary and see what breaks. Module-provided css can be disabled from your theme - so try that. Just make an empty entry in your theme.info with the name of the stylesheet and it may get nulled out (may depend on your theme) of use theme_preprocess and zap them yourself.
I'm expecting that you'll actually lose some layout, but it's your call!
.dan.
Ubercart
As far as I can tell from the ubercart site I developed recently they load the CSS on every page load - it is loading the shipping css file on my contact page (using webform) and the shopping cart block has been disabled.
In their defense though, they did basically port OsCommerce to Drupal for us and offer it as a free shopping cart solution with a hell of a lot of modularised functionality...