CSS files can't register themselves with YUI like the script files can, so there isn't a reliable way to know you pre-loaded it. But you can tell YUI that you've done so.

If you want to front load all your css, you can set 'fetchCSS' to false.

If you want to front load some of the CSS, and not the rest, you can use the 'ignore' config

ignore: ['css-fonts', ...

Does that help?

This report came out of a question asked during Matt Sweeney's talk, where someone asked how, if they were making a widget that depended on Grids, how could they know if the grids was available, to which Matt replied that it could be listed as 'required' in the users 'add' statement. This is where I potentially see this actually getting triggered.

I'll be honest, I really don't have an answer, and with CSS3 grids being fairly small, it may not be worth looking at too closely, as the only way I can think to address it would be to have loader do a pattern match against the href's in the link tags in the header, or looking for yui3-g or yui3-u classes on the page. Both of these add overhead and are not necessarily reliable, though there results could be cached, so it would be a one-time check which could potentially be deferred using the conditional loading code in the loader framework.

This may well be a WONTFIX or INVALID issue, as it's hard to say if it's even likely to be triggered, or if it being triggered is a problem, I did notice that Loader won't reload CSS Grids if YUI().use('cssgrids') is executed again, so Loader already has a small amount of smarts on this, but it seemed like something that there *may* be a solution to, even if it's not something that warrants immediate attention.

As things are now, there isn't a good way to know what YUI CSS is on the page. Normally this isn't a huge hurdle, but if we want to try to do something about it we could consider adding a convention to the css that would be detectable by the loader.

I have considered testing "fake" properties in the CSS build file's to determine if they loaded..

Something like this at the bottom of the grids file (generated by builder):

body {
yui3-cssgrids: 'loaded';
}

Note: I haven't tested this and I'm not sure if it would even work.

Matt Sweeney and I discussed this at YUIConf last week and came up with this prototype:

When YUI stamps the page, it creates an element called #yui-css-enabler
Then the builder stamps all CSS files with this at the end: #yui-css-enabler.MODULE_NAME { font-weight: bold; /* Or another property */}

Then Loader can add the class to the element and check if the style is applied. If it is, the CSS file is loaded, if it is not, load it..

Pull request for this code: https://github.com/yui/yui3/pull/56

Fixes #2529521 - Added CSS Stamp detection for pre-loaded CSS files.
View Commit: 7128e1d29f3b88ea3ea918b0a71359c39183c69f

Fixes #2529521 - Added CSS Stamp detection for pre-loaded CSS files.
View Commit: 7128e1d29f3b88ea3ea918b0a71359c39183c69f

checkedin -> closed