Using DataTables, get alerts about undefined CSS classes, but they are...
kimptoc opened this issue · 13 comments
Hi,
I have just added the DataTables jquery plugin to my site ( http://www.datatables.net/ ) and now I get several alerts from html-inspector about unused classes, like so:
The class 'DataTables_sort_wrapper' is used in the HTML but not found in any stylesheet.
<div class="DataTables_sort_wrapper">…</div>
But they are defined... I have created a special css file just for these missing classes, containing empty definitions. And some of the alerts did go away, but some didnt, like the one above.
I am guessing the issue is due to the classes being added to the DOM dynamically - but then, the CSS definitions are not being added dynamically.
Any thoughts on why this might be happening?
Thanks,
Chris
PS, just updated to latest html-insp 0.4.1
If the CSS is not being added dynamically, it should be fine. You could try calling HTMLInspector.inspect() after a timeout of 3000ms or something like that just to make sure, but, like I said, it should work.
The only other thought I had is if you're using a CSS preprocessor or minifier, they sometimes strip out empty declarations. That may also be the problem.
Either way, I'd recommend whitelisting those classes instead of adding empty declarations. Whitelisting is what I always do with third party stuff that doesn't follow my rules.
Hi - its a Backbone, SPA app - but the CSS is referenced in the initial index.html page and I already have a few seconds delay before calling HTML Inspector :)
No minifiers/preprocessors (yet).
Thanks for the whitelisting tip - will try that.
Cheers,
Chris
Is this anywhere online that I can take a look? It's hard to know without seeing a test case, but if this is in fact a bug I'd like to track it down.
Try this - http://jsfiddle.net/kimptoc/YtUdy/ - this is on a 15 second delay before calling html-inspector. An example class that is in the css file is dataWrapper_info, but it gets reported as used but not in CSS.
Hmmmm, this appears to be because you're loading the CSS file from a different domain. I'm not sure if this can be fixed.
If you look at the document.styleSheets object in the Web console, you'll see that the style sheet for the datatables plugin is returning null for its cssRules property. Perhaps there's a way to get this to work but I'm not sure how. I know very little about cross-origin stuff.
Here's all I could find in the spec. Apparently the origin-clean flag must be set appropriately to access cssRules: http://dev.w3.org/csswg/cssom/#concept-css-style-sheet-css-rules
Not at my desk now but I think I would get same error if CSS copied directly into js fiddle - I use local file in my app
I don't see them when I copy the CSS directly into jsfiddle: http://jsfiddle.net/VKKXc/
I see what you mean, strange.
Here is a local css file based version:
http://ssdvps1.kimptoc.net/test/
Source here - although should all be visible - https://github.com/kimptoc/html-inspector-with-datatables
Weird, if you type the following line into the web console (in Chrome), here's what you get:
document.styleSheets[0].cssRules[0].selectorText
// table.datatableNotice that the "t" in datatable is lowercase. It's uppercase in Firefox.
I don't think this is just a Chrome issue because I've checked a few other sites that I know use uppercase letters in CSS selectors, and they work fine.
Can you think of any reason why this may be happening only on your site?
It seems class names are case insensitive but HTML attribs are case sensitive ... http://stackoverflow.com/questions/12533926/are-class-names-in-css-selectors-case-sensitive
Confusing ...
OK, I think I tracked this down. If you add a doctype to the top of your page, it works <!DOCTYPE html>.
Yes, that helps a lot :)
Thanks for the help - and I always thought those DOCTYPE lines didnt help... :)